/* =====================================================================
   KüchenHouse · hoja de estilos común de las apps (kh.css) · borrador del laboratorio
   Dueña: sesión «Diseño KH». Base: list (gestion-tiendas/public/assets/css/style.css), limpia.
   - Todo color, radio y sombra sale de una variable de :root. Nada de hex sueltos en los componentes.
   - Clases en <html>:
       apariencia de cada persona · kh-d2/kh-d3 · kh-l-s/g/xg · kh-m-b/c · kh-c-* · kh-t-contraste/oscuro · kh-nav-col · kh-sin-mov
       decisiones en prueba (laboratorio) · kh-x-*  → al decidir, lo elegido pasa a ser lo de por defecto y la clase desaparece
   - Color de la app: --app (lo pone cada app en <html style="--app:#2f6fb3">).
   ===================================================================== */

/* ---------- Letra de la casa: Inter, servida desde el propio kit ----------
   Decisión de César (28/09/2026). Va alojada en panel.kuchen.es y NO en Google Fonts: así la IP de cada
   persona no sale de la casa (RGPD), no hay que abrir fonts.gstatic.com en la CSP de nueve apps, y carga
   antes. Es una sola fuente variable (todos los grosores en un archivo). Licencia SIL OFL. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url("https://panel.kuchen.es/kit/v1/fuentes/inter-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url("https://panel.kuchen.es/kit/v1/fuentes/inter-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }


/* Las demás letras del catálogo, también servidas desde el kit (28/09/2026): ninguna llamada a Google.
   Cada persona solo descarga la que elige, y solo el trozo del alfabeto que usa. Todas con licencia libre (OFL). */
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("https://panel.kuchen.es/kit/v1/fuentes/atkinson-400-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap;
    src: url("https://panel.kuchen.es/kit/v1/fuentes/atkinson-700-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("https://panel.kuchen.es/kit/v1/fuentes/atkinson-400-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap;
    src: url("https://panel.kuchen.es/kit/v1/fuentes/atkinson-700-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("https://panel.kuchen.es/kit/v1/fuentes/plex-400-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap;
    src: url("https://panel.kuchen.es/kit/v1/fuentes/plex-500-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap;
    src: url("https://panel.kuchen.es/kit/v1/fuentes/plex-600-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap;
    src: url("https://panel.kuchen.es/kit/v1/fuentes/plex-700-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("https://panel.kuchen.es/kit/v1/fuentes/plex-400-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap;
    src: url("https://panel.kuchen.es/kit/v1/fuentes/plex-500-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap;
    src: url("https://panel.kuchen.es/kit/v1/fuentes/plex-600-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap;
    src: url("https://panel.kuchen.es/kit/v1/fuentes/plex-700-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("https://panel.kuchen.es/kit/v1/fuentes/nunito-400-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 600; font-display: swap;
    src: url("https://panel.kuchen.es/kit/v1/fuentes/nunito-600-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 700; font-display: swap;
    src: url("https://panel.kuchen.es/kit/v1/fuentes/nunito-700-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 800; font-display: swap;
    src: url("https://panel.kuchen.es/kit/v1/fuentes/nunito-800-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("https://panel.kuchen.es/kit/v1/fuentes/nunito-400-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 600; font-display: swap;
    src: url("https://panel.kuchen.es/kit/v1/fuentes/nunito-600-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 700; font-display: swap;
    src: url("https://panel.kuchen.es/kit/v1/fuentes/nunito-700-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 800; font-display: swap;
    src: url("https://panel.kuchen.es/kit/v1/fuentes/nunito-800-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("https://panel.kuchen.es/kit/v1/fuentes/serif-400-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 600; font-display: swap;
    src: url("https://panel.kuchen.es/kit/v1/fuentes/serif-600-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 700; font-display: swap;
    src: url("https://panel.kuchen.es/kit/v1/fuentes/serif-700-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("https://panel.kuchen.es/kit/v1/fuentes/serif-400-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 600; font-display: swap;
    src: url("https://panel.kuchen.es/kit/v1/fuentes/serif-600-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 700; font-display: swap;
    src: url("https://panel.kuchen.es/kit/v1/fuentes/serif-700-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Fraunces: la de los informes editoriales (§12). También aquí, para que los documentos con diseño propio
   no tengan que llamar a Google (28/09/2026). */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url("https://panel.kuchen.es/kit/v1/fuentes/fraunces-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url("https://panel.kuchen.es/kit/v1/fuentes/fraunces-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
    /* Qué versión del kit es esta hoja. Sirve para preguntarlo desde la propia pantalla (KH.version) en vez
       de deducirlo de la dirección del fichero: si una app sirve una copia vieja, aquí se ve. */
    --kh-kit: "1.45.0";
    /* Marca y grises */
    --kh-negro: #0b0d0f;
    --kh-tinta: #14181c;
    --kh-gris-900: #1d2125;
    --kh-gris-700: #3b424a;
    --kh-gris-600: #5b626b;
    --kh-gris-400: #939aa3;
    --kh-gris-300: #c7ccd2;
    --kh-gris-200: #e5e8ec;
    --kh-gris-100: #f0f2f5;
    --kh-fondo: #f4f3ef;   /* hueso · decisión de César 28/09 */
    --kh-blanco:   #ffffff;
    /* Papeles (cambian con el modo) */
    --kh-superficie: var(--kh-blanco);        /* tarjetas, barra, menú, campos */
    --kh-texto: var(--kh-tinta);
    --kh-texto-2: var(--kh-gris-600);         /* explicaciones, etiquetas */
    --kh-texto-3: var(--kh-gris-400);         /* pistas, apagado */
    --kh-borde: var(--kh-gris-200);
    --kh-borde-2: var(--kh-gris-300);         /* campos, botones secundarios */
    --kh-hover: var(--kh-gris-100);
    --kh-principal: var(--kh-negro);          /* botón principal */
    --kh-sobre-principal: #ffffff;
    --kh-resalte: var(--kh-negro);            /* pestaña y menú activos (apariencia personal) */
    --kh-sobre-resalte: #ffffff;
    /* --app NO se declara aquí a propósito (28/09/2026): traía el azul de list y lo heredaban todas las apps
       que no ponían el suyo. Con la cabecera de tabla del color de la app, eso pintaba de azul media casa.
       Cada app lo declara en su <html style="--app:#xxxxxx"> con el color del catálogo del Centro; quien no
       lo haga se queda en gris neutro, que es honesto: mejor sin color que con el de otro. */
    /* Avisos */
    --kh-ok: #14181c;    --kh-ok-bg: #f0f2f5;    --kh-ok-borde: #c7ccd2;   /* sin verdes (César 18/09): lo bueno va en tinta con ✓ */
    --kh-warn: #b7791f;  --kh-warn-bg: #fdf6e9;  --kh-warn-borde: #f0e0b8;
    --kh-error: #c0392b; --kh-error-bg: #fdecea; --kh-error-borde: #f5c6c0;
    /* Colores de situación (patrón §8: iguales en pantallas, impresos, análisis y correos) */
    --sit-borrador-bg: #eceff3;  --sit-borrador-tx: #5b6672;  --sit-borrador: #8a94a0;
    --sit-decidir-bg:  #fff1cc;  --sit-decidir-tx:  #7a5200;  --sit-decidir:  #c98a00;
    --sit-marcha-bg:   #e1ecfb;  --sit-marcha-tx:   #174f9c;  --sit-marcha:   #1f6fd1;
    --sit-vencida-bg:  #fde1dd;  --sit-vencida-tx:  #a3261a;  --sit-vencida:  #d13b2b;
    --sit-cumplida-bg: #e4e7eb;  --sit-cumplida-tx: #14181c;  --sit-cumplida: #3b424a;   /* sin verde: gris oscuro con ✓ */
    --sit-nocumple-bg: #f3d6db;  --sit-nocumple-tx: #7d1627;  --sit-nocumple: #8e1b2c;
    --sit-retirada-bg: #eceff3;  --sit-retirada-tx: #7b8591;  --sit-retirada: #9aa3ad;
    /* Semáforo (César, 22/09/2026: AQUÍ el verde SÍ se queda, «es internacional»; en el resto de la casa, no).
       Se llaman Bien · Vigilar · Mal, no por el color. */
    --kh-sem-bien: #1f8a4c;     --kh-sem-bien-bg: #e9f7ef;     --kh-sem-bien-tx: #146a31;
    --kh-sem-vigilar: #c98a00;  --kh-sem-vigilar-bg: #fff1cc;  --kh-sem-vigilar-tx: #7a5200;
    --kh-sem-mal: #d13b2b;      --kh-sem-mal-bg: #fde1dd;      --kh-sem-mal-tx: #a3261a;
    /* Datos: colores de las series de gráficas (sin verdes). 1 es la serie principal. */
    --kh-dato-1: #14181c;   /* tinta */
    --kh-dato-2: #1f6fd1;   /* azul */
    --kh-dato-3: #c98a00;   /* ámbar */
    --kh-dato-4: #8e1b3c;   /* granate */
    --kh-dato-5: #7a818a;   /* gris */
    --kh-dato-6: #6d28d9;   /* morado */
    --kh-dato-1-suave: #9aa1a9; --kh-dato-2-suave: #a9c6ea; --kh-dato-3-suave: #e6cf96;
    --kh-dato-4-suave: #cfa3b0; --kh-dato-5-suave: #c8ccd1; --kh-dato-6-suave: #c3b0ee;
    --kh-dato-neg: #c0392b; /* lo que resta */
    --kh-dato-pos: #14181c; /* lo que suma */
    --kh-dato-guia: #c7ccd2;/* ejes y líneas de referencia */
    /* Forma */
    --kh-radio: 10px; --kh-radio-sm: 7px;   /* esquinas medias · decisión de César 28/09 */
    --kh-sombra: 0 1px 2px rgba(16,20,26,.05), 0 10px 30px rgba(16,20,26,.06);
    --kh-sombra-sm: 0 1px 2px rgba(16,20,26,.06);
    --kh-sombra-pop: 0 10px 30px rgba(16,20,26,.16);
    --kh-foco: 0 0 0 3px rgba(11,13,15,.12);
    --kh-fuente: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;   /* decisión de César 28/09: Inter */
    --kh-mono: ui-monospace, Consolas, "SF Mono", monospace;
    /* Medidas */
    --kh-barra-alto: 58px;
    --kh-nav-ancho: 236px;
    --kh-tab-py: 10px; --kh-tab-px: 14px; --kh-tab-fs: max(11px, .85rem);
    /* NINGÚN TEXTO BAJA DE SU SUELO, SE COMBINE LO QUE SE COMBINE. Los tamaños van en rem y los estilos
       bajan el rem base (Compacto 14 px) y las letras también (A− lo deja en 93,75 %). Las dos cosas a la vez
       MULTIPLICAN, y esa esquina no la había medido nadie: con Compacto + A−, que es lo que usa César, el rem
       base queda en 13 px y un `.68rem` sale a 8,8. Medido en su panel de list el 07/10/2026: 102 textos por
       debajo de 11 px, el más pequeño a 6,8, y el menú entero a 10,4 con 22 px de alto.
       El suelo se pone con max() en cada tamaño: 11 px para texto y 10 px para etiquetas y códigos. Con la
       letra normal NO cambia nada —.7rem ya son 11,2 px y .66rem son 10,56—, así que esto no puede empeorar
       ninguna pantalla: solo impide que una combinación la hunda. */
    --kh-stab-py: 5px; --kh-stab-px: 12px; --kh-stab-fs: max(11px, .8rem);
    --kh-t: .12s;                             /* duración de transiciones */
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; font-family: var(--kh-fuente); color: var(--kh-texto); background: var(--kh-fondo);
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: var(--kh-texto); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--kh-resalte); outline-offset: 2px; }
.kh-num, .kh-table td.n, .kh-table th.n { text-align: right; font-variant-numeric: tabular-nums; }
.kh-code { font-family: var(--kh-mono); font-weight: 700; font-size: max(11px, .86rem); }
.kh-muted { color: var(--kh-texto-3); }
.kh-muted-sm { color: var(--kh-texto-3); font-size: max(11px, .78rem); }
/* Un texto apagado NUNCA quiere ser negrita. Dentro de un <h2> heredaba el grosor del título —«Vendedores
   (mín. 10 leads)»— y había que anularlo a mano: 28 veces solo en leads (02/10/2026). Se declara aquí y ya está. */
.kh-muted, .kh-muted-sm, .kh-sub { font-weight: 400; }

/* ---------- Barra superior ---------- */
.kh-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: color-mix(in srgb, var(--kh-superficie) 88%, transparent); backdrop-filter: saturate(160%) blur(8px);
    border-bottom: 1px solid var(--kh-borde); padding: 10px 22px; min-height: var(--kh-barra-alto);
    position: sticky; top: 0; z-index: 30; }
.kh-topbar-izq, .kh-topbar-der { display: flex; align-items: center; gap: 10px; min-width: 0; }
.kh-wordmark { font-weight: 800; letter-spacing: -.02em; color: var(--kh-negro); font-size: 1.35rem; line-height: 1; white-space: nowrap; }
.kh-wordmark:hover { text-decoration: none; }
.kh-wordmark small { display: block; font-weight: 600; letter-spacing: .26em; font-size: max(10px, .52rem); color: var(--kh-texto-2); margin-top: 5px; text-transform: uppercase; }
.kh-sello { display: none; width: 30px; height: 30px; border-radius: 8px; background: var(--app, var(--kh-negro)); color: #fff; font-weight: 800; font-size: max(11px, .82rem);
    align-items: center; justify-content: center; letter-spacing: -.5px; flex: none; }
.kh-navtoggle, .kh-icobtn { background: none; border: 0; cursor: pointer; font-size: 1.1rem; line-height: 1; color: var(--kh-gris-700);
    padding: 7px 9px; border-radius: 8px; position: relative; font-family: inherit; }
.kh-navtoggle:hover, .kh-icobtn:hover { background: var(--kh-hover); color: var(--kh-negro); }
.kh-icobtn .kh-cuenta { position: absolute; top: 1px; right: 0; background: var(--kh-error); color: #fff; font-size: max(10px, .6rem); font-weight: 800;
    border-radius: 999px; padding: 1px 5px; line-height: 1.3; }
.kh-badge-rol { background: var(--kh-negro); color: var(--kh-sobre-principal); padding: 3px 10px; border-radius: 999px;
    font-size: max(10px, .66rem); text-transform: uppercase; letter-spacing: .07em; font-weight: 700; }
.kh-avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%;
    background: var(--kh-negro); color: var(--kh-sobre-principal); font-size: max(11px, .8rem); font-weight: 800; flex: none; }
/* La barra es de UNA línea siempre: lo que no cabe se encoge o se esconde, nunca baja (22/09/2026).
   .kh-barra es el mismo nombre para quien lo escribiera así. */
.kh-barra { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: color-mix(in srgb, var(--kh-superficie) 88%, transparent); border-bottom: 1px solid var(--kh-borde);
    padding: 10px 22px; min-height: var(--kh-barra-alto); position: sticky; top: 0; z-index: 30; }
.kh-topbar, .kh-barra { flex-wrap: nowrap !important; }
.kh-topbar > *, .kh-barra > * { min-width: 0; }
.kh-user { display: flex; align-items: center; gap: 8px; min-width: 0; flex: none; flex-wrap: nowrap !important; }

/* ---------- Estás actuando como otra persona (list, 07/10/2026) ----------
   list metió su «Ver como…» dentro del menú del usuario y avisó de que chirriaba, con razón: **eso no es tuyo**.
   Todo lo demás del panel es de la persona —su nombre, su letra, su contraseña, su salida—; «ver como otro» es una
   herramienta de administrador, y estaba ahí solo porque era un desplegable grande que no cabía en la barra, que
   es la peor razón para colocar algo. Y tiene una consecuencia fea: mientras suplantas, el menú enseña la
   identidad de la OTRA persona, así que la salida del disfraz vive dentro de un menú que ya no es tuyo.
   Dos decisiones, y la primera quita la pieza de en medio:
   1. EL DISPARADOR NO VA EN LA BARRA: va donde están las personas (la ficha de cada una: «Ver la aplicación como
      ella»). Una herramienta que se usa sobre alguien se ofrece donde está ese alguien, no en un desplegable
      global que hay que rellenar con 200 nombres.
   2. LO QUE SÍ ES DEL KIT ES EL ESTADO: mientras dura, se ve SIEMPRE y sin abrir nada, y lleva su propia salida.
      Un modo que cambia lo que ves y no se nota es la forma más rápida de que alguien jure que la app miente.
   Va arriba del todo, pegada, y NO se puede cerrar: cerrarla sería esconder el aviso sin salir del modo. */
.kh-suplantando { position: sticky; top: 0; z-index: 60; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
    padding: 6px 16px; background: var(--kh-warn-bg); border-bottom: 1px solid var(--kh-warn); color: var(--kh-warn);
    font-size: max(11px, .84rem); }
.kh-suplantando b { color: var(--kh-warn); }
.kh-suplantando small { color: var(--kh-texto-2); }
.kh-suplantando .kh-btn { margin-left: auto; }
@media print { .kh-suplantando { position: static; } }

/* ---------- Menú del usuario: todo lo «mío» en un sitio (César, 07/10/2026) ----------
   «La barra de menú es un poco basta, habría que comprimir… habrá que reunificar algunas cosas para que estén
   dentro del menú de usuario, porque ese es el menú original. Lo de la búsqueda está bien, es pequeñito, pero hay
   muchas opciones como la personalización, ayuda y demás que se podría ajustar. Con iconos.»
   list tenía DIEZ cosas sueltas a la derecha de la barra y la fila de áreas se desbordaba por eso. Lo pidió como
   pieza del kit en vez de escribirlo en su app, y tiene razón: si lo escribe cada una, acabamos con nueve menús
   de usuario distintos.
   QUÉ VA DENTRO: lo que es «tuyo» y se mira de vez en cuando —personalización, tu acceso, ayuda, salir— y los
   ajustes personales que la app quiera (un .kh-seg dentro del panel vale).
   QUÉ SE QUEDA FUERA, y no es gusto: LO QUE AVISA. La campana es un contador vivo; un «tienes 10» que hay que
   abrir para enterarte no avisa de nada (lo razonó list y lo firmo). El buscador también fuera: es de usar, no de
   consultar.
   El panel va FIJO y lo coloca KH.menuUsuario(), porque en pantalla estrecha la barra lleva overflow:hidden y un
   panel absoluto se quedaría recortado — el mismo caso del «⋯» del cinturón. */
.kh-menu-usuario { position: relative; flex: none; }
.kh-menu-usuario > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
    padding: 2px 6px 2px 2px; border-radius: 999px; border: 1px solid transparent; max-width: 220px; }
.kh-menu-usuario > summary::-webkit-details-marker { display: none; }
.kh-menu-usuario > summary:hover, .kh-menu-usuario[open] > summary { background: var(--kh-hover); border-color: var(--kh-borde); }
.kh-menu-usuario > summary > .nombre { font-size: max(11px, .84rem); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.kh-menu-usuario > summary::after { content: "▾"; font-size: max(10px, .62rem); color: var(--kh-texto-3); flex: none; }
.kh-menu-usuario-panel { position: fixed; z-index: 500; min-width: 250px; max-width: 320px; max-height: 80vh; overflow: auto;
    background: var(--kh-superficie); border: 1px solid var(--kh-borde); border-radius: 12px; box-shadow: var(--kh-sombra-pop); padding: 6px; }
.kh-menu-usuario-panel .quien { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1px 10px; align-items: center;
    padding: 8px 10px 10px; border-bottom: 1px solid var(--kh-borde); margin-bottom: 4px; }
.kh-menu-usuario-panel .quien .kh-avatar { grid-row: span 2; }
.kh-menu-usuario-panel .quien b { font-size: max(11px, .9rem); }
.kh-menu-usuario-panel .quien small { color: var(--kh-texto-2); font-size: max(11px, .76rem); overflow-wrap: anywhere; }
.kh-menu-usuario-panel .quien .kh-tag, .kh-menu-usuario-panel .quien .kh-badge-rol { grid-column: 2; margin-top: 4px; justify-self: start; }
/* VISTE TAMBIÉN LOS BOTONES, no solo los enlaces. Lo cazó list (07/10/2026): su fila «cambiar de tienda»
   TIENE que ser <button> porque manda un POST con CSRF, y un enlace ahí sería un fallo de seguridad, no
   una elección de estilo. Mi regla miraba solo <a>, así que la fila correcta salía desnuda y la insegura
   salía bien vestida: el kit estaba premiando lo que no debe hacerse. */
.kh-menu-usuario-panel :is(a, button) { width: 100%; text-align: left; background: none; border: 0; font: inherit;
    cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px;
    color: var(--kh-texto); text-decoration: none; font-size: max(11px, .86rem); }
.kh-menu-usuario-panel :is(a, button):hover { background: var(--kh-hover); text-decoration: none; }
.kh-menu-usuario-panel :is(a, button) .ic { width: 18px; text-align: center; flex: none; opacity: .85; }
.kh-menu-usuario-panel hr { border: 0; border-top: 1px solid var(--kh-borde); margin: 5px 0; }
/* Un ajuste puede vivir dentro del panel: no todo lo «mío» es un enlace */
.kh-menu-usuario-panel .grupo { padding: 6px 10px 8px; display: grid; gap: 5px; }
.kh-menu-usuario-panel .grupo > b { font-size: max(10px, .68rem); text-transform: uppercase; letter-spacing: .05em; color: var(--kh-texto-3); font-weight: 700; }
.kh-menu-usuario-panel .grupo .kh-seg > :is(a, button) { padding: 2px 7px; font-size: max(11px, .76rem); }   /* que las tres opciones quepan en el panel sin partirse */
@media (max-width: 760px) {
    .kh-menu-usuario > summary > .nombre, .kh-menu-usuario > summary::after { display: none; }
    .kh-menu-usuario > summary { padding: 0; }
}
.kh-user > form { margin: 0; }
/* Buscador de la barra: pastilla con lupa y el atajo */
.kh-search-btn, .kh-buscar { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px; white-space: nowrap;
    border: 1px solid var(--kh-borde); border-radius: 999px; background: var(--kh-superficie); color: var(--kh-texto-2);
    font: inherit; font-size: max(11px, .82rem); line-height: 1; cursor: pointer; }
.kh-search-btn:hover, .kh-buscar:hover { background: var(--kh-hover); border-color: var(--kh-borde-2); color: var(--kh-texto); text-decoration: none; }
.kh-search-kbd { font-size: max(10px, .64rem); font-weight: 700; border: 1px solid var(--kh-borde); border-radius: 6px; padding: 2px 5px;
    color: var(--kh-texto-3); background: var(--kh-hover); }
@media (max-width: 1200px) { .kh-search-kbd { display: none; } .kh-search-btn, .kh-buscar { padding: 0 8px; } }

/* Cinturón de apps · A (pactado): cuadradito del color de la app; la actual, rellena.
   REGLA DEL KIT (22/09/2026): la barra de arriba NUNCA hace dos líneas. Si no caben todas las apps,
   primero se van los nombres (solo el cuadradito, con su tooltip) y luego las que sobran al desplegable «⋯».
   Lo reparte KH.cinturon(). Las propiedades marcadas !important son las que ninguna app puede pisar:
   son las que hacían que la barra creciera hacia abajo. Todo lo demás sigue siendo pisable. */
.kh-cinturon { position: relative; display: flex; align-items: center; gap: 5px; min-width: 0;
    flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none; }
.kh-cinturon::-webkit-scrollbar { display: none; }
.kh-app { --c: var(--app, var(--kh-texto-2)); display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 28px; height: 28px; padding: 0 5px;
    border-radius: 8px; border: 1.5px solid var(--c); color: var(--c); background: var(--kh-superficie); font-size: max(11px, .72rem); font-weight: 800;
    letter-spacing: -.2px; text-decoration: none; transition: background var(--kh-t), color var(--kh-t); flex: none !important; opacity: 1; }
.kh-app:hover { background: color-mix(in srgb, var(--c) 12%, var(--kh-superficie)); text-decoration: none; }
.kh-app.actual { background: var(--c); color: #fff; border-color: var(--c); }
/* Las apps que escriben el cuadradito en un <i> (list y las que copiaron su cinturón) */
.kh-cinturon .kh-app > i { font-style: normal; display: inline-grid; place-items: center; width: 21px; height: 21px; border-radius: 6px;
    font-size: max(10px, .66rem); font-weight: 800; flex: none; }
.kh-cinturon .kh-app:not(.actual) > i:not([style*="background"]) { background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); }
/* El nombre solo cuando caben todos: lo decide el JS poniendo .con-nombre */
.kh-cinturon > .kh-app > span { display: none !important; }
.kh-cinturon.con-nombre > .kh-app > span { display: inline !important; font-weight: 600; letter-spacing: 0; white-space: nowrap; }
/* El color del cinturón tampoco es pisable: una app con la barra antigua oscura dejaba los nombres en BLANCO
   SOBRE BLANCO, invisibles (lo vio César en Comités, 28/09/2026). Es la misma categoría que el nowrap. */
.kh-cinturon > .kh-app { color: var(--c) !important; }
.kh-cinturon > .kh-app > span { color: inherit !important; }
.kh-cinturon > .kh-app.actual { color: #fff !important; }
.kh-cinturon .kh-app.oculta { display: none; }
/* Lo que no cabe, al desplegable «⋯» (como los marcadores del navegador) */
.kh-mas { position: relative; flex: none !important; }
.kh-mas > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px;
    padding: 0 7px; border: 1.5px solid var(--kh-borde-2); border-radius: 8px; color: var(--kh-texto-2); font-size: max(11px, .8rem); font-weight: 800; background: var(--kh-superficie); }
.kh-mas > summary::-webkit-details-marker { display: none; }
.kh-mas > summary b { font-size: max(10px, .62rem); font-weight: 800; line-height: 1; margin-left: 1px; padding: 1px 3px; border-radius: 999px;
    background: var(--kh-negro); color: var(--kh-sobre-principal); }   /* cuántas apps hay detrás: un «⋯» a secas no lo dice */
.kh-mas > summary:hover { border-color: var(--kh-gris-400); color: var(--kh-negro); }
.kh-mas[open] > summary { border-color: var(--kh-negro); color: var(--kh-negro); }
.kh-mas-panel { position: fixed; z-index: 500; min-width: 200px; max-height: 70vh; overflow: auto;   /* fijo, porque el cinturón recorta lo que se sale: lo coloca KH.cinturon() */
    background: var(--kh-superficie); border: 1px solid var(--kh-borde);
    border-radius: 12px; box-shadow: var(--kh-sombra-pop); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.kh-mas-panel .kh-app { justify-content: flex-start; width: 100%; border: 0; background: transparent; color: var(--kh-texto); height: 34px; padding: 0 8px; border-radius: 8px; }
.kh-mas-panel .kh-app::before { content: ""; width: 18px; height: 18px; border-radius: 5px; background: var(--c); color: #fff; font-size: max(10px, .6rem); display: grid; place-items: center; flex: none; }
.kh-mas-panel .kh-app span { display: inline !important; font-weight: 600; }
.kh-mas-panel .kh-app:has(> i)::before { display: none; }   /* si la app ya pinta su cuadradito en un <i>, no ponemos otro */
.kh-mas-panel .kh-app > i { width: 18px; height: 18px; }
.kh-mas-panel .kh-app:hover { background: var(--kh-hover); }
.kh-mas-panel .kh-app.actual { background: var(--kh-hover); color: var(--kh-texto); font-weight: 700; }

/* ---------- Estructura ---------- */
.kh-layout { display: flex; min-height: calc(100vh - var(--kh-barra-alto)); }
.kh-main { flex: 1; min-width: 0; padding: 18px 28px 40px; max-width: 1720px; }

/* Menú lateral */
.kh-nav { width: var(--kh-nav-ancho); background: var(--kh-superficie); border-right: 1px solid var(--kh-borde); padding: 16px 12px; flex-shrink: 0;
    transition: width .16s ease; position: sticky; top: var(--kh-barra-alto); align-self: flex-start; height: calc(100vh - var(--kh-barra-alto)); overflow-y: auto; }
.kh-nav a { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 10px; color: var(--kh-gris-700);
    font-size: max(11px, .92rem); font-weight: 500; margin-bottom: 2px; transition: background var(--kh-t), color var(--kh-t); position: relative; }
.kh-nav a .ic { width: 18px; text-align: center; font-size: max(11px, .98rem); opacity: .85; flex: none; display: inline-flex; justify-content: center; }
.kh-nav a:hover { background: var(--kh-hover); color: var(--kh-negro); text-decoration: none; }
.kh-nav a.activo { background: var(--kh-resalte); color: var(--kh-sobre-resalte); box-shadow: var(--kh-sombra-sm); }
.kh-nav a.activo .ic { opacity: 1; }
.kh-nav a .kh-pill-n { margin-left: auto; font-size: max(10px, .68rem); font-weight: 700; background: var(--kh-hover); color: var(--kh-gris-700); border-radius: 999px; padding: 1px 7px; }
.kh-nav a.activo .kh-pill-n { background: rgba(255,255,255,.22); color: inherit; }
.kh-nav-sec { font-size: max(10px, .68rem); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--kh-texto-3); padding: 4px 12px 3px; margin-top: 12px; }
.kh-nav-sec:first-child { margin-top: 0; }
html.kh-nav-col .kh-nav { width: 58px; padding: 14px 8px; }
html.kh-nav-col .kh-nav a { justify-content: center; padding: 0; min-height: 40px; font-size: 0; overflow: hidden; }   /* font-size:0 = tampoco asoma el texto suelto, sin <span> */
html.kh-nav-col .kh-nav a > :not(.ic) { display: none; }
html.kh-nav-col .kh-nav a .ic { font-size: 1.05rem; width: auto; opacity: 1; }
html.kh-nav-col .kh-nav a .kh-pill-n { display: none; }
html.kh-nav-col .kh-nav-sec { color: transparent; height: 1px; padding: 0; margin: 8px 10px; background: var(--kh-borde); overflow: hidden; }
/* Tres formas de tener el menú, a gusto de cada persona (Mi cuenta › Apariencia, o el botón del final del menú):
   extendido (por defecto) · solo iconos (html.kh-nav-col) · flotante (html.kh-nav-flota): no ocupa sitio y se abre por encima. */
html.kh-nav-flota .kh-nav { position: fixed; top: var(--kh-barra-alto); left: 0; bottom: 0; height: calc(100dvh - var(--kh-barra-alto));
    width: min(86vw, var(--kh-nav-ancho)); z-index: 45; transform: translateX(-102%); transition: transform .18s ease;
    box-shadow: var(--kh-sombra-pop); padding: 16px 12px; }
html.kh-nav-flota.kh-nav-abierto .kh-nav { transform: none; }
html.kh-nav-flota .kh-nav a { justify-content: flex-start; padding: 9px 12px; }
html.kh-nav-flota .kh-nav a > :not(.ic) { display: inline; }
html.kh-nav-flota .kh-nav-sec { color: var(--kh-texto-3); height: auto; padding: 4px 12px 3px; margin: 12px 0 0; background: none; }
html.kh-nav-flota .kh-velo { position: fixed; inset: 0; z-index: 44; background: rgba(15,20,25,.38); opacity: 0; pointer-events: none; transition: opacity .18s ease; }
html.kh-nav-flota.kh-nav-abierto .kh-velo { opacity: 1; pointer-events: auto; }
html.kh-nav-flota .kh-nav-cerrar { display: inline-flex !important; position: absolute; top: 10px; right: 10px; z-index: 2; border: 0;
    background: var(--kh-hover); color: var(--kh-texto); border-radius: 999px; width: 32px; height: 32px; align-items: center; justify-content: center; cursor: pointer; }
/* El botón que cambia de forma; lo pone KH.lateral() al final del menú */
.kh-nav-modo { display: flex; align-items: center; gap: 9px; width: 100%; margin-top: 16px; padding: 8px 12px; background: none;
    border: 1px dashed var(--kh-borde); border-radius: 10px; color: var(--kh-texto-2); font: inherit; font-size: max(11px, .8rem); cursor: pointer; text-align: left; }
.kh-nav-modo:hover { background: var(--kh-hover); color: var(--kh-texto); border-style: solid; }
.kh-nav-modo .ic { width: 18px; text-align: center; flex: none; }
html.kh-nav-col .kh-nav-modo { justify-content: center; padding: 10px 0; border-style: solid; border-color: var(--kh-borde-2); color: var(--kh-texto); }
html.kh-nav-col .kh-nav-modo > :not(.ic) { display: none; }
html.kh-nav-col .kh-nav-modo .ic { font-size: 1rem; }
@media (max-width: 700px) { .kh-nav-modo { display: none; } }   /* en el teléfono el menú ya es flotante siempre */

/* Iconos: emoji (hoy) o trazo (svg con class="ic-t") */
.ic-t { display: none; width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Cabecera de página ---------- */
.kh-pagehead { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px 20px; flex-wrap: wrap; margin-bottom: 14px; }
.kh-volver { display: inline-flex; gap: 4px; font-size: max(11px, .8rem); font-weight: 600; color: var(--kh-texto-2); margin-bottom: 4px; }
.kh-h1 { font-size: 1.3rem; margin: 0 0 2px; letter-spacing: -.02em; font-weight: 800; }
.kh-sub { color: var(--kh-texto-2); margin: 0; font-size: max(11px, .86rem); }
.kh-acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* Fila con los dos extremos: una etiqueta a la izquierda y su número a la derecha, dentro de una tarjeta y sin
   ser una tabla (una tabla compara filas entre sí; esto no). 95 veces en la casa a mano: 80 en list, 12 en leads. */
.kh-extremos { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.kh-extremos + .kh-extremos { margin-top: 6px; }
.kh-extremos > :last-child { text-align: right; min-width: 0; }

/* Un bloque entero que lleva a algún sitio pero se lee como texto normal: una fila de lista, una tarjeta.
   46 veces a mano con `text-decoration:none; color:inherit`. OJO: esto NO es un enlace invisible. Si no se nota,
   nadie sabe que se puede pulsar, así que se marca al pasar por encima y con el teclado; y en alto contraste
   vuelve el subrayado, porque ahí el subrayado ES la señal. */
.kh-enlace-mudo { display: block; color: inherit; text-decoration: none; border-radius: var(--kh-radio-sm); }
.kh-enlace-mudo:hover { color: inherit; text-decoration: none; background: var(--kh-hover); }
.kh-enlace-mudo:focus-visible { outline: 2px solid var(--kh-resalte); outline-offset: 2px; }
html.kh-t-contraste .kh-enlace-mudo:hover, html.kh-t-contraste .kh-enlace-mudo:focus-visible { text-decoration: underline; }
/* Un formulario que solo lleva un botón —lo normal en cuanto hay que mandar el CSRF— no debe partir la fila.
   En la casa hay 82 con «style="display:inline"» a mano (64 en list, 13 en Plan de Negocio, 5 en ABC, leads el suyo).
   Dentro de .kh-acciones o de una celda ya no hace falta nada; suelto por ahí, class="kh-enlinea". (leads, 02/10/2026) */
.kh-acciones > form, .kh-table td > form, form.kh-enlinea { display: inline-flex; align-items: center; gap: 8px; margin: 0; }

/* Ficha de etiqueta y valor. NO es una tabla: en una tabla se comparan filas entre sí, y aquí solo hay un dato
   detrás de cada nombre. Por eso se hacía con una tabla de dos columnas y había que fijar el ancho a mano para
   que la primera columna no bailara de una fila a otra (leads, 02/10/2026). En el teléfono, cada valor cae debajo. */
.kh-datos { display: grid; grid-template-columns: minmax(120px, max-content) minmax(0, 1fr); gap: 7px 16px; margin: 0; font-size: max(11px, .88rem); }
.kh-datos.ancha { grid-template-columns: minmax(180px, max-content) minmax(0, 1fr); }
.kh-datos dt { color: var(--kh-texto-2); font-weight: 600; font-size: max(11px, .8rem); }
.kh-datos dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.kh-datos dd:not(:last-child) { border-bottom: 0; }
@media (max-width: 560px) { .kh-datos { grid-template-columns: minmax(0, 1fr); gap: 1px 0; } .kh-datos dd { margin-bottom: 9px; } }
/* Encabezado de SECCIÓN, fuera de tarjeta. No existía —estaban .kh-h1 (el nombre de la pantalla) y
   .kh-bloque-tit (la cabecera DENTRO de una tarjeta)— y list lo escribía igual, con el margen a mano en un
   atributo style. Cuando una app se apaña con estilo en línea es que al kit le falta la pieza, no que la
   app lo haga mal: se lo pongo yo. Lleva su propio margen, así que ese style sobra (list, 07/10/2026). */
.kh-h2 { font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; margin: 22px 0 10px; }
.kh-h2:first-child { margin-top: 0; }
.kh-h2 + .kh-sub { margin-top: -6px; }

.kh-bloque-tit { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.kh-bloque-tit b, .kh-bloque-tit h2 { font-size: max(11px, .98rem); margin: 0; letter-spacing: -.01em; }
.kh-bloque-tit .kh-sub { font-size: max(11px, .8rem); }

/* ---------- Tarjetas y rejillas ---------- */
.kh-card { background: var(--kh-superficie); border: 1px solid var(--kh-borde); border-radius: var(--kh-radio); box-shadow: var(--kh-sombra);
    padding: 18px 20px; margin-bottom: 16px; min-width: 0; }
.kh-grid { display: grid; gap: 16px; }
.kh-grid.cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.kh-grid.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.kh-grid.cols-2-1 { grid-template-columns: minmax(0,2fr) minmax(0,1fr); }

/* ---------- Una cifra ESTIMADA no se pinta como un hecho (César, 07/10/2026) ----------
   Caso: ABC proyecta cómo cerrará el año cada tienda. Medido contra los años ya cerrados, por tienda fallaba
   un 19 % y CASI SIEMPRE DE MÁS. Dos decisiones de César, por este orden:
     1) un sesgo conocido SE DESCUENTA, no se avisa: la cifra que se enseña ya va corregida;
     2) y sale la horquilla, porque lo que queda después de corregir sigue sin ser un hecho.
   La horquilla va PEGADA al número y SIEMPRE VISIBLE: nunca detrás de una ⓘ. Lo que está a un clic no está
   escondido —eso vale para una explicación—, pero aquí el que corre no hace el gesto y el número solo engaña.
   El método (con qué años se midió, cuánto se falla) sí puede ir a un clic: eso es el detalle, no el aviso.
   Marcado:  <span class="kh-estimado"><b>76</b><small>entre 68 y 84</small></span>
   o la tarjeta entera:  <a class="kh-stat estimado">…</a>
   Misma letra y mismo tamaño que un hecho: una estimación no es menos importante, es otra cosa.
   LO QUE LA DISTINGUE ES LA HORQUILLA, Y NADA MÁS. La primera versión subrayaba el número con puntitos; lo quité
   porque ABC avisó (07/10/2026) de que en sus pantallas el punteado ya significa «esto se puede abrir», y la misma
   marca no puede querer decir dos cosas en la misma app. Y al quitarlo se ve que no hacía falta: si debajo hay una
   horquilla, es una estimación. La señal es el dato, no un adorno encima del dato.
   LA PIEZA ES PARA TARJETAS Y TABLAS. Dentro de una frase NO se usa: apilar el número y el rango rompe el
   renglón y aleja el rango de su cifra. En una frase se escribe en palabras, que además se lee mejor:
   «cerrarás entre 68 y 84 cocinas —lo más probable, 76—». */
:is(.kh-estimado, .kh-escenario) { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.18; vertical-align: top; }
:is(.kh-estimado, .kh-escenario) > b { font-weight: inherit; }
:is(.kh-estimado, .kh-escenario) > small { font-size: max(11px, .74rem); color: var(--kh-texto-2); white-space: nowrap; margin-top: 1px; }
.kh-estimado > small { font-variant-numeric: tabular-nums; }
.kh-table td :is(.kh-estimado, .kh-escenario) { line-height: 1.12; }

/* ESCENARIO: un número que sale de una hipótesis que ALGUIEN ELIGIÓ, no de un método medido (Plan de Negocio,
   07/10/2026, y la distinción es suya). ABC puede decir «me paso un 19 %» porque compara con años cerrados de esa
   misma tienda; un plan de negocio **no tiene contra qué medirse: la tienda no existe todavía**. Pintar eso con
   .kh-estimado le daría APARIENCIA DE MEDIDO a algo que no lo está — la misma confusión que la pieza vino a
   arreglar, al revés.
   Por eso un escenario NO LLEVA HORQUILLA: lleva DE QUÉ DEPENDE, y la línea empieza por «si» o «con», que es como
   se dice una hipótesis en español:
       <span class="kh-escenario"><b>195.842 €</b><small>si las ventas suben un 7 % al año</small></span>
   Si un escenario lleva horquilla, parece medido. Y si una previsión medida no la lleva, parece un hecho. */
.kh-escenario > small { font-style: italic; }
.kh-stat:is(.estimado, .escenario) .num { align-self: flex-start; }
.kh-stat.estimado .sub.horquilla { color: var(--kh-texto-2); font-weight: 600; }
.kh-stat.escenario .sub.depende { color: var(--kh-texto-2); font-style: italic; }
/* Un hecho y una estimación NO se suman en la misma línea sin decir cuál es cuál: si en una fila hay de los dos,
   la estimada va marcada aunque «quede peor». Es el único sitio donde el diseño no cede a la simetría. */

/* ---------- Cifras resumen (siempre pulsables) ---------- */
.kh-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 18px; }
.kh-stat { --barra: var(--kh-negro); display: block; background: var(--kh-superficie); border: 1px solid var(--kh-borde); border-radius: var(--kh-radio);
    box-shadow: var(--kh-sombra); padding: 14px 18px; position: relative; overflow: hidden; color: inherit;
    transition: box-shadow .15s ease, transform .15s ease; }
.kh-stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--barra); }   /* el color dice algo: --barra la pone quien pinta la cifra */
.kh-stat .num { font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.kh-stat .lbl { color: var(--kh-texto-2); font-size: max(11px, .82rem); margin-top: 2px; }
.kh-stat .sub { color: var(--kh-texto-3); font-size: max(11px, .74rem); margin-top: 3px; line-height: 1.35; }   /* tercera línea: el porqué de la cifra */
a.kh-stat:hover { text-decoration: none; box-shadow: 0 6px 18px rgba(0,0,0,.12); transform: translateY(-2px); }
a.kh-stat .lbl::after { content: " →"; opacity: .4; font-weight: 600; }
.kh-stat.sit-vencida { --barra: var(--sit-vencida); } .kh-stat.sit-decidir { --barra: var(--sit-decidir); }
.kh-stat.sit-cumplida { --barra: var(--sit-cumplida); } .kh-stat.sit-marcha { --barra: var(--sit-marcha); }

/* ---------- Tablas ---------- */
.kh-tscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.kh-table { width: 100%; border-collapse: collapse; font-size: max(11px, .92rem); }
.kh-table th, .kh-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--kh-borde); vertical-align: middle; }
.kh-table th { font-weight: 600; font-size: max(11px, .72rem); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap;
    /* Cabecera con el color de la app y filas alternas (decisión de César, 28/09/2026). Si una app no define
       --app, el color cae en el gris de siempre y la tabla se ve como antes. */
    --c-cab: var(--app, var(--kh-texto-2));
    background: color-mix(in srgb, var(--c-cab) 10%, var(--kh-superficie));
    color: color-mix(in srgb, var(--c-cab) 72%, var(--kh-texto));
    border-bottom-color: color-mix(in srgb, var(--c-cab) 28%, var(--kh-borde)); }
.kh-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--kh-hover) 55%, transparent); }
.kh-table tbody tr:last-child td { border-bottom: 0; }
.kh-table tbody tr:hover td { background: var(--kh-hover); }
.kh-table td a { font-weight: 600; }
.kh-fila-meta { display: block; font-size: max(11px, .76rem); color: var(--kh-texto-2); font-weight: 400; margin-top: 1px; }
.kh-table th[data-sort] { cursor: pointer; user-select: none; }
.kh-table th[data-sort]::after { content: "↕"; opacity: .3; font-size: .8em; margin-left: 4px; }
.kh-table th.sort-asc::after { content: "↑"; opacity: .9; } .kh-table th.sort-desc::after { content: "↓"; opacity: .9; }

/* ---------- Formularios ---------- */
.kh-field { margin-bottom: 12px; min-width: 0; }
.kh-field label, .kh-label { display: block; font-size: max(11px, .78rem); font-weight: 600; margin-bottom: 4px; color: var(--kh-gris-700); }
.kh-input, .kh-select, .kh-textarea { width: 100%; padding: 8px 11px; border: 1px solid var(--kh-borde-2); border-radius: var(--kh-radio-sm);
    font-size: max(11px, .88rem); font-family: inherit; background: var(--kh-superficie); color: var(--kh-texto); transition: border-color var(--kh-t), box-shadow var(--kh-t); }
.kh-textarea { min-height: 84px; resize: vertical; }
.kh-input:focus, .kh-select:focus, .kh-textarea:focus { outline: none; border-color: var(--kh-negro); box-shadow: var(--kh-foco); }
.kh-input::placeholder, .kh-textarea::placeholder { color: var(--kh-texto-3); }
.kh-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kh-form-sec { font-size: max(11px, .72rem); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--kh-texto-2);
    margin: 18px 0 8px; padding-top: 12px; border-top: 1px solid var(--kh-borde); }
.kh-form-sec:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
input[type=checkbox], input[type=radio] { accent-color: var(--kh-resalte); }
/* El ancho completo es para lo que se escribe, NO para lo que se marca: una casilla estirada al 100 % sale
   suelta en medio de la pantalla. Lo sufrió leads (02/10/2026) y lo tapó con un style= a mano; se arregla aquí. */
input[type=checkbox].kh-input, input[type=radio].kh-input { width: auto; padding: 0; }

/* Campo que NO se estira: un porcentaje dentro de una tabla, un año, un desplegable de dos palabras.
   Los campos ocupan todo el ancho a propósito —un formulario se lee mejor en columna—, pero dentro de una
   tabla o de una barra de herramientas eso estorba. De ahí los «width:auto» a mano: list tiene cinco, leads
   los suyos. Con esto se quitan. `.cifra` además alinea a la derecha y usa cifras de ancho fijo. */
.kh-input.corto, .kh-select.corto { width: auto; max-width: 100%; }
.kh-input.cifra { width: 8ch; text-align: right; font-variant-numeric: tabular-nums; }

/* Una casilla con su explicación debajo: el ajuste de toda la vida («Avisar al comercial», y debajo, cuándo).
   Para encender y apagar algo que se guarda al momento, el interruptor (.kh-interruptor). Esto es para los
   formularios que se envían con un botón, y para los «He leído y acepto» (list lo tiene en rgpd y en el portal). */
.kh-check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1px 9px; align-items: start; cursor: pointer; margin: 0 0 12px; }
.kh-check input { width: auto; margin: 3px 0 0; }
.kh-check > b { font-weight: 600; font-size: max(11px, .88rem); color: var(--kh-texto); }
.kh-check > small { grid-column: 2; color: var(--kh-texto-2); font-size: max(11px, .78rem); line-height: 1.4; }
.kh-check:has(input:disabled) { cursor: default; opacity: .7; }
.kh-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex: none; vertical-align: middle; }
.kh-switch input { opacity: 0; width: 0; height: 0; }
.kh-switch span { position: absolute; inset: 0; background: var(--kh-borde-2); border-radius: 999px; transition: var(--kh-t); cursor: pointer; }
.kh-switch span::before { content: ''; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: var(--kh-t); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.kh-switch input:checked + span { background: var(--kh-resalte); }
.kh-switch input:checked + span::before { transform: translateX(18px); }

/* Filtros en una línea */
.kh-filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.kh-filtros .kh-field { margin: 0; flex: 1 1 140px; }
.kh-filtros .kh-field > label { font-size: max(10px, .68rem); text-transform: uppercase; letter-spacing: .03em; color: var(--kh-texto-2); margin-bottom: 2px; }
.kh-filtros .kh-input, .kh-filtros .kh-select { padding: 6px 9px; font-size: max(11px, .85rem); }
/* UN FILTRO PUESTO SE VE (César, 28/09/2026): el que no está en «todos» va relleno, para saber de un vistazo
   que lo que estás mirando está filtrado. Lo marca KH.filtros() con la clase .kh-filtrado. Gris, no color:
   es un estado de la pantalla, no una categoría de dato; los colores se reservan para lo que informa. */
.kh-filtrado, .kh-filtros .kh-field.activo .kh-input, .kh-filtros .kh-field.activo .kh-select {
    background: color-mix(in srgb, var(--kh-texto) 9%, var(--kh-superficie)) !important;
    border-color: var(--kh-borde-2) !important; color: var(--kh-texto) !important; font-weight: 600; }
select.kh-filtrado { background-image: none; }
.kh-filtros .kh-field.activo > label, label:has(+ .kh-filtrado) { color: var(--kh-texto); font-weight: 700; }
/* La cruz para dejarlo en «todos», al lado de la etiqueta */
.kh-filtro-quitar { border: 0; background: none; cursor: pointer; color: var(--kh-texto-2); font-size: max(11px, .72rem);
    padding: 0 2px; margin-left: 4px; line-height: 1; }
.kh-filtro-quitar:hover { color: var(--kh-texto); text-decoration: underline; }
/* Aviso de lista recortada: va JUNTO AL RECUENTO, no en la barra de filtros (idea de list, 28/09/2026).
   «Reordenar el desplegable hace honesto el control; la frase hace honesta la pantalla», que es donde mira
   quien busca algo y no lo encuentra. Discreto pero legible: esto no es una alarma, es una aclaración. */
.kh-filtro-aviso { display: inline-flex; align-items: center; gap: 6px; font-size: max(11px, .82rem); color: var(--kh-texto-2);
    background: color-mix(in srgb, var(--kh-texto) 6%, var(--kh-superficie)); border: 1px solid var(--kh-borde);
    border-radius: 999px; padding: 3px 12px; }
.kh-filtro-aviso b { color: var(--kh-texto); font-weight: 700; }
.kh-filtro-aviso a { font-weight: 600; }
/* Resumen: «3 filtros puestos · Quitar todos» */
.kh-filtros-resumen { display: none; align-items: center; gap: 8px; margin-top: 8px; font-size: max(11px, .8rem); color: var(--kh-texto-2); }
.kh-filtros.hay-filtros .kh-filtros-resumen { display: flex; }

/* Casillas KüchenHouse · Asociados (patrón §6) */
.kh-chipcheck { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border: 1px solid var(--kh-borde-2); border-radius: 999px;
    font-size: max(11px, .82rem); font-weight: 600; cursor: pointer; background: var(--kh-superficie); white-space: nowrap; user-select: none; }
.kh-chipcheck input { margin: 0; }
.kh-chipcheck.kh-tipo-kh:has(input:checked) { background: var(--sit-marcha-bg); border-color: var(--sit-marcha); color: var(--sit-marcha-tx); }
.kh-chipcheck.kh-tipo-kg:has(input:checked) { background: var(--sit-decidir-bg); border-color: var(--sit-decidir); color: var(--sit-decidir-tx); }

/* ---------- Casillas agrupadas (la «parte comprimida» de Control/Centro, hoy en list) ----------
   <div class="kh-rejilla"> <fieldset class="kh-columna" data-columna><legend>Grupo <small>· 12</small><span class="kh-todosninguno"><button data-todos>Todos</button> · <button data-ninguno>Ninguno</button></span></legend>
     <label class="kh-casilla"><input type="checkbox"><i class="kh-punto ahora"></i><code>LIS-01</code><span class="nombre">Qué es</span><small>·pide</small></label> … */
.kh-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; align-items: start; }
.kh-columna { border: 1px solid var(--kh-borde); border-radius: 10px; padding: 4px 10px 8px; margin: 0; background: var(--kh-superficie); min-width: 0; }
.kh-columna legend { font-weight: 700; font-size: max(11px, .88rem); padding: 0 4px; display: flex; align-items: center; gap: 6px; }
.kh-columna legend small { font-weight: 400; color: var(--kh-texto-2); }
.kh-todosninguno { font-weight: 400; font-size: max(11px, .76rem); margin-left: 6px; white-space: nowrap; color: var(--kh-texto-3); }
.kh-todosninguno button { background: none; border: 0; padding: 0; color: var(--kh-texto-2); cursor: pointer; font: inherit; text-decoration: underline; }
.kh-todosninguno button:hover { color: var(--kh-negro); }
.kh-casilla { display: flex; align-items: center; gap: 7px; padding: 3px 5px; border-radius: 6px; font-size: max(11px, .86rem); cursor: pointer; line-height: 1.25; margin: 0; font-weight: 400; color: inherit; }
.kh-casilla:hover { background: var(--kh-hover); }
.kh-casilla input { margin: 0; flex: none; }
.kh-casilla code { font-size: max(10px, .68rem); color: var(--kh-texto-2); background: var(--kh-hover); padding: 0 5px; border-radius: 4px; flex: none; font-family: var(--kh-mono); }
.kh-casilla .nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.kh-casilla small { font-size: max(11px, .7rem); color: var(--kh-texto-2); flex: none; }
.kh-casilla.bloqueada { cursor: default; } .kh-casilla.bloqueada .nombre { color: var(--kh-texto-2); }
.kh-casilla:has(input:not(:checked)) .nombre { color: var(--kh-texto-2); }
.kh-punto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--kh-borde-2); flex: none; }
.kh-punto.ahora { background: var(--sit-vencida); } .kh-punto.centro { background: var(--sit-marcha); }
.kh-punto.agrupado { background: var(--kh-gris-600); } .kh-punto.peticion { background: var(--sit-decidir); }
.kh-punto.fijo { box-shadow: 0 0 0 2px var(--kh-superficie), 0 0 0 3px var(--sit-marcha); }
.kh-leyenda-puntos { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: max(11px, .78rem); color: var(--kh-texto-2); align-items: center; margin-bottom: 8px; }
.kh-leyenda-puntos span { display: inline-flex; align-items: center; gap: 5px; }
.kh-rejilla-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 8px; }
.kh-rejilla-cab .kh-input { max-width: 260px; padding: 5px 9px; }

/* ---------- Decidir muchas cosas seguidas: .kh-opciones ----------
   Para «qué avisos recibe cada persona», «qué puede hacer cada rol» y todo lo que hoy se pinta como una matriz
   de casillas. Lo pidió el Centro (07/10/2026) con el encargo de César: «recolócame bien los checks, por columnas
   y propiedades con su menú… que esté todo bien colocadito y fácil».

   LA DECISIÓN DE FONDO, Y ES LA QUE QUITA EL ASPECTO DE HOJA DE CÁLCULO: una matriz de casillas solo es correcta
   cuando las columnas son INDEPENDIENTES. Casi nunca lo son. «No me avises / avísame en el Centro / avísame
   también por correo» son TRES ESTADOS DE UNA MISMA DECISIÓN, no tres permisos: puestas como tres casillas,
   la pantalla invita a marcar dos y además hay que leer tres cuadraditos para saber qué está puesto.
   Así que cada fila lleva UNA elección con sus opciones a la vista, con la misma pastilla que .kh-seg —misma
   letra, mismo alto, mismos radios—, porque mezclar escalas es lo que César lleva dos días señalando.
   Si de verdad son independientes (alcance de tiendas, por ejemplo), eso NO es esto: es .kh-rejilla, arriba.

   Marcado:
   <div class="kh-opciones">
     <div class="kh-opciones-cab"><b>ABC · Ventas</b><span class="cuenta" data-cuenta></span>
       <span class="kh-todosninguno"><button type="button" data-todos>Todos</button> ·
         <button type="button" data-ninguno>Ninguno</button></span></div>
     <div class="kh-opcion">
       <div class="que"><b>Una tienda baja de su objetivo</b><small>Al cerrar el mes por debajo</small></div>
       <div class="kh-radiogrupo">
         <label><input type="radio" name="av[ABC-01]" value="no" data-no><span>No</span></label>
         <label><input type="radio" name="av[ABC-01]" value="centro" checked><span>En el Centro</span></label>
         <label><input type="radio" name="av[ABC-01]" value="correo"><span>Y por correo</span></label></div>
     </div>
     <div class="kh-opcion fija">
       <div class="que"><b>Alguien ha entrado desde un sitio nuevo</b><small>Seguridad: no se puede apagar</small></div>
       <span class="kh-tag siempre">Siempre</span>
     </div>
   </div>

   Lo monta KH.opciones(): el recuento de cada grupo y los «Todos · Ninguno». Sin JS sigue funcionando entera
   —son radios de un formulario—: lo único que falta es el recuento. */
.kh-opciones { display: grid; grid-template-columns: minmax(0, 1fr) max-content; gap: 0; }
.kh-opciones-cab { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
    padding: 9px 2px 7px; border-bottom: 1px solid var(--kh-borde); }
.kh-opciones-cab > b { font-size: max(11px, .88rem); font-weight: 700; }
.kh-opciones-cab .cuenta { font-size: max(11px, .76rem); color: var(--kh-texto-2); }
/* «Ninguno encendido» se dice, no se deduce de una fila de casillas vacías: es el estado que se cuela. */
.kh-opciones-cab .cuenta.kh-aviso-cero { color: var(--kh-texto); font-weight: 700;
    background: var(--kh-warn-bg); border: 1px solid var(--kh-warn); border-radius: 999px; padding: 1px 9px; }
.kh-opciones-cab .kh-todosninguno { margin-left: auto; }
.kh-opcion { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center;
    gap: 10px 18px; padding: 7px 2px; border-bottom: 1px solid var(--kh-borde); }
.kh-opcion:last-child { border-bottom: 0; }
.kh-opcion:hover { background: var(--kh-hover); }
.kh-opcion > .que { min-width: 0; }
.kh-opcion > .que > b { display: block; font-size: max(11px, .86rem); font-weight: 600; }
.kh-opcion > .que > small { display: block; font-size: max(11px, .76rem); color: var(--kh-texto-2); line-height: 1.35; }
.kh-opcion > .kh-radiogrupo, .kh-opcion > .kh-tag { justify-self: end; }
/* LO QUE NO SE PUEDE APAGAR NO ES UNA CASILLA GRIS. Una casilla desactivada se ve como un sitio donde pulsar,
   se pulsa, no pasa nada y encima no dice por qué: es una promesa que el código no cumple, y la casa ya tiene
   escrito que eso engaña (norma «lo que nadie mira»). Aquí se dice con una palabra —«Siempre»— y la razón va
   en el renglón de debajo, que es la pregunta de verdad: no «¿puedo apagarlo?», sino «¿por qué no?». */
.kh-opcion.fija > .que > b { color: var(--kh-texto-2); }
.kh-tag.siempre { background: var(--kh-gris-200); color: var(--kh-gris-900); }
@supports not (grid-template-columns: subgrid) {
    .kh-opciones { display: block; }
    .kh-opcion { display: flex; justify-content: space-between; }
}
/* En el teléfono una matriz no se arrastra de lado: se le da la vuelta. La elección baja entera debajo de su
   nombre, con el dedo en mente. Es la MISMA pieza —la app no pinta dos cosas ni el estilo esconde nada—. */
@media (max-width: 700px) {
    .kh-opciones { display: block; }
    .kh-opcion { display: block; padding: 9px 2px; }
    .kh-opcion > :is(.kh-radiogrupo, .kh-tag) { margin-top: 6px; }
    .kh-opcion > .kh-radiogrupo { width: 100%; }
    .kh-opcion > .kh-radiogrupo > label { flex: 1 1 0; justify-content: center; }
}

/* Radios con la pastilla de .kh-seg: mismo aspecto, pero son radios de verdad (envían, se recorren con el
   teclado y funcionan sin JS). No lo hago con .kh-seg y botones porque un selector de vistas NAVEGA y esto
   GUARDA; se parecen a propósito, no son lo mismo. */
.kh-radiogrupo { display: inline-flex; max-width: 100%; background: var(--kh-hover); border: 1px solid var(--kh-borde);
    border-radius: 10px; padding: 3px; gap: 2px; }
.kh-radiogrupo > label { flex: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; margin: 0;
    padding: var(--kh-stab-py) var(--kh-stab-px); font-size: var(--kh-stab-fs); font-weight: 600; border-radius: 7px;
    border: 1px solid transparent; color: var(--kh-texto-2); white-space: nowrap; }
.kh-radiogrupo > label:hover { background: color-mix(in srgb, var(--kh-superficie) 75%, transparent); color: var(--kh-negro); }
.kh-radiogrupo > label > input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.kh-radiogrupo > label:has(input:checked) { background: var(--kh-superficie); color: var(--kh-negro);
    border-color: var(--kh-borde-2); box-shadow: 0 1px 2px rgba(16,20,26,.08); }
.kh-radiogrupo > label:has(input:focus-visible) { outline: 2px solid var(--kh-resalte); outline-offset: 1px; }
.kh-radiogrupo > label:has(input:disabled) { cursor: default; color: var(--kh-texto-3); }

/* Lo que va a cambiar, en palabras, ANTES de guardar. Aquí un despiste da acceso a algo que no toca, así que
   la pantalla no se limita a guardar: dice lo que va a pasar con nombres y números. Seguridad es la primera
   prioridad de la casa, y «se guardó» no es lo mismo que «supe lo que guardaba». */
.kh-antesdeguardar { border: 1px solid var(--kh-borde-2); border-left: 3px solid var(--kh-negro); border-radius: 8px;
    background: var(--kh-superficie); padding: 10px 12px; margin: 12px 0; }
.kh-antesdeguardar > b { display: block; font-size: max(11px, .82rem); margin-bottom: 5px; }
.kh-antesdeguardar ul { margin: 0; padding-left: 18px; font-size: max(11px, .84rem); color: var(--kh-texto); }
.kh-antesdeguardar li + li { margin-top: 3px; }
.kh-antesdeguardar .nada { font-size: max(11px, .84rem); color: var(--kh-texto-2); }

/* CON EL DEDO, LO PULSABLE SUBE A 36 px. Y no es solo cosa de la pieza nueva: midiendo esta pantalla a 375 px
   me he encontrado los «Todos · Ninguno» —que llevan meses en list y en el Centro— con 15 px de alto. Quince.
   Son texto subrayado sin relleno ninguno, así que el objetivo es la altura de la letra; en el ratón se acierta
   y con el pulgar no. Va aquí, fuera de cualquier estilo, porque es de la casa entera: el Compacto ya tenía su
   regla (ABC la midió el 06/10) y resulta que el tamaño normal estaba peor que el apretado. */
@media (pointer: coarse), (max-width: 700px) {
    /* Un enlace dentro de una frase mide lo que mide su renglón: en el panel de list medí 13 px de alto para
       «manual», «cambiar» y los nombres de tienda. Con el ratón se acierta en la palabra; con el dedo, no.
       Se le da aire ARRIBA Y ABAJO y se le quita el mismo margen, así el objetivo crece a ~23 px y el texto
       no se mueve ni un píxel: la frase se lee igual y el dedo acierta. */
    .kh-card a:not(.kh-btn):not(.kh-app):not([class*="kh-"]) { padding-block: 5px; margin-block: -5px; }
    .kh-radiogrupo > label { min-height: 36px; }
    .kh-todosninguno button { min-height: 32px; padding: 0 6px; }
    .kh-casilla { min-height: 34px; }
}

/* ---------- La pantalla de acceso ----------
   Las cinco de la casa resolvían lo mismo por su cuenta: un botón de ancho completo y el ojito de ver la
   contraseña. El Centro preguntó el 07/10/2026 si esas dos clases suyas (`boton-ancho`, `boton-ver`) debían
   ser del kit. Sí: lo que está en cinco apps no es de una app. Y es la única pantalla que ve TODA la casa. */

/* Botón de ancho completo. Vale en cualquier sitio, no solo en el acceso. */
.kh-btn.ancho { width: 100%; justify-content: center; }

/* Ver la contraseña. El botón va DENTRO del campo y no lo tapa: el campo deja sitio a la derecha.
   <div class="kh-clave">
     <input class="kh-input" type="password" name="clave" autocomplete="current-password">
     <button type="button" class="kh-clave-ver" aria-label="Mostrar la contraseña" aria-pressed="false">👁</button>
   </div>
   OJO CON UNA TRAMPA: el botón TIENE que llevar type="button". Dentro de un formulario, un <button> sin tipo
   envía — así que el ojito mandaría el formulario con la contraseña a medio escribir. No da error y parece
   cosa del servidor. Lo conecta KH.clave(), que además cambia el rótulo de lectura y el aria-pressed. */
.kh-clave { position: relative; display: block; }
.kh-clave > .kh-input { width: 100%; padding-right: 40px; }
.kh-clave-ver { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: inline-flex;
    align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 7px;
    background: none; cursor: pointer; color: var(--kh-texto-2); font-size: max(11px, .9rem); line-height: 1; }
.kh-clave-ver:hover { background: var(--kh-hover); color: var(--kh-texto); }
.kh-clave-ver:focus-visible { outline: 2px solid var(--kh-resalte); outline-offset: 1px; }
.kh-clave-ver[aria-pressed="true"] { color: var(--kh-texto); background: var(--kh-hover); }

/* Chips que se marcan (funciones, días, etiquetas): una fila, se rellenan al marcar */
.kh-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.kh-chip-op { position: relative; display: inline-flex; align-items: center; gap: 5px; font-size: max(11px, .8rem); font-weight: 600; border: 1px solid var(--kh-borde-2);
    border-radius: 999px; padding: 3px 11px; background: var(--kh-superficie); cursor: pointer; user-select: none; }
.kh-chip-op:hover { border-color: var(--kh-gris-400); }
.kh-chip-op input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; pointer-events: none; }
.kh-chip-op:has(input:checked) { background: var(--kh-resalte); border-color: var(--kh-resalte); color: var(--kh-sobre-resalte); }
.kh-chip-op:has(input:focus-visible) { outline: 2px solid var(--kh-resalte); outline-offset: 2px; }
/* Tarjeta pequeña de elección: cuando un chip se queda corto porque la opción necesita DOS líneas
   (nombre + marca, nombre + miniatura). Se elige una sola; el radio va escondido (pedida por misl, 22/09/2026).
   <div class="kh-tarjetas-op">
     <label class="kh-tarjeta-op"><input type="radio" name="plantilla" value="kh-elegante" checked>
       <img src="..." alt=""><span><b>KüchenHouse elegante</b><small>KüchenHouse</small></span></label>
   </div> */
.kh-tarjetas-op { display: flex; flex-wrap: wrap; gap: 8px; }
/* El relleno va en rem para que OBEDEZCA al estilo: en píxeles, un Compacto no puede apretarlo (list lo midió el
   07/10/2026: 54 px por tarjeta en la pantalla de «Pedir», el bloque más grande de cada paso). La flecha de la
   derecha sigue en px porque es sitio para el ✓, no aire. */
.kh-tarjeta-op { position: relative; display: flex; align-items: center; gap: .62rem; flex: 1 1 210px; min-width: 190px; max-width: 340px;
    padding: .56rem 30px .56rem .7rem; border: 1.5px solid var(--kh-borde); border-radius: var(--kh-radio-sm); background: var(--kh-superficie);
    cursor: pointer; text-align: left; transition: border-color var(--kh-t), background var(--kh-t); }
.kh-tarjeta-op input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; pointer-events: none; }
.kh-tarjeta-op > span { min-width: 0; }
.kh-tarjeta-op b { display: block; font-size: max(11px, .86rem); font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.kh-tarjeta-op small { display: block; font-size: max(11px, .76rem); color: var(--kh-texto-2); line-height: 1.3; overflow-wrap: anywhere; }
.kh-tarjeta-op img, .kh-tarjeta-op .fig { width: 34px; height: 34px; flex: none; object-fit: contain; border-radius: 6px;
    background: var(--kh-hover); display: grid; place-items: center; }
.kh-tarjeta-op:hover { border-color: var(--kh-borde-2); background: var(--kh-hover); }
/* Elegida: borde grueso Y marca ✓, nunca solo el color */
.kh-tarjeta-op:has(input:checked) { border-color: var(--kh-principal); box-shadow: inset 0 0 0 1px var(--kh-principal); background: var(--kh-superficie); }
.kh-tarjeta-op:has(input:checked)::after { content: "✓"; position: absolute; top: 6px; right: 8px; font-size: max(11px, .8rem); font-weight: 800; color: var(--kh-principal); }
.kh-tarjeta-op:has(input:focus-visible) { outline: 2px solid var(--kh-resalte); outline-offset: 2px; }
.kh-tarjeta-op:has(input:disabled) { opacity: .55; cursor: default; }
@media (max-width: 700px) { .kh-tarjeta-op { flex: 1 1 100%; max-width: none; min-height: 48px; } }

/* Lista de interruptores compacta: nombre a la izquierda, interruptor a la derecha, una línea por cosa */
.kh-interruptores { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 18px; }
.kh-interruptor { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 2px; border-bottom: 1px solid var(--kh-borde); font-size: max(11px, .88rem); }
.kh-interruptor small { display: block; color: var(--kh-texto-2); font-size: max(11px, .74rem); }

/* ---------- Botones ---------- */
.kh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--kh-principal); background: var(--kh-principal);
    color: var(--kh-sobre-principal); padding: 8px 15px; border-radius: var(--kh-radio-sm); font: inherit; font-size: max(11px, .86rem); font-weight: 600;
    cursor: pointer; text-decoration: none; box-shadow: var(--kh-sombra-sm); min-height: 36px; white-space: nowrap;
    transition: transform .06s, background var(--kh-t), box-shadow var(--kh-t); }
.kh-btn:hover { filter: brightness(.9); text-decoration: none; box-shadow: var(--kh-sombra); }
.kh-btn:active { transform: translateY(1px); }
.kh-btn.secundario { background: var(--kh-superficie); color: var(--kh-texto); border-color: var(--kh-borde-2); box-shadow: none; }
.kh-btn.secundario:hover { filter: none; background: var(--kh-hover); border-color: var(--kh-gris-400); }
.kh-btn.fantasma { background: transparent; color: var(--kh-texto); border-color: transparent; box-shadow: none; }
.kh-btn.fantasma:hover { filter: none; background: var(--kh-hover); }
.kh-btn.peligro { background: var(--kh-error); border-color: var(--kh-error); color: #fff; }
.kh-btn.peq { padding: 4px 10px; font-size: max(11px, .8rem); min-height: 28px; }
.kh-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- Avisos ---------- */
.kh-alert { padding: 11px 15px; border-radius: var(--kh-radio-sm); margin-bottom: 14px; font-size: max(11px, .9rem); border: 1px solid; display: block; }
.kh-alert > .ic { float: left; margin: 1px 8px 0 0; }   /* el texto fluye: un <strong> suelto ya no se separa en columnas */
.kh-alert.ok    { background: var(--kh-ok-bg);    border-color: var(--kh-ok-borde);    color: var(--kh-ok); }
.kh-alert.error { background: var(--kh-error-bg); border-color: var(--kh-error-borde); color: var(--kh-error); }
.kh-alert.warn  { background: var(--kh-warn-bg);  border-color: var(--kh-warn-borde);  color: var(--kh-warn); }

/* ---------- Etiquetas ---------- */
.kh-tag { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: max(10px, .68rem); font-weight: 700; letter-spacing: .03em; white-space: nowrap; }
.kh-tag.kh { background: var(--kh-negro); color: var(--kh-sobre-principal); }
.kh-tag.kg { background: var(--kh-gris-200); color: var(--kh-gris-900); }
.kh-chip { display: inline-block; background: var(--kh-hover); border: 1px solid var(--kh-borde); border-radius: 7px; padding: 2px 8px; font-size: max(11px, .78rem); }
/* Situación (§8): la etiqueta lleva siempre la palabra */
.kh-sit { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: max(11px, .74rem); font-weight: 700; white-space: nowrap; }
.kh-sit::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .8; }
.kh-sit.borrador { background: var(--sit-borrador-bg); color: var(--sit-borrador-tx); }
.kh-sit.decidir  { background: var(--sit-decidir-bg);  color: var(--sit-decidir-tx); }
.kh-sit.marcha   { background: var(--sit-marcha-bg);   color: var(--sit-marcha-tx); }
.kh-sit.vencida  { background: var(--sit-vencida-bg);  color: var(--sit-vencida-tx); }
.kh-sit.cumplida { background: var(--sit-cumplida-bg); color: var(--sit-cumplida-tx); }
.kh-sit.cumplida::before { content: "✓"; width: auto; height: auto; background: none; opacity: 1; font-size: .8em; }
.kh-sit.borrador { box-shadow: inset 0 0 0 1px var(--kh-borde-2); background: transparent; }
.kh-sit.nocumple { background: var(--sit-nocumple-bg); color: var(--sit-nocumple-tx); }
.kh-sit.retirada { background: var(--sit-retirada-bg); color: var(--sit-retirada-tx); text-decoration: line-through; }
.kh-fila-pide { box-shadow: inset 3px 0 0 var(--sit-decidir); }

/* ---------- Pestañas · A (por defecto): barra blanca con subrayado; subpestañas en franja gris ---------- */
.kh-tabs:not(.kh-subtabs) { position: sticky; top: calc(var(--kh-barra-alto) + 6px); z-index: 19; display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; background: var(--kh-superficie); border: 1px solid var(--kh-borde);
    border-bottom-color: var(--kh-borde-2); border-radius: 12px; padding: 0 6px; margin-bottom: 14px; box-shadow: var(--kh-sombra-sm); }
.kh-tabs:not(.kh-subtabs)::-webkit-scrollbar { display: none; }
.kh-tabs:not(.kh-subtabs) > :is(a, button) { flex: none; display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 0; border-bottom: 3px solid transparent;
    border-radius: 0; padding: var(--kh-tab-py) var(--kh-tab-px) calc(var(--kh-tab-py) - 2px); font: inherit; font-size: var(--kh-tab-fs);
    font-weight: 600; color: var(--kh-texto-2); cursor: pointer; white-space: nowrap; text-decoration: none; transition: var(--kh-t); }
.kh-tabs:not(.kh-subtabs) > :is(a, button):hover { background: var(--kh-hover); color: var(--kh-negro); text-decoration: none; }
.kh-tabs:not(.kh-subtabs) > :is(a, button).activo { color: var(--kh-negro); border-bottom-color: var(--kh-resalte); font-weight: 700; }
.kh-tabs:not(.kh-subtabs) > :is(a, button) b { font-weight: 700; font-size: max(10px, .68rem); background: var(--kh-hover); color: var(--kh-gris-700); border-radius: 999px; padding: 0 6px; }
.kh-tabs:not(.kh-subtabs) > :is(a, button).activo b { background: var(--kh-resalte); color: var(--kh-sobre-resalte); }
.kh-tabs:not(.kh-subtabs) > :is(a, button) b.pide { background: var(--sit-vencida); color: #fff; }

:is(.kh-subtabs, .kh-seg) { display: flex; width: fit-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; background: var(--kh-hover);
    border: 1px solid var(--kh-borde); border-radius: 10px; padding: 3px; gap: 2px; margin: 0 0 12px; }
:is(.kh-subtabs, .kh-seg) > :is(a, button) { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: var(--kh-stab-py) var(--kh-stab-px);
    font: inherit; font-size: var(--kh-stab-fs); font-weight: 600; border-radius: 7px; background: transparent; border: 1px solid transparent;
    color: var(--kh-texto-2); cursor: pointer; white-space: nowrap; text-decoration: none; }
:is(.kh-subtabs, .kh-seg) > :is(a, button):hover { background: color-mix(in srgb, var(--kh-superficie) 75%, transparent); color: var(--kh-negro); text-decoration: none; }
:is(.kh-subtabs, .kh-seg) > :is(a, button).activo { background: var(--kh-superficie); color: var(--kh-negro); border-color: var(--kh-borde-2); box-shadow: 0 1px 2px rgba(16,20,26,.08); }
:is(.kh-subtabs, .kh-seg) > :is(a, button) b { font-size: max(10px, .66rem); background: var(--kh-gris-200); border-radius: 999px; padding: 0 6px; }
:is(.kh-subtabs, .kh-seg) > :is(a, button).activo b { background: var(--kh-resalte); color: var(--kh-sobre-resalte); }

/* ---------- Selector de vistas: Día · Semana · Mes · Año · «Lo que viene» ----------
   César, 29/09/2026, mirando el calendario del Centro: «ese diseño de selector de mes del calendario es muy feo».
   Lo era por tres motivos, y los tres se arreglan aquí de una vez para toda la casa:
     1) repartía el ancho a partes iguales, así que «Lo que viene» se partía en dos renglones dentro del lateral;
     2) se pintaba con colores a pelo (#f1f3f6, #fff) y píldora de 999 px, fuera de lo decidido (fondo hueso, radio 10/7);
     3) cada app lo resolvía a su manera: el cuadrante de list lo hace con estilos en línea sobre .kh-btn.
   NO es una pieza inventada: es la MISMA pastilla de las subpestañas, con nombre propio porque aquí no cambia la
   ficha que miras, sino la ESCALA con la que la miras. Comparte reglas con .kh-subtabs (justo arriba): si algún día
   se retoca el aspecto, se retoca una sola vez y las dos cambian juntas.
   Lo único suyo: cabe en una columna estrecha. Cuando no caben todos, el que sobra baja ENTERO a la línea
   siguiente; nunca se parte una palabra ni aparece una barra de desplazamiento dentro de un lateral.
   Marcado: <nav class="kh-seg"> con <a> o <button>, y class="activo" en el que se está viendo (más aria-current="page"). */
.kh-seg { flex-wrap: wrap; overflow: visible; }
.kh-seg > :is(a, button) { flex: 1 1 auto; justify-content: center; text-align: center; }
.kh-seg > :is(a, button).activo { color: color-mix(in srgb, var(--app, var(--kh-negro)) 80%, var(--kh-negro)); }
/* En oscuro y en alto contraste, el color de la app se hunde en el fondo: ahí manda el color del texto.
   Es el mismo fallo del cinturón de Comités (texto blanco sobre blanco) que vio César el 28/09; una vez basta. */
html:is(.kh-t-oscuro, .kh-t-contraste) .kh-seg > :is(a, button).activo { color: var(--kh-negro); }

/* Pestañas · B: carpeta; subpestañas subrayadas */
html.kh-m-b .kh-tabs:not(.kh-subtabs) { background: var(--kh-fondo); border: 0; border-bottom: 1px solid var(--kh-borde-2); border-radius: 0; box-shadow: none; padding: 6px 4px 0; gap: 4px; overflow: visible; }
html.kh-m-b .kh-tabs:not(.kh-subtabs) > :is(a, button) { background: var(--kh-hover); border: 1px solid var(--kh-borde); border-bottom: 0; border-radius: 9px 9px 0 0; margin-bottom: -1px; padding-bottom: var(--kh-tab-py); }
html.kh-m-b .kh-tabs:not(.kh-subtabs) > :is(a, button):hover { background: var(--kh-superficie); }
html.kh-m-b .kh-tabs:not(.kh-subtabs) > :is(a, button).activo { background: var(--kh-superficie); border-color: var(--kh-borde-2); border-bottom: 1px solid var(--kh-superficie); box-shadow: inset 0 3px 0 var(--kh-resalte); }
html.kh-m-b :is(.kh-subtabs, .kh-seg) { width: auto; background: transparent; border: 0; border-bottom: 1px solid var(--kh-borde-2); border-radius: 0; padding: 0; gap: 18px; }
html.kh-m-b :is(.kh-subtabs, .kh-seg) > :is(a, button) { background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0; margin-bottom: -1px; padding-left: 2px; padding-right: 2px; }
html.kh-m-b :is(.kh-subtabs, .kh-seg) > :is(a, button).activo { background: transparent; box-shadow: none; border-bottom-color: var(--kh-resalte); }

/* Pestañas · C: pastillas */
html.kh-m-c .kh-tabs:not(.kh-subtabs) { background: var(--kh-fondo); border: 0; border-bottom: 1px solid var(--kh-borde); border-radius: 0; box-shadow: none; padding: 6px 0; gap: 6px; }
html.kh-m-c .kh-tabs:not(.kh-subtabs) > :is(a, button) { background: var(--kh-superficie); border: 1px solid var(--kh-borde); border-radius: 999px; padding: calc(var(--kh-tab-py) - 2px) var(--kh-tab-px); }
html.kh-m-c .kh-tabs:not(.kh-subtabs) > :is(a, button).activo { background: var(--kh-resalte); color: var(--kh-sobre-resalte); border-color: var(--kh-resalte); }
html.kh-m-c .kh-tabs:not(.kh-subtabs) > :is(a, button).activo b { background: rgba(255,255,255,.22); color: inherit; }
html.kh-m-c :is(.kh-subtabs, .kh-seg) { width: auto; background: transparent; border: 0; border-left: 3px solid var(--kh-resalte); border-radius: 0; padding: 0 0 0 10px; gap: 6px; }
html.kh-m-c :is(.kh-subtabs, .kh-seg) > :is(a, button) { background: var(--kh-superficie); border: 1px solid var(--kh-borde-2); border-radius: 999px; }
html.kh-m-c :is(.kh-subtabs, .kh-seg) > :is(a, button).activo { color: var(--kh-resalte); border-color: var(--kh-resalte); box-shadow: inset 0 0 0 1px var(--kh-resalte); }

/* ---------- Ventana (modal) ---------- */
.kh-modal { position: fixed; inset: 0; background: rgba(15,20,25,.5); z-index: 200; display: none; padding: 20px; overflow: auto; }
.kh-modal.open { display: flex; align-items: flex-start; justify-content: center; }
.kh-modal-card { background: var(--kh-superficie); border-radius: var(--kh-radio); max-width: 620px; width: 100%; margin: 6vh auto 24px; padding: 22px 24px;
    position: relative; box-shadow: 0 12px 44px rgba(0,0,0,.28); animation: khEntra .14s ease-out; }
.kh-modal-cerrar { position: absolute; top: 8px; right: 12px; font-size: 1.6rem; line-height: 1; color: var(--kh-texto-3); background: none; border: 0; cursor: pointer; }
.kh-modal-pie { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
@keyframes khEntra { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Globo de ayuda (§11) con «No volver a mostrar» */
.kh-globo { position: relative; background: var(--kh-negro); color: var(--kh-sobre-principal); border-radius: 12px; padding: 12px 14px; max-width: 320px; font-size: max(11px, .86rem); box-shadow: var(--kh-sombra-pop); }
.kh-globo::after { content: ""; position: absolute; top: -6px; left: 22px; border: 6px solid transparent; border-top: 0; border-bottom-color: var(--kh-negro); }
.kh-globo .pie { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; font-size: max(11px, .78rem); }
.kh-globo .kh-btn { background: var(--kh-sobre-principal); color: var(--kh-principal); border-color: var(--kh-sobre-principal); }

/* Vacío */
.kh-vacio { text-align: center; padding: 28px 16px; color: var(--kh-texto-2); }
.kh-vacio .ic { font-size: 1.8rem; display: block; margin-bottom: 6px; }
.kh-vacio b { display: block; color: var(--kh-texto); margin-bottom: 4px; }

/* Aviso flotante (resultado) */
.kh-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--kh-negro); color: var(--kh-sobre-principal);
    padding: 10px 16px; border-radius: 10px; font-size: max(11px, .88rem); box-shadow: var(--kh-sombra-pop); z-index: 300; }

/* Móvil (§12): barra inferior + botón flotante; ocultos en escritorio */
.kh-tabbar, .kh-fab { display: none; }

/* ---------- Densidad ---------- */
html.kh-d2 { --kh-tab-py: 8px; --kh-tab-px: 12px; --kh-stab-py: 4px; --kh-stab-px: 10px; --kh-tab-fs: max(11px, .84rem); --kh-stab-fs: max(11px, .78rem); --kh-barra-alto: 50px; --kh-nav-ancho: 208px; }
html.kh-d3 { --kh-tab-py: 6px; --kh-tab-px: 10px; --kh-stab-py: 3px; --kh-stab-px: 9px; --kh-tab-fs: max(11px, .8rem); --kh-stab-fs: max(11px, .76rem); --kh-barra-alto: 46px; --kh-nav-ancho: 190px; }
html.kh-d2 body, html.kh-d3 body { font-size: max(11px, .9375rem); }
html.kh-d2 .kh-card { padding: 13px 15px; margin-bottom: 11px; border-radius: min(var(--kh-radio), 11px); box-shadow: var(--kh-sombra-sm); }
html.kh-d3 .kh-card { padding: 10px 12px; margin-bottom: 8px; border-radius: min(var(--kh-radio), 9px); box-shadow: none; }
html.kh-d2 .kh-main { padding: 14px 20px 30px; } html.kh-d3 .kh-main { padding: 11px 15px 24px; }
html.kh-d2 .kh-h1 { font-size: 1.18rem; } html.kh-d3 .kh-h1 { font-size: 1.08rem; }
html.kh-d2 .kh-grid, html.kh-d2 .kh-stats { gap: 11px; } html.kh-d3 .kh-grid, html.kh-d3 .kh-stats { gap: 8px; margin-bottom: 12px; }
html.kh-d2 .kh-stat { padding: 11px 14px; } html.kh-d3 .kh-stat { padding: 8px 12px; }
html.kh-d2 .kh-stat .num { font-size: 1.65rem; } html.kh-d3 .kh-stat .num { font-size: 1.45rem; }
html.kh-d2 .kh-table th, html.kh-d2 .kh-table td { padding: 7px 10px; } html.kh-d3 .kh-table th, html.kh-d3 .kh-table td { padding: 5px 8px; }
html.kh-d2 .kh-table, html.kh-d3 .kh-table { font-size: max(11px, .86rem); }
html.kh-d2 .kh-input, html.kh-d2 .kh-select { padding: 6px 10px; } html.kh-d3 .kh-input, html.kh-d3 .kh-select { padding: 5px 9px; font-size: max(11px, .84rem); }
html.kh-d2 .kh-btn { padding: 6px 13px; min-height: 32px; } html.kh-d3 .kh-btn { padding: 5px 11px; min-height: 30px; font-size: max(11px, .82rem); }
html.kh-d2 .kh-nav a { padding: 7px 11px; font-size: max(11px, .87rem); } html.kh-d3 .kh-nav a { padding: 5px 10px; font-size: max(11px, .84rem); margin-bottom: 0; }
html.kh-d2 .kh-topbar { padding: 6px 18px; } html.kh-d3 .kh-topbar { padding: 4px 14px; }

/* ---------- Tamaño de letra ---------- */
html.kh-l-s  { font-size: 93.75%; }
html.kh-l-g  { font-size: 109.375%; }
html.kh-l-xg { font-size: 118.75%; }

/* ---------- Color de resalte ---------- */
html.kh-c-azul    { --kh-resalte: #1d4ed8; }
html.kh-c-granate { --kh-resalte: #9f1239; }
html.kh-c-ambar   { --kh-resalte: #b45309; }
html.kh-c-morado  { --kh-resalte: #6d28d9; }
html.kh-c-app     { --kh-resalte: var(--app, var(--kh-negro)); }

/* ---------- Modos ---------- */
html.kh-t-contraste { --kh-texto: #000; --kh-texto-2: #2b3138; --kh-texto-3: #4a525b; --kh-borde: #9aa2ab; --kh-borde-2: #6b737c; --kh-fondo: #ffffff;
    --kh-sombra: none; --kh-sombra-sm: none; --kh-foco: 0 0 0 3px #000; }
html.kh-t-contraste .kh-card, html.kh-t-contraste .kh-stat { border-width: 1.5px; }
html.kh-t-contraste a { text-decoration: underline; }
html.kh-t-contraste .kh-nav a, html.kh-t-contraste .kh-tabs:not(.kh-subtabs) a, html.kh-t-contraste .kh-btn, html.kh-t-contraste .kh-app, html.kh-t-contraste .kh-stat { text-decoration: none; }

/* Oscuro suave: gris pizarra, nunca negro puro. Pendiente de que César diga si se ofrece. */
html.kh-t-oscuro { color-scheme: dark;
    --kh-fondo: #1e2329; --kh-superficie: #272d34; --kh-hover: #313840; --kh-borde: #3a424b; --kh-borde-2: #4a535d;
    --kh-texto: #e8ebee; --kh-texto-2: #aab2bb; --kh-texto-3: #8a929b; --kh-gris-700: #c9d0d7; --kh-gris-200: #3a424b;
    --kh-negro: #eef1f4; --kh-principal: #eef1f4; --kh-sobre-principal: #16191d; --kh-sobre-resalte: #16191d;
    --kh-sombra: 0 1px 2px rgba(0,0,0,.25); --kh-sombra-sm: none; --kh-foco: 0 0 0 3px rgba(238,241,244,.25);
    --kh-ok-bg: #313840; --kh-ok: #e8ebee; --kh-ok-borde: #4a535d; --kh-warn-bg: #3d3220; --kh-warn: #e7c07a; --kh-warn-borde: #5c4a2c;
    --kh-error-bg: #43262a; --kh-error-borde: #6a3a3f; }
html.kh-t-oscuro .kh-topbar { background: color-mix(in srgb, var(--kh-superficie) 92%, transparent); }
html.kh-t-oscuro .kh-app:not(.actual) { color: color-mix(in srgb, var(--c) 55%, #fff); }

/* ---------- Sin animaciones ---------- */
html.kh-sin-mov *, html.kh-sin-mov *::before, html.kh-sin-mov *::after { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* =====================================================================
   PANTALLAS ESTRECHAS
   ===================================================================== */
@media (max-width: 900px) {
    .kh-grid.cols-2, .kh-grid.cols-3, .kh-grid.cols-2-1 { grid-template-columns: 1fr; }
    .kh-nav { width: 64px; padding: 14px 8px; }
    .kh-nav a { justify-content: center; }
    .kh-nav a > :not(.ic) { display: none; }
    .kh-nav-sec { color: transparent; height: 1px; padding: 0; margin: 8px 10px; background: var(--kh-borde); overflow: hidden; }
    .kh-main { padding: 18px 16px 30px; }
}
/* Móvil (§12, ≤ 700 px): menú en cajón, barra inferior, «＋», tablas desplazables dentro de su tarjeta */
@media (max-width: 700px) {
    .kh-topbar { padding: 8px 10px; }
    /* En estrecho manda saber DÓNDE estás, no de quién es la casa (César, 28/09/2026):
       se esconde «KüchenHouse» (font-size:0 apaga el texto suelto) y se queda el nombre de la app, legible. */
    .kh-wordmark { font-size: 0; min-width: 0; max-width: 46vw; overflow: hidden; }
    .kh-wordmark small { display: block; margin-top: 0; font-size: max(11px, .95rem); font-weight: 700;
        letter-spacing: -.01em; text-transform: none; color: var(--kh-negro);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* si no cabe, corta con puntos, no se mete debajo del vecino */
    .kh-topbar .kh-ocultar-movil { display: none; }
    /* El cinturon se queda, pero solo el «...»: asi se salta de app tambien desde el telefono sin ocupar la barra */
    .kh-cinturon { display: flex !important; flex: none; }
    .kh-cinturon > .kh-app { display: none !important; }
    /* En el telefono la barra solo lleva lo imprescindible: el resto estorba y empuja la marca fuera de la pantalla */
    .kh-topbar, .kh-barra { overflow: hidden; }
    .kh-user > form, .kh-user > select, .kh-user .kh-select, .kh-user .kh-badge-rol, .kh-user > span:not(.kh-cuenta) { display: none; }
    .kh-user { gap: 4px; flex: 0 1 auto; }
    .kh-search-btn, .kh-buscar { padding: 0 8px; }
    /* El menú NO ocupa sitio: se abre por encima, con la pantalla oscurecida detrás */
    /* En el teléfono el cajón es SIEMPRE ancho y con nombres, elija lo que elija la persona para el ordenador:
       un cajón de iconos sin nombres no hay quien lo use (lo vio Plan de Negocio, 22/09/2026).
       Por eso van los tres selectores: si no, gana html.kh-nav-col por ser más específico. */
    .kh-nav, html.kh-nav-col .kh-nav, html.kh-nav-flota .kh-nav {
        position: fixed; top: 0; left: 0; bottom: 0; height: 100dvh; width: min(84vw, 300px); z-index: 45; transform: translateX(-102%);
        transition: transform .2s ease; box-shadow: var(--kh-sombra-pop); padding: calc(var(--kh-barra-alto) + 8px) 12px 16px; overflow-y: auto; }
    .kh-nav a, html.kh-nav-col .kh-nav a, html.kh-nav-flota .kh-nav a { min-height: 46px; justify-content: flex-start; padding: 9px 12px; }
    .kh-nav a > :not(.ic), html.kh-nav-col .kh-nav a > :not(.ic) { display: inline; }
    .kh-nav-sec, html.kh-nav-col .kh-nav-sec { color: var(--kh-texto-3); height: auto; padding: 4px 12px 3px; margin: 12px 0 0; background: none; overflow: visible; }
    html.kh-nav-abierto .kh-nav, html.kh-nav-abierto.kh-nav-col .kh-nav, html.kh-nav-abierto.kh-nav-flota .kh-nav { transform: none; }
    html.kh-nav-abierto body { overflow: hidden; }
    .kh-velo { position: fixed; inset: 0; z-index: 44; background: rgba(15,20,25,.45); backdrop-filter: blur(1px); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
    html.kh-nav-abierto .kh-velo { opacity: 1; pointer-events: auto; }
    .kh-nav-cerrar { position: absolute; top: 10px; right: 10px; z-index: 2; border: 0; background: var(--kh-hover); color: var(--kh-texto); border-radius: 999px;
        width: 34px; height: 34px; font-size: 1.1rem; line-height: 1; cursor: pointer; }
    /* Botones de dedo: la acción principal de la cabecera ocupa el ancho */
    .kh-pagehead .kh-acciones { width: 100%; }
    .kh-pagehead .kh-acciones .kh-btn { flex: 1 1 150px; min-height: 46px; font-size: max(11px, .92rem); }
    .kh-btn { min-height: 46px; padding-left: 18px; padding-right: 18px; }
    .kh-btn.peq { min-height: 44px; }                 /* también lo pequeño se toca con el dedo */
    .kh-chip-op, .kh-chipcheck { min-height: 40px; padding: 8px 14px; }
    .kh-cal-atajos button { min-height: 38px; padding: 6px 12px; }
    .kh-modal { padding: 0; align-items: flex-end; }
    /* Las ventanas suben desde abajo, como en el móvil de siempre */
    .kh-modal-card { margin: 0; max-width: none; border-radius: var(--kh-radio) var(--kh-radio) 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
        max-height: 88dvh; overflow-y: auto; animation: khSube .18s ease-out; }
    .kh-modal-pie { position: sticky; bottom: 0; background: var(--kh-superficie); padding-top: 10px; }
    .kh-modal-pie .kh-btn { flex: 1 1 auto; }
    @keyframes khSube { from { transform: translateY(20px); opacity: .6; } to { transform: none; opacity: 1; } }
    .kh-tabbar a { min-height: 52px; justify-content: center; }
    .kh-mov-item { min-height: 56px; }
    .kh-mov-acc { min-height: 104px; }
    .kh-main { padding: 12px 10px 90px; }
    .kh-h1 { font-size: 1.15rem; }
    .kh-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
    .kh-stat .num { font-size: 1.45rem; }
    .kh-row { grid-template-columns: 1fr; }
    .kh-filtros > .kh-field { flex: 1 1 100%; }
    .kh-input, .kh-select, .kh-textarea { font-size: 16px; }   /* el iPhone no hace zoom */
    .kh-btn { min-height: 40px; }
    .kh-tabs:not(.kh-subtabs) > :is(a, button) { padding-top: 11px; padding-bottom: 9px; }
    .kh-tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; background: var(--kh-superficie); border-top: 1px solid var(--kh-borde);
        padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); }
    .kh-tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; font-size: max(10px, .68rem); font-weight: 600;
        color: var(--kh-texto-2); border-radius: 10px; }
    .kh-tabbar a .ic { font-size: 1.15rem; line-height: 1; }
    .kh-tabbar a.activo { color: var(--kh-resalte); }
    .kh-tabbar a:hover { text-decoration: none; }
    .kh-fab { display: flex; position: fixed; right: 16px; bottom: calc(70px + env(safe-area-inset-bottom)); z-index: 36; width: 54px; height: 54px; border-radius: 50%;
        background: var(--kh-principal); color: var(--kh-sobre-principal); font-size: 1.7rem; align-items: center; justify-content: center; box-shadow: var(--kh-sombra-pop); border: 0; }
    .kh-tarjetas-movil thead { display: none; }
    .kh-tarjetas-movil, .kh-tarjetas-movil tbody, .kh-tarjetas-movil tr, .kh-tarjetas-movil td { display: block; width: 100%; }
    .kh-tarjetas-movil tr { border: 1px solid var(--kh-borde); border-radius: var(--kh-radio-sm); padding: 8px 10px; margin-bottom: 8px; background: var(--kh-superficie); }
    .kh-tarjetas-movil td { border: 0; padding: 2px 0; text-align: left !important; }
    .kh-tarjetas-movil td[data-l]::before { content: attr(data-l) " · "; color: var(--kh-texto-2); font-size: max(11px, .74rem); }
    .kh-tarjetas-movil tbody tr:hover td { background: none; }
}
@media (max-width: 400px) { .kh-stats { grid-template-columns: 1fr; } }

/* ---------- Impresión ---------- */
@media print {
    .kh-topbar, .kh-nav, .kh-tabbar, .kh-fab, .kh-no-print, .kh-btn, .kh-alert, .kh-filtros { display: none !important; }
    .kh-layout { display: block !important; }
    .kh-main { padding: 0 !important; max-width: none !important; }
    body { background: #fff !important; color: #000 !important; }
    .kh-card { box-shadow: none !important; break-inside: avoid; }
    .kh-tscroll { overflow: visible; }
}

/* =====================================================================
   FORMULARIOS · fechas, horas, combos y guardado (César 18/09: español, desplegables, nada de verde)
   ===================================================================== */
.kh-invalido { border-color: var(--kh-error) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--kh-error) 18%, transparent) !important; }
/* Fecha dd/mm/aaaa con icono de calendario */
input.kh-fecha { width: 9.2em; max-width: 100%; font-variant-numeric: tabular-nums; padding-right: 30px; cursor: pointer;
    background: var(--kh-superficie) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a818a' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") no-repeat right 8px center / 16px; }
.kh-cal { position: fixed; z-index: 500; display: none; width: 268px; background: var(--kh-superficie); color: var(--kh-texto); border: 1px solid var(--kh-borde);
    border-radius: 12px; box-shadow: var(--kh-sombra-pop); padding: 10px; font-size: max(11px, .86rem); font-family: var(--kh-fuente); }
.kh-cal-cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.kh-cal-cab b { text-transform: capitalize; font-size: max(11px, .92rem); }
.kh-cal-cab button { border: 0; background: var(--kh-hover); color: inherit; border-radius: 8px; width: 30px; height: 30px; cursor: pointer; font-size: 1.1rem; line-height: 1; }
.kh-cal-rej { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.kh-cal-ds { text-align: center; font-size: max(10px, .68rem); font-weight: 700; color: var(--kh-texto-3); padding: 2px 0 4px; }
.kh-cal-d { border: 0; background: none; color: inherit; font: inherit; padding: 7px 0; border-radius: 8px; cursor: pointer; font-variant-numeric: tabular-nums; }
.kh-cal-d:hover { background: var(--kh-hover); }
.kh-cal-d.finde, .kh-cal-ds.finde { color: var(--kh-texto-2); }
.kh-cal-d.hoy { box-shadow: inset 0 0 0 1.5px var(--kh-resalte); font-weight: 700; }
.kh-cal-d.sel { background: var(--kh-resalte); color: var(--kh-sobre-resalte); font-weight: 700; }
.kh-cal-d:disabled { opacity: .3; cursor: not-allowed; text-decoration: line-through; }
.kh-cal-atajos { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--kh-borde); }
.kh-cal-atajos button { border: 1px solid var(--kh-borde-2); background: var(--kh-superficie); color: inherit; border-radius: 999px; padding: 3px 9px; font: inherit; font-size: max(11px, .74rem); cursor: pointer; }
.kh-cal-atajos button:hover { border-color: var(--kh-gris-400); background: var(--kh-hover); }
.kh-cal-atajos .borrar { margin-left: auto; border-color: transparent; color: var(--kh-texto-2); }
/* Hora en desplegable */
select.kh-hora { width: 6.2em; font-variant-numeric: tabular-nums; }
.kh-tramo { display: inline-flex; align-items: center; gap: 6px; }
.kh-tramo .sep { color: var(--kh-texto-3); }
/* Combo con búsqueda / múltiple */
.kh-combo { position: relative; min-width: 0; }
.kh-combo-btn { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; background: var(--kh-superficie); border: 1px solid var(--kh-borde-2);
    border-radius: var(--kh-radio-sm); padding: 8px 11px; font: inherit; font-size: max(11px, .88rem); color: var(--kh-texto); cursor: pointer; min-height: 36px; }
.kh-combo-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.kh-combo-btn::after { content: "▾"; opacity: .55; }
.kh-combo-btn b { font-size: max(10px, .68rem); background: var(--kh-resalte); color: var(--kh-sobre-resalte); border-radius: 999px; padding: 0 6px; }
.kh-combo-btn:focus-visible { border-color: var(--kh-negro); box-shadow: var(--kh-foco); outline: none; }
.kh-combo-panel { position: fixed; z-index: 500; display: none; max-width: min(420px, 94vw); background: var(--kh-superficie); color: var(--kh-texto);
    border: 1px solid var(--kh-borde); border-radius: 12px; box-shadow: var(--kh-sombra-pop); padding: 6px; font-family: var(--kh-fuente); font-size: max(11px, .88rem); }
.kh-combo-buscar { margin: 2px 0 6px; padding: 6px 9px !important; }
.kh-combo-lista { max-height: 260px; overflow-y: auto; }
.kh-combo-grupo { font-size: max(10px, .66rem); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--kh-texto-3); padding: 8px 8px 2px; }
.kh-combo-op { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 7px; cursor: pointer; white-space: nowrap; }
.kh-combo-op:hover { background: var(--kh-hover); }
.kh-combo-op.sel { font-weight: 600; }
.kh-combo-op input { margin: 0; pointer-events: none; }
.kh-combo-pie { display: flex; justify-content: space-between; align-items: center; gap: 8px; border-top: 1px solid var(--kh-borde); margin-top: 6px; padding: 6px 4px 2px; }
/* Guardado: barra neutra abajo cuando hay cambios; «Guardado» en gris. Nada de verde. */
.kh-guardar-barra { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 300; display: flex; align-items: center; gap: 16px;
    background: var(--kh-superficie); color: var(--kh-texto); border: 1px solid var(--kh-borde-2); border-radius: 14px; box-shadow: var(--kh-sombra-pop);
    padding: 8px 10px 8px 16px; font-size: max(11px, .88rem); max-width: calc(100vw - 24px); animation: khEntra .14s ease-out; }
.kh-guardar-estado { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.kh-guardar-estado i, .kh-guardado.pendiente i { width: 8px; height: 8px; border-radius: 50%; background: var(--sit-decidir); display: inline-block; }
.kh-guardado { display: inline-flex; align-items: center; gap: 6px; font-size: max(11px, .78rem); color: var(--kh-texto-2); }
.kh-guardado.pendiente { color: var(--sit-decidir-tx); font-weight: 600; }
@media (max-width: 700px) { .kh-guardar-barra { bottom: calc(66px + env(safe-area-inset-bottom)); } }

/* =====================================================================
   TIPO DE LETRA PERSONAL (apariencia) · kh.js descarga solo el que se usa
   ===================================================================== */
html.kh-f-inter    { --kh-fuente: "Inter", "Segoe UI", Roboto, Arial, sans-serif; }
html.kh-f-atkinson { --kh-fuente: "Atkinson Hyperlegible", "Segoe UI", Roboto, Arial, sans-serif; }
html.kh-f-plex     { --kh-fuente: "IBM Plex Sans", "Segoe UI", Roboto, Arial, sans-serif; }
html.kh-f-nunito   { --kh-fuente: "Nunito", "Segoe UI", Roboto, Arial, sans-serif; }
html.kh-f-serif    { --kh-fuente: "Source Serif 4", Georgia, "Times New Roman", serif; }
html.kh-f-sistema  { --kh-fuente: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }

/* =====================================================================
   CALENDARIO DEL MES y AGENDA · pieza común (cedida por el Centro, 22/09/2026)
   Marcado:
     <div class="kh-cal-mes">
       <div class="kh-cal-dn">lunes</div> …(7)
       <div class="kh-cal-d hoy|fuera"><span class="kh-cal-n">6</span>
         <a class="kh-ev" style="--ev:var(--sit-marcha)"><b>10:00</b> Comité de Ventas</a>
         <a class="kh-ev ajeno" target="_blank">Reunión (tu calendario)</a>
       </div>
     </div>
   El COLOR va por tipo y lo pone la app en --ev (un token de situación o de dato). Sin clases fijas por tipo.
   En el móvil el mes se queda justo: usad también .kh-agenda («Lo que viene») y las clases kh-solo-movil / kh-solo-escritorio.
   ===================================================================== */
.kh-cal-mes { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--kh-borde); border: 1px solid var(--kh-borde);
    border-radius: var(--kh-radio-sm); overflow: hidden; }
.kh-cal-dn { background: var(--kh-hover); color: var(--kh-texto-2); font-size: max(11px, .7rem); text-transform: uppercase; letter-spacing: .04em;
    padding: 5px 6px; text-align: center; font-weight: 600; }
.kh-cal-d { background: var(--kh-superficie); min-height: 92px; padding: 4px 5px 6px; display: flex; flex-direction: column; gap: 2px; }
.kh-cal-d.fuera { background: color-mix(in srgb, var(--kh-hover) 45%, var(--kh-superficie)); }
.kh-cal-d.fuera .kh-cal-n { color: var(--kh-texto-3); }
.kh-cal-d.hoy { box-shadow: inset 0 0 0 2px var(--kh-resalte); }
.kh-cal-d.hoy .kh-cal-n { color: var(--kh-texto); font-weight: 800; }
.kh-cal-n { font-size: max(11px, .78rem); font-weight: 600; color: var(--kh-texto-2); font-variant-numeric: tabular-nums; }
.kh-ev { --ev: var(--kh-texto-2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: max(11px, .72rem); line-height: 1.3;
    padding: 2px 6px; border-radius: 4px; border-left: 3px solid var(--ev); background: color-mix(in srgb, var(--ev) 12%, var(--kh-superficie));
    color: var(--kh-texto); text-decoration: none; overflow: hidden; word-break: break-word; }
/* Si el calendario va estrecho (menú lateral abierto, pantalla pequeña), una línea con puntos suspensivos y el título completo en el «title» */
@media (max-width: 1100px) { .kh-cal-mes .kh-ev { -webkit-line-clamp: 1; } }
.kh-cal-mes.apretado .kh-ev { -webkit-line-clamp: 1; padding: 1px 5px; }
.kh-ev:hover { text-decoration: none; background: color-mix(in srgb, var(--ev) 20%, var(--kh-superficie)); }
.kh-ev b { font-weight: 700; font-variant-numeric: tabular-nums; }
.kh-ev.ajeno { font-style: italic; color: var(--kh-texto-2); background: var(--kh-hover); border-left-style: dotted; }
.kh-ev.ajeno::after { content: " ↗"; opacity: .5; }
.kh-cal-cabmes { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.kh-cal-cabmes b { font-size: 1rem; text-transform: capitalize; }
.kh-cal-leyenda { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: max(11px, .78rem); color: var(--kh-texto-2); margin-top: 8px; }
.kh-cal-leyenda span { display: inline-flex; align-items: center; gap: 5px; }
.kh-cal-leyenda i { width: 10px; height: 10px; border-radius: 3px; background: var(--ev, var(--kh-texto-2)); display: inline-block; }

/* «Lo que viene»: la misma información en lista, que es lo que se usa en el móvil */
.kh-agenda { display: flex; flex-direction: column; gap: 10px; }
.kh-ag-dia { display: grid; grid-template-columns: 62px 1fr; gap: 10px; align-items: start; }
.kh-ag-fecha { font-size: max(11px, .74rem); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--kh-texto-2); padding-top: 3px; text-align: right; }
.kh-ag-fecha b { display: block; font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; color: var(--kh-texto); text-transform: none; }
.kh-ag-dia.hoy .kh-ag-fecha b { color: var(--kh-resalte); }
.kh-ag-evs { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kh-agenda .kh-ev { white-space: normal; font-size: max(11px, .84rem); padding: 6px 10px; }

@media (max-width: 700px) {
    .kh-cal-mes { font-size: .9em; }
    .kh-cal-d { min-height: 62px; }
    .kh-ev { font-size: max(10px, .64rem); padding: 1px 4px; }
    .kh-cal-dn { font-size: max(10px, .6rem); padding: 4px 2px; }
}

/* Mostrar u ocultar según el tamaño (base de la futura piel móvil) */
.kh-solo-movil { display: none !important; }
@media (max-width: 700px) {
    .kh-solo-movil { display: revert !important; }
    .kh-solo-escritorio { display: none !important; }
}

/* ---------- Semáforo (Bien · Vigilar · Mal) ---------- */
.kh-sem { display: inline-flex; align-items: center; gap: 6px; font-size: max(11px, .78rem); font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.kh-sem::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.kh-sem.bien    { background: var(--kh-sem-bien-bg);    color: var(--kh-sem-bien-tx); }
.kh-sem.vigilar { background: var(--kh-sem-vigilar-bg); color: var(--kh-sem-vigilar-tx); }
.kh-sem.mal     { background: var(--kh-sem-mal-bg);     color: var(--kh-sem-mal-tx); }
.kh-punto-sem { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.kh-punto-sem.bien { background: var(--kh-sem-bien); } .kh-punto-sem.vigilar { background: var(--kh-sem-vigilar); } .kh-punto-sem.mal { background: var(--kh-sem-mal); }

/* =====================================================================
   PIEL MÓVIL · v1 (César, 22/09/2026: «en el móvil solo lo que tiene sentido hacer ahí»)
   La app es la misma; en el teléfono cambia la portada y lo que no está, se dice.
     <div class="kh-mov kh-solo-movil"> … portada … </div>
     <a class="kh-mov-acc" href="…"><span class="ic">📅</span><b>Pedir vacaciones</b><small>…</small><i>2</i></a>
     <div class="kh-mov-no"> … esto se hace desde el ordenador … </div>
   ===================================================================== */
.kh-mov { display: flex; flex-direction: column; gap: 14px; }
.kh-mov-saludo b { display: block; font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; }
.kh-mov-saludo span { color: var(--kh-texto-2); font-size: max(11px, .88rem); }
.kh-mov-acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kh-mov-acc { position: relative; display: flex; flex-direction: column; gap: 2px; min-height: 96px; padding: 12px 13px;
    background: var(--kh-superficie); border: 1px solid var(--kh-borde); border-radius: var(--kh-radio); box-shadow: var(--kh-sombra-sm); color: inherit; }
.kh-mov-acc:hover, .kh-mov-acc:active { text-decoration: none; border-color: var(--kh-borde-2); }
.kh-mov-acc .ic { font-size: 1.35rem; line-height: 1; margin-bottom: 4px; }
.kh-mov-acc b { font-size: max(11px, .95rem); font-weight: 700; line-height: 1.2; }
.kh-mov-acc small { color: var(--kh-texto-2); font-size: max(11px, .76rem); line-height: 1.3; }
.kh-mov-acc i { position: absolute; top: 10px; right: 10px; font-style: normal; font-size: max(11px, .7rem); font-weight: 800; min-width: 20px; text-align: center;
    background: var(--kh-resalte); color: var(--kh-sobre-resalte); border-radius: 999px; padding: 1px 6px; }
.kh-mov-acc.pide i { background: var(--sit-decidir); color: var(--sit-decidir-tx); }
.kh-mov-acc.ancha { grid-column: 1 / -1; min-height: 0; flex-direction: row; align-items: center; gap: 10px; }
.kh-mov-acc.ancha .ic { margin: 0; }
.kh-mov-sec { font-size: max(11px, .7rem); font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--kh-texto-3); margin: 4px 2px -4px; }
/* Lista corta de cosas (lo de hoy, lo que viene) */
.kh-mov-lista { display: flex; flex-direction: column; background: var(--kh-superficie); border: 1px solid var(--kh-borde); border-radius: var(--kh-radio); overflow: hidden; }
.kh-mov-item { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-bottom: 1px solid var(--kh-borde); color: inherit; min-height: 52px; }
.kh-mov-item:last-child { border-bottom: 0; }
.kh-mov-item:hover { text-decoration: none; background: var(--kh-hover); }
.kh-mov-item .tx { flex: 1; min-width: 0; }
.kh-mov-item .tx b { display: block; font-size: max(11px, .92rem); font-weight: 600; }
.kh-mov-item .tx span { display: block; font-size: max(11px, .78rem); color: var(--kh-texto-2); }
.kh-mov-item::after { content: "›"; color: var(--kh-texto-3); font-size: 1.2rem; }
/* Lo que no se hace desde el móvil */
.kh-mov-no { text-align: center; padding: 26px 18px; color: var(--kh-texto-2); }
.kh-mov-no .ic { font-size: 1.8rem; display: block; margin-bottom: 8px; }
.kh-mov-no b { display: block; color: var(--kh-texto); font-size: 1rem; margin-bottom: 4px; }
.kh-mov-no p { margin: 0 0 12px; font-size: max(11px, .88rem); }

/* ---------- Cifra suelta en una cabecera («21 fechas anómalas») ---------- */
.kh-cifras-linea { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: baseline; }
.kh-cifra { display: inline-flex; align-items: baseline; gap: 6px; }
.kh-cifra b { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kh-cifra span { color: var(--kh-texto-2); font-size: max(11px, .84rem); }
a.kh-cifra:hover { text-decoration: none; } a.kh-cifra:hover b { text-decoration: underline; }
.kh-cifra.pide b { color: var(--sit-decidir-tx); } .kh-cifra.mal b { color: var(--sit-vencida-tx); }
/* Chip de contexto de la barra superior (ejercicio, alcance, mes cerrado) */
.kh-chip.ctx { background: var(--kh-superficie); border-color: var(--kh-borde-2); font-weight: 600; color: var(--kh-texto-2); }
.kh-chip.ctx b { color: var(--kh-texto); font-weight: 700; }

/* =====================================================================
   .kh-crudo · LO QUE DEBE SALIR TAL CUAL (petición de misl, 22/09/2026)
   Para códigos QR, códigos de barras, firmas escaneadas, gráficos generados: cosas donde el aspecto
   no es decoración, sino que decide si SE LEE. COMPROMISO DEL KIT: ninguna versión, ni ahora ni después,
   pinta dentro de .kh-crudo; ni en modo oscuro, ni en alto contraste, ni en móvil, ni al imprimir.
   Lo único que hace el kit es protegerlo: quitar filtros, mezclas y transparencias que vengan de fuera,
   y pedir al navegador que imprima los colores exactos.
   ===================================================================== */
.kh-crudo, .kh-crudo * { filter: none !important; -webkit-filter: none !important; mix-blend-mode: normal !important; opacity: 1 !important;
    box-shadow: none !important; text-shadow: none !important; }
.kh-crudo { forced-color-adjust: none; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
html.kh-t-oscuro .kh-crudo, html.kh-t-contraste .kh-crudo { background: #ffffff; color: #000000; }   /* el lienzo vuelve a ser papel */
@media print { .kh-crudo { background: #ffffff !important; } }

/* =====================================================================
   PANTALLA CON VISTA PREVIA (diseñador de QR, editor de cartel, plantillas de correo…)
   <div class="kh-con-previa"><div>…opciones…</div><div class="kh-previa-fija kh-crudo">…lo que se está haciendo…</div></div>
   En el ordenador, la previa se queda a la vista mientras se tocan las opciones; en el móvil sube arriba y se queda pegada.
   ===================================================================== */
.kh-con-previa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 400px); gap: 16px; align-items: start; }
.kh-previa-fija { position: sticky; top: calc(var(--kh-barra-alto) + 12px); align-self: start; background: var(--kh-superficie);
    border: 1px solid var(--kh-borde); border-radius: var(--kh-radio); padding: 12px; box-shadow: var(--kh-sombra-sm);
    min-width: 0; min-height: 0; }   /* que pueda encoger: la app no necesita poner su propio min-height:0 */
.kh-previa-fija > * { min-width: 0; min-height: 0; }
.kh-previa-fija .kh-bloque-tit { margin-bottom: 8px; }
@media (max-width: 900px) {
    .kh-con-previa { grid-template-columns: 1fr; }
    /* La previa pegajosa no puede comerse la pantalla: tope de alto y la pieza se escala dentro (lo vio misl) */
    .kh-con-previa > .kh-previa-fija { order: -1; top: calc(var(--kh-barra-alto) + 4px); z-index: 18; padding: 8px;
        max-height: 45dvh; overflow: auto; }
    .kh-previa-fija img, .kh-previa-fija svg, .kh-previa-fija canvas { max-height: 32dvh; width: auto; max-width: 100%; object-fit: contain; }
}

/* =====================================================================
   PIEZAS PEDIDAS POR LEADS (22/09/2026), útiles para todas
   ===================================================================== */
/* 1) Etiqueta cuyo color lo pone el DATO (estados y etapas que configura la central) */
.kh-tag.dato { --c: var(--kh-texto-2); background: color-mix(in srgb, var(--c) 16%, var(--kh-superficie));
    color: color-mix(in srgb, var(--c) 72%, var(--kh-texto)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 38%, transparent); }
.kh-punto-dato { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--kh-texto-2)); flex: none; }

/* 2) Fila de bloques que se reparten el ancho y bajan solos cuando no caben */
/* El ancho mínimo de cada bloque es un TOKEN, no un apaño: `style="--kh-col-min:340px"` es la forma legítima de
   decir «estas tarjetas necesitan 340 para leerse». Lo pidió leads (02/10/2026), que tenía 23 sitios con
   `flex:1;min-width:…` a mano en cinco medidas distintas. Con esto: <div class="kh-reparto" style="--kh-col-min:340px">. */
.kh-reparto { --kh-col-min: 320px; display: flex; flex-wrap: wrap; gap: 16px; }
.kh-reparto > * { flex: 1 1 var(--kh-col-min); min-width: 0; }
.kh-reparto > .peso-2 { flex-grow: 2; } .kh-reparto > .peso-3 { flex-grow: 3; }
.kh-reparto > .estrecho { flex: 0 1 280px; }

/* 3) Tablero de columnas (embudo, pipeline, tareas por estado) */
.kh-tablero { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 6px; align-items: start; }
.kh-col-tab { background: var(--kh-hover); border: 1px solid var(--kh-borde); border-radius: var(--kh-radio); padding: 10px; min-width: 0; }
.kh-col-tab > h3 { display: flex; align-items: center; gap: 8px; font-size: max(11px, .82rem); font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
    color: var(--kh-texto-2); margin: 0 0 10px; }
.kh-col-tab > h3 b { margin-left: auto; font-size: max(11px, .72rem); background: var(--kh-superficie); border: 1px solid var(--kh-borde); border-radius: 999px; padding: 0 7px; color: var(--kh-texto); }
.kh-ficha-tab { display: block; background: var(--kh-superficie); border: 1px solid var(--kh-borde); border-left: 3px solid var(--c, var(--kh-borde-2));
    border-radius: var(--kh-radio-sm); padding: 9px 11px; margin-bottom: 8px; color: inherit; box-shadow: var(--kh-sombra-sm); }
.kh-ficha-tab:hover { text-decoration: none; border-color: var(--kh-borde-2); }
.kh-ficha-tab b { display: block; font-size: max(11px, .9rem); }
.kh-ficha-tab span { display: block; font-size: max(11px, .76rem); color: var(--kh-texto-2); }

/* 3b) Mover tarjetas de columna (lo enciende KH.tablero()).
   Zona donde se suelta: .kh-lista-tab[data-estado] dentro de la columna (o la propia .kh-col-tab[data-estado]).
   Para el dedo NO se arrastra: cada tarjeta lleva el botón «Mover» con la lista de columnas. */
.kh-lista-tab { min-height: 56px; border-radius: var(--kh-radio-sm); }
.kh-lista-tab.kh-soltando { outline: 2px dashed var(--kh-principal); outline-offset: 2px;
    background: color-mix(in srgb, var(--kh-principal) 8%, transparent); }
.kh-hueco-tab { height: 0; border-top: 3px solid var(--kh-principal); border-radius: 2px; margin: 3px 0 8px; }   /* dónde va a caer */
.kh-ficha-tab.kh-llevando { opacity: .4; }
.kh-ficha-tab.kh-guardando { opacity: .55; pointer-events: none; }
.kh-ficha-tab.kh-movible { position: relative; padding-right: 36px; }
.kh-ficha-tab .kh-mover { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
    background: none; border: 1px solid transparent; border-radius: var(--kh-radio-sm); color: var(--kh-texto-2); cursor: grab; font-size: max(11px, .95rem); line-height: 1; }
.kh-ficha-tab .kh-mover:hover, .kh-ficha-tab .kh-mover:focus-visible { background: var(--kh-hover); border-color: var(--kh-borde); color: var(--kh-texto); }
.kh-mover-panel { position: fixed; z-index: 500; display: none; min-width: 200px; max-width: min(300px, 94vw); padding: 6px;
    background: var(--kh-superficie); color: var(--kh-texto); border: 1px solid var(--kh-borde); border-radius: var(--kh-radio); box-shadow: var(--kh-sombra); }
.kh-mover-panel h4 { margin: 4px 8px 6px; font-size: max(11px, .74rem); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--kh-texto-2); }
.kh-mover-panel button { display: block; width: 100%; text-align: left; min-height: 40px; padding: 8px 10px; background: none; border: 0;
    border-radius: var(--kh-radio-sm); color: inherit; font: inherit; cursor: pointer; }
.kh-mover-panel button:hover, .kh-mover-panel button:focus-visible { background: var(--kh-hover); }
.kh-mover-panel button[disabled] { color: var(--kh-texto-2); cursor: default; }
.kh-mover-panel button[disabled]::after { content: ' · aquí está'; font-size: max(11px, .76rem); }
@media (max-width: 700px) { .kh-ficha-tab .kh-mover { width: 40px; height: 40px; top: 2px; right: 2px; } .kh-ficha-tab.kh-movible { padding-right: 46px; } }
@media (max-width: 700px) { .kh-tablero { grid-auto-flow: row; grid-auto-columns: auto; } }

/* 4) Tabla cruzada con mapa de calor (tienda × mes): el nivel va en --nivel, de 0 a 1 */
.kh-calor { background: color-mix(in srgb, var(--c, var(--kh-dato-2)) calc(var(--nivel, 0) * 60%), transparent); }

/* ---------- Gráfico de barras en lista: comparar tiendas, medios, estados ----------
   Lo pidió leads (02/10/2026) y lo empezó César, que miró una captura de «Comparativa por tienda» y dijo que se
   veía TOSCO: barras negras a palo seco, etiquetas cortadas a mitad de palabra y una tabla de tres columnas que en
   el teléfono se estrujaba. Estaba hecho a mano en cuatro pantallas suyas.
   El dato va DENTRO, en una variable, que es la forma legítima de escribir un style= : --v de 0 a 100.
       <figure class="kh-grafico">
         <figcaption>Leads por tienda · 2026 <small>Cuántos ha recibido cada una</small></figcaption>
         <ol class="kh-barras">
           <li style="--v:73"><span>PUERTO DEL ROSARIO (CAPITAL)</span><b>47</b><small>14 %</small></li>
         </ol>
       </figure>
   Va dentro de <figure class="kh-grafico"> con su <figcaption> porque la norma de César es que TODO gráfico diga
   encima qué se mide; si hay más de un color, se añade .kh-leyenda-puntos y se dice qué es cada uno.
   El nombre largo se recorta con puntos suspensivos y NO se parte: ponedle el nombre entero en title=. En el
   teléfono el nombre pasa a su propia línea, entero, y debajo la barra con su cifra. */
.kh-grafico { margin: 0 0 14px; }
.kh-grafico > figcaption { font-size: max(11px, .9rem); font-weight: 700; color: var(--kh-texto); }
.kh-grafico > figcaption small { display: block; font-weight: 400; font-size: max(11px, .78rem); color: var(--kh-texto-2); margin-top: 1px; }
.kh-grafico .kh-leyenda-puntos { margin: 6px 0 0; }

.kh-barras { --kh-barras-et: 11rem; list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.kh-barras > li { display: grid; grid-template-columns: minmax(0, var(--kh-barras-et)) minmax(60px, 1fr) auto auto;
    align-items: center; gap: 3px 10px; font-size: max(11px, .84rem); }
.kh-barras > li > span { grid-column: 1; grid-row: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; color: var(--kh-texto-2); }
.kh-barras > li::after { content: ""; grid-column: 2; grid-row: 1; height: 9px; border-radius: 999px;
    background: linear-gradient(to right, var(--c, var(--kh-dato-1)) calc(var(--v, 0) * 1%),
                color-mix(in srgb, var(--kh-texto) 8%, var(--kh-superficie)) 0); }
.kh-barras > li > b { grid-column: 3; grid-row: 1; font-variant-numeric: tabular-nums; text-align: right; }
.kh-barras > li > small { grid-column: 4; grid-row: 1; color: var(--kh-texto-3); font-variant-numeric: tabular-nums;
    text-align: right; min-width: 3.6em; }
.kh-barras > li.destacada > span { color: var(--kh-negro); font-weight: 700; }
@media (max-width: 560px) {
    .kh-barras { gap: 12px; }
    .kh-barras > li { grid-template-columns: minmax(60px, 1fr) auto auto; }
    .kh-barras > li > span { grid-column: 1 / -1; grid-row: 1; white-space: normal; overflow: visible; }
    .kh-barras > li::after { grid-column: 1; grid-row: 2; }
    .kh-barras > li > b { grid-column: 2; grid-row: 2; }
    .kh-barras > li > small { grid-column: 3; grid-row: 2; }
}
.kh-calor.negativo { --c: var(--kh-dato-neg); }
.kh-table.kh-cruzada th:first-child, .kh-table.kh-cruzada td:first-child { position: sticky; left: 0; background: var(--kh-superficie); z-index: 1; }
.kh-table.kh-cruzada td { text-align: right; font-variant-numeric: tabular-nums; }
.kh-table.kh-cruzada .leyenda-calor { display: inline-flex; align-items: center; gap: 6px; font-size: max(11px, .76rem); color: var(--kh-texto-2); }

/* Damero: se ve a través de lo que tiene fondo transparente (cedido por misl, 22/09/2026).
   Se pone en el recuadro que enseña la pieza, nunca dentro de .kh-crudo. */
.kh-damero { --dam: color-mix(in srgb, var(--kh-borde) 70%, transparent); background-color: #ffffff;
    background-image: linear-gradient(45deg, var(--dam) 25%, transparent 25%), linear-gradient(-45deg, var(--dam) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--dam) 75%), linear-gradient(-45deg, transparent 75%, var(--dam) 75%);
    background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; }

/* =====================================================================
   ESTILO «COMPACTO» · html.kh-e-compacto      (César, 06/10/2026)
   ---------------------------------------------------------------------
   Se definió y se probó entero en Gestión y César lo quiere en sus apps. TODO cuelga de la clase
   kh-e-compacto en <html>: sin esa clase no cambia absolutamente nada para nadie. La clase la pone
   list en el token (Apariencia › Estilo), como el resto de la apariencia de cada persona.
   El contrato de Gestión está en panel/docs/estilo-compacto/LEEME.md (21 piezas). Aquí van con los
   nombres del kit, porque Gestión tiene su propio armazón (.kh-cinta, .kh-areas, form.filtros) y las
   demás apps tienen el del kit (.kh-nav, .kh-tabs, .kh-filtros).
   La idea de fondo, en una frase: MÁS DATO EN PANTALLA SIN PERDER LEGIBILIDAD. Si algo deja de leerse,
   es un fallo, no un efecto secundario aceptable.
   ===================================================================== */

/* 1 · Compacto de verdad: la letra base y el aire. La letra personal (kh-l-*) sigue mandando encima. */
html.kh-e-compacto { font-size: 14px; }
html.kh-e-compacto.kh-l-s { font-size: 13px; }
html.kh-e-compacto.kh-l-g { font-size: 15.5px; }
html.kh-e-compacto.kh-l-xg { font-size: 17px; }
html.kh-e-compacto body { line-height: 1.38; }
html.kh-e-compacto .kh-main { padding: 10px 16px 28px; }
html.kh-e-compacto .kh-card { margin-bottom: 8px; border-radius: 5px; padding: 10px 12px; }
html.kh-e-compacto .kh-alert { padding: 6px 10px; margin-bottom: 8px; font-size: max(11px, .84rem); }
html.kh-e-compacto .kh-pagehead { margin-bottom: 6px; }
html.kh-e-compacto .kh-h1 { font-size: 1.05rem; }
html.kh-e-compacto .kh-pagehead .kh-sub { font-size: max(11px, .8rem); }
html.kh-e-compacto .kh-bloque-tit { margin-bottom: 7px; }
html.kh-e-compacto .kh-bloque-tit b, html.kh-e-compacto .kh-bloque-tit h2 { font-size: max(11px, .88rem); }

/* 2 y 3 · Barra y menú más pequeños; el ☰ sigue siendo el del kit (KH.nav), aquí solo se encoge. */
html.kh-e-compacto .kh-topbar { min-height: 38px; padding-top: 3px; padding-bottom: 3px; }
html.kh-e-compacto .kh-wordmark { font-size: 1rem; }
html.kh-e-compacto .kh-nav { padding: 10px 8px; }
html.kh-e-compacto .kh-nav a { padding: 5px 9px; font-size: max(11px, .8rem); border-radius: 7px; gap: 8px; }
html.kh-e-compacto .kh-nav-sec { font-size: max(10px, .64rem); margin: 10px 0 3px; }
html.kh-e-compacto .kh-tabs:not(.kh-subtabs) { padding: 2px 4px; }
html.kh-e-compacto .kh-tabs:not(.kh-subtabs) > :is(a, button) { padding: 5px 10px; font-size: max(11px, .8rem); }
html.kh-e-compacto :is(.kh-subtabs, .kh-seg) > :is(a, button) { padding: 2px 9px; font-size: max(11px, .76rem); }

/* 4 y 16 · Ruta: en vez del título grande, «Pantalla ▾» con sus hermanas y la explicación en ⓘ.
   La monta KH.ruta() desde el menú que ya pinta cada app: las apps no tocan nada. */
.kh-ruta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; margin: 0 0 7px; min-height: 26px; font-size: max(11px, .8rem); }
.kh-ruta .sep { color: var(--kh-texto-3); }
.kh-ruta-d { position: relative; }
.kh-ruta-d > summary { list-style: none; cursor: pointer; padding: 2px 6px; border-radius: 5px; color: var(--kh-texto-2); white-space: nowrap; }
.kh-ruta-d > summary::-webkit-details-marker { display: none; }
.kh-ruta-d > summary:hover, .kh-ruta-d[open] > summary { background: var(--kh-hover); color: var(--kh-texto); }
.kh-ruta-d > summary i { font-style: normal; font-size: .7em; color: var(--kh-texto-3); }
.kh-ruta-d.fuerte > summary { color: var(--kh-texto); font-weight: 700; font-size: max(11px, .92rem); }
.kh-ruta-caja { position: absolute; z-index: 65; top: calc(100% + 3px); left: 0; min-width: 210px; max-height: 70vh; overflow: auto;
    background: var(--kh-superficie); border: 1px solid var(--kh-borde); border-radius: 8px; box-shadow: var(--kh-sombra-pop); padding: 4px; display: flex; flex-direction: column; }
.kh-ruta-caja a { padding: 5px 10px; border-radius: 5px; color: var(--kh-texto); text-decoration: none; font-size: max(11px, .84rem); white-space: nowrap; }
.kh-ruta-caja a:hover { background: var(--kh-hover); text-decoration: none; }
.kh-ruta-caja a.activo { font-weight: 700; }
.kh-ruta-caja a.activo::before { content: "\25CF  "; font-size: .7em; }
.kh-ruta-info { position: relative; cursor: help; color: var(--kh-texto-3); margin-left: 2px; font-size: max(11px, .85rem); }
.kh-ruta-tip { display: none; position: absolute; z-index: 66; top: calc(100% + 4px); left: -10px; width: min(460px, 80vw);
    background: var(--kh-superficie); border: 1px solid var(--kh-borde); border-radius: 8px; box-shadow: var(--kh-sombra-pop);
    padding: 8px 10px; color: var(--kh-texto-2); font-size: max(11px, .8rem); line-height: 1.4; font-weight: 400; }
.kh-ruta-info:hover .kh-ruta-tip, .kh-ruta-info:focus-visible .kh-ruta-tip { display: block; }
.kh-ruta-acc { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
/* Con la ruta puesta se esconden EL TÍTULO Y SU EXPLICACIÓN, que ya están arriba. NADA MÁS.
   La primera versión escondía la cabecera entera y se llevó por delante los botones que viven dentro de ella
   (Plan de Negocio, 06/10/2026: «Criterios de pago» quedó dentro de una caja de 1×1 px, visible para el
   navegador e imposible de pulsar). Meter acciones en la cabecera es el patrón de la casa, no una rareza suya.
   Y no se usa display:none: el <h1> sigue existiendo para quien navega con lector de pantalla. */
html.kh-e-compacto .kh-pagehead.kh-con-ruta { margin: 0; gap: 0; }
html.kh-e-compacto .kh-pagehead.kh-con-ruta .kh-h1,
html.kh-e-compacto .kh-pagehead.kh-con-ruta .kh-h1 + .kh-sub:not(.kh-vive) {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
@media print { .kh-ruta-d > summary i, .kh-ruta-info, .kh-ruta-acc { display: none !important; } }

/* 4bis · LOS FORMULARIOS TAMBIÉN SE APRIETAN. Hasta hoy el Compacto solo tocaba los filtros, porque en Gestión la
   regla era «los de editar datos se quedan como están». El resultado lo vio César el 07/10/2026 en su área
   personal y tiene razón: en la MISMA pantalla, pestañas de 26 px y desplegables de 48. «Es como muy
   desproporcionado.» Y lo es: un estilo fija la escala de TODO lo que se ve; dos escalas en una pantalla no son
   dos decisiones, son una sin terminar.
   Lo que NO cambia: la forma. Un filtro sigue siendo texto con ▾ (se consulta) y un campo de formulario sigue
   siendo una caja con su borde (se escribe). Lo que se iguala es el TAMAÑO. */
html.kh-e-compacto :is(.kh-input, .kh-select, .kh-textarea) { padding: 4px 9px; font-size: max(11px, .84rem); border-radius: var(--kh-radio-sm); }
html.kh-e-compacto .kh-textarea { min-height: 62px; }
html.kh-e-compacto .kh-field { margin-bottom: 9px; }
html.kh-e-compacto :is(.kh-field label, .kh-label) { font-size: max(11px, .72rem); margin-bottom: 2px; }
html.kh-e-compacto .kh-row { gap: 9px; }
html.kh-e-compacto .kh-form-sec { margin: 12px 0 6px; padding-top: 8px; font-size: max(10px, .68rem); }
/* Un día y una hora miden lo que miden: no necesitan media pantalla para enseñar «dd/mm/aaaa» */
html.kh-e-compacto .kh-field :is(input[type=date], input[type=time]) { max-width: 170px; }
html.kh-e-compacto .kh-field :is(input[type=number]) { max-width: 120px; }

/* 5 a 9 · Filtros «opción A»: etiqueta pequeña y el valor como texto con flecha, todo en una línea.
   Lo puesto, en ÁMBAR —aquí sí: en compacto el gris no se distingue del campo, y el ámbar es el color
   de «esto lo has tocado tú» en toda la casa (nunca verde)—. Solo formularios de consulta. */
html.kh-e-compacto .kh-filtros {
    --fA-alto: 22px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 4px 10px; margin-bottom: 8px; box-shadow: none; }
html.kh-e-compacto .kh-filtros .kh-field { display: inline-flex; flex-direction: row; align-items: center; gap: 5px; margin: 0; flex: 0 0 auto; width: auto; min-width: 0; }
html.kh-e-compacto .kh-filtros .kh-field > label, html.kh-e-compacto .kh-filtros .kh-label {
    font-size: max(11px, .7rem); color: var(--kh-texto-3); text-transform: none; letter-spacing: 0; margin: 0; white-space: nowrap; }
html.kh-e-compacto .kh-filtros select, html.kh-e-compacto .kh-filtros .kh-select {
    -webkit-appearance: none; appearance: none; field-sizing: content; width: auto; max-width: 260px; height: var(--fA-alto); min-height: 0;
    padding: 0 14px 0 3px; margin: 0; border: 0; border-bottom: 1px dotted var(--kh-borde-2); border-radius: 0; box-shadow: none;
    font-size: max(11px, .82rem); font-weight: 500; color: var(--kh-texto); cursor: pointer;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23939aa3'/%3E%3C/svg%3E") no-repeat right 2px center; }
html.kh-e-compacto .kh-filtros input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]) {
    height: var(--fA-alto); min-height: 0; padding: 0 3px; margin: 0; border: 0; border-bottom: 1px solid var(--kh-borde-2); border-radius: 0;
    background: transparent; box-shadow: none; font-size: max(11px, .82rem); color: var(--kh-texto); width: auto; max-width: 220px; }
html.kh-e-compacto .kh-filtros input[type=date] { width: 112px; }
html.kh-e-compacto .kh-filtros :is(select, input):focus { outline: none; border-bottom-color: var(--kh-negro); }
html.kh-e-compacto .kh-filtros :is(.kh-btn, button) { min-height: 0; height: var(--fA-alto); padding: 0 11px; font-size: max(11px, .76rem); line-height: var(--fA-alto); }
html.kh-e-compacto .kh-filtros .kh-acciones { margin-left: auto; }
/* lo que has tocado: ámbar. Pisa al relleno gris del kit normal (.kh-filtrado), a propósito. */
html.kh-e-compacto .kh-filtros :is(.kh-filtrado, .filtro-puesto, .filtro-cambiado),
html.kh-e-compacto .kh-filtros .kh-field.activo :is(select, input) {
    background-color: var(--kh-warn-bg) !important; border-bottom: 1px solid var(--kh-warn) !important;
    border-radius: 4px 4px 0 0 !important; font-weight: 600 !important; box-shadow: none !important; }
/* 8 · cambiaste algo y no has aplicado: el botón late hasta que lo pulses */
@keyframes kh-latido { 0%, 100% { box-shadow: 0 0 0 0 rgba(183,121,31,0); background: var(--kh-negro); }
                       50%      { box-shadow: 0 0 0 4px rgba(183,121,31,.35); background: var(--kh-warn); } }
.kh-sin-aplicar { animation: kh-latido 1.1s ease-in-out infinite; color: #fff !important; }
.kh-sin-aplicar::after { content: " \2190 aplicar"; font-weight: 400; font-size: .9em; }
html.kh-sin-mov .kh-sin-aplicar { animation: none; background: var(--kh-warn) !important; }
/* 9 · el botón «Filtros · n» y el plegado */
.kh-filtros-btn { min-height: 0; padding: 1px 9px; font-size: max(11px, .74rem); border-radius: 6px; background: transparent; color: var(--kh-texto);
    border: 1px solid var(--kh-borde-2); cursor: pointer; line-height: 1.5; font-weight: 500; }
.kh-filtros-btn:hover { background: var(--kh-hover); }
.kh-filtros-btn.puestos { background: var(--kh-warn-bg); border-color: var(--kh-warn); }
.kh-filtros-btn b { font-weight: 400; margin-left: 2px; display: inline-block; }
html.kh-filtros-ocultos .kh-filtros-btn b { transform: rotate(180deg); }
html.kh-filtros-ocultos .kh-filtros, html.kh-filtros-ocultos .kh-filtros-resumen { display: none !important; }

/* 6 · un grupo de casillas se vuelve «Centros: 3 de 5» (lo monta KH.compacto) */
.kh-multi { position: relative; display: inline-block; }
.kh-multi > summary { list-style: none; cursor: pointer; border: 0; border-bottom: 1px dotted var(--kh-borde-2); border-radius: 0;
    background: transparent; padding: 0 3px; height: 22px; line-height: 22px; font-size: max(11px, .82rem); font-weight: 500; white-space: nowrap; }
.kh-multi > summary::-webkit-details-marker { display: none; }
.kh-multi > summary::after { content: " \25BE"; color: var(--kh-texto-3); }
.kh-multi.filtrado > summary { background: var(--kh-warn-bg); border-bottom: 1px solid var(--kh-warn); border-radius: 4px 4px 0 0; font-weight: 600; }
.kh-multi-caja { position: absolute; z-index: 60; top: calc(100% + 3px); left: 0; min-width: 190px; max-height: 60vh; overflow: auto;
    background: var(--kh-superficie); border: 1px solid var(--kh-borde); border-radius: 8px; box-shadow: var(--kh-sombra-pop); padding: 4px; }
.kh-multi-caja label { display: flex; gap: 7px; align-items: center; padding: 4px 8px; border-radius: 5px; font-size: max(11px, .82rem); font-weight: 400; cursor: pointer; white-space: nowrap; }
.kh-multi-caja label:hover { background: var(--kh-hover); }
.kh-multi-caja .pie { display: flex; gap: 10px; border-top: 1px solid var(--kh-borde); margin-top: 4px; padding: 5px 8px 2px; }
.kh-multi-caja .pie button { background: none; border: 0; padding: 0; cursor: pointer; color: var(--kh-texto-2); text-decoration: underline; font-size: max(11px, .76rem); }

/* 10 · buscar: la lupa del kit, más fina, y Ctrl+K lo abre (lo enciende KH.compacto) */
html.kh-e-compacto :is(.kh-search-btn, .kh-buscar) { min-height: 28px; padding: 2px 9px; font-size: max(11px, .8rem); }

/* 12 y 15 · celdas más juntas y listado tipo extracto (una tabla, con fila de grupo y de total) */
html.kh-e-compacto .kh-table th, html.kh-e-compacto .kh-table td { padding: 2px 6px; line-height: 1.3; }
html.kh-e-compacto .kh-table thead th { padding-top: 3px; padding-bottom: 3px; font-size: max(11px, .7rem); }
html.kh-e-compacto .kh-table th small { font-size: max(10px, .62rem); }
.kh-table tr.e-grupo td { background: var(--kh-hover); border-top: 1px solid var(--kh-borde-2); font-weight: 600; }
.kh-table tr.e-total td { font-weight: 700; border-bottom: 1px solid var(--kh-borde-2); }
.kh-table td.tenue { color: var(--kh-texto-3); font-size: max(11px, .78rem); }
.kh-table td.corta { max-width: 340px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 13 · columnas tipo Excel (las enciende KH.tablaCols): arrastrar el borde, doble clic para ajustar, ordenar por el título */
.kh-table th.kh-ord { cursor: pointer; }
.kh-table th.kh-ord:hover { background: var(--kh-hover); }
.kh-table th[data-orden]::after { content: " \25B2"; font-size: .6em; color: var(--kh-texto-3); }
.kh-table th[data-orden=desc]::after { content: " \25BC"; }
html.kh-e-compacto .kh-table th { position: relative; }   /* solo aquí: el asa de ensanchar cuelga del título */
.kh-col-asa { position: absolute; top: 0; bottom: 0; right: -4px; width: 9px; cursor: col-resize; user-select: none; }
.kh-col-asa::after { content: ""; position: absolute; left: 4px; top: 25%; bottom: 25%; width: 1px; background: var(--kh-borde); }
.kh-col-asa:hover::after, .kh-col-asa.arrastrando::after { background: var(--kh-negro); width: 2px; }
.kh-table.kh-anchos { table-layout: fixed; }
.kh-tscroll.kh-alta { max-height: 70vh; overflow: auto; }
.kh-tscroll.kh-alta thead th { position: sticky; top: 0; z-index: 2; background: var(--kh-superficie); }

/* 18 y 19 · cifras compactas y cuadradas, botones pequeños */
html.kh-e-compacto .kh-stats { gap: 6px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); margin-bottom: 6px; }
html.kh-e-compacto .kh-stat { padding: 5px 9px 5px 11px; min-height: 0; border-radius: 3px; box-shadow: none; }
html.kh-e-compacto .kh-stat .num { font-size: 1.12rem; text-align: right; line-height: 1.2; }
html.kh-e-compacto .kh-stat .lbl { font-size: max(11px, .72rem); }
html.kh-e-compacto .kh-stat .sub { font-size: max(10px, .68rem); line-height: 1.3; text-align: right; }
html.kh-e-compacto .kh-btn { min-height: 24px; padding: 2px 10px; font-size: max(11px, .78rem); border-radius: 6px; }
html.kh-e-compacto .kh-btn.peq { min-height: 22px; padding: 1px 9px; font-size: max(11px, .74rem); }
html.kh-e-compacto :is(.kh-chip, .kh-tag) { padding-top: 1px; padding-bottom: 1px; font-size: max(11px, .74rem); }

/* 14 · respuestas rápidas «+»: una duda o una tarea con respuestas posibles se contesta sin escribir.
   Dos usos reales: las dudas de Gestión y las tareas del Centro con respuestas posibles. */
.kh-responder { position: relative; display: inline-block; }
.kh-responder > summary { list-style: none; cursor: pointer; font-size: 1rem; font-weight: 700; min-width: 30px; text-align: center;
    border: 1px solid var(--kh-borde-2); border-radius: 6px; padding: 0 6px; }
.kh-responder > summary::-webkit-details-marker { display: none; }
.kh-responder > summary:hover { background: var(--kh-hover); }
.kh-responder-caja { position: absolute; right: 0; top: calc(100% + 4px); z-index: 40; width: 330px; background: var(--kh-superficie);
    border: 1px solid var(--kh-borde); border-radius: 9px; box-shadow: var(--kh-sombra-pop); padding: 9px 10px;
    display: flex; flex-direction: column; gap: 3px; text-align: left; white-space: normal; }
.kh-responder-caja > b { font-size: max(11px, .72rem); text-transform: uppercase; letter-spacing: .05em; color: var(--kh-texto-3); }
.kh-responder-caja label { display: flex; gap: 7px; align-items: flex-start; padding: 4px 6px; border-radius: 6px; font-size: max(11px, .84rem); cursor: pointer; }
.kh-responder-caja label:hover { background: var(--kh-hover); }
.kh-responder-caja label:has(input:checked) { background: var(--kh-warn-bg); font-weight: 600; }
.kh-responder-caja textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: max(11px, .84rem); border: 1px solid var(--kh-borde-2);
    border-radius: 6px; padding: 5px 7px; margin-top: 3px; }
.kh-responder-caja .kh-acciones { justify-content: flex-end; margin-top: 4px; }
/* «Lo que creo» en recuadro, las preguntas en negrita */
.kh-creo { display: block; margin-top: 5px; padding: 5px 9px; border-left: 3px solid var(--kh-warn); background: var(--kh-warn-bg); border-radius: 0 6px 6px 0; }
.kh-creo > span:first-child { font-weight: 700; font-size: max(11px, .72rem); text-transform: uppercase; letter-spacing: .04em; color: var(--kh-warn); margin-right: 4px; }

/* 17 · la nota de fiabilidad: un número pequeño en la barra de acciones; al pulsarlo, las comprobaciones */
.kh-fiab { position: relative; display: inline-block; }
.kh-fiab > summary { list-style: none; cursor: pointer; min-width: 22px; height: 20px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px; font-weight: 700; font-size: max(11px, .72rem); padding: 0 6px; background: var(--kh-negro); color: #fff; }
.kh-fiab > summary::-webkit-details-marker { display: none; }
.kh-fiab.n9 > summary { background: var(--kh-gris-600); }
.kh-fiab.n8 > summary { background: var(--kh-warn); }
.kh-fiab.mal > summary { background: var(--kh-error); }
.kh-fiab.info > summary { background: transparent; color: var(--kh-texto-3); font-weight: 400; font-size: max(11px, .9rem); padding: 0 2px; min-width: 0; }
.kh-fiab.info > summary:hover, .kh-fiab.info[open] > summary { color: var(--kh-texto); }
.kh-fiab-caja { position: absolute; right: 0; top: calc(100% + 5px); z-index: 70; width: min(520px, 90vw); background: var(--kh-superficie);
    border: 1px solid var(--kh-borde); border-radius: 8px; box-shadow: var(--kh-sombra-pop); padding: 9px 11px; font-size: max(11px, .8rem);
    white-space: normal; text-align: left; color: var(--kh-texto); }
.kh-fiab-caja p { margin: 3px 0; color: var(--kh-texto-2); }
.kh-fiab-ley { border-top: 1px solid var(--kh-borde); margin-top: 8px; padding-top: 6px; font-size: max(11px, .72rem); display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.kh-fiab-ley i { font-style: normal; display: inline-block; min-width: 18px; text-align: center; border-radius: 9px; color: #fff; font-weight: 700; font-size: max(10px, .66rem); padding: 0 4px; }
.kh-fiab-ley i.n10 { background: var(--kh-negro); } .kh-fiab-ley i.n9 { background: var(--kh-gris-600); }
.kh-fiab-ley i.n8 { background: var(--kh-warn); } .kh-fiab-ley i.mal { background: var(--kh-error); }


/* 2 y 3 (estructura) · El menú en DOS niveles arriba, en lugar del lateral: las áreas en la barra y, debajo,
   una cinta baja con las pantallas del área en la que estás. Lo monta KH.menuArriba() leyendo el menú lateral
   que las apps ya pintan; solo se enciende si el menú tiene al menos dos bloques, y entonces pone
   html.kh-menu-arriba. Sin esa clase el lateral sigue donde estaba. */
html.kh-e-compacto.kh-menu-arriba .kh-nav { display: none; }
html.kh-e-compacto .kh-areas { display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none;
    flex: 1 1 auto; min-width: 0; }
html.kh-e-compacto .kh-areas::-webkit-scrollbar { display: none; }
html.kh-e-compacto .kh-areas a { padding: 4px 9px; font-size: max(11px, .8rem); border-radius: 7px; color: var(--kh-texto-2);
    white-space: nowrap; text-decoration: none; }
html.kh-e-compacto .kh-areas a:hover { background: var(--kh-hover); color: var(--kh-texto); text-decoration: none; }
html.kh-e-compacto .kh-areas a .ic { margin-right: 5px; opacity: .9; font-size: .95em; }
html.kh-e-compacto .kh-areas a.activa { background: var(--kh-hover); color: var(--kh-texto); font-weight: 700; }
html.kh-e-compacto .kh-cinta { display: flex; align-items: center; gap: 1px; min-height: 26px; padding: 0 14px;
    background: color-mix(in srgb, var(--kh-superficie) 70%, var(--kh-fondo));
    border-bottom: 1px solid var(--kh-borde); overflow-x: auto; scrollbar-width: none; }
html.kh-e-compacto .kh-cinta::-webkit-scrollbar { display: none; }
html.kh-e-compacto .kh-cinta a { padding: 4px 9px 3px; font-size: max(11px, .76rem); color: var(--kh-texto-2);
    border-bottom: 2px solid transparent; white-space: nowrap; text-decoration: none; }
html.kh-e-compacto .kh-cinta a:hover { color: var(--kh-texto); text-decoration: none; }
html.kh-e-compacto .kh-cinta a.activo { color: var(--kh-texto); font-weight: 700; border-bottom-color: var(--kh-negro); }
/* El ☰ lo recoge todo y deja la barra fina con «Área › Pantalla», que es lo que pedía César en Gestión */
html.kh-e-compacto .kh-miga { display: none; font-size: max(11px, .8rem); color: var(--kh-texto-2); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; min-width: 0; }
html.kh-e-compacto.kh-menu-arriba.kh-nav-col .kh-areas,
html.kh-e-compacto.kh-menu-arriba.kh-nav-col .kh-cinta { display: none !important; }
html.kh-e-compacto.kh-menu-arriba.kh-nav-col .kh-miga { display: block; }
@media print { html.kh-e-compacto .kh-cinta, html.kh-e-compacto .kh-areas { display: none !important; } }

/* LO PULSABLE NO SE APRIETA EN EL TELÉFONO (ABC lo midió el 06/10/2026: en su cockpit el compacto dejaba
   50 objetivos por debajo de 24 px y el más pequeño en 12, imposibles de acertar con el dedo).
   Apretar textos y separaciones está bien; apretar el sitio donde hay que acertar, no: eso no es densidad,
   es puntería. Así que con dedo —o en pantalla estrecha— el compacto sigue siendo compacto en todo MENOS
   en el tamaño de lo que se toca. */
@media (pointer: coarse), (max-width: 700px) {
    html.kh-e-compacto :is(.kh-btn, .kh-btn.peq) { min-height: 36px; padding-top: 6px; padding-bottom: 6px; }
    html.kh-e-compacto :is(.kh-nav a, .kh-cinta a, .kh-areas a, .kh-tabs:not(.kh-subtabs) > :is(a, button)) { min-height: 36px; }
    html.kh-e-compacto :is(.kh-subtabs, .kh-seg) > :is(a, button) { min-height: 32px; padding-top: 5px; padding-bottom: 5px; }
    html.kh-e-compacto .kh-filtros { --fA-alto: 32px; }
    html.kh-e-compacto .kh-multi > summary { height: 32px; line-height: 32px; }
    html.kh-e-compacto :is(.kh-responder, .kh-fiab, .kh-ruta-d) > summary { min-height: 32px; }
    /* Un enlace dentro de una celda: el relleno de 4 px no bastaba —ABC lo midió a 375 px: se quedaban en 15,
       no en 24 (06/10/2026)—. Con 9 px arriba y abajo el objetivo llega a ~32, y el margen negativo devuelve
       casi todo lo que crecería la fila: el área responde al dedo sin que la tabla se estire. Vale para
       cualquier celda, no solo .kh-table: hay tablas de app que no llevan nuestra clase. */
    html.kh-e-compacto td a { display: inline-block; padding: 9px 2px; margin: -5px -2px; }
}

@media (max-width: 700px) {
    html.kh-e-compacto .kh-main { padding: 10px 12px 24px; }
    html.kh-e-compacto .kh-filtros { gap: 6px 10px; }
    .kh-ruta-acc { margin-left: 0; width: 100%; justify-content: flex-start; }
}