/* Sistema visual de la web: el mismo lenguaje que el marcador del puesto y la entrada (#102, 25/10/2026).
 * Neutros fríos teñidos hacia el marino (claro: papel; oscuro: carbón azulado como el puesto), color solo para
 * estados y acción. Profundidad con sombras en capas y un brillo superior (no con bordes), filo luminoso
 * turquesa → cobre solo en lo destacado (diálogos, marca, tarjetas marcadas con .destacado), cabecera de página
 * con los anillos de la espera (fondos/, Nano Banana Pro) y estados vacíos ilustrados.
 * Escala tipográfica 1.2 desde 14 px; cifras tabulares en todo lo que cambia.
 * --marca y --marca-tinta llegan en el atributo style del <html> desde la cuenta (marca blanca);
 * por defecto, el «acción» de IberCall.IA. Identidad (docs/call_center/marca/identidad.html):
 * marino para cabeceras y barra del agente; turquesa SIEMPRE lo que entra y naranja lo que sale.
 * Las url() de las imágenes son relativas a esta hoja: valen igual en ibercallia.… y en el hub (/callcenter/assets/).
 */
:root {
  color-scheme: light;
  --marca: #c2461d;
  --marca-tinta: #fbfaf7;
  --marino: #1e2228;
  --entra: #19c8dc;
  --sale: #f28c1e;
  --entra-texto: #0e7f8c;
  --sale-texto: #b4560c;
  --simbolo-entra: #0e8a99;
  --simbolo-sale: #d0650f;
  --papel: oklch(0.972 0.004 235);
  --hoja: oklch(0.995 0.002 235);
  --hundido: oklch(0.953 0.005 235);
  --lateral: oklch(0.958 0.006 235);
  --tinta: oklch(0.24 0.015 250);
  --tinta-2: oklch(0.40 0.014 250);
  --tinta-3: oklch(0.50 0.012 250);
  --tinta-4: oklch(0.66 0.01 250);
  --trazo: oklch(0.3 0.02 250 / 0.12);
  --trazo-suave: oklch(0.3 0.02 250 / 0.07);
  --trazo-fuerte: oklch(0.3 0.02 250 / 0.22);
  --foco: oklch(0.52 0.12 215);
  --ok: oklch(0.52 0.13 155);
  --aviso: oklch(0.62 0.14 72);
  --peligro: oklch(0.53 0.19 27);
  --info-fondo: oklch(0.955 0.025 215);
  --ok-fondo: oklch(0.955 0.035 155);
  --aviso-fondo: oklch(0.958 0.045 85);
  --peligro-fondo: oklch(0.952 0.03 27);
  --marca-suave: color-mix(in oklch, var(--marca) 11%, var(--hoja));
  --marca-texto: color-mix(in oklch, var(--marca) 82%, var(--tinta));
  /* Profundidad: anillo de 1 px + sombras de contacto y de ambiente; brillo de luz cenital. */
  --brillo: inset 0 1px 0 oklch(1 0 0 / 0.9);
  --sombra-1: 0 0 0 1px oklch(0.3 0.02 250 / 0.09), 0 1px 2px oklch(0.3 0.03 245 / 0.07);
  --sombra-2: 0 0 0 1px oklch(0.3 0.02 250 / 0.08), 0 1px 2px oklch(0.3 0.03 245 / 0.06), 0 6px 16px -8px oklch(0.3 0.03 245 / 0.12), 0 22px 44px -28px oklch(0.3 0.03 245 / 0.16);
  --sombra-flotante: 0 0 0 1px oklch(0.3 0.02 250 / 0.10), 0 14px 34px -12px oklch(0.3 0.03 245 / 0.22), 0 40px 80px -30px oklch(0.3 0.03 245 / 0.24);
  --filo: linear-gradient(140deg, color-mix(in oklch, var(--entra) 62%, transparent), oklch(1 0 0 / 0.05) 36%, oklch(1 0 0 / 0.03) 64%, color-mix(in oklch, var(--sale) 58%, transparent));
  --tecla: linear-gradient(180deg, oklch(1 0 0) 0%, oklch(0.975 0.004 230) 100%);
  --tecla-encima: linear-gradient(180deg, oklch(0.99 0.006 210) 0%, oklch(0.955 0.012 210) 100%);
  --tecla-sombra: inset 0 1px 0 oklch(1 0 0), 0 0 0 1px oklch(0.3 0.02 240 / 0.12), 0 1px 2px oklch(0.3 0.03 240 / 0.10);
  --campo-sombra: inset 0 1px 2px oklch(0.3 0.03 240 / 0.07);
  --img-cab: image-set(url("fondos/cabecera-claro.avif") type("image/avif"), url("fondos/cabecera-claro.webp") type("image/webp"));
  --sans: "Source Sans 3", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
  --t-xs: 11.5px; --t-s: 12.5px; --t-m: 14px; --t-l: 16px; --t-xl: 19px; --t-2xl: 23px; --t-3xl: 34px;
  --r-s: 6px; --r-m: 9px; --r-l: 14px; --r-xl: 18px;
  --salida: cubic-bezier(0.23, 1, 0.32, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --papel: oklch(0.175 0.010 255); --hoja: oklch(0.207 0.011 255); --hundido: oklch(0.155 0.009 255); --lateral: oklch(0.163 0.010 255);
    --tinta: oklch(0.95 0.006 250); --tinta-2: oklch(0.83 0.009 250); --tinta-3: oklch(0.71 0.012 250); --tinta-4: oklch(0.56 0.012 250);
    --trazo: oklch(0.92 0.01 250 / 0.10); --trazo-suave: oklch(0.92 0.01 250 / 0.06); --trazo-fuerte: oklch(0.92 0.01 250 / 0.19);
    --foco: oklch(0.80 0.11 215);
    --ok: oklch(0.74 0.14 155); --aviso: oklch(0.82 0.14 80); --peligro: oklch(0.70 0.17 27);
    --info-fondo: oklch(0.30 0.05 225); --ok-fondo: oklch(0.30 0.05 155); --aviso-fondo: oklch(0.32 0.06 80); --peligro-fondo: oklch(0.31 0.07 27);
    --marca-suave: color-mix(in oklch, var(--marca) 26%, var(--hoja));
    --marca-texto: color-mix(in oklch, var(--marca) 45%, var(--tinta));
    --entra-texto: #5fdcea; --sale-texto: #f7a95a; --simbolo-entra: #19c8dc; --simbolo-sale: #f28c1e;
    --brillo: inset 0 1px 0 oklch(1 0 0 / 0.06);
    --sombra-1: 0 0 0 1px oklch(0.92 0.01 250 / 0.08), 0 1px 2px oklch(0 0 0 / 0.35);
    --sombra-2: 0 0 0 1px oklch(0.92 0.01 250 / 0.08), 0 1px 2px oklch(0 0 0 / 0.35), 0 10px 26px -12px oklch(0 0 0 / 0.5), 0 30px 60px -30px oklch(0 0 0 / 0.55);
    --sombra-flotante: 0 0 0 1px oklch(0.92 0.01 250 / 0.14), 0 14px 34px -10px oklch(0 0 0 / 0.55), 0 40px 80px -24px oklch(0 0 0 / 0.6);
    --tecla: linear-gradient(180deg, oklch(0.265 0.012 245) 0%, oklch(0.232 0.011 245) 100%);
    --tecla-encima: linear-gradient(180deg, oklch(0.30 0.014 240) 0%, oklch(0.262 0.012 240) 100%);
    --tecla-sombra: inset 0 1px 0 oklch(1 0 0 / 0.08), 0 0 0 1px oklch(1 0 0 / 0.07), 0 1px 2px oklch(0 0 0 / 0.4);
    --campo-sombra: inset 0 1px 2px oklch(0 0 0 / 0.3);
    --img-cab: image-set(url("fondos/cabecera-oscuro.avif") type("image/avif"), url("fondos/cabecera-oscuro.webp") type("image/webp"));
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --papel: oklch(0.175 0.010 255); --hoja: oklch(0.207 0.011 255); --hundido: oklch(0.155 0.009 255); --lateral: oklch(0.163 0.010 255);
  --tinta: oklch(0.95 0.006 250); --tinta-2: oklch(0.83 0.009 250); --tinta-3: oklch(0.71 0.012 250); --tinta-4: oklch(0.56 0.012 250);
  --trazo: oklch(0.92 0.01 250 / 0.10); --trazo-suave: oklch(0.92 0.01 250 / 0.06); --trazo-fuerte: oklch(0.92 0.01 250 / 0.19);
  --foco: oklch(0.80 0.11 215);
  --ok: oklch(0.74 0.14 155); --aviso: oklch(0.82 0.14 80); --peligro: oklch(0.70 0.17 27);
  --info-fondo: oklch(0.30 0.05 225); --ok-fondo: oklch(0.30 0.05 155); --aviso-fondo: oklch(0.32 0.06 80); --peligro-fondo: oklch(0.31 0.07 27);
  --marca-suave: color-mix(in oklch, var(--marca) 26%, var(--hoja));
  --marca-texto: color-mix(in oklch, var(--marca) 45%, var(--tinta));
  --entra-texto: #5fdcea; --sale-texto: #f7a95a; --simbolo-entra: #19c8dc; --simbolo-sale: #f28c1e;
  --brillo: inset 0 1px 0 oklch(1 0 0 / 0.06);
  --sombra-1: 0 0 0 1px oklch(0.92 0.01 250 / 0.08), 0 1px 2px oklch(0 0 0 / 0.35);
  --sombra-2: 0 0 0 1px oklch(0.92 0.01 250 / 0.08), 0 1px 2px oklch(0 0 0 / 0.35), 0 10px 26px -12px oklch(0 0 0 / 0.5), 0 30px 60px -30px oklch(0 0 0 / 0.55);
  --sombra-flotante: 0 0 0 1px oklch(0.92 0.01 250 / 0.14), 0 14px 34px -10px oklch(0 0 0 / 0.55), 0 40px 80px -24px oklch(0 0 0 / 0.6);
  --tecla: linear-gradient(180deg, oklch(0.265 0.012 245) 0%, oklch(0.232 0.011 245) 100%);
  --tecla-encima: linear-gradient(180deg, oklch(0.30 0.014 240) 0%, oklch(0.262 0.012 240) 100%);
  --tecla-sombra: inset 0 1px 0 oklch(1 0 0 / 0.08), 0 0 0 1px oklch(1 0 0 / 0.07), 0 1px 2px oklch(0 0 0 / 0.4);
  --campo-sombra: inset 0 1px 2px oklch(0 0 0 / 0.3);
  --img-cab: image-set(url("fondos/cabecera-oscuro.avif") type("image/avif"), url("fondos/cabecera-oscuro.webp") type("image/webp"));
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-size-adjust: 100%; scrollbar-color: var(--trazo-fuerte) transparent; }
/* Fondo: el papel con dos luces muy tenues, turquesa arriba a la derecha y cobre abajo a la izquierda. */
body { margin: 0; color: var(--tinta); font: 400 var(--t-m)/1.5 var(--sans);
  background: radial-gradient(1100px 520px at 100% -8%, color-mix(in oklch, var(--entra) 7%, transparent), transparent 70%),
    radial-gradient(900px 520px at -6% 108%, color-mix(in oklch, var(--sale) 5%, transparent), transparent 70%), var(--papel);
  background-attachment: fixed; }
h1, h2, h3 { margin: 0; font-weight: 700; text-wrap: balance; letter-spacing: -0.008em; }
h2 { font-size: var(--t-l); }
h3 { font-size: var(--t-m); }
p { margin: 0 0 0.75em; text-wrap: pretty; }
a { color: var(--marca-texto); text-underline-offset: 2px; }
code, kbd { font-family: var(--mono); font-size: 0.92em; background: var(--hundido); padding: 0.1em 0.35em; border-radius: var(--r-s); }
kbd { box-shadow: inset 0 -1px 0 var(--trazo-fuerte), 0 0 0 1px var(--trazo); }
pre { font: var(--t-s)/1.55 var(--mono); background: var(--hundido); padding: 12px 14px; border-radius: var(--r-m); overflow-x: auto; margin: 0 0 1em; box-shadow: var(--campo-sombra); }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.cifra, td.num, .num { font-variant-numeric: tabular-nums; }
.oculto { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--hoja); padding: 8px 12px; border-radius: var(--r-m); box-shadow: var(--sombra-flotante); }
.saltar:focus { left: 8px; }
.tenue { color: var(--tinta-3); }
.pequeno { font-size: var(--t-s); }
[hidden] { display: none !important; }

/* ---- marco ---- */
.marco { display: grid; grid-template-columns: 224px minmax(0, 1fr); min-height: 100dvh; }
.lateral { position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; background: var(--lateral); box-shadow: inset -1px 0 0 var(--trazo-suave); }
.lateral-marca { display: flex; align-items: center; gap: 10px; padding: 16px 16px 14px; }
.sello { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-m); background: var(--marca); color: var(--marca-tinta); font-weight: 650; font-size: var(--t-m); flex: none; box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.22), 0 1px 2px oklch(0 0 0 / 0.2); }
.lateral-nombre { font-weight: 600; font-size: var(--t-m); line-height: 1.25; }
.nav { flex: 1; overflow-y: auto; padding: 4px 10px 12px; scrollbar-width: thin; }
.nav-seccion { margin: 18px 10px 5px; font-size: var(--t-xs); font-weight: 700; color: var(--tinta-3); letter-spacing: 0.06em; text-transform: uppercase; }
.nav-enlace { position: relative; display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 10px; border-radius: var(--r-m); color: var(--tinta-2); text-decoration: none; font-weight: 500;
  transition: background-color 150ms var(--salida), color 150ms var(--salida), box-shadow 150ms var(--salida); }
.nav-enlace:hover { background: color-mix(in oklch, var(--hoja) 70%, transparent); color: var(--tinta); }
/* La pantalla actual: una tecla levantada, como las del marcador; el icono toma la marca. */
.nav-enlace[aria-current="page"] { background: var(--hoja); color: var(--tinta); font-weight: 600; box-shadow: var(--sombra-1), var(--brillo); }
.nav-enlace[aria-current="page"] .icono { color: var(--marca-texto); opacity: 1; }
.nav-enlace .icono { flex: none; opacity: 0.8; transition: opacity 150ms var(--salida); }
.nav-enlace:hover .icono { opacity: 1; }
.nav-cuenta { margin-left: auto; display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--marca); color: var(--marca-tinta); font: 600 var(--t-xs)/1 var(--sans); box-shadow: 0 0 0 2px var(--lateral); }
.lateral-pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 12px 12px 16px; border-top: 1px solid var(--trazo-suave); }
.lateral-pie form { margin: 0; }
.quien { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.quien strong { font-weight: 600; font-size: var(--t-s); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quien small { color: var(--tinta-3); font-size: var(--t-xs); }
.principal { min-width: 0; display: flex; flex-direction: column; }
/* Cabecera de página: título con su sección encima y, a la derecha, los anillos de la espera en sordina. */
.barra { position: sticky; top: 0; z-index: 10; isolation: isolate; display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 12px 28px;
  background: color-mix(in oklch, var(--papel) 90%, transparent); border-bottom: 1px solid var(--trazo-suave); -webkit-backdrop-filter: saturate(1.2) blur(8px); backdrop-filter: saturate(1.2) blur(8px); }
/* Los anillos quedan entre el título y las acciones: a la derecha, ampliados y con las orillas fundidas. */
.barra::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--img-cab) 74% 50% / auto 190% no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 22%, #000 52%, #000 86%, transparent 100%); mask-image: linear-gradient(90deg, transparent 22%, #000 52%, #000 86%, transparent 100%); opacity: 0.95; }
:root[data-theme="dark"] .barra::before { opacity: 0.72; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .barra::before { opacity: 0.72; } }
.barra-titulo { flex: 1; min-width: 0; }
.barra-seccion { margin: 0 0 1px; font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--entra-texto); }
.barra h1 { font-size: var(--t-2xl); line-height: 1.15; letter-spacing: -0.015em; }
.barra-sub { margin: 3px 0 0; color: var(--tinta-3); font-size: var(--t-s); }
.barra-acciones { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.selector-cuenta { margin: 0; }
.enlace-manual { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 10px; border-radius: var(--r-m); color: var(--tinta-2); font-size: var(--t-s); text-decoration: none; white-space: nowrap;
  background: color-mix(in oklch, var(--hoja) 60%, transparent); box-shadow: inset 0 0 0 1px var(--trazo-suave); transition: background-color 150ms var(--salida), color 150ms var(--salida); }
.enlace-manual:hover { background: var(--hoja); color: var(--tinta); }
@media (max-width: 640px) { .texto-largo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
.contenido { width: 100%; max-width: 1280px; padding: 24px 28px 56px; }
.contenido-completo { max-width: none; }
.contenido:focus { outline: none; }
.barra .solo-movil { display: none; }
[data-theme="dark"] .si-claro, :root:not([data-theme]) .si-oscuro { display: none; }
[data-theme="light"] .si-oscuro { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .si-oscuro { display: inline; } :root:not([data-theme]) .si-claro { display: none; } }

/* ---- controles (los del marcador: acción con brillo, teclas con relieve, campos hundidos) ---- */
.boton, .boton-icono { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: 600 var(--t-m)/1 var(--sans); border-radius: var(--r-m); cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color 150ms var(--salida), color 150ms var(--salida), box-shadow 150ms var(--salida), filter 150ms var(--salida), transform 120ms var(--salida); }
.boton { min-height: 36px; padding: 0 16px; border: 1px solid transparent; color: var(--marca-tinta);
  background: linear-gradient(180deg, color-mix(in oklch, var(--marca) 86%, white) 0%, var(--marca) 100%);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.22), 0 1px 2px oklch(0 0 0 / 0.2), 0 6px 16px -8px color-mix(in oklch, var(--marca) 75%, transparent); }
.boton:hover { filter: brightness(1.07); }
.boton:active, .boton-icono:active { transform: scale(0.97); }
.boton-sutil { color: var(--tinta); background: var(--tecla); box-shadow: var(--tecla-sombra); }
.boton-sutil:hover { background: var(--tecla-encima); filter: none; }
.boton-peligro { color: oklch(0.99 0.005 85); background: linear-gradient(180deg, color-mix(in oklch, var(--peligro) 86%, white) 0%, var(--peligro) 100%);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.2), 0 1px 2px oklch(0 0 0 / 0.2), 0 6px 16px -8px color-mix(in oklch, var(--peligro) 70%, transparent); }
.boton-texto { background: none; color: var(--marca-texto); border-color: transparent; padding: 0 8px; box-shadow: none; }
.boton-texto:hover { background: var(--hundido); filter: none; }
.boton-pequeno { min-height: 30px; padding: 0 11px; font-size: var(--t-s); border-radius: var(--r-s); }
.boton[disabled], .boton[aria-disabled="true"] { opacity: 0.45; pointer-events: none; box-shadow: none; filter: saturate(0.4); }
.boton[aria-busy="true"] { cursor: progress; opacity: 0.7; }
.boton-icono { width: 36px; height: 36px; border: 1px solid transparent; background: none; color: var(--tinta-2); }
.boton-icono:hover { background: color-mix(in oklch, var(--hoja) 80%, transparent); color: var(--tinta); box-shadow: var(--sombra-1); }
@media (hover: none) { .boton-icono:hover { box-shadow: none; } }
input:not([type]), input[type=text], input[type=search], input[type=password], input[type=email], input[type=url], input[type=tel], input[type=number], input[type=date], input[type=datetime-local], input[type=time], input[type=color], select, textarea {
  font: 400 var(--t-m)/1.3 var(--sans); color: var(--tinta); background: var(--hundido); border: 1px solid var(--trazo); border-radius: var(--r-m); min-height: 36px; padding: 7px 11px; width: 100%;
  box-shadow: var(--campo-sombra); transition: border-color 150ms var(--salida), background-color 150ms var(--salida), box-shadow 150ms var(--salida); }
input:hover, select:hover, textarea:hover { border-color: var(--trazo-fuerte); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--foco); background: var(--hoja); box-shadow: 0 0 0 3px color-mix(in oklch, var(--foco) 24%, transparent); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--peligro); }
::placeholder { color: var(--tinta-4); }
input[type=color] { padding: 2px; width: 52px; }
input[type=file] { font: 400 var(--t-s)/1.3 var(--sans); color: var(--tinta-2); max-width: 100%; }
input[type=file]::file-selector-button { margin-right: 10px; min-height: 32px; padding: 0 12px; border: 0; border-radius: var(--r-m); font: 600 var(--t-s)/1 var(--sans); color: var(--tinta);
  background: var(--tecla); box-shadow: var(--tecla-sombra); cursor: pointer; transition: background-color 150ms var(--salida); }
input[type=file]::file-selector-button:hover { background: var(--tecla-encima); }
input[type=checkbox], input[type=radio] { accent-color: var(--marca); width: 16px; height: 16px; margin: 0; }
textarea { min-height: 80px; resize: vertical; font-family: var(--mono); font-size: var(--t-s); }
label { font-weight: 600; font-size: var(--t-s); color: var(--tinta-2); }
.campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.campo small { color: var(--tinta-3); font-size: var(--t-xs); font-weight: 400; }
.casilla { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-m); color: var(--tinta); font-weight: 400; min-height: 32px; }
.rejilla-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px 16px; }
.rejilla-form .ancho { grid-column: 1 / -1; }
.form-acciones { display: flex; gap: 8px; align-items: center; margin-top: 18px; flex-wrap: wrap; }
.filtros { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; padding: 14px 16px; margin-bottom: 18px; background: var(--hoja); border-radius: var(--r-l); box-shadow: var(--sombra-1), var(--brillo); }
.filtros .campo { width: auto; flex: 1 1 140px; max-width: 220px; }
.filtros .filtros-acciones { display: flex; gap: 6px; margin-left: auto; }

/* ---- superficies ---- */
.panel { position: relative; background: var(--hoja); border-radius: var(--r-l); margin-bottom: 22px; box-shadow: var(--sombra-2), var(--brillo); }
.panel-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 18px 13px; border-bottom: 1px solid var(--trazo-suave); flex-wrap: wrap;
  border-radius: var(--r-l) var(--r-l) 0 0; background: linear-gradient(180deg, color-mix(in oklch, var(--hundido) 45%, var(--hoja)) 0%, var(--hoja) 100%); }
.panel-cab h2 { font-size: var(--t-l); font-weight: 700; }
.panel-cab p { margin: 0; color: var(--tinta-3); font-size: var(--t-s); }
.panel-cuerpo { padding: 18px; }
/* Lo destacado lleva el filo luminoso turquesa → cobre de la tarjeta del marcador. */
.destacado, .dialogo, .lateral-marca-producto { position: relative; }
.destacado::before, .dialogo::before, .lateral-marca-producto::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: var(--filo);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.seccion { margin: 30px 0 12px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.seccion:first-child { margin-top: 0; }
.desplegable { border-top: 1px solid var(--trazo-suave); }
.desplegable > summary { cursor: pointer; padding: 12px 18px; font-weight: 600; list-style: none; display: flex; align-items: center; gap: 8px; border-radius: var(--r-m); transition: background-color 150ms var(--salida); }
.desplegable > summary:hover { background: color-mix(in oklch, var(--hundido) 60%, transparent); }
.desplegable > summary::-webkit-details-marker { display: none; }
.desplegable > summary::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform 150ms var(--salida); }
.desplegable[open] > summary::before { transform: rotate(45deg); }
/* Diálogos (los de cada pantalla toman de aquí el filo, el velo y la entrada). */
.dialogo { border-radius: var(--r-xl) !important; box-shadow: var(--sombra-flotante), var(--brillo) !important; }
.dialogo::backdrop { background: oklch(0.18 0.02 250 / 0.42); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.dialogo[open] { animation: icia-aparece 200ms var(--salida); }
@keyframes icia-aparece { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }

/* ---- tablas ---- */
/* position: relative: los textos ocultos (.oculto, absolutos) de una tabla ancha se quedan dentro del marco que
 * desplaza; si no, se salen y ensanchan la página entera en el móvil (Estados y Números a 390 px). */
.tabla-marco { overflow-x: auto; position: relative; scrollbar-width: thin; }
.tabla { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-s); }
.tabla th { text-align: left; font-weight: 700; color: var(--tinta-3); font-size: var(--t-xs); letter-spacing: 0.05em; text-transform: uppercase; padding: 10px 12px; white-space: nowrap;
  background: color-mix(in oklch, var(--hundido) 55%, var(--hoja)); box-shadow: inset 0 -1px 0 var(--trazo); position: sticky; top: 0; z-index: 1; }
.tabla td { padding: 9px 12px; border-bottom: 1px solid var(--trazo-suave); vertical-align: middle; transition: background-color 120ms; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover td { background: color-mix(in oklch, var(--entra) 5%, var(--hundido) 45%); }
.tabla th.num, .tabla td.num { text-align: right; }
.tabla td.num, .tabla td.cifra { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabla td.acciones { text-align: right; white-space: nowrap; }
.tabla a.fila-enlace { color: inherit; text-decoration: none; font-weight: 600; }
.tabla a.fila-enlace:hover { color: var(--marca-texto); text-decoration: underline; }
.tabla .inactivo td { color: var(--tinta-3); } /* atenuada pero legible (contraste de 4,5:1) */
/* En escritorio, las tablas largas desplazan dentro de su marco y la cabecera se queda pegada arriba. */
@media (min-width: 901px) and (min-height: 640px) {
  .panel > .tabla-marco, .panel-cuerpo > .tabla-marco { max-height: max(420px, calc(100dvh - 230px)); overflow-y: auto; overscroll-behavior: contain; }
}
.paginador { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 10px 18px; border-top: 1px solid var(--trazo-suave); }
.paginador-cuenta { margin-right: auto; color: var(--tinta-3); font-size: var(--t-s); font-variant-numeric: tabular-nums; }

/* ---- piezas pequeñas ---- */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 7px; border-radius: 999px; font-size: var(--t-s); font-weight: 500; white-space: nowrap;
  background: color-mix(in oklch, var(--chip) 14%, var(--hoja)); color: var(--tinta); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--chip) 22%, transparent); }
.chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--chip); flex: none; box-shadow: 0 0 0 2px color-mix(in oklch, var(--chip) 22%, transparent); }
.etiqueta { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: var(--r-s); font-size: var(--t-xs); font-weight: 600; background: var(--hundido); color: var(--tinta-2); white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--trazo-suave); }
.etiqueta-ok { background: var(--ok-fondo); color: color-mix(in oklch, var(--ok) 70%, var(--tinta)); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--ok) 22%, transparent); }
.etiqueta-aviso { background: var(--aviso-fondo); color: color-mix(in oklch, var(--aviso) 45%, var(--tinta)); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--aviso) 26%, transparent); }
.etiqueta-peligro { background: var(--peligro-fondo); color: color-mix(in oklch, var(--peligro) 75%, var(--tinta)); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--peligro) 22%, transparent); }
.etiqueta-marca { background: var(--marca-suave); color: var(--marca-texto); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--marca) 22%, transparent); }
/* Avisos: con su signo delante (información, hecho, cuidado, error), dibujado con una máscara del color del texto. */
.aviso { --aviso-signo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E");
  --aviso-color: var(--entra-texto);
  position: relative; padding: 11px 16px 11px 42px; border-radius: var(--r-m); margin: 0 0 16px; background: var(--info-fondo); color: var(--tinta);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--aviso-color) 22%, transparent); }
.aviso::before { content: ""; position: absolute; left: 14px; top: 12px; width: 18px; height: 18px; background: var(--aviso-color);
  -webkit-mask: var(--aviso-signo) center / contain no-repeat; mask: var(--aviso-signo) center / contain no-repeat; }
.aviso-ok { background: var(--ok-fondo); --aviso-color: var(--ok);
  --aviso-signo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.5 2.7 2.7L16 9.8'/%3E%3C/svg%3E"); }
.aviso-error { background: var(--peligro-fondo); --aviso-color: var(--peligro);
  --aviso-signo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m9 9 6 6M15 9l-6 6'/%3E%3C/svg%3E"); }
.aviso-aviso { background: var(--aviso-fondo); --aviso-color: color-mix(in oklch, var(--aviso) 80%, var(--tinta));
  --aviso-signo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 21.5 20h-19z'/%3E%3Cpath d='M12 10v4.5M12 17.2h.01'/%3E%3C/svg%3E"); }
/* Estados vacíos: el objeto de su área (Nano Banana Pro) sobre una luz suave, el título y qué hacer. */
.vacio { padding: 34px 24px 32px; text-align: center; color: var(--tinta-2); max-width: 540px; margin: 0 auto; }
.vacio::before { content: ""; display: block; width: 120px; height: 104px; margin: 0 auto 12px;
  background: var(--vacio-img, url("fondos/vacio-datos-160.webp")) center 0 / 96px no-repeat,
    radial-gradient(closest-side, color-mix(in oklch, var(--entra) 16%, transparent), transparent) center 70% / 120px 56px no-repeat; }
.vacio-titulo { font-weight: 700; color: var(--tinta); font-size: var(--t-l); margin-bottom: 6px; }
.vacio p:last-of-type { margin-bottom: 0; }
.vacio .boton, .vacio .boton-sutil { margin-top: 14px; }
body:is([data-pagina="llamadas"], [data-pagina="calidad"], [data-pagina="directo"], [data-pagina="sala"], [data-pagina="flujo"], [data-pagina="coaching"]) { --vacio-img: url("fondos/vacio-llamadas-160.webp"); }
body:is([data-pagina="campanas"], [data-pagina="campanas_vivo"], [data-pagina="leads"], [data-pagina="listas"], [data-pagina="rellamadas"], [data-pagina="no_llamar"], [data-pagina="informes_campana"]) { --vacio-img: url("fondos/vacio-campanas-160.webp"); }
body:is([data-pagina="novedades"], [data-pagina="auditoria"], [data-pagina="mensajes"], [data-pagina="cumplimiento"]) { --vacio-img: url("fondos/vacio-avisos-160.webp"); }
body:is([data-pagina="agentes"], [data-pagina="usuarios"], [data-pagina="turnos"], [data-pagina="objetivos"], [data-pagina="colas"]) { --vacio-img: url("fondos/vacio-equipo-160.webp"); }
body:is([data-pagina="estados"], [data-pagina="numeros"], [data-pagina="esquemas"], [data-pagina="tipificaciones"], [data-pagina="guiones"], [data-pagina="locuciones"], [data-pagina="integracion"], [data-pagina="ia"]) { --vacio-img: url("fondos/vacio-ajustes-160.webp"); }
.secreto { display: flex; gap: 8px; align-items: center; }
.secreto code { flex: 1; padding: 8px 10px; font-size: var(--t-s); word-break: break-all; user-select: all; }
.dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; font-size: var(--t-s); }
.dl dt { color: var(--tinta-3); }
.dl dd { margin: 0; font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; }

/* ---- cifras en línea: una franja con relieve, separadas por trazos (no tarjetas) ---- */
.cifras { display: flex; flex-wrap: wrap; gap: 10px 0; margin: 0 0 22px; padding: 14px 6px; background: var(--hoja); border-radius: var(--r-l); box-shadow: var(--sombra-1), var(--brillo); }
.cifra-bloque { display: flex; flex-direction: column; padding: 0 22px; }
.cifra-bloque + .cifra-bloque { box-shadow: inset 1px 0 0 var(--trazo-suave); }
.cifra-bloque dt { font-size: var(--t-xs); color: var(--tinta-3); font-weight: 600; order: 2; }
.cifra-bloque dd { margin: 0; font-size: var(--t-2xl); font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: -0.015em; }
.cifra-bloque.foco dd { font-size: var(--t-3xl); }
.cifra-bloque.alerta dd { color: color-mix(in oklch, var(--peligro) 85%, var(--tinta)); }

/* ---- login ---- */
.acceso { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.acceso-caja { width: min(380px, 100%); }
.acceso-marca { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.acceso-marca .sello { width: 36px; height: 36px; font-size: var(--t-l); }
.acceso-marca strong { font-size: var(--t-l); font-weight: 600; }
.acceso h1 { font-size: var(--t-2xl); margin-bottom: 4px; }
.acceso form { display: grid; gap: 14px; margin-top: 22px; }
.acceso .boton { min-height: 42px; }

@media (max-width: 900px) {
  .marco { grid-template-columns: minmax(0, 1fr); }
  .lateral { position: fixed; inset: 0 auto 0 0; width: 268px; z-index: 40; transform: translateX(-100%); transition: transform 240ms var(--salida); box-shadow: var(--sombra-flotante); }
  .lateral[data-abierto="true"] { transform: none; }
  .barra .solo-movil { display: inline-flex; }
  .barra { padding: 10px 16px; flex-wrap: wrap; row-gap: 6px; min-height: 60px; }
  .barra::before { -webkit-mask-image: linear-gradient(90deg, transparent 10%, #000 90%); mask-image: linear-gradient(90deg, transparent 10%, #000 90%); opacity: 0.6; background-size: auto 72px; background-position: right top; }
  .barra h1 { font-size: var(--t-xl); }
  .barra-titulo { flex: 1 1 60%; }
  .barra-acciones { order: 3; width: 100%; justify-content: flex-start; }
  /* El selector de cuenta (superadmin) se estrecha para que el manual y el tema quepan en la misma fila. */
  .selector-cuenta { flex: 1 1 120px; min-width: 0; }
  .selector-cuenta select { width: 100%; min-width: 0; text-overflow: ellipsis; }
  .contenido { padding: 16px 16px 40px; }
  .filtros .campo { max-width: none; flex-basis: 45%; }
  .cifra-bloque { padding: 0 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
@media (forced-colors: active) {
  .chip i, .sello { forced-color-adjust: none; }
  .panel, .filtros, .cifras { border: 1px solid CanvasText; }
  .barra::before, .destacado::before, .dialogo::before, .lateral-marca-producto::before { display: none; }
}
@media print {
  body { background: none; }
  .barra::before { display: none; }
  .panel, .cifras, .filtros { box-shadow: none; border: 1px solid #ccc; }
}