/* ============================================================
   css/utilities.css
   Reemplazo mínimo del CDN de Tailwind.
   Solo las utilidades usadas en index.html.
   Se carga DESPUÉS de components.css para poder sobreescribir.
   ============================================================ */

/* --- Display / Layout --- */
.block{display:block}
.flex{display:flex}
.grid{display:grid}
.relative{position:relative}
.absolute{position:absolute}
.flex-1{flex:1 1 0%}
.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.justify-center{justify-content:center}
.place-items-center{place-items:center}
.text-right{text-align:right}
.text-center{text-align:center}
.overflow-x-auto{overflow-x:auto}
.pointer-events-none{pointer-events:none}
.cursor-pointer{cursor:pointer}

/* --- Sizing --- */
.w-full{width:100%}
.max-w-7xl{max-width:80rem}
.w-6{width:1.5rem}  .h-6{height:1.5rem}
.w-8{width:2rem}    .h-8{height:2rem}
.w-40{width:10rem}
.min-w-\[520px\]{min-width:520px}
.mx-auto{margin-left:auto;margin-right:auto}

/* --- Padding --- */
.p-3{padding:.75rem}
.p-4{padding:1rem}
.px-1{padding-left:.25rem;padding-right:.25rem}
.px-2{padding-left:.5rem;padding-right:.5rem}
.px-4{padding-left:1rem;padding-right:1rem}
.py-1{padding-top:.25rem;padding-bottom:.25rem}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem}
.pr-20{padding-right:5rem}
.pb-6{padding-bottom:1.5rem}

/* --- Margins --- */
.-mx-1{margin-left:-.25rem;margin-right:-.25rem}
.mt-1{margin-top:.25rem}
.mt-1\.5{margin-top:.375rem}
.mt-2{margin-top:.5rem}
.mt-3{margin-top:.75rem}
.mt-4{margin-top:1rem}
.mb-1\.5{margin-bottom:.375rem}
.mb-2{margin-bottom:.5rem}
.mb-3{margin-bottom:.75rem}
.mb-4{margin-bottom:1rem}
.mb-6{margin-bottom:1.5rem}
.mb-8{margin-bottom:2rem}
.my-3{margin-top:.75rem;margin-bottom:.75rem}
.my-4{margin-top:1rem;margin-bottom:1rem}

/* --- Positioning --- */
.top-1\/2{top:50%}
.right-2{right:.5rem}
.-translate-y-1\/2{transform:translateY(-50%)}

/* --- Grid columns --- */
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}

/* --- Gap --- */
.gap-1\.5{gap:.375rem}
.gap-2{gap:.5rem}
.gap-2\.5{gap:.625rem}
.gap-3{gap:.75rem}
.gap-4{gap:1rem}
.gap-5{gap:1.25rem}

/* --- Border radius --- */
.rounded-lg{border-radius:.5rem}
.rounded-xl{border-radius:.75rem}

/* --- Border --- */
.border{border-width:1px;border-style:solid}
.border-teal-400\/30{border-color:rgba(45,212,191,.30)}
.border-indigo-900\/50{border-color:rgba(49,46,129,.50)}

/* --- Backgrounds --- */
.bg-\[#08071a\]\/60{background-color:rgba(8,7,26,.60)}
.bg-\[#08071a\]\/45{background-color:rgba(8,7,26,.45)}
.bg-teal-500\/15{background-color:rgba(20,184,166,.15)}

/* --- Typography: size --- */
.text-xs{font-size:.75rem;line-height:1rem}
.text-sm{font-size:.875rem;line-height:1.25rem}
.text-base{font-size:1rem;line-height:1.5rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-2xl{font-size:1.5rem;line-height:2rem}
.text-3xl{font-size:1.875rem;line-height:2.25rem}
.text-4xl{font-size:2.25rem;line-height:2.5rem}

/* --- Typography: weight --- */
.font-medium{font-weight:500}
.font-semibold{font-weight:600}
.font-bold{font-weight:700}
.font-extrabold{font-weight:800}
.font-black{font-weight:900}

/* --- Typography: spacing --- */
.leading-tight{line-height:1.25}
.tracking-tight{letter-spacing:-.025em}

/* --- Typography: colors --- */
.text-white{color:#fff}
.text-teal-200{color:#99f6e4}
.text-teal-300{color:#5eead4}
.text-violet-300{color:#c4b5fd}
.text-indigo-100{color:#e0e7ff}
.text-indigo-200{color:#c7d2fe}
.text-indigo-300{color:#a5b4fc}
.text-indigo-100\/80{color:rgba(224,231,255,.80)}
.text-indigo-200\/60{color:rgba(199,210,254,.60)}
.text-indigo-300\/60{color:rgba(165,180,252,.60)}

/* --- Misc --- */
.break-all{word-break:break-all}

/* --- Arbitrary text sizes --- */
.text-\[\.6rem\]{font-size:.6rem}
.text-\[\.68rem\]{font-size:.68rem}
.text-\[\.7rem\]{font-size:.7rem}
.text-\[\.72rem\]{font-size:.72rem}

/* --- !important utilities (del select de helds) --- */
.\!w-auto{width:auto!important}
.\!py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}
.\!px-3{padding-left:.75rem!important;padding-right:.75rem!important}
.\!text-xs{font-size:.75rem!important;line-height:1rem!important}

/* --- Responsive: sm (≥640px) --- */
@media (min-width:640px){
  .sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}
  .sm\:py-10{padding-top:2.5rem;padding-bottom:2.5rem}
  .sm\:gap-2{gap:.5rem}
  .sm\:gap-5{gap:1.25rem}
  .sm\:text-base{font-size:1rem;line-height:1.5rem}
  .sm\:text-lg{font-size:1.125rem;line-height:1.75rem}
  .sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}
}

/* --- Responsive: md (≥768px) --- */
@media (min-width:768px){
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}   /* ← nueva */
}

/* --- Responsive: lg (≥1024px) --- */
@media (min-width:1024px){
  .lg\:px-8{padding-left:2rem;padding-right:2rem}
  .lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lg\:flex-row{flex-direction:row}
  .lg\:items-center{align-items:center}
  .lg\:text-5xl{font-size:3rem;line-height:1}
}