/* === 01-tokens.css === */
/* ============================================================================
   UBIKUA · SISTEMA DE DISEÑO
   01 — TOKENS, TEMAS, TIPOGRAFÍA Y RESET
   ----------------------------------------------------------------------------
   Capa base. No contiene componentes: solo las variables y las reglas globales
   de las que dependen todas las demás capas.

   ORDEN DE CARGA:
     01-tokens.css -> 02-shell.css -> 03-components.css -> 04-modules.css

   ---------------------------------------------------------------------------
   AVISO IMPORTANTE — ESTOS TOKENS SON UNA PROPUESTA, NO LA PLATAFORMA
   ---------------------------------------------------------------------------
   Revisión de DSH Diseño · 29/09/2026, medida contra las hojas reales.

   Este fichero define 86 tokens con prefijo --ubk-* (sin "admin"). Ese juego
   de nombres NO EXISTE en el armazón de la plataforma. Medido en staging:

     · admin/assets/css/admin.css  -> define --ubk-admin-*  y CERO --ubk-*
     · assets/css/layout-base.css  -> define --color-*      y CERO --ubk-*
     · assets/css/header.css       -> no define ningún token

   --ubk-primary (sin "admin") está definido en UN solo sitio de todo el
   docroot: admin/modules/gest_documental/css/gest_documental.css, que se lo
   inventó para su módulo. Es exactamente la duplicación que este libro viene a
   corregir, y por eso NO puede presentarse como el juego oficial.

   CONSECUENCIA PRÁCTICA: si copias un componente de este libro a una pantalla
   de la plataforma, var(--ubk-primary) NO resuelve: el armazón no lo define y
   el componente sale sin color y sin aviso.

   ---------------------------------------------------------------------------
   LOS TOKENS REALES DE LA PLATAFORMA (medidos el 29/09/2026)
   ---------------------------------------------------------------------------
   ARMARZÓN DE ADMINISTRACIÓN — admin/assets/css/admin.css
     --ubk-admin-font      -apple-system, BlinkMacSystemFont, "SF Pro Text",
                           "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
     --ubk-admin-primary   #336699
     --ubk-admin-secondary #f6bb00
     --ubk-admin-success   #28a745
     --ubk-admin-danger    #dc3545
     --ubk-admin-warning   #ff9800
     --ubk-admin-bg        #f4f7f6
     --ubk-admin-text      #333333
     --ubk-admin-border    #e2e8f0
     --ubk-admin-shadow    0 4px 12px rgba(0, 0, 0, 0.08)

   ARMARZÓN GENERAL — assets/css/layout-base.css
     --color-primario      #336699
     --color-secundario    #f6bb00
     --color-fondo         #f4f6f8
     --color-texto         #333333
     --color-blanco        #ffffff
     --color-gris          #6c757d
     --sombra-suave        0 4px 6px rgba(0, 0, 0, 0.05)
     --sombra-dropdown     0 10px 25px rgba(0, 0, 0, 0.1)

   ---------------------------------------------------------------------------
   TABLA DE EQUIVALENCIAS: lo propuesto aquí  ->  lo que la plataforma usa hoy
   ---------------------------------------------------------------------------
     --ubk-primary      #336699   ->  --ubk-admin-primary    #336699   IGUAL
     --ubk-secondary    #f6bb00   ->  --ubk-admin-secondary  #f6bb00   IGUAL
     --ubk-success      #15803d   ->  --ubk-admin-success    #28a745   DISTINTO
     --ubk-warning      #b45309   ->  --ubk-admin-warning    #ff9800   DISTINTO
     --ubk-danger       #b91c1c   ->  --ubk-admin-danger     #dc3545   DISTINTO
     --ubk-bg           #f4f6f8   ->  --ubk-admin-bg         #f4f7f6   DISTINTO
     --ubk-text         #1e293b   ->  --ubk-admin-text       #333333   DISTINTO
     --ubk-border       #dde3ea   ->  --ubk-admin-border     #e2e8f0   DISTINTO
     --ubk-text-muted   #5c6b80   ->  --color-gris           #6c757d   DISTINTO
     --ubk-surface      #ffffff   ->  --color-blanco         #ffffff   IGUAL

   Siete de diez no coinciden. La paleta de este libro es una propuesta de
   modernización (verdes y rojos tipo Tailwind), NO la que está en producción.
   Antes de unificar hay que decidir cuál manda; mientras no se decida, manda
   la real.

   ---------------------------------------------------------------------------
   TEMAS
     · MODO CLARO: es el valor por defecto de ESTE LIBRO. Superficies claras y
       el azul de marca UBIKUA (#336699). Ojo: los dos colores de marca SÍ son
       los de producción; el resto de la paleta no.
     · MODO OSCURO: se activa con [data-theme="dark"] en <html>, o solo, si el
       sistema operativo pide oscuro y el usuario no ha elegido nada.
       Es una capacidad DE ESTE LIBRO: la plataforma no tiene modo oscuro.
     · El azul oscuro (navy) NO es el color de marca: es el fondo del modo
       oscuro. En modo claro no aparece.

   ESCALA DE PESO TIPOGRÁFICO
     400  texto normal
     500  énfasis suave, nombres de elemento
     600  títulos, botones, etiquetas destacadas
     700  versalitas muy pequeñas y cifras
     AVISO: el 700 NO es residual en la plataforma. Medido en admin.css el
     29/09/2026: 700 aparece 22 veces, 600 otras 26 y 500 nueve. La escala de
     arriba es una RECOMENDACIÓN para lo nuevo, no una descripción de lo que
     hay. Antes de "corregir" un 700 existente, comprobar si está justificado.
   ========================================================================= */

/* ============================================================================
   1. MODO CLARO — VALORES POR DEFECTO
   ========================================================================= */
:root {
  color-scheme: light;

  /* --- Marca UBIKUA (valores oficiales) --- */
  --ubk-primary:          #336699;   /* Azul UBIKUA */
  --ubk-primary-hover:    #274f77;
  --ubk-primary-soft:     #e8f1f8;
  --ubk-primary-line:     #b9d3e6;
  --ubk-on-primary:       #ffffff;

  --ubk-secondary:        #f6bb00;   /* Amarillo UBIKUA */
  --ubk-secondary-hover:  #e0a800;
  --ubk-secondary-soft:   #fff8e0;
  --ubk-secondary-line:   #f3d97a;
  --ubk-on-secondary:     #1e293b;

  /* --- Estados: PROPUESTA de este libro, NO los de la plataforma ---
     Los reales son #28a745 (éxito), #ff9800 (atención) y #dc3545 (error).
     Ver la tabla de equivalencias de la cabecera de este fichero. --- */
  --ubk-success:          #15803d;
  --ubk-success-soft:     #e8f7ee;
  --ubk-success-line:     #a7ddb9;
  --ubk-warning:          #b45309;
  --ubk-warning-soft:     #fdf3e3;
  --ubk-warning-line:     #f0cf9a;
  --ubk-danger:           #b91c1c;
  --ubk-danger-soft:      #fdecec;
  --ubk-danger-line:      #f0b3b3;
  --ubk-info:             #0369a1;
  --ubk-info-soft:        #e6f2fa;
  --ubk-info-line:        #a9d3ea;
  --ubk-accent:           #6d28d9;   /* Violeta: asistente / análisis */
  --ubk-accent-soft:      #f2ecfd;
  --ubk-accent-line:      #cdb8f5;

  /* --- Neutros --- */
  --ubk-ink:              #0f172a;
  --ubk-text:             #1e293b;
  --ubk-text-body:        #3f4c60;
  --ubk-text-muted:       #5c6b80;
  --ubk-text-faint:       #5d6b7c;

  --ubk-bg:               #f4f6f8;   /* Fondo de la aplicación */
  --ubk-surface:          #ffffff;   /* Tarjetas y paneles */
  --ubk-surface-alt:      #f7f9fb;   /* Superficie alterna */
  --ubk-surface-sunken:   #eef1f5;   /* Superficie hundida */

  --ubk-border:           #dde3ea;
  --ubk-border-strong:    #c2cbd6;
  --ubk-border-soft:      #eef1f5;

  /* --- Superficies concretas del armazón --- */
  --ubk-header-bg:        #ffffff;
  --ubk-header-text:      #1e293b;
  --ubk-header-border:    #dde3ea;
  --ubk-sidebar-bg:       #ffffff;
  --ubk-sidebar-text:     #5c6b80;
  --ubk-sidebar-active-bg:#eef4f9;
  --ubk-footer-bg:        #1e293b;
  --ubk-footer-text:      #94a3b8;

  /* --- Foco (accesibilidad) --- */
  --ubk-focus:            #336699;
  --ubk-focus-halo:       rgba(51, 102, 153, 0.22);

  /* --- Sombra de la etiqueta de datos simulados --- */
  --ubk-shadow-color:     15, 23, 42;

  /* --- Tipografía --- */
  /* Igual que --ubk-admin-font de admin.css, literal (incluye "SF Pro Text"). */
  --ubk-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
              "Helvetica Neue", Arial, sans-serif;
  /* Token DE ESTE LIBRO, no de la plataforma. La cabecera real usa
     'Roboto', -apple-system, BlinkMacSystemFont, sans-serif (header.css) y la
     barra lateral 'Roboto Condensed', 'Roboto', sans-serif (admin.css). */
  --ubk-font-brand: "Segoe UI", Roboto, -apple-system, sans-serif;
  --ubk-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace;

  /* Pesos. ATENCIÓN: el comentario original decía "el 700, solo en versalitas y
     cifras", pero eso NO describe la plataforma. Medido en admin.css el
     29/09/2026: font-weight 700 aparece 22 veces, 600 otras 26 y 500 nueve.
     Lo de abajo es una RECOMENDACIÓN para lo nuevo, no un inventario. */
  --ubk-w-normal: 400;
  --ubk-w-medium: 500;
  --ubk-w-semi:   600;
  --ubk-w-bold:   700;

  /* --- Radios --- */
  --ubk-radius-xs: 4px;
  --ubk-radius-sm: 6px;
  --ubk-radius:    8px;
  --ubk-radius-md: 10px;
  --ubk-radius-lg: 12px;
  --ubk-radius-xl: 14px;
  --ubk-radius-pill: 999px;

  /* --- Sombras (derivan del color de sombra del tema) --- */
  --ubk-shadow-xs:  0 1px 2px rgba(var(--ubk-shadow-color), 0.04);
  --ubk-shadow-sm:  0 1px 3px rgba(var(--ubk-shadow-color), 0.07);
  --ubk-shadow:     0 2px 8px rgba(var(--ubk-shadow-color), 0.07);
  --ubk-shadow-md:  0 4px 14px rgba(var(--ubk-shadow-color), 0.07);
  --ubk-shadow-lg:  0 10px 25px rgba(var(--ubk-shadow-color), 0.11);
  --ubk-shadow-xl:  0 20px 40px rgba(var(--ubk-shadow-color), 0.16);
  --ubk-shadow-focus: 0 0 0 3px var(--ubk-focus-halo);

  /* --- Transiciones --- */
  --ubk-ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --ubk-ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ubk-t-fast:    0.15s;
  --ubk-t:         0.2s;
  --ubk-t-slow:    0.3s;

  /* --- Capas --- */
  --ubk-z-sidebar:   20;
  --ubk-z-header:    9000;
  --ubk-z-dropdown:  9001;
  --ubk-z-overlay:   9500;
  --ubk-z-floating:  9999;
  --ubk-z-modal:     99999;
  --ubk-z-modal-top: 100000;

  /* --- Métricas del armazón (móvil por defecto) --- */
  --ubk-header-h:    60px;
  --ubk-sidebar-w:   270px;
  --ubk-sidebar-w-collapsed: 72px;
  --ubk-main-pad:    16px;
  --ubk-content-max: 1240px;

  /* --- Densidad de las TABLAS (S10 · 16/10/2026) ---------------------------
     El dueño: «la tipografía es excesivamente grande: estandariza, y recuerda que nada
     está hardcodeado: se hace desde estilo y estética». El libro NO tenía un token de
     densidad de tabla: su .ubk-table-clean llevaba la letra y el relleno a mano (y tres
     veces distintas según el ancho de la pantalla, así que dos tablas no medían igual).

     Estos cuatro tokens son LA densidad de TODAS las tablas del sistema. Se aplican una
     sola vez, en assets/css/componentes.css, sobre .ubk-table-clean. Se pueden cambiar
     desde /estetica (son tokens como los demás: plataforma o cliente).
     ------------------------------------------------------------------------ */
  --ubk-tabla-fs:      0.8125rem;   /* 13px: el tamaño de la letra de una tabla de datos */
  --ubk-tabla-pad-y:   7px;         /* el aire de arriba y de abajo de cada celda */
  --ubk-tabla-pad-x:   12px;        /* el aire de los lados */
  --ubk-tabla-min:     640px;       /* lo mínimo que se enseña antes de dejar hacer scroll */

  /* --- LA LECTURA (18/10/2026) ---------------------------------------------
     El dueño: «los textos deben quedar algo más formateados y con tipografías
     más pequeñas; eso debería estar controlado desde el libro y el módulo de
     estilo». Estos tres tokens son el tamaño de los TEXTOS LARGOS (la ficha de
     un módulo, un artículo de la wiki, un acta) y del icono en su cuadrado.
     Se aplican una sola vez, en 06-lectura.css. Se pueden cambiar desde
     /estetica como los demás: plataforma o cliente, sin tocar una pantalla.
     ------------------------------------------------------------------------ */
  --ubk-lectura-size:    0.86rem;   /* 13,8px: el cuerpo de un texto largo */
  --ubk-lectura-h-size:  0.95rem;   /* 15,2px: los apartados dentro de ese texto */
  --ubk-entradilla-size: 0.93rem;   /* 14,9px: la frase que resume, debajo del título */
  --ubk-icono-cuadro:    44px;      /* el cuadrado del icono de un módulo o un documento */

  /* --- LAS PALETAS DE LA MATRIZ DE ODS (N187 · 18/10/2026) -----------------
     El dueño: «una vez portado, se deben incorporar los estilos al sistema nuevo y
     quitar lo hardcodeado». La pantalla de ODS del viejo pinta TRES paletas, y las
     tres venían a fuego en su config.php y en sus parciales (44 + 17 + 10 colores).
     Aquí se declaran UNA VEZ, como tokens, para que el CSS que se sirve no lleve ni
     un color y para que se puedan tocar desde /estetica (plataforma o cliente):

       --ubk-ods-1 … 17   Los 17 colores oficiales de los ODS. SON NORMA (paleta de
                          la ONU): no son gusto ni marca, y por eso NO cambian con el
                          tema. Se declaran como tokens porque el marcado no puede
                          llevar estilos en línea, no porque se esperen cambios.
       --ubk-oe-1 … 10    Los 10 colores de los objetivos estratégicos de la Agenda
                          Urbana Española, tal como los trae el dato del viejo
                          (ind_meta_agenda.color_hex, los 10 con dato).
       --ubk-comp-*       Los 44 colores de componente de la paleta del viejo
                          (config.php:305-350, $componentIDtoColor). El catálogo del
                          núcleo guarda el color de cada componente; esta paleta es la
                          que la pantalla PINTA, y para los 7 códigos que en el catálogo
                          son FAMILIA (C05, C07.1, C09, C11.1, C13, C14 y la familia base
                          de C07/C11) es la única fuente, porque las familias del catálogo
                          no tienen color.
     Se aplican en 04-modules.css (.ods-bg-*, .ods-color-*, .oe-bg-*, .oe-color-*,
     .comp-bg-*), no en las pantallas.
     ------------------------------------------------------------------------ */
  --ubk-ods-1:  #E5243B;  --ubk-ods-2:  #DDA63A;  --ubk-ods-3:  #4C9F38;
  --ubk-ods-4:  #C5192D;  --ubk-ods-5:  #FF3A21;  --ubk-ods-6:  #26BDE2;
  --ubk-ods-7:  #FCC30B;  --ubk-ods-8:  #A21942;  --ubk-ods-9:  #FD6925;
  --ubk-ods-10: #DD1367;  --ubk-ods-11: #FD9D24;  --ubk-ods-12: #BF8B2E;
  --ubk-ods-13: #3F7E44;  --ubk-ods-14: #0A97D9;  --ubk-ods-15: #56C02B;
  --ubk-ods-16: #00689D;  --ubk-ods-17: #19486A;

  --ubk-oe-1:  #78b943;  --ubk-oe-2:  #0067b1;  --ubk-oe-3:  #00a29a;
  --ubk-oe-4:  #5c5e60;  --ubk-oe-5:  #f18a00;  --ubk-oe-6:  #ffc400;
  --ubk-oe-7:  #e74c96;  --ubk-oe-8:  #8c8211;  --ubk-oe-9:  #e5001b;
  --ubk-oe-10: #832c7b;

  --ubk-comp-c01: #4caf50;  --ubk-comp-c01-1: #66bb6a;
  --ubk-comp-c02: #2196f3;  --ubk-comp-c02-1: #42a5f5;
  --ubk-comp-c03: #2196f3;  --ubk-comp-c03-1: #42a5f5;
  --ubk-comp-c04: #ff9800;  --ubk-comp-c04-1: #ffa726;  --ubk-comp-c04-2: #ffb74d;
  --ubk-comp-c05: #00bcd4;  --ubk-comp-c05-1: #26c6da;
  --ubk-comp-c06: #9c27b0;  --ubk-comp-c06-1: #ab47bc;
  --ubk-comp-c07: #8bc34a;  --ubk-comp-c07-1: #9ccc65;  --ubk-comp-c07-2: #aed581;  --ubk-comp-c07-3: #c5e1a5;
  --ubk-comp-c08: #fedf17;  --ubk-comp-c08-1: #ffe082;  --ubk-comp-c08-2: #ffecb3;
  --ubk-comp-c09: #A020F0;  --ubk-comp-c09-1: #ba68c8;
  --ubk-comp-c10: #ff5722;  --ubk-comp-c10-1: #ff7043;  --ubk-comp-c10-2: #ff8a65;
  --ubk-comp-c10-2-1: #ffab91;  --ubk-comp-c10-2-2: #ffccbc;  --ubk-comp-c10-2-3: #ffe0b2;
  --ubk-comp-c10-3: #ff7043;  --ubk-comp-c10-4: #ff8a65;  --ubk-comp-c10-5: #ffab91;
  --ubk-comp-c11: #795548;  --ubk-comp-c11-1: #8d6e63;  --ubk-comp-c11-2: #a1887f;  --ubk-comp-c11-3: #bcaaa4;
  --ubk-comp-c12: #607d8b;  --ubk-comp-c12-1: #78909c;  --ubk-comp-c12-2: #90a4ae;
  --ubk-comp-c13: #7c4dff;  --ubk-comp-c13-1: #9575cd;  --ubk-comp-c13-2: #b39ddb;
  --ubk-comp-c14: #03a9f4;  --ubk-comp-c14-1: #29b6f6;

  /* ------------------------------------------------------------------------
     LOS 7 ÁMBITOS TECNOLÓGICOS (18/10/2026, N187 · N189)
     Son los 7 colores de «ámbito de actuación» del viejo (ambitos_actuacion.color_hex,
     medido en producción: 7 filas, no 12). Se declaran AQUÍ, una sola vez, y se editan
     desde /estetica: el CSS del módulo NO lleva ni un hexadecimal, solo var(--ubk-ambito-N).
     ------------------------------------------------------------------------ */
  --ubk-ambito-1: #2E4057;  /* Gobernanza y Transparencia */
  --ubk-ambito-2: #4CAF50;  /* Medio Ambiente y Sostenibilidad */
  --ubk-ambito-3: #FF9800;  /* Eficiencia Energética y Agua */
  --ubk-ambito-4: #00BCD4;  /* Movilidad Inteligente */
  --ubk-ambito-5: #8BC34A;  /* Gestión de Residuos */
  --ubk-ambito-6: #E91E63;  /* Turismo y Sociedad */
  --ubk-ambito-7: #9C27B0;  /* Infraestructura de Conectividad */
}

/* ============================================================================
   2. MODO OSCURO
   =========================================================================
   Se aplica de dos formas:
     a) el usuario lo elige  -> <html data-theme="dark">
     b) el sistema lo pide y el usuario no ha elegido nada
   ========================================================================= */
:root[data-theme="dark"] { color-scheme: dark; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}

/* --- Valores del tema oscuro --- */
:root[data-theme="dark"] {
  /* Marca: el azul de marca se aclara para que se lea sobre fondo oscuro */
  --ubk-primary:          #7ab0dc;
  --ubk-primary-hover:    #9cc6e8;
  --ubk-primary-soft:     #16293a;
  --ubk-primary-line:     #2b4a66;
  --ubk-on-primary:       #0b1220;

  --ubk-secondary:        #f6bb00;
  --ubk-secondary-hover:  #ffd23f;
  --ubk-secondary-soft:   #33290a;
  --ubk-secondary-line:   #6b5610;
  --ubk-on-secondary:     #1a1400;

  --ubk-success:          #6ee7a8;
  --ubk-success-soft:     #0f2a1d;
  --ubk-success-line:     #245c3e;
  --ubk-warning:          #f0b866;
  --ubk-warning-soft:     #2e2110;
  --ubk-warning-line:     #6b4a1c;
  --ubk-danger:           #f19b9b;
  --ubk-danger-soft:      #331717;
  --ubk-danger-line:      #6e2f2f;
  --ubk-info:             #79c0e8;
  --ubk-info-soft:        #0d2738;
  --ubk-info-line:        #23506d;
  --ubk-accent:           #c4a6f7;
  --ubk-accent-soft:      #241a3b;
  --ubk-accent-line:      #4b3577;

  /* Neutros: aquí SÍ vive el azul oscuro */
  --ubk-ink:              #f1f5f9;
  --ubk-text:             #e6ecf3;
  --ubk-text-body:        #c2ccd9;
  --ubk-text-muted:       #9aa8b8;
  --ubk-text-faint:       #8b99ab;

  --ubk-bg:               #0b1220;
  --ubk-surface:          #141d2b;
  --ubk-surface-alt:      #1a2434;
  --ubk-surface-sunken:   #1f2a3c;

  --ubk-border:           #26313f;
  --ubk-border-strong:    #35434f;
  --ubk-border-soft:      #1c2634;

  --ubk-header-bg:        #141d2b;
  --ubk-header-text:      #e6ecf3;
  --ubk-header-border:    #26313f;
  --ubk-sidebar-bg:       #141d2b;
  --ubk-sidebar-text:     #9aa8b8;
  --ubk-sidebar-active-bg:#1c2a3d;
  --ubk-footer-bg:        #080e18;
  --ubk-footer-text:      #7d8b9c;

  --ubk-focus:            #7ab0dc;
  --ubk-focus-halo:       rgba(122, 176, 220, 0.3);

  --ubk-shadow-color:     0, 0, 0;
  --ubk-shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.3);
  --ubk-shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.35);
  --ubk-shadow:     0 2px 8px rgba(0, 0, 0, 0.35);
  --ubk-shadow-md:  0 4px 14px rgba(0, 0, 0, 0.35);
  --ubk-shadow-lg:  0 10px 25px rgba(0, 0, 0, 0.45);
  --ubk-shadow-xl:  0 20px 40px rgba(0, 0, 0, 0.55);
}

/* El sistema pide oscuro y el usuario no ha elegido: mismos valores */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ubk-primary:          #7ab0dc;
    --ubk-primary-hover:    #9cc6e8;
    --ubk-primary-soft:     #16293a;
    --ubk-primary-line:     #2b4a66;
    --ubk-on-primary:       #0b1220;
    --ubk-secondary-soft:   #33290a;
    --ubk-secondary-line:   #6b5610;
    --ubk-on-secondary:     #1a1400;
    --ubk-success:          #6ee7a8;
    --ubk-success-soft:     #0f2a1d;
    --ubk-success-line:     #245c3e;
    --ubk-warning:          #f0b866;
    --ubk-warning-soft:     #2e2110;
    --ubk-warning-line:     #6b4a1c;
    --ubk-danger:           #f19b9b;
    --ubk-danger-soft:      #331717;
    --ubk-danger-line:      #6e2f2f;
    --ubk-info:             #79c0e8;
    --ubk-info-soft:        #0d2738;
    --ubk-info-line:        #23506d;
    --ubk-accent:           #c4a6f7;
    --ubk-accent-soft:      #241a3b;
    --ubk-accent-line:      #4b3577;
    --ubk-ink:              #f1f5f9;
    --ubk-text:             #e6ecf3;
    --ubk-text-body:        #c2ccd9;
    --ubk-text-muted:       #9aa8b8;
    --ubk-text-faint:       #8b99ab;
    --ubk-bg:               #0b1220;
    --ubk-surface:          #141d2b;
    --ubk-surface-alt:      #1a2434;
    --ubk-surface-sunken:   #1f2a3c;
    --ubk-border:           #26313f;
    --ubk-border-strong:    #35434f;
    --ubk-border-soft:      #1c2634;
    --ubk-header-bg:        #141d2b;
    --ubk-header-text:      #e6ecf3;
    --ubk-header-border:    #26313f;
    --ubk-sidebar-bg:       #141d2b;
    --ubk-sidebar-text:     #9aa8b8;
    --ubk-sidebar-active-bg:#1c2a3d;
    --ubk-footer-bg:        #080e18;
    --ubk-footer-text:      #7d8b9c;
    --ubk-focus:            #7ab0dc;
    --ubk-focus-halo:       rgba(122, 176, 220, 0.3);
    --ubk-shadow-color:     0, 0, 0;
    --ubk-shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.3);
    --ubk-shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.35);
    --ubk-shadow:     0 2px 8px rgba(0, 0, 0, 0.35);
    --ubk-shadow-md:  0 4px 14px rgba(0, 0, 0, 0.35);
    --ubk-shadow-lg:  0 10px 25px rgba(0, 0, 0, 0.45);
    --ubk-shadow-xl:  0 20px 40px rgba(0, 0, 0, 0.55);
  }
}

/* ============================================================================
   3. RESET
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  min-height: 100vh;
  font-family: var(--ubk-font);
  font-weight: var(--ubk-w-normal);
  font-size: 16px;
  line-height: 1.55;
  background: var(--ubk-bg);
  color: var(--ubk-text-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--ubk-t) var(--ubk-ease),
              color var(--ubk-t) var(--ubk-ease);
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: var(--ubk-w-semi);   /* 600, nunca 800 */
  color: var(--ubk-text);
  line-height: 1.25;
}
p { margin: 0; }
ul, ol { margin: 0; }
img, svg { max-width: 100%; display: block; }
a { color: var(--ubk-primary); }

button, input, select, textarea { font: inherit; color: inherit; }

/* Foco visible en TODO lo interactivo, sin excepciones */
:focus-visible {
  outline: 3px solid var(--ubk-focus);
  outline-offset: 2px;
  border-radius: var(--ubk-radius-xs);
}

/* ============================================================================
   4. TIPOGRAFÍA — ESCALA
   ========================================================================= */
.ubk-display { font-size: 1.75rem; font-weight: var(--ubk-w-semi); line-height: 1.15;
               color: var(--ubk-ink); letter-spacing: -0.3px; }
.ubk-h1      { font-size: 1.35rem; font-weight: var(--ubk-w-semi); line-height: 1.2;  color: var(--ubk-text); }
.ubk-h2      { font-size: 1.15rem; font-weight: var(--ubk-w-semi); line-height: 1.25; color: var(--ubk-text); }
.ubk-h3      { font-size: 1rem;    font-weight: var(--ubk-w-semi); line-height: 1.3;  color: var(--ubk-text); }
.ubk-h4      { font-size: 0.9rem;  font-weight: var(--ubk-w-semi); line-height: 1.35; color: var(--ubk-text); }
.ubk-body    { font-size: 0.9rem;  font-weight: var(--ubk-w-normal); line-height: 1.65; color: var(--ubk-text-body); }
.ubk-body-sm { font-size: 0.83rem; font-weight: var(--ubk-w-normal); line-height: 1.6;  color: var(--ubk-text-muted); }
.ubk-caption { font-size: 0.75rem; font-weight: var(--ubk-w-medium); line-height: 1.45; color: var(--ubk-text-muted); }
.ubk-overline{ font-size: 0.7rem;  font-weight: var(--ubk-w-bold); line-height: 1.3;
               text-transform: uppercase; letter-spacing: 0.6px; color: var(--ubk-text-muted); }
.ubk-mono    { font-family: var(--ubk-font-mono); font-size: 0.8rem; letter-spacing: -0.1px; }
.ubk-text-prim { color: var(--ubk-primary); }
.ubk-text-ok   { color: var(--ubk-success); }
.ubk-text-warn { color: var(--ubk-warning); }
.ubk-text-bad  { color: var(--ubk-danger); }

.ubk-section-title {
  font-size: 1.35rem;
  font-weight: var(--ubk-w-semi);
  color: var(--ubk-primary);
  border-bottom: 3px solid var(--ubk-primary);
  padding-bottom: 10px;
  margin-bottom: 20px;
  display: inline-block;
}

/* ============================================================================
   5. UTILIDADES
   ========================================================================= */
.ubk-flex            { display: flex; }
.ubk-flex-col        { display: flex; flex-direction: column; }
.ubk-items-center    { align-items: center; }
.ubk-justify-between { justify-content: space-between; }
.ubk-wrap            { flex-wrap: wrap; }
.ubk-gap-xs { gap: 4px; }
.ubk-gap-sm { gap: 8px; }
.ubk-gap    { gap: 12px; }
.ubk-gap-md { gap: 16px; }
.ubk-gap-lg { gap: 20px; }
.ubk-mt-sm  { margin-top: 8px; }
.ubk-mt     { margin-top: 16px; }
.ubk-mt-lg  { margin-top: 24px; }
.ubk-mb-sm  { margin-bottom: 8px; }
.ubk-mb     { margin-bottom: 16px; }
.ubk-mb-lg  { margin-bottom: 24px; }
.ubk-hidden { display: none !important; }

.ubk-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Enlace de salto al contenido: visible solo al enfocarlo con el teclado */
.ubk-skip {
  position: absolute;
  left: 8px; top: -60px;
  z-index: 100001;
  background: var(--ubk-primary);
  color: var(--ubk-on-primary);
  padding: 10px 18px;
  border-radius: var(--ubk-radius);
  font-weight: var(--ubk-w-semi);
  text-decoration: none;
  transition: top var(--ubk-t) var(--ubk-ease);
}
.ubk-skip:focus { top: 8px; }

.ubk-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ubk-scroll-y { overflow-y: auto; }

.ubk-thin-scroll { scrollbar-width: thin; scrollbar-color: var(--ubk-border-strong) transparent; }
.ubk-thin-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.ubk-thin-scroll::-webkit-scrollbar-track { background: transparent; }
.ubk-thin-scroll::-webkit-scrollbar-thumb { background: var(--ubk-border-strong); border-radius: 4px; }
.ubk-thin-scroll::-webkit-scrollbar-thumb:hover { background: var(--ubk-text-faint); }
.ubk-no-scrollbar { scrollbar-width: none; }
.ubk-no-scrollbar::-webkit-scrollbar { display: none; }

/* ============================================================================
   6. MOVIMIENTO REDUCIDO
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================================
   7. MEJORAS A PARTIR DE TABLETA (min-width: mobile-first)
   ========================================================================= */
@media (min-width: 560px) {
  :root { --ubk-main-pad: 20px; }
  .ubk-display { font-size: 2rem; }
  .ubk-h1 { font-size: 1.5rem; }
}

@media (min-width: 900px) {
  :root {
    --ubk-header-h: 70px;
    --ubk-main-pad: 25px;
  }
  .ubk-display { font-size: 2.25rem; }
}

/* ============================================================================
   8. IMPRESIÓN
   ========================================================================= */
@media print {
  :root {
    --ubk-bg: #ffffff;
    --ubk-surface: #ffffff;
    --ubk-surface-alt: #ffffff;
    --ubk-text: #000000;
    --ubk-text-body: #1a1a1a;
    --ubk-text-muted: #444444;
    --ubk-border: #cccccc;
  }
  html[data-theme="dark"] {
    --ubk-bg: #ffffff; --ubk-surface: #ffffff; --ubk-surface-alt: #ffffff;
    --ubk-text: #000000; --ubk-text-body: #1a1a1a; --ubk-text-muted: #444444;
  }
  body { background: #fff; }
}

/* === 02-shell.css === */
/* ============================================================================
   UBIKUA · SISTEMA DE DISEÑO
   02 — ARMAZÓN DE LA APLICACIÓN (SHELL)
   ----------------------------------------------------------------------------
   Los elementos que envuelven TODA pantalla, en cualquier módulo.

   MOBILE-FIRST: las reglas de fuera de las media queries describen el MÓVIL.
   Los bloques `@media (min-width: …)` van AÑADIENDO el aspecto de tableta y
   de escritorio, de menor a mayor. Nunca se resta: solo se suma.

   Puntos de crecimiento:
     560px  móvil grande / móvil apaisado
     900px  tableta y escritorio: aparece la barra lateral fija

   Depende de: 01-tokens.css
   ========================================================================= */

/* ============================================================================
   1. CONTENEDOR DE LA APLICACIÓN
   ========================================================================= */
.ubk-app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--ubk-bg);
}

.ubk-shell {
  display: flex;
  flex-direction: column;          /* móvil: barra lateral arriba, contenido debajo */
  flex: 1 1 auto;
  width: 100%;
}

.ubk-main {
  flex: 1;
  min-width: 0;                    /* sin esto, el flex desborda la ventana */
  width: 100%;
  padding: var(--ubk-main-pad);
  display: flex;
  flex-direction: column;
  background: var(--ubk-bg);
  transition: background-color var(--ubk-t) var(--ubk-ease);
}

.ubk-main-public {
  flex: 1 0 auto;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: var(--ubk-main-pad);
  display: flex;
  flex-direction: column;
}

/* ============================================================================
   2. CABECERA PRINCIPAL
   ========================================================================= */
.ubk-header {
  background: var(--ubk-header-bg);
  border-bottom: 1px solid var(--ubk-header-border);
  color: var(--ubk-header-text);
  padding: 0 14px;
  height: var(--ubk-header-h);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: var(--ubk-z-header);
  flex-shrink: 0;
  width: 100%;
  transition: background-color var(--ubk-t) var(--ubk-ease),
              border-color var(--ubk-t) var(--ubk-ease);
}

.ubk-header-left,
.ubk-header-right { display: flex; align-items: center; gap: 10px; min-width: 0; }

.ubk-header-logo { display: flex; align-items: center; text-decoration: none; min-width: 0; }
.ubk-header-logo img { height: 36px; width: auto; display: block; }
.ubk-header-logo:hover img { transform: scale(1.02); }

.ubk-brand {
  display: flex; align-items: center; gap: 9px;
  font-weight: var(--ubk-w-semi); color: var(--ubk-primary);
  font-size: 1rem; text-decoration: none; white-space: nowrap;
}
.ubk-brand-mark {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  background: var(--ubk-primary); color: var(--ubk-on-primary);
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--ubk-w-bold); font-size: 0.85rem;
}

.ubk-sidebar-toggle,
.ubk-hamburger {
  background: none; border: 1px solid transparent;
  color: var(--ubk-text-body); cursor: pointer;
  width: 40px; height: 40px; border-radius: var(--ubk-radius);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.1rem; flex-shrink: 0;
  transition: background-color var(--ubk-t) var(--ubk-ease), color var(--ubk-t) var(--ubk-ease);
}
.ubk-sidebar-toggle:hover,
.ubk-hamburger:hover { background: var(--ubk-surface-sunken); color: var(--ubk-primary); }

/* Menú desplegable: en móvil ocupa el ancho; en escritorio se ancla a la derecha */
.ubk-hamburger-menu {
  position: absolute;
  top: var(--ubk-header-h);
  left: 0; right: 0;
  background: var(--ubk-surface);
  border-bottom: 1px solid var(--ubk-border);
  box-shadow: var(--ubk-shadow-lg);
  opacity: 0; visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--ubk-t) var(--ubk-ease),
              transform var(--ubk-t) var(--ubk-ease),
              visibility var(--ubk-t);
  z-index: var(--ubk-z-dropdown);
  padding: 8px 0;
}
.ubk-hamburger-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.ubk-hamburger-menu a {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px; min-height: 44px;
  color: var(--ubk-text-body); text-decoration: none;
  font-size: 0.92rem; font-weight: var(--ubk-w-medium);
}
.ubk-hamburger-menu a:hover { background: var(--ubk-surface-alt); color: var(--ubk-primary); }
.ubk-hamburger-menu a i { width: 20px; text-align: center; color: var(--ubk-text-muted); }
.ubk-menu-divider { height: 1px; background: var(--ubk-border); margin: 6px 0; border: 0; }

/* ============================================================================
   3. MENÚ DE USUARIO
   ========================================================================= */
.ubk-user { position: relative; }

.ubk-user-trigger {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; background: none; border: 1px solid transparent;
  border-radius: var(--ubk-radius-pill); padding: 3px;
  transition: border-color var(--ubk-t) var(--ubk-ease);
}
.ubk-user-trigger:hover { border-color: var(--ubk-border-strong); }

.ubk-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--ubk-secondary); color: var(--ubk-on-secondary);
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--ubk-w-bold); font-size: 0.95rem;
  flex-shrink: 0; user-select: none;
  border: 2px solid transparent;
  transition: border-color var(--ubk-t) var(--ubk-ease);
}
.ubk-user-trigger:hover .ubk-avatar { border-color: var(--ubk-primary); }
.ubk-avatar--primary { background: var(--ubk-primary); color: var(--ubk-on-primary); }
.ubk-avatar--success { background: var(--ubk-success); color: var(--ubk-on-primary); }
.ubk-avatar--info    { background: var(--ubk-info);    color: var(--ubk-on-primary); }
.ubk-avatar--accent  { background: var(--ubk-accent);  color: var(--ubk-on-primary); }
.ubk-avatar--sm { width: 30px; height: 30px; font-size: 0.8rem; }
.ubk-avatar--lg { width: 52px; height: 52px; font-size: 1.25rem; }

.ubk-user-info { display: none; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.ubk-user-name {
  font-weight: var(--ubk-w-semi); font-size: 0.9rem; color: var(--ubk-text);
  max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ubk-user-role {
  font-size: 0.75rem; color: var(--ubk-text-muted);
  max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.ubk-user-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: var(--ubk-surface);
  min-width: 250px;
  border: 1px solid var(--ubk-border);
  border-radius: var(--ubk-radius-lg);
  box-shadow: var(--ubk-shadow-lg);
  overflow: hidden;
  z-index: var(--ubk-z-dropdown);
}
.ubk-user.is-open .ubk-user-menu { display: block; }
.ubk-user-menu-head { padding: 14px 18px; background: var(--ubk-surface-alt); border-bottom: 1px solid var(--ubk-border); }
.ubk-user-menu-name { display: block; font-weight: var(--ubk-w-semi); color: var(--ubk-text); font-size: 0.92rem; }
.ubk-user-menu-role { display: block; font-size: 0.78rem; color: var(--ubk-text-muted); margin-top: 2px; }
.ubk-user-menu a {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px; min-height: 44px;
  color: var(--ubk-text-body); text-decoration: none; font-size: 0.9rem;
}
.ubk-user-menu a i { color: var(--ubk-text-muted); width: 18px; text-align: center; }
.ubk-user-menu a:hover { background: var(--ubk-surface-alt); color: var(--ubk-primary); }
.ubk-user-menu a:hover i { color: var(--ubk-primary); }
.ubk-user-menu a.is-danger:hover { color: var(--ubk-danger); background: var(--ubk-danger-soft); }
.ubk-user-menu a.is-danger:hover i { color: var(--ubk-danger); }
.ubk-user-menu hr { margin: 4px 0; border: 0; border-top: 1px solid var(--ubk-border); }

/* ============================================================================
   4. BARRA LATERAL
   =========================================================================
   MÓVIL: es un bloque más, encima del contenido, con su propia altura máxima.
   ESCRITORIO (>=900px): columna fija a la izquierda con scroll propio.
   ========================================================================= */
.ubk-sidebar {
  background: var(--ubk-sidebar-bg);
  border-bottom: 1px solid var(--ubk-border);
  display: flex;
  flex-direction: column;
  width: 100%;
  transition: background-color var(--ubk-t) var(--ubk-ease);
}

.ubk-nav { padding: 8px 0; display: flex; flex-direction: column; }

.ubk-nav a {
  display: flex; align-items: center;
  padding: 11px 18px;
  min-height: 44px;                       /* área táctil cómoda */
  color: var(--ubk-sidebar-text);
  text-decoration: none;
  font-weight: var(--ubk-w-medium); font-size: 0.88rem;
  border-left: 4px solid transparent;
  transition: background-color var(--ubk-t-fast) var(--ubk-ease),
              color var(--ubk-t-fast) var(--ubk-ease);
}
.ubk-nav a i { min-width: 26px; text-align: center; font-size: 1rem; color: var(--ubk-text-faint); flex-shrink: 0; }
.ubk-nav a:hover { background: var(--ubk-surface-alt); color: var(--ubk-primary); }
.ubk-nav a.is-active,
.ubk-nav a[aria-current="page"] {
  background: var(--ubk-sidebar-active-bg);
  color: var(--ubk-primary);
  border-left-color: var(--ubk-primary);
  font-weight: var(--ubk-w-semi);
}
.ubk-nav a.is-active i,
.ubk-nav a[aria-current="page"] i { color: var(--ubk-primary); }
.ubk-nav-text { display: inline-flex; align-items: center; }

/* Distintivos de madurez */
.ubk-badge-dev, .ubk-badge-prepro, .ubk-badge-beta, .ubk-badge-alfa, .ubk-badge-prod {
  font-size: 0.62rem; padding: 2px 6px; border-radius: var(--ubk-radius-xs);
  margin-left: 8px; font-weight: var(--ubk-w-bold); letter-spacing: 0.4px;
  line-height: 1.4; white-space: nowrap;
}
.ubk-badge-prod   { background: var(--ubk-success-soft); color: var(--ubk-success); border: 1px solid var(--ubk-success-line); }
.ubk-badge-prepro { background: var(--ubk-info-soft);    color: var(--ubk-info);    border: 1px solid var(--ubk-info-line); }
.ubk-badge-beta   { background: var(--ubk-secondary-soft); color: var(--ubk-warning); border: 1px solid var(--ubk-secondary-line); }
.ubk-badge-alfa   { background: var(--ubk-warning-soft); color: var(--ubk-warning); border: 1px solid var(--ubk-warning-line); }
.ubk-badge-dev    { background: var(--ubk-danger-soft);  color: var(--ubk-danger);  border: 1px solid var(--ubk-danger-line); }

.ubk-sidebar-foot {
  padding: 12px 18px;
  border-top: 1px solid var(--ubk-border);
  background: var(--ubk-surface-alt);
  display: flex;
}
.ubk-sidebar-foot a {
  display: flex; align-items: center; gap: 10px; min-height: 40px;
  color: var(--ubk-primary); text-decoration: none;
  font-size: 0.86rem; font-weight: var(--ubk-w-semi);
}

/* ============================================================================
   5. PIE
   ========================================================================= */
.ubk-footer {
  text-align: center;
  padding: 14px var(--ubk-main-pad);
  background: var(--ubk-footer-bg);
  color: var(--ubk-footer-text);
  font-size: 0.83rem;
  flex-shrink: 0;
}
.ubk-footer-actions { margin-bottom: 8px; }
.ubk-footer.is-quiet { background: transparent; color: var(--ubk-text-faint); border-top: 1px solid var(--ubk-border); padding: 8px; }
.ubk-footer.is-quiet .ubk-footer-actions { display: none; }

/* ============================================================================
   6. ASISTENTE FLOTANTE
   ========================================================================= */
.ubk-assistant-toggle {
  position: fixed; bottom: 18px; right: 18px;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--ubk-primary); color: var(--ubk-on-primary);
  border: none; font-size: 1.4rem; cursor: pointer;
  box-shadow: var(--ubk-shadow-lg);
  z-index: var(--ubk-z-floating);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--ubk-t) var(--ubk-ease);
}
.ubk-assistant-toggle:hover { transform: scale(1.06); }

.ubk-assistant {
  position: fixed;
  bottom: 80px; right: 12px; left: 12px;
  width: auto;
  max-height: calc(100vh - 110px);
  background: var(--ubk-surface);
  border: 1px solid var(--ubk-border);
  border-radius: var(--ubk-radius-lg);
  box-shadow: var(--ubk-shadow-xl);
  z-index: 9998;
  display: none; flex-direction: column; overflow: hidden;
}
.ubk-assistant.is-open { display: flex; }
.ubk-assistant-head {
  background: var(--ubk-surface-alt);
  border-bottom: 1px solid var(--ubk-border);
  color: var(--ubk-text);
  padding: 12px 14px;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.ubk-assistant-head h4 { margin: 0; font-size: 1rem; font-weight: var(--ubk-w-semi); display: flex; align-items: center; gap: 8px; color: var(--ubk-text); }
.ubk-assistant-close {
  background: none; border: none; color: var(--ubk-text-muted); cursor: pointer;
  width: 36px; height: 36px; border-radius: var(--ubk-radius); font-size: 1rem;
}
.ubk-assistant-close:hover { background: var(--ubk-surface-sunken); color: var(--ubk-text); }
.ubk-assistant-body { padding: 14px; overflow-y: auto; background: var(--ubk-surface-alt); font-size: 0.88rem; }
.ubk-assistant-msg { padding: 10px 12px; border-radius: var(--ubk-radius); margin-bottom: 10px; max-width: 90%; line-height: 1.5; }
.ubk-assistant-msg.is-bot  { background: var(--ubk-surface); border: 1px solid var(--ubk-border); border-bottom-left-radius: 2px; color: var(--ubk-text-body); }
.ubk-assistant-msg.is-user { background: var(--ubk-primary); color: var(--ubk-on-primary); margin-left: auto; border-bottom-right-radius: 2px; }
.ubk-assistant-chips { padding: 10px 14px; display: flex; flex-wrap: wrap; gap: 6px; background: var(--ubk-surface); border-top: 1px solid var(--ubk-border); }
.ubk-assistant-chip {
  font-size: 0.76rem; background: var(--ubk-info-soft); color: var(--ubk-info);
  padding: 7px 12px; border-radius: var(--ubk-radius-pill); cursor: pointer;
  border: 1px solid var(--ubk-info-line); font-weight: var(--ubk-w-medium);
}
.ubk-assistant-chip:hover { background: var(--ubk-surface-sunken); }
.ubk-assistant-input { display: flex; gap: 8px; padding: 10px; background: var(--ubk-surface); border-top: 1px solid var(--ubk-border); }
.ubk-assistant-input input {
  flex: 1; min-width: 0; border: 1px solid var(--ubk-border-strong);
  border-radius: var(--ubk-radius-pill); padding: 9px 15px;
  background: var(--ubk-surface); color: var(--ubk-text); outline: none;
}
.ubk-assistant-input input:focus-visible { border-color: var(--ubk-primary); box-shadow: var(--ubk-shadow-focus); }
.ubk-assistant-input button {
  background: none; border: none; color: var(--ubk-primary); font-size: 1.15rem;
  cursor: pointer; width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
}
.ubk-assistant-input button:hover { background: var(--ubk-surface-sunken); }

/* ============================================================================
   7. CABECERA DE PÁGINA
   ========================================================================= */
.ubk-page-header {
  display: flex;
  flex-direction: column;            /* móvil: título y acciones apilados */
  align-items: flex-start;
  gap: 14px;
  margin-bottom: var(--ubk-main-pad);
}
.ubk-page-title {
  margin: 0; color: var(--ubk-text);
  font-size: 1.2rem; font-weight: var(--ubk-w-semi);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.ubk-page-title i { color: var(--ubk-primary); }
.ubk-page-subtitle { color: var(--ubk-text-muted); font-size: 0.86rem; margin-top: 5px; }
.ubk-page-actions { display: flex; gap: 8px; flex-wrap: wrap; width: 100%; }

/* ============================================================================
   8. BOTONES DE AYUDA
   ========================================================================= */
.ubk-help-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; min-height: 40px;
  border-radius: var(--ubk-radius-pill);
  font-size: 0.84rem; font-weight: var(--ubk-w-semi);
  cursor: pointer; border: 1px solid transparent;
}
.ubk-help-pill.is-green  { background: var(--ubk-success-soft); color: var(--ubk-success); border-color: var(--ubk-success-line); }
.ubk-help-pill.is-green:hover { background: var(--ubk-surface-sunken); }
.ubk-help-pill.is-yellow { background: var(--ubk-secondary); color: var(--ubk-on-secondary); }
.ubk-help-pill.is-yellow:hover { background: var(--ubk-secondary-hover); }

.ubk-acc { background: var(--ubk-surface); border: 1px solid var(--ubk-border); border-radius: var(--ubk-radius-md); margin-bottom: 8px; overflow: hidden; }
.ubk-acc-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; min-height: 48px; cursor: pointer;
  background: var(--ubk-surface-alt); border: none; width: 100%; text-align: left;
  color: var(--ubk-text);
}
.ubk-acc-head:hover { background: var(--ubk-surface-sunken); }
.ubk-acc-head b { font-size: 0.88rem; font-weight: var(--ubk-w-semi); color: var(--ubk-text); }
.ubk-acc-head i { color: var(--ubk-text-faint); font-size: 0.8rem; transition: transform var(--ubk-t) var(--ubk-ease); }
.ubk-acc.is-open .ubk-acc-head i { transform: rotate(180deg); }
.ubk-acc-body { display: none; padding: 0 14px 14px; font-size: 0.85rem; color: var(--ubk-text-body); line-height: 1.65; }
.ubk-acc.is-open .ubk-acc-body { display: block; }

.ubk-pillars { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 8px 0; }
.ubk-pillar { padding: 11px 13px; border-radius: var(--ubk-radius-sm); border: 1px solid var(--ubk-border); font-size: 0.8rem; }
.ubk-pillar h4 { margin: 0 0 5px; font-size: 0.82rem; font-weight: var(--ubk-w-semi); }
.ubk-pillar p { margin: 0; }
.ubk-pillar--1 { background: var(--ubk-info-soft);    border-left: 4px solid var(--ubk-info); }
.ubk-pillar--2 { background: var(--ubk-secondary-soft); border-left: 4px solid var(--ubk-secondary); }
.ubk-pillar--3 { background: var(--ubk-success-soft); border-left: 4px solid var(--ubk-success); }

/* ============================================================================
   9. BARRA DE FILTROS DE CABECERA
   ========================================================================= */
.ubk-filter-bar {
  background: var(--ubk-surface);
  border: 1px solid var(--ubk-border);
  padding: 14px;
  border-radius: var(--ubk-radius);
  box-shadow: var(--ubk-shadow-sm);
  display: flex; flex-direction: column;
  gap: 12px;
  margin-bottom: var(--ubk-main-pad);
}
.ubk-filter-bar > * { width: 100%; }

/* ============================================================================
   10. CABECERA DE FICHA
   ========================================================================= */
.ubk-detail-header {
  display: flex; flex-direction: column; gap: 14px;
  margin-bottom: 20px; background: var(--ubk-surface);
  border: 1px solid var(--ubk-border);
  padding: 16px; border-radius: var(--ubk-radius); box-shadow: var(--ubk-shadow-sm);
}
.ubk-detail-title-group { display: flex; align-items: flex-start; gap: 12px; }
.ubk-detail-title-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ubk-detail-title-text h1,
.ubk-detail-title-text h2 { margin: 0; line-height: 1.25; color: var(--ubk-text); }
.ubk-detail-title-text h1 { font-size: 1.15rem; font-weight: var(--ubk-w-semi); }
.ubk-detail-title-text h2 { font-size: 1.05rem; font-weight: var(--ubk-w-semi); }
.ubk-detail-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 0.78rem; color: var(--ubk-text-muted); }

/* Migas de pan */
.ubk-breadcrumb { display: flex; flex-wrap: wrap; gap: 6px; font-size: 0.78rem; align-items: center; }
.ubk-crumb { color: var(--ubk-primary); text-decoration: none; font-weight: var(--ubk-w-medium); }
.ubk-crumb:hover { text-decoration: underline; }
.ubk-crumb.is-current { color: var(--ubk-text-muted); font-weight: var(--ubk-w-medium); }
.ubk-crumb-sep { color: var(--ubk-text-faint); }

/* ============================================================================
   11. CRECIMIENTO A TABLETA Y ESCRITORIO
   ========================================================================= */

/* --- Móvil grande / apaisado --- */
@media (min-width: 560px) {
  .ubk-header { padding: 0 18px; }
  .ubk-user-info { display: flex; }
  .ubk-page-header { flex-direction: row; align-items: center; justify-content: space-between; }
  .ubk-page-actions { width: auto; }
  .ubk-filter-bar { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .ubk-filter-bar > * { width: auto; }
  .ubk-pillars { grid-template-columns: 1fr 1fr; }
  .ubk-detail-header { flex-direction: row; align-items: center; justify-content: space-between; }
  .ubk-assistant { left: auto; right: 18px; width: 360px; }
}

/* --- Tableta y escritorio: aparece la barra lateral fija --- */
@media (min-width: 900px) {
  .ubk-shell {
    flex-direction: row;
    overflow: hidden;
  }
  .ubk-sidebar {
    width: var(--ubk-sidebar-w);
    flex: 0 0 var(--ubk-sidebar-w);
    border-bottom: none;
    border-right: 1px solid var(--ubk-border);
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100vh - var(--ubk-header-h));
    position: sticky;
    top: var(--ubk-header-h);
    z-index: var(--ubk-z-sidebar);
    transition: width var(--ubk-t-slow) var(--ubk-ease),
                background-color var(--ubk-t) var(--ubk-ease);
  }
  .ubk-main { overflow-y: auto; max-height: calc(100vh - var(--ubk-header-h)); }
  .ubk-header-logo img { height: 42px; }

  /* Barra lateral plegada */
  .ubk-shell.is-collapsed .ubk-sidebar { width: var(--ubk-sidebar-w-collapsed); flex: 0 0 var(--ubk-sidebar-w-collapsed); }
  .ubk-shell.is-collapsed .ubk-nav-text,
  .ubk-shell.is-collapsed .ubk-sidebar-foot span { display: none; }
  .ubk-shell.is-collapsed .ubk-nav a { justify-content: center; padding: 13px 0; }
  .ubk-shell.is-collapsed .ubk-nav a i { margin-right: 0; min-width: unset; font-size: 1.15rem; }
  .ubk-shell.is-collapsed .ubk-sidebar-foot { justify-content: center; padding: 12px 0; }
  .ubk-shell.is-collapsed .ubk-sidebar-foot a { justify-content: center; padding: 0; gap: 0; }

  /* En escritorio el menú de hamburguesa no se usa: manda la barra lateral */
  .ubk-hamburger-menu { left: auto; right: 18px; min-width: 240px; border-radius: 0 0 var(--ubk-radius-lg) var(--ubk-radius-lg); border: 1px solid var(--ubk-border); }
}

@media (min-width: 1200px) {
  .ubk-main { padding: 28px 32px; }
}

/* ============================================================================
   12. IMPRESIÓN
   ========================================================================= */
@media print {
  .ubk-header, .ubk-footer, .ubk-sidebar,
  .ubk-assistant, .ubk-assistant-toggle,
  .ubk-page-actions { display: none !important; }
  .ubk-main { padding: 0; max-height: none; overflow: visible; }
  .ubk-shell { display: block; }
}

/* === 03-components.css === */
/* ============================================================================
   CONVERTIDO A MOBILE-FIRST automáticamente
   ----------------------------------------------------------------------------
   La base describe el MÓVIL. El aspecto de tableta y escritorio se AÑADE con
   bloques @media (min-width: …), de menor a mayor. Los valores son los mismos
   que en el fichero original: solo cambia el orden y el sentido de las consultas.
   ========================================================================= */

/* ============================================================================
   UBIKUA · SISTEMA DE DISEÑO
   03 — COMPONENTES COMUNES
   ----------------------------------------------------------------------------
   Todo lo que se repite en cualquier módulo:
     · Botones y grupos de botones
     · Tarjetas (KPI, contenido, glass y de lista)
     · Tablas, ordenación, agrupación, selección y acciones de fila
     · Paginación · Píldoras y filtros · Insignias y etiquetas
     · Pestañas · Modales · Formularios · Alertas y avisos
     · Gráficos · Estados vacíos · Etiquetas especiales
   Depende de: 01-tokens.css
   ========================================================================= */

/* ============================================================================
   1. BOTONES
   ========================================================================= */
.ubk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 20px;
  border-radius: var(--ubk-radius);
  font-family: inherit;
  font-weight: 600; font-size: 0.85rem;
  cursor: pointer; border: none;
  transition: all var(--ubk-t);
  text-decoration: none;
  white-space: nowrap;
}
.ubk-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.ubk-btn--primary   { background: var(--ubk-primary); color: var(--ubk-on-primary); }
.ubk-btn--primary:hover:not(:disabled) {
  filter: brightness(0.9);
  box-shadow: 0 4px 10px rgba(51, 102, 153, 0.3);
  transform: translateY(-1px);
}
.ubk-btn--secondary { background: var(--ubk-surface); color: var(--ubk-text-body); border: 1px solid var(--ubk-border-strong); }
.ubk-btn--secondary:hover:not(:disabled) { background: var(--ubk-surface-alt); color: var(--ubk-primary); border-color: var(--ubk-primary); }
.ubk-btn--success   { background: var(--ubk-success); color: var(--ubk-on-primary); }
.ubk-btn--success:hover:not(:disabled)   { filter: brightness(0.9); }
.ubk-btn--danger    { background: var(--ubk-danger); color: var(--ubk-on-primary); }
.ubk-btn--danger:hover:not(:disabled)    { filter: brightness(0.9); }
.ubk-btn--warning   { background: var(--ubk-secondary); color: var(--ubk-on-secondary); }
.ubk-btn--warning:hover:not(:disabled)   { background: var(--ubk-secondary-hover); }
.ubk-btn--ghost     { background: transparent; color: var(--ubk-primary); }
.ubk-btn--ghost:hover:not(:disabled)     { background: var(--ubk-info-soft); }
.ubk-btn--accent    { background: linear-gradient(135deg, var(--ubk-accent), #4f46e5); color: var(--ubk-on-primary); }
.ubk-btn--accent:hover:not(:disabled)    { opacity: 0.92; box-shadow: 0 4px 12px rgba(124, 58, 237, 0.35); }

.ubk-btn--sm { padding: 6px 12px; font-size: 0.78rem; border-radius: var(--ubk-radius-sm); }
.ubk-btn--lg { padding: 13px 26px; font-size: 0.95rem; border-radius: var(--ubk-radius-md); }
.ubk-btn--block { width: 100%; }

/* Grupo de botones */
.ubk-btn-group { display: inline-flex; gap: 8px; flex-wrap: wrap; }

/* Botón de icono cuadrado */
.ubk-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: var(--ubk-radius);
  color: #fff; border: none; cursor: pointer;
  font-size: 1rem;
  transition: transform var(--ubk-t), box-shadow var(--ubk-t), opacity var(--ubk-t);
}
.ubk-icon-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); }
.ubk-icon-btn--primary { background: var(--ubk-primary); }
.ubk-icon-btn--warning { background: var(--ubk-secondary); color: var(--ubk-text); }
.ubk-icon-btn--danger  { background: var(--ubk-danger); }
.ubk-icon-btn--success { background: var(--ubk-success); }
.ubk-icon-btn--info    { background: #3b82f6; }
.ubk-icon-btn--sm { width: 30px; height: 30px; font-size: 0.85rem; }

/* Botón de acción compacto con texto (filas de tabla) */
.ubk-action-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border: none; border-radius: 5px;
  font-size: 0.72rem; font-weight: 600; cursor: pointer;
  color: #fff; text-decoration: none;
  transition: var(--ubk-t);
}
.ubk-action-btn:hover { opacity: 0.85; transform: translateY(-1px); }
.ubk-action-btn--view   { background: var(--ubk-primary); color: var(--ubk-on-primary); }
.ubk-action-btn--edit   { background: #b45309; }
.ubk-action-btn--delete { background: var(--ubk-danger); color: var(--ubk-on-primary); }
.ubk-action-btn--play   { background: var(--ubk-success); color: var(--ubk-on-primary); }
.ubk-action-btn--info   { background: #0e7490; }

/* Botones de exportación */
.ubk-export-btn {
  padding: 6px 12px; border-radius: var(--ubk-radius-sm); border: none; cursor: pointer;
  font-size: 0.75rem; font-weight: 600; transition: all var(--ubk-t);
  display: inline-flex; align-items: center; gap: 5px; color: #fff;
  font-family: inherit;
}
.ubk-export-btn:hover:not(:disabled) { opacity: 0.9; transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); }
.ubk-export-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.ubk-export--pdf    { background: #b91c1c; }
.ubk-export--word   { background: #2563eb; }
.ubk-export--excel  { background: #047857; }
.ubk-export--csv    { background: #f59e0b; color: #1e293b; }
.ubk-export--print  { background: #4f46e5; }
.ubk-export--delete { background: #e11d48; }
.ubk-export--delete:hover:not(:disabled) { background: #be123c; }

/* ============================================================================
   2. TARJETAS
   ========================================================================= */

/* --- 2.1 Tarjeta KPI horizontal (icono en círculo) --- */
.ubk-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.ubk-kpi {
  background: var(--ubk-surface);
  border-radius: var(--ubk-radius-md);
  padding: 16px 18px;
  box-shadow: var(--ubk-shadow-sm);
  border: 1px solid var(--ubk-border);
  display: flex; align-items: center; gap: 14px;
  cursor: pointer;
  transition: all var(--ubk-t);
}
.ubk-kpi:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }
.ubk-kpi-icon {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ubk-kpi-icon i { font-size: 1.2rem; }
.ubk-kpi-body { flex: 1; min-width: 0; }
.ubk-kpi-label {
  font-size: 0.7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--ubk-text-muted);
}
.ubk-kpi-value { font-size: 1.5rem; font-weight: 700; color: var(--ubk-text); line-height: 1.2; }

/* --- 2.2 Tarjeta KPI vertical (barra de color a la izquierda) --- */
.ubk-stat {
  background: var(--ubk-surface);
  border: 1px solid var(--ubk-border);
  border-left: 4px solid var(--ubk-primary);
  border-radius: var(--ubk-radius-md);
  padding: 14px 16px;
}
.ubk-stat b { display: block; font-size: 1.35rem; font-weight: 700; color: var(--ubk-text); }
.ubk-stat small {
  color: var(--ubk-text-muted); font-size: 0.72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.3px;
}
.ubk-stat--ok   { border-left-color: var(--ubk-success); } .ubk-stat--ok b   { color: var(--ubk-success); }
.ubk-stat--bad  { border-left-color: var(--ubk-danger);  } .ubk-stat--bad b  { color: var(--ubk-danger); }
.ubk-stat--warn { border-left-color: var(--ubk-secondary); } .ubk-stat--warn b { color: #b45309; }
.ubk-stat--info { border-left-color: var(--ubk-primary); } .ubk-stat--info b { color: var(--ubk-primary); }

/* Variante centrada (detalle) */
.ubk-stat--center { background: var(--ubk-surface-alt); border-left: 1px solid var(--ubk-border); border-radius: var(--ubk-radius); padding: 10px; text-align: center; }
.ubk-stat--center b { font-size: 1.3rem; }
.ubk-stat--center.ok b  { color: var(--ubk-success); }
.ubk-stat--center.bad b { color: var(--ubk-danger); }

/* --- 2.3 Tarjeta glass --- */
.ubk-glass {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 20px;
  transition: transform var(--ubk-t-slow) ease, box-shadow var(--ubk-t-slow) ease;
}
.ubk-glass:hover { transform: translateY(-2px); box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.1); }
.ubk-glass-title {
  font-size: 1.1rem; font-weight: 700; color: var(--ubk-primary);
  margin: 0 0 15px; display: flex; align-items: center; gap: 10px;
}

/* --- 2.4 Tarjeta de contenido --- */
.ubk-card {
  background: var(--ubk-surface);
  border: 1px solid var(--ubk-border);
  border-radius: var(--ubk-radius-lg);
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: var(--ubk-shadow-xs);
}
.ubk-card > h3 {
  margin: 0 0 12px; font-size: 0.95rem; font-weight: 600;
  color: var(--ubk-text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.ubk-card-count {
  font-weight: 600; color: var(--ubk-text-muted); font-size: 0.75rem;
  background: var(--ubk-surface-sunken); border-radius: var(--ubk-radius-pill); padding: 2px 9px;
}
.ubk-card--flat { box-shadow: none; }
.ubk-card--sunken { background: var(--ubk-surface-alt); }

/* --- 2.5 Tarjeta de dashboard con gráfico --- */
.ubk-dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}
.ubk-dash-card {
  background: var(--ubk-surface);
  border-radius: var(--ubk-radius-md);
  padding: 18px 20px;
  border: 1px solid var(--ubk-border);
  box-shadow: var(--ubk-shadow-xs);
}
.ubk-dash-card h4 {
  font-size: 0.85rem; color: var(--ubk-text-muted);
  margin: 0 0 12px; display: flex; align-items: center; gap: 8px;
}

/* --- 2.6 Tarjeta de lista / registro --- */
.ubk-record-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 20px;
  padding: 10px 0;
}
.ubk-record {
  background: var(--ubk-surface);
  border-radius: var(--ubk-radius-lg);
  border: 1px solid var(--ubk-border);
  overflow: hidden;
  box-shadow: var(--ubk-shadow-md);
  display: flex; flex-direction: column;
  position: relative;
  transition: all 0.25s ease-in-out;
}
.ubk-record:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1); border-color: var(--ubk-text-faint); }

/* Filete superior de estado */
.ubk-record--ok      { border-top: 4px solid var(--ubk-success); }
.ubk-record--warn    { border-top: 4px solid #f59e0b; }
.ubk-record--bad     { border-top: 4px solid #ef4444; }
.ubk-record--neutral { border-top: 4px solid #6b7280; }

.ubk-record-media {
  width: 100%; height: 190px; background: var(--ubk-border);
  position: relative; cursor: pointer; overflow: hidden;
}
.ubk-record-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--ubk-t-slow) var(--ubk-ease); }
.ubk-record:hover .ubk-record-media img { transform: scale(1.05); }
.ubk-record-media .ubk-noimg {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 3rem; color: rgba(255, 255, 255, 0.4);
}
.ubk-record-id-overlay {
  position: absolute; top: 12px; left: 12px;
  background: rgba(0, 0, 0, 0.8); color: #fff;
  padding: 6px 14px; border-radius: 20px;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.5px;
  backdrop-filter: blur(8px); z-index: 2;
}
.ubk-record-check {
  position: absolute; top: 10px; right: 10px; z-index: 10;
  background: rgba(255, 255, 255, 0.9); padding: 4px 8px;
  border-radius: var(--ubk-radius-sm); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); cursor: pointer;
}
.ubk-record-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px 6px; }
.ubk-record-title { margin: 4px 18px; font-size: 1.05rem; font-weight: 700; color: var(--ubk-text); line-height: 1.3; }
.ubk-record-sub {
  margin: 0 18px; font-size: 0.85rem; color: var(--ubk-text-muted);
  font-weight: 500; display: flex; gap: 4px; flex-wrap: wrap;
}
.ubk-record-line { margin: 10px 18px; font-size: 0.82rem; color: var(--ubk-text-muted); display: flex; gap: 6px; line-height: 1.4; }
.ubk-record-line i { color: var(--ubk-text-faint); font-size: 0.85rem; flex-shrink: 0; }
.ubk-record-desc {
  margin: 0 18px 12px; padding: 10px 14px;
  background: var(--ubk-surface-alt); border-radius: var(--ubk-radius); border: 1px solid var(--ubk-border-soft);
}
.ubk-record-desc p {
  margin: 0; font-size: 0.78rem; color: var(--ubk-text-muted); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ubk-record-coords {
  background: var(--ubk-surface-alt); margin: 0 18px 12px; padding: 8px 12px;
  border-radius: var(--ubk-radius); font-size: 0.75rem; color: var(--ubk-text-muted);
  display: flex; gap: 6px; font-family: var(--ubk-font-mono); border: 1px solid var(--ubk-border);
}
.ubk-record-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 18px; margin-top: auto;
  border-top: 1px solid var(--ubk-border-soft); background: #fafbfc;
}
.ubk-record-foot small { font-size: 0.78rem; color: var(--ubk-text-faint); font-weight: 500; display: flex; gap: 4px; }
.ubk-record-actions { display: flex; gap: 6px; }

/* Separador de grupo dentro de una rejilla de tarjetas */
.ubk-grid-separator {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, var(--ubk-text), var(--ubk-text-body));
  color: var(--ubk-on-primary); padding: 14px 24px; border-radius: var(--ubk-radius-md);
  font-weight: 700; font-size: 0.95rem;
  display: flex; align-items: center; gap: 12px;
  margin: 10px 0 5px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.ubk-grid-separator i { color: #fbbf24; font-size: 1.2rem; }

/* --- 2.7 Tarjeta de familia (selector visual) --- */
.ubk-tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 15px; margin-top: 10px; }
.ubk-tile {
  background: var(--ubk-surface); border: 1px solid var(--ubk-border);
  border-radius: var(--ubk-radius-md); padding: 15px; text-align: center;
  cursor: pointer; transition: all var(--ubk-t);
}
.ubk-tile:hover { border-color: var(--ubk-primary); transform: translateY(-3px); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); }
.ubk-tile.is-active { background: var(--ubk-primary); border-color: var(--ubk-primary); color: var(--ubk-on-primary); }
.ubk-tile-icon { font-size: 1.8rem; margin-bottom: 8px; color: var(--ubk-primary); }
.ubk-tile.is-active .ubk-tile-icon { color: var(--ubk-on-primary); }
.ubk-tile span { font-size: 0.85rem; font-weight: 600; }

/* Tarjeta de opción con filete superior */
.ubk-option-row { display: flex; justify-content: flex-start; gap: 15px; flex-wrap: wrap; }
.ubk-option {
  background: var(--ubk-surface); width: 140px; padding: 15px 10px;
  border-radius: var(--ubk-radius); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border-top: 4px solid var(--ubk-primary);
  transition: all var(--ubk-t) ease; text-align: center;
  display: flex; flex-direction: column; align-items: center; cursor: pointer;
}
.ubk-option:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
.ubk-option.is-active { background: var(--ubk-surface-alt); border-color: #3b82f6; box-shadow: 0 0 0 2px #3b82f6; }
.ubk-option .icon { font-size: 1.8em; color: var(--ubk-primary); margin-bottom: 8px; }
.ubk-option.is-active .icon { color: #3b82f6; }
.ubk-option h3 { font-size: 0.85em; margin: 0; color: var(--ubk-text-body); font-weight: 600; }

/* ============================================================================
   3. TABLAS
   ========================================================================= */
.ubk-table-wrap {
  background: var(--ubk-surface);
  border-radius: var(--ubk-radius);
  box-shadow: var(--ubk-shadow);
  overflow-x: auto;
  margin-top: 15px;
  width: 100%;
}

/* --- 3.1 Tabla con cabecera de color --- */
.ubk-table { width: 100%; border-collapse: collapse; }
.ubk-table th,
.ubk-table td { padding: 14px 15px; border: 1px solid var(--ubk-border); text-align: left; vertical-align: middle; }
.ubk-table th {
  background: var(--ubk-primary); color: var(--ubk-on-primary); font-weight: 600;
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px;
}
.ubk-table tbody tr:nth-child(even) { background: var(--ubk-surface-alt); }
.ubk-table tbody tr:hover { background: #f0f7ff; }
.ubk-table td.is-num { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }

/* --- 3.2 Tabla con cabecera clara y fija --- */
.ubk-table-clean {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-radius: var(--ubk-radius); border: 1px solid var(--ubk-border);
  background: var(--ubk-surface); box-shadow: var(--ubk-shadow-xs);
}
.ubk-table-clean table { width: 100%; border-collapse: collapse; font-size: 0.85rem; min-width: 700px; }
.ubk-table-clean thead { background: var(--ubk-surface-alt); }
.ubk-table-clean th {
  padding: 12px 16px; text-align: left; font-weight: 600; color: var(--ubk-text-muted);
  border-bottom: 2px solid var(--ubk-border); white-space: nowrap;
  position: sticky; top: 0; background: var(--ubk-surface-alt); z-index: 2;
}
.ubk-table-clean td { padding: 12px 16px; border-bottom: 1px solid var(--ubk-border); color: var(--ubk-text); vertical-align: middle; }
.ubk-table-clean tbody tr:hover { background: var(--ubk-surface-alt); }
.ubk-table-clean tbody tr:last-child td { border-bottom: none; }

/* --- 3.3 Cabeceras ordenables --- */
.ubk-th-sortable { cursor: pointer; user-select: none; transition: background-color var(--ubk-t-fast) ease, color var(--ubk-t-fast) ease; }
.ubk-th-sortable:hover { background-color: var(--ubk-border) !important; color: var(--ubk-ink) !important; }
.ubk-th-sortable-inner { display: inline-flex; align-items: center; gap: 6px; width: 100%; }
.ubk-sort-arrows { display: inline-flex; flex-direction: column; font-size: 0.65rem; line-height: 1; color: var(--ubk-text-faint); margin-left: 2px; }
.ubk-sort-arrows .is-active { color: var(--ubk-primary); font-weight: 900; }

/* --- 3.4 Cabecera de agrupación --- */
.ubk-group-row td {
  background: linear-gradient(135deg, var(--ubk-text) 0%, var(--ubk-text-body) 100%) !important;
  color: var(--ubk-on-primary) !important; font-weight: 700 !important; font-size: 0.9rem !important;
  padding: 12px 20px !important; letter-spacing: 0.3px;
  border-bottom: 3px solid #fbbf24 !important;
}
.ubk-group-row td i { color: #fbbf24 !important; margin-right: 8px; }
.ubk-group-row.alt td { background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%) !important; }
.ubk-group-count {
  background: rgba(255, 255, 255, 0.2); color: #fde68a;
  padding: 3px 12px; border-radius: 12px; font-size: 0.75rem; font-weight: 600;
  margin-left: 10px; border: 1px solid rgba(255, 255, 255, 0.3);
}

/* --- 3.5 Columna de selección --- */
.ubk-col-check { width: 34px; min-width: 34px; max-width: 34px; text-align: center; padding-left: 8px !important; padding-right: 4px !important; }
.ubk-col-check input[type="checkbox"] { width: 15px; height: 15px; cursor: pointer; vertical-align: middle; accent-color: var(--ubk-primary); }
.ubk-col-actions { white-space: nowrap; text-align: center; }
.ubk-selection-count { font-size: 0.7rem; font-weight: 700; color: var(--ubk-text-faint); }
.ubk-selection-count.has-selection { color: #f59e0b; }

/* --- 3.6 Barra de controles de tabla --- */
.ubk-table-controls {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
  gap: 12px; margin-bottom: 12px; background: var(--ubk-surface);
  padding: 10px 16px; border-radius: var(--ubk-radius); border: 1px solid var(--ubk-border);
}
.ubk-table-controls-left,
.ubk-table-controls-right { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--ubk-text-muted); }
.ubk-table-controls-left select {
  padding: 5px 10px; border-radius: var(--ubk-radius-sm);
  border: 1px solid var(--ubk-border); background: var(--ubk-surface);
  font-size: 0.85rem; cursor: pointer; outline: none; font-family: inherit;
}
.ubk-table-info { font-weight: 500; color: var(--ubk-text); }

/* ============================================================================
   4. PAGINACIÓN
   ========================================================================= */
.ubk-pagination { display: flex; justify-content: center; align-items: center; gap: 4px; margin-top: 16px; flex-wrap: wrap; }
.ubk-pagination-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; background: var(--ubk-surface);
  border: 1px solid var(--ubk-border); border-radius: var(--ubk-radius);
  margin-top: 15px; box-shadow: var(--ubk-shadow-xs);
  flex-wrap: wrap; gap: 10px;
}
.ubk-pagination-info { font-size: 0.82rem; color: var(--ubk-text-muted); font-weight: 500; }
.ubk-pagination-info strong { color: var(--ubk-text); }
.ubk-pagination-nav { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ubk-page-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px; padding: 0 9px;
  border: 1px solid var(--ubk-border-strong); background: var(--ubk-surface);
  color: var(--ubk-text-body); font-size: 0.8rem; font-weight: 600;
  border-radius: var(--ubk-radius-sm); cursor: pointer;
  transition: all var(--ubk-t-fast) ease; user-select: none; font-family: inherit;
}
.ubk-page-btn:hover:not(:disabled):not(.is-active) { background: var(--ubk-surface-sunken); border-color: var(--ubk-text-faint); color: var(--ubk-ink); }
.ubk-page-btn.is-active { background: var(--ubk-primary); border-color: var(--ubk-primary); color: var(--ubk-on-primary); cursor: default; }
.ubk-page-btn:disabled { opacity: 0.45; cursor: not-allowed; background: var(--ubk-surface-alt); border-color: var(--ubk-border); color: var(--ubk-text-faint); }
.ubk-page-ellipsis { padding: 0 6px; color: var(--ubk-text-faint); font-size: 0.82rem; }
.ubk-page-size { display: inline-flex; align-items: center; gap: 4px; font-size: 0.78rem; color: var(--ubk-text-muted); font-weight: 600; }
.ubk-page-size-btn {
  padding: 2px 7px; border-radius: var(--ubk-radius-xs);
  border: 1px solid var(--ubk-border-strong); background: var(--ubk-surface);
  color: var(--ubk-text-muted); font-size: 0.75rem; font-weight: 700;
  cursor: pointer; transition: all var(--ubk-t-fast) ease; font-family: inherit;
}
.ubk-page-size-btn:hover:not(.is-active) { background: var(--ubk-surface-sunken); border-color: var(--ubk-text-faint); color: var(--ubk-ink); }
.ubk-page-size-btn.is-active { background: var(--ubk-primary); border-color: var(--ubk-primary); color: var(--ubk-on-primary); cursor: default; }

/* ============================================================================
   5. PÍLDORAS, FILTROS Y CHIPS
   ========================================================================= */
.ubk-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 7px; border-radius: 5px;
  border: 1px solid var(--ubk-border); background: var(--ubk-surface-alt);
  color: var(--ubk-text-body); font-size: 0.73rem; font-weight: 600;
  cursor: pointer; transition: all var(--ubk-t-fast) ease;
  user-select: none; height: 26px; line-height: 1; font-family: inherit;
}
.ubk-pill:hover { background: var(--ubk-surface-sunken); border-color: var(--ubk-border-strong); color: var(--ubk-ink); }
.ubk-pill.is-active { background: var(--ubk-text-body); border-color: var(--ubk-text); color: var(--ubk-on-primary); }
.ubk-pill-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }
.ubk-pill.is-active .ubk-pill-dot { background: #fff !important; }

/* Colores por estado */
.ubk-pill--open.is-active     { background: #ef4444; border-color: #dc2626; color: #fff; }
.ubk-pill--progress.is-active { background: #f59e0b; border-color: #d97706; color: #fff; }
.ubk-pill--blocked.is-active  { background: #991b1b; border-color: #7f1d1d; color: #fff; }
.ubk-pill--done.is-active     { background: #10b981; border-color: #059669; color: #fff; }
.ubk-pill--closed.is-active   { background: var(--ubk-text-muted); border-color: var(--ubk-text-body); color: var(--ubk-on-primary); }
.ubk-pill--ok.is-active       { background: var(--ubk-success); border-color: var(--ubk-success); color: var(--ubk-on-primary); }
.ubk-pill--damaged.is-active  { background: var(--ubk-warning); border-color: var(--ubk-warning); color: var(--ubk-on-primary); }
.ubk-pill--off.is-active      { background: var(--ubk-danger); border-color: var(--ubk-danger); color: var(--ubk-on-primary); }

/* Prioridad */
.ubk-pill--critical.is-active { background: #dc2626; border-color: #b91c1c; color: #fff; }
.ubk-pill--high.is-active     { background: #ea580c; border-color: #c2410c; color: #fff; }
.ubk-pill--medium.is-active   { background: #eab308; border-color: #ca8a04; color: #713f12; }
.ubk-pill--low.is-active      { background: #3b82f6; border-color: #2563eb; color: #fff; }

/* Píldora de componente con contador */
.ubk-pill-comp {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; background: var(--ubk-surface-sunken);
  border: 1px solid var(--ubk-border-strong); border-radius: var(--ubk-radius-sm);
  color: var(--ubk-text-body); font-size: 0.78rem; font-weight: 600;
  cursor: pointer; transition: all 0.18s ease; user-select: none;
  height: 32px; white-space: nowrap;
}
.ubk-pill-comp i { font-size: 0.85rem; color: var(--ubk-text-muted); }
.ubk-pill-comp:hover { background: var(--ubk-border); border-color: var(--ubk-text-faint); color: var(--ubk-ink); transform: translateY(-1px); }
.ubk-pill-comp.is-active { background: var(--ubk-info); border-color: var(--ubk-info); color: var(--ubk-on-primary); box-shadow: 0 2px 6px rgba(2, 132, 199, 0.35); }
.ubk-pill-comp.is-active i { color: var(--ubk-on-primary); }
.ubk-pill-count {
  background: var(--ubk-border); color: var(--ubk-text-body);
  font-size: 0.68rem; font-weight: 700; padding: 1px 5px; border-radius: 10px; margin-left: 2px;
}
.ubk-pill-comp.is-active .ubk-pill-count { background: rgba(255, 255, 255, 0.25); color: #fff; }

/* Caja de filtro (etiqueta + control) */
.ubk-filter-box {
  display: flex; align-items: center; gap: 5px;
  background: var(--ubk-surface); padding: 3px 8px;
  border-radius: var(--ubk-radius-sm); border: 1px solid var(--ubk-border-strong);
}
.ubk-filter-box-label {
  font-size: 0.68rem; font-weight: 800; color: var(--ubk-text-muted);
  text-transform: uppercase; letter-spacing: 0.5px; margin-right: 2px; white-space: nowrap;
}
.ubk-filter-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; width: 100%; }

/* Barra de filtros agrupada */
.ubk-filter-panel {
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px 14px; background: var(--ubk-surface-alt);
  border: 1px solid var(--ubk-border); border-radius: var(--ubk-radius); margin-bottom: 12px;
}

/* Buscador con icono */
.ubk-search { position: relative; width: 200px; flex-shrink: 0; }
.ubk-search input { width: 100%; height: 32px; font-size: 0.8rem; padding-left: 28px; }
.ubk-search i {
  position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  color: var(--ubk-text-faint); font-size: 0.75rem; pointer-events: none;
}

/* Aviso tras aplicar filtros */
.ubk-filter-notice {
  display: none; align-items: center; justify-content: space-between;
  background: #eff6ff; border: 1px solid var(--ubk-info-line);
  border-radius: var(--ubk-radius-sm); padding: 6px 12px;
  font-size: 0.75rem; color: #1e40af;
}
.ubk-filter-notice.is-visible { display: flex; }

/* Chips de motivo */
.ubk-chip {
  font-size: 0.68rem; font-weight: 700; padding: 3px 9px;
  border-radius: 20px; text-decoration: none;
  background: var(--ubk-surface-alt); border: 1px solid var(--ubk-border);
  color: var(--ubk-text-body); max-width: 260px;
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
  display: inline-block;
}
.ubk-chip.is-selected { outline: 2px solid var(--ubk-primary); outline-offset: 1px; background: var(--ubk-info-soft); color: var(--ubk-primary); }
.ubk-chip--red   { background: #fff7f7; border-color: var(--ubk-danger-line); color: #b91c1c; }
.ubk-chip--amber { background: var(--ubk-secondary-soft); border-color: var(--ubk-warning-line); color: var(--ubk-warning); }
.ubk-chip--blue  { background: #f5f7ff; border-color: #a5b4fc; color: #3730a3; }
.ubk-chip--grey  { background: var(--ubk-surface-sunken); border-color: var(--ubk-border); color: var(--ubk-text-body); }

/* ============================================================================
   6. INSIGNIAS Y ETIQUETAS
   ========================================================================= */
.ubk-badge {
  padding: 4px 10px; border-radius: var(--ubk-radius-sm);
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; display: inline-block; text-align: center; white-space: nowrap;
}
.ubk-badge--open     { background: var(--ubk-danger-soft);  color: var(--ubk-danger);  border: 1px solid var(--ubk-danger-line); }
.ubk-badge--progress { background: var(--ubk-warning-soft); color: var(--ubk-warning); border: 1px solid var(--ubk-warning-line); }
.ubk-badge--done     { background: var(--ubk-success-soft); color: var(--ubk-success); border: 1px solid var(--ubk-success-line); }
.ubk-badge--closed   { background: var(--ubk-surface-sunken); color: var(--ubk-text-body); border: 1px solid var(--ubk-border-strong); }
.ubk-badge--info     { background: var(--ubk-info-soft);    color: var(--ubk-info); border: 1px solid var(--ubk-info-line); }
.ubk-badge--accent   { background: var(--ubk-accent-soft);  color: var(--ubk-accent); border: 1px solid var(--ubk-accent-line); }
.ubk-badge--critical { background: var(--ubk-danger); color: var(--ubk-on-primary); border: 1px solid #b91c1c; }

/* Estado redondeado (píldora) */
.ubk-status {
  font-size: 0.65rem; font-weight: 700; padding: 3px 10px;
  border-radius: 12px; text-transform: uppercase;
  display: inline-block; white-space: nowrap;
}
.ubk-status--planned  { background: var(--ubk-info-soft); color: var(--ubk-info); }
.ubk-status--progress { background: var(--ubk-warning-soft); color: var(--ubk-warning); }
.ubk-status--done     { background: var(--ubk-success-soft); color: var(--ubk-success); }
.ubk-status--cancelled{ background: var(--ubk-danger-soft); color: var(--ubk-danger); }
.ubk-status--closed   { background: var(--ubk-surface-sunken); color: var(--ubk-text-body); }

/* SLA */
.ubk-sla { font-size: 0.6rem; font-weight: 700; padding: 2px 8px; border-radius: 12px; display: inline-block; white-space: nowrap; }
.ubk-sla--ok      { background: var(--ubk-success-soft); color: var(--ubk-success); }
.ubk-sla--fail    { background: var(--ubk-danger-soft);  color: var(--ubk-danger); }
.ubk-sla--pending { background: var(--ubk-warning-soft); color: var(--ubk-warning); }

/* Prioridad */
.ubk-prio { font-size: 0.6rem; font-weight: 700; padding: 2px 8px; border-radius: 12px; text-transform: uppercase; display: inline-block; }
.ubk-prio--high   { background: var(--ubk-danger-soft);  color: var(--ubk-danger); }
.ubk-prio--medium { background: var(--ubk-warning-soft); color: var(--ubk-warning); }
.ubk-prio--low    { background: var(--ubk-info-soft);    color: var(--ubk-info); }

/* Contador y píldora de identificador */
.ubk-count-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ubk-border); color: var(--ubk-text-muted);
  font-size: 0.68rem; font-weight: 700; padding: 2px 8px;
  border-radius: 12px; min-width: 24px; line-height: 1;
}
.ubk-id-pill {
  display: inline-block; background: var(--ubk-surface-sunken); color: var(--ubk-text-muted);
  font-size: 0.7rem; font-weight: 600; padding: 2px 8px;
  border-radius: var(--ubk-radius-xs); border: 1px solid var(--ubk-border);
}
.ubk-name-row { font-weight: 700; color: var(--ubk-text); font-size: 0.85rem; line-height: 1.3; margin-bottom: 4px; }
.ubk-meta-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ubk-sub-name { font-weight: 500; color: var(--ubk-text); font-size: 0.82rem; line-height: 1.3; }
.ubk-sub-family { font-size: 0.72rem; color: var(--ubk-text-faint); font-weight: 400; margin-top: 2px; }

/* ============================================================================
   7. PESTAÑAS
   ========================================================================= */
.ubk-tabs-box {
  background: var(--ubk-surface); border-radius: var(--ubk-radius);
  box-shadow: var(--ubk-shadow); border: 1px solid var(--ubk-border); overflow: hidden;
}
.ubk-tabs {
  display: flex; flex-wrap: nowrap; background: var(--ubk-surface-alt);
  border-bottom: 1px solid var(--ubk-border); width: 100%;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; margin: 0;
}
.ubk-tabs::-webkit-scrollbar { display: none; }
.ubk-tab {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: none; border: none; padding: 15px 20px;
  font-size: 0.85rem; font-weight: 600; color: var(--ubk-text-muted);
  cursor: pointer; border-bottom: 3px solid transparent;
  transition: all var(--ubk-t) ease; outline: none; white-space: nowrap;
  font-family: inherit;
}
.ubk-tab:hover { color: var(--ubk-primary); background: var(--ubk-surface-sunken); }
.ubk-tab.is-active { color: var(--ubk-primary); border-bottom-color: var(--ubk-primary); background: var(--ubk-surface); }
.ubk-tab-panel { padding: 25px; }
.ubk-tab-pane { animation: ubkFadeIn var(--ubk-t-slow) ease-in-out; }

/* Variante: sub-pestañas tipo botón */
.ubk-subtabs { display: flex; gap: 10px; border-bottom: 1px solid var(--ubk-border); padding-bottom: 8px; flex-wrap: wrap; }
.ubk-subtab {
  background: var(--ubk-surface-alt); border: 1px solid var(--ubk-border-strong);
  border-radius: var(--ubk-radius); padding: 8px 16px;
  font-size: 0.88rem; font-weight: 600; color: var(--ubk-text-body);
  cursor: pointer; font-family: inherit; transition: all var(--ubk-t);
}
.ubk-subtab:hover { background: var(--ubk-surface-sunken); color: var(--ubk-text); }
.ubk-subtab.is-active { background: var(--ubk-primary); border-color: var(--ubk-primary); color: var(--ubk-on-primary); box-shadow: 0 2px 6px rgba(51, 102, 153, 0.25); }

/* Variante: sub-pestañas subrayadas con contador */
.ubk-segtabs { display: flex; gap: 6px; border-bottom: 2px solid var(--ubk-border); margin-bottom: 12px; flex-wrap: wrap; overflow-x: auto; }
.ubk-segtab {
  padding: 9px 14px; border: none; background: none; color: var(--ubk-text-muted);
  font-size: 0.8rem; font-weight: 600; cursor: pointer;
  border-bottom: 3px solid transparent; white-space: nowrap; font-family: inherit;
}
.ubk-segtab:hover { color: var(--ubk-primary); }
.ubk-segtab.is-active { color: var(--ubk-primary); border-bottom-color: var(--ubk-primary); }
.ubk-segtab-count {
  display: inline-block; margin-left: 6px; background: #eef2ff; color: #4338ca;
  border-radius: var(--ubk-radius-pill); font-size: 0.68rem; font-weight: 700; padding: 1px 8px;
}

/* Variante: pestañas smart (píldora sobre fondo translúcido) */
.ubk-tabs-pill { display: flex; gap: 10px; margin-bottom: 20px; background: rgba(255, 255, 255, 0.5); padding: 5px; border-radius: var(--ubk-radius-lg); }
.ubk-tab-pill {
  padding: 10px 20px; border: none; background: transparent;
  border-radius: var(--ubk-radius); font-weight: 600;
  color: var(--ubk-text-muted); cursor: pointer; transition: all var(--ubk-t-slow);
  display: flex; align-items: center; gap: 8px; font-size: 0.9rem; font-family: inherit;
}
.ubk-tab-pill:hover { background: rgba(255, 255, 255, 0.8); }
.ubk-tab-pill.is-active { background: var(--ubk-surface); color: var(--ubk-primary); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); }
/* ============================================================================
   8. MODALES
   ========================================================================= */
.ubk-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.7);
  z-index: var(--ubk-z-modal);
  display: none; justify-content: center; align-items: center;
  backdrop-filter: blur(4px);
  padding: 20px;
}
.ubk-modal-overlay.is-open { display: flex; }
.ubk-modal {
  background: var(--ubk-surface); width: 100%; max-width: 650px;
  border-radius: var(--ubk-radius-lg); box-shadow: var(--ubk-shadow-xl);
  max-height: 90vh; overflow-y: auto; animation: ubkFadeIn var(--ubk-t-slow) ease;
}
.ubk-modal--sm { max-width: 440px; }
.ubk-modal--lg { max-width: 900px; }
.ubk-modal-head {
  background: var(--ubk-primary); color: var(--ubk-on-primary); padding: 18px 24px;
  display: flex; justify-content: space-between; align-items: center;
  border-radius: var(--ubk-radius-lg) var(--ubk-radius-lg) 0 0;
}
.ubk-modal-head h3 { margin: 0; font-size: 1.1rem; display: flex; align-items: center; gap: 8px; color: #fff; }
.ubk-modal-close { background: none; border: none; color: #fff; font-size: 1.5rem; cursor: pointer; line-height: 1; }
.ubk-modal-body { padding: 24px; }
.ubk-modal-foot {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 14px 24px; border-top: 1px solid var(--ubk-border); flex-wrap: wrap;
}
.ubk-field-group { margin-bottom: 16px; }
.ubk-field-group label { font-weight: 600; font-size: 0.8rem; color: var(--ubk-text-muted); display: block; margin-bottom: 4px; }
.ubk-field-group .value { font-size: 0.85rem; color: var(--ubk-text); }
.ubk-field-group .value.is-highlight {
  background: var(--ubk-surface-alt); padding: 8px 12px;
  border-radius: var(--ubk-radius-sm); border-left: 4px solid var(--ubk-primary);
}

/* ============================================================================
   9. FORMULARIOS
   ========================================================================= */
.ubk-control {
  width: 100%; padding: 12px 15px;
  border: 1px solid var(--ubk-border-strong); border-radius: var(--ubk-radius);
  font-size: 0.85rem; font-family: inherit; color: var(--ubk-text);
  background: var(--ubk-surface); transition: all var(--ubk-t) ease;
  box-sizing: border-box;
}
.ubk-control:focus { outline: none; border-color: var(--ubk-primary); box-shadow: var(--ubk-shadow-focus); }
.ubk-control:disabled,
.ubk-control[readonly] { background: var(--ubk-surface-sunken); color: var(--ubk-text-muted); }
.ubk-control--sm { padding: 8px 10px; font-size: 0.82rem; border-radius: var(--ubk-radius); }
textarea.ubk-control { resize: vertical; min-height: 70px; }

.ubk-label {
  font-size: 0.72rem; font-weight: 600; color: var(--ubk-text-muted);
  text-transform: uppercase; letter-spacing: 0.3px; display: block; margin-bottom: 4px;
}
.ubk-field { display: flex; flex-direction: column; gap: 4px; }
.ubk-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.ubk-field-wide { grid-column: 1 / -1; }
.ubk-hint { font-size: 0.72rem; color: var(--ubk-text-faint); }
.ubk-hint.is-over { color: #b91c1c; font-weight: 700; }

/* Interruptor */
.ubk-switch { position: relative; display: inline-block; width: 60px; height: 30px; margin: 0; }
.ubk-switch input { opacity: 0; width: 0; height: 0; }
.ubk-switch-track {
  position: absolute; cursor: pointer; inset: 0;
  background-color: #ccc; transition: var(--ubk-t-slow); border-radius: 30px;
}
.ubk-switch-track::before {
  position: absolute; content: ""; height: 24px; width: 24px;
  left: 3px; bottom: 3px; background-color: #fff; transition: var(--ubk-t-slow); border-radius: 50%;
}
.ubk-switch input:checked + .ubk-switch-track { background-color: var(--ubk-success); }
.ubk-switch input:checked + .ubk-switch-track::before { transform: translateX(30px); }
.ubk-switch--sm { width: 40px; height: 20px; }
.ubk-switch--sm .ubk-switch-track::before { height: 16px; width: 16px; }
.ubk-switch--sm input:checked + .ubk-switch-track::before { transform: translateX(20px); }

/* ============================================================================
   10. ALERTAS, AVISOS Y MENSAJES
   ========================================================================= */
.ubk-alert {
  padding: 12px 16px; border-radius: var(--ubk-radius); margin-bottom: 14px;
  font-size: 0.85rem; font-weight: 600;
  display: flex; align-items: center; gap: 10px;
  border: 1px solid transparent;
}
.ubk-alert--ok      { background: var(--ubk-success-soft); color: var(--ubk-success); border-color: var(--ubk-success-line); }
.ubk-alert--err     { background: var(--ubk-danger-soft);  color: var(--ubk-danger); border-color: var(--ubk-danger-line); }
.ubk-alert--warn    { background: var(--ubk-secondary-soft); color: var(--ubk-warning); border-color: var(--ubk-warning-line); }
.ubk-alert--info    { background: #eff6ff; color: #1e40af; border-color: var(--ubk-info-line); }

/* Aviso con filete lateral (el más usado) */
.ubk-note {
  background: var(--ubk-surface-alt); border: 1px solid var(--ubk-border);
  border-left: 4px solid var(--ubk-primary); border-radius: 0 var(--ubk-radius) var(--ubk-radius) 0;
  padding: 12px 16px; font-size: 0.82rem; line-height: 1.55; color: var(--ubk-text-body);
}
.ubk-note--warn   { background: var(--ubk-secondary-soft); border-color: var(--ubk-warning-line); border-left-color: var(--ubk-warning); color: var(--ubk-warning); }
.ubk-note--danger { background: #fef2f2; border-color: var(--ubk-danger-line); border-left-color: var(--ubk-danger); color: #991b1b; }
.ubk-note--info   { background: #eff6ff; border-color: var(--ubk-info-line); border-left-color: #3b82f6; color: #1e3a8a; }
.ubk-note--accent { background: #f5f3ff; border-color: var(--ubk-accent-line); border-left-color: var(--ubk-accent); color: #5b21b6; }
.ubk-note--success{ background: #f0fdf4; border-color: var(--ubk-success-line); border-left-color: var(--ubk-success); color: #166534; }

/* Franja amarilla de advertencia (avisos de plataforma) */
.ubk-warn-strip {
  display: flex; align-items: center; gap: 7px;
  margin-top: 6px; padding: 5px 10px;
  background: var(--ubk-secondary-soft);
  border-left: 3px solid var(--ubk-secondary);
  border-radius: 0 5px 5px 0;
  font-size: 0.72rem; font-weight: 500; color: var(--ubk-warning);
}
.ubk-warn-strip--flat { border-radius: 0; border-left: none; border-bottom: 1px solid var(--ubk-warning-line); padding: 7px 14px; }

/* Aviso de error de consulta */
.ubk-error-box {
  background: #fef2f2; border: 1px solid #fca5a5;
  border-left: 5px solid var(--ubk-danger); border-radius: var(--ubk-radius);
  padding: 9px 13px; margin-bottom: 10px; color: #7f1d1d; font-size: 0.76rem;
}
.ubk-error-box ul { margin: 5px 0 0 16px; }
.ubk-error-box code { font-size: 0.7rem; }

/* Banner de trabajo en curso */
.ubk-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #fff7ed; border: 1px solid #fdba74; color: #9a3412;
  border-radius: var(--ubk-radius-md); padding: 12px 14px; margin-bottom: 14px; font-size: 0.82rem;
}
.ubk-banner b { font-weight: 700; }

/* Notificación flotante */
.ubk-toast {
  position: fixed; right: 20px; bottom: 20px; z-index: 100002;
  background: var(--ubk-ink); color: var(--ubk-on-primary); padding: 10px 14px;
  border-radius: 9px; font-size: 0.78rem;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.3); max-width: 320px;
}
.ubk-toast--err { background: #b91c1c; }
.ubk-toast--ok  { background: var(--ubk-success); }

/* Estado vacío */
.ubk-empty { color: var(--ubk-text-faint); font-style: italic; font-size: 0.82rem; padding: 14px; }
.ubk-empty--block { padding: 44px 20px; text-align: center; border: 1px dashed var(--ubk-border-strong); border-radius: var(--ubk-radius-lg); }
.ubk-empty--block i { font-size: 1.8rem; margin-bottom: 10px; display: block; color: var(--ubk-border-strong); }
.ubk-empty--block p { margin: 0; font-size: 0.9rem; font-weight: 600; font-style: normal; }

/* ============================================================================
   11. GRÁFICOS
   ========================================================================= */
.ubk-bars { display: flex; flex-direction: column; gap: 8px; }
.ubk-bar-item { display: flex; align-items: center; gap: 10px; }
.ubk-bar-label { font-size: 0.75rem; font-weight: 500; color: var(--ubk-text); width: 80px; flex-shrink: 0; text-align: right; }
.ubk-bar-track { flex: 1; height: 18px; background: var(--ubk-surface-sunken); border-radius: 10px; overflow: hidden; position: relative; }
.ubk-bar-fill { height: 100%; border-radius: 10px; transition: width 0.8s ease; }
.ubk-bar-value { font-size: 0.7rem; font-weight: 600; color: var(--ubk-text-muted); width: 40px; text-align: right; flex-shrink: 0; }

.ubk-donut { display: flex; align-items: center; justify-content: center; gap: 30px; padding: 10px 0; }
.ubk-donut svg { width: 120px; height: 120px; transform: rotate(-90deg); }
.ubk-donut svg circle { fill: none; stroke-width: 14; }
.ubk-donut-legend { display: flex; flex-direction: column; gap: 6px; }
.ubk-donut-legend-item { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--ubk-text); }
.ubk-donut-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }

.ubk-progress { height: 6px; background: var(--ubk-surface-sunken); border-radius: var(--ubk-radius-xs); overflow: hidden; margin-top: 4px; }
.ubk-progress-fill { height: 100%; border-radius: var(--ubk-radius-xs); transition: width 0.6s ease; }

/* ============================================================================
   12. ETIQUETAS ESPECIALES
   ========================================================================= */

/* --- 12.1 DATOS SIMULADOS (obligatoria en cualquier dato inventado) --- */
.ubk-simulated-host { position: relative; overflow: visible; }
.ubk-simulated {
  position: absolute; top: 8px; right: 8px; z-index: 5;
  display: inline-block; padding: 2px 7px;
  background: var(--ubk-secondary); color: #000;
  font-family: var(--ubk-font); font-size: 0.62rem; font-weight: 800;
  line-height: 1.35; letter-spacing: 0.6px; text-transform: uppercase;
  white-space: nowrap; border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: var(--ubk-radius-xs); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  pointer-events: none;
}
/* Reserva de espacio para que la etiqueta no tape el título.
   Se ancla con el combinador de hermano adyacente (`+`) al elemento que va
   JUSTO DESPUÉS de la etiqueta, sea cual sea. Así funciona tanto si el
   marcado pone primero la etiqueta y después el título (lo habitual) como si
   el título va primero: no depende de quién sea «el primer hijo». */
.ubk-simulated-host > .ubk-simulated + h1,
.ubk-simulated-host > .ubk-simulated + h2,
.ubk-simulated-host > .ubk-simulated + h3,
.ubk-simulated-host > .ubk-simulated + h4,
.ubk-simulated-host > .ubk-simulated + .ubk-kpi-label,
.ubk-simulated-host > .ubk-simulated + .ubk-glass-title,
.ubk-simulated-host > .ubk-simulated + .ubk-card > h3,
.ubk-simulated-host > .ubk-simulated + .card-title { padding-right: 126px; min-height: 18px; }
.ubk-simulated--sm { font-size: 0.55rem; padding: 1px 5px; letter-spacing: 0.4px; }
.ubk-simulated-host--sm > .ubk-simulated + * { padding-right: 118px; min-height: 16px; }

/* --- 12.2 Estado de conexión en vivo --- */
.ubk-live {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: var(--ubk-radius-sm);
  border: 1px solid var(--ubk-border); background: var(--ubk-surface-alt);
  font-size: 0.78rem; font-weight: 600; color: var(--ubk-text-body); line-height: 1.35;
}
.ubk-live-icon { flex: 0 0 auto; font-size: 0.9rem; }
.ubk-live-text { flex: 1 1 auto; min-width: 0; }
.ubk-live-detail { display: block; font-size: 0.68rem; font-weight: 500; color: var(--ubk-text-faint); margin-top: 1px; }
.ubk-live--wait  { background: #eff6ff; border-color: var(--ubk-info-line); color: #1e40af; }
.ubk-live--wait .ubk-live-icon { color: #3b82f6; }
.ubk-live--ok    { background: #f0fdf4; border-color: var(--ubk-success-line); color: var(--ubk-success); }
.ubk-live--ok .ubk-live-icon { color: var(--ubk-success); }
.ubk-live--error { background: #fef2f2; border-color: var(--ubk-danger-line); color: #b91c1c; }
.ubk-live--error .ubk-live-icon { color: var(--ubk-danger); }
.ubk-live-retry {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: var(--ubk-radius-sm);
  border: 1px solid #b91c1c; background: #fff; color: #b91c1c;
  font-size: 0.72rem; font-weight: 700; cursor: pointer;
  transition: all var(--ubk-t-fast) ease; font-family: inherit;
}
.ubk-live-retry:hover { background: #b91c1c; color: #fff; }

/* --- 12.3 Indicador de madurez de módulo --- */
.ubk-chip-state {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--ubk-radius-pill);
  font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px;
}
.ubk-chip-state--prod   { background: #dcfce7; color: #15803d; }
.ubk-chip-state--prepro { background: #e0f2fe; color: #0369a1; }
.ubk-chip-state--beta   { background: var(--ubk-warning-soft); color: var(--ubk-warning); }
.ubk-chip-state--alfa   { background: #ffedd5; color: #c2410c; }
.ubk-chip-state--dev    { background: var(--ubk-danger-soft); color: var(--ubk-danger); }

/* --- 12.4 Sello de aviso (esquina superior) --- */
.ubk-stamp {
  display: inline-block; flex: 0 0 auto;
  background: #facc15; color: #000; font-weight: 800; font-size: 0.66rem;
  letter-spacing: 0.5px; padding: 3px 9px; border-radius: var(--ubk-radius-xs);
  text-transform: uppercase;
}

/* --- 12.5 Subrayado / marca de texto --- */
.ubk-mark { background: #fef9c3; padding: 1px 5px; border-radius: 3px; font-weight: 600; }
.ubk-kbd {
  font-family: var(--ubk-font-mono); font-size: 0.72rem;
  background: var(--ubk-surface-sunken); border: 1px solid var(--ubk-border-strong);
  border-bottom-width: 2px; border-radius: 4px; padding: 1px 6px; color: var(--ubk-text);
}

/* --- 12.6 Animaciones utilitarias --- */
.ubk-pulse { animation: ubkPulse 1.4s infinite; }
.ubk-row-in { animation: ubkRowIn var(--ubk-t-slow) ease forwards; }

/* ============================================================================
   13. RESPONSIVE DE COMPONENTES
   ========================================================================= */

/* --- Sobrescrituras para pantallas de hasta 992px (van en la base) --- */
.ubk-hide-md { display: none !important; }

/* --- Sobrescrituras para pantallas de hasta 768px (van en la base) --- */
.ubk-table th, .ubk-table td { padding: 8px 6px; font-size: 0.8rem; }
  .ubk-table-clean table { font-size: 0.75rem; min-width: 600px; }
  .ubk-table-clean th, .ubk-table-clean td { padding: 8px 10px; }
  .ubk-icon-btn { width: 32px; height: 32px; font-size: 0.9rem; }
  .ubk-action-btn span { display: none; }
  .ubk-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .ubk-table-controls { flex-direction: column; align-items: stretch; gap: 8px; }
  .ubk-table-controls-right { justify-content: flex-end; }
  .ubk-pagination-bar { flex-direction: column; align-items: stretch; }
  .ubk-pagination-nav { justify-content: center; }
  .ubk-search { width: 100%; }
  .ubk-dash-grid { grid-template-columns: 1fr; }
  .ubk-option-row { justify-content: center; }
  .ubk-simulated-host > .ubk-simulated + * { padding-right: 0; padding-top: 18px; }

/* --- Sobrescrituras para pantallas de hasta 480px (van en la base) --- */
.ubk-kpi-grid { grid-template-columns: 1fr; }
  .ubk-kpi { padding: 12px; }
  .ubk-kpi-value { font-size: 1.2rem; }
  .ubk-page-btn { padding: 4px 8px; font-size: 0.75rem; min-width: 30px; }
  .ubk-record-grid { grid-template-columns: 1fr; }
  .ubk-btn-group { width: 100%; }

/* --- A partir de 481px: se recupera el aspecto de tableta/escritorio --- */
/*     Se reproduce la cascada original de las propiedades afectadas, para     */
/*     que el orden de las reglas base siga decidiendo igual que antes.        */
@media (min-width: 481px) {
  .ubk-kpi-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .ubk-dash-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .ubk-record-grid { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
  .ubk-tile-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .ubk-form-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .ubk-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .ubk-dash-grid { grid-template-columns: 1fr; }
  .ubk-btn { padding: 10px 20px; }
  .ubk-btn--sm { padding: 6px 12px; }
  .ubk-btn--lg { padding: 13px 26px; }
  .ubk-action-btn { padding: 5px 10px; }
  .ubk-export-btn { padding: 6px 12px; }
  .ubk-kpi { padding: 16px 18px; }
  .ubk-stat { padding: 14px 16px; }
  .ubk-stat--center { padding: 10px; }
  .ubk-glass { padding: 20px; }
  .ubk-card { padding: 16px; }
  .ubk-card-count { padding: 2px 9px; }
  .ubk-dash-card { padding: 18px 20px; }
  .ubk-record-grid { padding: 10px 0; }
  .ubk-record-id-overlay { padding: 6px 14px; }
  .ubk-record-check { padding: 4px 8px; }
  .ubk-record-head { padding: 14px 18px 6px; }
  .ubk-record-desc { padding: 10px 14px; }
  .ubk-record-coords { padding: 8px 12px; }
  .ubk-record-foot { padding: 12px 18px; }
  .ubk-grid-separator { padding: 14px 24px; }
  .ubk-tile { padding: 15px; }
  .ubk-option { padding: 15px 10px; }
  .ubk-table th,
.ubk-table td { padding: 14px 15px; }
  .ubk-table-clean th { padding: 12px 16px; }
  .ubk-table-clean td { padding: 12px 16px; }
  .ubk-group-row td { padding: 12px 20px !important; }
  .ubk-group-count { padding: 3px 12px; }
  .ubk-table-controls { padding: 10px 16px; }
  .ubk-table-controls-left select { padding: 5px 10px; }
  .ubk-pagination-bar { padding: 12px 16px; }
  .ubk-page-btn { padding: 0 9px; }
  .ubk-page-ellipsis { padding: 0 6px; }
  .ubk-page-size-btn { padding: 2px 7px; }
  .ubk-pill { padding: 3px 7px; }
  .ubk-pill-comp { padding: 4px 9px; }
  .ubk-pill-count { padding: 1px 5px; }
  .ubk-filter-box { padding: 3px 8px; }
  .ubk-filter-panel { padding: 12px 14px; }
  .ubk-filter-notice { padding: 6px 12px; }
  .ubk-chip { padding: 3px 9px; }
  .ubk-badge { padding: 4px 10px; }
  .ubk-status { padding: 3px 10px; }
  .ubk-sla { padding: 2px 8px; }
  .ubk-prio { padding: 2px 8px; }
  .ubk-count-badge { padding: 2px 8px; }
  .ubk-id-pill { padding: 2px 8px; }
  .ubk-tab { padding: 15px 20px; }
  .ubk-tab-panel { padding: 25px; }
  .ubk-subtab { padding: 8px 16px; }
  .ubk-segtab { padding: 9px 14px; }
  .ubk-segtab-count { padding: 1px 8px; }
  .ubk-tabs-pill { padding: 5px; }
  .ubk-tab-pill { padding: 10px 20px; }
  .ubk-modal-overlay { padding: 20px; }
  .ubk-modal-head { padding: 18px 24px; }
  .ubk-modal-body { padding: 24px; }
  .ubk-modal-foot { padding: 14px 24px; }
  .ubk-field-group .value.is-highlight { padding: 8px 12px; }
  .ubk-control { padding: 12px 15px; }
  .ubk-control--sm { padding: 8px 10px; }
  .ubk-alert { padding: 12px 16px; }
  .ubk-note { padding: 12px 16px; }
  .ubk-warn-strip { padding: 5px 10px; }
  .ubk-warn-strip--flat { padding: 7px 14px; }
  .ubk-error-box { padding: 9px 13px; }
  .ubk-banner { padding: 12px 14px; }
  .ubk-toast { padding: 10px 14px; }
  .ubk-empty { padding: 14px; }
  .ubk-empty--block { padding: 44px 20px; }
  .ubk-donut { padding: 10px 0; }
  .ubk-simulated { padding: 2px 7px; }
  .ubk-simulated--sm { padding: 1px 5px; }
  .ubk-live { padding: 8px 10px; }
  .ubk-live-retry { padding: 4px 10px; }
  .ubk-chip-state { padding: 3px 10px; }
  .ubk-stamp { padding: 3px 9px; }
  .ubk-mark { padding: 1px 5px; }
  .ubk-kbd { padding: 1px 6px; }
  .ubk-table th, .ubk-table td { padding: 8px 6px; }
  .ubk-table-clean th, .ubk-table-clean td { padding: 8px 10px; }
  .ubk-btn { font-size: 0.85rem; }
  .ubk-btn--sm { font-size: 0.78rem; }
  .ubk-btn--lg { font-size: 0.95rem; }
  .ubk-icon-btn { font-size: 1rem; }
  .ubk-icon-btn--sm { font-size: 0.85rem; }
  .ubk-action-btn { font-size: 0.72rem; }
  .ubk-export-btn { font-size: 0.75rem; }
  .ubk-kpi-icon i { font-size: 1.2rem; }
  .ubk-kpi-label { font-size: 0.7rem; }
  .ubk-kpi-value { font-size: 1.5rem; }
  .ubk-stat b { font-size: 1.35rem; }
  .ubk-stat small { font-size: 0.72rem; }
  .ubk-stat--center b { font-size: 1.3rem; }
  .ubk-glass-title { font-size: 1.1rem; }
  .ubk-card > h3 { font-size: 0.95rem; }
  .ubk-card-count { font-size: 0.75rem; }
  .ubk-dash-card h4 { font-size: 0.85rem; }
  .ubk-record-media .ubk-noimg { font-size: 3rem; }
  .ubk-record-id-overlay { font-size: 0.8rem; }
  .ubk-record-title { font-size: 1.05rem; }
  .ubk-record-sub { font-size: 0.85rem; }
  .ubk-record-line { font-size: 0.82rem; }
  .ubk-record-line i { font-size: 0.85rem; }
  .ubk-record-desc p { font-size: 0.78rem; }
  .ubk-record-coords { font-size: 0.75rem; }
  .ubk-record-foot small { font-size: 0.78rem; }
  .ubk-grid-separator { font-size: 0.95rem; }
  .ubk-grid-separator i { font-size: 1.2rem; }
  .ubk-tile-icon { font-size: 1.8rem; }
  .ubk-tile span { font-size: 0.85rem; }
  .ubk-option .icon { font-size: 1.8em; }
  .ubk-option h3 { font-size: 0.85em; }
  .ubk-table th { font-size: 0.8rem; }
  .ubk-table-clean table { font-size: 0.85rem; }
  .ubk-sort-arrows { font-size: 0.65rem; }
  .ubk-group-row td { font-size: 0.9rem !important; }
  .ubk-group-count { font-size: 0.75rem; }
  .ubk-selection-count { font-size: 0.7rem; }
  .ubk-table-controls-left,
.ubk-table-controls-right { font-size: 0.85rem; }
  .ubk-table-controls-left select { font-size: 0.85rem; }
  .ubk-pagination-info { font-size: 0.82rem; }
  .ubk-page-btn { font-size: 0.8rem; }
  .ubk-page-ellipsis { font-size: 0.82rem; }
  .ubk-page-size { font-size: 0.78rem; }
  .ubk-page-size-btn { font-size: 0.75rem; }
  .ubk-pill { font-size: 0.73rem; }
  .ubk-pill-comp { font-size: 0.78rem; }
  .ubk-pill-comp i { font-size: 0.85rem; }
  .ubk-pill-count { font-size: 0.68rem; }
  .ubk-filter-box-label { font-size: 0.68rem; }
  .ubk-search input { font-size: 0.8rem; }
  .ubk-search i { font-size: 0.75rem; }
  .ubk-filter-notice { font-size: 0.75rem; }
  .ubk-chip { font-size: 0.68rem; }
  .ubk-badge { font-size: 0.75rem; }
  .ubk-status { font-size: 0.65rem; }
  .ubk-sla { font-size: 0.6rem; }
  .ubk-prio { font-size: 0.6rem; }
  .ubk-count-badge { font-size: 0.68rem; }
  .ubk-id-pill { font-size: 0.7rem; }
  .ubk-name-row { font-size: 0.85rem; }
  .ubk-sub-name { font-size: 0.82rem; }
  .ubk-sub-family { font-size: 0.72rem; }
  .ubk-tab { font-size: 0.85rem; }
  .ubk-subtab { font-size: 0.88rem; }
  .ubk-segtab { font-size: 0.8rem; }
  .ubk-segtab-count { font-size: 0.68rem; }
  .ubk-tab-pill { font-size: 0.9rem; }
  .ubk-modal-head h3 { font-size: 1.1rem; }
  .ubk-modal-close { font-size: 1.5rem; }
  .ubk-field-group label { font-size: 0.8rem; }
  .ubk-field-group .value { font-size: 0.85rem; }
  .ubk-control { font-size: 0.85rem; }
  .ubk-control--sm { font-size: 0.82rem; }
  .ubk-label { font-size: 0.72rem; }
  .ubk-hint { font-size: 0.72rem; }
  .ubk-alert { font-size: 0.85rem; }
  .ubk-note { font-size: 0.82rem; }
  .ubk-warn-strip { font-size: 0.72rem; }
  .ubk-error-box { font-size: 0.76rem; }
  .ubk-error-box code { font-size: 0.7rem; }
  .ubk-banner { font-size: 0.82rem; }
  .ubk-toast { font-size: 0.78rem; }
  .ubk-empty { font-size: 0.82rem; }
  .ubk-empty--block i { font-size: 1.8rem; }
  .ubk-empty--block p { font-size: 0.9rem; }
  .ubk-bar-label { font-size: 0.75rem; }
  .ubk-bar-value { font-size: 0.7rem; }
  .ubk-donut-legend-item { font-size: 0.8rem; }
  .ubk-simulated { font-size: 0.62rem; }
  .ubk-simulated--sm { font-size: 0.55rem; }
  .ubk-live { font-size: 0.78rem; }
  .ubk-live-icon { font-size: 0.9rem; }
  .ubk-live-detail { font-size: 0.68rem; }
  .ubk-live-retry { font-size: 0.72rem; }
  .ubk-chip-state { font-size: 0.7rem; }
  .ubk-stamp { font-size: 0.66rem; }
  .ubk-kbd { font-size: 0.72rem; }
  .ubk-table th, .ubk-table td { font-size: 0.8rem; }
  .ubk-table-clean table { font-size: 0.75rem; }
  .ubk-icon-btn { font-size: 0.9rem; }
  .ubk-kpi-body { min-width: 0; }
  .ubk-table-clean table { min-width: 700px; }
  .ubk-col-check { min-width: 34px; }
  .ubk-page-btn { min-width: 32px; }
  .ubk-count-badge { min-width: 24px; }
  .ubk-live-text { min-width: 0; }
  .ubk-table-clean table { min-width: 600px; }
  .ubk-btn--block { width: 100%; }
  .ubk-icon-btn { width: 36px; }
  .ubk-icon-btn--sm { width: 30px; }
  .ubk-kpi-icon { width: 44px; }
  .ubk-record-media { width: 100%; }
  .ubk-record-media img { width: 100%; }
  .ubk-option { width: 140px; }
  .ubk-table-wrap { width: 100%; }
  .ubk-table { width: 100%; }
  .ubk-table-clean table { width: 100%; }
  .ubk-th-sortable-inner { width: 100%; }
  .ubk-col-check { width: 34px; }
  .ubk-col-check input[type="checkbox"] { width: 15px; }
  .ubk-pill-dot { width: 7px; }
  .ubk-filter-row { width: 100%; }
  .ubk-search { width: 200px; }
  .ubk-search input { width: 100%; }
  .ubk-tabs { width: 100%; }
  .ubk-modal { width: 100%; }
  .ubk-control { width: 100%; }
  .ubk-switch { width: 60px; }
  .ubk-switch input { width: 0; }
  .ubk-switch-track::before { width: 24px; }
  .ubk-switch--sm { width: 40px; }
  .ubk-switch--sm .ubk-switch-track::before { width: 16px; }
  .ubk-bar-label { width: 80px; }
  .ubk-bar-value { width: 40px; }
  .ubk-donut svg { width: 120px; }
  .ubk-donut-dot { width: 12px; }
  .ubk-icon-btn { width: 32px; }
  .ubk-search { width: 100%; }

  /* Propiedades que solo existían en la consulta de móvil: vuelven a su valor por defecto */
  .ubk-btn-group { width: revert; }
}

/* --- A partir de 769px: se recupera el aspecto de tableta/escritorio --- */
/*     Se reproduce la cascada original de las propiedades afectadas, para     */
/*     que el orden de las reglas base siga decidiendo igual que antes.        */
@media (min-width: 769px) {
  .ubk-btn { padding: 10px 20px; }
  .ubk-btn--sm { padding: 6px 12px; }
  .ubk-btn--lg { padding: 13px 26px; }
  .ubk-action-btn { padding: 5px 10px; }
  .ubk-export-btn { padding: 6px 12px; }
  .ubk-kpi { padding: 16px 18px; }
  .ubk-stat { padding: 14px 16px; }
  .ubk-stat--center { padding: 10px; }
  .ubk-glass { padding: 20px; }
  .ubk-card { padding: 16px; }
  .ubk-card-count { padding: 2px 9px; }
  .ubk-dash-card { padding: 18px 20px; }
  .ubk-record-grid { padding: 10px 0; }
  .ubk-record-id-overlay { padding: 6px 14px; }
  .ubk-record-check { padding: 4px 8px; }
  .ubk-record-head { padding: 14px 18px 6px; }
  .ubk-record-desc { padding: 10px 14px; }
  .ubk-record-coords { padding: 8px 12px; }
  .ubk-record-foot { padding: 12px 18px; }
  .ubk-grid-separator { padding: 14px 24px; }
  .ubk-tile { padding: 15px; }
  .ubk-option { padding: 15px 10px; }
  .ubk-table th,
.ubk-table td { padding: 14px 15px; }
  .ubk-table-clean th { padding: 12px 16px; }
  .ubk-table-clean td { padding: 12px 16px; }
  .ubk-group-row td { padding: 12px 20px !important; }
  .ubk-group-count { padding: 3px 12px; }
  .ubk-table-controls { padding: 10px 16px; }
  .ubk-table-controls-left select { padding: 5px 10px; }
  .ubk-pagination-bar { padding: 12px 16px; }
  .ubk-page-btn { padding: 0 9px; }
  .ubk-page-ellipsis { padding: 0 6px; }
  .ubk-page-size-btn { padding: 2px 7px; }
  .ubk-pill { padding: 3px 7px; }
  .ubk-pill-comp { padding: 4px 9px; }
  .ubk-pill-count { padding: 1px 5px; }
  .ubk-filter-box { padding: 3px 8px; }
  .ubk-filter-panel { padding: 12px 14px; }
  .ubk-filter-notice { padding: 6px 12px; }
  .ubk-chip { padding: 3px 9px; }
  .ubk-badge { padding: 4px 10px; }
  .ubk-status { padding: 3px 10px; }
  .ubk-sla { padding: 2px 8px; }
  .ubk-prio { padding: 2px 8px; }
  .ubk-count-badge { padding: 2px 8px; }
  .ubk-id-pill { padding: 2px 8px; }
  .ubk-tab { padding: 15px 20px; }
  .ubk-tab-panel { padding: 25px; }
  .ubk-subtab { padding: 8px 16px; }
  .ubk-segtab { padding: 9px 14px; }
  .ubk-segtab-count { padding: 1px 8px; }
  .ubk-tabs-pill { padding: 5px; }
  .ubk-tab-pill { padding: 10px 20px; }
  .ubk-modal-overlay { padding: 20px; }
  .ubk-modal-head { padding: 18px 24px; }
  .ubk-modal-body { padding: 24px; }
  .ubk-modal-foot { padding: 14px 24px; }
  .ubk-field-group .value.is-highlight { padding: 8px 12px; }
  .ubk-control { padding: 12px 15px; }
  .ubk-control--sm { padding: 8px 10px; }
  .ubk-alert { padding: 12px 16px; }
  .ubk-note { padding: 12px 16px; }
  .ubk-warn-strip { padding: 5px 10px; }
  .ubk-warn-strip--flat { padding: 7px 14px; }
  .ubk-error-box { padding: 9px 13px; }
  .ubk-banner { padding: 12px 14px; }
  .ubk-toast { padding: 10px 14px; }
  .ubk-empty { padding: 14px; }
  .ubk-empty--block { padding: 44px 20px; }
  .ubk-donut { padding: 10px 0; }
  .ubk-simulated { padding: 2px 7px; }
  .ubk-simulated--sm { padding: 1px 5px; }
  .ubk-live { padding: 8px 10px; }
  .ubk-live-retry { padding: 4px 10px; }
  .ubk-chip-state { padding: 3px 10px; }
  .ubk-stamp { padding: 3px 9px; }
  .ubk-mark { padding: 1px 5px; }
  .ubk-kbd { padding: 1px 6px; }
  .ubk-btn { font-size: 0.85rem; }
  .ubk-btn--sm { font-size: 0.78rem; }
  .ubk-btn--lg { font-size: 0.95rem; }
  .ubk-icon-btn { font-size: 1rem; }
  .ubk-icon-btn--sm { font-size: 0.85rem; }
  .ubk-action-btn { font-size: 0.72rem; }
  .ubk-export-btn { font-size: 0.75rem; }
  .ubk-kpi-icon i { font-size: 1.2rem; }
  .ubk-kpi-label { font-size: 0.7rem; }
  .ubk-kpi-value { font-size: 1.5rem; }
  .ubk-stat b { font-size: 1.35rem; }
  .ubk-stat small { font-size: 0.72rem; }
  .ubk-stat--center b { font-size: 1.3rem; }
  .ubk-glass-title { font-size: 1.1rem; }
  .ubk-card > h3 { font-size: 0.95rem; }
  .ubk-card-count { font-size: 0.75rem; }
  .ubk-dash-card h4 { font-size: 0.85rem; }
  .ubk-record-media .ubk-noimg { font-size: 3rem; }
  .ubk-record-id-overlay { font-size: 0.8rem; }
  .ubk-record-title { font-size: 1.05rem; }
  .ubk-record-sub { font-size: 0.85rem; }
  .ubk-record-line { font-size: 0.82rem; }
  .ubk-record-line i { font-size: 0.85rem; }
  .ubk-record-desc p { font-size: 0.78rem; }
  .ubk-record-coords { font-size: 0.75rem; }
  .ubk-record-foot small { font-size: 0.78rem; }
  .ubk-grid-separator { font-size: 0.95rem; }
  .ubk-grid-separator i { font-size: 1.2rem; }
  .ubk-tile-icon { font-size: 1.8rem; }
  .ubk-tile span { font-size: 0.85rem; }
  .ubk-option .icon { font-size: 1.8em; }
  .ubk-option h3 { font-size: 0.85em; }
  .ubk-table th { font-size: 0.8rem; }
  .ubk-table-clean table { font-size: 0.85rem; }
  .ubk-sort-arrows { font-size: 0.65rem; }
  .ubk-group-row td { font-size: 0.9rem !important; }
  .ubk-group-count { font-size: 0.75rem; }
  .ubk-selection-count { font-size: 0.7rem; }
  .ubk-table-controls-left,
.ubk-table-controls-right { font-size: 0.85rem; }
  .ubk-table-controls-left select { font-size: 0.85rem; }
  .ubk-pagination-info { font-size: 0.82rem; }
  .ubk-page-btn { font-size: 0.8rem; }
  .ubk-page-ellipsis { font-size: 0.82rem; }
  .ubk-page-size { font-size: 0.78rem; }
  .ubk-page-size-btn { font-size: 0.75rem; }
  .ubk-pill { font-size: 0.73rem; }
  .ubk-pill-comp { font-size: 0.78rem; }
  .ubk-pill-comp i { font-size: 0.85rem; }
  .ubk-pill-count { font-size: 0.68rem; }
  .ubk-filter-box-label { font-size: 0.68rem; }
  .ubk-search input { font-size: 0.8rem; }
  .ubk-search i { font-size: 0.75rem; }
  .ubk-filter-notice { font-size: 0.75rem; }
  .ubk-chip { font-size: 0.68rem; }
  .ubk-badge { font-size: 0.75rem; }
  .ubk-status { font-size: 0.65rem; }
  .ubk-sla { font-size: 0.6rem; }
  .ubk-prio { font-size: 0.6rem; }
  .ubk-count-badge { font-size: 0.68rem; }
  .ubk-id-pill { font-size: 0.7rem; }
  .ubk-name-row { font-size: 0.85rem; }
  .ubk-sub-name { font-size: 0.82rem; }
  .ubk-sub-family { font-size: 0.72rem; }
  .ubk-tab { font-size: 0.85rem; }
  .ubk-subtab { font-size: 0.88rem; }
  .ubk-segtab { font-size: 0.8rem; }
  .ubk-segtab-count { font-size: 0.68rem; }
  .ubk-tab-pill { font-size: 0.9rem; }
  .ubk-modal-head h3 { font-size: 1.1rem; }
  .ubk-modal-close { font-size: 1.5rem; }
  .ubk-field-group label { font-size: 0.8rem; }
  .ubk-field-group .value { font-size: 0.85rem; }
  .ubk-control { font-size: 0.85rem; }
  .ubk-control--sm { font-size: 0.82rem; }
  .ubk-label { font-size: 0.72rem; }
  .ubk-hint { font-size: 0.72rem; }
  .ubk-alert { font-size: 0.85rem; }
  .ubk-note { font-size: 0.82rem; }
  .ubk-warn-strip { font-size: 0.72rem; }
  .ubk-error-box { font-size: 0.76rem; }
  .ubk-error-box code { font-size: 0.7rem; }
  .ubk-banner { font-size: 0.82rem; }
  .ubk-toast { font-size: 0.78rem; }
  .ubk-empty { font-size: 0.82rem; }
  .ubk-empty--block i { font-size: 1.8rem; }
  .ubk-empty--block p { font-size: 0.9rem; }
  .ubk-bar-label { font-size: 0.75rem; }
  .ubk-bar-value { font-size: 0.7rem; }
  .ubk-donut-legend-item { font-size: 0.8rem; }
  .ubk-simulated { font-size: 0.62rem; }
  .ubk-simulated--sm { font-size: 0.55rem; }
  .ubk-live { font-size: 0.78rem; }
  .ubk-live-icon { font-size: 0.9rem; }
  .ubk-live-detail { font-size: 0.68rem; }
  .ubk-live-retry { font-size: 0.72rem; }
  .ubk-chip-state { font-size: 0.7rem; }
  .ubk-stamp { font-size: 0.66rem; }
  .ubk-kbd { font-size: 0.72rem; }
  .ubk-kpi-body { min-width: 0; }
  .ubk-table-clean table { min-width: 700px; }
  .ubk-col-check { min-width: 34px; }
  .ubk-page-btn { min-width: 32px; }
  .ubk-count-badge { min-width: 24px; }
  .ubk-live-text { min-width: 0; }
  .ubk-btn--block { width: 100%; }
  .ubk-icon-btn { width: 36px; }
  .ubk-icon-btn--sm { width: 30px; }
  .ubk-kpi-icon { width: 44px; }
  .ubk-record-media { width: 100%; }
  .ubk-record-media img { width: 100%; }
  .ubk-option { width: 140px; }
  .ubk-table-wrap { width: 100%; }
  .ubk-table { width: 100%; }
  .ubk-table-clean table { width: 100%; }
  .ubk-th-sortable-inner { width: 100%; }
  .ubk-col-check { width: 34px; }
  .ubk-col-check input[type="checkbox"] { width: 15px; }
  .ubk-pill-dot { width: 7px; }
  .ubk-filter-row { width: 100%; }
  .ubk-search { width: 200px; }
  .ubk-search input { width: 100%; }
  .ubk-tabs { width: 100%; }
  .ubk-modal { width: 100%; }
  .ubk-control { width: 100%; }
  .ubk-switch { width: 60px; }
  .ubk-switch input { width: 0; }
  .ubk-switch-track::before { width: 24px; }
  .ubk-switch--sm { width: 40px; }
  .ubk-switch--sm .ubk-switch-track::before { width: 16px; }
  .ubk-bar-label { width: 80px; }
  .ubk-bar-value { width: 40px; }
  .ubk-donut svg { width: 120px; }
  .ubk-donut-dot { width: 12px; }
  .ubk-icon-btn { height: 36px; }
  .ubk-icon-btn--sm { height: 30px; }
  .ubk-kpi-icon { height: 44px; }
  .ubk-record-media { height: 190px; }
  .ubk-record-media img { height: 100%; }
  .ubk-col-check input[type="checkbox"] { height: 15px; }
  .ubk-page-btn { height: 32px; }
  .ubk-pill { height: 26px; }
  .ubk-pill-dot { height: 7px; }
  .ubk-pill-comp { height: 32px; }
  .ubk-search input { height: 32px; }
  .ubk-switch { height: 30px; }
  .ubk-switch input { height: 0; }
  .ubk-switch-track::before { height: 24px; }
  .ubk-switch--sm { height: 20px; }
  .ubk-switch--sm .ubk-switch-track::before { height: 16px; }
  .ubk-bar-track { height: 18px; }
  .ubk-bar-fill { height: 100%; }
  .ubk-donut svg { height: 120px; }
  .ubk-donut-dot { height: 12px; }
  .ubk-progress { height: 6px; }
  .ubk-progress-fill { height: 100%; }
  .ubk-btn { display: inline-flex; }
  .ubk-btn-group { display: inline-flex; }
  .ubk-icon-btn { display: inline-flex; }
  .ubk-action-btn { display: inline-flex; }
  .ubk-export-btn { display: inline-flex; }
  .ubk-kpi-grid { display: grid; }
  .ubk-kpi { display: flex; }
  .ubk-kpi-icon { display: flex; }
  .ubk-stat b { display: block; }
  .ubk-glass-title { display: flex; }
  .ubk-card > h3 { display: flex; }
  .ubk-dash-grid { display: grid; }
  .ubk-dash-card h4 { display: flex; }
  .ubk-record-grid { display: grid; }
  .ubk-record { display: flex; }
  .ubk-record-media img { display: block; }
  .ubk-record-media .ubk-noimg { display: flex; }
  .ubk-record-head { display: flex; }
  .ubk-record-sub { display: flex; }
  .ubk-record-line { display: flex; }
  .ubk-record-desc p { display: -webkit-box; }
  .ubk-record-coords { display: flex; }
  .ubk-record-foot { display: flex; }
  .ubk-record-foot small { display: flex; }
  .ubk-record-actions { display: flex; }
  .ubk-grid-separator { display: flex; }
  .ubk-tile-grid { display: grid; }
  .ubk-option-row { display: flex; }
  .ubk-option { display: flex; }
  .ubk-th-sortable-inner { display: inline-flex; }
  .ubk-sort-arrows { display: inline-flex; }
  .ubk-table-controls { display: flex; }
  .ubk-table-controls-left,
.ubk-table-controls-right { display: flex; }
  .ubk-pagination { display: flex; }
  .ubk-pagination-bar { display: flex; }
  .ubk-pagination-nav { display: inline-flex; }
  .ubk-page-btn { display: inline-flex; }
  .ubk-page-size { display: inline-flex; }
  .ubk-pill { display: inline-flex; }
  .ubk-pill-dot { display: inline-block; }
  .ubk-pill-comp { display: inline-flex; }
  .ubk-filter-box { display: flex; }
  .ubk-filter-row { display: flex; }
  .ubk-filter-panel { display: flex; }
  .ubk-filter-notice { display: none; }
  .ubk-filter-notice.is-visible { display: flex; }
  .ubk-chip { display: inline-block; }
  .ubk-badge { display: inline-block; }
  .ubk-status { display: inline-block; }
  .ubk-sla { display: inline-block; }
  .ubk-prio { display: inline-block; }
  .ubk-count-badge { display: inline-flex; }
  .ubk-id-pill { display: inline-block; }
  .ubk-meta-row { display: flex; }
  .ubk-tabs { display: flex; }
  .ubk-tabs::-webkit-scrollbar { display: none; }
  .ubk-tab { display: flex; }
  .ubk-subtabs { display: flex; }
  .ubk-segtabs { display: flex; }
  .ubk-segtab-count { display: inline-block; }
  .ubk-tabs-pill { display: flex; }
  .ubk-tab-pill { display: flex; }
  .ubk-modal-overlay { display: none; }
  .ubk-modal-overlay.is-open { display: flex; }
  .ubk-modal-head { display: flex; }
  .ubk-modal-head h3 { display: flex; }
  .ubk-modal-foot { display: flex; }
  .ubk-field-group label { display: block; }
  .ubk-label { display: block; }
  .ubk-field { display: flex; }
  .ubk-form-grid { display: grid; }
  .ubk-switch { display: inline-block; }
  .ubk-alert { display: flex; }
  .ubk-warn-strip { display: flex; }
  .ubk-banner { display: flex; }
  .ubk-empty--block i { display: block; }
  .ubk-bars { display: flex; }
  .ubk-bar-item { display: flex; }
  .ubk-donut { display: flex; }
  .ubk-donut-legend { display: flex; }
  .ubk-donut-legend-item { display: flex; }
  .ubk-simulated { display: inline-block; }
  .ubk-live { display: flex; }
  .ubk-live-detail { display: block; }
  .ubk-live-retry { display: inline-flex; }
  .ubk-chip-state { display: inline-flex; }
  .ubk-stamp { display: inline-block; }
  .ubk-hide-md { display: none !important; }
  .ubk-kpi-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .ubk-dash-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .ubk-record-grid { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
  .ubk-tile-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .ubk-form-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .ubk-record { flex-direction: column; }
  .ubk-option { flex-direction: column; }
  .ubk-sort-arrows { flex-direction: column; }
  .ubk-filter-panel { flex-direction: column; }
  .ubk-field { flex-direction: column; }
  .ubk-bars { flex-direction: column; }
  .ubk-donut-legend { flex-direction: column; }
  .ubk-btn { align-items: center; }
  .ubk-icon-btn { align-items: center; }
  .ubk-action-btn { align-items: center; }
  .ubk-export-btn { align-items: center; }
  .ubk-kpi { align-items: center; }
  .ubk-kpi-icon { align-items: center; }
  .ubk-glass-title { align-items: center; }
  .ubk-card > h3 { align-items: center; }
  .ubk-dash-card h4 { align-items: center; }
  .ubk-record-media .ubk-noimg { align-items: center; }
  .ubk-record-head { align-items: center; }
  .ubk-record-foot { align-items: center; }
  .ubk-grid-separator { align-items: center; }
  .ubk-option { align-items: center; }
  .ubk-th-sortable-inner { align-items: center; }
  .ubk-table-controls { align-items: center; }
  .ubk-table-controls-left,
.ubk-table-controls-right { align-items: center; }
  .ubk-pagination { align-items: center; }
  .ubk-pagination-bar { align-items: center; }
  .ubk-pagination-nav { align-items: center; }
  .ubk-page-btn { align-items: center; }
  .ubk-page-size { align-items: center; }
  .ubk-pill { align-items: center; }
  .ubk-pill-comp { align-items: center; }
  .ubk-filter-box { align-items: center; }
  .ubk-filter-row { align-items: center; }
  .ubk-filter-notice { align-items: center; }
  .ubk-count-badge { align-items: center; }
  .ubk-meta-row { align-items: center; }
  .ubk-tab { align-items: center; }
  .ubk-tab-pill { align-items: center; }
  .ubk-modal-overlay { align-items: center; }
  .ubk-modal-head { align-items: center; }
  .ubk-modal-head h3 { align-items: center; }
  .ubk-alert { align-items: center; }
  .ubk-warn-strip { align-items: center; }
  .ubk-banner { align-items: center; }
  .ubk-bar-item { align-items: center; }
  .ubk-donut { align-items: center; }
  .ubk-donut-legend-item { align-items: center; }
  .ubk-live { align-items: center; }
  .ubk-live-retry { align-items: center; }
  .ubk-chip-state { align-items: center; }
  .ubk-btn { gap: 8px; }
  .ubk-btn-group { gap: 8px; }
  .ubk-action-btn { gap: 5px; }
  .ubk-export-btn { gap: 5px; }
  .ubk-kpi-grid { gap: 12px; }
  .ubk-kpi { gap: 14px; }
  .ubk-glass-title { gap: 10px; }
  .ubk-card > h3 { gap: 8px; }
  .ubk-dash-grid { gap: 20px; }
  .ubk-dash-card h4 { gap: 8px; }
  .ubk-record-grid { gap: 20px; }
  .ubk-record-sub { gap: 4px; }
  .ubk-record-line { gap: 6px; }
  .ubk-record-coords { gap: 6px; }
  .ubk-record-foot small { gap: 4px; }
  .ubk-record-actions { gap: 6px; }
  .ubk-grid-separator { gap: 12px; }
  .ubk-tile-grid { gap: 15px; }
  .ubk-option-row { gap: 15px; }
  .ubk-th-sortable-inner { gap: 6px; }
  .ubk-table-controls { gap: 12px; }
  .ubk-table-controls-left,
.ubk-table-controls-right { gap: 8px; }
  .ubk-pagination { gap: 4px; }
  .ubk-pagination-bar { gap: 10px; }
  .ubk-pagination-nav { gap: 4px; }
  .ubk-page-size { gap: 4px; }
  .ubk-pill { gap: 4px; }
  .ubk-pill-comp { gap: 5px; }
  .ubk-filter-box { gap: 5px; }
  .ubk-filter-row { gap: 12px; }
  .ubk-filter-panel { gap: 10px; }
  .ubk-meta-row { gap: 8px; }
  .ubk-tab { gap: 8px; }
  .ubk-subtabs { gap: 10px; }
  .ubk-segtabs { gap: 6px; }
  .ubk-tabs-pill { gap: 10px; }
  .ubk-tab-pill { gap: 8px; }
  .ubk-modal-head h3 { gap: 8px; }
  .ubk-modal-foot { gap: 10px; }
  .ubk-field { gap: 4px; }
  .ubk-form-grid { gap: 12px; }
  .ubk-alert { gap: 10px; }
  .ubk-warn-strip { gap: 7px; }
  .ubk-banner { gap: 10px; }
  .ubk-bars { gap: 8px; }
  .ubk-bar-item { gap: 10px; }
  .ubk-donut { gap: 30px; }
  .ubk-donut-legend { gap: 6px; }
  .ubk-donut-legend-item { gap: 8px; }
  .ubk-live { gap: 8px; }
  .ubk-live-retry { gap: 5px; }
  .ubk-chip-state { gap: 6px; }
  .ubk-btn { justify-content: center; }
  .ubk-icon-btn { justify-content: center; }
  .ubk-kpi-icon { justify-content: center; }
  .ubk-record-media .ubk-noimg { justify-content: center; }
  .ubk-record-head { justify-content: space-between; }
  .ubk-record-foot { justify-content: space-between; }
  .ubk-option-row { justify-content: flex-start; }
  .ubk-table-controls { justify-content: space-between; }
  .ubk-pagination { justify-content: center; }
  .ubk-pagination-bar { justify-content: space-between; }
  .ubk-page-btn { justify-content: center; }
  .ubk-filter-notice { justify-content: space-between; }
  .ubk-count-badge { justify-content: center; }
  .ubk-tab { justify-content: center; }
  .ubk-modal-overlay { justify-content: center; }
  .ubk-modal-head { justify-content: space-between; }
  .ubk-modal-foot { justify-content: flex-end; }
  .ubk-donut { justify-content: center; }
  .ubk-col-check { padding-right: 4px !important; }
  .ubk-simulated-host > .ubk-simulated + h1,
.ubk-simulated-host > .ubk-simulated + h2,
.ubk-simulated-host > .ubk-simulated + h3,
.ubk-simulated-host > .ubk-simulated + h4,
.ubk-simulated-host > .ubk-simulated + .ubk-kpi-label,
.ubk-simulated-host > .ubk-simulated + .ubk-glass-title,
.ubk-simulated-host > .ubk-simulated + .ubk-card > h3,
.ubk-simulated-host > .ubk-simulated + .card-title { padding-right: 126px; }
  .ubk-simulated-host--sm > .ubk-simulated + * { padding-right: 118px; }

  /* Propiedades que solo existían en la consulta de móvil: vuelven a su valor por defecto */
  .ubk-table td { font-size: inherit; }
  .ubk-action-btn span { display: revert; }
  .ubk-table-controls { flex-direction: revert; }
  .ubk-table-controls-right { justify-content: revert; }
  .ubk-pagination-bar { flex-direction: revert; }
  .ubk-pagination-nav { justify-content: revert; }
  .ubk-simulated-host > .ubk-simulated + * { padding-right: revert; }
  .ubk-simulated-host > .ubk-simulated + * { padding-top: revert; }
}

/* --- A partir de 993px: se recupera el aspecto de tableta/escritorio --- */
/*     Se reproduce la cascada original de las propiedades afectadas, para     */
/*     que el orden de las reglas base siga decidiendo igual que antes.        */
@media (min-width: 993px) {
  .ubk-btn { display: inline-flex; }
  .ubk-btn-group { display: inline-flex; }
  .ubk-icon-btn { display: inline-flex; }
  .ubk-action-btn { display: inline-flex; }
  .ubk-export-btn { display: inline-flex; }
  .ubk-kpi-grid { display: grid; }
  .ubk-kpi { display: flex; }
  .ubk-kpi-icon { display: flex; }
  .ubk-stat b { display: block; }
  .ubk-glass-title { display: flex; }
  .ubk-card > h3 { display: flex; }
  .ubk-dash-grid { display: grid; }
  .ubk-dash-card h4 { display: flex; }
  .ubk-record-grid { display: grid; }
  .ubk-record { display: flex; }
  .ubk-record-media img { display: block; }
  .ubk-record-media .ubk-noimg { display: flex; }
  .ubk-record-head { display: flex; }
  .ubk-record-sub { display: flex; }
  .ubk-record-line { display: flex; }
  .ubk-record-desc p { display: -webkit-box; }
  .ubk-record-coords { display: flex; }
  .ubk-record-foot { display: flex; }
  .ubk-record-foot small { display: flex; }
  .ubk-record-actions { display: flex; }
  .ubk-grid-separator { display: flex; }
  .ubk-tile-grid { display: grid; }
  .ubk-option-row { display: flex; }
  .ubk-option { display: flex; }
  .ubk-th-sortable-inner { display: inline-flex; }
  .ubk-sort-arrows { display: inline-flex; }
  .ubk-table-controls { display: flex; }
  .ubk-table-controls-left,
.ubk-table-controls-right { display: flex; }
  .ubk-pagination { display: flex; }
  .ubk-pagination-bar { display: flex; }
  .ubk-pagination-nav { display: inline-flex; }
  .ubk-page-btn { display: inline-flex; }
  .ubk-page-size { display: inline-flex; }
  .ubk-pill { display: inline-flex; }
  .ubk-pill-dot { display: inline-block; }
  .ubk-pill-comp { display: inline-flex; }
  .ubk-filter-box { display: flex; }
  .ubk-filter-row { display: flex; }
  .ubk-filter-panel { display: flex; }
  .ubk-filter-notice { display: none; }
  .ubk-filter-notice.is-visible { display: flex; }
  .ubk-chip { display: inline-block; }
  .ubk-badge { display: inline-block; }
  .ubk-status { display: inline-block; }
  .ubk-sla { display: inline-block; }
  .ubk-prio { display: inline-block; }
  .ubk-count-badge { display: inline-flex; }
  .ubk-id-pill { display: inline-block; }
  .ubk-meta-row { display: flex; }
  .ubk-tabs { display: flex; }
  .ubk-tabs::-webkit-scrollbar { display: none; }
  .ubk-tab { display: flex; }
  .ubk-subtabs { display: flex; }
  .ubk-segtabs { display: flex; }
  .ubk-segtab-count { display: inline-block; }
  .ubk-tabs-pill { display: flex; }
  .ubk-tab-pill { display: flex; }
  .ubk-modal-overlay { display: none; }
  .ubk-modal-overlay.is-open { display: flex; }
  .ubk-modal-head { display: flex; }
  .ubk-modal-head h3 { display: flex; }
  .ubk-modal-foot { display: flex; }
  .ubk-field-group label { display: block; }
  .ubk-label { display: block; }
  .ubk-field { display: flex; }
  .ubk-form-grid { display: grid; }
  .ubk-switch { display: inline-block; }
  .ubk-alert { display: flex; }
  .ubk-warn-strip { display: flex; }
  .ubk-banner { display: flex; }
  .ubk-empty--block i { display: block; }
  .ubk-bars { display: flex; }
  .ubk-bar-item { display: flex; }
  .ubk-donut { display: flex; }
  .ubk-donut-legend { display: flex; }
  .ubk-donut-legend-item { display: flex; }
  .ubk-simulated { display: inline-block; }
  .ubk-live { display: flex; }
  .ubk-live-detail { display: block; }
  .ubk-live-retry { display: inline-flex; }
  .ubk-chip-state { display: inline-flex; }
  .ubk-stamp { display: inline-block; }

  /* Propiedades que solo existían en la consulta de móvil: vuelven a su valor por defecto */
  .ubk-hide-md { display: revert; }
}

@keyframes ubkFadeIn {
from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); }
}

@keyframes ubkPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(234, 88, 12, 0.55); }
  50%      { box-shadow: 0 0 0 8px rgba(234, 88, 12, 0); }
}

@keyframes ubkRowIn {
from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); }
}

/* === 04-modules.css === */
/* ============================================================================
   CONVERTIDO A MOBILE-FIRST automáticamente
   ----------------------------------------------------------------------------
   La base describe el MÓVIL. El aspecto de tableta y escritorio se AÑADE con
   bloques @media (min-width: …), de menor a mayor. Los valores son los mismos
   que en el fichero original: solo cambia el orden y el sentido de las consultas.
   ========================================================================= */

/* ============================================================================
   UBIKUA · SISTEMA DE DISEÑO
   04 — COMPONENTES DE MÓDULO
   ----------------------------------------------------------------------------
   Piezas que solo aparecen en determinados módulos, pero que forman parte del
   lenguaje visual de la plataforma:
     · Mantenimiento (pestañas, tarjetas de preventivo, kanban, flujo)
     · Detalle 360 (dos columnas, galería de evidencias, visor ampliado)
     · Calendario (rejilla mensual y matriz contractual)
     · Documental (árbol de carpetas, lista de documentos, panel de previsualización)
     · Herramienta de datos (árbol, rejillas, panel lateral, chips)
     · Wiki (renderizado de contenido)
     · ODS (paleta oficial)
     · Editor de flujos (nodos)
     · Hojas imprimibles A4
   Depende de: 01-tokens.css · 03-components.css
   ========================================================================= */

/* ============================================================================
   1. MANTENIMIENTO
   ========================================================================= */
.ubk-mant { color: var(--ubk-text-body); }
.ubk-mant b, .ubk-mant strong { font-weight: 600; }

/* Tabla densa del módulo */
.ubk-mant-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.ubk-mant-table th {
  background: var(--ubk-surface-alt); color: var(--ubk-text-muted);
  font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.3px;
  text-align: left; padding: 8px 10px; border: 1px solid var(--ubk-border);
}
.ubk-mant-table td { padding: 8px 10px; border: 1px solid var(--ubk-border); vertical-align: top; }
.ubk-mant-table tr:hover td { background: var(--ubk-surface-alt); }
.ubk-mant-table .num { white-space: nowrap; }

/* Caja de detalle inline */
.ubk-mant-detail {
  background: var(--ubk-surface-alt); border: 1px solid var(--ubk-border);
  border-left: 4px solid var(--ubk-primary); border-radius: var(--ubk-radius-md);
  padding: 14px 16px; margin-bottom: 16px;
}
.ubk-mant-detail table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.ubk-mant-detail th { text-align: left; color: var(--ubk-text-muted); font-weight: 600; padding: 6px 8px; width: 180px; vertical-align: top; }
.ubk-mant-detail td { padding: 6px 8px; color: var(--ubk-text); }

/* Mensajes */
.ubk-mant-msg {
  padding: 12px 16px; border-radius: var(--ubk-radius); margin-bottom: 14px;
  font-size: 0.85rem; font-weight: 600; display: flex; align-items: center; gap: 10px;
}
.ubk-mant-msg.ok  { background: var(--ubk-success-soft); color: var(--ubk-success); border: 1px solid var(--ubk-success-line); }
.ubk-mant-msg.err { background: var(--ubk-danger-soft); color: var(--ubk-danger); border: 1px solid var(--ubk-danger-line); }

/* Paginador del módulo */
.ubk-pager { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 12px; font-size: 0.82rem; color: var(--ubk-text-body); }
.ubk-pager a, .ubk-pager span {
  border: 1px solid var(--ubk-border-strong); background: var(--ubk-surface);
  color: var(--ubk-text-body); border-radius: 7px; padding: 5px 11px;
  text-decoration: none; font-weight: 600;
}
.ubk-pager a:hover { border-color: var(--ubk-primary); color: var(--ubk-primary); }
.ubk-pager .cur { background: var(--ubk-primary); color: var(--ubk-on-primary); border-color: var(--ubk-primary); }

/* Flujo de pasos */
.ubk-flow { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; margin-bottom: 14px; }
.ubk-flow-step {
  flex: 1; min-width: 150px; background: var(--ubk-surface);
  border: 1px solid var(--ubk-border); border-radius: var(--ubk-radius-md);
  padding: 12px; text-align: center;
}
.ubk-flow-step .ic { font-size: 1.4rem; color: var(--ubk-primary); margin-bottom: 6px; }
.ubk-flow-step b { display: block; font-size: 0.82rem; margin-bottom: 4px; color: var(--ubk-text); }
.ubk-flow-step small { color: var(--ubk-text-muted); font-size: 0.72rem; line-height: 1.35; display: block; }
.ubk-flow-step.alt .ic { color: #b45309; }
.ubk-flow-step.ok  .ic { color: var(--ubk-success); }
.ubk-flow-arrow { display: flex; align-items: center; color: var(--ubk-text-faint); font-size: 1.1rem; }

/* Kanban */
.ubk-kanban { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; align-items: start; }
.ubk-kanban-col { background: var(--ubk-surface-sunken); border-radius: var(--ubk-radius-md); padding: 10px; min-height: 350px; }
.ubk-kanban-head {
  display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.78rem;
  color: var(--ubk-text-body); padding: 4px 6px 10px;
  text-transform: uppercase; letter-spacing: 0.3px; justify-content: space-between;
}
.ubk-kanban-head .dot { width: 10px; height: 10px; border-radius: 50%; }
.ubk-kanban-count { background: var(--ubk-border); padding: 2px 10px; border-radius: 12px; font-size: 0.7rem; color: var(--ubk-text); }
.ubk-kanban-card {
  background: var(--ubk-surface); border: 1px solid var(--ubk-border);
  border-left: 4px solid var(--ubk-primary); border-radius: 9px;
  padding: 10px 14px; margin-bottom: 8px; cursor: pointer;
  box-shadow: var(--ubk-shadow-xs); transition: all var(--ubk-t);
}
.ubk-kanban-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }
.ubk-kanban-card b { font-size: 0.82rem; color: var(--ubk-primary); display: block; margin-bottom: 4px; }
.ubk-kanban-card .meta { font-size: 0.72rem; color: var(--ubk-text-muted); line-height: 1.5; }

/* ============================================================================
   2. TARJETAS DE PREVENTIVO / PLAN
   ========================================================================= */
.ubk-plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.ubk-plan {
  background: var(--ubk-surface); border: 1px solid var(--ubk-border);
  border-radius: var(--ubk-radius-lg); padding: 14px;
  border-top: 4px solid var(--ubk-plan-color, var(--ubk-primary));
  box-shadow: var(--ubk-shadow-xs);
}
.ubk-plan-head { display: flex; align-items: center; gap: 10px; }
.ubk-plan-ic {
  width: 40px; height: 40px; border-radius: var(--ubk-radius-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--ubk-on-primary); font-size: 1.1rem; flex-shrink: 0;
  background: var(--ubk-plan-color, var(--ubk-primary));
}
.ubk-plan-t { min-width: 0; flex: 1; }
.ubk-plan-t b { font-size: 0.92rem; font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ubk-plan-t small { color: var(--ubk-text-muted); font-size: 0.72rem; }
.ubk-plan-mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.ubk-plan-mini .m {
  background: var(--ubk-surface-alt); border: 1px solid var(--ubk-border);
  border-radius: var(--ubk-radius); padding: 8px; text-align: center;
}
.ubk-plan-mini .m b { display: block; font-size: 1.05rem; font-weight: 600; }
.ubk-plan-mini .m small { font-size: 0.62rem; color: var(--ubk-text-muted); text-transform: uppercase; }
.ubk-plan-mini .m.av b  { color: var(--ubk-danger); }
.ubk-plan-mini .m.op b  { color: #15803d; }
.ubk-plan-mini .m.inc b { color: #b45309; }
.ubk-plan-meta {
  font-size: 0.78rem; color: var(--ubk-text-body); margin: 10px 0;
  border-bottom: 1px dashed var(--ubk-border-soft); padding-bottom: 8px;
}
.ubk-plan-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* Chips de filtro por estado */
.ubk-state-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.ubk-state-chip {
  display: inline-flex; align-items: center; padding: 5px 13px;
  border-radius: var(--ubk-radius-pill); border: 1px solid var(--ubk-border-strong);
  background: var(--ubk-surface); color: var(--ubk-text-body);
  font-size: 0.76rem; font-weight: 600; text-decoration: none; cursor: pointer;
}
.ubk-state-chip.is-active { background: var(--ubk-primary); color: var(--ubk-on-primary); border-color: var(--ubk-primary); }

/* ============================================================================
   3. DETALLE 360 (dos columnas + galería)
   ========================================================================= */
.ubk360 { display: grid; grid-template-columns: 290px 1fr; gap: 14px; align-items: stretch; }
.ubk360-left {
  background: var(--ubk-surface); border: 1px solid var(--ubk-border);
  border-radius: var(--ubk-radius-md); padding: 12px;
  display: flex; flex-direction: column;
}
.ubk360-left table { font-size: 0.76rem; }
.ubk360-left table th { text-align: left; color: var(--ubk-text-muted); font-weight: 600; vertical-align: top; white-space: nowrap; padding: 4px 8px; }
.ubk360-left table td { padding: 4px 8px; }
.ubk360-right { display: flex; flex-direction: column; gap: 14px; }
.ubk360-top { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 14px; align-items: start; }
.ubk360-box { background: var(--ubk-surface); border: 1px solid var(--ubk-border); border-radius: var(--ubk-radius-md); padding: 12px; }
.ubk360-box h4 {
  margin: 0 0 10px; font-size: 0.82rem; color: var(--ubk-primary);
  border-bottom: 1px solid var(--ubk-border-soft); padding-bottom: 8px; font-weight: 600;
}
.ubk360-box table { font-size: 0.74rem; width: 100%; }
.ubk360-box table th { text-align: left; color: var(--ubk-text-muted); font-weight: 600; white-space: nowrap; padding: 3px 6px; }
.ubk360-box table td { padding: 3px 6px; word-break: break-word; }

.ubk-scroll-list { display: flex; flex-direction: column; gap: 6px; flex: 1; overflow: auto; padding-right: 2px; max-height: 560px; }
.ubk-list-item {
  display: flex; flex-direction: column; gap: 2px; padding: 8px;
  border: 1px solid var(--ubk-border); border-radius: var(--ubk-radius);
  text-decoration: none; color: var(--ubk-text); background: var(--ubk-surface); cursor: pointer;
}
.ubk-list-item:hover { background: var(--ubk-surface-alt); border-color: var(--ubk-primary); }
.ubk-list-item.is-selected { border-color: var(--ubk-primary); background: var(--ubk-info-soft); }
.ubk-list-item b { font-size: 0.8rem; font-weight: 600; }
.ubk-list-item small { font-size: 0.68rem; color: var(--ubk-text-muted); }
.ubk-list-item-top { display: flex; align-items: center; gap: 8px; }
.ubk-list-thumb {
  width: 40px; height: 40px; object-fit: cover; border-radius: var(--ubk-radius-sm);
  border: 1px solid var(--ubk-border); flex-shrink: 0; background: var(--ubk-surface-sunken);
}
.ubk-list-txt { min-width: 0; flex: 1; }

/* ============================================================================
   4. GALERÍA DE EVIDENCIAS
   ========================================================================= */
.ubk-gallery { width: 340px; max-width: 100%; }
.ubk-gallery-main {
  position: relative; width: 340px; height: 340px; max-width: 100%;
  background: var(--ubk-surface-sunken); border: 1px dashed var(--ubk-border-strong);
  border-radius: var(--ubk-radius); overflow: hidden;
  display: flex; align-items: center; justify-content: center; margin: 0 auto;
}
.ubk-gallery-main img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; display: block; }
.ubk-gallery-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%; border: none;
  background: rgba(255, 255, 255, 0.92); color: var(--ubk-text);
  cursor: pointer; box-shadow: 0 1px 4px rgba(15, 23, 42, 0.3);
  display: flex; align-items: center; justify-content: center; z-index: 2; font-size: 0.8rem;
}
.ubk-gallery-nav:hover { background: #fff; color: var(--ubk-primary); }
.ubk-gallery-nav.prev { left: 6px; }
.ubk-gallery-nav.next { right: 6px; }
.ubk-gallery-thumbs { display: flex; gap: 6px; margin-top: 10px; justify-content: center; flex-wrap: wrap; }
.ubk-gallery-thumb-wrap { position: relative; display: inline-flex; }
.ubk-gallery-thumb {
  width: 44px; height: 44px; object-fit: cover; border-radius: var(--ubk-radius-sm);
  border: 1px solid var(--ubk-border); cursor: zoom-in; flex-shrink: 0;
}
.ubk-gallery-thumb-empty { width: 44px; height: 44px; border: 1px dashed var(--ubk-border-strong); border-radius: var(--ubk-radius-sm); flex-shrink: 0; background: var(--ubk-surface-alt); }
.ubk-thumb-star {
  position: absolute; top: -4px; right: -4px; width: 16px; height: 16px;
  border-radius: 50%; border: none; background: #f59e0b; color: #fff;
  font-size: 0.5rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.ubk-thumb-star:hover { background: var(--ubk-warning); }

/* Visor ampliado */
.ubk-lightbox {
  position: fixed; inset: 0; background: rgba(15, 23, 42, 0.8);
  z-index: var(--ubk-z-modal-top); display: none; align-items: center; justify-content: center; padding: 20px;
}
.ubk-lightbox.is-open { display: flex; }
.ubk-lightbox-inner {
  position: relative; background: #111; border-radius: var(--ubk-radius-lg);
  max-width: 900px; width: 100%; max-height: 85vh; display: flex; flex-direction: column; overflow: hidden;
}
.ubk-lightbox-stage { position: relative; background: #000; display: flex; align-items: center; justify-content: center; }
.ubk-lightbox-stage img { width: 100%; max-height: calc(85vh - 130px); object-fit: contain; background: #000; }
.ubk-lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.9); border: none; border-radius: 50%;
  width: 38px; height: 38px; cursor: pointer; font-size: 1rem; color: var(--ubk-text);
}
.ubk-lightbox-nav:disabled { opacity: 0.25; cursor: default; }
.ubk-lightbox-nav.prev { left: 10px; }
.ubk-lightbox-nav.next { right: 10px; }
.ubk-lightbox-info { background: var(--ubk-surface); padding: 12px 16px; font-size: 0.8rem; }
.ubk-lightbox-close {
  position: absolute; top: 10px; right: 10px; background: #fff; border: none;
  border-radius: 50%; width: 32px; height: 32px; cursor: pointer; font-size: 1.2rem; z-index: 2; line-height: 1;
}

/* Rejilla del gestor de evidencias */
.ubk-evidence-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 12px; }
.ubk-evidence-card {
  position: relative; border: 1px solid var(--ubk-border); border-radius: var(--ubk-radius-md);
  background: var(--ubk-surface); padding: 8px;
  display: flex; flex-direction: column; gap: 8px; cursor: grab;
}
.ubk-evidence-card.is-dragging { opacity: 0.4; }
.ubk-evidence-card.is-target { border-color: var(--ubk-primary); box-shadow: 0 0 0 2px rgba(51, 102, 153, 0.25); }
.ubk-evidence-card img { width: 100%; height: 120px; object-fit: cover; border-radius: var(--ubk-radius-sm); background: var(--ubk-surface-sunken); cursor: zoom-in; display: block; }
.ubk-evidence-pos {
  position: absolute; top: 14px; left: 14px; background: rgba(15, 23, 42, 0.75);
  color: #fff; font-size: 0.66rem; font-weight: 700; border-radius: var(--ubk-radius-sm); padding: 1px 6px; z-index: 1;
}
.ubk-evidence-star {
  position: absolute; top: 14px; right: 14px; background: rgba(245, 158, 11, 0.95);
  color: #fff; font-size: 0.62rem; font-weight: 700; border-radius: var(--ubk-radius-sm); padding: 1px 6px; z-index: 1;
}
.ubk-dropzone {
  border: 2px dashed var(--ubk-border-strong); border-radius: var(--ubk-radius-md);
  padding: 18px; text-align: center; background: var(--ubk-surface-alt);
  color: var(--ubk-text-muted); cursor: pointer;
  transition: border-color var(--ubk-t), background var(--ubk-t);
}
.ubk-dropzone.is-over { border-color: var(--ubk-primary); background: var(--ubk-primary-light); color: var(--ubk-primary); }
.ubk-dropzone b { color: var(--ubk-text); }
.ubk-dropzone small { display: block; margin-top: 4px; font-size: 0.72rem; }

/* ============================================================================
   5. CALENDARIO
   ========================================================================= */

/* --- 5.1 Rejilla mensual --- */
.ubk-calendar {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
  background: var(--ubk-surface); border-radius: var(--ubk-radius-md);
  padding: 12px; border: 1px solid var(--ubk-border);
}
.ubk-calendar-head {
  font-weight: 700; font-size: 0.7rem; text-transform: uppercase;
  color: var(--ubk-text-muted); text-align: center; padding: 6px 0;
}
.ubk-calendar-day {
  aspect-ratio: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-start; padding-top: 4px; border-radius: var(--ubk-radius-sm);
  font-size: 0.8rem; font-weight: 500; color: var(--ubk-text);
  background: var(--ubk-surface-alt); position: relative; min-height: 60px;
  cursor: pointer; transition: var(--ubk-t); border: 1px solid transparent;
}
.ubk-calendar-day:hover { background: var(--ubk-border); }
.ubk-calendar-day.is-other { color: var(--ubk-text-faint); }
.ubk-calendar-day.is-today { background: var(--ubk-primary); color: var(--ubk-on-primary); font-weight: 700; border-color: var(--ubk-primary); }
.ubk-calendar-day .day-number { font-weight: 500; font-size: 0.8rem; margin-bottom: 2px; }
.ubk-calendar-event {
  font-size: 0.65rem; padding: 2px 4px; border-radius: 3px; margin-top: 2px;
  cursor: pointer; transition: var(--ubk-t); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 95%; width: 95%; color: #fff; font-weight: 600;
  line-height: 1.3; text-align: left; display: flex; align-items: center; gap: 4px;
}
.ubk-calendar-event:hover { opacity: 0.85; transform: scale(1.02); }
.ubk-calendar-legend {
  display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 12px 16px;
  background: var(--ubk-surface); border-radius: var(--ubk-radius-md);
  border: 1px solid var(--ubk-border); margin-bottom: 15px;
}
.ubk-calendar-legend-item { display: flex; align-items: center; gap: 6px; font-size: 0.72rem; color: var(--ubk-text-muted); }
.ubk-calendar-legend-dot { width: 16px; height: 16px; border-radius: var(--ubk-radius-xs); display: flex; align-items: center; justify-content: center; font-size: 0.6rem; color: #fff; }

/* --- 5.2 Matriz contractual --- */
.ubk-matrix { width: 100%; border-collapse: separate; border-spacing: 2px; font-size: 0.78rem; }
.ubk-matrix th {
  background: var(--ubk-surface-alt); color: var(--ubk-text-muted);
  font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px;
  padding: 8px 10px; text-align: center; border-radius: var(--ubk-radius-xs);
}
.ubk-matrix th.row-head { text-align: left; min-width: 190px; }
.ubk-matrix td { padding: 8px 10px; text-align: center; border-radius: var(--ubk-radius-xs); font-weight: 600; }
.ubk-matrix td.row-head { text-align: left; background: var(--ubk-surface-alt); font-weight: 600; }
.ubk-matrix .cell-ok      { background: #dcfce7; color: #15803d; }
.ubk-matrix .cell-late    { background: var(--ubk-warning-soft); color: var(--ubk-warning); }
.ubk-matrix .cell-missing { background: #ffedd5; color: #c2410c; border: 1px solid #fdba74; }
.ubk-matrix .cell-pending { background: #eff6ff; color: #1d4ed8; }
.ubk-matrix .cell-na      { background: var(--ubk-surface-sunken); color: var(--ubk-text-muted); font-weight: 400; }

/* --- 5.3 Calendario EAM (paleta propia) --- */
.ubk-eam {
  --eam-blue-dark: #072a42;
  --eam-blue: #0b3c5d;
  --eam-blue-light: #1565c0;
  --eam-orange: #d97724;
  --eam-muted: #64748b;
  --eam-border: #e2e8f0;
  --eam-text: #0f172a;
  --eam-success-bg: #ecfdf5;
  --eam-warning-bg: #fffbeb;
  --eam-danger-bg: #fef2f2;
}
.ubk-eam-head { margin-bottom: 24px; }
.ubk-eam-head h2 { font-size: 21px; font-weight: 800; color: var(--eam-blue-dark); margin-bottom: 4px; letter-spacing: -0.3px; }
.ubk-eam-loc { font-size: 13px; color: var(--eam-muted); }
.ubk-eam-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; margin-bottom: 25px; }
.ubk-eam-kpi {
  background: #fff; border: 1px solid var(--eam-border); border-radius: var(--ubk-radius);
  padding: 16px; border-left: 4px solid var(--eam-blue); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}
.ubk-eam-kpi b { display: block; font-size: 22px; font-weight: 800; color: var(--eam-blue-dark); margin-bottom: 2px; }
.ubk-eam-kpi small { font-size: 11px; color: var(--eam-muted); text-transform: uppercase; font-weight: 700; letter-spacing: 0.5px; }
.ubk-eam-block {
  background: #fff; border: 1px solid var(--eam-border); border-radius: var(--ubk-radius);
  padding: 22px; margin-bottom: 25px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}
.ubk-eam-block h3 {
  font-size: 15px; font-weight: 700; color: var(--eam-blue-dark);
  margin-bottom: 16px; border-bottom: 1px solid var(--eam-border); padding-bottom: 10px;
}
.ubk-eam-list { width: 100%; border-collapse: collapse; font-size: 13px; }
.ubk-eam-list th {
  background: var(--ubk-surface-alt); color: var(--eam-muted); font-weight: 700;
  text-transform: uppercase; font-size: 11px; letter-spacing: 0.5px;
  padding: 10px 14px; border-bottom: 1px solid var(--eam-border); text-align: left;
}
.ubk-eam-list td { padding: 11px 14px; border-bottom: 1px solid var(--eam-border); color: var(--eam-text); vertical-align: middle; }
.ubk-eam-list tbody tr:hover { background: var(--ubk-surface-alt); }
.ubk-eam-pill { display: inline-block; padding: 3px 8px; border-radius: var(--ubk-radius-xs); font-size: 11.5px; font-weight: 600; background: var(--ubk-surface-sunken); color: var(--ubk-text-body); }
.ubk-eam-pill.ok   { background: var(--eam-success-bg); color: #15803d; border: 1px solid #bbf7d0; }
.ubk-eam-pill.warn { background: var(--eam-warning-bg); color: #b45309; border: 1px solid #fde68a; }
.ubk-eam-pill.bad  { background: var(--eam-danger-bg);  color: #b91c1c; border: 1px solid #fecaca; }
.ubk-eam-btn {
  display: inline-flex; align-items: center; gap: 6px; background: var(--ubk-primary);
  color: var(--ubk-on-primary); text-decoration: none; padding: 7px 14px; border-radius: var(--ubk-radius);
  font-size: 12px; font-weight: 600; border: 1px solid var(--ubk-primary);
  cursor: pointer; transition: all 0.15s; font-family: inherit;
}
.ubk-eam-btn:hover { filter: brightness(0.9); }
.ubk-eam-btn.is-sec { background: var(--ubk-surface); color: var(--ubk-text-body); border-color: var(--ubk-border-strong); }
.ubk-eam-btn.is-sec:hover { background: var(--ubk-surface-alt); color: var(--ubk-primary); border-color: var(--ubk-primary); }
.ubk-eam-btn.is-orange { background: var(--ubk-secondary); color: var(--ubk-on-secondary); font-weight: 700; border-color: var(--ubk-secondary); }

/* ============================================================================
   6. GESTIÓN DOCUMENTAL
   ========================================================================= */
.ubk-doc-layout { display: flex; gap: 20px; }
.ubk-tree {
  width: 320px; flex-shrink: 0; background: var(--ubk-surface);
  border-radius: var(--ubk-radius-md); padding: 14px 8px;
  max-height: 680px; overflow-y: auto; border: 1px solid var(--ubk-border);
}
.ubk-tree-item {
  padding: 8px 12px; border-radius: var(--ubk-radius-sm); font-size: 0.85rem;
  color: var(--ubk-text-body); cursor: pointer; transition: 0.15s;
  display: flex; align-items: center; gap: 8px;
}
.ubk-tree-item:hover { background: var(--ubk-surface-sunken); }
.ubk-tree-item.is-active { background: var(--ubk-primary-light); color: var(--ubk-primary); font-weight: 600; }
.ubk-tree-item i { color: var(--ubk-warning); font-size: 1rem; }
.ubk-tree-badge {
  font-size: 0.7rem; background: var(--ubk-border); padding: 2px 8px;
  border-radius: 12px; margin-left: auto; color: var(--ubk-text-body);
}
.ubk-tree-item.is-active .ubk-tree-badge { background: var(--ubk-info-soft); color: var(--ubk-info); }
.ubk-tree-chevron { font-size: 0.7rem; margin-left: auto; transition: transform var(--ubk-t); }
.ubk-tree-chevron.is-open { transform: rotate(90deg); }
.ubk-tree-children { padding-left: 18px; }

.ubk-doc-list {
  flex: 1; min-width: 0; background: var(--ubk-surface);
  border-radius: var(--ubk-radius-md); padding: 16px; border: 1px solid var(--ubk-border);
}
.ubk-doc-item {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px;
  border-radius: var(--ubk-radius); border: 1px solid var(--ubk-border-soft);
  cursor: pointer; transition: all var(--ubk-t);
}
.ubk-doc-item:hover { background: var(--ubk-surface-alt); transform: translateX(3px); }
.ubk-doc-icon {
  width: 38px; height: 38px; border-radius: var(--ubk-radius); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
}
.ubk-doc-name { font-size: 0.9rem; font-weight: 600; color: var(--ubk-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ubk-doc-meta { display: flex; gap: 12px; font-size: 0.75rem; color: var(--ubk-text-muted); flex-wrap: wrap; }
.ubk-doc-body { flex: 1; min-width: 0; }

/* Colores por tipo de documento */
.ubk-doc-icon--pdf   { background: var(--ubk-danger-soft);  color: var(--ubk-danger); }
.ubk-doc-icon--word  { background: #dbeafe; color: #2563eb; }
.ubk-doc-icon--excel { background: var(--ubk-success-soft); color: var(--ubk-success); }
.ubk-doc-icon--slides{ background: #ffedd5; color: #ea580c; }
.ubk-doc-icon--image { background: var(--ubk-accent-soft);  color: var(--ubk-accent); }
.ubk-doc-icon--video { background: var(--ubk-warning-soft); color: var(--ubk-warning); }
.ubk-doc-icon--folder{ background: var(--ubk-warning-soft); color: var(--ubk-warning); }
.ubk-doc-icon--other { background: var(--ubk-surface-sunken); color: var(--ubk-text-muted); }

/* Etiquetas de documento */
.ubk-doc-tag { padding: 2px 8px; border-radius: var(--ubk-radius-xs); font-size: 0.7rem; font-weight: 600; background: var(--ubk-surface-sunken); color: var(--ubk-text-body); }
.ubk-doc-tag--contract { background: #dbeafe; color: #1d4ed8; }
.ubk-doc-tag--report   { background: var(--ubk-success-soft); color: var(--ubk-success); }
.ubk-doc-tag--plan     { background: var(--ubk-warning-soft); color: var(--ubk-warning); }
.ubk-doc-tag--fix      { background: var(--ubk-danger-soft); color: var(--ubk-danger); }
.ubk-doc-tag--ai       { background: var(--ubk-accent-soft); color: var(--ubk-accent); }
.ubk-doc-tag--comp     { background: var(--ubk-info-soft); color: var(--ubk-info); }

/* Panel de previsualización deslizante */
.ubk-preview {
  position: fixed; top: 64px; right: 0; width: min(1180px, 94vw);
  height: calc(100vh - 64px); background: var(--ubk-surface);
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.12);
  z-index: var(--ubk-z-overlay);
  transform: translateX(100%);
  transition: transform var(--ubk-t-slow) var(--ubk-ease-out);
  display: flex; flex-direction: column;
}
.ubk-preview.is-open { transform: none; }
.ubk-preview-head {
  padding: 10px 16px; background: var(--ubk-surface-alt); border-bottom: 1px solid var(--ubk-border);
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.ubk-preview-head h3 { font-size: 0.98rem; margin: 0; }
.ubk-preview-body { position: relative; flex: 1; min-height: 0; overflow: hidden; display: flex; }
.ubk-preview-stage { flex: 1; background: #eef2f7; position: relative; }
.ubk-preview-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ubk-preview-gate {
  position: absolute; inset: 0; padding: 28px; background: var(--ubk-surface-alt);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; font-size: 0.88rem; color: var(--ubk-text-muted);
}
.ubk-preview-gate i { font-size: 2.8rem; }
.ubk-preview-gate strong { font-size: 1rem; color: var(--ubk-text); }
.ubk-preview-gate span { max-width: 520px; line-height: 1.5; }
.ubk-preview-details {
  position: absolute; inset: 0; z-index: 30; background: var(--ubk-surface);
  overflow-y: auto; padding: 18px 22px 26px;
  display: flex; flex-direction: column; gap: 14px;
}
.ubk-preview-card { background: var(--ubk-surface-alt); border-radius: var(--ubk-radius); padding: 14px 16px; }
.ubk-preview-card.is-ai { background: #faf5ff; border: 1px solid var(--ubk-accent-line); }
.ubk-preview-card h4 { font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--ubk-text-muted); margin: 0 0 8px; }
.ubk-preview-card.is-ai h4 { color: #581c87; }
.ubk-preview-card.is-ai p { font-size: 0.84rem; color: #3b0764; margin: 0; }
.ubk-preview-meta { display: grid; grid-template-columns: 150px 1fr; gap: 8px 12px; font-size: 0.82rem; }
.ubk-preview-meta dt { color: var(--ubk-text-muted); font-weight: 600; }
.ubk-preview-meta dd { margin: 0; color: var(--ubk-text); word-break: break-word; }
.ubk-preview-meta dd.is-mono { font-family: var(--ubk-font-mono); font-size: 0.74rem; }

/* Botón flotante de chat del módulo */
.ubk-chat-toggle {
  position: fixed; bottom: 24px; right: 24px; width: 56px; height: 56px;
  border-radius: 50%; background: linear-gradient(135deg, var(--ubk-primary), var(--ubk-accent));
  color: var(--ubk-on-primary); border: none; font-size: 1.5rem; cursor: pointer;
  box-shadow: 0 4px 16px rgba(51, 102, 153, 0.35); z-index: var(--ubk-z-floating);
  display: flex; align-items: center; justify-content: center;
}
.ubk-chat-toggle:hover { transform: scale(1.08); box-shadow: 0 6px 22px rgba(124, 58, 237, 0.45); }
.ubk-chat {
  position: fixed; bottom: 90px; right: 24px; width: 380px; max-height: 540px;
  background: var(--ubk-surface); border-radius: var(--ubk-radius-lg);
  box-shadow: var(--ubk-shadow-lg); z-index: var(--ubk-z-floating);
  display: none; flex-direction: column; overflow: hidden; border: 1px solid var(--ubk-border);
}
.ubk-chat.is-open { display: flex; }
.ubk-chat-head { background: linear-gradient(135deg, var(--ubk-primary), var(--ubk-accent)); color: var(--ubk-on-primary); padding: 14px 18px; }
.ubk-chat-body { flex: 1; overflow-y: auto; padding: 14px; background: var(--ubk-surface-alt); display: flex; flex-direction: column; gap: 10px; max-height: 320px; }
.ubk-chat-msg { padding: 10px 14px; border-radius: var(--ubk-radius); font-size: 0.85rem; max-width: 88%; line-height: 1.45; }
.ubk-chat-msg.is-bot  { background: var(--ubk-surface); border: 1px solid var(--ubk-border); align-self: flex-start; }
.ubk-chat-msg.is-user { background: var(--ubk-primary); color: var(--ubk-on-primary); align-self: flex-end; }
.ubk-chat-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px; background: var(--ubk-surface); border-top: 1px solid var(--ubk-border); }
.ubk-chat-chip { background: var(--ubk-surface-sunken); border: none; border-radius: var(--ubk-radius-sm); padding: 6px 11px; font-size: 0.75rem; color: var(--ubk-text-body); cursor: pointer; font-family: inherit; }
.ubk-chat-chip:hover { background: var(--ubk-border); }

/* ============================================================================
   7. HERRAMIENTA DE DATOS (árbol + rejillas + panel lateral)
   ========================================================================= */
.ubk-tool { max-width: 100%; }
.ubk-tool-portada {
  position: relative; background: var(--ubk-surface); border: 1px solid var(--ubk-border);
  border-radius: var(--ubk-radius-xl); padding: 44px 32px 30px; text-align: center;
}
.ubk-tool-portada .ubk-stamp { position: absolute; top: 12px; right: 12px; }
.ubk-tool-question { margin: 0 0 26px; font-size: 1.6rem; font-weight: 800; color: var(--ubk-ink); letter-spacing: -0.3px; }
.ubk-tool-choices { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.ubk-tool-choice {
  flex: 1 1 240px; max-width: 330px; min-height: 168px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 22px 18px; border: 2px solid var(--ubk-border-strong);
  border-radius: var(--ubk-radius-xl); background: var(--ubk-surface);
  cursor: pointer; text-align: center; font-family: inherit;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.ubk-tool-choice:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14); }
.ubk-tool-choice-num {
  width: 38px; height: 38px; border-radius: 50%; background: var(--ubk-ink);
  color: var(--ubk-on-primary); font-weight: 800; font-size: 1.05rem;
  display: flex; align-items: center; justify-content: center;
}
.ubk-tool-choice-txt { font-size: 1.02rem; font-weight: 800; color: var(--ubk-ink); line-height: 1.25; }
.ubk-tool-choice-sub { font-size: 0.74rem; color: var(--ubk-text-muted); line-height: 1.35; }
.ubk-tool-choice.c1:hover { border-color: #0ea5e9; } .ubk-tool-choice.c1 .ubk-tool-choice-num { background: #0284c7; }
.ubk-tool-choice.c2:hover { border-color: var(--ubk-danger); } .ubk-tool-choice.c2 .ubk-tool-choice-num { background: var(--ubk-danger); }
.ubk-tool-choice.c3:hover { border-color: var(--ubk-accent); } .ubk-tool-choice.c3 .ubk-tool-choice-num { background: var(--ubk-accent); }
.ubk-tool-numbers { margin: 30px 0 0; font-size: 1.15rem; color: var(--ubk-text-body); }
.ubk-tool-numbers strong { font-size: 1.5rem; font-weight: 800; color: var(--ubk-ink); }
.ubk-tool-dot { color: var(--ubk-text-faint); margin: 0 8px; font-weight: 800; }

.ubk-tool-2col { display: flex; gap: 14px; align-items: flex-start; }
.ubk-tool-side { flex: 0 0 280px; max-width: 280px; }
.ubk-tool-content { flex: 1 1 auto; min-width: 0; }
.ubk-tool-tree-head {
  display: flex; gap: 8px; padding: 8px 10px; background: var(--ubk-surface-sunken);
  border: 1px solid var(--ubk-border); border-bottom: none;
  border-radius: var(--ubk-radius-md) var(--ubk-radius-md) 0 0;
  font-size: 0.78rem; font-weight: 800; color: var(--ubk-text-body);
}
.ubk-tool-tree-body {
  border: 1px solid var(--ubk-border); border-radius: 0 0 var(--ubk-radius-md) var(--ubk-radius-md);
  background: var(--ubk-surface); max-height: 560px; overflow: auto;
}
.ubk-tool-family { border-bottom: 1px solid var(--ubk-border-soft); }
.ubk-tool-family:last-child { border-bottom: none; }
.ubk-tool-family-head {
  display: flex; gap: 6px; padding: 6px 9px; cursor: pointer;
  font-size: 0.78rem; user-select: none; align-items: center;
}
.ubk-tool-family-head:hover { background: var(--ubk-surface-alt); }
.ubk-tool-family-head .ic { color: #f59e0b; font-size: 0.8rem; }
.ubk-tool-code { font-family: var(--ubk-font-mono); font-weight: 700; color: var(--ubk-ink); font-size: 0.74rem; }
.ubk-tool-name { flex: 1 1 auto; color: var(--ubk-text-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ubk-tool-count { background: var(--ubk-border); color: var(--ubk-text-body); font-size: 0.65rem; font-weight: 800; border-radius: 10px; padding: 1px 6px; }
.ubk-tool-node {
  display: flex; gap: 6px; padding: 4px 9px 4px 20px;
  text-decoration: none; font-size: 0.76rem; color: var(--ubk-text-body);
  border-left: 3px solid transparent; cursor: pointer; align-items: center;
}
.ubk-tool-node:hover { background: #f0f7ff; }
.ubk-tool-node.is-selected { background: var(--ubk-info-soft); border-left-color: var(--ubk-info); }
.ubk-tool-swatch { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }

/* Rejilla de datos del toolbox */
.ubk-grid-table-wrap { overflow-x: auto; border: 1px solid var(--ubk-border); border-radius: var(--ubk-radius); background: var(--ubk-surface); }
.ubk-grid-table { width: 100%; border-collapse: collapse; font-size: 0.76rem; }
.ubk-grid-table th, .ubk-grid-table td { border-bottom: 1px solid #eef2f7; padding: 5px 9px; text-align: left; vertical-align: top; }
.ubk-grid-table thead th {
  background: var(--ubk-text); color: var(--ubk-on-primary); font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.3px; position: sticky; top: 0; z-index: 2;
}
.ubk-grid-table tbody tr:hover > td { background: #f0f7ff; }
.ubk-grid-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ubk-grid-table .mono { font-family: var(--ubk-font-mono); font-size: 0.72rem; }
.ubk-grid-table tr.is-bad > td { background: #fff7f7; }
.ubk-grid-table tr.is-ok  > td { background: #f0fdf4; }
.ubk-grid-table .sev-3 > td:first-child { box-shadow: inset 4px 0 0 0 var(--ubk-danger); }
.ubk-grid-table .sev-2 > td:first-child { box-shadow: inset 4px 0 0 0 #f59e0b; }
.ubk-grid-table .sev-1 > td:first-child { box-shadow: inset 4px 0 0 0 var(--ubk-text-faint); }

/* Panel lateral */
.ubk-tool-panel {
  flex: 0 0 320px; max-width: 320px; background: var(--ubk-surface);
  border: 1px solid var(--ubk-border); border-radius: var(--ubk-radius-md);
  padding: 10px 12px; position: sticky; top: 8px;
}
.ubk-tool-panel.is-active { border-color: #93c5fd; box-shadow: 0 0 0 3px #eff6ff; }
.ubk-tool-panel-head { display: flex; align-items: baseline; gap: 7px; margin-bottom: 5px; }
.ubk-tool-panel-head strong { font-size: 0.86rem; color: var(--ubk-ink); }
.ubk-tool-key { font-family: var(--ubk-font-mono); font-size: 0.7rem; color: #1d4ed8; }
.ubk-tool-panel-text { margin: 0 0 8px; font-size: 0.73rem; color: var(--ubk-text-body); line-height: 1.4; }
.ubk-code-box {
  background: var(--ubk-text); color: var(--ubk-border); border-radius: 7px;
  padding: 8px 10px; font-size: 0.68rem; line-height: 1.45; max-height: 180px;
  overflow: auto; white-space: pre-wrap; word-break: break-word; font-family: var(--ubk-font-mono);
}
.ubk-tool-pending {
  margin-top: 10px; border-top: 1px dashed var(--ubk-border); padding-top: 8px;
  list-style: none; padding-left: 0;
}
.ubk-tool-pending li {
  background: var(--ubk-secondary-soft); border: 1px solid var(--ubk-warning-line);
  border-radius: 5px; padding: 3px 7px; margin-bottom: 3px; font-size: 0.7rem; color: #78350f;
}
.ubk-tool-dropzone { border: 1px dashed #a5b4fc; border-radius: 7px; padding: 6px 7px; background: #f5f7ff; }
.ubk-tool-dropzone-title { display: block; font-size: 0.68rem; font-weight: 800; color: #4c1d95; margin-bottom: 4px; }
.ubk-tool-target {
  display: inline-flex; gap: 4px; background: var(--ubk-surface);
  border: 1px dashed #a5b4fc; border-radius: var(--ubk-radius-sm);
  padding: 2px 6px; font-size: 0.68rem; color: var(--ubk-text-body); cursor: copy;
}
.ubk-tool-target.is-over { background: var(--ubk-success-soft); border-color: var(--ubk-success); box-shadow: inset 0 0 0 2px var(--ubk-success); }

/* Resumen y banda de estado */
.ubk-summary {
  display: flex; gap: 10px; flex-wrap: wrap; background: var(--ubk-surface-alt);
  border: 1px solid var(--ubk-border); border-left: 4px solid var(--ubk-primary);
  border-radius: var(--ubk-radius); padding: 7px 12px; margin-bottom: 8px;
  font-size: 0.82rem; color: var(--ubk-text-body); align-items: center;
}
.ubk-summary strong { font-size: 1.05rem; color: var(--ubk-ink); }
.ubk-summary.is-alert { border-left-color: var(--ubk-danger); }
.ubk-summary.is-alert strong { color: #b91c1c; font-size: 1.5rem; font-weight: 800; }

/* ============================================================================
   8. WIKI — RENDERIZADO DE CONTENIDO
   ========================================================================= */
.ubk-prose { font-size: 0.9rem; line-height: 1.7; color: var(--ubk-text); }
.ubk-prose h1, .ubk-prose h2, .ubk-prose h3, .ubk-prose h4 { margin: 22px 0 10px; font-weight: 700; line-height: 1.3; }
.ubk-prose h1 { font-size: 1.3rem; border-bottom: 2px solid var(--ubk-border); padding-bottom: 8px; }
.ubk-prose h2 { font-size: 1.12rem; border-bottom: 1px solid var(--ubk-border); padding-bottom: 6px; }
.ubk-prose h3 { font-size: 1rem; }
.ubk-prose h4 { font-size: 0.92rem; color: var(--ubk-text-body); }
.ubk-prose p, .ubk-prose ul, .ubk-prose ol { margin: 0 0 12px; }
.ubk-prose ul, .ubk-prose ol { padding-left: 24px; }
.ubk-prose li { margin-bottom: 4px; }
.ubk-prose a { color: var(--ubk-primary); text-decoration: underline; text-underline-offset: 2px; }
.ubk-prose a:hover { filter: brightness(1.15); }
.ubk-prose strong { font-weight: 700; color: var(--ubk-ink); }
.ubk-prose hr { border: 0; border-top: 1px solid var(--ubk-border); margin: 20px 0; }
.ubk-prose code { background: var(--ubk-surface-sunken); border-radius: var(--ubk-radius-xs); padding: 1px 5px; font-size: 0.85em; font-family: var(--ubk-font-mono); }
.ubk-prose pre {
  background: var(--ubk-text); color: var(--ubk-border); border-radius: var(--ubk-radius);
  padding: 14px 16px; overflow-x: auto; margin: 0 0 12px;
}
.ubk-prose pre code { background: transparent; color: inherit; font-size: 0.83rem; line-height: 1.55; padding: 0; }
.ubk-prose blockquote {
  margin: 0 0 12px; padding: 10px 16px;
  border-left: 4px solid var(--ubk-border-strong); background: var(--ubk-surface-alt); color: var(--ubk-text-muted);
}
.ubk-prose table { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin: 0 0 12px; }
.ubk-prose thead th { background: var(--ubk-surface-sunken); padding: 8px 10px; border: 1px solid var(--ubk-border); text-align: left; }
.ubk-prose tbody td { padding: 7px 10px; border: 1px solid var(--ubk-border); }
.ubk-prose tbody tr:nth-child(even) { background: var(--ubk-surface-alt); }
.ubk-prose img { max-width: 100%; border-radius: var(--ubk-radius-sm); }
.ubk-prose del { color: var(--ubk-text-faint); }

/* Avisos dentro del contenido */
.ubk-prose .ubk-callout { border-left: 4px solid; padding: 10px 16px; border-radius: 0 var(--ubk-radius) var(--ubk-radius) 0; margin: 0 0 12px; font-weight: 500; }
.ubk-prose .ubk-callout--note { background: #eff6ff; border-color: #3b82f6; color: #1e3a8a; }
.ubk-prose .ubk-callout--warn { background: var(--ubk-secondary-soft); border-color: var(--ubk-warning); color: var(--ubk-warning); }
.ubk-prose .ubk-callout--important { background: #fff7ed; border-color: #ea580c; color: #9a3412; }
.ubk-prose .ubk-callout--danger { background: #fef2f2; border-color: var(--ubk-danger); color: #991b1b; }
.ubk-prose .ubk-callout--extra { background: #f5f3ff; border-color: #8b5cf6; color: #5b21b6; }

/* ============================================================================
   9. ODS — PALETA OFICIAL
   ========================================================================= */
.ubk-ods-chip {
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; border-radius: var(--ubk-radius-xs); padding: 3px 10px;
  font-size: 0.75rem; font-weight: 700; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  min-width: 40px;
}
/* LAS TRES PALETAS DE LA MATRIZ DE ODS (N187 · 18/10/2026)
   Los valores viven en 01-tokens.css (--ubk-ods-N · --ubk-oe-N · --ubk-comp-*) y se
   pueden tocar desde /estetica. Aquí solo se MAPEAN a clases, para que la pantalla no
   lleve ni un color a fuego ni un estilo en línea. Estas clases las usan el módulo
   indicadores (su pantalla de ODS portada) y el libro de estilo. */
.ods-bg-1  { background: var(--ubk-ods-1); }   .ods-color-1  { color: var(--ubk-ods-1); }
.ods-bg-2  { background: var(--ubk-ods-2); }   .ods-color-2  { color: var(--ubk-ods-2); }
.ods-bg-3  { background: var(--ubk-ods-3); }   .ods-color-3  { color: var(--ubk-ods-3); }
.ods-bg-4  { background: var(--ubk-ods-4); }   .ods-color-4  { color: var(--ubk-ods-4); }
.ods-bg-5  { background: var(--ubk-ods-5); }   .ods-color-5  { color: var(--ubk-ods-5); }
.ods-bg-6  { background: var(--ubk-ods-6); }   .ods-color-6  { color: var(--ubk-ods-6); }
.ods-bg-7  { background: var(--ubk-ods-7); }   .ods-color-7  { color: var(--ubk-ods-7); }
.ods-bg-8  { background: var(--ubk-ods-8); }   .ods-color-8  { color: var(--ubk-ods-8); }
.ods-bg-9  { background: var(--ubk-ods-9); }   .ods-color-9  { color: var(--ubk-ods-9); }
.ods-bg-10 { background: var(--ubk-ods-10); }  .ods-color-10 { color: var(--ubk-ods-10); }
.ods-bg-11 { background: var(--ubk-ods-11); }  .ods-color-11 { color: var(--ubk-ods-11); }
.ods-bg-12 { background: var(--ubk-ods-12); }  .ods-color-12 { color: var(--ubk-ods-12); }
.ods-bg-13 { background: var(--ubk-ods-13); }  .ods-color-13 { color: var(--ubk-ods-13); }
.ods-bg-14 { background: var(--ubk-ods-14); }  .ods-color-14 { color: var(--ubk-ods-14); }
.ods-bg-15 { background: var(--ubk-ods-15); }  .ods-color-15 { color: var(--ubk-ods-15); }
.ods-bg-16 { background: var(--ubk-ods-16); }  .ods-color-16 { color: var(--ubk-ods-16); }
.ods-bg-17 { background: var(--ubk-ods-17); }  .ods-color-17 { color: var(--ubk-ods-17); }
.ods-bg-7, .ods-bg-2, .ods-bg-11, .ods-bg-12 { color: var(--ubk-text); text-shadow: none; }

/* Los 10 colores de los objetivos estratégicos de la Agenda Urbana. */
.oe-bg-1  { background: var(--ubk-oe-1); }   .oe-color-1  { color: var(--ubk-oe-1); }
.oe-bg-2  { background: var(--ubk-oe-2); }   .oe-color-2  { color: var(--ubk-oe-2); }
.oe-bg-3  { background: var(--ubk-oe-3); }   .oe-color-3  { color: var(--ubk-oe-3); }
.oe-bg-4  { background: var(--ubk-oe-4); }   .oe-color-4  { color: var(--ubk-oe-4); }
.oe-bg-5  { background: var(--ubk-oe-5); }   .oe-color-5  { color: var(--ubk-oe-5); }
.oe-bg-6  { background: var(--ubk-oe-6); }   .oe-color-6  { color: var(--ubk-oe-6); }
.oe-bg-7  { background: var(--ubk-oe-7); }   .oe-color-7  { color: var(--ubk-oe-7); }
.oe-bg-8  { background: var(--ubk-oe-8); }   .oe-color-8  { color: var(--ubk-oe-8); }
.oe-bg-9  { background: var(--ubk-oe-9); }   .oe-color-9  { color: var(--ubk-oe-9); }
.oe-bg-10 { background: var(--ubk-oe-10); }  .oe-color-10 { color: var(--ubk-oe-10); }

/* Los 44 colores de componente de la paleta del viejo (chips de la Matriz de ODS).
   La clase sale del CÓDIGO del componente: C04 -> comp-bg-c04 · C10.2.1 -> comp-bg-c10-2-1.
   comp-bg es el color de reserva para un código que no esté en la paleta (el gris del
   viejo para lo que no conocía: #bdbdbd, que aquí es el borde fuerte del libro). */
.comp-bg { background-color: var(--ubk-border-strong); }
.comp-bg-c01 { background-color: var(--ubk-comp-c01); }  .comp-bg-c01-1 { background-color: var(--ubk-comp-c01-1); }
.comp-bg-c02 { background-color: var(--ubk-comp-c02); }  .comp-bg-c02-1 { background-color: var(--ubk-comp-c02-1); }
.comp-bg-c03 { background-color: var(--ubk-comp-c03); }  .comp-bg-c03-1 { background-color: var(--ubk-comp-c03-1); }
.comp-bg-c04 { background-color: var(--ubk-comp-c04); }  .comp-bg-c04-1 { background-color: var(--ubk-comp-c04-1); }
.comp-bg-c04-2 { background-color: var(--ubk-comp-c04-2); }
.comp-bg-c05 { background-color: var(--ubk-comp-c05); }  .comp-bg-c05-1 { background-color: var(--ubk-comp-c05-1); }
.comp-bg-c06 { background-color: var(--ubk-comp-c06); }  .comp-bg-c06-1 { background-color: var(--ubk-comp-c06-1); }
.comp-bg-c07 { background-color: var(--ubk-comp-c07); }  .comp-bg-c07-1 { background-color: var(--ubk-comp-c07-1); }
.comp-bg-c07-2 { background-color: var(--ubk-comp-c07-2); }  .comp-bg-c07-3 { background-color: var(--ubk-comp-c07-3); }
.comp-bg-c08 { background-color: var(--ubk-comp-c08); }  .comp-bg-c08-1 { background-color: var(--ubk-comp-c08-1); }
.comp-bg-c08-2 { background-color: var(--ubk-comp-c08-2); }
.comp-bg-c09 { background-color: var(--ubk-comp-c09); }  .comp-bg-c09-1 { background-color: var(--ubk-comp-c09-1); }
.comp-bg-c10 { background-color: var(--ubk-comp-c10); }  .comp-bg-c10-1 { background-color: var(--ubk-comp-c10-1); }
.comp-bg-c10-2 { background-color: var(--ubk-comp-c10-2); }
.comp-bg-c10-2-1 { background-color: var(--ubk-comp-c10-2-1); }
.comp-bg-c10-2-2 { background-color: var(--ubk-comp-c10-2-2); }
.comp-bg-c10-2-3 { background-color: var(--ubk-comp-c10-2-3); }
.comp-bg-c10-3 { background-color: var(--ubk-comp-c10-3); }  .comp-bg-c10-4 { background-color: var(--ubk-comp-c10-4); }
.comp-bg-c10-5 { background-color: var(--ubk-comp-c10-5); }
.comp-bg-c11 { background-color: var(--ubk-comp-c11); }  .comp-bg-c11-1 { background-color: var(--ubk-comp-c11-1); }
.comp-bg-c11-2 { background-color: var(--ubk-comp-c11-2); }  .comp-bg-c11-3 { background-color: var(--ubk-comp-c11-3); }
.comp-bg-c12 { background-color: var(--ubk-comp-c12); }  .comp-bg-c12-1 { background-color: var(--ubk-comp-c12-1); }
.comp-bg-c12-2 { background-color: var(--ubk-comp-c12-2); }
.comp-bg-c13 { background-color: var(--ubk-comp-c13); }  .comp-bg-c13-1 { background-color: var(--ubk-comp-c13-1); }
.comp-bg-c13-2 { background-color: var(--ubk-comp-c13-2); }
.comp-bg-c14 { background-color: var(--ubk-comp-c14); }  .comp-bg-c14-1 { background-color: var(--ubk-comp-c14-1); }

.ubk-scope-chip {
  background: var(--ubk-surface-sunken); color: var(--ubk-text-body);
  border: 1px solid var(--ubk-border-strong); border-radius: 12px;
  padding: 3px 10px; font-size: 0.75rem; display: inline-block;
}

/* ============================================================================
   10. EDITOR DE FLUJOS
   ========================================================================= */
.ubk-flow-canvas { position: relative; min-height: 320px; background: var(--ubk-surface-alt); border-radius: var(--ubk-radius-md); padding: 20px; overflow: auto; }
.ubk-node {
  display: inline-block; background: var(--ubk-surface); border: 1px solid var(--ubk-border-strong);
  border-radius: var(--ubk-radius-sm); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  min-width: 230px; position: relative; margin: 0 40px 30px 0; vertical-align: top;
}
.ubk-node.is-selected { border-color: var(--ubk-primary); box-shadow: 0 0 0 3px rgba(51, 102, 153, 0.25); }
.ubk-node-title {
  padding: 10px 12px; border-radius: var(--ubk-radius-sm) var(--ubk-radius-sm) 0 0;
  font-weight: 600; font-size: 0.85rem; color: #fff;
  display: flex; align-items: center; gap: 8px; justify-content: center;
}
.ubk-node-body { padding: 15px; font-size: 0.82rem; }
.ubk-node--trigger .ubk-node-title { background: #f97316; }
.ubk-node--action  .ubk-node-title { background: #0ea5e9; }
.ubk-node--logic   .ubk-node-title { background: #6366f1; }
.ubk-node--invite  .ubk-node-title { background: #8b5cf6; }

/* Puntos de conexión */
.ubk-port {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--ubk-text-faint);
  background: #fff; opacity: 0.6; position: absolute; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700;
  transition: all var(--ubk-t) ease; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.ubk-node:hover .ubk-port { opacity: 1; border-color: #3b82f6; }
.ubk-port:hover { transform: translateY(-50%) scale(1.2); box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2); }
.ubk-port--in  { left: -11px; }
.ubk-port--out { right: -11px; }
.ubk-port--true  { border-color: var(--ubk-success); color: var(--ubk-success); }
.ubk-port--false { border-color: var(--ubk-danger); color: var(--ubk-danger); }

.ubk-token {
  padding: 10px 15px; background: var(--ubk-surface); border: 1px dashed var(--ubk-border-strong);
  border-radius: var(--ubk-radius-sm); cursor: grab;
  font-family: var(--ubk-font-mono); color: var(--ubk-primary); font-size: 0.82rem;
  transition: all var(--ubk-t) ease; display: inline-block; margin: 0 6px 6px 0;
}
.ubk-token:hover { border-color: var(--ubk-primary); background: #f0f8ff; }
.ubk-token:active { cursor: grabbing; }

/* ============================================================================
   11. HOJAS IMPRIMIBLES A4
   ========================================================================= */
.ubk-print-body {
  background: var(--ubk-border-strong); margin: 0; padding: 20px 0;
  font-family: var(--ubk-font); font-size: 11px; color: var(--ubk-text-body);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.ubk-print-page {
  background: #fff; margin: 0 auto; width: 210mm; min-height: 290mm; padding: 12mm;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); position: relative; box-sizing: border-box;
}
.ubk-print-btn {
  position: fixed; top: 20px; right: 20px; background: var(--ubk-primary); color: var(--ubk-on-primary);
  border: none; border-radius: 50%; width: 45px; height: 45px; font-size: 1.1rem;
  cursor: pointer; z-index: 1000; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.ubk-print-header { display: flex; justify-content: space-between; align-items: center; }
.ubk-print-brand { display: flex; gap: 12px; align-items: center; }
.ubk-print-brand img { height: 32px; }
.ubk-print-titles { border-left: 1px solid var(--ubk-border); padding-left: 12px; }
.ubk-print-titles h1 { margin: 0; font-size: 1.15rem; color: var(--ubk-text-muted); font-weight: 300; letter-spacing: -0.2px; }
.ubk-print-titles h1 strong { color: var(--ubk-primary); font-weight: 700; }
.ubk-print-meta-box { border: 1px solid var(--ubk-border-strong); font-size: 10px; border-radius: var(--ubk-radius-xs); overflow: hidden; min-width: 290px; }
.ubk-print-meta-box th { background: var(--ubk-surface-alt); color: var(--ubk-primary); padding: 4px 8px; border-bottom: 1px solid var(--ubk-border-strong); text-align: left; font-size: 8.5px; letter-spacing: 0.5px; }
.ubk-print-meta-box td { padding: 5px 8px; line-height: 1.4; }
.ubk-print-rule { border: 0; border-top: 0.5mm solid var(--ubk-primary); margin: 10px 0 15px; }
.ubk-print-section {
  background: var(--ubk-surface-alt); padding: 8px 12px; font-weight: 700; font-size: 10px;
  color: var(--ubk-primary); border: 1px solid var(--ubk-border-strong);
  border-bottom: 2px solid var(--ubk-primary); text-transform: uppercase;
  display: flex; gap: 8px; align-items: center; border-radius: var(--ubk-radius-xs) var(--ubk-radius-xs) 0 0;
}
.ubk-print-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 15px; }
.ubk-print-box { border: 1px solid var(--ubk-border-strong); border-top: none; padding: 10px 15px; border-radius: 0 0 var(--ubk-radius-xs) var(--ubk-radius-xs); }
.ubk-print-tech { background: #fcfcfd; border: 1px dashed var(--ubk-text-faint); border-radius: var(--ubk-radius-xs); padding: 6px 8px; margin-bottom: 6px; }
.ubk-print-tech:last-child { margin-bottom: 0; }
.ubk-print-tech-label { font-size: 7.5px; color: var(--ubk-text-muted); font-weight: 700; text-transform: uppercase; margin-bottom: 2px; }
.ubk-print-tech-value { font-size: 10.5px; font-weight: 700; color: var(--ubk-text); }
.ubk-print-tag { padding: 2px 10px; border-radius: 12px; font-size: 9px; border: 1px solid var(--ubk-border-strong); background: var(--ubk-surface-sunken); text-transform: uppercase; font-weight: 700; }
.ubk-print-tag.is-ok   { background: var(--ubk-success-soft); color: var(--ubk-success); border-color: var(--ubk-success-line); }
.ubk-print-tag.is-warn { background: var(--ubk-warning-soft); color: var(--ubk-warning); border-color: var(--ubk-warning-line); }
.ubk-print-tag.is-bad  { background: var(--ubk-danger-soft);  color: var(--ubk-danger); border-color: var(--ubk-danger-line); }
.ubk-print-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ubk-print-photo { width: 100%; aspect-ratio: 4/3; object-fit: cover; border: 1px solid var(--ubk-border); border-radius: var(--ubk-radius-xs); }
.ubk-print-photo-main { width: 100%; max-height: 250px; object-fit: contain; border-radius: var(--ubk-radius-sm); border: 1px solid var(--ubk-border); padding: 4px; background: #fafafa; }
.ubk-print-signatures { width: 100%; margin-top: 30px; page-break-inside: avoid; border-collapse: collapse; }
.ubk-print-signatures td { width: 33.33%; text-align: center; padding: 10px; }
.ubk-print-sign-line { border-top: 1px solid var(--ubk-text); margin: 60px 20px 10px; }
.ubk-print-sign-name { font-size: 10px; font-weight: 700; color: var(--ubk-text); }
.ubk-print-sign-role { font-size: 9px; color: var(--ubk-text-muted); }
.ubk-print-footer { margin-top: 25px; border-top: 1px solid var(--ubk-border-strong); padding-top: 8px; display: flex; justify-content: space-between; font-size: 8px; color: #475569; font-weight: 500; }
/* ============================================================================
   12. RESPONSIVE DE MÓDULOS
   ========================================================================= */

/* --- Sobrescrituras para pantallas de hasta 1100px (van en la base) --- */
.ubk360 { grid-template-columns: 1fr; }
  .ubk360-top { grid-template-columns: 1fr; }

/* --- Sobrescrituras para pantallas de hasta 1024px (van en la base) --- */
.ubk-doc-layout { flex-direction: column; }
  .ubk-tree { width: 100%; max-height: 240px; }
  .ubk-preview { width: 100%; }

/* --- Sobrescrituras para pantallas de hasta 900px (van en la base) --- */
.ubk-tool-2col { flex-direction: column; }
  .ubk-tool-side, .ubk-tool-panel { flex: 1 1 auto; max-width: 100%; width: 100%; }

/* --- Sobrescrituras para pantallas de hasta 768px (van en la base) --- */
.ubk-plan-grid { grid-template-columns: 1fr; }
  .ubk-print-grid { grid-template-columns: 1fr; }
  .ubk-print-photos { grid-template-columns: repeat(2, 1fr); }
  .ubk-chat { width: calc(100vw - 30px); right: 15px; bottom: 80px; }
  .ubk-gallery, .ubk-gallery-main { width: 100%; }

/* --- Sobrescrituras para pantallas de hasta 700px (van en la base) --- */
.ubk-gallery-main { min-width: 240px; min-height: 240px; }

/* --- A partir de 701px: se recupera el aspecto de tableta/escritorio --- */
/*     Se reproduce la cascada original de las propiedades afectadas, para     */
/*     que el orden de las reglas base siga decidiendo igual que antes.        */
@media (min-width: 701px) {
  .ubk-flow-step { min-width: 150px; }
  .ubk-plan-t { min-width: 0; }
  .ubk-list-txt { min-width: 0; }
  .ubk-matrix th.row-head { min-width: 190px; }
  .ubk-doc-list { min-width: 0; }
  .ubk-doc-body { min-width: 0; }
  .ubk-tool-content { min-width: 0; }
  .ubk-ods-chip { min-width: 40px; }
  .ubk-node { min-width: 230px; }
  .ubk-print-meta-box { min-width: 290px; }
  .ubk-kanban-col { min-height: 350px; }
  .ubk-calendar-day { min-height: 60px; }
  .ubk-preview-body { min-height: 0; }
  .ubk-tool-choice { min-height: 168px; }
  .ubk-flow-canvas { min-height: 320px; }
  .ubk-print-page { min-height: 290mm; }

  /* Propiedades que solo existían en la consulta de móvil: vuelven a su valor por defecto */
  .ubk-gallery-main { min-width: revert; }
  .ubk-gallery-main { min-height: revert; }
}

/* --- A partir de 769px: se recupera el aspecto de tableta/escritorio --- */
/*     Se reproduce la cascada original de las propiedades afectadas, para     */
/*     que el orden de las reglas base siga decidiendo igual que antes.        */
@media (min-width: 769px) {
  .ubk-kanban { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
  .ubk-plan-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  .ubk-plan-mini { grid-template-columns: repeat(4, 1fr); }
  .ubk360 { grid-template-columns: 290px 1fr; }
  .ubk360-top { grid-template-columns: 1fr 1.15fr 1fr; }
  .ubk-evidence-grid { grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); }
  .ubk-calendar { grid-template-columns: repeat(7, 1fr); }
  .ubk-eam-kpis { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
  .ubk-preview-meta { grid-template-columns: 150px 1fr; }
  .ubk-print-grid { grid-template-columns: 1fr 1fr; }
  .ubk-print-photos { grid-template-columns: repeat(3, 1fr); }
  .ubk360 { grid-template-columns: 1fr; }
  .ubk360-top { grid-template-columns: 1fr; }
  .ubk-mant-table { width: 100%; }
  .ubk-mant-detail table { width: 100%; }
  .ubk-mant-detail th { width: 180px; }
  .ubk-kanban-head .dot { width: 10px; }
  .ubk-plan-ic { width: 40px; }
  .ubk360-box table { width: 100%; }
  .ubk-list-thumb { width: 40px; }
  .ubk-gallery { width: 340px; }
  .ubk-gallery-main { width: 340px; }
  .ubk-gallery-main img { width: 100%; }
  .ubk-gallery-nav { width: 30px; }
  .ubk-gallery-thumb { width: 44px; }
  .ubk-gallery-thumb-empty { width: 44px; }
  .ubk-thumb-star { width: 16px; }
  .ubk-lightbox-inner { width: 100%; }
  .ubk-lightbox-stage img { width: 100%; }
  .ubk-lightbox-nav { width: 38px; }
  .ubk-lightbox-close { width: 32px; }
  .ubk-evidence-card img { width: 100%; }
  .ubk-calendar-event { width: 95%; }
  .ubk-calendar-legend-dot { width: 16px; }
  .ubk-matrix { width: 100%; }
  .ubk-eam-list { width: 100%; }
  .ubk-tree { width: 320px; }
  .ubk-doc-icon { width: 38px; }
  .ubk-preview { width: min(1180px, 94vw); }
  .ubk-preview-frame { width: 100%; }
  .ubk-chat-toggle { width: 56px; }
  .ubk-chat { width: 380px; }
  .ubk-tool-choice-num { width: 38px; }
  .ubk-tool-swatch { width: 8px; }
  .ubk-grid-table { width: 100%; }
  .ubk-prose table { width: 100%; }
  .ubk-port { width: 22px; }
  .ubk-print-page { width: 210mm; }
  .ubk-print-btn { width: 45px; }
  .ubk-print-photo { width: 100%; }
  .ubk-print-photo-main { width: 100%; }
  .ubk-print-signatures { width: 100%; }
  .ubk-print-signatures td { width: 33.33%; }
  .ubk-tree { width: 100%; }
  .ubk-preview { width: 100%; }
  .ubk-tool-side, .ubk-tool-panel { width: 100%; }
  .ubk-gallery-nav.next { right: 6px; }
  .ubk-thumb-star { right: -4px; }
  .ubk-lightbox-nav.next { right: 10px; }
  .ubk-lightbox-close { right: 10px; }
  .ubk-evidence-star { right: 14px; }
  .ubk-preview { right: 0; }
  .ubk-chat-toggle { right: 24px; }
  .ubk-chat { right: 24px; }
  .ubk-tool-portada .ubk-stamp { right: 12px; }
  .ubk-port--out { right: -11px; }
  .ubk-print-btn { right: 20px; }
  .ubk-chat-toggle { bottom: 24px; }
  .ubk-chat { bottom: 90px; }
}

/* --- A partir de 901px: se recupera el aspecto de tableta/escritorio --- */
/*     Se reproduce la cascada original de las propiedades afectadas, para     */
/*     que el orden de las reglas base siga decidiendo igual que antes.        */
@media (min-width: 901px) {
  .ubk360-left { flex-direction: column; }
  .ubk360-right { flex-direction: column; }
  .ubk-scroll-list { flex-direction: column; }
  .ubk-list-item { flex-direction: column; }
  .ubk-lightbox-inner { flex-direction: column; }
  .ubk-evidence-card { flex-direction: column; }
  .ubk-calendar-day { flex-direction: column; }
  .ubk-preview { flex-direction: column; }
  .ubk-preview-gate { flex-direction: column; }
  .ubk-preview-details { flex-direction: column; }
  .ubk-chat { flex-direction: column; }
  .ubk-chat-body { flex-direction: column; }
  .ubk-tool-choice { flex-direction: column; }
  .ubk-doc-layout { flex-direction: column; }
  .ubk-flow-step { flex: 1; }
  .ubk-plan-t { flex: 1; }
  .ubk-scroll-list { flex: 1; }
  .ubk-list-txt { flex: 1; }
  .ubk-doc-list { flex: 1; }
  .ubk-doc-body { flex: 1; }
  .ubk-preview-body { flex: 1; }
  .ubk-preview-stage { flex: 1; }
  .ubk-chat-body { flex: 1; }
  .ubk-tool-choice { flex: 1 1 240px; }
  .ubk-tool-side { flex: 0 0 280px; }
  .ubk-tool-content { flex: 1 1 auto; }
  .ubk-tool-name { flex: 1 1 auto; }
  .ubk-tool-swatch { flex: 0 0 auto; }
  .ubk-tool-panel { flex: 0 0 320px; }
  .ubk-gallery { max-width: 100%; }
  .ubk-gallery-main { max-width: 100%; }
  .ubk-lightbox-inner { max-width: 900px; }
  .ubk-calendar-event { max-width: 95%; }
  .ubk-preview-gate span { max-width: 520px; }
  .ubk-chat-msg { max-width: 88%; }
  .ubk-tool { max-width: 100%; }
  .ubk-tool-choice { max-width: 330px; }
  .ubk-tool-side { max-width: 280px; }
  .ubk-tool-panel { max-width: 320px; }
  .ubk-prose img { max-width: 100%; }
  .ubk-mant-table { width: 100%; }
  .ubk-mant-detail table { width: 100%; }
  .ubk-mant-detail th { width: 180px; }
  .ubk-kanban-head .dot { width: 10px; }
  .ubk-plan-ic { width: 40px; }
  .ubk360-box table { width: 100%; }
  .ubk-list-thumb { width: 40px; }
  .ubk-gallery { width: 340px; }
  .ubk-gallery-main { width: 340px; }
  .ubk-gallery-main img { width: 100%; }
  .ubk-gallery-nav { width: 30px; }
  .ubk-gallery-thumb { width: 44px; }
  .ubk-gallery-thumb-empty { width: 44px; }
  .ubk-thumb-star { width: 16px; }
  .ubk-lightbox-inner { width: 100%; }
  .ubk-lightbox-stage img { width: 100%; }
  .ubk-lightbox-nav { width: 38px; }
  .ubk-lightbox-close { width: 32px; }
  .ubk-evidence-card img { width: 100%; }
  .ubk-calendar-event { width: 95%; }
  .ubk-calendar-legend-dot { width: 16px; }
  .ubk-matrix { width: 100%; }
  .ubk-eam-list { width: 100%; }
  .ubk-tree { width: 320px; }
  .ubk-doc-icon { width: 38px; }
  .ubk-preview { width: min(1180px, 94vw); }
  .ubk-preview-frame { width: 100%; }
  .ubk-chat-toggle { width: 56px; }
  .ubk-chat { width: 380px; }
  .ubk-tool-choice-num { width: 38px; }
  .ubk-tool-swatch { width: 8px; }
  .ubk-grid-table { width: 100%; }
  .ubk-prose table { width: 100%; }
  .ubk-port { width: 22px; }
  .ubk-print-page { width: 210mm; }
  .ubk-print-btn { width: 45px; }
  .ubk-print-photo { width: 100%; }
  .ubk-print-photo-main { width: 100%; }
  .ubk-print-signatures { width: 100%; }
  .ubk-print-signatures td { width: 33.33%; }
  .ubk-tree { width: 100%; }
  .ubk-preview { width: 100%; }

  /* Propiedades que solo existían en la consulta de móvil: vuelven a su valor por defecto */
  .ubk-tool-2col { flex-direction: revert; }
  .ubk-tool-side { width: revert; }
  .ubk-tool-panel { width: revert; }
}

/* --- A partir de 1025px: se recupera el aspecto de tableta/escritorio --- */
/*     Se reproduce la cascada original de las propiedades afectadas, para     */
/*     que el orden de las reglas base siga decidiendo igual que antes.        */
@media (min-width: 1025px) {
  .ubk360-left { flex-direction: column; }
  .ubk360-right { flex-direction: column; }
  .ubk-scroll-list { flex-direction: column; }
  .ubk-list-item { flex-direction: column; }
  .ubk-lightbox-inner { flex-direction: column; }
  .ubk-evidence-card { flex-direction: column; }
  .ubk-calendar-day { flex-direction: column; }
  .ubk-preview { flex-direction: column; }
  .ubk-preview-gate { flex-direction: column; }
  .ubk-preview-details { flex-direction: column; }
  .ubk-chat { flex-direction: column; }
  .ubk-chat-body { flex-direction: column; }
  .ubk-tool-choice { flex-direction: column; }
  .ubk-mant-table { width: 100%; }
  .ubk-mant-detail table { width: 100%; }
  .ubk-mant-detail th { width: 180px; }
  .ubk-kanban-head .dot { width: 10px; }
  .ubk-plan-ic { width: 40px; }
  .ubk360-box table { width: 100%; }
  .ubk-list-thumb { width: 40px; }
  .ubk-gallery { width: 340px; }
  .ubk-gallery-main { width: 340px; }
  .ubk-gallery-main img { width: 100%; }
  .ubk-gallery-nav { width: 30px; }
  .ubk-gallery-thumb { width: 44px; }
  .ubk-gallery-thumb-empty { width: 44px; }
  .ubk-thumb-star { width: 16px; }
  .ubk-lightbox-inner { width: 100%; }
  .ubk-lightbox-stage img { width: 100%; }
  .ubk-lightbox-nav { width: 38px; }
  .ubk-lightbox-close { width: 32px; }
  .ubk-evidence-card img { width: 100%; }
  .ubk-calendar-event { width: 95%; }
  .ubk-calendar-legend-dot { width: 16px; }
  .ubk-matrix { width: 100%; }
  .ubk-eam-list { width: 100%; }
  .ubk-tree { width: 320px; }
  .ubk-doc-icon { width: 38px; }
  .ubk-preview { width: min(1180px, 94vw); }
  .ubk-preview-frame { width: 100%; }
  .ubk-chat-toggle { width: 56px; }
  .ubk-chat { width: 380px; }
  .ubk-tool-choice-num { width: 38px; }
  .ubk-tool-swatch { width: 8px; }
  .ubk-grid-table { width: 100%; }
  .ubk-prose table { width: 100%; }
  .ubk-port { width: 22px; }
  .ubk-print-page { width: 210mm; }
  .ubk-print-btn { width: 45px; }
  .ubk-print-photo { width: 100%; }
  .ubk-print-photo-main { width: 100%; }
  .ubk-print-signatures { width: 100%; }
  .ubk-print-signatures td { width: 33.33%; }
  .ubk-scroll-list { max-height: 560px; }
  .ubk-lightbox-inner { max-height: 85vh; }
  .ubk-lightbox-stage img { max-height: calc(85vh - 130px); }
  .ubk-tree { max-height: 680px; }
  .ubk-chat { max-height: 540px; }
  .ubk-chat-body { max-height: 320px; }
  .ubk-tool-tree-body { max-height: 560px; }
  .ubk-code-box { max-height: 180px; }
  .ubk-print-photo-main { max-height: 250px; }

  /* Propiedades que solo existían en la consulta de móvil: vuelven a su valor por defecto */
  .ubk-doc-layout { flex-direction: revert; }
}

/* --- A partir de 1101px: se recupera el aspecto de tableta/escritorio --- */
/*     Se reproduce la cascada original de las propiedades afectadas, para     */
/*     que el orden de las reglas base siga decidiendo igual que antes.        */
@media (min-width: 1101px) {
  .ubk-kanban { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
  .ubk-plan-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  .ubk-plan-mini { grid-template-columns: repeat(4, 1fr); }
  .ubk360 { grid-template-columns: 290px 1fr; }
  .ubk360-top { grid-template-columns: 1fr 1.15fr 1fr; }
  .ubk-evidence-grid { grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); }
  .ubk-calendar { grid-template-columns: repeat(7, 1fr); }
  .ubk-eam-kpis { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
  .ubk-preview-meta { grid-template-columns: 150px 1fr; }
  .ubk-print-grid { grid-template-columns: 1fr 1fr; }
  .ubk-print-photos { grid-template-columns: repeat(3, 1fr); }
}

@media print {
.ubk-print-body { background: #fff; padding: 0; }
  .ubk-print-page { box-shadow: none; margin: 0; width: 100%; }
  .ubk-print-btn { display: none; }
}

@media print {
.ubk-print-photos { grid-template-columns: repeat(3, 1fr); }
}

/* === 06-lectura.css === */
/* ============================================================================
   06-LECTURA.CSS · LOS TEXTOS LARGOS, EN EL LIBRO (18/10/2026)
   ============================================================================
   El dueño: «los textos deben quedar algo más formateados y con tipografías más
   pequeñas; no sé por qué usas tipografías tan grandes en muchos lugares; eso
   debería estar controlado desde el libro de estilo y el módulo de estilo».

   Tenía razón en la queja de fondo: había estilos ESCRITOS A MANO dentro de las
   pantallas (727 en 99 ficheros), cada uno con su tamaño, y así no hay estilo que
   gobierne nada. Esto es lo que faltaba: las clases de LECTURA, aquí, una vez.

   La regla que se sigue a partir de ahora:
     · un tamaño de letra NO se escribe en una pantalla: se elige una de estas clases;
     · si hace falta una nueva, se añade AQUÍ (o a los tokens) y se usa desde todas;
     · los artículos y fichas largas respiran: menos tamaño, más interlineado y un
       ancho máximo de línea (72 caracteres) que es lo que se lee bien.
   ============================================================================ */

/* --- 1 · TEXTO LARGO: la ficha de un módulo, un artículo de la wiki, un acta ---- */
.ubk-lectura {
  font-size: var(--ubk-lectura-size, 0.86rem);
  line-height: 1.62;
  color: var(--ubk-text-body);
  max-width: 78ch;          /* más allá de ~78 caracteres el ojo pierde el renglón */
}
.ubk-lectura > *:first-child { margin-top: 0; }
.ubk-lectura > *:last-child  { margin-bottom: 0; }
.ubk-lectura p { margin: 0 0 0.7em; }
.ubk-lectura h4,
.ubk-lectura h3 {
  font-size: var(--ubk-lectura-h-size, 0.95rem);
  line-height: 1.3;
  font-weight: var(--ubk-w-semi, 600);
  color: var(--ubk-text);
  margin: 1.15em 0 0.45em;
  padding-bottom: 0.22em;
  border-bottom: 1px solid var(--ubk-border-soft, #e9edf2);
}
.ubk-lectura h4:first-child,
.ubk-lectura h3:first-child { margin-top: 0; }
.ubk-lectura ul,
.ubk-lectura ol { margin: 0 0 0.8em; padding-left: 1.25em; }
.ubk-lectura li { margin: 0.18em 0; }
.ubk-lectura strong { color: var(--ubk-text); font-weight: var(--ubk-w-semi, 600); }
.ubk-lectura code {
  font-family: var(--ubk-font-mono, monospace);
  font-size: 0.9em;
  background: var(--ubk-surface-2, #f1f4f8);
  border-radius: 4px;
  padding: 0.08em 0.32em;
}
.ubk-lectura blockquote {
  margin: 0 0 0.8em;
  padding: 0.5em 0.9em;
  border-left: 3px solid var(--ubk-primary, #336699);
  background: var(--ubk-surface-2, #f1f4f8);
  border-radius: 0 6px 6px 0;
  color: var(--ubk-text-muted);
}

/* --- 2 · LA ENTRADILLA: la frase corta que resume (debajo del título) ---------- */
.ubk-entradilla {
  font-size: var(--ubk-entradilla-size, 0.93rem);
  line-height: 1.5;
  color: var(--ubk-text-body);
  margin: 0 0 0.9em;
  max-width: 78ch;
}

/* --- 3 · EL ICONO EN SU CUADRADO DE COLOR (módulos, documentos, fichas) -------- */
.ubk-icono-cuadro {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ubk-icono-cuadro, 44px);
  height: var(--ubk-icono-cuadro, 44px);
  border-radius: calc(var(--ubk-icono-cuadro, 44px) / 3.4);
  color: #fff;
  font-size: calc(var(--ubk-icono-cuadro, 44px) * 0.44);
  background: var(--ubk-primary, #336699);
}
.ubk-icono-cuadro--sm { --ubk-icono-cuadro: 30px; }
.ubk-icono-cuadro--lg { --ubk-icono-cuadro: 52px; }

/* --- 4 · LA CABECERA DE UNA FICHA: icono + título + línea de contexto ---------- */
.ubk-ficha-cabecera {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1rem;
}
.ubk-ficha-cabecera h3 { margin: 0; font-size: 1.05rem; line-height: 1.25; }
.ubk-ficha-cabecera .ubk-linea-contexto {
  margin: 0.15rem 0 0;
  font-size: 0.76rem;
  color: var(--ubk-text-muted);
}

/* --- 5 · LA FILA DE UN DOCUMENTO (icono, título, una línea y acciones) -------- */
.ubk-doc-titulo { font-size: 0.88rem; font-weight: var(--ubk-w-semi, 600); color: var(--ubk-text); }
.ubk-doc-pie    { font-size: 0.74rem; color: var(--ubk-text-muted); margin-top: 0.1rem; }
.ubk-doc-acciones { display: flex; gap: 0.35rem; align-items: center; }

/* --- 6 · LA REJILLA DE UN FORMULARIO EN LÍNEA (subidas, filtros) -------------- */
.ubk-form-linea {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.8rem 1rem;
  align-items: end;
  margin-bottom: 1rem;
}
.ubk-form-linea > .ubk-ancho-completo { grid-column: 1 / -1; }

/* --- 7 · EL SEPARADOR DE SECCIONES DENTRO DE UNA FICHA ------------------------ */
.ubk-separador {
  border: 0;
  border-top: 1px solid var(--ubk-border-soft, #e9edf2);
  margin: 1.4rem 0 1rem;
}

/* --- 8 · CIFRAS Y ETIQUETAS PEQUEÑAS (las que se colaban grandes) ------------- */
.ubk-dato-min  { font-size: 0.76rem; color: var(--ubk-text-muted); }
.ubk-etiqueta-min { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--ubk-text-muted); }

/* --- 9 · LOS ADORNOS DE UNA TABLA DE GESTIÓN (18/10/2026) ---------------------
   Salieron de la pantalla de módulos: eran estilos escritos a mano en cada <form>
   y en cada <select>. Aquí, una vez, y con nombre. */
.ubk-accion-linea { display: flex; gap: 6px; align-items: center; }
.ubk-sin-margen   { margin: 0; }
.ubk-en-linea     { display: inline; }
.ubk-select-min   { padding: 6px 8px; font-size: 0.82rem; }
.ubk-logo-mini    { height: 22px; vertical-align: middle; margin-right: 8px; }
.ubk-acciones-pie { margin-top: 1rem; }

/* El color del módulo es DATO (core_modulo.color): se pasa como variable, no se escribe el estilo. */
.ubk-icono-cuadro--en-linea { vertical-align: middle; margin-right: 9px; }
.ubk-icono-cuadro { background: var(--ubk-icono-color, var(--ubk-primary, #336699)); }

/* === layout-base.css === */
/* ============================================
   LAYOUT-BASE.CSS
   Estilos base y comunes para toda la aplicación
   ============================================ */

/* --------------------------------------------
   Variables CSS (Tokens de diseño)
   -------------------------------------------- */
:root {
    --color-primario: #336699;   /* Azul corporativo Ubikua */
    --color-secundario: #f6bb00; /* Naranja corporativo Ubikua */
    --color-fondo: #f4f6f8;
    --color-texto: #333333;
    --color-blanco: #ffffff;
    --color-gris: #6c757d;
    --sombra-suave: 0 4px 6px rgba(0, 0, 0, 0.05);
    --sombra-dropdown: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* --------------------------------------------
   Reset y estilos base
   -------------------------------------------- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Roboto', sans-serif;
    background: var(--color-fondo);
    color: var(--color-texto);
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Altura mínima igual al alto de la ventana */
    margin: 0;
}

/* --------------------------------------------
   Componentes de la interfaz (Header, Dropdown, Botones)
   -------------------------------------------- */



/* Botones reutilizables */
.btn {
    padding: 10px 20px;
    border-radius: 6px;
    border: none;
    font-weight: bold;
    cursor: pointer;
    color: var(--color-blanco);
    background: var(--color-primario);
    transition: filter 0.2s ease;
}

.btn:hover {
    filter: brightness(0.9); /* Efecto sutil al hacer hover */
}

.btn-secondary {
    background: var(--color-gris);
}

.btn-green {
    background: #28a745; /* Verde éxito, no está en variables */
}

/* --------------------------------------------
   Estructuras de layout (Contenedores, Wrappers)
   -------------------------------------------- */

/* Contenedor para el contenido público */
.public-main-content {
    flex: 1 0 auto; /* Crece y se encoge, base auto */
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

/* Wrapper específico para el panel de administración */
.admin-wrapper {
    flex: 1; /* Ocupa el espacio restante para fijar el footer */
    display: flex;
    overflow: hidden;
    /* height auto anula reglas anteriores que pudieran romper el layout */
    height: auto !important;
}

/* Barra lateral del admin */
.admin-sidebar {
    overflow-y: auto; /* Scroll interno si el contenido es muy largo */
    flex-shrink: 0; /* No se encoge */
}

/* Contenido principal del admin */
.admin-main-content {
    flex: 1; /* Ocupa el ancho restante */
    overflow-y: auto; /* Scroll interno */
    display: flex;
    flex-direction: column;
}

/* --------------------------------------------
   Utilidades y tipografía
   -------------------------------------------- */

/* Título principal de secciones (Dashboard, Gestor, etc.) */
.section-title {
    font-size: 1.8rem;
    color: var(--color-primario);
    border-bottom: 3px solid var(--color-primario);
    padding-bottom: 10px;
    margin-bottom: 20px;
    display: inline-block; /* Ajusta el ancho al contenido */
}

/* --------------------------------------------
   Media Queries (Ajustes responsive)
   -------------------------------------------- */
@media (max-width: 768px) {
    /* El mapa DTI ocupa la mitad de la pantalla en móviles */
    #map {
        height: 50vh !important;
    }
}
/* === header.css === */
/* ============================================
   ARCHIVO: assets/css/header.css
   PROPÓSITO: Estilos universales para la cabecera principal (Main Header).
   DESCRIPCIÓN: Contiene la lógica del logo, el menú hamburguesa (mobile/desktop)
   y el dropdown de usuario. 
   USO: Se debe enlazar en `header.php` para que afecte tanto a /public como a /admin.
   ============================================ */

/* --------------------------------------------
   1. CONTENEDOR PRINCIPAL DE LA CABECERA
   -------------------------------------------- */
.main-header {
    background: var(--color-blanco, #ffffff);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    padding: 0 20px;
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 9000; /* Alto z-index para estar por encima de mapas y modales */
    flex-shrink: 0;
    width: 100%;
    /* Forzamos la tipografía en toda la cabecera (heredada también por el dropdown de usuario) */
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* --------------------------------------------
   2. LOGOTIPO CORPORATIVO
   -------------------------------------------- */
.header-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.header-logo img {
    height: 45px;
    width: auto;
    display: block;
    transition: transform 0.3s ease;
}

.header-logo:hover img {
    transform: scale(1.02);
}

/* --------------------------------------------
   3. CONTROLES DERECHOS (Hamburguesa y Usuario)
   -------------------------------------------- */
.header-controls {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* --------------------------------------------
   4. MENÚ HAMBURGUESA (El que no tenía estilo)
   -------------------------------------------- */
/* Botón invisible (checkbox) que controla el estado del menú sin JS */
.hamburger-toggle {
    display: none;
}

.hamburger-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--color-texto, #333);
    cursor: pointer;
    padding: 8px;
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hamburger-btn:hover {
    background-color: var(--color-fondo, #f4f6f8);
    color: var(--color-primario, #336699);
}

/* El menú desplegable anclado al botón hamburguesa */
.hamburger-menu {
    position: absolute;
    top: 70px; /* Justo debajo del header */
    right: 20px;
    background: var(--color-blanco, #ffffff);
    min-width: 220px;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    border: 1px solid #eee;
    border-top: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 8999;
}

/* Estado activo del menú hamburguesa */
.hamburger-toggle:checked ~ .hamburger-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.hamburger-menu ul {
    list-style: none;
    margin: 0;
    padding: 10px 0;
}

.hamburger-menu li {
    margin: 0;
}

.hamburger-menu a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    color: var(--color-texto, #333);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
}

.hamburger-menu a i {
    width: 20px;
    text-align: center;
    color: var(--color-gris, #6c757d);
    font-size: 1.1rem;
    transition: color 0.2s ease;
}

.hamburger-menu a:hover {
    background: #f8f9fa;
    color: var(--color-primario, #336699);
    padding-left: 25px; /* Pequeño efecto de desplazamiento al pasar el ratón */
}

.hamburger-menu a:hover i {
    color: var(--color-primario, #336699);
}

/* Separador visual para agrupar enlaces */
.hamburger-divider {
    height: 1px;
    background-color: #eee;
    margin: 8px 0;
}

/* --------------------------------------------
   5. DROPDOWN DE USUARIO (Técnicos/Admin)
   --------------------------------------------
   IMPORTANTE:
   - Este bloque DEBE permanecer a nivel raíz (fuera de media queries)
     para que el dropdown funcione tanto en escritorio como en móvil.
   - FIX: En la antigua línea 216 había un "." suelto y una media query
     (

/* Avatar circular con las iniciales o icono */
.ubk-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-secundario, #f6bb00);
    color: var(--color-blanco, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.1rem;
    cursor: pointer;
    user-select: none;
    border: 2px solid transparent;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.user-dropdown:hover .ubk-avatar {
    border-color: var(--color-primario, #336699);
    transform: scale(1.05);
}

/* Bloque de identidad del usuario (nombre + cargo) a la izquierda del avatar */
.user-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
    overflow: hidden;
}

.user-info-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-texto, #334155);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

.user-info-role {
    font-size: 0.75rem;
    color: var(--color-gris, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
    margin-top: 2px;
}

.user-dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    background: var(--color-blanco, #ffffff);
    min-width: 240px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    border: 1px solid #eee;
    overflow: hidden;
    z-index: 9001;
    animation: slideDown 0.2s ease-out;
}

.user-dropdown.is-open .user-dropdown-content {
    display: block;
}

/* Cabecera interna del dropdown de usuario (Muestra nombre/rol) */
.user-dropdown-header {
    padding: 15px 20px;
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
}

.user-dropdown-name {
    display: block;
    font-weight: bold;
    color: var(--color-texto, #333);
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-dropdown-role {
    display: block;
    font-size: 0.8rem;
    color: var(--color-gris, #6c757d);
    margin-top: 3px;
}

.user-dropdown-content a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    color: var(--color-texto, #333);
    text-decoration: none;
    font-size: 0.95rem;
    transition: background 0.2s ease, color 0.2s ease;
}

.user-dropdown-content a i {
    color: var(--color-gris, #6c757d);
    width: 16px;
    text-align: center;
}

.user-dropdown-content a:hover {
    background: #f8f9fa;
    color: var(--color-primario, #336699);
}

.user-dropdown-content a:hover i {
    color: var(--color-primario, #336699);
}

/* Enlace peligroso (Logout) */
.user-dropdown-content a.text-danger:hover {
    color: #dc3545;
    background: #fff5f5;
}
.user-dropdown-content a.text-danger:hover i {
    color: #dc3545;
}

/* Animación de entrada suave */
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------
   6. MEDIA QUERIES (Ajustes para móviles)
   -------------------------------------------- */
@media (max-width: 768px) {
    .main-header {
        padding: 0 15px;
        height: 60px;
    }
    
    .header-logo img {
        height: 35px;
    }
    
    /* El menú hamburguesa ocupa todo el ancho en móviles */
    .hamburger-menu {
        top: 60px;
        right: 0;
        left: 0;
        border-radius: 0 0 15px 15px;
        border-left: none;
        border-right: none;
        min-width: 100%;
    }
    
    .ubk-avatar {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }
}

/* --------------------------------------------
   7. REGLAS PARA IMPRESIÓN
   -------------------------------------------- */
@media print {
    .main-header {
        display: none !important;
    }
}

    /* --------------------------------------------
   FIXES GLOBALES DE LAYOUT
   (Aplican a todo el documento, no solo a la cabecera)
   -------------------------------------------- */
/* FIX GLOBAL: Evita que los padding sumen ancho extra (arregla el menú cortado a la derecha) */
*, *::before, *::after {
    box-sizing: border-box;
}

/* FIX LAYOUT: Garantiza que el footer quede abajo sin cortarse */
html, body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
}
body {
    display: flex;
    flex-direction: column;
    overflow-x: hidden; /* Seguridad anti-scroll lateral */
}

/* Esta clase empuja el footer hacia abajo */
.public-main-content, .admin-wrapper {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}
/* === puente.css === */
/* ============================================================================
   PUENTE entre las pantallas de la Fase 0 y el LIBRO DE ESTILO de UBIKUA
   ----------------------------------------------------------------------------
   No inventa ni un solo color: todo sale de las variables --ubk-* del libro.
   Existe porque las pantallas todavia no usan todas las clases del libro.
   Cuando todas las usen, este fichero se puede borrar.
   ========================================================================== */

body {
  margin: 0;
  background: var(--ubk-bg);
  color: var(--ubk-text);
  font-family: var(--ubk-font);
  font-size: 16px;
  line-height: 1.6;
}
a { color: var(--ubk-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.marco { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.franja { height: 5px; background: var(--ubk-secondary); }

/* --- Campos de formulario -------------------------------------------------
   MEDIDO: el borde que trae el libro (--ubk-border #dde3ea = 1,29:1 y
   --ubk-border-strong #c2cbd6 = 1,64:1) NO llega al minimo de 3:1 que la
   norma pide al borde de un control (WCAG 2.1, criterio 1.4.11).
   Se usa #8e959d, que da 3,03:1 y es el mas claro que cumple.
   Es UNA MEJORA SOBRE EL LIBRO, y esta anotada en el informe. */
label { display: block; font-weight: 600; font-size: 14px; margin: 14px 0 5px; color: var(--ubk-text); }
input[type="text"], input[type="email"], input[type="password"], input[type="file"], input[type="number"], select, textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #8e959d;
  border-radius: var(--ubk-radius);
  font: 15px/1.5 inherit;
  background: var(--ubk-surface);
  color: var(--ubk-text);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--ubk-focus);
  box-shadow: var(--ubk-shadow-focus);
}
input[type="checkbox"] { width: auto; }

/* --- Aprovechar la pantalla, de verdad ------------------------------------
   MEDIDO con capturas (15/10/2026): el cuadro de mando estiraba TODAS las
   tarjetas a la misma altura y dejaba bloques enormes medio vacios. Se quedan
   con lo que miden. */
.ubk-dash-grid { align-items: start; }

/* --- La cabecera publica, de lado a lado ---------------------------------- */
/* .ubk-header es un flex (el del libro, pensado para la consola). El .marco que
   lleva el contenido tiene que CRECER; si no, se encoge a lo que mide y todo sale
   apelotonado en el centro. FALLO VISTO EN UNA CAPTURA el 15/10/2026. */
.ubk-cabecera {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 8px;
  padding-bottom: 8px;
}
.ubk-cabecera .ubk-header-right { flex-wrap: wrap; }
.ubk-cabecera .ubk-header-right a { display: inline-flex; align-items: center; gap: 7px; }

/* --- EL ARMAZON NO ENCOGE EL CONTENIDO ------------------------------------
   .ubk-main es una COLUMNA FLEX con su propio scroll (libro, 02-shell.css:481:
   overflow-y:auto + max-height). Un hijo flex ENCOGE por defecto cuando lo que
   lleva dentro no cabe: el envoltorio de una tabla se quedaba con 75 px de alto
   y 770 px de contenido dentro, asi que solo se veia la PRIMERA FILA y habia que
   hacer scroll DENTRO de cada tabla. MEDIDO con el navegador de pruebas el
   14/10/2026 en modulos.php (padre: alto visible 75, alto real 770; en
   plantillas.php, 0 de 1.497). El scroll es UNO: el del armazon. */
.ubk-main > * { flex-shrink: 0; }

/* --- Los paneles de las pestañas ------------------------------------------
   El libro trae el componente (.ubk-tabs-box/.ubk-tabs/.ubk-tab/.ubk-tab-pane);
   el que esconde los que no toca es assets/js/plataforma.js. Se refuerza aqui
   para que un panel escondido no se pinte aunque alguna regla le de display. */
.ubk-tab-pane[hidden] { display: none !important; }
@media (max-width: 899.98px) { .ubk-tabs { overflow-x: auto; } }

/* --- Las tablas no se salen de la pantalla --------------------------------
   El libro manda envolver las tablas en .ubk-table-wrap; las pantallas de la
   Fase 0 las ponian sueltas y la ultima columna se cortaba. */
.ubk-tabla-ancha { width: 100%; overflow-x: auto; }
/* El libro pone .ubk-table-clean en el ENVOLTORIO y la tabla dentro de el
   (.ubk-table-clean table { min-width: 700px }); en las pantallas de la Fase 0
   la clase va en la propia <table>, asi que esa medida no llegaba y en un movil
   las columnas se estrujaban en vez de desplazarse. Se recupera la del libro. */
.ubk-tabla-ancha > table.ubk-table-clean { min-width: 700px; }
.ubk-table { width: 100%; }
.ubk-table th, .ubk-table td { vertical-align: top; }
/* La columna que EXPLICA se lleva el espacio; las de al lado, lo justo. */
.ubk-table .col-principal { width: 46%; }
.ubk-table .col-media { width: 20%; }
.ubk-table .col-corta { width: 12%; white-space: nowrap; }

/* --- La frase de una alerta no se desmonta --------------------------------
   El libro pone las alertas en fila (icono + texto). Nuestras alertas son solo
   texto y llevan <code> en medio: en fila, cada trozo pasa a ser una pieza y la
   frase sale desperdigada. Se devuelven a bloque. */
.ubk-alert { display: block; }
.ubk-alert code { white-space: nowrap; }

/* --- El nombre en la cabecera, sin barra de desplazamiento ----------------
.ubk-user-name { display: block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- El menu en el movil ---------------------------------------------------
   MEJORA SOBRE EL LIBRO: su armazon deja la barra lateral entera ARRIBA en el
   movil, y en un telefono eso son ocho enlaces antes de ver el contenido.
   Aqui, en pantalla pequena, el menu empieza cerrado y lo abre el boton; en
   pantalla grande se comporta como dice el libro (se pliega a la izquierda). */
@media (max-width: 899.98px) {
  .ubk-sidebar { display: none; }
  .ubk-shell.is-menu-open .ubk-sidebar { display: flex; }
  .ubk-header .ubk-brand .ubk-hint { display: none; }
}
@media (min-width: 900px) {
  .ubk-sidebar-toggle { display: inline-flex; }
}

/* === componentes.css === */
/* ============================================================================
 *  COMPONENTES DE LA PLATAFORMA  ·  lo que no trae el libro de estilo
 * ============================================================================
 *  Aqui vive lo que usan VARIAS pantallas:
 *    · EL MAPA (.ubk-mapa) y los BOTONES DE TIPO (.ubk-mapa-tipo), que llevan EL COLOR DEL
 *      COMPONENTE (core_componente.color): el codigo de colores del catalogo manda.
 *    · LA VENTANITA DEL MARCADOR (.ubk-popup).
 *    · La galeria de fotos (.ubk-fotos).
 *
 *  Todo con los tokens del libro: nada a fuego.
 * ========================================================================== */

/* -------------------------------------------------------------------- EL MAPA */
.ubk-mapa {
  position: relative;
  width: 100%;
  height: 360px;
  border: 1px solid var(--ubk-primary-line, #d7dbe0);
  border-radius: 12px;
  background: var(--ubk-primary-soft, #eef2f7);
  overflow: hidden;
}
.ubk-mapa--alto { height: 560px; }
.ubk-mapa .leaflet-container { font: inherit; }
.ubk-mapa .leaflet-bar a {
  width: 32px; height: 32px; line-height: 32px;
  color: var(--ubk-text, #1f2933);
  border-bottom-color: var(--ubk-primary-line, #d7dbe0);
}
.ubk-mapa .leaflet-bar a:hover { background: var(--ubk-primary-soft, #eef2f7); }
.ubk-mapa .leaflet-control-attribution {
  background: rgba(255, 255, 255, .85);
  font-size: 10px;
  color: var(--ubk-text-muted, #6b7280);
}

/* LA TRAMPA DEL AZUL SOBRE AZUL, medida el 15/10/2026: Leaflet trae su propia regla
   «.leaflet-container a { color: #0078a8 }» y le GANABA al boton del libro dentro de la
   ventanita: el texto salia azul sobre el fondo azul del boton. Se arregla aqui, con la
   especificidad suficiente, y NO tocando la libreria. */
.ubk-mapa .leaflet-container a.ubk-btn,
.leaflet-container .ubk-popup a.ubk-btn {
  color: var(--ubk-on-primary, #fff);
  text-decoration: none;
}
.leaflet-container .ubk-popup a.ubk-btn.ubk-btn--secondary { color: var(--ubk-text, #1f2933); }

/* -------------------------------------------------- LOS BOTONES DE TIPO DEL MAPA */
.ubk-mapa-tipos {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px;
}
.ubk-mapa-tipo {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--ubk-primary-line, #d7dbe0);
  background: #fff; color: var(--ubk-text, #1f2933);
  font: inherit; font-size: .76rem; line-height: 1.1;
  transition: box-shadow .12s ease, border-color .12s ease;
}
.ubk-mapa-tipo i { font-size: .8rem; }
.ubk-mapa-tipo .ubk-mapa-tipo-n { padding: 1px 6px; font-size: .68rem; }
.ubk-mapa-tipo[disabled] { opacity: .45; cursor: not-allowed; }
.ubk-mapa-tipo:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.ubk-mapa-tipo i { color: var(--c, var(--ubk-primary, #33669c)); font-size: 1rem; }
.ubk-mapa-tipo b { font-weight: 700; }
.ubk-mapa-tipo .ubk-mapa-tipo-n {
  background: var(--c, var(--ubk-primary, #33669c));
  color: #fff; border-radius: 999px; padding: 2px 8px; font-size: .74rem; font-weight: 700;
}
.ubk-mapa-tipo.is-on {
  border-color: var(--c, var(--ubk-primary, #33669c));
  box-shadow: inset 0 0 0 1px var(--c, var(--ubk-primary, #33669c));
  background: color-mix(in srgb, var(--c, #33669c) 10%, #fff);
}
.ubk-mapa-tipo.is-on .ubk-mapa-tipo-n { background: var(--c, var(--ubk-primary, #33669c)); }

/* --------------------------------------------------------- LOS MARCADORES */
.ubk-marca {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: #fff; border: 2px solid var(--c, #33669c);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}
.ubk-marca i { color: var(--c, #33669c); font-size: 13px; }

/* --------------------------------------------------- LA VENTANITA DEL MARCADOR */
.ubk-popup { min-width: 210px; }
.ubk-popup h4 { margin: 0 0 2px; font-size: .98rem; color: var(--ubk-text, #1f2933); }
.ubk-popup .ubk-popup-codigo {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .78rem; color: var(--ubk-text-muted, #6b7280);
}
.ubk-popup ul { margin: 8px 0; padding: 0; list-style: none; }
.ubk-popup li {
  display: flex; gap: 8px; justify-content: space-between;
  border-bottom: 1px dashed var(--ubk-primary-line, #d7dbe0);
  padding: 3px 0; font-size: .8rem;
}
.ubk-popup li span:first-child { color: var(--ubk-text-muted, #6b7280); }
.ubk-popup .ubk-btn { width: 100%; justify-content: center; }
.leaflet-popup-content-wrapper { border-radius: 10px; }
.leaflet-popup-content { margin: 12px 14px; }

/* ------------------------------------------------- LA FICHA, EN DOS COLUMNAS
   El dueño: «ocupa demasiado espacio útil, debería ser más compacta para que quepa la
   información sin hacer scroll». A la izquierda el mapa, las piezas y las fotos (que es lo
   que se mira); a la derecha, TODOS los datos en una tabla densa de etiqueta y valor. */
.ubk-ficha { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .ubk-ficha { grid-template-columns: 1fr; } }
.ubk-datos-tabla { width: 100%; border-collapse: collapse; font-size: .84rem; }
.ubk-datos-tabla caption { text-align: left; font-weight: 700; padding: 0 0 8px; font-size: .95rem; }
.ubk-datos-tabla th {
  text-align: left; font-weight: 600; color: var(--ubk-text-muted, #6b7280);
  padding: 5px 10px 5px 0; white-space: nowrap; vertical-align: top; width: 42%;
}
.ubk-datos-tabla td { padding: 5px 0; vertical-align: top; }
.ubk-datos-tabla tr + tr th, .ubk-datos-tabla tr + tr td { border-top: 1px solid var(--ubk-primary-line, #d7dbe0); }
.ubk-datos-tabla .ubk-datos-corte th, .ubk-datos-tabla .ubk-datos-corte td {
  padding-top: 14px; font-weight: 700; color: var(--ubk-text, #1f2933); border-top: 0;
}
.ubk-mapa--ficha { height: 300px; }
.ubk-fotos--compacta { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.ubk-fotos--compacta .ubk-foto img { height: 78px; }

/* ------------------------------------------------------ GALERIA DE FOTOS */
.ubk-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin-top: 10px; }
.ubk-foto { margin: 0; }
.ubk-foto a { display: block; }
.ubk-foto img {
  width: 100%; height: 104px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--ubk-primary-line, #d7dbe0); background: var(--ubk-primary-soft, #eef2f7);
  transition: transform .12s ease;
}
.ubk-foto a:hover img { transform: scale(1.02); }
.ubk-foto figcaption { font-size: .72rem; color: var(--ubk-text-muted, #6b7280); margin-top: 5px; line-height: 1.3; }

/* ------------------------------------------------- LA VENTANA DE LA GALERIA */
.ubk-foto figcaption { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.ubk-foto .ubk-foto-quitar { border: 0; background: none; cursor: pointer; padding: 0 2px; color: var(--ubk-danger, #c0392b); }
.ubk-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(12, 16, 22, .9);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 16px;
}
.ubk-lightbox img { max-width: 94vw; max-height: 78vh; border-radius: 10px; background: #fff; }
.ubk-lightbox-pie { color: #fff; margin-top: 12px; font-size: .9rem; }
.ubk-lightbox-botones { display: flex; gap: 10px; margin-top: 10px; }

/* ======================= LAS TARJETAS DE UN LISTADO (S8, 15/10/2026) =======================
   El dueño: «todas las tablas deben tener las mismas características... vista de tarjetas».
   Una tarjeta es para MIRAR: la foto del equipo, su nombre, de qué es y qué tiene. */
.ubk-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.ubk-tarjeta {
  border: 1px solid var(--ubk-primary-line, #d7dbe0); border-radius: 12px; overflow: hidden;
  background: #fff; display: flex; flex-direction: column;
}
.ubk-tarjeta-foto { display: block; height: 150px; background: var(--ubk-primary-soft, #eef2f7); }
.ubk-tarjeta-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ubk-tarjeta-sinfoto {
  display: flex; align-items: center; justify-content: center; gap: 8px; height: 100%;
  color: var(--ubk-text-muted, #6b7280); font-size: .85rem;
}
.ubk-tarjeta-cuerpo { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.ubk-tarjeta-titulo { font-weight: 700; line-height: 1.25; }
.ubk-tarjeta-pie {
  margin-top: auto; padding-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border-top: 1px solid var(--ubk-primary-line, #d7dbe0);
}
/* La cabecera que ORDENA: se pincha y ordena; se vuelve a pinchar y lo pone al revés. */
.ubk-th-orden { color: inherit; text-decoration: none; white-space: nowrap; }
.ubk-th-orden:hover { text-decoration: underline; }
.ubk-th-orden.is-on { font-weight: 700; }
.ubk-vista { display: inline-flex; gap: 6px; }

/* ------------------------------------------------- LAS CABECERAS QUE ORDENAN
   MEDIDO EL 15/10/2026: con la tabla del libro (cabecera azul), los enlaces de las cabeceras
   ordenables SALIAN INVISIBLES: el enlace no heredaba el blanco de la cabecera y quedaba azul
   sobre azul. Es la misma trampa del boton del mapa. Aqui se dice, en nuestro sitio. */
.ubk-table th.ubk-th-sortable { padding: 0; }
.ubk-table th.ubk-th-sortable .ubk-th-sortable-inner {
  color: inherit; text-decoration: none; display: flex; align-items: center; gap: 6px;
  padding: 14px 15px; width: 100%;
}
.ubk-table th.ubk-th-sortable .ubk-th-sortable-inner:hover { color: inherit; text-decoration: underline; }
.ubk-table .ubk-sort-arrows { display: inline-flex; flex-direction: column; line-height: .7; font-size: .7rem; opacity: .6; }
.ubk-table .ubk-sort-arrows .is-active { opacity: 1; }

/* ======================= LAS TARJETAS DE MÓDULO DEL INICIO (S8, 15/10/2026) =======================
   El dueño: «no cabe toda la información, pueden ser un poco más grandes, y la ubicación de cada
   módulo ponla en la línea encima de los botones de acción, para que no empujen los botones fuera
   del contenedor de la tarjeta». Tenía razón: la ruta y los botones iban en la MISMA fila, y la
   ruta (modules/incidencias) empujaba los botones fuera.
   Se arregla aquí, sin tocar el libro: la rejilla un poco más ancha y el pie en DOS filas. */
.ubk-record-grid--modulos { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.ubk-record-grid--modulos .ubk-record-foot {
  flex-direction: column; align-items: stretch; gap: 10px;
}
.ubk-record-grid--modulos .ubk-record-foot small { justify-content: flex-start; }
.ubk-record-grid--modulos .ubk-record-actions { justify-content: flex-end; flex-wrap: wrap; }

/* ------------------- LOS MÓDULOS DEL CLIENTE EN EL MENÚ DE LA IZQUIERDA (S9, 16/10/2026)
   El dueño lo pidió dos veces: «al entrar en un cliente se deben ver SUS módulos activos en el menú
   de la izquierda, y a cada módulo se accede desde ahí (no por Aplicaciones y módulos)». El menú del
   libro no trae encabezado de sección, así que se añade AQUÍ (no se toca el libro) el rótulo que
   separa lo de la plataforma de lo del cliente, con los tokens del libro y ni un color a fuego. */
.ubk-nav-seccion {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 6px 0 0; padding: 12px 18px 4px;
  border-top: 1px solid var(--ubk-border);
  font-size: .72rem; font-weight: 700; letter-spacing: .2px; line-height: 1.25;
  color: var(--ubk-text-faint);
}
.ubk-nav-seccion i { font-size: .8rem; line-height: 1.4; color: var(--ubk-text-faint); }
/* El nombre del cliente ENTERO (el dueño quiere saber de quién son los módulos): envuelve en dos
   líneas antes que recortarse. */
.ubk-nav-seccion span { min-width: 0; }

/* ------------------------------ EL SELECTOR DE CLIENTE (para los papeles de plataforma)
   El dueño: «cuando entro como GOD y decido inspeccionar el inventario de Adeje, no tengo ninguna
   forma de salir de ese modo para poder inspeccionar otro». El cliente se recuerda en la sesión,
   así que hace falta verlo y poder soltarlo. Va en la cabecera, junto a la marca. */
.ubk-cliente-selector { display: inline-flex; align-items: center; gap: 8px; margin-left: 14px; }
.ubk-cliente-selector > i { color: var(--ubk-text-faint); font-size: .95rem; }
.ubk-cliente-selector select {
  padding: 5px 10px; border-radius: var(--ubk-radius-sm);
  border: 1px solid var(--ubk-border-strong); background: var(--ubk-surface);
  font: inherit; font-size: .82rem; font-weight: 600; color: var(--ubk-text); cursor: pointer; outline: none;
  max-width: 260px;
}
.ubk-cliente-selector select:focus { border-color: var(--ubk-primary); }
@media (max-width: 900px) { .ubk-cliente-selector select { max-width: 130px } }

/* ------------------- EL PANEL DE TIPOS DEL MAPA, COMPACTO (S8, 15/10/2026)
   El dueño, mirando la pantalla: «los botones con los iconos ocupan toda la pantalla y algo más».
   Tenía razón: había una fila por FAMILIA y con 14 familias el mapa quedaba debajo del pliegue.
   Ahora son dos alturas fijas: ARRIBA las familias (una fila que envuelve), y debajo los tipos de
   la familia elegida, en una caja con su tope y su scroll. El mapa siempre se ve. */
.ubk-mapa-tipos { display: block; margin: 0 0 12px; }
.ubk-mapa-familias { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ubk-mapa-familia {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--c, var(--ubk-primary-line, #d7dbe0));
  background: #fff; color: var(--ubk-text, #1f2933);
  font: inherit; font-size: .76rem; font-weight: 700; line-height: 1.15;
}
.ubk-mapa-familia i { color: var(--c, var(--ubk-primary, #33669c)); font-size: .9rem; }
.ubk-mapa-familia .ubk-mapa-tipo-n {
  background: var(--c, var(--ubk-primary, #33669c)); color: #fff;
  border-radius: 999px; padding: 1px 7px; font-size: .7rem; font-weight: 700;
}
.ubk-mapa-familia.is-on {
  background: color-mix(in srgb, var(--c, #33669c) 12%, #fff);
  box-shadow: inset 0 0 0 1px var(--c, #33669c);
}
.ubk-mapa-lista {
  display: flex; flex-wrap: wrap; gap: 7px;
  max-height: 104px; overflow-y: auto; padding: 8px 10px;
  border: 1px solid var(--ubk-border, #e3e7eb); border-radius: 10px;
  background: var(--ubk-surface-alt, #f7f9fb);
}
.ubk-mapa-grupo { display: contents; }
.ubk-mapa-grupo[hidden] { display: none; }
@media (max-width: 700px) { .ubk-mapa-lista { max-height: 140px; } }

/* ============================================================================
   LA ASIGNACIÓN DE PERMISOS, SIN TORTURA (S9, 16/10/2026)
   ============================================================================
   El dueño: «la asignación de permisos es una tortura, con desplegables y acordeones infinitos.
   Quiero una pantalla usable: buscar, marcar por bloques y ver lo que queda efectivo».

   Lo que había: 69 permisos, cada uno con un DESPLEGABLE de tres opciones, metidos en acordeones
   (uno por área) que había que ir abriendo. Para dar un permiso: abrir el acordeón, buscar la fila
   y desplegar.

   Lo que hay ahora: los 69 a la vista, cada uno con un SEGMENTO de tres botones (Sí · Papel · No),
   un buscador, botones de bloque por área y por lo que se ve, y un resumen que dice LO QUE QUEDA
   EFECTIVO mientras se toca (que es lo único que importa: papel + lo dado + lo quitado, junto).

   Todo con tokens del libro. Sin JavaScript se ve igual y se guarda igual: el segmento es un grupo
   de radios DE VERDAD, así que funciona aunque el JS no cargue.
   ========================================================================== */
.ubk-permisos { display: block; }
.ubk-permisos-barra {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  position: sticky; top: 0; z-index: 5;
  padding: 10px 12px; margin-bottom: 10px;
  background: var(--ubk-surface); border: 1px solid var(--ubk-border); border-radius: var(--ubk-radius-md, 10px);
}
.ubk-permisos-busca { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 220px; }
.ubk-permisos-busca i { color: var(--ubk-text-faint); }
.ubk-permisos-busca input { flex: 1; }
.ubk-permisos-resumen {
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center;
  padding: 12px 14px; margin-bottom: 12px;
  background: var(--ubk-surface-alt); border: 1px solid var(--ubk-border); border-radius: var(--ubk-radius-md, 10px);
}
.ubk-permisos-cifra { display: flex; align-items: baseline; gap: 8px; }
.ubk-permisos-cifra .ubk-kpi-value { font-size: 1.5rem; }
.ubk-permisos-cambios { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 200px; }
.ubk-permisos-indice { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ubk-permisos-chip {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 4px 10px; border-radius: 999px; font: inherit; font-size: .78rem; font-weight: 600;
  border: 1px solid var(--ubk-border-strong); background: var(--ubk-surface); color: var(--ubk-text);
}
.ubk-permisos-chip:hover { border-color: var(--ubk-primary); color: var(--ubk-primary); }
.ubk-permisos-chip span { background: var(--ubk-surface-alt); border-radius: 999px; padding: 0 7px; font-size: .72rem; }

.ubk-permiso-grupo { margin: 0 0 14px; }
.ubk-permiso-titulo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 0 0 6px; padding: 6px 0; font-size: .95rem;
  border-bottom: 1px solid var(--ubk-border);
}
.ubk-permiso-acciones { display: inline-flex; gap: 6px; margin-left: auto; }
.ubk-permiso { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 6px 2px; border-bottom: 1px solid var(--ubk-border); }
.ubk-permiso[hidden] { display: none; }
.ubk-permiso-info { display: flex; flex-direction: column; flex: 1; min-width: 200px; }
.ubk-permiso-nombre { font-size: .88rem; }
.ubk-permiso-codigo { font-size: .7rem; color: var(--ubk-text-faint); }
.ubk-permiso-efectivo { font-size: .72rem; white-space: nowrap; }
.ubk-segmento { display: inline-flex; border: 1px solid var(--ubk-border-strong); border-radius: var(--ubk-radius-sm); overflow: hidden; }
.ubk-segmento label {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  padding: 5px 10px; font-size: .78rem; font-weight: 600;
  background: var(--ubk-surface); color: var(--ubk-text-muted);
  border-left: 1px solid var(--ubk-border);
}
.ubk-segmento label:first-child { border-left: 0; }
.ubk-segmento label:hover { background: var(--ubk-surface-alt); }
.ubk-segmento label.is-on { background: var(--ubk-primary-soft); color: var(--ubk-primary); }
.ubk-segmento label.is-on[data-valor="no"] { background: var(--ubk-warning-soft, var(--ubk-surface-alt)); color: var(--ubk-warning, var(--ubk-text)); }
.ubk-segmento label.is-on[data-valor="papel"] { background: var(--ubk-surface-alt); color: var(--ubk-text); }
.ubk-segmento input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ubk-segmento input:focus-visible + span { outline: 2px solid var(--ubk-primary); outline-offset: 2px; }
.ubk-permiso[data-estado="si"] .ubk-permiso-efectivo { color: var(--ubk-success); font-weight: 700; }
.ubk-permiso[data-estado="no"] .ubk-permiso-efectivo { color: var(--ubk-warning); font-weight: 700; }
@media (max-width: 700px) {
  .ubk-permiso-acciones { margin-left: 0; }
  .ubk-permiso-info { min-width: 100%; }
}

/* ============================================================================
   LA BIENVENIDA DE UN CLIENTE (S10, 16/10/2026) · N143
   La casa de un municipio: su logo, su nombre y SUS aplicaciones. Se pinta desde
   _partials/bienvenida_cliente.php (que lo usa la portada cuando hay cliente en contexto).
   Vive AQUI, y no dentro de la pantalla, por lo mismo que se aprendio en S7: el CSS de una pieza
   que pueden usar dos pantallas no puede vivir dentro de una de ellas.
   ============================================================================ */
.ubk-casa{background:var(--ubk-surface-alt);min-height:100vh}
.ubk-casa-barra{background:var(--ubk-surface);border-bottom:1px solid var(--ubk-border)}
.ubk-casa-barra .ubk-marco{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:14px 20px}
.ubk-casa-marca{display:flex;align-items:center;gap:12px}
.ubk-casa-marca img{height:44px;display:block}
.ubk-casa-marca .nombre{font-weight:700;font-size:1.05rem;line-height:1.2}
.ubk-casa-marca .que{display:block;font-size:.8rem;color:var(--ubk-text-muted);font-weight:400}
.ubk-casa-heroe{padding:52px 20px 30px;text-align:center;background:var(--ubk-surface);border-bottom:1px solid var(--ubk-border)}
.ubk-casa-heroe .ubk-casa-heroe-interior{max-width:820px;margin:0 auto}
.ubk-casa-heroe h1::after{content:"";display:block;width:64px;height:4px;border-radius:2px;margin:16px auto 0;background:var(--ubk-casa-color,#336699)}
.ubk-casa-heroe h1{font-size:1.9rem;margin:0 0 12px;line-height:1.25}
.ubk-casa-heroe p{font-size:1.08rem;color:var(--ubk-text-muted);margin:0 auto 22px;max-width:640px}
.ubk-casa-apps{max-width:960px;margin:0 auto;padding:22px 20px 10px}
.ubk-casa-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.ubk-app-tarjeta{display:flex;gap:12px;align-items:flex-start;background:var(--ubk-surface);border:1px solid var(--ubk-border);
                 border-radius:var(--ubk-radius-md);padding:14px 16px;text-decoration:none;color:var(--ubk-text);
                 transition:box-shadow .15s ease, transform .15s ease}
.ubk-app-tarjeta:hover{box-shadow:0 4px 14px rgba(0,0,0,.08);transform:translateY(-1px)}
.ubk-app-icono{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:0 0 42px}
.ubk-app-icono i{font-size:1.15rem;color:#fff}
.ubk-app-nombre{font-weight:700;font-size:.98rem;line-height:1.25;display:block}
.ubk-app-que{display:block;font-size:.82rem;color:var(--ubk-text-muted);margin-top:2px}
.ubk-casa-pie{max-width:960px;margin:0 auto;padding:26px 20px 54px;color:var(--ubk-text-muted);font-size:.86rem;text-align:center}
.ubk-casa-pie a{color:var(--ubk-primary)}
.ubk-casa-enlaces{max-width:820px;margin:0 auto;padding:6px 20px 0;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ============================================================================
 *  LA DENSIDAD DE LAS TABLAS  ·  UNA VEZ, PARA TODAS   (S10 · 16/10/2026)
 * ============================================================================
 *  El dueño: «la tipografía es excesivamente grande: estandariza, y recuerda que nada está
 *  hardcodeado: se hace desde estilo y estética».
 *
 *  El libro traía .ubk-table-clean con la letra y el relleno ESCRITOS A MANO, y en tres sitios
 *  distintos según el ancho de la pantalla (0.85rem en el escritorio, 0.75rem por debajo de 768px,
 *  otro relleno en cada tramo): dos tablas de dos pantallas no medían lo mismo y ninguna se podía
 *  cambiar desde /estetica.
 *
 *  Aquí se arregla UNA vez y vale para todas: la letra y el aire SALEN DE LOS TOKENS
 *  (--ubk-tabla-fs, --ubk-tabla-pad-y, --ubk-tabla-pad-x, --ubk-tabla-min), que viven en
 *  01-tokens.css y se editan en /estetica como cualquier otro token.
 *
 *  Va en ESTA hoja (la de la plataforma) y no en el libro porque esta hoja se sirve DESPUÉS:
 *  así manda la decisión de la plataforma y no hay que tocar el libro, que es de todos.
 * ========================================================================== */
.ubk-table-clean table {
  font-size: var(--ubk-tabla-fs);
  min-width: var(--ubk-tabla-min);
}
.ubk-table-clean th,
.ubk-table-clean td {
  padding: var(--ubk-tabla-pad-y) var(--ubk-tabla-pad-x);
}
/* La cabecera de una tabla de datos no va en mayúsculas ni separada letra a letra: eso es de una
   tabla de adorno, y aquí lo que hace falta es leer 144 filas sin cansarse. Es del MISMO token. */
.ubk-table.ubk-table-clean th {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--ubk-tabla-fs);
}


/* ============================================================================
 *  EL ARBOL (el organigrama de organizaciones)  ·  16/10/2026
 * ============================================================================
 *  El libro de estilo no trae un componente de arbol: el modulo VIEJO se lo habia hecho con estas mismas
 *  clases (ubk-tree-list / ubk-tree-item / ubk-tree-header) y con colores y medidas A MANO. Aqui se traen
 *  las clases —que ya eran ubk-*— pero TODO sale de los tokens: si mañana el dueño cambia el radio o el
 *  color de marca en /estetica, el arbol cambia con lo demas.
 *
 *  El acordeon es <details>/<summary> NATIVO: sin una linea de JavaScript se abre y se cierra (y con el
 *  JavaScript apagado se ve el arbol entero, que es justo lo que hace falta).
 * ========================================================================== */
.ubk-arbol, .ubk-arbol-rama { list-style: none; margin: 0; padding: 0; }
.ubk-arbol-rama {
  margin: var(--ubk-tabla-pad-y) 0 0 14px;
  padding-left: 12px;
  border-left: 1px dashed var(--ubk-border-strong);
}
.ubk-arbol-nodo { margin: 0; }
.ubk-arbol-cabeza {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 10px; margin: 4px 0;
  background: var(--ubk-surface-alt);
  border: 1px solid var(--ubk-border);
  border-radius: var(--ubk-radius-sm);
  cursor: pointer;
}
.ubk-arbol-cabeza:hover { border-color: var(--ubk-primary); background: var(--ubk-primary-soft); }
.ubk-arbol-cabeza[data-clasificacion="Interno"] { border-left: 4px solid var(--ubk-primary); }
.ubk-arbol-cabeza[data-clasificacion="Externo"] { border-left: 4px solid var(--ubk-accent); }
.ubk-arbol-cabeza.is-arrastrando { opacity: 0.45; }
.is-soltar { outline: 2px dashed var(--ubk-primary); outline-offset: 2px; background: var(--ubk-primary-soft); }
.ubk-arbol-agarre { color: var(--ubk-text-faint); cursor: grab; }
.ubk-arbol-nombre { font-weight: var(--ubk-w-medium); color: var(--ubk-text); }
.ubk-arbol-ver { margin-left: auto; color: var(--ubk-primary); }

/* La GENTE de un nodo del organigrama: cada persona bajo SU organizacion (no todas bajo el ayuntamiento). */
.ubk-arbol-gente {
  list-style: none; margin: 2px 0 6px 22px; padding: 6px 10px;
  background: var(--ubk-surface);
  border: 1px solid var(--ubk-border-soft);
  border-left: 3px solid var(--ubk-border-strong);
  border-radius: var(--ubk-radius-sm);
}
.ubk-arbol-gente li {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 2px 0; font-size: var(--ubk-tabla-fs); color: var(--ubk-text-body);
}
.ubk-arbol-gente i { color: var(--ubk-text-faint); }

/* === menu-acordeon.css === */
/* ============================================================================
 *  EL MENÚ POR ACORDEONES (18/10/2026 · 2ª tanda del dueño)
 * ============================================================================
 *  Lo que se pinta aquí es el <details>/<summary> del sidebar. Sin JavaScript: el
 *  navegador lo abre y lo cierra solo, y el teclado funciona de serie.
 *
 *  REGLA DEL PROYECTO: **ni un color a fuego**. Todo sale de los tokens del libro
 *  (--ubk-*), que es lo que GOD y cada cliente pueden cambiar desde «Estilo y estética».
 * ============================================================================ */

.ubk-nav-grupo {
  margin: 2px 0;
  border-radius: var(--ubk-radius-sm, 8px);
}

.ubk-nav-grupo > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  cursor: pointer;
  border-radius: var(--ubk-radius-sm, 8px);
  color: var(--ubk-text-soft, #475569);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  list-style: none;
  user-select: none;
}
.ubk-nav-grupo > summary::-webkit-details-marker { display: none; }
.ubk-nav-grupo > summary:hover { background: var(--ubk-surface-2, #eef2f7); }
.ubk-nav-grupo[open] > summary { color: var(--ubk-text, #0f172a); }

/* La flecha: gira al abrir. Es texto, no imagen: no hay nada que cargar. */
.ubk-nav-grupo > summary::after {
  content: "\25B8";
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--ubk-text-soft, #64748b);
  transition: transform 0.15s ease;
}
.ubk-nav-grupo[open] > summary::after { transform: rotate(90deg); }

/* La cuenta de lo que hay dentro: dice si merece la pena abrirlo. */
.ubk-nav-grupo-cuenta {
  order: 2;
  min-width: 22px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--ubk-surface-2, #eef2f7);
  color: var(--ubk-text-soft, #64748b);
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
}
.ubk-nav-grupo > summary::after { order: 3; }

.ubk-nav-grupo-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 2px 0 6px 8px;
  margin-left: 6px;
  border-left: 1px solid var(--ubk-border, #e2e8f0);
}

/* Los compartidos entre áreas (Vivienda Vacacional: Urbanismo y Turismo) se distinguen,
   porque NO pertenecen a la familia en la que están: pertenecen a dos. */
.ubk-nav-grupo--compartido > summary { color: var(--ubk-primary, #336699); }
.ubk-nav-grupo--compartido .ubk-nav-grupo-cuerpo { border-left-color: var(--ubk-primary, #336699); }

/* === lanzador.css === */
/* ============================================================================
 *  EL LANZADOR DE APLICACIONES   (19/10/2026)
 *  Lo único que se sirve en /mis-aplicaciones. Sin menús, sin barra lateral: una
 *  rejilla de aplicaciones y el nombre del ayuntamiento. Todo por tokens del libro.
 * ============================================================================ */
.ubk-lanzador-cuerpo { min-height: 100vh; background: var(--ubk-surface-2, #f1f5f9); }

.ubk-lanzador-barra {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px 22px;
  background: var(--ubk-surface, #fff);
  border-bottom: 1px solid var(--ubk-border, #e2e8f0);
}
.ubk-lanzador-cliente { color: var(--ubk-text-soft, #475569); font-weight: 600; display: flex; gap: 8px; align-items: center; }
.ubk-lanzador-quien { margin-left: auto; color: var(--ubk-text-soft, #475569); font-size: 0.9rem; }

.ubk-lanzador { max-width: 1100px; margin: 0 auto; padding: 34px 22px 60px; }
.ubk-lanzador-head h1 { margin: 0 0 6px; font-size: 1.9rem; color: var(--ubk-text, #0f172a); }
.ubk-lanzador-head { margin-bottom: 26px; }

.ubk-lanzador-rejilla {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.ubk-lanzador-app {
  display: flex; flex-direction: column; gap: 8px;
  padding: 22px;
  background: var(--ubk-surface, #fff);
  border: 1px solid var(--ubk-border, #e2e8f0);
  border-radius: var(--ubk-radius-md, 14px);
  text-decoration: none;
  color: inherit;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.ubk-lanzador-app:hover, .ubk-lanzador-app:focus-visible {
  transform: translateY(-2px);
  border-color: var(--ubk-primary, #336699);
  box-shadow: 0 10px 24px rgb(15 23 42 / 10%);
}
/* EL ICONO, CON EL COLOR DE LA APLICACIÓN (S53): el color llega del DATO (core_modulo.color) y lo
   sirve la pantalla como --ubk-app-color / --ubk-app-color-suave, una regla por color distinto
   (core/chrome.php · estilos_de_color_de_apps). Aquí no hay ni un color a fuego por aplicación. */
.ubk-lanzador-app-icono {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  color: var(--ubk-app-color, var(--ubk-primary));
  background: var(--ubk-app-color-suave, var(--ubk-info-soft, transparent));
}
.ubk-lanzador-app-nombre { font-size: 1.1rem; font-weight: 700; color: var(--ubk-text, #0f172a); }
.ubk-lanzador-app-desc { font-size: 0.9rem; color: var(--ubk-text-soft, #475569); }
.ubk-lanzador-app-abrir {
  margin-top: auto; padding-top: 10px;
  font-weight: 600; font-size: 0.9rem;
  color: var(--ubk-primary, #336699);
}
.ubk-lanzador-pie { margin-top: 22px; }

/* ============================================================================
 *  EL ARMAZON DE APLICACION  ·  /app/<codigo>   (S53, 19/10/2026)
 * ----------------------------------------------------------------------------
 *  Lo que aqui se define es el marco de la aplicacion: su cabecera con la identidad de la
 *  aplicacion (icono y color del catalogo) y su panel lateral con TUS aplicaciones. No hay
 *  ni un menu de la plataforma. Todo con tokens del libro: ni un color a fuego.
 *
 *  EL COLOR DE LA APLICACION no se escribe aqui: llega como token (--ubk-app-color) desde el
 *  dato del catalogo (core/chrome.php · estilos_de_color_de_apps). Aqui solo se usa.
 * ============================================================================ */
.ubk-app-cuerpo { background: var(--ubk-bg); }

.ubk-appbar { border-bottom: 3px solid var(--ubk-app-color, var(--ubk-primary)); }
.ubk-appbar-marca img { display: block; }
.ubk-appbar-identidad { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ubk-appbar-icono {
  width: 36px; height: 36px; border-radius: 10px; flex: 0 0 36px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ubk-app-color, var(--ubk-primary));
  background: var(--ubk-app-color-suave, var(--ubk-info-soft, transparent));
}
.ubk-appbar-texto { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.ubk-appbar-nombre { font-weight: var(--ubk-w-semi, 600); color: var(--ubk-text); }
.ubk-appbar-donde { font-size: 0.76rem; color: var(--ubk-text-muted); }

/* EL PANEL LATERAL: tus aplicaciones, no un arbol de administracion. */
.ubk-sidebar--aplicacion .ubk-nav { padding-top: 4px; }
.ubk-nav-rotulo {
  margin: 6px 14px 8px;
  font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ubk-text-faint); font-weight: var(--ubk-w-semi, 600);
}
.ubk-nav-app .ubk-nav-app-icono { color: var(--ubk-app-color, var(--ubk-primary)); }
.ubk-nav-app.is-active { background: var(--ubk-app-color-suave, var(--ubk-sidebar-active-bg)); }
.ubk-nav-vacio { margin: 4px 14px 8px; }

/* LA IDENTIDAD DE LA APLICACION, TAMBIEN EN EL TITULO DE LA PAGINA. */
.ubk-app--aplicacion .ubk-page-title i { color: var(--ubk-app-color, var(--ubk-primary)); }

/* ============================================================================
 *  AYUDAS DE MAQUETACION QUE ANTES ERAN UN ATRIBUTO DE ESTILO A MANO   (S53)
 * ----------------------------------------------------------------------------
 *  Estaban escritas en el armazon del modulo y por eso NO se podian cambiar desde
 *  «Estilo y estetica» (y engordaban el contador de estilos a mano, que solo puede bajar).
 *  Son las mismas tres reglas, ahora con nombre.
 * ============================================================================ */
.ubk-acciones-fila { display: flex; gap: 10px; flex-wrap: wrap; }
.ubk-form-en-linea { margin: 0; }
.ubk-hint--detalle { margin-top: 8px; }

/* ============================================================================
 *  MI PERFIL  ·  quién soy y mis aplicaciones   (S56, 19/10/2026)
 * ----------------------------------------------------------------------------
 *  El apartado de perfil: la portada de quien trabaja en el ayuntamiento. Dos
 *  bloques —quién eres y la rejilla de tus aplicaciones— y nada más.
 *
 *  Todo con TOKENS del libro y con las clases del libro (.ubk-card, .ubk-avatar--lg,
 *  .ubk-badge, .ubk-form-grid, .ubk-etiqueta-min): ni un color ni un tamaño de letra a
 *  fuego, que es lo que el dueño pidió el 18/10/2026 y lo que cuenta
 *  tools/auditar_estilos.php (un estilo en línea NO se puede cambiar desde «Estilo y
 *  estética»).
 *
 *  EL MÓVIL MANDA: una columna, la cabecera con el avatar al lado del nombre y la
 *  rejilla del lanzador tal cual (que ya baja a una tarjeta por fila sola).
 * ============================================================================ */

/* EL MENÚ DE LA PERSONA, EN ESTA BARRA: empujado a la derecha (antes lo hacía el nombre
   suelto, que ya no está: ahora el nombre va dentro del menú). */
.ubk-lanzador-barra .ubk-user { margin-left: auto; }

.ubk-perfil { max-width: 1100px; margin: 0 auto; padding: 30px 22px 60px; }

.ubk-perfil-cabecera {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 22px;
}
.ubk-perfil-identidad { min-width: 0; }
.ubk-perfil-nombre {
  margin: 0; font-size: 1.5rem; line-height: 1.2;
  color: var(--ubk-text, #0f172a);
}
.ubk-perfil-linea {
  margin: 4px 0 0; font-size: 0.9rem;
  color: var(--ubk-text-soft, #475569);
  overflow-wrap: anywhere;
}
.ubk-perfil-insignias { margin: 8px 0 0; display: flex; gap: 6px; flex-wrap: wrap; }
.ubk-perfil-insignias .ubk-badge i { margin-right: 4px; }

.ubk-perfil .ubk-card { margin-bottom: 18px; }
.ubk-perfil .ubk-card > h2 { margin: 0 0 6px; }
.ubk-perfil-datos .ubk-form-grid { margin-top: 12px; }
.ubk-perfil-dato { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ubk-perfil-dato-valor {
  font-size: 0.95rem; font-weight: var(--ubk-w-semi, 600);
  color: var(--ubk-text, #0f172a);
  overflow-wrap: anywhere;
}
.ubk-perfil-cuenta-boton { margin: 14px 0 0; }

.ubk-perfil-apps { margin-top: 26px; }
.ubk-perfil-apps > h2 { margin: 0 0 4px; }

@media (max-width: 560px) {
  .ubk-lanzador-barra { padding: 12px 14px; gap: 10px; }
  .ubk-lanzador { padding: 22px 14px 48px; }
  .ubk-perfil { padding: 22px 14px 48px; }
  .ubk-perfil-cabecera { gap: 12px; align-items: flex-start; }
  .ubk-perfil-nombre { font-size: 1.25rem; }
}

/* === zona-comun.css === */
/* ============================================================================
 *  LA ZONA COMÚN DE TODAS LAS APLICACIONES   ·   assets/css/zona-comun.css
 *  (S55 · 19/10/2026)
 * ----------------------------------------------------------------------------
 *  Aquí vive lo que la barra común necesita y el libro no trae: el lanzador como botón,
 *  la campana con su contador y sus desplegables. La barra es .ubk-header del libro y la
 *  identidad de la aplicación son las clases .ubk-appbar de la S53: NO se reescriben, se
 *  usan. Todo con tokens: ni un color a fuego por aplicación.
 *
 *  MÓVIL PRIMERO, como el libro: fuera de las media queries está el móvil (390 px) y los
 *  bloques @media (min-width: ...) solo AÑADEN. En el móvil la barra es una barra superior
 *  con el icono de la aplicación y sus acciones, y EL LANZADOR SIGUE A UN TOQUE: nunca se
 *  esconde dentro de un desplegable (por eso no se toca en ninguna media query).
 * ========================================================================== */

/* ----------------------------------------------------------------------------
 *  1 · LA BARRA
 * ------------------------------------------------------------------------- */
.ubk-zona-comun {
  gap: 8px;
  /* La barra no puede desbordar el ancho: el nombre de la aplicación se recorta. */
  overflow: visible;
}
/* EN EL MÓVIL LA BARRA MIDE LO QUE MIDE LA PANTALLA, NO LO QUE MIDE EL DOCUMENTO.
   Medido a 390 px el 19/10/2026: una pantalla con una tabla ancha (incidencias) hace que el
   documento mida 492 px, y la barra, que es width:100%, se estiraba con él: el lanzador, la
   campana, el tema y el avatar quedaban FUERA de la ventana (y con overflow-x:hidden no había
   forma de llegar a ellos). Con 100vw la barra se queda en la pantalla y sus botones se ven
   siempre. Solo en el móvil: en escritorio 100vw incluiría el ancho de la barra de desplazamiento
   y la barra sobresaldría unos píxeles por la derecha. */
@media (max-width: 899.98px) {
  .ubk-zona-comun { width: 100vw; max-width: 100vw; padding: 0 8px; }
  .ubk-zona-derecha { gap: 1px; }
}
.ubk-zona-izquierda { flex: 1 1 auto; min-width: 0; gap: 4px; }
.ubk-zona-derecha { flex: 0 0 auto; gap: 2px; }
.ubk-zona-comun .ubk-appbar-texto { min-width: 0; max-width: 30vw; }
/* LA MARCA (el logo de UBIKUA) SE VA EN EL MÓVIL, y no es un descuido: a 390 px no caben el logo,
   el icono y el nombre de la aplicación, el lanzador, la campana, el tema y el avatar a la vez.
   Lo que manda el dueño es que se vea EL ICONO de la aplicación y que el lanzador esté a un toque;
   el logo de la casa sigue en el panel lateral y en cuanto la pantalla pasa de 600 px. */
.ubk-zona-comun .ubk-appbar-marca { display: none; }
.ubk-zona-comun .ubk-sidebar-toggle { width: 36px; height: 36px; }
.ubk-zona-comun .ubk-avatar { width: 32px; height: 32px; font-size: 0.9rem; }
.ubk-zona-comun .ubk-appbar-nombre,
.ubk-zona-comun .ubk-appbar-donde { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ubk-zona-comun .ubk-appbar-donde { display: none; }

/* ----------------------------------------------------------------------------
 *  2 · EL LANZADOR · «Mis aplicaciones», a un toque
 * ------------------------------------------------------------------------- */
.ubk-zona-lanzador {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; min-width: 40px;           /* área táctil de verdad, también en el móvil */
  padding: 0 8px;
  border-radius: var(--ubk-radius-pill, 999px);
  border: 1px solid var(--ubk-border-strong, #cbd5e1);
  background: var(--ubk-surface, #fff);
  color: var(--ubk-primary, #336699);
  font-weight: var(--ubk-w-semi, 600);
  font-size: 0.9rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--ubk-t-fast, 120ms) var(--ubk-ease, ease),
              border-color var(--ubk-t-fast, 120ms) var(--ubk-ease, ease);
}
.ubk-zona-lanzador:hover,
.ubk-zona-lanzador:focus-visible {
  background: var(--ubk-primary, #336699);
  border-color: var(--ubk-primary, #336699);
  color: var(--ubk-on-primary, #fff);
}
/* En el móvil el lanzador va SOLO con el icono: sigue estando a un toque, y no se apila. */
.ubk-zona-lanzador-texto { display: none; }

/* EL BOTÓN DEL TEMA, QUE SALÍA COMO UN CÍRCULO VACÍO. Ojo con esto, que se midió el 19/10/2026:
   .ubk-icon-btn del libro pinta el icono en BLANCO y NO trae fondo si no se le pone un modificador
   (--primary, --warning...), y boton_tema() no se lo pone. En una barra clara, blanco sobre blanco
   es un círculo vacío. Aquí se le da fondo y color de tinta, y así se ve en claro y en oscuro. */
.ubk-zona-comun .ubk-icon-btn {
  width: 36px; height: 36px;
  background: var(--ubk-surface-sunken, #f1f5f9);
  color: var(--ubk-text-body, #334155);
  border: 1px solid var(--ubk-border, #e2e8f0);
}
.ubk-zona-comun .ubk-icon-btn:hover {
  background: var(--ubk-surface-alt, #f8fafc);
  color: var(--ubk-primary, #336699);
  border-color: var(--ubk-border-strong, #cbd5e1);
}

/* ----------------------------------------------------------------------------
 *  3 · LOS DESPLEGABLES DE LA BARRA (los avisos) · el del perfil es el del libro
 * ------------------------------------------------------------------------- */
/* El desplegable de los avisos es un <details> NATIVO: se abre y se cierra solo, sin una línea
   de JavaScript, con teclado y con lector de pantalla. Un menú que necesita JS para abrirse es
   un menú que se queda mudo el día que el JS falla. */
.ubk-zona-dep { position: relative; display: inline-flex; }
.ubk-zona-dep > summary { list-style: none; }
.ubk-zona-dep > summary::-webkit-details-marker { display: none; }
.ubk-zona-dep[open] > summary {
  background: var(--ubk-surface-sunken, #f1f5f9);
  color: var(--ubk-primary, #336699);
}
.ubk-zona-boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-width: 40px; min-height: 44px;
  padding: 0 6px;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--ubk-radius-pill, 999px);
  color: var(--ubk-text-body, #334155);
  font: inherit;
  cursor: pointer;
}
.ubk-zona-boton:hover {
  background: var(--ubk-surface-sunken, #f1f5f9);
  color: var(--ubk-primary, #336699);
}
/* EL CONTADOR: el número de avisos que le llegan a ESTA persona (lo pone el núcleo). */
.ubk-zona-cuenta {
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: var(--ubk-radius-pill, 999px);
  background: var(--ubk-danger, #dc2626);
  color: var(--ubk-on-primary, #fff);
  font-size: 0.7rem; font-weight: var(--ubk-w-bold, 700); line-height: 18px;
  text-align: center;
}
.ubk-zona-cuenta[data-avisos="0"] { background: var(--ubk-surface-sunken, #f1f5f9); color: var(--ubk-text-muted, #64748b); }

.ubk-zona-panel {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: min(340px, calc(100vw - 16px));
  max-height: min(70vh, 460px);
  overflow-y: auto;
  background: var(--ubk-surface, #fff);
  border: 1px solid var(--ubk-border, #e2e8f0);
  border-radius: var(--ubk-radius-lg, 14px);
  box-shadow: var(--ubk-shadow-lg, 0 10px 30px rgb(15 23 42 / 18%));
  z-index: var(--ubk-z-dropdown, 9001);
}
.ubk-zona-dep[open] .ubk-zona-panel { display: block; }
.ubk-zona-panel-cab {
  display: flex; align-items: baseline; gap: 8px;
  padding: 12px 14px;
  background: var(--ubk-surface-alt, #f8fafc);
  border-bottom: 1px solid var(--ubk-border, #e2e8f0);
}
.ubk-zona-panel-titulo { font-weight: var(--ubk-w-semi, 600); color: var(--ubk-text, #0f172a); }
.ubk-zona-vacio { margin: 0; padding: 14px; color: var(--ubk-text-muted, #64748b); font-size: 0.86rem; }
.ubk-zona-aviso {
  display: flex; flex-direction: column; gap: 2px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--ubk-border, #e2e8f0);
}
.ubk-zona-aviso-nombre { font-weight: var(--ubk-w-semi, 600); color: var(--ubk-text, #0f172a); font-size: 0.9rem; }
.ubk-zona-aviso-cuando { color: var(--ubk-text-muted, #64748b); font-size: 0.8rem; }
.ubk-zona-aviso-motivo { color: var(--ubk-text-faint, #94a3b8); font-size: 0.76rem; }
.ubk-zona-panel-pie {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; min-height: 44px;
  color: var(--ubk-primary, #336699);
  font-weight: var(--ubk-w-semi, 600); font-size: 0.86rem; text-decoration: none;
}
.ubk-zona-panel-pie:hover { background: var(--ubk-surface-alt, #f8fafc); }

/* ----------------------------------------------------------------------------
 *  4 · TABLETA Y ESCRITORIO (>= 900 px) · el libro ya pone la barra lateral fija;
 *      aquí se AÑADE lo que no cabe en el móvil: el nombre del sitio y el texto del lanzador.
 * ------------------------------------------------------------------------- */
@media (min-width: 600px) {
  .ubk-zona-comun .ubk-appbar-marca { display: flex; }
  .ubk-zona-comun .ubk-sidebar-toggle { width: 40px; height: 40px; }
  .ubk-zona-comun .ubk-avatar { width: 36px; height: 36px; font-size: 0.95rem; }
  .ubk-zona-comun .ubk-appbar-texto { max-width: 40vw; }
  .ubk-zona-comun .ubk-icon-btn { width: 40px; height: 40px; }
  .ubk-zona-izquierda { gap: 8px; }
  .ubk-zona-derecha { gap: 6px; }
  .ubk-zona-lanzador { min-width: 44px; padding: 0 14px; }
  .ubk-zona-boton { min-width: 44px; padding: 0 8px; }
}
@media (min-width: 900px) {
  .ubk-zona-comun .ubk-appbar-donde { display: block; }
  .ubk-zona-comun .ubk-appbar-texto { max-width: none; }
  .ubk-zona-derecha { gap: 10px; }
  .ubk-zona-comun { padding: 0 14px; }
}
@media (min-width: 1100px) {
  .ubk-zona-lanzador-texto { display: inline; }
}

/* === fuentes.css === */
/* TIPOGRAFIAS SERVIDAS DESDE NUESTRO SERVIDOR (nada de Google en tiempo de ejecucion).
   Generado por tools/traer_fuentes.php. No se toca a mano. */

/* 19/10/2026 · RUTAS ABSOLUTAS. Iban relativas (url(/assets/fuentes/...)) y una CSS resuelve sus url()
   contra SI MISMA, no contra la pagina: desde /assets/fuentes/fuentes.css el navegador pedia
   /assets/fuentes/assets/fuentes/inter/400.woff2 y las tres tipografias daban 404. Con la barra delante
   da igual desde donde se cargue el fichero, que es lo que hace falta cuando una pantalla vive en una
   subcarpeta (el portal de Atlantic Tech Hub). Lo genera tools/traer_fuentes.php: hay que corregirlo alli. */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fuentes/inter/400.woff2) format("woff2");}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fuentes/inter/600.woff2) format("woff2");}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fuentes/inter/700.woff2) format("woff2");}
@font-face{font-family:"Roboto";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fuentes/roboto/400.woff2) format("woff2");}
@font-face{font-family:"Roboto";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fuentes/roboto/500.woff2) format("woff2");}
@font-face{font-family:"Roboto";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fuentes/roboto/700.woff2) format("woff2");}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fuentes/open-sans/400.woff2) format("woff2");}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fuentes/open-sans/600.woff2) format("woff2");}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fuentes/open-sans/700.woff2) format("woff2");}
@font-face{font-family:"Lato";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fuentes/lato/400.woff2) format("woff2");}
@font-face{font-family:"Lato";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fuentes/lato/700.woff2) format("woff2");}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fuentes/montserrat/400.woff2) format("woff2");}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fuentes/montserrat/600.woff2) format("woff2");}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fuentes/montserrat/700.woff2) format("woff2");}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fuentes/source-sans-3/400.woff2) format("woff2");}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fuentes/source-sans-3/600.woff2) format("woff2");}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fuentes/source-sans-3/700.woff2) format("woff2");}
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fuentes/nunito-sans/400.woff2) format("woff2");}
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fuentes/nunito-sans/600.woff2) format("woff2");}
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fuentes/nunito-sans/700.woff2) format("woff2");}


/* MODO CLARO SIEMPRE */
:root{ color-scheme: light; }
:root[data-theme="dark"]{ color-scheme: dark; }

@layer reset, tokens, shell, uikit, module, utilities;

/* La MARCA de Ayuntamiento de Granadilla de Abona: 100 variables de color y tipografía. Las 27 medidas de estructura NO se inyectan: manda el libro (A5). */
:root{
  --ubk-primary: #336699;
  --ubk-primary-hover: #274f77;
  --ubk-primary-soft: #e8f1f8;
  --ubk-primary-line: #b9d3e6;
  --ubk-on-primary: #ffffff;
  --ubk-secondary: #f6bb00;
  --ubk-secondary-hover: #e0a800;
  --ubk-secondary-soft: #fff8e0;
  --ubk-secondary-line: #f3d97a;
  --ubk-on-secondary: #1e293b;
  --ubk-success: #15803d;
  --ubk-success-soft: #e8f7ee;
  --ubk-success-line: #a7ddb9;
  --ubk-warning: #b45309;
  --ubk-warning-soft: #fdf3e3;
  --ubk-warning-line: #f0cf9a;
  --ubk-danger: #b91c1c;
  --ubk-danger-soft: #fdecec;
  --ubk-danger-line: #f0b3b3;
  --ubk-info: #0369a1;
  --ubk-info-soft: #e6f2fa;
  --ubk-info-line: #a9d3ea;
  --ubk-accent: #6d28d9;
  --ubk-accent-soft: #f2ecfd;
  --ubk-accent-line: #cdb8f5;
  --ubk-ink: #0f172a;
  --ubk-text: #1e293b;
  --ubk-text-body: #3f4c60;
  --ubk-text-muted: #5c6b80;
  --ubk-text-faint: #5d6b7c;
  --ubk-bg: #f4f6f8;
  --ubk-surface: #ffffff;
  --ubk-surface-alt: #f7f9fb;
  --ubk-surface-sunken: #eef1f5;
  --ubk-border: #dde3ea;
  --ubk-border-strong: #c2cbd6;
  --ubk-border-soft: #eef1f5;
  --ubk-header-bg: #ffffff;
  --ubk-header-text: #1e293b;
  --ubk-header-border: #dde3ea;
  --ubk-sidebar-bg: #ffffff;
  --ubk-sidebar-text: #5c6b80;
  --ubk-sidebar-active-bg: #eef4f9;
  --ubk-footer-bg: #1e293b;
  --ubk-footer-text: #94a3b8;
  --ubk-focus: #336699;
  --ubk-focus-halo: rgba(51, 102, 153, 0.22);
  --ubk-shadow-color: 15, 23, 42;
  --ubk-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ubk-font-brand: "Segoe UI", Roboto, -apple-system, sans-serif;
  --ubk-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace;
  --ubk-w-normal: 400;
  --ubk-w-medium: 500;
  --ubk-w-semi: 600;
  --ubk-w-bold: 700;
  --ubk-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ubk-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ubk-t-fast: 0.15s;
  --ubk-t: 0.2s;
  --ubk-t-slow: 0.3s;
  --ubk-z-sidebar: 20;
  --ubk-z-header: 9000;
  --ubk-z-dropdown: 9001;
  --ubk-z-overlay: 9500;
  --ubk-z-floating: 9999;
  --ubk-z-modal: 99999;
  --ubk-z-modal-top: 100000;
  --ubk-ods-1: #E5243B;
  --ubk-ods-4: #C5192D;
  --ubk-ods-7: #FCC30B;
  --ubk-ods-10: #DD1367;
  --ubk-ods-13: #3F7E44;
  --ubk-ods-16: #00689D;
  --ubk-oe-1: #78b943;
  --ubk-oe-4: #5c5e60;
  --ubk-oe-7: #e74c96;
  --ubk-oe-10: #832c7b;
  --ubk-comp-c01: #4caf50;
  --ubk-comp-c02: #2196f3;
  --ubk-comp-c03: #2196f3;
  --ubk-comp-c04: #ff9800;
  --ubk-comp-c05: #00bcd4;
  --ubk-comp-c06: #9c27b0;
  --ubk-comp-c07: #8bc34a;
  --ubk-comp-c08: #fedf17;
  --ubk-comp-c09: #A020F0;
  --ubk-comp-c10: #ff5722;
  --ubk-comp-c10-2-1: #ffab91;
  --ubk-comp-c10-3: #ff7043;
  --ubk-comp-c11: #795548;
  --ubk-comp-c12: #607d8b;
  --ubk-comp-c13: #7c4dff;
  --ubk-comp-c14: #03a9f4;
  --ubk-ambito-1: #2E4057;
  --ubk-ambito-2: #4CAF50;
  --ubk-ambito-3: #FF9800;
  --ubk-ambito-4: #00BCD4;
  --ubk-ambito-5: #8BC34A;
  --ubk-ambito-6: #E91E63;
  --ubk-ambito-7: #9C27B0;
}