/* Variables CSS: Mantienen tus colores y espaciados definidos */
:root {
  --bg-color: #f4f4f4;
  --container-bg: #fff;
  --text-color: #333;
  --secondary-text: #555;
  --border-color: #ddd;
  --button-bg: #2196F3; /* No usado para el botón oscuro, pero mantener */
  --button-hover: #0b7dda; /* No usado para el botón oscuro, pero mantener */
  --button-text: white; /* No usado para el botón oscuro, pero mantener */
  --instructions-bg: #f0f8ff;
  --link-color: #2196F3;
  --style-row-bg: #f9f9f9;
  --style-row-border: #ccc;
  --number-bg: #e0e0e0;
  --number-color: #666;
}

/* Estilos para el Modo Oscuro: Define cómo cambian las variables en este modo */
.dark-mode {
  --bg-color: #121212;
  --container-bg: #1e1e1e;
  --text-color: #e0e0e0;
  --secondary-text: #b0b0b0;
  --border-color: #444;
  /* Estilos específicos para el botón oscuro en modo oscuro definidos más abajo por ID */
  --instructions-bg: #2a2a2a;
  --link-color: #D4AF37; /* Dorado */
  --style-row-bg: #2a2a2a;
  --style-row-border: #444;
  --number-bg: #333;
  --number-color: #D4AF37;
}

/* Estilos Globales del Body: Resetear padding/margin y aplicar fondo/color base */
body {
  font-family: Arial, sans-serif;
  padding: 0; /* ¡Corregido! Eliminar padding del body */
  margin: 0; /* Buena práctica: resetear margen */
  background: var(--bg-color);
  min-height: 100vh;
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
  overflow-x: hidden; /* Prevenir scroll horizontal no deseado */
}

/* site-wrapper (main): Contenedor principal que maneja el padding y posicionamiento relativo */
.site-wrapper {
    position: relative; /* Necesario para posicionar el botón de modo oscuro absoluto */
    /* Aplicar el padding global del sitio aquí (10px general + espacio para el botón) */
    padding: 10px; /* Padding general como tenías originalmente en el body */
    padding-top: 50px; /* Espacio EXTRA en la parte superior para el botón (ajusta si es necesario) */
    padding-right: 20px; /* Espacio EXTRA a la derecha para el botón (ajusta si es necesario) */
    box-sizing: border-box; /* Asegura que el padding no aumente el tamaño total del wrapper */
    min-height: 100vh; /* Asegura que el wrapper ocupe al menos la altura de la ventana */
}

/* Botón Modo Oscuro: Estilos para su posición y apariencia por defecto (modo claro) */
#darkModeBtn {
    position: absolute; /* Posicionamiento absoluto respecto a .site-wrapper */
    top: 20px; /* Distancia desde arriba de .site-wrapper */
    right: 20px; /* Distancia desde la derecha de .site-wrapper */
    z-index: 10; /* Asegura que esté por encima del contenido */
    /* Estilo por defecto (modo claro): botón negro, texto blanco */
    background-color: black;
    color: white;
    border: 1px solid black; /* Borde que coincida con el fondo */
    padding: 10px 15px;
    font-size: 0.9em;
    cursor: pointer;
    border-radius: 5px;
    transition: all 0.3s;
    white-space: nowrap;
    flex-shrink: 0; /* Evitar que se encoja en flexbox si estuviera en uno (aunque ahora está fuera) */
}

/* Estilo al pasar el ratón en modo claro */
#darkModeBtn:hover {
     background-color: #333; /* Un negro un poco más claro al pasar el ratón */
     color: white;
     border-color: #333;
}

/* Estilo del botón cuando el sitio está en modo oscuro (body tiene la clase .dark-mode) */
.dark-mode #darkModeBtn {
  border: 1px solid #D4AF37; /* Borde dorado */
  background-color: transparent; /* Fondo transparente para ver el fondo oscuro del body */
  color: #D4AF37; /* Texto dorado */
}

/* Estilo del botón en modo oscuro al pasar el ratón */
.dark-mode #darkModeBtn:hover {
  background-color: #D4AF37; /* Fondo dorado */
  color: white; /* Texto blanco */
}


/* Contenedor Principal del Contenido: Centrado y con sombra */
.container {
  background: var(--container-bg);
  padding: 15px; /* Padding interno (móvil) */
  border-radius: 10px;
  box-shadow: 0 0 8px rgba(0,0,0,0.1);
  max-width: 100%; /* Por defecto: 100% en móvil */
  width: 100%; /* Ocupar el ancho disponible */
  text-align: center;
  margin: 0 auto; /* Centrar el contenedor dentro de .site-wrapper */
  box-sizing: border-box;
  transition: background-color 0.3s;
  overflow: hidden; /* Prevenir desbordamiento interno */
}

/* Input Container: Flexbox para alinear textarea y botón (aunque el botón se movió, mantener por si acaso o limpiar) */
.input-container {
  display: flex;
  flex-direction: column; /* Móvil: uno debajo del otro */
  gap: 10px;
  margin-bottom: 12px;
  align-items: center; /* Centrar horizontalmente en móvil */
  justify-content: center; /* Centrar si hay espacio extra */
}

/* Área de Texto: Estilos para una línea, sin resize, borde redondeado */
textarea {
  width: 100%;
  max-width: 500px;
  padding: 10px;
  font-size: 16px;
  font-family: Arial, sans-serif;
  border: 3px solid var(--border-color);
  border-radius: 15px; /* Aumentado y corregido */
  resize: none; /* ¡Corregido! Quitar flechas de redimensionar */
  height: 40px; /* Altura fija para simular una línea */
  line-height: 1.3;
  text-align: center;
  outline: none;
  transition: border 0.2s;
  box-sizing: border-box; /* ¡Corregido! Box-sizing estándar */
  background: var(--container-bg);
  color: var(--text-color); /* ¡Corregido! Usar variable de color */
  overflow: hidden; /* Oculta texto que exceda la altura */
  flex-grow: 1; /* Permitir que crezca en contenedores flex */
}

textarea:focus {
  border-color: #2196F3; /* Mantener color de borde al enfocar */
}

/* Estilo del borde del textarea al enfocar EN MODO OSCURO */
.dark-mode textarea:focus {
  border-color: var(--link-color); /* Usa la variable del color dorado definida para el modo oscuro */
}

/* Output Group: Contenedor de los resultados generados por JS */
.output-group {
  margin-top: 15px;
}

/* Style Row: Contenedor de cada estilo de letra (nombre, texto, botón copiar) */
.style-row {
  border: 1px solid var(--style-row-border);
  padding: 10px; /* Padding interno (móvil) */
  margin: 8px 0;
  display: flex;
  flex-direction: column; /* Móvil: elementos apilados verticalmente */
  border-radius: 5px;
  background: var(--style-row-bg);
  box-sizing: border-box;
  transition: background-color 0.3s, border-color 0.3s;
  align-items: center; /* Centrar elementos verticalmente en móvil */
}

/* Style Name: Nombre del estilo de letra */
.style-name {
  font-size: 0.9em;
  text-align: center; /* Centrado en móvil */
  margin-bottom: 8px; /* Margen inferior en móvil */
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center; /* Centrar contenido (número+texto) en móvil */
  color: var(--text-color);
  flex-shrink: 0; /* Evitar que el nombre se encoja */
}

/* Styled Text: El texto generado con el estilo */
.styled-text {
  font-size: 1.4em; /* Tamaño de fuente (móvil) */
  overflow-wrap: break-word;
  word-break: break-word;
  font-family: sans-serif; /* Sugerir sans-serif para que se muestren los Unicode */
  margin: 8px 0; /* Margen vertical (móvil) */
  line-height: 1.3;
  text-align: center; /* Centrado en móvil */
  min-height: 1.5em;
  color: var(--text-color);
  flex-grow: 1; /* Permitir que ocupe espacio en flexbox */
  width: 100%; /* Ocupar ancho completo disponible en móvil */
}

/* Copy Button: Botón para copiar el estilo */
.copy-btn {
  padding: 8px 12px; /* Padding (móvil) */
  font-size: 0.9em;
  cursor: pointer;
  border-radius: 5px;
  transition: all 0.3s;
  width: 100%;
  max-width: 200px; /* Ancho máximo en móvil */
  margin: 0 auto; /* Centrar en móvil */
  background-color: var(--button-bg); /* Usar variable de color (default) */
  color: var(--button-text); /* Usar variable de color (default) */
  border: 1px solid transparent;
  flex-shrink: 0; /* Evitar que el botón se encoja */
}

/* Estilo hover para el botón (modo claro) */
.copy-btn:hover {
  background-color: var(--button-hover); /* Usar variable de color (default) */
}

/* Estilo del botón copiar en modo oscuro (cuando body tiene la clase .dark-mode) */
.dark-mode .copy-btn {
  border: 1px solid #D4AF37; /* Borde dorado */
  background-color: transparent; /* Fondo transparente */
  color: #D4AF37; /* Texto dorado */
}

/* Estilo hover del botón copiar en modo oscuro */
.dark-mode .copy-btn:hover {
  background-color: #D4AF37; /* Fondo dorado */
  color: white; /* Texto blanco */
}

/* Encabezados */
h1 {
   color: var(--text-color);
   margin: 0 0 15px 0;
   font-size: 1.6em; /* Tamaño (móvil) */
   line-height: 1.2;
   text-align: center;
}
h1 a {
   color: var(--text-color);
   text-decoration: none;
}
h1 a:hover {
   color: var(--link-color);
}

h2 {
  color: var(--text-color);
  margin: 20px 0 10px 0;
  font-size: 1.4em; /* Tamaño (móvil) */
  line-height: 1.3;
  text-align: left;
}
h2 a {
  color: var(--text-color);
  text-decoration: none;
}
h2 a:hover {
  color: var(--link-color);
}

h3 {
    margin-top: 15px;
    margin-bottom: 8px;
    font-size: 1.1em; /* Tamaño (móvil) */
    color: var(--link-color);
    text-align: left;
}

/* Párrafos y Listas */
p {
  font-size: 1em;
  margin-bottom: 15px;
  color: var(--secondary-text);
  line-height: 1.4;
  text-align: left;
}
ul, ol {
    padding-left: 20px;
    margin-bottom: 15px;
    text-align: left;
}
li {
    margin-bottom: 8px;
    color: var(--secondary-text);
    line-height: 1.5;
}

/* Número de estilo en Style Name */
.style-number {
  display: inline-block;
  width: 20px;
  text-align: center;
  margin-right: 6px;
  color: var(--number-color);
  font-size: 0.9em;
  background: var(--number-bg);
  border-radius: 50%;
  padding: 2px;
  transition: background-color 0.3s, color 0.3s;
}

/* Estilos para la sección de contenido estático adicional */
.additional-content {
    margin-top: 20px;
    text-align: left;
    padding: 0; /* El padding interior lo dará el .container dentro */
    /* background: var(--instructions-bg); Esto podría ir en el .container interior si quieres fondo */
    /* border-radius: 6px; Esto podría ir en el .container interior */
    font-size: 0.95em;
    line-height: 1.5;
    transition: background-color 0.3s;
}
/* Estilos para el .container dentro de additional-content */
.additional-content .container {
   background: var(--instructions-bg); /* Aplicar el fondo aquí */
   box-shadow: none; /* Quitar la sombra del container interior */
   padding: 15px; /* Aplicar padding interior aquí */
   border-radius: 6px; /* Aplicar border radius aquí */
   margin: 0 auto; /* Mantener centrado */
   max-width: 100%;
   text-align: left;
}

/* Enlaces inferiores */
.links {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  font-size: 0.9em;
}
.links a {
  color: var(--link-color);
  text-decoration: none;
  font-weight: bold;
  padding: 5px 0;
  transition: color 0.3s;
}
.links a:hover {
  text-decoration: underline;
}

/* Estilos para cada ítem de FAQ (si usas la clase faq-item) */
.faq-item {
    margin-bottom: 15px;
    /* Opcional: añadir un borde o fondo ligero */
}


/* ------------------------------------------ */
/* MEDIA QUERIES CORRECTAS          */
/* ------------------------------------------ */

/* Estilos para pantallas de al menos 600px de ancho (Tablets y Desktop) */
@media (min-width: 600px) {
  /* Container: Ajustes en padding y max-width */
  .container {
    padding: 20px; /* Más padding interno en desktop */
    max-width: 90%; /* Max width en tablets/desktop */
  }

  /* Input Container: Alinear elementos en fila */
  .input-container {
     flex-direction: row; /* Desktop: elementos en fila */
     align-items: center;
     justify-content: center;
   }

   /* Style Row: Alinear elementos en fila */
   .style-row {
     flex-direction: row; /* Desktop: elementos en fila */
     align-items: center;
     padding: 8px; /* Padding interno */
   }

   /* Style Name: Ancho fijo y alineación a la izquierda */
   .style-name {
     width: 140px;
     text-align: left;
     margin-bottom: 0; /* Eliminar margen inferior */
     justify-content: flex-start; /* Alinear contenido a la izquierda */
   }

   /* Styled Text: Eliminar margen vertical y alinear a la izquierda, permitir crecimiento */
   .styled-text {
     flex-grow: 1; /* Crecer para ocupar espacio */
     margin: 0 10px; /* Margen horizontal */
     text-align: left; /* Alinear a la izquierda */
     width: auto; /* Permitir que el ancho sea manejado por flexbox */
   }

   /* Copy Button: Ancho automático y eliminar margen */
   .copy-btn {
     width: auto;
     padding: 5px 10px;
     margin: 0;
     max-width: none; /* Eliminar max-width */
   }

   /* Textarea: Asegurar tamaño de fuente si se redujo en móvil (aunque no lo hiciste) */
   textarea {
     font-size: 16px;
   }

   /* Encabezados: Ajuste de tamaños en desktop */
   h1 { font-size: 1.8em; }
   h2 { font-size: 1.5em; }
   h3 { font-size: 1.2em; }
   p, li { font-size: 1em; } /* Asegurar tamaño de texto */

    /* Additional Content Container: Asegurar estilos de padding/borde si se aplica fondo */
   .additional-content .container {
        padding: 20px; /* Más padding en desktop */
   }
}

/* Estilos para pantallas de al menos 768px de ancho (Desktop más grandes) */
@media (min-width: 768px) {
  /* Container: Ajuste final de max-width */
  .container {
    max-width: 750px;
  }

  /* Encabezados: Ajuste final de tamaños */
  h1 { font-size: 2em; }
  h2 { font-size: 1.6em; }
  h3 { font-size: 1.3em; }

   /* Styled Text: Ajuste final de tamaño de fuente */
   .styled-text {
      font-size: 1.6em;
   }
}

/* Asegúrate de que NO haya NINGUNA otra regla @media anidada dentro de otros selectores */