.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; } body { font-family: 'Inter', sans-serif; } details summary::-webkit-details-marker { display: none; } details[open] summary .expand-icon { transform: rotate(180deg); } /* ========================= Base UI para formularios (MVP) ========================= */ :where(input, textarea, select) { width: 100%; border: 1px solid rgb(203 213 225); /* slate-300 */ border-radius: 0.75rem; /* rounded-xl */ padding: 0.75rem 1rem; /* similar a p-3/p-4 */ background: #fff; color: inherit; outline: none; transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease; } :where(textarea) { min-height: 180px; resize: vertical; } /* Hover */ :where(input, textarea, select):hover { border-color: rgb(148 163 184); /* slate-400 */ } /* Focus (ring suave) */ :where(input, textarea, select):focus { border-color: #135bec; /* primary */ box-shadow: 0 0 0 4px rgba(19, 91, 236, 0.18); } /* Dark mode (cuando ) */ .dark :where(input, textarea, select) { background: rgb(2 6 23); /* slate-950 */ border-color: rgb(51 65 85); /* slate-700 */ } .dark :where(input, textarea, select):hover { border-color: rgb(71 85 105); /* slate-600 */ } .dark :where(input, textarea, select):focus { border-color: #135bec; box-shadow: 0 0 0 4px rgba(19, 91, 236, 0.22); } /* Checkboxes / radios no deben volverse "full width" */ :where(input[type="checkbox"], input[type="radio"]) { width: auto; padding: 0; border-radius: 0.25rem; }