/* Minimalist shared input styling */
.field-modern,
.form-control,
.form-select {
    background: linear-gradient(180deg,#f9fafb 0%,#f1f5f9 100%);
    border: 1.5px solid #d5dce5 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 1px 2px rgba(0,0,0,0.04);
    transition: background .25s, border-color .25s, box-shadow .25s;
    border-radius:.75rem; /* rounded-xl */
    color:#0f172a;
}
.field-modern:focus,
.form-control:focus,
.form-select:focus {
    background: #ffffff;
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.15), 0 1px 2px rgba(0,0,0,0.06);
    outline:none;
}
.field-modern::placeholder,
.form-control::placeholder { color:#94a3b8; opacity:.9; }
textarea.field-modern { resize:none; }
.field-modern-disabled { opacity:.6; cursor:not-allowed; }
/* Compact variant */
.field-modern.sm { padding:.5rem .85rem; font-size:.78rem; }

/* Status Pills - Premium "Glass" Style */
.status-pill {
    padding: 5px 12px;
    border-radius: 8px; /* Modern soft square */
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Remove the dot */
.status-pill::before {
    display: none;
}

/* Pendiente: Minimalist Slate */
.status-pendiente { 
    background: rgba(241, 245, 249, 0.8); 
    color: #64748b; 
    border-color: rgba(226, 232, 240, 0.8); 
}

/* En Progreso: Premium Indigo */
.status-en_progreso { 
    background: rgba(99, 102, 241, 0.1); 
    color: #4f46e5; 
    border-color: rgba(99, 102, 241, 0.2);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1);
}

/* Finalizada: Premium Emerald */
.status-finalizada,
.status-enviado { 
    background: rgba(16, 185, 129, 0.1); 
    color: #059669; 
    border-color: rgba(16, 185, 129, 0.2);
}

/* Error: Premium Rose */
.status-error { 
    background: rgba(244, 63, 94, 0.1); 
    color: #e11d48; 
    border-color: rgba(244, 63, 94, 0.2);
}

/* Detenida: Premium Amber */
.status-detenida,
.status-cancelada { 
    background: rgba(245, 158, 11, 0.1); 
    color: #d97706; 
    border-color: rgba(245, 158, 11, 0.2);
}

/* Admin & Roles */
.status-active { 
    background: rgba(34, 197, 94, 0.1); 
    color: #15803d; 
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 0.65rem;
    font-weight: 700;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

@keyframes pulse-dot {
    0% { opacity: 0.4; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.1); }
    100% { opacity: 0.4; transform: scale(0.9); }
}

/* =========================================
   EFECTOS VISUALES (SPA FEEL - SAFE MODE)
   ========================================= */

/* 1. View Transitions API (Nativo en Chrome/Edge recientes) 
   Permite transiciones suaves entre cargas de página reales sin romper JS */
@view-transition {
  navigation: auto;
}

/* Anclaje de elementos para que no parpadeen al navegar (Persistencia visual) */
aside {
    view-transition-name: sidebar;
}

main {
    view-transition-name: main-content;
}

/* 2. Animación de entrada estándar (Fallback para todos los navegadores)
   Hace que cada página aparezca suavemente al cargar */
@keyframes pageEntry {
    0% { 
        opacity: 0; 
        transform: translateY(8px) scale(0.99); 
    }
    100% { 
        opacity: 1; 
        transform: translateY(0) scale(1); 
    }
}

body {
    animation: pageEntry 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.status-inactive { 
    background: #fef2f2; 
    color: #b91c1c; 
    border-radius: 9999px;
    padding: 4px 12px;
    font-size: 0.7rem;
    font-weight: 700;
    border: 1px solid #fecaca;
}
.role-admin { 
    background: #eef2ff; 
    color: #4338ca; 
    border-radius: 9999px;
    padding: 4px 12px;
    font-size: 0.7rem;
    font-weight: 700;
    border: 1px solid #c7d2fe;
}
.role-user { 
    background: #f8fafc; 
    color: #475569; 
    border-radius: 9999px;
    padding: 4px 12px;
    font-size: 0.7rem;
    font-weight: 700;
    border: 1px solid #e2e8f0;
}

/* Confetti Animation */
@keyframes confettiFall { 
    0% { transform: translateY(-10vh) rotate(0deg); opacity:0;} 
    10% {opacity:1;} 
    100% { transform: translateY(100vh) rotate(540deg); opacity:0;} 
}
.confetti-piece { 
    position: fixed; 
    top:0; 
    left:0; 
    width:10px; 
    height:10px; 
    pointer-events:none; 
    z-index:9999; 
    border-radius:2px; 
}

/* Aurora Glow Effect for Modal - Visible & Clean */
@keyframes aurora-clean-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0), 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
        border-color: rgba(226, 232, 240, 1);
    }
    50% {
        /* Soft Indigo Aura */
        box-shadow: 0 0 0 6px rgba(99, 102, 241, 0.15), 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
        border-color: rgba(99, 102, 241, 0.5);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0), 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
        border-color: rgba(226, 232, 240, 1);
    }
}

.aurora-glow {
    animation: aurora-clean-pulse 2s infinite ease-in-out;
    transition: all 0.3s ease;
}