/* Estilos propios en vez de Tailwind: el plan pedía no mantener un build de JS, y meter
   Tailwind obligaría precisamente a eso. Esto es pequeño, se cachea y no depende de nadie.

   Móvil primero, sin excusas: casi todo el tráfico va a llegar desde un teléfono, muchas
   veces con datos limitados. */

:root {
    --tinta: #16241f;
    --tinta-suave: #5c6b64;
    --fondo: #fbfaf7;
    --superficie: #ffffff;
    --borde: #e4e6e1;
    --marca: #0f7b52;
    --marca-oscura: #0a5c3d;
    --marca-clara: #e6f4ee;
    --barato: #0f7b52;
    --alerta: #b4441f;
    --radio: 12px;
    --sombra: 0 1px 2px rgba(22, 36, 31, .06), 0 4px 12px rgba(22, 36, 31, .04);
}

@media (prefers-color-scheme: dark) {
    :root {
        --tinta: #e8ece9;
        --tinta-suave: #9aa8a1;
        --fondo: #101613;
        --superficie: #182420;
        --borde: #26332d;
        --marca: #3cbb86;
        --marca-oscura: #2ea373;
        --marca-clara: #163024;
        --barato: #3cbb86;
        --sombra: none;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--fondo);
    color: var(--tinta);
    font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-text-size-adjust: 100%;
}

a { color: var(--marca-oscura); }
@media (prefers-color-scheme: dark) { a { color: var(--marca); } }

.contenedor { max-width: 780px; margin: 0 auto; padding: 0 16px; }

/* --- Cabecera --- */
header.principal {
    background: var(--superficie);
    border-bottom: 1px solid var(--borde);
    position: sticky;
    top: 0;
    z-index: 10;
}

.barra { display: flex; align-items: center; gap: 12px; padding: 12px 0; }

.logo {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--tinta);
    text-decoration: none;
    white-space: nowrap;
}
.logo span { color: var(--marca); }

/* --- Buscador --- */
.buscador { display: flex; gap: 8px; width: 100%; }

.buscador input {
    flex: 1;
    min-width: 0;
    padding: 12px 14px;
    font-size: 16px; /* menos de 16px hace que iOS haga zoom al enfocar */
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--fondo);
    color: var(--tinta);
}
.buscador input:focus { outline: 2px solid var(--marca); outline-offset: 1px; }

.boton {
    padding: 12px 18px;
    font-size: 1rem;
    font-weight: 600;
    border: 0;
    border-radius: var(--radio);
    background: var(--marca);
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}
.boton:hover { background: var(--marca-oscura); }
.boton.secundario { background: transparent; color: var(--marca); border: 1px solid var(--marca); }

/* --- Bloques --- */
.hero { padding: 32px 0 24px; text-align: center; }
.hero h1 { font-size: 1.7rem; margin: 0 0 8px; line-height: 1.25; }
.hero p { color: var(--tinta-suave); margin: 0 0 20px; }

.tarjeta {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 16px;
    margin-bottom: 12px;
}

.lista-limpia { list-style: none; padding: 0; margin: 0; }

/* --- Resultados y precios --- */
.resultado { display: block; padding: 14px 16px; text-decoration: none; color: inherit; }
.resultado:hover { background: var(--marca-clara); }
.resultado .nombre { font-weight: 600; }
.resultado .marca { color: var(--tinta-suave); font-size: .88rem; }

.precio-fila {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--borde);
}
.precio-fila:last-child { border-bottom: 0; }

.precio { font-size: 1.35rem; font-weight: 700; white-space: nowrap; }
.precio.mejor { color: var(--barato); }

.tienda { font-weight: 600; }
.meta { color: var(--tinta-suave); font-size: .85rem; }

.insignia {
    display: inline-block;
    font-size: .72rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--marca-clara);
    color: var(--marca-oscura);
    vertical-align: middle;
}
@media (prefers-color-scheme: dark) { .insignia { color: var(--marca); } }

.vacio { text-align: center; color: var(--tinta-suave); padding: 32px 16px; }

/* --- Categorías --- */
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.rejilla a {
    display: block;
    padding: 12px;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    text-decoration: none;
    color: var(--tinta);
    font-size: .92rem;
}
.rejilla a:hover { border-color: var(--marca); }

/* --- Pie --- */
footer.principal {
    margin-top: 40px;
    padding: 24px 0;
    border-top: 1px solid var(--borde);
    color: var(--tinta-suave);
    font-size: .88rem;
}

/* Indicador de carga de HTMX: sin esto la búsqueda parece colgada en una red lenta. */
.cargando { display: none; }
.htmx-request .cargando { display: inline; }
.htmx-request.buscador input { opacity: .7; }

/* Aviso de instalación de la PWA; sólo aparece si el navegador lo permite. */
#instalar { display: none; }