/* ===========================================================================
 * hiperion-tema.css — Tema visual de la ERP HiPERiON 3.0
 * ---------------------------------------------------------------------------
 * POR QUÉ EXISTE ESTE ARCHIVO
 *
 * Hasta ahora cada pantalla de la ERP traía su propio bloque <style> en
 * línea, con sus colores escritos a mano. El resultado eran tres azules
 * distintos según la pantalla y ningún sitio donde cambiarlos de una vez.
 * Este archivo es ese sitio único: los colores, las tipografías y las
 * formas del rediseño viven aquí y solo aquí.
 *
 * POR QUÉ TODO LLEVA EL PREFIJO «hip-»
 *
 * En la raíz conviven ~280 vistas con tres versiones de Bootstrap cargadas
 * según la pantalla, DataTables, Select2 y clases propias heredadas. Una
 * clase llamada «.tarjeta», «.tab» o «.boton» choca tarde o temprano con
 * algo. El prefijo no es decoración: es lo que permite añadir reglas sin
 * romper vistas que no hemos mirado.
 *
 * POR LA MISMA RAZÓN, NUNCA SELECCIONAR POR [id^="boton-"]
 *
 * Los `id="boton-..."` del menú principal no son los únicos del
 * repositorio: varias vistas tienen botones internos con ese mismo
 * patrón (por ejemplo #boton-Insertar-Sesiones en
 * Plantilla_Actividades_v2.php). La navegación se acota a
 * `.hip-pestanas a` y a `.hip-modulo`, jamás al prefijo del id.
 *
 * ORDEN DE CARGA
 *
 * Este archivo va DESPUÉS de Bootstrap y de sb-admin-2 en el <head>, para
 * ganar por orden en lugar de por `!important`. Donde hay `!important` es
 * porque Bootstrap gana por especificidad y está señalado.
 *
 * ANIMACIONES
 *
 * Todas se apagan con `prefers-reduced-motion: reduce` al final del
 * archivo. Si añades una, añádela también allí.
 *
 * Etapa 1 del rediseño (rama rediseno-shell). Ver ~/erp-diseno/REDISENO.md.
 * =========================================================================== */


/* ---------------------------------------------------------------------------
 * 1. Variables
 * ------------------------------------------------------------------------- */

:root {
    /* Superficies */
    --hip-fondo:            #071226;  /* fondo de página */
    --hip-superficie:       #0D1D38;  /* tarjeta */
    --hip-superficie-alta:  #12274A;  /* superficie elevada, cabecera de tabla, hover */
    --hip-superficie-prota: #0F2548;  /* tarjeta protagonista */

    /* Bordes */
    --hip-borde:            #1B3157;  /* borde normal */
    --hip-borde-campo:      #33507F;  /* campos y botones secundarios */
    --hip-borde-activo:     #6FA8F5;  /* borde de lo seleccionado */

    /* Texto */
    --hip-texto:            #F2F6FC;  /* principal */
    --hip-texto-sec:        #D5E0EF;  /* secundario */
    --hip-texto-apagado:    #A9BAD3;  /* atenuado */

    /* Azules de marca */
    --hip-azul:             #1F497D;  /* fondos de ícono, activo en barra */
    --hip-azul-medio:       #548DD4;  /* gráficas */
    --hip-azul-claro:       #8FBCFF;  /* acción principal, enlaces, foco */
    --hip-sobre-azul-claro: #071226;  /* texto sobre azul claro */

    /* Estados */
    --hip-por-pagar-fondo:  #33290F;
    --hip-por-pagar-texto:  #F5CB7A;

    /* Series de gráficas, de la más reciente a la más antigua */
    --hip-serie-1:          #8FBCFF;
    --hip-serie-2:          #548DD4;
    --hip-serie-3:          #2F5F9E;
    --hip-serie-4:          #29508A;

    /* Tipografías */
    --hip-fuente-titulo: 'Sora', 'Manrope', 'Segoe UI', system-ui, sans-serif;
    --hip-fuente-texto:  'Manrope', 'Segoe UI', system-ui, sans-serif;

    /* Formas */
    --hip-radio-tarjeta: 28px;
    --hip-radio-media:   24px;
    --hip-radio-boton:   14px;
    --hip-radio-pestana: 13px;
    --hip-radio-campo:   12px;
    --hip-ancho-maximo:  1376px;
}


/* ---------------------------------------------------------------------------
 * 2. Página
 *
 * `body.hip-app` (0,1,1) gana a los `body` (0,0,1) de Bootstrap y de
 * sb-admin-2 sin necesidad de !important.
 * ------------------------------------------------------------------------- */

body.hip-app {
    margin: 0;
    background-color: var(--hip-fondo);
    color: var(--hip-texto);
    font-family: var(--hip-fuente-texto);
    font-size: 15px;
    line-height: 1.45;
}

body.hip-app h1,
body.hip-app h2,
body.hip-app h3,
body.hip-app h4 {
    font-family: var(--hip-fuente-titulo);
    letter-spacing: -0.02em;
}

.hip-contenedor {
    max-width: var(--hip-ancho-maximo);
    margin: 0 auto;
    padding: 20px 32px 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Cifras: siempre tabulares, para que no bailen al actualizarse */
.hip-cifra {
    font-family: var(--hip-fuente-titulo);
    font-weight: 800;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

/* Ocultar. Lleva !important porque tiene que ganarle a los `display` que
   Bootstrap y sb-admin-2 ponen en .container-fluid, .card y compañía. */
.hip-oculto {
    display: none !important;
}

/* Distintivo de novedad, como el «New» que llevaba Análisis de Clientes */
.hip-nuevo {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--hip-sobre-azul-claro);
    background: var(--hip-azul-claro);
    border-radius: 6px;
    padding: 2px 6px;
    margin-left: 8px;
}

/* Foco visible y uniforme en todo lo interactivo del tema */
.hip-app a:focus-visible,
.hip-app button:focus-visible,
.hip-app input:focus-visible,
.hip-app select:focus-visible,
.hip-app textarea:focus-visible {
    outline: 2px solid var(--hip-azul-claro);
    outline-offset: 2px;
}


/* ---------------------------------------------------------------------------
 * 3. Barra superior
 * ------------------------------------------------------------------------- */

/* La barra necesita `position` y `z-index` propios, y no es cosmético.
 *
 * La barra lleva la clase .hip-sube, que anima opacity y transform con
 * fill: both. Eso la convierte en CONTEXTO DE APILAMIENTO, y entonces el
 * z-index: 1200 de los paneles desplegables deja de competir con el resto
 * de la página: queda encerrado dentro de la barra. La barra, con z-index
 * auto, pelea como nivel 0 contra las tarjetas del inicio —que también
 * son contextos de apilamiento por la misma animación— y pierde por ser
 * la primera en el DOM.
 *
 * Resultado medido en Chrome antes de añadir esto: de las dos opciones
 * del menú de usuario, 0 recibían el clic; de las diez del panel
 * «Módulos», 1. Las tapaba la tarjeta de «Clientes actuales».
 *
 * Con un z-index explícito la barra pasa a ser un contexto con nivel
 * propio por encima del contenido, y su subárbol entero —paneles
 * incluidos— se pinta delante. No quitar. */
.hip-barra {
    position: relative;
    z-index: 1000;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    background: var(--hip-superficie);
    border: 1px solid var(--hip-borde);
    border-radius: 22px;
    padding: 10px 12px 10px 20px;
}

.hip-barra-marca {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.hip-barra-marca img {
    height: 34px;
    width: auto;
}

.hip-barra-nombre {
    font-family: var(--hip-fuente-titulo);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.hip-chip {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--hip-texto-apagado);
    border: 1px solid var(--hip-borde);
    border-radius: 8px;
    padding: 3px 8px;
    white-space: nowrap;
}

.hip-barra-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

/* `.hip-barra-nav a` (0,1,1) gana al `a` de Bootstrap */
.hip-barra-nav a {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    box-sizing: border-box;
    padding: 0 18px;
    border-radius: var(--hip-radio-boton);
    color: var(--hip-texto-sec);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.hip-barra-nav a:hover {
    background: var(--hip-superficie-alta);
    color: #FFFFFF;
    text-decoration: none;
}

.hip-barra-nav a[aria-current="page"] {
    background: var(--hip-azul);
    color: #FFFFFF;
    font-weight: 700;
}

.hip-barra-derecha {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

/* Reloj */
.hip-reloj {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 6px;
    color: var(--hip-texto-sec);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.hip-reloj-punto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--hip-azul-claro);
}


/* ---------------------------------------------------------------------------
 * 4. Menú de usuario
 * ------------------------------------------------------------------------- */

.hip-usuario {
    position: relative;
}

.hip-usuario-boton {
    min-height: 44px;
    padding: 0 12px 0 4px;
    border-radius: 22px;
    border: 1px solid var(--hip-borde);
    background: var(--hip-superficie-alta);
    color: #FFFFFF;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: border-color .2s ease;
}

.hip-usuario-boton:hover {
    border-color: var(--hip-borde-activo);
}

.hip-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--hip-azul-medio);
    color: var(--hip-sobre-azul-claro);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    object-fit: cover;
    flex: none;
    overflow: hidden;
}

.hip-usuario-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 1200;
    min-width: 260px;
    background: var(--hip-superficie);
    border: 1px solid var(--hip-borde);
    border-radius: 18px;
    padding: 8px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
    display: none;
    flex-direction: column;
    gap: 2px;
}

.hip-usuario-panel.hip-abierto {
    display: flex;
}

.hip-usuario-panel .hip-usuario-quien {
    padding: 8px 12px 10px;
    border-bottom: 1px solid var(--hip-borde);
    margin-bottom: 6px;
}

.hip-usuario-panel .hip-usuario-quien strong {
    display: block;
    font-weight: 700;
    color: var(--hip-texto);
}

.hip-usuario-panel .hip-usuario-quien span {
    font-size: 13px;
    color: var(--hip-texto-apagado);
}

.hip-usuario-panel a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 12px;
    border-radius: var(--hip-radio-campo);
    color: var(--hip-texto-sec);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.hip-usuario-panel a:hover {
    background: var(--hip-superficie-alta);
    color: #FFFFFF;
    text-decoration: none;
}


/* ---------------------------------------------------------------------------
 * 5. Tarjetas
 * ------------------------------------------------------------------------- */

.hip-tarjeta {
    box-sizing: border-box;
    background: var(--hip-superficie);
    border: 1px solid var(--hip-borde);
    border-radius: var(--hip-radio-tarjeta);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 0;
}

.hip-tarjeta-prota {
    background: var(--hip-superficie-prota);
}

.hip-tarjeta h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.hip-tarjeta-sub {
    font-size: 14px;
    color: var(--hip-texto-apagado);
}

.hip-rotulo {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--hip-texto-apagado);
}

.hip-fila {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: stretch;
}

/* Las flechas del isotipo, de adorno al fondo de las tarjetas */
.hip-flechas {
    clip-path: polygon(0 0, 55% 0, 100% 50%, 55% 100%, 0 100%, 45% 50%);
    pointer-events: none;
}

.hip-icono {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    background: var(--hip-azul);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.hip-icono-chico {
    width: 40px;
    height: 40px;
    border-radius: 13px;
}


/* ---------------------------------------------------------------------------
 * 6. Botones y enlaces de acción
 *
 * Mínimo 44 px de alto, como pide REDISENO §2.
 * ------------------------------------------------------------------------- */

.hip-btn,
.hip-btn-sec {
    min-height: 44px;
    box-sizing: border-box;
    padding: 0 18px;
    border-radius: var(--hip-radio-boton);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease, border-color .2s ease;
}

.hip-btn {
    border: none;
    background: var(--hip-azul-claro);
    color: var(--hip-sobre-azul-claro);
    font-weight: 800;
}

.hip-btn:hover {
    background: #A9CCFF;
    color: var(--hip-sobre-azul-claro);
    transform: translateY(-2px);
    text-decoration: none;
}

.hip-btn-sec {
    border: 1px solid var(--hip-borde-campo);
    background: var(--hip-superficie);
    color: var(--hip-texto);
}

.hip-btn-sec:hover {
    border-color: var(--hip-borde-activo);
    background: var(--hip-superficie-alta);
    color: #FFFFFF;
    text-decoration: none;
}

/* La flecha que avanza al pasar el cursor */
.hip-btn .hip-flecha,
.hip-modulo .hip-flecha {
    transition: transform .25s ease;
    flex: none;
}

.hip-btn:hover .hip-flecha,
.hip-modulo:hover .hip-flecha {
    transform: translateX(6px);
}

/* Enlaces dentro del tema */
.hip-enlace {
    color: var(--hip-azul-claro);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
}

.hip-enlace:hover {
    color: #FFFFFF;
    text-decoration: underline;
}


/* ---------------------------------------------------------------------------
 * 7. Campos de formulario
 * ------------------------------------------------------------------------- */

.hip-rotulo-campo {
    font-size: 13px;
    font-weight: 700;
    color: var(--hip-texto);
}

.hip-campo {
    width: 100%;
    height: 54px;
    box-sizing: border-box;
    padding: 0 16px;
    border-radius: var(--hip-radio-boton);
    border: 1px solid var(--hip-borde-campo);
    background: var(--hip-fondo);
    color: var(--hip-texto);
    font-family: inherit;
    font-size: 16px;
}

.hip-campo::placeholder {
    color: var(--hip-texto-apagado);
}


/* ---------------------------------------------------------------------------
 * 8. Tarjetas de módulo
 * ------------------------------------------------------------------------- */

.hip-rejilla-modulos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
}

/* Las tarjetas de módulo son <button>, no <a>: no navegan a ninguna URL,
   abren el módulo dentro del shell. Siendo <button> salen enfocables y
   operables con teclado sin añadir nada. Estas tres reglas son las que
   deshacen el aspecto por defecto del botón. */
.hip-modulo {
    width: 100%;
    text-align: left;
    font-family: inherit;
    position: relative;
    overflow: hidden;
    min-height: 148px;
    box-sizing: border-box;
    padding: 20px;
    border-radius: var(--hip-radio-media);
    background: var(--hip-superficie);
    border: 1px solid var(--hip-borde);
    color: #FFFFFF;
    text-decoration: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    transition: transform .25s ease, border-color .25s ease, background .25s ease;
}

.hip-modulo:hover {
    transform: translateY(-5px);
    border-color: var(--hip-borde-activo);
    background: #16305A;
    color: #FFFFFF;
    text-decoration: none;
}

.hip-modulo-titulo {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
}

/* Variante en lista, para las cápsulas y el código de ética */
.hip-modulo-lista {
    min-height: 56px;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 8px 14px 8px 8px;
    border-radius: 16px;
}

.hip-modulo-lista:hover {
    transform: none;
}


/* ---------------------------------------------------------------------------
 * 9. Pestañas de módulo
 *
 * Reemplazan el submenú de la barra lateral. Cada módulo tiene su fila; en
 * el DOM están las diez desde la primera carga, visible solo la del módulo
 * abierto, porque los 42 manejadores del menú se atan por id en
 * $(document).ready y necesitan que su elemento exista ya.
 * ------------------------------------------------------------------------- */

.hip-pestanas {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    background: var(--hip-superficie);
    border: 1px solid var(--hip-borde);
    border-radius: 18px;
    padding: 6px;
}

/* EL COLOR DE LAS PESTAÑAS VA BLINDADO. No le quites el `.hip-app` ni el
 * -webkit-text-fill-color, y si añades un estado nuevo, dale los dos.
 *
 * sb-admin-2.min.css trae esta regla:
 *
 *     a:not([href]):not([class]) { color: inherit }
 *
 * y las pestañas son exactamente eso: <a> sin href y sin class. Ese
 * selector pesa (0,2,1), lo mismo que pesaba `.hip-pestanas
 * a[aria-current="page"]`. Con la especificidad empatada el desempate lo
 * hacía el orden de carga de las hojas, y de eso no se puede depender.
 *
 * Cuando gana sb-admin-2, el `color: inherit` sube hasta body.hip-app y la
 * pestaña activa queda con el texto claro del tema oscuro sobre su fondo
 * azul claro —porque el `background` sí lo sigue poniendo esta hoja—, que
 * es justo lo que se vio en iPhone el 9 de octubre de 2026. En escritorio
 * salía bien, y eso hace que parezca un fallo del dispositivo cuando es un
 * empate de especificidad.
 *
 * El `.hip-app` de delante lo sube a (0,3,1) y deja de haber empate. El
 * -webkit-text-fill-color va porque en WebKit gana a `color`: si algo lo
 * pusiera más arriba, el `color` no serviría de nada. */
.hip-app .hip-pestanas a {
    display: flex;
    align-items: center;
    min-height: 44px;
    box-sizing: border-box;
    padding: 0 16px;
    border-radius: var(--hip-radio-pestana);
    color: var(--hip-texto-sec);
    -webkit-text-fill-color: var(--hip-texto-sec);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.hip-app .hip-pestanas a:hover {
    background: var(--hip-superficie-alta);
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
    text-decoration: none;
}

/* Va después de :hover a propósito: los dos pesan igual y en iOS el
   :hover se queda pegado tras tocar, así que el activo tiene que ganar
   por orden. */
.hip-app .hip-pestanas a[aria-current="page"] {
    background: var(--hip-azul-claro);
    color: var(--hip-sobre-azul-claro);
    -webkit-text-fill-color: var(--hip-sobre-azul-claro);
    font-weight: 800;
}

/* Migaja de pan y título del módulo */
.hip-migaja {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--hip-texto-apagado);
}

.hip-migaja a {
    color: var(--hip-azul-claro);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.hip-migaja a:hover {
    text-decoration: underline;
}

.hip-titulo-modulo {
    margin: 0;
    font-family: var(--hip-fuente-titulo);
    font-size: 34px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.03em;
}

/* Aviso de «elige una opción» para los módulos con varias */
.hip-elegir {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--hip-superficie);
    border: 1px dashed var(--hip-borde-campo);
    border-radius: var(--hip-radio-media);
    padding: 28px;
    color: var(--hip-texto-sec);
}


/* ---------------------------------------------------------------------------
 * 10. Barras, anillos y leyendas del tablero
 * ------------------------------------------------------------------------- */

.hip-barra-pista {
    height: 10px;
    border-radius: 5px;
    background: var(--hip-superficie-alta);
    overflow: hidden;
}

.hip-barra-valor {
    height: 100%;
    border-radius: 5px;
    background: var(--hip-serie-1);
}

.hip-leyenda {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hip-punto {
    flex: none;
    width: 12px;
    height: 12px;
    border-radius: 4px;
}


/* ---------------------------------------------------------------------------
 * 11. Superficie provisional de #base — SE QUITA EN LA ETAPA 2
 *
 * Las ~280 vistas internas todavía están pensadas para fondo claro. Hasta
 * que la etapa 2 las vista, #base lleva una superficie clara para que sigan
 * siendo legibles sobre el fondo oscuro, y para que esta etapa se pueda
 * desplegar por sí sola.
 *
 * Las reglas de contraste de tablas y texto de #base siguen en el <style>
 * en línea de Menu_Principal_Admin.php, donde ya estaban.
 *
 * Cuando llegue la etapa 2: borrar este bloque completo.
 * ------------------------------------------------------------------------- */

.hip-app #base.hip-base-clara {
    background: #FFFFFF;
    border-radius: var(--hip-radio-media);
    padding: 24px !important;   /* gana al padding-top del <style> en línea */
    margin: 0;

    /* OJO: aquí NO va `overflow`.
       Lo llevó un día y hubo que quitarlo: `overflow` recorta en el borde
       del PADDING BOX, no en el del contenido, así que los 24 px de relleno
       quedan dentro de la zona recortada. La tabla ancha los atravesaba y
       se cortaba a mitad de columna contra la esquina redondeada, que es
       justo lo que parecía un desbordamiento. El desplazamiento vive ahora
       en .hip-tabla-ancha, un contenedor por tabla. */
}

/* #base vacío no debe dejar un rectángulo blanco suelto en el tablero */
.hip-app #base.hip-base-clara:empty {
    display: none;
}

/* Campos que no caben en el móvil — SE QUITA EN LA ETAPA 2
 *
 * El shell carga Bootstrap 4.3.1, y `.form-select` es una clase de
 * Bootstrap 5: no está definida en bootstrap.min.css ni en sb-admin-2. Las
 * 48 apariciones que hay en 14 vistas son, por tanto, clases sin estilos, y
 * un <select> sin `width` se dimensiona a su opción más larga. Con nombres
 * de cliente de verdad —«COOPERATIVA MULTIACTIVA DE TRABAJADORES...»— eso
 * son 527 px en una pantalla de 393: el campo se sale por la derecha y
 * arrastra consigo el desplazamiento horizontal de toda la página.
 *
 * En escritorio no se ve porque sobra sitio. Medido en iPhone el 9 de
 * octubre de 2026 en «Cargue por unidades», campos CLIENTE y SERVICIO
 * OFRECIDO.
 *
 * Se le da a .form-select el ancho que tendría en Bootstrap 5, que es lo
 * que esperaba quien escribió la vista.
 *
 * El max-width es la red de seguridad para todo lo demás, y hace falta
 * aparte: Select2 congela un ancho EN PÍXELES al inicializarse —lo resuelve
 * del <select> original, que ya venía sobredimensionado— y lo deja en el
 * atributo style, donde ningún `width` lo alcanza. */
.hip-app #base .form-select {
    display: block;
    width: 100%;
}

.hip-app #base select,
.hip-app #base input,
.hip-app #base textarea,
.hip-app #base .select2-container {
    max-width: 100%;
}


/* Contenedor desplazable de las tablas anchas.
 *
 * Lo pone el shell alrededor de cada <table> de #base; ver el bloque
 * «TABLAS ANCHAS» de Menu_Principal_Admin.php, que explica el porqué del
 * MutationObserver y del orden respecto a DataTables.
 *
 * Al estar DENTRO del contenido de #base, la superficie conserva su
 * relleno por los cuatro lados y la barra de desplazamiento cae dentro del
 * margen blanco, no pegada a la esquina redondeada.
 *
 * Solo envuelve: `auto` no dibuja barra cuando la tabla cabe, de modo que
 * las vistas de tabla normal se ven exactamente igual que antes. Y como
 * envuelve la tabla y no el bloque de DataTables, el buscador y los botones
 * de Excel y PDF se quedan quietos mientras la tabla se desplaza. */
.hip-app #base .hip-tabla-ancha {
    overflow-x: auto;
}


/* ---------------------------------------------------------------------------
 * 11 bis. Widgets que las vistas cuelgan de <body> — SE QUITA EN LA ETAPA 2
 *
 * Select2 y SweetAlert2 no dibujan donde se les invoca: sacan su panel del
 * sitio y lo cuelgan directamente de <body>. Ahí ya no les alcanza la regla
 * `#base * { color: #1a1a1a }` del <style> en línea del shell, de modo que
 * heredan el color de `body.hip-app` —texto claro, para el fondo oscuro—
 * y acaban escribiendo en casi blanco sobre el fondo blanco del propio
 * widget. Se ve el panel, pero no se lee nada.
 *
 * Pasó con el desplegable del año de Consulta de Sesiones: las opciones no
 * resaltadas salían en #F2F6FC sobre blanco.
 *
 * No se tiñe el widget entero: solo se le devuelve el color de texto que
 * habría tenido dentro de #base. Lo que el widget pinta a propósito —la
 * opción resaltada de Select2, en blanco sobre azul— trae más
 * especificidad en su propio CSS y sigue mandando.
 *
 * Si mañana una vista monta otra cosa fuera de #base (un «tooltip», un
 * calendario), añádela a esta lista.
 * ------------------------------------------------------------------------- */

/* Select2 — 20 de las 42 vistas */
.hip-app .select2-dropdown,
.hip-app .select2-results__option,
.hip-app .select2-results__group,
.hip-app .select2-search__field,
.hip-app .select2-selection__rendered,
.hip-app .select2-selection__placeholder {
    color: #1a1a1a;
}

/* SweetAlert2 — 8 de las 42 vistas */
.hip-app .swal2-popup,
.hip-app .swal2-title,
.hip-app .swal2-html-container,
.hip-app .swal2-input,
.hip-app .swal2-textarea,
.hip-app .swal2-select,
.hip-app .swal2-label {
    color: #1a1a1a;
}


/* ---------------------------------------------------------------------------
 * 12. Pie
 * ------------------------------------------------------------------------- */

.hip-pie {
    text-align: center;
    padding: 24px 32px 32px;
    font-size: 13px;
    color: var(--hip-texto-apagado);
}


/* ---------------------------------------------------------------------------
 * 13. Animaciones
 *
 * Si añades una, añádela también al bloque de prefers-reduced-motion.
 * ------------------------------------------------------------------------- */

@keyframes hip-sube   { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes hip-entra  { from { opacity: 0; transform: translateX(-120px); } to { opacity: 1; transform: none; } }
@keyframes hip-crece  { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes hip-ancho  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hip-anillo { from { stroke-dasharray: 0 100; } }
@keyframes hip-traza  { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes hip-aparece{ from { opacity: 0; } to { opacity: 1; } }
@keyframes hip-deriva { 0% { transform: translateX(0); } 50% { transform: translateX(28px); } 100% { transform: translateX(0); } }
@keyframes hip-pulso  { 0% { box-shadow: 0 0 0 0 rgba(143, 188, 255, .55); } 100% { box-shadow: 0 0 0 10px rgba(143, 188, 255, 0); } }

.hip-sube    { animation: hip-sube .7s cubic-bezier(.2, .7, .2, 1) both; }
.hip-entra   { animation: hip-entra 1.1s cubic-bezier(.2, .7, .2, 1) both; }
.hip-crece   { transform-origin: bottom; animation: hip-crece .8s cubic-bezier(.2, .7, .2, 1) both; }
.hip-ancho   { transform-origin: left; animation: hip-ancho 1s cubic-bezier(.2, .7, .2, 1) .5s both; }
.hip-anillo  { animation: hip-anillo 1.4s cubic-bezier(.2, .7, .2, 1) .4s both; }
.hip-traza   { stroke-dasharray: 1; animation: hip-traza 1.8s ease-out .3s both; }
.hip-area    { animation: hip-aparece 1.2s ease-out 1.3s both; }
.hip-deriva  { animation: hip-deriva 9s ease-in-out infinite; }
.hip-deriva2 { animation: hip-deriva 12s ease-in-out -4s infinite; }
.hip-pulso   { animation: hip-pulso 1.8s ease-out infinite; }

@media (prefers-reduced-motion: reduce) {
    .hip-sube, .hip-entra, .hip-crece, .hip-ancho, .hip-anillo,
    .hip-traza, .hip-area, .hip-deriva, .hip-deriva2, .hip-pulso {
        animation: none;
    }
    .hip-modulo, .hip-btn, .hip-btn-sec, .hip-pestanas a, .hip-barra-nav a,
    .hip-usuario-boton, .hip-modulo .hip-flecha, .hip-btn .hip-flecha {
        transition: none;
    }
}


/* ---------------------------------------------------------------------------
 * 14. Ajustes de ancho
 * ------------------------------------------------------------------------- */

@media (max-width: 1100px) {
    .hip-contenedor { padding: 16px 20px 32px; }
    .hip-titulo-modulo { font-size: 28px; }
}

@media (max-width: 760px) {
    .hip-contenedor { padding: 12px 14px 28px; gap: 16px; }
    .hip-barra { border-radius: 18px; padding: 10px 12px; }
    .hip-barra-derecha { margin-left: 0; width: 100%; }
    .hip-tarjeta { padding: 20px; border-radius: var(--hip-radio-media); }
    .hip-titulo-modulo { font-size: 24px; }
    .hip-pestanas { border-radius: 16px; }
    /* Las pestañas se desplazan en lugar de amontonarse */
    .hip-pestanas { flex-wrap: nowrap; overflow-x: auto; }
}