/* ============================================================
   QAD Calidad — Utilidades atómicas
   Spacing, texto, fondo, borde, flex/grid, width/height. Son
   ayudantes de layout genéricos (no de marca): los colores con
   nombre (text-blue-600, bg-blue-600, …) resuelven al token de
   acento de marca para no quedar con el azul genérico anterior.
   No declarar aquí estilos de componente — ver components/.
   ============================================================ */

/* ─── Flex / Grid ────────────────────────────────────────────── */
.flex { display: flex; }
.flex-1 { flex: 1; }
.flex-col { flex-direction: column; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: 1fr; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
.col-span-full { grid-column: 1 / -1; }

/* ─── Posición / overflow ───────────────────────────────────── */
.h-screen { height: 100vh; }
.min-h-screen { min-height: 100vh; }
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-y-auto { overflow-y: auto; }
.overflow-x-auto { overflow-x: auto; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.relative { position: relative; }
.absolute { position: absolute; }
.sticky { position: sticky; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.top-0 { top: 0; }
.z-10 { z-index: 10; }
.z-50 { z-index: 50; }
.block { display: block; }
.inline-block { display: inline-block; }
.hidden { display: none; }
.min-w-0 { min-width: 0; }

/* ─── Width / Height ────────────────────────────────────────── */
.w-4  { width: 1rem; }
.h-4  { height: 1rem; }
.w-5  { width: 1.25rem; }
.h-5  { height: 1.25rem; }
.w-6  { width: 1.5rem; }
.h-6  { height: 1.5rem; }
.w-8  { width: 2rem; }
.h-8  { height: 2rem; }
.w-10 { width: 2.5rem; }
.h-10 { height: 2.5rem; }
.w-12 { width: 3rem; }
.h-12 { height: 3rem; }
.w-16 { width: 4rem; }
.h-16 { height: 4rem; }
.w-20 { width: 5rem; }
.w-64 { width: 16rem; }
.icon-sm { width: 0.875rem; height: 0.875rem; }
.icon-inline { display: inline; vertical-align: -2px; margin-right: 0.3rem; }

/* Anchos de columna de tabla en px — usados en encabezados <th> para fijar
   proporciones cuando no basta con el ancho automático del contenido. */
.col-w-44  { width: 44px; }
.col-w-48  { width: 48px; }
.col-w-60  { width: 60px; }
.col-w-80  { width: 80px; }
.col-w-90  { width: 90px; }
.col-w-100 { width: 100px; }
.col-w-110 { width: 110px; }
.col-w-130 { width: 130px; }
.col-w-140 { width: 140px; }
.max-w-sm  { max-width: 24rem; }
.max-w-md  { max-width: 28rem; }
.max-w-lg  { max-width: 32rem; }
.max-w-xl  { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-none { max-width: none; }
.mx-auto   { margin-left: auto; margin-right: auto; }

/* Anchos de página en px — usados por .page-container en varios módulos
   para acotar formularios/paneles a un ancho de lectura cómodo cuando los
   pasos rem estándar (max-w-sm..4xl) no calzan con el diseño original. */
.max-w-600  { max-width: 600px; }
.max-w-640  { max-width: 640px; }
.max-w-680  { max-width: 680px; }
.max-w-720  { max-width: 720px; }
.max-w-760  { max-width: 760px; }
.max-w-800  { max-width: 800px; }
.max-w-860  { max-width: 860px; }

@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
  .lg\:col-span-2  { grid-column: span 2; }
}

/* ─── Spacing ────────────────────────────────────────────────── */
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mr-2 { margin-right: 0.5rem; }
.ml-1 { margin-left: 0.25rem; }
.ml-2 { margin-left: 0.5rem; }
.ml-auto { margin-left: auto; }
.m-0 { margin: 0; }
.pt-2 { padding-top: 0.5rem; }
.pt-3 { padding-top: 0.75rem; }
.pb-4 { padding-bottom: 1rem; }
.p-3  { padding: 0.75rem; }
.p-4  { padding: 1rem; }
.p-6  { padding: 1.5rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }

/* ─── Texto ──────────────────────────────────────────────────── */
.text-xs   { font-size: 0.75rem; }
.text-sm   { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg   { font-size: 1.125rem; }
.text-xl   { font-size: 1.25rem; }
.text-2xl  { font-size: 1.5rem; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }
.text-gray-300 { color: #c7ceda; }
.text-gray-400 { color: #9FB3CC; }
.text-gray-500 { color: var(--color-text-muted); }
.text-gray-600 { color: var(--color-text-muted); }
.text-gray-700 { color: var(--color-text-body); }
.text-gray-900 { color: var(--color-text); }
.text-blue-500 { color: var(--color-accent); }
.text-blue-600 { color: var(--color-accent); }
.text-green-600 { color: var(--color-success); }
.text-red-600   { color: var(--color-danger); }
.text-danger    { color: var(--color-danger); }
.text-yellow-600 { color: var(--color-warning); }
.text-purple-600 { color: var(--color-copper); }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.truncate    { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leading-relaxed { line-height: 1.625; }
.uppercase   { text-transform: uppercase; }
.line-through { text-decoration: line-through; }
.tracking-wide { letter-spacing: 0.05em; }
.font-mono   { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; }

/* ─── Fondo ──────────────────────────────────────────────────── */
.bg-white     { background: var(--color-surface); }
.bg-gray-50   { background: var(--color-bg); }
.bg-gray-100  { background: var(--color-border-subtle); }
.bg-blue-50   { background: var(--color-info-bg); }
.bg-blue-600  { background: var(--color-accent); color: var(--color-surface); }

/* ─── Borde ──────────────────────────────────────────────────── */
.border          { border: 1px solid var(--color-border); }
.border-t        { border-top: 1px solid var(--color-border); }
.border-b        { border-bottom: 1px solid var(--color-border); }
.border-red-400  { border-color: var(--color-danger); }
.rounded         { border-radius: var(--radius-sm); }
.rounded-md      { border-radius: var(--radius-md); }
.rounded-lg      { border-radius: var(--radius-lg); }
.rounded-full    { border-radius: var(--radius-pill); }

/* ─── Misc ───────────────────────────────────────────────────── */
.shadow      { box-shadow: var(--shadow-soft); }
.shadow-md   { box-shadow: var(--shadow-overlay); }
.list-disc   { list-style-type: disc; }
.list-inside { list-style-position: inside; }
.list-none   { list-style: none; }
.cursor-pointer { cursor: pointer; }
.cursor-text    { cursor: text; }
/* Look-disabled: para botones cuyo :disabled real depende de un booleano
   Alpine (p. ej. `!selected`), donde el atributo disabled ya lo maneja
   Alpine — esta clase solo da la apariencia visual coherente. */
.is-disabled-look { opacity: 0.5; cursor: not-allowed; }
.select-none    { user-select: none; }
.whitespace-nowrap { white-space: nowrap; }
.divider { border: none; border-top: 1px solid var(--color-border-row); margin: 1rem 0; }

/* ─── Indicador de carga HTMX (convención estándar de htmx.org) ── */
.htmx-indicator { opacity: 0; transition: opacity 150ms ease-in; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }

/* ─── Animaciones compartidas ───────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes blink { 50% { opacity: 0; } }
.cursor-blink { animation: blink 1s step-start infinite; }
[x-cloak] { display: none !important; }