/* =============================================================================
   ToroChat 1.2 - estilos del sitio, ToroChat Web y panel de la empresa.
   Sin dependencias externas. Tema claro/oscuro con variables.
   ============================================================================= */
:root {
  --verde: #00b894; --verde-2: #00d4aa; --verde-claro: #d9fbf2; --verde-osc: #047a63;
  --purpura: #6c5ce7; --rojo: #e5484d; --amarillo: #f5a524; --azul: #3b82f6;
  --fondo: #f5f7f8; --superficie: #ffffff; --superficie-2: #f0f3f4; --borde: #e3e8ea;
  --texto: #14191c; --texto-2: #52606a; --texto-3: #8a969e;
  --sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 16px rgba(16, 24, 40, .06);
  --radio: 12px; --radio-s: 8px;
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo: #0d1113; --superficie: #151b1e; --superficie-2: #1c2428; --borde: #26313a;
    --texto: #e9eef0; --texto-2: #a6b3ba; --texto-3: #6f7d86; --verde-claro: #0e3a31;
    --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .25);
  }
}
.zona-web, .zona-sitio {
  --fondo: #0b0f11; --superficie: #12181b; --superficie-2: #1a2226; --borde: #243038;
  --texto: #eaf0f2; --texto-2: #a7b4bb; --texto-3: #6e7c85; --verde-claro: #0d3b31;
  --sombra: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .3);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--fuente); font-size: 15px; line-height: 1.5; color: var(--texto); background: var(--fondo);
  -webkit-font-smoothing: antialiased; }
a { color: var(--verde); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: 1.9rem; } h2 { font-size: 1.4rem; } h3 { font-size: 1.1rem; }
p { margin: 0 0 1em; }
small, .suave { color: var(--texto-2); }
.muy-suave { color: var(--texto-3); }
.mono { font-family: var(--mono); font-size: .92em; }
.oculto { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
hr { border: 0; border-top: 1px solid var(--borde); margin: 1.5rem 0; }

/* ------------------------------------------------------------ componentes */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: .45em; border: 1px solid transparent;
  background: var(--verde); color: #fff; font: inherit; font-weight: 600; padding: .6em 1.1em; border-radius: 10px;
  cursor: pointer; text-decoration: none !important; transition: filter .15s, background .15s; white-space: nowrap; }
.boton:hover { filter: brightness(1.07); }
.boton:disabled { opacity: .55; cursor: not-allowed; }
.boton.sec { background: transparent; color: var(--texto); border-color: var(--borde); }
.boton.sec:hover { background: var(--superficie-2); }
.boton.peligro { background: var(--rojo); }
.boton.fantasma { background: transparent; color: var(--verde); padding: .35em .6em; }
.boton.chico { font-size: .85rem; padding: .35em .7em; border-radius: 8px; }
.boton.grande { font-size: 1.05rem; padding: .85em 1.5em; border-radius: 12px; }
.boton.bloque { width: 100%; }
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: 1.25rem; }
.tarjeta + .tarjeta { margin-top: 1rem; }
.tarjeta h2, .tarjeta h3 { margin-bottom: .75rem; }
.aviso { border-radius: var(--radio-s); padding: .75rem 1rem; margin: 0 0 1rem; border: 1px solid; font-size: .95rem; }
.aviso.ok { background: color-mix(in srgb, var(--verde) 12%, transparent); border-color: color-mix(in srgb, var(--verde) 35%, transparent); }
.aviso.error { background: color-mix(in srgb, var(--rojo) 12%, transparent); border-color: color-mix(in srgb, var(--rojo) 35%, transparent); }
.aviso.info { background: color-mix(in srgb, var(--azul) 10%, transparent); border-color: color-mix(in srgb, var(--azul) 30%, transparent); }
.aviso.alerta { background: color-mix(in srgb, var(--amarillo) 14%, transparent); border-color: color-mix(in srgb, var(--amarillo) 40%, transparent); }
.chip { display: inline-block; font-size: .78rem; font-weight: 600; padding: .15em .6em; border-radius: 999px;
  background: var(--superficie-2); color: var(--texto-2); border: 1px solid var(--borde); white-space: nowrap; }
.chip.verde { background: color-mix(in srgb, var(--verde) 14%, transparent); color: var(--verde-osc); border-color: transparent; }
.chip.rojo { background: color-mix(in srgb, var(--rojo) 14%, transparent); color: var(--rojo); border-color: transparent; }
.chip.amarillo { background: color-mix(in srgb, var(--amarillo) 18%, transparent); color: #9a6200; border-color: transparent; }
@media (prefers-color-scheme: dark) { .chip.verde { color: var(--verde-2); } .chip.amarillo { color: var(--amarillo); } }
.zona-web .chip.verde, .zona-sitio .chip.verde { color: var(--verde-2); }
.punto { display: inline-block; width: .7em; height: .7em; border-radius: 50%; background: var(--texto-3); }
.punto.verde { background: var(--verde); } .punto.amarillo { background: var(--amarillo); } .punto.rojo { background: var(--rojo); }

/* ------------------------------------------------------------ formularios */
.form { display: grid; gap: 1rem; }
.form-2 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.campo { display: grid; gap: .35rem; }
.campo > label, .etiqueta { font-weight: 600; font-size: .9rem; }
.campo .ayuda { font-size: .82rem; color: var(--texto-2); }
.requerido::after { content: " *"; color: var(--rojo); }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=datetime-local],
input[type=search], input[type=tel], select, textarea {
  width: 100%; font: inherit; color: var(--texto); background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 10px; padding: .6em .75em; outline: none; transition: border-color .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus { border-color: var(--verde); box-shadow: 0 0 0 3px color-mix(in srgb, var(--verde) 22%, transparent); }
textarea { min-height: 110px; resize: vertical; }
select[multiple] { min-height: 180px; }
.casilla { display: flex; align-items: flex-start; gap: .6rem; font-weight: 500; cursor: pointer; }
.casilla input { width: 1.15rem; height: 1.15rem; margin-top: .15rem; accent-color: var(--verde); }
.acciones-form { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
.trampa { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
fieldset { border: 1px solid var(--borde); border-radius: var(--radio); padding: 1rem; margin: 0; }
legend { font-weight: 700; padding: 0 .4rem; }

/* ------------------------------------------------------------ tablas */
.tabla-caja { overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); }
table.tabla { border-collapse: collapse; width: 100%; font-size: .9rem; }
.tabla th { text-align: left; font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em;
  color: var(--texto-2); background: var(--superficie-2); padding: .6rem .75rem; white-space: nowrap; position: sticky; top: 0; }
.tabla td { padding: .6rem .75rem; border-top: 1px solid var(--borde); vertical-align: top; }
.tabla tr:hover td { background: color-mix(in srgb, var(--verde) 4%, transparent); }
.tabla td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla td.acciones { white-space: nowrap; text-align: right; }
.tabla td.acciones form { display: inline; }
.tabla .vacio { text-align: center; color: var(--texto-3); padding: 2rem; }
.lineas-editor td { padding: .35rem; }
.lineas-editor input, .lineas-editor select { padding: .45em .5em; font-size: .88rem; min-width: 90px; }
.totales { display: flex; gap: 1.5rem; justify-content: flex-end; font-weight: 600; padding: .5rem 0; }
.totales .desbalance { color: var(--rojo); }
.kv { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: .45rem 1rem; font-size: .93rem; }
.kv dt { color: var(--texto-2); } .kv dd { margin: 0; word-break: break-word; }
.paginador { display: flex; gap: .5rem; align-items: center; justify-content: space-between; padding: .75rem 0; flex-wrap: wrap; }

/* ============================================================== PANEL */
.panel { display: grid; grid-template-columns: 264px 1fr; min-height: 100vh; }
.panel-lateral { background: #0f1a1f; color: #cfdadf; padding: 1rem .75rem; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.panel-lateral a { color: #cfdadf; }
.marca { display: flex; align-items: center; gap: .6rem; padding: .25rem .5rem 1rem; color: #fff !important; font-weight: 800; font-size: 1.15rem; text-decoration: none !important; }
.marca img { width: 34px; height: 34px; }
.marca small { display: block; color: #7fa3ad; font-weight: 500; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.menu-grupo { margin: .15rem 0; }
.menu-grupo > summary { list-style: none; display: flex; align-items: center; gap: .6rem; padding: .55rem .65rem; border-radius: 8px;
  cursor: pointer; font-weight: 600; font-size: .92rem; color: #e8f0f2; }
.menu-grupo > summary::-webkit-details-marker { display: none; }
.menu-grupo > summary:hover { background: rgba(255, 255, 255, .06); }
.menu-grupo[open] > summary { color: #fff; }
.menu-grupo ul { list-style: none; margin: .1rem 0 .4rem; padding: 0 0 0 2.1rem; }
.menu-grupo li a { display: block; padding: .32rem .6rem; border-radius: 6px; font-size: .88rem; color: #a9bcc3; text-decoration: none; }
.menu-grupo li a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.menu-grupo li a.activo { background: rgba(0, 212, 170, .16); color: var(--verde-2); font-weight: 600; }
.icono { width: 18px; height: 18px; flex: none; opacity: .9; }
.panel-principal { min-width: 0; display: flex; flex-direction: column; }
.panel-barra { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1.5rem;
  background: var(--superficie); border-bottom: 1px solid var(--borde); position: sticky; top: 0; z-index: 5; }
.panel-barra .ruta { color: var(--texto-2); font-size: .9rem; }
.panel-barra .ruta b { color: var(--texto); }
.usuario-menu { display: flex; align-items: center; gap: .75rem; font-size: .9rem; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--verde-claro); color: var(--verde-osc); display: grid; place-items: center;
  font-weight: 700; font-size: .85rem; flex: none; }
.panel-contenido { padding: 1.5rem; max-width: 1400px; width: 100%; }
.titulo-pagina { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.titulo-pagina h1 { font-size: 1.5rem; margin: 0; }
.titulo-pagina .suave { margin: .25rem 0 0; font-size: .9rem; }
.herramientas { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.herramientas input[type=search] { max-width: 280px; }
.herramientas select { width: auto; min-width: 140px; }
.tarjetas { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); margin-bottom: 1.5rem; }
.kpi { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1rem 1.1rem; box-shadow: var(--sombra);
  display: block; color: inherit; text-decoration: none !important; transition: transform .12s, border-color .12s; }
a.kpi:hover { transform: translateY(-2px); border-color: var(--verde); }
.kpi .valor { font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi .nombre { color: var(--texto-2); font-size: .85rem; }
.kpi.alerta .valor { color: var(--rojo); } .kpi.atencion .valor { color: #c07d00; }
.ayuda-caja { display: flex; gap: .75rem; background: color-mix(in srgb, var(--azul) 7%, var(--superficie)); border: 1px solid color-mix(in srgb, var(--azul) 25%, var(--borde));
  border-radius: var(--radio); padding: .8rem 1rem; margin-bottom: 1rem; font-size: .92rem; color: var(--texto-2); }
.ayuda-caja::before { content: "i"; flex: none; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--azul); color: #fff;
  font-weight: 800; display: grid; place-items: center; font-size: .85rem; font-family: Georgia, serif; }
.grid-2 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
.conversacion { display: grid; gap: .75rem; }
.burbuja { max-width: 78%; padding: .7rem .9rem; border-radius: 14px; background: var(--superficie-2); border: 1px solid var(--borde); }
.burbuja.mia { margin-left: auto; background: color-mix(in srgb, var(--verde) 12%, var(--superficie)); border-color: color-mix(in srgb, var(--verde) 30%, var(--borde)); }
.burbuja.interna { background: color-mix(in srgb, var(--amarillo) 12%, var(--superficie)); border-style: dashed; }
.burbuja .autor { font-size: .78rem; font-weight: 700; color: var(--texto-2); margin-bottom: .2rem; }
.burbuja .hora { font-size: .72rem; color: var(--texto-3); margin-top: .3rem; }
.burbuja p { white-space: pre-wrap; margin: 0; }
.galeria { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.galeria .doc { border: 1px solid var(--borde); border-radius: var(--radio-s); padding: .75rem; background: var(--superficie-2); }
.acceso { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem;
  background: radial-gradient(1200px 600px at 10% -10%, color-mix(in srgb, var(--verde) 16%, transparent), transparent), var(--fondo); }
.acceso .tarjeta { width: min(440px, 100%); padding: 2rem; }
.acceso .marca { color: var(--texto) !important; padding: 0 0 1.25rem; }
.acceso .marca small { color: var(--texto-3); }
.qr-caja { background: #fff; padding: 12px; border-radius: 12px; display: inline-block; line-height: 0; }
.qr-caja svg, .qr-caja img { width: 220px; height: 220px; }
.pasos { counter-reset: paso; list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.pasos li { counter-increment: paso; display: flex; gap: .7rem; align-items: flex-start; }
.pasos li::before { content: counter(paso); flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--verde-claro);
  color: var(--verde-osc); font-weight: 800; display: grid; place-items: center; font-size: .85rem; }
.zona-web .pasos li::before, .zona-sitio .pasos li::before { color: var(--verde-2); }

@media (max-width: 900px) {
  .panel { grid-template-columns: 1fr; }
  .panel-lateral { position: fixed; inset: 0 30% 0 0; z-index: 30; transform: translateX(-102%); transition: transform .2s; height: 100%; }
  .panel-lateral.abierto { transform: none; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .45); }
  .panel-contenido { padding: 1rem; }
  .boton-menu { display: inline-flex !important; }
  .kv { grid-template-columns: 1fr; }
}
.boton-menu { display: none; }

/* ============================================================== SITIO */
.sitio-cabecera { position: sticky; top: 0; z-index: 10; backdrop-filter: blur(10px); background: color-mix(in srgb, var(--fondo) 80%, transparent);
  border-bottom: 1px solid var(--borde); }
.sitio-cabecera .envoltura { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 64px; }
.sitio-cabecera .marca { padding: 0; color: var(--texto) !important; }
.sitio-cabecera nav { display: flex; gap: 1.25rem; align-items: center; }
.sitio-cabecera nav a { color: var(--texto-2); font-weight: 500; }
.sitio-cabecera nav a:hover { color: var(--texto); text-decoration: none; }
.envoltura { width: min(1160px, 100% - 2.5rem); margin: 0 auto; }
.heroe { padding: 5rem 0 4rem; position: relative; overflow: hidden; }
.heroe::before { content: ""; position: absolute; inset: -40% -10% auto auto; width: 70vw; height: 70vw; max-width: 900px; max-height: 900px;
  background: radial-gradient(circle, color-mix(in srgb, var(--verde-2) 22%, transparent), transparent 60%); pointer-events: none; }
.heroe .envoltura { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; position: relative; }
.heroe h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); letter-spacing: -.03em; margin-bottom: 1rem; }
.heroe h1 span { background: linear-gradient(90deg, var(--verde-2), #7cf3d9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.heroe .lema { font-size: 1.2rem; color: var(--texto-2); max-width: 36ch; margin-bottom: 2rem; }
.heroe .botones { display: flex; gap: .75rem; flex-wrap: wrap; }
.telefono { justify-self: center; width: 290px; height: 590px; border-radius: 44px; background: #05090a; border: 10px solid #1d272c;
  box-shadow: 0 40px 80px rgba(0, 0, 0, .55), 0 0 0 1px #2f3c43; padding: 18px 14px; display: flex; flex-direction: column; gap: 10px; }
.telefono .barra-app { display: flex; align-items: center; gap: 8px; color: #fff; font-weight: 700; padding: 6px 4px 10px; border-bottom: 1px solid #1c2529; }
.telefono .msg { max-width: 80%; padding: 8px 11px; border-radius: 14px; font-size: .84rem; color: #e8f0f2; background: #1b2428; }
.telefono .msg.yo { margin-left: auto; background: #00735c; }
.telefono .pago { margin-left: auto; background: linear-gradient(135deg, #00a080, #00d4aa); color: #00201a; font-weight: 700; padding: 12px; border-radius: 14px; font-size: .88rem; width: 78%; }
.seccion { padding: 4rem 0; }
.seccion.alterna { background: var(--superficie); border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); }
.seccion h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -.02em; }
.seccion .intro { color: var(--texto-2); max-width: 60ch; margin-bottom: 2rem; font-size: 1.05rem; }
.caracteristicas { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.caracteristica { background: var(--superficie); border: 1px solid var(--borde); border-radius: 16px; padding: 1.4rem; }
.seccion.alterna .caracteristica { background: var(--fondo); }
.caracteristica .ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; margin-bottom: .9rem;
  background: color-mix(in srgb, var(--verde-2) 16%, transparent); color: var(--verde-2); }
.caracteristica h3 { margin-bottom: .4rem; }
.caracteristica p { color: var(--texto-2); margin: 0; font-size: .95rem; }
.cta { text-align: center; padding: 3.5rem 1.5rem; border-radius: 24px; background: linear-gradient(135deg, #04382e, #0b5c4b); color: #fff; }
.cta p { color: #bfe9de; }
.sitio-pie { border-top: 1px solid var(--borde); padding: 2.5rem 0; color: var(--texto-2); font-size: .9rem; }
.sitio-pie .envoltura { display: grid; gap: 2rem; grid-template-columns: 2fr repeat(3, 1fr); }
.sitio-pie h4 { color: var(--texto); font-size: .95rem; }
.sitio-pie ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.sitio-pie a { color: var(--texto-2); }
.pagina-texto { padding: 3rem 0; }
.pagina-texto .envoltura { max-width: 820px; }
.contenido-legal { white-space: pre-wrap; background: var(--superficie); border: 1px solid var(--borde); border-radius: 16px; padding: 1.5rem; line-height: 1.7; }
.pestanas { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.pestanas a { padding: .45rem .9rem; border-radius: 999px; border: 1px solid var(--borde); color: var(--texto-2); font-size: .9rem; }
.pestanas a.activa { background: var(--verde-claro); border-color: transparent; color: var(--verde-2); font-weight: 600; }
.lista-ayuda { display: grid; gap: .75rem; }
.lista-ayuda a { display: block; background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px; padding: 1rem 1.2rem; color: inherit; }
.lista-ayuda a:hover { border-color: var(--verde-2); text-decoration: none; }
/* 1.7.0: inicio "Cuentas claras, cero cuentos", invitaciones y negocios */
.telefono .cuenta-chat { margin-left: auto; width: 80%; display: grid; gap: 2px; padding: 10px 12px; border-radius: 14px; font-size: .84rem;
  background: #0f2a24; border: 1px solid #1f5a4c; color: #e8f0f2; }
.telefono .cuenta-chat small { color: #8fd8c4; font-size: .74rem; }
.telefono .cuenta-chat b { font-size: 1rem; }
.telefono .cuenta-chat.llave { margin-left: 0; background: #16202a; border-color: #2c4257; }
.telefono .cuenta-chat.llave small { color: #9fc2e6; }
.desenmascara { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.desenmascara .tarjeta p { margin: .6rem 0 0; color: var(--texto-2); }
.desenmascara .tarjeta p b { color: var(--texto); font-weight: 600; }
.codigo-grande { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin: .35rem 0 0; }
.codigo-grande .mono { font-size: 2rem; font-weight: 700; letter-spacing: .12em; color: var(--verde-2); }

@media (max-width: 860px) {
  .heroe .envoltura { grid-template-columns: 1fr; }
  .telefono { display: none; }
  .sitio-cabecera nav .extra { display: none; }
  .sitio-pie .envoltura { grid-template-columns: 1fr 1fr; }
}

/* ============================================================ TOROCHAT WEB */
.vincular { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.vincular-caja { width: min(980px, 100%); display: grid; grid-template-columns: 1.2fr .8fr; gap: 2rem; background: var(--superficie);
  border: 1px solid var(--borde); border-radius: 22px; padding: 2.5rem; box-shadow: var(--sombra); }
.vincular-caja h1 { font-size: 1.7rem; }
.qr-zona { display: grid; justify-items: center; align-content: start; gap: 1rem; text-align: center; }
.numero-grande { font-size: 5rem; font-weight: 800; letter-spacing: .05em; color: var(--verde-2); line-height: 1; font-variant-numeric: tabular-nums; }
.codigo-corto { font-family: var(--mono); font-size: 1.3rem; letter-spacing: .12em; background: var(--superficie-2); padding: .35rem .8rem; border-radius: 8px; }
.cuenta-regresiva { height: 4px; background: var(--superficie-2); border-radius: 4px; overflow: hidden; width: 220px; }
.cuenta-regresiva span { display: block; height: 100%; background: var(--verde-2); transition: width 1s linear; }
@media (max-width: 800px) { .vincular-caja { grid-template-columns: 1fr; padding: 1.5rem; } }

.app { display: grid; grid-template-columns: 380px 1fr; height: 100vh; overflow: hidden; }
.app-lado { display: flex; flex-direction: column; border-right: 1px solid var(--borde); background: var(--superficie); min-width: 0; }
.app-lado-cab { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; gap: .5rem; border-bottom: 1px solid var(--borde); }
.app-pestanas { display: flex; gap: .25rem; padding: .5rem .75rem; border-bottom: 1px solid var(--borde); overflow-x: auto; }
.app-pestanas button { background: none; border: 0; color: var(--texto-2); font: inherit; font-weight: 600; font-size: .88rem; padding: .45rem .75rem;
  border-radius: 999px; cursor: pointer; white-space: nowrap; }
.app-pestanas button.activa { background: var(--verde-claro); color: var(--verde-2); }
.app-buscar { padding: .6rem .75rem; }
.app-buscar input { border-radius: 999px; background: var(--superficie-2); border-color: transparent; }
.app-lista { overflow-y: auto; flex: 1; }
.fila-chat { display: flex; gap: .75rem; align-items: center; padding: .7rem 1rem; cursor: pointer; border-bottom: 1px solid color-mix(in srgb, var(--borde) 60%, transparent); }
.fila-chat:hover, .fila-chat.activa { background: var(--superficie-2); }
.fila-chat .centro { flex: 1; min-width: 0; }
.fila-chat .nombre { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila-chat .ultimo { color: var(--texto-2); font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila-chat .lado { text-align: right; font-size: .75rem; color: var(--texto-3); display: grid; gap: .3rem; justify-items: end; }
.contador { background: var(--verde-2); color: #00201a; font-weight: 800; font-size: .72rem; border-radius: 999px; padding: .05rem .45rem; min-width: 1.3rem; text-align: center; }
.foto { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; background: var(--verde-claro); color: var(--verde-2); display: grid; place-items: center;
  font-weight: 700; flex: none; overflow: hidden; }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.app-panel { display: flex; flex-direction: column; min-width: 0; background: var(--fondo);
  background-image: radial-gradient(color-mix(in srgb, var(--verde-2) 6%, transparent) 1px, transparent 1px); background-size: 22px 22px; }
.app-panel-cab { display: flex; align-items: center; gap: .75rem; padding: .7rem 1rem; background: var(--superficie); border-bottom: 1px solid var(--borde); }
.app-panel-cab .centro { flex: 1; min-width: 0; }
.app-mensajes { flex: 1; overflow-y: auto; padding: 1rem 6%; display: flex; flex-direction: column; gap: .35rem; }
.msj { max-width: min(560px, 75%); padding: .5rem .75rem .35rem; border-radius: 12px; background: var(--superficie-2); position: relative; word-wrap: break-word; }
.msj.mio { align-self: flex-end; background: #0a5f4d; color: #eafff9; }
.msj.sistema { align-self: center; background: var(--superficie); color: var(--texto-2); font-size: .82rem; border-radius: 8px; }
.msj .quien { font-size: .78rem; font-weight: 700; color: var(--verde-2); }
.msj .texto { white-space: pre-wrap; }
.msj .pie { font-size: .7rem; opacity: .75; text-align: right; margin-top: .15rem; display: flex; gap: .35rem; justify-content: flex-end; align-items: center; }
.msj img.adjunto, .msj video.adjunto { max-width: 100%; max-height: 320px; border-radius: 8px; display: block; margin: .2rem 0; cursor: zoom-in; }
/* 1.6.9: stickers de la app (el toro) sin burbuja */
.msj.sin-burbuja, .msj.mio.sin-burbuja { background: transparent; padding: 0; }
.msj.sin-burbuja .pie { color: var(--texto); }
.sticker-app { display: flex; flex-direction: column; align-items: center; padding: .2rem; }
.sticker-app img { width: 128px; height: 128px; display: block; }
.sticker-emoji { font-size: 3.4rem; line-height: 1.1; }
.sticker-texto { margin-top: .1rem; padding: .05rem .55rem; border: 2px solid #fff; border-radius: 10px; color: #fff; font-weight: 800; font-size: .85rem;
  background: linear-gradient(90deg, #00b894, #6c5ce7); }
.msj .archivo { display: flex; gap: .6rem; align-items: center; padding: .5rem; background: rgba(0, 0, 0, .15); border-radius: 8px; color: inherit; }
.msj .cita { border-left: 3px solid var(--verde-2); background: rgba(0, 0, 0, .15); padding: .3rem .5rem; border-radius: 6px; font-size: .85rem; margin-bottom: .25rem; }
.msj .reacciones { font-size: .85rem; }
.msj:hover .msj-menu { opacity: 1; }
.msj-menu { position: absolute; top: 4px; right: 6px; opacity: 0; background: none; border: 0; color: inherit; cursor: pointer; font-size: 1rem; }
.pago-tarjeta { background: linear-gradient(135deg, #00a080, #00d4aa); color: #00201a; border-radius: 12px; padding: .75rem; min-width: 220px; }
.pago-tarjeta b { font-size: 1.2rem; }
/* 1.8.0: los textos suaves dentro de la tarjeta verde (titular, nombre como lo muestra el banco, consejo) en oscuro:
   el gris del tema casi no se leia sobre el verde */
.pago-tarjeta .suave, .pago-tarjeta small { color: rgba(0, 32, 26, .85); }
.dia { align-self: center; font-size: .75rem; color: var(--texto-2); background: var(--superficie); border-radius: 8px; padding: .2rem .6rem; margin: .5rem 0; }
.app-escribir { display: flex; gap: .5rem; align-items: flex-end; padding: .6rem 1rem; background: var(--superficie); border-top: 1px solid var(--borde); }
.app-escribir textarea { min-height: 44px; max-height: 160px; border-radius: 22px; padding: .65rem 1rem; resize: none; background: var(--superficie-2); border-color: transparent; }
.boton-ico { width: 42px; height: 42px; border-radius: 50%; border: 0; background: none; color: var(--texto-2); display: grid; place-items: center; cursor: pointer; flex: none; }
.boton-ico:hover { background: var(--superficie-2); color: var(--texto); }
.boton-ico.verde { background: var(--verde-2); color: #00201a; }
.boton-ico svg { width: 22px; height: 22px; }
.respondiendo { display: flex; align-items: center; gap: .5rem; padding: .5rem 1rem; background: var(--superficie-2); border-left: 3px solid var(--verde-2); font-size: .88rem; }
.bienvenida { flex: 1; display: grid; place-items: center; text-align: center; padding: 2rem; color: var(--texto-2); }
.bienvenida h2 { color: var(--texto); }
.bienvenida .seguro { display: inline-flex; gap: .4rem; align-items: center; font-size: .85rem; margin-top: 1rem; color: var(--texto-3); }
.modal-fondo { position: fixed; inset: 0; background: rgba(0, 0, 0, .6); display: grid; place-items: center; z-index: 50; padding: 1rem; }
.modal { background: var(--superficie); border: 1px solid var(--borde); border-radius: 18px; width: min(520px, 100%); max-height: 90vh; overflow-y: auto; padding: 1.5rem; box-shadow: var(--sombra); }
.modal h3 { margin-bottom: 1rem; }
.modal .acciones-form { justify-content: flex-end; margin-top: 1.25rem; }
.visor { position: fixed; inset: 0; background: rgba(0, 0, 0, .92); z-index: 60; display: grid; place-items: center; cursor: zoom-out; }
.visor img, .visor video { max-width: 94vw; max-height: 92vh; }
.llamada { position: fixed; inset: 0; z-index: 70; background: #061210; display: grid; grid-template-rows: 1fr auto; color: #fff; }
.llamada .videos { position: relative; display: grid; place-items: center; overflow: hidden; }
.llamada .videos video.remoto { width: 100%; height: 100%; object-fit: cover; background: #000; }
.llamada .videos video.local { position: absolute; right: 16px; top: 16px; width: 200px; border-radius: 14px; background: #000; transform: scaleX(-1); }
.llamada .info { position: absolute; top: 20%; text-align: center; display: grid; justify-items: center; gap: .5rem; }
.llamada .info .foto { width: 120px; height: 120px; font-size: 2.4rem; }
.llamada .controles { display: flex; gap: 1rem; justify-content: center; padding: 1.5rem; }
.llamada .controles button { width: 60px; height: 60px; border-radius: 50%; border: 0; background: #22302d; color: #fff; cursor: pointer; display: grid; place-items: center; }
.llamada .controles button.colgar { background: var(--rojo); }
.llamada .controles button.contestar { background: var(--verde); }
.llamada .controles button.apagado { background: #fff; color: #000; }
.llamada .controles svg { width: 26px; height: 26px; }
.estados-fila { display: flex; gap: .75rem; padding: .75rem 1rem; overflow-x: auto; }
.estado-burbuja { width: 58px; height: 58px; border-radius: 50%; border: 3px solid var(--verde-2); padding: 2px; flex: none; cursor: pointer; }
.estado-burbuja.visto { border-color: var(--texto-3); }
.estado-visor { position: fixed; inset: 0; z-index: 65; background: #000; display: grid; place-items: center; }
.estado-visor .contenido { width: min(460px, 100vw); height: min(820px, 100vh); position: relative; display: grid; place-items: center; border-radius: 12px; overflow: hidden; }
.estado-visor .texto-estado { font-size: 1.6rem; font-weight: 700; text-align: center; padding: 2rem; color: #fff; }
.estado-visor .barra { position: absolute; top: 8px; left: 8px; right: 8px; height: 3px; background: rgba(255, 255, 255, .3); border-radius: 3px; }
.estado-visor .barra span { display: block; height: 100%; background: #fff; width: 0; }
.estado-visor .cab { position: absolute; top: 18px; left: 12px; right: 12px; display: flex; justify-content: space-between; align-items: center; color: #fff; }
.tostada { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: #1f2a2e; color: #fff; padding: .7rem 1.1rem; border-radius: 12px;
  z-index: 90; box-shadow: var(--sombra); max-width: 90vw; }
.tostada.error { background: #7a1f22; }
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .app.con-chat .app-lado { display: none; }
  .app:not(.con-chat) .app-panel { display: none; }
  .solo-movil { display: grid !important; }
}
.solo-movil { display: none !important; }

/* ------------------------------------------------------------ impresion */
@media print {
  .panel-lateral, .panel-barra, .herramientas, .acciones, .boton { display: none !important; }
  .panel { display: block; } .tabla-caja { border: 0; }
}

/* ------------------------------------------------------------ utilidades (la CSP no permite style="") */
.pt-1 { padding-top: 1rem; } .mt-0 { margin-top: 0; } .mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 1rem; } .mb-2 { margin-bottom: 2rem; }
.centrado { text-align: center; } .derecha { text-align: right; } .fila { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.fila.entre { justify-content: space-between; } .crece { flex: 1; min-width: 0; } .ancho-max { max-width: 640px; }
.pie-marca { padding: 0 0 .75rem !important; }
.grande-texto { font-size: 1.1rem; } .negrita { font-weight: 700; }
@media (max-width: 900px) { .solo-escritorio { display: none; } .usuario-menu .boton.sec.chico:not([type]) { display: none; } }
.usuario-menu form { margin: 0; }
.ancho-formulario { max-width: 900px; } .lista-conjuntos > * + * { margin-top: 1.5rem; }
.en-linea { display: inline; margin: 0; }

/* ------------------------------------------------------------ ToroChat Web 1.2 (extras) */
.vista-chat { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.app-panel { min-height: 0; }
.app-vista { flex: 1; overflow-y: auto; padding: 1.5rem clamp(1rem, 4vw, 3rem); }
.app-vista h2 { margin-top: 0; }
.foto.chica { width: 34px; height: 34px; font-size: .8rem; }
.foto.mini { width: 26px; height: 26px; font-size: .7rem; }
.fila-chat .icono-silencio { opacity: .6; }
.menu-flotante { position: fixed; z-index: 80; background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px;
  box-shadow: var(--sombra); padding: .35rem; min-width: 200px; }
.menu-flotante button { display: flex; width: 100%; gap: .6rem; align-items: center; background: none; border: 0; color: var(--texto);
  font: inherit; padding: .5rem .7rem; border-radius: 8px; cursor: pointer; text-align: left; }
.menu-flotante button:hover { background: var(--superficie-2); }
.menu-flotante .reacciones-rapidas { display: flex; gap: .15rem; padding: .2rem .3rem .4rem; border-bottom: 1px solid var(--borde); margin-bottom: .25rem; }
.menu-flotante .reacciones-rapidas button { font-size: 1.3rem; padding: .25rem; width: auto; justify-content: center; }
.lista-simple { display: grid; gap: .1rem; }
.lista-simple > * { display: flex; gap: .75rem; align-items: center; padding: .7rem .5rem; border-radius: 10px; }
.lista-simple > button { background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; width: 100%; }
.lista-simple > button:hover, .lista-simple > label:hover { background: var(--superficie-2); }
.lista-simple .centro { flex: 1; min-width: 0; }
.saldos { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin-bottom: 1.5rem; }
.saldo { background: linear-gradient(135deg, #07372d, #0b5c4b); color: #eafff9; border-radius: 16px; padding: 1.1rem; }
.saldo .monto { font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.saldo small { color: #a8e6d6; }
.monto-entrada { color: var(--verde-2); } .monto-salida { color: var(--texto); }
.escribiendo-aviso { font-size: .8rem; color: var(--verde-2); }
.cargar-mas { align-self: center; margin: .5rem 0; }
.nota-web { display: flex; gap: .6rem; align-items: flex-start; background: color-mix(in srgb, var(--amarillo) 12%, var(--superficie)); border: 1px solid color-mix(in srgb, var(--amarillo) 35%, var(--borde));
  border-radius: 12px; padding: .8rem 1rem; margin-bottom: 1rem; font-size: .92rem; }
.arrastrar { outline: 3px dashed var(--verde-2); outline-offset: -12px; }
.msj .ticks { letter-spacing: -.25em; }
.msj .ticks.leido { color: #53bdeb; }
.estado-lista { display: grid; gap: .25rem; }
.color-estado { display: flex; gap: .4rem; flex-wrap: wrap; }
.color-estado button { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.color-estado button.activo { border-color: #fff; box-shadow: 0 0 0 2px var(--verde-2); }
.vista-previa-estado { height: 220px; border-radius: 14px; display: grid; place-items: center; color: #fff; font-size: 1.3rem; font-weight: 700;
  text-align: center; padding: 1rem; margin-bottom: 1rem; word-break: break-word; }
.estado-visor .contenido img, .estado-visor .contenido video { max-width: 100%; max-height: 100%; }
.estado-visor .voz-estado { display: grid; justify-items: center; gap: .8rem; }
/* 1.8.0: el nombre, la hora, la barra y el pie se leen tambien sobre fondos claros (amarillo, blanco) y fotos claras */
.estado-visor .contenido::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 120px; pointer-events: none;
  background: linear-gradient(rgba(0, 0, 0, .42), rgba(0, 0, 0, .16) 55%, rgba(0, 0, 0, 0)); }
.estado-visor .cab, .estado-visor .pie-estado { text-shadow: 0 1px 3px rgba(0, 0, 0, .55); }
.estado-visor .voz-estado .icono-voz { font-size: 4rem; width: 8rem; height: 8rem; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .15); }
.estado-visor .pie-estado { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; color: #fff; padding: 0 1rem; }
.llamada .estado-llamada { color: #b9d9d2; }
.fondo-c1 { background: #0b5c4b; } .fondo-c2 { background: #6c5ce7; } .fondo-c3 { background: #e17055; } .fondo-c4 { background: #0984e3; }
.fondo-c5 { background: #2d3436; } .fondo-c6 { background: #d63031; } .fondo-c7 { background: #00b894; } .fondo-c8 { background: #fdcb6e; color: #2d3436; }
.vincular > div { width: min(980px, 100%); }
.app-pestanas button { font-size: .84rem; padding: .4rem .6rem; }
.campo > .boton { justify-self: start; }
.saldos > p { grid-column: 1 / -1; }
.boton-ico.boton-menu { display: none; }
@media (max-width: 900px) { .boton-ico.boton-menu { display: grid !important; } }
.form > *, .form-2 > * { min-width: 0; }
fieldset { min-width: 0; }

/* ------------------------------------------------------------ ToroChat Web 1.3 */
.con-globo { position: relative; }
.globo { position: absolute; top: 4px; right: 4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px;
  background: var(--rojo); color: #fff; font-size: .68rem; font-weight: 800; display: grid; place-items: center; }
.sub-pestanas { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.sub-pestanas button { background: var(--superficie-2); border: 1px solid var(--borde); color: var(--texto-2); font: inherit; font-weight: 600;
  font-size: .88rem; padding: .4rem .85rem; border-radius: 999px; cursor: pointer; }
.sub-pestanas button.activa { background: var(--verde-claro); color: var(--verde-2); border-color: transparent; }
.etapa { border: 1px solid var(--borde); border-radius: 12px; padding: .8rem 1rem; }
.etapa + .etapa { margin-top: .6rem; }
.aviso-item { display: flex; gap: .75rem; padding: .7rem .5rem; border-bottom: 1px solid var(--borde); }
.aviso-item.no-leido { background: color-mix(in srgb, var(--verde-2) 7%, transparent); }
.aviso-item .punto { margin-top: .45rem; flex: none; }
.pasos-firma { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; font-size: .85rem; color: var(--texto-2); margin: .5rem 0 1rem; }
.pasos-firma span { background: var(--superficie-2); border-radius: 999px; padding: .2rem .65rem; }
/* Panel 1.3: tema oscuro elegido a mano y actividad prioritaria */
:root[data-tema="oscuro"] {
  --fondo: #0d1113; --superficie: #151b1e; --superficie-2: #1c2428; --borde: #26313a;
  --texto: #e9eef0; --texto-2: #a6b3ba; --texto-3: #6f7d86; --verde-claro: #0e3a31;
  --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .25);
}
.lista-prioridad { display: grid; gap: .25rem; }
.fila-prioridad { display: flex; gap: .75rem; align-items: center; padding: .6rem .75rem; border-radius: 10px; color: inherit; border: 1px solid var(--borde); }
.fila-prioridad:hover { background: var(--superficie-2); text-decoration: none; border-color: var(--verde); }

/* 1.6.5 - textos legales con formato (sitio y panel) */
.contenido-legal.html { white-space: normal; }
.contenido-legal.html h2 { font-size: 1.2rem; margin: 1.6rem 0 .6rem; }
.contenido-legal.html h3 { font-size: 1.05rem; margin: 1.2rem 0 .5rem; }
.contenido-legal.html h4 { font-size: 1rem; margin: 1rem 0 .4rem; }
.contenido-legal.html h2:first-child, .contenido-legal.html h3:first-child { margin-top: 0; }
.contenido-legal.html p { margin: 0 0 .8rem; }
.contenido-legal.html ul, .contenido-legal.html ol { margin: 0 0 .9rem; padding-left: 1.4rem; }
.contenido-legal.html li { margin: .25rem 0; }
.contenido-legal.html a { word-break: break-word; }
.legal-pendiente { border-left: 4px solid var(--amarillo); }
.editor-legal { min-height: 26rem; font-family: var(--mono); font-size: .9rem; line-height: 1.5; }
.mensaje-denunciado { white-space: pre-wrap; background: var(--superficie-2); border: 1px solid var(--borde); border-radius: 12px; padding: 1rem; }
.pie-sic { font-size: .85rem; }
.pre-linea { white-space: pre-line; }
/* 1.6.5: prueba de moderacion difuminada hasta que el moderador decida verla */
.velo { position: relative; display: inline-block; max-width: 100%; overflow: hidden; border-radius: 12px; }
.velo-control { position: absolute; opacity: 0; width: 1px; height: 1px; }
.velo-medio { display: block; max-width: 100%; max-height: 70vh; filter: blur(32px) grayscale(1); pointer-events: none; }
.velo-aviso { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; }
.velo-control:checked ~ .velo-medio { filter: none; pointer-events: auto; }
.velo-control:checked ~ .velo-aviso { display: none; }
.velo-control:focus-visible ~ .velo-aviso { outline: 3px solid var(--verde); outline-offset: 2px; }
mark.marca-pendiente { background: color-mix(in srgb, var(--amarillo) 35%, transparent); color: inherit; padding: 0 .15em; border-radius: 4px; }
.vista-legal { max-height: 75vh; overflow: auto; }
.progreso { width: 100%; height: .55rem; border: 0; border-radius: 999px; background: var(--superficie-2); overflow: hidden; accent-color: var(--verde); }
.progreso::-webkit-progress-bar { background: var(--superficie-2); border-radius: 999px; }
.progreso::-webkit-progress-value { background: var(--verde); border-radius: 999px; }
.progreso::-moz-progress-bar { background: var(--verde); border-radius: 999px; }
.grid-legal { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); align-items: start; }
@media (max-width: 1000px) { .grid-legal { grid-template-columns: 1fr; } }
.kv.apilado { grid-template-columns: 1fr; gap: .1rem; }
.kv.apilado dt { margin-top: .55rem; font-size: .82rem; }
.kv.apilado dt:first-child { margin-top: 0; }
.kv.apilado dd.mono { font-size: .82rem; word-break: break-all; }

/* 1.6.6 - estadisticas: graficas SVG del servidor. Paleta categorica validada (daltonismo y contraste)
   para claro y oscuro; el texto nunca usa el color de la serie */
:root { --serie-1: #2a78d6; --serie-2: #eb6834; --serie-3: #1baf7a; --g-rejilla: #e8ecee; --g-eje: #c3cbd0; --g-tinta: #6b7880;
  --subida: #047a63; --bajada: #c4373c; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) { --serie-1: #3987e5; --serie-2: #d95926; --serie-3: #199e70; --g-rejilla: #232d33; --g-eje: #34424b;
    --g-tinta: #8a969e; --subida: #00d4aa; --bajada: #ff8a8e; }
}
:root[data-tema="oscuro"] { --serie-1: #3987e5; --serie-2: #d95926; --serie-3: #199e70; --g-rejilla: #232d33; --g-eje: #34424b;
  --g-tinta: #8a969e; --subida: #00d4aa; --bajada: #ff8a8e; }
.filtros-periodo .boton.fantasma { margin-left: auto; }
.grid-graficas { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); }
.grid-graficas > .tarjeta + .tarjeta { margin-top: 0; }
.g-figura { margin: 0; min-width: 0; }
.g-figura figcaption h2 { font-size: 1.1rem; margin-bottom: .2rem; }
.g-figura figcaption p { font-size: .85rem; margin-bottom: .5rem; }
.g-leyenda { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem 1rem; padding: 0; margin: 0 0 .4rem; font-size: .85rem; color: var(--texto-2); }
.g-leyenda li { display: inline-flex; align-items: center; gap: .45rem; }
.g-clave { display: inline-block; flex: none; }
.g-clave.linea { width: 16px; height: 2px; border-radius: 2px; }
.g-clave.caja { width: 11px; height: 11px; border-radius: 3px; }
.g-clave.s1 { background: var(--serie-1); } .g-clave.s2 { background: var(--serie-2); } .g-clave.s3 { background: var(--serie-3); }
.g-lienzo { position: relative; }
.g-svg { width: 100%; height: auto; display: block; overflow: visible; }
.g-rejilla { stroke: var(--g-rejilla); stroke-width: 1; }
.g-eje { stroke: var(--g-eje); stroke-width: 1; }
.g-marca { fill: var(--g-tinta); font-size: 12px; font-variant-numeric: tabular-nums; }
.g-valor { fill: var(--texto); font-size: 13px; font-weight: 600; }
@media (max-width: 640px) { .g-marca { font-size: 17px; } .g-valor { font-size: 18px; } }
.g-linea { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.g-linea.s1 { stroke: var(--serie-1); } .g-linea.s2 { stroke: var(--serie-2); } .g-linea.s3 { stroke: var(--serie-3); }
.g-punto { stroke: var(--superficie); stroke-width: 2; }
.g-punto.s1, .g-barra.s1 { fill: var(--serie-1); } .g-punto.s2, .g-barra.s2 { fill: var(--serie-2); } .g-punto.s3, .g-barra.s3 { fill: var(--serie-3); }
.g-hit { fill: transparent; cursor: crosshair; }
.g-hit:hover { fill: color-mix(in srgb, var(--texto) 4%, transparent); }
.g-cruz { stroke: var(--g-eje); stroke-width: 1; visibility: hidden; }
.g-lienzo.activo .g-cruz { visibility: visible; }
.g-ayuda { position: absolute; top: 4px; pointer-events: none; background: var(--superficie); border: 1px solid var(--borde); box-shadow: var(--sombra);
  border-radius: 8px; padding: .45rem .65rem; font-size: .8rem; min-width: 150px; z-index: 2; }
.g-ayuda b { display: block; margin-bottom: .25rem; color: var(--texto-2); font-weight: 600; }
.g-ayuda .fila-ayuda { display: flex; align-items: center; gap: .45rem; }
.g-ayuda .fila-ayuda strong { margin-left: auto; padding-left: .75rem; font-variant-numeric: tabular-nums; color: var(--texto); }
.g-tabla summary { cursor: pointer; color: var(--texto-2); font-size: .85rem; margin-top: .5rem; }
.g-tabla .tabla-caja { max-height: 260px; overflow-y: auto; margin-top: .5rem; }
.kpi.est .valor { font-variant-numeric: normal; }
.kpi .delta { font-size: .8rem; font-weight: 700; margin-top: .15rem; }
.kpi .delta .suave { font-weight: 400; }
.kpi .delta.sube { color: var(--subida); } .kpi .delta.baja { color: var(--bajada); }
.kpi .sub { font-size: .8rem; margin-top: .15rem; }
.nota-periodo { font-size: .82rem; margin: -.75rem 0 1rem; }
.ret-celda { display: flex; align-items: center; gap: .6rem; min-width: 210px; }
.g-medidor { width: 120px; height: 8px; flex: none; }
.g-pista { fill: color-mix(in srgb, var(--serie-1) 18%, var(--superficie)); }
.g-relleno { fill: var(--serie-1); }
.tabla-retencion tr.reciente td { color: var(--texto-3); }
.g-medidor.nivel-aviso .g-relleno { fill: var(--amarillo); } .g-medidor.nivel-peligro .g-relleno { fill: var(--rojo); }
.g-medidor.nivel-aviso .g-pista { fill: color-mix(in srgb, var(--amarillo) 20%, var(--superficie)); }
.g-medidor.nivel-peligro .g-pista { fill: color-mix(in srgb, var(--rojo) 18%, var(--superficie)); }

/* 1.6.6 - estado del servidor y anuncios */
.lista-alertas { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .4rem; }
.lista-alertas li { display: flex; gap: .6rem; align-items: flex-start; padding: .55rem .8rem; border-radius: 10px; border: 1px solid var(--borde); background: var(--superficie); }
.lista-alertas li .punto { margin-top: .4rem; flex: none; }
.lista-servicios { list-style: none; padding: 0; margin: 0; display: grid; gap: .1rem; }
.lista-servicios li { display: flex; gap: .6rem; align-items: center; padding: .45rem 0; border-bottom: 1px solid var(--borde); font-size: .92rem; }
.lista-servicios li:last-child { border-bottom: 0; }
.lista-servicios .estado-servicio { margin-left: auto; font-size: .8rem; color: var(--texto-2); text-align: right; }
.recurso { display: grid; grid-template-columns: minmax(110px, 160px) 1fr auto; gap: .6rem; align-items: center; padding: .4rem 0; font-size: .92rem; }
.recurso .g-medidor { width: 100%; }
.recurso .num { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--texto-2); font-size: .85rem; }
.grid-servidor { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); margin-bottom: 1rem; }
.grid-servidor > .tarjeta + .tarjeta { margin-top: 0; }
.errores-lista { list-style: none; padding: 0; margin: 0; font-size: .85rem; }
.errores-lista li { padding: .45rem 0; border-bottom: 1px solid var(--borde); word-break: break-word; }
.errores-lista li:last-child { border-bottom: 0; }
.vista-notificacion { border: 1px solid var(--borde); border-radius: 18px; padding: .9rem 1rem; background: var(--superficie-2); max-width: 420px; }
.vista-notificacion .vn-app { display: flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--texto-2); margin-bottom: .35rem; }
.vista-notificacion .vn-app svg { width: 16px; height: 16px; }
.vista-notificacion .vn-titulo { font-weight: 700; margin-bottom: .2rem; }
.vista-notificacion .vn-cuerpo { font-size: .92rem; }
.grid-2 > .tarjeta + .tarjeta { margin-top: 0; }
.tarjetas.compactas { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); }
@media (min-width: 900px) { .tarjetas.compactas { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); } }

/* 1.6.8: manuales (Inicio > Manuales) y sugerencias de los agentes de apoyo */
.manuales { display: grid; grid-template-columns: 240px 1fr; gap: 1rem; align-items: start; }
.manuales nav a { display: block; padding: .55rem .75rem; border-radius: 10px; color: var(--texto); text-decoration: none; }
.manuales nav a:hover { background: var(--superficie-2); }
.manuales nav a.activo { background: color-mix(in srgb, var(--verde) 12%, transparent); font-weight: 600; }
.manual { line-height: 1.6; max-width: 900px; overflow-wrap: anywhere; }
.manual h1 { font-size: 1.5rem; margin: 0 0 1rem; }
.manual h2 { font-size: 1.2rem; margin: 1.6rem 0 .6rem; }
.manual h3 { font-size: 1.05rem; margin: 1.2rem 0 .4rem; }
.manual p, .manual ul, .manual ol { margin: .5rem 0; }
.manual ul, .manual ol { padding-left: 1.4rem; }
.manual table { border-collapse: collapse; width: 100%; margin: .75rem 0; font-size: .92rem; display: block; overflow-x: auto; }
.manual th, .manual td { border: 1px solid var(--borde); padding: .45rem .6rem; text-align: left; vertical-align: top; }
.manual th { background: var(--superficie-2); }
.manual code, .manual pre { background: var(--superficie-2); border-radius: 6px; padding: .1rem .3rem; font-size: .88em; }
.manual pre { padding: .75rem; overflow-x: auto; }
.manual blockquote { border-left: 3px solid var(--borde); margin: .75rem 0; padding: .25rem .9rem; color: var(--texto-2); }
@media (max-width: 760px) { .manuales { grid-template-columns: 1fr; } }
.sugerencia { border: 1px dashed color-mix(in srgb, var(--verde) 45%, var(--borde)); border-radius: var(--radio); padding: 1rem;
  background: color-mix(in srgb, var(--verde) 4%, var(--superficie)); }
.sugerencia + .sugerencia { margin-top: .75rem; }
.sugerencia .texto { white-space: pre-wrap; margin: .5rem 0; }
.sugerencia .pie { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .5rem; }
.sugerencia .pie form { display: inline; }

/* 1.7.0: textos largos del modulo comercial (contenido, cartas) */
.texto-largo { margin: 0; overflow-wrap: anywhere; line-height: 1.6; }

/* 1.6.9: Bandeja de la manana de los agentes */
.accion-agente { margin-top: .8rem; display: grid; gap: .45rem; }
.accion-agente .fila { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.accion-agente textarea { width: 100%; }
.accion-agente form.fila input[type="text"] { flex: 1 1 220px; min-width: 0; }
.bandeja-promocion { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
.bandeja-promocion form { flex: none; }
details.deshacer summary { list-style: none; cursor: pointer; }
details.deshacer summary::-webkit-details-marker { display: none; }
details.deshacer form { display: grid; gap: .4rem; min-width: 220px; }

/* 1.8.0: carne verificado (pagina publica /c/...) */
.carne-verificado h1 { display: flex; align-items: center; gap: .5rem; }
.carne-verificado .carne-nombre { font-size: 1.6rem; font-weight: 700; margin: .4rem 0 1rem; letter-spacing: .01em; }

/* 1.8.0: ToroChat Web - tarjeta de la llave con botones para copiar, estado del cobro y burbuja del cuaderno */
.llave-tarjeta .fila-copiar { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: .15rem 0; }
.llave-tarjeta .fila-copiar b { overflow-wrap: anywhere; }
.llave-tarjeta button.copiar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem;
  border-radius: 8px; border: 1px solid rgba(0, 32, 26, .35); background: rgba(255, 255, 255, .35); color: #00201a; cursor: pointer; }
.llave-tarjeta button.copiar:hover, .llave-tarjeta button.copiar:focus-visible { background: rgba(255, 255, 255, .6); }
.cobro-estado { margin-top: .35rem; font-weight: 600; font-size: .9rem; }
.cobro-estado.pagado, .cobro-estado.confirmado { color: #004d3d; }
.cobro-estado.no_llego, .cobro-estado.rechazado { color: #7a1010; }
.msj.sistema.cuaderno { background: transparent; padding: 0; max-width: min(360px, 90%); }
.msj.sistema.cuaderno .pago-tarjeta { text-align: left; font-size: .95rem; }
/* 1.8.0: base negro puro y color de acento en ToroChat Web */
:root[data-tema="negro"] {
  --fondo: #000000; --superficie: #0a0a0a; --superficie-2: #141414; --borde: #262626;
  --texto: #f2f2f2; --texto-2: #b3b3b3; --texto-3: #7a7a7a; --verde-claro: #0d2b25;
  --sombra: none;
}
.boton:not(.sec):not(.fantasma):not(.peligro) { color: var(--sobre-acento, #fff); }
.paleta-acentos { display: grid; grid-template-columns: repeat(auto-fill, minmax(2rem, 1fr)); gap: .4rem; margin: .3rem 0 .6rem; }
.paleta-acentos .muestra { width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid var(--borde); cursor: pointer; padding: 0; }
.paleta-acentos .muestra.activa { outline: 3px solid var(--texto); outline-offset: 2px; }