/* ==========================================================================
   TEMA BLACK FRIDAY
   Capa encima del diseño normal. Solo se carga cuando TEMA_BLACKFRIDAY es true
   (template/controllers.php) y actúa bajo body.tema-bf.

   Criterio visual: sobrio. Negro como color principal, dorado suave como
   acento (siempre sobre fondo oscuro) y rojo solo para el precio tachado.
   Sin sombras, rotaciones ni animaciones llamativas.
   ========================================================================== */

.tema-bf {
  --bf-negro: #111113;
  --bf-carbon: #232327;
  --bf-gris: #6b6b72;
  --bf-linea: #e6e3dc;
  --bf-oro: #d6b25e;          /* acento, sobre fondo oscuro */
  --bf-oro-texto: #8a6a1f;    /* versión legible sobre blanco */
  --bf-crema: #f8f5ee;
  --bf-crema-oscura: #efe8d8;
  --bf-rojo: #b3261e;

  /* Variables del diseño base (css/globals.css) */
  --color-brand-900: var(--bf-negro);
  --color-brand-800: var(--bf-negro);
  --color-brand-700: var(--bf-carbon);
  --color-accent-300: var(--bf-crema-oscura);
  --color-accent-200: var(--bf-oro);
  --color-accent-200-50: rgba(214, 178, 94, 0.5);
}

/* --------------------------------------------------------------------------
   Barra superior
   -------------------------------------------------------------------------- */
.bf-barra {
  display: block;
  background: var(--bf-negro);
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  text-decoration: none;
}

.bf-barra-fija {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  height: 38px;
  padding: 0 16px;
}

.bf-barra-fija strong {
  color: var(--bf-oro);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.bf-barra-lema {
  padding-left: 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.bf-barra-cuenta {
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.6);
}

.bf-barra-cuenta b {
  font-weight: 600;
  color: #fff;
}

.bf-barra-cta {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(214, 178, 94, 0.6);
  text-underline-offset: 3px;
}

.bf-barra:hover .bf-barra-cta {
  text-decoration-color: var(--bf-oro);
}

@media (max-width: 700px) {
  .bf-barra-lema,
  .bf-barra-cta { display: none; }
  .bf-barra-fija { gap: 12px; font-size: 12px; }
}

/* --------------------------------------------------------------------------
   Home
   -------------------------------------------------------------------------- */
.bf-hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: -56px;
  padding: 5px 14px 5px 5px;
  border: 1px solid var(--bf-linea);
  border-radius: 999px;
  color: var(--bf-negro);
  font-size: 14px;
  text-decoration: none;
  transition: border-color 0.2s ease;
}

.bf-hero-chip:hover {
  border-color: var(--bf-negro);
}

.bf-hero-chip span {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--bf-negro);
  color: var(--bf-oro);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@media (max-width: 1100px) {
  .bf-hero-chip { margin-bottom: -16px; font-size: 13px; }
}

.bf-card-promo {
  background: var(--bf-negro);
  color: #fff;
}

.bf-card-kicker {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.bf-card-titulo {
  margin-top: 14px;
  font-size: 46px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -1.5px;
  color: var(--bf-oro);
}

.bf-card-texto {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.7);
}

.bf-card-texto b {
  font-weight: 600;
  color: #fff;
}

.bf-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  margin-top: auto;
  padding: 3px 3px 3px 20px;
  border-radius: 999px;
  background: #fff;
  color: var(--bf-negro);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.bf-card-btn-circulo {
  display: flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--bf-negro);
}

.bf-card-btn-circulo img {
  filter: brightness(0) invert(1);
}

@media (max-width: 1300px) {
  .bf-card-promo { min-height: 300px; }
}

/* --------------------------------------------------------------------------
   Sustitución de los colores fijos de Tailwind (clases tipo bg-[#175960])
   El flag "i" cubre también las variantes en mayúsculas (#11434C...).
   -------------------------------------------------------------------------- */

/* Fondos oscuros corporativos -> negro */
.tema-bf [class~="bg-[#11434c]" i],
.tema-bf [class~="bg-[#175960]" i] {
  background-color: var(--bf-negro);
}

.tema-bf [class~="bg-[#228a95]" i] {
  background-color: var(--bf-carbon);
}

.tema-bf [class~="hover:bg-[#175960]" i]:hover,
.tema-bf [class~="hover:bg-[#228a95]" i]:hover {
  background-color: var(--bf-carbon);
}

/* Fondos claros verdosos -> crema */
.tema-bf [class~="bg-[#ceffee]" i] {
  background-color: var(--bf-crema-oscura);
}

.tema-bf [class~="bg-[#ecfdf7]" i],
.tema-bf [class~="bg-[#f0faf7]" i],
.tema-bf [class~="bg-[#e8f5f3]" i],
.tema-bf [class~="bg-[#f4fbfc]" i],
.tema-bf [class~="bg-[#f5faf9]" i] {
  background-color: var(--bf-crema);
}

.tema-bf [class~="bg-[#dce8ec]" i] {
  background-color: #ececec;
}

.tema-bf [class~="bg-[rgba(34,138,149,0.3)]" i] {
  background-color: var(--bf-crema-oscura);
}

/* Textos */
.tema-bf [class~="text-[#11434c]" i],
.tema-bf [class~="text-[#175960]" i] {
  color: var(--bf-negro);
}

.tema-bf [class~="text-[#228a95]" i],
.tema-bf [class~="text-[#007d8b]" i],
.tema-bf [class~="text-[#006f7f]" i],
.tema-bf [class~="hover:text-[#228a95]" i]:hover {
  color: var(--bf-oro-texto);
}

.tema-bf [class~="text-[#ceffee]" i] {
  color: var(--bf-oro);
}

/* Bordes, anillos y controles */
.tema-bf [class~="border-[#11434c]" i],
.tema-bf [class~="border-[#175960]" i],
.tema-bf [class~="border-b-[#175960]" i],
.tema-bf [class~="border-[#228a95]" i] {
  border-color: var(--bf-negro);
}

.tema-bf footer [class~="border-b-[#175960]" i] {
  border-color: rgba(255, 255, 255, 0.12);
}

.tema-bf [class~="border-[rgba(34,138,149,0.2)]" i] {
  border-color: var(--bf-linea);
}

.tema-bf [class~="ring-[#11434c]" i],
.tema-bf [class~="ring-[#175960]" i] {
  --tw-ring-color: var(--bf-negro);
}

.tema-bf [class~="accent-[#11434c]" i],
.tema-bf [class~="accent-[#175960]" i] {
  accent-color: var(--bf-negro);
}

.tema-bf [class~="focus:border-[#11434c]" i]:focus {
  border-color: var(--bf-negro);
}

/* --------------------------------------------------------------------------
   Colores fijos de las hojas propias (globals.css, courses.css)
   -------------------------------------------------------------------------- */
.tema-bf .mobile-sheet-cta {
  background: var(--bf-negro);
}

.tema-bf .mobile-sheet-promo::after {
  background: linear-gradient(180deg, rgba(17, 17, 19, 0) 38.22%, var(--bf-negro) 89.38%);
}

.tema-bf .filter-badge,
.tema-bf .cart-header-count {
  background: var(--bf-negro);
  color: #fff;
}

@media (max-width: 1100px) {
  .tema-bf footer {
    background: var(--bf-negro) !important;
  }
}

/* Iconos coloreados por filtro */
.tema-bf .icon-light {
  /* dorado */
  filter: brightness(0) saturate(100%) invert(77%) sepia(28%) saturate(689%)
    hue-rotate(6deg) brightness(92%) contrast(86%);
}

.tema-bf .icon-accent,
.tema-bf .icon-success {
  /* negro */
  filter: brightness(0);
}

/* --------------------------------------------------------------------------
   Tarjetas de curso
   La tarjeta no tiene fondo ni padding: nada de sombras ni elevación,
   solo un zoom suave de la imagen.
   -------------------------------------------------------------------------- */
.tema-bf .course-media img {
  transition: transform 0.4s ease;
}

.tema-bf .course-card:hover .course-media img {
  transform: scale(1.03);
}

.bf-badge-dto {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--bf-negro);
  color: var(--bf-oro);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.tema-bf .price-row strong {
  color: var(--bf-negro);
}

.tema-bf .price-row .old {
  color: var(--bf-rojo);
}

.tema-bf .price-row .warn {
  border-color: var(--bf-linea);
  color: var(--bf-gris);
}

.tema-bf .courses-title {
  color: var(--bf-negro);
}

/* --------------------------------------------------------------------------
   Aviso con cuenta atrás (template/components/blackfriday/aviso.php)
   Listados, buscador y carrito
   -------------------------------------------------------------------------- */
.bf-aviso {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 22px 28px;
  border-radius: 16px;
  background: var(--bf-negro);
  color: #fff;
}

.bf-aviso-copy {
  flex: 1;
  min-width: 0;
}

.bf-aviso-etiqueta {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bf-oro);
}

.bf-aviso-titulo {
  margin-top: 6px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #fff;
}

.bf-aviso-texto {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.6);
}

.bf-aviso-cuenta {
  display: flex;
  flex-shrink: 0;
}

.bf-aviso-cuenta span {
  display: flex;
  min-width: 60px;
  flex-direction: column;
  align-items: center;
  padding: 0 14px;
}

.bf-aviso-cuenta span + span {
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.bf-aviso-cuenta b {
  font-size: 26px;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #fff;
}

.bf-aviso-cuenta small {
  margin-top: 6px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 900px) {
  .bf-aviso {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 18px 20px;
  }
  .bf-aviso-titulo { font-size: 17px; }
  .bf-aviso-cuenta {
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }
  .bf-aviso-cuenta span { flex: 1; min-width: 0; padding: 0 6px; }
  .bf-aviso-cuenta b { font-size: 22px; }
}

/* --------------------------------------------------------------------------
   Ficha de producto
   -------------------------------------------------------------------------- */
.tema-bf .purchase-card {
  overflow: hidden;
}

.bf-compra-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 10px;
  margin: -20px -18px 18px;
  padding: 11px 18px;
  background: var(--bf-negro);
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
}

.bf-compra-etiqueta {
  color: var(--bf-oro);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.bf-compra-cuenta {
  font-variant-numeric: tabular-nums;
}

.bf-compra-cuenta b {
  font-weight: 600;
  color: #fff;
}

.tema-bf .price-row-main .old {
  color: var(--bf-rojo);
}

.tema-bf .offer-tag {
  border: 1px solid var(--bf-linea);
  color: var(--bf-gris);
}

.tema-bf .btn-enroll {
  border-color: var(--bf-negro);
  background: var(--bf-negro);
  color: #fff;
  transition: background-color 0.2s ease;
}

.tema-bf .btn-enroll span {
  background: var(--bf-oro);
  color: var(--bf-negro);
}

.tema-bf .btn-enroll:hover {
  background: var(--bf-carbon);
}

@media (max-width: 1100px) {
  .tema-bf .mobile-enroll-btn {
    border-color: var(--bf-negro);
    background: var(--bf-negro);
    color: #fff;
  }
  .tema-bf .mobile-enroll-btn span {
    background: var(--bf-oro);
  }
}

/* --------------------------------------------------------------------------
   Carrito / checkout
   -------------------------------------------------------------------------- */
.tema-bf .summary-box {
  border-color: var(--bf-linea);
  background: var(--bf-crema);
}

.tema-bf .summary-box .line + .line {
  border-top-color: var(--bf-linea);
}

.bf-ahorro {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin-top: 10px;
  padding: 10px 12px;
  border-left: 2px solid var(--bf-oro);
  color: var(--bf-gris);
  font-size: 13px;
  line-height: 1.4;
}

.bf-ahorro span {
  color: var(--bf-oro-texto);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.bf-ahorro strong {
  color: var(--bf-negro);
  font-weight: 600;
}

.tema-bf .pay-btn {
  background: var(--bf-negro);
  transition: background-color 0.2s ease;
}

.tema-bf .pay-btn span {
  background: var(--bf-oro);
}

.tema-bf .pay-btn:hover {
  background: var(--bf-carbon);
}

.tema-bf .method input {
  accent-color: var(--bf-negro);
}