*{
    box-sizing:border-box;
    margin:0;
    padding:0;
}

:root{
    --yellow:#f6c400;
    --yellow-soft:#fff1b5;
    --yellow-light:#fff7cf;
    --yellow-dark:#9b7b00;
    --black:#111111;
    --text:#111111;
    --muted:#666666;
    --line:#e8e8e8;
    --card:#ffffff;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    color:var(--text);
    min-height:100vh;
    background:
        radial-gradient(circle at 96% 16%, rgba(246,196,0,.38), transparent 22%),
        radial-gradient(circle at 95% 86%, rgba(246,196,0,.27), transparent 28%),
        radial-gradient(circle at 2% 52%, rgba(246,196,0,.09), transparent 22%),
        linear-gradient(135deg,#fff 0%,#fff 58%,#fff2b5 100%);
}

a{
    color:inherit;
    text-decoration:none;
}

img{
    max-width:100%;
}

/* ================= MENU FIJO ================= */

.site-header{
    position:sticky;
    top:0;
    z-index:9999;
    background:#111;
    box-shadow:0 12px 32px rgba(0,0,0,.18);
}

.main-navbar{
    min-height:96px;
    display:grid;
    grid-template-columns:300px 1fr;
    align-items:center;
    gap:28px;
    padding:10px 34px;
    background:#111;
    color:#fff;
}

.brand-logo{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    flex:0 0 300px;
    max-width:300px;
}

.header-logo{
    display:block;
    width:260px;
    max-width:100%;
    height:auto;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    padding:0 !important;
    margin:0 !important;
    box-shadow:none !important;
    outline:none !important;
}

.main-menu{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0;
    flex-wrap:wrap;
    font-weight:900;
    font-size:14px;
    text-transform:uppercase;
    width:100%;
}

.main-menu a{
    color:#fff;
    padding:10px 18px;
    line-height:1;
    border-right:2px solid #f6c400;
    transition:.2s;
    white-space:nowrap;
}

.main-menu a:last-child{
    border-right:0;
}

.main-menu a:hover{
    color:#f6c400;
}

.menu-create{
    color:#111 !important;
    background:#f6c400;
    border-radius:10px;
    margin-left:16px;
    border-right:0 !important;
    box-shadow:0 10px 22px rgba(246,196,0,.2);
}

.menu-create:hover{
    background:#fff;
    color:#111 !important;
}


.menu-toggle{
    display:none;
    width:48px;
    height:42px;
    border:0;
    background:transparent;
    cursor:pointer;
    padding:7px;
}

.menu-toggle span{
    display:block;
    height:4px;
    width:100%;
    background:#f6c400;
    border-radius:10px;
    margin:6px 0;
    transition:.25s;
}

.menu-toggle.is-open span:nth-child(1){
    transform:translateY(10px) rotate(45deg);
}

.menu-toggle.is-open span:nth-child(2){
    opacity:0;
}

.menu-toggle.is-open span:nth-child(3){
    transform:translateY(-10px) rotate(-45deg);
}

/* ================= HERO ================= */

.hero{
    min-height:calc(100vh - 380px);
    padding:40px 34px 28px;
    position:relative;
    overflow:hidden;
}

.hero::before{
    content:"";
    position:absolute;
    left:-22px;
    top:150px;
    width:210px;
    height:520px;
    background-image:radial-gradient(rgba(246,196,0,.34) 1px, transparent 1px);
    background-size:12px 12px;
    opacity:.38;
    pointer-events:none;
    z-index:0;
}

.hero-layout{
    display:grid;
    grid-template-columns:minmax(360px,.95fr) minmax(420px,.82fr) minmax(300px,.52fr);
    gap:32px;
    align-items:center;
    position:relative;
    z-index:1;
}

.hero-content{
    min-width:0;
}

.badge{
    display:inline-flex;
    align-items:center;
    gap:9px;
    background:#fff1bd;
    border:1px solid #e5c960;
    padding:12px 18px;
    border-radius:999px;
    font-weight:900;
    margin-bottom:36px;
}

.badge::before{
    content:"";
    width:11px;
    height:11px;
    border-radius:50%;
    background:var(--yellow);
}

.hero-content h1{
    font-size:58px;
    line-height:1.06;
    letter-spacing:-2.6px;
    font-weight:900;
    margin-bottom:25px;
}

.slogan{
    font-size:22px;
    font-weight:900;
    margin-bottom:22px;
}

.report-line{
    font-size:19px;
    line-height:1.5;
    color:#333;
    max-width:620px;
    margin-bottom:34px;
}

.report-line strong{
    color:var(--yellow-dark);
    font-weight:900;
}

.actions{
    display:flex;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
}

.btn-primary,
.btn-secondary{
    min-width:190px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:11px;
    padding:15px 24px;
    border-radius:9px;
    font-weight:900;
    transition:.2s ease;
}

.btn-primary{
    background:var(--yellow);
    color:#000;
    box-shadow:0 15px 30px rgba(246,196,0,.25);
}

.btn-primary::before{
    content:"";
    width:18px;
    height:18px;
    display:inline-block;
    background:
        linear-gradient(#111,#111) 3px 13px / 12px 2px no-repeat,
        linear-gradient(#111,#111) 12px 2px / 2px 13px no-repeat;
    border:2px solid #111;
    border-radius:2px;
}

.btn-secondary{
    background:#fff;
    border:2px solid #ddd;
    color:#111;
}

.btn-secondary::before{
    content:"";
    width:18px;
    height:18px;
    display:inline-block;
    border:3px solid #111;
    border-radius:50%;
    box-shadow:9px 9px 0 -6px #111;
}

.btn-primary:hover,
.btn-secondary:hover{
    transform:translateY(-2px);
}

/* ================= MAPA ================= */

.panel-map{
    background:#fff;
    border:1px solid rgba(0,0,0,.07);
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 24px 58px rgba(0,0,0,.13);
}

.panel-header{
    min-height:96px;
    padding:22px 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}

.panel-header strong{
    display:block;
    font-size:22px;
    line-height:1.1;
    font-weight:900;
    margin-bottom:7px;
}

.panel-header small{
    color:#666;
    font-size:16px;
}

.panel-header a{
    background:var(--yellow);
    color:#000;
    padding:13px 18px;
    border-radius:9px;
    font-weight:900;
    display:inline-flex;
    align-items:center;
    gap:9px;
    white-space:nowrap;
}

.panel-header a::before{
    content:"+";
    width:18px;
    height:18px;
    border:2px solid #000;
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    line-height:1;
}

#map{
    height:330px;
    width:100%;
    z-index:1;
}

.leaflet-container{
    font-family:Arial, Helvetica, sans-serif;
}

.panel-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    background:#fff;
}

.panel-stats div{
    padding:22px 26px;
    border-right:1px solid #eee;
}

.panel-stats div:last-child{
    border-right:0;
}

.panel-stats strong{
    display:block;
    color:#c69a00;
    font-size:30px;
    font-weight:900;
    line-height:1;
    margin-bottom:8px;
}

.panel-stats span{
    color:#555;
    font-weight:800;
}

/* ================= LOGIN HOME ================= */

.home-login-card{
    background:#fff;
    border:1px solid rgba(0,0,0,.07);
    border-radius:20px;
    padding:28px;
    box-shadow:0 24px 58px rgba(0,0,0,.13);
    align-self:stretch;
    min-height:560px;
}

.home-login-card h2{
    font-size:29px;
    font-weight:900;
    letter-spacing:-.8px;
    line-height:1.1;
    margin-bottom:12px;
}

.home-login-card p{
    color:#555;
    font-size:15px;
    line-height:1.45;
}

.login-hint{
    display:block;
    color:#c69a00;
    font-size:14px;
    margin:24px 0 18px;
}

.home-login-card label{
    display:block;
    font-size:13px;
    font-weight:900;
    margin:15px 0 7px;
}

.home-login-card input{
    width:100%;
    height:42px;
    border:1px solid #ddd;
    border-radius:8px;
    padding:0 12px;
    font-size:14px;
    outline:none;
}

.home-login-card input:focus{
    border-color:var(--yellow);
    box-shadow:0 0 0 3px rgba(246,196,0,.16);
}

.home-login-card button{
    width:100%;
    height:46px;
    background:var(--yellow);
    color:#000;
    border:0;
    border-radius:8px;
    font-weight:900;
    margin-top:18px;
    cursor:pointer;
}

.forgot-link{
    display:block;
    text-align:center;
    font-size:13px;
    color:#c69a00;
    margin:12px 0 20px;
    font-weight:800;
}

.login-separator{
    display:flex;
    align-items:center;
    gap:12px;
    color:#777;
    font-size:13px;
    margin:16px 0;
}

.login-separator::before,
.login-separator::after{
    content:"";
    height:1px;
    background:#e3e3e3;
    flex:1;
}

.home-google-btn{
    height:42px;
    border:1px solid #ddd;
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    font-weight:800;
    color:#333;
    background:#fff;
}

.home-google-btn span{
    color:#4285F4;
    font-size:20px;
    font-weight:900;
}

.register-mini{
    text-align:center;
    margin-top:18px;
    color:#555;
    font-size:13px;
}

.register-mini a{
    color:#c69a00;
    font-weight:900;
}

/* ================= PANEL INFERIOR ================= */

.bottom-panel{
    margin:0 34px 34px;
    background:rgba(255,255,255,.92);
    border:1px solid rgba(0,0,0,.08);
    border-radius:18px;
    box-shadow:0 20px 52px rgba(0,0,0,.08);
    display:grid;
    grid-template-columns:1fr 1fr;
    overflow:hidden;
}

.how-box,
.why-box{
    padding:28px 34px;
}

.how-box{
    border-right:1px solid #e8e8e8;
}

.how-box h2,
.why-box h2{
    font-size:25px;
    font-weight:900;
    margin-bottom:18px;
    letter-spacing:-.5px;
}

.how-steps{
    display:grid;
    grid-template-columns:1fr auto 1fr auto 1fr;
    gap:16px;
    align-items:center;
}

.how-step{
    display:grid;
    grid-template-columns:58px 1fr;
    gap:14px;
    align-items:center;
}

.icon-circle{
    width:58px;
    height:58px;
    border-radius:50%;
    background:var(--yellow);
    color:#000;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:27px;
    font-weight:900;
    box-shadow:0 10px 25px rgba(246,196,0,.25);
}

.icon-circle svg,
.metric-icon svg{
    display:block;
}

.how-step h3{
    font-size:15px;
    font-weight:900;
    margin-bottom:5px;
}

.how-step p{
    font-size:13px;
    color:#555;
    line-height:1.38;
}

.step-arrow{
    font-size:34px;
    color:#bbb;
    font-weight:900;
}

.why-box p{
    color:#333;
    font-size:15px;
    line-height:1.48;
    margin-bottom:20px;
}

.metric-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
}

.metric-card{
    background:#fff;
    border:1px solid #eee;
    border-radius:12px;
    min-height:92px;
    display:grid;
    grid-template-columns:54px 1fr;
    grid-template-rows:auto auto;
    column-gap:12px;
    align-items:center;
    padding:15px;
    box-shadow:0 8px 20px rgba(0,0,0,.04);
}

.metric-icon{
    grid-row:1 / span 2;
    width:54px;
    height:54px;
    border-radius:50%;
    background:#ffe58a;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
    font-size:25px;
}

.metric-card strong{
    font-size:28px;
    line-height:1;
    font-weight:900;
}

.metric-card small{
    color:#555;
    font-size:14px;
}

/* ================= FOOTER ================= */

.site-footer{
    background:#111;
    color:#fff;
    padding:28px 40px;
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:24px;
    position:relative;
}

.footer-left{
    justify-self:start;
}

.footer-logo{
    display:flex;
    align-items:center;
    gap:14px;
}

.fv-logo{
    width:52px;
    height:52px;
    border-radius:12px;
    background:#f6c400;
    color:#000;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
    font-size:22px;
}

.footer-logo strong{
    font-size:18px;
    color:#fff;
}

.footer-logo small{
    color:#aaa;
}

/* Botón admin centrado */
.footer-admin{
    justify-self:center;
}

/* Compatibilidad por si alguna página todavía usa footer-right */
.footer-right{
    justify-self:center;
}

.footer-center{
    justify-self:end;
    color:#ddd;
    font-size:15px;
    white-space:nowrap;
    text-align:right;
}

.footer-center a{
    color:#f6c400;
    font-weight:900;
    text-decoration:none;
}

.footer-center a:hover{
    text-decoration:underline;
}

.admin-access{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#111;
    color:#f6c400;
    border:1px solid #f6c400;
    padding:11px 18px;
    border-radius:8px;
    font-size:14px;
    font-weight:900;
    text-decoration:none;
    transition:.2s;
    white-space:nowrap;
}

.admin-access:hover{
    background:#f6c400;
    color:#111;
}

/* Espacio para que Nahuelito no tape el footer */
body{
    padding-bottom:0;
}

@media(max-width:980px){
    .site-footer{
        grid-template-columns:1fr;
        text-align:center;
        justify-items:center;
        gap:18px;
        padding:28px 22px 105px;
    }

    .footer-left,
    .footer-admin,
    .footer-right,
    .footer-center{
        justify-self:center;
        text-align:center;
    }

    .footer-logo{
        justify-content:center;
    }

    .footer-center{
        white-space:normal;
    }
}

@media(max-width:600px){
    .site-footer{
        padding:24px 16px 100px;
    }

    .admin-access{
        width:100%;
        max-width:260px;
    }
}


/* ================= LOGIN / REGISTRO PAGES ================= */

.auth-page{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:32px;
    background:
        linear-gradient(rgba(0,0,0,.43), rgba(0,0,0,.43)),
        url("img/bg.jpg");
    background-size:cover;
    background-position:center;
}

.auth-card{
    width:100%;
    max-width:520px;
    background:rgba(255,255,255,.91);
    color:#111;
    padding:38px 42px;
    border-radius:24px;
    box-shadow:0 28px 70px rgba(0,0,0,.36);
    backdrop-filter:blur(4px);
}

.auth-card h1{
    font-size:36px;
    margin-bottom:18px;
    font-weight:900;
    letter-spacing:-.9px;
}

.auth-card p{
    font-size:17px;
    line-height:1.5;
    color:#333;
    margin-bottom:22px;
}

.auth-card label{
    display:block;
    font-weight:900;
    margin:15px 0 7px;
}

.auth-card input,
.auth-card select,
.auth-card textarea{
    width:100%;
    padding:14px;
    border-radius:10px;
    border:1px solid #ddd;
    font-size:16px;
    background:#fff;
    outline:none;
}

.auth-card input:focus,
.auth-card select:focus,
.auth-card textarea:focus{
    border-color:var(--yellow);
    box-shadow:0 0 0 3px rgba(246,196,0,.18);
}

.auth-card button{
    width:100%;
    background:var(--yellow);
    color:#000;
    border:0;
    padding:15px;
    border-radius:10px;
    margin-top:20px;
    font-weight:900;
    font-size:17px;
    cursor:pointer;
}

.auth-links{
    text-align:center;
    margin-top:22px;
}

.auth-links a{
    color:var(--yellow-dark);
    font-weight:900;
}

.error-box{
    background:#ffe0e0;
    color:#8a0000;
    padding:13px;
    border-radius:10px;
    margin-bottom:18px;
    font-weight:700;
}

.google-login-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    width:100%;
    padding:13px 16px;
    margin:18px 0;
    background:#fff;
    border:1px solid #ddd;
    border-radius:12px;
    color:#222;
    transition:.2s ease;
}

.google-login-btn:hover{
    background:#fafafa;
    transform:translateY(-1px);
}

.google-login-icon{
    width:36px;
    height:36px;
    border-radius:50%;
    background:#4285F4;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
    font-size:20px;
}

.google-login-text{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}

.google-login-text strong{
    color:#202124;
    font-size:16px;
}

.google-login-text small{
    color:#5f6368;
    font-size:13px;
}

/* ================= RESPONSIVE ================= */

@media(max-width:1280px){
    .main-navbar{
        grid-template-columns:1fr;
        align-items:center;
        justify-items:center;
    }

    .brand-logo{
        flex:0 0 auto;
        max-width:280px;
        justify-content:center;
    }

    .header-logo{
        width:260px;
    }

    .main-menu{
        width:100%;
        justify-content:center;
    }

    .hero-layout{
        grid-template-columns:1fr 1fr;
    }

    .home-login-card{
        grid-column:1 / -1;
        min-height:auto;
        max-width:520px;
        justify-self:center;
        width:100%;
    }
}

@media(max-width:980px){
    .main-navbar{
        padding:14px 18px;
    }

    .brand-logo{
        max-width:250px;
    }

    .header-logo{
        width:240px;
    }

    .main-menu{
        overflow-x:auto;
        flex-wrap:nowrap;
        justify-content:flex-start;
        padding-bottom:4px;
    }

    .main-menu a{
        font-size:13px;
        padding:10px 13px;
    }

    .hero{
        padding:28px 18px;
    }

    .hero-layout{
        grid-template-columns:1fr;
        gap:28px;
    }

    .hero-content h1{
        font-size:46px;
    }

    .panel-map,
    .home-login-card{
        width:100%;
        max-width:none;
    }

    .bottom-panel{
        grid-template-columns:1fr;
        margin:0 18px 28px;
    }

    .how-box{
        border-right:0;
        border-bottom:1px solid #e8e8e8;
    }

    .how-steps{
        grid-template-columns:1fr;
    }

    .step-arrow{
        display:none;
    }

    .site-footer{
        grid-template-columns:1fr;
        text-align:center;
    }

    .footer-left,
    .footer-center,
    .footer-right{
        justify-self:center;
    }

    .footer-logo{
        justify-content:center;
    }

    .footer-center{
        white-space:normal;
    }
}

@media(max-width:620px){
    .header-logo{
        width:210px;
        padding:5px 8px;
    }

    .hero-content h1{
        font-size:38px;
    }

    .slogan{
        font-size:20px;
    }

    .report-line{
        font-size:17px;
    }

    .actions{
        flex-direction:column;
        align-items:stretch;
    }

    .btn-primary,
    .btn-secondary{
        width:100%;
    }

    .panel-header{
        flex-direction:column;
        align-items:flex-start;
        gap:14px;
    }

    #map{
        height:300px;
    }

    .panel-stats{
        grid-template-columns:1fr;
    }

    .panel-stats div{
        border-right:0;
        border-bottom:1px solid #eee;
    }

    .metric-grid{
        grid-template-columns:1fr;
    }

    .auth-card{
        padding:30px 24px;
    }
}

/* ================= LAYOUT GENERAL CON HEADER Y FOOTER ================= */

.auth-main{
    min-height:auto;
}

.auth-main .auth-page{
    min-height:calc(100vh - 96px - 108px);
}

/* Menú activo */
.main-menu a.active-menu{
    color:#f6c400;
}


.simple-page{
    min-height:calc(100vh - 96px - 108px);
    padding:60px 34px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.simple-card{
    width:100%;
    max-width:760px;
    background:#fff;
    border:1px solid rgba(0,0,0,.08);
    border-radius:22px;
    padding:38px;
    box-shadow:0 24px 58px rgba(0,0,0,.10);
}

.simple-card h1{
    font-size:42px;
    margin-bottom:16px;
}

.simple-card p{
    font-size:18px;
    line-height:1.6;
    color:#444;
}


/* ================= NUEVO RECLAMO ================= */

.claim-page{
    min-height:calc(100vh - 96px - 108px);
    padding:46px 34px;
    background:
        radial-gradient(circle at 96% 16%, rgba(246,196,0,.25), transparent 24%),
        linear-gradient(135deg,#fff 0%,#fff 64%,#fff4c2 100%);
}

.claim-card{
    width:100%;
    max-width:980px;
    margin:0 auto;
    background:#fff;
    border:1px solid rgba(0,0,0,.08);
    border-radius:24px;
    padding:36px;
    box-shadow:0 24px 58px rgba(0,0,0,.10);
}

.claim-card h1{
    font-size:46px;
    line-height:1.05;
    letter-spacing:-1.5px;
    margin-bottom:16px;
}

.claim-intro{
    color:#444;
    font-size:18px;
    line-height:1.55;
    margin-bottom:26px;
    max-width:760px;
}

.claim-form label{
    display:block;
    font-weight:900;
    margin:18px 0 8px;
}

.claim-form input,
.claim-form select,
.claim-form textarea{
    width:100%;
    padding:14px;
    border-radius:10px;
    border:1px solid #ddd;
    font-size:16px;
    background:#fff;
    outline:none;
    font-family:Arial, Helvetica, sans-serif;
}

.claim-form textarea{
    min-height:130px;
    resize:vertical;
}

.claim-form input:focus,
.claim-form select:focus,
.claim-form textarea:focus{
    border-color:#f6c400;
    box-shadow:0 0 0 3px rgba(246,196,0,.18);
}

.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

.location-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#111;
    color:#f6c400;
    border:1px solid #f6c400;
    border-radius:999px;
    padding:12px 18px;
    font-weight:900;
    cursor:pointer;
    margin-bottom:14px;
}

.location-btn:hover{
    background:#f6c400;
    color:#111;
}

#claim-map{
    width:100%;
    height:390px;
    border-radius:18px;
    overflow:hidden;
    border:1px solid #ddd;
    margin:10px 0 18px;
    z-index:1;
}

.claim-actions{
    display:flex;
    justify-content:flex-end;
    gap:16px;
    flex-wrap:wrap;
    margin-top:26px;
}

.claim-actions .btn-primary,
.claim-actions .btn-secondary{
    border:none;
    cursor:pointer;
}

@media(max-width:760px){
    .claim-page{
        padding:28px 18px;
    }

    .claim-card{
        padding:26px 20px;
    }

    .claim-card h1{
        font-size:36px;
    }

    .form-grid{
        grid-template-columns:1fr;
    }

    #claim-map{
        height:320px;
    }

    .claim-actions{
        flex-direction:column;
    }

    .claim-actions .btn-primary,
    .claim-actions .btn-secondary{
        width:100%;
    }
}


/* =========================================================
   RESPONSIVE FINAL CORREGIDO
   Menú hamburguesa + botones home + centrados
   ========================================================= */

@media (max-width: 980px) {

    .site-header {
        padding: 0 !important;
        overflow: visible !important;
    }

    .main-navbar {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        align-items: center !important;
        min-height: auto !important;
        padding: 12px 18px !important;
        gap: 12px !important;
        position: relative !important;
        overflow: visible !important;
        background: #111 !important;
    }

    .brand-logo {
        max-width: 210px !important;
        justify-content: flex-start !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .header-logo {
        width: 210px !important;
        max-width: 100% !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    /* HAMBURGUESA: 3 RAYITAS AMARILLAS, SIN CUADRADO */
    .menu-toggle {
        display: block !important;
        position: relative !important;
        width: 34px !important;
        height: 28px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        cursor: pointer !important;
        z-index: 100001 !important;
        color: transparent !important;
        font-size: 0 !important;
        line-height: 0 !important;
        text-indent: -9999px !important;
        overflow: hidden !important;
        appearance: none !important;
        -webkit-appearance: none !important;
    }

    .menu-toggle::before,
    .menu-toggle::after,
    .menu-toggle span {
        content: "" !important;
        position: absolute !important;
        left: 4px !important;
        width: 26px !important;
        height: 3px !important;
        background: #f6c400 !important;
        border-radius: 999px !important;
        box-shadow: none !important;
        transition: .25s ease !important;
    }

    .menu-toggle::before {
        top: 5px !important;
    }

    .menu-toggle span {
        top: 12px !important;
        display: block !important;
        margin: 0 !important;
    }

    .menu-toggle::after {
        top: 19px !important;
    }

    /* X chica cuando el menú está abierto */
    .menu-toggle.is-open::before,
    .menu-toggle:has(+ .main-menu.active)::before,
    .menu-toggle:has(+ .main-menu.is-open)::before {
        top: 12px !important;
        transform: rotate(45deg) !important;
    }

    .menu-toggle.is-open span,
    .menu-toggle:has(+ .main-menu.active) span,
    .menu-toggle:has(+ .main-menu.is-open) span {
        opacity: 0 !important;
    }

    .menu-toggle.is-open::after,
    .menu-toggle:has(+ .main-menu.active)::after,
    .menu-toggle:has(+ .main-menu.is-open)::after {
        top: 12px !important;
        transform: rotate(-45deg) !important;
    }

    .main-menu {
        display: none !important;
        grid-column: 1 / -1 !important;
        position: static !important;
        width: 100% !important;
        margin-top: 8px !important;
        padding: 8px 0 !important;
        background: #111 !important;
        border-top: 1px solid rgba(246,196,0,.45) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        overflow: visible !important;
        z-index: 100000 !important;
    }

    .main-menu.active,
    .main-menu.is-open {
        display: flex !important;
    }

    .main-menu a {
        display: block !important;
        width: 100% !important;
        padding: 13px 10px !important;
        color: #fff !important;
        background: #111 !important;
        border-right: 0 !important;
        border-bottom: 1px solid rgba(246,196,0,.28) !important;
        text-align: center !important;
        font-size: 13px !important;
        line-height: 1.2 !important;
    }

    .main-menu a:last-child {
        border-bottom: 0 !important;
    }

    .main-menu .menu-create {
        width: 92% !important;
        margin: 10px auto 4px !important;
        padding: 13px 10px !important;
        background: #f6c400 !important;
        color: #111 !important;
        border-radius: 10px !important;
        border-bottom: 0 !important;
    }

    .panel-stats div {
        text-align: center !important;
        padding: 20px 10px !important;
    }

    .panel-stats strong,
    .panel-stats span {
        text-align: center !important;
    }

    .metric-card {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        gap: 10px !important;
    }

    .metric-icon {
        margin: 0 auto !important;
    }
}

@media (max-width: 768px) {

    .hero {
        padding: 24px 18px 22px !important;
    }

    /* BOTONES HOME A LA MITAD, NO ANCHO COMPLETO */
    .hero-content .actions,
    .hero .actions,
    .actions {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
        margin-top: 18px !important;
        flex-wrap: nowrap !important;
    }

    .hero-content .actions > a.btn-primary,
    .hero-content .actions > a.btn-secondary,
    .hero .actions > a.btn-primary,
    .hero .actions > a.btn-secondary,
    .actions > a.btn-primary,
    .actions > a.btn-secondary {
        width: 48% !important;
        max-width: 170px !important;
        min-width: 0 !important;
        min-height: 38px !important;
        height: 38px !important;
        padding: 7px 8px !important;
        font-size: 13px !important;
        line-height: 1 !important;
        border-radius: 9px !important;
        gap: 6px !important;
        box-shadow: none !important;
        white-space: nowrap !important;
    }

    .hero-content .actions > a.btn-primary::before,
    .hero-content .actions > a.btn-secondary::before,
    .hero .actions > a.btn-primary::before,
    .hero .actions > a.btn-secondary::before,
    .actions > a.btn-primary::before,
    .actions > a.btn-secondary::before {
        width: 12px !important;
        height: 12px !important;
        flex: 0 0 12px !important;
    }

    .badge {
        margin-bottom: 26px !important;
        padding: 10px 14px !important;
        font-size: 15px !important;
    }
}

@media (max-width: 420px) {

    .brand-logo {
        max-width: 190px !important;
    }

    .header-logo {
        width: 190px !important;
    }

    .hero-content .actions > a.btn-primary,
    .hero-content .actions > a.btn-secondary,
    .hero .actions > a.btn-primary,
    .hero .actions > a.btn-secondary,
    .actions > a.btn-primary,
    .actions > a.btn-secondary {
        max-width: 155px !important;
        height: 36px !important;
        min-height: 36px !important;
        padding: 6px 7px !important;
        font-size: 12px !important;
        border-radius: 8px !important;
    }
}

.claims-page {
    padding: 42px 34px;
    min-height: calc(100vh - 96px);
}

.claims-hero {
    max-width: 1120px;
    margin: 0 auto 24px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.claims-hero h1 {
    font-size: 48px;
    font-weight: 900;
    letter-spacing: -1.5px;
    margin: 18px 0 8px;
}

.claims-hero p {
    font-size: 18px;
    color: #444;
}

.claims-new-btn {
    background: #f6c400;
    color: #111;
    padding: 14px 20px;
    border-radius: 12px;
    font-weight: 900;
    white-space: nowrap;
    box-shadow: 0 14px 28px rgba(246,196,0,.25);
}

.claims-summary {
    max-width: 1120px;
    margin: 0 auto 26px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 18px 44px rgba(0,0,0,.08);
}

.claims-summary div {
    padding: 22px;
    text-align: center;
    border-right: 1px solid #eee;
}

.claims-summary div:last-child {
    border-right: 0;
}

.claims-summary strong {
    display: block;
    color: #c69a00;
    font-size: 34px;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 8px;
}

.claims-summary span {
    color: #555;
    font-weight: 900;
}

.claims-list-modern {
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    gap: 18px;
}

.claim-card-modern {
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 22px;
    padding: 22px;
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 20px;
    box-shadow: 0 18px 44px rgba(0,0,0,.08);
}

.claim-photo,
.claim-icon {
    width: 92px;
    height: 92px;
    border-radius: 18px;
    overflow: hidden;
    background: #fff1b5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111;
    font-size: 42px;
    font-weight: 900;
}

.claim-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.claim-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
}

.claim-type-modern {
    color: #9b7b00;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}

.claim-info h2 {
    font-size: 24px;
    line-height: 1.15;
    font-weight: 900;
    margin-bottom: 10px;
}

.claim-address,
.claim-date {
    color: #555;
    font-size: 15px;
    margin-top: 6px;
}

.claim-status-pill {
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.claim-status-pill.status-recibido {
    background: #fff1b5;
    color: #8a6f00;
}

.claim-status-pill.status-proceso {
    background: #dbeafe;
    color: #1d4ed8;
}

.claim-status-pill.status-resuelto {
    background: #dcfce7;
    color: #15803d;
}

.claim-progress {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.claim-progress span {
    position: relative;
    background: #f1f1f1;
    color: #777;
    padding: 9px 8px;
    border-radius: 999px;
    text-align: center;
    font-size: 12px;
    font-weight: 900;
}

.claim-progress.recibido span:nth-child(1),
.claim-progress.en_proceso span:nth-child(1),
.claim-progress.en_proceso span:nth-child(2),
.claim-progress.resuelto span {
    background: #f6c400;
    color: #111;
}

.claims-empty {
    max-width: 720px;
    margin: 40px auto;
    background: #fff;
    border-radius: 22px;
    padding: 38px;
    text-align: center;
    box-shadow: 0 18px 44px rgba(0,0,0,.08);
}

.claims-empty h2 {
    font-size: 32px;
    margin-bottom: 12px;
}

.claims-empty p {
    color: #555;
    margin-bottom: 24px;
}

/* RESPONSIVE */
@media (max-width: 768px) {

    .claims-page {
        padding: 28px 18px;
    }

    .claims-hero {
        flex-direction: column;
        align-items: stretch;
        margin-bottom: 20px;
    }

    .claims-hero h1 {
        font-size: 38px;
    }

    .claims-new-btn {
        text-align: center;
        padding: 12px 16px;
    }

    .claims-summary {
        grid-template-columns: 1fr;
    }

    .claims-summary div {
        border-right: 0;
        border-bottom: 1px solid #eee;
        padding: 18px;
    }

    .claims-summary div:last-child {
        border-bottom: 0;
    }

    .claim-card-modern {
        grid-template-columns: 1fr;
        padding: 20px;
    }

    .claim-photo,
    .claim-icon {
        width: 74px;
        height: 74px;
        border-radius: 16px;
        font-size: 34px;
    }

    .claim-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .claim-info h2 {
        font-size: 22px;
    }

    .claim-progress {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   FOOTER FINAL + NAHUELITO
   Mantener al final para que pise reglas viejas
   ========================================================= */

.site-footer{
    display:grid !important;
    grid-template-columns:1fr auto 1fr !important;
    align-items:center !important;
    gap:24px !important;
    background:#111 !important;
    color:#fff !important;
    padding:28px 40px !important;
}

.footer-left{
    justify-self:start !important;
}

.footer-admin{
    justify-self:center !important;
}

.footer-right{
    justify-self:center !important;
}

.footer-center{
    justify-self:end !important;
    text-align:right !important;
    white-space:nowrap !important;
}

.admin-access{
    white-space:nowrap !important;
}

@media(max-width:980px){
    .site-footer{
        grid-template-columns:1fr !important;
        justify-items:center !important;
        text-align:center !important;
        gap:18px !important;
        padding:28px 22px 105px !important;
    }

    .footer-left,
    .footer-admin,
    .footer-right,
    .footer-center{
        justify-self:center !important;
        text-align:center !important;
    }

    .footer-logo{
        justify-content:center !important;
    }

    .footer-center{
        white-space:normal !important;
    }
}

@media(max-width:600px){
    .site-footer{
        padding:24px 16px 100px !important;
    }

    .admin-access{
        width:100% !important;
        max-width:260px !important;
    }
}