/* style.css - Sistema de Asistencia Rápida para Hoteles */
/* style.css - Quick Assistance Hotel System */

/*
DESCRIPCIÓN / DESCRIPTION:
Este archivo contiene todos los estilos CSS principales del sistema.
Define la apariencia visual, layout, colores y componentes responsive
para todas las páginas de la aplicación.

This file contains all main CSS styles for the system.
Defines visual appearance, layout, colors, and responsive components
for all application pages.
*/

/* ==================== VARIABLES CSS (Custom Properties) ==================== */
/* Definición de colores y valores reutilizables / Definition of reusable colors and values */

:root {
    /* Colores principales / Main colors */
    --primary-color: #2c3e50;      /* Azul oscuro principal / Dark blue primary */
    --secondary-color: #3498db;    /* Azul brillante secundario / Bright blue secondary */
    --accent-color: #e74c3c;       /* Rojo acento para alertas / Red accent for alerts */
    --success-color: #27ae60;      /* Verde para éxito / Green for success */
    --warning-color: #f39c12;      /* Naranja para advertencias / Orange for warnings */
    
    /* Colores neutros / Neutral colors */
    --light-color: #ecf0f1;        /* Gris claro para fondos / Light gray for backgrounds */
    --dark-color: #2c3e50;         /* Gris oscuro para textos / Dark gray for text */
    --text-color: #333;            /* Color principal de texto / Main text color */
    --border-color: #bdc3c7;       /* Color para bordes / Color for borders */
    
    /* Sombras / Shadows */
    --shadow-sm: 0 2px 5px rgba(0,0,0,0.1);      /* Sombra pequeña / Small shadow */
    --shadow-md: 0 4px 10px rgba(0,0,0,0.1);     /* Sombra media / Medium shadow */
    --shadow-lg: 0 10px 30px rgba(0,0,0,0.1);    /* Sombra grande / Large shadow */
    
    /* Espaciados / Spacings */
    --spacing-xs: 0.5rem;   /* 8px / Extra small spacing */
    --spacing-sm: 1rem;     /* 16px / Small spacing */
    --spacing-md: 1.5rem;   /* 24px / Medium spacing */
    --spacing-lg: 2rem;     /* 32px / Large spacing */
    --spacing-xl: 3rem;     /* 48px / Extra large spacing */
}

/* ==================== RESET Y ESTILOS BASE / RESET AND BASE STYLES ==================== */
/* Normalización de estilos y configuración inicial / Style normalization and initial setup */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Incluye padding y border en dimensiones / Includes padding and border in dimensions */
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Fuente moderna y legible / Modern and readable font */
    line-height: 1.6; /* Espaciado entre líneas para mejor legibilidad / Line spacing for better readability */
    color: var(--text-color); /* Color de texto usando variable / Text color using variable */
    background-color: #f8f9fa; /* Fondo gris claro / Light gray background */
    min-height: 100vh; /* Altura mínima de toda la ventana / Minimum height of entire viewport */
}

/* ==================== ENCABEZADO Y NAVEGACIÓN / HEADER AND NAVIGATION ==================== */
/* Estilos para la barra superior de navegación / Styles for top navigation bar */

.header {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); /* Gradiente azul / Blue gradient */
    color: white; /* Texto blanco para contraste / White text for contrast */
    padding: var(--spacing-sm) 0; /* Espaciado vertical / Vertical spacing */
    box-shadow: var(--shadow-sm); /* Sombra sutil / Subtle shadow */
    position: sticky; /* Fijo al hacer scroll / Sticky on scroll */
    top: 0;
    z-index: 100; /* Encima de otros elementos / Above other elements */
}

.navbar {
    display: flex;
    justify-content: space-between; /* Logo a la izquierda, menú a la derecha / Logo left, menu right */
    align-items: center;
    max-width: 1200px; /* Ancho máximo para pantallas grandes / Max width for large screens */
    margin: 0 auto; /* Centrado horizontal / Horizontal centering */
    padding: 0 var(--spacing-lg); /* Espaciado lateral / Side spacing */
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm); /* Espacio entre elementos / Space between elements */
}

.logo img {
    height: 40px; /* Altura fija para logo / Fixed height for logo */
}

.logo h1 {
    font-size: 1.5rem;
    font-weight: 600; /* Peso de fuente semibold / Semibold font weight */
}

/* Menú de navegación principal / Main navigation menu */
.nav-menu {
    display: flex;
    list-style: none; /* Quitar viñetas / Remove bullets */
    gap: var(--spacing-lg); /* Espacio entre elementos del menú / Space between menu items */
}

.nav-menu a {
    color: white; /* Texto blanco / White text */
    text-decoration: none; /* Sin subrayado / No underline */
    padding: var(--spacing-xs) var(--spacing-sm); /* Espaciado interno / Internal spacing */
    border-radius: 4px; /* Bordes redondeados / Rounded corners */
    transition: background-color 0.3s; /* Transición suave / Smooth transition */
}

.nav-menu a:hover,
.nav-menu a.active {
    background-color: rgba(255,255,255,0.2); /* Fondo semitransparente al pasar/activo / Semi-transparent background on hover/active */
}

/* ==================== CONTENEDOR PRINCIPAL / MAIN CONTAINER ==================== */
/* Estructura principal de contenido / Main content structure */

.container {
    max-width: 1200px; /* Ancho máximo para pantallas grandes / Max width for large screens */
    margin: var(--spacing-lg) auto; /* Margen superior/inferior y centrado / Top/bottom margin and centering */
    padding: 0 var(--spacing-lg); /* Espaciado lateral / Side spacing */
}

/* ==================== COMPONENTES DE TARJETAS / CARD COMPONENTS ==================== */
/* Estilos para tarjetas contenedoras de información / Styles for information container cards */

.card {
    background: white; /* Fondo blanco / White background */
    border-radius: 8px; /* Bordes redondeados / Rounded corners */
    box-shadow: var(--shadow-md); /* Sombra media / Medium shadow */
    margin-bottom: var(--spacing-lg); /* Espacio inferior / Bottom spacing */
    overflow: hidden; /* Evita que contenido sobresalga / Prevents content overflow */
    transition: transform 0.3s, box-shadow 0.3s; /* Animaciones suaves / Smooth animations */
}

.card:hover {
    transform: translateY(-2px); /* Efecto de elevación al pasar mouse / Lift effect on hover */
    box-shadow: var(--shadow-lg); /* Sombra más pronunciada al pasar / More pronounced shadow on hover */
}

.card-header {
    background: var(--primary-color); /* Fondo azul oscuro / Dark blue background */
    color: white; /* Texto blanco / White text */
    padding: var(--spacing-sm) var(--spacing-md); /* Espaciado interno / Internal spacing */
    font-weight: 600; /* Texto semibold / Semibold text */
}

.card-body {
    padding: var(--spacing-md); /* Espaciado interno uniforme / Uniform internal spacing */
}

/* ==================== FORMULARIOS / FORMS ==================== */
/* Estilos para elementos de formulario / Styles for form elements */

.form-group {
    margin-bottom: var(--spacing-sm); /* Espacio entre grupos de formulario / Space between form groups */
}

.form-label {
    display: block; /* Ocupa toda la línea / Takes full line */
    margin-bottom: var(--spacing-xs); /* Espacio inferior / Bottom spacing */
    font-weight: 600; /* Texto semibold / Semibold text */
    color: var(--dark-color); /* Color oscuro / Dark color */
}

.form-control {
    width: 100%; /* Ancho completo / Full width */
    padding: 0.75rem; /* Espaciado interno / Internal padding */
    border: 1px solid var(--border-color); /* Borde gris / Gray border */
    border-radius: 4px; /* Bordes redondeados / Rounded corners */
    font-size: 1rem; /* Tamaño de fuente normal / Normal font size */
    transition: border-color 0.3s; /* Transición suave para borde / Smooth border transition */
}

.form-control:focus {
    outline: none; /* Sin contorno por defecto / No default outline */
    border-color: var(--secondary-color); /* Borde azul al enfocar / Blue border on focus */
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2); /* Sombra de enfoque / Focus shadow */
}

/* ==================== BOTONES / BUTTONS ==================== */
/* Estilos para todos los tipos de botones / Styles for all button types */

.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem; /* Espaciado interno / Internal spacing */
    border: none; /* Sin borde / No border */
    border-radius: 4px; /* Bordes redondeados / Rounded corners */
    font-size: 1rem; /* Tamaño de fuente normal / Normal font size */
    font-weight: 600; /* Texto semibold / Semibold text */
    text-decoration: none; /* Sin subrayado / No underline */
    text-align: center; /* Texto centrado / Centered text */
    cursor: pointer; /* Cursor de mano / Hand cursor */
    transition: all 0.3s; /* Transición suave para todas las propiedades / Smooth transition for all properties */
}

/* Botón primario (acción principal) / Primary button (main action) */
.btn-primary {
    background-color: var(--secondary-color); /* Fondo azul / Blue background */
    color: white; /* Texto blanco / White text */
}

.btn-primary:hover {
    background-color: #2980b9; /* Azul más oscuro al pasar / Darker blue on hover */
    transform: translateY(-1px); /* Efecto de elevación / Lift effect */
}

/* Botón de éxito (acción positiva) / Success button (positive action) */
.btn-success {
    background-color: var(--success-color); /* Fondo verde / Green background */
    color: white; /* Texto blanco / White text */
}

.btn-success:hover {
    background-color: #229954; /* Verde más oscuro al pasar / Darker green on hover */
    transform: translateY(-1px); /* Efecto de elevación / Lift effect */
}

/* Botón de peligro (acción negativa) / Danger button (negative action) */
.btn-danger {
    background-color: var(--accent-color); /* Fondo rojo / Red background */
    color: white; /* Texto blanco / White text */
}

.btn-danger:hover {
    background-color: #c0392b; /* Rojo más oscuro al pasar / Darker red on hover */
    transform: translateY(-1px); /* Efecto de elevación / Lift effect */
}

/* Botón de advertencia (acción cautelar) / Warning button (cautious action) */
.btn-warning {
    background-color: var(--warning-color); /* Fondo naranja / Orange background */
    color: white; /* Texto blanco / White text */
}

.btn-warning:hover {
    background-color: #e67e22; /* Naranja más oscuro al pasar / Darker orange on hover */
    transform: translateY(-1px); /* Efecto de elevación / Lift effect */
}

/* Botón pequeño (para espacios reducidos) / Small button (for reduced spaces) */
.btn-sm {
    padding: 0.5rem 1rem; /* Espaciado interno reducido / Reduced internal spacing */
    font-size: 0.875rem; /* Tamaño de fuente reducido / Reduced font size */
}

/* ==================== TABLAS / TABLES ==================== */
/* Estilos para tablas de datos / Styles for data tables */

.table {
    width: 100%; /* Ancho completo / Full width */
    border-collapse: collapse; /* Bordes unificados / Unified borders */
    margin-bottom: var(--spacing-sm); /* Espacio inferior / Bottom spacing */
}

.table th,
.table td {
    padding: 0.75rem; /* Espaciado interno de celdas / Cell internal spacing */
    text-align: left; /* Alineación izquierda / Left alignment */
    border-bottom: 1px solid var(--border-color); /* Borde inferior gris / Gray bottom border */
}

.table th {
    background-color: var(--light-color); /* Fondo gris claro / Light gray background */
    font-weight: 600; /* Texto semibold / Semibold text */
    color: var(--dark-color); /* Texto oscuro / Dark text */
}

.table tbody tr:hover {
    background-color: rgba(52, 152, 219, 0.05); /* Fondo azul muy suave al pasar / Very light blue background on hover */
}

/* ==================== SISTEMA DE GRID / GRID SYSTEM ==================== */
/* Layout responsivo basado en flexbox / Responsive layout based on flexbox */

.row {
    display: flex;
    flex-wrap: wrap; /* Permite que las columnas se ajusten / Allows columns to wrap */
    margin: 0 -1rem; /* Margen negativo para compensar padding de columnas / Negative margin to compensate column padding */
}

/* Columna flexible (ancho automático) / Flexible column (auto width) */
.col {
    flex: 1; /* Ocupa espacio disponible / Takes available space */
    padding: 0 1rem; /* Espaciado lateral / Side spacing */
}

/* Columna de 50% / 50% column */
.col-6 {
    flex: 0 0 50%; /* Ancho fijo 50% / Fixed width 50% */
    padding: 0 1rem; /* Espaciado lateral / Side spacing */
}

/* Columna de 33.333% / 33.333% column */
.col-4 {
    flex: 0 0 33.333%; /* Ancho fijo 33.333% / Fixed width 33.333% */
    padding: 0 1rem; /* Espaciado lateral / Side spacing */
}

/* Columna de 25% / 25% column */
.col-3 {
    flex: 0 0 25%; /* Ancho fijo 25% / Fixed width 25% */
    padding: 0 1rem; /* Espaciado lateral / Side spacing */
}

/* ==================== SECCIÓN DE ESCANEADO QR / QR SCANNING SECTION ==================== */
/* Estilos para la sección principal de escaneo QR / Styles for main QR scanning section */

.qr-scanner {
    text-align: center; /* Contenido centrado / Centered content */
    padding: var(--spacing-lg); /* Espaciado interno / Internal spacing */
    background: var(--light-color); /* Fondo gris claro / Light gray background */
    border-radius: 8px; /* Bordes redondeados / Rounded corners */
    margin-bottom: var(--spacing-lg); /* Espacio inferior / Bottom spacing */
}

.qr-placeholder {
    width: 200px; /* Ancho fijo / Fixed width */
    height: 200px; /* Alto fijo / Fixed height */
    background: white; /* Fondo blanco / White background */
    border: 2px dashed var(--border-color); /* Borde punteado gris / Dashed gray border */
    border-radius: 8px; /* Bordes redondeados / Rounded corners */
    margin: 0 auto var(--spacing-sm); /* Centrado horizontal con espacio inferior / Horizontal centering with bottom spacing */
    display: flex;
    align-items: center;
    justify-content: center; /* Contenido centrado / Centered content */
    color: var(--text-color); /* Color de texto / Text color */
}

/* ==================== BADGES (INDICADORES VISUALES) / BADGES (VISUAL INDICATORS) ==================== */
/* Pequeños indicadores para estados / Small indicators for statuses */

.badge {
    display: inline-block;
    padding: 0.25rem 0.5rem; /* Espaciado interno reducido / Reduced internal spacing */
    border-radius: 12px; /* Forma ovalada / Oval shape */
    font-size: 0.75rem; /* Texto pequeño / Small text */
    font-weight: 600; /* Texto semibold / Semibold text */
}

/* Badge para estado "nuevo" / Badge for "new" status */
.badge-new {
    background-color: var(--warning-color); /* Fondo naranja / Orange background */
    color: white; /* Texto blanco / White text */
}

/* Badge para estado "tomado" / Badge for "taken" status */
.badge-taken {
    background-color: var(--secondary-color); /* Fondo azul / Blue background */
    color: white; /* Texto blanco / White text */
}

/* Badge para estado "completado" / Badge for "completed" status */
.badge-completed {
    background-color: var(--success-color); /* Fondo verde / Green background */
    color: white; /* Texto blanco / White text */
}

/* ==================== PÁGINA DE LOGIN / LOGIN PAGE ==================== */
/* Estilos específicos para la página de inicio de sesión / Specific styles for login page */

.login-container {
    max-width: 400px; /* Ancho máximo reducido / Reduced max width */
    margin: 5rem auto; /* Margen vertical grande y centrado / Large vertical margin and centering */
    padding: var(--spacing-lg); /* Espaciado interno / Internal spacing */
}

.login-card {
    background: white; /* Fondo blanco / White background */
    border-radius: 8px; /* Bordes redondeados / Rounded corners */
    box-shadow: var(--shadow-lg); /* Sombra grande / Large shadow */
    padding: var(--spacing-lg); /* Espaciado interno / Internal spacing */
}

/* ==================== SELECTOR DE IDIOMA / LANGUAGE SELECTOR ==================== */
/* Componente para cambiar idioma de la aplicación / Component to change application language */

/* Contenedor del selector / Selector container */
.language-selector {
    position: relative; /* Para posicionar dropdown absolutamente / For absolute dropdown positioning */
    display: inline-block;
}

/* Botón para abrir selector / Button to open selector */
.language-btn {
    background: rgba(255,255,255,0.2); /* Fondo semitransparente blanco / Semi-transparent white background */
    color: white; /* Texto blanco / White text */
    border: 1px solid rgba(255,255,255,0.3); /* Borde semitransparente / Semi-transparent border */
    padding: var(--spacing-xs) var(--spacing-sm); /* Espaciado interno / Internal spacing */
    border-radius: 4px; /* Bordes redondeados / Rounded corners */
    cursor: pointer; /* Cursor de mano / Hand cursor */
    display: flex;
    align-items: center;
    gap: var(--spacing-xs); /* Espacio entre icono y texto / Space between icon and text */
}

/* Menú desplegable de idiomas / Language dropdown menu */
.language-dropdown {
    display: none; /* Oculto por defecto / Hidden by default */
    position: absolute; /* Posicionamiento absoluto / Absolute positioning */
    top: 100%; /* Debajo del botón / Below the button */
    right: 0; /* Alineado a la derecha / Right aligned */
    background: var(--primary-color); /* Fondo azul oscuro / Dark blue background */
    min-width: 150px; /* Ancho mínimo / Minimum width */
    box-shadow: var(--shadow-md); /* Sombra media / Medium shadow */
    border-radius: 4px; /* Bordes redondeados / Rounded corners */
    z-index: 1000; /* Encima de otros elementos / Above other elements */
    border: 1px solid #34495e; /* Borde más oscuro / Darker border */
}

/* Clase para mostrar dropdown / Class to show dropdown */
.language-dropdown.show {
    display: block; /* Mostrar cuando tenga clase show / Show when has show class */
}

/* Opciones individuales de idioma / Individual language options */
.language-option {
    padding: 0.75rem 1rem; /* Espaciado interno / Internal spacing */
    color: white; /* Texto blanco / White text */
    text-decoration: none; /* Sin subrayado / No underline */
    display: block; /* Ocupa toda la línea / Takes full line */
    border-bottom: 1px solid #34495e; /* Separador entre opciones / Separator between options */
    transition: background-color 0.3s; /* Transición suave / Smooth transition */
}

.language-option:hover {
    background-color: #34495e; /* Fondo más claro al pasar / Lighter background on hover */
    color: white; /* Texto blanco / White text */
}

.language-option:last-child {
    border-bottom: none; /* Sin borde en la última opción / No border on last option */
}

/* ==================== DISEÑO RESPONSIVE / RESPONSIVE DESIGN ==================== */
/* Media queries para adaptar diseño a diferentes tamaños de pantalla / Media queries to adapt design to different screen sizes */

@media (max-width: 768px) {
    /* Estilos para tabletas y móviles / Styles for tablets and mobiles */
    
    .navbar {
        flex-direction: column; /* Elementos en columna / Elements in column */
        gap: var(--spacing-sm); /* Espacio entre elementos / Space between elements */
    }

    .nav-menu {
        flex-direction: column; /* Menú en columna / Menu in column */
        gap: var(--spacing-xs); /* Espacio reducido entre elementos / Reduced space between elements */
    }

    /* Columnas a ancho completo en móviles / Columns to full width on mobiles */
    .col, .col-6, .col-4, .col-3 {
        flex: 0 0 100%; /* Ancho completo / Full width */
        margin-bottom: var(--spacing-sm); /* Espacio inferior / Bottom spacing */
    }

    .container {
        padding: 0 var(--spacing-sm); /* Espaciado lateral reducido / Reduced side spacing */
    }
}

@media (max-width: 480px) {
    /* Estilos para móviles pequeños / Styles for small mobiles */
    
    .logo h1 {
        font-size: 1.2rem; /* Título más pequeño / Smaller title */
    }
    
    .card-body {
        padding: var(--spacing-sm); /* Espaciado reducido / Reduced spacing */
    }
}

/* ==================== CLASES DE UTILIDAD / UTILITY CLASSES ==================== */
/* Clases reutilizables para estilos comunes / Reusable classes for common styles */

.text-center { text-align: center; } /* Texto centrado / Centered text */
.text-right { text-align: right; }   /* Texto alineado a la derecha / Right-aligned text */

/* Margin Top / Margen superior */
.mt-1 { margin-top: var(--spacing-xs); }
.mt-2 { margin-top: var(--spacing-sm); }
.mt-3 { margin-top: var(--spacing-md); }

/* Margin Bottom / Margen inferior */
.mb-1 { margin-bottom: var(--spacing-xs); }
.mb-2 { margin-bottom: var(--spacing-sm); }
.mb-3 { margin-bottom: var(--spacing-md); }

/* Clase para ocultar elementos / Class to hide elements */
.hidden { 
    display: none !important; /* Oculto con importante para sobrescribir / Hidden with important to override */
}

/* ==================== ANIMACIONES / ANIMATIONS ==================== */
/* Efectos de transición y animaciones / Transition effects and animations */

.fade-in {
    animation: fadeIn 0.5s ease-in; /* Animación de aparición suave / Smooth appearance animation */
}

@keyframes fadeIn {
    from { 
        opacity: 0; /* Completamente transparente / Completely transparent */
        transform: translateY(10px); /* Desplazado hacia abajo / Shifted down */
    }
    to { 
        opacity: 1; /* Completamente visible / Completely visible */
        transform: translateY(0); /* Posición normal / Normal position */
    }
}

/* ==================== ESTILOS DE IMPRESIÓN / PRINT STYLES ==================== */
/* Optimización para impresión de documentos / Optimization for document printing */

@media print {
    .header, 
    .bg-custom-btn,
    .language-selector,
    .btn {
        display: none !important; /* Ocultar elementos no necesarios al imprimir / Hide unnecessary elements when printing */
    }
    
    body {
        background: white !important; /* Fondo blanco para ahorrar tinta / White background to save ink */
        color: black !important; /* Texto negro para mejor contraste / Black text for better contrast */
    }
    
    .card {
        box-shadow: none !important; /* Sin sombras para impresión / No shadows for printing */
        border: 1px solid #ccc !important; /* Borde simple / Simple border */
    }
}

/* ==================== ESTILOS DE ACCESIBILIDAD / ACCESSIBILITY STYLES ==================== */
/* Mejoras para usuarios con discapacidades / Improvements for users with disabilities */

/* Enfoque visible para teclado / Visible focus for keyboard */
:focus {
    outline: 2px solid var(--secondary-color); /* Contorno azul / Blue outline */
    outline-offset: 2px; /* Espacio entre elemento y contorno / Space between element and outline */
}

/* Alto contraste para mejor visibilidad / High contrast for better visibility */
@media (prefers-contrast: high) {
    :root {
        --primary-color: #000080; /* Azul marino oscuro / Dark navy blue */
        --secondary-color: #0000ff; /* Azul brillante / Bright blue */
        --text-color: #000000; /* Negro puro / Pure black */
        --border-color: #000000; /* Negro puro / Pure black */
    }
}

/* ==================== ESTILOS DE RENDIMIENTO / PERFORMANCE STYLES ==================== */
/* Optimizaciones para mejor rendimiento / Optimizations for better performance */

/* Evitar animaciones para usuarios que las prefieren reducidas / Avoid animations for users who prefer reduced */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==================== COMENTARIOS FINALES / FINAL NOTES ==================== */

/*
NOTAS DE IMPLEMENTACIÓN / IMPLEMENTATION NOTES:
1. Se utiliza CSS Custom Properties (variables) para mantener consistencia
   CSS Custom Properties (variables) are used to maintain consistency
2. El diseño es completamente responsive con media queries
   Design is fully responsive with media queries
3. Se incluyen estilos de accesibilidad y alto contraste
   Accessibility and high contrast styles are included
4. Las animaciones son sutiles y no interfieren con la usabilidad
   Animations are subtle and don't interfere with usability
5. Se optimiza para impresión y rendimiento
   Optimized for printing and performance
*/