/*
===============================================================================
MiUPI - Paleta institucional común
Universidad de Puerto Rico - Recinto de Río Piedras
===============================================================================

Base institucional suministrada:
- Rojo institucional:       #E70000
- Blanco:                   #FFFFFF
- Gris complementario:      #BABCBE
- Negro complementario:     #261C1C

Las variantes oscuras y claras de rojo incluidas aquí son derivaciones
funcionales para interfaces web. Su propósito es conservar claramente la
identidad visual roja de Río Piedras sin recurrir a tonos vino/marrón.

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

:root {

    /* ------------------------------------------------------------------------
       COLORES OFICIALES BASE
       ------------------------------------------------------------------------ */

    --uprrp-red: #E70000;
    --uprrp-white: #FFFFFF;
    --uprrp-gray: #BABCBE;
    --uprrp-black: #261C1C;


    /* ------------------------------------------------------------------------
       ROJOS FUNCIONALES PARA INTERFAZ
       ------------------------------------------------------------------------ */

    /* Rojo principal de controles y acentos */
    --uprrp-red-primary: #E70000;

    /* Rojo medio para gradientes y estados hover */
    --uprrp-red-medium: #C40000;

    /* Rojo oscuro para profundidad, headers y contraste */
    --uprrp-red-dark: #8F0000;

    /* Rojo aún más profundo, útil en overlays y autenticación */
    --uprrp-red-deep: #6F0000;

    /* Hover de botones rojos */
    --uprrp-red-hover: #B80000;

    /* Active / pressed */
    --uprrp-red-active: #9F0000;

    /* Rojo suave para fondos de avisos o selecciones */
    --uprrp-red-soft: #FDE8E8;

    /* Rojo muy suave */
    --uprrp-red-soft-2: #FFF4F4;


    /* ------------------------------------------------------------------------
       NEUTRALES
       ------------------------------------------------------------------------ */

    --uprrp-surface: #FFFFFF;
    --uprrp-page-bg: #F5F6F8;
    --uprrp-surface-muted: #F0F1F3;

    --uprrp-gray-light: #E7E8EA;
    --uprrp-gray-medium: #BABCBE;
    --uprrp-gray-dark: #74777A;

    --uprrp-text: #261C1C;
    --uprrp-text-muted: #62676D;

    --uprrp-border: #D9DDE1;
    --uprrp-border-strong: #BABCBE;


    /* ------------------------------------------------------------------------
       GRADIENTES INSTITUCIONALES
       ------------------------------------------------------------------------ */

    /* Header / Footer principal */
    --uprrp-gradient-header:
        linear-gradient(
            115deg,
            #8F0000 0%,
            #C40000 58%,
            #E70000 100%
        );

    /* Header más sobrio cuando se requiera menos intensidad */
    --uprrp-gradient-header-soft:
        linear-gradient(
            115deg,
            #7C0000 0%,
            #B60000 62%,
            #D90000 100%
        );

    /* Fondo para login / autenticación sobre fotografía */
    --uprrp-gradient-auth-overlay:
        linear-gradient(
            115deg,
            rgba(38, 28, 28, 0.92) 0%,
            rgba(111, 0, 0, 0.86) 55%,
            rgba(196, 0, 0, 0.72) 100%
        );


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

    --uprrp-button-bg: #C40000;
    --uprrp-button-bg-hover: #B80000;
    --uprrp-button-bg-active: #9F0000;
    --uprrp-button-text: #FFFFFF;

    --uprrp-button-outline: #C40000;
    --uprrp-button-outline-hover-bg: #C40000;
    --uprrp-button-outline-hover-text: #FFFFFF;


    /* ------------------------------------------------------------------------
       FOCUS / ACCESIBILIDAD
       ------------------------------------------------------------------------ */

    --uprrp-focus-ring:
        0 0 0 0.22rem rgba(231, 0, 0, 0.22);

    --uprrp-focus-border: #E70000;


    /* ------------------------------------------------------------------------
       SOMBRAS
       ------------------------------------------------------------------------ */

    --uprrp-shadow-sm:
        0 2px 8px rgba(38, 28, 28, 0.08);

    --uprrp-shadow-md:
        0 10px 30px rgba(38, 28, 28, 0.12);

    --uprrp-shadow-header:
        0 4px 18px rgba(38, 28, 28, 0.18);
}


/* ============================================================================
   CLASES DE APOYO OPCIONALES
   ============================================================================ */

.miupi-uprrp-header,
.miupi-uprrp-footer {
    background: var(--uprrp-gradient-header);
    color: var(--uprrp-white);
}

.miupi-uprrp-button {
    background: var(--uprrp-button-bg);
    border-color: var(--uprrp-button-bg);
    color: var(--uprrp-button-text);
}

.miupi-uprrp-button:hover,
.miupi-uprrp-button:focus {
    background: var(--uprrp-button-bg-hover);
    border-color: var(--uprrp-button-bg-hover);
    color: var(--uprrp-white);
}

.miupi-uprrp-button:active {
    background: var(--uprrp-button-bg-active);
    border-color: var(--uprrp-button-bg-active);
}

.miupi-uprrp-outline-button {
    background: transparent;
    border: 1px solid var(--uprrp-button-outline);
    color: var(--uprrp-button-outline);
}

.miupi-uprrp-outline-button:hover,
.miupi-uprrp-outline-button:focus {
    background: var(--uprrp-button-outline-hover-bg);
    border-color: var(--uprrp-button-outline-hover-bg);
    color: var(--uprrp-button-outline-hover-text);
}

.miupi-uprrp-focus:focus {
    border-color: var(--uprrp-focus-border);
    box-shadow: var(--uprrp-focus-ring);
}


/* ============================================================================
   EJEMPLO PARA PÁGINAS DE AUTENTICACIÓN
   ============================================================================

body.miupi-auth-page {
    background:
        var(--uprrp-gradient-auth-overlay),
        url('../../images/background_torre.png') center / cover fixed;
}

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