/* --- Tamaños de texto --- */

.fz-md { --body-size: calc(14px * 1); }
.fz-lg { --body-size: calc(14px * 1.1); }
.fz-xl { --body-size: calc(14px * 1.2); }

/* --- Modo oscuro --- */

.dark { background-color: var(--color-black); color: var(--color-white); --border-color: #363636; }
.dark select { filter: invert(1); }
.dark .btn.btn-primary-black { background-color: var(--color-white); color: var(--color-black); }
.dark .btn.btn-primary-black:hover { box-shadow: 0 0 0 .5rem rgba(255,255,255,.4); }
.dark .btn.btn-secondary:hover { background-color: var(--color-gray-900); }
html.dark nav ul { background-color: var(--color-gray-900); color: var(--color-white); }
.dark .feedback-error { color: var(--color-white); }
.dark .input-container.type-text { background-color: var(--color-gray-900); border-color: var(--color-gray-900); }
.dark .input-container.type-text label { color: var(--color-white); }
.dark input:-webkit-autofill, .dark input:-webkit-autofill:hover, .dark input:-webkit-autofill:focus, .dark input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 30px var(--color-gray-900) inset !important; -webkit-text-fill-color: var(--color-white); }
.dark .popup .popup-box { background: var(--color-gray-900); }
.dark .deco img { opacity: .2; filter: invert(1); }
.dark .page-history .calendar-session { background: var(--color-gray-900); }
.dark .page { background-color: var(--color-black); }
.dark .page-login .bottom .container { background: var(--color-black); }
.dark .page-lessons .content ul li { background-color: var(--color-gray-900); }
.dark .popup-options .popup-box { background: var(--color-black); }
.dark .list-signup-data li { color: var(--color-white); }
.dark .player-bar { background-color: color(srgb 1 1 1 / .4); }
.dark .player-bar > span { background-color: var(--color-white); }
.dark .page-history .history-message, .dark .page-history .history-week, .dark .page-history .history-months { background-color: var(--color-gray-900); border: 0; }
.dark .page-history .history-week .list-days li .bar, .dark .page-history .history-months .list-months li .bar { background-color: transparent; }
.dark .page-history .history-week .list-days li .bar span, .dark .page-history .history-months .list-months li .bar span { background-color: var(--color-gray-700); }

/* --- Modo horizontal landscape --- */

[view="landscape"] nav { position: fixed; left: 0; top: 0; height: 100%; width: auto; padding: 2rem; }
[view="landscape"] .container {width: 100%;max-width: 600px;}
[view="landscape"] nav .container { width: auto;max-width:unset}
[view="landscape"] nav ul { flex-direction: column; }
[view="landscape"] nav ul li { width: 100%; padding: .75rem 1rem; min-width: 6rem; }
[view="landscape"] .popup-options { align-items: center; }
[view="landscape"] .page-login { flex-direction: row; align-items: center; }
[view="landscape"] .page-login .top { width: 50%; }
[view="landscape"] .page-login .bottom { width: 50%; height: 100vh; padding: 0; background-color: #fff; align-items: center; justify-content: center; display: flex; }
[view="landscape"] .popup-options { align-items: center; }
[view="landscape"] .page-meditation .bottom { position: fixed; left: 0; top: 0; height: 100%; width: auto; padding: 2rem; }
[view="landscape"] .page-meditation .bottom .container { width: auto; }
[view="landscape"] .page-meditation .bottom ul { flex-direction: column; }