/**
 * File: theme.css
 * Descripción: Capa de modernización visual + modo oscuro (dark mode) para
 *              el sitio del Club Deportivo Olas.
 *
 *  - NO modifica styles.css (template original) ni el backend.
 *  - Se carga DESPUÉS de styles.css para sobrescribir puntualmente.
 *  - Dos bloques:
 *      A) Mejoras visuales modernas (aplican en modo claro y oscuro)
 *      B) Modo oscuro: se activa con  <html data-theme="dark">
 *
 *  Rollback = quitar el <link> de este archivo y el <script> de theme-toggle.js.
 *
 *  PILOTO: por ahora solo se enlaza en index.html.
 **/

/* ════════════════════════════════════════════════════════════════════════
   VARIABLES DE TEMA (design tokens)
   ════════════════════════════════════════════════════════════════════════ */
:root {
  /* Marca (constantes en ambos temas) */
  --olas-navy:        #0B3560;
  --olas-aqua:        #5ac4de;
  --olas-yellow:      #F5C518;
  --olas-yellow-dark: #D4A817;

  /* Superficies y texto — MODO CLARO */
  --bg-primary:    #ffffff;
  --bg-secondary:  #f4f7fa;
  --surface:       #ffffff;
  --surface-2:     #fafbfc;
  --text-body:     #646464;
  --text-heading:  #111111;
  --text-muted:    #808080;
  --border-soft:   #ececec;

  /* Acento contextual: azul marino en claro */
  --accent:        #0B3560;

  /* Sombras de elevación */
  --shadow-sm: 0 2px 10px rgba(11, 53, 96, 0.06);
  --shadow-md: 0 10px 30px rgba(11, 53, 96, 0.10);
  --shadow-lg: 0 18px 45px rgba(11, 53, 96, 0.16);

  /* Radios */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 20px;

  /* Transición de cambio de tema */
  --theme-tx: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

[data-theme="dark"] {
  --bg-primary:    #0d1b2a;  /* azul noche, coherente con la marca */
  --bg-secondary:  #102338;
  --surface:       #16273b;
  --surface-2:     #1b2f47;
  --text-body:     #c4d0dc;
  --text-heading:  #f0f4f8;
  --text-muted:    #93a6bb;
  --border-soft:   #24384f;

  /* En oscuro, el azul marino pierde contraste → usamos el aqua de marca */
  --accent:        #5ac4de;

  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 18px 45px rgba(0, 0, 0, 0.55);
}

/* ════════════════════════════════════════════════════════════════════════
   A) MEJORAS VISUALES MODERNAS  (modo claro y oscuro)
   ════════════════════════════════════════════════════════════════════════ */

/* Transición suave global al alternar de tema */
body,
.navgiation-wrapper,
.navbar-default,
.section-content-block,
.section-secondary-bg,
.service-block-2,
.team-layout-1,
.testimony-layout-1,
.appointment-form-wrapper,
.btn-theme {
  transition: var(--theme-tx);
}

/* — Botones: esquinas redondeadas + micro-elevación al hover — */
.btn-theme,
.btn-theme.btn-square {
  border-radius: var(--radius-sm) !important;
  -webkit-border-radius: var(--radius-sm) !important;
  -moz-border-radius: var(--radius-sm) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.4s ease, color 0.4s ease;
}
.btn-theme:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn-header-cta {
  border-radius: var(--radius-sm) !important;
}

/* — Ítem de página activa del menú —
   El template solo estiliza <a class="link-active"> (que usa index.html), pero
   las demás páginas marcan la activa con <li class="active">, que quedaba sin
   resaltar. Replicamos la píldora azul para que la página actual se distinga. */
.main-header-2 .navbar-default .navbar-nav > li.active > a {
  color: #ffffff;
  background: #0B3560;
}

/* — Tarjetas: redondeo, sombra suave y “lift” al pasar el mouse — */
.service-block-2,
.team-layout-1,
.testimony-layout-1 {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.35s ease, box-shadow 0.35s ease, var(--theme-tx);
}
.service-block-2:hover,
.team-layout-1:hover,
.testimony-layout-1:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

/* — Formulario de contacto: tarjeta moderna — */
.appointment-form-wrapper {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

/* — Imágenes de galería: redondeo + zoom sutil — */
.gallery-img {
  border-radius: var(--radius-md);
  overflow: hidden;
}
.gallery-img img {
  transition: transform 0.6s ease;
}
.gallery-light-box:hover .gallery-img img {
  transform: scale(1.08);
}

/* — Feeds de redes: ya tienen tarjeta; redondeamos un poco más — */
.social-feed-box {
  border-radius: var(--radius-md);
}

/* — Mapa: esquinas redondeadas para integrarse mejor — */
.section-google-map-block iframe {
  border-radius: 0;
}

/* — Banner de título / migas de pan (about-us, service, info, contact, etc.) —
   El template nunca definió .page-title-section, así que el banner salía
   delgado y comprimido. Le damos altura y centramos el contenido. */
.page-title-section {
  padding: 80px 0 64px;
  text-align: center;
}
.page-title-section h2 {
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 12px;
  letter-spacing: 0.5px;
}
.page-title-section .breadcrumb {
  display: inline-block;
  background: rgba(255, 255, 255, 0.10);
  border-radius: 40px;
  padding: 8px 22px;
  margin: 0;
}
.page-title-section .breadcrumb,
.page-title-section .breadcrumb li,
.page-title-section .breadcrumb a {
  color: #ffffff;
}
.page-title-section .breadcrumb a:hover {
  color: var(--olas-yellow);
}
.page-title-section .breadcrumb > .active {
  color: rgba(255, 255, 255, 0.7);
}

/* ════════════════════════════════════════════════════════════════════════
   B) MODO OSCURO  —  se activa con  <html data-theme="dark">
   ════════════════════════════════════════════════════════════════════════ */

/* Fondo y texto base */
[data-theme="dark"] body {
  background: var(--bg-primary);
  color: var(--text-body);
}

/* Secciones */
[data-theme="dark"] .section-content-block {
  background: var(--bg-primary);
}
[data-theme="dark"] .section-secondary-bg {
  background: var(--bg-secondary) !important;
}
[data-theme="dark"] .section-pure-white-bg,
[data-theme="dark"] .block-white-bg {
  background: var(--bg-primary) !important;
}

/* Encabezados / texto */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] .block-heading-title {
  color: var(--text-heading);
}
[data-theme="dark"] p,
[data-theme="dark"] li,
[data-theme="dark"] .subheading-alt-style {
  color: var(--text-body);
}
/* El helper .text-dark-color fuerza #111 con !important → lo corregimos */
[data-theme="dark"] .text-dark-color {
  color: var(--text-heading) !important;
}
[data-theme="dark"] a {
  color: var(--olas-aqua);
}

/* Separadores y subrayados de marca → aqua para contraste */
[data-theme="dark"] .block-heading-title:before,
[data-theme="dark"] .section-heading-wrapper span.heading-separator {
  background: var(--accent);
}

/* — Cabecera / navegación — */
[data-theme="dark"] .main-header-2 .main-header .navgiation-wrapper,
[data-theme="dark"] .navgiation-wrapper {
  background: var(--bg-secondary) !important;
}
[data-theme="dark"] .header-top {
  background: linear-gradient(rgba(8, 22, 38, 0.78), rgba(8, 22, 38, 0.78)), url('../images/logoc.png') center/cover no-repeat !important;
}
/* Usamos el prefijo .main-header-2 para igualar/superar la especificidad de
   las reglas originales (que fijan color Y fondo del enlace activo/hover). */
[data-theme="dark"] .main-header-2 .navbar-default .navbar-nav > li > a {
  color: var(--text-heading);
}
/* Estado activo / hover: píldora AQUA con texto azul oscuro.
   El navy original (#0B3560) se confunde con la barra oscura → lo cambiamos
   por aqua para que el indicador resalte (contraste ~8.6:1). */
[data-theme="dark"] .main-header-2 .navbar-default .navbar-nav > li > a:hover,
[data-theme="dark"] .main-header-2 .navbar-default .navbar-nav > li > a:focus,
[data-theme="dark"] .main-header-2 .navbar-default .navbar-nav > li > a.link-active,
[data-theme="dark"] .main-header-2 .navbar-default .navbar-nav > li.active > a {
  color: var(--bg-primary);
  background: var(--olas-aqua);
}
/* Header fijo (sticky) al hacer scroll */
[data-theme="dark"] .stuck .navgiation-wrapper,
[data-theme="dark"] .navbar.stuck {
  background: var(--bg-secondary) !important;
}
[data-theme="dark"] .navbar-toggle .icon-bar {
  background: var(--text-heading);
}

/* — Bloque “¿Quiénes somos?” / highlights — */
[data-theme="dark"] .highlight-layout-2 .highlight-text h5 a {
  color: var(--text-heading);
}
[data-theme="dark"] .highlight-layout-2 .highlight-text div {
  color: var(--text-body);
}

/* — Tarjetas de servicio (texto va sobre imagen, no cambia) — */
[data-theme="dark"] .service-block-2 {
  background: var(--surface);
}

/* — Equipo: tarjeta + barra diagonal blanca → superficie oscura — */
[data-theme="dark"] .team-layout-1 {
  background: var(--surface);
}
[data-theme="dark"] .team-layout-1 .team-info:before {
  background: var(--surface);
}
[data-theme="dark"] .team-layout-1 .team-info h3 {
  color: var(--text-heading);
}
[data-theme="dark"] .team-layout-1 .team-info h4 {
  color: var(--text-muted);
}

/* — Testimonios — */
[data-theme="dark"] .testimony-layout-1 {
  background: var(--surface);
}
[data-theme="dark"] .testimony-layout-1.transparent-bg {
  background: transparent;
}
[data-theme="dark"] .testimony-text {
  color: var(--text-body);
}
[data-theme="dark"] .testimony-layout-1 h4 {
  color: var(--text-heading);
}

/* — Formulario de contacto (index) — */
[data-theme="dark"] .appointment-form-wrapper,
[data-theme="dark"] .appointment-form-wrapper.light-layout {
  background: var(--surface);
  border-color: var(--border-soft);
}
[data-theme="dark"] .appointment-form-wrapper .appoinment-form input[type="text"],
[data-theme="dark"] .appointment-form-wrapper .appoinment-form input[type="email"],
[data-theme="dark"] .appointment-form-wrapper .appoinment-form input[type="url"],
[data-theme="dark"] .appointment-form-wrapper .appoinment-form input[type="password"],
[data-theme="dark"] .appointment-form-wrapper .appoinment-form textarea,
[data-theme="dark"] .form-control {
  background: var(--surface-2);
  border-color: var(--border-soft);
  color: var(--text-heading);
}
[data-theme="dark"] .form-control::placeholder { color: var(--text-muted); }
[data-theme="dark"] .privacy-consent-text { color: var(--text-body); }
/* El encabezado amarillo del form se mantiene (identidad de marca) */

/* — Galería / fondo con imagen: oscurecemos el overlay — */
[data-theme="dark"] .section-gallery-bg:before {
  background: rgba(13, 27, 42, 0.85);
}

/* — Mapa de Google: atenuar para que no “queme” en oscuro — */
[data-theme="dark"] .section-google-map-block iframe {
  filter: brightness(0.82) contrast(1.05);
}

/* — Mensaje de éxito del formulario en oscuro — */
[data-theme="dark"] #index-form-success {
  background: linear-gradient(135deg, #16352a 0%, #1c4234 100%);
  border-color: #245c45;
}
[data-theme="dark"] .index-success-title,
[data-theme="dark"] .index-success-text { color: #c8f0d8; }
[data-theme="dark"] .index-success-note { color: #9fc7ad; }

/* ════════════════════════════════════════════════════════════════════════
   C) COMPONENTES ESPECÍFICOS DE OTRAS PÁGINAS
      (about-us, service, info, contact, appoinment, política, términos)
   ════════════════════════════════════════════════════════════════════════ */

/* — Mejora visual (ambos modos): redondeo coherente — */
.doc-card,
.svc-card,
.legal-content,
.prueba-info-box,
.contact-form-block,
.widget {
  border-radius: var(--radius-md);
}
.doc-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease, var(--theme-tx);
}
.doc-card:hover {
  transform: translateY(-4px);
}

/* ───────── info.html — tarjetas de documentos / rendición de cuentas ───────── */
[data-theme="dark"] .doc-card {
  background: var(--surface);
  border-color: var(--border-soft);
}
[data-theme="dark"] .doc-card h4 { color: var(--text-heading); }
[data-theme="dark"] .doc-card p  { color: var(--text-muted); }
[data-theme="dark"] .year-heading {
  color: var(--text-heading);
  border-left-color: var(--olas-aqua);
}
/* Igualar la altura de las doc-cards cuando van en fila (tablet/desktop),
   para que los bordes inferiores queden alineados aunque los títulos
   ocupen distinto número de líneas. Solo afecta filas con tarjetas
   (respeta el encabezado de año en col-md-12 y el resto del grid). */
@media (min-width: 768px) {
  .section-content-block .row:has(.doc-card) {
    display: flex;
    flex-wrap: wrap;
  }
  .section-content-block .row:has(.doc-card) > .col-md-4 {
    display: flex;
  }
  .section-content-block .doc-card {
    width: 100%;
  }
}

/* ───────── appoinment.html — formulario de prueba técnica ───────── */
[data-theme="dark"] .prueba-info-box {
  background: var(--surface-2);
  border-left-color: var(--olas-aqua);
}
[data-theme="dark"] .prueba-info-box h4 { color: var(--olas-aqua); }
[data-theme="dark"] .prueba-info-box ul,
[data-theme="dark"] .prueba-info-box li { color: var(--text-body); }
[data-theme="dark"] .form-section-title {
  color: var(--olas-aqua);
  border-bottom-color: var(--border-soft);
}
[data-theme="dark"] .success-message {
  background: linear-gradient(135deg, #16352a 0%, #1c4234 100%);
  border-color: #245c45;
  color: #c8f0d8;
}

/* ───────── contact.html — info de contacto y mensaje de éxito ───────── */
[data-theme="dark"] .contact-info li,
[data-theme="dark"] .contact-info address { color: var(--text-body); }
[data-theme="dark"] .contact-info a { color: var(--olas-aqua); }
[data-theme="dark"] .contact-form-block { background: var(--bg-primary); }
[data-theme="dark"] #form-success {
  background: linear-gradient(135deg, #16352a 0%, #1c4234 100%) !important;
  border-color: #245c45 !important;
  color: #c8f0d8 !important;
}

/* ───────── service.html — tarjetas de precios (svc-card) ───────── */
[data-theme="dark"] .svc-card {
  background: var(--surface);
}
[data-theme="dark"] .svc-card__body { background: var(--surface); }
[data-theme="dark"] .svc-card__title    { color: var(--olas-aqua); }
[data-theme="dark"] .svc-card__desc     { color: var(--text-body); }
[data-theme="dark"] .svc-card__list li  { color: var(--text-body); }
[data-theme="dark"] .svc-card__price    { color: var(--text-body); }
[data-theme="dark"] .svc-card__price strong { color: var(--text-heading); }
[data-theme="dark"] .svc-card__price span   { color: var(--text-muted); }
/* El listón/badge y el botón amarillo se mantienen (identidad de marca) */

/* ───────── widgets de barra lateral (varias páginas) ───────── */
[data-theme="dark"] .widget {
  background: var(--surface);
  border-color: var(--border-soft);
}
[data-theme="dark"] .widget-title { color: var(--text-heading); }

/* ───────── politica-privacidad.html y terminos-servicio.html ───────── */
[data-theme="dark"] .legal-content {
  background: var(--surface);
  color: var(--text-body);
  box-shadow: var(--shadow-md);
}
[data-theme="dark"] .legal-content h2,
[data-theme="dark"] .legal-content h3 { color: var(--text-heading); }
[data-theme="dark"] .legal-content p,
[data-theme="dark"] .legal-content li { color: var(--text-body); }
[data-theme="dark"] .legal-content a { color: var(--olas-aqua); }
[data-theme="dark"] .legal-meta {
  background: var(--surface-2);
  border-left-color: var(--olas-aqua);
}
[data-theme="dark"] .legal-meta strong { color: var(--olas-aqua); }
[data-theme="dark"] .legal-toc { background: var(--surface-2); }
[data-theme="dark"] .legal-toc a { color: var(--text-body); }
[data-theme="dark"] .legal-toc a:hover { color: var(--olas-aqua); }

/* ───────── about-us.html — tarjetas de logros (.logro-card) ─────────
   IMPORTANTE: el template NUNCA definió estilos para .logro-card, así que la
   sección "Nuestros Logros" se mostraba como texto plano sin formato.
   Aquí le damos diseño. La sección (.section-logros) siempre tiene fondo
   oscuro (imagen + overlay) en ambos temas → usamos texto claro en los dos. */
.section-logros .logro-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-md);
  padding: 34px 22px;
  text-align: center;
  height: 100%;
  transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
}
.section-logros .logro-card:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
}
.section-logros .logro-card__icon {
  font-size: 38px;
  color: var(--olas-aqua);
  margin-bottom: 14px;
  line-height: 1;
}
.section-logros .logro-card__num {
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: var(--olas-yellow);
  margin-bottom: 10px;
}
.section-logros .logro-card__title {
  font-size: 17px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 10px;
  line-height: 1.3;
}
.section-logros .logro-card__desc {
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.80);
  margin: 0;
}
/* Igualar la altura de las 4 tarjetas cuando van en fila (tablet/desktop).
   Excluimos la fila del encabezado (.section-heading-wrapper) para no
   convertir su h4/span/h2 en elementos flex y romper el centrado. */
@media (min-width: 768px) {
  .section-logros .row:not(.section-heading-wrapper) {
    display: flex;
    flex-wrap: wrap;
  }
  .section-logros .row:not(.section-heading-wrapper) > [class*="col-"] {
    display: flex;
  }
  .section-logros .logro-card { width: 100%; }
}

/* ════════════════════════════════════════════════════════════════════════
   BOTÓN FLOTANTE DE CAMBIO DE TEMA
   Posicionado sobre el botón de WhatsApp (que está en bottom:30px right:30px)
   ════════════════════════════════════════════════════════════════════════ */
.theme-toggle {
  position: fixed;
  bottom: 102px;
  right: 30px;
  width: 52px;
  height: 52px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: var(--surface);
  color: var(--accent);
  box-shadow: var(--shadow-md);
  transition: transform 0.3s ease, background 0.35s ease, color 0.35s ease;
}
.theme-toggle:hover {
  transform: scale(1.1) rotate(12deg);
}
[data-theme="dark"] .theme-toggle {
  background: var(--surface-2);
  color: var(--olas-yellow);
}
/* Iconos sol/luna: mostramos el que corresponde según el tema */
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: inline-block; }
[data-theme="dark"] .theme-toggle .icon-sun  { display: inline-block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

@media (max-width: 767px) {
  .theme-toggle {
    width: 46px;
    height: 46px;
    font-size: 19px;
    bottom: 92px;
    right: 24px;
  }
}
