/* src/assets/css/utilities.css — Clases de utilidad globales */

/* ─── Tipografía: escalas de tamaño ──────────────────────────── */
.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }
.text-2xl  { font-size: var(--text-2xl); }
.text-3xl  { font-size: var(--text-3xl); }
.text-4xl  { font-size: var(--text-4xl); }
.text-5xl  { font-size: 3rem; }

/* ─── Tipografía: alineación y estilo ────────────────────────── */
.text-center  { text-align: center; }
.text-left    { text-align: left; }
.text-right   { text-align: right; }
.italic       { font-style: italic; }
.uppercase    { text-transform: uppercase; }
.weight-normal   { font-weight: var(--weight-normal); }
.weight-medium   { font-weight: var(--weight-medium); }
.weight-semibold { font-weight: var(--weight-semibold); }
.weight-bold     { font-weight: var(--weight-bold); }
.weight-black    { font-weight: var(--weight-black); }

/* ─── Colores de texto ───────────────────────────────────────── */
.color-grana       { color: var(--color-grana); }
.color-gold        { color: var(--color-gold); }
.color-blue        { color: var(--color-blue); }
.color-dark        { color: var(--color-dark); }
.color-text-muted  { color: var(--color-text-muted); }
.color-text-inverse{ color: var(--color-text-inverse); }

/* ─── Colores de fondo ───────────────────────────────────────── */
.bg-section { background-color: var(--color-bg-section); }
.bg-card    { background-color: var(--color-bg-card); }
.bg-dark    { background-color: var(--color-dark); }

/* ─── Márgenes ───────────────────────────────────────────────── */
.margin-b-0  { margin-bottom: 0; }
.margin-b-2  { margin-bottom: var(--space-2); }
.margin-b-4  { margin-bottom: var(--space-4); }
.margin-b-6  { margin-bottom: var(--space-6); }
.margin-b-8  { margin-bottom: var(--space-8); }
.margin-b-12 { margin-bottom: var(--space-12); }
.margin-b-16 { margin-bottom: var(--space-16); }
.margin-t-2  { margin-top: var(--space-2); }
.margin-t-4  { margin-top: var(--space-4); }
.margin-t-6  { margin-top: var(--space-6); }
.margin-t-8  { margin-top: var(--space-8); }
.margin-t-12 { margin-top: var(--space-12); }
.margin-l-2  { margin-left: var(--space-2); }
.margin-l-4  { margin-left: var(--space-4); }
.margin-r-2  { margin-right: var(--space-2); }
.margin-r-4  { margin-right: var(--space-4); }
.margin-x-auto { margin-left: auto; margin-right: auto; }
.margin-y-6  { margin-top: var(--space-6);  margin-bottom: var(--space-6); }
.margin-y-8  { margin-top: var(--space-8);  margin-bottom: var(--space-8); }
.margin-y-16 { margin-top: var(--space-16); margin-bottom: var(--space-16); }

/* ─── Relleno ────────────────────────────────────────────────── */
.padding-2   { padding: var(--space-2); }
.padding-4   { padding: var(--space-4); }
.padding-8   { padding: var(--space-8); }
.padding-12  { padding: var(--space-12); }
.padding-b-2 { padding-bottom: var(--space-2); }
.padding-b-4 { padding-bottom: var(--space-4); }
.padding-t-2 { padding-top: var(--space-2); }
.padding-t-4 { padding-top: var(--space-4); }
.padding-y-6  { padding-top: var(--space-6);  padding-bottom: var(--space-6); }
.padding-y-8  { padding-top: var(--space-8);  padding-bottom: var(--space-8); }
.padding-y-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); }
.padding-y-16 { padding-top: var(--space-16); padding-bottom: var(--space-16); }
.padding-x-4  { padding-left: var(--space-4); padding-right: var(--space-4); }

/* ─── Anchura ────────────────────────────────────────────────── */
.w-full  { width: 100%; }
.max-w-xl  { max-width: var(--container-sm); }
.max-w-2xl { max-width: var(--container-md); }
.max-w-3xl { max-width: var(--container-lg); }

/* ─── Opacidad ───────────────────────────────────────────────── */
.opacity-90 { opacity: 0.9; }
.opacity-75 { opacity: 0.75; }

/* ─── Bordes ─────────────────────────────────────────────────── */
.border-b           { border-bottom: 1px solid var(--color-border); }
.border-t           { border-top: 1px solid var(--color-border); }
.border-radius-sm   { border-radius: var(--radius-sm); }
.border-radius-md   { border-radius: var(--radius-md); }
.border-radius-lg   { border-radius: var(--radius-lg); }
.border-radius-xl   { border-radius: var(--radius-xl); }
.border-grana-left  { border-left: 4px solid var(--color-grana); padding-left: var(--space-4); }

/* ─── Display y posición ─────────────────────────────────────── */
.block    { display: block; }
.hidden   { display: none; }
.relative { position: relative; }

/* ─── Formularios ────────────────────────────────────────────── */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.form-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.form-input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-family: var(--font-ui);
  background: var(--color-bg-card);
  color: var(--color-text);
  transition: border-color var(--transition-fast);
}

.form-input:focus {
  outline: none;
  border-color: var(--color-grana);
}

.form-input::placeholder {
  color: var(--color-text-muted);
}

select.form-input {
  cursor: pointer;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .form-row { grid-template-columns: repeat(2, 1fr); }
}

.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  cursor: pointer;
}

.form-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 3px;
  accent-color: var(--color-grana);
}

.form-status {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}

.form-status.success {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.form-status.error {
  background: var(--color-error-bg);
  color: var(--color-error);
}