/*!
 * © 2026 Weimar Armando Chávez García. Todos los derechos reservados.
 * Proyecto: Farmacias Paraguay — farmacias-paraguay.universopráctico.com
 * Queda prohibida la reproducción, distribución o modificación total o
 * parcial de estos estilos sin autorización expresa y por escrito del autor.
 * fingerprint: WACG-FCP-2026-CSS
 */
:root {
    --fc-primario: #0e7c66;
    --fc-primario-oscuro: #0a5c4c;
    --fc-acento: #f97316;
    --fc-texto: #1f2937;
    --fc-texto-suave: #6b7280;
    --fc-fondo: #f7f9f8;
    --fc-tarjeta: #ffffff;
    --fc-borde: #e5e7eb;
    --fc-descuento: #dc2626;
    --fc-radio: 10px;
    --fc-sombra: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.06);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--fc-fondo);
    color: var(--fc-texto);
    line-height: 1.5;
}

.fc-contenedor {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header */
.fc-header {
    background: linear-gradient(135deg, var(--fc-primario), var(--fc-primario-oscuro));
    color: #fff;
    padding: 28px 0 34px;
}

.fc-header-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.fc-marca {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
}

.fc-marca-icono { font-size: 1.8rem; }
.fc-marca-texto { letter-spacing: 0.02em; }

.fc-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.fc-nav a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    padding: 6px 10px;
    border-radius: 6px;
}

.fc-nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }
.fc-nav a.activo { color: #fff; background: rgba(255, 255, 255, 0.18); }

.fc-tagline {
    margin: 6px 0 0;
    opacity: 0.9;
    font-size: 0.98rem;
}

/* Buscador */
.fc-buscador {
    margin-top: -20px;
}

#formBusqueda {
    display: flex;
    gap: 10px;
    background: var(--fc-tarjeta);
    padding: 10px;
    border-radius: var(--fc-radio);
    box-shadow: var(--fc-sombra);
}

.fc-input-envoltorio {
    position: relative;
    flex: 1;
}

#inputBusqueda {
    width: 100%;
    padding: 14px 16px;
    font-size: 1rem;
    border: 1px solid var(--fc-borde);
    border-radius: 8px;
    outline: none;
}

#inputBusqueda:focus {
    border-color: var(--fc-primario);
}

#formBusqueda > button {
    padding: 14px 22px;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background: var(--fc-primario);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
}

#formBusqueda > button:hover { background: var(--fc-primario-oscuro); }

.fc-nota {
    font-size: 0.82rem;
    color: var(--fc-texto-suave);
    margin: 10px 4px 0;
}

/* Ventana flotante de sugerencias (autocompletado) */
.fc-sugerencias {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--fc-tarjeta);
    border: 1px solid var(--fc-borde);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.14);
    max-height: 360px;
    overflow-y: auto;
    z-index: 30;
    padding: 6px;
}

.fc-sugerencia {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 10px 10px;
    border-radius: 7px;
    cursor: pointer;
    font: inherit;
    color: var(--fc-texto);
}

.fc-sugerencia:hover,
.fc-sugerencia.fc-activa {
    background: var(--fc-fondo);
}

.fc-sugerencia-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.fc-sugerencia-nombre {
    font-size: 0.88rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fc-sugerencia-farmacia {
    font-size: 0.75rem;
    color: var(--fc-primario);
    font-weight: 600;
}

.fc-sugerencia-precio {
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}

.fc-sugerencia-mas {
    text-align: center;
    padding: 8px;
    font-size: 0.8rem;
    color: var(--fc-texto-suave);
}

.fc-sugerencias-vacio {
    padding: 14px 10px;
    font-size: 0.85rem;
    color: var(--fc-texto-suave);
    text-align: center;
}

/* Controles de resultados */
.fc-controles {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.fc-controles[hidden] { display: none; }

.fc-info-resultados {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.92rem;
    color: var(--fc-texto-suave);
}

.fc-badge-cache {
    background: #eef2ff;
    color: #4338ca;
    font-size: 0.75rem;
    padding: 3px 8px;
    border-radius: 999px;
}

.fc-orden { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; }

.fc-orden select {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--fc-borde);
    background: var(--fc-tarjeta);
}

/* Estado (cargando / error / sin resultados) */
.fc-estado {
    margin-top: 24px;
    padding: 18px;
    text-align: center;
    border-radius: var(--fc-radio);
    background: var(--fc-tarjeta);
    color: var(--fc-texto-suave);
    box-shadow: var(--fc-sombra);
}

.fc-estado.fc-error { color: #b91c1c; }

/* Resultados */
.fc-resultados {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 14px;
}

.fc-tarjeta-producto {
    background: var(--fc-tarjeta);
    border-radius: var(--fc-radio);
    box-shadow: var(--fc-sombra);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    border-top: 3px solid var(--fc-primario);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.fc-tarjeta-producto:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(16, 24, 40, 0.12), 0 2px 6px rgba(16, 24, 40, 0.08);
}

/* Acento pastel por farmacia: un fondo muy suave + el borde superior en su color de marca,
   para poder distinguir de un vistazo de qué farmacia es cada tarjeta. */
.fc-tarjeta-producto[data-farmacia="catedral"] { background: #eef2f9; border-top-color: #17427d; }
.fc-tarjeta-producto[data-farmacia="biggie"] { background: #edf6f1; border-top-color: #3f865d; }
.fc-tarjeta-producto[data-farmacia="farmacenter"] { background: #eafaf1; border-top-color: #0ea750; }
.fc-tarjeta-producto[data-farmacia="farmaoliva"] { background: #eaf0fb; border-top-color: #00318e; }
.fc-tarjeta-producto[data-farmacia="puntofarma"] { background: #f2ecf8; border-top-color: #5f3182; }

.fc-tarjeta-imagen {
    width: 100%;
    height: 128px;
    border-radius: 8px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(16, 24, 40, 0.06);
}

.fc-tarjeta-imagen img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Cuando se muestra el logo de la farmacia (no hay foto del producto), el logo va
   sobre su propio color de marca en vez de fondo blanco -- igual que los chips de arriba. */
.fc-tarjeta-imagen--logo { background: var(--fc-color-farmacia, #f3f4f6); }
.fc-tarjeta-imagen--logo img { max-width: 70%; max-height: 55%; }
.fc-tarjeta-producto[data-farmacia="catedral"] .fc-tarjeta-imagen--logo { background: #eef2f9; }
.fc-tarjeta-producto[data-farmacia="biggie"] .fc-tarjeta-imagen--logo { background: #4da372; }
.fc-tarjeta-producto[data-farmacia="farmacenter"] .fc-tarjeta-imagen--logo { background: #f2faf5; }
.fc-tarjeta-producto[data-farmacia="farmaoliva"] .fc-tarjeta-imagen--logo { background: #00318e; }
.fc-tarjeta-producto[data-farmacia="puntofarma"] .fc-tarjeta-imagen--logo { background: #5f3182; }

.fc-tarjeta-imagen--vacia {
    background: repeating-linear-gradient(135deg, #f3f4f6, #f3f4f6 8px, #eceef1 8px, #eceef1 16px);
}

.fc-tarjeta-farmacia {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--fc-primario);
}

.fc-tarjeta-nombre {
    font-size: 0.94rem;
    font-weight: 600;
    color: var(--fc-texto);
    min-height: 2.6em;
}

.fc-tarjeta-precios {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: auto;
}

.fc-precio-actual {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--fc-texto);
}

.fc-precio-anterior {
    font-size: 0.85rem;
    color: var(--fc-texto-suave);
    text-decoration: line-through;
}

.fc-descuento-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    background: var(--fc-descuento);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 6px;
}

.fc-tarjeta-boton {
    display: inline-block;
    margin-top: 6px;
    text-align: center;
    padding: 9px 12px;
    border-radius: 7px;
    background: var(--fc-fondo);
    color: var(--fc-primario);
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    border: 1px solid var(--fc-borde);
}

.fc-tarjeta-boton:hover {
    background: var(--fc-primario);
    color: #fff;
    border-color: var(--fc-primario);
}

/* Bienvenida (antes de la primera búsqueda) */
.fc-bienvenida {
    text-align: center;
    padding: 56px 16px;
}

.fc-bienvenida h1 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.fc-bienvenida p {
    color: var(--fc-texto-suave);
    max-width: 520px;
    margin: 0 auto;
}

/* CORRECCIÓN #7: encabezados H2 agregados dentro de "bienvenida"
   (antes la página no tenía ningún H2, solo el H1 principal). */
.fc-bienvenida h2.fc-subtitulo {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--fc-texto);
    margin: 46px 0 4px;
}

.fc-pasos {
    max-width: 480px;
    margin: 14px auto 0;
    padding-left: 22px;
    text-align: left;
    color: var(--fc-texto-suave);
    font-size: 0.92rem;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fc-pasos strong { color: var(--fc-texto); }

.fc-farmacias-chip {
    margin-top: 18px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
}

.fc-farmacia-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: var(--fc-tarjeta);
    border: 1px solid var(--fc-borde);
    border-radius: 14px;
    padding: 10px 16px 12px;
    box-shadow: var(--fc-sombra);
}

.fc-farmacia-nombre {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--fc-texto-suave);
    white-space: nowrap;
}

.fc-farmacia-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 108px;
    height: 44px;
    border-radius: 8px;
    overflow: hidden;
}

.fc-farmacia-logo img {
    max-width: 82%;
    max-height: 70%;
    object-fit: contain;
    display: block;
}

/* Cada farmacia lleva el fondo de su propio color de marca detrás del logo,
   necesario sobre todo para los logos que vienen en blanco (Punto Farma, Farma Oliva). */
.fc-farmacia-logo--catedral { background: #eef2f9; }
.fc-farmacia-logo--biggie { background: #4da372; }
.fc-farmacia-logo--farmacenter { background: #f2faf5; }
.fc-farmacia-logo--farmaoliva { background: #00318e; }
.fc-farmacia-logo--puntofarma { background: #5f3182; }

/* ==========================================================================
   Espacios publicitarios (placeholders). NO son anuncios reales: son huecos
   marcados para reservar el lugar donde más adelante se integrará
   publicidad real (ej. Google AdSense). Cuatro formatos/posiciones:
   banner superior, banner medio, pop-up al buscar, y notificación de
   esquina. Todos comparten el estilo base ".fc-anuncio".
   ========================================================================== */
.fc-anuncio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: repeating-linear-gradient(45deg, #eef1f4, #eef1f4 10px, #e4e8ec 10px, #e4e8ec 20px);
    border: 2px dashed #b7c0cb;
    border-radius: 10px;
    color: #6b7684;
    text-align: center;
    user-select: none;
}

.fc-anuncio-etiqueta {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.fc-anuncio-medida {
    font-size: 0.72rem;
    color: #8a94a1;
}

/* Banner horizontal debajo de la herramienta de búsqueda */
.fc-anuncio-banner-superior {
    margin: 22px auto 0;
    width: 100%;
    max-width: 728px;
    min-height: 90px;
}

/* Banner a mitad del contenido (entre las farmacias y el resto) */
.fc-anuncio-banner-medio {
    margin: 30px auto 0;
    width: 100%;
    max-width: 336px;
    min-height: 200px;
}

/* Pop-up que aparece al realizar una búsqueda */
.fc-anuncio-popup {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(17, 24, 39, 0.55);
    padding: 16px;
}

.fc-anuncio-popup[hidden] { display: none; }

.fc-anuncio-popup-caja {
    position: relative;
    background: #fff;
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 12px 32px rgba(16, 24, 40, 0.25);
}

.fc-anuncio-popup-cerrar {
    /* 40x40: más cerca del mínimo de 44x44 recomendado para objetivos táctiles
       (WCAG 2.5.5) que los 32x32 originales, sin desbordar la caja del popup. */
    position: absolute;
    top: -16px;
    right: -16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--fc-texto);
    color: #fff;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(16, 24, 40, 0.3);
}

.fc-anuncio-popup-cerrar:hover { background: var(--fc-primario-oscuro); }

.fc-anuncio-popup-contenido {
    width: 300px;
    max-width: 100%;
    min-height: 250px;
}

/* Notificación pequeña de esquina */
.fc-anuncio-esquina {
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 8px;
}

.fc-anuncio-esquina[hidden] { display: none; }

.fc-anuncio-esquina-contenido {
    width: 250px;
    max-width: calc(100vw - 90px);
    min-height: 100px;
}

.fc-anuncio-esquina-cerrar {
    /* 34x34: más grande que los 26x26 originales para el dedo en celular,
       sin salirse del viewport en pantallas angostas (ver .fc-anuncio-esquina
       en el media query de abajo, que además reduce este botón a 30x30). */
    position: absolute;
    top: -12px;
    right: -12px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: var(--fc-texto);
    color: #fff;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(16, 24, 40, 0.3);
}

.fc-anuncio-esquina-cerrar:hover { background: var(--fc-primario-oscuro); }

/* Footer */
.fc-footer {
    margin-top: 50px;
    padding: 22px 0 40px;
    border-top: 1px solid var(--fc-borde);
}

.fc-footer p {
    font-size: 0.78rem;
    color: var(--fc-texto-suave);
    text-align: center;
}

.fc-nav-footer {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-bottom: 14px;
}

.fc-nav-footer a {
    font-size: 0.82rem;
    color: var(--fc-primario);
    text-decoration: none;
    font-weight: 600;
}

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

.fc-footer-copy {
    margin-top: 8px;
    color: #9ca3af !important;
}

/* Páginas de texto: Quiénes Somos / Términos / Privacidad */
.fc-pagina-texto {
    max-width: 760px;
    margin: 0 auto;
    padding: 40px 20px 20px;
}

.fc-pagina-texto h1 {
    font-size: 1.7rem;
    margin-bottom: 4px;
}

.fc-pagina-texto h2 {
    font-size: 1.15rem;
    margin-top: 34px;
    margin-bottom: 8px;
    color: var(--fc-primario-oscuro);
}

.fc-pagina-texto p,
.fc-pagina-texto li {
    color: var(--fc-texto);
    font-size: 0.96rem;
}

.fc-pagina-texto ul {
    padding-left: 22px;
}

.fc-pagina-texto li {
    margin-bottom: 6px;
}

.fc-pagina-texto a {
    color: var(--fc-primario);
}

.fc-fecha-actualizacion {
    color: var(--fc-texto-suave);
    font-size: 0.85rem;
    margin-top: 0;
}

@media (max-width: 520px) {
    #formBusqueda { flex-direction: column; }
    .fc-marca { font-size: 1.35rem; }

    .fc-farmacias-chip { gap: 10px; }
    .fc-farmacia-item { padding: 8px 12px 10px; }
    .fc-farmacia-logo { width: 92px; height: 38px; }

    .fc-tarjeta-imagen { height: 108px; }

    .fc-anuncio-banner-superior,
    .fc-anuncio-banner-medio { min-height: 70px; }
    .fc-anuncio-popup-contenido { width: 260px; min-height: 200px; }
    .fc-anuncio-esquina-contenido { width: 200px; min-height: 80px; }
    .fc-anuncio-esquina { bottom: 10px; right: 10px; }
    /* En pantallas angostas, un botón de 34px con -12px de desborde se saldría
       del viewport (el aviso ya está pegado a right:10px). Lo bajamos un poco
       para que quede visible completo, sigue siendo más grande que el 26px original. */
    .fc-anuncio-esquina-cerrar { width: 30px; height: 30px; top: -9px; right: -9px; font-size: 0.95rem; }
}

/* Nota: el ítem "anuncio de esquina superpuesto en móvil" (recomendación #5
   del informe) no se tocó — no estaba entre las correcciones pedidas para
   esta tanda (se pidieron 1, 2, 3, 4, 6, 7 y 8). */