/* Modo Botones — piel responsiva, mobile-first. Maestro-clean: limpio, sin
   modales, toques grandes (>=48px), tipografia del sistema, marfil + acento. */
:root{
  --marfil:#faf7f0; --tinta:#23201b; --suave:#6b6256; --linea:#e6e0d4;
  --acento:#1f6f54; --acento-2:#e8f3ee; --rojo:#b23b3b; --amarillo:#b8860b;
  --r:14px; --tap:52px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--marfil); color:var(--tinta);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17px; line-height:1.4; -webkit-text-size-adjust:100%;
  /* numeros TABULARES en toda la piel: alinean en columna, sans (no mono) */
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
}
/* monto/numero explicito (misma familia sans, cifras tabulares) */
.num{ font-variant-numeric:tabular-nums }

/* estados: NUNCA solo color -> color + ICONO + ETIQUETA (daltonismo/lectores de
   pantalla). Pildora compacta reutilizable por cualquier pantalla. */
.estado{ display:inline-flex; align-items:center; gap:5px; padding:3px 10px;
  border-radius:999px; font-size:13px; font-weight:600; line-height:1.1;
  border:1px solid transparent; white-space:nowrap; }
.estado .ei{ font-size:13px }
.estado.ok{  background:var(--acento-2); color:#155e44; border-color:#bfe0d2 }
.estado.ojo{ background:#fbf3df; color:#7a5b00; border-color:#ecd9a6 }
.estado.mal{ background:#fbeaea; color:var(--rojo); border-color:#eccaca }
.estado.neu{ background:#f0ece2; color:var(--suave); border-color:var(--linea) }
#app{ max-width:560px; margin:0 auto; padding:max(16px,env(safe-area-inset-top)) 16px 40px; }

/* cabecera STICKY (regla de molde, todo el sistema): Volver + el TITULO de la
   vista DENTRO de la barra (un solo titulo). OPACA (marfil solido) -> nada
   scrollea por detras translucido (no fantasma). */
.barra{ position:sticky; top:0; z-index:25; display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:0 -16px 12px; padding:11px 16px; background:var(--marfil); border-bottom:1px solid #ece6da; min-height:54px; }
.barra h1{ font-size:20px; margin:0; font-weight:650; letter-spacing:.2px }
.barra .yo{ font-size:14px; color:var(--tinta); font-weight:650; text-align:right }
/* sub-pantalla con titulo: Volver + titulo de la vista juntos a la izquierda,
   DENTRO de la barra (sticky). La barra opaca evita el fantasma del h2 al scroll. */
.barra.con-titulo{ justify-content:flex-start; }
.barra .b-tit{ min-width:0; font-size:19px; font-weight:700; color:var(--tinta); letter-spacing:.1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.volver{ background:none; border:0; color:var(--acento); font-size:16px; padding:8px 0; cursor:pointer; flex:none; }

/* titulares */
h2{ font-size:24px; margin:.2em 0 .1em; font-weight:680 }
.lema{ color:var(--suave); margin:0 0 20px }

/* botones grandes (acción primaria) */
.btn{
  display:flex; align-items:center; gap:12px; width:100%;
  min-height:var(--tap); padding:14px 18px; margin:10px 0;
  background:#fff; color:var(--tinta); border:1px solid var(--linea);
  border-radius:var(--r); font-size:17px; text-align:left; cursor:pointer;
  box-shadow:0 1px 0 rgba(0,0,0,.02); transition:transform .04s, border-color .15s;
}
.btn:active{ transform:scale(.99) }
.btn .ico{ font-size:22px; width:26px; text-align:center }
.btn .sub{ display:block; font-size:13px; color:var(--suave) }
.btn.primario{ background:var(--acento); color:#fff; border-color:var(--acento); justify-content:center; font-weight:650 }
.btn.primario .sub{ color:#dfeee8 }
.btn.fantasma{ background:transparent; border-style:dashed }

/* campo: guarda al salir, sin botón "guardar" aparte */
.campo{ margin:14px 0 }
.campo label{ display:block; font-size:13px; color:var(--suave); margin:0 0 6px }
.campo input, .campo select{
  width:100%; min-height:var(--tap); padding:12px 14px;
  border:1px solid var(--linea); border-radius:var(--r); font-size:17px;
  background:#fff; color:var(--tinta);
}
.campo input:focus, .campo select:focus{ outline:none; border-color:var(--acento) }

/* ===== T2d — Registro "Entrar por primera vez": autosave visual (verde/rojo al blur) ===== */
/* El color ES la confirmacion. Verde suave = valido; rojo suave = invalido. Solo clases. */
.gg-campo-ok{ border-color:var(--acento); background:var(--acento-2); }
.gg-campo-mal{ border-color:var(--rojo); background:#fbeaea; }
.gg-campo-err{ min-height:16px; margin:4px 0 0; font-size:12px; color:var(--rojo); }

/* contenedor del formulario */
.gg-pv{ margin:10px 0 0; }
.gg-pv-tit{ margin:8px 0 4px; font-size:18px; color:var(--tinta); }

/* clave SII: input + boton ojo en una fila */
.gg-clave-fila{ display:flex; align-items:stretch; gap:8px; }
.gg-clave-fila input{ flex:1; }
.gg-ojo{ flex:0 0 auto; min-width:var(--tap); min-height:var(--tap);
  border:1px solid var(--linea); border-radius:var(--r); background:#fff;
  color:var(--tinta); font-size:20px; cursor:pointer; }
.gg-ojo:hover{ border-color:var(--acento); }

/* mail: local @ dominio */
.gg-mail-fila{ display:flex; align-items:center; gap:8px; }
.gg-mail-fila input{ flex:1; min-width:0; }
.gg-arroba{ flex:0 0 auto; font-size:18px; color:var(--suave); }

/* fono: pais + numero */
.gg-fono-fila{ display:flex; align-items:stretch; gap:8px; }
.gg-fono-fila select{ flex:0 0 auto; width:auto; max-width:52%; }
.gg-fono-fila input{ flex:1; min-width:0; }

/* zona de estado del envio (en pantalla, no mail) */
.gg-estado-envio{ margin:10px 0 0; }
.gg-estado-ok{ padding:12px 14px; border-radius:var(--r);
  border:1px solid var(--acento); background:var(--acento-2); color:var(--tinta); }
.gg-estado-mal{ padding:12px 14px; border-radius:var(--r);
  border:1px solid var(--rojo); background:#fbeaea; color:var(--tinta); }
.gg-estado-info{ padding:12px 14px; border-radius:var(--r);
  border:1px solid var(--linea); background:#fff; color:var(--suave); }

/* lista de clientes (filtra al escribir) */
.fila{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  min-height:var(--tap); padding:12px 14px; margin:8px 0;
  background:#fff; border:1px solid var(--linea); border-radius:var(--r); cursor:pointer;
}
/* PLANTILLA v1 (tipografia): nombres de item de lista = peso NORMAL. La negrita se
   reserva para lo de MAXIMA importancia (titulo de pantalla en el header). Contraste
   por tamano/color, NO por grosor. Heredable por TODA lista que use .nom. */
.nom{ font-weight:400; }
.fila .rut{ font-size:13px; color:var(--suave); font-variant-numeric:tabular-nums }
.fila.ok-fila{ border-color:var(--acento); background:var(--acento-2) }
.vacio{ color:var(--suave); text-align:center; padding:28px 0 }

/* avisos inline (sin popups) */
.aviso{ padding:12px 14px; border-radius:var(--r); margin:12px 0; font-size:15px }
.aviso.info{ background:var(--acento-2); color:#155 }
.aviso.error{ background:#fbeaea; color:var(--rojo) }
.cargando{ color:var(--suave); padding:18px 0; text-align:center }

.tabs{ display:flex; gap:8px; margin:8px 0 4px }
.tabs button{ flex:1; min-height:44px; border:1px solid var(--linea); background:#fff;
  border-radius:10px; font-size:14px; color:var(--suave); cursor:pointer }
.tabs button.on{ border-color:var(--acento); color:var(--acento); font-weight:650; background:var(--acento-2) }

/* modo texto (chat) */
.hilo{ display:flex; flex-direction:column; gap:8px; padding:8px 0 90px; }
.bub{ max-width:85%; padding:10px 14px; border-radius:16px; font-size:16px; line-height:1.35; }
.bub.yo{ align-self:flex-end; background:var(--acento); color:#fff; border-bottom-right-radius:4px; }
.bub.bot{ align-self:flex-start; background:#fff; border:1px solid var(--linea); border-bottom-left-radius:4px; }
.bub.lista{ list-style:none; margin:0; padding:10px 14px; }
.bub.lista li{ padding:3px 0; color:var(--tinta); }
.confirma{ align-self:flex-start; display:flex; gap:8px; margin:2px 0 6px; }
.confirma button{ min-height:44px; padding:8px 22px; border-radius:12px; font-size:16px; cursor:pointer; border:1px solid var(--linea); }
.confirma .si{ background:var(--acento); color:#fff; border-color:var(--acento); font-weight:650; }
.confirma .no{ background:#fff; color:var(--suave); }
.barra-chat{ position:fixed; left:0; right:0; bottom:0; display:flex; gap:8px; padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:var(--marfil); border-top:1px solid var(--linea); }
.barra-chat input{ flex:1; min-height:var(--tap); padding:12px 14px; border:1px solid var(--linea); border-radius:24px; font-size:16px; background:#fff; }
.barra-chat input:focus{ outline:none; border-color:var(--acento); }
.barra-chat .enviar{ min-height:var(--tap); padding:0 20px; border:0; border-radius:24px; background:var(--acento); color:#fff; font-size:16px; font-weight:650; cursor:pointer; }
@media (min-width:600px){ .barra-chat{ max-width:560px; margin:0 auto; } }

/* tercera piel: video/voz */
.pieles{ display:flex; gap:6px; align-items:center; }
.companero{ display:flex; justify-content:center; margin:18px 0 6px; }
.companero .marco{ width:160px; height:160px; border-radius:50%; overflow:hidden; border:3px solid var(--acento);
  box-shadow:0 6px 16px rgba(31,111,84,.22); background:var(--acento-2); transition:transform .2s; }
.companero .rostro, .companero .rostro-video{ width:100%; height:100%; object-fit:cover; object-position:50% 22%; transform:scale(1.28); transform-origin:50% 26%; display:block; }
.companero.hablando .marco{ animation:pulso 1s ease-in-out infinite; }
.companero.escuchando .marco{ animation:escucha 1.1s ease-in-out infinite; }
@keyframes pulso{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.035) } }
@keyframes escucha{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.05) } }
.subtitulo{ min-height:2.6em; text-align:center; font-size:19px; line-height:1.35; color:var(--tinta);
  background:#fff; border:1px solid var(--linea); border-radius:16px; padding:14px 16px; margin:6px 0; }
.transcrito{ text-align:center; color:var(--suave); font-size:14px; min-height:1.2em; }
.voz-acciones{ display:flex; flex-direction:column; align-items:center; gap:8px; padding-bottom:90px; }
.voz-lista{ list-style:none; margin:6px 0; padding:10px 16px; background:#fff; border:1px solid var(--linea); border-radius:14px; min-width:70%; }
.voz-lista li{ padding:3px 0; }
.barra-chat.voz .mic{ min-height:var(--tap); width:52px; border:0; border-radius:50%; background:var(--acento-2); font-size:22px; cursor:pointer; }
.barra-chat.voz .mic:active{ background:var(--acento); }

/* ===== COMPONENTES BASE: chip() + buscador() (clases, no inline; la CSP
   style-src 'self' borra style= inline). Marfil + verde + pastel, con aire. ===== */
.chips{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:8px 0 14px; }
.chip{ display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:999px;
  background:#f3ead9; color:#54493c; border:1px solid #e3dac9; font-size:14px; font-weight:650;
  cursor:pointer; user-select:none; min-height:38px; transition:background .14s, color .14s; }
.chip:active{ transform:scale(.98); }
.chip.on{ background:var(--acento); color:#fff; border-color:var(--acento); font-weight:750; }
.chip .chk{ font-size:13px; }
.chip .marca{ font-size:13px; opacity:.9; }       /* candado sagrado: marca fija, no estado */

.bsq-lista{ display:flex; flex-direction:column; gap:4px; margin-top:8px; }
.bsq-res{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 14px; border-radius:var(--r); background:#fff; border:1px solid var(--linea); cursor:pointer; }
.bsq-res:active{ transform:scale(.995); }
.bsq-res .t{ font-size:16px; font-weight:700; color:var(--tinta); }
.bsq-res .s{ font-size:13px; color:var(--suave); font-weight:650; }
.bsq-nuevo{ display:flex; align-items:center; gap:9px; margin-top:10px; padding:14px 16px;
  border-radius:var(--r); background:var(--acento-2); border:1px solid #bfe0d2; color:#155e44;
  font-weight:700; font-size:15px; cursor:pointer; }
.bsq-nuevo .p{ font-size:20px; line-height:1; }

/* recuadro inline "Ingresar nuevo X" (alta sin salir) */
.caja{ margin:10px 0; padding:14px 16px; border-radius:var(--r); background:#f6f1e7; border:1px solid var(--linea); }

/* textareas (voz de Gladys, cobros): estilo por elemento (la CSP borra style= inline) */
textarea{ width:100%; box-sizing:border-box; border:1px solid var(--linea); border-radius:var(--r);
  padding:12px 14px; font-size:15px; font-family:inherit; background:#fff; color:var(--tinta); resize:vertical; }

/* ===== LENGUAJE VISUAL UNICO v7 (mockup Claude Design, sec 105/105.1) — header
   sticky + riel verde + chips CLAROS + pastilla on/off. Regla de molde: toda
   fabrica/sub-pantalla. Marfil #faf7f0 + verde fresco #1f6f54. Por clase (CSP). ===== */

/* HEADER STICKY — Volver (izq) + titulo de la vista DENTRO. OPACO (marfil solido)
   -> nada scrollea por detras translucido (no fantasma). Nunca se pierde. */
.gg-header{ position:sticky; top:0; z-index:30; display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin:0 -16px 16px; padding:14px 16px; background:var(--marfil); border-bottom:1px solid #ece6da; min-height:58px; }
.gg-hl{ display:flex; align-items:center; gap:12px; min-width:0; }
.gg-hr{ display:flex; align-items:center; gap:8px; flex:none; }  /* grupo derecho del header (SALIR) */
.gg-titulo{ font-family:Georgia,"Times New Roman",ui-serif,serif; font-size:21px; font-weight:600; margin:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gg-mini{ font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#b3a487; flex:none; }

/* ============================================================================
   PLANTILLA v1 — JERARQUIA DE BOTONES (canon REUSABLE en TODO el sistema).
   .gg-btn-suave    = navegacion / accion: verde MUY suave + texto verde. Es la
                      forma de "‹ Volver" y de "+ Nuevo X" y de TODO lo clickeable
                      que NO sea el primario. Pill, compacto.
   .gg-btn-primario = UNICO por pantalla: verde solido + texto blanco (ej Guardar).
   Heredables por cualquier pantalla; no duplicar formas de boton.
   ============================================================================ */
.gg-btn-suave{ display:inline-flex; align-items:center; justify-content:center; gap:5px; flex:none;
  background:#e9f1ec; border:1px solid #d3e4da; color:var(--acento); border-radius:999px;
  padding:8px 15px; font-size:14px; font-weight:650; cursor:pointer; white-space:nowrap; transition:background .15s; }
.gg-btn-suave:active{ background:#dcebe1; }

.gg-btn-primario{ display:flex; align-items:center; justify-content:center; width:100%; min-height:var(--tap);
  padding:14px 18px; background:var(--acento); color:#fff; border:1px solid var(--acento); border-radius:var(--r);
  font-size:17px; font-weight:650; cursor:pointer; transition:transform .04s; }
.gg-btn-primario:active{ transform:scale(.99); }

/* variante DESTRUCTIVA (PLANTILLA v1): base .gg-btn-suave + texto rojo TENUE, sin
   relleno. No confundible con el primario. Se usa junto a .gg-btn-suave. */
.gg-btn-peligro{ background:#f4ece8; border-color:#e7d4cd; color:#a3473f; }
.gg-btn-peligro:active{ background:#ecdfd8; }

/* COLUMNA: ancho de celu (~390px) centrada; en compu contenida (no mar de verde). */
.gg-col{ max-width:390px; margin-inline:auto; }

/* ==== F29 VISTA SII (replica del form real; EXCEPCION deliberada al estandar visual del sistema:
   usa a proposito la visual del SII para familiarizar. NO homologar a las clases gg-*). ==== */
/* SOLUCION ADAPTATIVA (la tecnologia se ajusta a la persona): la vista se acomoda al
   dispositivo. Nada oculto a la derecha, nada de texto diminuto, SIN transform:scale y SIN
   bloquear el zoom.
   - BASE = CELULAR/ANGOSTO: modo ELASTICO -> la glosa se encoge (flex:1 1 auto;min-width:0)
     y los codigos van a ancho natural y ENVUELVEN si no caben -> TODO cabe sin scroll
     horizontal. Texto a 16px (piso legible; el base del sistema es 17px). Se conservan
     orden, secciones, numeros de codigo y textos exactos del SII.
   - ANCHO (>=1040px, donde caben los ~1028px reales del SII): el formulario se SALE del tope
     de #app{max-width:560px} SOLO en esta vista (override puntual, #app global intacto) y se
     muestra COMPLETO con las proporciones reales, CENTRADO, SIN scroll y SIN achicar texto.
   .f29sii-form = envoltorio; .f29sii-inner = la caja del formulario (borde + anchos). */
.f29sii-col{ max-width:100%; }
.f29sii-form{ width:100%; }
.f29sii-inner{ border:1px solid #b9c9db; border-radius:4px; background:#fff;
  font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#222; }
.f29sii-titulo{ background:#4d80b8; color:#fff; font-size:16px; font-weight:600; padding:10px 14px; box-sizing:border-box; }
.f29sii-header{ display:flex; flex-wrap:wrap; gap:0; border-bottom:1px solid #b9c9db; box-sizing:border-box; }
.f29sii-hcampo{ display:flex; flex-direction:column; gap:2px; padding:6px 12px; border-right:1px solid #dbe5f0; }
.f29sii-hrot{ font-size:12px; color:#557; text-transform:uppercase; }
.f29sii-hval{ font-size:15px; font-weight:700; color:#123; }
.f29sii-seccion{ background:#d6e4f2; color:#1a3550; font-weight:700; padding:6px 12px;
  border-top:1px solid #b9c9db; border-bottom:1px solid #b9c9db; box-sizing:border-box; }
.f29sii-nota{ font-style:italic; color:#556; padding:4px 12px; border-bottom:1px solid #eef; font-size:13px; box-sizing:border-box; }
.f29sii-fila{ display:flex; align-items:stretch; flex-wrap:nowrap; border-bottom:1px solid #e2e9f1; min-height:26px; box-sizing:border-box; }
.f29sii-fila:hover{ background:#f5f9fd; }
.f29sii-linea{ flex:0 0 28px; text-align:center; padding:4px 2px; background:#eef3f8;
  border-right:1px solid #e2e9f1; color:#345; font-weight:600; }
/* BASE elastica: la glosa se encoge; los codigos a ancho natural y ENVUELVEN (nada se corta). */
.f29sii-glosa{ flex:1 1 auto; min-width:0; padding:5px 10px; word-break:break-word; line-height:1.35; }
.f29sii-cods{ display:flex; flex-wrap:wrap; gap:0; flex:0 1 auto; min-width:0; justify-content:flex-end; }
.f29sii-cod{ display:flex; align-items:center; gap:8px; border-left:1px solid #e2e9f1; padding:4px 10px; flex:0 0 auto; min-width:104px; justify-content:space-between; }
.f29sii-codnum{ font-size:13px; color:#fff; background:#8ba7c4; border-radius:3px; padding:1px 6px; font-weight:700; flex:0 0 auto; }
.f29sii-codval{ font-variant-numeric:tabular-nums; font-weight:600; color:#123; text-align:right; }
.f29sii-pie{ margin-top:10px; }

/* PANTALLA MAS ANCHA (>=700px, tablet/escritorio): el formulario SALE del tope de
   #app{max-width:560px} SOLO en esta vista (override puntual; #app global intacto) y usa
   TODO el ancho disponible, centrado, hasta el ancho REAL del SII (1493px = la fila mas
   ancha, 6 codigos). Sigue ELASTICO: la glosa toma el sobrante y los codigos se AEREAN;
   solo envuelven si el ancho no alcanza. NUNCA hay scroll horizontal, NUNCA texto diminuto.
   (La fila mas ancha del F29 real mide ~1493px; por eso, en vez de fijar 535/155px y forzar
   scroll en pantallas <1500px, el formulario se ajusta al ancho con las mismas proporciones.) */
@media (min-width:700px){
  .f29sii-form{ width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
    display:flex; justify-content:center; }
  .f29sii-inner{ width:min(1493px, calc(100vw - 32px)); font-size:14px; }
  .f29sii-titulo{ font-size:15px; }
  .f29sii-cod{ min-width:150px; }
}
.gg-cab{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px; margin:2px 0 6px; }
.gg-sub{ color:var(--suave); margin:0 0 4px; }
/* "+ Nuevo X" y "‹ Volver" usan .gg-btn-suave (PLANTILLA v1, arriba). */

/* RIEL: linea verde sutil a la izquierda que sostiene el grupo (arranca arriba,
   termina en el ultimo item; no encierra). */
.gg-riel{ display:flex; flex-direction:column; gap:11px; border-left:2px solid #cfe1d8; padding-left:18px; margin-top:8px; }
/* riel VISUAL para vistas de contenido (no-lista): misma linea verde + indent que
   el gg-riel, pero el contenido fluye con sus margenes naturales (campos/chips/
   buscador/botones). PLANTILLA v1, generico. Va dentro de una .gg-col. */
.gg-riel-vista{ border-left:2px solid #cfe1d8; padding-left:18px; margin-top:8px; }
/* ROTULO DE GRUPO (PLANTILLA v1, tipografia): encabeza un grupo de chips/items.
   Un PASO mas grande que el cuerpo (15px) para anclar el escaneo, peso NORMAL y
   color TENUE (--suave): jerarquia titulo > rotulo de grupo > cuerpo. Generico,
   heredable por toda pantalla. NO usar en labels de campo normales (Nombre/RUT). */
.gg-grupo{ display:block; font-size:15px; font-weight:400; color:var(--suave); margin:18px 0 8px; }

/* CHIP ITEM — fondo CLARO (no verde lleno). Tocar la fila = abrir editar. */
.gg-item{ display:flex; align-items:center; gap:10px; min-height:var(--tap); background:#fffdf8; border:1px solid #e8e1d4;
  border-radius:16px; padding:15px 16px; cursor:pointer; transition:background .15s; }
.gg-item:hover{ background:#f4efe4; }
.gg-item:active{ transform:scale(.995); }
.gg-item .nom{ flex:1; min-width:0; text-align:left; font-size:17px; color:var(--tinta);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gg-item .chev{ color:#c9c0ae; font-size:18px; flex:none; }
/* gg-item de 2 LINEAS (PLANTILLA v1): nombre (normal) + sub-linea tenue. Reusable
   en listas con detalle (ej Accesos). NO afecta el gg-item de 1 linea de fabrica. */
.gg-item-2l .gg-tx{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.gg-item-2l .nom{ flex:none; }
.gg-item-2l .sub2{ font-size:13px; color:var(--suave); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* PERMISOS NUEVOS — legibilidad: la pregunta ENVUELVE (no se corta), cabecera por CARGO,
   botones tocables 48px. Reusa tokens/colores existentes (sin color nuevo). */
.perm-q{ flex:1; min-width:0; text-align:left; font-size:16px; color:var(--tinta);
  white-space:normal; overflow:visible; text-overflow:clip; line-height:1.3; }
.perm-cargo{ font-size:16px; font-weight:650; color:var(--tinta); margin:20px 0 6px; }
.perm-cargo .cta{ font-weight:400; color:var(--suave); font-size:13px; margin-left:6px; }
.perm-acc button{ min-height:48px; }
.perm-acc .aviso .gg-btn-suave{ min-height:40px; }
.perm-global{ white-space:normal; width:100%; }

/* ARBOL DE PERMISOS por usuario (0075): modulo -> pantalla -> chip. Reusa gg-pill/chips
   (sin color nuevo); el override "a mano" se marca con borde punteado. */
.perm-arbol{ margin:6px 0 12px; }
.perm-mod{ font-size:16px; font-weight:650; color:var(--tinta); margin:16px 0 4px; }
.perm-pant{ font-size:13px; color:var(--suave); margin:8px 0 2px; }
.perm-master{ margin:2px 0 6px; align-items:center; }
.perm-master button{ min-height:40px; }
.perm-tag{ font-size:12px; color:var(--suave); }
.gg-pill.perm-override{ border-style:dashed; border-width:2px; }

/* SEPARACION DE FUNCIONES (0077): aviso INFORMATIVO (ambar), nunca bloqueo. */
.conf-aviso{ background:#fff8e6; border:1px solid #e8d9a0; color:#6b5200; }
.conf-tit{ font-weight:650; margin-bottom:8px; line-height:1.3; }
.conf-item{ display:flex; flex-direction:column; gap:1px; padding:6px 0; border-top:1px solid #efe4bf; }
.conf-par{ font-weight:600; }
.conf-nota{ color:var(--suave); font-size:13px; white-space:normal; overflow:visible; text-overflow:clip; }
.audit-linea{ font-size:15px; color:var(--tinta); white-space:normal; line-height:1.3; }
/* COMUNICADO FORMAL (0080): vista previa de la imagen con logo. */
.cobros-img{ display:block; max-width:100%; height:auto; border:1px solid var(--linea); border-radius:var(--r); margin:10px 0; }
/* LA CUENTA VIVA (restore): lista con estado + editor inline. */
.cobros-contador{ font-weight:650; color:var(--tinta); }
.cobros-pend{ background:#fff8e6; border-left:4px solid #e0a800; }
.cobros-env{ opacity:.62; border-left:4px solid var(--acento); }

/* TAREAS DEL MES: dos botones + lista sortable (mostaza-pendiente arriba, hecho al final). */
.tm-botones{ display:flex; gap:10px; flex-wrap:wrap; margin:12px 0; }
.tm-btn{ flex:1 1 200px; }
.tm-provisorio{ background:#fff8e6; border:1px solid #e0a800; border-radius:8px; padding:8px 10px; margin:8px 0; font-size:13px; }
.tm-corrida{ margin:8px 0; }
.tm-emp{ display:flex; align-items:center; gap:8px; }
.tm-acciones{ display:flex; gap:10px; margin-top:10px; }
.tm-prog, .tm-barra-txt, .tm-errores{ margin-top:8px; }
.tm-resumen{ font-weight:600; margin:8px 0; }
.tm-orden{ margin:6px 0; }
.tm-todas-bar{ margin:6px 0 2px; }
.tm-todas{ font-size:13.5px; padding:6px 12px; }
.tm-pend{ background:#fff8e6; border-left:4px solid #e0a800; }
.tm-hecho{ opacity:.6; border-left:4px solid var(--acento); }
/* UNA tarjeta por empresa: checkbox + nombre + insignias de estado (F29 / Leyes). */
.tm-card{ display:flex; align-items:center; gap:10px; }
.tm-badges{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-top:4px; }
.tm-badge{ font-size:12px; font-weight:650; padding:2px 8px; border-radius:999px; border:1px solid var(--linea); white-space:nowrap; }
.tm-badge.ok{ background:#e9f6ec; border-color:#8fce9c; color:#1f7a33; }
.tm-badge.pend{ background:#fff8e6; border-color:#e0a800; color:#8a6d00; }
.tm-monto{ font-size:13px; font-weight:700; color:var(--tinta); margin-left:2px; }
.tm-selinfo{ font-size:13px; color:var(--suave); margin-left:10px; align-self:center; }
.cv-linea{ padding:8px 0; border-top:1px solid var(--linea); }
.cv-cab{ display:flex; align-items:center; gap:10px; }
.cv-concepto{ flex:1; min-width:0; font-size:15px; color:var(--tinta); white-space:normal; }
.cv-monto{ width:120px; text-align:right; flex:none; }
.cv-obs{ margin:2px 0 0; font-size:12.5px; color:var(--suave); white-space:normal; overflow-wrap:anywhere; }
.cv-acc{ margin:6px 0 0; }
.cv-agregar{ margin:10px 0; }
.cv-chk{ display:flex; align-items:center; gap:8px; margin:6px 0; font-size:14px; color:var(--suave); }

/* CARTELITOS QUE ENSENAN (0079): etiquetas simples siempre visibles. */
.carteles{ display:flex; flex-direction:column; gap:6px; margin:6px 0 14px; }
.cartel{ background:var(--acento-2); border:1px solid #d3e4da; border-radius:var(--r); padding:8px 12px; }
.cartel-t{ display:block; font-weight:650; color:var(--acento); font-size:14px; }
.cartel-d{ display:block; color:var(--tinta); font-size:13px; line-height:1.3; }
.perfil-critica{ border:2px solid #e8d9a0; background:#fff8e6; }
.gg-item-2l .sub2.conf-nota{ white-space:normal; overflow:visible; text-overflow:clip; line-height:1.25; }
/* Reporte del lote LEGIBLE: RUT chico bajo la razon social + resultado/mensaje que ENVUELVE (nunca
   desborda; formato celular). El detalle tecnico no va en pantalla (vive en console/exportacion). */
.tm-rut{ font-size:12px; color:var(--suave); }
/* tarjeta CALMA para resultados legitimos (sin F29 / ya declarado / sin tasa): NO es error. */
.tm-info{ background:#eef4fb; border-left:4px solid #7a9cc4; }
.tm-resumen{ margin-top:8px; font-weight:600; }
.gg-item-2l .nom.nom-wrap{ white-space:normal; overflow:visible; text-overflow:clip; line-height:1.25; }
.gg-item-2l .sub2.tm-sub-wrap{ white-space:normal; overflow:visible; text-overflow:clip; line-height:1.3; word-break:break-word; }

/* PASTILLA ESTADO — texto + punto + color (WCAG: no solo color). */
.gg-pill{ display:inline-flex; align-items:center; gap:5px; flex:none; padding:4px 10px; border-radius:999px;
  font-size:12px; font-weight:700; white-space:nowrap; border:1px solid transparent; }
.gg-pill .pt{ width:7px; height:7px; border-radius:50%; display:inline-block; }
.gg-pill.on{ background:#e3eee7; color:#1f6f54; border-color:#cbe2d6; }
.gg-pill.on .pt{ background:#3f9a76; }
.gg-pill.off{ background:#efe9dd; color:#9a907e; border-color:#e2dbcd; }
.gg-pill.off .pt{ background:#c4bba8; }
.gg-pill.toca{ cursor:pointer; transition:filter .15s; }
.gg-pill.toca:active{ filter:brightness(.97); }

/* SUB-PANTALLA EDITAR */
.gg-edit{ display:flex; flex-direction:column; gap:6px; }
.gg-hint{ color:var(--suave); font-size:13px; margin-top:8px; }
.gg-edit textarea{ resize:none; overflow:hidden; }   /* auto-crece por JS (element.style.height) */
/* En editar el contenido vive DENTRO del .gg-riel (riel verde a la izquierda que
   termina en Guardar). El gap del riel da el ritmo; el campo no aporta margen. */
.gg-edit .gg-riel .campo{ margin:0; }
.gg-edit .gg-riel .gg-btn-primario{ margin-top:8px; }   /* aire antes de Guardar (fin del riel) */

/* franja BLOQUEANTE de actualizacion (sec 102): cubre TODO el viewport, fuerza recarga.
   El usuario no puede interactuar con nada debajo hasta hacer clic en Actualizar. */
#mb-franja{ position:fixed; inset:0; z-index:9999; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.5rem; padding:2rem; }
#mb-franja p{ font-size:1.1rem; font-weight:650; text-align:center; max-width:32ch; color:var(--tinta); }

/* banner anterior (compatibilidad con otros usos si quedara alguno) */
.banner-update{ position:fixed; left:0; right:0; top:0; z-index:2000; background:var(--acento); color:#fff;
  padding:11px 16px; text-align:center; font-size:15px; font-weight:650; box-shadow:0 2px 10px rgba(0,0,0,.12);
  display:flex; align-items:center; justify-content:center; gap:12px; }
.banner-update button{ background:#fff; color:var(--acento); border:0; border-radius:10px;
  padding:8px 18px; font-weight:700; cursor:pointer; }
body.con-banner{ padding-top:50px; }
body.con-banner .barra, body.con-banner .gg-header{ top:50px; }

/* aviso breve ARRIBA (sesion expirada): calmo (crema), transitorio, tocar cierra. */
.banner-aviso{ position:fixed; left:0; right:0; top:0; z-index:2100; background:#f5efe2; color:var(--tinta);
  border-bottom:1px solid #e2dbcd; padding:11px 16px; text-align:center; font-size:15px; font-weight:650;
  box-shadow:0 2px 10px rgba(0,0,0,.08); cursor:pointer; }

/* ===== Actualizacion controlada: aviso con cuenta regresiva + pantalla de mantenimiento
   (mantenimiento.js). El aviso baja los headers como con-banner. En el ultimo minuto
   se pone rojo (.urgente). El overlay cubre TODO y bloquea (nadie declara/edita durante
   la actualizacion). Solo presentacion; no toca datos. */
.mant-banner{ position:fixed; left:0; right:0; top:0; z-index:2200; background:#c9922b; color:#fff;
  padding:10px 16px; display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
  font-size:15px; font-weight:650; box-shadow:0 2px 10px rgba(0,0,0,.15); }
.mant-banner.urgente{ background:#b3261e; }
.mant-banner-reloj{ background:rgba(255,255,255,.22); border-radius:10px; padding:4px 12px; font-weight:800;
  font-variant-numeric:tabular-nums; white-space:nowrap; }
body.con-mant-banner{ padding-top:48px; }
body.con-mant-banner .barra, body.con-mant-banner .gg-header{ top:48px; }
body.con-mant-banner .sel-bar{ top:106px; }
.mant-overlay{ position:fixed; inset:0; z-index:3000; background:linear-gradient(160deg,#2f3a2c,#1e2620);
  color:#fff; display:flex; align-items:center; justify-content:center; padding:24px; }
.mant-caja{ text-align:center; max-width:440px; }
.mant-emoji{ font-size:56px; line-height:1; margin-bottom:14px; }
.mant-titulo{ font-size:26px; font-weight:800; margin-bottom:10px; }
.mant-sub{ font-size:17px; opacity:.9; line-height:1.5; }

/* FILA DE NUMERO (PLANTILLA — piloto F29/reportes/comisiones): rotulo IZQ + monto DER
   tabular. Cabe en ~390px, el monto nunca se corta. Va dentro de un gg-riel/gg-riel-vista.
   Variante .heroe = el total principal (mas grande, verde). Por CLASE (CSP). */
.gg-fila-num{ display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:9px 2px; border-bottom:1px solid #ece6da; }
.gg-fila-num:last-child{ border-bottom:0; }
.gg-fila-num .rot{ color:var(--tinta); min-width:0; }
.gg-fila-num .val{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
  font-weight:650; white-space:nowrap; flex:none; }
.gg-fila-num.heroe{ padding:6px 2px 12px; }
.gg-fila-num.heroe .rot{ color:var(--suave); }
.gg-fila-num.heroe .val{ font-size:23px; color:var(--acento); font-weight:700; }

/* Variante texto apilada (gg-fila-txt): titulo arriba izquierda + detalle abajo a ancho
   completo. Para valores extensos que en columna angosta caen en cascada. Filas de monto
   (.gg-fila-num) no se tocan. */
.gg-fila-txt{ display:flex; flex-direction:column; gap:2px;
  padding:9px 2px; border-bottom:1px solid #ece6da; }
.gg-fila-txt:last-child{ border-bottom:0; }
.gg-fila-txt .rot{ color:var(--tinta); }
.gg-fila-txt .val{ font-weight:650; white-space:normal; word-break:break-word; }

@media (min-width:600px){ #app{ padding-top:28px } h2{ font-size:28px } }

.gg-check{display:flex;align-items:center;gap:.5rem;cursor:pointer}
.gg-check input{width:1.15rem;height:1.15rem;flex:none}

/* Exportador (motor 5 formatos): grupos por proposito. Ley de Proximidad Gestalt:
   gap ENTRE grupos (16px) > gap entre botones del mismo grupo (6px) = categorias. */
.exp-panel{ display:flex; flex-direction:column; gap:16px; border:1px solid #d3e4da; border-radius:12px;
  padding:12px; margin-top:8px; background:#f6faf7; }
.exp-panel[hidden]{ display:none; }
.exp-grupo{ display:flex; flex-direction:column; gap:6px; }
.exp-lbl{ font-size:11px; font-weight:800; letter-spacing:.1em; color:#b3a487; }
.exp-bots{ display:flex; gap:6px; flex-wrap:wrap; }

/* Listado SELECCIONABLE + barra de accion ARRIBA (bulk selection). Checkbox por
   fila; "seleccionar todas"; contador + barra sticky ARRIBA (bajo el header, no al
   pie) con Exportar que baja SOLO lo seleccionado. Consistente con todo el sistema
   (Volver/Inicio/Salir y todos los botones arriba). El panel del exportador abre
   HACIA ABAJO. */
.sel-cab{ display:flex; align-items:center; margin:10px 0 4px; }
.sel-todas{ display:inline-flex; align-items:center; gap:10px; font-size:15px; color:var(--tinta); font-weight:650; cursor:pointer; }
.sel-chk{ width:1.15rem; height:1.15rem; flex:none; accent-color:var(--acento); cursor:pointer; }
.sel-fila{ cursor:pointer; }
.sel-bar{ position:sticky; top:58px; z-index:24; display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:4px -16px 10px; padding:10px 16px; background:var(--marfil); border-bottom:1px solid #ece6da; box-shadow:0 4px 14px rgba(0,0,0,.06); }
.sel-bar[hidden]{ display:none; }
body.con-banner .sel-bar{ top:108px; }
.sel-cont{ font-weight:800; font-size:15px; color:var(--acento); letter-spacing:.03em; }
.sel-bar .exp{ position:relative; }
.sel-bar .exp-panel{ position:absolute; right:0; top:100%; margin:8px 0 0; min-width:230px; z-index:27; box-shadow:0 6px 20px rgba(0,0,0,.12); }

/* RESULTADO DE TRAER DEL SII: tarjeta limpia para el contador. Encabezado claro,
   tabla legible (montos con miles a la derecha, fechas chilenas), totales al pie,
   boton Exportar arriba. Nada de JSON/campos tecnicos crudos. */
.sii-card{ border:1px solid var(--linea); border-radius:var(--r); background:#fff;
  padding:14px; margin:12px 0; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.sii-cab{ font-weight:800; letter-spacing:.03em; color:var(--acento); font-size:16px; margin-bottom:8px; }
.sii-acc{ margin-bottom:8px; }
.sii-tot{ font-weight:700; color:var(--tinta); background:var(--acento-2); border-radius:10px;
  padding:8px 12px; margin:6px 0 10px; }
.sii-nota{ color:var(--suave); font-weight:400; font-size:13px; }
.sii-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.sii-tabla{ border-collapse:collapse; width:100%; font-size:14px; }
.sii-tabla th{ text-align:left; font-weight:700; color:var(--suave); text-transform:uppercase;
  font-size:11px; letter-spacing:.05em; padding:6px 10px; border-bottom:2px solid var(--linea); white-space:nowrap; }
.sii-tabla td{ padding:6px 10px; border-bottom:1px solid var(--linea); color:var(--tinta); white-space:nowrap; }
.sii-tabla .num{ text-align:right; }
.sii-tabla tbody tr:hover{ background:#faf7f0; }
.sii-ficha{ display:flex; flex-direction:column; gap:2px; }
.sii-kv{ display:flex; gap:12px; padding:7px 2px; border-bottom:1px solid var(--linea); }
.sii-kv:last-child{ border-bottom:0; }
.sii-kv .k{ flex:none; width:150px; color:var(--suave); font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; align-self:center; }
.sii-kv .v{ color:var(--tinta); min-width:0; overflow-wrap:anywhere; }
.sii-err{ display:flex; align-items:baseline; gap:4px; flex-wrap:wrap; padding:8px 10px; margin:8px 0;
  border-radius:10px; background:#f7ecec; color:var(--rojo); }
.sii-err .ic{ font-weight:800; }
.sii-cuadra{ display:flex; align-items:baseline; gap:4px; flex-wrap:wrap; padding:6px 12px; margin:0 0 10px;
  border-radius:10px; font-weight:700; font-size:13px; }
.sii-cuadra.ok{ background:#e3eee7; color:#1f6f54; }
.sii-cuadra.mal{ background:#fbf1e3; color:#b8860b; }
.sii-cuadra.info{ background:#eef1f6; color:#3a4a63; }

/* TRAER DEL SII v2: barra de progreso GLOBAL + chips + boton compacto + resalte. */
.traer-intro{ margin:0 0 12px; }
.traer-sec{ margin-top:6px; }
/* Barra TRAER: boton + estado (contador/%/mensaje) en PARALELO (misma fila `.traer-fila`);
   la barra VERDE del avance va ABAJO a lo ancho (paralela al boton). Ley de Proximidad. */
.traer-bar{ flex-direction:column; align-items:stretch; gap:6px; }
.traer-fila{ display:flex; align-items:center; gap:12px; }
.traer-estado{ flex:1 1 auto; min-width:0; }
.traer-track{ width:100%; }
.hidden{ display:none; }
/* RESPONSIVE: en pantalla MUY angosta el boton y su estado se apilan (mensaje no estrujado). */
@media (max-width:340px){ .traer-fila{ flex-direction:column; align-items:stretch; gap:6px; } }
.traer-hint{ font-size:13px; color:var(--suave); }
/* Boton TRAER ~a la mitad: ancho solo para el texto, min 48px tocable, no bloque.
   Prominencia por contraste (verde solido), no por tamano. */
.traer-btn{ flex:none; width:auto; align-self:flex-start; min-height:48px; padding:0 14px; font-size:15px; white-space:nowrap; }
/* Buscador de la lista de empresas (filtra por nombre o RUT). */
.emp-buscar{ width:100%; margin-bottom:8px; }
/* Nombre de empresa: WRAP a varias lineas (no se corta); el RUT (.sub2) queda visible
   debajo -> siempre se identifica la empresa por su llave real. */
.nom-wrap{ white-space:normal; overflow:visible; text-overflow:clip; line-height:1.25; }
.sel-fila{ align-items:flex-start; }
.sel-fila .sub2{ white-space:normal; overflow:visible; text-overflow:clip; }
/* Codigos esenciales del F29 destacados; 91 = TOTAL A PAGAR, el mas visible. */
.f29-dest{ display:flex; flex-direction:column; gap:6px; margin:8px 0; padding:10px 12px; background:var(--acento-2); border-radius:12px; }
.f29-total{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding-bottom:6px; border-bottom:1px solid rgba(0,0,0,.10); }
.f29-total-lbl{ font-weight:800; font-size:13px; color:var(--acento); }
.f29-total-val{ font-weight:800; font-size:22px; color:var(--acento); font-variant-numeric:tabular-nums; }
/* barra de progreso del lote (una sola, se llena izq->der) */
.prog{ display:flex; flex-direction:column; gap:4px; width:100%; }
.prog-track{ height:8px; background:var(--acento-2); border-radius:999px; overflow:hidden; }
.prog-fill{ width:0; height:100%; background:var(--acento); border-radius:999px; transition:width .35s ease; }
.prog-head{ font-weight:800; font-size:13px; color:var(--acento); font-variant-numeric:tabular-nums; }
/* Mensaje de la Asistente: WRAP completo (varias lineas), nunca truncado. */
.prog-task{ font-size:12px; color:var(--suave); white-space:normal; overflow-wrap:anywhere; }
/* resalte temporal de la seccion que falta (validacion que lleva al campo) */
.resalta{ outline:2px solid var(--acento); outline-offset:5px; border-radius:10px; transition:outline-color .3s; }
/* chips: "Todas" con mas peso; periodo con ancho uniforme */
.gg-pill-todas{ font-weight:800; }
.gg-pill-per{ font-variant-numeric:tabular-nums; letter-spacing:.02em; }

/* TRAER multi-fuente: chips de fuente + acciones "proximamente" (robot aun no existe). */
.gg-pill-fuente{ font-weight:700; }
.gg-pill-prox{ opacity:.5; cursor:default; }
.gg-pill-prox .prox-tag{ font-size:9px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; margin-left:5px; color:var(--suave); }

/* TALLER / Sala de Maquinas: tabla de respaldos de despliegue */
.taller-tabla-wrap{ overflow-x:auto; margin-top:1rem; }
.taller-tabla{ width:100%; border-collapse:collapse; font-size:.9em; }
.taller-th{ text-align:left; padding:4px 8px; border-bottom:1px solid #ccc; }
.taller-td{ padding:4px 8px; }
.taller-td-tag{ padding:4px 8px; font-family:monospace; font-size:.85em; }
.taller-td-fecha{ padding:4px 8px; white-space:nowrap; }
.taller-td-prot{ padding:4px 8px; text-align:center; }

/* Fila de mail (local @ dominio) y fila de telefono (pais + numero) — Invitar */
.gg-fila-mail{ display:flex; align-items:center; gap:4px; }
.gg-fila-mail .gg-at{ font-weight:600; color:var(--suave); }
.gg-fila-fono{ display:flex; align-items:center; gap:8px; }
.gg-fila-fono .gg-fono-num{ flex:1; }