/* ==========================================================================
   STRATUM — Component primitives (Button, Input, Table, Dialog, Tooltip,
   Dropdown, Checkbox, Switch, Empty state). Implements COMPONENTS.md.
   Depends on tokens.css - load that first.
   ========================================================================== */

/* ---- Utility --------------------------------------------------------------*/
.hidden{ display:none !important; }

/* ---- Button --------------------------------------------------------------*/
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  font-family:var(--font-ui); font-weight:600; font-size:var(--text-body-sm-size);
  padding:var(--space-3) var(--space-4); border-radius:var(--radius-md);
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform var(--duration-instant) var(--ease-emphasized-out), filter var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard);
}
.btn:active{ transform:scale(.97); }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.btn .material-symbols-rounded{ font-size:18px; }

.btn-sm{ padding:var(--space-2) var(--space-3); font-size:var(--text-caption-size); border-radius:var(--radius-sm); }
.btn-lg{ padding:var(--space-4) var(--space-6); font-size:var(--text-body-size); }

.btn-primary{ background:var(--color-accent); color:var(--color-accent-on); box-shadow:var(--elevation-1); }
.btn-primary:hover:not(:disabled){ filter:brightness(1.06); }

.btn-secondary{ background:var(--color-surface); border-color:var(--color-border-strong); color:var(--color-text); }
.btn-secondary:hover:not(:disabled){ background:var(--color-surface-2); }

.btn-ghost{ background:transparent; color:var(--color-text-2); }
.btn-ghost:hover:not(:disabled){ background:var(--color-surface-2); color:var(--color-text); }

.btn-danger{ background:var(--color-danger-bg); color:var(--color-danger-text); }
.btn-danger:hover:not(:disabled){ filter:brightness(0.96); }

.btn-icon{ width:40px; height:40px; padding:0; border-radius:var(--radius-sm); background:transparent; color:var(--color-text-2); border:1px solid transparent; }
.btn-icon:hover:not(:disabled){ background:var(--color-surface-2); color:var(--color-text); }
.btn-icon.is-active{ background:var(--color-accent-soft); color:var(--color-accent-2); }

/* ---- Input -----------------------------------------------------------------*/
.field{ display:flex; flex-direction:column; gap:var(--space-1); }
.field-label{ font-family:var(--font-ui); font-size:var(--text-caption-size); font-weight:700; color:var(--color-text-2); }
.field-input, .field-select{
  font-family:var(--font-ui); font-size:var(--text-body-sm-size); color:var(--color-text);
  background:var(--color-surface-2); border:1px solid var(--color-border);
  border-radius:var(--radius-md); padding:var(--space-3) var(--space-4); min-height:40px;
  transition:border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
  width:100%; box-sizing:border-box;
}
.field-input:hover, .field-select:hover{ border-color:var(--color-border-strong); }
.field-input:focus, .field-select:focus{ outline:none; border-color:var(--color-accent); box-shadow:0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-accent-ring); }
.field-input:disabled{ opacity:.45; }
/* Campo con un dato sospechoso (RNC corto, NCF con formato raro, fecha a
   futuro, montos que no reconcilian) - mismo par de tokens que los chips de
   error, así que ya viene ajustado para light/dark. */
.field-input.is-invalid{ border-color:var(--color-danger-text); background:var(--color-danger-bg); }
.field-input.is-invalid:focus{ box-shadow:0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-danger-text); }
.field-input.is-mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.field-hint{ font-size:var(--text-caption-size); color:var(--color-text-3); }

/* The native <option> popup ignores `color-scheme` in some browser/OS combos
   (it follows the OS theme instead of the page's), rendering unreadable
   default-dark-on-dark or default-light text. Chromium/Firefox DO respect
   explicit background-color/color set directly on <option>, so set those
   as a second, more reliable line of defense. */
.field-select option{ background-color:var(--color-surface); color:var(--color-text); }

/* Mobile: 16px min font-size stops iOS Safari's auto-zoom-on-focus, and a
   taller min-height meets the ~44px touch-target guideline. */
@media (max-width:1023px){
  .field-input, .field-select{ font-size:16px; min-height:44px; }
}

/* ---- Enhanced select (desktop only) -----------------------------------
   Windows Chromium ignores both `color-scheme` and <option> background-color
   for the native dropdown popup (confirmed: it renders with a fixed light
   popup no matter the page theme), so the real fix is a custom popup we
   fully control. select-enhance.js hides the native <select> and builds
   this trigger+panel next to it, dispatching a real `change` event back to
   the hidden select so every existing listener keeps working unmodified.
   Mobile keeps the native control - the OS picker there is fine as-is. */
.select-enhanced{ position:relative; }
.select-enhanced select{ position:absolute; inset:0; opacity:0; pointer-events:none; }
.select-enhanced-trigger{
  font-family:var(--font-ui); font-size:var(--text-body-sm-size); color:var(--color-text);
  background:var(--color-surface-2); border:1px solid var(--color-border);
  border-radius:var(--radius-md); padding:var(--space-3) var(--space-4); min-height:40px;
  width:100%; box-sizing:border-box; display:flex; align-items:center; justify-content:space-between; gap:var(--space-2);
  cursor:pointer; text-align:left; transition:border-color var(--duration-fast) var(--ease-standard);
}
.select-enhanced-trigger span:first-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.select-enhanced-trigger:hover{ border-color:var(--color-border-strong); }
.select-enhanced-trigger:focus-visible{ outline:none; border-color:var(--color-accent); box-shadow:0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-accent-ring); }
.select-enhanced-trigger[disabled]{ opacity:.45; cursor:not-allowed; }
.select-enhanced-trigger .material-symbols-rounded{ font-size:18px; color:var(--color-text-3); flex-shrink:0; }
.select-enhanced-panel{
  position:absolute; top:calc(100% + 4px); left:0; min-width:100%; z-index:40;
  background:var(--color-surface); border:1px solid var(--elevation-border); box-shadow:var(--elevation-3);
  border-radius:var(--radius-md); padding:var(--space-1); max-height:280px; overflow-y:auto;
  display:none;
}
.select-enhanced-panel.is-open{ display:block; }
.select-enhanced-option{
  display:block; width:100%; text-align:left; padding:var(--space-2) var(--space-3); border-radius:var(--radius-sm);
  font-family:var(--font-ui); font-size:var(--text-body-sm-size); color:var(--color-text); background:none; border:0; cursor:pointer;
  white-space:nowrap;
}
.select-enhanced-option:hover, .select-enhanced-option.is-focused{ background:var(--color-surface-2); }
.select-enhanced-option[aria-selected="true"]{ font-weight:700; color:var(--color-accent); }
@media (max-width:1023px){
  /* Native control on mobile - restore it and hide the custom layer. */
  .select-enhanced select{ position:static; opacity:1; pointer-events:auto; }
  .select-enhanced-trigger, .select-enhanced-panel{ display:none !important; }
}
.field.has-error .field-input{ border-color:var(--color-danger-text); background:color-mix(in srgb, var(--color-danger-bg) 55%, var(--color-surface-2)); }
.field-error{ display:flex; align-items:center; gap:var(--space-1); font-size:var(--text-caption-size); color:var(--color-danger-text); font-weight:600; }
.field-error .material-symbols-rounded{ font-size:14px; }

/* ---- Checkbox / Switch ------------------------------------------------------*/
.checkbox{ width:18px; height:18px; border-radius:var(--radius-xs); border:1.5px solid var(--color-border-strong); appearance:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.checkbox:checked{ background:var(--color-accent); border-color:var(--color-accent); }
.checkbox:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-accent-ring); }

.radio{ width:18px; height:18px; border-radius:var(--radius-full); border:1.5px solid var(--color-border-strong); appearance:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; position:relative; }
.radio:checked{ border-color:var(--color-accent); }
.radio:checked::after{ content:""; width:9px; height:9px; border-radius:var(--radius-full); background:var(--color-accent); }
.radio:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-accent-ring); }

.switch{ position:relative; display:inline-flex; width:38px; height:21px; }
.switch input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; }
.switch-track{ position:absolute; inset:0; border-radius:var(--radius-full); background:var(--color-border-strong); transition:background var(--duration-fast) var(--ease-standard); }
.switch input:checked + .switch-track{ background:var(--color-accent); }
.switch-thumb{ position:absolute; top:2px; left:2px; width:17px; height:17px; border-radius:var(--radius-full); background:#fff; transition:left var(--duration-fast) var(--ease-standard); }
.switch input:checked ~ .switch-thumb{ left:19px; }
.switch input:focus-visible ~ .switch-track{ box-shadow:0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-accent-ring); }

/* ---- Table -------------------------------------------------------------------*/
.table-wrap{ position:relative; overflow-x:auto; border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface); }
.table{ width:100%; border-collapse:collapse; min-width:640px; }
.table thead th{ position:sticky; top:0; background:var(--color-surface-2); text-align:left; font-size:var(--text-caption-size); font-weight:700; color:var(--color-text-2); padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--color-border); white-space:nowrap; }
.table tbody td{ padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--color-border); font-size:var(--text-body-sm-size); color:var(--color-text); vertical-align:middle; }
.table tbody tr{ transition:background var(--duration-fast) var(--ease-standard); }
.table tbody tr:hover{ background:var(--color-surface-2); }
.table tbody tr.is-selected{ background:var(--color-accent-soft); }
.table .amount{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; text-align:right; }
.table-detail{ background:var(--color-surface-2); padding:var(--space-4) var(--space-6); font-size:var(--text-caption-size); color:var(--color-text-2); display:flex; gap:var(--space-6); flex-wrap:wrap; }

/* ---- Dialog --------------------------------------------------------------------*/
.dialog-scrim{ position:fixed; inset:0; background:rgba(10,17,30,.45); display:flex; align-items:center; justify-content:center; padding:var(--space-6); z-index:80; opacity:0; pointer-events:none; transition:opacity var(--duration-fast) var(--ease-standard); }
.dialog-scrim.is-open{ opacity:1; pointer-events:auto; transition:opacity var(--duration-slow) var(--ease-standard); }
.dialog-panel{ background:var(--color-surface); border-radius:var(--radius-xl); box-shadow:var(--elevation-4); border:1px solid var(--elevation-border); width:100%; max-width:520px; transform:scale(.955); opacity:0; transition:transform var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard); max-height:85vh; display:flex; flex-direction:column; }
.dialog-scrim.is-open .dialog-panel{ transform:scale(1); opacity:1; transition:transform var(--duration-slow) var(--ease-emphasized-out), opacity var(--duration-base) var(--ease-emphasized-out); }
.dialog-header{ display:flex; align-items:center; justify-content:space-between; padding:var(--space-6); border-bottom:1px solid var(--color-border); }
.dialog-body{ padding:var(--space-6); overflow-y:auto; }
.dialog-footer{ display:flex; justify-content:flex-end; gap:var(--space-3); padding:var(--space-6); border-top:1px solid var(--color-border); }

/* ---- Tooltip ---------------------------------------------------------------------*/
.tooltip{ position:relative; }
.tooltip::after{
  content:attr(data-tooltip); position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(4px);
  background:var(--color-text); color:var(--color-bg); font-family:var(--font-ui); font-size:11px; font-weight:600;
  padding:5px 9px; border-radius:var(--radius-sm); white-space:nowrap; pointer-events:none; opacity:0; box-shadow:var(--elevation-2);
  transition:opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
  z-index:60;
}
.tooltip:hover::after, .tooltip:focus-visible::after{ opacity:1; transform:translateX(-50%) translateY(0); transition-delay:.15s; }

/* ---- Empty state -----------------------------------------------------------------*/
.empty-state{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:var(--space-16) var(--space-6); gap:var(--space-1); }
.empty-state .material-symbols-rounded{ font-size:32px; color:var(--color-text-3); margin-bottom:var(--space-2); }
.empty-state-title{ font-size:var(--text-h4-size); font-weight:700; color:var(--color-text); }
.empty-state-body{ font-size:var(--text-body-sm-size); color:var(--color-text-2); max-width:38ch; margin-bottom:var(--space-4); }
.empty-state-sm{ padding:var(--space-8) var(--space-4); }
.empty-state-sm .material-symbols-rounded{ font-size:22px; }

/* ---- Alert -----------------------------------------------------------------------*/
.alert{ display:flex; align-items:flex-start; gap:var(--space-2); padding:var(--space-3) var(--space-4); border-radius:var(--radius-md); font-size:var(--text-body-sm-size); font-weight:600; }
.alert[hidden]{ display:none; } /* [hidden] tenía la misma especificidad que .alert{display:flex} y el atributo perdía siempre */
.alert .material-symbols-rounded{ font-size:18px; flex-shrink:0; }
.alert-warning{ background:var(--color-warning-bg); color:var(--color-warning-text); }
.alert-danger{ background:var(--color-danger-bg); color:var(--color-danger-text); }
.alert-info{ background:var(--color-info-bg); color:var(--color-info-text); }
.alert-success{ background:var(--color-success-bg); color:var(--color-success-text); }

/* ---- Form field group (COMPONENTS.md form-redesign pass) ------------------------*/
.field-group{ border:0; margin:0; padding:0; }
.field-group + .field-group{ margin-top:var(--space-8); padding-top:var(--space-8); border-top:1px solid var(--color-border); }
.field-group-legend{ font-size:var(--text-h4-size); font-weight:700; color:var(--color-text); margin-bottom:2px; padding:0; }
.field-group-desc{ font-size:var(--text-body-sm-size); color:var(--color-text-2); margin-bottom:var(--space-4); }
.field-group-body{ display:flex; flex-direction:column; gap:var(--space-4); }
.radio-option{ display:flex; align-items:flex-start; gap:var(--space-3); padding:var(--space-3); border-radius:var(--radius-md); border:1px solid var(--color-border); cursor:pointer; }
.radio-option:has(.radio:checked){ border-color:var(--color-accent); background:var(--color-accent-soft); }
.radio-option-label{ display:block; font-size:var(--text-body-sm-size); font-weight:700; color:var(--color-text); }
.radio-option-desc{ display:block; font-size:12.5px; color:var(--color-text-2); margin-top:3px; line-height:1.4; }

/* ---- Chip / tag input (WhatsApp numbers, authorized senders) -------------------*/
.tag-input{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; min-height:44px; padding:6px 8px; background:var(--color-surface-2); border:1px solid var(--color-border); border-radius:var(--radius-md); }
.tag-input:focus-within{ border-color:var(--color-accent); box-shadow:0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-accent-ring); }
.tag-pill{ display:inline-flex; align-items:center; gap:4px; background:var(--color-accent-soft); color:var(--color-accent-2); font-family:var(--font-mono); font-size:12px; font-weight:600; padding:4px 4px 4px 10px; border-radius:var(--radius-full); }
.tag-pill button{ display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:var(--radius-full); border:0; background:transparent; color:var(--color-accent-2); cursor:pointer; }
.tag-pill button:hover{ background:rgba(0,0,0,.08); }
.tag-pill button .material-symbols-rounded{ font-size:13px; }
.tag-input input{ flex:1; min-width:160px; border:0; background:transparent; font-family:var(--font-ui); font-size:var(--text-body-sm-size); color:var(--color-text); outline:none; padding:4px; }

/* ---- Autosave status --------------------------------------------------------------*/
.autosave-status{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--color-text-3); }
.autosave-status .material-symbols-rounded{ font-size:15px; }
.autosave-status.is-saving{ color:var(--color-text-2); }
.autosave-status.is-saved{ color:var(--color-success-text); }
.autosave-status .spin{ animation:stratum-spin 0.8s linear infinite; }

/* ---- Document viewer split (doc + edit fields side by side) --------------------*/
.doc-viewer-split{ display:flex; max-height:78vh; }
.doc-viewer-doc-pane{ flex:1 1 55%; min-width:0; overflow:auto; display:flex; align-items:center; justify-content:center; background:var(--color-bg); border-right:1px solid var(--color-border); }
/* Espaciado más compacto que antes - con la sección de crear-proveedor
   agregada, el contenido pasaba de la altura visible y había que hacer scroll
   para ver el botón de crear proveedor o el estado de sincronización. */
.doc-viewer-edit-pane{ flex:1 1 45%; min-width:280px; overflow:auto; padding:var(--space-4); display:flex; flex-direction:column; gap:var(--space-3); }
.doc-viewer-edit-section{ display:flex; flex-direction:column; gap:var(--space-2); padding-bottom:var(--space-3); border-bottom:1px solid var(--color-border); }
.doc-viewer-edit-section:last-child{ border-bottom:0; padding-bottom:0; }
.doc-viewer-edit-label{ display:block; font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--color-text-3); }
/* Barra de aprobar: sticky al fondo del panel de edición (no del modal), así
   queda siempre visible al hacer scroll por los campos sin crecer el modal
   ni empujar el visor del documento. El margen negativo compensa el padding
   del panel para que la barra toque los 3 bordes exteriores como un footer. */
.doc-viewer-approve-bar{ position:sticky; bottom:calc(var(--space-4) * -1); margin:var(--space-1) calc(var(--space-4) * -1) calc(var(--space-4) * -1); padding:var(--space-3) var(--space-4); background:var(--color-surface); border-top:1px solid var(--color-border); display:flex; flex-direction:column; gap:var(--space-2); }
.doc-viewer-approve-bar .btn{ width:100%; justify-content:center; }
.doc-viewer-approve-hint{ font-size:11px; color:var(--color-text-3); text-align:center; }
@media (max-width:1023px){
  .doc-viewer-split{ flex-direction:column; max-height:none; }
  .doc-viewer-doc-pane{ border-right:0; border-bottom:1px solid var(--color-border); max-height:40vh; }
}
@keyframes stratum-spin{ to{ transform:rotate(360deg); } }