/* ============================================================
   card-backgrounds.css — Ampara
   Fondos de imagen para tarjetas de navegación y home.

   ✂  Eliminar de styles.css estas líneas una vez importado:
       → 1501–1847  (card-rcp … card-glosario)
       → 1848–1893  (home-bg)
       → 2026–2065  (card-download)

   📌 No se requieren cambios en el HTML.
   ============================================================ */


/* ============================================================
   BASE COMPARTIDA
   Todas las tarjetas de navegación comparten esta estructura.
   Solo el fondo cambia vía --card-bg.
   ============================================================ */

.card-rcp,
.card-heridas,
.card-quemaduras,
.card-fracturas,
.card-envenenamiento,
.card-emergencias,
.card-botiquin,
.card-glosario {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0.10)),
    var(--card-bg);
}

/* Texto legible sobre imagen */
.card-rcp h2,         .card-rcp .subtitle,
.card-heridas h2,     .card-heridas .subtitle,
.card-quemaduras h2,  .card-quemaduras .subtitle,
.card-fracturas h2,   .card-fracturas .subtitle,
.card-envenenamiento h2, .card-envenenamiento .subtitle,
.card-emergencias h2, .card-emergencias .subtitle,
.card-botiquin h2,    .card-botiquin .subtitle,
.card-glosario h2,    .card-glosario .subtitle {
  color: #ffffff !important;
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.9);
}

/* Hover — overlay más oscuro */
.card-rcp:hover,
.card-heridas:hover,
.card-quemaduras:hover,
.card-fracturas:hover,
.card-envenenamiento:hover,
.card-emergencias:hover,
.card-botiquin:hover,
.card-glosario:hover {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.20)),
    var(--card-bg);
  transform: scale(1.02);
}

/* Dark mode — overlay ligeramente más oscuro */
body.dark-mode .card-rcp,
body.dark-mode .card-heridas,
body.dark-mode .card-quemaduras,
body.dark-mode .card-fracturas,
body.dark-mode .card-envenenamiento,
body.dark-mode .card-emergencias,
body.dark-mode .card-botiquin,
body.dark-mode .card-glosario {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)),
    var(--card-bg);
}


/* ============================================================
   IMÁGENES INDIVIDUALES
   Para cambiar un fondo, solo editar su URL aquí.
   ============================================================ */

.card-rcp            { --card-bg: url("https://cdn.jsdelivr.net/gh/nauthix/data_set@main/img/fondo-rcp.png"); }
.card-heridas        { --card-bg: url("https://cdn.jsdelivr.net/gh/nauthix/data_set@main/img/fondo-heridas.png"); }
.card-quemaduras     { --card-bg: url("https://cdn.jsdelivr.net/gh/nauthix/data_set@main/img/fondo-quemaduras.png"); }
.card-fracturas      { --card-bg: url("https://cdn.jsdelivr.net/gh/nauthix/data_set@main/img/fondo-fracturas.png"); }
.card-envenenamiento { --card-bg: url("https://cdn.jsdelivr.net/gh/nauthix/data_set@main/img/fondo-envenenamiento.png"); }
.card-emergencias    { --card-bg: url("https://cdn.jsdelivr.net/gh/nauthix/data_set@main/img/fondo-emergencias.png"); }
.card-botiquin       { --card-bg: url("https://cdn.jsdelivr.net/gh/nauthix/data_set@main/img/fondo-botiquin.png"); }
.card-glosario       { --card-bg: url("https://cdn.jsdelivr.net/gh/nauthix/data_set@main/img/fondo-glosario.png"); }


/* ============================================================
   HOME BG — Pantalla de inicio
   ============================================================ */

.home-bg {
  position: relative;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0.10)),
    url("https://cdn.jsdelivr.net/gh/nauthix/data_set@main/img/fondo-home.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #ffffff;
  overflow: hidden;
}

.home-bg h1,
.home-bg h2,
.home-bg p,
.home-bg span {
  color: #ffffff;
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.9);
}

/* 🐛 FIX: Scoped a .home-bg — antes era global y pisaba otros .home-title */
.home-bg .home-title {
  background: none !important;
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
}

body.dark-mode .home-bg {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)),
    url("https://cdn.jsdelivr.net/gh/nauthix/data_set@main/img/fondo-home.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


/* ============================================================
   CARD DOWNLOAD — Tarjeta de descarga de la app
   Overlay más oscuro porque el texto necesita más contraste
   sobre esta foto específica.
   ============================================================ */

.card-download {
  position: relative;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
    url("https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?w=800&q=80");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #ffffff;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.card-download h2,
.card-download .subtitle {
  color: #ffffff !important;
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.9);
}

.card-download:hover {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
    url("https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?w=800&q=80");
  transform: scale(1.02);
}

body.dark-mode .card-download {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.50)),
    url("https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?w=800&q=80");
}