/* Frontend local: componentes y utilidades usadas por las plantillas. */
:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body { min-height: 100vh; background: #020617; color: #f1f5f9; -webkit-font-smoothing: antialiased; }
::selection { background: rgb(34 211 238 / .3); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
input, select, textarea { display: block; width: 100%; margin-top: .5rem; border: 1px solid rgb(255 255 255 / .1); border-radius: .75rem; outline: 0; background: rgb(2 6 23 / .7); padding: .75rem 1rem; color: white; transition: border-color .2s, box-shadow .2s; }
input:focus, select:focus, textarea:focus { border-color: rgb(34 211 238 / .5); box-shadow: 0 0 0 4px rgb(34 211 238 / .1); }
input[type="radio"], input[type="checkbox"] { display: inline-block; width: 1rem; height: 1rem; margin: 0; padding: 0; accent-color: #22d3ee; }
label { color: #cbd5e1; font-size: .875rem; font-weight: 500; }
ul.errorlist { margin: .5rem 0 0; padding: 0; list-style: none; color: #fda4af; font-size: .875rem; }
.glass, .float-card { border: 1px solid rgb(255 255 255 / .1); border-radius: 1.5rem; background: rgb(255 255 255 / .05); box-shadow: 0 25px 50px -12px rgb(0 0 0 / .5); backdrop-filter: blur(12px); }
.float-card { transition: transform .3s, border-color .3s, box-shadow .3s; }
.float-card:hover { transform: translateY(-.25rem); border-color: rgb(34 211 238 / .2); box-shadow: 0 25px 50px -12px rgb(6 182 212 / .2); }
.eyebrow { color: #67e8f9; font-size: .75rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.page-title { margin: .75rem 0 0; color: white; font-size: 1.875rem; font-weight: 900; letter-spacing: -.025em; }
.muted { color: #94a3b8; font-size: .875rem; line-height: 1.5rem; }
.btn-primary, .btn-secondary { display: inline-flex; min-height: 2.75rem; align-items: center; justify-content: center; border-radius: .75rem; padding: .75rem 1.25rem; font-size: .875rem; transition: transform .2s, background .2s, border-color .2s, box-shadow .2s; cursor: pointer; }
.btn-primary { border: 0; background: #67e8f9; color: #020617; font-weight: 700; box-shadow: 0 10px 15px -3px rgb(6 182 212 / .2); }
.btn-primary:hover { transform: translateY(-.125rem); background: #a5f3fc; }
.btn-secondary { border: 1px solid rgb(255 255 255 / .1); background: rgb(255 255 255 / .05); color: #e2e8f0; font-weight: 600; }
.btn-secondary:hover { transform: translateY(-.125rem); border-color: rgb(255 255 255 / .2); background: rgb(255 255 255 / .1); }
.stat { border: 1px solid rgb(255 255 255 / .1); border-radius: 1rem; background: rgb(2 6 23 / .4); padding: 1rem; }
.field-stack p { margin: 0 0 1.25rem; } .field-stack p:last-child { margin-bottom: 0; }

/* Layout */
.block { display:block } .inline-block { display:inline-block } .flex { display:flex } .inline-flex { display:inline-flex } .grid { display:grid } .hidden { display:none }
.fixed { position:fixed } .absolute { position:absolute } .relative { position:relative } .sticky { position:sticky }
.inset-0 { inset:0 } .top-0 { top:0 } .top-6 { top:1.5rem } .top-1\/3 { top:33.333% } .-top-10 { top:-2.5rem } .-top-12 { top:-3rem }
.right-0 { right:0 } .right-6 { right:1.5rem } .-right-10 { right:-2.5rem } .-right-12 { right:-3rem } .-right-24 { right:-6rem } .-left-24 { left:-6rem }
.bottom-0 { bottom:0 } .bottom-4 { bottom:1rem } .left-1\/3 { left:33.333% }
.pointer-events-none { pointer-events:none } .overflow-hidden { overflow:hidden }
.mx-auto { margin-left:auto; margin-right:auto } .mt-1 { margin-top:.25rem } .mt-2 { margin-top:.5rem } .mt-3 { margin-top:.75rem } .mt-4 { margin-top:1rem } .mt-5 { margin-top:1.25rem } .mt-6 { margin-top:1.5rem } .mt-7 { margin-top:1.75rem } .mt-8 { margin-top:2rem }
.mb-2 { margin-bottom:.5rem } .mb-4 { margin-bottom:1rem } .mb-6 { margin-bottom:1.5rem } .pt-5 { padding-top:1.25rem }
.p-2 { padding:.5rem } .p-4 { padding:1rem } .p-5 { padding:1.25rem } .p-6 { padding:1.5rem } .p-7 { padding:1.75rem } .p-8 { padding:2rem } .p-10 { padding:2.5rem } .p-12 { padding:3rem }
.px-3 { padding-left:.75rem; padding-right:.75rem } .px-4 { padding-left:1rem; padding-right:1rem } .py-1 { padding-top:.25rem; padding-bottom:.25rem } .py-3 { padding-top:.75rem; padding-bottom:.75rem } .py-4 { padding-top:1rem; padding-bottom:1rem }
.\!px-4 { padding-left:1rem!important; padding-right:1rem!important } .\!py-2 { padding-top:.5rem!important; padding-bottom:.5rem!important }
.gap-1 { gap:.25rem } .gap-2 { gap:.5rem } .gap-3 { gap:.75rem } .gap-4 { gap:1rem } .gap-16 { gap:4rem }
.space-y-3 > * + * { margin-top:.75rem } .space-y-5 > * + * { margin-top:1.25rem }
.flex-col { flex-direction:column } .flex-col-reverse { flex-direction:column-reverse } .items-start { align-items:flex-start } .items-center { align-items:center } .items-end { align-items:flex-end } .justify-between { justify-content:space-between } .place-items-center { place-items:center }
.auto-rows-auto { grid-auto-rows:auto } .grid-cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)) } .col-span-2 { grid-column:span 2/span 2 }
.w-full { width:100% } .w-11 { width:2.75rem } .w-12 { width:3rem } .w-48 { width:12rem } .w-52 { width:13rem } .w-72 { width:18rem } .w-80 { width:20rem } .w-96 { width:24rem } .w-1\/2 { width:50% } .w-2\/3 { width:66.667% }
.h-full { height:100% } .h-1\.5 { height:.375rem } .h-11 { height:2.75rem } .h-12 { height:3rem } .h-48 { height:12rem } .h-52 { height:13rem } .h-72 { height:18rem } .h-80 { height:20rem } .h-96 { height:24rem }
.min-h-screen { min-height:100vh } .min-h-64 { min-height:16rem } .min-h-\[70vh\] { min-height:70vh } .\!min-h-10 { min-height:2.5rem!important }
.max-w-lg { max-width:32rem } .max-w-xl { max-width:36rem } .max-w-7xl { max-width:80rem }

/* Type and appearance */
.text-center { text-align:center } .text-right { text-align:right } .text-xs { font-size:.75rem } .text-sm { font-size:.875rem } .text-lg { font-size:1.125rem } .text-xl { font-size:1.25rem } .text-2xl { font-size:1.5rem } .text-3xl { font-size:1.875rem } .text-4xl { font-size:2.25rem } .text-5xl { font-size:3rem }
.font-mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace } .font-semibold { font-weight:600 } .font-bold { font-weight:700 } .font-black { font-weight:900 } .uppercase { text-transform:uppercase } .tracking-tight { letter-spacing:-.025em } .tracking-wider { letter-spacing:.05em } .truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.text-white { color:#fff } .text-white\/10 { color:rgb(255 255 255 / .1) } .text-slate-200 { color:#e2e8f0 } .text-slate-300 { color:#cbd5e1 } .text-slate-400 { color:#94a3b8 } .text-slate-500 { color:#64748b } .text-slate-700 { color:#334155 }
.text-cyan-200 { color:#a5f3fc } .text-cyan-300 { color:#67e8f9 } .text-indigo-200 { color:#c7d2fe } .text-indigo-300 { color:#a5b4fc } .\!text-indigo-300 { color:#a5b4fc!important } .text-emerald-200 { color:#a7f3d0 } .text-emerald-300 { color:#6ee7b7 } .text-rose-200 { color:#fecdd3 } .text-rose-300 { color:#fda4af } .text-red-200 { color:#fecaca } .text-amber-200 { color:#fde68a } .text-amber-300 { color:#fcd34d }
.rounded-lg { border-radius:.5rem } .rounded-xl { border-radius:.75rem } .rounded-2xl { border-radius:1rem } .rounded-full { border-radius:9999px }
.border { border-width:1px; border-style:solid } .border-t { border-top-width:1px; border-top-style:solid } .border-white\/10 { border-color:rgb(255 255 255 / .1) } .border-emerald-400\/10 { border-color:rgb(52 211 153 / .1) } .border-emerald-400\/20 { border-color:rgb(52 211 153 / .2) } .border-cyan-400\/20 { border-color:rgb(34 211 238 / .2) } .border-rose-400\/20 { border-color:rgb(251 113 133 / .2) } .border-red-400\/20 { border-color:rgb(248 113 113 / .2) } .border-amber-400\/20 { border-color:rgb(251 191 36 / .2) }
.bg-white\/5 { background-color:rgb(255 255 255 / .05) } .bg-slate-950\/50 { background-color:rgb(2 6 23 / .5) } .bg-cyan-400\/5 { background-color:rgb(34 211 238 / .05) } .bg-cyan-400\/10 { background-color:rgb(34 211 238 / .1) } .bg-cyan-500\/10 { background-color:rgb(6 182 212 / .1) } .bg-indigo-400\/10 { background-color:rgb(129 140 248 / .1) } .bg-indigo-600\/10 { background-color:rgb(79 70 229 / .1) } .bg-emerald-400\/5 { background-color:rgb(52 211 153 / .05) } .bg-emerald-400\/10 { background-color:rgb(52 211 153 / .1) } .bg-emerald-500\/5 { background-color:rgb(16 185 129 / .05) } .bg-rose-400\/10 { background-color:rgb(251 113 133 / .1) } .bg-red-400\/10 { background-color:rgb(248 113 113 / .1) } .bg-amber-400\/10 { background-color:rgb(251 191 36 / .1) }
.blur-3xl { filter:blur(64px) } .shadow-2xl { box-shadow:0 25px 50px -12px rgb(0 0 0 / .5) } .shadow-black\/70 { --shadow-color:rgb(0 0 0 / .7) }
.bg-gradient-to-r { background-image:linear-gradient(to right,var(--gradient-from),var(--gradient-to)) } .from-cyan-400 { --gradient-from:#22d3ee } .to-cyan-200 { --gradient-to:#a5f3fc } .from-indigo-400 { --gradient-from:#818cf8 } .to-violet-300 { --gradient-to:#c4b5fd }
.transition { transition:all .2s }
.group:hover .group-hover\:text-cyan-200 { color:#a5f3fc } .group:hover .group-hover\:text-cyan-300 { color:#67e8f9 } .group:hover .group-hover\:text-indigo-200 { color:#c7d2fe }

/* Clave de respuestas generada por Django. */
.answer-options ul { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.25rem; margin:0; padding:0; list-style:none; }
.answer-options label { display:flex; cursor:pointer; flex-direction:column; align-items:center; gap:.5rem; border:1px solid rgb(255 255 255 / .1); border-radius:.5rem; background:rgb(2 6 23 / .5); padding:.5rem; font-size:.75rem; transition:all .2s; }
.answer-options label:hover { border-color:rgb(34 211 238 / .3); background:rgb(34 211 238 / .05); }

@media (min-width:640px) {
  .sm\:block { display:block } .sm\:flex-row { flex-direction:row } .sm\:justify-end { justify-content:flex-end }
  .sm\:grid-cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)) } .sm\:grid-cols-4 { grid-template-columns:repeat(4,minmax(0,1fr)) } .sm\:col-span-1 { grid-column:span 1/span 1 } .sm\:col-span-2 { grid-column:span 2/span 2 }
  .sm\:p-8 { padding:2rem } .sm\:p-9 { padding:2.25rem } .sm\:p-10 { padding:2.5rem } .sm\:px-5 { padding-left:1.25rem; padding-right:1.25rem } .sm\:px-6 { padding-left:1.5rem; padding-right:1.5rem } .sm\:py-6 { padding-top:1.5rem; padding-bottom:1.5rem }
  .page-title { font-size:3rem }
}
@media (min-width:768px) {
  .md\:grid-cols-5 { grid-template-columns:repeat(5,minmax(0,1fr)) } .md\:grid-cols-6 { grid-template-columns:repeat(6,minmax(0,1fr)) }
  .md\:col-span-2 { grid-column:span 2/span 2 } .md\:col-span-3 { grid-column:span 3/span 3 } .md\:col-span-4 { grid-column:span 4/span 4 } .md\:col-span-6 { grid-column:span 6/span 6 } .md\:row-span-2 { grid-row:span 2/span 2 }
}
@media (min-width:1024px) {
  .lg\:grid-cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)) } .lg\:grid-cols-4 { grid-template-columns:repeat(4,minmax(0,1fr)) } .lg\:grid-cols-5 { grid-template-columns:repeat(5,minmax(0,1fr)) } .lg\:grid-cols-6 { grid-template-columns:repeat(6,minmax(0,1fr)) }
  .lg\:col-span-2 { grid-column:span 2/span 2 } .lg\:col-span-3 { grid-column:span 3/span 3 } .lg\:col-span-4 { grid-column:span 4/span 4 } .lg\:px-8 { padding-left:2rem; padding-right:2rem } .lg\:min-h-\[26rem\] { min-height:26rem }
}
@media (min-width:1280px) {
  .xl\:grid-cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)) } .xl\:grid-cols-5 { grid-template-columns:repeat(5,minmax(0,1fr)) } .xl\:col-span-2 { grid-column:span 2/span 2 }
}