/* =====================================================================
   Neola Finance · hoja de estilos
   Marca: azul marino Neola #0B1B33 (confianza) + esmeralda #0E9F6E (dinero, cuadrado)
   ===================================================================== */
:root {
  --ink: #0B1B33;
  --ink-2: #14284A;
  --ink-soft: #5B6B82;
  --ink-faint: #687790;
  --line: #E3E8F0;
  --line-2: #EEF2F7;
  --bg: #F5F7FB;
  --card: #FFFFFF;
  --campo: #FFFFFF;             /* fondo de campos de formulario */
  --surface-2: #FAFBFD;         /* superficies suaves: filas, fichas, zonas de carga */
  --hover: #F0F3F8;
  --line-input: #D5DCE7;
  --line-strong: #CBD5E1;
  --marca: #0B1B33;             /* superficies de la marca (barra lateral, avisos, botón oscuro): oscuras en todo tema */
  --marca-2: #0A1730;
  --marca-fondo: #071226;
  --marca-brillo: #1C3B6E;
  --marca-texto: #C9D4E5;
  --marca-tenue: #8FA2BF;
  --marca-apagado: #6F83A3;
  --accent: #0E9F6E;
  --accent-2: #14C38E;
  --accent-soft: #E6F6EF;
  --accent-ink: #06603F;
  --accent-hover: #0B8A5F;
  --accent-line: #9EDCC1;
  --info: #2563EB;
  --info-soft: #EAF1FE;
  --info-ink: #1D4ED8;
  --info-line: #BFD4FB;
  --warn: #E8A317;
  --warn-soft: #FDF4E1;
  --warn-ink: #7A5100;
  --warn-line: #F5DFAE;
  --bad: #E5484D;
  --bad-soft: #FDECEC;
  --bad-ink: #A8282C;
  --bad-line: #F6C9CA;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(11, 27, 51, .06), 0 8px 24px rgba(11, 27, 51, .06);
  --shadow-lg: 0 18px 50px rgba(11, 27, 51, .18);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { font-family: var(--font); background: var(--bg); color: var(--ink); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
img, svg { display: inline-block; vertical-align: middle; }
.ic { flex: none; }
h1 { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: 17px; font-weight: 650; }
h3 { font-size: 14px; font-weight: 650; }
.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
.mono { font-family: var(--mono); font-size: 12.5px; }
.num { font-variant-numeric: tabular-nums; }
.oculto, [hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ------------------------------------------------------------ app shell */
.app { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }
.side { background: linear-gradient(180deg, var(--marca) 0%, var(--marca-2) 100%); color: var(--marca-texto); padding: 20px 14px; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.marca { display: flex; align-items: center; gap: 10px; padding: 4px 8px; }
.marca img { height: 26px; width: auto; }
.marca .producto { font-size: 17px; font-weight: 650; color: var(--accent-2); letter-spacing: .01em; }
.selector-empresa { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; padding: 10px 12px; }
.selector-empresa b { display: block; color: #fff; font-size: 13px; line-height: 1.3; }
.selector-empresa span { font-size: 11.5px; color: var(--marca-tenue); }
.selector-empresa select { margin-top: 8px; width: 100%; background: rgba(255, 255, 255, .08); color: #fff; border: 1px solid rgba(255, 255, 255, .12); border-radius: 8px; padding: 6px 8px; font-size: 12px; }
.selector-empresa select option { color: var(--ink); }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav .grupo { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--marca-apagado); padding: 12px 12px 4px; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; font-size: 13.5px; color: var(--marca-texto); transition: background .2s, color .2s; }
.nav a:hover { background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none; }
.nav a.on { background: rgba(20, 195, 142, .14); color: #fff; box-shadow: inset 3px 0 0 var(--accent-2); }
.nav a.bloqueado { color: var(--marca-apagado); }
.nav a .candado { margin-left: auto; opacity: .7; }
.nav a .pronto { margin-left: auto; font-size: 10px; padding: 1px 6px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--marca-tenue); }
.side-pie { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding: 0 6px; }
.side-pie .persona { font-size: 12px; color: var(--marca-tenue); }
.side-pie .persona b { display: block; color: #fff; font-size: 12.5px; }
.side-pie form button { display: flex; align-items: center; gap: 8px; color: var(--marca-texto); font-size: 12.5px; padding: 6px 4px; }
.side-pie form button:hover { color: #fff; }
.vivo { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: #B9F5DE; }
.punto { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); animation: latido 1.8s infinite; }
@keyframes latido { 0% { box-shadow: 0 0 0 0 rgba(20, 195, 142, .55); } 70% { box-shadow: 0 0 0 9px rgba(20, 195, 142, 0); } 100% { box-shadow: 0 0 0 0 rgba(20, 195, 142, 0); } }

main.contenido { padding: 26px 32px 56px; min-width: 0; }
.barra { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.barra p { color: var(--ink-soft); font-size: 13px; margin-top: 2px; }
.btn.menu-movil, .menu-movil { display: none; }

/* ------------------------------------------------------------- chips */
.chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--card); border: 1px solid var(--line); white-space: nowrap; }
.chip.ok { background: var(--accent-soft); border-color: transparent; color: var(--accent-ink); }
.chip.info { background: var(--info-soft); border-color: transparent; color: var(--info-ink); }
.chip.warn { background: var(--warn-soft); border-color: transparent; color: var(--warn-ink); }
.chip.bad { background: var(--bad-soft); border-color: transparent; color: var(--bad-ink); }

/* ----------------------------------------------------------- avisos */
.banner { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-radius: 12px; margin-bottom: 18px; font-size: 13px; border: 1px solid transparent; flex-wrap: wrap; }
.banner .ic { flex: none; }
.banner .texto { flex: 1; min-width: 220px; }
.banner.info { background: var(--info-soft); color: var(--info-ink); }
.banner.ok { background: var(--accent-soft); color: var(--accent-ink); }
.banner.warn { background: var(--warn-soft); color: var(--warn-ink); border-color: var(--warn-line); }
.banner.bad { background: var(--bad-soft); color: var(--bad-ink); border-color: var(--bad-line); }

/* ------------------------------------------------------------ layout */
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g21 { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.stack { display: flex; flex-direction: column; gap: 16px; }
.fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fila.entre { justify-content: space-between; }
.espacio { flex: 1; }
.mt { margin-top: 16px; }
.mb { margin-bottom: 16px; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 22px; min-width: 0; }
.card > h2, .card > h3 { margin-bottom: 4px; }
.card .sub { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 16px; }
.card.plano { box-shadow: none; }
.card.resaltado { border-color: var(--accent-line); box-shadow: 0 8px 28px rgba(14, 159, 110, .14); }

/* ------------------------------------------------------------ botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 10px; font-weight: 600; font-size: 13.5px; background: var(--accent); color: #fff; transition: transform .15s, background .2s, box-shadow .2s; box-shadow: 0 4px 14px rgba(14, 159, 110, .28); white-space: nowrap; text-decoration: none !important; line-height: 1.2; }
.btn:hover { background: var(--accent-hover); transform: translateY(-1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.btn.ghost { background: var(--card); color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
.btn.ghost:hover { background: var(--hover); }
.btn.oscuro { background: var(--marca); box-shadow: 0 4px 14px rgba(11, 27, 51, .25); }
.btn.oscuro:hover { background: var(--ink-2); }
.btn.peligro { background: var(--card); color: var(--bad-ink); border: 1px solid var(--bad-line); box-shadow: none; }
.btn.peligro:hover { background: var(--bad-soft); }
.btn.sm { padding: 6px 10px; font-size: 12.5px; border-radius: 8px; }
.btn.bloque { width: 100%; }
.enlace { display: inline-flex; align-items: center; gap: 4px; color: var(--accent-ink); font-weight: 600; }

/* -------------------------------------------------------- formularios */
.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.campo label, .etiqueta { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.campo .ayuda { font-size: 12px; color: var(--ink-soft); }
.campo .error, .error-campo { font-size: 12px; color: var(--bad-ink); font-weight: 600; }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], input[type=date], input[type=time], input[type=url], input[type=search], select, textarea {
  width: 100%; font: inherit; font-size: 14px; color: var(--ink); background: var(--campo); border: 1px solid var(--line-input); border-radius: 10px; padding: 10px 12px; transition: border-color .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(14, 159, 110, .15); }
.con-error input, .con-error select, .con-error textarea { border-color: var(--bad); }
textarea { min-height: 90px; resize: vertical; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.form-grid .ancho { grid-column: 1 / -1; }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; padding: 6px 0; cursor: pointer; }
.check input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--accent); flex: none; }
.clave { position: relative; }
.clave input { padding-right: 70px; }
.clave button { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 12px; font-weight: 600; color: var(--ink-soft); padding: 4px 6px; }
.fuerza { height: 5px; border-radius: 5px; background: var(--line-2); overflow: hidden; }
.fuerza i { display: block; height: 100%; width: 0; background: var(--bad); transition: width .3s, background .3s; }

/* OTP */
.otp { display: flex; gap: 8px; justify-content: center; margin: 8px 0 18px; }
.otp input { width: 48px; height: 56px; text-align: center; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; padding: 0; border-radius: 12px; }

/* ------------------------------------------------------------ tablas */
.tabla-wrap { overflow-x: auto; }
table.tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); font-weight: 650; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tabla td { padding: 11px 10px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tr:hover td { background: var(--surface-2); }
.tabla .der { text-align: right; }

/* ------------------------------------------------------------ medidores */
.medidor { display: flex; flex-direction: column; gap: 6px; }
.medidor .cab { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.medidor .cab b { font-variant-numeric: tabular-nums; }
.barra-uso { height: 7px; border-radius: 7px; background: var(--line-2); overflow: hidden; }
.barra-uso i { display: block; height: 100%; width: 0; border-radius: 7px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width 1.3s cubic-bezier(.2, .8, .2, 1); }
.barra-uso.alto i { background: linear-gradient(90deg, #E8A317, #F2B84B); }
.barra-uso.lleno i { background: linear-gradient(90deg, #E5484D, #EF6B6F); }
.medidores { display: grid; gap: 14px; }

/* ------------------------------------------------------------ KPI */
.kpi .etq { font-size: 11.5px; color: var(--ink-soft); font-weight: 650; text-transform: uppercase; letter-spacing: .05em; }
.kpi .valor { font-size: 26px; font-weight: 750; letter-spacing: -.02em; margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.kpi .nota { font-size: 12.5px; color: var(--ink-soft); }

/* ------------------------------------------------------- pasos alta */
.pasos { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.pasos .p { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-soft); padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); }
.pasos .p i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 11.5px; background: var(--line-2); color: var(--ink-soft); }
.pasos .p.hecho i { background: var(--accent); color: #fff; }
.pasos .p.actual { border-color: var(--accent); color: var(--ink); font-weight: 600; }
.pasos .p.actual i { background: var(--marca); color: #fff; }

/* ------------------------------------------------------------ planes */
.ciclo { display: inline-flex; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 4px; gap: 4px; }
.ciclo label { position: relative; padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--ink-soft); }
.ciclo input { position: absolute; opacity: 0; pointer-events: none; }
.ciclo input:checked + span { color: #fff; }
.ciclo label:has(input:checked) { background: var(--marca); color: #fff; }
.ciclo .ahorro { font-size: 11px; color: var(--accent-ink); margin-left: 4px; }
.ciclo label:has(input:checked) .ahorro { color: var(--accent-2); }
.planes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.plan { position: relative; background: var(--card); border: 2px solid var(--line); border-radius: 16px; padding: 20px 18px; display: flex; flex-direction: column; gap: 10px; transition: border-color .25s, box-shadow .25s, transform .25s; }
.plan:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.plan.sugerido { border-color: var(--accent); box-shadow: 0 10px 30px rgba(14, 159, 110, .16); }
.plan.actual { border-color: var(--ink); }
.plan .cinta { position: absolute; top: -11px; left: 16px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.plan.actual .cinta { background: var(--marca); }
.plan .nombre { font-size: 15px; font-weight: 700; }
.plan .precio { font-size: 30px; font-weight: 800; letter-spacing: -.03em; }
.plan .precio small { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); letter-spacing: 0; }
.plan .desc { font-size: 12.5px; color: var(--ink-soft); min-height: 36px; }
.plan ul { list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.plan li { display: flex; gap: 8px; align-items: flex-start; }
.plan li .ic { color: var(--accent); margin-top: 1px; }
.plan .limites { border-top: 1px dashed var(--line); padding-top: 10px; display: grid; gap: 4px; font-size: 12px; }
.plan .limites div { display: flex; justify-content: space-between; gap: 8px; }
.plan .limites span { color: var(--ink-soft); }
.plan .limites b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.plan .acciones { margin-top: auto; padding-top: 6px; }

/* ----------------------------------------------------------- módulos */
.mods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mod { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); transition: all .45s; color: inherit; text-decoration: none !important; }
.mod .icono { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--line-2); color: var(--ink-soft); flex: none; transition: all .45s; }
.mod b { display: block; font-size: 13.5px; }
.mod small { display: block; font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.mod.on { border-color: var(--accent-line); background: var(--accent-soft); }
.mod.on .icono { background: var(--accent); color: #fff; }
.mod.off { opacity: .6; }
.mod.off .icono { background: var(--line-2); }
a.mod:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.mods.animar .mod:not(.encendido) { opacity: .4; border-color: var(--line); background: var(--card); }
.mods.animar .mod:not(.encendido) .icono { background: var(--line-2); color: var(--ink-soft); }
.mods.animar .mod.encendido { opacity: 1; }

/* -------------------------------------------------- hoja de ruta mes */
.ruta { position: relative; padding: 30px 6px 6px; }
.ruta .via { position: absolute; left: 7%; right: 7%; top: 58px; height: 6px; border-radius: 6px; background: var(--line); }
.ruta .avance { position: absolute; left: 7%; top: 58px; height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); width: 0; transition: width 2s cubic-bezier(.2, .8, .2, 1); }
.ruta .estaciones { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); }
.ruta .est { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.ruta .est .nm { font-size: 12.5px; font-weight: 650; }
.ruta .est .bola { width: 22px; height: 22px; border-radius: 50%; background: var(--card); border: 2px solid var(--line-strong); position: relative; z-index: 1; transition: all .4s; }
.ruta .est.hecha .bola { background: var(--accent); border-color: var(--accent); }
.ruta .est.ahora .bola { border-color: var(--accent); border-width: 3px; animation: latidoV 1.6s infinite; }
@keyframes latidoV { 0% { box-shadow: 0 0 0 0 rgba(14, 159, 110, .45); } 70% { box-shadow: 0 0 0 14px rgba(14, 159, 110, 0); } 100% { box-shadow: 0 0 0 0 rgba(14, 159, 110, 0); } }
.ruta .est .ds { font-size: 11.5px; color: var(--ink-soft); max-width: 140px; }

/* ------------------------------------------------------------ toasts */
.toasts { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 80; max-width: min(420px, calc(100vw - 40px)); }
.toast { display: flex; gap: 10px; align-items: flex-start; background: var(--marca); color: #fff; padding: 12px 14px; border-radius: 12px; font-size: 13px; box-shadow: var(--shadow-lg); animation: entra .35s ease both; }
.toast.ok .ic { color: var(--accent-2); }
.toast.bad { background: #5B1416; }
.toast.warn { background: #4A3203; }
.toast > span { flex: 1; }
.toast .cerrar { margin-left: auto; color: #C9D4E5; font-size: 16px; line-height: 1; padding: 0 2px; }
.toast.sale { animation: sale .3s ease both; }
@keyframes entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes sale { to { opacity: 0; transform: translateY(10px); } }
.dev-codigo { position: fixed; left: 20px; bottom: 20px; z-index: 81; background: linear-gradient(var(--warn-soft), var(--warn-soft)), var(--card); border: 1px dashed var(--warn); color: var(--warn-ink); border-radius: 12px; padding: 10px 14px; font-size: 12.5px; max-width: 340px; box-shadow: var(--shadow); }
.dev-codigo b { font-family: var(--mono); font-size: 18px; letter-spacing: .15em; color: var(--ink); }

/* ---------------------------------------------------- repositorio */
.drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 26px 16px; border: 2px dashed var(--line-strong); border-radius: 14px; background: var(--surface-2); cursor: pointer; transition: all .2s; }
.drop:hover, .drop.encima { border-color: var(--accent); background: var(--accent-soft); }
.drop .ic { color: var(--accent); }
.drop b { font-size: 13.5px; }
.drop { position: relative; }
.drop:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(14, 159, 110, .15); }
.drop small { color: var(--ink-soft); font-size: 12px; }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.drop .elegido { font-size: 12.5px; color: var(--accent-ink); font-weight: 600; }
.etiquetas { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.etiquetas a { padding: 6px 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-size: 12.5px; color: var(--ink); font-weight: 600; }
.etiquetas a.on { background: var(--marca); color: #fff; border-color: var(--marca); text-decoration: none; }
.archivo-ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: 10px; font-weight: 800; color: #fff; background: var(--ink-soft); text-transform: uppercase; flex: none; }
.archivo-ic.pdf { background: #D9483B; }
.archivo-ic.xml { background: #2563EB; }
.archivo-ic.xlsx, .archivo-ic.xls, .archivo-ic.csv { background: #15803D; }
.archivo-ic.jpg, .archivo-ic.jpeg, .archivo-ic.png { background: #7C3AED; }
.archivo-ic.docx { background: #1D4ED8; }

/* --------------------------------------------------------- vacíos */
.vacio { text-align: center; color: var(--ink-soft); padding: 32px 16px; font-size: 13px; }
.vacio .ic { color: var(--ink-faint); margin-bottom: 8px; }

/* --------------------------------------------------- documentos legales */
.legal { font-size: 14px; line-height: 1.65; color: var(--ink); }
.legal h1 { font-size: 21px; margin-bottom: 4px; }
.legal h2 { font-size: 15px; margin: 22px 0 8px; }
.legal h3 { font-size: 14px; margin: 16px 0 6px; }
.legal p, .legal ul { margin-bottom: 10px; }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 4px; }
.legal table { width: 100%; border-collapse: collapse; margin: 10px 0 14px; font-size: 13px; }
.legal th, .legal td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.legal th { background: var(--surface-2); font-weight: 650; width: 42%; }
.legal .legal-meta { color: var(--ink-soft); font-size: 12.5px; margin-bottom: 14px; }
.documento-scroll { max-height: 520px; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; padding: 22px 24px; background: var(--card); }
.firma { border: 1px solid var(--accent-line); background: linear-gradient(180deg, var(--accent-soft), var(--card)); border-radius: 14px; padding: 18px 20px; }

/* ----------------------------------------------------- página pública */
.pub { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; }
.pub-marca { position: relative; overflow: hidden; background: radial-gradient(1200px 600px at -10% -10%, var(--marca-brillo) 0%, transparent 60%), linear-gradient(160deg, var(--marca) 0%, var(--marca-fondo) 100%); color: #DCE5F2; padding: 44px 48px; display: flex; flex-direction: column; }
.pub-marca .marca img { height: 30px; }
.pub-marca .marca .producto { font-size: 20px; }
.pub-marca h2 { font-size: 30px; line-height: 1.2; color: #fff; font-weight: 750; letter-spacing: -.02em; margin: auto 0 14px; max-width: 460px; }
.pub-marca h2 em { font-style: normal; color: var(--accent-2); }
.pub-marca p { color: #A9B8CF; max-width: 440px; font-size: 14.5px; }
.pub-marca ul { list-style: none; margin-top: 22px; display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; }
.pub-marca li { display: flex; gap: 10px; align-items: center; }
.pub-marca li .ic { color: var(--accent-2); }
.pub-marca .pie { margin-top: auto; padding-top: 30px; font-size: 12px; color: var(--marca-apagado); }
.lineas { position: absolute; inset: 0; pointer-events: none; opacity: .55; }
.lineas path { fill: none; stroke: url(#gradLinea); stroke-width: 2; stroke-dasharray: 6 10; animation: fluye 18s linear infinite; }
@keyframes fluye { to { stroke-dashoffset: -400; } }
.pub-form { display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: var(--bg); }
.pub-caja { width: 100%; max-width: 440px; }
.pub-caja h1 { margin-bottom: 4px; }
.pub-caja .sub { color: var(--ink-soft); margin-bottom: 22px; }
.pub-caja .pie-form { margin-top: 18px; font-size: 13px; color: var(--ink-soft); text-align: center; }
.separador { display: flex; align-items: center; gap: 10px; color: var(--ink-faint); font-size: 12px; margin: 16px 0; }
.separador::before, .separador::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* landing */
.landing { max-width: 1180px; margin: 0 auto; padding: 0 24px 64px; }
.landing-nav { display: flex; align-items: center; gap: 16px; padding: 20px 0; }
.landing-nav .marca img { height: 28px; }
.landing-nav .producto { color: var(--accent); font-weight: 700; font-size: 18px; }
.hero { position: relative; overflow: hidden; border-radius: 22px; background: radial-gradient(900px 500px at 100% 0%, var(--marca-brillo) 0%, transparent 60%), linear-gradient(160deg, var(--marca) 0%, var(--marca-fondo) 100%); color: #DCE5F2; padding: 56px 52px; margin-bottom: 40px; }
.hero h1 { font-size: 40px; line-height: 1.12; color: #fff; letter-spacing: -.03em; max-width: 640px; font-weight: 800; }
.hero h1 em { font-style: normal; color: var(--accent-2); }
.hero p { margin: 16px 0 26px; max-width: 560px; color: #A9B8CF; font-size: 16px; }
.hero .fila .btn.ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .25); }
.beneficios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 40px; }
.beneficio .ic { color: var(--accent); }
.beneficio h3 { margin: 10px 0 4px; font-size: 15px; }
.beneficio p { color: var(--ink-soft); font-size: 13px; }
.seccion-titulo { text-align: center; margin-bottom: 20px; }
.seccion-titulo h2 { font-size: 26px; letter-spacing: -.02em; }
.seccion-titulo p { color: var(--ink-soft); margin-top: 4px; }

/* -------------------------------------------------------------- tour */
.tour-fondo { position: fixed; inset: 0; background: rgba(7, 18, 38, .55); z-index: 90; animation: entra .3s ease both; }
.tour-luz { position: fixed; z-index: 91; border-radius: 12px; box-shadow: 0 0 0 4px var(--accent-2), 0 0 0 9999px rgba(7, 18, 38, .55); transition: all .35s ease; pointer-events: none; }
.tour-caja { position: fixed; z-index: 92; background: var(--card); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 16px 18px; width: min(340px, calc(100vw - 32px)); transition: top .35s ease, left .35s ease; }
.tour-caja .paso { font-size: 11px; font-weight: 700; color: var(--accent-ink); text-transform: uppercase; letter-spacing: .06em; }
.tour-caja h3 { margin: 4px 0 6px; font-size: 15px; }
.tour-caja p { font-size: 13px; color: var(--ink-soft); margin-bottom: 12px; }

/* ------------------------------------------------------------ utilidades */
.hero > *:not(.lineas), .pub-marca > *:not(.lineas) { position: relative; z-index: 1; }
.resumen { display: grid; gap: 8px; font-size: 13px; }
.resumen .total { border-top: 1px dashed var(--line); padding-top: 8px; font-size: 15px; font-weight: 700; }
.item-lista { padding: 8px 0; border-bottom: 1px solid var(--line-2); font-size: 13px; }
.item-lista:last-child { border-bottom: 0; }
.kpi .valor.chico { font-size: 18px; }
a.enlace-tarjeta { color: inherit; text-decoration: none; transition: transform .2s, box-shadow .2s; }
a.enlace-tarjeta:hover { transform: translateY(-2px); text-decoration: none; }
.lista-simple { list-style: disc; padding-left: 18px; display: grid; gap: 6px; color: var(--ink-soft); font-size: 13px; }
.icono-modulo { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--line-2); color: var(--ink-soft); flex: none; }
.icono-modulo.on { background: var(--accent); color: #fff; }
input.otp-unico { font-size: 22px; letter-spacing: .4em; text-align: center; font-variant-numeric: tabular-nums; }
.check.resaltar { animation: sacudir .5s ease; border-radius: 8px; box-shadow: 0 0 0 2px var(--warn); }
@keyframes sacudir { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.pie-sitio { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 40px; padding: 24px 0; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-soft); }
.pie-sitio nav { display: flex; gap: 14px; flex-wrap: wrap; }
.buscar input { min-width: 240px; }
.acciones-fila { justify-content: flex-end; }
.ancho-codigo { max-width: 260px; }
.ancho-medio { max-width: 220px; }
.ancho-medio-min { min-width: 220px; }
.detalle-auditoria { max-width: 320px; }

/* ---------------------------------------------------- comprobantes y SRI */
.filtros { display: flex; flex-wrap: wrap; gap: 0 14px; align-items: flex-end; padding: 14px 18px; }
.filtros .campo { margin-bottom: 0; min-width: 150px; }
.ancho-buscar { flex: 1; min-width: 220px !important; }
.ancho-observacion { min-width: 260px; }
.flujo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 12px; position: relative; }
.flujo::before { content: ""; position: absolute; left: 6%; right: 6%; top: 28px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--line)); background-size: 200% 100%; animation: corre 2.4s linear infinite; }
@keyframes corre { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.paso-flujo { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.paso-flujo .cifra { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-size: 19px; font-weight: 800; background: var(--card); border: 3px solid var(--line); font-variant-numeric: tabular-nums; }
.paso-flujo.ok .cifra { border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 6px rgba(14, 159, 110, .12); }
.paso-flujo.bad .cifra { border-color: var(--bad); color: var(--bad-ink); }
.paso-flujo.info .cifra { border-color: var(--info); color: var(--info-ink); }
.paso-flujo small { font-size: 12px; color: var(--ink-soft); }
.drop.compacto { padding: 12px; flex-direction: row; gap: 10px; flex-wrap: wrap; }
.quiebre { word-break: break-all; }
.servicios-sri { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; }
.check.servicio span { display: flex; flex-direction: column; }
.check.servicio small { color: var(--ink-soft); font-size: 12px; }
.documento-sri { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-top: 10px; background: var(--card); }
.documento-sri.sin-leer { border-color: var(--warn); box-shadow: inset 4px 0 0 var(--warn); }
.datos-sri { display: grid; grid-template-columns: minmax(120px, 30%) 1fr; gap: 4px 12px; margin-top: 8px; font-size: 12.5px; }
.datos-sri dt { color: var(--ink-soft); text-transform: capitalize; }
.datos-sri dd { margin: 0; white-space: pre-wrap; }
details.plegable > summary { list-style: none; cursor: pointer; }
details.plegable > summary::-webkit-details-marker { display: none; }
details.plegable > summary h2 { display: inline-flex; align-items: center; gap: 8px; }
details.plegable > summary::after { content: "Mostrar"; float: right; font-size: 12.5px; font-weight: 600; color: var(--accent-ink); }
details.plegable[open] > summary::after { content: "Ocultar"; }
.legal ul.alcance li[hidden] { display: none; }
fieldset.sin-borde { border: 0; padding: 0; margin: 0; min-width: 0; }
.logo-caja { border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
/* Correo para enviar documentos (Mi empresa) */
.canales-correo { margin-top: 12px; }
.canal-correo { border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; background: var(--card); }
.canal-correo p { margin: 0; }
.canal-correo form { width: 100%; }
.canal-correo .check { font-size: 12.5px; }
details.plegable > summary h3 { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
td.nowrap { white-space: nowrap; }
td.partir, .celda-resultado { overflow-wrap: anywhere; }
.celda-resultado { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; max-width: 360px; }
@media (max-width: 640px) { .celda-resultado { align-items: flex-end; text-align: right; max-width: none; } td.partir { min-width: 0; } }
.logo-vista { height: 110px; border-radius: 10px; display: grid; place-items: center; background: repeating-conic-gradient(#F3F6FA 0% 25%, #fff 0% 50%) 50% / 16px 16px; overflow: hidden; }
.logo-caja.oscuro .logo-vista { background: var(--marca); }
.logo-vista img { max-width: 90%; max-height: 90px; object-fit: contain; }
.selector-empresa .logo-cliente { display: block; max-height: 34px; max-width: 150px; object-fit: contain; margin-bottom: 8px; }
.selector-empresa .logo-cliente.con-fondo { background: #fff; padding: 4px 8px; border-radius: 8px; max-height: 42px; }
.filtros .campo:last-child { min-width: 0; }
.nav a .contador { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--warn); color: #0B1B33; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; }
@media (max-width: 780px) { .flujo { grid-template-columns: repeat(2, minmax(0, 1fr)); } .flujo::before { display: none; } .servicios-sri { grid-template-columns: minmax(0, 1fr); } .ancho-observacion { min-width: 0; width: 100%; } }

/* ----------------------------------------------------------- impresión */
@media print { .side, .barra .chips, .toasts, .menu-movil { display: none !important; } .app { display: block; } main.contenido { padding: 0; } .card { box-shadow: none; } }

/* -------------------------------------------------------- responsive */
@media (max-width: 1180px) { .planes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mods { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 980px) { .g21, .g2, .g3 { grid-template-columns: minmax(0, 1fr); } .pub { grid-template-columns: minmax(0, 1fr); } .pub-marca { padding: 28px 24px; } .pub-marca h2 { margin-top: 24px; font-size: 24px; } .pub-marca ul, .pub-marca .pie, .lineas { display: none; } .beneficios { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 780px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; inset: 0 auto 0 0; width: 272px; z-index: 70; transform: translateX(-105%); transition: transform .3s ease; }
  body.menu-abierto .side { transform: none; box-shadow: var(--shadow-lg); }
  .btn.menu-movil, .menu-movil { display: inline-flex; }
  main.contenido { padding: 16px 16px 48px; }
  .planes, .g4, .mods, .form-grid { grid-template-columns: minmax(0, 1fr); }
  .ruta .estaciones { grid-template-columns: repeat(3, 1fr); row-gap: 20px; }
  .ruta .via, .ruta .avance { display: none; }
  .hero { padding: 32px 22px; }
  .hero h1 { font-size: 28px; }
  .otp input { width: 42px; height: 50px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ------------------------------------------------------- pluses y grupo empresarial */
.nav a .etq-plus { margin-left: auto; }
.etq-plus { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: rgba(20, 195, 142, .16); color: var(--accent-2); letter-spacing: .05em; text-transform: uppercase; }
.pluses { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.plus { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; background: var(--card); }
.plus.activo { border-color: var(--accent-line); box-shadow: 0 8px 28px rgba(14, 159, 110, .12); }
.plus h3 { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; }
.precio-plus b { font-size: 18px; font-weight: 750; font-variant-numeric: tabular-nums; }
.pluses-tira { margin-top: 18px; border: 1px dashed var(--accent-line); border-radius: var(--radius); padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; background: var(--accent-soft); }
.pluses-tira .etq-plus { align-self: flex-start; background: var(--accent); color: #fff; }
.plus-linea { display: grid; grid-template-columns: minmax(140px, auto) minmax(0, 1fr) auto; gap: 4px 16px; align-items: baseline; font-size: 13px; }
.plus-linea .precio-plus b { font-size: 15px; }
.pasos-grupo { counter-reset: paso; list-style: none; display: grid; gap: 12px; margin-top: 4px; }
.pasos-grupo li { counter-increment: paso; position: relative; padding-left: 40px; font-size: 13px; color: var(--ink-soft); }
.pasos-grupo li b { color: var(--ink); display: block; }
.pasos-grupo li::before { content: counter(paso); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: var(--accent-soft); color: var(--accent-ink); }
.filtros .actualizado { margin-left: auto; align-self: center; font-size: 12px; }
.var { font-weight: 650; font-variant-numeric: tabular-nums; }
.var.sube { color: var(--accent-ink); }
.var.baja { color: var(--bad-ink); }
.alerta-texto { color: var(--info-ink); }
.chips-alerta { display: flex; flex-wrap: wrap; gap: 4px; }
.chips-alerta .chip { font-size: 11px; padding: 3px 8px; }
.tabla tfoot td { padding: 9px 10px; border-top: 1px solid var(--line); font-size: 12.5px; }
.tabla tfoot .resta td { color: var(--ink-soft); }
.tabla tfoot .total-fila td { font-weight: 750; color: var(--ink); background: var(--accent-soft); border-top: 2px solid var(--accent); }
.tabla tr.sin-hover:hover td { background: none; }
.comparativo td:first-child { min-width: 190px; }
.aceptar-aqui { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 12px; background: var(--info-soft); border-radius: var(--radius-sm); }
.aceptar-aqui .check { flex: 1 1 320px; }
.invitar .fila { align-items: flex-end; }
.campo.crece { flex: 1 1 220px; margin-bottom: 0; }
.pronto-chip { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--line-2); color: var(--ink-soft); }

/* Gráfico de líneas (SVG generado en el servidor, sin JavaScript) */
.grafico { width: 100%; height: auto; display: block; margin-top: 4px; }
.grafico .eje { stroke: var(--line); stroke-width: 1; }
.grafico .etq-y { font-size: 11px; fill: var(--ink-faint); text-anchor: end; }
.grafico .etq-x { font-size: 11px; fill: var(--ink-soft); text-anchor: middle; }
.grafico .serie { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1600; stroke-dashoffset: 1600; animation: trazar 1.4s ease forwards; }
.grafico .serie.total { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 6 5; stroke-dashoffset: 0; opacity: 0; animation: aparecer .8s ease .9s forwards; }
.grafico .punto { stroke: var(--card); stroke-width: 1.5; opacity: 0; animation: aparecer .4s ease 1.1s forwards; }
.grafico .punto.total { fill: var(--ink); }
.grafico .serie.s1 { stroke: #0E9F6E; } .grafico .punto.s1 { fill: #0E9F6E; }
.grafico .serie.s2 { stroke: #2563EB; } .grafico .punto.s2 { fill: #2563EB; }
.grafico .serie.s3 { stroke: #E8A317; } .grafico .punto.s3 { fill: #E8A317; }
.grafico .serie.s4 { stroke: #8B5CF6; } .grafico .punto.s4 { fill: #8B5CF6; }
.grafico .serie.s5 { stroke: #E5484D; } .grafico .punto.s5 { fill: #E5484D; }
.grafico .serie.s6 { stroke: #0EA5E9; } .grafico .punto.s6 { fill: #0EA5E9; }
.grafico .serie.s7 { stroke: #F97316; } .grafico .punto.s7 { fill: #F97316; }
.grafico .serie.s8 { stroke: #64748B; } .grafico .punto.s8 { fill: #64748B; }
.leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--ink-soft); }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda i { display: inline-block; width: 18px; height: 3px; border-radius: 2px; }
.ley-s1 i { background: #0E9F6E; } .ley-s2 i { background: #2563EB; } .ley-s3 i { background: #E8A317; } .ley-s4 i { background: #8B5CF6; }
.ley-s5 i { background: #E5484D; } .ley-s6 i { background: #0EA5E9; } .ley-s7 i { background: #F97316; } .ley-s8 i { background: #64748B; }
.ley-total i { background: repeating-linear-gradient(90deg, var(--ink) 0 6px, transparent 6px 10px); }
@keyframes trazar { to { stroke-dashoffset: 0; } }
@keyframes aparecer { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .grafico .serie { stroke-dashoffset: 0; stroke-dasharray: none; }
  .grafico .serie.total { stroke-dasharray: 6 5; opacity: 1; }
  .grafico .punto { opacity: 1; }
}
@media (max-width: 780px) {
  .plus-linea { grid-template-columns: minmax(0, 1fr); }
  .filtros .actualizado { margin-left: 0; }
}
.tabla td.num, .tabla th.der { white-space: nowrap; }
.tabla td.num .faint, .tabla tfoot td.num div { font-size: 11.5px; }

/* --------------------------------------------------------------- centro de ayuda */
.aviso-sistema .texto b { display: block; }
.aviso-sistema .cuando, .aviso-sistema .detalle { display: block; font-size: 12.5px; }
.aviso-sistema form { margin: 0; }
.ayuda-hero h2 { font-size: 21px; }
.buscar-ayuda { display: flex; gap: 10px; }
.buscar-ayuda input { flex: 1 1 auto; min-width: 0; height: 46px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; font-size: 15px; background: var(--campo); }
.buscar-ayuda input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(14, 159, 110, .15); }
.categorias { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.categoria { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); transition: border-color .2s, transform .2s, box-shadow .2s; }
.categoria:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow); }
.categoria.on { border-color: var(--accent); background: var(--accent-soft); }
.categoria .icono { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); flex: none; }
.categoria b { display: block; font-size: 13px; }
.categoria small { display: block; color: var(--ink-faint); font-size: 11.5px; }
.lista-fichas { display: grid; gap: 8px; }
.ficha-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); color: var(--ink); background: var(--surface-2); }
.ficha-item:hover { text-decoration: none; border-color: var(--accent); background: var(--accent-soft); }
.ficha-item .icono { color: var(--accent-ink); flex: none; }
.ficha-item .texto { flex: 1 1 auto; min-width: 0; }
.ficha-item .texto b { display: block; font-size: 13.5px; }
.ficha-item .texto small { display: block; color: var(--ink-soft); font-size: 12.5px; }
.ficha-item.compacta { padding: 9px 12px; }
.caso-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line-2); color: var(--ink); }
.caso-item:hover { text-decoration: none; }
.caso-item .texto { flex: 1 1 auto; min-width: 0; }
.caso-item .texto b { display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.caso-item .texto small { color: var(--ink-faint); font-size: 12px; }
.contacto { display: flex; flex-wrap: wrap; gap: 8px; }
.servicios-estado { display: grid; gap: 10px; }
.servicio-estado { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; }
.servicio-estado b { display: block; }
.servicio-estado small { color: var(--ink-soft); font-size: 12px; }
.punto-estado { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; flex: none; background: var(--ink-faint); }
.punto-estado.ok { background: var(--accent); box-shadow: 0 0 0 4px rgba(14, 159, 110, .15); animation: latido 2.4s ease-in-out infinite; }
.punto-estado.warn { background: var(--warn); }
.punto-estado.bad { background: var(--bad); box-shadow: 0 0 0 4px rgba(229, 72, 77, .15); }
@keyframes latido { 50% { box-shadow: 0 0 0 7px rgba(14, 159, 110, .05); } }
.pasos-ficha { counter-reset: paso; list-style: none; display: grid; gap: 12px; margin: 18px 0; }
.pasos-ficha li { counter-increment: paso; position: relative; padding-left: 40px; font-size: 14px; line-height: 1.55; }
.pasos-ficha li::before { content: counter(paso); position: absolute; left: 0; top: -1px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 800; background: var(--accent); color: #fff; }
.pasos-ficha.compacta { gap: 8px; margin: 10px 0; }
.pasos-ficha.compacta li { font-size: 13px; padding-left: 32px; }
.pasos-ficha.compacta li::before { width: 22px; height: 22px; font-size: 11.5px; }
.sirvio .fila { flex-wrap: wrap; }
.ficha-rapida { border-top: 1px solid var(--line-2); padding: 10px 0; }
.ficha-rapida > summary { font-size: 13px; }
.ficha-rapida > summary::after { content: "Ver"; }
.ficha-rapida[open] > summary::after { content: "Ocultar"; }
.contexto-caso { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--info-soft); color: var(--info-ink); font-size: 12.5px; }
.contexto-caso b { display: inline-flex; align-items: center; gap: 6px; }
/* Conversación tipo chat */
.chat { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; padding: 14px; border-radius: var(--radius); background: var(--bg); min-height: 160px; }
.burbuja { max-width: 78%; padding: 10px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; animation: entra .3s ease both; }
.burbuja.cliente { align-self: flex-end; background: var(--accent-soft); border: 1px solid var(--accent-line); border-bottom-right-radius: 4px; }
.burbuja.soporte { align-self: flex-start; background: var(--card); border: 1px solid var(--line); border-bottom-left-radius: 4px; box-shadow: 0 1px 2px rgba(11, 27, 51, .05); }
.burbuja.sistema { align-self: center; max-width: 92%; background: none; color: var(--ink-soft); font-size: 12px; text-align: center; padding: 2px 8px; }
.burbuja .autor { font-size: 12px; font-weight: 700; color: var(--ink-soft); margin-bottom: 2px; }
.burbuja .sello { display: inline-block; font-size: 9.5px; letter-spacing: .08em; padding: 1px 6px; border-radius: 999px; background: var(--marca); color: var(--accent-2); margin-right: 4px; vertical-align: 1px; }
.burbuja .mensaje { overflow-wrap: anywhere; }
.burbuja .adjunto { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12.5px; font-weight: 600; }
.burbuja .hora { font-size: 11px; color: var(--ink-faint); margin-top: 4px; text-align: right; }
@keyframes entra { from { opacity: 0; transform: translateY(6px); } }
.responder textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; resize: vertical; background: var(--campo); }
.responder textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(14, 159, 110, .15); }
.responder .fila { flex-wrap: wrap; }
.drop.adjuntar { flex-direction: row; padding: 6px 12px; border-width: 1px; border-radius: 999px; gap: 8px; font-size: 12.5px; }
.drop.adjuntar b { font-size: 12.5px; }
.estrellas { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; border: 0; padding: 0; margin: 0; }
.estrellas input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.estrellas label { cursor: pointer; color: var(--line-strong); transition: transform .15s, color .15s; }
.estrellas label:hover, .estrellas label:hover ~ label, .estrellas input:checked ~ label { color: var(--warn); }
.estrellas label:hover { transform: scale(1.12); }
.estrellas input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.estrellas .ic, .estrellas-fijas .ic { fill: currentColor; }
.estrellas-fijas { display: flex; gap: 2px; color: var(--line-strong); margin-top: 8px; }
.estrellas-fijas .on { color: var(--warn); }
/* Plan de mejora */
.mejoras { display: grid; gap: 12px; }
.mejora { border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 14px 16px; background: var(--surface-2); display: grid; gap: 8px; }
.mejora h3 { font-size: 14px; }
.mejora p { font-size: 13px; }
.respuesta-neola { padding: 8px 10px; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 8px 8px 0; color: var(--accent-ink); }
.pie-mejora { flex-wrap: wrap; gap: 8px; font-size: 12.5px; }

/* Tablas que en el celular se leen como tarjetas */
@media (max-width: 640px) {
  .tabla.responsiva thead { display: none; }
  .tabla.responsiva, .tabla.responsiva tbody, .tabla.responsiva tfoot, .tabla.responsiva td { display: block; width: 100%; }
  .tabla.responsiva tr { display: flex; flex-direction: column; width: 100%; }
  .tabla.responsiva td.titulo-celda { order: -1; }
  .tabla.responsiva tr { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 12px; margin-bottom: 10px; background: var(--card); }
  .tabla.responsiva tr:hover td { background: none; }
  .tabla.responsiva td, .tabla.responsiva tfoot td { border: 0; padding: 5px 0; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; text-align: right; white-space: normal; }
  .tabla.responsiva td::before { content: attr(data-etiqueta); font-size: 11px; font-weight: 650; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; text-align: left; flex: none; }
  .tabla.responsiva td:not([data-etiqueta])::before { content: none; }
  .tabla.responsiva td:empty { display: none; }
  .tabla.responsiva td.titulo-celda { display: block; text-align: left; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--line-2); }
  .tabla.responsiva td.titulo-celda::before { content: none; }
  .tabla.responsiva tfoot .total-fila { background: var(--accent-soft); border-color: var(--accent-line); }
  .tabla.responsiva tfoot .total-fila td { background: none; border-top: 0; }
  .comparativo td:first-child { min-width: 0; }
  .buscar-ayuda { flex-direction: column; }
  .burbuja { max-width: 92%; }
  .categorias { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .categoria { padding: 10px; }
  .categoria .icono { width: 28px; height: 28px; }
}
.bloque:not(.btn) { display: block; }

/* ------------------------------------------------------- usuarios y roles */
.pestanas { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.pestanas a { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 10px 10px 0 0; color: var(--ink-soft); font-weight: 600; font-size: 13.5px; border: 1px solid transparent; border-bottom: 0; margin-bottom: -1px; }
.pestanas a:hover { color: var(--ink); text-decoration: none; background: var(--line-2); }
.pestanas a.on { color: var(--ink); background: var(--card); border-color: var(--line); }
details.menu-acciones { position: relative; display: inline-block; text-align: left; }
details.menu-acciones > summary { list-style: none; }
details.menu-acciones > summary::-webkit-details-marker { display: none; }
.menu-acciones-caja { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 290px; max-width: calc(100vw - 32px); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: 10px; display: grid; gap: 8px; }
.menu-acciones-caja form { display: grid; gap: 6px; }
.menu-acciones-caja label { font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.menu-acciones-caja textarea { width: 100%; font: inherit; font-size: 13px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; resize: vertical; }
.menu-acciones-caja .suspender { padding-top: 8px; border-top: 1px solid var(--line-2); }
.tabla-personas td { vertical-align: top; }
.tabla-personas select { max-width: 210px; }
.rol-tarjeta { display: grid; gap: 8px; align-content: start; }
.rol-tarjeta.propio { border-color: var(--info-line); }
.permiso-area { margin-top: 8px; }
.permiso-area .etq { font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.lista-check { list-style: none; display: grid; gap: 3px; margin-top: 4px; }
.lista-check li { position: relative; padding-left: 18px; font-size: 13px; }
.lista-check li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 9px; height: 5px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
fieldset.permiso-grupo { border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 8px 14px 6px; margin-top: 12px; min-width: 0; }
fieldset.permiso-grupo legend { font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); padding: 0 6px; }
.check.bloqueado { opacity: .55; cursor: not-allowed; }
.matriz-permisos th, .matriz-permisos td { white-space: nowrap; }
.matriz-permisos td:first-child { white-space: normal; min-width: 260px; }
.matriz-permisos .centro { text-align: center; }
.matriz-permisos .si { color: var(--accent); }
.matriz-permisos .no { color: var(--ink-faint); }
.matriz-permisos .separador-fila th { background: var(--line-2); text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.dev-codigo .dev-enlace { word-break: break-all; font-size: 11.5px; }
@media (max-width: 640px) {
  .pestanas a { flex: 1 1 auto; justify-content: center; padding: 9px 10px; }
  .tabla-personas td[data-etiqueta="Acciones"] { justify-content: flex-end; }
  .tabla-personas td[data-etiqueta="Acciones"]::before { content: none; }
  .tabla-personas select { max-width: 100%; }
  .menu-acciones-caja { position: static; width: 100%; max-width: none; margin-top: 6px; box-shadow: none; }
  details.menu-acciones { display: block; width: 100%; }
  details.menu-acciones > summary { width: 100%; justify-content: center; }
}

/* ------------------------------------------------- auditoría: ¿qué pasó? */
.dia-auditoria { margin: 18px 0 6px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.dia-auditoria:first-of-type { margin-top: 0; }
details.evento-auditoria { border: 1px solid var(--line-2); border-radius: var(--radius-sm); margin: 6px 0; background: var(--card); transition: border-color .15s ease, box-shadow .15s ease; }
details.evento-auditoria[open] { border-color: var(--line); box-shadow: var(--shadow); }
details.evento-auditoria > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; padding: 9px 12px; }
details.evento-auditoria > summary::-webkit-details-marker { display: none; }
details.evento-auditoria > summary:hover { background: var(--line-2); border-radius: var(--radius-sm); }
details.evento-auditoria .hora { color: var(--ink-soft); padding-top: 1px; }
details.evento-auditoria .que .chip { margin-left: 6px; font-size: 11px; padding: 1px 8px; }
.recorte { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
details.evento-auditoria[open] .recorte { display: none; }
.detalle-evento { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 4px 12px; padding: 4px 12px 12px 74px; font-size: 13px; animation: desplegar .2s ease; }
.detalle-evento dt { color: var(--ink-soft); font-weight: 600; font-size: 12px; }
.detalle-evento dd { margin: 0; word-break: break-word; }
.recorte-mono { word-break: break-all; font-size: 11.5px; }
.opcion-paquete { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; margin-top: 8px; cursor: pointer; }
.opcion-paquete:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.opcion-paquete input { margin-top: 3px; accent-color: var(--accent); }
.opcion-paquete small { display: block; color: var(--ink-soft); font-size: 12.5px; }
@keyframes desplegar { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
  .detalle-evento { grid-template-columns: minmax(0, 1fr); padding: 4px 12px 12px; }
  .detalle-evento dt { margin-top: 6px; }
}

/* ------------------------------------------------------------- bancos */
.cuentas-banco { display: grid; gap: 8px; }
.cuenta-banco { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); color: inherit; text-decoration: none !important; transition: border-color .2s, box-shadow .2s, transform .2s; }
.cuenta-banco:hover { border-color: var(--line-strong); box-shadow: var(--shadow); transform: translateY(-1px); }
.cuenta-banco.inactiva { opacity: .6; }
.icono-banco { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); flex: none; }
.cuenta-banco .datos { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cuenta-banco .datos b { font-size: 13.5px; }
.cuenta-banco .datos small { font-size: 12px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cuenta-banco .datos small.faint { color: var(--ink-faint); }
.cuenta-banco .saldo { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 15px; font-weight: 700; white-space: nowrap; }
.negativo { color: var(--bad-ink); }
.positivo { color: var(--accent-ink); }
.ancho-formulario { max-width: 760px; }
a.enlace-bloque { display: block; color: inherit; text-decoration: none !important; border-radius: 8px; padding: 8px; margin: 0 -8px; transition: background .15s; }
a.enlace-bloque:hover { background: var(--line-2); }
a.enlace-bloque > .faint { display: block; font-size: 12px; margin-top: 2px; }
h2.archivo-carga { display: flex; align-items: center; gap: 8px; overflow-wrap: anywhere; }
h2.archivo-carga .ic { color: var(--ink-soft); }
.formato-banco { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); }
.cuadre-saldos { display: grid; gap: 8px; }
.linea-cuadre { display: grid; grid-template-columns: 104px minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); }
.linea-cuadre.cuadra { border-color: var(--accent-line); background: var(--accent-soft); }
.linea-cuadre.no-cuadra { border-color: var(--bad-line); background: var(--bad-soft); }
.linea-cuadre .nombre { font-size: 13px; font-weight: 650; }
.linea-cuadre .valor { display: flex; flex-direction: column; min-width: 0; }
.linea-cuadre .valor small { font-size: 11px; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; }
.linea-cuadre .valor b { font-size: 15px; }
.banner.alerta-banco { margin: 8px 0 0; }
.movimientos-banco tr.mov-duplicado td, .movimientos-banco tr.mov-anterior td, .movimientos-banco tr.mov-anulado td { color: var(--ink-faint); }
.movimientos-banco tr.mov-anulado td b { text-decoration: line-through; }
.btn.cargando { cursor: progress; }
.btn.cargando:disabled { opacity: .85; }
.btn.cargando .ic { display: none; }
.btn.cargando::before { content: ""; width: 14px; height: 14px; flex: none; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: girar .8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
@media (max-width: 640px) {
  .linea-cuadre { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .linea-cuadre .nombre, .linea-cuadre .resultado { grid-column: 1 / -1; }
  .cuenta-banco { flex-wrap: wrap; }
  .cuenta-banco .saldo { margin-left: 50px; flex-direction: row; align-items: center; }
}

/* ---------------------------------------------------------------- demostraciones */
.fila.centro { justify-content: center; }
.banner.demo { background: var(--info-soft); color: var(--info-ink); border: 1px dashed var(--info-line); }
.banner.demo .texto { flex: 1 1 320px; }
.etq-demo { display: block; width: fit-content; margin: 4px 0 3px; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: rgba(147, 197, 253, .18); color: #BFDBFE; }
.card.tarjeta-demo { border-style: dashed; }
.demo-invitacion h2 { display: flex; align-items: center; gap: 8px; }
.demo-invitacion form { max-width: 560px; }

/* ---------------------------------------------------------------- uso de la información */
.preferencias .check small { display: block; margin-top: 2px; }
.lista-tratamientos { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
details.tratamiento { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; background: var(--card); }
details.tratamiento[open] { box-shadow: 0 4px 16px rgba(11, 27, 51, .06); }
details.tratamiento > summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; list-style: none; }
details.tratamiento > summary::-webkit-details-marker { display: none; }
details.tratamiento > summary .chips { display: flex; flex-wrap: wrap; gap: 6px; }
details.tratamiento > p { margin: 10px 0 6px; font-size: 13.5px; }
.datos-tratamiento { display: grid; grid-template-columns: 150px 1fr; gap: 6px 14px; margin: 8px 0 0; font-size: 13px; }
.datos-tratamiento dt { color: var(--ink-soft); font-weight: 600; }
.datos-tratamiento dd { margin: 0; }
.datos-tratamiento .lista-simple { margin: 0; }
details.ponderacion { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); }
@media (max-width: 640px) {
    .datos-tratamiento { grid-template-columns: 1fr; gap: 2px; }
    .datos-tratamiento dd { margin-bottom: 8px; }
}

/* ---------------------------------------------------------------- reuniones con NEOLA */
.agenda-reunion { margin: 4px 0 8px; }
.horarios { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; max-height: 420px; overflow-y: auto; padding-right: 4px; }
.dia-horarios { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px 10px; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.dia-horarios legend { font-size: 12.5px; font-weight: 700; padding: 0 4px; }
.horario { position: relative; }
.horario input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.horario span { display: inline-block; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--card); }
.horario input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.horario input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.asistentes { display: flex; flex-direction: column; gap: 6px; }
.asistente input { flex: 1 1 200px; }
.item-reunion { padding: 10px 0; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.item-reunion:last-child { border-bottom: 0; }
.propuesta-reunion { padding: 10px 0; border-bottom: 1px solid var(--line); align-items: flex-start; }
.estrellas .check { padding: 2px 8px 2px 0; }


/* ---------------------------------------------------------------- consola de NEOLA (personal) */
body.consola { background: var(--bg); }
.consola-cab { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 10px 24px; background: var(--marca); color: #fff; }
.consola-cab .marca { display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; }
.consola-cab .marca .producto { font-weight: 700; font-size: 14px; letter-spacing: .02em; opacity: .9; }
.consola-nav { display: flex; flex-wrap: wrap; gap: 4px; flex: 1 1 auto; }
.consola-nav a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; color: rgba(255, 255, 255, .78); text-decoration: none; font-size: 13.5px; font-weight: 600; }
.consola-nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.consola-nav a.on { background: rgba(20, 195, 142, .2); color: #fff; }
.consola-persona { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.consola-persona .nombre { opacity: .85; }
.btn.claro { background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .24); }
.btn.claro:hover { background: rgba(255, 255, 255, .18); }
.consola-contenido { max-width: 1180px; margin: 0 auto; padding: 24px; }
.pie-consola { margin-top: 28px; font-size: 12px; text-align: center; }

.leyenda-horas { display: flex; flex-wrap: wrap; gap: 6px 10px; list-style: none; padding: 0; margin: 10px 0 14px; }
.leyenda-horas .hora { min-width: 0; padding: 3px 10px; font-size: 11.5px; }
.motivo-horas { max-width: 520px; }
.dia-anfitrion { padding: 10px 0; border-top: 1px solid var(--line-2); scroll-margin-top: 80px; }
.dia-anfitrion h3 { font-size: 13px; margin: 0 0 8px; }
.horas-anfitrion { display: flex; flex-wrap: wrap; gap: 6px; }
.hora { display: inline-flex; align-items: center; justify-content: center; min-width: 62px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: 13px; font-weight: 650; line-height: 1.2; font-variant-numeric: tabular-nums; text-decoration: none; }
button.hora { cursor: pointer; }
.hora.libre { border-color: var(--accent); color: var(--accent-ink); }
button.hora.libre:hover { background: var(--accent-soft); }
.hora.libre.pronto { border-style: dashed; opacity: .75; }
.hora.propio { background: var(--warn-soft); border-color: transparent; color: var(--warn-ink); }
button.hora.propio:hover { text-decoration: line-through; }
.hora.calendario { background: var(--line-2); border-color: transparent; color: var(--ink-soft); }
.hora.neola { background: var(--line-2); border-color: transparent; color: var(--ink-soft); text-decoration: line-through; }
.hora.reunion { background: var(--info-soft); border-color: transparent; color: var(--info); }
.hora.reunion.choque { background: var(--bad-soft); color: var(--bad-ink); box-shadow: inset 0 0 0 1px var(--bad); }
button.hora:focus-visible, a.hora:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lista-reuniones-anfitrion { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.lista-reuniones-anfitrion > li { padding: 12px 0; border-bottom: 1px solid var(--line-2); scroll-margin-top: 80px; }
.lista-reuniones-anfitrion > li:last-child { border-bottom: 0; }
.lista-reuniones-anfitrion > li.choca { border-left: 3px solid var(--bad); padding-left: 10px; }
.lista-reuniones-anfitrion > li:target { background: var(--info-soft); border-radius: 8px; padding-left: 10px; padding-right: 10px; }
.aviso-choque { display: flex; align-items: center; gap: 6px; margin: 6px 0; color: var(--bad-ink); font-size: 13px; font-weight: 600; }
.pasar-reunion { gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.pasar-reunion select { flex: 1 1 200px; }
.rango-bloqueo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 12px; }
.lista-bloqueos { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; gap: 8px; }
.lista-bloqueos li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; }
.estado-calendario { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; }
.estado-calendario.ok { background: var(--accent-soft); color: var(--accent-ink); }
.estado-calendario.error { background: var(--bad-soft); color: var(--bad-ink); }
.como-calendario > summary, .definiciones > summary { cursor: pointer; font-weight: 600; font-size: 13.5px; }
.como-calendario .lista-simple li { margin-bottom: 6px; font-size: 13px; }

.periodos { margin-bottom: 16px; }
.periodos .chip { color: inherit; text-decoration: none; }
.servicio-monitoreo { display: block; color: inherit; text-decoration: none; transition: box-shadow .15s ease, border-color .15s ease; }
.servicio-monitoreo:hover { box-shadow: var(--shadow); text-decoration: none; }
.servicio-monitoreo.elegido { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.valor-grande { margin: 8px 0 2px; font-size: 30px; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.valor-grande.ok, .indicadores dd.ok { color: var(--accent-ink); }
.valor-grande.warn, .indicadores dd.warn { color: var(--warn-ink); }
.valor-grande.bad, .indicadores dd.bad { color: var(--bad-ink); }
.indicadores { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0; }
.indicadores > div { padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 10px; }
.indicadores dt { font-size: 11.5px; font-weight: 650; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; }
.indicadores dd { margin: 4px 0 0; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.barras-dias { display: flex; align-items: flex-end; gap: 3px; height: 90px; padding: 6px 0 0; border-bottom: 1px solid var(--line); }
.barra-dia { flex: 1 1 0; min-width: 4px; height: var(--alto, 4%); border-radius: 3px 3px 0 0; background: var(--line); }
.barra-dia.ok { background: var(--accent); }
.barra-dia.warn { background: var(--warn); }
.barra-dia.bad { background: var(--bad); }
.mapa-horas { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 3px; }
.mapa-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; max-width: 420px; }
.celda-hora { display: flex; align-items: center; justify-content: center; height: 34px; border-radius: 6px; background: var(--line-2); color: var(--ink-soft); font-size: 11px; font-weight: 650; font-variant-numeric: tabular-nums; }
.celda-hora.ok { background: var(--accent-soft); color: var(--accent-ink); }
.celda-hora.warn { background: var(--warn-soft); color: var(--warn-ink); }
.celda-hora.bad { background: var(--bad-soft); color: var(--bad-ink); }
.lista-estado { list-style: none; padding: 0; margin: 0; }
.lista-estado li { flex-wrap: wrap; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-2); }
.lista-estado li:last-child { border-bottom: 0; }
@media (max-width: 980px) { .indicadores { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rango-bloqueo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .consola-cab { gap: 10px; padding: 10px 16px; }
  .consola-contenido { padding: 16px; }
  .indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mapa-horas { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .hora { min-width: 56px; }
}

/* ---------------------------------------------------------------- temas por persona
   El tema va en <html data-tema="claro|oscuro|automatico|contraste"> desde el servidor (sin parpadeo).
   «Automático» sigue al sistema. Las superficies de la marca (barra lateral, avisos, botón oscuro) son
   oscuras en todos los temas; lo demás sale de las variables de :root. */
:root[data-tema="oscuro"] {
  --ink: #E6EDF7;
  --ink-2: #C9D4E5;
  --ink-soft: #9FB0C8;
  --ink-faint: #7587A1;
  --line: #24324A;
  --line-2: #1B273B;
  --line-input: #34445F;
  --line-strong: #3E4F6C;
  --bg: #09111F;
  --card: #0F1A2D;
  --campo: #0B1526;
  --surface-2: #0D1729;
  --hover: #17243A;
  --accent: #12A877;
  --accent-2: #2DD4A0;
  --accent-hover: #0E9F6E;
  --accent-soft: rgba(20, 195, 142, .13);
  --accent-ink: #5EE0B4;
  --accent-line: rgba(45, 212, 160, .38);
  --info: #60A5FA;
  --info-soft: rgba(96, 165, 250, .13);
  --info-ink: #9CC5FD;
  --info-line: rgba(96, 165, 250, .4);
  --warn: #F2B84B;
  --warn-soft: rgba(242, 184, 75, .13);
  --warn-ink: #F6CB76;
  --warn-line: rgba(242, 184, 75, .4);
  --bad: #F2696D;
  --bad-soft: rgba(242, 105, 109, .13);
  --bad-ink: #FCA5A7;
  --bad-line: rgba(242, 105, 109, .42);
  --marca: #13233F;
  --marca-2: #0C182C;
  --marca-fondo: #060E1B;
  --marca-brillo: #1E3D6E;
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .3);
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, .55);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root[data-tema="automatico"] {
    --ink: #E6EDF7;
    --ink-2: #C9D4E5;
    --ink-soft: #9FB0C8;
    --ink-faint: #7587A1;
    --line: #24324A;
    --line-2: #1B273B;
    --line-input: #34445F;
    --line-strong: #3E4F6C;
    --bg: #09111F;
    --card: #0F1A2D;
    --campo: #0B1526;
    --surface-2: #0D1729;
    --hover: #17243A;
    --accent: #12A877;
    --accent-2: #2DD4A0;
    --accent-hover: #0E9F6E;
    --accent-soft: rgba(20, 195, 142, .13);
    --accent-ink: #5EE0B4;
    --accent-line: rgba(45, 212, 160, .38);
    --info: #60A5FA;
    --info-soft: rgba(96, 165, 250, .13);
    --info-ink: #9CC5FD;
    --info-line: rgba(96, 165, 250, .4);
    --warn: #F2B84B;
    --warn-soft: rgba(242, 184, 75, .13);
    --warn-ink: #F6CB76;
    --warn-line: rgba(242, 184, 75, .4);
    --bad: #F2696D;
    --bad-soft: rgba(242, 105, 109, .13);
    --bad-ink: #FCA5A7;
    --bad-line: rgba(242, 105, 109, .42);
    --marca: #13233F;
    --marca-2: #0C182C;
    --marca-fondo: #060E1B;
    --marca-brillo: #1E3D6E;
    --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .3);
    --shadow-lg: 0 18px 50px rgba(0, 0, 0, .55);
    color-scheme: dark;
  }
}

/* Alto contraste: texto negro sobre blanco, bordes marcados, enlaces subrayados y foco grueso (WCAG AAA) */
:root[data-tema="contraste"] {
  --ink: #000000;
  --ink-2: #000000;
  --ink-soft: #1F2937;
  --ink-faint: #374151;
  --line: #4B5563;
  --line-2: #6B7280;
  --line-input: #111827;
  --line-strong: #111827;
  --bg: #FFFFFF;
  --card: #FFFFFF;
  --campo: #FFFFFF;
  --surface-2: #F3F4F6;
  --hover: #E5E7EB;
  --accent: #005A3C;
  --accent-2: #00704B;
  --accent-hover: #00452E;
  --accent-soft: #DDF3E9;
  --accent-ink: #00452E;
  --accent-line: #005A3C;
  --info: #0037A6;
  --info-soft: #E2EAFD;
  --info-ink: #002A80;
  --info-line: #0037A6;
  --warn: #8A5A00;
  --warn-soft: #FFF0D1;
  --warn-ink: #4D3200;
  --warn-line: #8A5A00;
  --bad: #A3001B;
  --bad-soft: #FDE4E8;
  --bad-ink: #7A0014;
  --bad-line: #A3001B;
  --marca: #000000;
  --marca-2: #000000;
  --marca-fondo: #000000;
  --marca-brillo: #000000;
  --marca-texto: #FFFFFF;
  --marca-tenue: #E5E7EB;
  --marca-apagado: #D1D5DB;
  --shadow: none;
  --shadow-lg: 0 0 0 2px #000000;
  color-scheme: light;
}
:root[data-tema="contraste"] a { text-decoration: underline; }
:root[data-tema="contraste"] a.btn, :root[data-tema="contraste"] .nav a, :root[data-tema="contraste"] .consola-nav a { text-decoration: none; }
:root[data-tema="contraste"] .card, :root[data-tema="contraste"] .chip, :root[data-tema="contraste"] .banner { border: 2px solid var(--line); }
:root[data-tema="contraste"] .btn { border: 2px solid var(--ink); }
:root[data-tema="contraste"] .btn.ghost { border-color: var(--ink); }
:root[data-tema="contraste"] .nav a.on { background: #FFFFFF; color: #000000; box-shadow: none; }
:root[data-tema="contraste"] :focus-visible { outline: 3px solid #000000 !important; outline-offset: 2px; box-shadow: 0 0 0 5px #FFD400 !important; }
:root[data-tema="contraste"] .faint, :root[data-tema="contraste"] .muted { color: var(--ink-soft); }
/* Sobre las superficies negras de la marca, el verde va en blanco para no perder contraste */
:root[data-tema="contraste"] .side .marca .producto, :root[data-tema="contraste"] .pub-marca .marca .producto, :root[data-tema="contraste"] .consola-cab .marca .producto { color: #FFFFFF; opacity: 1; }
:root[data-tema="contraste"] .side .etq-plus { background: transparent; color: #FFFFFF; border: 1px solid #FFFFFF; }
:root[data-tema="contraste"] .landing-nav .producto { color: var(--accent); }

/* Selector de tema (Privacidad y seguridad) */
.temas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tema-opcion { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); cursor: pointer; }
.tema-opcion input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.tema-opcion:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.tema-opcion:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.tema-opcion b { font-size: 13px; }
.tema-opcion small { color: var(--ink-soft); font-size: 12px; }
.muestra-tema { display: grid; grid-template-columns: 26% 1fr; height: 58px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.muestra-tema i { background: #0B1B33; }
.muestra-tema span { display: flex; flex-direction: column; gap: 5px; padding: 8px; background: #F5F7FB; }
.muestra-tema span::before, .muestra-tema span::after { content: ""; display: block; height: 7px; border-radius: 4px; background: #E3E8F0; }
.muestra-tema span::after { width: 60%; background: #0E9F6E; }
.muestra-tema.oscuro span { background: #0F1A2D; }
.muestra-tema.oscuro span::before { background: #24324A; }
.muestra-tema.automatico span { background: linear-gradient(135deg, #F5F7FB 50%, #0F1A2D 50%); }
.muestra-tema.contraste i { background: #000; }
.muestra-tema.contraste span { background: #FFF; }
.muestra-tema.contraste span::before { background: #000; }
.muestra-tema.contraste span::after { background: #005A3C; }
@media (max-width: 780px) { .temas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* El logo oscuro del sitio se vuelve blanco en los temas oscuros */
:root[data-tema="oscuro"] .logo-adaptable { filter: brightness(0) invert(1); }
@media (prefers-color-scheme: dark) { :root[data-tema="automatico"] .logo-adaptable { filter: brightness(0) invert(1); } }

/* ---------------------------------------------------------------- búsqueda rápida (Ctrl+K) */
.buscar-abrir { gap: 8px; margin-left: auto; }
.buscar-abrir kbd, .buscador kbd { padding: 1px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); color: var(--ink-soft); font: 600 11px var(--mono); }
.barra .buscar-abrir + .chips { margin-left: 0; }
.buscador { position: fixed; inset: 0; z-index: 95; display: flex; align-items: flex-start; justify-content: center; padding: 10vh 16px 16px; background: rgba(7, 18, 38, .5); animation: entra .2s ease both; }
.buscador-caja { display: flex; flex-direction: column; width: min(640px, 100%); max-height: 76vh; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--card); box-shadow: var(--shadow-lg); }
.buscador-campo { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--ink-soft); }
.buscador-campo input[type=search] { flex: 1 1 auto; min-width: 0; padding: 8px 0; border: 0; border-radius: 0; background: transparent; color: var(--ink); font-size: 16px; box-shadow: none; }
.buscador-campo input[type=search]:focus { box-shadow: none; }
.buscador-cerrar { flex: none; }
.buscador-resultados { overflow-y: auto; padding: 4px 8px 10px; }
.buscador.buscando .buscador-resultados { opacity: .6; }
.buscador-grupo { display: flex; align-items: center; gap: 6px; padding: 12px 8px 4px; color: var(--ink-soft); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.buscador-grupo .ic-grupo { display: inline-flex; }
.buscador-item { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.buscador-item b { font-weight: 600; font-size: 14px; }
.buscador-item small { color: var(--ink-soft); font-size: 12px; }
.buscador-item:hover, .buscador-item[aria-selected="true"] { background: var(--accent-soft); text-decoration: none; }
.buscador-item[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--accent); }
.buscador-vacio { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 12px; color: var(--ink-soft); text-align: center; font-size: 13px; }
.buscador-vacio .btn[aria-selected="true"] { outline: 2px solid var(--accent); outline-offset: 2px; }
.buscador-pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 12px; }
body.con-buscador { overflow: hidden; }
@media (max-width: 640px) {
  .buscador { padding: 0; }
  .buscador-caja { width: 100%; height: 100%; max-height: none; border: 0; border-radius: 0; }
  .buscar-abrir kbd, .buscador-pie .atajos { display: none; }
}