/* ================================== */
/* css/base.css                   */
/* Estilos globales, reset, vars    */
/* ================================== */

/* === Variables CSS Globales === */
/* Define la paleta de colores, fuentes, bordes, etc. para toda la aplicación */
:root {
    --primary-color: #007bff;       /* Azul principal */
    --primary-dark: #0056b3;        /* Azul principal más oscuro para hover */
    --primary-light: #e7f1ff;       /* Azul claro para fondos y acentos leves */
    --secondary-color: #6c757d;     /* Gris secundario */
    --secondary-dark: #5a6268;      /* Gris secundario más oscuro para hover */
    --success-color: #28a745;       /* Verde éxito */
    --success-dark: #218838;        /* Verde éxito más oscuro para hover */
    --danger-color: #dc3545;        /* Rojo peligro/error */
    --danger-dark: #c82333;         /* Rojo más oscuro para hover */
    --warning-color: #ffc107;       /* Amarillo advertencia */
    --warning-dark: #e0a800;        /* Amarillo más oscuro para hover */
    --info-color: #17a2b8;          /* Azul info */
    --info-dark: #138496;           /* Azul info más oscuro para hover */
    --light-color: #f8f9fa;         /* Gris muy claro */
    --dark-color: #343a40;          /* Gris oscuro/negro */

    --background-color: #f4f7f6;    /* Color de fondo general */
    --card-background: #ffffff;     /* Fondo para las tarjetas */

    --text-color: #333;             /* Color principal del texto */
    --text-muted: #6c757d;          /* Color de texto atenuado/gris */
    --text-danger: #dc3545;         /* Color de texto para errores */
    --text-warning: #ffc107;        /* Color de texto para advertencias */
    --text-success: #28a745;        /* Color de texto para mensajes de éxito */
    --text-info: #17a2b8;           /* Color de texto para mensajes informativos */

    --border-color: #dee2e6;        /* Color de borde general */
    --border-color-dark: #ced4da;   /* Color de borde más oscuro para inputs */
    --border-radius: 8px;           /* Radio de borde para elementos redondeados */
    --border-radius-sm: 4px;        /* Radio de borde más pequeño para elementos menores */
    --box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); /* Sombra estándar */
    --box-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05); /* Sombra pequeña */
    --box-shadow-lg: 0 5px 15px rgba(0, 0, 0, 0.1); /* Sombra grande */

    --spacing-xs: 5px;              /* Espaciado extra pequeño */
    --spacing-sm: 10px;             /* Espaciado pequeño */
    --spacing-md: 15px;             /* Espaciado mediano */
    --spacing-lg: 20px;             /* Espaciado grande */
    --spacing-xl: 30px;             /* Espaciado extra grande */

    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Fuente principal */
    --font-size-base: 16px;         /* Tamaño de fuente base */
    --font-size-sm: 0.875rem;       /* Tamaño de fuente pequeño */
    --font-size-lg: 1.25rem;        /* Tamaño de fuente grande */

    --transition-speed: 0.2s;       /* Velocidad estándar para transiciones */
    --z-index-dropdown: 1000;       /* z-index para dropdowns */
    --z-index-sticky: 1020;         /* z-index para elementos sticky */
    --z-index-modal: 1050;          /* z-index para modales */
    --z-index-toast: 1060;          /* z-index para toast/notificaciones */

    /* Variables para status tag (etiquetas de estado) */
    --status-pending-bg: #fff3cd;   /* Fondo para estados pendientes */
    --status-pending-color: #856404; /* Color de texto para estados pendientes */
    --status-success-bg: #d4edda;   /* Fondo para estados exitosos */
    --status-success-color: #155724; /* Color de texto para estados exitosos */
    --status-danger-bg: #f8d7da;    /* Fondo para estados de error */
    --status-danger-color: #721c24; /* Color de texto para estados de error */
    --status-info-bg: #d1ecf1;      /* Fondo para estados informativos */
    --status-info-color: #0c5460;   /* Color de texto para estados informativos */
    --status-assigned-bg: #e2e3e5;  /* Fondo para estados asignados */
    --status-assigned-color: #383d41; /* Color de texto para estados asignados */
}

/* === Reset y Estilos Base === */
/* Normaliza estilos entre navegadores y establece bases */
*, *::before, *::after {
    box-sizing: border-box; /* Modelo de caja más intuitivo */
    margin: 0;              /* Quita márgenes por defecto */
    padding: 0;             /* Quita paddings por defecto */
}

html {
    font-size: var(--font-size-base); /* Establece tamaño de fuente base */
    scroll-behavior: smooth; /* Scroll suave para navegación interna */
}

body {
    font-family: var(--font-family);      /* Aplica fuente principal */
    background-color: var(--background-color); /* Aplica color de fondo */
    color: var(--text-color);             /* Aplica color de texto principal */
    line-height: 1.6;                     /* Altura de línea estándar */
    -webkit-font-smoothing: antialiased;  /* Mejora renderizado de fuentes */
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;                    /* Asegura que ocupa al menos toda la ventana */
    position: relative;                   /* Base para posicionamiento absoluto de hijos */
}

a {
    color: var(--primary-color); /* Color base para enlaces */
    text-decoration: none;       /* Quita subrayado por defecto */
    transition: color var(--transition-speed) ease; /* Transición suave al pasar el ratón */
}

a:hover, a:focus {
    text-decoration: underline; /* Subrayado al pasar el ratón o al enfocar */
    color: var(--primary-dark); /* Azul más oscuro al pasar el ratón */
}

a:focus {
    outline: thin dotted; /* Mejora accesibilidad mostrando indicador de foco */
}

img {
    max-width: 100%; /* Asegura que las imágenes no se desborden */
    height: auto;    /* Mantiene la proporción */
    display: block;  /* Evita espacio extra debajo de las imágenes */
}

strong, b {
    font-weight: 600; /* Peso consistente para textos en negrita */
}

hr {
    margin: var(--spacing-lg) 0; /* Espaciado estándar para líneas horizontales */
    border: 0;
    border-top: 1px solid var(--border-color); /* Estilo sutil */
}

/* Estilos para listas */
ul, ol {
    padding-left: 1.5rem; /* Evita listas pegadas al borde */
}

/* Estilos base para encabezados */
h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--dark-color);
}

h1 { font-size: 2.25rem; }
h2 { font-size: 1.8rem; }
h3 { font-size: 1.4rem; }
h4 { font-size: 1.2rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; }

/* Elementos blockquote con estilo consistente */
blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    border-left: 5px solid var(--border-color);
    font-style: italic;
}

/* Estilos para elementos code/pre */
code, pre {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.9em;
}

code {
    padding: 0.2em 0.4em;
    background-color: rgba(0,0,0,0.05);
    border-radius: var(--border-radius-sm);
}

pre {
    padding: var(--spacing-md);
    margin-bottom: 1rem;
    overflow: auto;
    background-color: #f8f9fa;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color);
}

pre code {
    padding: 0;
    background-color: transparent;
}

/* === Contenedores de Pantalla Base === */
/* Define cómo se muestran/ocultan las pantallas principales (login, registro, app) */
.screen {
    display: none;          /* Ocultos por defecto */
    min-height: 100vh;      /* Ocupa al menos toda la altura de la ventana */
    padding: var(--spacing-md); /* Padding base para pantallas como login/registro */
    animation: fadeIn 0.5s ease-in-out; /* Aplica animación al aparecer */
    position: relative;     /* Base para posicionamiento absoluto de hijos */
}

.screen.active {
    display: block;         /* Muestra la pantalla que tenga la clase 'active' */
}

/* === Clases/IDs Base para Contenedor Principal === */
/* Estilos para el contenedor que envuelve la app logueada */
.app-container-hidden {
    display: none !important; /* Asegura que esté oculto cuando no se usa */
}

/* === Status Tags (Etiquetas de Estado) === */
/* Estilo básico y variantes para etiquetas de estado (pendiente, completado, error, etc.) */
.status-tag {
    display: inline-block;
    padding: 0.25em 0.6em;
    font-size: 0.75em;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 10rem;
    text-transform: capitalize;
}

/* Variantes de colores para etiquetas de estado */
.status-pending {
    background-color: var(--status-pending-bg);
    color: var(--status-pending-color);
}

.status-paid, .status-available, .status-success {
    background-color: var(--status-success-bg);
    color: var(--status-success-color);
}

.status-cancelled, .status-danger {
    background-color: var(--status-danger-bg);
    color: var(--status-danger-color);
}

.status-assigned, .status-delivering, .status-busy {
    background-color: var(--status-assigned-bg);
    color: var(--status-assigned-color);
}

.status-unknown, .status-info {
    background-color: var(--status-info-bg);
    color: var(--status-info-color);
}

/* === Animaciones Base === */
@keyframes fadeIn {
    from { opacity: 0; } /* Empieza transparente */
    to { opacity: 1; }   /* Termina opaco */
}

@keyframes slideInUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* === Clases de Texto Utilitarias === */
.highlight {
    color: var(--primary-color);
    font-weight: bold;
}

.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-left { text-align: left !important; }

.text-danger { color: var(--danger-color) !important; }
.text-warning { color: var(--warning-color) !important; }
.text-success { color: var(--success-color) !important; }
.text-info { color: var(--info-color) !important; }
.text-primary { color: var(--primary-color) !important; }
.text-muted { color: var(--text-muted) !important; }

.bg-danger { background-color: var(--status-danger-bg) !important; }
.bg-warning { background-color: var(--status-pending-bg) !important; }
.bg-success { background-color: var(--status-success-bg) !important; }
.bg-info { background-color: var(--status-info-bg) !important; }
.bg-light { background-color: var(--light-color) !important; }

.font-weight-bold { font-weight: bold !important; }
.font-italic { font-style: italic !important; }

.green { color: var(--success-color) !important; }
.red { color: var(--danger-color) !important; }
.blue { color: var(--primary-color) !important; }
.orange { color: #fd7e14 !important; }

/* === Espaciado Utilidades === */
.m-0 { margin: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

.p-0 { padding: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 1rem !important; }

/* === Mensajes Globales === */
.status-message {
    margin-top: var(--spacing-sm);
    font-size: 0.9em;
    padding: 8px 12px;
    border-radius: var(--border-radius-sm);
    display: inline-block;
    border: 1px solid transparent;
    animation: fadeIn 0.3s ease-in-out;
}

.status-message.success {
    color: var(--status-success-color);
    background-color: var(--status-success-bg);
    border-color: #c3e6cb;
}

.status-message.error,
.error-message { /* Unifica estilo base de error */
    color: var(--status-danger-color);
    background-color: var(--status-danger-bg);
    border-color: #f5c6cb;
    margin-top: 10px;
    font-size: 0.9em;
    font-weight: 600;
    text-align: left;
    padding: 8px 12px;
    border-radius: var(--border-radius-sm);
    display: block;
    min-height: 1.2em;
    animation: fadeIn 0.3s ease-in-out;
}

.error-message:empty {
    margin-top: 0;
    padding: 0;
    border: none;
    background: none;
    min-height: 0;
}

.status-message.info {
    color: var(--status-info-color);
    background-color: var(--status-info-bg);
    border-color: #bee5eb;
}

.status-message.warning {
    color: var(--status-pending-color);
    background-color: var(--status-pending-bg);
    border-color: #ffeeba;
}

.status-message i {
    margin-right: 5px;
}

.success-message {
    color: var(--status-success-color);
    margin-top: 15px;
    font-size: 0.9em;
    font-weight: 600;
}

/* === Toast Notifications === */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: var(--z-index-toast);
    max-width: 350px;
}

.toast {
    background-color: white;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow-lg);
    overflow: hidden;
    margin-bottom: 10px;
    animation: slideInUp 0.3s ease-in-out;
    border-left: 4px solid var(--primary-color);
}

.toast.success { border-left-color: var(--success-color); }
.toast.error { border-left-color: var(--danger-color); }
.toast.warning { border-left-color: var(--warning-color); }
.toast.info { border-left-color: var(--info-color); }

.toast-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background-color: rgba(0,0,0,0.03);
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.toast-body {
    padding: 10px 12px;
}

.toast-close {
    cursor: pointer;
    background: none;
    border: none;
    font-size: 1.2rem;
    color: var(--text-muted);
}

/* === Placeholder de Carga === */
.loading-placeholder {
    text-align: center;
    padding: var(--spacing-lg);
    color: var(--text-muted);
    font-size: 1.1em;
}

.loading-placeholder i {
    margin-right: 8px;
}

.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255,255,255,0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

.spinner {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    border: 0.25em solid rgba(0,0,0,0.1);
    border-right-color: var(--primary-color);
    border-radius: 50%;
    animation: spinner 0.75s linear infinite;
}

@keyframes spinner {
    to { transform: rotate(360deg); }
}

/* === Visibilidad Responsiva === */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-inline-block { display: inline-block !important; }

/* === Flexbox Utilities === */
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.justify-content-start { justify-content: flex-start !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.align-items-center { align-items: center !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.flex-wrap { flex-wrap: wrap !important; }
.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }

/* === Responsividad Base === */
@media (max-width: 992px) { /* PC pequeño / Tablet grande */
    :root {
        --spacing-lg: 18px;
        --spacing-xl: 25px;
    }
    
    h1 { font-size: 2rem; }
    h2 { font-size: 1.6rem; }
    h3 { font-size: 1.3rem; }
}

@media (max-width: 768px) { /* Tablet */
    :root {
        --font-size-base: 15px;
        --spacing-lg: 15px;
        --spacing-xl: 20px;
    }
    
    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.2rem; }

    .status-message, .error-message {
        font-size: 0.85em;
        padding: 6px 10px;
    }
    
    /* Ocultar en tablet */
    .d-md-none { display: none !important; }
    /* Mostrar en tablet */
    .d-md-block { display: block !important; }
    .d-md-flex { display: flex !important; }
}

@media (max-width: 576px) { /* Móvil */
    :root {
        --font-size-base: 14px;
        --spacing-md: 12px;
        --spacing-lg: 15px;
    }
    
    h1 { font-size: 1.6rem; }
    h2 { font-size: 1.4rem; }
    h3 { font-size: 1.1rem; }
    
    .screen {
        padding: 10px;
    }
    
    /* Ocultar en móvil */
    .d-sm-none { display: none !important; }
    /* Mostrar en móvil */
    .d-sm-block { display: block !important; }
    .d-sm-flex { display: flex !important; }
    
    /* Toast en pantalla pequeña */
    .toast-container {
        left: 20px;
        right: 20px;
        max-width: none;
    }
}