:root {
    /* Identidad corporativa Huevos Coliumo. */
    --color-primario: #e24912;
    --color-primario-rgb: 226, 73, 18;
    --color-secundario: #ed6c08;
    --color-primario-hover: #c83c0b;
    --color-primario-activo: #a93108;
    --color-primario-suave: #f4b480;
    --color-primario-superficie: #fff3ed;
    --color-primario-superficie-hover: #fde7dc;

    /* Acciones con texto blanco: variante AA del naranjo corporativo. */
    --color-accion: var(--color-primario-hover);
    --color-accion-hover: var(--color-primario-activo);

    --color-oscuro: #3e1e16;
    --color-oscuro-rgb: 62, 30, 22;
    --color-negro: #231713;
    --color-negro-rgb: 35, 23, 19;
    --color-blanco: #ffffff;
    --color-blanco-rgb: 255, 255, 255;

    /* Superficies, texto y controles. */
    --color-fondo: #f1efea;
    --color-superficie: #ffffff;
    --color-superficie-secundaria: #e8e3e0;
    --color-superficie-suave: #f8f5f3;
    --color-borde: #c9bfbb;
    --color-borde-fuerte: #aa9992;
    --color-texto: #3e1e16;
    --color-texto-secundario: #78605c;
    --color-texto-deshabilitado: #8d817c;

    /* Estados semánticos compartidos. */
    --color-exito: #006c52;
    --color-exito-rgb: 0, 108, 82;
    --color-exito-hover: #005541;
    --color-exito-superficie: #e7f5f0;
    --color-exito-borde: #9bcfbe;
    --color-exito-texto: #005b45;

    --color-advertencia: #d99700;
    --color-advertencia-rgb: 217, 151, 0;
    --color-advertencia-superficie: #fff7df;
    --color-advertencia-borde: #e8ca7d;
    --color-advertencia-texto: #6d5100;

    --color-error: #b72f2f;
    --color-error-rgb: 183, 47, 47;
    --color-error-superficie: #fff1f1;
    --color-error-borde: #e7adad;
    --color-error-texto: #982525;

    --color-info: #235da5;
    --color-info-superficie: #e7f0ff;
    --color-frecuencia-superficie: #fff1a8;
    --color-frecuencia-texto: #524500;

    /* Escala de criticidad compartida por formulario, ayuda y reportes. */
    --criticidad-1: #176b2a;
    --criticidad-2: #2f8a38;
    --criticidad-3: #70a83c;
    --criticidad-4: #afb629;
    --criticidad-5: #e9ad00;
    --criticidad-6: #f29400;
    --criticidad-7: #ee6c00;
    --criticidad-8: #e94b1b;
    --criticidad-9: #d4252d;
    --criticidad-10: #a90018;

    /* Dimensiones visuales reutilizables. */
    --radio-control: 10px;
    --radio-panel: 14px;
    --radio-tarjeta: 18px;
    --radio-circular: 999px;
    --sombra-suave: 0 4px 14px rgba(var(--color-oscuro-rgb), 0.08);
    --sombra-tarjeta: 0 12px 32px rgba(var(--color-oscuro-rgb), 0.1);
    --sombra-elevada: 0 22px 60px rgba(var(--color-negro-rgb), 0.24);
    --foco-control: 0 0 0 3px rgba(var(--color-primario-rgb), 0.18);
    --fondo-modal: rgba(var(--color-negro-rgb), 0.62);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    background: var(--color-fondo);
    color: var(--color-texto);
    font-family: "Segoe UI", Arial, sans-serif;
}

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

button,
a,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
}

:focus-visible {
    outline: 3px solid rgba(var(--color-primario-rgb), 0.32);
    outline-offset: 2px;
}

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

/* Paginación compartida: compacta y apta para uso táctil. */
.paginacion-datos {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 7px 9px;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-control);
    background: var(--color-superficie);
}

.paginacion-resumen {
    color: var(--color-texto-secundario);
    font-size: 0.78rem;
    white-space: nowrap;
}

.paginacion-controles {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.boton-pagina {
    display: inline-grid;
    width: 34px;
    height: 34px;
    padding: 0;
    place-items: center;
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    background: var(--color-superficie);
    color: var(--color-texto);
    cursor: pointer;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;
}

.boton-pagina:hover:not(:disabled) {
    border-color: var(--color-primario);
    background: var(--color-primario-superficie);
    color: var(--color-primario);
}

.boton-pagina:disabled {
    opacity: 0.4;
    cursor: default;
}

.pagina-actual {
    min-width: 58px;
    color: var(--color-texto-secundario);
    font-size: 0.78rem;
    text-align: center;
    white-space: nowrap;
}

.pagina-actual b {
    color: var(--color-texto);
}

.tamano-pagina {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    color: var(--color-texto-secundario);
    font-size: 0.76rem;
    white-space: nowrap;
}

.tamano-pagina select {
    min-width: 62px;
    height: 34px;
    padding: 0 24px 0 8px;
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    background: var(--color-superficie);
    color: var(--color-texto);
}

@media (max-width: 600px) {
    .paginacion-datos {
        grid-template-columns: 1fr auto;
        gap: 6px 8px;
        padding: 7px;
    }

    .paginacion-controles {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .paginacion-resumen {
        grid-column: 1;
        grid-row: 2;
    }

    .tamano-pagina {
        grid-column: 2;
        grid-row: 2;
    }

    .boton-pagina {
        width: 38px;
        height: 38px;
    }
}