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

@font-face {
    font-family: 'RobotoLight';
    src: url('../fonts/Roboto/Roboto-Light.ttf') format('truetype');
    font-display: swap;
}

body {
    font-family: 'RobotoLight', Arial, sans-serif;
}

/* =================================================
   VARIABLES DE TEMA
================================================= */

:root {

    /* ===============================
       COLORES BASE
    =============================== */

    --color-primary: #2563eb;
    --color-dark: #1f2933;

    --color-gray-1: #e5e7eb;
    --color-gray-2: #9ca3af;

    /* ===============================
       ESTADOS
    =============================== */

    --color-success: #16a34a;
    --color-warning: #f59e0b;
    --color-danger:  #dc2626;
    --color-info:    #2563eb;

    --bg-success: rgba(22,163,74,0.08);
    --bg-warning: rgba(245,158,11,0.08);
    --bg-danger:  rgba(220,38,38,0.08);
    --bg-info:    rgba(37,99,235,0.08);

    /* ===============================
       MARCA DEPORTIVA
    =============================== */

    --field-green-1: #6aa37f;
    --field-green-2: #649b79;

}


/* =================================================
   FONDO TIPO CAMPO
================================================= */

html, body {
    background-color: rgb(220, 220, 220);
    /*
    background-color: var(--field-green-1);
    background-image:
        repeating-linear-gradient(
            0deg,
            var(--field-green-1),
            var(--field-green-1) 70px,
            var(--field-green-2) 70px,
            var(--field-green-2) 140px
        );
    */
}

/* =================================================
   HEADER & FOOTER VISUAL
================================================= */

header, footer {
    background: var(--color-dark);
    color: #fff;
}

/* =================================================
   TESTIGOS HEADER
================================================= */

.header-center i {
    font-size: 22px;
    margin: 0 6px;
}

.testigo-activo {
    color: var(--color-success);
}

.testigo-inactivo {
    color: #4b5563;
}