/* =====================================================================
   Track Activos · Diseño de las pantallas internas (después de iniciar sesión)
   Se carga DESPUÉS de app.css y solo en panel.html y tablet.html (y la barra de documento.html).
   Todo está acotado a body.app / body.app-doc: el Login no carga este archivo y no cambia.
   ===================================================================== */

body.app{
  --bg:#f3f5f1; --bar:#fff; --card:#fff; --ink:#1d2719; --muted:#667161; --line:#e3e8de; --soft:#f7f9f5;
  --accent:#5f9a2c; --accent-ink:#fff; --accent-d:#4b7e20; --brand:#8dc63f; --accent-soft:#eaf4dc;
  --side:#1c2619; --side-ink:#d7e0d1; --side-mut:#8b9a84; --side-hover:rgba(255,255,255,.07); --side-on:rgba(141,198,63,.16);
  --danger:#c62828; --r:12px; --sh:0 1px 2px rgba(20,32,14,.06),0 1px 3px rgba(20,32,14,.05);
  --ring:rgba(95,154,44,.45);
  background:var(--bg); color:var(--ink);
  font:14.5px/1.45 "Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif; padding-bottom:0;
}
/* Tema: tema.js pone la clase "dark" en <html> según la elección (Automático / Claro / Oscuro). */
html:not(.dark){ color-scheme:light; }
html.dark{ color-scheme:dark; }
body.app .sin-folio{ color:var(--muted); font-weight:500; font-style:italic; }
body.app{ /* paleta de gráficos del dashboard (claro) */
  --viz-e-borrador:#e87ba4; --viz-e-enviado:#2a78d6; --viz-e-abierto:#eda100; --viz-e-firmado:#008300; --viz-e-vencido:#e34948; --viz-e-anulado:#6250d6;
  --viz-t-asignacion:#1baf7a; --viz-t-devolucion:#eb6834; --viz-grid:#e6ebe1; }
html.dark body.app{
  --bg:#121710; --bar:#1b2218; --card:#1b2218; --ink:#e8efe4; --muted:#9aa793; --line:#2d3829; --soft:#202a1d;
  --accent:#86c043; --accent-ink:#102300; --accent-d:#9ad14b; --accent-soft:rgba(134,192,67,.14);
  --side:#0d120b; --danger:#ff8a80; --ring:rgba(134,192,67,.5); --sh:0 1px 2px rgba(0,0,0,.4);
  --viz-e-borrador:#d55181; --viz-e-enviado:#3987e5; --viz-e-abierto:#c98500; --viz-e-firmado:#008300; --viz-e-vencido:#e66767; --viz-e-anulado:#9085e9;
  --viz-t-asignacion:#199e70; --viz-t-devolucion:#d95926; --viz-grid:#2c3529;
}

/* ---------- Iconos y botones ---------- */
body.app .i{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; flex:none; }
body.app button, body.app .btn{
  font:inherit; font-size:14px; font-weight:600; min-height:38px; padding:0 14px; gap:8px; justify-content:center;
  border-radius:10px; border:1px solid var(--line); background:var(--bar); color:var(--ink);
  transition:background .15s,border-color .15s,box-shadow .15s,transform .05s; }
body.app button:hover:not(:disabled), body.app .btn:hover{ background:var(--soft); border-color:color-mix(in srgb,var(--muted) 35%,var(--line)); }
body.app button:active:not(:disabled), body.app .btn:active{ transform:translateY(1px); }
body.app button:focus-visible, body.app .btn:focus-visible, body.app input:focus-visible, body.app select:focus-visible, body.app summary:focus-visible{
  outline:3px solid var(--ring); outline-offset:1px; }
body.app .primary{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
body.app .primary:hover:not(:disabled){ background:var(--accent-d); border-color:var(--accent-d); }
body.app .small{ min-height:32px; padding:0 10px; font-size:13px; border-radius:8px; }
body.app .danger{ color:var(--danger); border-color:color-mix(in srgb,var(--danger) 35%,var(--line)); }
body.app .danger:hover:not(:disabled){ background:color-mix(in srgb,var(--danger) 9%,var(--bar)); }
body.app .icon-btn{ width:36px; min-height:36px; padding:0; }

/* ---------- Formularios ---------- */
body.app input.inp, body.app select.inp{
  font-size:15px; height:40px; padding:0 11px; border-radius:10px; border:1px solid var(--line); background:var(--bar); color:var(--ink); }
body.app input.inp:focus, body.app select.inp:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); }
body.app label.fld{ font-size:12.5px; font-weight:600; color:var(--muted); margin:12px 0 5px; }
body.app .row{ gap:12px; } body.app .row > *{ min-width:160px; }
body.app .hint{ color:var(--muted); font-size:13px; }
body.app .err{ color:var(--danger); }
body.app .foot{ margin-top:16px; }

/* ---------- Estructura: barra lateral + contenido ---------- */
body.app .shell{ display:grid; grid-template-columns:252px minmax(0,1fr); min-height:100vh; }
body.app .side{ background:var(--side); color:var(--side-ink); padding:18px 14px; display:flex; flex-direction:column; gap:6px;
  position:sticky; top:0; height:100vh; overflow-y:auto; }
body.app .side .brand{ font:700 22px Arial,Helvetica,sans-serif; letter-spacing:-.3px; padding:4px 10px 14px; }
body.app .side .brand .p{ color:#f1f4ee; } body.app .side .brand .s{ color:var(--brand); }
body.app .cta{ display:grid; gap:8px; padding:0 4px 12px; }
body.app .side .cta button{ justify-content:flex-start; height:42px; background:var(--brand); border-color:var(--brand); color:#142008; }
body.app .side .cta button:hover:not(:disabled){ background:#a0d554; border-color:#a0d554; }
body.app .side .cta button.sec{ background:transparent; border-color:rgba(255,255,255,.22); color:#e8efe3; }
body.app .side .cta button.sec:hover:not(:disabled){ background:var(--side-hover); border-color:rgba(255,255,255,.3); }
body.app .grp{ font-size:11px; letter-spacing:.9px; text-transform:uppercase; color:var(--side-mut); padding:14px 12px 6px; font-weight:700; }
body.app .nav{ display:flex; flex-direction:column; gap:2px; }
body.app .navgrp{ display:flex; flex-direction:column; gap:2px; }
body.app .navgrp:not(:has(> a, > button:not([hidden]))){ display:none; }
body.app .nav a, body.app .nav button{
  width:100%; justify-content:flex-start; min-height:42px; padding:0 12px; gap:12px; border-radius:10px; border:0; background:transparent;
  color:var(--side-ink); font-weight:600; text-decoration:none; position:relative; display:flex; align-items:center; cursor:pointer; }
body.app .nav a:hover, body.app .nav button:hover:not(:disabled){ background:var(--side-hover); border-color:transparent; }
body.app .nav .on{ background:var(--side-on); color:#fff; }
body.app .nav .on::before{ content:""; position:absolute; left:-14px; top:9px; bottom:9px; width:4px; border-radius:0 4px 4px 0; background:var(--brand); }
body.app .nav .n{ margin-left:auto; font-size:12px; background:rgba(255,255,255,.12); padding:1px 8px; border-radius:20px; }
body.app .me{ margin-top:auto; border-top:1px solid rgba(255,255,255,.1); padding:14px 6px 2px; display:flex; align-items:center; gap:10px; }
body.app .av{ width:38px; height:38px; border-radius:50%; background:var(--brand); color:#142008; display:grid; place-items:center; font-weight:800; flex:none; }
body.app .me .who{ min-width:0; color:var(--side-mut); font-size:12px; line-height:1.25; }
body.app .me .who b{ display:block; color:#fff; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.app .me .out{ margin-left:auto; width:36px; min-height:36px; padding:0; border:0; background:transparent; color:var(--side-mut); }
body.app .me .out:hover:not(:disabled){ color:#fff; background:var(--side-hover); }

body.app .main{ padding:26px clamp(16px,3vw,38px) 44px; min-width:0; }
body.app .page-h{ margin-bottom:18px; }
body.app .page-h h1{ margin:0; font-size:26px; letter-spacing:-.4px; }
body.app .page-h p{ margin:3px 0 0; color:var(--muted); }

body.app .banner{ background:#fff8e6; color:#6b4c00; border:1px solid #f1d58a; border-radius:var(--r); padding:11px 14px; gap:12px; margin-bottom:16px; }
body.app .banner .i{ color:#b07a00; }
body.app .banner button{ margin-left:auto; }
html.dark body.app .banner{ background:#3a3114; color:#f3dca0; border-color:#5b4c1c; }

/* ---------- Contadores de estado (también filtran) ---------- */
body.app .stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(136px,1fr)); gap:12px; margin-bottom:18px; }
body.app .stat{ display:grid; grid-template-columns:auto 1fr; gap:0 12px; align-items:center; text-align:left; min-height:0; padding:13px 14px; height:auto;
  border-radius:var(--r); background:var(--card); border:1px solid var(--line); box-shadow:var(--sh); font-weight:400; justify-content:stretch; }
body.app .stat:hover:not(:disabled){ background:var(--card); border-color:color-mix(in srgb,var(--c) 45%,var(--line)); transform:translateY(-1px); }
body.app .stat .ic{ grid-row:span 2; width:40px; height:40px; border-radius:11px; display:grid; place-items:center;
  background:color-mix(in srgb,var(--c) 14%,var(--card)); color:var(--c); }
body.app .stat b{ font-size:24px; line-height:1.05; letter-spacing:-.5px; display:block; }
body.app .stat > span:last-child{ font-size:13px; color:var(--muted); }
body.app .stat.on{ border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); }

/* ---------- Filtros y tabla de documentos ---------- */
body.app .panel{ background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--sh); overflow:hidden; }
body.app .filters{ margin:0; padding:14px; gap:10px; border-bottom:1px solid var(--line); }
body.app .search{ position:relative; flex:1; min-width:230px; }
body.app .search .i{ position:absolute; left:12px; top:11px; color:var(--muted); pointer-events:none; }
body.app .search input.inp{ padding-left:38px; background:var(--soft); }
body.app .filters select.inp{ width:auto; max-width:190px; }
body.app .chk.switch{ gap:9px; cursor:pointer; user-select:none; }
body.app .chk.switch input{ appearance:none; -webkit-appearance:none; width:34px; height:20px; border-radius:20px; background:color-mix(in srgb,var(--muted) 40%,var(--line)); position:relative; cursor:pointer; transition:.15s; margin:0; flex:none; }
body.app .chk.switch input::after{ content:""; position:absolute; left:2px; top:2px; width:16px; height:16px; border-radius:50%; background:#fff; transition:.15s; box-shadow:0 1px 2px rgba(0,0,0,.3); }
body.app .filters .chk.switch input{ flex:none; min-width:0; }
body.app .chk.switch input:checked{ background:var(--accent); } body.app .chk.switch input:checked::after{ left:16px; }
body.app .filters .sp{ flex:1; }

body.app .list{ display:block; }
body.app table.docs{ width:100%; border-collapse:collapse; }
body.app table.docs thead th{ background:var(--soft); text-align:left; font-size:11.5px; letter-spacing:.7px; text-transform:uppercase; color:var(--muted);
  padding:11px 14px; border-bottom:1px solid var(--line); white-space:nowrap; font-weight:700; }
body.app table.docs td{ padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:middle; }
body.app table.docs tbody tr:last-child td{ border-bottom:0; }
body.app table.docs tbody tr:hover{ background:color-mix(in srgb,var(--accent) 5%,var(--card)); }
body.app table.docs .folio{ font-weight:700; font-size:14px; font-variant-numeric:tabular-nums; white-space:nowrap; }
body.app table.docs .who b{ display:block; } body.app table.docs .who small{ color:var(--muted); font-size:12.5px; }
body.app table.docs .tipo{ display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:13px; white-space:nowrap; }
body.app table.docs .fecha{ color:var(--muted); white-space:nowrap; font-size:13px; }
body.app table.docs .acts{ display:flex; gap:6px; justify-content:flex-end; flex-wrap:nowrap; }
body.app .list-foot{ padding:12px 16px; color:var(--muted); font-size:13px; border-top:1px solid var(--line); background:var(--soft); }
body.app .empty{ border:0; padding:44px 20px; color:var(--muted); }

/* ---------- Insignias de estado ---------- */
body.app .badge{ display:inline-flex; align-items:center; gap:6px; font:700 12px "Segoe UI",system-ui,sans-serif; text-transform:none; letter-spacing:0;
  padding:3px 10px 3px 8px; border-radius:20px; background:color-mix(in srgb,var(--c,#7a8574) 13%,var(--card)); color:color-mix(in srgb,var(--c,#7a8574) 80%,var(--ink)); }
body.app .badge::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--c,#7a8574); flex:none; }
body.app .b-borrador{ --c:var(--viz-e-borrador); } body.app .b-enviado{ --c:var(--viz-e-enviado); } body.app .b-abierto{ --c:var(--viz-e-abierto); }
body.app .b-firmado{ --c:var(--viz-e-firmado); } body.app .b-vencido{ --c:var(--viz-e-vencido); } body.app .b-anulado{ --c:var(--viz-e-anulado); }
body.app .b-muted{ --c:#8a9185; }
body.app .role{ font-size:12px; font-weight:700; padding:2px 9px; border-radius:6px; background:var(--soft); color:var(--muted); border:1px solid var(--line); white-space:nowrap; }

/* ---------- Ventanas ---------- */
body.app .modal{ background:rgba(14,22,10,.55); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
body.app .modal .card{ border-radius:16px; padding:22px; box-shadow:0 24px 70px rgba(0,0,0,.35); border:1px solid var(--line); }
body.app .modal .card.wide{ width:min(96vw,980px); }
body.app .modal .card .card{ box-shadow:none; border-radius:12px; background:var(--soft); padding:16px; }
body.app .modal h3{ font-size:18px; letter-spacing:-.2px; margin:0 0 6px; }
body.app .modal .foot{ padding-top:14px; border-top:1px solid var(--line); }
body.app .kv{ gap:6px 16px; padding:12px 14px; border-radius:10px; background:var(--soft); border:1px solid var(--line); }
body.app .timeline{ border-left-color:var(--line); }
body.app .toast{ background:#1c2619; border-radius:10px; }

/* ---------- Tablas secundarias (responsables, dashboard, formatos) ---------- */
body.app .tbl-wrap{ border:1px solid var(--line); border-radius:12px; overflow:auto; }
body.app .users th{ background:var(--soft); font-size:11.5px; letter-spacing:.7px; padding:10px 12px; border-bottom:1px solid var(--line); white-space:nowrap; }
body.app .users td{ padding:10px 12px; }
body.app .users tbody tr:last-child td{ border-bottom:0; }
body.app .users .acts{ gap:6px; }
body.app .split{ display:grid; grid-template-columns:minmax(0,1fr); gap:18px; margin-top:12px; }
body.app .split .uform{ background:var(--soft); border:1px solid var(--line); border-radius:14px; padding:16px 18px; }
body.app .split .uform h3{ margin-top:0; }
body.app .split .uform .row{ gap:12px; } body.app .split .uform .row > *{ min-width:0; }
body.app .split .uform .row > div{ flex:1 1 220px; }
body.app .split .uform .foot{ border-top:0; padding-top:0; }
body.app .users .acts{ flex-wrap:nowrap; } body.app .users td:last-child{ white-space:nowrap; }
body.app .modal .card.xwide{ width:min(96vw,1100px); }

/* ---------- Tablet de firma ---------- */
body.app.tablet .top{ position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--bar); border-bottom:1px solid var(--line); padding:12px clamp(14px,3vw,28px); }
body.app.tablet .top .brand{ font:700 22px Arial,Helvetica,sans-serif; letter-spacing:-.3px; }
body.app.tablet .top .brand .p{ color:#4d4d4f; } body.app.tablet .top .brand .s{ color:var(--brand); }
html.dark body.app.tablet .top .brand .p{ color:#d6dad3; }
body.app.tablet .top .acts{ display:flex; gap:8px; align-items:center; }
body.app.tablet .top .who{ color:var(--muted); font-size:13px; }
body.app.tablet .wrap{ max-width:880px; padding:24px clamp(14px,3vw,28px) 40px; }
body.app.tablet .t-head h1{ font-size:30px; letter-spacing:-.5px; }
body.app.tablet .tq-item{ border-radius:16px; box-shadow:var(--sh); min-height:92px; transition:border-color .15s,box-shadow .15s,transform .05s; }
body.app.tablet .tq-item:hover{ border-color:var(--accent); box-shadow:0 6px 18px rgba(95,154,44,.16); }
body.app.tablet .tq-item .go{ display:inline-flex; align-items:center; gap:6px; background:var(--accent); color:var(--accent-ink); padding:10px 16px; border-radius:12px; font-size:16px; }
body.app.tablet .empty{ background:var(--card); border:1.5px dashed var(--line); border-radius:18px; margin-top:6px; }
body.app.tablet .pin-inp{ border-radius:14px; height:72px; }

/* ---------- Barra del documento (sin tocar la hoja del acta) ---------- */
body.app-doc .toolbar{ --ring:rgba(95,154,44,.45); padding:10px clamp(12px,2vw,24px); gap:12px; box-shadow:0 1px 2px rgba(20,32,14,.06); }
body.app-doc .toolbar .tb-left{ display:flex; align-items:center; gap:12px; min-width:0; }
body.app-doc .toolbar .doc-head{ min-width:0; line-height:1.2; }
body.app-doc .toolbar .doc-head b{ display:flex; align-items:center; gap:10px; font-size:16px; letter-spacing:-.2px; }
body.app-doc .toolbar .doc-head small{ color:var(--muted); }
body.app-doc .toolbar .i{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; flex:none; }
body.app-doc .toolbar button, body.app-doc .toolbar .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:38px; padding:0 14px; border-radius:10px; font-weight:600; font-size:14px;
  text-decoration:none; transition:background .15s,border-color .15s; }
body.app-doc .toolbar button:hover:not(:disabled), body.app-doc .toolbar .btn:hover{ background:color-mix(in srgb,var(--accent) 8%,var(--bar)); border-color:color-mix(in srgb,var(--accent) 40%,var(--line)); }
body.app-doc .toolbar button.primary:hover:not(:disabled){ background:color-mix(in srgb,var(--accent) 88%,#000); }
/* tema de la barra y ventanas del documento (la hoja del acta siempre es blanca) */
body.app-doc{ --bg:#e7ece3; --bar:#fff; --ink:#1f2a1c; --muted:#5f6b5a; --line:#cfd6c8; --accent:#5f9a2c; --accent-ink:#fff; }
html.dark body.app-doc{ --bg:#171b16; --bar:#232922; --ink:#e7eee3; --muted:#9fab98; --line:#3a4437; --accent:#86c043; --accent-ink:#102300; }
body.app-doc .toolbar .icon-btn{ width:38px; padding:0; }
body.app-doc .toolbar .save-state{ color:var(--muted); font-size:13px; }
body.app-doc .toolbar .btn{ border:1px solid var(--line); background:var(--bar); color:var(--ink); }

/* ---------- Adaptación a laptops, tablets y pantallas pequeñas ---------- */
@media (max-width:1180px){
  body.app .shell{ grid-template-columns:76px minmax(0,1fr); }
  body.app .side{ padding:14px 10px; align-items:center; }
  body.app .side .brand{ font-size:0; padding:4px 0 10px; } body.app .side .brand::before{ content:"P"; font:800 24px Arial; color:var(--brand); }
  body.app .cta{ padding:0 0 10px; }
  body.app .side .cta button{ width:46px; padding:0; justify-content:center; font-size:0; gap:0; }
  body.app .grp{ font-size:0; padding:0; height:1px; background:rgba(255,255,255,.1); margin:8px 0; width:40px; }
  body.app .nav a, body.app .nav button{ width:46px; height:44px; padding:0; justify-content:center; font-size:0; gap:0; }
  body.app .nav .n{ display:none; } body.app .nav .on::before{ left:-10px; }
  body.app .me{ flex-direction:column; border:0; padding:10px 0 0; } body.app .me .who{ display:none; } body.app .me .out{ margin:0; }
  body.app .split{ grid-template-columns:1fr; }
  body.app .modal .card.xwide{ width:min(96vw,980px); }
}
@media (max-width:720px){
  body.app .shell{ grid-template-columns:minmax(0,1fr); padding-bottom:68px; }
  body.app .side{ position:fixed; inset:auto 0 0 0; height:64px; width:100%; flex-direction:row; justify-content:space-around; align-items:center; padding:6px; gap:0; z-index:20; overflow:visible; }
  body.app .side .brand, body.app .side .cta, body.app .grp, body.app .me .who{ display:none; }
  body.app .nav{ flex-direction:row; justify-content:space-around; flex:1; } body.app .nav .on::before{ display:none; }
  body.app .me{ margin:0; padding:0; border:0; flex-direction:row; }
  body.app .stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
/* Tabla de documentos: en pantallas angostas cada fila pasa a un bloque compacto con las acciones a la derecha */
@media (max-width:900px){
  body.app table.docs thead{ display:none; }
  body.app table.docs, body.app table.docs tbody{ display:block; }
  body.app table.docs tbody tr{ display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"folio acts" "who acts" "estado acts";
    gap:3px 12px; padding:12px 14px; border-bottom:1px solid var(--line); align-items:center; }
  body.app table.docs tbody tr:last-child{ border-bottom:0; }
  body.app table.docs td{ border:0; padding:0; min-width:0; }
  body.app table.docs td.folio{ grid-area:folio; } body.app table.docs td.who{ grid-area:who; }
  body.app table.docs td.col-estado{ grid-area:estado; padding-top:3px; } body.app table.docs td:last-child{ grid-area:acts; }
  body.app table.docs td.fecha, body.app table.docs td.col-tipo{ display:none; }
  body.app .filters{ gap:8px; } body.app .filters .sp{ display:none; }
}
@media print{ body.app .side{ display:none; } }