/* =====================================================
   custom.css — Sistema de Parqueaderos SENA
   Ruta sugerida: libraries/custom.css

   Contenido:
     1. Utilidades generales
     2. Tipografía y estructura base
     3. Separador
     4. Carrusel
     5. Card de login
     6. Formulario
     7. Botón principal (verde SENA)
     8. Link "¿Olvidaste tu contraseña?"
     9. Logo SENA
    10. Panel Admin (Dashboard) - estilos SENA

   Nota: los estilos de módulos internos (tablas, modales
   de gestión, etc.) deben agregarse a continuación de
   este bloque conforme se desarrollen las vistas.
   ===================================================== */


/* ═══════════════════════════════════════════════════════════
   10. PANEL ADMIN (DASHBOARD) — ESTILOS SENA
   Estilos personalizados para el dashboard del admin.
   Usa los colores institucionales del SENA:
     - #39A900 (verde SENA)
     - #00304D (azul SENA)
     - #f59e0b (amarillo/naranja)
   ═══════════════════════════════════════════════════════════ */

   /* — Colores corporativos SENA — */
   :root {
       --sena-green: #39A900;
       --sena-blue: #00304D;
       --sena-yellow: #f59e0b;
       --sena-dark: #1a1a1a;
   }

   /* — Avatar del usuario (inicgles en círculo) — */
   .sena-avatar {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       width: 32px;
       height: 32px;
       border-radius: 50%;
       background: var(--sena-green);
       color: #fff;
       font-weight: 600;
       font-size: 14px;
   }

   /* — Badges de estado — */
   .sena-badge-admin {
       background: var(--sena-blue);
       color: #fff;
       font-size: 0.75rem;
       font-weight: 500;
       padding: 0.25em 0.6em;
       border-radius: 0.25rem;
   }

   .sena-badge-libre {
       background: var(--sena-green);
       color: #fff;
       font-size: 0.75rem;
       font-weight: 500;
       padding: 0.25em 0.6em;
       border-radius: 0.25rem;
   }

    .sena-badge-ocupado {
        background: var(--sena-blue);
        color: #fff;
        font-size: 0.75rem;
        font-weight: 500;
        padding: 0.25em 0.6em;
        border-radius: 0.25rem;
    }

    .sena-badge-sin-cupo {
        background: #dc3545;
        color: #fff;
        font-size: 0.75rem;
        font-weight: 500;
        padding: 0.25em 0.6em;
        border-radius: 0.25rem;
    }

   .sena-badge-placa {
       background: var(--sena-blue);
       color: #fff;
       font-size: 0.8rem;
       font-weight: 500;
       padding: 0.25em 0.6em;
       border-radius: 0.25rem;
   }

   .sena-badge-activo {
       background: var(--sena-green);
       color: #fff;
       font-size: 0.75rem;
       font-weight: 500;
       padding: 0.25em 0.6em;
       border-radius: 0.25rem;
   }

   .sena-badge-cerrado {
       background: #6c757d;
       color: #fff;
       font-size: 0.75rem;
       font-weight: 500;
       padding: 0.25em 0.6em;
       border-radius: 0.25rem;
   }

   /* — Tarjetas de estadísticas — */
   .sena-stat-card {
       border: none;
       border-radius: 0.5rem;
       box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
       transition: transform 0.15s ease-in-out;
   }

   .sena-stat-card:hover {
       transform: translateY(-2px);
       box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
   }

   .sena-stat-label {
       color: #6c757d;
       font-size: 0.875rem;
       font-weight: 500;
       text-transform: uppercase;
       letter-spacing: 0.5px;
   }

   .sena-stat-value {
       color: var(--sena-dark);
       font-size: 2rem;
       font-weight: 700;
       line-height: 1;
   }

   .sena-stat-icon {
       display: flex;
       align-items: center;
       justify-content: center;
       width: 48px;
       height: 48px;
       border-radius: 0.5rem;
   }

   .sena-stat-icon i {
       width: 24px;
       height: 24px;
       color: #fff;
   }

   /* — Bordes laterales de color — */
   .border-start-sena-green {
       border-left: 4px solid var(--sena-green) !important;
   }

   .border-start-sena-blue {
       border-left: 4px solid var(--sena-blue) !important;
   }

   .border-start-sena-yellow {
       border-left: 4px solid var(--sena-yellow) !important;
   }

   .border-start-sena-dark {
       border-left: 4px solid var(--sena-dark) !important;
   }

   /* — Fondos de iconos — */
   .bg-sena-green {
       background: var(--sena-green);
   }

   .bg-sena-blue {
       background: var(--sena-blue);
   }

   .bg-sena-yellow {
       background: var(--sena-yellow);
   }

   .bg-sena-dark {
       background: var(--sena-dark);
   }

   /* — Encabezado de tabla — */
   .sena-thead {
       background: var(--sena-blue);
       color: #fff;
   }

   .sena-thead th {
       border: none;
       font-weight: 600;
       text-transform: uppercase;
       font-size: 0.8rem;
       letter-spacing: 0.5px;
   }

   /* — Botón outline — */
   .sena-btn-outline {
       border: 1px solid var(--sena-blue);
       color: var(--sena-blue);
       background: transparent;
       border-radius: 0.25rem;
       padding: 0.375rem 0.75rem;
       font-size: 0.875rem;
       transition: all 0.15s ease-in-out;
   }

   .sena-btn-outline:hover {
       background: var(--sena-blue);
       color: #fff;
   }

   /* — Ajustes adicionales del footer — */
   .footer {
       background: #fff;
       border-top: 1px solid #e5e5e5;
       padding: 1rem 0;
       font-size: 0.875rem;
   }

   /* — Sidebar ajustles — */
   .sidebar-brand-icon svg {
       color: var(--sena-green);
   }

   .sidebar-brand-text {
       color: var(--sena-blue);
       font-weight: 600;
   }

   /* — Navbar — */
   .navbar-brand {
       color: var(--sena-green) !important;
   }

   .hamburger {
       display: inline-block;
       width: 16px;
       height: 2px;
       background: #6c757d;
       position: relative;
   }

   .hamburger::before,
   .hamburger::after {
       content: '';
       position: absolute;
       width: 16px;
       height: 2px;
       background: #6c757d;
       left: 0;
   }

   .hamburger::before { top: -5px; }
   .hamburger::after { top: 5px; }

   /* — Badge ocuppation en navbar — */
   .badge {
       font-weight: 500;
       padding: 0.35em 0.65em;
   }


/* ── 1. UTILIDADES GENERALES ─────────────────────────
   Clase de apoyo reutilizable en cualquier vista.
   ─────────────────────────────────────────────────── */
.hidden {
    display: none; /* Oculta un elemento sin eliminarlo del DOM */
}


/* ── 2. TIPOGRAFÍA Y ESTRUCTURA BASE ─────────────────
   .letra-sena-2024 aplica la fuente institucional a
   cualquier elemento que la necesite.
   overflow-x: hidden evita el scroll horizontal en
   pantallas pequeñas causado por filas Bootstrap.
   ─────────────────────────────────────────────────── */
.letra-sena-2024 {
    font-family: 'Work Sans', sans-serif;
}

body {
    overflow-x: hidden; /* Evita scroll horizontal no deseado */
    overflow-y: auto;   /* Permite scroll vertical si el contenido lo requiere */
}


/* ── 3. SEPARADOR ────────────────────────────────────
   Línea horizontal usada dentro de la card de login
   para separar el título del formulario.
   ─────────────────────────────────────────────────── */
.sep {
    border-top: 1px solid #dee2e6;
    margin: 0.75rem 0;
}


/* ── 4. CARRUSEL ─────────────────────────────────────
   Se fija una altura mínima para que el carrusel no
   colapse cuando las imágenes tardan en cargar.
   object-fit: cover recorta la imagen sin deformarla.
   ─────────────────────────────────────────────────── */
.carousel {
    min-height: 320px; /* Altura mínima del contenedor */
}

.carousel-inner,
.carousel-item {
    height: 100%;
    min-height: 320px;
}

.carousel-item img {
    width: 100%;
    height: 320px;
    object-fit: cover;       /* Recorta y centra la imagen */
    background: #dee2e6;     /* Color de respaldo si la imagen no carga */
}


/* ── 5. CARD DE LOGIN ────────────────────────────────
   Fondo blanco limpio sin el gradiente del card-sena.
   box-shadow suave para dar profundidad sin ser invasivo.
   Se anula el text-shadow heredado de otros estilos.
   ─────────────────────────────────────────────────── */
.card {
    border: none !important;               /* Sin borde */
    border-radius: 0.5rem !important;
    background: #ffffff !important;        /* Fondo blanco puro */
    box-shadow: 0 0.15rem 1.75rem rgba(58, 59, 69, .15) !important;
}

.card .card-body {
    background: #ffffff !important;
    border-radius: 0.5rem !important;
}

/* Quitar text-shadow que heredan de reglas globales */
.card h3,
.card p,
.card h4 {
    text-shadow: none !important;
}

/* Título del sistema dentro de la card — gris suave */
.card h4.sesion,
.card .h4.sesion {
    color: #6c757d !important;   /* Gris neutro, no compite con el logo */
    font-weight: 400 !important;
    font-size: 1.1rem !important;
}


/* ── 6. FORMULARIO ───────────────────────────────────
   Estilos para los campos de texto del formulario
   de inicio de sesión (#signup).
   ─────────────────────────────────────────────────── */
.form-control {
    border: 1px solid #ced4da;
    border-radius: 0.35rem;
    padding: 0.6rem 0.75rem;
    font-size: 0.9rem;
}


/* ── 7. BOTÓN PRINCIPAL — VERDE SENA ─────────────────
   Color corporativo #39A900.
   Se usa !important para sobreescribir los estilos
   de Bootstrap que también usan !important internamente.
   ─────────────────────────────────────────────────── */
.btn-success {
    background-color: #39A900 !important;
    border-color: #39A900 !important;
    padding: 0.5rem 2rem;
    font-size: 0.9rem;
}

.btn-success:hover {
    background-color: #2d8a00 !important; /* Verde más oscuro al pasar el cursor */
    border-color: #2d8a00 !important;
}


/* ── 8. LINK "¿OLVIDASTE TU CONTRASEÑA?" ────────────
   Estilo de enlace secundario con subrayado explícito
   para cumplir con accesibilidad (WCAG 2.1 1.4.1).
   ─────────────────────────────────────────────────── */
.link-olvide {
    text-decoration: underline;
    color: #555eac !important; /* Azul-violeta accesible sobre fondo blanco */
    font-size: 0.9rem;
}

.link-olvide:hover {
    color: #3a3e8f !important; /* Versión más oscura al hacer hover */
}


/* ── 9. LOGO SENA ────────────────────────────────────
   Limita el ancho máximo del logo en la cabecera para
   que no ocupe demasiado espacio en pantallas grandes.
   ─────────────────────────────────────────────────── */
#logo-sena {
    max-width: 120px;
}


/* ═══════════════════════════════════════════════════════════
   11. DASHBOARD ADMIN — TARJETAS DE ESTADÍSTICAS
   Clases para las cards de resumen numérico.
   Cada card tiene un borde lateral de color según su contexto:
     - verde  → parqueos hoy
     - azul   → activos
     - amarillo → alerta (sin salida)
     - dark   → total parqueaderos
   ═══════════════════════════════════════════════════════════ */

.card-dashboard {
    background: #fff;
    border: none;
    border-radius: 1rem;
    padding: 1.25rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-left: 4px solid var(--sena-green);
}

.card-dashboard:hover {
    transform: translateY(-3px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.12) !important;
}

.card-dashboard-alert {
    border-left-color: var(--sena-yellow);
}

/* — Contenedor del icono dentro de la card — */
.card-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.card-icon i {
    font-size: 1.25rem;
    color: #fff;
}

/* — Etiqueta del indicador (texto pequeño arriba) — */
.card-label {
    color: #6c757d;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* — Valor numérico grande — */
.card-value {
    color: var(--sena-dark);
    font-size: 1.75rem;
    line-height: 1.2;
}


/* ═══════════════════════════════════════════════════════════
   12. DASHBOARD ADMIN — NAVBAR PERSONALIZADO
   Degradado verde institucional. Reemplaza el navbar
   por defecto de Bootstrap en el panel admin.
   ═══════════════════════════════════════════════════════════ */

.navbar-sena {
    background: linear-gradient(135deg, #006400, #39A900);
}


/* ═══════════════════════════════════════════════════════════
   13. DASHBOARD ADMIN — RELOJ DIGITAL EN VIVO
   Se muestra en la navbar junto al nombre del usuario.
   Se actualiza cada segundo vía JavaScript.
   ═══════════════════════════════════════════════════════════ */

.dashboard-clock {
    font-family: 'Work Sans', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}


/* ═══════════════════════════════════════════════════════════
   14. DASHBOARD ADMIN — BADGE DE ALERTA "SIN SALIDA"
   Se usa en la tabla de parqueos del día para marcar
   los registros que el guardia no ha cerrado.
   ═══════════════════════════════════════════════════════════ */

.badge-sin-salida {
    background: #f59e0b;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.3em 0.7em;
    border-radius: 0.25rem;
    display: inline-block;
    white-space: nowrap;
}


/* ═══════════════════════════════════════════════════════════
   15. DASHBOARD ADMIN — COLORES DE TEXTO CORPORATIVOS
   Complementan las variables CSS definidas en :root.
   Útiles para títulos y etiquetas en el panel.
   ═══════════════════════════════════════════════════════════ */

.text-sena-green {
    color: var(--sena-green);
}

.text-sena-blue {
    color: var(--sena-blue);
}


/* ═══════════════════════════════════════════════════════════
   16. DASHBOARD ADMIN — BOTONES DE ACCESO RÁPIDO
   Estilo outline con los colores institucionales.
   Se usa en la sección "Accesos Rápidos" del dashboard.
   ═══════════════════════════════════════════════════════════ */

.btn-outline-sena {
    border: 2px solid var(--sena-green);
    color: var(--sena-green);
    background: transparent;
    border-radius: 0.75rem;
    transition: all 0.2s ease;
}

.btn-outline-sena:hover {
    background: var(--sena-green);
    color: #fff;
    transform: translateY(-2px);
}


/* ═══════════════════════════════════════════════════════════
   17. DASHBOARD ADMIN — FOOTER INSTITUCIONAL
   Pie de página simple con borde superior.
   ═══════════════════════════════════════════════════════════ */

.footer-sena {
    background: #fff;
    border-top: 1px solid #e9ecef;
}


/* ═══════════════════════════════════════════════════════════
   18. VISTA DISPONIBILIDAD — BARRA DE PROGRESO
   Altura fija para las barras de ocupación.
   ═══════════════════════════════════════════════════════════ */

.progress-sena {
    height: 8px;
}


/* ═══════════════════════════════════════════════════════════
   19. MODAL LOGIN — VISTA PÚBLICA
   Ajustes del modal de inicio de sesión en disponibilidad.
   ═══════════════════════════════════════════════════════════ */

.modal-login-icon {
    font-size: 3rem;
    color: var(--sena-green);
}


/* ═══════════════════════════════════════════════════════════
   20. GESTIÓN DE USUARIOS — TABLA
   Ajustes de la tabla de usuarios en el panel admin.
   ═══════════════════════════════════════════════════════════ */

.table-usuarios thead th {
    white-space: nowrap;
}

.table-usuarios tbody td {
    vertical-align: middle;
}


/* ═══════════════════════════════════════════════════════════
   21. GESTIÓN DE USUARIOS — MODAL
   Estilos para el modal de crear/editar usuario.
   ═══════════════════════════════════════════════════════════ */

.modal-header-sena {
    background: var(--sena-green);
    color: #fff;
}

.modal-header-sena .btn-close {
    filter: brightness(0) invert(1);
}


/* ═══════════════════════════════════════════════════════════
   22. GESTIÓN DE USUARIOS — BOTONES DE ACCIÓN
   Botones compactos en la columna de acciones.
   ═══════════════════════════════════════════════════════════ */

.btn-accion {
    padding: 0.25rem 0.4rem;
    font-size: 0.8rem;
    line-height: 1;
}

.btn-accion i {
    font-size: 0.85rem;
}


/* ═══════════════════════════════════════════════════════════
   23. GESTIÓN DE USUARIOS — BADGE ROL EN TABLA
   Versión más pequeña del badge para la tabla.
   ═══════════════════════════════════════════════════════════ */

.badge-rol-tabla {
    font-size: 0.7rem;
    padding: 0.2em 0.5em;
    white-space: nowrap;
}