/**
 * AFADIR Admin Screens CSS
 * Estilos para screens de administración: solicitudes, bajas, eventos
 * @version 2.2.275
 */

/* ============================================================
 * Layout Base de Screens
 * ============================================================ */

.afadir-screen {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
}

.afadir-screen-header {
    margin-bottom: 2rem;
}

.afadir-screen-header h1 {
    font-size: 2rem;
    font-weight: 600;
    color: #1e1e1e;
    margin: 0 0 0.5rem 0;
}

.afadir-subtitle {
    font-size: 1rem;
    color: #666;
    margin: 0;
}

.afadir-screen-actions {
    margin-top: 1rem;
}

.afadir-screen-content {
    background: #fff;
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* ============================================================
 * Estados Vacíos y Errores
 * ============================================================ */

.afadir-empty-state,
.afadir-error-state {
    text-align: center;
    padding: 3rem 2rem;
}

.afadir-empty-state .dashicons,
.afadir-error-state .dashicons {
    font-size: 4rem;
    width: 4rem;
    height: 4rem;
    color: #999;
    margin-bottom: 1rem;
}

.afadir-error-state .dashicons {
    color: #d63638;
}

.afadir-empty-state h3,
.afadir-error-state h3 {
    font-size: 1.5rem;
    color: #1e1e1e;
    margin-bottom: 0.5rem;
}

.afadir-empty-state p,
.afadir-error-state p {
    color: #666;
    font-size: 1rem;
}

/* ============================================================
 * Cards de Solicitudes
 * ============================================================ */

.afadir-solicitudes-list,
.afadir-bajas-list {
    display: grid;
    gap: 1.5rem;
}

.afadir-solicitud-card,
.afadir-baja-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.afadir-solicitud-card:hover,
.afadir-baja-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border-color: #2271b1;
}

.afadir-solicitud-header,
.afadir-baja-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    gap: 1rem;
}

.afadir-solicitud-info h3,
.afadir-baja-info h3 {
    font-size: 1.25rem;
    margin: 0 0 0.5rem 0;
    color: #1e1e1e;
}

.afadir-solicitud-info p,
.afadir-baja-info p {
    margin: 0.25rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.afadir-solicitud-meta,
.afadir-baja-meta {
    text-align: right;
    flex-shrink: 0;
}

.afadir-date {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #666;
    margin-top: 0.5rem;
}

.afadir-baja-warning {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 4px;
    padding: 1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.afadir-baja-warning .dashicons {
    color: #856404;
    font-size: 1.25rem;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.afadir-baja-warning p {
    margin: 0;
    font-size: 0.875rem;
    color: #856404;
}

.afadir-solicitud-actions,
.afadir-baja-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

/* ============================================================
 * Badges
 * ============================================================ */

.afadir-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.afadir-badge-pending {
    background: #fff3cd;
    color: #856404;
}

.afadir-badge-warning {
    background: #ffc107;
    color: #856404;
}

.afadir-badge-success {
    background: #d4edda;
    color: #155724;
}

.afadir-badge-info {
    background: #d1ecf1;
    color: #0c5460;
}

.afadir-badge-danger {
    background: #f8d7da;
    color: #721c24;
}

.afadir-badge-secondary {
    background: #e2e3e5;
    color: #383d41;
}

/* ============================================================
 * Botones
 * ============================================================ */

.afadir-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.afadir-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.afadir-btn .dashicons {
    font-size: 1rem;
    width: 1rem;
    height: 1rem;
}

.afadir-btn-primary {
    background: #2271b1;
    color: #fff;
}

.afadir-btn-primary:hover:not(:disabled) {
    background: #135e96;
}

.afadir-btn-success {
    background: #28a745;
    color: #fff;
}

.afadir-btn-success:hover:not(:disabled) {
    background: #218838;
}

.afadir-btn-danger {
    background: #d63638;
    color: #fff;
}

.afadir-btn-danger:hover:not(:disabled) {
    background: #b32d2e;
}

.afadir-btn-secondary {
    background: #f0f0f1;
    color: #2c3338;
    border: 1px solid #ddd;
}

.afadir-btn-secondary:hover:not(:disabled) {
    background: #e0e0e1;
}

.afadir-btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
}

/* ============================================================
 * Tabs
 * ============================================================ */

.afadir-tabs {
    width: 100%;
}

.afadir-tabs-nav {
    display: flex;
    border-bottom: 2px solid #ddd;
    margin-bottom: 1.5rem;
}

.afadir-tab-btn {
    background: none;
    border: none;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s ease;
}

.afadir-tab-btn:hover {
    color: #2271b1;
}

.afadir-tab-btn.active {
    color: #2271b1;
    border-bottom-color: #2271b1;
}

.afadir-tab-panel {
    display: none;
}

.afadir-tab-panel.active {
    display: block;
}

/* ============================================================
 * Grid de Eventos
 * ============================================================ */

.afadir-eventos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

.afadir-evento-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.afadir-evento-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border-color: #2271b1;
}

.afadir-evento-card.afadir-evento-past {
    opacity: 0.7;
}

.afadir-evento-type {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.afadir-evento-type .dashicons {
    font-size: 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
    color: #2271b1;
}

.afadir-evento-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1e1e1e;
    margin: 0 0 1rem 0;
    line-height: 1.4;
}

.afadir-evento-details {
    margin-bottom: 1rem;
}

.afadir-evento-date,
.afadir-evento-location {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0.5rem 0;
    font-size: 0.875rem;
    color: #666;
}

.afadir-evento-date .dashicons,
.afadir-evento-location .dashicons {
    font-size: 1rem;
    width: 1rem;
    height: 1rem;
    margin-top: 0.125rem;
    flex-shrink: 0;
}

.afadir-evento-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* ============================================================
 * Utilidades
 * ============================================================ */

.afadir-muted {
    color: #666 !important;
    font-size: 0.875rem;
}

.dashicons-spin {
    animation: afadir-spin 1s linear infinite;
}

@keyframes afadir-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ============================================================
 * Dark Mode
 * ============================================================ */

@media (prefers-color-scheme: dark) {
    .afadir-screen-header h1 {
        color: #e0e0e0;
    }
    
    .afadir-subtitle,
    .afadir-muted {
        color: #999 !important;
    }
    
    .afadir-screen-content {
        background: #2a2a2a;
    }
    
    .afadir-solicitud-card,
    .afadir-baja-card,
    .afadir-evento-card {
        background: #1e1e1e;
        border-color: #444;
    }
    
    .afadir-solicitud-card:hover,
    .afadir-baja-card:hover,
    .afadir-evento-card:hover {
        border-color: #58a6ff;
    }
    
    .afadir-solicitud-info h3,
    .afadir-baja-info h3,
    .afadir-evento-title {
        color: #e0e0e0;
    }
    
    .afadir-date,
    .afadir-evento-date,
    .afadir-evento-location {
        color: #999;
    }
    
    .afadir-btn-secondary {
        background: #2a2a2a;
        color: #e0e0e0;
        border-color: #444;
    }
    
    .afadir-btn-secondary:hover:not(:disabled) {
        background: #3a3a3a;
    }
    
    .afadir-tabs-nav {
        border-bottom-color: #444;
    }
    
    .afadir-tab-btn {
        color: #999;
    }
    
    .afadir-tab-btn:hover,
    .afadir-tab-btn.active {
        color: #58a6ff;
    }
    
    .afadir-tab-btn.active {
        border-bottom-color: #58a6ff;
    }
}

/* ============================================================
 * Responsive
 * ============================================================ */

@media (max-width: 768px) {
    .afadir-screen {
        padding: 1rem;
    }
    
    .afadir-screen-content {
        padding: 1rem;
    }
    
    .afadir-solicitud-header,
    .afadir-baja-header {
        flex-direction: column;
    }
    
    .afadir-solicitud-meta,
    .afadir-baja-meta {
        text-align: left;
        width: 100%;
    }
    
    .afadir-solicitud-actions,
    .afadir-baja-actions {
        flex-direction: column;
    }
    
    .afadir-solicitud-actions .afadir-btn,
    .afadir-baja-actions .afadir-btn {
        width: 100%;
        justify-content: center;
    }
    
    .afadir-eventos-grid {
        grid-template-columns: 1fr;
    }
}