/* ─────────────────────────────┐
   BondiLu · style.css v2.1
   └─  Desktop first  |  Mobile ≤768px
────────────────────────────────*/

/* RESET BÁSICO */
*, *::before, *::after { /* Aplicar box-sizing a pseudo-elementos también */
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* VARIABLES */
:root {
  --c-primary: #ff7a4d;
  --c-primary-rgb: 255, 122, 77; /* Para opacidad en box-shadows */
  --c-accent: #4ab5e5;
  --c-accent-rgb: 74, 181, 229; /* Para opacidad en box-shadows */
  --c-gold: #ffce59;
  --c-gold-rgb: 255, 206, 89;   /* Para opacidad en box-shadows */
  --c-bg: #f9f9f9;
  --c-text: #333;
  --c-text-light: #555;
  --c-text-lighter: #666;
  --c-border-light: #ddd;
  --c-white: #fff;
  --c-black-alpha-45: rgba(0,0,0,.45);
  --c-black-alpha-20: rgba(0,0,0,.2);
  --c-black-alpha-05: rgba(0,0,0,.05);
  --c-black-alpha-08: rgba(0,0,0,.08);
  --radius: 1rem;
  --radius-small: 6px;
  --font-main: 'Inter', sans-serif;
  --transition-speed: 0.3s;
  --transition-ease: ease;
}

/* BASE */
html {
  scroll-behavior: smooth; /* Scroll suave para anclas */
}
body {
  font-family: var(--font-main);
  background: var(--c-bg);
  color: var(--c-text);
  line-height: 1.6; /* Un poco más de interlineado para legibilidad */
  font-size: 100%; /* Base para rems, usualmente 16px */
}
img, picture, video, canvas, svg { /* Mejorar responsividad de media */
  display: block;
  max-width: 100%;
}
button { /* Heredar fuente para consistencia */
  font: inherit;
}

/* NAVBAR */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background: var(--c-white);
  box-shadow: 0 2px 8px var(--c-black-alpha-05);
  position: sticky;
  top: 0;
  z-index: 1000; /* Aumentar z-index por si hay otros elementos fixed/sticky */
}

.navbar .logo img {
  height: 25px; /* Prueba con este valor y ajústalo (ej. 35px, 50px, etc.) */
  width: auto;    /* Para mantener la proporción de tu imagen */
  display: block; /* A veces ayuda a controlar mejor el layout */
}

.nav-links {
  display: flex;
  gap: 1.5rem;
}
.nav-link {
  color: var(--c-text-lighter);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--transition-speed) var(--transition-ease);
  padding: 0.25rem 0; /* Pequeño padding para mejor área de click */
}
.nav-link:hover, .nav-link:focus {
  color: var(--c-primary);
}
#langSelect {
  border: 1px solid var(--c-border-light); /* Borde más sutil */
  border-radius: var(--radius-small);
  padding: .4rem .6rem; /* Ajuste ligero de padding */
  font-weight: 600;
  background-color: var(--c-white); /* Asegurar fondo */
  transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
}
#langSelect:hover, #langSelect:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(var(--c-primary-rgb), 0.2);
}

/* HERO */
.hero {
  text-align: center;
  max-width: 700px;
  margin: 3rem auto 2rem;
  padding: 0 1rem;
}
.hero-title {
  font-size: clamp(1.8rem, 5vw, 2.2rem); /* Tamaño de fuente responsivo */
  font-weight: 700;
  color: var(--c-text);
}
.hero-subtitle {
  font-size: clamp(1rem, 3vw, 1.15rem);
  margin: .8rem 0 1.2rem; /* Ajuste de margen */
  color: var(--c-text-light);
}
.hero-instructions {
  font-size: .95rem;
  color: var(--c-text-light);
  margin-bottom: 1.5rem;
}
.step-label {
  display: block;
  margin: 1rem auto .5rem;
  font-weight: 600;
  color: var(--c-text-light);
}
.category-select {
  display: block;
  margin: 0 auto 1.5rem; /* Más margen inferior */
  padding: .6rem 1rem; /* Padding aumentado */
  font-size: 1rem;
  border: 2px solid var(--c-gold);
  border-radius: var(--radius-small);
  background-color: var(--c-white);
  min-width: 200px; /* Ancho mínimo */
  transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
}
.category-select:hover, .category-select:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(var(--c-primary-rgb), 0.2);
}
.btn-cta {
  background: var(--c-primary);
  color: var(--c-white);
  font-size: 1.1rem;
  font-weight: 600;
  padding: .9rem 1.8rem;
  border: none;
  border-radius: var(--radius-small);
  cursor: pointer;
  transition: background var(--transition-speed), transform 0.15s;
}
.btn-cta:hover:not([disabled]) { /* Solo aplicar hover si no está deshabilitado */
  background: #e35a3d; /* Un poco más oscuro */
  transform: translateY(-2px);
}
.btn-cta:active:not([disabled]) {
  transform: translateY(0px) scale(0.98);
}
.btn-cta[disabled] {
  background: #ffbfa8; /* Color más claro para deshabilitado */
  color: #fff9f7;
  cursor: not-allowed;
  transform: none; /* Evitar transform en disabled */
}


/* CARDS CONTAINER & INDIVIDUAL CARDS */
.cards-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  max-width: 1100px;
  margin: 3rem auto; /* Más margen vertical */
  padding: 0 1rem;
}
.card {
  background: var(--c-white);
  border: 1px solid var(--c-border-light); /* Borde más sutil que el oro */
  border-radius: var(--radius);
  box-shadow: 0 4px 15px var(--c-black-alpha-05);
  padding: 1.8rem; /* Ajuste de padding */
  max-width: 320px;
  width: 100%;
  text-align: center;
  transition: transform var(--transition-speed) var(--transition-ease), box-shadow var(--transition-speed) var(--transition-ease);
}
.card:hover {
  transform: translateY(-6px) scale(1.02); /* Efecto hover más pronunciado */
  box-shadow: 0 8px 25px var(--c-black-alpha-08);
}
.card-title {
  color: var(--c-primary);
  font-size: 1.3rem;
  margin-bottom: .75rem;
}
.card-text {
  font-size: 1rem;
  color: var(--c-text-light);
  margin-top: .5rem;
  word-wrap: break-word; /* Para textos largos */
}
#daily-action { /* Específico para la acción diaria */
    min-height: 3em; /* Evita saltos de layout cuando carga */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500; /* Ligeramente más peso */
}
.counter {
  font-size: 2.2rem; /* Un poco más grande */
  font-weight: 700;
  color: var(--c-accent);
  margin: 0.5rem 0;
}
.card-goal {
  margin-top: .5rem;
  font-size: .95rem;
  color: var(--c-text-lighter);
}
.card-note {
  font-size: .9rem;
  color: #777;
  margin-top: .4rem;
}

/* TARJETA ACCIÓN DIARIA ESPECÍFICA */
.daily-action-card {
  /* display: none; es manejado por JS */
  margin: 2rem auto 0;
  max-width: 500px;
  width: 100%;
  border-color: var(--c-accent); /* Borde diferente para destacar */
}
.card-actions {
  margin-top: 1.5rem; /* Más espacio */
  display: flex;
  gap: .75rem; /* Un poco más de separación */
  justify-content: center;
}
.btn-complete, .btn-close { /* Estilos base para estos botones */
  color: var(--c-white);
  font-weight: 600;
  padding: .7rem 1.4rem; /* Ligeramente más grandes */
  border: none;
  border-radius: var(--radius-small);
  cursor: pointer;
  transition: background var(--transition-speed), transform 0.15s;
}
.btn-complete {
  background: var(--c-accent);
}
.btn-complete:hover {
  background: #3790c2;
  transform: translateY(-2px);
}
.btn-complete:active {
  transform: translateY(0px) scale(0.98);
}
.btn-close {
  background: #777;
}
.btn-close:hover {
  background: var(--c-text-light);
  transform: translateY(-2px);
}
.btn-close:active {
  transform: translateY(0px) scale(0.98);
}

/* MODAL */
.modal {
  display: none; /* Inicialmente oculto, JS lo maneja */
  position: fixed;
  inset: 0;
  z-index: 1001; /* Encima del navbar */
  /* overflow-y: auto; Permite scroll si el modal es muy alto */
}
.modal-overlay {
  position: fixed; /* fixed para cubrir toda la pantalla incluso con scroll */
  inset: 0;
  background: var(--c-black-alpha-45);
  cursor: pointer; /* Indica que se puede cerrar haciendo clic fuera */
}
.modal-content {
  position: relative;
  max-width: 400px; /* Un poco más ancho */
  padding: 2rem 2.5rem; /* Más padding */
  background: var(--c-white);
  border-radius: var(--radius);
  margin: 10vh auto;
  text-align: center;
  box-shadow: 0 6px 20px var(--c-black-alpha-20);
  animation: scaleIn .3s var(--transition-ease);
}
.modal h3 { /* Estilo específico para títulos de modal */
    font-size: 1.4rem;
    color: var(--c-primary);
    margin-bottom: 0.75rem;
}
.modal p {
    font-size: 1rem;
    color: var(--c-text-light);
    margin-bottom: 1.5rem;
}
.modal-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
}
.btn-confirm, .btn-cancel { /* Heredan de .btn-complete, .btn-close */
  flex: 1;
}
/* .btn-confirm y .btn-cancel ya tienen estilos de .btn-complete y .btn-close si comparten clases,
   o puedes definir sus colores específicos aquí si son diferentes */

/* ANIMACIONES */
.fade-in { animation: fadeInUp .5s forwards var(--transition-ease); }
.fade-out{ animation: fadeOutDown .5s forwards var(--transition-ease); }

@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(20px); } /* Un poco más de movimiento */
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes fadeOutDown {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(20px); }
}
@keyframes scaleIn {
  0% { transform: scale(.9); opacity: 0; } /* Comienza un poco más pequeño */
  100% { transform: scale(1); opacity: 1; }
}

/* FOOTER */
.footer {
  text-align: center;
  padding: 2.5rem 1rem; /* Más padding */
  font-size: .9rem;
  color: var(--c-text-lighter);
  border-top: 1px solid var(--c-border-light); /* Separador sutil */
  margin-top: 3rem; /* Más espacio antes del footer */
}

/* ACCESSIBILITY FOCUS STATES - Deben ir después de otros estilos de hover/focus para prioridad */
a:focus-visible, 
button:focus-visible, 
select:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 3px; /* Un poco más de espacio */
  box-shadow: 0 0 0 5px rgba(var(--c-accent-rgb), 0.25);
}
/* Quitar outline por defecto ya que tenemos focus-visible (asegurarse de que el focus-visible sea claro) */
a, button, select {
  outline: none; 
}


/* ───────── MOBILE ≤768px ───────── */
@media (max-width: 768px) {

  /* Navbar modificado para móvil: Fila, logo izquierda, menú y selector idioma derecha */
  .navbar {
    flex-direction: row; /* Elementos en fila */
    justify-content: space-between; /* Distribuye el espacio */
    align-items: center; /* Centra verticalmente */
    padding: 0.6rem 1rem; /* Padding reducido */
    gap: 0.75rem; /* Espacio entre logo, menú (si existe) y selector */
  }

  .logo {
    font-size: 1.3rem; /* Logo más pequeño */
    margin-right: auto; /* Empuja el logo a la izquierda, dejando espacio para otros items a la derecha */
  }

  /* Ocultar nav-links por defecto, se mostrarán con JS al pulsar el menú hamburguesa */
  .nav-links {
    display: none; 
    position: absolute; /* Posicionamiento absoluto para desplegarse sobre el contenido */
    top: 100%; /* Justo debajo del navbar */
    left: 0;
    right: 0; /* Ocupa todo el ancho */
    width: 100%;
    background-color: var(--c-white);
    flex-direction: column;
    align-items: center; /* Centra los links en el menú desplegado */
    padding: 1rem 0; /* Padding vertical en el menú */
    border-top: 1px solid var(--c-border-light);
    box-shadow: 0 4px 6px var(--c-black-alpha-08); /* Sombra para el menú desplegado */
    gap: 0.75rem; /* Espacio entre links */
  }

  .nav-links.open { /* Clase para mostrar el menú (controlada por JS) */
    display: flex;
  }

  .nav-link {
    font-size: 1rem; /* Tamaño de fuente para links en menú desplegable */
    padding: 0.5rem 1rem; /* Área de toque más grande */
    width: 100%; /* Ocupar todo el ancho disponible en el menú */
    text-align: center;
  }

  /* Botón de menú hamburguesa (se muestra solo en móvil) */
  .menu-toggle {
    display: block; /* Mostrar en móvil */
    cursor: pointer;
    background: none;
    border: none;
    padding: 0.4rem; /* Área de toque */
    margin-left: 0.5rem; /* Espacio antes del selector de idioma si está presente */
    order: 2; /* Orden para colocarlo antes del selector de idioma si es necesario */
  }

  .menu-toggle span { /* Las 3 líneas de la hamburguesa */
    display: block;
    width: 22px;
    height: 3px; /* Ligeramente más gruesas */
    background-color: var(--c-text);
    margin: 4px 0;
    border-radius: 1px; /* Bordes redondeados */
    transition: transform 0.3s var(--transition-ease), opacity 0.3s var(--transition-ease);
  }

  /* Animación de la hamburguesa a "X" cuando el menú está abierto */
  .menu-toggle.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .menu-toggle.open span:nth-child(2) {
    opacity: 0;
  }
  .menu-toggle.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  #langSelect {
    font-size: 0.85rem; /* Un poco más pequeño */
    padding: .35rem .5rem;
    margin-top: 0; /* Quitar margen si está en la misma línea */
    align-self: center; /* Asegurar alineación vertical */
    order: 3; /* Orden del selector de idioma */
  }

  /* HERO */
  .hero {
    margin: 2rem auto 1.5rem;
    padding: 0 1rem; /* Mantener padding lateral */
  }
  .hero-title { font-size: 1.7rem; }
  .hero-subtitle { font-size: 1rem; }
  .hero-instructions { font-size: .9rem; }

  .category-select, .btn-cta {
    width: 100%;
    max-width: 320px; 
  }
  .btn-cta { padding: .8rem 1.5rem; }

  /* CARDS */
  .cards-container {
    flex-direction: column;
    gap: 1.5rem;
    margin: 2rem auto;
  }
  .card {
    max-width: calc(100% - 2rem); 
    margin-left: 1rem;
    margin-right: 1rem;
    padding: 1.5rem;
  }
  .daily-action-card {
    max-width: calc(100% - 2rem);
  }

  /* MODAL */
  .modal-content {
    max-width: 90vw;
    padding: 1.5rem;
    margin: 5vh auto; 
  }
  .modal h3 { font-size: 1.25rem; }
  .modal p { font-size: 0.95rem; }
  .modal-buttons { 
    flex-direction: column; /* Botones apilados */
    gap: 0.75rem; 
  }

  /* FOOTER */
  .footer {
    padding: 2rem 1rem;
    margin-top: 2rem;
  }

  /* ... otros estilos de navbar móvil ... */
.menu-toggle {
  display: block; /* Se muestra en móvil */
  /* ... el resto de los estilos de .menu-toggle que te di ... */
}

.nav-links {
  display: none; /* Oculto por defecto en móvil */
  /* ... el resto de los estilos de .nav-links para cuando está abierto (posición, fondo, etc.) ... */
}

.nav-links.open {
  display: flex; /* Se muestra cuando tiene la clase .open */
}
/* ... el resto de tus estilos móviles ... */
}

/* Es importante que el .menu-toggle esté oculto en desktop.
   Asegúrate de tener esto FUERA de la media query @media (max-width: 768px) */
.menu-toggle {
  display: none; /* Oculto por defecto en desktop */
}