/* =====================================================
   Fundación Core — Design System (Tokens)
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
    /* ── Brand Colors (INTER Lazos) ── */
    --fc-brand-primary: #0076FF;        /* Azul INTER */
    --fc-brand-primary-hover: #0060d1;
    --fc-brand-primary-light: rgba(0, 118, 255, 0.1);
    
    /* ── Categorias de Apoyo (Causas) ── */
    --inter-cat-educacion: #3EB4E4; 
    --inter-cat-educacion-bg: rgba(62, 180, 228, 0.1);
    --inter-cat-salud: #2F358F;
    --inter-cat-salud-bg: rgba(47, 53, 143, 0.1);
    --inter-cat-ambiente: #2E5ED5;
    --inter-cat-ambiente-bg: rgba(46, 94, 213, 0.1);
    --inter-cat-desastres: #6094EB;
    --inter-cat-desastres-bg: rgba(96, 148, 235, 0.1);

    /* ── Slate Grayscale ── */
    --fc-slate-50: #f8fafc;
    --fc-slate-100: #f1f5f9;
    --fc-slate-200: #e2e8f0;
    --fc-slate-300: #cbd5e1;
    --fc-slate-400: #94a3b8;
    --fc-slate-500: #64748b;
    --fc-slate-600: #475569;
    --fc-slate-700: #334155;
    --fc-slate-800: #1e293b;
    --fc-slate-900: #0f172a;

    /* ── Semantic Colors ── */
    --fc-error-bg: #fef2f2;
    --fc-error-border: #fecaca;
    --fc-error-text: #dc2626;
    
    --fc-success-bg: #f0fdf4;
    --fc-success-border: #bbf7d0;
    --fc-success-text: #16a34a;

    /* ── Typography ── */
    --fc-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* ── Border Radius ── */
    --fc-radius-sm: 4px;
    --fc-radius-md: 8px;
    --fc-radius-lg: 10px;
    --fc-radius-xl: 14px;
    --fc-radius-2xl: 16px;
    --fc-radius-full: 50px;

    /* ── Shadows ── */
    --fc-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --fc-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.05);
    --fc-shadow-card: 0 1px 4px rgba(0,0,0,0.04);
    --fc-shadow-card-hover: 0 6px 20px rgba(0,0,0,0.08);
}

/* ── Clases Globales Base ── */
.fc-base {
    font-family: var(--fc-font-family);
    color: var(--fc-slate-900);
    -webkit-font-smoothing: antialiased;
}

/* Botones genéricos */
.fc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 10px 22px;
    border-radius: var(--fc-radius-full);
    font-family: var(--fc-font-family);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
}
.fc-btn:hover {
    text-decoration: none !important;
}

.fc-btn--primary {
    background: var(--fc-brand-primary);
    color: #ffffff;
}
.fc-btn--primary:hover {
    background: var(--fc-brand-primary-hover);
}

/* Secondary Button using a cause color or slate */
.fc-btn--secondary {
    background: var(--fc-slate-800);
    color: #ffffff;
}
.fc-btn--secondary:hover {
    background: var(--fc-slate-900);
}

.fc-btn--outline {
    background: transparent;
    color: var(--fc-slate-800);
    border: 1px solid var(--fc-slate-200);
}
.fc-btn--outline:hover {
    background: var(--fc-slate-50);
    border-color: var(--fc-slate-300);
}

/* ── Voluntariado Listado (Tailwind Translated) ── */
.fc-hero-section {
    display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 3rem;
}
@media (min-width: 768px) {
    .fc-hero-section { flex-direction: row; justify-content: space-between; align-items: flex-end; }
}
.fc-breadcrumb {
    display: flex; align-items: center; gap: 0.5rem; color: var(--fc-slate-500); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem;
}
.fc-hero-title {
    font-size: 2rem; font-weight: 700; color: var(--fc-brand-primary); line-height: 1.2; letter-spacing: -0.01em; margin: 0;
}
.fc-hero-desc {
    color: var(--fc-slate-600); font-size: 1rem; margin-top: 0.5rem; max-width: 36rem;
}

.fc-filters-bar {
    display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 2.5rem;
    background: #fff; padding: 1rem; border-radius: var(--fc-radius-xl);
    box-shadow: var(--fc-shadow-card); border: 1px solid var(--fc-slate-200);
}
@media (min-width: 1024px) {
    .fc-filters-bar { grid-template-columns: 5fr 2fr 2fr 2fr 1fr; }
}
.fc-filters-bar input[type="text"].fc-filter-input,
.fc-filters-bar input[type="date"].fc-filter-input,
.fc-filters-bar select.fc-filter-select {
    width: 100%;
    padding: 0.75rem 1rem !important;
    border: 1px solid transparent !important;
    border-radius: var(--fc-radius-lg) !important;
    background: var(--fc-slate-50) !important;
    font-family: var(--fc-font-family);
    font-size: 1rem;
    color: var(--fc-slate-800) !important;
    box-sizing: border-box;
    box-shadow: none !important;
    margin: 0 !important;
    height: auto !important;
}
.fc-filters-bar .fc-search-input {
    padding-left: 42px !important;
}
.fc-filters-bar input[type="text"].fc-filter-input:focus,
.fc-filters-bar input[type="date"].fc-filter-input:focus,
.fc-filters-bar select.fc-filter-select:focus {
    outline: none !important;
    border-color: var(--fc-brand-primary-light) !important;
    box-shadow: 0 0 0 3px rgba(0, 144, 227, 0.15) !important;
    background: #fff !important;
}
.fc-filter-btn {
    width: 100%; padding: 0.75rem; background: var(--fc-slate-100); color: var(--fc-brand-primary);
    border: none !important; border-radius: var(--fc-radius-lg); cursor: pointer; transition: 0.2s;
    display: flex; align-items: center; justify-content: center; height: 100%;
}
.fc-filter-btn:hover { background: var(--fc-slate-200); }

.fc-event-grid {
    display: grid; grid-template-columns: 1fr; gap: 1.5rem;
}
@media (min-width: 768px) { .fc-event-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .fc-event-grid { grid-template-columns: repeat(3, 1fr); } }

.fc-event-card {
    background: #fff; border-radius: var(--fc-radius-2xl); overflow: hidden;
    box-shadow: var(--fc-shadow-card); border: 1px solid var(--fc-slate-200);
    transition: all 0.3s ease; display: flex; flex-direction: column; height: 100%;
}
.fc-event-card:hover {
    border-color: rgba(0,144,227,0.5); transform: translateY(-2px); box-shadow: var(--fc-shadow-card-hover);
}
.fc-event-card--closed { filter: grayscale(1); opacity: 0.75; }
.fc-event-card--progress { opacity: 0.9; }

.fc-event-card__img-wrap { position: relative; height: 12rem; overflow: hidden; }
.fc-event-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.fc-event-card:hover .fc-event-card__img { transform: scale(1.05); }

.fc-event-card__badge {
    position: absolute; top: 1rem; right: 1rem; padding: 0.25rem 0.75rem;
    color: #fff; border-radius: var(--fc-radius-full); font-size: 0.75rem; font-weight: 600;
    backdrop-filter: blur(8px);
}
.fc-event-card__badge--open { background: rgba(0, 118, 255, 0.9); }
.fc-event-card__badge--progress { background: #eab308; }
.fc-event-card__badge--closed { background: var(--fc-slate-500); }

/* Causas Badges / Icons */
.fc-causa-icon--educacion { color: var(--inter-cat-educacion); }
.fc-causa-icon--salud { color: var(--inter-cat-salud); }
.fc-causa-icon--ambiente { color: var(--inter-cat-ambiente); }
.fc-causa-icon--desastres { color: var(--inter-cat-desastres); }
.fc-causa-icon--general { color: var(--fc-brand-primary); }

.fc-event-card__body { padding: 1.5rem; display: flex; flex-direction: column; flex-grow: 1; }
.fc-event-card__type { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; margin-bottom: 0.5rem; }
.fc-event-card__title { font-size: 1.25rem; font-weight: 600; color: var(--fc-slate-900); margin: 0 0 0.75rem 0; line-height: 1.3; }
.fc-event-card__title a { color: inherit; text-decoration: none; }
.fc-event-card__date { display: flex; align-items: center; gap: 0.5rem; color: var(--fc-slate-500); font-size: 0.875rem; margin-bottom: 1.5rem; }
.fc-event-card__footer { margin-top: auto; }

.fc-event-card__meta-row { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 0.5rem; }
.fc-event-card__meta-label { font-size: 0.75rem; font-weight: 600; color: var(--fc-slate-500); }
.fc-event-card__meta-value { font-size: 0.875rem; font-weight: 600; color: var(--fc-brand-primary); }
.fc-event-card__progress-wrap { width: 100%; background: var(--fc-slate-100); border-radius: var(--fc-radius-full); height: 0.5rem; margin-bottom: 1.5rem; overflow: hidden; }
.fc-event-card__progress-bar { height: 100%; border-radius: var(--fc-radius-full); transition: width 0.3s ease; }
.fc-event-card__progress-bar--open { background: var(--fc-brand-primary); box-shadow: 0 0 10px rgba(0,118,255,0.3); }
.fc-event-card__progress-bar--progress { background: #eab308; box-shadow: 0 0 10px rgba(234,179,8,0.3); }
.fc-event-card__progress-bar--closed { background: var(--fc-slate-400); }

.fc-event-card__btn { width: 100%; padding: 0.75rem; border-radius: var(--fc-radius-xl); font-size: 0.875rem; font-weight: 600; text-align: center; display: block; text-decoration: none; transition: all 0.2s; border: 1px solid var(--fc-brand-primary); color: var(--fc-brand-primary); box-sizing: border-box; }
.fc-event-card__btn:hover { background: var(--fc-brand-primary); color: #fff; }
.fc-event-card__btn--closed { background: var(--fc-slate-100); border-color: var(--fc-slate-200); color: var(--fc-slate-500); cursor: not-allowed; pointer-events: none; }
.fc-event-card__btn--closed:hover { background: var(--fc-slate-100); color: var(--fc-slate-500); }