/* =====================================================================
   Hub de Comunicaciones · Trade & Law College
   Sistema de diseño: tokens, reset, layout y componentes.
   Las vistas agregan sus estilos en css/vistas.css (no aquí).
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Marca (SPEC §8, al pie de la letra) */
  --tlc-navy: #1C2B5E;
  --tlc-blue: #2E6DB4;
  --tlc-sky: #5DA9E9;
  --tlc-gold: #F0B323;
  --tlc-beige: #C9A66B;
  --tlc-cream: #F1E6D0;
  --tlc-white: #FFFFFF;
  --tlc-gray: #6B7280;
  --tlc-border: #E7DCC3;

  /* Derivados */
  --tlc-navy-2: #26386F;          /* hover sobre navy */
  --tlc-navy-3: #142048;          /* navy profundo para degradados */
  --tlc-navy-claro: #E8ECF6;
  --tlc-blue-claro: #E6EFF9;
  --tlc-sky-claro: #EAF4FD;
  --tlc-gold-osc: #8A6206;        /* dorado legible sobre claro (AA) */
  --tlc-gold-claro: #FDF3D8;
  --tlc-beige-osc: #6E5428;
  --tlc-cream-2: #F8F2E5;
  --tlc-fondo: #FAF7F1;           /* fondo de página */
  --tlc-papel: #FFFFFF;           /* fondo de tarjetas */
  --tlc-border-2: #EFE7D6;        /* divisores internos */

  /* Texto */
  --tlc-tinta: #1C2B5E;
  --tlc-tinta-2: #3E4A6B;
  --tlc-tinta-3: #656C79;         /* texto secundario: 5.3:1 sobre blanco, 4.6:1 sobre #F4EFE4 (AA) */
  --tlc-tinta-4: #7A8190;         /* SOLO iconos decorativos, bordes y puntos; nunca para texto informativo */

  /* Semánticos */
  --tlc-exito: #2A7550;            /* 4.9:1 sobre --tlc-exito-claro (AA) */
  --tlc-exito-claro: #E5F3EB;
  --tlc-peligro: #B83B36;          /* 4.8:1 sobre --tlc-peligro-claro (AA) */
  --tlc-peligro-claro: #FBE9E8;
  --tlc-caliente: #D9534F;
  --tlc-caliente-claro: #FBE9E8;
  --tlc-alerta: #B7791F;
  --tlc-alerta-claro: #FDF3D8;

  /* Tipografía */
  --tlc-sans: 'Open Sans', 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tlc-titulo: 'Nunito', 'Open Sans', system-ui, sans-serif;
  --tlc-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Forma */
  --radio-xs: 6px;
  --radio-s: 10px;
  --radio: 16px;
  --radio-l: 22px;
  --sombra-s: 0 1px 2px rgba(28, 43, 94, .05);
  --sombra: 0 1px 2px rgba(28, 43, 94, .04), 0 4px 16px -8px rgba(28, 43, 94, .10);
  --sombra-m: 0 10px 30px -12px rgba(28, 43, 94, .22);
  --sombra-l: 0 24px 60px -20px rgba(20, 32, 72, .38);
  --anillo: 0 0 0 3px rgba(46, 109, 180, .28);

  /* Movimiento */
  --t-rapida: 120ms;
  --t: 180ms;
  --curva: cubic-bezier(.2, .8, .2, 1);

  /* Layout */
  --ancho-lateral: 264px;
  --alto-barra: 76px;

  /* Cinta y franja de marca */
  --cinta: linear-gradient(90deg, #1C2B5E 0 33%, #F0B323 0 66%, #2E6DB4 0 100%);
  --franja: linear-gradient(90deg, #F1E6D0 0 16.66%, #C9A66B 0 33.33%, #F0B323 0 50%, #5DA9E9 0 66.66%, #2E6DB4 0 83.33%, #1C2B5E 0 100%);

  /* Retícula hexagonal (SVG). Clara para fondos navy, tenue para fondos claros. */
  --hex-claro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34.64' height='60' viewBox='0 0 34.64 60'%3E%3Cpath d='M17.32 0L34.64 10V30L17.32 40L0 30V10ZM17.32 40V60' fill='none' stroke='%23FFFFFF' stroke-opacity='.075' stroke-width='1'/%3E%3C/svg%3E");
  --hex-tenue: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34.64' height='60' viewBox='0 0 34.64 60'%3E%3Cpath d='M17.32 0L34.64 10V30L17.32 40L0 30V10ZM17.32 40V60' fill='none' stroke='%231C2B5E' stroke-opacity='.06' stroke-width='1'/%3E%3C/svg%3E");

  color-scheme: light;
}

/* ---------- 2. Reset y base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--tlc-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--tlc-tinta);
  background: var(--tlc-fondo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'tnum' 0;
}
img, svg, video, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
a { color: var(--tlc-blue); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
h1, h2, h3, h4, h5 { font-family: var(--tlc-titulo); color: var(--tlc-navy); margin: 0; line-height: 1.2; font-weight: 800; letter-spacing: -.005em; }
p { margin: 0; }
hr { border: 0; border-top: 1px solid var(--tlc-border-2); margin: 16px 0; }
::selection { background: var(--tlc-gold-claro); color: var(--tlc-navy); }
:focus { outline: none; }
:focus-visible { outline: 2.5px solid var(--tlc-blue); outline-offset: 2px; border-radius: 6px; }
/* Sobre superficies navy el azul no llega a 3:1: ahí el anillo es dorado (7.2:1). */
.franja-viva :focus-visible, .sf-barra :focus-visible, .kpi.destacado :focus-visible, .capsula :focus-visible,
.aviso :focus-visible, .sf-llamada :focus-visible, .pn-emb-conv :focus-visible, .cl-cita.m-presencial:focus-visible { outline-color: var(--tlc-gold); }
.cajon:focus-visible, #vista:focus-visible { outline: none; }
/* Al saltar al contenido, #vista no debe quedar escondido bajo la barra fija (dos renglones en tableta y celular). */
#vista { scroll-margin-top: var(--barra-real, var(--alto-barra)); }
/* «Saltar al contenido»: invisible hasta que recibe el foco con el teclado */
.saltar:focus, .saltar:focus-visible { position: fixed !important; left: 16px; top: 12px; z-index: 90; width: auto; height: auto; margin: 0; padding: 10px 16px; overflow: visible; clip: auto; white-space: nowrap; border-radius: 999px; background: var(--tlc-navy); color: #fff; font-weight: 600; box-shadow: var(--sombra-m); outline: 2.5px solid var(--tlc-gold); outline-offset: 2px; text-decoration: none; }
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.oculto { display: none !important; }

/* Scrollbars discretas */
* { scrollbar-width: thin; scrollbar-color: rgba(28, 43, 94, .18) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(28, 43, 94, .16); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background-color: rgba(28, 43, 94, .3); }

/* Iconos lineales */
.ico { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: inline-block; vertical-align: middle; }
.ico-s { width: 14px; height: 14px; }
.ico-m { width: 20px; height: 20px; }
.ico-l { width: 24px; height: 24px; }
.ico-xl { width: 32px; height: 32px; stroke-width: 1.6; }

/* Utilidades de texto */
.titulo-num { font-family: var(--tlc-titulo); font-weight: 800; color: var(--tlc-navy); font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums; }
/* El dorado #F0B323 solo va sobre navy. Sobre fondo claro se usa el dorado oscuro (5.1:1). */
.dorado { color: var(--tlc-gold-osc); }
.gris { color: var(--tlc-tinta-3); }
.peq { font-size: 12px; }
.mono { font-family: var(--tlc-mono); font-size: 12px; }
.recorte { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fuerte { font-weight: 600; }
.centro { text-align: center; }
.der { text-align: right; }
.etiqueta-sec { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--tlc-tinta-3); font-weight: 700; font-family: var(--tlc-titulo); }

/* ---------- 3. Layout del shell ---------- */
.app { display: grid; grid-template-columns: var(--ancho-lateral) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }

/* Barra lateral (fondo claro; navy solo en el bloque activo) */
.lateral {
  position: sticky; top: 0; height: 100vh; height: 100dvh;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #FFFFFF 0%, #FCFAF5 100%);
  border-right: 1px solid var(--tlc-border);
  z-index: 40;
}
.lateral-marca { padding: 20px 18px 8px; display: flex; flex-direction: column; align-items: center; gap: 0; }
.capsula-logo {
  display: flex; align-items: center; justify-content: center;
  background: #fff; border-radius: 18px; padding: 10px 16px;
  border: 1px solid var(--tlc-border); box-shadow: var(--sombra);
}
.capsula-logo img { height: 58px; width: auto; }
.lateral-marca a { text-decoration: none; }
.lateral-marca .capsula-logo { align-self: stretch; padding: 12px 16px 22px; }
.lateral-marca .capsula { margin-top: -14px; font-size: 12px; padding: 5px 14px; position: relative; box-shadow: 0 6px 14px -6px rgba(28, 43, 94, .55); }
.lateral-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 12px 12px; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-grupo { padding: 16px 12px 6px; font-family: var(--tlc-titulo); font-weight: 800; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--tlc-tinta-3); }
.nav-item {
  position: relative; display: flex; align-items: center; gap: 11px;
  height: 40px; padding: 0 12px; border-radius: 12px;
  color: var(--tlc-tinta-2); font-weight: 600; font-size: 13.5px;
  text-decoration: none; transition: background var(--t-rapida), color var(--t-rapida);
}
.nav-item .ico { color: var(--tlc-tinta-3); transition: color var(--t-rapida); }
.nav-item:hover { background: var(--tlc-cream-2); color: var(--tlc-navy); text-decoration: none; }
.nav-item:hover .ico { color: var(--tlc-blue); }
.nav-item.activo { background: var(--tlc-navy); color: #fff; box-shadow: 0 6px 16px -8px rgba(28, 43, 94, .6); }
.nav-item.activo .ico { color: var(--tlc-gold); }
.nav-item.activo::before { content: ''; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--tlc-gold); }
.nav-cuenta { margin-left: auto; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--tlc-cream); color: var(--tlc-navy); }
.nav-cuenta.alerta { background: var(--tlc-peligro); color: #fff; }
.nav-cuenta.dorada { background: var(--tlc-gold); color: var(--tlc-navy); }
.nav-item.activo .nav-cuenta { background: rgba(255, 255, 255, .16); color: #fff; }
.nav-item.activo .nav-cuenta.alerta { background: var(--tlc-peligro); }
.nav-item.activo .nav-cuenta.dorada { background: var(--tlc-gold); color: var(--tlc-navy); }

.lateral-pie { padding: 12px 14px 0; display: flex; flex-direction: column; gap: 12px; }
.sofia-tarjeta {
  position: relative; overflow: hidden; border-radius: 16px; padding: 14px;
  background: var(--tlc-cream-2); border: 1px solid var(--tlc-border);
}
.sofia-tarjeta::after { content: ''; position: absolute; inset: 0; background: var(--hex-tenue); background-size: 34.64px 60px; opacity: .9; pointer-events: none; mask-image: linear-gradient(120deg, transparent 30%, #000 100%); -webkit-mask-image: linear-gradient(120deg, transparent 30%, #000 100%); }
.sofia-fila { position: relative; z-index: 1; display: flex; align-items: center; gap: 11px; }
.sofia-avatar { position: relative; width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--tlc-navy); color: var(--tlc-gold); box-shadow: 0 4px 10px -4px rgba(28, 43, 94, .6); }
.sofia-avatar .ico { width: 19px; height: 19px; }
.sofia-avatar .punto { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--tlc-tinta-4); border: 2px solid var(--tlc-cream-2); }
.sofia-tarjeta.conectada .punto { background: #34A36B; animation: latido 2.4s infinite; }
.sofia-tarjeta.alerta .punto { background: var(--tlc-gold); }
.sofia-tarjeta.alerta small { color: var(--tlc-gold-osc); font-weight: 600; }
.sofia-tarjeta b { display: block; font-family: var(--tlc-titulo); font-weight: 800; font-size: 14px; color: var(--tlc-navy); line-height: 1.2; }
.sofia-tarjeta small { display: block; font-size: 11.5px; color: var(--tlc-tinta-3); }
.sofia-tarjeta .btn { position: relative; z-index: 1; width: 100%; margin-top: 12px; }
.franja-marca { height: 6px; background: var(--franja); flex: none; }
.lateral .franja-marca { margin-top: 14px; }
.cinta { height: 3px; background: var(--cinta); border-radius: 999px; }

/* Principal */
.principal { min-width: 0; display: flex; flex-direction: column; }
.barra {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 14px; min-height: var(--alto-barra);
  padding: 14px 32px;
  background: rgba(250, 247, 241, .94);
  -webkit-backdrop-filter: saturate(1.3) blur(14px); backdrop-filter: saturate(1.3) blur(14px);
  border-bottom: 1px solid var(--tlc-border-2);
}
.barra-titulos { min-width: 0; }
.barra-titulos h1 { font-size: 25px; font-weight: 800; letter-spacing: -.01em; line-height: 1.1; }
.barra-titulos h1 .dorado { color: inherit; }   /* regla de cabeceras: el h1 de la vista es siempre navy */
.barra-titulos .sub { font-size: 12.5px; color: var(--tlc-tinta-3); margin-top: 3px; }
.barra-der { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.barra .menu-movil { display: none; }
.barra .barra-logo { display: none; }
.barra-der > .btn .txt-corto { display: none; }
.vista { padding: 26px 32px 64px; flex: 1; min-width: 0; }
.vista-entrada { animation: subir var(--t) var(--curva) both; }

/* Buscador global */
.buscador { position: relative; }
.buscador .ico { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--tlc-tinta-3); pointer-events: none; }
.buscador input {
  width: 260px; height: 40px; border-radius: 999px; padding: 0 44px 0 38px;
  border: 1px solid var(--tlc-border); background: #fff; color: var(--tlc-navy);
  transition: border-color var(--t-rapida), box-shadow var(--t-rapida), width var(--t);
}
.buscador input::placeholder { color: var(--tlc-tinta-3); }
.buscador input:focus { border-color: var(--tlc-blue); box-shadow: var(--anillo); outline: none; }
.buscador kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-family: var(--tlc-mono); font-size: 11px; color: var(--tlc-tinta-3); border: 1px solid var(--tlc-border); border-bottom-width: 2px; border-radius: 6px; padding: 0 6px; background: var(--tlc-cream-2); line-height: 18px; }
.buscador input:focus + kbd { display: none; }

/* ---------- 4. Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid transparent;
  font-family: var(--tlc-sans); font-weight: 600; font-size: 13.5px; white-space: nowrap;
  text-decoration: none; line-height: 1; user-select: none;
  transition: background var(--t-rapida), border-color var(--t-rapida), color var(--t-rapida), box-shadow var(--t-rapida), transform var(--t-rapida);
}
.btn:hover { text-decoration: none; }
.btn:active:not(:disabled) { transform: translateY(1px) scale(.99); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; }
.btn .ico { width: 17px; height: 17px; }
.btn-primario { background: var(--tlc-navy); color: #fff; box-shadow: 0 6px 14px -8px rgba(28, 43, 94, .7); }
.btn-primario:hover:not(:disabled) { background: var(--tlc-navy-2); }
.btn-primario .ico { color: var(--tlc-gold); }
.btn-acento { background: var(--tlc-gold); color: var(--tlc-navy); box-shadow: 0 6px 14px -8px rgba(184, 133, 10, .8); }
.btn-acento:hover:not(:disabled) { background: #F4BE3C; }
.btn-secundario { background: #fff; color: var(--tlc-navy); border-color: var(--tlc-border); }
.btn-secundario:hover:not(:disabled) { border-color: var(--tlc-beige); background: var(--tlc-cream-2); }
.btn-fantasma { background: transparent; color: var(--tlc-tinta-2); }
.btn-fantasma:hover:not(:disabled) { background: rgba(28, 43, 94, .06); color: var(--tlc-navy); }
.btn-peligro { background: var(--tlc-peligro); color: #fff; }
.btn-peligro:hover:not(:disabled) { background: #A93632; }
.btn-peligro-suave { background: var(--tlc-peligro-claro); color: var(--tlc-peligro); }
.btn-peligro-suave:hover:not(:disabled) { background: #F6D7D5; }
.btn-exito { background: var(--tlc-exito); color: #fff; }
.btn-s { height: 32px; padding: 0 13px; font-size: 12.5px; gap: 6px; }
.btn-s .ico { width: 15px; height: 15px; }
.btn-l { height: 48px; padding: 0 24px; font-size: 15px; }
.btn-bloque { width: 100%; }
.btn-icono { width: 40px; padding: 0; }
.btn-icono.btn-s { width: 32px; }
.btn.cargando { position: relative; color: transparent !important; pointer-events: none; }
.btn.cargando .ico { opacity: 0; }
.btn.cargando::after { content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-color: rgba(255, 255, 255, .9) rgba(255, 255, 255, .9) rgba(255, 255, 255, .25) rgba(255, 255, 255, .25); animation: girar .7s linear infinite; }
.btn-secundario.cargando::after, .btn-fantasma.cargando::after, .btn-acento.cargando::after { border-color: var(--tlc-navy) var(--tlc-navy) rgba(28, 43, 94, .2) rgba(28, 43, 94, .2); }
.grupo-btn { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.enlace { background: none; border: 0; padding: 0; color: var(--tlc-blue); font-weight: 600; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.enlace:hover { text-decoration: underline; text-underline-offset: 2px; }
.enlace .ico { width: 14px; height: 14px; }

/* ---------- 5. Formularios ---------- */
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo > label, .campo .etq { font-size: 12.5px; font-weight: 600; color: var(--tlc-tinta-2); }
.campo .req { color: var(--tlc-peligro); margin-left: 2px; }
.campo .ayuda { font-size: 11.5px; color: var(--tlc-tinta-3); line-height: 1.4; }
.campo .error-campo { font-size: 11.5px; color: var(--tlc-peligro); }
.input, .select, .textarea {
  width: 100%; height: 40px; padding: 0 13px; border-radius: 12px;
  border: 1px solid var(--tlc-border); background: #fff; color: var(--tlc-navy);
  transition: border-color var(--t-rapida), box-shadow var(--t-rapida);
}
.input::placeholder, .textarea::placeholder { color: var(--tlc-tinta-3); }
.input:hover, .select:hover, .textarea:hover { border-color: #D9CBAA; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--tlc-blue); box-shadow: var(--anillo); outline: none; }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--tlc-peligro); }
.input:disabled, .select:disabled, .textarea:disabled { background: var(--tlc-cream-2); color: var(--tlc-tinta-3); }
.textarea { height: auto; min-height: 96px; padding: 10px 13px; line-height: 1.5; resize: vertical; }
.select {
  appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C2B5E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 15px;
}
.select-pildora { height: 36px; border-radius: 999px; width: auto; font-size: 12.5px; font-weight: 600; padding-left: 14px; }
.input-icono { position: relative; }
.input-icono .ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--tlc-tinta-3); pointer-events: none; }
.input-icono .input { padding-left: 36px; }
.form-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 14px; }
.form-rejilla .completo { grid-column: 1 / -1; }
.casilla { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; cursor: pointer; user-select: none; }
.casilla input { width: 17px; height: 17px; accent-color: var(--tlc-navy); margin: 0; }
.casilla input.interruptor { width: 40px; height: 23px; }

/* Interruptor (checkbox con role=switch) */
.interruptor { appearance: none; -webkit-appearance: none; position: relative; width: 40px; height: 23px; border-radius: 999px; background: #D8D2C4; border: 0; margin: 0; flex: none; cursor: pointer; transition: background var(--t); }
.interruptor::after { content: ''; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform var(--t) var(--curva); }
.interruptor:checked { background: var(--tlc-navy); }
.interruptor:checked::after { transform: translateX(17px); }

/* ---------- 6. Segmentos / pestañas ---------- */
.segmento { width: max-content; max-width: 100%; overflow-x: auto; display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: #EFE8D9; border: 1px solid var(--tlc-border-2); }
.segmento button { border: 0; background: transparent; height: 32px; padding: 0 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--tlc-tinta-2); white-space: nowrap; transition: background var(--t-rapida), color var(--t-rapida), box-shadow var(--t-rapida); }
.segmento button:hover { color: var(--tlc-navy); }
.segmento button[aria-pressed="true"], .segmento button.activo { background: var(--tlc-navy); color: #fff; box-shadow: 0 3px 8px -4px rgba(28, 43, 94, .6); }
.segmento-claro button[aria-pressed="true"], .segmento-claro button.activo { background: #fff; color: var(--tlc-navy); box-shadow: 0 1px 3px rgba(28, 43, 94, .14); }
.pestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--tlc-border-2); overflow-x: auto; }
.pestanas button { border: 0; background: transparent; padding: 11px 12px; font-size: 13px; font-weight: 600; color: var(--tlc-tinta-3); border-bottom: 2.5px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
.pestanas button:hover { color: var(--tlc-navy); }
.pestanas button[aria-selected="true"], .pestanas button.activo { color: var(--tlc-navy); border-color: var(--tlc-gold); }

/* ---------- 7. Tarjetas y rejillas ---------- */
.tarjeta { background: var(--tlc-papel); border: 1px solid var(--tlc-border); border-radius: var(--radio); box-shadow: var(--sombra); min-width: 0; }
.tarjeta-cab { display: flex; align-items: center; gap: 10px; padding: 18px 20px 0; min-height: 40px; }
.tarjeta-cab h3 { font-size: 15px; font-weight: 800; }
.tarjeta-cab .ayuda { font-size: 12px; color: var(--tlc-tinta-3); }
.tarjeta-cab .der { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.tarjeta-cuerpo { padding: 16px 20px 20px; }
.tarjeta-cuerpo.sin-pad { padding: 8px 0 4px; }
.tarjeta-pie { padding: 12px 20px; border-top: 1px solid var(--tlc-border-2); display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--tlc-tinta-3); }
.tarjeta.crema { background: var(--tlc-cream-2); }
.tarjeta.clic { cursor: pointer; transition: box-shadow var(--t), transform var(--t), border-color var(--t); }
.tarjeta.clic:hover { box-shadow: var(--sombra-m); transform: translateY(-1px); border-color: #DDCDA9; }
.rejilla { display: grid; gap: 16px; }
.rejilla > * { min-width: 0; }
.g-kpi { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-21 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.g-12 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.mt { margin-top: 16px; }
.mt-l { margin-top: 24px; }
.fila { display: flex; align-items: center; gap: 10px; }
.fila-entre { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pila { display: flex; flex-direction: column; gap: 12px; }

/* Cabecera de vista/sección en cápsula navy con palabra dorada */
.capsula {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px; border-radius: 999px;
  background: var(--tlc-navy); color: #fff;
  font-family: var(--tlc-titulo); font-weight: 800; font-size: 14px; letter-spacing: .01em; line-height: 1.2;
  box-shadow: 0 6px 16px -10px rgba(28, 43, 94, .8);
}
.capsula b { color: var(--tlc-gold); font-weight: 800; }
.capsula .ico { color: var(--tlc-gold); width: 16px; height: 16px; }
.capsula-l { font-size: 18px; padding: 10px 22px; }
.seccion-cab { display: flex; align-items: center; gap: 12px; margin: 4px 0 14px; flex-wrap: wrap; }
.seccion-cab p { font-size: 12.5px; color: var(--tlc-tinta-3); }
.seccion-cab .der { margin-left: auto; display: flex; gap: 8px; }

/* Titular grande con palabra dorada */
.titular { font-family: var(--tlc-titulo); font-weight: 800; color: var(--tlc-navy); font-size: 32px; line-height: 1.1; letter-spacing: -.015em; }
/* Sobre claro, la palabra destacada va en navy con subrayado dorado (el dorado como texto daría 1.8:1). */
.titular b, .entrar-caja h1 b, .construccion h2 b { color: var(--tlc-navy); font-weight: 800; text-decoration: underline 4px var(--tlc-gold); text-underline-offset: 6px; text-decoration-skip-ink: none; }

/* ---------- 8. KPI ---------- */
.kpi { position: relative; overflow: hidden; padding: 18px 20px 16px; }
.kpi::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--cinta); opacity: 0; transition: opacity var(--t); }
.kpi:hover::before { opacity: 1; }
.kpi-etq { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 600; color: var(--tlc-tinta-2); }
.kpi-ic { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--tlc-cream-2); color: var(--tlc-blue); flex: none; border: 1px solid var(--tlc-border-2); }
.kpi-ic .ico { width: 16px; height: 16px; }
.kpi-valor { margin-top: 12px; font-family: var(--tlc-titulo); font-weight: 800; font-size: clamp(30px, 2.6vw, 38px); color: var(--tlc-navy); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi-valor small { font-family: var(--tlc-sans); font-size: 13px; font-weight: 600; color: var(--tlc-tinta-3); letter-spacing: 0; margin-left: 4px; }
.kpi-pie { margin-top: 10px; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--tlc-tinta-3); flex-wrap: wrap; }
.delta { display: inline-flex; align-items: center; gap: 3px; height: 21px; padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.delta .ico { width: 12px; height: 12px; stroke-width: 2.4; }
.delta.sube { color: var(--tlc-exito); background: var(--tlc-exito-claro); }
.delta.baja { color: var(--tlc-peligro); background: var(--tlc-peligro-claro); }
.delta.igual { color: var(--tlc-tinta-3); background: #F1EEE7; }
.kpi.destacado { background: var(--tlc-navy); border-color: var(--tlc-navy); color: #fff; background-image: var(--hex-claro), linear-gradient(135deg, var(--tlc-navy) 0%, var(--tlc-navy-3) 100%); background-size: 34.64px 60px, auto; }
.kpi.destacado .kpi-etq { color: rgba(255, 255, 255, .78); }
.kpi.destacado .kpi-ic { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .12); color: var(--tlc-gold); }
.kpi.destacado .kpi-valor { color: #fff; }
.kpi.destacado .kpi-valor small, .kpi.destacado .kpi-pie { color: rgba(255, 255, 255, .65); }
.kpi.destacado .delta.sube { background: rgba(52, 163, 107, .22); color: #8FE0B5; }
.kpi.destacado .delta.baja { background: rgba(217, 83, 79, .25); color: #FFB3B0; }
.mini-barra { height: 6px; border-radius: 999px; background: #EFE8D9; overflow: hidden; margin-top: 10px; }
.mini-barra i { display: block; height: 100%; border-radius: inherit; background: var(--tlc-blue); }

/* ---------- 9. Franja EN VIVO ---------- */
.franja-viva {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 16px 22px; border-radius: var(--radio);
  background: linear-gradient(105deg, var(--tlc-navy) 0%, #22346E 55%, var(--tlc-navy-3) 100%);
  color: rgba(255, 255, 255, .78);
  box-shadow: 0 14px 30px -18px rgba(20, 32, 72, .8);
}
.franja-viva::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--hex-claro); background-size: 34.64px 60px; mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 100%); }
.franja-viva::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--cinta); }
.vivo { display: inline-flex; align-items: center; gap: 8px; font-family: var(--tlc-titulo); font-weight: 800; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--tlc-gold); white-space: nowrap; }
.vivo::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--tlc-gold); box-shadow: 0 0 0 0 rgba(240, 179, 35, .6); animation: latido-dorado 2s infinite; }
.franja-viva .item { display: flex; align-items: baseline; gap: 7px; font-size: 13px; white-space: nowrap; }
.franja-viva .item .cifra { font-family: var(--tlc-titulo); font-weight: 800; font-size: 26px; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; }
.franja-viva .item b { color: #fff; font-weight: 600; }
.franja-viva .sep { width: 1px; height: 26px; background: rgba(255, 255, 255, .14); }
.franja-viva .der { margin-left: auto; }

/* ---------- 10. Tablas ---------- */
.tabla-envoltura {
  overflow-x: auto;
  border-radius: inherit;   /* el fondo de las sombras no se sale de las esquinas redondeadas de la tarjeta */
  /* Pista de que hay más columnas: sombra en el borde que tiene contenido escondido (se tapa al llegar al final). */
  background:
    linear-gradient(90deg, #fff 30%, rgba(255, 255, 255, 0)) left center / 40px 100% no-repeat local,
    linear-gradient(270deg, #fff 30%, rgba(255, 255, 255, 0)) right center / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(28, 43, 94, .18), transparent) left center / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(28, 43, 94, .18), transparent) right center / 14px 100% no-repeat scroll;
}
.tabla-envoltura:focus-visible { outline-offset: -2.5px; border-radius: var(--radio); }
.tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla th { text-align: left; font-weight: 700; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--tlc-tinta-3); padding: 12px 14px; border-bottom: 1px solid var(--tlc-border-2); white-space: nowrap; background: #FDFBF7; }
.tabla th:first-child { padding-left: 20px; }
.tabla th:last-child { padding-right: 20px; }
.tabla td { padding: 12px 14px; border-bottom: 1px solid var(--tlc-border-2); vertical-align: middle; color: var(--tlc-tinta-2); }
.tabla td:first-child { padding-left: 20px; }
.tabla td:last-child { padding-right: 20px; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr { transition: background var(--t-rapida); }
.tabla.clic tbody tr { cursor: pointer; }
.tabla.clic tbody tr:hover { background: #FBF7EE; }
.tabla.clic tbody tr:focus-visible { outline: 2.5px solid var(--tlc-blue); outline-offset: -2.5px; }
.tabla .der, .tabla th.der { text-align: right; }
.tabla .num { font-variant-numeric: tabular-nums; }
.tabla .fuerte { color: var(--tlc-navy); }
.tarjeta > .tabla-envoltura:first-child .tabla th:first-child { border-top-left-radius: var(--radio); }
.tarjeta > .tabla-envoltura:first-child .tabla th:last-child { border-top-right-radius: var(--radio); }

/* Persona (avatar + nombre + subtítulo) */
.persona { display: flex; align-items: center; gap: 11px; min-width: 0; }
.persona > div { min-width: 0; }
.persona b { display: block; font-weight: 600; color: var(--tlc-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.persona small { display: block; font-size: 12px; color: var(--tlc-tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; font-family: var(--tlc-titulo); font-size: 11.5px; font-weight: 800; letter-spacing: .02em; color: #fff; background: var(--c, var(--tlc-blue)); }
.avatar.s { width: 24px; height: 24px; font-size: 9.5px; }
.avatar.l { width: 44px; height: 44px; font-size: 15px; }
.avatar.xl { width: 60px; height: 60px; font-size: 20px; }
.avatar.oscuro-texto { color: var(--tlc-navy); }

/* Puntaje con barrita */
.puntaje { display: inline-flex; align-items: center; gap: 9px; }
.puntaje-barra { width: 52px; height: 6px; border-radius: 999px; background: #EFE8D9; overflow: hidden; }
.puntaje-barra i { display: block; height: 100%; border-radius: inherit; }
.puntaje b { font-weight: 700; font-size: 12.5px; color: var(--tlc-navy); min-width: 22px; font-variant-numeric: tabular-nums; }

/* ---------- 11. Píldoras, chips, badges ---------- */
.pildora {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap; line-height: 1;
  background: var(--fondo, #F1EEE7); color: var(--texto, var(--tlc-tinta-2));
}
.pildora i { width: 7px; height: 7px; border-radius: 50%; background: var(--punto, currentColor); flex: none; }
.pildora .ico { width: 13px; height: 13px; }
.pildora.s { height: 20px; padding: 0 8px; font-size: 11px; gap: 5px; }
.pildora.borde { background: #fff; box-shadow: inset 0 0 0 1px var(--tlc-border); }
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--tlc-border); background: #fff; color: var(--tlc-tinta-2);
  font-size: 12.5px; font-weight: 600; white-space: nowrap; transition: all var(--t-rapida);
}
button.chip:hover { border-color: var(--tlc-beige); color: var(--tlc-navy); }
.chip[aria-pressed="true"], .chip.activo { background: var(--tlc-navy); border-color: var(--tlc-navy); color: #fff; }
.chip .ico { width: 14px; height: 14px; }
.chip i { width: 8px; height: 8px; border-radius: 50%; }
/* La «x» se ve chica, pero su área de toque mide 28 × 28 (WCAG 2.5.8) */
.chip-quitar { border: 0; background: transparent; padding: 0; min-width: 28px; min-height: 28px; margin: -6px -10px -6px -6px; border-radius: 999px; color: inherit; opacity: .7; display: grid; place-items: center; }
.chip-quitar:hover { opacity: 1; }
.badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--tlc-navy); color: #fff; font-variant-numeric: tabular-nums; }
.badge.dorado { background: var(--tlc-gold); color: var(--tlc-navy); }
.badge.alerta { background: var(--tlc-peligro); color: #fff; }
.badge.suave { background: var(--tlc-cream); color: var(--tlc-navy); }
.estado-punto { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; }
.estado-punto::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--punto, var(--tlc-tinta-4)); }
.estado-punto.ok { --punto: #34A36B; color: var(--tlc-exito); }
.estado-punto.mal { --punto: var(--tlc-peligro); color: var(--tlc-peligro); }
.estado-punto.alerta { --punto: var(--tlc-gold); color: var(--tlc-gold-osc); }

/* Filtros */
.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.filtros .total { margin-left: auto; font-size: 12.5px; color: var(--tlc-tinta-3); }

/* Listas */
.lista { display: flex; flex-direction: column; }
.lista-item { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--tlc-border-2); transition: background var(--t-rapida); color: inherit; text-decoration: none; }
.lista-item:first-child { border-top: 0; }
button.lista-item, a.lista-item { background: none; border-left: 0; border-right: 0; border-bottom: 0; width: 100%; text-align: left; cursor: pointer; }
button.lista-item:hover, a.lista-item:hover, .lista-item.clic:hover { background: #FBF7EE; text-decoration: none; }
.lista-item .info { flex: 1; min-width: 0; }
.lista-item .info b { display: block; font-weight: 600; font-size: 13px; color: var(--tlc-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lista-item .info small { display: block; font-size: 12px; color: var(--tlc-tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lista-item .lado { text-align: right; font-size: 12px; color: var(--tlc-tinta-3); white-space: nowrap; }

/* Pares dato/valor */
.datos { display: flex; flex-direction: column; }
.dato { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--tlc-border); font-size: 13px; }
.dato:last-child { border-bottom: 0; }
.dato > span { color: var(--tlc-tinta-3); }
.dato > b { font-weight: 600; color: var(--tlc-navy); text-align: right; min-width: 0; overflow-wrap: anywhere; }

/* Cita destacada (comillas doradas) */
.cita-dorada { position: relative; padding: 18px 20px 18px 56px; border-radius: var(--radio); background: var(--tlc-cream-2); border: 1px solid var(--tlc-border); color: var(--tlc-tinta-2); font-size: 14px; line-height: 1.6; }
.cita-dorada::before { content: '\201C'; position: absolute; left: 14px; top: 2px; font-family: Georgia, 'Times New Roman', serif; font-size: 64px; line-height: 1; color: var(--tlc-gold); }

/* Línea de tiempo */
.linea-tiempo { position: relative; padding-left: 34px; }
.linea-tiempo::before { content: ''; position: absolute; left: 13px; top: 8px; bottom: 8px; width: 2px; background: var(--tlc-border-2); border-radius: 2px; }
.evento { position: relative; padding-bottom: 18px; }
.evento:last-child { padding-bottom: 0; }
.evento-ic { position: absolute; left: -34px; top: 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1.5px solid var(--tlc-border); color: var(--tlc-tinta-2); }
.evento-ic .ico { width: 14px; height: 14px; }
.evento-ic.navy { background: var(--tlc-navy); border-color: var(--tlc-navy); color: var(--tlc-gold); }
.evento b { font-weight: 600; color: var(--tlc-navy); font-size: 13px; }
.evento small { display: block; color: var(--tlc-tinta-3); font-size: 11.5px; margin-top: 1px; }
.evento p { margin-top: 4px; color: var(--tlc-tinta-2); font-size: 13px; }

/* Gráficas */
.lienzo { position: relative; height: 270px; }
.lienzo.alto { height: 320px; }
.lienzo.bajo { height: 210px; }
.leyenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--tlc-tinta-2); }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* ---------- 12. Estados: vacío, error, carga ---------- */
.vacio { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 48px 24px; gap: 6px; }
.vacio-ic { position: relative; width: 76px; height: 76px; margin-bottom: 12px; display: grid; place-items: center; color: var(--tlc-navy); }
.vacio-ic::before { content: ''; position: absolute; inset: 0; background: var(--tlc-cream-2); border: 1px solid var(--tlc-border); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.vacio-ic::after { content: ''; position: absolute; inset: 7px; background: #fff; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.vacio-ic .ico { position: relative; z-index: 1; width: 28px; height: 28px; stroke-width: 1.6; }
.vacio-ic .acento { position: absolute; z-index: 2; right: 2px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--tlc-gold); border: 2px solid #fff; }
.vacio h3 { font-size: 17px; font-weight: 800; }
.vacio p { max-width: 420px; font-size: 13px; color: var(--tlc-tinta-3); line-height: 1.55; }
.vacio .grupo-btn { margin-top: 14px; justify-content: center; }
.vacio.compacto { padding: 28px 16px; }
.vacio.compacto .vacio-ic { width: 56px; height: 56px; margin-bottom: 6px; }
.vacio.compacto .vacio-ic .ico { width: 22px; height: 22px; }
.vacio.compacto h3 { font-size: 14.5px; }
.vacio.error .vacio-ic { color: var(--tlc-peligro); }
.vacio.error .vacio-ic .acento { background: var(--tlc-peligro); }

.esq { position: relative; overflow: hidden; background: #EFE9DC; border-radius: 8px; }
.esq::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent); animation: brillo-esq 1.3s infinite; }
.esq-linea { height: 12px; border-radius: 6px; }
.esq-titulo { height: 18px; width: 40%; border-radius: 6px; }
.esq-cifra { height: 34px; width: 55%; border-radius: 8px; }
.esq-circulo { width: 32px; height: 32px; border-radius: 50%; flex: none; }
.esq-bloque { height: 200px; border-radius: 12px; }
.esq-pila { display: flex; flex-direction: column; gap: 10px; }
.esq-fila { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--tlc-border-2); }
.esq-fila:first-child { border-top: 0; }

.cargador { display: grid; place-items: center; padding: 40px; }
.cargador::before { content: ''; width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid var(--tlc-border); border-top-color: var(--tlc-navy); animation: girar .8s linear infinite; }

/* "En construcción" (stubs de vistas) */
.construccion { position: relative; overflow: hidden; border-radius: var(--radio-l); background: #fff; border: 1px solid var(--tlc-border); box-shadow: var(--sombra); padding: 56px 32px 60px; text-align: center; isolation: isolate; }
.construccion::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--hex-tenue); background-size: 34.64px 60px; mask-image: radial-gradient(ellipse at 50% 40%, #000 0%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 0%, transparent 70%); }
.construccion::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--franja); }
.construccion .vacio-ic { margin: 0 auto 18px; width: 88px; height: 88px; }
.construccion .capsula { margin-bottom: 14px; }
.construccion h2 { font-size: 26px; }
.construccion p { margin: 8px auto 0; max-width: 480px; color: var(--tlc-tinta-3); font-size: 13.5px; }
.construccion ul { list-style: none; padding: 0; margin: 22px auto 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 620px; }

/* ---------- 13. Cajón lateral ---------- */
.velo { position: fixed; inset: 0; z-index: 50; background: rgba(20, 32, 72, .34); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity var(--t); }
.velo.abierto { opacity: 1; pointer-events: auto; }
.cajon {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 51; width: min(var(--ancho-cajon, 640px), 100vw);
  display: flex; flex-direction: column; background: var(--tlc-fondo);
  border-left: 1px solid var(--tlc-border); box-shadow: var(--sombra-l);
  transform: translateX(102%); visibility: hidden;
  transition: transform 220ms var(--curva), visibility 0s linear 220ms;
}
.cajon.abierto { transform: none; visibility: visible; transition: transform 220ms var(--curva), visibility 0s; }
.cajon::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--cinta); z-index: 2; }
.cajon-x { position: absolute; top: 16px; right: 16px; z-index: 3; }
.cajon-contenido { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cajon-cab { background: #fff; padding: 24px 72px 0 24px; border-bottom: 1px solid var(--tlc-border-2); flex: none; }
.cajon-cab h2 { font-size: 24px; font-weight: 800; line-height: 1.15; }
.cajon-cab .sub { font-size: 12.5px; color: var(--tlc-tinta-3); margin-top: 5px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cajon-cab .pestanas { margin-top: 16px; border-bottom: 0; }
.cajon-cab.sin-pestanas { padding-bottom: 20px; }
.cajon-cuerpo { flex: 1; min-height: 0; overflow-y: auto; padding: 22px 24px 40px; }
.cajon-pie { flex: none; padding: 14px 24px; background: #fff; border-top: 1px solid var(--tlc-border-2); display: flex; gap: 10px; justify-content: flex-end; }
.seccion { margin-bottom: 22px; }
.seccion > h4, .seccion-titulo { margin: 0 0 10px; font-family: var(--tlc-titulo); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--tlc-tinta-3); font-weight: 800; display: flex; align-items: center; gap: 8px; }

/* Botón redondo de cerrar (cajón y modal) */
.btn-cerrar { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--tlc-border); background: #fff; color: var(--tlc-navy); display: grid; place-items: center; flex: none; transition: background var(--t-rapida), border-color var(--t-rapida), transform var(--t-rapida); }
.btn-cerrar:hover { background: var(--tlc-cream-2); border-color: var(--tlc-beige); }
.btn-cerrar .ico { width: 16px; height: 16px; }

/* ---------- 14. Modal ---------- */
.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; background: rgba(20, 32, 72, .42); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: aparecer var(--t) ease both; }
.modal.saliendo { animation: desaparecer 140ms ease forwards; }
.modal-caja { position: relative; width: min(var(--ancho-modal, 540px), 100%); max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); display: flex; flex-direction: column; background: #fff; border-radius: var(--radio-l); box-shadow: var(--sombra-l); overflow: hidden; animation: subir-modal var(--t) var(--curva) both; }
.modal-caja::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--cinta); }
.modal-cab { display: flex; align-items: flex-start; gap: 12px; padding: 22px 22px 0 24px; flex: none; }
.modal-cab h3 { font-size: 20px; font-weight: 800; line-height: 1.25; padding-top: 4px; }
.modal-cab .sub { font-size: 12.5px; color: var(--tlc-tinta-3); margin-top: 4px; }
.modal-cab .btn-cerrar { margin-left: auto; }
.modal-cuerpo { padding: 18px 24px 20px; overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 14px; color: var(--tlc-tinta-2); }
.modal-pie { padding: 14px 24px 18px; display: flex; gap: 10px; justify-content: flex-end; align-items: center; flex-wrap: wrap; border-top: 1px solid var(--tlc-border-2); background: #FDFBF7; flex: none; }
.modal-pie .izq { margin-right: auto; }
.modal.confirmacion .modal-cuerpo { padding-top: 10px; }
.modal-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--tlc-cream-2); color: var(--tlc-navy); flex: none; }
.modal-ic.peligro { background: var(--tlc-peligro-claro); color: var(--tlc-peligro); }
.modal-ic .ico { width: 22px; height: 22px; }

/* ---------- 15. Avisos (toasts) ---------- */
.avisos { position: fixed; top: 18px; right: 18px; z-index: 80; display: flex; flex-direction: column; gap: 10px; width: 380px; max-width: calc(100vw - 32px); pointer-events: none; }
.aviso {
  pointer-events: auto; position: relative; overflow: hidden;
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 14px 14px 16px;
  background: var(--tlc-navy); color: rgba(255, 255, 255, .8); border-radius: 16px;
  box-shadow: var(--sombra-l); border: 1px solid rgba(255, 255, 255, .08);
  animation: entrar-aviso 200ms var(--curva) both;
}
.aviso::before { content: ''; position: absolute; inset: 0; background: var(--hex-claro); background-size: 34.64px 60px; opacity: .7; pointer-events: none; mask-image: linear-gradient(90deg, transparent 40%, #000); -webkit-mask-image: linear-gradient(90deg, transparent 40%, #000); }
.aviso.saliendo { animation: salir-aviso 160ms ease forwards; }
.aviso-ic { position: relative; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; background: rgba(240, 179, 35, .16); color: var(--tlc-gold); }
.aviso-ic .ico { width: 17px; height: 17px; }
.aviso.exito .aviso-ic { background: rgba(52, 163, 107, .2); color: #7FDCAA; }
.aviso.error .aviso-ic { background: rgba(217, 83, 79, .22); color: #FFA9A5; }
.aviso.alerta .aviso-ic { background: rgba(240, 179, 35, .2); color: var(--tlc-gold); }
.aviso-txt { position: relative; flex: 1; min-width: 0; padding-top: 1px; }
.aviso-txt b { display: block; color: #fff; font-weight: 700; font-size: 13.5px; line-height: 1.35; }
.aviso-txt small { display: block; font-size: 12px; color: rgba(255, 255, 255, .68); margin-top: 2px; line-height: 1.4; }
.aviso-txt .enlace { color: var(--tlc-gold); margin-top: 6px; font-size: 12.5px; }
.aviso-x { position: relative; border: 0; background: transparent; color: rgba(255, 255, 255, .55); width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex: none; }
.aviso-x:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.aviso-x .ico { width: 14px; height: 14px; }
.aviso-progreso { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--tlc-gold); transform-origin: left; animation: progreso linear forwards; }

/* ---------- 16. Pantalla de entrada ---------- */
.entrar { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: radial-gradient(1200px 600px at 85% -10%, #F6EEDC 0%, transparent 60%), radial-gradient(900px 500px at -10% 110%, #EEF3FA 0%, transparent 60%), var(--tlc-fondo); position: relative; overflow: hidden; isolation: isolate; }
.entrar-reticula { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.entrar-reticula svg { width: 100%; height: 100%; }
.entrar-centro { flex: 1; display: grid; place-items: center; padding: 40px 16px; }
.entrar-caja { width: min(460px, 100%); text-align: center; display: flex; flex-direction: column; align-items: center; animation: subir 260ms var(--curva) both; }
.entrar-caja > .entrar-form { align-self: stretch; }
.entrar-caja .capsula-logo { display: inline-flex; padding: 14px 24px; border-radius: 24px; box-shadow: 0 18px 40px -22px rgba(28, 43, 94, .45); }
.entrar-caja .capsula-logo img { height: 74px; }
.entrar-sello { display: inline-flex; align-items: center; gap: 8px; margin-top: 30px; font-family: var(--tlc-titulo); font-weight: 800; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--tlc-tinta-3); }
.entrar-sello::before, .entrar-sello::after { content: ''; width: 26px; height: 2px; border-radius: 2px; background: var(--cinta); }
.entrar-caja h1 { margin-top: 12px; font-size: clamp(32px, 6vw, 44px); line-height: 1.05; letter-spacing: -.02em; }
.entrar-caja h1 b { text-decoration-thickness: 5px; text-underline-offset: 8px; }
.entrar-caja .lema { margin: 12px auto 0; max-width: 380px; font-size: 14.5px; color: var(--tlc-tinta-2); line-height: 1.55; }
.entrar-form { margin-top: 28px; padding: 22px; background: #fff; border: 1px solid var(--tlc-border); border-radius: var(--radio-l); box-shadow: 0 24px 50px -30px rgba(28, 43, 94, .4); text-align: left; position: relative; overflow: hidden; }
.entrar-form::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--cinta); }
.entrar-form .campo { gap: 8px; }
.entrar-form .input { height: 50px; border-radius: 14px; font-size: 15px; padding-left: 44px; padding-right: 48px; }
.entrar-form .input-icono .ico { left: 15px; width: 18px; height: 18px; }
.entrar-ver { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 10px; border: 0; background: transparent; color: var(--tlc-tinta-3); display: grid; place-items: center; }
.entrar-ver:hover { background: var(--tlc-cream-2); color: var(--tlc-navy); }
.entrar-ver .ico { position: static; transform: none; width: 18px; height: 18px; }
.entrar-form .btn { margin-top: 14px; }
.mensaje-caja { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; border-radius: 12px; font-size: 13px; line-height: 1.45; }
.mensaje-caja.error { background: var(--tlc-peligro-claro); color: #8F2D29; }
.mensaje-caja.alerta { background: var(--tlc-gold-claro); color: #6B4B05; }
.mensaje-caja.info { background: var(--tlc-blue-claro); color: #1F4E85; }
.mensaje-caja.exito { background: var(--tlc-exito-claro); color: #22603F; }
.mensaje-caja .ico { width: 17px; height: 17px; margin-top: 1px; }
.entrar-msg { display: none; align-items: flex-start; gap: 10px; margin-top: 12px; padding: 11px 13px; border-radius: 12px; font-size: 13px; line-height: 1.45; }
.entrar-msg.visible { display: flex; animation: subir 160ms ease both; }
.entrar-msg.error { background: var(--tlc-peligro-claro); color: #8F2D29; }
.entrar-msg.alerta { background: var(--tlc-gold-claro); color: #6B4B05; }
.entrar-msg.info { background: var(--tlc-blue-claro); color: #1F4E85; }
.entrar-msg .ico { width: 17px; height: 17px; margin-top: 1px; }
.entrar-reloj { margin-top: 8px; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--tlc-gold-osc); font-variant-numeric: tabular-nums; }
.entrar-pie { margin-top: 22px; display: flex; gap: 8px; align-items: center; justify-content: center; font-size: 12px; color: var(--tlc-tinta-3); }
.entrar-pie .ico { width: 14px; height: 14px; color: var(--tlc-blue); }
.entrar-aviso { margin-top: 10px; font-size: 12px; line-height: 1.5; color: var(--tlc-tinta-3); text-align: center; }
.entrar-aviso a { color: var(--tlc-blue); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.entrar-pie-inst { padding: 14px 16px 16px; text-align: center; font-size: 11.5px; color: var(--tlc-tinta-3); letter-spacing: .02em; }
.entrar .franja-marca { height: 8px; }
.sacudir { animation: sacudir 320ms ease; }

/* ---------- 17. Animaciones ---------- */
@keyframes subir { from { opacity: 0; transform: translateY(6px); } }
@keyframes subir-modal { from { opacity: 0; transform: translateY(10px) scale(.985); } }
@keyframes aparecer { from { opacity: 0; } }
@keyframes desaparecer { to { opacity: 0; } }
@keyframes entrar-aviso { from { opacity: 0; transform: translateX(24px); } }
@keyframes salir-aviso { to { opacity: 0; transform: translateX(24px); } }
@keyframes progreso { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes brillo-esq { to { transform: translateX(100%); } }
@keyframes latido { 0%, 100% { box-shadow: 0 0 0 0 rgba(52, 163, 107, .5); } 60% { box-shadow: 0 0 0 6px rgba(52, 163, 107, 0); } }
@keyframes latido-dorado { 0%, 100% { box-shadow: 0 0 0 0 rgba(240, 179, 35, .55); } 60% { box-shadow: 0 0 0 7px rgba(240, 179, 35, 0); } }
@keyframes sacudir { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* ---------- 18. Responsive ---------- */
@media (max-width: 1280px) {
  .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .buscador input { width: 210px; }
}
@media (max-width: 1100px) {
  .g-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023.98px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .lateral { position: fixed; left: 0; top: 0; bottom: 0; width: min(var(--ancho-lateral), 86vw); transform: translateX(-102%); visibility: hidden; transition: transform 220ms var(--curva), visibility 0s linear 220ms; box-shadow: var(--sombra-l); z-index: 55; }
  .lateral.abierta { transform: none; visibility: visible; transition: transform 220ms var(--curva), visibility 0s; }
  .barra .menu-movil { display: inline-flex; }
  /* Sin la barra lateral, la marca sigue visible: mini cápsula blanca con el logo */
  .barra .barra-logo { display: inline-flex; flex: none; padding: 5px 10px; border-radius: 12px; box-shadow: var(--sombra-s); }
  .barra .barra-logo img { height: 28px; width: auto; }
  .barra { padding: 12px 20px; flex-wrap: wrap; row-gap: 10px; }
  .barra-der { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .buscador { flex: 1 1 200px; }
  .buscador input { width: 100%; }
  .vista { padding: 20px 20px 56px; }
  .g-2, .g-21, .g-12 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .barra { padding: 10px 16px; }
  .barra-titulos h1 { font-size: 21px; }
  .barra-titulos .sub { display: none; }
  .barra-der > .btn .txt { display: none; }
  .barra-der > .btn { width: 40px; padding: 0; }
  /* Acciones que no se entienden solo con el ícono llevan un texto corto («Importar», «Probar», «Nueva») */
  .barra-der > .btn.con-corto { width: auto; padding: 0 14px 0 12px; }
  .barra-der > .btn .txt-corto { display: inline; }
  .barra { gap: 10px; }
  .barra-titulos { flex: 1; }
  .barra-der #periodo { order: 3; width: 100%; }
  .barra-der .segmento { width: 100%; }
  .barra-der .segmento button { flex: 1; }
  .buscador kbd { display: none; }
  .vista { padding: 16px 16px 48px; }
  .g-kpi, .g-3, .g-4 { grid-template-columns: minmax(0, 1fr); }
  .form-rejilla { grid-template-columns: minmax(0, 1fr); }
  .tarjeta-cab { padding: 16px 16px 0; flex-wrap: wrap; }
  .tarjeta-cab .der { margin-left: 0; }
  .tarjeta-cuerpo { padding: 14px 16px 16px; }
  .franja-viva { padding: 14px 16px; gap: 12px; }
  .franja-viva .sep { display: none; }
  .modal { padding: 0; place-items: end center; }
  .modal-caja { width: 100%; border-radius: 22px 22px 0 0; max-height: 92vh; max-height: 92dvh; }
  .cajon-cab { padding: 20px 64px 0 16px; }
  .cajon-cuerpo { padding: 18px 16px 32px; }
  .avisos { top: auto; bottom: 14px; right: 16px; left: 16px; width: auto; max-width: none; }
  .titular { font-size: 26px; }
}

/* Pantallas táctiles: controles con al menos 36–40 px de área de toque */
@media (pointer: coarse) {
  .btn-s { height: 36px; }
  .btn-icono.btn-s { width: 36px; }
  .chip-quitar { min-width: 36px; min-height: 36px; margin: -10px -12px -10px -8px; }
  .segmento button { height: 36px; }
}

/* ---------- 19. Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .esq::after { display: none; }
}

/* Celular y tableta (20-oct-2026): con el menú lateral plegado, el botón del menú lleva la suma de lo que espera al
   dueño (chats que requieren atención, correos, tareas vencidas…), igual que los contadores del menú. */
.barra .menu-movil { position: relative; }
.menu-movil-cuenta { position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 10.5px; font-weight: 800; font-variant-numeric: tabular-nums; background: var(--tlc-peligro); color: #fff; box-shadow: 0 0 0 2px #fff; pointer-events: none; }
.menu-movil-cuenta[hidden] { display: none; }