/* Halbora Contable: página pública, registro y portal de clientes.

   Colores de la marca «Tinta y crema» (la dirección que escogió Jair el 22/09/2026). La guía
   completa está en output/marca_tinta_y_crema/guia.md. Dos reglas:

   1. El verde ya no es color de marca. Vive solo dentro de los chats dibujados, que tienen que
      seguir pareciendo WhatsApp de verdad: --bubble-*, --chat-bg y lo del chat no se tocan.
   2. Un solo acento, el ámbar (--teal, que conserva el nombre para no reescribir media hoja). Sobre
      la crema, el texto en ámbar va en quemado (--ambar-texto): el claro no alcanza AA. */
:root {
  --ground: #F8F3E9; --surface: #ffffff; --surface-2: #F1E9D9; --ink: #16242E; --strong: #16242E; --muted: #4E5A63;
  --line: #DCD2C0; --linea-campo: #8A8270; --teal: #EFB230; --teal-ink: #16242E; --teal-soft: #FAEDD2; --navy: #16242E; --navy-ink: #F8F3E9;
  --ambar-texto: #8A5A12;
  --ok: #2F7A4F; --ok-soft: #E4EFE3; --warn: #8A5A12; --warn-soft: #FAEDD2; --crit: #A83A2C; --crit-soft: #F7E2DC;
  --info: #2D5F7E; --info-soft: #E6EDF1; --morado: #6b45b0; --morado-soft: #EFE8FA;
  --bubble-in: #ffffff; --bubble-out: #d9f2eb; --chat-bg: #e8eff0; --tile: #ffffff;
  --shadow: 0 1px 2px rgba(14,39,64,.06), 0 10px 30px rgba(14,39,64,.08);
  --display: "Fraunces", Georgia, serif; --body: "Figtree", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0F1A22; --surface: #16242E; --surface-2: #1E303C; --ink: #EDE7DA; --strong: #F8F3E9; --muted: #A8A296;
    --line: #2A3A46; --linea-campo: #6E7B85; --teal: #EFB230; --teal-ink: #16242E; --teal-soft: #3A2E17; --navy: #0B141B; --navy-ink: #F8F3E9;
    --ambar-texto: #EFB230;
    --ok: #5fc58c; --ok-soft: #16362a; --warn: #e3a64a; --warn-soft: #3a2c14; --crit: #f07c6f; --crit-soft: #3d1c1a; --info: #7db6e0; --info-soft: #15304a;
    --morado: #b79af0; --morado-soft: #2c2140;
    --bubble-in: #1a2f42; --bubble-out: #144a41; --chat-bg: #0d1a25; --tile: #f4f7f8;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.25);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #0F1A22; --surface: #16242E; --surface-2: #1E303C; --ink: #EDE7DA; --strong: #F8F3E9; --muted: #A8A296;
  --line: #2A3A46; --linea-campo: #6E7B85; --teal: #EFB230; --teal-ink: #16242E; --teal-soft: #3A2E17; --navy: #0B141B; --navy-ink: #F8F3E9;
  --ambar-texto: #EFB230;
  --ok: #5fc58c; --ok-soft: #16362a; --warn: #e3a64a; --warn-soft: #3a2c14; --crit: #f07c6f; --crit-soft: #3d1c1a; --info: #7db6e0; --info-soft: #15304a;
  --morado: #b79af0; --morado-soft: #2c2140;
  --bubble-in: #1a2f42; --bubble-out: #144a41; --chat-bg: #0d1a25; --tile: #f4f7f8;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.25);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--body); font-size: 15px; line-height: 1.55; }
img { max-width: 100%; }
[hidden] { display: none !important; }
h1, h2, h3 { font-family: var(--display); color: var(--strong); margin: 0; text-wrap: balance; letter-spacing: -.015em; }
p { margin: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 6px; }
.mono { font-family: var(--mono); font-size: .9em; }
.num { font-variant-numeric: tabular-nums; }
.sub { color: var(--muted); font-size: 14px; }
.fuerte { color: var(--strong); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }

.envoltura { max-width: 1120px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 32px); }
.envoltura.angosta { max-width: 760px; }
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line); background: var(--surface); padding: 11px 18px; border-radius: 10px; font-weight: 600; cursor: pointer; text-decoration: none; color: var(--strong); }
.boton:hover { border-color: var(--teal); }
.boton.primario { background: var(--teal); border-color: var(--teal); color: var(--teal-ink); }
.boton.primario:hover { filter: brightness(1.06); }
.boton.chico { padding: 7px 12px; font-size: 14px; }
.boton.ancho { width: 100%; }
.boton[disabled], .boton[aria-disabled="true"] { opacity: .55; cursor: not-allowed; filter: none; }
.boton-texto { background: none; border: 0; padding: 0; color: var(--muted); text-decoration: underline; cursor: pointer; font-size: 13.5px; }
.boton-texto:hover { color: var(--crit); }
.etiqueta { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ambar-texto); font-weight: 700; }

/* ---------- cabecera y pie ---------- */
.cabecera { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 18px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.marca .sello { width: 36px; height: 36px; border-radius: 9px; background: var(--tile); display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(14,39,64,.1); flex: none; }
.marca .sello img { width: 20px; display: block; }
.marca .nombre { font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--strong); line-height: 1; display: block; }
/* El producto va al lado del nombre, más liviano: «Halbora Asistente». Nada debajo. */
.marca .producto { font-weight: 500; opacity: .85; }
.cabecera nav { display: flex; gap: 18px; align-items: center; font-weight: 500; }
.cabecera nav a { text-decoration: none; color: var(--muted); }
.cabecera nav a:hover { color: var(--strong); }
.cabecera nav a.boton.primario { color: var(--teal-ink); }
.pie { padding-block: 26px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between; margin-top: 24px; }
.pie a { color: var(--muted); }

/* ---------- avisos ---------- */
.mensajes { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mensajes li { padding: 12px 16px; border-radius: 12px; background: var(--surface-2); }
.aviso { padding: 12px 16px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.aviso.ok, .mensajes .success { background: var(--ok-soft); border-color: transparent; color: var(--ok); }
.aviso.warn, .mensajes .warning { background: var(--warn-soft); border-color: transparent; color: var(--warn); }
.aviso.error, .mensajes .error { background: var(--crit-soft); border-color: transparent; color: var(--crit); }
.pendiente-dato { background: var(--warn-soft); color: var(--warn); padding: 0 6px; border-radius: 4px; font-weight: 600; }

/* ---------- página pública ---------- */
.heroe { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 5vw, 64px); align-items: center; padding-block: clamp(24px, 6vw, 64px) clamp(40px, 7vw, 80px); }
.heroe h1 { font-size: clamp(34px, 5.2vw, 56px); font-weight: 800; line-height: 1.04; margin-top: 12px; }
.heroe h1 em { font-style: normal; color: var(--ambar-texto); }
.heroe .bajada { font-size: 18px; color: var(--muted); max-width: 52ch; margin-top: 18px; }
.heroe .acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.heroe .letra-chica { font-size: 13px; color: var(--muted); margin-top: 12px; }

/* La ilustración del chat de la página de venta. Su aspecto de WhatsApp sale de .chat-wa, más abajo. */
.telefono { max-width: 380px; justify-self: center; width: 100%; }
.chat { display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
.globo { max-width: 86%; padding: 8px 11px; border-radius: 12px; background: var(--bubble-in); box-shadow: 0 1px 1px rgba(14,39,64,.06); }
.globo.mio { align-self: flex-end; background: var(--bubble-out); }
.globo .hora { display: block; text-align: right; font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.globo ul { margin: 6px 0; padding-left: 16px; }
.factura-mini { display: grid; grid-template-columns: 34px 1fr; gap: 8px; align-items: center; padding: 6px; border-radius: 8px; background: var(--surface); margin-bottom: 5px; }
.factura-mini .hoja { width: 34px; height: 42px; border-radius: 3px; background: repeating-linear-gradient(var(--surface-2) 0 3px, transparent 3px 7px), var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.factura-mini small { color: var(--muted); display: block; font-size: 11px; }

.seccion { padding-block: clamp(40px, 7vw, 72px); }
.seccion + .seccion { border-top: 1px solid var(--line); }
.seccion h2 { font-size: clamp(26px, 3.4vw, 36px); font-weight: 700; margin-top: 8px; }
.seccion .intro { color: var(--muted); max-width: 60ch; margin-top: 10px; font-size: 16.5px; }

.pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 32px; counter-reset: paso; }
.paso { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.paso::before { counter-increment: paso; content: counter(paso); font-family: var(--display); font-weight: 700; font-size: 14px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--teal-soft); color: var(--ambar-texto); }
.paso h3 { font-size: 17px; }
.paso p { color: var(--muted); }

.calcula { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.impuesto { padding: 16px; border-radius: 12px; background: var(--surface-2); }
.impuesto b { font-family: var(--display); color: var(--strong); display: block; font-size: 16px; }
.impuesto span { color: var(--muted); font-size: 14px; }
.datos-duros { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 20px; color: var(--muted); font-size: 14px; }
.datos-duros b { color: var(--strong); }

/* planes */
.planes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; align-items: start; }
.plan { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 24px; display: flex; flex-direction: column; gap: 6px; }
.plan.destacado { border: 1.5px solid var(--teal); box-shadow: var(--shadow); }
.plan .cinta { align-self: flex-start; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; background: var(--teal-soft); color: var(--ambar-texto); }
.plan .cinta.gris { background: var(--surface-2); color: var(--muted); }
.plan h3 { font-size: 22px; margin-top: 6px; }
/* El número a la vista debajo del nombre: con él se entiende qué plan es para quién. */
.plan .cupo { font-weight: 700; color: var(--ambar-texto); font-size: 14.5px; margin-top: -2px; }
.plan .para { color: var(--muted); font-size: 14px; }
.plan .antes { color: var(--muted); text-decoration: line-through; font-size: 14px; margin-top: 10px; }
.plan .valor { font-family: var(--display); font-weight: 800; font-size: 38px; color: var(--strong); line-height: 1.05; }
.plan .valor small { font-size: 15px; font-weight: 500; color: var(--muted); }
.plan .sin-antes { margin-top: 10px; }
.plan .iva { font-size: 13px; color: var(--muted); }
.plan .descuento { align-self: flex-start; margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--ambar-texto); background: var(--teal-soft); padding: 3px 10px; border-radius: 999px; }
.plan ul { list-style: none; padding: 0; margin: 14px 0 18px; display: flex; flex-direction: column; gap: 7px; font-size: 14.5px; }
.plan li::before { content: "✓"; color: var(--ambar-texto); font-weight: 700; margin-right: 8px; }
.plan.proximo .valor { color: var(--muted); font-size: 32px; }
.plan details > summary { list-style: none; }
.plan details > summary::-webkit-details-marker { display: none; }
.plan details[open] > summary { margin-bottom: 12px; }
.plan form { display: flex; flex-direction: column; gap: 10px; }
.aclaracion { color: var(--muted); font-size: 14px; display: flex; flex-direction: column; gap: 8px; margin-top: 18px; max-width: 80ch; }

.preguntas { margin-top: 24px; display: flex; flex-direction: column; gap: 8px; }
.preguntas details { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; }
.preguntas summary { cursor: pointer; font-weight: 600; color: var(--strong); }
.preguntas details p { color: var(--muted); margin-top: 8px; max-width: 70ch; }
.cierre { text-align: center; }
.cierre .acciones { justify-content: center; display: flex; margin-top: 22px; }

/* ---------- formularios ---------- */
.campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.campo { display: flex; flex-direction: column; gap: 5px; }
.campo.ancho { grid-column: 1 / -1; }
.campo label { font-size: 13px; color: var(--muted); font-weight: 500; }
.campo input:not([type="checkbox"]), .campo select, .campo textarea { background: var(--surface-2); border: 1px solid var(--linea-campo); border-radius: 9px; padding: 10px 11px; width: 100%; min-width: 0; }
.campo input:not([type="checkbox"]):focus { border-color: var(--teal); outline: none; box-shadow: 0 0 0 3px var(--teal-soft); }
.campo .ayuda { font-size: 12.5px; color: var(--muted); }
.campo .error { font-size: 13px; color: var(--crit); }
.campo.con-error input:not([type="checkbox"]) { border-color: var(--crit); }
.errores { list-style: none; margin: 0 0 12px; padding: 10px 14px; background: var(--crit-soft); color: var(--crit); border-radius: 10px; font-size: 14px; }
.aceptar { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--muted); }
.aceptar input { margin-top: 4px; accent-color: var(--teal); flex: none; }
.aceptar a { color: var(--strong); }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.archivo { display: flex; flex-direction: column; gap: 8px; padding: 22px; border: 1.5px dashed var(--line); border-radius: 14px; background: var(--surface-2); }
.archivo input { background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 8px; width: 100%; }
.leyendo { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 12px; background: var(--teal-soft); color: var(--strong); margin-top: 16px; }
.girando { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--teal); border-right-color: transparent; animation: girar .8s linear infinite; flex: none; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- registro ---------- */
.registro { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; padding-block: 24px 64px; align-items: start; }
.avance { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 16px); }
.avance li { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; color: var(--muted); }
.avance li::before { content: attr(data-n); width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; background: var(--surface-2); }
.avance li.hecho { color: var(--ink); }
.avance li.hecho::before { content: "✓"; background: var(--ok-soft); color: var(--ok); }
.avance li.actual { background: var(--surface); color: var(--strong); font-weight: 600; box-shadow: inset 0 0 0 1px var(--line); }
.avance li.actual::before { background: var(--teal); color: var(--teal-ink); }
.caja { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 22px; }
.caja > header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.caja h2 { font-size: 19px; }
.caja h1 { font-size: 24px; }
.caja .intro-caja { color: var(--muted); margin-bottom: 16px; max-width: 62ch; }
.pie-form { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 18px; }
/* Nació para el código de verificación, que es corto. También se usa para la dirección de correo
   de facturas, que no tiene espacios y no cabe: por eso max-width y overflow-wrap, para que se
   parta en vez de salirse de la caja y sacarle barra horizontal a la página. */
.codigo { display: inline-block; max-width: 100%; overflow-wrap: anywhere; font-family: var(--mono); font-size: 26px; font-weight: 500; color: var(--strong); background: var(--surface-2); border: 1.5px dashed var(--teal); border-radius: 12px; padding: 10px 18px; letter-spacing: .08em; }
.esperando { display: flex; gap: 10px; align-items: center; color: var(--muted); font-size: 14px; }
.listo { text-align: center; padding: 30px 22px; background: var(--surface); border: 1.5px solid var(--teal); border-radius: 18px; }
.listo h2 { font-size: 24px; }
.listo p { color: var(--muted); margin-top: 8px; }
.listo .acciones { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }

/* ---------- entrar ---------- */
.entrar { max-width: 440px; margin: 24px auto 64px; }
/* Entrar, la contraseña nueva y los pasos del registro: el mismo aire del portal, con la caja
   levantada sobre un fondo tranquilo (2026-09-20). */
body:has(.entrar) { background: linear-gradient(180deg, var(--surface-2) 0 320px, var(--ground) 320px); }
.entrar { border-radius: 16px; box-shadow: var(--shadow); padding: 26px 26px 24px; }
.entrar > header { flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 18px; }
.entrar h1 { font-size: 26px; }
.entrar .boton.ancho { min-height: 46px; }
.entrar .campo input:not([type="checkbox"]) { padding: 12px 12px; }
.registro .caja { border-radius: 16px; box-shadow: var(--shadow); }
/* La contraseña del Asistente, detrás de un enlace: la puerta a la vista es una sola.
   Se abre sola cuando hay un error, para que se lea encima de los campos. */
.entrar .bajo-boton { margin-top: 10px; text-align: center; }
.otra-puerta { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.otra-puerta > summary { cursor: pointer; list-style: none; text-align: center; color: var(--strong); font-weight: 600; font-size: 14.5px; }
.otra-puerta > summary::-webkit-details-marker { display: none; }
.otra-puerta > summary:hover { text-decoration: underline; }
.otra-puerta > summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; border-radius: 6px; }
.otra-puerta[open] > summary { margin-bottom: 4px; color: var(--muted); font-weight: 500; }
.olvido { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.olvido summary { cursor: pointer; color: var(--strong); font-weight: 600; }
.olvido[open] { display: flex; flex-direction: column; gap: 10px; }
.olvido[open] .boton { align-self: flex-start; }
.olvido a:not(.boton) { color: var(--strong); }
.nueva-cuenta { margin-top: 16px; }
.nueva-cuenta a { color: var(--ambar-texto); font-weight: 600; }
/* La invitación del contador: «ya tengo usuario» y «es mi primera vez», las dos a la vista. */
.entrar .puerta + .puerta { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.entrar .puerta > h2 { margin-bottom: 4px; }
.entrar .puerta > .sub, .entrar .puerta > .aviso { margin-bottom: 14px; }

/* ---------- portal ---------- */
.portal-cabecera { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.portal-cabecera .empresa b { font-family: var(--display); color: var(--strong); font-size: 17px; display: block; line-height: 1.2; }
.portal-cabecera .empresa span { color: var(--muted); font-size: 13px; }
.portal-cabecera .quien { color: var(--muted); font-size: 14px; display: flex; gap: 10px; align-items: center; }
.portal-cabecera .quien form { margin: 0; }
.portal { display: flex; flex-direction: column; gap: 18px; padding-block: 26px 64px; }
.estado-plan { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 18px 20px; border-radius: 14px; background: var(--navy); color: var(--navy-ink); }
.estado-plan b { font-family: var(--display); font-size: 18px; display: block; }
.estado-plan span { opacity: .85; font-size: 14px; }
.estado-plan.alerta { background: var(--crit-soft); color: var(--crit); }
.estado-plan.alerta span { opacity: 1; }
.cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cifra { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.cifra span { font-size: 13px; color: var(--muted); display: block; }
.cifra b { font-family: var(--display); font-size: 26px; color: var(--strong); font-weight: 600; }
.cifra b small { font-size: 15px; color: var(--muted); font-weight: 500; }
.barra { height: 6px; border-radius: 999px; background: var(--surface-2); margin-top: 8px; overflow: hidden; }
.barra i { display: block; height: 100%; background: var(--teal); border-radius: 999px; max-width: 100%; }
.barra.llena i { background: var(--warn); }
.dos { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.columna { display: flex; flex-direction: column; gap: 16px; }
.lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lista li { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); flex-wrap: wrap; }
.lista li form { margin: 0; }
.lista li.vacia { color: var(--muted); background: none; padding-inline: 0; }
.pildora { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.pildora.ok { background: var(--ok-soft); color: var(--ok); }
.pildora.warn { background: var(--warn-soft); color: var(--warn); }
.pildora.vencida { background: var(--crit-soft); color: var(--crit); }
.historial li { display: block; }
.historial time { font-size: 12px; color: var(--muted); }
.historial p { margin-top: 2px; overflow-wrap: anywhere; }
.codigo-nuevo { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 12px; background: var(--teal-soft); margin-bottom: 12px; }
.codigo-nuevo .acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.agregar { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.agregar input { flex: 1 1 180px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; padding: 8px 11px; min-width: 0; }
.plan-actual { display: flex; flex-direction: column; gap: 6px; }
.plan-actual .valor { font-family: var(--display); font-size: 30px; font-weight: 700; color: var(--strong); }
.plan-actual .valor small { font-size: 14px; color: var(--muted); font-weight: 500; }
.plan-actual small { color: var(--muted); }
.plan-actual form { margin-top: 10px; }
/* Con Básico y PRO a la venta: los dos lado a lado; en el celular, uno debajo del otro. */
.opciones-plan { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.opcion-plan { border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.opcion-plan.destacada { border-color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal); }
.opcion-plan .valor { font-size: 24px; }
/* Registro: qué plan probar gratis. */
.elegir-plan { border: 0; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.elegir-plan legend { margin-bottom: 10px; }
label.opcion-plan { cursor: pointer; display: block; }
/* El resaltado sigue a la opción marcada, no solo a la que venía marcada. */
.elegir-plan label.opcion-plan { border-color: var(--line); box-shadow: none; }
.elegir-plan label.opcion-plan:has(input:checked) { border-color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal); }
.lista-corta { margin: 4px 0 0; padding-left: 18px; font-size: 13px; color: var(--muted); display: grid; gap: 2px; }

/* ---------- menú del portal y del panel del contador ---------- */
.menu { display: flex; gap: 4px; flex-wrap: wrap; }
.menu a { text-decoration: none; padding: 7px 12px; border-radius: 9px; color: var(--muted); font-weight: 500; font-size: 14px; }
.menu a:hover { color: var(--strong); }
.menu a[aria-current="page"] { background: var(--teal-soft); color: var(--ambar-texto); font-weight: 700; }
.menu .pro { font-size: 10px; font-weight: 700; letter-spacing: .08em; margin-left: 4px; color: var(--ambar-texto); }
.pagina { display: flex; flex-direction: column; gap: 16px; padding-block: 22px 56px; }
.angosta-pagina { max-width: 820px; }
.titulo-pagina { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.titulo-pagina h1 { font-size: 26px; margin-top: 4px; }
.herramientas { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.herramientas form { margin: 0; }
.herramientas select, .herramientas input[type="search"] { background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 9px 10px; font-size: 14px; min-width: 0; }
.herramientas input[type="search"] { width: 260px; max-width: 100%; }
.cifras.cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cifra small { color: var(--muted); font-size: 12.5px; display: block; margin-top: 2px; }
.con-lado { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.miga { font-size: 14px; color: var(--muted); }
.miga a { color: var(--ambar-texto); font-weight: 600; text-decoration: none; }

/* tablas del libro */
.tabla { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.tabla table { border-collapse: collapse; width: 100%; font-size: 14px; }
.tabla th, .tabla td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tabla th { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 700; background: var(--surface-2); }
.tabla td.der, .tabla th.der { text-align: right; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover { background: var(--surface-2); }
.tabla td a { color: inherit; }
.tabla .prov { font-weight: 600; color: var(--strong); display: block; max-width: 280px; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.tabla .prov:hover { text-decoration: underline; }
.tabla .conc { font-size: 12.5px; color: var(--muted); display: block; max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.tabla .conc.aviso-costo { color: var(--crit); }
.tabla td.neg { color: var(--crit); }
.tabla tfoot td { font-weight: 700; color: var(--strong); background: var(--surface-2); border-bottom: 0; }
.tabla .vacia { padding: 26px; text-align: center; color: var(--muted); white-space: normal; }
.tabla .cuenta-puc { width: 96px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 5px 7px; }
.pildora.revisar { background: var(--warn-soft); color: var(--warn); }
.pildora.revisada { background: var(--info-soft); color: var(--info); }
.pildora.contabilizada { background: var(--ok-soft); color: var(--ok); }
.pildora.anulada, .pildora.neutra { background: var(--surface-2); color: var(--muted); }
.pildora.grande { font-size: 13px; padding: 4px 12px; }
.barras { display: flex; flex-direction: column; gap: 10px; }
.barras .fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; font-size: 13.5px; }
.barras .fila i { grid-column: 1 / -1; height: 7px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.barras .fila i b { display: block; height: 100%; background: var(--teal); border-radius: 999px; }
.persona { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--teal-soft); color: var(--ambar-texto); display: grid; place-items: center; font-family: var(--display); font-weight: 700; flex: none; }
.progreso { height: 7px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin-block: 6px 10px; }
.progreso b { display: block; height: 100%; background: var(--ok); }
.enlace-copiable { width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; font-size: 12.5px; }
.lista-beneficios { margin: 0 0 8px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }

/* detalle de una compra */
.detalle { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 18px; align-items: start; }
.foto-factura { display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
.foto-factura img { display: block; width: 100%; height: auto; }
.sin-foto { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: 22px; border-radius: 12px; border: 1.5px dashed var(--line); background: var(--surface-2); }
.foto-nota { font-size: 13px; color: var(--muted); text-align: center; }
.grupo-campos { border: 0; margin: 0; padding: 0; min-width: 0; }
.grupo-campos[disabled] input, .grupo-campos[disabled] select { opacity: .75; cursor: not-allowed; }
.subtitulo-caja { font-size: 15px; margin: 18px 0 10px; }
.nit-dv { display: grid; grid-template-columns: minmax(0, 1fr) auto 52px; gap: 6px; align-items: center; }
.ok-dv { font-size: 11px; font-weight: 700; color: var(--ok); }
.campo select { background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; padding: 10px 11px; width: 100%; }
.desglose { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 16px; font-size: 14.5px; }
.desglose .neg { color: var(--crit); }
.desglose .total { font-family: var(--display); font-size: 18px; font-weight: 700; color: var(--strong); padding-top: 8px; border-top: 1px solid var(--line); }
.porque { list-style: none; margin: 12px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--surface-2); display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: var(--muted); }
.porque li::before { content: "·"; color: var(--ambar-texto); font-weight: 800; margin-right: 8px; }
.historia { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; }
.historia li { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 10px; }
.historia li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); margin-top: 7px; }
.historia time { color: var(--muted); font-size: 12px; display: block; }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.acciones form { margin: 0; }
.boton.peligro { color: var(--crit); }

/* panel del contador */
.banda-contador { display: flex; justify-content: space-between; gap: 12px 20px; align-items: center; flex-wrap: wrap; padding: 14px 18px; border-radius: 14px; background: var(--navy); color: var(--navy-ink); margin-top: 16px; }
.banda-contador b { font-family: var(--display); font-size: 17px; display: block; }
.banda-contador span { opacity: .82; font-size: 13.5px; }
.banda-contador select { background: rgba(255,255,255,.08); color: var(--navy-ink); border: 1px solid rgba(233,241,245,.3); border-radius: 9px; padding: 8px 10px; max-width: 100%; }
.banda-contador select option { color: #10293f; }
.banda-contador form { margin: 0; }
.banda-contador label { font-size: 13.5px; opacity: .82; }
.banda-contador .boton-texto { color: var(--navy-ink); font-size: 13.5px; }
.banda-contador .boton-texto:hover { color: #fff; }
/* Debajo de la banda: el WhatsApp del contador con esta empresa, si todavía no le sirve. */
.whatsapp-contador { margin-top: 10px; display: flex; gap: 8px 14px; align-items: center; flex-wrap: wrap; font-size: 14px; }
.whatsapp-contador form { margin: 0; }
.sub-pestanas { display: flex; gap: 6px; flex-wrap: wrap; }
.sub-pestanas a { border: 1px solid var(--line); background: var(--surface); padding: 7px 12px; border-radius: 9px; font-weight: 600; font-size: 14px; color: var(--muted); text-decoration: none; }
.sub-pestanas a[aria-current="page"] { border-color: var(--teal); color: var(--ambar-texto); background: var(--teal-soft); }
.sub-pestanas .cuenta { font-size: 12px; margin-left: 4px; }
.masivo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.nota-legal { font-size: 12.5px; color: var(--muted); margin-top: 10px; }
.nota-legal a { color: var(--ambar-texto); }
.cifra-grande { font-family: var(--display); font-size: 26px; font-weight: 700; color: var(--strong); }

/* historial de consultas */
.conversacion { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.conversacion > li { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.conversacion > li.vacia { color: var(--muted); text-align: center; }
.conversacion time { display: block; font-size: 12px; color: var(--muted); }
.conversacion .pregunta p { margin-top: 4px; color: var(--strong); overflow-wrap: anywhere; }
.conversacion .adjunto { display: inline-block; margin-top: 6px; font-size: 13.5px; color: var(--ambar-texto); font-weight: 600; text-decoration: none; }
.conversacion .respuesta { padding: 10px 12px; border-radius: 10px; background: var(--bubble-out); font-size: 14px; overflow-wrap: anywhere; }
.paginas { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; }

/* ---------- aviso de cookies ---------- */
.aviso-cookies { position: fixed; left: 16px; right: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); z-index: 30; max-width: 620px; margin-inline: auto; display: flex; gap: 12px 16px; align-items: center; flex-wrap: wrap; padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 13.5px; color: var(--muted); }
.aviso-cookies p { flex: 1 1 260px; }
.aviso-cookies a { color: var(--strong); }
.opciones-cookies { flex: 1 1 100%; display: flex; flex-direction: column; gap: 8px; padding: 10px 0 4px; border-top: 1px solid var(--line); }
.acciones-cookies { display: flex; gap: 8px; flex-wrap: wrap; }
.cookies-vistas .aviso-cookies { display: none; }
.pie .boton-texto { font-size: 13px; color: var(--muted); }
.pie .boton-texto:hover { color: var(--strong); }

/* ---------- páginas legales ---------- */
.legal { padding-block: 16px 48px; }
.tabla-legal { overflow-x: auto; margin-top: 14px; }
.tabla-legal table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 14px; }
.tabla-legal th, .tabla-legal td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.tabla-legal th { font-family: var(--display); color: var(--strong); font-size: 13px; }
.legal h1 { font-size: clamp(28px, 4vw, 38px); }
.legal .vigencia { color: var(--muted); margin-top: 8px; }
.legal h2 { font-size: 20px; margin-top: 32px; }
.legal h3.subtitulo-legal { font-size: 16px; margin-top: 22px; }
.legal .boton-texto { font-size: inherit; color: var(--strong); }
.legal p, .legal li { max-width: 72ch; margin-top: 10px; }
.legal ul, .legal ol { padding-left: 22px; }

@media (max-width: 980px) {
  .con-lado, .detalle { grid-template-columns: minmax(0, 1fr); }
  .cifras.cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .heroe, .dos, .registro { grid-template-columns: minmax(0, 1fr); }
  .pasos, .planes { grid-template-columns: minmax(0, 1fr); }
  .calcula { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cabecera nav a:not(.boton):not(.siempre) { display: none; }
  .avance { position: static; flex-direction: row; overflow-x: auto; }
  .avance li { white-space: nowrap; }
}
@media (max-width: 560px) {
  .campos, .cifras, .cifras.cuatro, .calcula { grid-template-columns: minmax(0, 1fr); }
  .herramientas input[type="search"] { width: 100%; }
  .estado-plan { grid-template-columns: minmax(0, 1fr); }
  .codigo { font-size: 22px; }
}
.aviso-cierre { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px; font-size: 14px; color: var(--muted); }

/* =====================================================================================
   Portal y panel del contador con menú lateral (19/09/2026).
   Diseño tomado de la maqueta de Antigravity (barra lateral oscura, tarjetas blancas con
   sombra suave, tablas limpias, panel de detalle a la derecha), con los colores y la letra
   de Halbora. Solo aplica donde está el menú del portal: la página pública y el registro
   no cambian. :where() deja estas reglas sin peso extra, para que ganen por ir de últimas.
   ===================================================================================== */
:root { --lateral: 248px; --radio: 12px; --linea-suave: #e3e9ee; --sombra-suave: 0 1px 3px rgba(14,39,64,.06), 0 1px 2px rgba(14,39,64,.04); --lateral-fondo: #0e2740; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --linea-suave: #22394d; --sombra-suave: 0 1px 2px rgba(0,0,0,.35); --lateral-fondo: #07111a; }
}
:root[data-theme="dark"] { --linea-suave: #22394d; --sombra-suave: 0 1px 2px rgba(0,0,0,.35); --lateral-fondo: #07111a; }

/* ---------- la barra lateral ---------- */
.envoltura:has(> .portal-cabecera) { --canal: clamp(16px, 3vw, 40px); max-width: none; margin: 0; padding: 0 0 0 var(--lateral); min-height: 100vh; display: flex; flex-direction: column; }
.envoltura:has(> .portal-cabecera) > :not(.portal-cabecera) { width: min(100% - 2 * var(--canal), 1180px); margin-inline: auto; }
.envoltura:has(> .portal-cabecera) > main { flex: 1 0 auto; }
.envoltura > .portal-cabecera { position: fixed; top: 0; bottom: 0; left: 0; z-index: 20; width: var(--lateral); display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 22px; padding: 22px 14px 18px; background: var(--lateral-fondo); color: var(--navy-ink); border: 0; overflow-y: auto; }
.portal-cabecera .marca { padding-inline: 8px; }
.portal-cabecera .marca .nombre { color: #fff; font-size: 16.5px; white-space: nowrap; }
.portal-cabecera .menu { flex-direction: column; flex-wrap: nowrap; gap: 3px; }
.portal-cabecera .menu a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; color: rgba(233,241,245,.74); font-size: 14.5px; font-weight: 500; transition: background .15s, color .15s; }
.portal-cabecera .menu a:hover { background: rgba(255,255,255,.06); color: #fff; }
.portal-cabecera .menu a[aria-current="page"] { background: rgba(255,255,255,.11); color: #fff; font-weight: 600; }
.portal-cabecera .menu svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.portal-cabecera .menu .pro { margin-left: auto; padding: 1px 7px; border-radius: 999px; background: rgba(55,195,170,.16); color: #6fd8c4; font-size: 10px; letter-spacing: .06em; }
.portal-cabecera .quien { margin-top: auto; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 10px 0; border-top: 1px solid rgba(233,241,245,.12); color: rgba(233,241,245,.78); font-size: 13.5px; }
.portal-cabecera .quien > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-cabecera .quien .boton-texto { color: rgba(233,241,245,.7); }
.portal-cabecera .quien .boton-texto:hover { color: #fff; }
/* El panel del contador: la franja con la empresa va arriba del contenido. */
.envoltura:has(> .portal-cabecera) > .banda-contador { margin-top: 22px; }

/* ---------- tarjetas, cifras, listas y tablas ---------- */
:where(body:has(.portal-cabecera)) .caja { border-radius: var(--radio); border-color: var(--linea-suave); box-shadow: var(--sombra-suave); padding: 22px 24px; }
:where(body:has(.portal-cabecera)) .caja > header { margin-bottom: 16px; }
:where(body:has(.portal-cabecera)) .caja h2 { font-family: var(--body); font-size: 17px; font-weight: 700; letter-spacing: 0; }
:where(body:has(.portal-cabecera)) .cifra { border-radius: var(--radio); border-color: var(--linea-suave); box-shadow: var(--sombra-suave); padding: 16px 18px; }
:where(body:has(.portal-cabecera)) .cifra b { font-size: 24px; }
:where(body:has(.portal-cabecera)) .lista { gap: 0; }
:where(body:has(.portal-cabecera)) .lista li { background: none; border-radius: 0; padding: 12px 2px; border-bottom: 1px solid var(--linea-suave); }
:where(body:has(.portal-cabecera)) .lista li:last-child { border-bottom: 0; }
:where(body:has(.portal-cabecera)) .titulo-pagina h1 { font-size: 28px; }
:where(body:has(.portal-cabecera)) .tabla { border-radius: var(--radio); border-color: var(--linea-suave); box-shadow: var(--sombra-suave); padding: 4px 10px; }
:where(body:has(.portal-cabecera)) .tabla th { background: none; text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; padding: 13px 12px; border-bottom-color: var(--linea-suave); }
:where(body:has(.portal-cabecera)) .tabla td { padding: 14px 12px; border-bottom-color: var(--linea-suave); }
:where(body:has(.portal-cabecera)) .tabla tbody tr { transition: background .15s; }
:where(body:has(.portal-cabecera)) .tabla tfoot td { background: none; border-top: 1px solid var(--linea-suave); }
:where(body:has(.portal-cabecera)) .herramientas.filtros { padding: 10px 12px; background: var(--surface); border: 1px solid var(--linea-suave); border-radius: var(--radio); box-shadow: var(--sombra-suave); }
:where(body:has(.portal-cabecera)) .estado-plan { border-radius: var(--radio); }
:where(body:has(.portal-cabecera)) .pie { border-top-color: var(--linea-suave); }

.tabla td.envolver { white-space: normal; min-width: 150px; }
.tabla td.envolver .pildora { display: inline-block; margin: 2px 0; }

/* ---------- pestañas de Facturas y fichas de filtro ---------- */
.pestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--linea-suave); }
.pestanas a { padding: 10px 14px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--muted); font-weight: 600; text-decoration: none; }
.pestanas a:hover { color: var(--strong); }
.pestanas a[aria-current="page"] { color: var(--strong); border-bottom-color: var(--ambar-texto); }
.pestanas .cuenta { margin-left: 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.fichas { display: flex; gap: 4px; flex-wrap: wrap; }
.fichas a { padding: 6px 12px; border: 1px solid transparent; border-radius: 8px; color: var(--muted); font-weight: 600; font-size: 14px; text-decoration: none; }
.fichas a:hover { color: var(--strong); background: var(--surface-2); }
.fichas a[aria-current="true"] { color: var(--strong); background: var(--surface-2); border-color: var(--linea-suave); }

/* ---------- panel de detalle a la derecha ---------- */
tr[data-panel] { cursor: pointer; }
tr[data-panel][aria-selected="true"] { background: var(--teal-soft); }
.velo { position: fixed; inset: 0; z-index: 35; background: rgba(10,20,29,.28); opacity: 0; pointer-events: none; transition: opacity .2s; }
.velo.visible { opacity: 1; pointer-events: auto; }
.panel-lateral { position: fixed; top: 0; right: 0; bottom: 0; z-index: 40; width: min(420px, 100%); display: flex; flex-direction: column; background: var(--surface); box-shadow: -8px 0 30px rgba(14,39,64,.16); transform: translateX(100%); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; }
.panel-lateral.abierto { transform: none; visibility: visible; transition: transform .25s ease, visibility 0s; }
.panel-lateral > header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--linea-suave); }
.panel-lateral > header h2 { font-size: 18px; }
.cerrar-panel { width: 34px; height: 34px; border: 0; border-radius: 8px; background: none; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; }
.cerrar-panel:hover { background: var(--surface-2); color: var(--strong); }
.cuerpo-panel { flex: 1; overflow-y: auto; padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 22px; }
.cuerpo-panel h3 { margin-bottom: 8px; font-family: var(--body); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fila-impuesto { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--linea-suave); font-size: 14.5px; }
.fila-impuesto > span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.fila-impuesto.cero { color: var(--muted); }
.fila-impuesto.menos > span:last-child { color: var(--crit); }
.fila-impuesto.total { margin-top: 6px; padding-top: 12px; border-bottom: 0; border-top: 2px solid var(--linea-suave); font-size: 16px; font-weight: 700; color: var(--strong); }
.acciones-panel { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }

/* ---------- inicio: facturas recientes, saldo y el chat de WhatsApp ---------- */
.inicio-titulo { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.inicio-titulo h1 { font-size: 28px; }
.inicio-grilla { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.tabla-simple { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla-simple th { text-align: left; padding: 0 10px 10px; font-size: 13px; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--linea-suave); }
.tabla-simple td { padding: 13px 10px; border-bottom: 1px solid var(--linea-suave); vertical-align: middle; }
.tabla-simple td:not(:first-child) { white-space: nowrap; }
.tabla-simple tr:last-child td { border-bottom: 0; }
.tabla-simple .der { text-align: right; }
.tabla-simple .nombre { display: block; font-weight: 600; color: var(--strong); text-decoration: none; }
.tabla-simple a.nombre:hover { text-decoration: underline; }
.tabla-simple .nit { display: block; font-size: 12px; color: var(--muted); }
.tipo { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.saldo { font-family: var(--display); font-size: 32px; font-weight: 700; color: var(--strong); line-height: 1.1; }
.saldo small { font-family: var(--body); font-size: 14px; font-weight: 500; color: var(--muted); }
.fila-saldo { display: flex; justify-content: space-between; gap: 10px; padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--linea-suave); font-size: 14px; color: var(--muted); }
.fila-saldo b { color: var(--strong); font-variant-numeric: tabular-nums; }
/* El chat con el asistente, con el aspecto de WhatsApp (la maqueta de Antigravity): franja verde,
   fondo beige, burbujas con su pico y la barra de escribir. La barra es de verdad: lo que se
   escribe abre WhatsApp con el mensaje listo para mandárselo al asistente. Los colores los usa
   también el chat de soporte (.chat-web y .chat-web-pagina, más abajo), para que se vea igual. */
:is(.chat-wa, .chat-web, .chat-web-pagina) {
  --wa-franja: #006c59; --wa-cabeza: #008069; --wa-fondo: #efeae2; --wa-entra: #ffffff; --wa-sale: #d9fdd3;
  --wa-texto: #111b21; --wa-hora: #667781; --wa-barra: #f0f2f5; --wa-campo: #ffffff; --wa-icono: #54656f;
  --wa-boton: #00a884; --wa-visto: #53bdeb; --wa-nombre: #06806b;
}
.chat-wa {
  border-radius: var(--radio); overflow: hidden; border: 1px solid var(--linea-suave); box-shadow: var(--sombra-suave); color: var(--wa-texto);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.chat-wa, .chat-web, .chat-web-pagina) {
    --wa-franja: #111b21; --wa-cabeza: #202c33; --wa-fondo: #0b141a; --wa-entra: #202c33; --wa-sale: #005c4b;
    --wa-texto: #e9edef; --wa-hora: #9fb0ba; --wa-barra: #202c33; --wa-campo: #2a3942; --wa-icono: #8696a0; --wa-nombre: #53d1b6;
  }
}
:root[data-theme="dark"] :is(.chat-wa, .chat-web, .chat-web-pagina) {
  --wa-franja: #111b21; --wa-cabeza: #202c33; --wa-fondo: #0b141a; --wa-entra: #202c33; --wa-sale: #005c4b;
  --wa-texto: #e9edef; --wa-hora: #9fb0ba; --wa-barra: #202c33; --wa-campo: #2a3942; --wa-icono: #8696a0; --wa-nombre: #53d1b6;
}
.chat-wa svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.wa-franja { display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: var(--wa-franja); color: #fff; font-size: 13.5px; font-weight: 600; }
.wa-franja svg { width: 19px; height: 19px; }
.wa-franja a { margin-left: auto; color: #fff; font-weight: 500; font-size: 12.5px; opacity: .9; }
.wa-franja a:hover { opacity: 1; }
.chat-wa > header { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--wa-cabeza); color: #fff; }
.chat-wa > header > svg { opacity: .9; }
.chat-wa > header .sello { width: 36px; height: 36px; border-radius: 50%; background: #fff; display: grid; place-items: center; flex: none; }
.chat-wa > header .sello img { width: 19px; }
.chat-wa > header b { display: block; font-family: var(--body); font-size: 15px; font-weight: 600; line-height: 1.25; }
.chat-wa > header span { font-size: 12px; opacity: .85; }
.chat-wa .chat {
  padding: 14px 18px; min-height: 220px; max-height: 440px; overflow-y: auto; gap: 3px; font-size: 14px; background-color: var(--wa-fondo);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='none' stroke='%238696a0' stroke-opacity='.13' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M14 18h16v12H20l-6 5z'/%3E%3Ccircle cx='86' cy='26' r='7'/%3E%3Cpath d='M82 26h8M86 22v8M52 60l6-10 6 10zM20 84h14M20 90h9M92 78c-6 0-8 5-8 9s3 8 8 8 8-4 8-8'/%3E%3Cpath d='M56 100l4 4 8-9'/%3E%3C/svg%3E");
}
.chat-wa .globo { position: relative; align-self: flex-start; max-width: 88%; margin-top: 7px; padding: 6px 9px 7px; border-radius: 8px; border-top-left-radius: 0; background: var(--wa-entra); color: var(--wa-texto); box-shadow: 0 1px .5px rgba(11,20,26,.13); line-height: 1.4; overflow-wrap: anywhere; }
.chat-wa .globo.mio { align-self: flex-end; border-radius: 8px; border-top-right-radius: 0; background: var(--wa-sale); }
.chat-wa .globo::before { content: ""; position: absolute; top: 0; left: -8px; width: 8px; height: 12px; background: inherit; clip-path: polygon(100% 0, 0 0, 100% 100%); }
.chat-wa .globo.mio::before { left: auto; right: -8px; clip-path: polygon(0 0, 100% 0, 0 100%); }
/* Varios seguidos de la misma persona: solo el primero lleva pico. */
.chat-wa .globo.mio + .globo.mio, .chat-wa .globo:not(.mio) + .globo:not(.mio) { margin-top: 0; border-radius: 8px; }
.chat-wa .globo.mio + .globo.mio::before, .chat-wa .globo:not(.mio) + .globo:not(.mio)::before { display: none; }
.chat-wa .globo .quien-escribe { display: block; font-size: 12.5px; font-weight: 600; color: var(--wa-nombre); }
.chat-wa .globo .hora { display: flex; justify-content: flex-end; align-items: center; gap: 3px; margin-top: 1px; font-size: 11px; color: var(--wa-hora); }
.chat-wa .globo .hora svg { width: 16px; height: 11px; stroke: var(--wa-visto); stroke-width: 1.6; }
.chat-wa .dia { align-self: center; margin: 4px 0 2px; padding: 4px 12px; border-radius: 8px; background: var(--wa-entra); color: var(--wa-hora); font-size: 12px; box-shadow: 0 1px .5px rgba(11,20,26,.13); }
.chat-wa .vacio { margin: auto; max-width: 30ch; padding: 10px 14px; border-radius: 8px; background: var(--wa-entra); color: var(--wa-hora); font-size: 13px; text-align: center; box-shadow: 0 1px .5px rgba(11,20,26,.13); }
.wa-barra { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 10px; background: var(--wa-barra); }
.wa-campo { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 4px 8px 4px 10px; border-radius: 22px; background: var(--wa-campo); color: var(--wa-icono); }
.wa-campo:focus-within { box-shadow: 0 0 0 2px var(--wa-boton); }
.wa-campo input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; padding: 7px 2px; color: var(--wa-texto); font-size: 14.5px; }
.wa-campo input::placeholder { color: var(--wa-icono); opacity: 1; }
.wa-campo a { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--wa-icono); }
.wa-campo a:hover { background: rgba(134,150,160,.18); }
.wa-enviar { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--wa-boton); color: #fff; cursor: pointer; }
.wa-enviar:hover { filter: brightness(1.06); }
.wa-enviar .ico-enviar, .wa-barra.con-texto .wa-enviar .ico-voz { display: none; }
.wa-barra.con-texto .wa-enviar .ico-enviar { display: block; }
/* La foto de la factura dentro de una burbuja. */
.chat-wa .factura-mini { background: rgba(11,20,26,.07); color: var(--wa-texto); }
.chat-wa .factura-mini .hoja { background: repeating-linear-gradient(#e3e8eb 0 3px, transparent 3px 7px), #fff; box-shadow: inset 0 0 0 1px rgba(11,20,26,.14); }
.chat-wa .factura-mini small { color: var(--wa-hora); }
/* En la página de venta es una ilustración dentro de un teléfono: sin tope de alto y con la barra de adorno. */
.telefono.chat-wa { border-radius: 26px; box-shadow: var(--shadow); }
.telefono.chat-wa .chat { min-height: 0; max-height: none; overflow: visible; padding-block: 14px 20px; }
.telefono .wa-campo { padding-block: 9px; }
.telefono .wa-campo .marcador { flex: 1; font-size: 14.5px; color: var(--wa-icono); }
.telefono .wa-enviar { cursor: default; }

/* ---------- celular y tableta ---------- */
@media (max-width: 1100px) {
  .inicio-grilla { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .envoltura:has(> .portal-cabecera) { padding-left: 0; }
  .envoltura > .portal-cabecera { position: static; width: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px var(--canal) 8px; overflow: visible; }
  .portal-cabecera .menu { order: 3; flex: 1 1 100%; flex-direction: row; overflow-x: auto; gap: 2px; margin-inline: calc(-1 * var(--canal)); padding: 0 var(--canal) 4px; scrollbar-width: none; }
  .portal-cabecera .menu::-webkit-scrollbar { display: none; }
  .portal-cabecera .menu a { flex: none; gap: 8px; padding: 8px 10px; font-size: 14px; }
  .portal-cabecera .menu svg { width: 18px; height: 18px; }
  .portal-cabecera .menu .pro { display: none; }
  .portal-cabecera .quien { margin: 0 0 0 auto; padding: 0; border: 0; flex-direction: row; align-items: center; gap: 10px; }
  .portal-cabecera .quien > span { display: none; }
  .tabla-simple .ocultar-celular { display: none; }
}

/* El QR del mensaje de WhatsApp: se escanea desde el computador con el celular. */
.con-qr { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; justify-content: space-between; }
.con-qr > div:first-child { flex: 1 1 260px; }
.qr-caja { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; }
.qr-caja figcaption { font-size: 13px; color: var(--muted); }
.qr { width: 156px; height: 156px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px; }

/* ---------------------------------------------------------------------------
   Contabilidad (panel del contador): balance de prueba, libro diario y mayor.
   --------------------------------------------------------------------------- */
.pildora.crit { background: var(--crit-soft); color: var(--crit); }
.contabilidad .naturaleza { display: inline-block; min-width: 1.2em; margin-left: 4px; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.contabilidad .negativo { color: var(--crit); }
.contabilidad .balance td:first-child a, .contabilidad .asiento td a.mono { color: var(--ambar-texto); font-weight: 600; text-decoration: none; }
.contabilidad .balance td:first-child a:hover, .contabilidad .asiento td a.mono:hover { text-decoration: underline; }
.contabilidad .asiento > header { align-items: flex-start; }
.contabilidad .asiento h2 { font-size: 16px; }
.contabilidad .asiento .sub { margin-top: 2px; }
.contabilidad .asiento .tabla { margin-inline: -22px; margin-bottom: -22px; border-radius: 0 0 16px 16px; }
.contabilidad .asiento .nota-legal { margin-top: 30px; }
.contabilidad .migas { margin-top: -6px; font-size: 14px; }
.contabilidad .migas a { color: var(--ambar-texto); font-weight: 600; text-decoration: none; }
.contabilidad .vacia-caja { color: var(--muted); text-align: center; padding: 10px; }
/* El nombre de la cuenta y el detalle pueden partirse en dos líneas: las cifras no. Así la tabla
   cabe al lado de la caja del resultado sin barra de desplazamiento. */
.contabilidad .balance td:nth-child(2),
.contabilidad .asiento td:nth-child(2), .contabilidad .asiento td:nth-child(3),
.contabilidad .mayor td:nth-child(3), .contabilidad .mayor td:nth-child(4) { white-space: normal; min-width: 140px; }
.contabilidad .tabla th, .contabilidad .tabla td { padding-inline: 10px; }
/* Saldo anterior, un tono más suave: lo que manda es lo del mes y el saldo actual. */
.contabilidad .tenue { color: var(--muted); }
.contabilidad .apertura td { color: var(--muted); font-style: italic; background: var(--surface-2); }
/* Estados financieros: los dos, lado a lado; en pantalla angosta, uno debajo del otro. */
.contabilidad .estados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .contabilidad .estados { grid-template-columns: minmax(0, 1fr); } }
.contabilidad .estados .caja > header { align-items: baseline; }
.contabilidad .estados .tabla { border: 0; border-radius: 0; margin-inline: -22px; margin-bottom: -22px; }
.contabilidad .estado td { white-space: normal; }
.contabilidad .estado td:first-child { width: 64px; }
.contabilidad .estado tr.clase td { padding-top: 16px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 700; background: var(--surface-2); }
.contabilidad .estado tr.grupo td { font-weight: 700; color: var(--strong); }
.contabilidad .estado tr.cuenta td:nth-child(2) { padding-left: 22px; }
.contabilidad .estado tr.cuenta a { color: var(--ambar-texto); text-decoration: none; }
.contabilidad .estado tr.total td { font-weight: 700; border-top: 1px solid var(--line); }
.contabilidad .estado tr.subtotal td { font-weight: 700; color: var(--ambar-texto); }
.contabilidad .estado tr.final td { font-size: 15.5px; font-weight: 800; color: var(--strong); border-top: 2px solid var(--strong); }
.contabilidad .estado tr.final.negativo td, .contabilidad .estado td.negativo { color: var(--crit); }
/* Cartera por edades: lo vencido se pinta, y más fuerte pasados 90 días. */
.contabilidad .cifras-cartera { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .contabilidad .cifras-cartera { grid-template-columns: minmax(0, 1fr); } }
.contabilidad .cifras-cartera .caja { display: flex; flex-direction: column; gap: 4px; }
.contabilidad .vencido { color: var(--warn); }
.contabilidad .muy-vencido { color: var(--crit); font-weight: 600; }
.contabilidad .cartera-lado .tabla { border: 0; border-radius: 0; margin-inline: -22px; margin-bottom: -22px; }
.contabilidad .cartera td:first-child { white-space: normal; min-width: 220px; }
.contabilidad .cartera summary { cursor: pointer; list-style-position: outside; }
.contabilidad .cartera summary:hover b { text-decoration: underline; }
.contabilidad .cartera .documentos { list-style: none; margin: 8px 0 2px; padding: 0 0 0 4px; display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.contabilidad .cartera .documentos li { display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.contabilidad .cartera .documentos a { color: var(--ambar-texto); font-weight: 600; text-decoration: none; }
.contabilidad .cartera .documentos .num { margin-left: auto; color: var(--strong); }
/* Plan de cuentas: la sangría y la columna «Nivel» dicen el escalón (clase, grupo, auxiliar,
   subauxiliar); la columna «Clasificación», si es activo, pasivo, patrimonio, ingreso o gasto. */
.contabilidad .escalera-puc { max-width: 78ch; margin-top: 0; margin-bottom: 12px; }
.contabilidad .buscar-cuentas { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.contabilidad .buscar-cuentas input[type="search"] { flex: 1 1 220px; }
.contabilidad .catalogo td:nth-child(2) { white-space: normal; min-width: 240px; }
.contabilidad .catalogo tr.nivel-0 td { font-weight: 800; background: var(--surface-2); }
.contabilidad .catalogo tr.nivel-1 td { font-weight: 700; }
.contabilidad .catalogo tr.nivel-1 td:nth-child(2) { padding-left: 18px; }
.contabilidad .catalogo tr.nivel-2 td:nth-child(2) { padding-left: 32px; font-weight: 600; }
.contabilidad .catalogo tr.nivel-3 td:nth-child(2) { padding-left: 46px; }
.contabilidad .catalogo tr.nivel-4 td:nth-child(2) { padding-left: 60px; color: var(--muted); }
.contabilidad .catalogo tr.inactiva td { opacity: .55; }
.contabilidad .catalogo td a { color: var(--ambar-texto); font-weight: 600; text-decoration: none; }
.contabilidad .renombrar summary { cursor: pointer; list-style: none; }
.contabilidad .renombrar summary::-webkit-details-marker { display: none; }
.contabilidad .renombrar summary:hover { text-decoration: underline dotted; }
.contabilidad .renombrar[open] summary { color: var(--muted); }
.contabilidad form.en-linea { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.contabilidad form.en-linea input[type="text"] { flex: 1 1 200px; }
.contabilidad .agregar-cuenta, .contabilidad .parametros-cuenta { display: grid; gap: 10px; }
.contabilidad .agregar-cuenta label, .contabilidad .parametros-cuenta label { display: grid; gap: 4px; font-size: 13.5px; font-weight: 600; color: var(--strong); }
.contabilidad .agregar-cuenta label.casilla, .contabilidad .parametros-cuenta label.casilla { display: flex; gap: 8px; align-items: center; font-weight: 500; color: var(--muted); }
/* El formulario de la cuenta va dentro de la celda del nombre: cabe, pero sin estirar la tabla. */
.contabilidad .parametros-cuenta { margin-top: 8px; max-width: 320px; }
.contabilidad .parametros-cuenta .boton { justify-self: start; }
.pildora.info { background: var(--info-soft); color: var(--info); }
/* Cierre del mes: cada mes en su caja, con su estado a la vista. */
.contabilidad .intro-cierre { max-width: 70ch; }
.contabilidad .mes-cierre > header { align-items: flex-start; }
.contabilidad .mes-cierre.cerrado { border-left: 4px solid var(--ok); }
.contabilidad .mes-cierre.descuadrado { border-left: 4px solid var(--crit); }
.contabilidad .accion-mes, .contabilidad .historia-mes { margin-top: 12px; }
.contabilidad .accion-mes > summary, .contabilidad .historia-mes > summary { cursor: pointer; font-weight: 600; color: var(--ambar-texto); }
.contabilidad .accion-mes form { display: grid; gap: 10px; max-width: 520px; margin-top: 10px; }
.contabilidad .accion-mes label { display: grid; gap: 4px; font-size: 13.5px; font-weight: 600; color: var(--strong); }
.contabilidad .accion-mes label.casilla { display: flex; gap: 8px; align-items: center; font-weight: 500; color: var(--muted); }
.contabilidad .accion-mes .boton { justify-self: start; }
.contabilidad .historia-mes ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13.5px; color: var(--muted); }
.contabilidad .catalogo td:last-child { white-space: nowrap; }
.contabilidad .catalogo td:last-child form.en-linea { flex-wrap: nowrap; margin-top: 0; }
.contabilidad .agregar-cuenta input::placeholder { color: var(--muted); opacity: .7; }
/* ---------------------------------------------------------------------------
   Asientos manuales y conciliación bancaria: los estilos que estaban sueltos en
   sus plantillas, con las mismas clases, y lo que les faltaba para el celular.
   --------------------------------------------------------------------------- */
.contabilidad .intro-seccion { max-width: 72ch; }
.contabilidad .titulo-largo { font-size: clamp(20px, 2.4vw, 26px); overflow-wrap: anywhere; }
/* Líneas de un asiento nuevo: la tabla guarda un ancho mínimo para que los campos se puedan usar;
   en el celular se desliza de lado en vez de apretarlos. */
.lineas-asiento { min-width: 640px; }
.lineas-asiento td { vertical-align: top; }
.lineas-asiento input { width: 100%; min-width: 0; }
.lineas-asiento .col-cuenta { width: 9rem; }
.lineas-asiento .col-nit { width: 9rem; }
.lineas-asiento .col-valor { width: 9.5rem; }
.lineas-asiento .error { display: block; color: var(--crit); font-size: 12.5px; margin-top: 4px; white-space: normal; }
.lineas-asiento tfoot td { font-weight: 700; }
.lineas-asiento .descuadre { color: var(--crit); }
/* Una línea del extracto del banco. */
.linea-banco { display: grid; gap: 10px; }
.linea-banco .cabeza { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.linea-banco .valor { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 16px; }
.linea-banco .entra { color: var(--ok); }
.linea-banco .sale { color: var(--crit); }
.linea-banco details { border-top: 1px solid var(--line); padding-top: 8px; }
.linea-banco summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--ambar-texto); }
.linea-banco .opcion { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; font-size: 14px; }
.linea-banco .en-linea { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; margin-top: 8px; }
.linea-banco .en-linea .campo { flex: 1 1 160px; margin: 0; }
@media (max-width: 560px) {
  .linea-banco .en-linea { flex-direction: column; align-items: stretch; }
  .linea-banco .en-linea .campo { flex: none; }
  .linea-banco .en-linea .boton { align-self: flex-start; }
  .linea-banco .opcion { align-items: flex-start; }
}
/* Los campos de las líneas del asiento, con el mismo aire que los demás campos del portal. */
.lineas-asiento input { background: var(--surface-2); border: 1px solid var(--linea-campo); border-radius: 8px; padding: 8px 9px; font: inherit; font-size: 14px; }
.lineas-asiento input:focus { border-color: var(--teal); outline: none; box-shadow: 0 0 0 3px var(--teal-soft); }
.lineas-asiento input[name$="-cuenta"], .lineas-asiento input[name$="-nit"] { font-family: var(--mono); }
.lineas-asiento input[name$="-debito"], .lineas-asiento input[name$="-credito"] { text-align: right; font-variant-numeric: tabular-nums; }
/* En la columna angosta de al lado (subir un extracto), un campo por renglón. */
.contabilidad .columna .campos { grid-template-columns: minmax(0, 1fr); }
/* Facturas del correo: lo que llegó contra lo que está en el libro. */
.recibidas .cifras-recibidas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .recibidas .cifras-recibidas { grid-template-columns: minmax(0, 1fr); } }
.recibidas .cifras-recibidas .caja { display: flex; flex-direction: column; gap: 4px; }
.recibidas .cifras-recibidas .caja.alerta { border-color: var(--crit); background: var(--crit-soft); }
.recibidas .cifras-recibidas .caja.alerta .cifra-grande { color: var(--crit); }
.recibidas .tabla td:nth-child(2), .recibidas .tabla td.motivo { white-space: normal; min-width: 160px; }
.recibidas .tabla td.motivo { color: var(--muted); font-size: 13.5px; }
.recibidas .vacia-caja { color: var(--muted); text-align: center; padding: 10px; }
.recibidas .tabla td .sub { font-weight: 400; margin-left: 4px; }
/* Resumen del mes: el veredicto en grande y la lista de chequeo. */
.contabilidad .veredicto { display: grid; gap: 8px; justify-items: start; padding: 24px 26px; }
.contabilidad .veredicto h2 { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.15; }
.contabilidad .veredicto .sub { max-width: 70ch; }
.contabilidad .veredicto.listo { border-left: 5px solid var(--ok); background: linear-gradient(90deg, var(--ok-soft), var(--surface) 60%); }
.contabilidad .veredicto.falta { border-left: 5px solid var(--warn); background: linear-gradient(90deg, var(--warn-soft), var(--surface) 60%); }
.contabilidad .veredicto.cerrado { border-left: 5px solid var(--teal); }
.contabilidad .veredicto.vacio { border-left: 5px solid var(--line); }
.contabilidad .chequeo { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.contabilidad .chequeo li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--line); }
.contabilidad .chequeo li:last-child { border-bottom: 0; }
.contabilidad .chequeo .marca { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.contabilidad .chequeo .hecho .marca { background: var(--ok-soft); color: var(--ok); }
.contabilidad .chequeo .hecho b { color: var(--muted); font-weight: 600; }
.contabilidad .chequeo .hecho .que .sub { opacity: .75; }
.contabilidad .chequeo .pendiente .marca { background: var(--warn); color: #fff; }
.contabilidad .chequeo .informativo .marca { background: var(--info-soft); color: var(--info); font-style: italic; font-family: Georgia, serif; }
.contabilidad .chequeo .que { display: grid; gap: 2px; }
.contabilidad .chequeo .que b { color: var(--strong); }
.contabilidad .chequeo .cuanto { font-size: 13.5px; font-weight: 600; color: var(--warn); }
.contabilidad .chequeo .informativo .cuanto { color: var(--info); }
@media (max-width: 560px) { .contabilidad .chequeo li { grid-template-columns: 34px minmax(0, 1fr); } .contabilidad .chequeo li .boton { grid-column: 2; justify-self: start; } }
.contabilidad .cifra-mes { display: grid; gap: 4px; }
.contabilidad .cifra-mes a.sub { color: var(--ambar-texto); font-weight: 600; text-decoration: none; }
.contabilidad .chequeo .cuanto.al-dia { color: var(--ok); font-weight: 600; }
/* Nueve secciones: un poco más compactas para que quepan en una fila en un computador. */
.contabilidad .sub-pestanas { gap: 5px; }
.contabilidad .sub-pestanas a { padding: 6px 10px; font-size: 13.5px; }
/* Cierre del año: la tabla de lo que va a pasar y el botón, en la misma caja. */
.contabilidad .cierre-anual .tabla { margin-bottom: 14px; }
.contabilidad .cierre-anual .pie-form { margin-top: 0; }
/* ---------------------------------------------------------------------------
   Las secciones de la contabilidad: cuatro bloques (Ver, Registrar, Cerrar y el
   plan de cuentas). En computador van a la vista y, si no caben, baja un bloque
   entero, nunca uno partido. En celular, detrás de un botón con la sección actual.
   --------------------------------------------------------------------------- */
.secciones-grupos { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.grupo-secciones { display: flex; flex-wrap: nowrap; align-items: center; gap: 2px; padding: 4px 5px 4px 11px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.grupo-secciones.aparte { padding-left: 5px; }
.titulo-grupo { font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-right: 5px; }
.grupo-secciones a { padding: 6px 9px; border-radius: 8px; font-size: 13.5px; font-weight: 600; color: var(--muted); text-decoration: none; white-space: nowrap; }
.grupo-secciones a:hover { background: var(--surface-2); color: var(--strong); }
.grupo-secciones a[aria-current="page"] { background: var(--teal-soft); color: var(--ambar-texto); }
.grupo-secciones a:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.secciones-movil { display: none; }
@media (max-width: 760px) {
  .secciones-grupos { display: none; }
  .secciones-movil { display: block; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; }
  .secciones-movil > summary { list-style: none; cursor: pointer; padding: 12px 14px; display: flex; gap: 8px; align-items: baseline; }
  .secciones-movil > summary::-webkit-details-marker { display: none; }
  .secciones-movil > summary b { color: var(--strong); }
  .secciones-movil > summary::after { content: "▾"; margin-left: auto; color: var(--muted); }
  .secciones-movil[open] > summary::after { content: "▴"; }
  .secciones-movil .grupo-secciones { flex-wrap: wrap; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 10px 12px; background: none; }
  .secciones-movil .titulo-grupo { width: 100%; margin: 0 0 4px 4px; }
}
/* ---------------------------------------------------------------------------
   Mis números: la contabilidad contada para el dueño, en su portal.
   --------------------------------------------------------------------------- */
.mis-numeros .aviso.info { background: var(--info-soft); border-color: transparent; color: var(--info); }
.mis-numeros .resultado-mes { padding: 18px; }
.mis-numeros .resultado-mes .cifras { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mis-numeros .resultado-mes .cifra.destacada { border-width: 2px; }
.mis-numeros .resultado-mes.gano .cifra.destacada { border-color: var(--ok); background: var(--ok-soft); }
.mis-numeros .resultado-mes.gano .cifra.destacada b { color: var(--ok); }
.mis-numeros .resultado-mes.perdio .cifra.destacada { border-color: var(--crit); background: var(--crit-soft); }
.mis-numeros .resultado-mes.perdio .cifra.destacada b { color: var(--crit); }
.mis-numeros .resultado-mes.sin-ventas { border-left: 5px solid var(--warn); display: grid; gap: 8px; }
.mis-numeros .resultado-mes.sin-ventas h2 { font-size: 20px; }
.mis-numeros .barras { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mis-numeros .barras li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; }
.mis-numeros .barras .nombre { font-weight: 600; color: var(--strong); overflow-wrap: anywhere; }
.mis-numeros .barras .valor small { color: var(--muted); margin-left: 4px; }
.mis-numeros .barras .barra { grid-column: 1 / -1; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.mis-numeros .barras .barra i { display: block; height: 100%; border-radius: 999px; background: var(--teal); }
.mis-numeros .cifras-lista li { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.mis-numeros .cifras-lista li > span:first-child { color: var(--strong); }
.mis-numeros .cifras-lista .pendiente-dato { max-width: 60%; text-align: right; font-size: 13px; }
.mis-numeros .vencido { color: var(--warn); }
.mis-numeros .a-favor { color: var(--ok); }
.mis-numeros .mas-contabilidad { margin-top: 18px; padding: 12px 16px; border-radius: 12px; background: var(--teal-soft); color: var(--strong); }
.mis-numeros .mas-contabilidad a { font-weight: 700; color: var(--ambar-texto); }
.mis-numeros .lo-que-verias { list-style: none; margin: 4px 0 14px; padding: 0; display: grid; gap: 10px; }
.mis-numeros .lo-que-verias li { display: grid; gap: 2px; padding-left: 16px; border-left: 3px solid var(--teal-soft); }
.mis-numeros .lo-que-verias b { color: var(--strong); }
.mis-numeros .lo-que-verias span { color: var(--muted); font-size: 14px; }
.mis-numeros .resultado-mes.sin-costo .cifra.destacada { border-color: var(--warn); background: var(--warn-soft); }
.mis-numeros .resultado-mes .falta-costo { margin-top: 12px; padding-left: 12px; border-left: 3px solid var(--warn); color: var(--strong); font-size: 14px; }
/* Las dos columnas llevan listas de cifras parecidas: van del mismo ancho, no con una angosta al lado. */
.mis-numeros .con-lado { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 980px) {
  .mis-numeros .con-lado { grid-template-columns: minmax(0, 1fr); }
}

/* La tabla de compras tiene muchas columnas (base, IVA, tres retenciones, cuenta, estado):
   el resumen del mes va arriba, angosto, y la tabla se queda con todo el ancho para no
   tener que desplazarla hacia un lado a cada rato. */
.compras-lista .con-lado { grid-template-columns: minmax(0, 1fr); }
.compras-lista .con-lado > .columna:first-child { max-width: 420px; }
@media (max-width: 700px) {
  .mis-numeros .resultado-mes .cifras { grid-template-columns: minmax(0, 1fr); }
  .mis-numeros .cifras-lista li { flex-direction: column; gap: 2px; }
  .mis-numeros .cifras-lista .pendiente-dato { max-width: none; text-align: left; }
}
.contabilidad .lo-que-trae { margin: 4px 0 6px; padding-left: 18px; display: grid; gap: 4px; color: var(--strong); }
/* El dueño en su contabilidad completa: «Volver a mi portal» aparte, como salida, y la línea de
   «solo para ver» discreta en la banda de su empresa. */
.portal-cabecera .menu .volver-portal { margin-top: 14px; }
.banda-dueno .solo-ver { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; color: var(--navy-ink); opacity: .88; }
.banda-dueno .solo-ver svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 860px) {
  .portal-cabecera .menu .volver-portal { margin-top: 0; }
}
/* ---------------------------------------------------------------------------
   Mi Siigo: el dueño conecta su Siigo. Lo que trajimos en cifras, y los tres pasos para la credencial.
   --------------------------------------------------------------------------- */
.siigo .estado-siigo.conectado { border-left: 5px solid var(--ok); }
.siigo .estado-siigo.sin-conectar { border-left: 5px solid var(--warn); }
.siigo .traido { list-style: none; margin: 14px 0 10px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.siigo .traido li { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); }
.siigo .traido b { font-family: var(--display); font-size: 24px; color: var(--strong); line-height: 1.1; }
.siigo .traido span { font-size: 13px; color: var(--muted); }
.siigo .pasos-siigo { margin: 0 0 16px; padding-left: 22px; display: grid; gap: 6px; color: var(--strong); }

/* ---------- etiquetas de las bandejas (apps/asistente/etiquetas.py) ---------- */
/* Una lista cerrada de colores: cada etiqueta usa una de estas clases, nunca un color suelto. */
.etq-verde { background: var(--ok-soft); color: var(--ok); }
.etq-azul { background: var(--info-soft); color: var(--info); }
.etq-ambar { background: var(--warn-soft); color: var(--warn); }
.etq-rojo { background: var(--crit-soft); color: var(--crit); }
.etq-morado { background: var(--morado-soft); color: var(--morado); }
.etq-gris { background: var(--surface-2); color: var(--muted); }
.etiquetas-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.etiquetas-form .herramientas { flex-basis: 100%; }
.etq-opcion { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid transparent; }
.etq-opcion:has(input:checked) { border-color: currentColor; }
.etq-opcion input { accent-color: currentColor; margin: 0; }
.filtro-etiquetas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.filtro-etiquetas a { text-decoration: none; opacity: .75; }
.filtro-etiquetas a[aria-current="page"] { opacity: 1; box-shadow: inset 0 0 0 1.5px currentColor; }
.globo .hora .corregir, .chat-wa .globo .hora .corregir { color: inherit; text-decoration: underline; }

/* El globo de ayuda (sitio/_globo_whatsapp.html): abajo a la derecha, para que el cliente pida
   ayuda sin buscar el número. Afuera es un enlace al WhatsApp de soporte; en el portal se abre y
   ofrece también «Escríbenos aquí». Sube mientras está el aviso de cookies, para no taparlo, y en
   el celular queda solo el icono. Verde de WhatsApp y color plano, sin degradados ni brillo. */
.globo-whatsapp, .globo-ayuda { position: fixed; right: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); z-index: 29; }
.globo-whatsapp { display: flex; align-items: center; gap: 8px; padding: 12px 18px 12px 14px; border-radius: 999px; background: #00a884; color: #fff; font-weight: 600; font-size: 14.5px; text-decoration: none; box-shadow: 0 4px 14px rgba(14,39,64,.22); cursor: pointer; }
.globo-whatsapp svg { width: 22px; height: 22px; fill: currentColor; flex: none; }
.globo-whatsapp:hover, .globo-whatsapp:focus-visible { background: #008f6f; color: #fff; }
.globo-ayuda .globo-whatsapp { position: static; list-style: none; }
.globo-ayuda .globo-whatsapp::-webkit-details-marker { display: none; }
.globo-menu { position: absolute; right: 0; bottom: calc(100% + 10px); width: min(290px, calc(100vw - 32px)); display: grid; gap: 6px; padding: 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(14,39,64,.18); }
.globo-menu p { margin: 0 4px 2px; font-size: 13px; color: var(--muted); }
.globo-menu a { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); color: inherit; text-decoration: none; }
.globo-menu a:hover, .globo-menu a:focus-visible { background: var(--teal-soft); }
.globo-menu b { font-size: 14.5px; }
.globo-menu small { font-size: 12.5px; color: var(--muted); }
html:not(.cookies-vistas) :is(.globo-whatsapp, .globo-ayuda) { bottom: calc(env(safe-area-inset-bottom, 0px) + 150px); }
html:not(.cookies-vistas) .globo-ayuda .globo-whatsapp { bottom: auto; }
@media (max-width: 560px) { .globo-whatsapp { padding: 14px; } .globo-whatsapp span { display: none; } }

/* El chat de soporte (sitio/_chat_web.html y clientes/soporte.html, 23/09/2026). Con él encendido,
   el globo son dos botones juntos: «Soporte», en el ámbar de la marca porque es de Halbora, y el de
   WhatsApp a su derecha. El chat se ve como WhatsApp (los colores --wa-* de .chat-wa), pero con
   clases propias: .chat-wa .chat y [data-barra-whatsapp] son del chat del inicio y sitio.js los
   toma por ese. Color plano, sin degradados ni brillo. */
.globos-ayuda { position: fixed; right: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); z-index: 29; display: flex; align-items: center; gap: 10px; }
.globos-ayuda .globo-whatsapp { position: static; }
.globo-soporte { position: relative; display: flex; align-items: center; gap: 8px; padding: 12px 18px 12px 14px; border-radius: 999px; background: var(--teal); color: var(--teal-ink); font-weight: 600; font-size: 14.5px; text-decoration: none; box-shadow: 0 4px 14px rgba(14,39,64,.22); cursor: pointer; }
.globo-soporte svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.globo-soporte:hover, .globo-soporte:focus-visible { background: #E3A21C; color: var(--teal-ink); }
.globo-soporte[aria-expanded="true"] { box-shadow: inset 0 0 0 2px var(--teal-ink), 0 4px 14px rgba(14,39,64,.22); }
/* El punto de «respuesta nueva»: llegó algo con el chat cerrado. */
.globo-soporte.hay-respuesta::after { content: ""; position: absolute; top: -3px; right: -3px; width: 14px; height: 14px; border-radius: 50%; background: var(--crit); border: 2px solid var(--ground); }
html:not(.cookies-vistas) .globos-ayuda { bottom: calc(env(safe-area-inset-bottom, 0px) + 150px); }

/* El panel, encima de los dos botones. Sube con ellos mientras está el aviso de cookies. */
.chat-web { position: fixed; right: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 80px); z-index: 31; width: min(360px, calc(100vw - 32px)); height: min(560px, calc(100vh - 100px)); height: min(560px, calc(100dvh - 100px)); display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; border: 1px solid var(--linea-suave); background: var(--wa-fondo); color: var(--wa-texto); box-shadow: 0 8px 24px rgba(14,39,64,.18); animation: chat-web-entra .16s ease-out; }
.chat-web:focus { outline: none; }
html:not(.cookies-vistas) .chat-web { bottom: calc(env(safe-area-inset-bottom, 0px) + 214px); height: min(560px, calc(100vh - 234px)); height: min(560px, calc(100dvh - 234px)); }
@keyframes chat-web-entra { from { opacity: 0; transform: translateY(8px); } }
/* La hora, los avisos del sistema y «Guardamos este chat…», más oscuros que en .chat-wa: el #667781
   de WhatsApp da 4,19:1 sobre la burbuja verde propia y no alcanza AA. Con #56646d: 5,51 sobre la
   verde, 6,11 sobre la blanca y 5,44 sobre la barra. En oscuro sirve el #9fb0ba de siempre (6,39
   sobre #202c33), menos en la burbuja verde propia (3,57 sobre #005c4b): ahí va #c5d1d7, 5,12. */
.chat-web, .chat-web-pagina { --wa-hora: #56646d; --wa-hora-mia: #56646d; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.chat-web, .chat-web-pagina) { --wa-hora-mia: #c5d1d7; }
}
:root[data-theme="dark"] :is(.chat-web, .chat-web-pagina) { --wa-hora-mia: #c5d1d7; }
/* La página completa: el mismo chat, sin tope de alto, dentro de la página. */
.soporte-pagina { padding-block: 8px 40px; }
.chat-web-pagina { display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; border: 1px solid var(--linea-suave); background: var(--wa-fondo); color: var(--wa-texto); box-shadow: var(--sombra-suave); }
.chat-web-pagina .chat-web-cuerpo { min-height: 260px; overflow: visible; }
.soporte-otra-via { margin-top: 14px; }
/* En la página completa, el panel y los botones flotantes serían el mismo chat dos veces. */
body:has([data-chat-pagina]) :is(.globos-ayuda, .chat-web) { display: none; }

.chat-web-cabeza { display: flex; align-items: center; gap: 10px; padding: 10px 8px 8px 14px; background: var(--wa-cabeza); color: #fff; }
.chat-web-sello { width: 36px; height: 36px; border-radius: 50%; background: #fff; display: grid; place-items: center; flex: none; }
.chat-web-sello img { width: 19px; display: block; }
.chat-web-quien { flex: 1; min-width: 0; }
.chat-web-quien :is(h1, h2) { font-family: var(--body); font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0; color: #fff; }
/* Sin opacidad: el blanco pleno sobre el verde da 4,89:1, y con .9 bajaba de 4,5. */
.chat-web-estado { font-size: 12.5px; line-height: 1.35; }
.chat-web-estado a { color: #fff; font-weight: 600; }
.chat-web-cerrar { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: #fff; cursor: pointer; }
.chat-web-cerrar:hover { background: rgba(255,255,255,.14); }
.chat-web-cerrar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.chat-web-acciones { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 10px 60px; background: var(--wa-cabeza); }
.chat-web-acciones form { margin: 0; }
.chat-web-acciones button { min-height: 32px; padding: 5px 12px; border: 1px solid rgba(255,255,255,.55); border-radius: 999px; background: none; color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; }
.chat-web-acciones button:hover { background: rgba(255,255,255,.14); }
.chat-web-acciones button[disabled] { opacity: .6; cursor: default; }

.chat-web-cuerpo { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; padding: 10px 16px 12px; background: var(--wa-fondo); }
.chat-web-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.chat-web-burbuja { position: relative; align-self: flex-start; max-width: 85%; margin: 7px 0 0; padding: 6px 9px 5px; border-radius: 8px; border-top-left-radius: 0; background: var(--wa-entra); color: var(--wa-texto); box-shadow: 0 1px .5px rgba(11,20,26,.13); font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.chat-web-burbuja::before { content: ""; position: absolute; top: 0; left: -8px; width: 8px; height: 12px; background: inherit; clip-path: polygon(100% 0, 0 0, 100% 100%); }
.chat-web-burbuja.mia { align-self: flex-end; border-radius: 8px; border-top-right-radius: 0; background: var(--wa-sale); }
.chat-web-burbuja.mia::before { left: auto; right: -8px; clip-path: polygon(0 0, 100% 0, 0 100%); }
/* Varios seguidos del mismo lado: solo el primero lleva pico, como en WhatsApp. */
.chat-web-burbuja.mia + .mia, .chat-web-burbuja.suya + .suya { margin-top: 2px; border-radius: 8px; }
.chat-web-burbuja.mia + .mia::before, .chat-web-burbuja.suya + .suya::before { display: none; }
.chat-web-burbuja.sistema .chat-web-texto { color: var(--wa-hora); font-style: italic; }
.chat-web-autor { display: block; font-size: 12.5px; font-weight: 600; color: var(--wa-nombre); }
.chat-web-texto { white-space: pre-wrap; }
.chat-web-texto :is(b, strong) { font-weight: 700; }
.chat-web-texto a { color: inherit; text-decoration: underline; }
.chat-web-hora { display: block; margin-top: 1px; text-align: right; font-size: 11px; color: var(--wa-hora); }
.chat-web-burbuja.mia .chat-web-hora { color: var(--wa-hora-mia); }

.chat-web-error { padding: 8px 14px; background: var(--crit-soft); color: var(--crit); font-size: 13px; }
.chat-web-error a { color: inherit; font-weight: 600; }
.chat-web-datos { padding: 5px 14px 0; background: var(--wa-barra); color: var(--wa-hora); font-size: 11.5px; text-align: center; }
.chat-web-datos a { color: inherit; }
.chat-web-barra { display: flex; align-items: flex-end; gap: 8px; margin: 0; padding: 6px 10px 10px; background: var(--wa-barra); }
.chat-web-barra textarea { flex: 1; min-width: 0; min-height: 44px; max-height: 140px; resize: none; padding: 11px 14px; border: 0; border-radius: 22px; background: var(--wa-campo); color: var(--wa-texto); font-size: 14.5px; line-height: 1.4; overflow-y: auto; }
.chat-web-barra textarea:focus { outline: none; box-shadow: 0 0 0 2px var(--wa-boton); }
.chat-web-barra textarea::placeholder { color: var(--wa-icono); opacity: 1; }
.chat-web-pagina .chat-web-barra textarea { min-height: 88px; border-radius: 16px; }
.chat-web-enviar { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--wa-boton); color: #fff; cursor: pointer; }
.chat-web-enviar svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chat-web-enviar:hover { filter: brightness(1.06); }
.chat-web-enviar[disabled] { opacity: .55; cursor: default; filter: none; }
/* Con la palabra «Enviar» (la página completa): letra oscura, porque la blanca sobre este verde no alcanza AA. */
.chat-web-enviar.con-palabra { width: auto; display: flex; align-items: center; gap: 6px; padding: 0 18px; border-radius: 22px; color: #0b141a; font-weight: 600; }
/* La trampa para robots: fuera de la vista, sin display: none, que algunos robots saltan. */
.chat-web-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; }

/* El clip, gris y sin fondo como en WhatsApp, a la izquierda del cuadro. */
.chat-web-clip { width: 40px; height: 44px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--wa-icono); cursor: pointer; }
.chat-web-clip:hover { background: var(--wa-campo); }
.chat-web-clip svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chat-web-clip[disabled] { opacity: .45; cursor: default; background: none; }
/* La ficha del archivo escogido, encima del cuadro: la miniatura (o «PDF»), el nombre, el tamaño y
   la X. Vacía no ocupa nada. */
.chat-web-adjunto { padding: 0 10px; background: var(--wa-barra); }
.chat-web-ficha { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 6px 4px 6px 6px; border-radius: 10px; background: var(--wa-campo); color: var(--wa-texto); }
.chat-web-adjunto[aria-busy="true"] .chat-web-ficha-peso { font-style: italic; }
.chat-web-ficha-icono { width: 40px; height: 40px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 6px; background: var(--wa-barra); color: var(--wa-icono); }
.chat-web-ficha-icono img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chat-web-ficha-icono svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* El PDF en rojo, como lo pinta WhatsApp. Es decorativo: el nombre ya dice que es un PDF. */
.chat-web-ficha-icono.pdf { background: #c8372d; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .03em; }
.chat-web-ficha-datos { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.chat-web-ficha-nombre { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-web-ficha-peso { font-size: 12px; color: var(--wa-hora); }
.chat-web-ficha-quitar { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--wa-icono); cursor: pointer; }
.chat-web-ficha-quitar:hover { background: var(--wa-barra); }
.chat-web-ficha-quitar[disabled] { opacity: .45; cursor: default; background: none; }
.chat-web-ficha-quitar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* En la burbuja: «📎 factura.pdf» arriba del texto, sin enlace. En flex, para que un nombre largo sin
   espacios se parta al lado del clip y no lo deje solo en su línea. */
.chat-web-adjunto-linea { display: flex; gap: 4px; font-weight: 600; }
.chat-web-adjunto-linea > [aria-hidden] { flex: none; }
.chat-web-adjunto-nombre { min-width: 0; overflow-wrap: anywhere; }
.chat-web-adjunto-linea + .chat-web-texto { margin-top: 2px; }
/* La página sin JavaScript: el campo del archivo, visible y con su nombre, en su propia línea arriba
   del cuadro. */
.chat-web-pagina .chat-web-barra { flex-wrap: wrap; }
.chat-web-archivo-campo { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13.5px; }
.chat-web-archivo-campo label { font-weight: 600; }
.chat-web-archivo-campo label span { font-weight: 400; color: var(--wa-hora); }
/* Que tome el resto de la línea: angosto, Chrome parte «Sin archivos seleccionados» por la mitad. */
.chat-web-archivo-campo input { flex: 1 1 16rem; min-width: 0; max-width: 100%; font-size: 13.5px; color: var(--wa-texto); }
.chat-web-archivo-campo input::file-selector-button { min-height: 36px; margin-right: 10px; padding: 6px 14px; border: 1px solid var(--wa-icono); border-radius: 999px; background: var(--wa-campo); color: var(--wa-texto); font: inherit; font-weight: 600; cursor: pointer; }
.chat-web-archivo-campo input:focus-visible { outline: 2px solid var(--wa-boton); outline-offset: 2px; }

/* En el celular: los botones quedan en círculos y el chat ocupa toda la pantalla. La letra del
   cuadro en 16 px, para que el iPhone no acerque la página al tocarlo. */
@media (max-width: 560px) {
  .globo-soporte { padding: 14px; }
  .globo-soporte span { display: none; }
  .chat-web, html:not(.cookies-vistas) .chat-web { inset: 0; width: auto; height: 100vh; height: 100dvh; border: 0; border-radius: 0; box-shadow: none; }
  .chat-web-cabeza { padding-top: calc(env(safe-area-inset-top, 0px) + 8px); }
  .chat-web-cerrar { width: 44px; height: 44px; }
  .chat-web-acciones { padding-left: 12px; }
  .chat-web-acciones button { min-height: 44px; }
  .chat-web-barra { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 10px); }
  .chat-web-barra textarea { font-size: 16px; }
  .chat-web-clip, .chat-web-ficha-quitar { width: 44px; height: 44px; }
  .chat-web-archivo-campo input::file-selector-button { min-height: 44px; }
  html.chat-abierto { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { .chat-web { animation: none; } }
@media print { .globos-ayuda, .chat-web { display: none !important; } }

/* =====================================================================================
   La barra del equipo de Halbora (sitio/_barra.html, 22/09/2026): la salida al panel en las
   pantallas del equipo que viven fuera del admin. Blanca y plana, como las tarjetas; el único
   color fuerte es «← Panel», que es lo que se busca. En el celular, «← Panel» queda a la vista y
   lo demás se pliega detrás de «Menú».
   ===================================================================================== */
.barra-equipo { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 10px clamp(16px, 3vw, 32px); background: var(--surface); border-bottom: 1px solid var(--line); font-size: 14.5px; }
.barra-marca { display: flex; align-items: center; gap: 8px; text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--strong); flex: none; }
.barra-marca .sello { width: 32px; height: 32px; border-radius: 8px; background: var(--tile); display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(14,39,64,.1); }
.barra-marca .sello img { width: 18px; display: block; }
.barra-panel { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border-radius: 10px; background: var(--teal); color: var(--teal-ink); font-weight: 700; text-decoration: none; white-space: nowrap; flex: none; }
.barra-panel:hover { filter: brightness(1.06); }
.barra-accesos { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; flex: 1 1 auto; min-width: 0; }
.barra-accesos a { padding: 8px 11px; border-radius: 9px; color: var(--muted); font-weight: 500; text-decoration: none; white-space: nowrap; }
.barra-accesos a:hover { color: var(--strong); background: var(--surface-2); }
.barra-accesos a[aria-current="page"] { background: var(--teal-soft); color: var(--ambar-texto); font-weight: 700; }
.barra-accesos form { margin: 0 0 0 auto; }
.barra-accesos .boton-texto { padding: 8px 4px; font-size: 14px; }
.barra-mas { display: none; margin-left: auto; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--strong); font-weight: 600; cursor: pointer; }
.barra-mas svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.barra-equipo.abierta .barra-mas { border-color: var(--teal); color: var(--ambar-texto); }
/* En su propio portal (alguien del equipo que también tiene empresa), el menú del portal ya trae el
   logo y «Salir»: la barra deja solo lo suyo. En el computador va al lado de ese menú, que queda fijo
   a la izquierda, y no debajo. */
body:has(.portal-cabecera) .barra-marca, body:has(.portal-cabecera) .barra-accesos form { display: none; }
@media (min-width: 861px) {
  body:has(.envoltura > .portal-cabecera) .barra-equipo { margin-left: var(--lateral); }
}
@media (max-width: 760px) {
  .barra-equipo.plegable .barra-mas { display: inline-flex; }
  .barra-equipo.plegable:not(.abierta) .barra-accesos { display: none; }
  .barra-equipo.plegable .barra-accesos { flex: 1 1 100%; flex-direction: column; align-items: stretch; padding-top: 6px; border-top: 1px solid var(--line); }
  .barra-equipo.plegable .barra-accesos a { padding: 11px 12px; }
  .barra-equipo.plegable .barra-accesos form { margin: 2px 0 0; padding: 4px 8px 6px; }
}
@media (max-width: 360px) {
  .barra-nombre { display: none; }
}
@media print {
  .barra-equipo { display: none !important; }
}