/* Variables de colores corporativos */
:root {
    --la-araucana-primary: #003B71;
    --la-araucana-primary-light: #1A5A8C;
    --la-araucana-primary-dark: #002347;
    --la-araucana-secondary: #F7941D;
    --la-araucana-success: #00A651;
    --la-araucana-background: #F5F5F5;
}

/* Reset y estilos base */
html, body {
    font-family: 'Roboto', 'Helvetica Neue', sans-serif;
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden;
}

#app {
    min-height: 100vh;
}

/* Evitar scroll innecesario */
.mud-main-content {
    overflow-y: auto;
    overflow-x: hidden;
}

/* Estilos para el drawer */
.mud-drawer {
    background-color: var(--la-araucana-primary) !important;
}

.mud-nav-link {
    color: rgba(255, 255, 255, 0.8) !important;
}

.mud-nav-link:hover,
.mud-nav-link.active {
    color: white !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Estilos para las tablas */
.mud-table-cell {
    padding: 8px 16px !important;
}

.mud-table-head .mud-table-cell {
    font-weight: 600;
    background-color: var(--la-araucana-primary) !important;
    color: white !important;
}

/* Estilos para los botones */
.mud-button-root.mud-button-filled.mud-button-filled-primary {
    background-color: var(--la-araucana-primary) !important;
}

.mud-button-root.mud-button-filled.mud-button-filled-primary:hover {
    background-color: var(--la-araucana-primary-dark) !important;
}

/* Estilos para las cards de dashboard */
.dashboard-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dashboard-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 59, 113, 0.15);
}

/* Estilos para los campos de formulario */
.mud-input-outlined .mud-input-outlined-border {
    border-color: #CCCCCC;
}

.mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--la-araucana-primary);
}

.mud-input-outlined.mud-input-focused .mud-input-outlined-border {
    border-color: var(--la-araucana-primary) !important;
    border-width: 2px;
}

/* Estilos para los chips */
.mud-chip-filled.mud-chip-color-primary {
    background-color: var(--la-araucana-primary) !important;
}

.mud-chip-filled.mud-chip-color-secondary {
    background-color: var(--la-araucana-secondary) !important;
}

/* Estilos para alertas */
.mud-alert-filled.mud-alert-severity-success {
    background-color: var(--la-araucana-success) !important;
}

/* Animación de carga */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-spinner circle {
    animation: dash 1.5s ease-in-out infinite;
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}

/* Responsivo */
@media (max-width: 600px) {
    .mud-main-content {
        padding: 8px !important;
    }
    
    .mud-dialog {
        margin: 8px !important;
    }
    
    .mud-table-cell {
        padding: 4px 8px !important;
        font-size: 0.85rem;
    }
}

/* Estilos para impresión */
@media print {
    .mud-drawer,
    .mud-appbar,
    .no-print {
        display: none !important;
    }
    
    .mud-main-content {
        padding: 0 !important;
        margin: 0 !important;
    }
}

/* Estilos para el footer */
footer, .footer {
    background-color: var(--la-araucana-background);
    border-top: 1px solid #E0E0E0;
}

/* Estilos para el escáner QR */
#qr-reader {
    border-radius: 8px;
    overflow: hidden;
}

#qr-reader video {
    border-radius: 8px;
}

#qr-reader__dashboard_section_csr button {
    background-color: var(--la-araucana-primary) !important;
    color: white !important;
    border: none !important;
    padding: 10px 20px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
}

/* Scrollbar personalizado */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--la-araucana-primary);
}

/* Estilos para validación de formularios */
.mud-input-error .mud-input-outlined-border {
    border-color: #D32F2F !important;
}

.mud-input-helper-text.mud-input-error {
    color: #D32F2F !important;
}

/* Transiciones suaves */
* {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}