/* Tema visual de CiberStudy (variables CSS, estilo shadcn/ui). La app fuerza siempre , así que en la práctica solo se usa el bloque .dark — el de :root queda como base/fallback. No tocar los valores sin avisar: son el tema elegido a propósito, no un placeholder. */ :root { --card: #1c1c1c; --ring: hsl(0 85% 45%); --input: hsl(0 0% 20%); --muted: #292929; --accent: #a71b1b; --border: hsl(0 14% 20%); --radius: 4px; --chart-1: hsl(345,100%,35%); --chart-2: hsl(173,58%,39%); --chart-3: hsl(43 74% 66%); --chart-4: hsl(27,87%,67%); --chart-5: hsl(12,76%,61%); --popover: hsl(0,0%,100%); --primary: #c81e1e; --sidebar: hsl(45,20%,98%); --spacing: 0.25rem; --font-mono: "JetBrains Mono", monospace; --font-sans: "Lexend", sans-serif; --secondary: #d4af35; --background: #121212; --font-serif: "Adamina", serif; --foreground: #f5f5f5; --destructive: hsl(0,84%,60%); --shadow-blur: 10px; --shadow-color: hsl(345,100%,15%); --sidebar-ring: hsl(345,100%,35%); --shadow-spread: 0px; --letter-spacing: 0; --shadow-opacity: 0.05; --sidebar-accent: hsl(45,30%,93%); --sidebar-border: hsl(45,10%,90%); --card-foreground: #f5f5f5; --shadow-offset-x: 0px; --shadow-offset-y: 2px; --sidebar-primary: hsl(345,100%,35%); --muted-foreground: #b0b0b0; --accent-foreground: #ffffff; --popover-foreground: hsl(345,100%,15%); --primary-foreground: #ffffff; --sidebar-foreground: hsl(345,100%,15%); --secondary-foreground: #1a1a1a; --destructive-foreground: hsl(0,0%,98%); --sidebar-accent-foreground: hsl(345,100%,35%); --sidebar-primary-foreground: hsl(0,0%,100%); } .dark { --card: hsl(0,0%,12%); --ring: hsl(345,100%,45%); --input: hsl(0,0%,20%); --muted: hsl(0,0%,15%); --accent: hsl(345,100%,20%); --border: hsl(0,0%,20%); --radius: 4px; --chart-1: hsl(345,100%,45%); --chart-2: hsl(173,58%,50%); --chart-3: hsl(43,74%,75%); --chart-4: hsl(27,87%,75%); --chart-5: hsl(12,76%,70%); --popover: hsl(0,0%,10%); --primary: hsl(345,100%,45%); --sidebar: hsl(0,0%,8%); --spacing: 0.25rem; --font-mono: "JetBrains Mono", monospace; --font-sans: "Poppins", sans-serif; --secondary: hsl(0,0%,20%); --background: hsl(0,0%,10%); --font-serif: "Playfair Display", serif; --foreground: hsl(0,0%,98%); --destructive: hsl(0,62%,40%); --shadow-blur: 25px; --shadow-color: hsl(0,0%,0%); --sidebar-ring: hsl(345,100%,45%); --shadow-spread: 0px; --letter-spacing: 0; --shadow-opacity: 0.5; --sidebar-accent: hsl(345,100%,15%); --sidebar-border: hsl(0,0%,15%); --card-foreground: hsl(0,0%,98%); --shadow-offset-x: 0px; --shadow-offset-y: 10px; --sidebar-primary: hsl(345,100%,45%); --muted-foreground: hsl(0,0%,65%); --accent-foreground: hsl(0,0%,98%); --popover-foreground: hsl(0,0%,98%); --primary-foreground: hsl(0,0%,100%); --sidebar-foreground: hsl(0,0%,98%); --secondary-foreground: hsl(0,0%,98%); --destructive-foreground: hsl(0,0%,98%); --sidebar-accent-foreground: hsl(0,0%,98%); --sidebar-primary-foreground: hsl(0,0%,100%); } body { letter-spacing: var(--letter-spacing); overflow-x: hidden; padding-bottom: 5rem; } main, article, section, form, fieldset { min-width: 0; } img, svg, canvas, video { max-width: 100%; } pre, code { overflow-wrap: anywhere; } .menu-movil > summary::-webkit-details-marker { display: none; } @media (max-width: 767px) { .app-shell { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); padding-left: max(0.75rem, env(safe-area-inset-left)); padding-right: max(0.75rem, env(safe-area-inset-right)); padding-top: max(0.75rem, env(safe-area-inset-top)); } #pomodoro-widget { bottom: max(0.75rem, env(safe-area-inset-bottom)); right: max(0.75rem, env(safe-area-inset-right)); } input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px !important; } button, input[type="submit"], summary { min-height: 44px; } } /* Sin esto, los navegadores pueden pintar inputs/selects con su esquema de color nativo (claro) por defecto, aunque el resto de la página sea oscura — el texto escrito queda sin contraste sobre el fondo oscuro del campo. Con color-scheme el propio navegador ajusta caret, autofill y el desplegable de los