/* EOG.Nominas.Api/web/css/style.css */
/* Tras la migración a Bootstrap 5 (plantilla Materialize), este archivo solo aporta clases
   utilitarias propias del portal que no tienen contraparte exacta en Bootstrap. El watermark
   de logo CVZ (body::before) se quitó de todas las pantallas — no se apreciaba bien contra el
   contenido real; el logo se muestra ahora como imagen real solo en el login. */

/* Fuente base al 80% del default de Bootstrap (16px → 12.8px) — la UI se veía demasiado grande.
   Al ser el tamaño raíz, escala automáticamente cualquier medida en rem de todo Bootstrap (texto,
   padding de botones, inputs, etc.), sin tener que tocar cada componente uno por uno. */
html {
    font-size: 80%;
}

.oculto { display: none; }

/* logo-empresa/logo-login arrancan invisibles (visibility, no display: none, para no perder el
   espacio reservado en el layout y evitar salto de contenido) — api.js las hace visibles recién
   después de fijar el src correcto (custom si existe, el default del HTML si no). Sin esto, el
   navegador pinta el src por defecto que ya trae el <img> en el HTML apenas parsea la página, y
   el logo real lo reemplaza un instante después: se ve un flash del logo viejo en cada carga. */
.logo-empresa, .logo-login {
    visibility: hidden;
}

/* app-titulo-texto: mismo criterio que logo-empresa/logo-login arriba — arranca invisible para
   que el navegador no pinte "CVZ Nóminas" (texto hardcodeado en el HTML) antes de que api.js
   consulte /api/config/titulo y ponga el título real (custom o el mismo default). */
.app-titulo-texto {
    visibility: hidden;
}

/* logoPreview/logoLoginPreview (solo en config.html, sección "Logo de la empresa"/"Logo de inicio
   de sesión"): mismo criterio que logo-empresa/logo-login arriba — arrancan invisibles para que
   el navegador no pinte el logo por defecto del HTML antes de que config.js (cargarLogo) resuelva
   cuál mostrar. */
#logoPreview, #logoLoginPreview {
    visibility: hidden;
}

.celda-empresas {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: help;
}

.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.5);
    border-top-color: #fff;
    border-radius: 50%;
    animation: girar 0.7s linear infinite;
    vertical-align: middle;
    margin-right: 6px;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* Alerta portal (estilo "Alerts with Heading" Materialize): reemplaza alert() nativo y los
   mensajes .mensaje/.error planos sin estilo. Fondo tenue del color de estado, título en negritas
   con icono, línea divisoria, botón cerrar. mostrarAlerta()/cerrarAlerta() en api.js la controlan;
   nunca se escribe HTML de esta caja a mano en cada página. */
.alerta-portal {
    border-radius: 6px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    position: relative;
}
.alerta-portal-titulo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 1rem;
    margin: 0 0 0.5rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid currentColor;
}
.alerta-portal-cuerpo {
    margin: 0;
    font-size: 0.9rem;
}
.alerta-portal-cerrar {
    position: absolute;
    top: 0.85rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.6;
}
.alerta-portal-cerrar:hover { opacity: 1; }

.alerta-portal-exito {
    background: #e7f8ec;
    color: #28a745;
}
.alerta-portal-error {
    background: #fdeaea;
    color: #dc3545;
}
.alerta-portal-info {
    background: #eceafd;
    color: #666cff;
}
.alerta-portal-advertencia {
    background: #fff6e5;
    color: #fdb528;
}

/* selector-tipo-select: botones que abren un panel checklist (Períodos/Registro patronal/
   Trabajadores en Lista de Raya) con la misma apariencia que un <select> normal de Bootstrap
   (.form-select ya da el borde/flecha) — solo se agrega cursor y color de texto, ya que un
   <button> no hereda esos estilos de <select> por defecto. */
.selector-tipo-select {
    cursor: pointer;
    color: #495057;
    background-color: #fff;
}