html {
            overflow-x: hidden;
            box-sizing: border-box;
        }
        *, *:before, *:after {
            box-sizing: inherit;
        }
        body {
            font-family: 'Inter', sans-serif;
            background-color: #e0f2f7; 
            color: #011f3a; 
            margin: 0; 
            padding: 8px; 
            overflow-x: hidden; 
            display: flex; 
            justify-content: center; 
            align-items: flex-start; 
            min-height: 100vh; 
        }
        .breathing-timer-app {
            max-width: 640px; 
            width: 100%; 
            padding: 20px 15px 15px 15px; 
            background-color: #f0f8ff; 
            border-radius: 24px; 
            box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1), 0 6px 15px rgba(0,0,0,0.07); 
            overflow-x: hidden; 
            margin-left: auto; 
            margin-right: auto; 
            position: relative; 
        }
        .app-content-wrapper.hidden-by-fullscreen {
            display: none;
        }

        .visualizer-wrapper { 
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 20px; 
            margin-bottom: 5px; 
        }
        .visualizer-container { 
            position: relative;
            width: clamp(180px, 48vw, 230px); 
            height: clamp(180px, 48vw, 230px);
            display: flex; 
            align-items: center;
            justify-content: center;
            cursor: pointer; 
        }
        .animated-breathing-circle { 
            width: 100%;
            height: 100%;
            background-color: #a7d8f0; 
            border-radius: 50%;
            transform-origin: center center;
            transition: transform 1.2s cubic-bezier(0.45, 0.05, 0.55, 0.95), background-color 1.2s ease-in-out;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 20px rgba(167, 216, 240, 0.6); 
        }
        .breathing-logo { 
            max-width: 98%; 
            max-height: 98%; 
            object-fit: contain;
        }
        
        .normal-phase-text-container {
            text-align: center;
            margin-top: 25px; 
            margin-bottom: 20px; 
            min-height: 3.8em; 
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative; 
        }
        .phase-text { font-size: 1.1em; margin-bottom: 3px; font-family: 'Inter', sans-serif; color: #011f3a; font-weight: 600; min-height: 1.3em;}
        .phase-time { font-size: 0.9em; font-family: 'Inter', sans-serif; color: #295a99; font-weight: 500; min-height: 1.1em;}

        .fullscreen-overlay {
            position: fixed;
            top: 0; left: 0; width: 100vw; height: 100vh;
            background-color: #f0f8ff; 
            z-index: 1000;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
            box-sizing: border-box;
        }
        .fullscreen-visualizer-container { 
            width: clamp(280px, 75vmin, 450px); 
            height: clamp(280px, 75vmin, 450px);
            cursor: pointer; 
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .fullscreen-text-wrapper {
            margin-top: 40px; 
            text-align: center;
            min-height: 4.5em; 
            display: flex; 
            flex-direction: column;
            justify-content: center;
            position: relative; 
        }
        .fullscreen-phase-name {
            font-size: clamp(1.8rem, 5vw, 2.5rem); 
            font-weight: 600;
            color: #011f3a;
            cursor: pointer; 
            padding: 5px 0;
            font-family: 'Inter', sans-serif;
            min-height: 1.3em;
        }
        .fullscreen-phase-time {
            font-size: clamp(1.2rem, 4vw, 1.8rem);
            color: #295a99;
            min-height: 1.5em; 
            font-family: 'Inter', sans-serif;
        }


        .controls input[type="number"], .controls select {
            margin-top: 6px;
            padding: 10px 14px;
            border-radius: 10px; 
            border: 1px solid #b0cce1; 
            font-size: 0.875rem; 
            background-color: #f0f8ff; 
            color: #011f3a; 
            width: 100%;
            box-sizing: border-box; 
            transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
            -webkit-appearance: none; 
               -moz-appearance: none;
                    appearance: none;
        }
        .controls select {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23295a99'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
            background-repeat: no-repeat; 
            background-position: right 0.7rem center;
            background-size: 1.2em 1.2em; 
            padding-right: 36px; 
            cursor: pointer;
        }
        .controls select:hover, .controls input[type="number"]:hover {
            border-color: #79afd2;
            background-color: #e6f1f9; 
        }
        .controls input[type="number"]:focus, .controls select:focus {
            border-color: #25c2f2; 
            box-shadow: 0 0 0 2px rgba(37, 194, 242, 0.25); 
            outline: none;
        }
        input:disabled, select:disabled {
            background-color: #e5e7eb; 
            cursor: not-allowed;
            opacity: 0.7;
        }

        .volume-slider {
            -webkit-appearance: none;
            appearance: none;
            width: 100%;
            height: 6px;
            background: #d0e8f3;
            border-radius: 3px;
            outline: none;
            opacity: 0.9;
            transition: opacity .2s;
            margin-top: 8px;
        }
        .volume-slider:hover { opacity: 1; }
        .volume-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 18px;
            height: 18px;
            background: #295a99;
            cursor: pointer;
            border-radius: 50%;
            border: 2px solid white;
            box-shadow: 0 1px 3px rgba(0,0,0,0.2);
        }
        .volume-slider::-moz-range-thumb {
            width: 18px;
            height: 18px;
            background: #295a99;
            cursor: pointer;
            border-radius: 50%;
            border: 2px solid white;
            box-shadow: 0 1px 3px rgba(0,0,0,0.2);
        }
        .volume-slider:disabled {
              background: #e5e7eb;
        }
        .volume-slider:disabled::-webkit-slider-thumb {
              background: #9ca3af;
        }
        .volume-slider:disabled::-moz-range-thumb {
              background: #9ca3af;
        }


        .play-pause-btn, .modal-close-btn { 
            background: #E1C9A6 !important; border: 2px solid #C8A87E !important;
            color: #2A3D4F !important; padding: 10px 16px !important; 
            font-size: 15px !important; font-weight: bold !important; 
            border-radius: 25px !important; text-align: center !important;
            cursor: pointer !important; display: block !important; 
            width: fit-content !important; margin: 15px auto 25px auto !important; 
            box-shadow: none !important; text-decoration: none !important;
            transition: background 0.3s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out, transform 0.1s ease !important;
            text-transform: uppercase; letter-spacing: 0.6px;
        }
        .play-pause-btn:hover, .modal-close-btn:hover {
            background: #C8A87E !important; border-color: #79afd2 !important; 
            color: white !important;
        }
         .play-pause-btn:active, .modal-close-btn:active { transform: scale(0.97) !important; }
        .play-pause-btn.paused { 
            background: #C8A87E !important; border-color: #ae873e !important; 
            color: #2A3D4F !important;
        }
        .play-pause-btn.paused:hover {
            background: #ae873e !important; border-color: #295a99 !important; 
            color: white !important;
        }
        .modal-close-btn { 
              margin-top: 20px !important; 
        }
        
        .settings-section {
            margin-bottom: 20px; padding-bottom: 16px;
        }
        .settings-column > .settings-section:not(:last-child) {
              border-bottom: 1px solid rgba(121, 175, 210, 0.35);
        }
        .settings-section:last-child { 
            margin-bottom: 0; 
            padding-bottom: 0; 
        }

        .settings-section h3 {
            font-size: 1.05em; font-weight: 600; 
            margin-bottom: 10px; color: #295a99;
            padding-bottom: 5px; border-bottom: 1px solid #79afd2; 
            display: inline-block;
        }
        
        .settings-row { 
            display: flex; flex-direction: column; 
            gap: 16px; margin-bottom: 20px;
        }
        .settings-column { flex: 1; min-width: 0; }

        .grid-cols-2-tight { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
        
        label { display: flex; flex-direction: column; font-size: 0.85rem; color: #593b02; }
        label span { margin-bottom: 5px; font-weight: 500; }
        .clickable-label { cursor: pointer; text-decoration: underline; text-decoration-style: dotted; }
        .clickable-label:hover { color: #25c2f2; }
        .volume-label {
              font-size: 0.75rem; 
              color: #475569;
              margin-top: 8px;
        }


        #totalTimeDisplay {
            margin-top: 18px; font-weight: 600; text-align: center;
            font-size: 1.05em; color: #011f3a;
        }
        .input-group { margin-bottom: 10px; }
        .hidden { display: none !important; } 

        /* Modal Styles */
        .modal-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background-color: rgba(0, 0, 0, 0.6);
            display: flex; align-items: center; justify-content: center;
            z-index: 1000; opacity: 0; visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
            padding: 15px; 
        }
        .modal-overlay.active { opacity: 1; visibility: visible; }
        .modal-content {
            background-color: #ffffff; color: #011f3a;
            padding: 20px 25px; border-radius: 15px; 
            max-width: 90%; 
            width: auto; 
            max-height: 85vh; overflow-y: auto;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            transform: scale(0.95);
            transition: transform 0.3s ease;
        }
        .modal-overlay.active .modal-content { transform: scale(1); }
        .modal-content h4 {
            font-size: 1.3em; font-weight: 700; color: #295a99;
            margin-bottom: 12px; text-align: center;
        }
        .modal-content p, .modal-content li { font-size: 0.9rem; line-height: 1.55; margin-bottom: 8px; }
        .modal-content strong { color: #593b02; }
        .modal-content ul { list-style-type: disc; padding-left: 18px; margin-bottom: 12px;}
        
        .spinner {
            border: 4px solid rgba(0, 0, 0, 0.1);
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border-left-color: #295a99;
            animation: spin 1s ease infinite;
            margin: 20px auto;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }


        /* Media Queries para pantallas más grandes */
        @media (min-width: 480px) { 
            .breathing-timer-app {
                padding: 20px;
            }
            .visualizer-container {
                width: clamp(170px, 35vw, 200px); 
                height: clamp(170px, 35vw, 200px);
            }
        }

        @media (min-width: 640px) { 
            .breathing-timer-app {
                padding: 28px;
                  padding-top: 35px; 
            }
            .visualizer-container {
                width: clamp(200px, 30vw, 220px); 
                height: clamp(200px, 30vw, 220px);
            }
            .play-pause-btn {
                  padding: 12px 20px !important;
                  font-size: 16px !important;
                  margin-bottom: 30px !important;
            }
            .settings-row {
                flex-direction: row; 
            }
            .modal-content {
                  max-width: 550px; 
            }
        }
        
        /* --- Transiciones suaves para el cambio de tema --- */
        body, .breathing-timer-app, .fullscreen-overlay, .modal-content, .controls input, .controls select, .settings-section h3, .phase-text, .phase-time, #totalTimeDisplay, .fullscreen-phase-name, .fullscreen-phase-time, .modal-content h4, .volume-slider, .volume-slider::-webkit-slider-thumb, .volume-slider::-moz-range-thumb, label {
            transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
        }

        /* --- Estilo del botón para cambiar tema --- */
        #theme-toggle-btn {
            position: absolute;
            top: 15px;
            right: 15px;
            background-color: #d0e8f3;
            border: 1px solid #b0cce1;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
            z-index: 10;
        }

        #theme-toggle-btn:hover {
            background-color: #b0cce1;
            border-color: #79afd2;
        }
        
        #theme-toggle-btn:active {
            transform: scale(0.9);
        }

        #theme-toggle-btn svg {
            width: 22px;
            height: 22px;
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

        #theme-toggle-btn .sun-icon {
            color: #ff8c00;
        }

        #theme-toggle-btn .moon-icon {
            color: #295a99;
        }

        /* --- Estilos para el Modo Oscuro --- */

        /* Ocultar el ícono correspondiente al tema activo */
        body[data-theme='light'] #theme-toggle-btn .sun-icon { display: none; }
        body[data-theme='dark'] #theme-toggle-btn .moon-icon { display: none; }

        /* Colores generales del modo oscuro */
        body[data-theme='dark'] {
            background-color: #011f3a;
            color: #e0f2f7;
        }
        body[data-theme='dark'] .breathing-timer-app {
            background-color: #022859;
            box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25), 0 6px 15px rgba(0,0,0,0.15);
        }

        /* Botón de tema en modo oscuro */
        body[data-theme='dark'] #theme-toggle-btn {
            background-color: #295a99;
            border-color: #79afd2;
        }
        body[data-theme='dark'] #theme-toggle-btn:hover {
            background-color: #79afd2;
            border-color: #a7d8f0;
        }

        /* Lógica del círculo visualizador en modo oscuro */
        body[data-theme='dark'] .breathing-logo {
            display: none; /* Oculta la imagen */
        }
        body[data-theme='dark'] .animated-breathing-circle {
            background-color: #58a6d8; /* Color base del círculo celeste */
            box-shadow: 0 4px 20px rgba(88, 166, 216, 0.5);
        }

        /* Textos en modo oscuro */
        body[data-theme='dark'] .phase-text,
        body[data-theme='dark'] #totalTimeDisplay,
        body[data-theme='dark'] .fullscreen-phase-name {
            color: #f0f8ff;
        }
        body[data-theme='dark'] .phase-time,
        body[data-theme='dark'] .fullscreen-phase-time {
            color: #a7d8f0;
        }

        /* Controles y formularios en modo oscuro */
        body[data-theme='dark'] .settings-section h3 {
            color: #79afd2;
            border-bottom-color: #295a99;
        }
        body[data-theme='dark'] label {
            color: #e1c9a6;
        }
        body[data-theme='dark'] .controls input[type="number"],
        body[data-theme='dark'] .controls select {
            background-color: #011f3a;
            border-color: #295a99;
            color: #e0f2f7;
        }
        body[data-theme='dark'] .controls select {
             background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23a7d8f0'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
        }
        body[data-theme='dark'] .controls input[type="number"]:focus,
        body[data-theme='dark'] .controls select:focus {
            border-color: #25c2f2;
            box-shadow: 0 0 0 2px rgba(37, 194, 242, 0.35);
        }
        body[data-theme='dark'] input:disabled,
        body[data-theme='dark'] select:disabled {
            background-color: #2a3d4f;
            opacity: 0.6;
        }
        
        /* Sliders de volumen en modo oscuro */
        body[data-theme='dark'] .volume-slider {
             background: #295a99;
        }
        body[data-theme='dark'] .volume-slider::-webkit-slider-thumb {
            background: #a7d8f0;
            border-color: #022859;
        }
        body[data-theme='dark'] .volume-slider::-moz-range-thumb {
            background: #a7d8f0;
            border-color: #022859;
        }

        /* Pantalla completa y modales en modo oscuro */
        body[data-theme='dark'] .fullscreen-overlay {
            background-color: #022859;
        }
        body[data-theme='dark'] .modal-content {
            background-color: #011f3a;
            color: #e0f2f7;
        }
        body[data-theme='dark'] .modal-content h4 {
            color: #79afd2;
        }
        body[data-theme='dark'] .modal-content strong {
            color: #e1c9a6;
        }
        body[data-theme='dark'] .spinner {
            border-left-color: #a7d8f0;
        }