/* =========================================================================
   Look & Feel: FRIDEVI  (rama Fridevi_dev - NO MERGEAR A DEVELOP)
   Override global (Site.Master -> aplica a sidebar, navbar, tablas y spinner
   en todas las paginas internas). Se carga DESPUES de main.css/nuevo_estilo.css.
   Paleta extraida de las capturas provistas por el cliente:
     rojo brillante (acentos, boton activo): #E30000
     rojo oscuro / bordo (fill de fila activa, headers de tabla): #8B0000
     verde (logo):                           #1E9F36
     sidebar oscuro:                         #282828
   ========================================================================= */

/* --- Sidebar --- */
.menu-lateral {
    background-color: #282828 !important;
}

/* .header-top-logo tiene su propio fondo teal (#004351, ver nuevo_estilo.css:53-57)
   separado del de .menu-lateral - sin esto quedaba un cuadro teal alrededor del logo
   encima del sidebar oscuro. */
.header-top-logo {
    background-color: #282828 !important;
}

/* Logo directo sobre el fondo oscuro del sidebar, sin tarjeta blanca detras
   (confirmado contra la referencia del cliente: el isotipo va solo, no en un
   recuadro). .header-top-logo img ya centra y da padding vertical
   (nuevo_estilo.css:59-64), no hace falta agregar nada mas aca. */

/* --- Navbar superior (header-central: "Encode SA", campanita, etc) ---
   Tenia el teal de BDDO por defecto (#00343E, nuevo_estilo.css:66-72), sin tocar.
   Se unifica con el mismo oscuro del sidebar. */
.header-central {
    background-color: #282828 !important;
}

.botonera li a.active,
.botonera li a:hover {
    background-color: #8b0000 !important;
    border-left: 3px solid #e30000 !important;
}

/* La clase real que usa el menu para marcar el item de la pagina actual (verificado
   contra el HTML real que sirve el server, en Styles/nuevos/nuevo_estilo.css:630 -
   la clase va en el <a>, no en el <li>, y pisa la base #00333E / #00A69C). */
.menu-activado {
    background-color: #8b0000 !important;
    border-left: 3px solid #e30000 !important;
}

/* --- Tablas (headers) --- */
table.data th,
table.grilla th,
table.grid th,
.PagerStyle span {
    background: #8b0000 !important;
    color: #ffffff !important;
}

table.data tr:hover,
table.data tr.selected,
table.grilla tr.selected {
    background: #fbeaea !important;
}

/* Fila seleccionada en las grillas de empleados (Pages/Users/Default.aspx y
   Pages/Security/Default.aspx): el GridView no tenia SelectedRowStyle-CssClass
   configurado, asi que al seleccionar una fila no se le aplicaba NINGUNA clase
   (por eso "no se veia nada"). Se agrego SelectedRowStyle-CssClass="fila-seleccionada"
   en esos 2 .aspx, y aca se pinta del mismo rojo que la cabecera de la grilla. */
table.grilla tr.fila-seleccionada,
table.grilla tr.fila-seleccionada td {
    background: #8b0000 !important;
    color: #ffffff !important;
}

/* --- Paginacion (pagination-ys, tabla custom): la pagina actual usa <span>,
   el resto de las paginas son <a> - verificado en Styles/table.css:256-279,
   no es el .pagination de Bootstrap. */
.pagination-ys table > tbody > tr > td > span {
    background-color: #8b0000 !important;
}

.pagination-ys table > tbody > tr > td > a {
    color: #8b0000 !important;
}

/* --- Legend (titulos de seccion tipo "Seleccione Periodo") ---
   Tenian el teal de BDDO (#00a69c !important, nuevo_estilo.css:1313). */
legend {
    color: #8b0000 !important;
}

/* --- Wizard de pasos (ej: alta de Empleado - Datos Personales/Laborales/etc) ---
   El paso activo tenia el teal de BDDO (#00A69C, main.css:484-487, sin !important). */
.wizard li.selected {
    background-color: #8b0000 !important;
}

/* --- Botones primarios fuera del login (mismo tratamiento) --- */
.btn-primario {
    background-color: #e30000 !important;
    border-color: #b30000 !important;
}

.btn-primario:hover {
    background-color: #b30000 !important;
}

/* --- Spinner (reemplaza el logo giratorio por el loader de puntos del cliente) --- */
.loader {
    --color-1: #fff;
    --color-2: #FF0000;
    --size: 1px;

    width: calc(16 * var(--size));
    height: calc(16 * var(--size));
    border-radius: 50%;
    display: block;
    margin: calc(15 * var(--size)) auto;
    position: relative;
    background: var(--color-1);
    box-shadow:
        calc(-24 * var(--size)) 0 var(--color-1),
        calc(24 * var(--size)) 0 var(--color-1);
    box-sizing: border-box;
    animation: fridevi-shadow-pulse 2s linear infinite;
}

@keyframes fridevi-shadow-pulse {
    33% {
        background: var(--color-1);
        box-shadow:
            calc(-24 * var(--size)) 0 var(--color-2),
            calc(24 * var(--size)) 0 var(--color-1);
    }

    66% {
        background: var(--color-2);
        box-shadow:
            calc(-24 * var(--size)) 0 var(--color-1),
            calc(24 * var(--size)) 0 var(--color-1);
    }

    100% {
        background: var(--color-1);
        box-shadow:
            calc(-24 * var(--size)) 0 var(--color-1),
            calc(24 * var(--size)) 0 var(--color-2);
    }
}