:root {
  --color-borde-boton: #1a3a5d;
  --color-fondo-boton: #b2f7ef;
  --color-texto-boton: #1a3a5d;
  --color-primario: #007bff;
  --color-primario-oscuro: #0056b3;
}

body {
  background: #bfe6ec;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  margin: 0;
  min-height: 100vh;
  color: #333; /* Default text color for better base contrast */
}

#app {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.pantalla {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  min-height: 80vh;
}

.logo {
  width: 180px;
  margin-bottom: 24px;
}

h1, h2 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 2.5rem;
  color: #ff5a36;
  margin: 0 0 24px 0;
  text-align: center;
}

.btn-grande, .btn-secundario {
  font-size: 1.8rem; /* Slightly reduced font size */
  padding: 18px 32px; /* Reduced padding */
  border: none;
  border-radius: 18px; /* Slightly reduced radius */
  margin: 16px 0;
  cursor: pointer;
  font-family: inherit;
  font-weight: bold;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: background 0.2s, transform 0.1s;
}

.btn-grande {
  background: #ffe156;
  color: #1a3a5d;
}

.btn-grande:hover, .btn-grande:focus-visible {
  background: #ffd600;
  transform: scale(1.05);
  outline: 2px solid transparent; /* Clear default outline if any */
  box-shadow: 0 6px 16px rgba(0,0,0,0.1), 0 0 0 3px rgba(255, 214, 0, 0.5); /* Enhanced shadow + focus ring */
}

.btn-secundario {
  background: #b2f7ef;
  color: #1a3a5d;
}

.btn-secundario:hover, .btn-secundario:focus-visible {
  background: #7de2d1;
  transform: scale(1.05);
  outline: 2px solid transparent; /* Clear default outline if any */
  box-shadow: 0 6px 16px rgba(0,0,0,0.1), 0 0 0 3px rgba(125, 226, 209, 0.5); /* Enhanced shadow + focus ring */
}

.ejercicio {
  font-size: 2.5rem;
  margin: 32px 0 24px 0;
  color: #1a3a5d;
  font-weight: bold;
}

.opciones {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  margin-bottom: 32px;
}

.opciones button {
  width: 120px;
  height: 120px;
  font-size: 2.5rem;
  border-radius: 32px;
  border: none;
  background: #ffb5a7;
  color: #fff;
  font-family: inherit;
  font-weight: bold;
  box-shadow: 0 4px 12px rgba(0,0,0,0.10);
  transition: background 0.2s, transform 0.1s;
}

.opciones button:hover, .opciones button:focus-visible {
  background: #ff8360;
  transform: scale(1.08);
  outline: 2px solid transparent; /* Clear default outline if any */
  box-shadow: 0 6px 16px rgba(0,0,0,0.15), 0 0 0 3px rgba(255, 131, 96, 0.5); /* Enhanced shadow + focus ring */
}

.opciones button.correcto {
  background: #7ed957;
  color: #fff;
  animation: pop 0.5s;
}

.opciones button.incorrecto {
  background: #ff6f61;
  color: #fff;
  animation: shake 0.5s;
}

@keyframes pop {
  0% { transform: scale(1); }
  60% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-10px); }
  40%, 80% { transform: translateX(10px); }
}

.feedback {
  min-height: 60px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.confeti {
  width: 100vw;
  height: 0;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 100;
}

.carita-feliz, .carita-triste {
  font-size: 3rem;
  margin: 0 12px;
  animation: bounce 0.7s;
}

.carita-feliz {
  color: #7ed957;
}

.carita-triste {
  color: #ff6f61;
}

@keyframes bounce {
  0% { transform: scale(1); }
  40% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* --- Pantalla de Progreso --- */

/* --- Pantalla de Niveles --- */
#pantalla-niveles {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Alinea el contenido arriba */
    padding-top: 20px; /* Espacio arriba para el título y botón */
    gap: 20px;
    text-align: center;
    overflow-y: auto; /* Para scroll si hay muchos niveles */
}

#niveles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); /* Columnas responsivas */
    gap: 15px;
    padding: 20px;
    width: 100%;
    max-width: 800px; /* Ancho máximo para el grid */
    margin-top: 10px;
}

.btn-nivel {
    padding: 15px 10px;
    font-size: 1.5em;
    font-weight: bold;
    border-radius: 10px;
    border: 2px solid var(--color-borde-boton);
    background-color: var(--color-fondo-boton);
    color: var(--color-texto-boton);
    cursor: pointer;
    transition: transform 0.2s, background-color 0.3s, box-shadow 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1; /* Para que sean cuadrados o casi */
}

.btn-nivel:hover:not(:disabled), .btn-nivel:focus-visible:not(:disabled) {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
    outline: 2px solid var(--color-primario-oscuro); /* Focus outline for active/default */
}

/* Specific focus for different states if needed, or rely on the general one above */
.btn-nivel.activo:focus-visible {
    outline: 2px solid var(--color-primario-oscuro); /* Or a lighter shade of its background */
}
.btn-nivel.completado-bien:focus-visible {
    outline: 2px solid #4a9b2a; /* Darker green */
}
.btn-nivel.completado-mal:focus-visible {
    outline: 2px solid #c0392b; /* Darker red */
}


.btn-nivel:disabled {
    background-color: #a0a0a0;
    color: #606060;
    border-color: #808080;
    cursor: not-allowed;
    opacity: 0.7;
}

.btn-nivel.activo {
    background-color: var(--color-primario); /* Azul por defecto */
    color: white;
    border-color: var(--color-primario-oscuro);
}

.btn-nivel.completado-bien {
    background-color: #7ed957; /* Verde */
    color: white;
    border-color: #5cbf3a;
}

.btn-nivel.completado-mal {
    background-color: #ff6f61; /* Rojo */
    color: white;
    border-color: #e05246;
}

/* Ajustes para el botón de volver al inicio en la pantalla de niveles */
#pantalla-niveles .btn-volver {
    margin-top: 0; /* Quitar margen superior si se reutiliza la clase .btn-volver */
    margin-bottom: 10px; /* Espacio antes del grid */
    padding: 12px 25px;
    font-size: 1.1em;
}

/* --- Pantalla de Progreso --- */

#progreso-lista {
  width: 90vw;
  max-width: 400px;
  margin: 24px auto;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  padding: 24px;
  font-size: 1.3rem;
  color: #1a3a5d;
}

.info-ejercicio {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 32px;
  margin-bottom: 16px;
  font-size: 1.5rem;
  color: #1a3a5d;
  font-weight: bold;
}

#contador-restantes, #contador-tiempo {
  background: #ffe156;
  border-radius: 16px;
  padding: 8px 20px;
  margin: 0 4px;
  min-width: 80px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.07);
}

.selector-dificultad {
  padding: 12px 24px;
  border-radius: 16px;
  border: 2px solid #ffe156;
  background: #fffbe6;
  color: #1a3a5d;
  font-size: 1.2rem;
  font-family: inherit;
  margin-bottom: 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.07);
  outline: none;
}

.selector-dificultad:focus {
  border-color: #ffd600;
}

@media (max-width: 600px) {
  .btn-grande, .btn-secundario {
    font-size: 1.2rem;
    padding: 16px 12px;
  }
  .opciones button {
    width: 80px;
    height: 80px;
    font-size: 1.5rem;
  }
  .logo {
    width: 120px;
  }
}

.modal-instrucciones {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}
.modal-contenido {
  background: #fffbe6;
  border-radius: 24px;
  padding: 32px 24px;
  max-width: 400px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  text-align: left;
  color: #1a3a5d;
  font-size: 1.2rem;
}
.modal-contenido h2 {
  margin-top: 0;
  color: #ff5a36;
  text-align: center;
}
.modal-contenido ul {
  padding-left: 20px;
  margin-bottom: 24px;
}
#resumen-avanzado {
  background: #b2f7ef;
  border-radius: 16px;
  padding: 16px 20px;
  margin: 16px 0 24px 0;
  color: #1a3a5d;
  font-size: 1.1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}

.barra-tiempo-container {
  width: 90vw;
  max-width: 400px;
  height: 18px;
  background: #e0e0e0;
  border-radius: 12px;
  margin: 8px 0 24px 0;
  overflow: hidden;
}
.barra-tiempo {
  height: 100%;
  background: linear-gradient(90deg, #7ed957 0%, #ffe156 60%, #ff6f61 100%);
  width: 100%;
  transition: width 0.2s linear;
}
#btn-volver-inicio {
  display: block;
  font-size: 1.1rem;
  padding: 12px 28px;
  margin: 24px auto 0 auto;
  background: #b2f7ef;
  color: #1a3a5d;
  border-radius: 16px;
  border: none;
  font-family: inherit;
  font-weight: bold;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  cursor: pointer;
}
#btn-volver-inicio:hover, #btn-volver-inicio:focus-visible {
  background: #7de2d1;
  outline: 2px solid transparent;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1), 0 0 0 3px rgba(125, 226, 209, 0.5);
}

.idioma-selector {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
}
.icono-idioma {
  width: 40px;
  height: 28px;
  border-radius: 6px;
  border: 2px solid transparent;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  cursor: pointer;
  transition: border 0.2s, transform 0.1s;
}
.icono-idioma.selected {
  border: 2px solid #ff5a36;
  transform: scale(1.12);
}
.icono-idioma:focus {
  outline: 2px solid #ffe156;
}

.idioma-dropdown {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.icono-idioma-mini {
  width: 32px;
  height: 22px;
  border-radius: 5px;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
  cursor: pointer;
  margin-bottom: 2px;
  background: #fff;
  transition: border 0.2s, transform 0.1s;
}
.icono-idioma-mini.selected {
  border: 2px solid #ff5a36;
  transform: scale(1.08);
}
.idioma-menu {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.13);
  padding: 6px 4px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-top: 2px;
}

.input-nombre {
  font-size: 1.3rem;
  padding: 12px 20px;
  border-radius: 16px;
  border: 2px solid #ffe156;
  margin-bottom: 18px;
  width: 90vw;
  max-width: 320px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.07);
  outline: none;
  background: #fffbe6;
  color: #1a3a5d;
}
.input-nombre:focus {
  border-color: #ffb5a7;
  box-shadow: 0 0 0 3px rgba(255, 181, 167, 0.3); /* Focus ring */
}
.btn-modo {
  background: #fff;
  border: 2px solid #ffe156;
  border-radius: 50%;
  font-size: 1.3rem;
  width: 36px;
  height: 36px;
  margin-left: 8px;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
  transition: background 0.2s, border 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-modo:hover, .btn-modo:focus-visible {
  background: #ffe156;
  outline: 2px solid transparent;
  border-color: #ffd600; /* Match hover background for border */
}
body.modo-oscuro {
  background: #23272f;
  color: #fff;
}
body.modo-oscuro #app,
body.modo-oscuro .pantalla,
body.modo-oscuro .modal-contenido {
  background: #23272f !important;
  color: #fff !important;
}
body.modo-oscuro .btn-grande,
body.modo-oscuro .btn-secundario,
body.modo-oscuro .input-nombre,
body.modo-oscuro .selector-dificultad {
  background: #2d3542;
  color: #ffe156;
  border-color: #ffe156;
}
body.modo-oscuro .btn-grande:hover,
body.modo-oscuro .btn-secundario:hover {
  background: #ffe156;
  color: #23272f;
}
body.modo-oscuro .barra-tiempo-container {
  background: #444;
}
body.modo-oscuro .barra-tiempo {
  background: linear-gradient(90deg, #ffe156 0%, #ffb5a7 100%);
}
body.modo-alto-contraste {
  background: #000 !important;
  color: #fff !important;
}
body.modo-alto-contraste #app,
body.modo-alto-contraste .pantalla,
body.modo-alto-contraste .modal-contenido {
  background: #000 !important;
  color: #fff !important;
}
body.modo-alto-contraste .btn-grande,
body.modo-alto-contraste .btn-secundario,
body.modo-alto-contraste .input-nombre,
body.modo-alto-contraste .selector-dificultad {
  background: #fff !important;
  color: #000 !important;
  border-color: #fff !important;
}
body.modo-alto-contraste .btn-grande:hover,
body.modo-alto-contraste .btn-secundario:hover {
  background: #ffe156 !important;
  color: #000 !important;
}
body.modo-alto-contraste .barra-tiempo-container {
  background: #fff !important;
}
body.modo-alto-contraste .barra-tiempo {
  background: #000 !important;
}

/* Footer and Legal Disclaimer Styling */
footer {
  width: 100%;
  padding: 10px 0;
  text-align: center;
  background-color: transparent; /* Will inherit from body or be overridden by modes */
  margin-top: auto; /* Pushes footer to the bottom if main content is shorter than viewport */
}

#legal-disclaimer {
  font-size: 0.8rem;
  color: #555; /* Default color, will be affected by modes */
  margin: 0;
  padding: 5px 15px;
}

/* Mode-specific overrides for disclaimer color */
body.modo-oscuro #legal-disclaimer {
  color: #ccc;
}

body.modo-alto-contraste #legal-disclaimer {
  color: #fff;
}

/* --- Sistema de Logros y Medallas --- */

/* Botón Desafío Diario */
.btn-desafio-diario {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 1.4rem;
  padding: 16px 28px;
  border: none;
  border-radius: 20px;
  margin: 12px 0;
  cursor: pointer;
  font-family: inherit;
  font-weight: bold;
  background: linear-gradient(135deg, #ff6f61 0%, #ff9a56 100%);
  color: #fff;
  box-shadow: 0 4px 15px rgba(255, 111, 97, 0.4);
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
}
.btn-desafio-diario:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(255, 111, 97, 0.5);
}
.desafio-indicador {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 16px;
  height: 16px;
  background: #7ed957;
  border-radius: 50%;
  border: 2px solid #fff;
  animation: pulse 1.5s infinite;
}
.desafio-indicador.oculto { display: none; }
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.8; }
}

/* Botones secundarios agrupados */
.botones-secundarios {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 8px;
}

/* Modal Logros */
.modal-logros {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}
.modal-logros-contenido {
  max-width: 500px;
  max-height: 80vh;
  overflow-y: auto;
}
.logros-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  padding: 16px;
}
.logro-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 12px;
  border-radius: 16px;
  background: #f8f8f8;
  transition: transform 0.2s, background 0.2s;
}
.logro-item.desbloqueado {
  background: linear-gradient(135deg, #ffe156 0%, #ffb5a7 100%);
}
.logro-item.bloqueado {
  opacity: 0.5;
  filter: grayscale(0.8);
}
.logro-icono { font-size: 2.5rem; margin-bottom: 8px; }
.logro-nombre { font-weight: bold; font-size: 0.9rem; text-align: center; color: #1a3a5d; }
.logro-descripcion { font-size: 0.75rem; text-align: center; color: #666; margin-top: 4px; }

/* Notificación de logro desbloqueado */
.notificacion-logro {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-100px);
  background: linear-gradient(135deg, #ffe156, #ffb5a7);
  color: #1a3a5d;
  padding: 16px 24px;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 3000;
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.notificacion-logro.visible {
  transform: translateX(-50%) translateY(0);
}
.notificacion-logro .logro-icono { font-size: 2rem; }
.notificacion-logro .logro-texto { display: flex; flex-direction: column; }
.notificacion-logro .logro-texto strong { font-size: 0.9rem; }
.notificacion-logro .logro-texto span { font-size: 1.1rem; font-weight: bold; }

/* Medallas en resumen */
.medalla-resumen {
  display: inline-block;
  font-size: 1.5rem;
  padding: 8px 20px;
  border-radius: 30px;
  margin-bottom: 12px;
  font-weight: bold;
}
.medalla-oro { background: linear-gradient(135deg, #FFD700, #FFA500); color: #fff; box-shadow: 0 4px 15px rgba(255, 215, 0, 0.5); }
.medalla-plata { background: linear-gradient(135deg, #C0C0C0, #A0A0A0); color: #fff; box-shadow: 0 4px 15px rgba(192, 192, 192, 0.5); }
.medalla-bronce { background: linear-gradient(135deg, #CD7F32, #B87333); color: #fff; box-shadow: 0 4px 15px rgba(205, 127, 50, 0.5); }
.medalla-ninguna { background: #e0e0e0; color: #666; }

/* Animación combo */
.combo-display {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2500;
  pointer-events: none;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s;
  opacity: 0;
}
.combo-display.visible {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}
.combo-numero {
  font-size: 4rem;
  font-weight: bold;
  color: #ff6f61;
  text-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.combo-texto {
  font-size: 1.5rem;
  font-weight: bold;
  color: #ffe156;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Estrellas para respuesta rápida */
.estrellas-rapidas {
  position: fixed;
  top: 30%;
  left: 0;
  width: 100%;
  height: 100px;
  pointer-events: none;
  z-index: 2500;
}
.estrellas-rapidas span {
  position: absolute;
  font-size: 2rem;
  animation: estrella-subir 1s ease-out forwards;
}
@keyframes estrella-subir {
  0% { transform: translateY(0) scale(0); opacity: 1; }
  100% { transform: translateY(-80px) scale(1.5); opacity: 0; }
}

/* Celebración oro */
.celebracion-oro {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 5rem;
  z-index: 2500;
  animation: celebrar-oro 2s ease-out forwards;
  pointer-events: none;
}
@keyframes celebrar-oro {
  0% { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 1; }
  50% { transform: translate(-50%, -50%) scale(1.5) rotate(10deg); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(2) rotate(0deg); opacity: 0; }
}

/* Estadísticas globales en progreso */
.estadisticas-globales {
  background: #fff;
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.estadisticas-globales h3 {
  margin: 0 0 16px 0;
  color: #ff5a36;
  font-size: 1.3rem;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px;
  background: #f8f8f8;
  border-radius: 12px;
}
.stat-valor {
  font-size: 1.5rem;
  font-weight: bold;
  color: #1a3a5d;
}
.stat-label {
  font-size: 0.7rem;
  color: #666;
  text-align: center;
  margin-top: 4px;
}

/* Gráfico de barras */
.grafico-progreso {
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.grafico-progreso h4 {
  margin: 0 0 12px 0;
  color: #1a3a5d;
  font-size: 1rem;
}
.grafico-barras {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  height: 100px;
  gap: 8px;
}
.barra-partida {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  max-width: 30px;
}
.barra-relleno {
  width: 100%;
  border-radius: 6px 6px 0 0;
  min-height: 4px;
  transition: height 0.3s;
}
.barra-label {
  font-size: 0.7rem;
  color: #666;
  margin-top: 4px;
}

/* Tabla de tandas */
.tabla-tandas {
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.tabla-tandas h4 {
  margin: 0 0 12px 0;
  color: #1a3a5d;
  font-size: 1rem;
}
.tabla-tandas table {
  border-collapse: collapse;
}
.tabla-tandas th, .tabla-tandas td {
  padding: 8px 12px;
  border-bottom: 1px solid #eee;
}
.tabla-tandas th {
  color: #666;
  font-weight: normal;
  font-size: 0.85rem;
}

/* Errores frecuentes */
.errores-frecuentes {
  background: #fff3f3;
  border-radius: 16px;
  padding: 16px;
  margin-top: 16px;
}
.errores-frecuentes h4 {
  margin: 0 0 12px 0;
  color: #ff6f61;
  font-size: 1rem;
}
.errores-frecuentes ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.errores-frecuentes li {
  padding: 8px 0;
  border-bottom: 1px solid #ffe0e0;
  color: #1a3a5d;
}
.error-count {
  color: #ff6f61;
  font-weight: bold;
}

/* Modo oscuro ajustes para nuevos elementos */
body.modo-oscuro .logro-item { background: #2d3542; }
body.modo-oscuro .logro-item.desbloqueado { background: linear-gradient(135deg, #3d4552, #4d5562); }
body.modo-oscuro .logro-nombre { color: #fff; }
body.modo-oscuro .logro-descripcion { color: #aaa; }
body.modo-oscuro .notificacion-logro { background: linear-gradient(135deg, #3d4552, #4d5562); color: #fff; }
body.modo-oscuro .estadisticas-globales,
body.modo-oscuro .grafico-progreso,
body.modo-oscuro .tabla-tandas { background: #2d3542; }
body.modo-oscuro .estadisticas-globales h3,
body.modo-oscuro .grafico-progreso h4,
body.modo-oscuro .tabla-tandas h4 { color: #ffe156; }
body.modo-oscuro .stat-item { background: #3d4552; }
body.modo-oscuro .stat-valor, body.modo-oscuro .stat-label { color: #fff; }
body.modo-oscuro .errores-frecuentes { background: #3d2c2c; }
body.modo-oscuro .errores-frecuentes li { color: #fff; border-color: #4d3c3c; }

/* Responsive */
@media (max-width: 600px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .logros-grid { grid-template-columns: repeat(2, 1fr); }
  .btn-desafio-diario { font-size: 1.1rem; padding: 12px 20px; }
}