/* ============================================================================
 *  assets/css/tema-claro.css — Tema claro de Regalos virtuales
 * ============================================================================
 *  Solo lo carga la web que lo pide en includes/sitio.php ('css_extra'); va
 *  después de los estilos comunes (candles.css, style.css, botones.css…), que
 *  se diseñaron sobre fondo negro para Velario y Enviaunarosa y no se tocan.
 *  Todo va dentro de html[data-web="regalos"] para que nunca afecte a las otras.
 * ============================================================================ */
html[data-web="regalos"] {
  --claro-fondo: #ffffff;
  --claro-fondo-suave: #faf5ff;
  --claro-texto: #1f2937;
  --claro-texto-suave: #4b5563;
  --claro-marca: #6d28d9;
  --claro-marca-2: #be185d;
  --claro-borde: #e9d5ff;
}

/* --- Página y tarjetas del listado --- */
html[data-web="regalos"] body { background-color: var(--claro-fondo); color: var(--claro-texto); }
html[data-web="regalos"] .card { background-color: transparent; }
/* candles.js pone un borde negro de 10px en línea a cada tarjeta; el de «tu regalo» es morado */
html[data-web="regalos"] #results_box .card { border-color: var(--claro-fondo) !important; }
html[data-web="regalos"] #results_box .card[style*="193 130 255"] { border-color: #ede4ff !important; border-radius: 16px; }
html[data-web="regalos"] #results_box,
html[data-web="regalos"] #results_box p { color: var(--claro-texto-suave); }
html[data-web="regalos"] #miDiv { background-color: var(--claro-fondo-suave); color: var(--claro-texto); border-color: var(--claro-borde); }

/* --- Menú principal: barra morada (antes negra) --- */
html[data-web="regalos"] .navbar-mainbg { background-color: var(--claro-marca); }
html[data-web="regalos"] .hori-selector .left:before,
html[data-web="regalos"] .hori-selector .right:before { background-color: var(--claro-marca); }

/* --- Banderas --- */
html[data-web="regalos"] .lang-button,
html[data-web="regalos"] .lang-button:hover { background-color: var(--claro-fondo) !important; border-color: var(--claro-fondo) !important; }

/* --- Botones de tipo: tinte claro del color de cada uno y texto oscuro --- */
html[data-web="regalos"] #buttonstop .boton-tipo {
  background-color: color-mix(in srgb, var(--c) 12%, #ffffff);
  color: color-mix(in srgb, var(--c) 75%, #000000);
  border-color: color-mix(in srgb, var(--c) 55%, #ffffff);
}
html[data-web="regalos"] #buttonstop .boton-tipo:hover,
html[data-web="regalos"] #buttonstop .boton-tipo:focus-visible {
  background-color: color-mix(in srgb, var(--c) 22%, #ffffff);
  border-color: var(--c);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent), 0 8px 20px rgba(17, 24, 39, 0.12);
}
html[data-web="regalos"] #buttonstop .boton-eterna { background-color: #fffbeb; border-color: #d4a017; color: #8a5a00; }
html[data-web="regalos"] #buttonstop .boton-eterna:hover { background-color: #fef3c7; }

/* --- Buscador --- */
html[data-web="regalos"] #search_word22 { border: 1.5px solid var(--claro-borde); }

/* --- Detalles --- */
html[data-web="regalos"] .navbar-mainbg .navbar-logo { color: #ffffff; }
html[data-web="regalos"] span[style*="DDDDDD"] { color: var(--claro-texto-suave) !important; }   /* «No hay resultados.» (candles.js) */