/* ============================================================
   AYUU APPS — Base visual compartida
   ============================================================

   Este archivo existe porque los seis módulos se construyeron por
   separado y cada uno definió su propia versión de lo mismo. La
   medición del 16/08/2026 encontró:

     · .card definida en 4 módulos con 4 radios distintos
       (0.75rem, 0.5rem, y dos variables diferentes), dos con borde
       y dos sin él.
     · Tres nombres para el mismo color: --color-primary (citas),
       --primary-color (stats, gestionemp), --primary (certificados).
     · Tres azules: #3b82f6 en tres módulos, #007bff en stats.
     · Tres verdes: #10b981, #22c55e y #28a745.
     · Entre 43 y 65 combinaciones de color por módulo.

   CÓMO FUNCIONA LA UNIFICACIÓN SIN REESCRIBIR NADA

   Abajo se define la paleta canónica y, a continuación, alias con
   los tres nombres heredados apuntando a esos mismos valores. Así el
   CSS que ya existe en cada módulo sigue funcionando tal cual —usa
   var(--primary-color) o var(--radius) como siempre— pero todos
   resuelven al mismo color.

   IMPORTANTE: este archivo debe cargarse DESPUÉS del CSS de cada
   módulo. Las variables se resuelven al usarse, pero cuando dos
   :root declaran la misma, gana la última en cargarse. Cargándolo
   después, la paleta canónica prevalece sobre las locales.

   ============================================================ */

:root {
    /* ---- Colores con significado ---- */
    --ayuu-primario:        #3b82f6;   /* acción principal, enlaces */
    --ayuu-marca:           #c2410c;   /* naranja de marca, 5,18:1 con blanco */
    --ayuu-marca-borde:     #ea580c;   /* el mismo, para bordes: 3,56:1 */
    --ayuu-primario-fuerte: #2563eb;   /* estado hover del primario */
    --ayuu-exito:           #10b981;   /* confirmaciones, estados completados */
    --ayuu-aviso:           #f59e0b;   /* advertencias, esperas, prioridad media */
    --ayuu-peligro:         #ef4444;   /* errores, borrado, prioridad alta */
    --ayuu-info:            #0ea5e9;   /* mensajes neutros informativos */
    --ayuu-neutro:          #6b7280;   /* acciones secundarias */

    /* ---- Superficies y texto ---- */
    --ayuu-superficie:      #ffffff;
    --ayuu-fondo:           #f9fafb;
    --ayuu-borde:           #e5e7eb;
    --ayuu-texto:           #111827;
    --ayuu-texto-suave:     #6b7280;

    /* ---- Forma ---- */
    --ayuu-radio:           0.75rem;
    --ayuu-radio-sm:        0.5rem;
    --ayuu-sombra:          0 1px 3px rgba(0, 0, 0, 0.1);
    --ayuu-sombra-alta:     0 10px 25px rgba(0, 0, 0, 0.12);
    --ayuu-transicion:      all 0.2s ease;


    /* ============================================================
       ESCALA TIPOGRÁFICA

       Sustituye a los 14 valores sueltos que había repartidos por los
       CSS del sistema, entre ellos cuatro indistinguibles entre sí:
       0.8rem (12.8px), 0.8125rem (13px), 0.875rem (14px) y 0.9rem
       (14.4px). Nadie percibe 0.2px de diferencia, pero el conjunto sí
       se lee como falta de afinado.

       Siete pasos, cada uno claramente distinto del anterior. Elegir
       pasa a ser escoger entre opciones con nombre, no inventar un
       número.
       ============================================================ */

    --ayuu-texto-xs:    0.75rem;    /* 12px — badges, notas al pie */
    --ayuu-texto-sm:    0.875rem;   /* 14px — tablas, formularios */
    --ayuu-texto-base:  1rem;       /* 16px — texto corrido */
    --ayuu-texto-lg:    1.125rem;   /* 18px — subtítulos */
    --ayuu-texto-xl:    1.25rem;    /* 20px — títulos de sección */
    --ayuu-texto-2xl:   1.5rem;     /* 24px — título de página */
    --ayuu-texto-3xl:   1.875rem;   /* 30px — cifras de los paneles */

    /* Altura de línea: más aire en el texto corrido que en los datos
       tabulares, donde interesa la densidad. */
    --ayuu-interlineado-compacto: 1.25;
    --ayuu-interlineado:          1.5;

    /* ============================================================
       ESCALA DE ESPACIADO — rejilla de 4px

       Antes había 14 valores, algunos separados por 0.4px (0.125 frente
       a 0.15, y 0.35 frente a 0.375). Con una rejilla de 4px los
       elementos se alinean solos aunque estén en componentes distintos
       escritos en momentos distintos.
       ============================================================ */

    --ayuu-esp-1:  0.25rem;   /*  4px */
    --ayuu-esp-2:  0.5rem;    /*  8px */
    --ayuu-esp-3:  0.75rem;   /* 12px */
    --ayuu-esp-4:  1rem;      /* 16px */
    --ayuu-esp-5:  1.25rem;   /* 20px */
    --ayuu-esp-6:  1.5rem;    /* 24px */
    --ayuu-esp-8:  2rem;      /* 32px */
    --ayuu-esp-12: 3rem;      /* 48px */

    /* ============================================================
       TIPOGRAFÍA BASE
       Inter en los seis módulos. stats era el único que no la cargaba
       y caía en la fuente del sistema.
       ============================================================ */

    --ayuu-fuente: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                   Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* ============================================================
       ALIAS DE COMPATIBILIDAD
       No añadir nuevos: son la deuda que permite migrar sin romper.
       A medida que cada módulo pase a usar los nombres --ayuu-*,
       su bloque de alias puede irse retirando.
       ============================================================ */

    /* citas */
    --color-primary:        var(--ayuu-primario);
    --color-primary-dark:   var(--ayuu-primario-fuerte);
    --color-success:        var(--ayuu-exito);
    --color-warning:        var(--ayuu-aviso);
    --color-danger:         var(--ayuu-peligro);
    --color-info:           var(--ayuu-info);

    /* stats y gestionemp */
    --primary-color:        var(--ayuu-primario);
    --primary-hover:        var(--ayuu-primario-fuerte);
    --secondary-color:      var(--ayuu-neutro);
    --success-color:        var(--ayuu-exito);
    --danger-color:         var(--ayuu-peligro);
    --error-color:          var(--ayuu-peligro);
    --warning-color:        var(--ayuu-aviso);
    --info-color:           var(--ayuu-info);
    --light-color:          var(--ayuu-fondo);
    --dark-color:           var(--ayuu-texto);
    --border-color:         var(--ayuu-borde);
    --border-radius:        var(--ayuu-radio-sm);
    --shadow:               var(--ayuu-sombra);
    --transition:           var(--ayuu-transicion);

    /* certificados */
    --primary:              var(--ayuu-primario);
    --success:              var(--ayuu-exito);
    --warning:              var(--ayuu-aviso);
    --danger:               var(--ayuu-peligro);
    --radius:               var(--ayuu-radio-sm);
    --gray-200:             var(--ayuu-borde);
    --spacing-sm:           var(--ayuu-esp-2);
    --spacing:              var(--ayuu-esp-4);
    --spacing-lg:           var(--ayuu-esp-6);
}

/* ============================================================
   COMPONENTES COMPARTIDOS

   Solo los que ya existían con el mismo nombre en varios módulos.
   No se inventan clases nuevas: se unifica la apariencia de las que
   ya se usaban de forma distinta en cada sitio.
   ============================================================ */

/* .card estaba en 4 módulos con 4 aspectos. Este es el acordado. */
.card {
    background-color: var(--ayuu-superficie);
    border: 1px solid var(--ayuu-borde);
    border-radius: var(--ayuu-radio);
    box-shadow: var(--ayuu-sombra);
}

/* Menú de acciones por fila, del patrón introducido en citas.
   Se define aquí para que los demás listados puedan reutilizarlo. */
.ayuu-menu-acciones {
    position: fixed;
    width: 15rem;
    z-index: 60;
    background-color: var(--ayuu-superficie);
    border: 1px solid var(--ayuu-borde);
    border-radius: var(--ayuu-radio-sm);
    box-shadow: var(--ayuu-sombra-alta);
    padding: 0.25rem 0;
    font-size: 0.875rem;
}

.ayuu-menu-acciones button {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.5rem 1rem;
    text-align: left;
    color: var(--ayuu-texto);
    transition: var(--ayuu-transicion);
}

.ayuu-menu-acciones button:hover      { background-color: var(--ayuu-fondo); }
.ayuu-menu-acciones button.peligrosa  { color: var(--ayuu-peligro); }
.ayuu-menu-acciones button.peligrosa:hover { background-color: #fef2f2; }

/* Notificaciones. Sustituyen a los alert() nativos que aún usan
   varios módulos. */
.ayuu-notificacion {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 1100;
    min-width: 18rem;
    max-width: 26rem;
    padding: 0.875rem 1rem;
    border-radius: var(--ayuu-radio-sm);
    border-left: 4px solid var(--ayuu-neutro);
    background-color: var(--ayuu-superficie);
    box-shadow: var(--ayuu-sombra-alta);
    color: var(--ayuu-texto);
    font-size: 0.875rem;
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    animation: ayuu-entrar 0.2s ease;
}

.ayuu-notificacion.exito   { border-left-color: var(--ayuu-exito); }
.ayuu-notificacion.aviso   { border-left-color: var(--ayuu-aviso); }
.ayuu-notificacion.peligro { border-left-color: var(--ayuu-peligro); }
.ayuu-notificacion.info    { border-left-color: var(--ayuu-info); }
.ayuu-notificacion.saliendo { animation: ayuu-salir 0.2s ease forwards; }

/* ------------------------------------------------------------
   HUECO CON EXPLICACIÓN

   Va donde iban los datos que no se pudieron cargar. Es lo que
   distingue "falló la consulta" de "no hay registros": las dos
   cosas dejaban la tabla vacía y se leían igual.

   Lleva role="alert" para que un lector de pantalla lo anuncie
   sin que haya que ir a buscarlo.
   ------------------------------------------------------------ */

.ayuu-hueco-error {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 1rem 1.15rem;
    margin: 0.5rem 0;
    border: 1px solid var(--ayuu-peligro);
    border-left-width: 4px;
    border-radius: var(--ayuu-radio, 8px);
    background-color: var(--ayuu-tinte-peligro, #fef2f2);
    color: var(--ayuu-texto, #1f2937);
    font-size: 0.925rem;
    line-height: 1.5;
}

.ayuu-hueco-error > span { flex: 1 1 16rem; }
.ayuu-hueco-error .ayuu-i { color: var(--ayuu-peligro); flex-shrink: 0; }

@keyframes ayuu-entrar {
    from { opacity: 0; transform: translateX(1rem); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes ayuu-salir {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(1rem); }
}

/* Respetar a quien pide menos animación en su sistema operativo */
@media (prefers-reduced-motion: reduce) {
    .ayuu-notificacion,
    .ayuu-notificacion.saliendo { animation: none; }
}


/* ============================================================
   TIPOGRAFÍA APLICADA

   Los cinco módulos que ya cargaban Inter la aplicaban con una regla
   body propia en su <style>. stats no tenía ninguna. Declararla aquí
   cubre a los seis por igual, sin depender de que cada uno se acuerde.
   ============================================================ */

body {
    font-family: var(--ayuu-fuente);
}


/* ============================================================
   ============================================================
   SISTEMA VISUAL — refinamiento profesional
   17/08/2026

   Qué hace que una interfaz se lea como sobria y no como
   informal, medido sobre este sistema:

     · Bloques de color saturado como fondo de iconos
       (bg-pink-500, bg-purple-500 en certificados). El
       equivalente profesional es un fondo tenue del mismo tono
       con el icono en su versión oscura: mantiene el código de
       color sin gritar.

     · Seis radios de borde distintos conviviendo
       (0.375, 0.5, 0.75, 1rem, 8px, 9999px). Tres bastan.

     · Sombras de una sola capa. Las sombras reales tienen dos:
       una corta y marcada que define el borde, y una larga y
       difusa que da la elevación.

     · Ausencia de estado de foco visible. Es lo que más delata
       una interfaz descuidada al navegar con el teclado, y a la
       vez un requisito de accesibilidad.

   ============================================================ */

:root {
    /* ---- Radios: tres, no seis ---- */
    --ayuu-r-sm:   0.375rem;   /* controles pequeños, badges */
    --ayuu-r-md:   0.5rem;     /* botones, campos, celdas */
    --ayuu-r-lg:   0.75rem;    /* tarjetas, modales */
    --ayuu-r-full: 9999px;     /* píldoras, avatares */

    /* ---- Sombras de dos capas ---- */
    --ayuu-s-sm: 0 1px 2px rgba(16, 24, 40, 0.04),
                 0 1px 3px rgba(16, 24, 40, 0.08);
    --ayuu-s-md: 0 2px 4px -2px rgba(16, 24, 40, 0.06),
                 0 4px 8px -2px rgba(16, 24, 40, 0.10);
    --ayuu-s-lg: 0 4px 6px -2px rgba(16, 24, 40, 0.05),
                 0 12px 16px -4px rgba(16, 24, 40, 0.10);

    /* ---- Foco visible y coherente ---- */
    --ayuu-foco: 0 0 0 3px rgba(59, 130, 246, 0.35);

    /* ---- Tintes para contenedores de icono ---- */
    --ayuu-tinte-primario: #eff6ff;
    --ayuu-tinte-exito:    #ecfdf5;
    --ayuu-tinte-aviso:    #fffbeb;
    --ayuu-tinte-peligro:  #fef2f2;
    --ayuu-tinte-neutro:   #f3f4f6;

    /* ---- Tonos oscuros para el icono sobre su tinte ---- */
    --ayuu-primario-oscuro: #1d4ed8;
    --ayuu-exito-oscuro:    #047857;
    --ayuu-aviso-oscuro:    #b45309;
    --ayuu-peligro-oscuro:  #b91c1c;
}

/* ------------------------------------------------------------
   CONTENEDOR DE ICONO

   Sustituye a los cuadrados de color pleno. Mismo código de
   color, un tercio de la estridencia.
   ------------------------------------------------------------ */

.ayuu-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--ayuu-r-md);
    background-color: var(--ayuu-tinte-neutro);
    color: var(--ayuu-texto-suave);
    font-size: var(--ayuu-texto-lg);
    flex-shrink: 0;
}

.ayuu-icono.primario { background-color: var(--ayuu-tinte-primario); color: var(--ayuu-primario-oscuro); }
.ayuu-icono.exito    { background-color: var(--ayuu-tinte-exito);    color: var(--ayuu-exito-oscuro); }
.ayuu-icono.aviso    { background-color: var(--ayuu-tinte-aviso);    color: var(--ayuu-aviso-oscuro); }
.ayuu-icono.peligro  { background-color: var(--ayuu-tinte-peligro);  color: var(--ayuu-peligro-oscuro); }
.ayuu-icono.grande   { width: 3rem; height: 3rem; font-size: var(--ayuu-texto-xl); }

/* Los iconos dentro del contenedor ocupan la mitad de su alto.
   Esa proporción —icono al 50 % de la caja— es la que hace que el
   conjunto se vea asentado en lugar de apretado. */
.ayuu-icono > .ayuu-i { width: 1.25rem; height: 1.25rem; }
.ayuu-icono.grande > .ayuu-i { width: 1.5rem; height: 1.5rem; }

/* ------------------------------------------------------------
   ICONO DE TRAZO

   Los iconos del sprite (assets/comun/iconos.php) se comportan
   como una letra más: toman el color del texto que acompañan y
   crecen con él, porque su tamaño va en `em`.

   `vertical-align: -0.15em` compensa la diferencia entre la línea
   base del texto y el centro del cuadrado del icono. Sin ese
   ajuste el icono queda visiblemente alto junto a la palabra.
   ------------------------------------------------------------ */

.ayuu-i {
    width: 1.15em;
    height: 1.15em;
    display: inline-block;
    vertical-align: -0.2em;
    flex-shrink: 0;
    stroke-width: 1.75;
}

/* ------------------------------------------------------------
   FOCO VISIBLE

   Se aplica solo con :focus-visible, así que aparece al navegar
   con teclado y no al hacer clic con el ratón.
   ------------------------------------------------------------ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: none;
    box-shadow: var(--ayuu-foco);
    border-radius: var(--ayuu-r-sm);
}

/* ------------------------------------------------------------
   TARJETAS Y SOMBRAS COHERENTES
   ------------------------------------------------------------ */

.card {
    background-color: var(--ayuu-superficie);
    border: 1px solid var(--ayuu-borde);
    border-radius: var(--ayuu-r-lg);
    box-shadow: var(--ayuu-s-sm);
}

.card:hover  { box-shadow: var(--ayuu-s-md); }
.modal-content { border-radius: var(--ayuu-r-lg); box-shadow: var(--ayuu-s-lg); }

/* ------------------------------------------------------------
   DENSIDAD PARA PANTALLAS DE 14"

   Una portátil de 14" suele dar 1366×768, o 1920×1080 al 150%
   de escala —que en la práctica son 1280×720—. En ambos casos
   el alto útil ronda los 700px.

   Con la cabecera fija, el resumen de tarjetas, la barra de
   herramientas y el panel de filtros, la tabla empieza pasada
   la mitad de la pantalla y se ven tres o cuatro filas.

   Por debajo de 900px de alto se comprime el espaciado
   vertical, sin tocar el horizontal ni los tamaños de letra:
   el objetivo es ganar filas visibles, no apretar el texto.
   ------------------------------------------------------------ */

@media (max-height: 900px) {
    .card-body      { padding-top: var(--ayuu-esp-4) !important;
                      padding-bottom: var(--ayuu-esp-4) !important; }
    .stat-card      { padding-top: var(--ayuu-esp-3) !important;
                      padding-bottom: var(--ayuu-esp-3) !important; }
    .stat-icon      { font-size: var(--ayuu-texto-lg) !important; margin-bottom: 0 !important; }
    .stat-number    { font-size: var(--ayuu-texto-2xl) !important; line-height: 1.1 !important; }
    main            { padding-top: var(--ayuu-esp-4) !important;
                      padding-bottom: var(--ayuu-esp-4) !important; }
    .modal-content  { max-height: 92vh; overflow-y: auto; }
}

/* Pantallas grandes: aprovechar el ancho sin estirar el texto
   hasta hacerlo incómodo de leer */
@media (min-width: 1600px) {
    .card-body { padding-left: var(--ayuu-esp-6); padding-right: var(--ayuu-esp-6); }
}

/* ------------------------------------------------------------
   TABLAS

   La cabecera fija permite desplazarse por listados largos sin
   perder de vista qué columna se está mirando.
   ------------------------------------------------------------ */

thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    background-color: var(--ayuu-fondo);
    font-size: var(--ayuu-texto-xs);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ayuu-texto-suave);
}

tbody tr { transition: background-color 0.12s ease; }

/* ------------------------------------------------------------
   BOTONES

   Hasta ahora cada módulo tenía su propia idea de qué es un
   botón, y `certificados` directamente no la tenía: usaba las
   clases .btn-danger, .btn-warning y .btn-secondary sin haberlas
   definido nunca. El resultado es que allí el botón "Eliminar" se
   veía exactamente igual que el de "Actualizar" —ambos azules—
   porque solo actuaba la regla genérica `button { }`.

   Que la acción destructiva sea indistinguible de la inofensiva
   no es un detalle estético.

   Jerarquía de tres niveles:

     primary     una por pantalla: la acción que se espera
     secondary   borde y fondo blanco: acompaña, no compite
     danger      rojo: destruye datos

   El cambio de `secondary` (antes gris macizo) a contorno es lo
   que más cambia la sensación general: en una pantalla con seis
   botones, solo uno pesa.
   ------------------------------------------------------------ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    border: 1px solid transparent;
    border-radius: var(--ayuu-r-md);
    font-family: inherit;
    font-size: var(--ayuu-texto-sm);
    font-weight: 500;
    line-height: 1.25rem;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease,
                color 0.15s ease, box-shadow 0.15s ease;
}

.btn:disabled,
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* Los tonos de relleno NO son los de la paleta base.
 *
 * Medición del contraste de cada color con texto blanco encima
 * (umbral WCAG AA para texto normal: 4.5:1):
 *
 *     #3b82f6 primario … 3.68  ✗       #2563eb … 5.17  ✓
 *     #10b981 éxito ….… 2.54  ✗       #047857 … 5.48  ✓
 *     #f59e0b aviso ….… 2.15  ✗       #b45309 … 5.02  ✓
 *     #ef4444 peligro … 3.76  ✗       #dc2626 … 4.83  ✓
 *
 * El caso extremo es el ámbar: 2.15:1 es texto blanco sobre naranja,
 * prácticamente ilegible al sol. Y esta aplicación se usa en Riohacha,
 * junto a ventanas, media jornada.
 *
 * Los colores claros siguen siendo los correctos para iconos, bordes
 * y fondos tenues, donde no hay texto blanco encima. Para el relleno
 * de un botón se usa el tono de al lado. */

.btn-primary            { background-color: #2563eb; color: #fff; border-color: #2563eb; }
.btn-primary:hover:not(:disabled)   { background-color: #1d4ed8; border-color: #1d4ed8; }

.btn-secondary          { background-color: var(--ayuu-superficie); color: var(--ayuu-texto); border-color: var(--ayuu-borde); }
.btn-secondary:hover:not(:disabled) { background-color: var(--ayuu-fondo); border-color: #d1d5db; }

.btn-success            { background-color: #047857; color: #fff; border-color: #047857; }
.btn-success:hover:not(:disabled)   { background-color: #065f46; border-color: #065f46; }

.btn-warning            { background-color: #b45309; color: #fff; border-color: #b45309; }
.btn-warning:hover:not(:disabled)   { background-color: #92400e; border-color: #92400e; }

.btn-danger             { background-color: #dc2626; color: #fff; border-color: #dc2626; }

/* ── El naranja de la marca ────────────────────────────────────────
 *
 * #f97316 con texto blanco da 2,80:1. La norma WCAG AA pide 4,5:1 para
 * texto. Estaba en catorce sitios, incluido "Iniciar Sesión", que es el
 * botón más pulsado del sistema entero.
 *
 * Media jornada junto a una ventana en Riohacha, sobre un portátil de
 * gama baja, eso no es un botón naranja con letras blancas: es un
 * rectángulo naranja con una mancha clara dentro.
 *
 * Y como BORDE tampoco pasaba: 2,80 frente al 3:1 que la norma exige
 * para elementos no textuales. La línea naranja de la cabecera —la que
 * identifica la aplicación— se veía como un gris cálido en cuanto había
 * algo de luz.
 *
 * Dos tonos, porque los dos usos son distintos:
 *
 *   --ayuu-marca         #c2410c  5,18:1 con blanco -> relleno con texto
 *   --ayuu-marca-borde   #ea580c  3,56:1 con blanco -> bordes y acentos
 *
 * El naranja original se conserva solo para fondos tenues, donde nunca
 * hay texto blanco encima. Calculado, no estimado. */
.btn-marca              { background-color: #c2410c; color: #fff; border-color: #c2410c; }
.btn-marca:hover:not(:disabled)     { background-color: #9a3412; border-color: #9a3412; }
.btn-danger:hover:not(:disabled)    { background-color: #b91c1c; border-color: #b91c1c; }

/* Tamaños. `xs` es el de las celdas de tabla: tiene que caber en
   una fila sin obligar a aumentar su alto. */
.btn-sm { padding: 0.375rem 0.6875rem; font-size: var(--ayuu-texto-sm); }
.btn-xs { padding: 0.25rem 0.5rem; font-size: var(--ayuu-texto-xs); gap: 0.25rem; line-height: 1rem; }
.btn-block { width: 100%; }

/* ------------------------------------------------------------
   CONTENEDOR DE PÁGINA

   La cabecera, la navegación y el contenido tienen que compartir
   el mismo ancho y el mismo margen lateral. Cuando no lo hacen
   —y en certificados no lo hacían— el título de una sección no
   se alinea con el logo que tiene justo encima, y la pantalla se
   percibe descuadrada aunque cada pieza esté bien hecha.

   En monitores muy anchos se ensancha un paso, pero no sin
   límite: una tabla de 2000 px obliga a mover la cabeza para
   seguir una fila.
   ------------------------------------------------------------ */

.ayuu-contenedor {
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--ayuu-esp-4);
    padding-right: var(--ayuu-esp-4);
}

@media (min-width: 640px) {
    .ayuu-contenedor { padding-left: var(--ayuu-esp-6); padding-right: var(--ayuu-esp-6); }
}

@media (min-width: 1600px) {
    .ayuu-contenedor { max-width: 1440px; }
}

/* ------------------------------------------------------------
   CAMPOS DE FORMULARIO

   Antes cada campo repetía la misma cadena de catorce clases de
   Tailwind. Catorce copias de lo mismo es catorce sitios donde
   ajustar algo, y en la práctica ya había divergencias (uno de
   los catorce llevaba `focus:border-transparent`, los demás no).

   `.ayuu-campo` centraliza esa apariencia. El foco usa el mismo
   anillo que el resto del sistema, en vez del anillo azul de
   Tailwind que se dibujaba distinto.
   ------------------------------------------------------------ */

.ayuu-campo {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-family: inherit;
    font-size: var(--ayuu-texto-sm);
    line-height: 1.5;
    color: var(--ayuu-texto);
    background-color: var(--ayuu-superficie);
    border: 1px solid #d1d5db;
    border-radius: var(--ayuu-r-md);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    appearance: none;
}

.ayuu-campo::placeholder { color: #9ca3af; }

.ayuu-campo:focus {
    outline: none;
    border-color: var(--ayuu-primario);
    box-shadow: var(--ayuu-foco);
}

select.ayuu-campo[multiple] { padding: 0.25rem; min-height: 5.5rem; }

.ayuu-campo:disabled,
.ayuu-campo[readonly] {
    background-color: var(--ayuu-fondo);
    color: var(--ayuu-texto-suave);
    cursor: not-allowed;
}

/* Los desplegables necesitan la flecha dibujada, porque
   `appearance: none` retira la del navegador. Se excluyen las listas
   múltiples: no despliegan nada, así que la flecha mentiría. */
select.ayuu-campo:not([multiple]):not([size]) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.625rem center;
    background-size: 1.1em;
    padding-right: 2.25rem;
}

/* Etiqueta y marca de campo obligatorio */
.ayuu-etiqueta {
    display: block;
    margin-bottom: 0.375rem;
    font-size: var(--ayuu-texto-sm);
    font-weight: 500;
    color: #374151;
}

.ayuu-req {
    color: var(--ayuu-peligro-oscuro);
    font-weight: 600;
    margin-left: 0.125rem;
}

/* Texto de ayuda bajo un campo. Gris 500 (4.83:1), no gris 400
   (2.54:1, por debajo del mínimo legible). */
.ayuu-ayuda {
    display: block;
    margin-top: 0.3125rem;
    font-size: var(--ayuu-texto-xs);
    color: #6b7280;
}

/* ------------------------------------------------------------
   TABLAS DE DATOS

   La columna de acciones se ajusta a su contenido y se pega a la
   derecha. Antes ocupaba todo el espacio sobrante, así que los
   botones quedaban a media pantalla de la fila que modifican: hay
   que recorrer el ojo de un extremo al otro para saber qué se
   está a punto de borrar.
   ------------------------------------------------------------ */

.col-acciones {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

thead th.col-acciones { text-align: right; }

/* Botón de acción dentro de una fila: presente pero callado.
   Con veintiún registros en pantalla, dos botones de color pleno
   por fila son cuarenta y dos manchas de color compitiendo con el
   dato, que es lo único que se ha venido a leer. */
.btn-fila {
    background-color: transparent;
    border-color: transparent;
    color: var(--ayuu-texto-suave);
}

.btn-fila:hover:not(:disabled) {
    background-color: var(--ayuu-fondo);
    border-color: var(--ayuu-borde);
    color: var(--ayuu-texto);
}

.btn-fila.peligrosa:hover:not(:disabled) {
    background-color: var(--ayuu-tinte-peligro);
    border-color: #fecaca;
    color: var(--ayuu-peligro-oscuro);
}


/* ── Sub-pestañas dentro de una sección ────────────────────────────
   Configuración agrupa dos cosas que antes eran pestañas del menú
   principal. Necesitan verse como un segundo nivel, no competir con
   la navegación de arriba: por eso el subrayado en vez del fondo
   sólido que usa .nav-item. */
.subtabs {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    border-bottom: 1px solid var(--ayuu-borde);
    margin-bottom: 1.25rem;
}

.subtab {
    display: inline-flex;
    align-items: center;
    padding: .55rem .85rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--ayuu-texto-suave);
    background: transparent;
    border: 0;
    /* El borde existe siempre, transparente, para que activar una
       pestaña no desplace las demás un píxel hacia abajo. */
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    transition: color .15s, border-color .15s;
}

.subtab:hover { color: var(--ayuu-texto); }

.subtab.activa {
    color: var(--ayuu-primario);
    border-bottom-color: var(--ayuu-primario);
}

.subtab:focus-visible {
    outline: 2px solid var(--ayuu-primario);
    outline-offset: -2px;
    border-radius: 4px;
}

.panel-config.hidden { display: none; }