/* Centralit.IA · shell y componentes (PLAN-061). Solo tokens; nada de colores sueltos. */
.c-cuerpo { margin:0; background:var(--c-fondo); color:var(--c-texto); font-family:var(--c-fuente); font-size:var(--c-tipo-cuerpo); line-height:1.5; min-height:100vh;
  /* En macOS el texto se pinta más gordo de lo que se diseñó; antialiased lo deja fino. */
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
/* Los títulos reparten sus líneas (nunca una palabra sola abajo) y los textos de ayuda
   evitan la palabra huérfana. `balance` solo funciona en bloques cortos, que es lo que son. */
.c-titulo h1, .c-ficha h2, .c-vacio h2, .c-titulo h1 small { text-wrap:balance; }
.c-ayuda, .c-meta, .c-vacio p, .c-aviso, .c-ficha > p { text-wrap:pretty; }
.c-cuerpo * { box-sizing:border-box; }
.c-cuerpo [hidden] { display:none !important; }
.c-visualmente-oculto { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.c-saltar { position:absolute; left:-999px; top:8px; background:var(--c-superficie); color:var(--c-acento); padding:8px 12px; border-radius:var(--c-radio-campo); z-index:20; }
.c-saltar:focus { left:12px; }
/* Un enlace de texto, en cualquier parte del contenido. Sin esto salían en el azul
   por defecto del navegador, subrayados, que es el único color de toda la pantalla
   que no viene de la marca. Va acotado a `:not([class])` y al área de contenido a
   propósito: los enlaces que SON otra cosa —un botón, una pastilla, la navegación—
   llevan clase y se quedan con la suya. */
.c-principal a:not([class]) { color:var(--c-acento-hover); text-decoration:none; }
.c-principal a:not([class]):hover { text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.c-principal a:not([class]):focus-visible { outline:none; box-shadow:var(--c-foco); border-radius:3px; }

/* Cabecera */
.c-cabecera { display:flex; align-items:center; gap:var(--c-esp-4); padding:0 var(--c-esp-6); height:60px; background:var(--c-cabecera); color:var(--c-cabecera-texto); position:sticky; top:0; z-index:10; }
.c-marca { display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none; font-weight:700; font-size:1.125rem; letter-spacing:-.01em; flex:none; }
.c-marca-simbolo { width:30px; height:30px; }
.c-marca-ia { color:var(--ibk-naranja-500); }
.c-empresa-nombre { font-weight:var(--c-peso-medio); color:var(--c-cabecera-texto-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.c-selector { display:flex; align-items:center; gap:8px; min-width:0; }
.c-selector select { min-height:38px; max-width:320px; font:inherit; font-weight:var(--c-peso-medio); color:var(--c-cabecera-texto); background:var(--ibk-carbon-700); border:1px solid #3d454e; border-radius:var(--c-radio-campo); padding:6px 10px; }
.c-selector-boton { display:none; }
/* 09/10/2026 · Buscador del selector de empresa (centralitia_selector.js): escribir filtra, y cada empresa dice su tipo. */
.c-buscaempresa { position:relative; flex:0 1 320px; min-width:150px; }
.c-buscaempresa-entrada { width:100%; min-height:38px; font:inherit; font-weight:var(--c-peso-medio); color:var(--c-cabecera-texto); background:var(--ibk-carbon-700); border:1px solid #3d454e; border-radius:var(--c-radio-campo); padding:6px 10px 6px 38px; text-overflow:ellipsis; }
.c-buscaempresa-entrada::placeholder { color:var(--c-cabecera-texto); opacity:.6; }
.c-buscaempresa-entrada:focus { outline:2px solid var(--c-foco, var(--c-acento)); outline-offset:1px; }
.c-buscaempresa > .c-buscaempresa-marca { position:absolute; left:8px; top:50%; transform:translateY(-50%); pointer-events:none; }
.c-buscaempresa-marca { flex:none; display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:6px; color:var(--c-texto-3); background:color-mix(in srgb, currentColor 14%, transparent); }
.c-buscaempresa-marca .c-ico { width:15px; height:15px; }
.c-buscaempresa > .c-buscaempresa-marca:not([class*="es-"]) { color:var(--c-cabecera-texto); opacity:.7; }
.c-buscaempresa-marca.es-demo, .c-buscaempresa-etiqueta.es-demo { color:var(--c-atencion); }
.c-buscaempresa-marca.es-secretaria, .c-buscaempresa-etiqueta.es-secretaria { color:var(--c-acento); }
.c-buscaempresa-marca.es-sinIa, .c-buscaempresa-etiqueta.es-sinIa { color:var(--c-texto-2); }
.c-buscaempresa-lista { position:absolute; z-index:60; top:calc(100% + 4px); left:0; min-width:100%; width:max-content; max-width:min(440px, 92vw); max-height:min(420px, 70vh); overflow:auto; margin:0; padding:4px; list-style:none; background:var(--c-superficie); color:var(--c-texto); border:1px solid var(--c-borde-fuerte); border-radius:var(--c-radio-ficha); box-shadow:var(--c-sombra-alta); }
.c-buscaempresa-op { display:flex; align-items:center; gap:10px; min-height:40px; padding:6px 10px; border-radius:var(--c-radio-campo); cursor:pointer; }
.c-buscaempresa-op[aria-selected="true"] { background:var(--c-acento-suave); }
.c-buscaempresa-op.es-actual .c-buscaempresa-nombre { font-weight:var(--c-peso-fuerte); }
.c-buscaempresa-nombre { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.c-buscaempresa-id { flex:none; order:9; font-size:var(--c-tipo-meta); font-variant-numeric:tabular-nums; color:var(--c-texto-2); }
.c-buscaempresa-etiqueta { flex:none; font-size:var(--c-tipo-meta); font-weight:var(--c-peso-medio); line-height:1; padding:4px 8px; border-radius:var(--c-radio-pastilla); background:color-mix(in srgb, currentColor 13%, transparent); }
.c-buscaempresa-vacia { padding:10px; color:var(--c-texto-2); font-size:var(--c-tipo-meta); }
@media (max-width: 720px) { .c-buscaempresa { flex:1 1 auto; min-width:0; } }
/* Guía de uso.
   Es un DOCUMENTO, no un tablero: se lee entera una vez y después se vuelve a un
   capítulo concreto. Por eso todo comparte una sola medida y los capítulos no van
   cada uno en su tarjeta — dieciséis cajas seguidas parten en dieciséis trozos algo
   que debería leerse del tirón. Lo que separa un capítulo del siguiente es una línea
   y el aire, que es como se separan los capítulos de un libro. */
.c-guia { max-width:72ch; counter-reset:guia-cap; }
.c-guia-indice { background:var(--ficha-fondo); border:1px solid var(--ficha-borde); border-radius:var(--ficha-radio); padding:var(--c-esp-4) var(--c-esp-3); margin:var(--c-esp-2) 0 0; }
.c-guia-indice h2 { font-size:var(--c-tipo-meta); text-transform:uppercase; letter-spacing:.08em; color:var(--c-texto-2); font-weight:var(--c-peso-fuerte); margin:0 0 var(--c-esp-2); padding:0 10px; }
.c-guia-indice ol { list-style:none; counter-reset:guia-idx; margin:0; padding:0; }
/* El número va en su propia columna y con dos cifras siempre: con la numeración de
   serie, a partir del 10 el punto empuja el texto y los títulos dejan de alinearse. */
.c-guia-indice li { counter-increment:guia-idx; position:relative; display:grid; grid-template-columns:2rem 1fr; column-gap:var(--c-esp-2); padding:7px 10px; border-radius:var(--c-radio-campo); line-height:1.45; }
.c-guia-indice li::before { content:counter(guia-idx, decimal-leading-zero); font-family:var(--c-mono); font-size:var(--c-tipo-meta); font-variant-numeric:tabular-nums; color:var(--c-texto-2); padding-top:1px; }
.c-guia-indice li:hover { background:var(--c-superficie-2); }
.c-guia-indice li:hover::before { color:var(--c-acento); }
/* El título y su resumen van los dos en la SEGUNDA columna. Sin decírselo, el resumen
   cae en una tercera columna que no existe, la rejilla lo manda a una fila nueva de
   2rem de ancho, y el texto sale a palabra por línea. */
.c-guia-indice a, .c-guia-indice .c-meta { grid-column:2; }
.c-guia-indice a { font-weight:var(--c-peso-medio); }
/* Toda la fila es la diana, no solo las palabras del título. */
.c-guia-indice a::after { content:''; position:absolute; inset:0; border-radius:inherit; }
.c-guia-indice .c-meta { margin-top:1px; }

.c-guia-capitulo { margin-top:var(--c-esp-8); padding-top:var(--c-esp-8); border-top:1px solid var(--c-borde); scroll-margin-top:76px; }
.c-guia-capitulo:first-of-type { margin-top:var(--c-esp-6); padding-top:0; border-top:0; }
.c-guia-capitulo > h2 { counter-increment:guia-cap; font-size:var(--c-tipo-ficha); letter-spacing:-.01em; margin:0 0 var(--c-esp-4); }
.c-guia-capitulo > h2::before { content:counter(guia-cap, decimal-leading-zero); display:block; font-family:var(--c-mono); font-size:var(--c-tipo-meta); font-weight:var(--c-peso-normal); letter-spacing:.08em; color:var(--c-texto-2); margin-bottom:6px; }
.c-guia-capitulo h3 { font-size:var(--c-tipo-cuerpo); font-weight:var(--c-peso-fuerte); margin:var(--c-esp-6) 0 var(--c-esp-2); }
.c-guia-capitulo p, .c-guia-capitulo li, .c-guia-capitulo dd { line-height:1.65; }
.c-guia-volver { margin:var(--c-esp-4) 0 0; font-size:var(--c-tipo-meta); }
/* La caja del final sí es una tarjeta: es una sola, y ser distinta es el motivo. */
.c-guia-cierre { margin-top:var(--c-esp-8); scroll-margin-top:76px; }
.c-guia-cierre h2 { font-size:var(--c-tipo-seccion); }
.c-guia-capitulo p { margin:0 0 var(--c-esp-3); }
.c-guia-capitulo > :last-child { margin-bottom:0; }
.c-guia-lista, .c-guia-pasos { margin:0 0 var(--c-esp-3); padding-left:1.4em; display:grid; gap:8px; }
.c-guia-faq { margin:0 0 var(--c-esp-3); display:grid; gap:14px; }
.c-guia-faq dt { font-weight:var(--c-peso-medio); }
.c-guia-faq dd { margin:4px 0 0; color:var(--c-texto-2); }
/* 29/09/2026 · Con poco ancho encogía el contenedor pero no el desplegable, y «Ver demos» se montaba sobre el
   estado. Ahora encoge el desplegable y lo demás conserva su sitio. */
.c-selector select { min-width:120px; flex:1 1 auto; }
.c-estado, .c-estado-que { flex-shrink:0; }
.c-selector-demos { flex:none; display:flex; align-items:center; gap:6px; font-size:var(--c-tipo-meta); color:var(--c-cabecera-texto); white-space:nowrap; opacity:.85; cursor:pointer; text-transform:none; letter-spacing:normal; font-weight:var(--c-peso-normal); }
.c-selector-demos input { width:16px; height:16px; margin:0; accent-color:var(--c-acento, #2aa198); }
.c-estado { margin-left:auto; display:flex; align-items:center; gap:8px; font-size:var(--c-tipo-meta); color:var(--c-cabecera-texto-2); white-space:nowrap; }
.c-estado-con-detalle { cursor:pointer; }
/* 29/09/2026 · Progreso del cambio que se está aplicando (centralitia.js). */
.c-estado { position:relative; }
.c-estado-progreso { position:absolute; left:16px; right:0; bottom:-6px; height:3px; border-radius:2px; background:rgba(255,255,255,.14); overflow:hidden; pointer-events:none; }
.c-estado-progreso[hidden] { display:none; }
.c-estado-progreso > span, .c-avance-barra > span { display:block; height:100%; width:0; border-radius:inherit; background:var(--estado-aplicando, #f5a623); transition:width .9s var(--c-ease, ease); }
.c-avance-paso { font-size:14px; font-weight:600; color:#fff; }
.c-avance-barra { height:6px; margin:8px 0 6px; border-radius:3px; background:#2a3038; overflow:hidden; }
.c-avance-cola { margin-top:6px !important; font-size:12px; color:#9aa8ae; }
@media (prefers-reduced-motion: reduce) { .c-estado-progreso > span, .c-avance-barra > span { transition:none; } }
/* 29/09/2026 · Últimos cambios de la portada: en qué consistió cada uno. */
.c-cambios .c-fila-principal strong { text-wrap:pretty; }
.c-cambios-lineas { margin:4px 0 0; padding-left:18px; font-size:var(--c-tipo-meta, 13px); color:var(--c-texto-2, #5b6770); line-height:1.45; }
/* 29/09/2026 · «Qué cambia»: junto al estado, abre la lista de lo que se aplica (o del último cambio). */
.c-estado-que { flex:none; min-height:30px; padding:0 10px; margin-left:8px; border:1px solid rgba(255,255,255,.16); border-radius:999px; background:transparent; color:var(--c-cabecera-texto-2, #c7d0d5); font:inherit; font-size:12px; cursor:pointer; white-space:nowrap; transition:background-color 150ms ease, color 150ms ease; }
.c-estado-que:hover, .c-estado-que[aria-expanded="true"] { background:rgba(255,255,255,.08); color:#fff; }
.c-estado-que:focus-visible { outline:3px solid var(--ibk-teal-400, #19c8dc); outline-offset:2px; }
.c-estado-que[hidden], .c-estado-detalle[hidden] { display:none; }
.c-estado-detalle { position:fixed; z-index:1100; max-height:min(70vh, 520px); overflow:auto; padding:14px 16px; border-radius:14px; background:#171b20; color:#e3eaed; box-shadow:0 18px 50px rgba(0,0,0,.45), inset 0 0 0 1px #2a3038; font-size:13.5px; line-height:1.45; text-align:left; white-space:normal; }
.c-estado-detalle h3 { margin:0 0 8px; font-size:11px; font-weight:650; letter-spacing:.08em; text-transform:uppercase; color:#19c8dc; }
.c-estado-detalle section + section { margin-top:10px; padding-top:10px; border-top:1px solid #2a3038; }
.c-estado-detalle-cab { margin:0 0 4px; font-size:12px; color:#9aa8ae; }
.c-estado-detalle ul { margin:0; padding-left:18px; }
.c-estado-detalle p { margin:0; }
.c-estado-punto { width:8px; height:8px; border-radius:50%; background:var(--semaforo-neutro); flex:none; transition:background-color var(--c-normal) var(--c-ease); }
.c-estado[data-fase="en_uso"] .c-estado-punto { background:var(--estado-en-uso); }
.c-estado[data-fase="aplicando"] .c-estado-punto { background:var(--estado-aplicando); animation:c-latido 1.4s ease-in-out infinite; }
.c-estado[data-fase="guardado"] .c-estado-punto { background:var(--estado-guardado); }
.c-estado[data-fase="error"] .c-estado-punto { background:var(--semaforo-error); }
@keyframes c-latido { 0%,100% { opacity:1; } 50% { opacity:.35; } }
.c-usuario { display:flex; align-items:center; gap:8px; font-size:var(--c-tipo-tabla); color:var(--c-cabecera-texto-2); }
/* 29/09/2026 · Quién eres y con qué perfil, en un solo bloque de cuenta: avatar con iniciales
   (mismo criterio que las filas de Usuarios, en el cian del logotipo) y, a su lado, nombre y
   perfil alineados a la izquierda. Todo el bloque lleva a Mi cuenta; Salir va aparte. */
.c-cuenta { display:flex; align-items:center; gap:10px; min-height:40px; padding:4px 12px 4px 4px; border-radius:var(--c-radio-pastilla); color:inherit; text-decoration:none; transition:background-color var(--c-rapido) var(--c-ease); }
.c-cuenta:hover { background:var(--ibk-carbon-700); }
.c-cuenta:focus-visible { outline:3px solid var(--ibk-teal-400); outline-offset:2px; }
.c-cuenta-avatar { width:32px; height:32px; border-radius:50%; flex:none; display:grid; place-items:center; background:color-mix(in oklab, var(--ibk-teal-400) 16%, transparent); box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--ibk-teal-400) 38%, transparent); color:var(--ibk-teal-400); font-size:.75rem; font-weight:650; letter-spacing:.03em; }
.c-cuenta-texto { display:grid; gap:2px; line-height:1.15; min-width:0; }
.c-usuario-quien { color:var(--c-cabecera-texto); font-weight:var(--c-peso-medio); }
.c-usuario-rol { font-size:.75rem; color:var(--c-cabecera-texto-2); white-space:nowrap; }
/* PLAN-070 · Botón «Vista Dinámica» en la cabecera: la puerta a la maqueta 3D, visible en todas las áreas. */
.c-vista-boton { display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:0 14px 0 11px; border-radius:var(--c-radio-pastilla); color:var(--c-cabecera-texto); text-decoration:none; font-size:var(--c-tipo-tabla); font-weight:var(--c-peso-medio); white-space:nowrap; background:color-mix(in oklab, var(--ibk-teal-400) 14%, transparent); box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--ibk-teal-400) 38%, transparent); transition:background-color var(--c-rapido) var(--c-ease), transform var(--c-rapido) var(--c-ease); }
.c-vista-boton svg { width:18px; height:18px; color:var(--ibk-teal-400); flex:none; }
.c-vista-boton:hover { background:color-mix(in oklab, var(--ibk-teal-400) 24%, transparent); color:var(--c-cabecera-texto); }
.c-vista-boton:active { transform:scale(.96); }
.c-vista-boton:focus-visible { outline:3px solid var(--ibk-teal-400); outline-offset:2px; }
@media (max-width: 900px) { .c-vista-boton { padding:0 9px; } .c-vista-boton span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); } }
/* PLAN-070 · Mi cuenta → Apariencia: tres tarjetas con una miniatura del panel en cada tema. */
.c-tema-opciones { border:0; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; }
.c-tema-opcion { position:relative; display:grid; gap:10px; padding:10px; border:1px solid var(--c-borde); border-radius:var(--c-radio-ficha); cursor:pointer; background:var(--c-superficie); transition:border-color var(--c-rapido) var(--c-ease), box-shadow var(--c-rapido) var(--c-ease); }
.c-tema-opcion:hover { border-color:var(--c-borde-fuerte, var(--c-borde)); }
.c-tema-opcion input { position:absolute; opacity:0; pointer-events:none; }
.c-tema-opcion:has(input:checked) { border-color:var(--c-acento); box-shadow:0 0 0 1px var(--c-acento); }
.c-tema-opcion:has(input:focus-visible) { outline:3px solid var(--c-acento); outline-offset:2px; }
.c-tema-texto { display:grid; gap:2px; font-size:var(--c-tipo-tabla); line-height:1.3; }
.c-tema-texto small { color:var(--c-texto-2); font-size:var(--c-tipo-meta); }
.c-tema-muestra { display:grid; grid-template-rows:10px 1fr; gap:6px; height:64px; padding:0 0 8px; border-radius:8px; overflow:hidden; background:var(--ibk-hueso-50); box-shadow:inset 0 0 0 1px var(--ibk-hueso-200); }
.c-tema-muestra span:nth-child(1) { background:var(--ibk-carbon-800); }
.c-tema-muestra span:nth-child(2) { margin:0 10px; height:8px; width:60%; border-radius:4px; background:var(--ibk-hueso-200); }
.c-tema-muestra span:nth-child(3) { margin:-12px 10px 0; height:8px; width:38%; border-radius:4px; background:var(--ibk-teal-600); align-self:end; }
.c-tema-muestra-oscuro { background:#0e1216; box-shadow:inset 0 0 0 1px #2e353d; }
.c-tema-muestra-oscuro span:nth-child(1) { background:var(--ibk-carbon-900); }
.c-tema-muestra-oscuro span:nth-child(2) { background:#2e353d; }
.c-tema-muestra-oscuro span:nth-child(3) { background:var(--ibk-teal-400); }
.c-tema-muestra-sistema { background:linear-gradient(115deg, var(--ibk-hueso-50) 0 50%, #0e1216 50% 100%); }
.c-usuario-separador { width:1px; height:24px; background:var(--ibk-carbon-700); }
.c-salir { color:inherit; font-size:1.1rem; display:grid; place-items:center; width:36px; height:36px; border-radius:var(--c-radio-campo); }
.c-salir:hover { background:var(--ibk-carbon-700); color:var(--c-cabecera-texto); }

/* Cuerpo */
.c-cuerpo-interior { display:grid; grid-template-columns:var(--nav-ancho) minmax(0,1fr); min-height:calc(100vh - 60px); }
.c-nav { background:var(--c-lateral); border-right:1px solid var(--c-borde); padding:var(--c-esp-4) var(--c-esp-3); display:flex; flex-direction:column; gap:2px; }
.c-nav a { display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:var(--c-radio-campo); color:var(--c-texto-2); text-decoration:none; font-size:var(--c-tipo-tabla); font-weight:var(--c-peso-medio); min-height:44px; }
.c-nav a .bi { font-size:1.1rem; width:20px; text-align:center; color:var(--c-texto-3); }
.c-nav a:hover { background:var(--c-superficie); color:var(--c-texto); }
.c-nav a[aria-current="page"] { background:var(--nav-activo-fondo); color:var(--nav-activo-texto); }
.c-nav a[aria-current="page"] .bi { color:var(--nav-activo-texto); }
.c-nav-admin { margin-top:auto; border-top:1px solid var(--c-borde); padding-top:14px !important; border-radius:0 !important; }
.c-principal { padding:var(--c-esp-8) var(--c-esp-8) var(--c-esp-12); max-width:1180px; min-width:0; }

/* Títulos y texto */
.c-titulo { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--c-esp-4); margin:0 0 var(--c-esp-2); flex-wrap:wrap; }
.c-titulo h1 { font-size:var(--c-tipo-pagina); letter-spacing:-.02em; margin:0; line-height:1.15; }
.c-titulo h1 small { display:block; font-size:var(--c-tipo-tabla); color:var(--c-texto-2); font-weight:var(--c-peso-normal); letter-spacing:0; margin-top:4px; }
.c-intro { color:var(--c-texto-2); max-width:65ch; margin:0 0 var(--c-esp-6); }
/* `--c-texto-3` sobre el fondo claro da 3,2:1 de contraste, y para texto de 13 px el
   mínimo exigible es 4,5:1. La letra pequeña es la que MÁS necesita leerse: con
   `--c-texto-2` sube a 7,6:1 y la jerarquía se mantiene igual de clara. El tono 3 se
   queda para lo que de verdad es decorativo o está desactivado. */
.c-meta { color:var(--c-texto-2); font-size:var(--c-tipo-meta); }
.c-mono { font-family:var(--c-mono); font-variant-numeric:tabular-nums; }
.c-ayuda { color:var(--c-texto-2); font-size:var(--c-tipo-meta); margin:4px 0 0; }

/* Botones y campos */
.c-boton, .c-boton-secundario, .c-boton-peligro { min-height:var(--boton-alto); padding:0 18px; border-radius:var(--c-radio-campo); font:inherit; font-weight:var(--c-peso-fuerte); font-size:var(--c-tipo-tabla); cursor:pointer; display:inline-flex; align-items:center; gap:8px; text-decoration:none; transition:background-color var(--c-rapido) var(--c-ease), transform var(--c-rapido) var(--c-ease); }
.c-boton { background:var(--boton-fondo); color:var(--boton-texto); border:1px solid transparent; }
.c-boton:hover { background:var(--boton-fondo-hover); }
.c-boton-secundario { background:var(--c-superficie); color:var(--c-texto); border:1px solid var(--c-borde-fuerte); }
.c-boton-secundario:hover { background:var(--c-superficie-2); }
.c-boton-peligro { background:var(--c-error-suave); color:var(--c-error); border:1px solid transparent; }
/* Un solo gesto de pulsación en todo el panel: 0.96. Más suave no se nota y más fuerte
   exagera; tenerlo en .98, .985 y .97 según la pantalla hacía que unos botones
   respondieran y otros pareciesen muertos. */
.c-boton:active, .c-boton-secundario:active, .c-boton-peligro:active, .c-boton-enlace:active { transform:scale(.96); }
.c-boton:disabled, .c-boton-secundario:disabled { opacity:.55; cursor:not-allowed; }
/* 22/09/2026 · Las acciones de fila eran enlaces de texto subrayados en linea (Guardar, Cambiar rol,
   Retirar…) y no se veian como acciones: un administrador cambio un campo y no encontro con que
   guardar. c-boton-enlace es el boton TERCIARIO del sistema: sin borde, texto en acento, fondo
   tenido al pasar; mismo radio de 6 px que los demas botones (nada de pildoras). */
.c-boton-enlace { background:transparent; border:1px solid transparent; border-radius:var(--c-radio-campo); color:var(--c-acento); font:inherit; font-size:var(--c-tipo-tabla); font-weight:var(--c-peso-medio); cursor:pointer; padding:0 10px; min-height:var(--boton-alto-compacto); display:inline-flex; align-items:center; text-decoration:none; transition:background-color var(--c-rapido) var(--c-ease), transform var(--c-rapido) var(--c-ease); }
.c-boton-enlace:hover { background:var(--c-acento-suave); }
/* Acciones DENTRO de una fila de lista (Usuarios, Extensiones, invitaciones): tamano compacto y
   jerarquia clara. Un primario teal, secundarios con borde, terciarios sin borde, y el
   destructivo como texto rojo: el rojo lleno se reserva a la confirmacion (DESIGN.md). Los
   botones de los formularios principales (Crear extension, Enviar invitacion) no cambian. */
.c-lista .c-acciones .c-boton, .c-lista .c-acciones .c-boton-secundario, .c-lista .c-acciones .c-boton-peligro, .c-lista .c-acciones .c-boton-enlace,
.c-tabla .c-acciones .c-boton, .c-tabla .c-acciones .c-boton-secundario, .c-tabla .c-acciones .c-boton-peligro, .c-tabla .c-acciones .c-boton-enlace,
.c-extension .c-acciones .c-boton, .c-extension .c-acciones .c-boton-secundario, .c-extension .c-acciones .c-boton-peligro, .c-extension .c-acciones .c-boton-enlace {
  min-height:var(--boton-alto-compacto); padding:0 12px; font-size:var(--c-tipo-meta); font-weight:var(--c-peso-medio); gap:6px; }
.c-lista .c-acciones .c-boton, .c-extension .c-acciones .c-boton { font-weight:var(--c-peso-fuerte); }
.c-lista .c-acciones .c-boton-peligro, .c-extension .c-acciones .c-boton-peligro { background:transparent; color:var(--c-error); border-color:transparent; }
.c-lista .c-acciones .c-boton-peligro:hover, .c-extension .c-acciones .c-boton-peligro:hover { background:var(--c-error-suave); }
.c-lista .c-acciones .c-boton-enlace, .c-tabla .c-acciones .c-boton-enlace, .c-extension .c-acciones .c-boton-enlace { padding:0 10px; }
/* Las acciones de una fila de tabla, como las de una lista: compactas, sin separarse de la fila. */
.c-tabla td .c-acciones { display:inline-flex; gap:8px; flex-wrap:nowrap; margin-top:0; }
/* Con el dedo, 44 px: el panel se usa en el móvil (y así lo ofrece Acceso y movilidad). */
@media (pointer:coarse) { .c-cuerpo { --boton-alto-compacto:44px; } }
/* TRES NIVELES DE VOZ, y solo tres. El título de sección cuenta la historia y es el más
   alto; la etiqueta nombra el campo, en voz normal; la ayuda susurra. Hasta hoy estaban al
   revés: `iberikia.css` (la hoja del panel antiguo, que se carga antes) trae un
   `label{text-transform:uppercase;letter-spacing:.08em}` global, y las etiquetas en
   versales espaciadas gritaban más que los títulos. Aquí se desactiva para todo el panel. */
.c-cuerpo label { text-transform:none; letter-spacing:normal; }
.c-campo { display:flex; flex-direction:column; gap:6px; min-width:0; }
.c-campo label { font-size:var(--c-tipo-tabla); font-weight:var(--c-peso-medio); color:var(--c-texto-2); }
.c-campo .c-ayuda { max-width:48ch; }
.c-campo input:not([type="checkbox"]):not([type="radio"]), .c-campo select, .c-campo textarea { width:100%; min-height:var(--campo-alto); font:inherit; padding:10px 12px; border:1px solid var(--campo-borde); border-radius:var(--c-radio-campo); background:var(--campo-fondo); color:var(--c-texto); }
.c-campo textarea { min-height:7rem; resize:vertical; line-height:1.5; }
.c-campo input:focus-visible, .c-campo select:focus-visible, .c-campo textarea:focus-visible, .c-boton:focus-visible, .c-boton-secundario:focus-visible, .c-boton-peligro:focus-visible, .c-nav a:focus-visible, .c-lista a:focus-visible, .c-boton-enlace:focus-visible { outline:3px solid var(--c-acento); outline-offset:3px; }
.c-campos { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:var(--c-esp-4) var(--c-esp-6); }
.c-campos .c-campo-ancho { grid-column:1/-1; }
/* Un formulario de FICHA no es una rejilla de columnas iguales: un nombre necesita el
   triple que una extensión, y repartir el ancho a partes iguales deja huecos enormes
   cuando la ayuda de una columna ocupa cinco líneas y la de al lado ninguna. Aquí cada
   campo declara lo que mide y se empaquetan de izquierda a derecha. */
.c-formulario { display:flex; flex-wrap:wrap; gap:var(--c-esp-4) 20px; align-items:flex-start; }
.c-formulario > .c-campo { flex:1 1 var(--campo-ancho, 220px); max-width:100%; }
.c-formulario > .c-campo[data-ancho="corto"]  { --campo-ancho:150px; flex-grow:0; }
.c-formulario > .c-campo[data-ancho="medio"]  { --campo-ancho:190px; flex-grow:0; }
.c-formulario > .c-campo[data-ancho="largo"]  { --campo-ancho:300px; }
.c-formulario > .c-campo-ancho { flex:1 1 100%; }
.c-formulario > .c-campo-ancho textarea { max-width:62ch; }
.c-ivr { margin-block:var(--c-esp-4); }
.c-ivr summary { cursor:pointer; padding-block:10px; font-weight:600; }
.c-ivr summary:focus-visible { outline:3px solid var(--c-acento); outline-offset:3px; }
.c-ivr fieldset { min-width:0; padding:0; margin:12px 0 20px; border:0; }
.c-ivr [data-ivr-submenu] { border-top:1px solid var(--campo-borde); }
.c-ivr .c-ayuda a { display:inline; padding:0; min-height:0; color:var(--c-acento); text-decoration:underline; }
.c-ivr .c-campo { min-width:0; }
.c-ivr .c-campo select { width:100%; }
@media(max-width:700px) { .c-ivr .c-ivr-teclas { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 12px; } }
.c-acciones { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:var(--c-esp-6); }
.c-check { display:flex; align-items:center; gap:10px; min-height:44px; font-size:var(--c-tipo-tabla); }
.c-check input { width:18px; height:18px; accent-color:var(--c-acento); margin:0; }

/* Fichas, listas, avisos */
.c-ficha { background:var(--ficha-fondo); border:1px solid var(--ficha-borde); border-radius:var(--ficha-radio); padding:var(--c-esp-6); margin:0 0 var(--c-esp-4); box-shadow:var(--c-sombra); }
.c-ficha h2 { font-size:var(--c-tipo-seccion); margin:0 0 var(--c-esp-3); letter-spacing:-.01em; }
.c-ficha h2 small { font-weight:var(--c-peso-normal); color:var(--c-texto-3); font-size:var(--c-tipo-meta); margin-left:8px; }
.c-lista { list-style:none; margin:0; padding:0; border:1px solid var(--c-borde); border-radius:var(--ficha-radio); background:var(--c-superficie); overflow:hidden; }
.c-lista li + li { border-top:1px solid var(--c-borde); }
.c-lista a, .c-lista .c-fila { display:flex; align-items:center; gap:14px; min-height:var(--lista-fila-alto); padding:10px 18px; color:inherit; text-decoration:none; }
.c-lista a:hover { background:var(--lista-fila-hover); }
.c-fila-principal { flex:1; min-width:0; }
/* 22/09/2026 · Con los botones de accion en la fila, la ficha (nombre, correo, rol) quedaba
   aplastada en una columna de tres letras por linea. La fila puede partirse: la ficha conserva
   al menos 220px y el bloque de acciones baja de linea cuando no cabe. */
.c-lista .c-fila { flex-wrap:wrap; }
.c-lista .c-fila .c-fila-principal { flex:1 1 220px; min-width:220px; }
.c-lista .c-fila form.c-acciones { flex:0 1 auto; margin-top:0; }
.c-fila-principal strong { display:block; font-weight:var(--c-peso-fuerte); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.c-fila-principal small { color:var(--c-texto-2); font-size:var(--c-tipo-meta); }
/* 06/10/2026 · Un nombre en negrita DENTRO de la línea pequeña («Entra directo a <strong>Antonio</strong>; si no contesta…»)
   heredaba el display:block del título y partía la frase en tres líneas. */
.c-fila-principal small strong { display:inline; white-space:normal; overflow:visible; }
.c-pastilla { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:var(--c-radio-pastilla); font-size:var(--c-tipo-meta); font-weight:var(--c-peso-medio); background:var(--c-superficie-2); color:var(--c-texto-2); white-space:nowrap; }
.c-pastilla-acento { background:var(--c-acento-suave); color:var(--c-acento-hover); }
.c-pastilla-ok { background:var(--c-ok-suave); color:var(--c-ok); }
.c-pastilla-aviso { background:var(--c-aviso-suave); color:var(--c-aviso); }
.c-pastilla-atencion { background:var(--c-atencion-suave); color:var(--c-atencion); }
.c-pastilla-error { background:var(--c-error-suave); color:var(--c-error); }
.c-avatar { width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:var(--c-acento-suave); color:var(--c-acento-hover); font-weight:700; font-size:var(--c-tipo-meta); flex:none; }
.c-aviso { padding:12px 16px; border-radius:var(--c-radio-campo); margin:0 0 var(--c-esp-4); font-size:var(--c-tipo-tabla); border:1px solid transparent; }
.c-aviso-ok { background:var(--c-ok-suave); color:var(--c-ok); }
.c-aviso-error { background:var(--c-error-suave); color:var(--c-error); }
.c-aviso-info { background:var(--c-acento-suave); color:var(--c-acento-hover); }
.c-aviso-atencion { background:var(--c-aviso-suave); color:var(--c-aviso); }
.c-aviso-demo, .c-aviso-con-accion { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--c-esp-3, 12px); }
.c-aviso-demo > span, .c-aviso-con-accion > span { flex:1 1 280px; }
.c-vacio { padding:var(--c-esp-12) var(--c-esp-8); background:var(--c-superficie-2); border-radius:var(--ficha-radio); text-align:left; max-width:60ch; }
.c-vacio h2 { margin:0 0 8px; font-size:var(--c-tipo-ficha); }
.c-vacio p { color:var(--c-texto-2); margin:0 0 var(--c-esp-4); }
.c-tabla { width:100%; border-collapse:collapse; font-size:var(--c-tipo-tabla); background:var(--c-superficie); border:1px solid var(--c-borde); border-radius:var(--ficha-radio); overflow:hidden; }
.c-tabla th, .c-tabla td { text-align:left; padding:10px 14px; border-bottom:1px solid var(--c-borde); vertical-align:top; }
.c-tabla th { font-size:var(--c-tipo-meta); color:var(--c-texto-2); font-weight:var(--c-peso-fuerte); background:var(--c-superficie-2); }
.c-tabla tr:last-child td { border-bottom:0; }
.c-tabla-envoltorio { overflow-x:auto; border-radius:var(--ficha-radio); }
/* La columna de texto largo de una tabla no se deja estrujar hasta una palabra por linea:
   tiene un ancho minimo propio y es el envoltorio el que se desplaza. */
.c-tabla .c-celda-texto { min-width:26ch; max-width:36ch; }
/* Listados (PLAN-062 E0): buscador y paginación, iguales en todas las pantallas. */
.c-buscador { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:0 0 var(--c-esp-4); }
.c-buscador-campo { position:relative; display:inline-flex; align-items:center; flex:1 1 260px; max-width:420px; }
.c-buscador-campo i { position:absolute; left:10px; color:var(--c-texto-2); pointer-events:none; font-size:.9em; }
.c-buscador input[type=search] { width:100%; min-height:40px; font:inherit; font-size:var(--c-tipo-tabla); padding:6px 10px 6px 30px; border:1px solid var(--campo-borde); border-radius:var(--c-radio-campo); background:var(--campo-fondo); color:var(--c-texto); }
.c-buscador select, .c-buscador input[type=date] { min-height:40px; font:inherit; font-size:var(--c-tipo-tabla); padding:6px 10px; border:1px solid var(--campo-borde); border-radius:var(--c-radio-campo); background:var(--campo-fondo); color:var(--c-texto); }
.c-buscador label:not(.c-visualmente-oculto) { color:var(--c-texto-2); font-size:var(--c-tipo-meta); text-transform:none; }
.c-paginacion { display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin:var(--c-esp-4) 0 0; font-size:var(--c-tipo-meta); color:var(--c-texto-2); }
.c-paginacion-cuenta { font-variant-numeric:tabular-nums; }
.c-paginacion-botones { display:flex; gap:4px; align-items:center; }
.c-paginacion-pagina { padding:0 8px; font-variant-numeric:tabular-nums; }
.c-paginacion-boton { min-height:36px; display:inline-flex; align-items:center; padding:6px 12px; border:1px solid var(--c-borde-fuerte); border-radius:var(--c-radio-campo); color:var(--c-texto); text-decoration:none; background:var(--c-superficie); }
.c-paginacion-boton:hover { border-color:var(--c-acento); color:var(--c-acento-hover); }
.c-paginacion-boton[aria-disabled] { opacity:.4; border-style:dashed; }
.c-kpis { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:var(--c-esp-4); margin:0 0 var(--c-esp-6); }
.c-kpi { background:var(--c-superficie); border:1px solid var(--c-borde); border-radius:var(--ficha-radio); padding:16px 18px; }
.c-kpi span { display:block; color:var(--c-texto-2); font-size:var(--c-tipo-meta); }
.c-kpi strong { font-size:1.5rem; font-weight:var(--c-peso-fuerte); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.c-pestanas { display:flex; gap:4px; border-bottom:1px solid var(--c-borde); margin:0 0 var(--c-esp-6); }
.c-pestanas a { padding:10px 14px; color:var(--c-texto-2); text-decoration:none; font-size:var(--c-tipo-tabla); font-weight:var(--c-peso-medio); border-bottom:2px solid transparent; margin-bottom:-1px; }
.c-pestanas a[aria-current] { color:var(--c-acento-hover); border-bottom-color:var(--c-acento); }
/* Un desplegable es un CONTROL, no un triangulito del navegador perdido entre el texto
   (22/09). Mismo chevrón, mismo alto de toque y mismo foco en todo el panel; y cuando
   desplegar ES la acción principal de su bloque, con borde, como un botón secundario. */
details.c-plegable > summary, .c-principal details:not([class]) > summary,
.crm-intercambio > summary, .crm-recordatorios > summary, .crm-ventas > summary {
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:8px; min-height:40px;
  font-weight:var(--c-peso-fuerte); font-size:var(--c-tipo-tabla); padding:8px 0; color:var(--c-texto);
  border-radius:var(--c-radio-campo); transition:color var(--c-rapido) var(--c-ease); }
details.c-plegable > summary::-webkit-details-marker, .c-principal details:not([class]) > summary::-webkit-details-marker,
.crm-intercambio > summary::-webkit-details-marker, .crm-recordatorios > summary::-webkit-details-marker,
.crm-ventas > summary::-webkit-details-marker { display:none; }
details.c-plegable > summary::before, .c-principal details:not([class]) > summary::before,
.crm-intercambio > summary::before, .crm-recordatorios > summary::before, .crm-ventas > summary::before {
  content:''; width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(-45deg); transition:transform var(--c-rapido) var(--c-ease); margin:0 6px 2px 2px; flex:none; }
details.c-plegable[open] > summary::before, .c-principal details:not([class])[open] > summary::before,
.crm-intercambio[open] > summary::before, .crm-recordatorios[open] > summary::before, .crm-ventas[open] > summary::before {
  transform:rotate(45deg); }
details.c-plegable > summary:hover, .c-principal details:not([class]) > summary:hover,
.crm-intercambio > summary:hover, .crm-recordatorios > summary:hover, .crm-ventas > summary:hover { color:var(--c-acento-hover); }
details > summary:focus-visible { outline:3px solid var(--c-acento); outline-offset:3px; }
/* 28/09/2026 · «Ver como» otro usuario: franja naranja (atención) pegada arriba mientras dure. */
.c-suplantando { position:sticky; top:0; z-index:60; display:flex; align-items:center; gap:10px 16px; flex-wrap:wrap;
  padding:10px 24px; background:var(--c-aviso-suave); color:var(--c-texto); border-bottom:1px solid var(--c-aviso); font-size:var(--c-tipo-tabla); }
.c-suplantando > i { color:var(--c-aviso); font-size:1.1rem; }
.c-suplantando p { margin:0; flex:1 1 320px; line-height:1.5; }
.c-suplantando form { margin:0; }
@media (max-width: 600px) { .c-suplantando { padding:10px 16px; } .c-suplantando form, .c-suplantando .c-boton { width:100%; justify-content:center; } }
/* Desplegar es la acción del bloque: se ve como un botón secundario. Completo por sí solo
   (28/09: en WhatsApp iba con c-ficha y sin la base de otra clase, y salía como una caja
   con el texto arriba y el triángulo del navegador). */
details.c-plegable-accion > summary { display:inline-flex; align-items:center; gap:8px; min-height:var(--boton-alto); padding:0 16px;
  cursor:pointer; list-style:none; font-weight:var(--c-peso-fuerte); font-size:var(--c-tipo-tabla); color:var(--c-texto);
  background:var(--c-superficie); border:1px solid var(--c-borde-fuerte); border-radius:var(--c-radio-campo); }
details.c-plegable-accion > summary::-webkit-details-marker { display:none; }
details.c-plegable-accion > summary::before { content:''; width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(-45deg); transition:transform var(--c-rapido) var(--c-ease); margin:0 4px 2px 0; flex:none; }
details.c-plegable-accion[open] > summary::before { transform:rotate(45deg); }
details.c-plegable-accion > summary:hover { background:var(--c-superficie-2); color:var(--c-texto); }
details.c-plegable-accion > summary { transition:background-color var(--c-rapido) var(--c-ease), transform var(--c-rapido) var(--c-ease); }
details.c-plegable-accion > summary:active { transform:scale(.96); }
details.c-plegable-accion[open] > summary { margin-bottom:12px; }
.c-semaforo { display:inline-flex; align-items:center; gap:8px; font-size:var(--c-tipo-tabla); }
.c-semaforo::before { content:''; width:8px; height:8px; border-radius:50%; background:var(--semaforo-neutro); }
.c-semaforo[data-estado="ok"]::before { background:var(--semaforo-ok); }
.c-semaforo[data-estado="aviso"]::before { background:var(--semaforo-aviso); }
.c-semaforo[data-estado="error"]::before { background:var(--semaforo-error); }

/* El editor heredado dentro del shell */
.c-principal .telefonia-editor h2 { font-size:var(--c-tipo-seccion); }
.c-principal .telefonia-editor button[type="submit"] { background:var(--boton-fondo); border-color:var(--boton-fondo); }
.c-principal .telefonia-editor summary { color:var(--c-acento-hover); }

/* Datos que se copian a mano en otro sitio (los de conexión de un teléfono).
   Etiqueta y valor en dos columnas: puesto uno debajo de otro hay que ir contando
   para saber qué valor va con qué etiqueta. El valor lleva `user-select:all` para
   que un clic seleccione el dato ENTERO y no media contraseña. */
.c-datos { display:grid; grid-template-columns:minmax(120px, max-content) minmax(0, 1fr); gap:8px var(--c-esp-4); margin:0 0 var(--c-esp-4); align-items:baseline; }
.c-datos dt { color:var(--c-texto-2); font-size:var(--c-tipo-tabla); }
.c-datos dd { margin:0; font-family:var(--c-mono); overflow-wrap:anywhere; user-select:all; }
.c-datos dd.c-datos-suelto { font-family:var(--c-fuente); user-select:auto; }
.c-datos dd.c-datos-clave { font-size:1.0625rem; letter-spacing:.02em; background:var(--c-superficie-2); padding:6px 10px; border-radius:var(--c-radio-campo); display:inline-block; }
@media (max-width: 560px) { .c-datos { grid-template-columns:1fr; gap:2px var(--c-esp-4); } .c-datos dd { margin-bottom:10px; } }

/* Personas: fichas autocontenidas */
.c-persona { background:var(--ficha-fondo); border:1px solid var(--ficha-borde); border-radius:var(--ficha-radio); margin:0 0 12px; }
.c-persona > summary { display:flex; align-items:center; gap:14px; padding:12px 18px; min-height:var(--lista-fila-alto); cursor:pointer; list-style:none; }
.c-persona > summary::-webkit-details-marker { display:none; }
.c-persona > summary::after { content:''; width:8px; height:8px; border-right:2px solid var(--c-texto-3); border-bottom:2px solid var(--c-texto-3); transform:rotate(45deg); margin-left:auto; flex:none; transition:transform var(--c-rapido) var(--c-ease); }
.c-persona[open] > summary::after { transform:rotate(225deg); }
.c-persona-cuerpo { padding:4px 18px 18px; border-top:1px solid var(--c-borde); }
.c-persona-cuerpo h3 { font-size:1rem; color:var(--c-texto); text-transform:none; font-weight:650;
  letter-spacing:-.01em; margin:28px 0 14px; padding-top:20px; border-top:1px solid var(--c-borde); }
.c-persona-cuerpo h3:first-child { margin-top:8px; padding-top:0; border-top:0; }
/* Una frase que explica de qué va la sección, debajo del título y antes de los campos. */
.c-persona-cuerpo h3 + .c-ayuda { margin:-8px 0 14px; max-width:60ch; }
.c-persona-cuerpo { padding-bottom:8px; }
/* Retirar del directorio es destructivo: se separa del formulario en vez de quedar pegado
   al último campo como si fuera uno más. */
.c-persona-pie { display:flex; justify-content:flex-end; margin-top:24px; padding-top:16px; border-top:1px solid var(--c-borde); }

/* Personas y grupos en TARJETAS (PLAN-062).
   Antes era una lista de filas apiladas: con veinte personas había que leerlas todas
   de arriba abajo para encontrar a una, y una persona y un grupo se veían igual. La
   rejilla enseña ocho de un vistazo, y el color y la forma del avatar dicen QUÉ es cada
   cosa antes de leer el nombre: círculo azul una persona, cuadrado azul un departamento,
   corrillo naranja un grupo.

   La tarjeta abierta ocupa la fila entera en vez de abrir un panel aparte. Es a
   propósito: esta pantalla es UN FORMULARIO —todas las fichas tienen que existir en el
   DOM para poder guardarlas de una vez—, así que sacar la edición a un modal obligaría a
   guardar por partes y a inventar un estado intermedio que hoy no existe. */
.c-tarjetas { display:grid; grid-template-columns:repeat(auto-fill, minmax(256px, 1fr)); gap:12px; align-items:stretch; }
/* min-width:0 no es decorativo: sin él, una tarjeta abierta ocupando la fila entera
   hereda el min-width:auto de la rejilla y su formulario interno la desborda unos
   píxeles por la derecha. */
.c-tarjeta { margin:0; min-width:0; display:flex; flex-direction:column; transition:border-color var(--c-rapido) var(--c-ease), box-shadow var(--c-rapido) var(--c-ease); }
/* El hover va detrás de la consulta de puntero: en un móvil, tocar una tarjeta deja
   el hover pegado y el borde resaltado se queda ahí después del toque. */
@media (hover: hover) and (pointer: fine) {
  .c-tarjeta:hover { border-color:var(--c-borde-fuerte); }
}
/* Una superficie grande necesita menos escala que un botón para notarse igual. */
.c-tarjeta > summary:active { transform:scale(.96); }
.c-tarjeta[open] { grid-column:1 / -1; border-color:var(--c-borde-fuerte); box-shadow:var(--c-sombra-alta); }
/* align-items:stretch anula el `center` que hereda de la ficha en fila: en columna,
   `center` dejaba el avatar y el nombre centrados en medio de la tarjeta abierta. */
.c-tarjeta > summary { display:flex; flex-direction:column; align-items:stretch; flex:1; padding:14px 16px; min-height:0; transition:transform 120ms var(--c-ease); }
.c-tarjeta > summary::after { content:none; }  /* el chevrón se mueve a la cabecera */
.c-tarjeta > summary:focus-visible { outline:none; box-shadow:var(--c-foco); border-radius:var(--ficha-radio); }
/* El nombre parte en dos líneas antes que cortarse: «Atención al clie…» no sirve de
   nada, y en una tarjeta sobra el alto para la segunda línea. */
.c-tarjeta .c-fila-principal strong { white-space:normal; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.c-tarjeta-cabeza { display:flex; align-items:center; gap:12px; }
.c-tarjeta-cabeza::after { content:''; width:8px; height:8px; border-right:2px solid var(--c-texto-3); border-bottom:2px solid var(--c-texto-3); transform:rotate(45deg); margin-left:auto; flex:none; transition:transform var(--c-rapido) var(--c-ease); }
.c-tarjeta[open] .c-tarjeta-cabeza::after { transform:rotate(225deg); }
.c-tarjeta-pie { display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:12px; }
.c-tarjeta-pie:empty { display:none; }
.c-pastilla-larga { max-width:100%; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.c-avatar-persona { border-radius:50%; }
.c-avatar-departamento { border-radius:10px; }
/* El grupo lleva a sus miembros en la cara: un corrillo de iniciales dice a la vez que
   es un grupo, cuántos son y quiénes, sin gastar una línea de texto. */
.c-tarjeta-grupo { background:var(--tarjeta-grupo-fondo); border-color:var(--tarjeta-grupo-borde); }
.c-tarjeta-grupo:hover, .c-tarjeta-grupo[open] { border-color:var(--tarjeta-grupo-tinta); }
.c-tarjeta-grupo .c-avatar { background:var(--tarjeta-grupo-tinte); color:var(--tarjeta-grupo-tinta); border-radius:50%; }
.c-tarjeta-grupo .c-pastilla-acento { background:var(--tarjeta-grupo-tinte); color:var(--tarjeta-grupo-tinta); }
.c-pila { display:flex; flex:none; padding-left:2px; }
.c-pila .c-avatar { width:28px; height:28px; font-size:.625rem; box-shadow:0 0 0 2px var(--tarjeta-grupo-fondo); }
.c-pila .c-avatar + .c-avatar { margin-left:-10px; }
.c-tarjeta-grupo .c-tarjeta-cabeza { gap:10px; }
.c-pila-vacia { color:var(--c-texto-3); }
@media (max-width: 560px) { .c-tarjetas { grid-template-columns:1fr; } }

/* ---- Abrir y cerrar una tarjeta ----
   Un `details` no se puede animar al abrirse: el navegador enseña o esconde su
   cuerpo de golpe, y aquí además la tarjeta salta de su hueco de 256 px a la fila
   entera empujando cuatrocientos píxeles de formulario. Eso es un cambio brusco, y
   evitar un cambio brusco es de los pocos motivos legítimos para animar algo.

   Se hace con una TRANSICIÓN DE VISTA, no animando el alto: el alto es una
   propiedad de composición y animarla obliga al navegador a recalcular todo en cada
   fotograma. La transición de vista fotografía el antes y el después y deja que el
   compositor interpole entre los dos, fuera del hilo principal. Las demás tarjetas
   también llevan nombre, así que en vez de pegar un salto se deslizan a su sitio
   nuevo. Donde el navegador no la soporte, el `details` se abre como siempre: la
   pantalla no depende de esto para funcionar. */
::view-transition-group(*) {
  animation-duration: var(--c-vt-dura, var(--c-abrir));
  animation-timing-function: var(--c-ease-morfar);
}
/* Las dos fotos se anclan arriba a la izquierda y con su tamaño natural. Sin esto,
   el navegador las estira para rellenar la caja que cambia de tamaño y el texto de
   la tarjeta se ve encogerse y estirarse como una goma mientras dura el cambio. */
::view-transition-old(*), ::view-transition-new(*) {
  height: 100%; overflow: clip; object-fit: none; object-position: top left;
}
/* Lo viejo se quita rápido y lo nuevo entra durante todo el trayecto: mientras cruzan
   hay dos imágenes superpuestas, y cuanto menos dure la de antes, menos se nota que
   son dos. */
::view-transition-old(*) { animation-duration: 110ms; animation-timing-function: var(--c-ease); }
::view-transition-new(*) { animation-duration: var(--c-vt-dura, var(--c-abrir)); animation-timing-function: var(--c-ease); }
/* La página entera NO se funde. Un fundido de toda la vista deja el texto doblado
   mientras dura, y aquí lo único que se mueve son las tarjetas, que van por su
   cuenta con su propio nombre. */
/* La tarjeta que se abre va por encima de las que se apartan. */
::view-transition-group(c-tarjeta-foco) { z-index: 2; }
::view-transition-image-pair(root) { isolation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; height: auto; object-fit: fill; }
::view-transition-old(root) { display: none; }
/* 29/09/2026 · Entre el panel y la Vista Dinámica (y vuelta) el navegador funde las dos páginas. Solo en ese paso:
   el script de cabecera de cada página salta la transición en cualquier otra navegación y marca esta con el tipo
   «c-vista». La Vista nace del color del panel y se oscurece sola (assets/vista/transicion.js). */
@view-transition { navigation: auto; }
html:active-view-transition-type(c-vista)::view-transition-old(root) { display: block; animation: c-vt-fuera 300ms var(--c-ease, ease) both; }
html:active-view-transition-type(c-vista)::view-transition-new(root) { animation: c-vt-dentro 300ms var(--c-ease, ease) both; }
@keyframes c-vt-fuera { to { opacity: 0; } }
@keyframes c-vt-dentro { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { html:active-view-transition-type(c-vista)::view-transition-old(root), html:active-view-transition-type(c-vista)::view-transition-new(root) { animation-duration: 1ms; } }

/* Una lista de «si pasa esto, haz esto otro» se lee en columna, con todas las respuestas
   alineadas. En dos columnas y con las etiquetas de anchos distintos, los desplegables
   quedaban en cinco sitios diferentes y había que ir a buscarlos. */
.c-reglas { display:grid; gap:8px 24px; max-width:640px; }
.c-regla { display:grid; grid-template-columns:170px minmax(0, 1fr); align-items:center; gap:14px; font-size:var(--c-tipo-tabla); }
.c-regla label { color:var(--c-texto-2); font-weight:var(--c-peso-medio); }
.c-regla select { width:100%; min-height:40px; font:inherit; font-size:var(--c-tipo-tabla); padding:6px 10px; border:1px solid var(--campo-borde); border-radius:var(--c-radio-campo); background:var(--campo-fondo); color:var(--c-texto); }
/* 05/10/2026 · «Llamar a un teléfono exterior»: sus ajustes cuelgan de su desplegable, alineados
   con él (170 px de etiqueta + 14 de hueco), para que se lea que son de ESA fila y no de la ficha. */
.c-regla-exterior { margin:-2px 0 6px 184px; padding:12px 14px 6px; border:1px solid var(--c-borde); border-radius:var(--c-radio-campo); background:var(--c-superficie-2); }
.c-regla-exterior[hidden] { display:none; }
/* 07/10/2026 · Tareas del asistente cuando está deshabilitado: se ven (para saber que existen) pero en gris. */
.c-nav a.c-nav-bloqueada { color:var(--c-texto-3, var(--c-texto-2)); opacity:.62; }
.c-nav a.c-nav-bloqueada:hover { opacity:.85; }
.c-nav-candado { display:block; font-size:var(--c-tipo-meta); font-weight:var(--c-peso-normal, 400); color:var(--c-texto-2); }
/* 07/10/2026 · Selector de perfil en la fila de un acceso general (Administración › Usuarios y comerciales). */
.c-select-compacto { min-height:36px; padding:4px 8px; font:inherit; font-size:var(--c-tipo-tabla); border:1px solid var(--campo-borde); border-radius:var(--c-radio-campo); background:var(--campo-fondo); color:var(--c-texto); }
.c-exterior-campos { display:flex; flex-wrap:wrap; gap:4px 16px; }
.c-exterior-campos .c-campo { margin:0; }
.c-regla-exterior .c-check { min-height:40px; }
.c-regla-exterior .c-ayuda { margin:-6px 0 6px 28px; }
.c-exterior-campos .c-ayuda { margin:4px 0 0; }
.c-regla-exterior .c-ayuda[data-error="true"] { color:var(--c-error); }
.c-regla-exterior input[aria-invalid="true"] { border-color:var(--c-error); }
.c-estado-persona { display:flex; gap:8px; flex-wrap:wrap; }
.c-estado-persona label { display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border:1px solid var(--c-borde-fuerte); border-radius:var(--c-radio-pastilla); cursor:pointer; font-size:var(--c-tipo-tabla); min-height:40px; }
.c-estado-persona input { accent-color:var(--c-acento); margin:0; }
.c-estado-persona label:has(input:checked) { background:var(--c-acento-suave); border-color:var(--c-acento); color:var(--c-acento-hover); }
.c-guardar-flotante { position:sticky; bottom:0; background:var(--c-fondo); padding:12px 0 max(12px, env(safe-area-inset-bottom)); border-top:1px solid var(--c-borde); display:flex; gap:12px; align-items:center; margin-top:var(--c-esp-6); }
.c-mensaje { padding:12px 16px; border-radius:var(--c-radio-campo); background:var(--c-superficie-2); border:1px solid var(--c-borde); margin:12px 0; font-size:var(--c-tipo-tabla); }
.c-mensaje[data-error="true"] { border-color:var(--c-error); color:var(--c-error); background:var(--c-error-suave); }

/* Con movimiento reducido no basta con quitar la transición: sin ella el `scale` del
   :active se convierte en un salto instantáneo, que es justo lo que molesta. */
@media (prefers-reduced-motion: reduce) { .c-cuerpo * { transition:none !important; animation:none !important; }
  .c-cuerpo *:active { transform:none !important; } }
@media (max-width: 900px) {
  .c-cuerpo-interior { grid-template-columns:1fr; }
  .c-nav { flex-direction:row; overflow-x:auto; gap:4px; padding:8px 12px; border-right:0; border-bottom:1px solid var(--c-borde); scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg, #000 90%, transparent); mask-image:linear-gradient(90deg, #000 90%, transparent); }
  .c-nav a { white-space:nowrap; padding:9px 12px; min-height:40px; }
  .c-nav a span { font-size:var(--c-tipo-meta); }
  .c-nav-admin { margin-top:0; border-top:0; padding-top:9px !important; }
  .c-principal { padding:var(--c-esp-4) var(--c-esp-4) var(--c-esp-12); }
  .c-cabecera { padding:0 var(--c-esp-4); gap:10px; }
  .c-estado span[data-texto] { display:none; }
  .c-cuenta-texto { display:none; }
  .c-cuenta { padding:4px; }
  /* «Ver demos» se salía del selector y pisaba el estado y la cuenta: en estrecho, solo la
     casilla (el texto sigue para el lector de pantalla). */
  .c-selector-demos { gap:0; }
  .c-selector-demos-texto { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .c-selector select { max-width:44vw; }
  .c-buscaempresa { max-width:44vw; }
  .c-campos { grid-template-columns:1fr; }
  .c-regla { grid-template-columns:1fr; }
  .c-regla-exterior { margin-left:0; }
  /* En estrecho, un campo por linea: los anchos por contenido solo tienen sentido
     cuando caben dos o tres al lado. */
  .c-formulario > .c-campo { flex:1 1 100%; --campo-ancho:100%; }
}

/* El teléfono del navegador (PLAN-062 E2). */
.c-tel-cabecera { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:0 0 var(--c-esp-4); }
.c-tel-cuerpo { display:flex; flex-direction:column; gap:var(--c-esp-4); }
.c-tel-llamada { border:1px solid var(--c-acento); background:var(--c-acento-suave); border-radius:var(--c-radio-ficha-alta); padding:16px 18px; display:flex; flex-direction:column; gap:8px; }
.c-tel-quien { font-size:1.15rem; }
.c-tel-marcador { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.c-tel-marcador input[type=text] { flex:1 1 240px; min-height:44px; font:inherit; font-size:var(--c-tipo-tabla); padding:8px 12px; border:1px solid var(--campo-borde); border-radius:var(--c-radio-campo); background:var(--campo-fondo); color:var(--c-texto); }
.c-tel-transferir { min-height:36px; font:inherit; font-size:var(--c-tipo-meta); padding:4px 10px; border:1px solid var(--campo-borde); border-radius:var(--c-radio-campo); background:var(--campo-fondo); color:var(--c-texto); flex:1 1 160px; max-width:240px; }
/* 22/09/2026 · La tarjeta de llamada, por grupos: controles (con Colgar a la derecha), «Pasar la
   llamada a» y «Menú por teclas», cada uno con su etiqueta pequeña; botones compactos dentro. */
.c-tel-llamada .c-acciones { display:flex; flex-direction:column; align-items:stretch; gap:12px; margin-top:6px; }
.c-tel-controles { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.c-tel-controles .c-tel-colgar { margin-left:auto; }
.c-tel-grupo { display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding-top:10px; border-top:1px solid var(--c-borde); }
.c-tel-grupo:first-child { padding-top:0; border-top:0; }
.c-tel-grupo-etiqueta { flex:1 1 100%; font-size:var(--c-tipo-meta); font-weight:var(--c-peso-medio); color:var(--c-texto-2); }
.c-tel-llamada .c-boton, .c-tel-llamada .c-boton-secundario, .c-tel-llamada .c-boton-peligro, .c-tel-llamada .c-boton-enlace { min-height:var(--boton-alto-compacto); padding:0 14px; font-size:var(--c-tipo-meta); }
.c-tel-llamada .c-boton-peligro { background:var(--c-error); color:var(--c-superficie); border-color:transparent; }
.c-tel-llamada .c-boton-peligro:hover { filter:brightness(.92); }
.c-tel-atajos { display:flex; gap:6px; flex-wrap:wrap; flex:1 1 100%; }
/* 15/10/2026 · Memoria rápida (teclas con estado, como un BLF) y agenda particular del teléfono. */
.c-tel-rapidas { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:6px; flex:1 1 100%; }
.c-tel-tecla { display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-width:0; text-align:left; font:inherit; padding:8px 10px 8px 12px; border:1px solid var(--c-borde-fuerte); border-left:4px solid var(--semaforo-neutro); border-radius:var(--c-radio-campo); background:var(--c-superficie); color:var(--c-texto); cursor:pointer; }
.c-tel-tecla:hover { background:var(--c-superficie-2, var(--c-superficie)); filter:brightness(.97); }
.c-tel-tecla-nombre { font-weight:600; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.c-tel-tecla small { color:var(--c-texto-suave, inherit); font-variant-numeric:tabular-nums; }
.c-tel-tecla[data-estado="libre"] { border-left-color:var(--semaforo-ok); }
.c-tel-tecla[data-estado="sonando"] { border-left-color:var(--semaforo-aviso); }
.c-tel-tecla[data-estado="ocupada"] { border-left-color:var(--semaforo-error); }
.c-tel-agenda { border:1px solid var(--c-borde); border-radius:var(--c-radio-campo); padding:8px 12px; }
.c-tel-agenda > summary { cursor:pointer; font-weight:600; min-height:32px; display:flex; align-items:center; }
.c-tel-agenda input[type=search], .c-tel-agenda-form input:not([type=checkbox]) { min-height:36px; font:inherit; padding:6px 10px; border:1px solid var(--campo-borde); border-radius:var(--c-radio-campo); background:var(--campo-fondo); color:var(--c-texto); }
.c-tel-agenda input[type=search] { width:100%; margin:8px 0; box-sizing:border-box; }
.c-tel-agenda-titulo { font-size:var(--c-tipo-tabla); margin:12px 0 6px; }
.c-tel-agenda-form { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.c-tel-agenda-form input:not([type=checkbox]) { flex:1 1 140px; min-width:0; }
.c-tel-agenda-importar { display:flex; gap:6px; flex-wrap:wrap; align-items:baseline; margin-top:6px; }
.c-tel-agenda-importar label.c-boton-enlace { cursor:pointer; }
.c-tel-agenda-importar input[type=file]:focus-visible + label { outline:2px solid var(--c-foco, var(--c-acento)); outline-offset:2px; }
.c-tel-agenda-rapida { display:inline-flex; align-items:center; gap:4px; font-size:var(--c-tipo-tabla); }
.c-tel-agenda-lista { list-style:none; margin:0; padding:0; max-height:320px; overflow:auto; }
.c-tel-agenda-fila { display:flex; gap:8px; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:6px 0; border-top:1px solid var(--c-borde); }
.c-tel-agenda-acciones { display:flex; gap:8px; flex-wrap:wrap; }
.c-tel-atajos .c-boton-enlace { border:1px solid var(--c-borde-fuerte); border-radius:var(--c-radio-pastilla); padding:6px 12px; min-height:var(--boton-alto-compacto); display:inline-flex; align-items:center; }
@media (max-width: 900px) {
  .c-tel-marcador input[type=text] { flex:1 1 100%; }
  .c-tel-llamada .c-acciones { flex-direction:column; align-items:stretch; }
  .c-tel-llamada .c-acciones button { width:100%; }
  .c-tel-transferir { max-width:none; width:100%; }
}

/* Registro por dispositivo: información visible también sin ratón. */
.c-dispositivos{flex-basis:100%;overflow-wrap:anywhere}
.c-dispositivos p{margin:.35rem 0;display:flex;gap:.75rem;flex-wrap:wrap}

.c-cid-salida{min-height:40px;max-width:100%;font:inherit;padding:6px 10px;border:1px solid var(--campo-borde);border-radius:var(--c-radio-campo);background:var(--campo-fondo);color:var(--c-texto)}
.c-extension .c-fila-principal{flex:1 1 200px;overflow-wrap:anywhere}
.c-extension .c-fila-principal strong{white-space:normal}
@media (max-width:560px){
  .c-cabecera{display:grid;grid-template-columns:minmax(0,1fr) auto;height:auto;min-height:60px;padding:8px 16px}
  .c-cabecera .c-marca{grid-column:1;grid-row:1}
  .c-cabecera .c-usuario{grid-column:2;grid-row:1}
  .c-cabecera .c-estado{position:absolute;right:166px;top:26px;margin:0}
  .c-cabecera .c-vista-boton{position:absolute;right:120px;top:12px}
  .c-cabecera .c-selector{grid-column:1 / -1;grid-row:2;flex-wrap:wrap}
  .c-cabecera .c-selector select{max-width:calc(100% - 100px);min-width:0;flex:1}
  .c-cabecera .c-selector .c-buscaempresa{max-width:calc(100% - 100px);min-width:0;flex:1}
}
/* IVR · teclado y destino contextual, sobre los tokens del panel. */
.c-ivr [hidden], .c-ivr-modes[hidden], [data-ivr-number][hidden] { display:none !important; }
.c-ivr-modes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:8px 0 12px; }
.c-ivr-modes button { display:grid; grid-template-columns:24px 1fr; gap:4px 10px; padding:16px; text-align:left; border:1px solid var(--c-borde-fuerte); border-radius:var(--c-radio-campo); background:var(--c-superficie); color:var(--c-texto); cursor:pointer; font:inherit; }
.c-ivr-modes button i { grid-row:1/3; font-size:20px; color:var(--c-acento); }
.c-ivr-modes button strong { font-size:var(--c-tipo-tabla); white-space:normal; overflow-wrap:anywhere; min-width:0; line-height:1.4; }
.c-ivr-modes button span { grid-column:2; font-size:var(--c-tipo-meta); color:var(--c-texto-2); line-height:1.45; }
.c-ivr-modes button[aria-pressed="true"] { border-color:var(--c-acento); background:var(--c-acento-suave); outline:1px solid var(--c-acento); }
.c-ivr-modes button:disabled { opacity:.55; cursor:not-allowed; }
.c-ivr-audio { display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,320px); gap:12px 24px; align-items:end; padding:16px 0 24px; }
.c-ivr-audio audio { width:100%; height:44px; }
.c-ivr-audio .c-boton-enlace { justify-self:start; min-height:44px; font-size:var(--c-tipo-tabla); }
.c-ivr-mapping { margin-block:8px 24px; }
.c-ivr-editor.is-enhanced .c-ivr-mapping { display:grid; grid-template-columns:minmax(250px,340px) minmax(0,1fr); gap:32px; align-items:start; }
.c-ivr-keyboard h4 { margin:0 0 4px; font-size:var(--c-tipo-seccion); }
.c-ivr-keyboard .c-ayuda { margin:0 0 16px; }
.c-ivr-pad { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.c-ivr-pad button { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:6px; min-height:86px; min-width:0; padding:10px 6px; background:var(--c-superficie); color:var(--c-texto); border:1px solid var(--c-borde-fuerte); border-radius:8px; font:inherit; cursor:pointer; transition:background-color var(--c-rapido) var(--c-ease),transform var(--c-rapido) var(--c-ease); }
.c-ivr-pad button strong { font:600 1.5rem/1 var(--c-fuente); font-variant-numeric:tabular-nums; }
.c-ivr-pad button span { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; width:100%; overflow:hidden; overflow-wrap:anywhere; font-size:.75rem; line-height:1.4; color:var(--c-texto-2); }
.c-ivr-pad button.is-assigned { background:var(--c-acento-suave); border-color:var(--c-acento); }
.c-ivr-pad button[aria-pressed="true"] { background:var(--c-acento); color:var(--c-acento-texto); border-color:var(--c-acento); }
.c-ivr-pad button[aria-pressed="true"] span { color:var(--c-acento-texto); }
.c-ivr-pad button:active, .c-ivr-modes button:active { transform:scale(.96); }
.c-ivr-pad button:focus-visible, .c-ivr-modes button:focus-visible, .c-ivr-shortcuts button:focus-visible { outline:3px solid var(--c-acento); outline-offset:3px; transition:none; }
.c-ivr-destinations { min-width:0; }
.c-ivr-editor.is-enhanced .c-ivr-destinations { background:var(--c-superficie-2); border-radius:var(--c-radio-ficha); padding:24px; margin-top:58px; }
.c-ivr-selection { display:none; }
.is-enhanced .c-ivr-selection { display:flex; align-items:center; gap:12px; margin-bottom:24px; color:var(--c-texto); }
.c-ivr-selection span { display:grid; place-items:center; width:44px; height:44px; flex-shrink:0; background:var(--c-acento); color:var(--c-acento-texto); border-radius:8px; font-size:1.5rem; font-weight:650; }
.c-ivr-selection strong { overflow-wrap:anywhere; font-size:var(--c-tipo-seccion); }
.c-ivr-shortcuts { display:flex; flex-wrap:wrap; gap:6px 12px; margin-top:24px; }
.c-ivr-shortcuts button { border:0; background:none; color:var(--c-acento); min-height:44px; padding:4px 0; font:500 var(--c-tipo-tabla)/1.4 var(--c-fuente); cursor:pointer; text-decoration:underline; text-underline-offset:4px; }
.c-ivr-shortcuts button:disabled { opacity:.55; cursor:not-allowed; }
.c-ivr-behavior { border-top:1px solid var(--c-borde); border-bottom:1px solid var(--c-borde); padding-block:4px; }
.c-ivr-behavior .c-campos { padding-block:16px; }
.c-ivr-subheading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:32px; }
.c-ivr-subheading h3 { margin:0 0 4px; }
.c-ivr-subheading .c-ayuda { margin:0; }
.c-ivr [data-ivr-submenu] { margin-top:12px; }
.c-ivr [data-ivr-submenu] > label { display:flex; align-items:center; gap:8px; min-height:44px; }
@media(hover:hover) { .c-ivr-pad button:not([aria-pressed="true"]):hover, .c-ivr-modes button:not([aria-pressed="true"]):hover { background:var(--c-superficie-2); } }
@media(max-width:800px) {
  .c-ivr-modes { gap:8px; }
  .c-ivr-modes button { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:8px; padding:12px 6px; min-height:88px; text-align:center; }
  .c-ivr-modes button span { display:none; }
  .c-ivr-audio { grid-template-columns:1fr; }
  .c-ivr-editor.is-enhanced .c-ivr-mapping { grid-template-columns:1fr; gap:12px; }
  .c-ivr-editor.is-enhanced .c-ivr-destinations { margin-top:0; padding:20px; }
  .c-ivr-pad button { min-height:76px; }
}
@media(prefers-reduced-motion:reduce) { .c-ivr-pad button { transition:none; } .c-ivr-pad button:active, .c-ivr-modes button:active { transform:none; } }

/* 23/09/2026 · PLAN-066 D · repaso de interfaz. */
/* El aviso de guardado, junto al botón que lo provoca (se repetía solo arriba del todo). */
.c-guardar-flotante [data-error="true"] { color:var(--c-error); font-weight:var(--c-peso-medio); }
/* Campos dentro de una fila de lista (Extensiones): mismo alto que los botones compactos de
   la fila, y 44 px con el dedo (--boton-alto-compacto cambia con pointer:coarse). Antes eran
   estilos en línea a 36 px fijos. */
.c-campo-fila { min-height:var(--boton-alto-compacto); font:inherit; font-size:var(--c-tipo-meta); border:1px solid var(--campo-borde); border-radius:6px; padding:4px 8px; background:var(--campo-fondo); color:var(--c-texto); }
.c-campo-fila[data-ancho="corto"] { width:6em; }
.c-campo-fila[data-ancho="flexible"] { flex:1 1 180px; min-width:0; }
/* Personas y grupos (antes, estilos en línea en el JS). */
.c-personas-cabecera { margin-top:0; }
.c-personas-buscar { flex:1; min-width:0; min-height:44px; font:inherit; padding:10px 12px; border:1px solid var(--campo-borde); border-radius:var(--c-radio-campo); background:var(--campo-fondo); color:var(--c-texto); }
.c-personas-cuenta { white-space:nowrap; }
.c-personas-seccion { font-size:var(--c-tipo-seccion); margin:32px 0 6px; }
.c-personas-seccion[data-bloque] { margin:24px 0 10px; }
.c-personas-anadir { margin-top:12px; }
.c-miembro { margin-top:6px; }
.c-miembro select { flex:1; min-width:0; min-height:44px; font:inherit; }
/* PLAN-069 · Centros de trabajo. */
.c-centros-alta { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; margin-top:var(--c-esp-4); }
.c-centros-alta .c-campo { flex:1 1 240px; max-width:420px; margin:0; }
.c-centro-nombre { margin:0; }
.c-centro-nombre input { width:100%; max-width:28ch; min-height:var(--boton-alto-compacto); font:inherit; font-weight:var(--c-peso-fuerte); border:1px solid var(--campo-borde); border-radius:6px; padding:4px 8px; background:var(--campo-fondo); color:var(--c-texto); }
.c-centros-sin { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.c-centros-sin span { flex:1 1 280px; }
.c-centros-sin select, #reparto .c-guardar-flotante select { min-height:var(--boton-alto-compacto); font:inherit; max-width:100%; }
.c-centros-titulo { font-size:var(--c-tipo-seccion); margin:var(--c-esp-6) 0 10px; }
#reparto .c-pestanas { overflow-x:auto; }
#reparto .c-pestanas a { white-space:nowrap; }
.c-centros-bloque { margin:0 0 var(--c-esp-4); }
.c-centros-bloque label { cursor:pointer; }
.c-centros-casilla { width:44px; }
.c-centros-casilla input { width:18px; height:18px; accent-color:var(--c-acento); margin:0; vertical-align:middle; }
#reparto .c-guardar-flotante { flex-wrap:wrap; }
#reparto .c-guardar-flotante [data-marcados] { flex:1 1 220px; }
/* PLAN-069 F2 · Centros de cada usuario. */
.c-usuario-centros { border:0; padding:0; margin:0; min-width:0; }
.c-usuario-centros legend { font-size:var(--c-tipo-tabla); font-weight:var(--c-peso-medio); margin-bottom:4px; padding:0; }
.c-usuario-centros-fila { flex-basis:100%; margin-top:4px; }
.c-usuario-centros-fila form { display:flex; flex-wrap:wrap; gap:4px 16px; align-items:center; padding:8px 0 4px; }
.c-usuario-centros-fila .c-ayuda { flex-basis:100%; margin:0; }

/* ================= 30/09/2026 · Sistema de iconos (centralitia_iconos.php + assets/brand/centralitia/iconos.svg) =================
   Mismo estilo que los accesos del Panel: trazo en el color del elemento y un detalle naranja (icono-acento).
   Catálogo: /assets/brand/centralitia/iconos.html. */
.c-ico { inline-size:1.125rem; block-size:1.125rem; flex:none; display:inline-block; vertical-align:-.22em; overflow:visible;
  --icono-acento:var(--ibk-naranja-500, #e2661f); --icono-sobre-acento:var(--c-superficie); }
/* En botones: el icono delante del texto. Los botones del panel ya separan con «gap»; el resto, con margen. */
.c-ico-b { margin-inline-end:.5em; }
:where(.c-boton, .c-boton-secundario, .c-boton-peligro, .c-boton-enlace) > .c-ico-b { margin-inline-end:0; }
:where(.c-boton-secundario, .c-boton-enlace) > .c-ico-b, button:not([class*="c-boton"]) > .c-ico-b { color:var(--c-acento); }
.c-boton > .c-ico-b { --icono-sobre-acento:var(--c-acento); }
.c-boton-peligro > .c-ico-b { color:currentColor; --icono-acento:currentColor; }
button:disabled > .c-ico-b { opacity:.7; }
/* Títulos de bloque: el icono en una baldosa suave, para que cada bloque se reconozca de un vistazo. */
.c-ico-h { display:inline-grid; place-items:center; inline-size:34px; block-size:34px; margin-inline-end:12px; vertical-align:middle;
  border-radius:10px; background:var(--c-acento-suave); color:var(--c-acento); flex:none; }
.c-ico-h > .c-ico { inline-size:19px; block-size:19px; vertical-align:0; }
h2:has(> .c-ico-h) { display:flex; align-items:center; flex-wrap:wrap; }
/* Título de la página: la baldosa grande y llena, como los accesos principales del Panel. */
.c-ico-h1 { display:grid; place-items:center; inline-size:48px; block-size:48px; border-radius:14px; grid-row:span 2; align-self:center;
  background:var(--c-acento); color:var(--c-acento-texto); --icono-acento:var(--ibk-naranja-500, #e2661f); --icono-sobre-acento:var(--c-acento); }
.c-ico-h1 > .c-ico { inline-size:26px; block-size:26px; vertical-align:0; }
/* Baldosa a la izquierda; el título y su subtítulo (small), uno debajo del otro a su derecha. */
.c-titulo h1:has(> .c-ico-h1) { display:grid; grid-template-columns:auto minmax(0, 1fr); column-gap:16px; align-items:center; }
.c-titulo h1:has(> .c-ico-h1) > small { margin-top:2px; }
/* Desplegables. */
summary > .c-ico-s { color:var(--c-acento); margin-inline-end:.5em; }
details.c-plegable-accion > summary > .c-ico-s { margin-inline-end:0; }
/* Menú lateral. */
.c-nav a > .c-ico-n { inline-size:20px; block-size:20px; color:var(--c-texto-3); --icono-acento:var(--c-texto-3); transition:color var(--c-rapido) var(--c-ease); }
.c-nav a:hover > .c-ico-n { color:var(--c-texto-2); --icono-acento:var(--ibk-naranja-500, #e2661f); }
.c-nav a[aria-current="page"] > .c-ico-n { color:var(--nav-activo-texto); --icono-acento:var(--ibk-naranja-500, #e2661f); }
.c-ico-centri { inline-size:1.25rem; block-size:1.25rem; }
/* Dirección de una llamada (entrante, saliente, transferida, perdida…): baldosa redonda delante de la fila. */
.c-dir { display:inline-grid; place-items:center; inline-size:34px; block-size:34px; border-radius:50%; flex:none;
  background:var(--c-acento-suave); color:var(--c-acento); }
.c-dir > .c-ico { inline-size:18px; block-size:18px; vertical-align:0; }
.c-dir-saliente { background:color-mix(in oklab, var(--c-texto-3) 16%, transparent); color:var(--c-texto-2); }
.c-dir-perdida { background:var(--c-error-suave); color:var(--c-error); --icono-acento:var(--c-error); }
.c-dir-transferida { background:var(--c-ok-suave); color:var(--c-ok); }
.c-quien-llamada { display:flex; align-items:center; gap:12px; }
.c-dir-neutro { background:var(--c-superficie-2); color:var(--c-texto-2); }
/* Filas de lista con icono delante (contactos, seguimientos, conversaciones). */
.crm-fila.crm-fila-ico { display:grid; grid-template-columns:34px minmax(0, 1fr); gap:12px; align-items:start; }
.crm-fila > .c-dir { display:grid; margin-top:0; }
.c-colab-fila.c-colab-fila-ico { display:grid; grid-template-columns:34px minmax(0, 1fr); gap:12px; align-items:start; }
.c-colab-fila-ico > div { display:flex; flex-direction:column; gap:6px; min-width:0; }
@media (prefers-reduced-motion: reduce) { .c-nav a > .c-ico-n { transition:none; } }