/* ============================================================================
   components.css — Librería de componentes ASTRO · mobile-first
   Botón · Input · Select · Card · Badge/Píldora · Tabs · Stepper · Tabla ·
   Banner · Avatar · Modal. Depende de tokens.css + base.css.
   ========================================================================== */

/* ============================================================ BOTÓN */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-head);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-btn-md);
  line-height: 1.2;
  border: 1.5px solid transparent;
  border-radius: var(--radius-full);
  padding: var(--space-3) var(--space-5);   /* Medium por defecto */
  min-height: 44px;                          /* target táctil */
  transition: background var(--transition-fast), border-color var(--transition-fast),
              box-shadow var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
  user-select: none;
}
.btn:disabled,
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  background: var(--border-subtle);
  color: var(--text-disabled);
  border-color: transparent;
  box-shadow: none;
}

/* Tamaños */
.btn--sm { font-size: var(--fs-btn-sm); padding: var(--space-2) var(--space-4); min-height: 38px; }
.btn--lg { font-size: var(--fs-btn-lg); padding: var(--space-4) var(--space-6); min-height: 52px; }

/* Primary — gradiente azul */
.btn--primary {
  background: var(--grad-primary);
  color: var(--text-inverse);
  box-shadow: var(--shadow-btn);
}
.btn--primary:hover:not(:disabled) { background: var(--brand-accent); }
.btn--primary:active:not(:disabled) { background: var(--brand-primary-active); }

/* Secondary — borde */
.btn--secondary {
  background: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--border-default);
}
.btn--secondary:hover:not(:disabled) { background: var(--bg-sunken); }
.btn--secondary:active:not(:disabled) { background: var(--border-subtle); }

/* Ghost — sin fondo */
.btn--ghost {
  background: transparent;
  color: var(--brand-primary);
}
.btn--ghost:hover:not(:disabled) { background: var(--bg-blue-50); }

/* Danger */
.btn--danger {
  background: var(--error);
  color: var(--text-inverse);
}
.btn--danger:hover:not(:disabled) { background: var(--error-active); }

.btn--block { width: 100%; }
.btn__icon { width: 18px; height: 18px; }

/* Loading */
.btn[aria-busy="true"] { color: transparent; position: relative; }
.btn[aria-busy="true"]::after {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  color: var(--text-inverse);
  animation: btn-spin 0.7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* Botón de ícono */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.icon-btn:hover { background: var(--bg-sunken); color: var(--text-primary); }
.icon-btn svg { width: 20px; height: 20px; }

/* Campana con indicador de no leídas (se oculta vía data-unread="0") */
.icon-btn--badge { position: relative; }
.icon-btn--badge::after {
  content: "";
  position: absolute;
  top: 10px; right: 10px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--brand-accent);
}
.icon-btn--badge[data-unread="0"]::after { display: none; }

/* ============================================================ CAMPOS */
.field { display: flex; flex-direction: column; gap: var(--space-2); }

.field__label {
  font-family: var(--font-head);
  font-weight: var(--fw-medium);
  font-size: var(--fs-caption);
  color: var(--text-secondary);
}
.field__req  { color: var(--brand-primary); }
.field__hint { color: var(--text-tertiary); font-weight: var(--fw-regular); }

.input,
.select-trigger {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  font-size: 1rem;                 /* 16px evita zoom en iOS */
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.input::placeholder { color: var(--text-tertiary); }
.input:hover,
.select-trigger:hover { border-color: var(--border-strong); }
.input:focus-visible,
.select-trigger:focus-visible { border-color: var(--brand-primary); box-shadow: var(--focus-ring); }

/* Input con botón embebido (p. ej. mostrar/ocultar contraseña) */
.input-affix { position: relative; }
.input-affix .input { padding-inline-end: var(--space-14); }
.input-affix__btn {
  position: absolute;
  top: 50%;
  inset-inline-end: var(--space-1);
  transform: translateY(-50%);
}

/* Estado inválido */
.field[data-invalid="true"] .input { border-color: var(--error); }
.field__error {
  display: none;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-caption);
  color: var(--error-text);
}
.field__error svg { width: 14px; height: 14px; }
.field[data-invalid="true"] .field__error { display: flex; }

/* ============================================================ SELECT (listbox accesible) */
.select { position: relative; }
.select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  text-align: left;
}
.select-trigger__chevron {
  width: 18px; height: 18px;
  color: var(--text-tertiary);
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}
.select[data-open="true"] .select-trigger__chevron { transform: rotate(180deg); }

.select-listbox {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  z-index: 40;
  max-height: 280px;
  overflow-y: auto;
  padding: var(--space-1);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.select[data-open="false"] .select-listbox { display: none; }

.option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-badge);
  color: var(--text-primary);
  cursor: pointer;
}
.option:hover,
.option[data-active="true"] { background: var(--bg-sunken); }
.option[aria-selected="true"] { background: var(--bg-blue-50); color: var(--brand-primary); }
.option__check { width: 18px; height: 18px; opacity: 0; color: var(--brand-primary); }
.option[aria-selected="true"] .option__check { opacity: 1; }

/* ============================================================ CHECKBOX */
.checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  min-height: 44px; /* target táctil */
  font-size: var(--fs-body);
  color: var(--text-secondary);
  user-select: none;
}
.checkbox input {
  appearance: none;
  -webkit-appearance: none;
  width: 20px; height: 20px;
  margin: 0;
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-badge);
  background: var(--bg-surface);
  display: grid;
  place-content: center;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.checkbox input::after {
  content: "";
  width: 10px; height: 10px;
  transform: scale(0);
  transition: transform var(--transition-fast);
  box-shadow: inset 1em 1em var(--text-inverse);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.checkbox input:checked {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
}
.checkbox input:checked::after { transform: scale(1); }
.checkbox input:focus-visible { box-shadow: var(--focus-ring); }

/* ============================================================ CARD */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}
.card__title {
  font-family: var(--font-head);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h3);
  margin-bottom: var(--space-4);
}

/* ============================================================ BADGE / PÍLDORA */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: 0.6875rem;               /* 11px */
  line-height: 1;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--pill-draft-bg);
  color: var(--pill-draft-tx);
}
.pill::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.pill--active  { background: var(--pill-active-bg);  color: var(--pill-active-tx); }
.pill--pending { background: var(--pill-pending-bg); color: var(--pill-pending-tx); }
.pill--done    { background: var(--pill-done-bg);    color: var(--pill-done-tx); }
.pill--urgent  { background: var(--pill-urgent-bg);  color: var(--pill-urgent-tx); }
/* Coincide con el default de `.pill`. Se declara explícito porque `app.js` lo
   usa por nombre (estados "Cerrado" y "Cancelado") y un modificador que no
   existe en la hoja invita a "arreglarlo" cambiando el tono equivocado. */
.pill--draft   { background: var(--pill-draft-bg);   color: var(--pill-draft-tx); }

/* Badge simple (sin punto) */
.badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-badge);
  background: var(--bg-sunken);
  color: var(--text-secondary);
}

/* ============================================================ TABS */
.tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--border-subtle);
}
.tab {
  appearance: none;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-strong);
  color: var(--text-tertiary);
  padding: var(--space-3) var(--space-4);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.tab:hover { color: var(--text-primary); }
.tab[aria-selected="true"] { color: var(--brand-primary); border-bottom-color: var(--brand-primary); }

/* ============================================================ STEPPER (wizards) */
.stepper {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-tertiary);
  font-weight: var(--fw-medium);
  font-size: var(--fs-caption);
}
.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--bg-sunken);
  color: var(--text-tertiary);
  font-family: var(--font-head);
  font-weight: var(--fw-semibold);
}
.step[data-state="active"] { color: var(--text-primary); }
.step[data-state="active"] .step__num { background: var(--brand-primary); color: var(--text-inverse); }
.step[data-state="done"] .step__num { background: var(--success); color: var(--text-inverse); }
.step__line { flex: 1; height: 2px; min-width: 24px; background: var(--border-subtle); }

/* ============================================================ TABLA */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body);
}
.table th {
  text-align: left;
  font-family: var(--font-head);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-caption);
  color: var(--text-tertiary);
  background: var(--bg-sunken);
  padding: var(--space-3) var(--space-4);
  white-space: nowrap;
}
.table td {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  vertical-align: middle;
}
.table tbody tr { transition: background var(--transition-fast); }
.table tbody tr:hover { background: var(--bg-blue-50); cursor: pointer; }

/* ============================================================ BANNER */
.banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-banner);
  font-size: var(--fs-body);
  background: var(--bg-blue-50);
  color: var(--text-secondary);
}
.banner svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--brand-primary); }
.banner--error { background: var(--error-bg); color: var(--error-text); }
.banner--error svg { color: var(--error-text); }
.banner--warn { background: var(--pill-pending-bg); color: var(--pill-pending-tx); }
.banner--warn svg { color: var(--pill-pending-tx); }

/* ============================================================ AVATAR */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-lg);
  background: var(--brand-navy);
  color: var(--text-inverse);
  font-family: var(--font-head);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  flex-shrink: 0;
}
.avatar--circle { border-radius: 50%; }
.avatar--lg { width: 72px; height: 72px; font-size: var(--fs-h3); }

/* ============================================================ CARGA GLOBAL */
/* Overlay de espera de consultas (lecturas y escrituras): fondo desenfocado +
   logo de marca latiendo. Lo maneja window.Carga (arranque.js) con umbral
   anti-parpadeo. z-index 70: sobre los modales (60, así también tapa sus
   botones durante una escritura) y bajo el command palette (80, que sigue
   usable mientras sus búsquedas corren). */
.carga-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.carga-overlay__logo {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* ============================================================ MODAL */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  background: rgba(0, 15, 25, 0.5);
}
.modal {
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow: auto;
  background: var(--bg-surface);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-xl);
}
.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
}
.modal__body { padding: var(--space-6); }

/* ============================================================ SKELETON (loading) */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--bg-sunken);
  border-radius: var(--radius-badge);
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  animation: skeleton-shimmer 1.4s infinite;
}
@keyframes skeleton-shimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skeleton::after { animation: none; } }

.skeleton-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}
.skeleton-row:first-child { border-top: 0; }
.skeleton-cell { height: 14px; }
.skeleton-cell--sm { width: 15%; }
.skeleton-cell--md { width: 30%; }
.skeleton-cell--lg { width: 40%; flex: 1; }

/* ============================================================ ESTADOS (vacío / error) */
.state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-14) var(--space-6);
}
.state__icon {
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--bg-sunken);
  color: var(--text-tertiary);
}
.state__icon svg { width: 28px; height: 28px; }
.state--error .state__icon { background: var(--error-bg); color: var(--error-text); }
.state__desc { color: var(--text-secondary); max-width: 42ch; }

/* ============================================================ ADJUNTOS (documentación) */
.adjuntos__zona {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 2px dashed var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color var(--transition-base), background-color var(--transition-base);
}
.adjuntos__zona svg { width: 24px; height: 24px; flex-shrink: 0; color: var(--text-tertiary); }
.adjuntos__zona:hover,
.adjuntos__zona.is-drag { border-color: var(--brand-primary); background: var(--pill-active-bg); }
.adjuntos__zona:focus-within { box-shadow: var(--focus-ring); }
.adjuntos__lista { list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.adjunto {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}
.adjunto:last-child { border-bottom: 0; }
/* Botón "Ver" del adjunto: misma estética que Imprimir (btn--secondary con
   ícono), compactado para caber en la fila sin perder el target táctil. */
.adjunto__ver {
  padding: var(--space-2) var(--space-4);
  flex-shrink: 0;
}
.adjunto__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-10);
  height: var(--space-10);
  border-radius: var(--radius-md);
  background: var(--pill-draft-bg);
  color: var(--pill-draft-tx);
  flex-shrink: 0;
}
.adjunto__icono svg { width: var(--space-5); height: var(--space-5); }
.adjunto__meta { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.adjunto__nombre { font-size: var(--fs-body); overflow-wrap: anywhere; }
.adjunto__detalle { font-size: var(--fs-caption); color: var(--text-tertiary); }
.adjunto__eliminar { color: var(--text-tertiary); flex-shrink: 0; }
.adjunto__eliminar:hover { color: var(--error); }
.adjuntos__vacio { padding-block: var(--space-3); }

/* Banner informativo (Reportes en construcción y avisos neutros) */
.banner--info { background: var(--pill-active-bg); color: var(--pill-active-tx); }
.banner--info svg { color: var(--pill-active-tx); }

/* Adjuntos: estado "subiendo a HubSpot" (la subida es real, no instantánea) */
.adjuntos__zona.is-subiendo {
  opacity: .6;
  pointer-events: none;
  cursor: progress;
}