/* --- Variables de Diseño Profesionales y Elegantes --- */
:root {
    /* Colores Base */
    --color-fondo: #F0F2F5; /* Fondo gris claro y fresco, casi blanco */
    --color-fondo-secundario: #E8ECF1; /* Fondo para cajas de resultados, ligeramente más oscuro y con un toque azul-gris */
    --color-blanco: #FFFFFF; /* Blanco puro para elementos principales */

    /* Colores de Texto */
    --color-texto: #2C3E50; /* Texto principal azul oscuro, muy legible (Midnight Blue) */
    --color-texto-secundario: #6C7A89; /* Texto para descripciones, placeholders y etiquetas menos prominentes (Cadet Grey) */
    --color-placeholder: #9BA8B5; /* Color de placeholder suave y legible (Light Slate Grey) */

    /* Colores de Marca y Acceso (Azules, Modernos y Fiables) */
    --color-principal: #34495E; /* Azul grisáceo oscuro, profesional y versátil (Wet Asphalt) */
    --color-principal-dark: #2C3E50; /* Versión más oscura para estados interactivos (Midnight Blue) */
    --color-principal-light: rgba(52, 73, 94, 0.15); /* Versión clara para sombras de foco, con transparencia */

    /* Colores para Partes del Número (Educativo y Sutilmente Distintivo) */
    --color-entero: #27AE60; /* Verde esmeralda profundo para la parte entera */
    --color-decimal: #C0392B; /* Rojo granate sutil para la parte decimal */
    --color-coma: #E67E22; /* Naranja quemado/óxido para destacar la coma */

    /* Colores para Resaltado y Bordes/Sombras */
    --color-highlight: #F39C12; /* Naranja ámbar vibrante para el resaltado interactivo */
    --color-borde: #D3DCE6; /* Borde gris suave y moderno */
    --color-borde-claro: #E9EEF3; /* Borde muy sutil para tarjetas y secciones */
    --color-sombra: rgba(0, 0, 0, 0.06); /* Sombra muy ligera para añadir profundidad sutil */
    --color-sombra-fuerte: rgba(0, 0, 0, 0.12); /* Sombra más pronunciada para estados de hover */

    /* Variables específicas para el diseño SVG (líneas) */
    --color-linea-entera: var(--color-entero); /* Línea gruesa verde junto al entero */
    --color-linea-decimal: var(--color-borde); /* Líneas delgadas grises entre decimales */
    --color-highlight-line: var(--color-highlight); /* Color de línea al resaltar */
}

/* --- Estilos Generales y Reseteo Suave --- */
* {
    box-sizing: border-box; /* Asegura que padding y border no aumenten el tamaño del elemento */
}

body {
    font-family: 'Roboto', sans-serif; /* Fuente principal para la mayoría del texto */
    background-color: var(--color-fondo);
    color: var(--color-texto);
    margin: 0;
    padding: 2.5rem; /* Un poco más de padding general */
    display: flex;
    justify-content: center; /* Centra el contenido horizontalmente */
    align-items: flex-start; /* Alinea el contenido desde la parte superior */
    min-height: 100vh; /* Asegura que el body ocupe al menos la altura de la ventana */
    line-height: 1.6; /* Mejora la legibilidad del texto con mayor espaciado entre líneas */
    font-size: 16px; /* Tamaño de fuente base para consistencia */
    -webkit-font-smoothing: antialiased; /* Mejora el suavizado de la fuente en navegadores WebKit (Chrome, Safari) */
    -moz-osx-font-smoothing: grayscale; /* Mejora el suavizado de la fuente en Firefox (Mozilla) */
}

/* Contenedor Principal de la Aplicación */
.container {
    max-width: 900px; /* Un poco más ancho para diseños más espaciosos */
    width: 100%;
    display: flex; /* Utiliza Flexbox para organizar las secciones verticalmente */
    flex-direction: column;
    gap: 1.75rem; /* Espacio uniforme entre cada sección (header, input, cards) */
}

/* --- Estilos del Encabezado (Header) --- */
header {
    text-align: center;
    margin-bottom: 2rem; /* Margen inferior para separar del contenido siguiente */
    padding: 2rem 0; /* Un poco más de padding vertical para dar aire al título */
}

header h1 {
    font-family: 'Roboto', sans-serif; /* Fuente específica para el título principal */
    color: var(--color-principal); /* Color de marca principal */
    font-size: 2.6rem; /* Tamaño de fuente grande y prominente, ligeramente reducido */
    font-weight: 700; /* Negrita para destacar */
    letter-spacing: -0.02em; /* Ligero ajuste de espaciado entre letras para un look moderno */
    margin-bottom: 0.75rem; /* Espacio entre el título y el párrafo */
}

header p {
    font-size: 1.05rem; /* Tamaño de fuente legible para la descripción */
    color: var(--color-texto-secundario); /* Color más suave para el texto de apoyo */
    max-width: 650px; /* Limita el ancho del párrafo para mejor legibilidad */
    margin: 0.75rem auto 0; /* Centra el párrafo horizontalmente */
}

/* --- Sección de Entrada del Número --- */
.input-section {
    text-align: center;
    background-color: var(--color-blanco);
    border-radius: 10px; /* Bordes ligeramente menos redondeados para un aspecto más profesional */
    padding: 2.2rem; /* Un poco más de padding */
    box-shadow: 0 4px 10px var(--color-sombra); /* Sombra suave para un efecto flotante */
    border: 1px solid var(--color-borde-claro); /* Borde muy sutil para definición */
}

.input-section label {
    display: block; /* La etiqueta ocupa su propia línea */
    font-size: 1.15rem; /* Tamaño de fuente ligeramente ajustado */
    font-weight: 500; /* Seminegrita para destacar */
    margin-bottom: 1.25rem; /* Margen un poco más generoso */
    color: var(--color-texto);
}

#numero {
    padding: 1.1rem 1.4rem; /* Relleno generoso para un área de interacción cómoda */
    font-size: 1.7rem; /* Tamaño de fuente grande para la entrada del número */
    width: 55%; /* Ancho relativo */
    max-width: 480px; /* Ancho máximo para evitar que sea demasiado ancho en pantallas grandes */
    border: 2px solid var(--color-borde); /* Borde inicial para el input */
    border-radius: 8px; /* Bordes ligeramente menos redondeados */
    text-align: center;
    font-family: 'Roboto Mono', monospace; /* Fuente monoespaciada para la claridad de los números */
    font-weight: 700; /* Negrita para los números ingresados */
    color: var(--color-principal); /* Color de texto más distintivo para el input */
    background-color: var(--color-fondo-secundario); /* Ligero fondo para el campo de entrada */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Transición suave para estados interactivos */
    appearance: none; /* Elimina los estilos predeterminados del navegador para inputs */
}

#numero::placeholder {
    color: var(--color-placeholder); /* Color del texto de ejemplo */
    font-weight: 400; /* Peso normal para el placeholder */
}

#numero:focus {
    outline: none; /* Elimina el contorno de foco predeterminado del navegador */
    border-color: var(--color-principal); /* Borde de color principal al enfocar */
    box-shadow: 0 0 0 4px var(--color-principal-light); /* Sombra de foco más amigable y sutil */
}

/* --- Estilos de las Tarjetas de Contenido (Cards) --- */
.card {
    background-color: var(--color-blanco);
    border-radius: 10px; /* Bordes más pronunciados para un aspecto moderno */
    padding: 2rem;
    /* Múltiples sombras para una profundidad más rica */
    box-shadow: 0 4px 10px var(--color-sombra), 0 1px 3px var(--color-sombra);
    border: 1px solid var(--color-borde-claro); /* Borde sutil para definir la tarjeta */
    display: flex;
    flex-direction: column; /* Organiza los elementos de la tarjeta verticalmente */
    gap: 1.25rem; /* Espacio entre el título, resultado y botón */
}

.card h2 {
    font-size: 1.7rem; /* Tamaño de título ligeramente ajustado */
    color: var(--color-principal); /* Color de marca principal para los títulos de sección */
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: 600; /* Seminegrita para un aspecto más formal */
}

/* --- Cajas de Resultado (Result Box) --- */
.result-box {
    background-color: var(--color-fondo-secundario); /* Fondo diferente para los resultados */
    border: 1px solid var(--color-borde); /* Borde sólido para un aspecto más limpio y profesional (en lugar de punteado) */
    padding: 1.3rem 1.6rem; /* Relleno generoso */
    border-radius: 7px; /* Bordes suaves */
    min-height: 65px; /* Altura mínima para asegurar espacio */
    display: flex;
    align-items: center; /* Centra el texto verticalmente */
    font-family: 'Roboto Mono', monospace; /* Fuente monoespaciada para resultados numéricos/fonéticos */
    font-size: 1.4rem; /* Texto de resultado más grande y legible */
    color: var(--color-texto);
    overflow-x: auto; /* Permite scroll horizontal si el contenido es muy largo */
    white-space: nowrap; /* Evita que el texto se rompa en varias líneas (excepto en phonetic-box) */
}

.placeholder-text {
    color: var(--color-placeholder);
    font-style: italic;
    font-size: 1.2rem; /* Tamaño ligeramente más pequeño que el texto real */
}

/* --- Botones de Reproducción (Play Button) --- */
.play-btn {
    background-color: var(--color-principal);
    color: var(--color-blanco);
    border: none;
    padding: 0.9rem 2rem; /* Relleno ligeramente más generoso */
    border-radius: 7px; /* Bordes ligeramente menos redondeados */
    cursor: pointer;
    font-size: 1.05rem; /* Tamaño de fuente ligeramente ajustado */
    font-weight: 500;
    /* Transiciones para efectos suaves en hover/active */
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0 3px 7px var(--color-sombra); /* Sombra inicial para efecto 3D */
    display: inline-flex; /* Permite alinear icono y texto */
    align-items: center;
    justify-content: center;
    gap: 0.6rem; /* Espacio entre el icono y el texto */
    margin-top: 0.75rem; /* Margen superior para separación */
}

.play-btn:hover {
    background-color: var(--color-principal-dark); /* Oscurece el botón al pasar el ratón */
    transform: translateY(-1px); /* Efecto sutil de "levantar" */
    box-shadow: 0 5px 10px var(--color-sombra-fuerte); /* Sombra más pronunciada en hover */
}

.play-btn:active {
    transform: translateY(0); /* Vuelve a la posición normal al clickear (efecto "presionado") */
    box-shadow: 0 1px 3px var(--color-sombra); /* Sombra más pequeña para efecto de presión */
    background-color: var(--color-principal-dark); /* Mantiene el color oscuro */
}

/* --- Estilos del Modo Fonético --- */
.phonetic-box {
    flex-wrap: wrap; /* Permite que las palabras se envuelvan a la siguiente línea */
    gap: 0.7em 0.5em; /* Espacio entre filas y columnas de palabras, ligeramente más generoso */
    white-space: normal; /* Permite el salto de línea para las palabras (anula result-box) */
}

.palabra-fonetica {
    padding: 0.4em 0.7em; /* Un poco más de padding */
    border-radius: 5px; /* Bordes ligeramente menos redondeados */
    background-color: var(--color-fondo-secundario); /* Fondo suave para cada palabra */
    color: var(--color-texto);
    transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out;
    cursor: default;
    line-height: 1.2; /* Asegura un espaciado consistente */
    display: inline-block; /* Para que padding y margin funcionen bien */
}

.palabra-fonetica.highlight {
    background-color: var(--color-highlight); /* Color de resaltado distintivo */
    color: var(--color-blanco); /* Texto blanco para alto contraste */
    font-weight: 600; /* Hace la palabra resaltada más audaz */
    transform: scale(1.02); /* Efecto de crecimiento sutil al resaltar, un poco menos pronunciado */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); /* Sombra más sutil y general para el resaltado */
}

/* --- Estilos del Modo Formal (SVG) --- */
.svg-box {
    padding: 0; /* SVG no necesita padding interno */
    background: transparent; /* El SVG define su propio fondo si es necesario */
    border: none; /* Elimina el borde de result-box, el SVG es el visual */
    min-height: auto; /* SVG determina su propia altura */
    display: flex; /* Centra el SVG si es más pequeño que el contenedor */
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Oculta cualquier cosa que se salga del SVG */
}

#aprendizaje-formal-wrapper svg {
    width: 100%;
    height: auto; /* Mantiene la relación de aspecto del SVG */
    display: block; /* Elimina el espacio extra debajo del SVG */
    border-radius: 8px; /* Bordes redondeados para el área del SVG */
    background-color: var(--color-blanco); /* Fondo blanco para el SVG */
    box-shadow: 0 4px 10px var(--color-sombra); /* Sombra para el SVG */
}

/* Estilos específicos para elementos dentro del SVG */
.svg-numero { 
    font-size: 68px; /* Ligeramente más pequeño */
    font-family: 'Roboto Mono', monospace; 
    font-weight: bold; 
    fill: var(--color-texto); /* Color de texto general */
}
.svg-etiqueta-principal { 
    font-size: 22px; /* Ligeramente más pequeño */
    font-family: 'Roboto', sans-serif; 
    fill: var(--color-principal); 
    font-weight: 500; 
    text-anchor: middle; 
}
.svg-etiqueta-vertical { 
    font-size: 15px; /* Ligeramente más pequeño */
    font-family: 'Roboto', sans-serif; 
    fill: var(--color-texto-secundario); /* Usa color de texto secundario */
    text-anchor: middle; 
}

/* Resaltado para el SVG */
#svg-entero-texto.highlight, 
#svg-decimales-g.highlight text,
#svg-etiquetas-g.highlight text {
    transition: fill 0.1s ease-in-out;
    fill: var(--color-highlight) !important;
}


/* ========================================================= */
/* --- Media Queries para Responsividad --- */
/* ========================================================= */

/* Para pantallas medianas (tabletas, laptops pequeñas) */
@media (max-width: 768px) {
    body {
        padding: 1.5rem; /* Reduce el padding general */
    }

    .container {
        gap: 1.5rem; /* Ajusta el espacio entre secciones */
    }

    header {
        margin-bottom: 1.5rem;
        padding: 1.5rem 0;
    }

    header h1 {
        font-size: 2.2rem; /* Reduce el tamaño del título principal */
    }

    header p {
        font-size: 1rem; /* Ajusta el tamaño del párrafo */
        max-width: 500px; /* Adapta el ancho máximo */
    }

    .input-section {
        padding: 1.8rem; /* Reduce el padding del input section */
    }

    .input-section label {
        font-size: 1.1rem;
        margin-bottom: 1rem;
    }

    #numero {
        padding: 1rem 1.2rem;
        font-size: 1.5rem; /* Ajusta el tamaño del input */
        width: 70%; /* Mayor ancho en tabletas para mejor interacción */
        max-width: 400px; /* Limita el ancho para evitar que sea demasiado grande */
    }

    .card {
        padding: 1.7rem; /* Reduce el padding de las tarjetas */
        gap: 1rem;
    }

    .card h2 {
        font-size: 1.5rem; /* Reduce el tamaño de los títulos de tarjeta */
    }

    .result-box {
        padding: 1rem 1.2rem;
        font-size: 1.2rem; /* Ajusta el tamaño del texto de resultado */
        min-height: 60px;
    }

    .placeholder-text {
        font-size: 1.1rem;
    }

    .play-btn {
        padding: 0.8rem 1.8rem;
        font-size: 1rem;
        gap: 0.5rem;
    }
    
    /* SVG adjustments for tablets */
    .svg-numero { 
        font-size: 58px; /* Ajusta el tamaño del número en SVG */
    }
    .svg-etiqueta-principal { 
        font-size: 20px; 
    }
    .svg-etiqueta-vertical { 
        font-size: 14px; 
    }
}

/* Para pantallas pequeñas (teléfonos móviles) */
@media (max-width: 576px) {
    body {
        padding: 1rem; /* Padding más pequeño para móviles */
        font-size: 15px; /* Ligeramente más pequeño en base */
    }

    .container {
        gap: 1rem; /* Espacio mínimo entre secciones */
    }

    header {
        margin-bottom: 1rem;
        padding: 1rem 0;
    }

    header h1 {
        font-size: 1.8rem; /* Tamaño de título muy reducido para móviles */
        letter-spacing: 0; /* Elimina letter-spacing para legibilidad en pequeño */
    }

    header p {
        font-size: 0.95rem; /* Ajusta el tamaño del párrafo */
        max-width: 90%; /* Permite que ocupe más ancho en pantallas muy pequeñas */
    }

    .input-section {
        padding: 1.2rem; /* Padding reducido para el input section */
        border-radius: 8px; /* Bordes más sutiles */
        box-shadow: 0 2px 6px var(--color-sombra); /* Sombra más suave */
    }

    .input-section label {
        font-size: 1rem;
        margin-bottom: 0.8rem;
    }

    #numero {
        padding: 0.8rem 1rem;
        font-size: 1.3rem; /* Tamaño de input ideal para móviles */
        width: 90%; /* Ocupa casi todo el ancho disponible */
        border-radius: 6px;
    }

    #numero:focus {
        box-shadow: 0 0 0 3px var(--color-principal-light); /* Sombra de foco más compacta */
    }

    .card {
        padding: 1.2rem; /* Padding reducido para las tarjetas */
        border-radius: 8px;
        box-shadow: 0 2px 6px var(--color-sombra); /* Sombra más suave */
        gap: 0.8rem;
    }

    .card h2 {
        font-size: 1.3rem; /* Títulos más pequeños para tarjetas */
        margin-bottom: 0.3rem;
    }

    .result-box {
        padding: 0.8rem 1rem;
        font-size: 1.1rem; /* Texto de resultado más compacto */
        min-height: 50px; /* Altura mínima ajustada */
        border-radius: 6px;
    }

    .placeholder-text {
        font-size: 0.95rem;
    }

    .play-btn {
        padding: 0.6rem 1.2rem; /* Padding más pequeño para el botón */
        font-size: 0.95rem; /* Tamaño de fuente más pequeño para el botón */
        border-radius: 6px;
        box-shadow: 0 2px 4px var(--color-sombra); /* Sombra más suave */
        gap: 0.4rem;
        margin-top: 0.4rem;
    }

    .play-btn:hover {
        transform: translateY(0); /* Desactiva el "levantar" para móviles (menos relevante) */
        box-shadow: 0 3px 6px var(--color-sombra-fuerte);
    }
    
    .phonetic-box {
        gap: 0.4em 0.3em; /* Espacio entre palabras más reducido */
    }

    .palabra-fonetica {
        padding: 0.25em 0.5em; /* Padding más compacto */
        border-radius: 4px;
    }

    /* SVG adjustments for mobile phones */
    .svg-numero { 
        font-size: 48px; /* Tamaño de número significativamente reducido */
    }
    .svg-etiqueta-principal { 
        font-size: 16px; 
    }
    .svg-etiqueta-vertical { 
        font-size: 12px; 
    }
}

/* Para pantallas extra-pequeñas (iPhone SE, etc.) - opcional pero bueno para la granularidad */
@media (max-width: 375px) {
    body {
        padding: 0.8rem;
    }
    header h1 {
        font-size: 1.6rem;
    }
    #numero {
        font-size: 1.2rem;
        padding: 0.7rem 0.8rem;
    }
    .card h2 {
        font-size: 1.2rem;
    }
    .result-box {
        font-size: 1rem;
    }
    .play-btn {
        font-size: 0.9rem;
        padding: 0.5rem 1rem;
    }
    .svg-numero { 
        font-size: 38px; 
    }
    .svg-etiqueta-principal { 
        font-size: 14px; 
    }
    .svg-etiqueta-vertical { 
        font-size: 10px; 
    }
}