/* =====================================================================
   AmorUY - Tema "Ámbar sobre tinta"
   Identidad propia: base tinta (negro cálido), acento ámbar/dorado,
   rosa apagado de apoyo, tipografía editorial.

   Se carga DESPUÉS del <style> inline de front_header.php a propósito:
   redefine los tokens viejos (--accent, --card, --bg1...) para reskinear
   de una sola vez todo lo que ya los usaba, sin tocar esas reglas.
   ===================================================================== */

:root{
    /* --- Tinta: la base --- */
    --tinta-900:#0B0B0F;
    --tinta-800:#101016;
    --tinta-700:#16161E;
    --tinta-600:#1E1E28;
    --tinta-500:#282833;

    /* --- Ámbar: el acento --- */
    --ambar:#E8B45C;
    --ambar-claro:#F5D48F;
    --ambar-oscuro:#C08A32;

    /* --- Rosa apagado: secundario, nunca protagonista --- */
    --rosa:#D96B7C;
    --rosa-oscuro:#B14E5F;

    /* --- Texto: blanco cálido, nunca #fff puro --- */
    --texto:#F4F1EA;
    --texto-2:#A9A399;
    --texto-3:#6C675F;

    /* --- Señales --- */
    --verde:#5FBF8B;
    --linea:rgba(244,241,234,.08);
    --linea-ambar:rgba(232,180,92,.30);

    --radio:12px;
    --radio-chico:8px;

    --sombra:0 18px 50px rgba(0,0,0,.55);
    --sombra-ambar:0 10px 30px rgba(232,180,92,.16);

    /* Una sola familia en todo el sitio: mas legible en celular y menos carga. */
    --fuente-ui:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --fuente-titulo:var(--fuente-ui);

    /* =================================================================
       Remapeo de los tokens viejos.
       Todo el CSS heredado sigue pidiendo --accent / --card / --bg1,
       así que acá se les da el valor nuevo y se reskinea solo.
       ================================================================= */
    --bg1:var(--tinta-900);
    --bg2:var(--tinta-800);
    --bg3:var(--tinta-700);

    --card:var(--tinta-700);
    --card-2:var(--tinta-600);
    --card-border:var(--linea);

    --text:var(--texto);
    --muted:var(--texto-2);
    --muted-2:var(--texto-3);

    --accent:var(--ambar);
    --accent-2:var(--ambar-claro);
    --accent-dark:var(--ambar-oscuro);
    --violet:var(--rosa);

    --green:var(--verde);
    --blue:var(--ambar-claro);
    --shadow:var(--sombra);
    --radius:var(--radio);
}

/* ---------------------------------------------------------------------
   Base
   --------------------------------------------------------------------- */

body{
    /* Tinta plana con un solo halo ámbar arriba: sin el degradé
       violeta/rosa que usa todo el rubro. */
    background:
        radial-gradient(1100px 420px at 50% -140px, rgba(232,180,92,.10), transparent 70%),
        var(--tinta-900) !important;
    color:var(--texto) !important;
    font-family:var(--fuente-ui) !important;
    -webkit-font-smoothing:antialiased;
}

h1, h2, h3, .fuente-titulo{
    font-family:var(--fuente-ui);
    font-weight:800;
    letter-spacing:-.025em;
}

h1{ font-weight:900; letter-spacing:-.035em; }

a{ color:var(--ambar); }
a:hover{ color:var(--ambar-claro); }

::selection{
    background:rgba(232,180,92,.28);
    color:var(--texto);
}

/* ---------------------------------------------------------------------
   Navbar: barra de tinta con hairline ámbar, sin blur de vidrio
   --------------------------------------------------------------------- */

.navbar-premium{
    background:rgba(11,11,15,.92) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    border-bottom:1px solid var(--linea) !important;
    box-shadow:none !important;
}

.navbar-brand{
    font-family:var(--fuente-titulo) !important;
    font-weight:600 !important;
    letter-spacing:-.03em !important;
    color:var(--texto) !important;
}

.navbar-brand span{
    background:none !important;
    -webkit-background-clip:initial !important;
    background-clip:initial !important;
    color:var(--ambar) !important;
}

.menu-link-premium{
    border-radius:var(--radio-chico) !important;
    font-family:var(--fuente-ui) !important;
    font-weight:500 !important;
    font-size:14px !important;
    color:var(--texto-2) !important;
    padding:9px 14px !important;
}

.menu-link-premium:hover{
    background:var(--tinta-700) !important;
    border-color:transparent !important;
    color:var(--texto) !important;
}

/* La sección activa se marca con una regla ámbar abajo, no con un pill. */
.menu-link-premium.active{
    background:transparent !important;
    border-color:transparent !important;
    color:var(--ambar) !important;
    box-shadow:inset 0 -2px 0 var(--ambar) !important;
    border-radius:0 !important;
}

.menu-link-premium.btn-panel{
    background:var(--ambar) !important;
    color:var(--tinta-900) !important;
    font-weight:700 !important;
    border-color:transparent !important;
    box-shadow:none !important;
}

.menu-link-premium.btn-panel:hover{
    background:var(--ambar-claro) !important;
    color:var(--tinta-900) !important;
    transform:none !important;
}

/* ---------------------------------------------------------------------
   Botones
   --------------------------------------------------------------------- */

.btn-accent,
.btn-filtros{
    background:var(--ambar) !important;
    color:var(--tinta-900) !important;
    border:none !important;
    border-radius:var(--radio-chico) !important;
    font-weight:700 !important;
    box-shadow:none !important;
}

.btn-accent:hover,
.btn-filtros:hover{
    background:var(--ambar-claro) !important;
    color:var(--tinta-900) !important;
    transform:none !important;
}

.btn-premium-outline{
    background:transparent !important;
    border:1px solid var(--linea-ambar) !important;
    color:var(--ambar) !important;
    border-radius:var(--radio-chico) !important;
}

.btn-premium-outline:hover{
    background:rgba(232,180,92,.10) !important;
    color:var(--ambar-claro) !important;
}

/* ---------------------------------------------------------------------
   Superficies heredadas: matar el vidrio esmerilado
   --------------------------------------------------------------------- */

.glass-card,
.hero-premium{
    background:var(--tinta-700) !important;
    border:1px solid var(--linea) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    box-shadow:none !important;
    border-radius:var(--radio) !important;
}

.eyebrow{
    color:var(--ambar) !important;
    font-family:var(--fuente-ui) !important;
    letter-spacing:.2em !important;
}

.eyebrow::before{
    background:var(--ambar) !important;
    box-shadow:none !important;
}

/* ---------------------------------------------------------------------
   Franja de confianza del home
   --------------------------------------------------------------------- */

.trust-item{
    background:transparent !important;
    border:1px solid var(--linea) !important;
    border-radius:var(--radio-chico) !important;
    color:var(--texto-2) !important;
    font-size:12px !important;
}

.trust-item i{ color:var(--ambar) !important; }

/* ---------------------------------------------------------------------
   Encabezados de sección: regla ámbar corta arriba del título
   --------------------------------------------------------------------- */

.seccion-head h2,
.listado-head h1{
    font-family:var(--fuente-titulo);
}

.seccion-head h2{
    position:relative;
    padding-top:12px;
}

.seccion-head h2::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:28px;
    height:2px;
    background:var(--ambar);
}

.seccion-head a{
    color:var(--ambar) !important;
    font-family:var(--fuente-ui);
    font-size:13px;
}

.seccion-head a:hover{ color:var(--ambar-claro) !important; }

/* ---------------------------------------------------------------------
   Bottom sheet de búsqueda del subfooter.
   Venía en blanco y rompía el tema oscuro.
   --------------------------------------------------------------------- */

.search-sheet-panel,
.mobile-subfooter{
    background:var(--tinta-800) !important;
    border-top:1px solid var(--linea) !important;
    color:var(--texto) !important;
}

.search-sheet-title{
    color:var(--texto) !important;
    font-family:var(--fuente-titulo) !important;
}

.search-sheet-handle{ background:var(--tinta-500) !important; }

.search-sheet-close{
    background:var(--tinta-700) !important;
    color:var(--texto-2) !important;
    border:1px solid var(--linea) !important;
}

.search-sheet-form input,
.search-sheet-form select,
.search-input-wrap input{
    background:var(--tinta-700) !important;
    border:1px solid var(--linea) !important;
    color:var(--texto) !important;
    border-radius:var(--radio-chico) !important;
}

.search-sheet-form option{ background:var(--tinta-700) !important; }

.search-sheet-form label,
.search-sheet-note{ color:var(--texto-2) !important; }

.search-sheet-submit{
    background:var(--ambar) !important;
    color:var(--tinta-900) !important;
    border:none !important;
    border-radius:var(--radio-chico) !important;
    font-weight:700 !important;
}

.subfooter-item{
    color:var(--texto-3) !important;
    background:transparent !important;
}

.subfooter-item.active{
    color:var(--ambar) !important;
    background:transparent !important;
}

/* ---------------------------------------------------------------------
   Gate de edad
   --------------------------------------------------------------------- */

.adult-box{
    background:var(--tinta-800) !important;
    border:1px solid var(--linea-ambar) !important;
    border-radius:var(--radio) !important;
}

.adult-badge{
    background:rgba(232,180,92,.14) !important;
    color:var(--ambar) !important;
}

.adult-logo{ font-family:var(--fuente-titulo) !important; }
.adult-logo span{ color:var(--ambar) !important; -webkit-text-fill-color:var(--ambar) !important; }
.adult-title{ font-family:var(--fuente-titulo) !important; }

.btn-adult-enter{
    background:var(--ambar) !important;
    color:var(--tinta-900) !important;
    border:none !important;
    font-weight:700 !important;
}

.btn-adult-exit{
    background:transparent !important;
    border:1px solid var(--linea) !important;
    color:var(--texto-2) !important;
}

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */

footer{
    border-top:1px solid var(--linea);
    color:var(--texto-3);
}

/* =====================================================================
   Bootstrap sobre fondo oscuro.
   registro.php, login.php y varias pantallas usan las clases claras de
   Bootstrap (bg-white, form-control, text-muted) y quedaban ilegibles.
   Se corrige acá una sola vez en vez de página por página.
   ===================================================================== */

.bg-white,
.bg-light{
    background-color:var(--tinta-700) !important;
    color:var(--texto) !important;
}

.border{ border-color:var(--linea) !important; }
.text-muted{ color:var(--texto-2) !important; }
.text-dark{ color:var(--texto) !important; }

.shadow-sm, .shadow{ box-shadow:none !important; }

.rounded-4{ border-radius:var(--radio) !important; }

/* --- Campos --- */

.form-control,
.form-select{
    background-color:var(--tinta-800) !important;
    border:1px solid var(--linea) !important;
    color:var(--texto) !important;
    border-radius:var(--radio-chico) !important;
    padding:11px 13px;
}

.form-control:focus,
.form-select:focus{
    background-color:var(--tinta-800) !important;
    border-color:var(--linea-ambar) !important;
    color:var(--texto) !important;
    box-shadow:0 0 0 3px rgba(232,180,92,.14) !important;
}

.form-control::placeholder{ color:var(--texto-3) !important; }
.form-select option{ background:var(--tinta-800); color:var(--texto); }

.form-label{
    color:var(--texto-2) !important;
    font-size:13px;
    font-weight:600;
    margin-bottom:6px;
}

.form-check-input{
    background-color:var(--tinta-800);
    border:1px solid var(--linea);
}

.form-check-input:checked{
    background-color:var(--ambar);
    border-color:var(--ambar);
}

.form-check-input:focus{
    border-color:var(--linea-ambar);
    box-shadow:0 0 0 3px rgba(232,180,92,.14);
}

.form-check-label{ color:var(--texto-2); }
.form-check-label a{ color:var(--ambar); }

/* --- Botones --- */

.btn-dark,
.btn-primary{
    background-color:var(--ambar) !important;
    border-color:var(--ambar) !important;
    color:var(--tinta-900) !important;
    font-weight:700;
    border-radius:var(--radio-chico) !important;
}

.btn-dark:hover,
.btn-primary:hover{
    background-color:var(--ambar-claro) !important;
    border-color:var(--ambar-claro) !important;
    color:var(--tinta-900) !important;
}

.btn-outline-dark,
.btn-outline-secondary{
    border-color:var(--linea) !important;
    color:var(--texto-2) !important;
    background:transparent !important;
    border-radius:var(--radio-chico) !important;
}

.btn-outline-dark:hover,
.btn-outline-secondary:hover{
    border-color:var(--linea-ambar) !important;
    color:var(--ambar) !important;
    background:rgba(232,180,92,.08) !important;
}

.badge.text-bg-dark{
    background-color:var(--ambar) !important;
    color:var(--tinta-900) !important;
}

/* --- Avisos --- */

.alert{
    border-radius:var(--radio-chico);
    border-width:1px;
}

.alert-danger{
    background-color:rgba(217,107,124,.12) !important;
    border-color:rgba(217,107,124,.35) !important;
    color:#F0A9B4 !important;
}

.alert-success{
    background-color:rgba(95,191,139,.12) !important;
    border-color:rgba(95,191,139,.35) !important;
    color:#9BDCBB !important;
}

.alert-info,
.alert-warning{
    background-color:rgba(232,180,92,.12) !important;
    border-color:var(--linea-ambar) !important;
    color:var(--ambar-claro) !important;
}

.card{
    background-color:var(--tinta-700);
    border:1px solid var(--linea);
    border-radius:var(--radio);
    color:var(--texto);
}

.card-header{
    background-color:transparent;
    border-bottom:1px solid var(--linea);
    color:var(--texto);
}

.table{ color:var(--texto); }
.table th{ color:var(--texto-2); border-color:var(--linea); }
.table td{ border-color:var(--linea); }

/* =====================================================================
   MOBILE
   El sitio se usa sobre todo desde el celular, así que acá se aprieta
   todo: el nav pasaba de 3 filas y el contenido arrancaba fuera de la
   primera pantalla.
   ===================================================================== */

@media (max-width:767.98px){

    /* --- Header en una sola fila: marca a la izquierda, CTA a la derecha,
           y las secciones como tira horizontal deslizable debajo. --- */

    .navbar-premium .container{
        display:block !important;
        position:relative;
        padding:8px 14px !important;
    }

    .navbar-brand{
        display:inline-block;
        font-size:1.15rem !important;
    }

    .menu-premium{
        flex-wrap:nowrap !important;
        overflow-x:auto;
        gap:2px !important;
        margin-top:6px;
        scrollbar-width:none;
        -webkit-overflow-scrolling:touch;
    }

    .menu-premium::-webkit-scrollbar{ display:none; }

    .menu-link-premium{
        flex:0 0 auto;
        padding:7px 11px !important;
        font-size:13px !important;
    }

    /* Publicate va adentro de la tira, al final.
     *
     * Estaba en position:absolute, anclado arriba a la derecha. Esa
     * regla se escribio cuando el header no tenia caja de cuenta; hoy
     * ahi vive el boton "Entrar", asi que Publicate le quedaba ENCIMA:
     * misma esquina, y como va despues en el HTML se llevaba todos los
     * toques. Desde el celular se apretaba "Entrar" y se abria Crear
     * cuenta, y no habia forma de darse cuenta mirando la pantalla.
     *
     * Adentro de la tira no se pisa con nada: se llega deslizando, como
     * a las secciones. */
    .menu-link-premium.btn-panel{
        padding:8px 14px !important;
        font-size:13px !important;
    }

    /* --- Densidad general --- */

    .home-hero{ padding:16px 0 4px !important; }

    .home-hero h1{
        font-size:1.5rem !important;
        margin-bottom:5px !important;
    }

    .home-hero p{
        font-size:13.5px;
        line-height:1.45;
    }

    /* Franja de confianza: una sola fila deslizable en vez de dos. */
    .trust-row{
        flex-wrap:nowrap !important;
        overflow-x:auto;
        gap:7px !important;
        margin-top:12px !important;
        padding-bottom:2px;
        scrollbar-width:none;
    }

    .trust-row::-webkit-scrollbar{ display:none; }

    .trust-item{
        flex:0 0 auto;
        padding:6px 10px !important;
        font-size:11.5px !important;
    }

    .seccion{ margin-top:18px !important; }

    .seccion-head h2{
        font-size:.95rem !important;
        padding-top:10px;
    }

    .listado-head{ padding:16px 0 2px !important; }

    .listado-head h1{ font-size:1.4rem !important; }

    /* Espacio para la barra inferior fija. */
    body{ padding-bottom:74px; }

    .container{ padding-left:14px; padding-right:14px; }

    /* --- Cards más compactas --- */

    .pcard-badge{
        padding:3px 7px;
        font-size:9.5px;
    }

    .pcard-badges{ top:6px; left:6px; right:40px; gap:4px; }

    .pcard-fav{ width:28px; height:28px; top:6px; right:6px; font-size:13px; }

    .pcard-body{ padding:9px 10px 11px; }

    .pcard-nombre{ font-size:13.5px; }
    .pcard-meta{ font-size:11px; }

    .pcard-estado{ padding:5px 7px; font-size:10px; }
    .pcard-estado-hace{ display:none; }

    /* El hover no existe en touch: sin zoom ni desplazamiento. */
    .pcard:hover{ transform:none; }
    .pcard:hover .pcard-img{ transform:none; }

    /* --- Estados más chicos --- */

    .estado-item{ width:62px; }
    .estado-aro{ width:56px; height:56px; }
    .estados-strip{ gap:10px; }

    /* --- Chips --- */

    .chips-bar{ gap:6px; }
    .chip{ padding:7px 12px; font-size:12px; }

    /* --- Objetivos táctiles de al menos 44px donde importa --- */

    .btn-accent,
    .btn-filtros,
    .btn-abrir-panel,
    .search-sheet-submit{
        min-height:44px;
    }
}

/* Pantallas muy angostas */
@media (max-width:359.98px){
    .pgrid{ grid-template-columns:1fr !important; }
}

/* La barra inferior fija: sacarle el resplandor rosa heredado. */
.mobile-subfooter .subfooter-item.active,
.mobile-subfooter .subfooter-item:active{
    background:transparent !important;
    box-shadow:none !important;
    color:var(--ambar) !important;
}

.mobile-subfooter .subfooter-item.active i{ color:var(--ambar) !important; }