/* =========================================================
   QueBuscasRD — Tarjetas (un solo estilo para todo el sitio)

   Se carga desde includes/fuente_titulos.php, que lo incluyen
   TODAS las páginas: públicas, panel de empresa, admin y cliente.

   La idea: una tarjeta no se "dibuja" con una raya gris, se
   "posa" sobre el papel. Borde casi invisible, sombra larga y
   muy suave, esquinas amables. Lo que cambia entre familias es
   solo el tamaño de la esquina y si responde al pasar el mouse.

   Familias (ver comentario de cada bloque):
     1. Negocio en el directorio      (buscar, categorías, inicio)
     2. Catálogo dentro de la ficha   (productos, servicios, reseñas)
     3. Enlace / atajo                (categorías, ayuda, acciones)
     4. Contenedor de contenido       (paneles, cajas, documentos)
     5. Cifra / indicador             (tarjetas de números)
     6. Ventana emergente             (modales, confirmaciones)
     7. Fila de lista                 (citas, reseñas del panel)

   Por qué "html body" delante: cada página trae su propio CSS en
   línea. Con ese prefijo estas reglas ganan sin usar !important,
   y los estados de dos clases (.activa, .seleccionada, :hover
   propios de cada página) siguen funcionando.
   ========================================================= */

:root {
    --card-fondo:   #FFFFFF;
    --card-borde:   rgba(64, 60, 120, .09);
    --card-linea:   rgba(64, 60, 120, .08);   /* divisiones internas */
    --card-radio:   var(--r-lg, 16px);
    --card-radio-sm: calc(var(--card-radio) * .75);
    --card-radio-lg: calc(var(--card-radio) * 1.25);

    /* Tres capas: contacto, cuerpo y una sombra larga y difusa */
    /* Sombras con el matiz lila del sitio (no gris neutro): sobre
       el fondo #F4F4F9 se ven frescas y nunca tiran a beige. */
    --card-sombra:
        0 1px 1px rgba(64, 60, 120, .03),
        0 2px 6px -2px rgba(64, 60, 120, .05),
        0 14px 30px -18px rgba(64, 60, 120, .16);
    --card-sombra-hover:
        0 1px 1px rgba(64, 60, 120, .035),
        0 8px 16px -8px rgba(64, 60, 120, .09),
        0 26px 44px -24px rgba(64, 60, 120, .26);
    --card-sombra-plana: 0 1px 2px rgba(64, 60, 120, .045);
    --card-sombra-modal:
        0 2px 4px rgba(64, 60, 120, .05),
        0 30px 70px -20px rgba(40, 36, 90, .32);

    --card-mov: box-shadow .28s cubic-bezier(.2, .7, .2, 1), transform .28s cubic-bezier(.2, .7, .2, 1), border-color .2s ease;
}


/* ---------------------------------------------------------
   1. NEGOCIO EN EL DIRECTORIO
--------------------------------------------------------- */
html body .negocio {
    background: var(--card-fondo);
    border: 1px solid var(--card-borde);
    border-radius: var(--card-radio);
    box-shadow: var(--card-sombra);
    transition: var(--card-mov);
}
html body .negocio:hover {
    border-color: var(--card-borde);
    box-shadow: var(--card-sombra-hover);
    transform: translateY(-2px);
}
html body .negocio-info { padding: 1.15rem 1.2rem 1.25rem; }

/* Estilo de tarjeta elegido por el negocio en Personalizar */
html body .negocio-estilo-elevado { box-shadow: var(--card-sombra-hover); }
html body .negocio-estilo-borde,
html body .negocio-estilo-borde:hover { border: 1.5px solid color-mix(in srgb, var(--c) 55%, transparent); }
html body .negocio-pie { border-top-color: var(--card-linea); }
html body .negocio-logo { border-radius: 10px; border-width: 3px; box-shadow: 0 2px 8px -2px rgba(23, 35, 49, .18); }

/* Portadas automáticas (cuando el negocio no subió foto): en las
   miniaturas del directorio pasan de bloque saturado con cortes
   duros a un lavado suave del color del propio negocio, con una
   trama de puntos finos. La ficha del negocio conserva su portada
   completa; esto es solo para las tarjetas. */
html body .negocio-imagen.preset {
    background-color: #EEF1F3;
    background-color: color-mix(in srgb, var(--primario) 11%, #fff);
    background-image: radial-gradient(color-mix(in srgb, var(--primario) 20%, transparent) 1px, transparent 1.3px);
    background-size: 14px 14px;
}
html body .negocio-imagen.preset .negocio-imagen-icono {
    color: var(--primario) !important;
    filter: none;
    opacity: .85;
}

/* Corazón de favoritos: redondo y liviano */
html body .favorito-btn:not(.top-fav) {
    width: 34px; height: 34px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 2px 10px -2px rgba(23, 35, 49, .22);
}
html body .favorito-btn:not(.top-fav) svg { width: 17px; height: 17px; }
html body .favorito-btn.activo { background: #fff; }

/* Destacados: tiene su propio estilo de lista (assets/css/destacados.css) */

/* Nuevos: tiene su propio estilo de lista (app.css, 33.5) */


/* ---------------------------------------------------------
   2. CATÁLOGO DENTRO DE LA FICHA DEL NEGOCIO
   Usan el radio que el negocio eligió (recto, suave, redondo).
--------------------------------------------------------- */
html body .producto,
html body .servicio,
html body .resena-tarjeta,
html body .prod {
    background: var(--card-fondo);
    border: 1px solid var(--card-borde);
    border-radius: var(--card-radio);
    box-shadow: var(--card-sombra);
    transition: var(--card-mov);
}
html body .producto:hover,
html body .servicio:hover,
html body .prod:hover {
    border-color: var(--card-borde);
    box-shadow: var(--card-sombra-hover);
}

html body .tarjeta-seccion {
    border: 1px solid var(--card-borde);
    border-radius: var(--card-radio-lg);
    box-shadow: var(--card-sombra);
}
html body .seccion .contenedor > .tarjeta-seccion { border-top: 1px solid var(--card-borde); }

html body .barra-mi-cita {
    border: 1px solid var(--card-borde);
    border-radius: var(--card-radio);
    box-shadow: var(--card-sombra-plana);
}
html body .info-fila { border-top-color: var(--card-linea); }
html body .info-mapa { border-color: var(--card-borde); border-radius: var(--card-radio-sm); }


/* ---------------------------------------------------------
   3. ENLACE / ATAJO
   Tarjetas que llevan a otra página: sombra plana en reposo,
   se levantan apenas al pasar el mouse.
--------------------------------------------------------- */
html body .categoria-tarjeta,
html body .ay-card,
html body .nuevos-spotlight-item {
    background: var(--card-fondo);
    border: 1px solid var(--card-borde);
    border-radius: var(--card-radio);
    box-shadow: var(--card-sombra-plana);
    transition: var(--card-mov);
}
html body .categoria-tarjeta:hover,
html body .ay-card:hover,
html body .nuevos-spotlight-item:hover {
    border-color: var(--card-borde);
    box-shadow: var(--card-sombra-hover);
    transform: translateY(-2px);
}

html body .neg3-puntos {
    border: 1px solid var(--card-borde);
    border-radius: var(--card-radio-lg);
    box-shadow: var(--card-sombra);
}
html body .neg3-puntos li { border-top-color: var(--card-linea); }

/* Estado vacío: se queda con el estilo de cada página (app.css para
   las públicas). Aquí no se toca porque dentro de los paneles va
   sin marco. */


/* ---------------------------------------------------------
   4. CONTENEDOR DE CONTENIDO
   Paneles y cajas que agrupan formularios, tablas o texto.
   No responden al mouse: no son clicables.
--------------------------------------------------------- */
html body .panel,
html body .ay-panel,
html body .ay-indice,
html body .caja,
html body .card,
html body .cp-card,
html body .panel-form,
html body .legal-texto,
html body .legal-indice,
html body .doc,
html body .pui-grafica-panel,
html body .tarjeta-plata,
html body .cancelar-cliente-card,
html body .producto-resumen,
html body .bloque-seguro {
    background: var(--card-fondo);
    border: 1px solid var(--card-borde);
    border-radius: var(--card-radio);
    box-shadow: var(--card-sombra);
}
html body .pui-grafica-panel:hover { box-shadow: var(--card-sombra); transform: none; }

/* Divisiones internas de los paneles: más claras */
html body .panel-cabecera,
html body .panel-head,
html body .panel-encabezado,
html body .panel-header {
    border-bottom-color: var(--card-linea);
}


/* ---------------------------------------------------------
   5. CIFRA / INDICADOR
   Las tarjetas de números de los paneles.
--------------------------------------------------------- */
html body .estadisticas > .tarjeta,
html body .tarjeta,
html body .stat,
html body .estadistica {
    background: var(--card-fondo);
    border: 1px solid var(--card-borde);
    border-radius: var(--card-radio);
    box-shadow: var(--card-sombra-plana);
    transition: var(--card-mov);
}
html body .estadisticas > .tarjeta:hover,
html body .stat:hover,
html body .estadistica:hover {
    box-shadow: var(--card-sombra);
    transform: none;
}
html body .tarjeta-icono { border-radius: 10px; }


/* ---------------------------------------------------------
   6. VENTANA EMERGENTE
--------------------------------------------------------- */
html body .modal,
html body .modal-card,
html body .modal-resena-caja,
html body .pui-confirmar-caja,
html body .fav-prompt {
    border: 1px solid rgba(23, 35, 49, .06);
    border-radius: var(--card-radio-lg);
    box-shadow: var(--card-sombra-modal);
}


/* ---------------------------------------------------------
   7. FILA DE LISTA
   Elementos repetidos dentro de un contenedor: sin sombra,
   solo el borde fino, para no apilar sombras sobre sombras.
--------------------------------------------------------- */
html body .cita,
html body .resena {
    border: 1px solid var(--card-borde);
    border-radius: var(--card-radio-sm);
    box-shadow: none;
}


@media (prefers-reduced-motion: reduce) {
    html body .negocio:hover,
    html body .categoria-tarjeta:hover,
    html body .ay-card:hover,
    html body .nuevos-spotlight-item:hover { transform: none; }
}


/* ---------------------------------------------------------
   AVISOS SIN RELLENO CREMA
   Los avisos de "atención" ya no se pintan de amarillo pálido
   (se veía beige). Fondo lila del sitio, franja ámbar a la
   izquierda; el texto y el ícono conservan su tono ámbar.
--------------------------------------------------------- */
html body .aviso-plan-amarillo,
html body .alerta-aviso,
html body .alerta.aviso {
    background: #fff;
    box-shadow: inset 3px 0 0 #E6B455, 0 1px 2px rgba(23, 35, 49, .04);
}


/* ---------------------------------------------------------
   PERFIL COMPLETO ("Completa tu ficha", panel de empresa)
--------------------------------------------------------- */
html body .pc {
    margin: 0 0 22px;
    padding: 22px 24px;
    background: #fff;
    border: 1px solid var(--card-borde);
    border-radius: var(--card-radio);
    box-shadow: var(--card-sombra);
}
.pc-cabeza { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.pc-anillo {
    --pc: 0;
    flex: 0 0 64px; width: 64px; height: 64px; border-radius: 50%;
    display: grid; place-items: center;
    background:
        radial-gradient(closest-side, #fff 78%, transparent 79%),
        conic-gradient(#1D7B7F calc(var(--pc) * 1%), #E7E7F0 0);
}
.pc-anillo span { font-size: 15px; font-weight: 800; color: #172331; letter-spacing: -.02em; }
.pc-texto { flex: 1 1 260px; min-width: 0; }
.pc-texto h2 { margin: 0 0 3px; font-size: 18px; font-weight: 800; letter-spacing: -.02em; color: #172331; }
.pc-texto p { margin: 0; font-size: 13.5px; line-height: 1.5; color: #56616D; }
.pc-siguiente {
    display: inline-flex; align-items: center; gap: 7px;
    height: 40px; padding: 0 16px; border-radius: 8px;
    background: #18334E; color: #fff !important;
    font-size: 13.5px; font-weight: 700; text-decoration: none !important; white-space: nowrap;
}
.pc-siguiente:hover { background: #0F2438; }
.pc-siguiente svg { width: 15px; height: 15px; }

.pc-pasos {
    list-style: none; margin: 18px 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px;
}
.pc-paso { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--card-linea); min-width: 0; }
.pc-marca {
    flex: 0 0 22px; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%;
    display: grid; place-items: center;
    border: 1.5px dashed #BDBDCF; color: #fff;
}
.pc-paso.hecho .pc-marca { border: 0; background: #1D7B7F; }
.pc-marca svg { width: 13px; height: 13px; stroke-width: 3; }
.pc-paso-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; color: inherit; text-decoration: none !important; }
.pc-paso-texto strong { font-size: 14px; font-weight: 700; color: #172331; }
.pc-paso-texto span { font-size: 12.5px; line-height: 1.45; color: #56616D; }
a.pc-paso-texto:hover strong { text-decoration: underline; text-underline-offset: 3px; color: #1D7B7F; }
.pc-paso.hecho strong { color: #8B939C; font-weight: 600; text-decoration: line-through; text-decoration-color: rgba(23,35,49,.25); }

@media (max-width: 720px) {
    .pc-pasos { grid-template-columns: minmax(0, 1fr); }
    .pc-siguiente { width: 100%; justify-content: center; }
}
.pc .solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }


/* =========================================================
   SELLO "VERIFICADO"
   Icono pequeño pegado al nombre. Mismo turquesa oscuro del
   acento: discreto, no compite con el nombre del negocio.
   ========================================================= */

html body .sello-verificado {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 5px;
    vertical-align: -0.12em;
    color: #1D7B7F;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
}

html body .sello-verificado svg {
    width: .95em;
    height: .95em;
    min-width: 14px;
    min-height: 14px;
    stroke-width: 2.4;
    fill: #E3F3F3;
}

/* Versión con texto (ficha del negocio) */
html body .sello-verificado-texto {
    margin-left: 10px;
    padding: 4px 9px 4px 7px;
    border-radius: 999px;
    background: #E8F4F4;
    box-shadow: inset 0 0 0 1px rgba(29, 123, 127, .18);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0;
    vertical-align: .3em;
}

html body .sello-verificado-texto svg {
    width: 14px;
    height: 14px;
    fill: none;
}

/* En el tablón el nombre se corta con "…": el sello no debe perderse */
html body .nv-nombre { display: flex; align-items: center; min-width: 0; }
html body .nv-nombre-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body .nv-nombre .sello-verificado { margin-left: 5px; flex: none; }