/* =========================================================
   HUELLINK — PERDIDAS FINAL
   Usar SOLO este parche específico para perdidas.php
   ========================================================= */

.hl-public-page{
    font-size:14px!important;
    background:
        radial-gradient(circle at 8% 4%,rgba(226,236,229,.68),transparent 24%),
        radial-gradient(circle at 94% 2%,rgba(242,231,212,.66),transparent 24%),
        #f6f5f1!important;
    color:#26332d!important;
}

/* =========================================================
   CABECERA / NAV DENTRO DE UN RECUADRO
   ========================================================= */

.hl-public-nav{
    position:relative!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;

    width:calc(100% - 32px)!important;
    max-width:1040px!important;
    min-height:58px!important;
    height:auto!important;

    margin:14px auto 0!important;
    padding:9px 16px!important;

    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:16px!important;

    background:rgba(255,255,255,.94)!important;
    border:1px solid #e5e1d8!important;
    border-radius:18px!important;
    box-shadow:0 8px 26px rgba(37,49,43,.055)!important;
    box-sizing:border-box!important;
    z-index:10!important;
}

.hl-public-brand{
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    min-width:0!important;
}

.hl-public-brand img{
    width:29px!important;
    height:29px!important;
    object-fit:contain!important;
    flex:0 0 auto!important;
}

.hl-public-brand strong{
    font-size:1rem!important;
    line-height:1!important;
    letter-spacing:-.03em!important;
    color:#2d463d!important;
}

.hl-public-links{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:15px!important;
    flex-wrap:wrap!important;
}

.hl-public-links a{
    font-size:.70rem!important;
    font-weight:750!important;
    color:#68746e!important;
    text-decoration:none!important;
    white-space:nowrap!important;
}

.hl-public-links a:hover{
    color:#315f51!important;
}

/* =========================================================
   CONTENIDO
   ========================================================= */

.lost-public{
    width:100%!important;
    max-width:1040px!important;
    margin:0 auto!important;
    padding:18px 16px 46px!important;
    box-sizing:border-box!important;
}

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

.public-hero{
    width:100%!important;
    max-width:900px!important;
    margin:0 auto 18px!important;
    padding:24px 24px 20px!important;
    border-radius:20px!important;

    background:
        radial-gradient(circle at 14% 20%,rgba(225,235,228,.80),transparent 34%),
        radial-gradient(circle at 88% 16%,rgba(242,229,209,.65),transparent 31%),
        linear-gradient(135deg,#fbfaf6,#f5f7f4)!important;

    border:1px solid #e5e1d8!important;
    box-shadow:0 9px 26px rgba(38,50,44,.045)!important;
    text-align:center!important;
}

.public-hero .paw{
    font-size:1.45rem!important;
    margin:0 0 4px!important;
}

.public-hero h1{
    margin:0 0 7px!important;
    font-size:clamp(1.7rem,3vw,2.25rem)!important;
    line-height:1.05!important;
    letter-spacing:-.045em!important;
    color:#26342e!important;
    font-weight:780!important;
}

.public-hero p{
    max-width:590px!important;
    margin:0 auto!important;
    font-size:.78rem!important;
    line-height:1.5!important;
    color:#76807b!important;
}

/* =========================================================
   BUSCADOR
   ========================================================= */

.public-search{
    width:100%!important;
    max-width:600px!important;
    margin:15px auto 0!important;
    padding:5px!important;

    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:6px!important;

    background:#fff!important;
    border:1px solid #e4e1da!important;
    border-radius:13px!important;
    box-shadow:0 5px 16px rgba(38,50,44,.035)!important;
}

.public-search input{
    width:100%!important;
    min-width:0!important;
    height:37px!important;
    min-height:37px!important;
    margin:0!important;
    padding:7px 10px!important;

    border:0!important;
    outline:0!important;
    background:transparent!important;
    box-shadow:none!important;

    font-size:.75rem!important;
}

.public-search .btn{
    min-height:37px!important;
    height:37px!important;
    padding:6px 13px!important;
    margin:0!important;
    border-radius:9px!important;
    font-size:.68rem!important;
}

.results-count{
    max-width:900px!important;
    margin:0 auto 10px!important;
    font-size:.68rem!important;
    color:#8a918d!important;
}

/* =========================================================
   GRID
   ========================================================= */

.lost-grid{
    width:100%!important;
    max-width:900px!important;
    margin:0 auto!important;

    display:grid!important;
    grid-template-columns:repeat(auto-fit,minmax(250px,280px))!important;
    justify-content:center!important;
    align-items:start!important;
    gap:16px!important;
}

/* =========================================================
   TARJETA
   ========================================================= */

.lost-card{
    width:100%!important;
    max-width:280px!important;
    margin:0 auto!important;

    overflow:hidden!important;
    border-radius:18px!important;

    background:#fff!important;
    border:1px solid #e5e2db!important;
    box-shadow:0 8px 24px rgba(38,50,44,.055)!important;

    transition:transform .18s ease,box-shadow .18s ease!important;
}

.lost-card:hover{
    transform:translateY(-2px)!important;
    box-shadow:0 14px 34px rgba(38,50,44,.08)!important;
}

/* =========================================================
   FOTO COMPLETA — SIN CORTAR CABEZA / CUERPO
   ========================================================= */

.lost-photo,
.lost-card img:not(.hl-public-brand img){
    width:100%!important;

    height:190px!important;
    min-height:190px!important;
    max-height:190px!important;

    display:block!important;

    object-fit:contain!important;
    object-position:center!important;

    padding:7px!important;
    box-sizing:border-box!important;

    background:
        radial-gradient(circle at 25% 15%,rgba(231,239,233,.78),transparent 35%),
        linear-gradient(145deg,#f5f5f0,#eef3ef)!important;

    border:0!important;
}

.lost-placeholder{
    width:100%!important;
    height:190px!important;
    min-height:190px!important;
    max-height:190px!important;

    display:grid!important;
    place-items:center!important;

    font-size:2.5rem!important;

    background:
        radial-gradient(circle at 30% 18%,rgba(226,236,229,.82),transparent 36%),
        #f5f4ef!important;
}

/* =========================================================
   CONTENIDO DE TARJETA
   ========================================================= */

.lost-body{
    padding:12px 13px 13px!important;
}

.lost-body .status-pill{
    min-height:21px!important;
    padding:4px 7px!important;
    font-size:.54rem!important;
    letter-spacing:.05em!important;
}

.lost-body h2{
    margin:7px 0 2px!important;
    font-size:1rem!important;
    line-height:1.08!important;
    letter-spacing:-.03em!important;
    color:#2b3832!important;
}

.lost-sub{
    margin:0 0 7px!important;
    font-size:.64rem!important;
    color:#929895!important;
}

.lost-zone{
    margin:6px 0 4px!important;
    font-size:.68rem!important;
    line-height:1.35!important;
    color:#4e5c55!important;
    font-weight:700!important;
}

.lost-seen{
    margin:3px 0!important;
    font-size:.63rem!important;
    line-height:1.35!important;
    color:#737c77!important;
}

.lost-msg{
    margin:8px 0!important;
    font-size:.65rem!important;
    line-height:1.4!important;
    color:#666f6a!important;
}

.lost-vet{
    margin-top:8px!important;
    font-size:.57rem!important;
    color:#999f9b!important;
}

.lost-actions{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:5px!important;
    margin-top:9px!important;
}

.lost-actions .btn{
    min-height:31px!important;
    padding:5px 8px!important;
    font-size:.61rem!important;
    border-radius:999px!important;
}

/* =========================================================
   EMPTY STATE
   ========================================================= */

.empty{
    max-width:700px!important;
    margin:0 auto!important;
    padding:32px 18px!important;
    border-radius:18px!important;
    background:#fff!important;
    border:1px solid #e6e3dc!important;
    box-shadow:0 8px 22px rgba(38,50,44,.04)!important;
}

.empty h2{
    font-size:1.08rem!important;
}

.empty p{
    font-size:.73rem!important;
    color:#838a86!important;
}

/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:760px){

    .hl-public-nav{
        width:calc(100% - 24px)!important;
        margin-top:10px!important;
        padding:8px 12px!important;
    }

    .lost-public{
        padding:15px 12px 40px!important;
    }

    .public-hero{
        padding:21px 17px 18px!important;
    }

    .lost-grid{
        grid-template-columns:repeat(2,minmax(220px,260px))!important;
        gap:13px!important;
    }

    .lost-card{
        max-width:260px!important;
    }

    .lost-photo,
    .lost-card img:not(.hl-public-brand img),
    .lost-placeholder{
        height:180px!important;
        min-height:180px!important;
        max-height:180px!important;
    }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:540px){

    .hl-public-nav{
        width:calc(100% - 20px)!important;
        min-height:54px!important;
        margin:9px auto 0!important;
        padding:8px 11px!important;
        border-radius:15px!important;
    }

    .hl-public-links{
        gap:8px!important;
    }

    .hl-public-links a:not(:last-child){
        display:none!important;
    }

    .lost-public{
        padding:12px 10px 32px!important;
    }

    .public-hero{
        padding:18px 13px 15px!important;
        border-radius:16px!important;
    }

    .public-hero h1{
        font-size:1.58rem!important;
    }

    .public-hero p{
        font-size:.71rem!important;
    }

    .public-search{
        grid-template-columns:1fr!important;
        max-width:100%!important;
    }

    .public-search .btn{
        width:100%!important;
    }

    .lost-grid{
        grid-template-columns:1fr!important;
        justify-items:center!important;
    }

    .lost-card{
        max-width:320px!important;
    }

    .lost-photo,
    .lost-card img:not(.hl-public-brand img),
    .lost-placeholder{
        height:210px!important;
        min-height:210px!important;
        max-height:210px!important;
    }
}

/* =========================================================
   CÓMO FUNCIONA
   ========================================================= */

html{
    scroll-behavior:smooth;
}

.hl-how-section{
    width:100%;
    max-width:900px;
    margin:34px auto 0;
    padding:30px 24px 26px;
    border-radius:22px;
    background:
        radial-gradient(circle at 8% 5%,rgba(228,237,231,.72),transparent 28%),
        radial-gradient(circle at 94% 8%,rgba(241,230,210,.62),transparent 28%),
        linear-gradient(145deg,#ffffff,#f8f7f2);
    border:1px solid #e5e1d8;
    box-shadow:0 10px 28px rgba(38,50,44,.05);
    scroll-margin-top:24px;
}

.hl-how-head{
    max-width:600px;
    margin:0 auto 23px;
    text-align:center;
}

.hl-how-head > span{
    display:block;
    margin-bottom:6px;
    color:#9a8155;
    font-size:.57rem;
    line-height:1;
    font-weight:850;
    letter-spacing:.17em;
}

.hl-how-head h2{
    margin:0 0 7px;
    color:#293730;
    font-size:1.55rem;
    line-height:1.05;
    letter-spacing:-.04em;
}

.hl-how-head p{
    margin:0;
    color:#78817c;
    font-size:.75rem;
    line-height:1.55;
}

.hl-how-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:13px;
}

.hl-how-card{
    position:relative;
    min-height:180px;
    padding:18px 16px 16px;
    border-radius:17px;
    background:rgba(255,255,255,.80);
    border:1px solid #e9e6df;
    text-align:left;
    box-shadow:0 6px 18px rgba(38,50,44,.035);
}

.hl-how-step{
    position:absolute;
    top:15px;
    right:15px;
    color:#c8b487;
    font-size:.58rem;
    font-weight:900;
    letter-spacing:.09em;
}

.hl-how-icon{
    width:42px;
    height:42px;
    margin-bottom:12px;
    display:grid;
    place-items:center;
    border-radius:13px;
    background:#edf3ef;
    color:#315f51;
    font-size:1.1rem;
}

.hl-how-card:nth-child(2) .hl-how-icon{
    background:#f7efe5;
}

.hl-how-card:nth-child(3) .hl-how-icon{
    background:#f8ece9;
    color:#a76158;
}

.hl-how-card strong{
    display:block;
    margin-bottom:6px;
    color:#35433c;
    font-size:.76rem;
    line-height:1.3;
}

.hl-how-card p{
    margin:0;
    color:#818985;
    font-size:.65rem;
    line-height:1.5;
}

@media(max-width:760px){
    .hl-how-section{
        margin-top:26px;
        padding:24px 18px 20px;
    }

    .hl-how-grid{
        grid-template-columns:1fr;
        max-width:420px;
        margin:0 auto;
    }

    .hl-how-card{
        min-height:0;
    }
}

@media(max-width:540px){
    .hl-how-section{
        margin-top:22px;
        padding:22px 13px 18px;
        border-radius:17px;
    }

    .hl-how-head{
        margin-bottom:18px;
    }

    .hl-how-head h2{
        font-size:1.35rem;
    }

    .hl-how-head p{
        font-size:.70rem;
    }
}