/*
  Cotizador Aa Labs — hoja de estilo del panel.

  CSS plano a proposito: sin Node, sin Vite, sin paso de compilacion. En un
  hosting sin SSH donde el despliegue es subir un ZIP, un build entre el codigo
  y el servidor es una pieza mas que se puede romper y que nadie puede depurar
  desde alla. Este archivo se sube tal cual.

  El sistema visual es el de la maqueta aprobada el 26/08/2026: neutro frio
  sesgado a verde, acento viridiano de contador, rojo de raya de poliza solo
  para retenciones y negativos.
*/

:root{
  --paper:#F5F7F4; --surface:#FFFFFF; --surface-2:#EDF1EC;
  --ink:#16211C; --ink-2:#3B4B44; --muted:#6B7A73;
  --line:#DCE3DD; --line-2:#C7D2CA;
  --accent:#0B6B54; --accent-ink:#08543F; --accent-soft:#E1EFE9;
  --rule:#C2453A; --rule-soft:#F7E5E3;
  --warn:#8A5B10; --warn-soft:#FBF0DA;
  --rail:#132019; --rail-ink:#D3E0D8; --rail-muted:#7C8F84;
  --shadow:0 1px 2px rgba(22,33,28,.06), 0 8px 24px -12px rgba(22,33,28,.18);
  --radius:6px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0E1512; --surface:#161F1A; --surface-2:#1D2822;
    --ink:#E7EFE9; --ink-2:#B9C8BF; --muted:#83978C;
    --line:#2A3630; --line-2:#3A4941;
    --accent:#4FCFA6; --accent-ink:#7FE0C1; --accent-soft:#163028;
    --rule:#E58177; --rule-soft:#33201E;
    --warn:#D9A752; --warn-soft:#2E2617;
    --rail:#0A100D; --rail-ink:#C6D6CC; --rail-muted:#6E8177;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --paper:#0E1512; --surface:#161F1A; --surface-2:#1D2822;
  --ink:#E7EFE9; --ink-2:#B9C8BF; --muted:#83978C;
  --line:#2A3630; --line-2:#3A4941;
  --accent:#4FCFA6; --accent-ink:#7FE0C1; --accent-soft:#163028;
  --rule:#E58177; --rule-soft:#33201E;
  --warn:#D9A752; --warn-soft:#2E2617;
  --rail:#0A100D; --rail-ink:#C6D6CC; --rail-muted:#6E8177;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper); color:var(--ink);
  font-family:"Archivo","Segoe UI",system-ui,sans-serif;
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
.num{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
h1,h2,h3{margin:0;text-wrap:balance;font-weight:600;letter-spacing:-.01em}
a{color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- estructura ---------- */
.app{display:grid;grid-template-columns:216px minmax(0,1fr);min-height:100vh}
@media (max-width:860px){.app{grid-template-columns:1fr}.rail{position:static;height:auto}}

.rail{background:var(--rail);color:var(--rail-ink);display:flex;flex-direction:column;gap:2px;
      padding:16px 10px;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:9px;padding:4px 8px 16px;text-decoration:none;color:inherit}
.mark{width:26px;height:26px;border-radius:5px;background:var(--accent);color:#04150F;
      display:grid;place-items:center;font-weight:700;font-size:13px;letter-spacing:-.03em;flex:none}
.brand b{font-size:13.5px;font-weight:600;display:block;line-height:1.2}
.brand span{font-size:10.5px;color:var(--rail-muted);letter-spacing:.06em;text-transform:uppercase}

.navbtn{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;border:0;
        color:var(--rail-muted);font:inherit;font-size:13px;padding:7px 9px;border-radius:5px;
        cursor:pointer;text-decoration:none;transition:background .12s,color .12s}
.navbtn:hover{background:rgba(255,255,255,.05);color:var(--rail-ink)}
.navbtn[aria-current="page"]{background:rgba(255,255,255,.09);color:#fff;font-weight:500}
.navbtn svg{flex:none;opacity:.85}
.rail hr{border:0;border-top:1px solid rgba(255,255,255,.09);margin:10px 6px;width:100%}
.rail .spacer{flex:1}
.railfoot{padding:9px;border-radius:6px;background:rgba(255,255,255,.05);
          font-size:11.5px;color:var(--rail-muted);line-height:1.45}
.railfoot b{color:var(--rail-ink);font-weight:600;display:block;font-size:12px}
.meter{height:4px;border-radius:2px;background:rgba(255,255,255,.12);margin:7px 0 5px;overflow:hidden}
.meter i{display:block;height:100%;background:var(--accent)}
.meter i.lleno{background:var(--warn)}

main{min-width:0;padding:22px 28px 64px}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;
      padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:22px}
.eyebrow{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);
         font-weight:600;margin-bottom:5px}
.head h1{font-size:23px}
.head p{margin:5px 0 0;color:var(--muted);font-size:13px;max-width:62ch}

/* ---------- controles ---------- */
.btn{font:inherit;font-size:13px;font-weight:500;padding:7px 13px;border-radius:5px;
     border:1px solid var(--line-2);background:var(--surface);color:var(--ink);cursor:pointer;
     text-decoration:none;display:inline-block;transition:border-color .12s,background .12s}
.btn:hover{border-color:var(--muted)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:#fff}
:root[data-theme="dark"] .btn.pri{color:#04150F}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn.pri{color:#04150F}}
.btn.pri:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
.btn.peligro{color:var(--rule);border-color:var(--rule-soft)}
.btn.peligro:hover{border-color:var(--rule)}
.btn[disabled],.btn.inerte{opacity:.5;pointer-events:none}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card>header{padding:12px 16px;border-bottom:1px solid var(--line);
             display:flex;align-items:center;justify-content:space-between;gap:12px}
.card>header h2{font-size:14px}
.card>header .hint{font-size:11.5px;color:var(--muted)}
.card .body{padding:16px}

.pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;
      padding:2.5px 8px;border-radius:99px;white-space:nowrap}
.pill.ok{background:var(--accent-soft);color:var(--accent-ink)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.dim{background:var(--surface-2);color:var(--muted)}
.pill.hot{background:var(--rule-soft);color:var(--rule)}
.dot{width:5px;height:5px;border-radius:99px;background:currentColor}

table{width:100%;border-collapse:collapse}
th{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);
   font-weight:600;text-align:left;padding:9px 12px;border-bottom:1px solid var(--line)}
td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
.r{text-align:right}
.tablewrap{overflow-x:auto}
.vacio{padding:34px 16px;text-align:center;color:var(--muted)}
.vacio b{display:block;color:var(--ink);font-size:14px;margin-bottom:4px}

/* ---------- formularios ---------- */
.f{display:flex;flex-direction:column;gap:4px;min-width:0}
.f label{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:600}
input,select,textarea{font:inherit;font-size:13px;color:var(--ink);background:var(--surface);
       border:1px solid var(--line-2);border-radius:4px;padding:6px 8px;width:100%;min-width:0}
input:hover,select:hover,textarea:hover{border-color:var(--muted)}
textarea{min-height:70px;resize:vertical}
input.num{text-align:right}
.rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.rejilla .ancho{grid-column:1/-1}
.acciones{display:flex;gap:8px;justify-content:flex-end;padding:13px 16px;border-top:1px solid var(--line)}
.tiny{font-size:11px;color:var(--muted)}
.error{color:var(--rule);font-size:11.5px}
input[aria-invalid="true"],select[aria-invalid="true"]{border-color:var(--rule)}

/* ---------- avisos ---------- */
.note{display:flex;gap:9px;padding:10px 12px;border-radius:5px;font-size:12px;line-height:1.5;
      background:var(--warn-soft);color:var(--warn);border:1px solid rgba(138,91,16,.25)}
.note.info{background:var(--accent-soft);color:var(--accent-ink);border-color:rgba(11,107,84,.22)}
.note.malo{background:var(--rule-soft);color:var(--rule);border-color:rgba(194,69,58,.25)}
.note b{font-weight:600}
.note svg{flex:none;margin-top:1px}
.flash{margin-bottom:18px}

/* ---------- panel ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:12px;margin-bottom:22px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:13px 15px}
.stat .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600}
.stat .v{font-size:25px;font-weight:600;letter-spacing:-.02em;margin-top:3px;display:flex;align-items:baseline;gap:6px}
.stat .v small{font-size:12px;font-weight:500;color:var(--muted)}

.taxtag{font-family:"IBM Plex Mono",monospace;font-size:11.5px;font-weight:500}

/* ---------- armado de cotizacion ---------- */
.armado{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
@media (max-width:1080px){.armado{grid-template-columns:minmax(0,1fr)}}
.sum{position:sticky;top:22px}

td.desc input[type=text]{border-color:transparent;background:none;padding-left:0}
td.desc input[type=text]:hover,td.desc input[type=text]:focus{border-color:var(--line-2);background:var(--surface);padding-left:8px}
.linetax{font-size:12px;padding:5px 6px}
.quitar{border:0;background:none;color:var(--muted);cursor:pointer;font-size:16px;line-height:1;padding:3px 6px;border-radius:4px}
.quitar:hover{background:var(--rule-soft);color:var(--rule)}

/* El resumen: cada renglon de impuesto muestra SU PROPIA BASE. Ese es el
   antidoto contra el galimatias — nadie tiene que preguntarse sobre que se
   calculo cada cifra. */
.sres{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:4px 0;font-size:13px}
.sres>span:first-child{color:var(--ink-2);min-width:0}
.sbase{display:block;font-size:10.5px;color:var(--muted)}
.sres>span:last-child{white-space:nowrap;font-weight:500}
.sres.apagado>span{color:var(--muted);font-weight:400}
.sres.resta>span:last-child{color:var(--rule)}
.sres.suma{border-top:1px solid var(--line);margin-top:7px;padding-top:9px;font-weight:600}
.sres.total{border-top:2px solid var(--ink);margin-top:9px;padding-top:11px;font-size:15px;font-weight:600}
.sres.total>span:last-child{font-size:20px;letter-spacing:-.02em}
.ssec{margin-top:9px;padding-top:9px;border-top:1px dashed var(--line-2)}
.sgrupo{font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:600;margin-bottom:3px}

.editret{margin-top:12px;padding-top:11px;border-top:1px solid var(--line)}
.editret label{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:600;display:block;margin-bottom:4px}
.restaurar{font-size:10.5px;color:var(--accent-ink);background:none;border:0;padding:0;cursor:pointer;
           text-decoration:underline;font-family:inherit;white-space:nowrap}

/* ---------- acceso ---------- */
.acceso{min-height:100vh;display:grid;place-items:center;padding:24px}
.acceso .caja{width:100%;max-width:370px}
.acceso .marca{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:20px}
.acceso .marca .mark{width:32px;height:32px;font-size:15px}
.acceso .marca b{font-size:16px;font-weight:600;display:block;line-height:1.2}
.acceso .marca span{font-size:10.5px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.acceso .card .body{display:grid;gap:14px}
.acceso .pie{text-align:center;margin-top:16px;font-size:11.5px;color:var(--muted)}

/* ═══════════════════════════════════════════════════════════════════════════
   TELÉFONO
   ═══════════════════════════════════════════════════════════════════════════

   El público de esto son dueños de PyMEs. Abren la cotización en el celular,
   entre un cliente y otro. Que la página se desplace de lado no es un detalle
   estético: es la primera impresión del producto.

   Lo que rompía, medido y no supuesto:

   1. Tablas anchas. Una tabla de partidas mide ~540 px de contenido mínimo.
      Metida en una tarjeta, empujaba la tarjeta, la tarjeta empujaba la
      rejilla y la rejilla empujaba la página entera: 626 px de ancho en una
      pantalla de 375.

   2. Rejillas de una sola columna con pista «auto». Una pista auto crece
      hasta el contenido más ancho que tenga dentro, así que heredaba el
      problema de la tabla en lugar de contenerlo.

   3. Rejillas repeat(auto-fit, minmax(340px,1fr)). Debajo de 340 px de
      espacio disponible, esa pista NO se encoge: se queda en 340 y desborda.
      El remedio conocido es minmax(min(340px,100%),1fr).

   Los anchos de esas rejillas están escritos en atributos style= dentro de 31
   sitios de las vistas, y por eso el override de aquí abajo lleva !important:
   un estilo en línea no se gana de otra forma. La limpieza de verdad es mover
   esas rejillas a clases; mientras tanto, esto arregla el síntoma en un solo
   lugar y no en catorce archivos.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---------- tarjetas que se empaquetan sin huecos ----------
   Una rejilla hace filas, y cada fila mide lo que su tarjeta más alta: una
   tarjeta corta deja un boquete hasta la fila siguiente. Con columnas CSS
   cada tarjeta se coloca justo debajo de la anterior de SU columna, y no
   queda aire.

   El precio es que el orden de lectura pasa a ser por columnas y no por
   filas. Aquí da igual: son ajustes independientes entre sí, no una
   secuencia que haya que seguir. */
.fichas{columns:340px 3;column-gap:16px}
.fichas>.card{break-inside:avoid;-webkit-column-break-inside:avoid;margin:0 0 16px;display:block}

@media (max-width:860px){

  .fichas{columns:1}

  /* El menú deja de ser una columna de once elementos que hay que scrollear
     antes de llegar al contenido, y pasa a ser una barra que se desliza. */
  .rail{flex-direction:row;align-items:center;gap:5px;height:auto;padding:9px 10px;
        overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
  .rail::-webkit-scrollbar{height:0}
  .rail hr,.rail .spacer,.railfoot{display:none}
  .brand{padding:0 10px 0 2px;flex:none}
  .brand span{display:none}
  .navbtn{width:auto;flex:none;white-space:nowrap;padding:7px 10px}
  .rail form{flex:none;margin:0}

  /* Y como ya no es una columna alta, se queda arriba al hacer scroll. */
  .rail{position:sticky;top:0;z-index:20}

  main{padding:16px 14px 48px}
  .head{margin-bottom:16px}
  .head h1{font-size:20px}

  /* Toda rejilla pasa a una columna, y la pista puede encogerse hasta 0.
     minmax(0,1fr) es lo que impide que el contenido ancho la infle. */
  main [style*="grid"]{grid-template-columns:minmax(0,1fr)!important}

  /* La tabla se desliza dentro de su tarjeta en vez de ensanchar la página.
     overflow-x en un bloque lo convierte en contenedor de scroll, y con eso
     su ancho mínimo deja de contagiarse hacia arriba. */
  main table{display:block;overflow-x:auto;max-width:100%}
  main table>*{min-width:max-content}

  /* Las tablas de dos columnas (etiqueta / valor) no necesitan deslizarse:
     caben. Se les deja el ancho completo para que no queden encogidas. */
  main table.tabla>*{min-width:100%}

  .card>header{flex-wrap:wrap;gap:4px}
  .acciones{flex-wrap:wrap}
  .btn{padding:9px 14px}          /* dedo, no ratón */
}

@media (max-width:420px){
  main{padding:14px 11px 44px}
  .card .body{padding:13px}
  .head h1{font-size:19px}
}