/* =====================================================================
   La Casa del DJ — TEMA DE MARCA GLOBAL (todas las páginas del front-end)
   Carga en cada página vía site-theme.php. Convierte el chrome claro del
   tema Twenty Twenty-Five + PMPro + Woo + Tutor en un ecosistema dark
   consistente, SIN romper la legibilidad de los formularios (checkout /
   login / cuenta usan campos claros sobre el shell oscuro).
   Paleta: bg #0a0913 · card #141122 · ink #f4f1ff · mut #a9a3c7
           mag #ff2d95 · pur #7b2ff7 · cy #00e0ff · gold #ffcf5c
   ===================================================================== */

:root{
  --lcdj-bg:#0a0913; --lcdj-card:#141122; --lcdj-ink:#f4f1ff; --lcdj-mut:#a9a3c7;
  --lcdj-mag:#ff2d95; --lcdj-pur:#7b2ff7; --lcdj-cy:#00e0ff; --lcdj-line:#ffffff1a;
  /* override de los tokens de color de PMPro para que sus tarjetas/botones tomen la marca */
  --pmpro--color--base:#141122; --pmpro--color--contrast:#f4f1ff;
  --pmpro--color--accent:#ff2d95; --pmpro--color--accent--variation:#7b2ff7;
  --pmpro--color--border:#ffffff1a; --pmpro--color--border--variation:#ffffff2a;
}

/* ---- lienzo global ---- */
body{background-color:var(--lcdj-bg)!important;color:var(--lcdj-ink)}
.wp-site-blocks,.is-layout-constrained,.wp-block-group.has-global-padding{background-color:transparent}
.wp-block-post-content,.entry-content{color:var(--lcdj-ink)}

/* tipografía de marca */
h1,h2,h3,h4,.wp-block-heading,.pmpro_card_title,.pmpro_card h1,.pmpro_card h2,.pmpro_card h3{
  font-family:'Montserrat','Inter',system-ui,sans-serif;color:var(--lcdj-ink)}
body,p,li,.wp-block-post-content{font-family:'Inter',system-ui,sans-serif}
a{color:var(--lcdj-cy)}
a:hover{color:var(--lcdj-ink)}

/* ---- HEADER del tema ---- */
header.wp-block-template-part,.wp-site-blocks>header,body>header{background-color:var(--lcdj-bg)}
header .wp-block-site-title a,header .wp-block-site-title,header p,header span,
header .wp-block-navigation a,header .wp-block-navigation__container a{color:var(--lcdj-ink)!important;text-decoration:none}
header .wp-block-site-title a{font-family:'Montserrat',sans-serif;font-weight:800}
header .wp-block-navigation a:hover{color:var(--lcdj-cy)!important}
header .wp-block-navigation a[aria-current="page"],header .wp-block-navigation .current-menu-item a{color:var(--lcdj-mag)!important}
header a svg,header .wp-block-navigation svg,header button svg{fill:var(--lcdj-ink)}
/* menú móvil desplegado: overlay dark, no blanco sobre blanco */
.wp-block-navigation__responsive-container.is-menu-open{background-color:var(--lcdj-bg)!important}
.wp-block-navigation__responsive-container.is-menu-open a{color:var(--lcdj-ink)!important}
.wp-block-navigation__responsive-container-open svg,.wp-block-navigation__responsive-container-close svg{fill:var(--lcdj-ink)!important}

/* ---- FOOTER (ya brandeado por template part; garantizar dark) ---- */
footer.wp-block-template-part,.wp-site-blocks>footer,body>footer{background-color:var(--lcdj-bg);color:var(--lcdj-mut)}
footer a{color:var(--lcdj-mut)}
footer a:hover{color:var(--lcdj-ink)}

/* navegación por rol: a un MIEMBRO no le mostramos "Inicio" (la página de venta).
   Cubre el className del item + fallback por href, en desktop y en el menú móvil. */
.lcdj-member .lcdj-nav-inicio,
.lcdj-member .wp-block-navigation-item.lcdj-nav-inicio,
.lcdj-member .wp-block-navigation-item:has(>a[href="https://lacasadeldj.com/"]){display:none!important}
/* miembro: sin "Membresía" (ya es miembro) */
.lcdj-member .lcdj-nav-membresia{display:none!important}
/* "Upgrade a Combo": oculto por defecto; solo para miembros que NO son Combo */
.lcdj-nav-upgrade{display:none!important}
.lcdj-member:not(.lcdj-combo) .lcdj-nav-upgrade{display:revert!important}
.lcdj-member:not(.lcdj-combo) .lcdj-nav-upgrade a{color:#ffcf5c!important;font-weight:700}

/* portada: ocultar el título "Inicio" del tema (único H1 = el del hero) */
.home .wp-block-post-title{display:none!important}
.home .wp-block-group:has(>.wp-block-post-title){padding-top:0!important;padding-bottom:0!important}

/* =================== PMPro — página de NIVELES (tarjetas) =================== */
.pmpro_card,.pmpro_level{background-color:var(--lcdj-card)!important;border:1px solid var(--lcdj-line)!important;
  border-radius:16px!important;color:var(--lcdj-ink)!important;box-shadow:0 10px 40px -20px #000}
.pmpro_card *,.pmpro_level *{border-color:var(--lcdj-line)!important}
.pmpro_card_title,.pmpro_card_title *{color:var(--lcdj-ink)!important;font-family:'Montserrat',sans-serif}
.pmpro_card_content,.pmpro_card_content *,.pmpro_level p,.pmpro_level li{color:#c9c4e0!important}
.pmpro_card_pricing,.pmpro_level .pmpro_level-price,.pmpro_card .pmpro_price{color:var(--lcdj-ink)!important}
/* tabla de niveles clásica (por si el layout es tabla en vez de tarjetas) */
.pmpro_checkout table,#pmpro_levels_table,.pmpro-levels table{background:transparent!important;color:var(--lcdj-ink)!important}
.pmpro_checkout table th,#pmpro_levels_table th,.pmpro-levels table th{color:var(--lcdj-ink)!important;border-color:var(--lcdj-line)!important}
.pmpro_checkout table td,#pmpro_levels_table td,.pmpro-levels table td{color:#c9c4e0!important;border-color:var(--lcdj-line)!important}

/* botones de PMPro / Woo / bloque → gradiente de marca */
.pmpro_btn,.pmpro_btn-select,a.pmpro_btn,button.pmpro_btn,
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.wc-block-components-button{
  background:linear-gradient(90deg,var(--lcdj-mag),var(--lcdj-pur))!important;color:#fff!important;
  border:0!important;border-radius:100px!important;font-family:'Montserrat',sans-serif!important;font-weight:700!important;
  text-shadow:none!important}
.pmpro_btn:hover,.pmpro_btn-select:hover,.woocommerce a.button:hover,.wc-block-components-button:hover{filter:brightness(1.1)}
.pmpro_btn-cancel,.pmpro_btn.pmpro_btn-cancel{background:transparent!important;border:1px solid var(--lcdj-line)!important;color:var(--lcdj-mut)!important}

/* =================== FORMULARIOS legibles (checkout/login/cuenta) ===================
   Los formularios reales viven en una "tarjeta clara" sobre el shell oscuro:
   campos claros con texto oscuro = 100% legibles; el chrome alrededor queda dark. */
/* Enfoque DARK consistente: el checkout de PMPro ya envuelve sus secciones en .pmpro_card
   OSCURAS (se ven con marca). NO les ponemos fondo claro — solo garantizamos que TODO el texto
   (títulos, etiquetas, leyendas) sea CLARO, y que los campos de entrada sean BLANCOS con texto
   oscuro (legible al escribir). Así se acaba el "texto oscuro sobre tarjeta oscura". */
#pmpro_form,.pmpro_form,.pmpro_checkout .pmpro_form,
.woocommerce-account .woocommerce,.woocommerce form.checkout,.woocommerce form.woocommerce-form-login,
.woocommerce form.woocommerce-form-register,.woocommerce-cart .woocommerce{
  background:transparent!important;color:var(--lcdj-ink)!important}
/* títulos + etiquetas + leyendas + celdas → claros */
#pmpro_form h1,#pmpro_form h2,#pmpro_form h3,.pmpro_form h1,.pmpro_form h2,.pmpro_form h3,
.pmpro_form label,.pmpro_form legend,.pmpro_form .pmpro_label,.pmpro_form p,.pmpro_form li,
.pmpro_card_content label,.pmpro_card legend,
.woocommerce-account .woocommerce h1,.woocommerce-account .woocommerce h2,.woocommerce-account .woocommerce h3,
.woocommerce-account .woocommerce label,.woocommerce form .form-row label,.woocommerce-account .woocommerce p,
.woocommerce table.shop_table th,.woocommerce table.shop_table td,
.woocommerce-cart .woocommerce th,.woocommerce-cart .woocommerce td{color:var(--lcdj-ink)!important}
/* enlaces dentro de forms → cian (legible sobre oscuro; el morado se perdía) */
.pmpro_form a,.woocommerce-account .woocommerce a,.woocommerce form a{color:var(--lcdj-cy)!important}
/* texto de ayuda / asteriscos → mutado claro */
.pmpro_form .lite,.pmpro_form small,.pmpro_form .pmpro_asterisk,.pmpro_form .description,
.pmpro_form .pmpro_hint{color:var(--lcdj-mut)!important}
/* campos de entrada: BLANCOS con texto oscuro */
.pmpro_form input,.pmpro_form select,.pmpro_form textarea,
.woocommerce form input,.woocommerce form select,.woocommerce form textarea,
.woocommerce-account input,.woocommerce-account select{
  background:#fff!important;color:#1a1424!important;border:1px solid #d5d2e0!important;border-radius:8px!important}
.pmpro_form input::placeholder,.woocommerce form input::placeholder{color:#8a86a0}
.pmpro_form input:focus,.woocommerce form input:focus{outline:2px solid var(--lcdj-cy);border-color:var(--lcdj-cy)!important}
/* ---- Checkout PMPro: layout limpio de UNA columna, campos full-width, alineado ---- */
.pmpro_form .pmpro_cols-2,#pmpro_form .pmpro_cols-2{display:block!important}       /* deshacer grid 2-col */
.pmpro_form .pmpro_form_fields{display:block}
.pmpro_form .pmpro_form_field{margin:0 0 16px!important;max-width:none!important;width:100%!important}
.pmpro_form .pmpro_form_field>label,.pmpro_form .pmpro_form_field label{display:block!important;margin:0 0 6px!important;font-weight:600}
.pmpro_form input[type=text],.pmpro_form input[type=email],.pmpro_form input[type=password],
.pmpro_form input[type=tel],.pmpro_form input.input{width:100%!important;max-width:none!important;
  box-sizing:border-box!important;padding:12px 14px!important}
/* "Mostrar contraseña" (.pmpro_btn-plain): botón discreto, NO píldora gradiente, debajo del campo */
.pmpro_form_field-password-toggle{position:static!important;margin-top:8px!important;text-align:left}
.pmpro_btn-plain,.pmpro_btn.pmpro_btn-plain,button.pmpro_btn-password-toggle{
  background:transparent!important;color:var(--lcdj-mut)!important;border:1px solid var(--lcdj-line)!important;
  border-radius:100px!important;padding:6px 12px!important;font-size:12px!important;font-weight:600!important;
  font-family:'Inter',sans-serif!important;box-shadow:none!important;text-shadow:none!important;
  display:inline-flex!important;align-items:center;gap:6px;width:auto!important}
.pmpro_btn-plain:hover{color:var(--lcdj-cy)!important;border-color:var(--lcdj-cy)!important;filter:none!important;background:transparent!important}
.pmpro_btn-plain svg{width:14px;height:14px;fill:currentColor}
/* la caja Datos del DJ hereda el mismo ancho full */
#lcdj_datos_dj input{width:100%!important;max-width:none!important}

/* botón de submit del checkout (a veces es input[type=submit], no .pmpro_btn) */
.pmpro_form input[type=submit],#pmpro_btn-submit,.pmpro_btn-submit,
.woocommerce form button[type=submit],.woocommerce form input[type=submit]{
  background:linear-gradient(90deg,var(--lcdj-mag),var(--lcdj-pur))!important;color:#fff!important;
  border:0!important;border-radius:100px!important;font-family:'Montserrat',sans-serif!important;
  font-weight:700!important;padding:14px 28px!important;cursor:pointer;text-shadow:none!important}

/* =================== Recibo / factura de PMPro (confirmación) ===================
   La tabla de líneas del recibo venía con fondo BLANCO y mi texto claro encima
   = invisible. Forzar dark en cualquier tabla/recuadro de recibo dentro de las
   tarjetas, dejando el texto legible. (Print/PDF se maneja con print styles.) */
.pmpro_card table,.pmpro_card_content table,.pmpro_invoice table,
.pmpro_order_single table,#pmpro_confirmation table,.pmpro_invoice,.pmpro_order_single{
  background:transparent!important;color:var(--lcdj-ink)!important;border-color:var(--lcdj-line)!important}
.pmpro_card table th,.pmpro_card table td,.pmpro_card table tr,
.pmpro_card table thead,.pmpro_card table tbody,.pmpro_card table tfoot,
.pmpro_card_content table *,.pmpro_invoice th,.pmpro_invoice td{
  background:transparent!important;color:var(--lcdj-ink)!important;border-color:var(--lcdj-line)!important}
.pmpro_card table thead th,.pmpro_invoice thead th{color:var(--lcdj-mut)!important;
  border-bottom:1px solid var(--lcdj-line)!important}
/* al imprimir/guardar PDF: recibo en papel blanco con texto oscuro */
@media print{
  body,.pmpro_card{background:#fff!important;color:#000!important}
  .pmpro_card table *,.pmpro_card_content *{color:#000!important}
}

/* =================== Woo / Tutor mensajes y cajas =================== */
.woocommerce-info,.woocommerce-message,.woocommerce-error,.pmpro_message{
  background:#141122!important;color:var(--lcdj-ink)!important;border-top:3px solid var(--lcdj-mag)!important}
.woocommerce-info a,.woocommerce-message a{color:var(--lcdj-cy)!important}

/* =================== CABINA gate — ya es dark, garantizar centrado y aire ===================
   OJO: app.css (donde vivían estos botones) SOLO carga dentro de la app (logueado). El gate se
   muestra sin app.css, así que los CTA deben estilizarse aquí (site.css carga en todas las páginas). */
.cabina-gate{max-width:720px;margin:24px auto}
.cabina-gate h2{font-family:'Montserrat',sans-serif;color:var(--lcdj-ink)}
.cabina-gate p{color:var(--lcdj-mut)}
.cabina-cta{display:inline-block;margin-top:14px;font-family:'Montserrat',sans-serif;font-weight:800;
  padding:14px 30px;border-radius:100px;color:#fff!important;text-decoration:none;
  background:linear-gradient(90deg,var(--lcdj-mag),var(--lcdj-pur))}
.cabina-cta:hover{filter:brightness(1.1);color:#fff!important}
.cabina-cta-alt{display:inline-block;margin-top:14px;margin-left:8px;font-family:'Montserrat',sans-serif;font-weight:600;
  padding:14px 24px;border-radius:100px;color:var(--lcdj-ink)!important;text-decoration:none;
  border:1px solid var(--lcdj-line);background:transparent}
.cabina-cta-alt:hover{border-color:var(--lcdj-cy);color:var(--lcdj-cy)!important}

/* botón genérico de bloque (no toca los botones custom del hero, que son <a> inline) */
.wp-block-button__link:not([style*="background"]){background:linear-gradient(90deg,var(--lcdj-mag),var(--lcdj-pur));color:#fff}

/* foco de teclado visible en todo el sitio */
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--lcdj-cy);outline-offset:2px}