/* =============================================================================
   claymorphism.css
   Diseño Claymorphism para el Sistema de Gestión de Eventos.
   - Mobile First, WCAG (contraste AA en textos principales)
   - Tarjetas con sombras suaves y bordes redondeados
   - Animaciones sutiles (transiciones de 150-250ms)
   ============================================================================= */

:root {
    --clay-bg: #eef1f8;
    --clay-primary: #6c63ff;
    --clay-primary-dark: #5a52e0;
    --clay-success: #2ecc71;
    --clay-warning: #f5c518;
    --clay-danger: #ff6b6b;
    --clay-text: #2d2f45;
    --clay-shadow-light: #ffffff;
    --clay-shadow-dark: rgba(163, 177, 198, 0.6);
    --clay-radius: 1.1rem;
}

body {
    background: var(--clay-bg);
    color: var(--clay-text);
    font-family: 'Segoe UI', Roboto, -apple-system, sans-serif;
}

/* ---------- Navbar ---------- */
.navbar-clay {
    background: var(--clay-bg);
    box-shadow: 8px 8px 16px var(--clay-shadow-dark), -8px -8px 16px var(--clay-shadow-light);
    border-radius: 0 0 var(--clay-radius) var(--clay-radius);
    padding: 0.85rem 1.25rem;
}
.navbar-clay .nav-link {
    color: var(--clay-text);
    font-weight: 500;
    border-radius: 0.75rem;
    padding: 0.5rem 0.9rem;
    transition: all 0.2s ease;
}
.navbar-clay .nav-link:hover,
.navbar-clay .nav-link.active {
    background: var(--clay-primary);
    color: #fff;
}

/* ---------- Tarjetas Clay ---------- */
.card-clay {
    background: var(--clay-bg);
    border: none;
    border-radius: var(--clay-radius);
    box-shadow: 8px 8px 16px var(--clay-shadow-dark), -8px -8px 16px var(--clay-shadow-light);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-clay:hover {
    transform: translateY(-2px);
}

/* ---------- Botones Clay ---------- */
.btn-clay {
    background: var(--clay-bg);
    border: none;
    border-radius: 0.9rem;
    box-shadow: 5px 5px 10px var(--clay-shadow-dark), -5px -5px 10px var(--clay-shadow-light);
    color: var(--clay-text);
    transition: all 0.15s ease;
}
.btn-clay:hover {
    box-shadow: inset 3px 3px 6px var(--clay-shadow-dark), inset -3px -3px 6px var(--clay-shadow-light);
}
.btn-clay-primary {
    background: var(--clay-primary);
    color: #fff;
}
.btn-clay-primary:hover {
    background: var(--clay-primary-dark);
    color: #fff;
}

/* ---------- Inputs Clay ---------- */
.form-control, .form-select {
    border-radius: 0.75rem;
    border: 1px solid #dfe3ee;
    box-shadow: inset 2px 2px 5px rgba(163,177,198,0.3);
}
.form-control:focus, .form-select:focus {
    border-color: var(--clay-primary);
    box-shadow: 0 0 0 0.2rem rgba(108,99,255,0.25);
}

/* ---------- Tabla ---------- */
.table-clay thead {
    background: var(--clay-primary);
    color: #fff;
}
.table-clay tbody tr {
    transition: background 0.15s ease;
}
.table-clay tbody tr:hover {
    background: rgba(108,99,255,0.08);
}

/* ---------- Indicadores de prioridad (Pendientes de Discurso) ---------- */
.badge-prioridad-verde    { background: #2ecc71; }
.badge-prioridad-amarillo { background: #f5c518; color: #2d2f45; }
.badge-prioridad-naranja  { background: #f39c12; }
.badge-prioridad-rojo     { background: #ff6b6b; }

/* ---------- Footer ---------- */
.footer-clay {
    color: #7c81a0;
}

/* ---------- Utilidades ---------- */
.loader-overlay {
    position: fixed;
    inset: 0;
    background: rgba(238,241,248,0.75);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}
.loader-overlay.activo { display: flex; }

@media (max-width: 576px) {
    .navbar-clay { border-radius: 0; }
}