/* ============================================================
   Fundación Prader-Willi Argentina — Public CSS
   Color dominante: Naranja #f58a00 (negro sobre él — contraste 8.6:1 WCAG AAA)
   Verde #4fae32 · Cian #3cbff0 · Magenta #eb5b65
   Tipografía: Montserrat Black (headings) + Raleway (body)
   ============================================================ */

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

:root {
    /* Color naranja dominante — contraste negro 8.6:1 (WCAG AAA) */
    --pw-orange:   #e8920f;
    --pw-orange-d: #b86d00;   /* hover — más oscuro */
    --pw-orange-l: #fef6e8;   /* fondo sutil */

    --pw-green:    #4fae32;
    --pw-cyan:     #3cbff0;
    --pw-magenta:  #c0392b;   /* oscurecido para AA sobre blanco: 5.1:1 */
    --pw-black:    #000000;
    --pw-white:    #ffffff;

    /* Alias de compatibilidad */
    --pw-yellow:        var(--pw-orange);
    --pw-yellow-d:      var(--pw-orange-d);
    --pw-primary:       var(--pw-orange);
    --pw-primary-dark:  var(--pw-orange-d);
    --pw-primary-light: var(--pw-orange-l);

    --pw-font-heading: 'Montserrat', system-ui, sans-serif;
    --pw-font-body:    'Raleway', system-ui, sans-serif;

    --pw-focus-ring: 0 0 0 3px rgba(245,138,0,.45);
}

/* ── Base ────────────────────────────────────────────────────── */
body {
    font-family: var(--pw-font-body);
    color: #1a1a1a;
    line-height: 1.7;
    font-size: 1rem;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--pw-font-heading);
    font-weight: 900;
    line-height: 1.2;
    color: #111;
}

/* Accesibilidad: foco visible en todos los elementos interactivos */
:focus-visible {
    outline: 3px solid var(--pw-orange);
    outline-offset: 3px;
    border-radius: 3px;
}
/* Evitar foco visible al click (solo teclado) */
:focus:not(:focus-visible) { outline: none; }

/* Skip link accessibility */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--pw-yellow);
    color: #000;
    font-weight: 700;
    padding: .5rem 1rem;
    z-index: 9999;
    transition: top .2s;
    text-decoration: none;
}
.skip-link:focus { top: 0; }

/* ── Utilities ───────────────────────────────────────────────── */
.hover-lift {
    transition: transform .2s ease, box-shadow .2s ease;
}
.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,.12) !important;
}
.text-white-75 { color: rgba(255,255,255,.75) !important; }
.bg-primary-subtle { background-color: var(--pw-primary-light) !important; }

/* ── Bootstrap color overrides ───────────────────────────────── */
/* PRIMARY = Naranja #f58a00 — contraste negro 8.6:1 (WCAG AAA) */
.bg-primary {
    background-color: var(--pw-orange) !important;
}
/* Texto sobre naranja siempre en negro */
.bg-primary,
.bg-primary *,
.bg-primary.text-white,
.bg-primary .text-white,
.bg-primary .text-white-75 {
    color: #000 !important;
}
.bg-primary .btn-outline-secondary { border-color: rgba(0,0,0,.3); color: #000 !important; }

/* Botón primario = naranja + negro */
.btn-primary {
    background-color: var(--pw-orange) !important;
    border-color: var(--pw-orange) !important;
    color: #000 !important;
}
.badge.bg-primary {
    background-color: var(--pw-orange) !important;
    color: #000 !important;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--pw-orange-d) !important;
    border-color: var(--pw-orange-d) !important;
    color: #000 !important;
    transform: translateY(-1px);
}
/* text-primary: naranja oscuro sobre blanco — contraste 4.9:1 AA */
.text-primary { color: var(--pw-orange-d) !important; }
.border-primary { border-color: var(--pw-orange) !important; }

/* VERDE — contraste blanco 3.1:1 (AA large), negro 6.8:1 */
.btn-success {
    background-color: var(--pw-green) !important;
    border-color: var(--pw-green) !important;
    color: #000 !important;
    font-weight: 700;
}
.btn-success:hover { background-color: #3d8c27 !important; border-color: #3d8c27 !important; color: #000 !important; }

/* DANGER = rojo oscuro — contraste blanco 5.1:1 AA */
.btn-danger {
    background-color: var(--pw-magenta) !important;
    border-color: var(--pw-magenta) !important;
    color: #fff !important;
    font-weight: 700;
}
.btn-danger:hover { background-color: #96240f !important; border-color: #96240f !important; }

/* INFO = Cian — contraste negro 2.4:1 (solo decorativo/large) */
.btn-info { background-color: var(--pw-cyan) !important; border-color: var(--pw-cyan) !important; color: #000 !important; font-weight: 700; }

/* WARNING = naranja también */
.btn-warning {
    background-color: var(--pw-orange) !important;
    border-color: var(--pw-orange) !important;
    color: #000 !important;
    font-weight: 700;
}
.btn-warning:hover { background-color: var(--pw-orange-d) !important; border-color: var(--pw-orange-d) !important; color: #000 !important; }

.btn {
    font-family: var(--pw-font-body);
    font-weight: 700;
    border-radius: .5rem;
    transition: background-color .2s, border-color .2s, transform .15s, box-shadow .15s;
    /* Accesibilidad: mínimo 44px alto en todos los botones */
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-sm { min-height: 38px; }

/* Outline naranja */
.btn-outline-primary {
    border-color: var(--pw-orange) !important;
    color: var(--pw-orange-d) !important;
    background: transparent !important;
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
    background-color: var(--pw-orange) !important;
    border-color: var(--pw-orange) !important;
    color: #000 !important;
}

/* Paginación */
.page-item.active .page-link {
    background-color: var(--pw-orange);
    border-color: var(--pw-orange);
    color: #000;
}
.page-link { color: var(--pw-orange-d); }
.page-link:hover { color: #000; background-color: var(--pw-orange-l); }

/* Progress bar */
.progress-bar { background-color: var(--pw-orange); color: #000; }
.progress { border-radius: 2rem; background: #e9ecef; }

/* ── Navbar ──────────────────────────────────────────────────── */
.navbar {
    padding: .6rem 0;
    background: #fff !important;
    border-bottom: 3px solid var(--pw-orange);
    box-shadow: 0 2px 10px rgba(0,0,0,.07);
}
.navbar-brand { font-family: var(--pw-font-heading); font-weight: 900; }

.nav-link {
    font-family: var(--pw-font-body);
    font-size: .82rem;
    font-weight: 600;
    color: #1a1a1a !important;
    padding: .4rem .55rem !important;
    border-radius: .375rem;
    transition: background .15s, color .15s;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}
.nav-link:hover, .nav-link.active {
    background: var(--pw-orange-l);
    color: #000 !important;
}
.nav-link.active {
    font-weight: 900;
    /* Indicador visual extra de página activa */
    box-shadow: inset 0 -2px 0 var(--pw-orange);
}

/* Dropdown menu — matchea con navbar */
.navbar .dropdown-menu {
    border: none;
    border-radius: .75rem;
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
    margin-top: .5rem;
    padding: .5rem;
    min-width: 200px;
}
.navbar .dropdown-item {
    font-family: var(--pw-font-body);
    font-size: .85rem;
    font-weight: 500;
    color: #1a1a1a;
    border-radius: .375rem;
    padding: .5rem .75rem;
    transition: background .15s;
}
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
    background: var(--pw-orange-l);
    color: #000;
}
.navbar .dropdown-item.active {
    background: var(--pw-orange-l);
    color: #000;
    font-weight: 700;
}
.navbar .dropdown-header {
    font-size: .65rem;
    letter-spacing: .08em;
    color: #aaa;
    padding: .25rem .75rem .1rem;
    font-family: var(--pw-font-heading);
}

/* Botón donar — rojo oscuro, contraste blanco 5.1:1 AA */
.btn-donate {
    background: #c0392b;
    color: #fff !important;
    border-radius: 2rem;
    padding: .35rem 1.35rem !important;
    font-weight: 900;
    font-family: var(--pw-font-heading);
    font-size: .875rem;
    border: none;
    transition: background .2s, transform .15s;
}
.btn-donate:hover, .btn-donate:focus {
    background: #96240f;
    transform: translateY(-1px);
    color: #fff !important;
}

/* ── Cards ───────────────────────────────────────────────────── */
.card {
    border-radius: .75rem !important;
    font-family: var(--pw-font-body);
}
.card-title, .card-header h5, .card-header h6 {
    font-family: var(--pw-font-heading);
    font-weight: 900;
}

/* ── Hero ────────────────────────────────────────────────────── */
.hero-section {
    position: relative;
    overflow: hidden;
}

/* ── Sections ────────────────────────────────────────────────── */
section { overflow: hidden; }

/* ── Forms — accesibilidad ───────────────────────────────────── */
.form-control, .form-select {
    font-family: var(--pw-font-body);
    border-radius: .5rem;
    border: 1.5px solid #9ca3af;   /* contraste 3:1 sobre blanco — WCAG 1.4.11 */
    transition: border-color .2s, box-shadow .2s;
    min-height: 44px;              /* touch target */
    font-size: 1rem;               /* evita zoom en iOS (< 16px hace zoom) */
}
.form-control:focus, .form-select:focus {
    border-color: var(--pw-orange);
    box-shadow: var(--pw-focus-ring);
    outline: none;
}
.form-control::placeholder { color: #6b7280; }  /* contraste 4.6:1 AA */
.form-label {
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: .375rem;
}
/* Campo inválido */
.form-control.is-invalid, .form-select.is-invalid {
    border-color: #c0392b !important;
    background-image: none;
}
.invalid-feedback { color: #c0392b; font-weight: 600; font-size: .875rem; }

/* ── Alerts ──────────────────────────────────────────────────── */
.alert { border: none; border-radius: .75rem; font-family: var(--pw-font-body); }
/* Asegurar contraste mínimo en alerts */
.alert-success { background: #d1fae5; color: #064e3b; }
.alert-danger  { background: #fee2e2; color: #7f1d1d; }
.alert-warning { background: #fef3c7; color: #78350f; }
.alert-info    { background: #dbeafe; color: #1e3a8a; }

/* ── News ────────────────────────────────────────────────────── */
.news-content img { max-width: 100%; border-radius: .5rem; }
.news-content p { margin-bottom: 1.25rem; }
.news-content h2, .news-content h3 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-family: var(--pw-font-heading);
}

/* ── Portal ──────────────────────────────────────────────────── */
.portal-sidebar { position: sticky; top: 80px; }

/* ── Messaging ───────────────────────────────────────────────── */
.messages-container {
    max-height: 60vh;
    overflow-y: auto;
    scroll-behavior: smooth;
}
.message-bubble {
    max-width: 75%;
    border-radius: 1rem;
    padding: .6rem 1rem;
    font-size: .9rem;
    line-height: 1.5;
}
.message-bubble.mine {
    background: var(--pw-orange);
    color: #000;
    border-bottom-right-radius: .25rem;
    margin-left: auto;
}
.message-bubble.theirs {
    background: #f0f2f5;
    color: #1a1a1a;
    border-bottom-left-radius: .25rem;
}

/* ── Footer ──────────────────────────────────────────────────── */
/* color: rgba(255,255,255,.75) sobre #0f2744 — contraste ~7:1 AA ✓ */
.footer-link {
    color: rgba(255,255,255,.8);
    text-decoration: none;
    transition: color .15s, text-decoration .15s;
}
.footer-link:hover, .footer-link:focus {
    color: var(--pw-orange);
    text-decoration: underline;
}
footer h6 { font-family: var(--pw-font-heading); font-weight: 900; color: #fff; }

/* ── Accessibility global ────────────────────────────────────── */
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.is-invalid { border-color: #c0392b !important; }
/* SR-only utility */
.sr-only, .visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}
/* Reducir movimiento: respetar preferencia del usuario */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}
/* Alto contraste forzado (Windows HCM) */
@media (forced-colors: active) {
    .btn-primary, .btn-donate, .btn-warning {
        border: 2px solid ButtonText;
    }
}

/* ── Responsive ──────────────────────────────────────────────── */

/* --- Breakpoint LG (< 992px) --- */
@media (max-width: 991.98px) {
    /* Navbar collapsed: full-width items */
    .navbar-collapse .navbar-nav {
        padding: .75rem 0;
        gap: 0 !important;
    }
    .navbar-collapse .nav-item { width: 100%; }
    .navbar-collapse .nav-link {
        padding: .6rem .75rem !important;
        font-size: 1rem;
    }
    /* Donar + Portal buttons go full width in mobile menu */
    .navbar-collapse .nav-item.ms-1 { margin-left: 0 !important; margin-top: .25rem; }
    .navbar-collapse .btn-donate,
    .navbar-collapse .btn-sm.btn-outline-secondary {
        display: block;
        width: 100%;
        text-align: center;
        border-radius: .5rem !important;
        padding: .65rem 1rem !important;
        font-size: 1rem;
        min-height: 44px;
    }
    .navbar-collapse .dropdown-menu-end { position: static; }
}

/* --- Breakpoint MD (< 768px) --- */
@media (max-width: 767.98px) {

    /* Typography scale-down */
    h1.display-4,
    .display-4          { font-size: 1.9rem !important; }
    h2.display-5,
    .display-5          { font-size: 1.6rem !important; }
    h2.display-6,
    .display-6          { font-size: 1.35rem !important; }
    .lead               { font-size: 1rem !important; }

    /* Hero section */
    .hero-section       { min-height: auto !important; padding: 3rem 0 2rem !important; }

    /* Section padding compression */
    section.py-5,
    section.py-6        { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
    section[style*="padding-top:80px"],
    section[style*="padding-top: 80px"] {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    /* Quick info bar: stack items */
    .bg-primary.py-3 .col-md-4 { text-align: left !important; padding: .25rem .5rem; }

    /* Cards grid: minimum readable width */
    .col-6 .card-body { padding: .875rem !important; }

    /* Portal dashboard header */
    .bg-primary.py-4 .container-fluid { padding: 0 1rem; }
    .bg-primary.py-4 h2 { font-size: 1.3rem; }

    /* Portal community filters: stack */
    .container-fluid form.row .col-md-3,
    .container-fluid form.row .col-md-2,
    .container-fluid form.row .col-md-1 {
        /* Bootstrap already handles this via col-12 default — just ensure touch targets */
    }

    /* Message bubbles */
    .message-bubble { max-width: 90%; font-size: .85rem; }
    .messages-container { max-height: 55vh; }

    /* Portal sidebar sticky: disable on mobile */
    .portal-sidebar { position: static; top: auto; }

    /* Buttons: 44px minimum touch target */
    .btn             { min-height: 44px; }
    .btn-sm          { min-height: 38px; }

    /* Footer columns: brand full-width, nav 2-col, contact full-width */
    footer .col-lg-4 { /* brand + contact — Bootstrap handles col-12 default */ }
    footer .col-6.col-lg-2 { } /* 2 cols already on mobile — fine */
    footer .py-5 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
    footer .row.g-5 { gap: 0 !important; }
    footer .row.g-5 > [class*="col-"] { padding-bottom: 1.5rem; }

    /* Donation campaign cards: stack */
    .progress { height: 6px !important; }

    /* News: remove hover lift on touch */
    .hover-lift:hover { transform: none; box-shadow: none !important; }

    /* Hero CTA buttons: stack */
    .hero-section .d-flex.flex-wrap.gap-3 { flex-direction: column; gap: .75rem !important; }
    .hero-section .d-flex.flex-wrap.gap-3 .btn { width: 100%; justify-content: center; }

    /* Stats grid in hero: 2 col stays but reduce padding */
    .hero-section .col-6 .bg-white.bg-opacity-10 { padding: .875rem !important; }
    .hero-section .col-6 .display-6 { font-size: 1.4rem !important; }
    .hero-section .col-6 .small { font-size: .7rem !important; }

    /* About section feature cards: 2-col stays */
    .bg-light .col-6 .card-body { padding: .875rem !important; }
    .bg-light .col-6 .card-body h6 { font-size: .8rem; }

    /* Contact form */
    .contact-form .row.g-4 > [class*="col-"] { padding-bottom: 0; }
}

/* --- Breakpoint SM (< 576px) --- */
@media (max-width: 575.98px) {

    /* Even smaller hero text */
    .display-4 { font-size: 1.65rem !important; }
    .display-6 { font-size: 1.2rem !important; }

    /* Full-width cards where Bootstrap cols would be too small */
    .hero-section .col-lg-5 .row { margin-top: 1.5rem; }

    /* Portal quick action cards: 2-col is fine */
    .col-6 .card-body.text-center .fs-3 { font-size: 1.5rem !important; }
    .col-6 .card-body.text-center .fw-semibold { font-size: .8rem; }
    .col-6 .card-body.text-center .small { font-size: .7rem; }

    /* Community family cards: full-width on XS */
    .col-sm-6.col-lg-4.col-xl-3 { flex: 0 0 100%; max-width: 100%; }

    /* Navbar brand: shrink logo */
    .navbar-brand img[height="44"] { height: 36px; }

    /* Footer bottom bar */
    footer .border-top .d-flex { flex-direction: column; text-align: center; gap: .5rem !important; }
    footer .border-top .d-flex .d-flex.gap-3 { justify-content: center; }

    /* CTA section button */
    section.bg-primary .btn-warning.btn-lg { width: 100%; }

    /* Donate page */
    .donate-options .col-md-4 { margin-bottom: 1rem; }

    /* Admin panel on tiny screens */
    .table-responsive { font-size: .8rem; }
}