/* Centralit.IA · relieve (25/10/2026, recorrido de diseño, fase 1).
 * Sube la base común al lenguaje del marcador del puesto de IberCall.IA y de las entradas nuevas: profundidad con sombras
 * en capas y un brillo superior, superficies con luz cenital, campos hundidos con anillo de foco, botones con volumen,
 * lo destacado en cristal con el filo turquesa→cobre, un lienzo propio detrás del contenido (Nano Banana Pro, ver
 * docs/centralitia/recorrido_diseno/graficos/) y estados vacíos ilustrados.
 * Solo presentación: ni un selector cambia lo que hace una pantalla. Se carga DESPUÉS de centralitia.css (y de casa.css en
 * el hub) en shell.php, centralitia_hub_shell.php y las páginas clásicas sin sesión (entrar, recuperar, restablecer,
 * invitación). Movimiento: solo color, sombra y transform, 150-200 ms con salida fuerte; nada con reduced-motion. */

:root {
  --c-radio-ficha: 14px;
  --c-filo: linear-gradient(135deg, color-mix(in oklch, var(--ibk-teal-400) 62%, transparent), oklch(1 0 0 / 0) 36%,
    oklch(1 0 0 / 0) 64%, color-mix(in oklch, var(--ibk-naranja-500) 55%, transparent));
  --c-sombra: 0 0 0 1px oklch(0.3 0.02 230 / 0.06), 0 1px 2px -1px oklch(0.3 0.02 230 / 0.08), 0 4px 12px -4px oklch(0.3 0.02 230 / 0.08);
  --c-sombra-alta: 0 0 0 1px oklch(0.3 0.02 230 / 0.06), 0 1px 2px oklch(0.3 0.02 230 / 0.05), 0 8px 18px -6px oklch(0.3 0.02 230 / 0.1),
    0 24px 48px -24px oklch(0.3 0.02 230 / 0.18);
  --c-brillo: inset 0 1px 0 oklch(1 0 0 / 0.75);
  --c-luz: linear-gradient(180deg, oklch(1 0 0 / 0.55), oklch(1 0 0 / 0) 140px);
  --c-cristal: linear-gradient(180deg, oklch(1 0 0 / 0.86) 0%, oklch(0.985 0.004 220 / 0.92) 100%);
  --c-cristal-sombra: inset 0 1px 0 oklch(1 0 0 / 0.9), 0 1px 2px oklch(0.3 0.03 230 / 0.1), 0 14px 34px -12px oklch(0.3 0.03 230 / 0.2),
    0 40px 80px -30px oklch(0.3 0.03 230 / 0.22);
  --c-hundido: oklch(0.985 0.003 220);
  --c-hundido-sombra: inset 0 1px 2px oklch(0.3 0.02 230 / 0.07);
  --c-anillo: 0 0 0 1px var(--c-acento), 0 0 0 4px color-mix(in oklch, var(--c-acento) 20%, transparent);
  --c-boton-sombra: inset 0 1px 0 oklch(1 0 0 / 0.22), 0 1px 2px oklch(0.2 0.02 230 / 0.22), 0 8px 18px -10px color-mix(in oklch, var(--boton-fondo) 80%, transparent);
  --c-img-lienzo: image-set(url("/assets/centralitia_graficos/lienzo-claro.avif") type("image/avif"), url("/assets/centralitia_graficos/lienzo-claro.webp") type("image/webp"));
  --c-img-lienzo-movil: image-set(url("/assets/centralitia_graficos/lienzo-claro-960.avif") type("image/avif"), url("/assets/centralitia_graficos/lienzo-claro-960.webp") type("image/webp"));
  --c-lienzo-mezcla: multiply;
  --c-lienzo-op: .9;
  --c-grano-op: .04;
  --campo-fondo: var(--c-hundido);
  --c-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%2346565f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
:root[data-bs-theme="dark"] {
  --c-sombra: 0 0 0 1px oklch(1 0 0 / 0.07), 0 1px 2px oklch(0 0 0 / 0.3), 0 10px 24px -14px oklch(0 0 0 / 0.6);
  --c-sombra-alta: 0 0 0 1px oklch(1 0 0 / 0.08), 0 2px 4px oklch(0 0 0 / 0.25), 0 24px 48px -20px oklch(0 0 0 / 0.65);
  --c-brillo: inset 0 1px 0 oklch(1 0 0 / 0.06);
  --c-luz: linear-gradient(180deg, oklch(1 0 0 / 0.035), oklch(1 0 0 / 0) 160px);
  --c-cristal: linear-gradient(180deg, oklch(0.25 0.014 230 / 0.78) 0%, oklch(0.18 0.012 230 / 0.86) 100%);
  --c-cristal-sombra: inset 0 1px 0 oklch(1 0 0 / 0.08), 0 1px 2px oklch(0 0 0 / 0.35), 0 14px 34px -10px oklch(0 0 0 / 0.55),
    0 40px 80px -24px oklch(0 0 0 / 0.6);
  --c-hundido: oklch(0.17 0.01 230);
  --c-hundido-sombra: inset 0 1px 2px oklch(0 0 0 / 0.35);
  --c-img-lienzo: image-set(url("/assets/centralitia_graficos/lienzo-oscuro.avif") type("image/avif"), url("/assets/centralitia_graficos/lienzo-oscuro.webp") type("image/webp"));
  --c-img-lienzo-movil: image-set(url("/assets/centralitia_graficos/lienzo-oscuro-960.avif") type("image/avif"), url("/assets/centralitia_graficos/lienzo-oscuro-960.webp") type("image/webp"));
  --c-lienzo-mezcla: screen;
  --c-lienzo-op: .5;
  --c-grano-op: .06;
  --c-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23b3bdc5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ===== Fondo: grano muy suave y el lienzo de hilos arriba a la derecha ===== */
body.c-cuerpo:not(.casa)::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url("/assets/centralitia_graficos/grano.webp") 0 0 / 256px repeat; opacity: var(--c-grano-op); mix-blend-mode: soft-light; }
.c-cuerpo-interior { position: relative; }
.c-cuerpo-interior::before { content: ""; position: absolute; top: 0; right: 0; z-index: -1; width: min(1500px, 100%); aspect-ratio: 1600 / 679;
  pointer-events: none; background: var(--c-img-lienzo) right top / 100% auto no-repeat; mix-blend-mode: var(--c-lienzo-mezcla); opacity: var(--c-lienzo-op);
  -webkit-mask: linear-gradient(180deg, #000 30%, transparent 75%); mask: linear-gradient(180deg, #000 30%, transparent 75%); }
/* En el hub, la portada del Inicio y las pantallas con banda de área ya llevan su imagen: no se duplica. */
body.casa[data-area="inicio"] .c-cuerpo-interior::before, body.casa[data-tarea=""] .c-cuerpo-interior::before,
body.casa[data-tarea="usuarios"] .c-cuerpo-interior::before { content: none; }
@media (max-width: 760px) { .c-cuerpo-interior::before { width: 100%; background-image: var(--c-img-lienzo-movil); } }

/* ===== Cabeceras: luz cenital y el filo de la familia (turquesa → cobre) en el borde de abajo ===== */
.c-cabecera { background: linear-gradient(180deg, oklch(1 0 0 / 0.045), oklch(1 0 0 / 0) 70%), var(--c-cabecera);
  box-shadow: inset 0 -1px 0 oklch(1 0 0 / 0.06), 0 8px 24px -16px oklch(0 0 0 / 0.6); }
.c-cabecera::after, .casa-barra::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, oklch(1 0 0 / 0) 4%, color-mix(in oklch, var(--ibk-teal-400) 55%, transparent) 32%,
    color-mix(in oklch, var(--ibk-naranja-500) 50%, transparent) 70%, oklch(1 0 0 / 0) 96%); }

/* ===== Menú lateral ===== */
.c-nav:not(.casa-submenu) { background: linear-gradient(180deg, var(--c-lateral), color-mix(in srgb, var(--c-lateral) 70%, var(--c-fondo))); }
.c-nav a { transition: background-color var(--c-rapido) var(--c-ease), color var(--c-rapido) var(--c-ease), box-shadow var(--c-rapido) var(--c-ease); }
.c-nav a[aria-current="page"] { background: linear-gradient(90deg, var(--nav-activo-fondo), color-mix(in srgb, var(--nav-activo-fondo) 45%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--nav-activo-texto) 14%, transparent), var(--c-brillo); }

/* ===== Título de página y de bloque: baldosas con volumen ===== */
.c-ico-h1 { background: linear-gradient(160deg, color-mix(in oklch, var(--c-acento) 74%, white), var(--c-acento) 72%);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.3), 0 1px 2px oklch(0.2 0.02 230 / 0.2), 0 8px 18px -8px color-mix(in oklch, var(--c-acento) 75%, transparent); }
:root[data-bs-theme="dark"] .c-ico-h1 { background: linear-gradient(160deg, color-mix(in oklch, var(--c-acento) 88%, white), var(--c-acento) 72%); }
.c-ico-h { box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--c-acento) 16%, transparent), var(--c-brillo); }
.c-titulo h1 { font-weight: 700; letter-spacing: -.022em; }
.c-titulo { margin-bottom: var(--c-esp-4); }

/* ===== Fichas, listas, tablas y cifras: superficie con luz y sombra en capas (el borde ya no hace de relieve) ===== */
.c-ficha, .c-persona, .c-kpi { background: var(--c-luz), var(--ficha-fondo); border-color: transparent; box-shadow: var(--c-sombra), var(--c-brillo); }
.c-lista, .c-tabla { border-color: transparent; box-shadow: var(--c-sombra), var(--c-brillo); }
.c-tabla-envoltorio { padding: 2px; margin: -2px; }
.c-lista a, .c-lista .c-fila, .c-tabla tbody tr { transition: background-color var(--c-rapido) var(--c-ease); }
.c-tabla tbody tr:hover { background: color-mix(in srgb, var(--lista-fila-hover) 60%, transparent); }
.c-tabla th { background: linear-gradient(180deg, var(--c-superficie-2), color-mix(in srgb, var(--c-superficie-2) 55%, var(--c-superficie))); letter-spacing: .01em; }
.c-tabla td { font-variant-numeric: tabular-nums; }
.c-kpi strong { display: block; margin-top: 2px; font-size: 1.625rem; letter-spacing: -.025em; }

/* ===== Lo destacado: cristal con el filo turquesa → cobre (estados vacíos, la tarjeta de entrada, el detalle del estado,
 *       y cualquier bloque que lleve .c-destacada) ===== */
.c-vacio, .c-destacada, .c-acceso .c-ficha { position: relative; isolation: isolate; background: var(--c-cristal); box-shadow: var(--c-cristal-sombra); border-color: transparent; }
.c-vacio::after, .c-destacada::after, .c-acceso .c-ficha::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px;
  pointer-events: none; background: var(--c-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); }

/* Estado vacío ilustrado: el objeto a la izquierda y el texto a su lado (encima en el móvil). */
.c-vacio { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 24px; align-items: center; max-width: 72ch;
  padding: var(--c-esp-8); border-radius: var(--c-radio-ficha); }
.c-vacio::before { content: ""; grid-column: 1; grid-row: 1 / span 12; align-self: center; width: 112px; aspect-ratio: 1;
  background: image-set(url("/assets/centralitia_graficos/vacio-160.webp") 1x, url("/assets/centralitia_graficos/vacio.webp") 2x) center / contain no-repeat; }
.c-vacio > * { grid-column: 2; }
.c-vacio > :last-child { margin-bottom: 0; }
@media (max-width: 560px) {
  .c-vacio { grid-template-columns: minmax(0, 1fr); padding: var(--c-esp-6); }
  .c-vacio::before { grid-row: auto; width: 88px; margin-bottom: 12px; }
  .c-vacio > * { grid-column: 1; }
}

/* Detalle de «Qué cambia» (sobre la barra oscura): cristal oscuro con filo, en los dos temas. */
.c-estado-detalle { background: linear-gradient(180deg, oklch(0.25 0.014 230 / 0.96), oklch(0.18 0.012 230 / 0.98)); border-radius: 16px;
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.08), 0 0 0 1px oklch(1 0 0 / 0.08), 0 18px 50px oklch(0 0 0 / 0.45); }

/* ===== Botones: volumen en el primario, brillo en el secundario ===== */
.c-boton { background: linear-gradient(180deg, color-mix(in oklch, var(--boton-fondo) 84%, white) 0%, var(--boton-fondo) 100%); box-shadow: var(--c-boton-sombra);
  transition: background-color var(--c-rapido) var(--c-ease), box-shadow var(--c-rapido) var(--c-ease), filter var(--c-rapido) var(--c-ease), transform var(--c-rapido) var(--c-ease); }
.c-boton:hover { background: linear-gradient(180deg, color-mix(in oklch, var(--boton-fondo-hover) 84%, white) 0%, var(--boton-fondo-hover) 100%); }
:root[data-bs-theme="dark"] .c-boton { background: linear-gradient(180deg, color-mix(in oklch, var(--boton-fondo) 90%, white) 0%, var(--boton-fondo) 100%); }
:root[data-bs-theme="dark"] .c-boton:hover { background: linear-gradient(180deg, color-mix(in oklch, var(--boton-fondo-hover) 90%, white) 0%, var(--boton-fondo-hover) 100%); }
.c-boton-secundario { background: linear-gradient(180deg, var(--c-superficie), color-mix(in srgb, var(--c-superficie) 92%, var(--c-superficie-2)));
  box-shadow: var(--c-brillo), 0 1px 2px oklch(0.2 0.02 230 / 0.07);
  transition: background-color var(--c-rapido) var(--c-ease), border-color var(--c-rapido) var(--c-ease), transform var(--c-rapido) var(--c-ease); }
.c-boton-secundario:hover { background: var(--c-superficie-2); border-color: color-mix(in oklch, var(--c-acento) 40%, var(--c-borde-fuerte)); }
.c-boton-peligro { box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--c-error) 22%, transparent); }
.c-boton:disabled, .c-boton-secundario:disabled { box-shadow: none; filter: saturate(.6); }

/* ===== Campos: hundidos, con el borde que se aviva al pasar y anillo de foco ===== */
.c-campo input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]), .c-campo select, .c-campo textarea,
.c-buscador input[type=search], .c-buscador select, .c-buscador input[type=date] {
  background-color: var(--campo-fondo); box-shadow: var(--c-hundido-sombra);
  transition: border-color var(--c-rapido) var(--c-ease), box-shadow var(--c-rapido) var(--c-ease), background-color var(--c-rapido) var(--c-ease); }
.c-campo input:not([type="checkbox"]):not([type="radio"]):hover, .c-campo select:hover, .c-campo textarea:hover,
.c-buscador input:hover, .c-buscador select:hover { border-color: color-mix(in oklch, var(--c-acento) 38%, var(--campo-borde)); }
.c-campo input:not([type="checkbox"]):not([type="radio"]):focus-visible, .c-campo select:focus-visible, .c-campo textarea:focus-visible,
.c-buscador input:focus-visible, .c-buscador select:focus-visible {
  outline: 2px solid transparent; outline-offset: 0; border-color: var(--c-acento); background-color: var(--c-superficie); box-shadow: var(--c-anillo); }
.c-campo select, .c-buscador select { appearance: none; -webkit-appearance: none; padding-right: 36px;
  background-image: var(--c-chevron); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
.c-campo select[multiple], .c-campo select[size] { background-image: none; padding-right: 12px; }
.c-campo input::placeholder, .c-campo textarea::placeholder, .c-buscador input::placeholder { color: var(--c-texto-3); opacity: 1; }

/* ===== Avisos: borde teñido, brillo y su icono delante (nunca una franja lateral) ===== */
.c-aviso { position: relative; border-color: color-mix(in oklch, currentColor 22%, transparent); box-shadow: var(--c-brillo); }
.c-aviso-ok, .c-aviso-error, .c-aviso-info, .c-aviso-atencion { padding-left: 42px; }
.c-aviso-ok::before, .c-aviso-error::before, .c-aviso-info::before, .c-aviso-atencion::before { content: ""; position: absolute; left: 14px; top: 13px; width: 18px; height: 18px;
  background: currentColor; -webkit-mask: var(--c-aviso-ico) center / contain no-repeat; mask: var(--c-aviso-ico) center / contain no-repeat; }
.c-aviso-ok { --c-aviso-ico: 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.6 2.5L16 9.5'/%3E%3C/svg%3E"); }
.c-aviso-error, .c-aviso-atencion { --c-aviso-ico: 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='M12 7.5v5.5M12 16.5h.01'/%3E%3C/svg%3E"); }
.c-aviso-info { --c-aviso-ico: 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='M12 11v5.5M12 7.5h.01'/%3E%3C/svg%3E"); }
.c-aviso-demo::before, .c-aviso-con-accion::before { top: 50%; translate: 0 -50%; }

/* ===== Pastillas y pestañas ===== */
.c-pastilla { box-shadow: inset 0 0 0 1px color-mix(in oklch, currentColor 14%, transparent); }
.c-pestanas a { position: relative; border-bottom-color: transparent !important; transition: color var(--c-rapido) var(--c-ease); }
.c-pestanas a:hover { color: var(--c-texto); }
.c-pestanas a[aria-current]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--c-acento), color-mix(in oklch, var(--c-acento) 55%, var(--ibk-naranja-500))); }

/* ===== Desplegables de bloque (summary): el chevrón en su baldosa ===== */
details.c-plegable-accion > summary { background: linear-gradient(180deg, var(--c-superficie), color-mix(in srgb, var(--c-superficie) 92%, var(--c-superficie-2)));
  box-shadow: var(--c-brillo), 0 1px 2px oklch(0.2 0.02 230 / 0.07); }

/* ===== Entradas clásicas sin sesión (entrar, recuperar, restablecer, invitación): siempre oscuras, como la del hub ===== */
body.c-acceso { min-height: 100vh; background: oklch(0.16 0.012 230) image-set(url("/assets/centralitia_graficos/acceso-h-1280.avif") type("image/avif"), url("/assets/centralitia_graficos/acceso-h-1280.webp") type("image/webp")) center / cover no-repeat fixed; }
@media (min-width: 1400px) { body.c-acceso { background-image: image-set(url("/assets/centralitia_graficos/acceso-h.avif") type("image/avif"), url("/assets/centralitia_graficos/acceso-h.webp") type("image/webp")); } }
@media (max-aspect-ratio: 4/5) { body.c-acceso { background-image: image-set(url("/assets/centralitia_graficos/acceso-v-720.avif") type("image/avif"), url("/assets/centralitia_graficos/acceso-v-720.webp") type("image/webp")); background-attachment: scroll; } }
body.c-acceso::before { content: none; }
.c-acceso .e-marca, .c-acceso .inv > .c-marca { color: var(--c-texto) !important; font-size: 1.5rem; text-shadow: 0 2px 18px oklch(0 0 0 / 0.6); }
.c-acceso .e-lema { margin: -10px 0 22px; text-align: center; color: var(--c-texto-2); font-weight: 500; text-shadow: 0 1px 12px oklch(0 0 0 / 0.7); }
.c-acceso .c-ficha { border-radius: 18px; -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .c-acceso .c-ficha { background: oklch(0.19 0.012 230 / 0.96); } }
.c-acceso .e-entrar { min-height: 46px; font-size: 1rem; }
.c-acceso .e-pie { color: var(--c-texto-2); text-shadow: 0 1px 10px oklch(0 0 0 / 0.8); }

/* ===== Hub: el submenú activo con el mismo volumen, la barra con su filo ===== */
.casa-barra { position: sticky; }

/* ===== Movimiento ===== */
@media (prefers-reduced-motion: reduce) {
  .c-nav a, .c-lista a, .c-lista .c-fila, .c-tabla tbody tr, .c-boton, .c-boton-secundario, .c-pestanas a,
  .c-campo input, .c-campo select, .c-campo textarea, .c-buscador input, .c-buscador select { transition: none; }
}
@media (forced-colors: active) {
  .c-cuerpo-interior::before, body.c-cuerpo::before, .c-vacio::after, .c-destacada::after, .c-acceso .c-ficha::after { display: none; }
}