/* ============================================================
   ESTILO.CSS — Identidad visual de Gaindecontrol
   Verde marca #00623a, negro #000000, blanco #ffffff
   Sidebar claro (no negro) para que no canse la vista en
   turnos largos — decisión tomada el 12/09/2026.
   ============================================================ */

:root {
    --gc-verde: #00623a;
    --gc-verde-oscuro: #004a2c;
    --gc-verde-claro: #e6f2ec;
    --gc-negro: #14151a;
    --gc-gris-texto: #5b6470;
    --gc-gris-borde: #e4e7eb;
    --gc-gris-fondo: #f7f8fa;
    --gc-blanco: #ffffff;
    --gc-rojo: #d64545;
    --gc-naranja: #e09a2c;
    --gc-radio: 10px;
}

body {
    background: var(--gc-gris-fondo);
    color: var(--gc-negro);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Estructura general: sidebar + contenido ---------- */

.gc-layout {
    display: flex;
    min-height: 100vh;
}

.gc-sidebar {
    width: 230px;
    flex-shrink: 0;
    background: var(--gc-blanco);
    border-right: 1px solid var(--gc-gris-borde);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.gc-sidebar-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 16px 20px;
    border-bottom: 1px solid var(--gc-gris-borde);
}

.gc-sidebar-logo img {
    width: 64px;
    height: auto;
    margin-bottom: 8px;
}

.gc-sidebar-logo .gc-marca {
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: 0.3px;
    color: var(--gc-negro);
}

.gc-sidebar-nav {
    flex-grow: 1;
    padding: 12px 10px;
}

.gc-sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 2px;
    border-radius: var(--gc-radio);
    color: var(--gc-negro);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 500;
    transition: background 0.12s ease;
}

.gc-sidebar-nav a:hover {
    background: var(--gc-gris-fondo);
}

.gc-sidebar-nav a.activo {
    background: var(--gc-verde-claro);
    color: var(--gc-verde);
    font-weight: 700;
}

.gc-sidebar-nav .gc-icono {
    font-size: 1.05rem;
    width: 20px;
    text-align: center;
}

.gc-sidebar-nav a i.gc-icono {
    color: var(--gc-gris-texto);
}

.gc-sidebar-nav a.activo i.gc-icono,
.gc-sidebar-nav a:hover i.gc-icono {
    color: var(--gc-verde);
}

.gc-sidebar-pie {
    padding: 14px;
    border-top: 1px solid var(--gc-gris-borde);
}

/* ---------- Contenido principal ---------- */

.gc-contenido {
    flex-grow: 1;
    min-width: 0;
}

.gc-topbar {
    background: var(--gc-blanco);
    border-bottom: 1px solid var(--gc-gris-borde);
    padding: 14px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.gc-topbar .gc-usuario {
    font-size: 0.9rem;
    color: var(--gc-gris-texto);
}

.gc-topbar .gc-usuario strong {
    color: var(--gc-negro);
}

.gc-main {
    padding: 24px;
    max-width: 1100px;
    margin: 0 auto;
}

/* ---------- Componentes ---------- */

.gc-card {
    background: var(--gc-blanco);
    border: 1px solid var(--gc-gris-borde);
    border-radius: var(--gc-radio);
    padding: 18px 20px;
}

.gc-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--gc-blanco);
    border: 1px solid var(--gc-gris-borde);
    border-radius: var(--gc-radio);
    padding: 16px 18px;
    text-align: left;
}

.gc-stat-icono {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
    background: var(--gc-verde-claro);
    color: var(--gc-verde);
}
.gc-stat-icono.rojo { background: #fbe6e6; color: var(--gc-rojo); }
.gc-stat-icono.naranja { background: #fbeed9; color: var(--gc-naranja); }

.gc-stat .gc-stat-numero {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--gc-negro);
    line-height: 1.1;
}

.gc-stat .gc-stat-numero.alerta { color: var(--gc-rojo); }
.gc-stat .gc-stat-numero.aviso { color: var(--gc-naranja); }

.gc-stat .gc-stat-etiqueta {
    font-size: 0.8rem;
    color: var(--gc-gris-texto);
    margin-top: 2px;
}

.btn-primary, .btn-success {
    background-color: var(--gc-verde) !important;
    border-color: var(--gc-verde) !important;
}

.btn-primary:hover, .btn-success:hover {
    background-color: var(--gc-verde-oscuro) !important;
    border-color: var(--gc-verde-oscuro) !important;
}

.btn-outline-primary, .btn-outline-success {
    color: var(--gc-verde) !important;
    border-color: var(--gc-verde) !important;
}

.btn-outline-primary:hover, .btn-outline-success:hover {
    background-color: var(--gc-verde) !important;
    color: var(--gc-blanco) !important;
}

a {
    color: var(--gc-verde);
}

.badge.bg-success { background-color: var(--gc-verde) !important; }

.table thead th {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--gc-gris-texto);
    border-bottom-width: 1px;
}

.gc-titulo-pagina {
    font-weight: 800;
    color: var(--gc-negro);
    margin-bottom: 4px;
}

.gc-vacio {
    background: var(--gc-verde-claro);
    border: 1px solid #c2e0d3;
    border-radius: var(--gc-radio);
    padding: 28px 24px;
    text-align: center;
    color: var(--gc-negro);
}
.gc-vacio i {
    font-size: 1.8rem;
    color: var(--gc-verde);
    margin-bottom: 10px;
    display: block;
}

.gc-avatar-inicial {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--gc-verde-claro);
    color: var(--gc-verde);
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gc-buscador-global {
    position: relative;
    width: 100%;
    max-width: 380px;
}
.gc-buscador-global i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gc-gris-texto);
    font-size: 0.9rem;
    pointer-events: none;
}
.gc-buscador-global input {
    padding-left: 34px;
    padding-right: 46px;
    height: 38px;
    background: var(--gc-gris-fondo);
    border: 1px solid var(--gc-gris-borde);
}
.gc-buscador-global input:focus {
    background: var(--gc-blanco);
}
.gc-atajo-teclado {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--gc-blanco);
    border: 1px solid var(--gc-gris-borde);
    border-radius: 5px;
    padding: 1px 6px;
    font-size: 0.72rem;
    font-family: inherit;
    color: var(--gc-gris-texto);
    pointer-events: none;
}

.gc-usuario .vr {
    opacity: 0.5;
    height: 24px;
}

.gc-footer-app {
    border-top: 1px solid var(--gc-gris-borde);
    padding: 14px 24px;
    font-size: 0.78rem;
    color: var(--gc-gris-texto);
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    align-items: center;
}
.gc-footer-app a {
    color: var(--gc-gris-texto);
    text-decoration: none;
}
.gc-footer-app a:hover {
    color: var(--gc-verde);
    text-decoration: underline;
}
.gc-footer-app .gc-footer-separador {
    color: var(--gc-gris-borde);
}

@media (max-width: 768px) {
    .gc-buscador-global { display: none; }

    /* El nombre completo + rol ("Deiby Tapia Sierra · Administrador") no
       cabe en pantallas estrechas y se partía en dos líneas de forma fea
       (la palabra del rol quedaba apretada y descentrada respecto al
       avatar). En móvil mostramos solo el nombre, en una línea, cortado
       con "…" si aún así no cupiera; el rol se oculta del todo aquí. */
    .gc-usuario .gc-rol-usuario {
        display: none;
    }
    .gc-usuario .gc-nombre-usuario {
        max-width: 130px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
        vertical-align: middle;
    }
}

@media (max-width: 400px) {
    .gc-usuario .gc-nombre-usuario {
        max-width: 90px;
    }
}

.nav-tabs .nav-link.active {
    color: var(--gc-verde);
    font-weight: 700;
    border-bottom-color: var(--gc-blanco);
}
.nav-tabs .nav-link:not(.active) {
    color: var(--gc-gris-texto);
}

.gc-subtitulo-pagina {
    color: var(--gc-gris-texto);
    margin-bottom: 20px;
}

/* ---------- Login secundario: recuperar/restablecer contraseña (tarjeta centrada simple) ---------- */

.gc-login-fondo {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, var(--gc-verde) 0%, var(--gc-verde-oscuro) 100%);
}

.gc-login-tarjeta {
    background: var(--gc-blanco);
    border-radius: 16px;
    padding: 40px 36px;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    text-align: center;
}

.gc-login-tarjeta img {
    width: 90px;
    margin-bottom: 12px;
}

.gc-login-tarjeta h1 {
    font-size: 1.3rem;
    font-weight: 800;
    margin-bottom: 24px;
    color: var(--gc-negro);
}

/* ---------- Login principal (pantalla completa, dos columnas) ---------- */

.gc-login-split {
    display: flex;
    min-height: 100vh;
}

.gc-login-panel-izq {
    flex: 1;
    background: linear-gradient(160deg, var(--gc-verde) 0%, var(--gc-verde-oscuro) 100%);
    color: var(--gc-blanco);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
}

.gc-login-izq-contenido {
    max-width: 420px;
    text-align: center;
}

.gc-login-logo-grande {
    width: 130px;
    margin-bottom: 20px;
}

.gc-login-izq-contenido h1 {
    font-size: 2.1rem;
    font-weight: 800;
    margin-bottom: 14px;
}

.gc-login-eslogan {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.gc-login-subeslogan {
    opacity: 0.85;
    margin-bottom: 32px;
}

.gc-login-caracteristicas {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    display: inline-block;
}

.gc-login-caracteristicas li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    font-weight: 600;
}

.gc-login-caracteristicas li i {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.gc-login-panel-der {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gc-blanco);
    padding: 40px;
}

.gc-login-formulario {
    width: 100%;
    max-width: 400px;
}

.gc-login-formulario h2 {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--gc-negro);
    margin-bottom: 2px;
}

.gc-login-logo-movil {
    display: block;
    width: 64px;
    margin: 0 auto 16px;
}

@media (max-width: 900px) {
    .gc-login-panel-izq { display: none; }
    .gc-login-panel-der { padding: 24px; }
    .gc-login-logo-movil {
        width: 80px;
        margin: 0 auto 12px;
    }
    .gc-login-formulario { text-align: center; }
    .gc-login-formulario form,
    .gc-login-formulario p:not(.gc-login-eslogan) { text-align: left; }
}

/* ---------- Responsive: en móvil, sidebar se convierte en menú superior ---------- */

@media (max-width: 768px) {
    .gc-layout {
        flex-direction: column;
    }

    /* En móvil, el menú lateral completo se oculta del todo... */
    .gc-sidebar {
        display: none;
    }

    /* ...y en su lugar aparece una cabecera simple arriba */
    .gc-topbar-movil {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 16px;
        background: var(--gc-blanco);
        border-bottom: 1px solid var(--gc-gris-borde);
    }
    .gc-topbar-movil img { width: 32px; }
    .gc-topbar-movil .gc-marca { font-weight: 800; font-size: 1rem; }
    .gc-logo-movil { width: 32px; }

    /* ...y un menú fijo abajo, con icono + texto, como en el diseño aprobado */
    .gc-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--gc-blanco);
        border-top: 1px solid var(--gc-gris-borde);
        z-index: 1000;
        padding: 4px 0;
    }
    .gc-bottom-nav a {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        padding: 6px 2px;
        color: var(--gc-gris-texto);
        text-decoration: none;
        font-size: 0.68rem;
        font-weight: 600;
    }
    .gc-bottom-nav a i { font-size: 1.2rem; }
    .gc-bottom-nav a.activo { color: var(--gc-verde); }

    /* Dejamos hueco abajo para que el menú fijo no tape el contenido */
    .gc-main { padding: 16px; padding-bottom: 80px; }
}

@media (min-width: 769px) {
    .gc-topbar-movil, .gc-bottom-nav { display: none; }
}

/* Las páginas del trabajador (Mis turnos, Fichar...) no tienen menú
   lateral — en pantallas grandes, agrandamos su cabecera para que no se
   vea como un resto de móvil perdido en la esquina. */
@media (min-width: 769px) {
    body.gc-pagina-trabajador .gc-topbar-movil {
        display: flex;
        padding: 20px 40px;
    }
    body.gc-pagina-trabajador .gc-logo-movil { width: 48px; }
    body.gc-pagina-trabajador .gc-marca { font-size: 1.4rem; }
    body.gc-pagina-trabajador .gc-main { padding-top: 32px; }
}