/* ============================================================
   Forbys — Components
   Botones, badges, inputs, cards, tablas, modales, filtros.
   ============================================================ */

/* ── Tamaños de iconos (Lucide) ─────────────────────────────────────── */
.icon-xs { width: 12px; height: 12px; stroke-width: 2; flex-shrink: 0; }
.icon-sm { width: 14px; height: 14px; stroke-width: 2; flex-shrink: 0; }
.icon-md { width: 16px; height: 16px; stroke-width: 2; flex-shrink: 0; }
.icon-lg { width: 20px; height: 20px; stroke-width: 2; flex-shrink: 0; }
.icon-xl { width: 24px; height: 24px; stroke-width: 2; flex-shrink: 0; }

/* ── SVG herencia de color ──────────────────────────────────────────── */
svg.icon-xs, svg.icon-sm, svg.icon-md, svg.icon-lg, svg.icon-xl {
  stroke: currentColor;
  fill: none;
}

/* ============================================================
   BOTONES
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), box-shadow var(--transition),
              opacity var(--transition);
  white-space: nowrap;
  user-select: none;
  text-decoration: none;
  border: 1px solid transparent;
}

.btn svg {
  width: 14px;
  height: 14px;
  stroke-width: 2;
  flex-shrink: 0;
}

/* Primary */
.btn-primary {
  background: var(--primary);
  color: var(--primary-text);
  border-color: var(--primary);
}
.btn-primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  text-decoration: none;
}
.btn-primary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Secondary */
.btn-secondary {
  background: var(--bg-elev);
  color: var(--text);
  border-color: var(--border);
}
.btn-secondary:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
  text-decoration: none;
}

/* Ghost */
.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border-color: transparent;
}
.btn-ghost:hover {
  background: var(--bg-hover);
  color: var(--text);
  text-decoration: none;
}

/* Danger */
.btn-danger {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}
.btn-danger:hover {
  background: #B91C1C;
  border-color: #B91C1C;
  color: #fff;
  text-decoration: none;
}
[data-theme="dark"] .btn-danger:hover {
  background: #DC2626;
  border-color: #DC2626;
}
.btn-danger:disabled,
.btn-danger[disabled] {
  opacity: 0.45;
  pointer-events: none;
}

/* Icon-only */
.btn-icon {
  padding: 8px;
  width: 34px;
  height: 34px;
}

/* Full width */
.btn-full {
  width: 100%;
}

/* Disabled (todos los variantes) */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

/* Size variants */
.btn-sm {
  padding: 5px 10px;
  font-size: 12px;
}
.btn-sm svg { width: 12px; height: 12px; }

.btn-lg {
  padding: 11px 20px;
  font-size: 15px;
}
.btn-lg svg { width: 16px; height: 16px; }

/* ============================================================
   BADGES
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}

.badge::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.badge-success {
  background: var(--success-bg);
  color: var(--success);
}
.badge-warning {
  background: var(--warning-bg);
  color: var(--warning);
}
.badge-danger {
  background: var(--danger-bg);
  color: var(--danger);
}
.badge-info {
  background: var(--info-bg);
  color: var(--info);
}
.badge-muted {
  background: var(--bg-subtle);
  color: var(--text-muted);
}
.badge-primary {
  background: var(--primary-light);
  color: var(--primary);
}

/* ============================================================
   CONFIANZA
   ============================================================ */
.confidence {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 100px;
}

.confidence-bar {
  flex: 1;
  height: 5px;
  background: var(--border);
  border-radius: 100px;
  overflow: hidden;
}

.confidence-fill {
  height: 100%;
  border-radius: 100px;
  transition: width 400ms ease;
}
.confidence-fill.high { background: var(--conf-high); }
.confidence-fill.mid  { background: var(--conf-mid); }
.confidence-fill.low  { background: var(--conf-low); }

.confidence-value {
  font-family: var(--font-mono);
  font-size: 12px;
  min-width: 32px;
  text-align: right;
  font-weight: 600;
}
.confidence-value.high { color: var(--conf-high); }
.confidence-value.mid  { color: var(--conf-mid); }
.confidence-value.low  { color: var(--conf-low); }

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

.field label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.2px;
  text-transform: uppercase;
}

.field .hint {
  font-size: 12px;
  color: var(--text-subtle);
  margin-top: -2px;
}

.field .error {
  font-size: 12px;
  color: var(--danger);
}

.input {
  width: 100%;
  padding: 9px 12px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13.5px;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

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

.input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}

.input:disabled {
  opacity: 0.5;
  background: var(--bg-subtle);
  cursor: not-allowed;
}

.input-error {
  border-color: var(--danger) !important;
}
.input-error:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 12%, transparent);
}

/* Select */
select.input {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}

/* Textarea */
textarea.input {
  resize: vertical;
  min-height: 80px;
}

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s;
}

.card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.card-title svg {
  color: var(--text-muted);
}

.card-body {
  padding: 20px;
}

.card-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--bg-hover);
}

/* ============================================================
   TABLAS
   ============================================================ */
.table-wrap {
  width: 100%;
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

thead th {
  background: var(--bg-hover);
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 10px 20px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}

tbody td {
  padding: 12px 20px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

tbody tr:last-child td {
  border-bottom: none;
}

tbody tr:hover td {
  background: var(--bg-hover);
}

/* Helpers de celda */
.cell-id {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-subtle);
}

.cell-num {
  font-family: var(--font-mono);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.cell-date {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

.cell-strong {
  font-weight: 600;
  color: var(--text);
}

.cell-detalle {
  max-width: 320px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.cell-detalle > span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   TEMPLATE GRID — modal "Crear desde template"
   ============================================================ */
.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.template-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color var(--transition), transform var(--transition);
}

.template-card:hover {
  border-color: var(--primary);
}

.template-card-disabled {
  opacity: 0.55;
}

.template-card-disabled:hover {
  border-color: var(--border);
  transform: none;
}

.template-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}

.template-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

.template-card-desc {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.45;
  flex: 1;
  min-height: 36px;
}

.template-card-meta {
  font-size: 11.5px;
  color: var(--text-subtle);
  border-top: 1px solid var(--border);
  padding-top: 8px;
}

/* Badges por rubro (uno por categoría) */
.badge-rubro-fiscal       { background: var(--info-bg);    color: var(--info); }
.badge-rubro-comercial    { background: var(--bg-subtle);  color: var(--text-muted); }
.badge-rubro-agropecuario { background: var(--success-bg); color: var(--success); }
.badge-rubro-inmobiliario { background: var(--warning-bg); color: var(--warning); }
.badge-rubro-medico       { background: var(--danger-bg);  color: var(--danger); }
.badge-rubro-fiscal, .badge-rubro-comercial, .badge-rubro-agropecuario,
.badge-rubro-inmobiliario, .badge-rubro-medico {
  font-size: 10.5px;
  text-transform: capitalize;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 3px 8px;
  border-radius: 4px;
}

/* ============================================================
   FILTROS
   ============================================================ */
.filters {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px 20px;
  background: var(--bg-hover);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.search {
  position: relative;
  flex: 1;
  min-width: 200px;
}

.search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-subtle);
  pointer-events: none;
  width: 13px;
  height: 13px;
  stroke-width: 2;
}

.search .input {
  padding-left: 30px;
}

.select {
  min-width: 130px;
  flex-shrink: 0;
}

/* ============================================================
   EDITED MARK (corrección manual)
   ============================================================ */
.edited-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: var(--info);
  cursor: help;
  vertical-align: middle;
  margin-left: 4px;
  flex-shrink: 0;
}

.edited-mark svg {
  width: 12px;
  height: 12px;
}

[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--text);
  color: var(--bg);
  font-size: 11.5px;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition);
  z-index: 100;
  font-weight: 400;
}

[data-tooltip]:hover::after {
  opacity: 1;
}

/* ============================================================
   AVATAR
   ============================================================ */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--primary-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  flex-shrink: 0;
  user-select: none;
}

.avatar-sm {
  width: 24px;
  height: 24px;
  font-size: 9px;
}

.avatar-lg {
  width: 40px;
  height: 40px;
  font-size: 14px;
}

/* ============================================================
   MODAL
   ============================================================ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(3px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.modal {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title {
  font-size: 15px;
  font-weight: 600;
}

.modal-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* ============================================================
   ALERT / TOAST
   ============================================================ */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius);
  font-size: 13.5px;
  line-height: 1.5;
}

.alert svg { flex-shrink: 0; width: 16px; height: 16px; margin-top: 1px; }

.alert-success { background: var(--success-bg); color: var(--success); }
.alert-warning  { background: var(--warning-bg);  color: var(--warning); }
.alert-danger   { background: var(--danger-bg);   color: var(--danger); }
.alert-info     { background: var(--info-bg);     color: var(--info); }

/* ============================================================
   LOADING / SKELETON
   ============================================================ */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-subtle) 25%,
    var(--bg-hover) 50%,
    var(--bg-subtle) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
  display: block;
}

@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================================
   DIVIDER
   ============================================================ */
.divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-subtle);
  font-size: 12px;
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty-state {
  padding: 56px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
}

.empty-state svg {
  width: 40px;
  height: 40px;
  color: var(--border-strong);
  stroke-width: 1.5;
}

.empty-state .icon-xl {
  width: 48px;
  height: 48px;
  opacity: 0.3;
  margin-bottom: 4px;
}

.empty-state h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.empty-state p {
  font-size: 14px;
  color: var(--text-muted);
  max-width: 320px;
  line-height: 1.5;
  margin: 0;
}

.empty-state .btn {
  margin-top: 8px;
}

/* ============================================================
   MODAL OVERLAY (E.2.1)
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(3px);
  display: grid;
  place-items: center;
  padding: var(--space-4);
  z-index: 500;
}

/* .modal, .modal-header, .modal-body, .modal-footer ya definidos arriba */

/* ============================================================
   TOAST / NOTIFICACIONES (E.2.1)
   ============================================================ */
.toast-container {
  position: fixed;
  bottom: 72px;   /* por encima del theme-toggle */
  right: 20px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: 12px 16px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  min-width: 280px;
  max-width: 380px;
  font-size: 13.5px;
  pointer-events: auto;
  cursor: pointer;
  animation: toast-in 250ms ease;
  position: relative;
  overflow: hidden;
}

.toast::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes toast-out {
  from { opacity: 1; transform: translateX(0); max-height: 100px; }
  to   { opacity: 0; transform: translateX(100%); max-height: 0; }
}

.toast.removing {
  animation: toast-out 220ms ease forwards;
}

.toast-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 1px;
}

.toast-body {
  flex: 1;
}

.toast-msg {
  color: var(--text);
  line-height: 1.4;
}

.toast-action {
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 4px;
  text-decoration: underline;
}

/* Variantes */
.toast-success::before  { background: var(--success); }
.toast-success .toast-icon { color: var(--success); }
.toast-success .toast-action { color: var(--success); }

.toast-error::before    { background: var(--danger); }
.toast-error .toast-icon { color: var(--danger); }
.toast-error .toast-action { color: var(--danger); }

.toast-warning::before  { background: var(--warning); }
.toast-warning .toast-icon { color: var(--warning); }
.toast-warning .toast-action { color: var(--warning); }

.toast-info::before     { background: var(--info); }
.toast-info .toast-icon { color: var(--info); }
.toast-info .toast-action { color: var(--info); }

/* ============================================================
   CHECKBOX (E.2.1)
   ============================================================ */
label.checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-size: 13.5px;
  color: var(--text-muted);
  user-select: none;
}

label.checkbox input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--primary);
  cursor: pointer;
  flex-shrink: 0;
}

label.checkbox:hover {
  color: var(--text);
}

/* ============================================================
   ALERT (E.2.1) — complemento a los ya definidos arriba
   ============================================================ */
/* .alert-error = alias de .alert-danger */
.alert-error {
  background: var(--danger-bg);
  color: var(--danger);
  border-left: 3px solid var(--danger);
}

/* Reescribir alerts con border-left si no están así */
.alert-success {
  background: var(--success-bg);
  color: var(--success);
  border-left: 3px solid var(--success);
}

.alert-warning {
  background: var(--warning-bg);
  color: var(--warning);
  border-left: 3px solid var(--warning);
}

.alert-info {
  background: var(--info-bg);
  color: var(--info);
  border-left: 3px solid var(--info);
}

/* ============================================================
   FIELD-ROW (E.2.1)
   ============================================================ */
.field-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

/* ============================================================
   INPUT CON ACCIÓN (ojito de contraseña, etc.) (E.2.1.1)
   ============================================================ */
.input-with-action {
  position: relative;
  display: flex;
  align-items: center;
}

.input-with-action .input {
  width: 100%;
  padding-right: 40px;
}

.input-action-btn {
  position: absolute;
  right: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 4px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  transition: color var(--transition), background var(--transition);
  flex-shrink: 0;
}

.input-action-btn:hover {
  color: var(--text);
  background: var(--bg-subtle);
}

.input-action-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

.input-action-btn i,
.input-action-btn svg {
  width: 16px;
  height: 16px;
  pointer-events: none;
}

/* ============================================================
   DROPDOWN (E.2.2)
   ============================================================ */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-menu {
  position: fixed;          /* fixed: desacopla del scroll del card/tabla */
  /* top y left se calculan en JS con Forbys.dropdown() */
  min-width: 170px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 4px;
  z-index: 1000;            /* sobre todo, incluyendo modales normales */
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: background var(--transition), color var(--transition);
}

.dropdown-item:hover {
  background: var(--bg-subtle);
}

.dropdown-item-danger {
  color: var(--danger);
}

.dropdown-item-danger:hover {
  background: var(--danger-bg);
  color: var(--danger);
}

.dropdown-item i,
.dropdown-item svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.dropdown-separator {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

/* ============================================================
   TABLA — helpers E.2.2
   ============================================================ */
.row-clickable {
  cursor: pointer;
}

.cell-actions {
  text-align: right;
  width: 50px;
  white-space: nowrap;
}

/* ============================================================
   KPI TREND (E.2.2)
   ============================================================ */
.kpi-trend {
  font-size: 12px;
  color: var(--text-subtle);
  margin-top: 2px;
}

/* ============================================================
   SPIN (E.2.2)
   ============================================================ */
.spin {
  animation: forbys-spin 1s linear infinite;
}

@keyframes forbys-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ============================================================
   TABS (E.2.3)
   ============================================================ */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
  padding: 0 4px;
}

.tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
  margin-bottom: -1px;
}

.tab:hover { color: var(--text); }

.tab-active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

[data-theme="dark"] .tab-active {
  color: #93C5FD;
  border-bottom-color: #93C5FD;
}

.tab i, .tab svg { width: 14px; height: 14px; stroke-width: 2; }
.tab .badge { margin-left: 2px; }

.tab-panel {
  padding: 8px 0;
}

/* ============================================================
   PANEL LATERAL (E.2.3)
   ============================================================ */
.side-panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 200;
  backdrop-filter: blur(2px);
}

.side-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 480px;
  max-width: 90vw;
  background: var(--bg-elev);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  z-index: 201;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s ease-out;
}

.side-panel-open {
  transform: translateX(0);
}

.side-panel-header {
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.side-panel-header h2 {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.side-panel-body {
  flex: 1;
  min-height: 0;        /* crítico: permite que flex-item scrollee dentro del padre */
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.side-panel-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* ============================================================
   DRAG-AND-DROP (E.2.3)
   ============================================================ */
.drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--text-subtle);
  cursor: grab;
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition);
}

.drag-handle:hover {
  background: var(--bg-subtle);
  color: var(--text-muted);
}

.drag-handle:active { cursor: grabbing; }

.drag-handle i, .drag-handle svg {
  width: 16px;
  height: 16px;
  stroke-width: 2;
  pointer-events: none;
}

.fila-ghost {
  opacity: 0.4;
  background: var(--primary-light) !important;
}

.fila-inactiva td {
  opacity: 0.6;
}

/* ============================================================
   INPUTS ADICIONALES (E.2.3)
   ============================================================ */
textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
  min-height: 80px;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}

textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}

textarea::placeholder { color: var(--text-subtle); }

.input-select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px;
  outline: none;
  transition: border-color var(--transition);
}

.input-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}

.mono-input {
  font-family: var(--font-mono);
  font-size: 13px;
}

.cell-code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-muted);
  background: var(--bg-subtle);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.field-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.5;
}

.campo-inline {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.card-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 400;
  margin-left: var(--space-2);
}

/* ============================================================
   INPUTS DESHABILITADOS (Fix 3, E.2.3.1)
   ============================================================ */
input:disabled,
select:disabled,
textarea:disabled {
  background: var(--bg-subtle);
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 0.7;
}

.field-hint-locked {
  font-size: 12px;
  color: var(--warning);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.field-hint-locked i,
.field-hint-locked svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* ============================================================
   CAMPO-INFO — ID interno (Fix 4, E.2.3.1)
   ============================================================ */
.campo-info {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-muted);
  padding: 7px 10px;
  background: var(--bg-subtle);
  border-radius: var(--radius-sm);
  margin-top: 4px;
}

.campo-info code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
  background: var(--bg);
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid var(--border);
}

/* ============================================================
   OPCIONES AVANZADAS (UX 1, E.2.3.2)
   ============================================================ */
.advanced-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.advanced-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  padding: 6px 8px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition);
  margin-left: -8px;
  width: calc(100% + 8px);
  text-align: left;
}

.advanced-toggle:hover {
  background: var(--bg-subtle);
  color: var(--text);
}

.advanced-toggle i,
.advanced-toggle svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.advanced-content {
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* ============================================================
   UPLOAD (E.2.4)
   ============================================================ */
.upload-container {
  max-width: 600px;
  margin: 0 auto;
}

.upload-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.upload-card h2 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: -0.3px;
  color: var(--text);
}

.upload-card h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.upload-card-icon {
  width: 56px;
  height: 56px;
  background: var(--primary-light);
  border-radius: var(--radius-lg);
  display: grid;
  place-items: center;
  margin: 0 auto 16px;
}

.upload-card-icon i,
.upload-card-icon svg {
  width: 28px;
  height: 28px;
  color: var(--primary);
  stroke-width: 1.8;
}

[data-theme="dark"] .upload-card-icon i,
[data-theme="dark"] .upload-card-icon svg {
  color: #93C5FD;
}

.upload-card-hint {
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: 4px;
}

/* ── Botones de carga ────────────────────────────────────────── */
.upload-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 20px 0;
}

.upload-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 16px;
  background: var(--bg-subtle);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition),
              transform 0.1s;
  user-select: none;
}

.upload-btn:hover {
  border-color: var(--primary);
  background: var(--primary-light);
  transform: translateY(-2px);
}

.upload-btn i,
.upload-btn svg {
  width: 32px;
  height: 32px;
  color: var(--text-muted);
  stroke-width: 1.5;
  transition: color var(--transition);
}

.upload-btn:hover i,
.upload-btn:hover svg {
  color: var(--primary);
}

[data-theme="dark"] .upload-btn:hover i,
[data-theme="dark"] .upload-btn:hover svg {
  color: #93C5FD;
}

.upload-btn-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.upload-btn-sub {
  font-size: 12px;
  color: var(--text-muted);
}

/* ── Drop zone ───────────────────────────────────────────────── */
.drop-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius);
  color: var(--text-subtle);
  font-size: 13px;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition),
              background var(--transition);
}

.drop-zone i, .drop-zone svg { width: 14px; height: 14px; }

.drop-zone-active {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
}

/* ── Previews ────────────────────────────────────────────────── */
.upload-preview {
  margin-bottom: 16px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  max-height: 320px;
  background: var(--bg-subtle);
}

.upload-preview img {
  width: 100%;
  max-height: 320px;
  object-fit: contain;
  display: block;
}

.upload-doc-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 16px;
  text-align: left;
}

.upload-doc-preview i,
.upload-doc-preview svg {
  color: var(--text-muted);
  flex-shrink: 0;
}

/* ── Acciones y metadata ─────────────────────────────────────── */
.upload-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 16px;
  flex-wrap: wrap;
}

.upload-tipo-info {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  margin-top: 12px;
  flex-wrap: wrap;
}

/* ── Estado procesando ───────────────────────────────────────── */
.upload-processing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
}

.upload-spinner {
  color: var(--primary);
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 480px) {
  .upload-buttons {
    grid-template-columns: 1fr;
  }
  .upload-card {
    padding: 20px 16px;
  }
  .upload-btn {
    padding: 16px 12px;
  }
}

/* ============================================================
   CONFIRMAR DATOS (E.2.5)
   ============================================================ */
.confirmar-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 20px;
  align-items: start;
  max-width: 1100px;
}

.confirmar-preview-sticky {
  position: sticky;
  top: 20px;
}

/* ── Lista de campos ─────────────────────────────────────────── */
.confirmar-campo-list {
  padding: 8px 0;
}

.confirmar-campo {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
  cursor: pointer;
}

.confirmar-campo:last-child { border-bottom: none; }
.confirmar-campo:hover { background: var(--bg-hover); }

/* Barra de color izquierda */
.confirmar-campo-bar {
  width: 4px;
  flex-shrink: 0;
  border-radius: 2px 0 0 2px;
}
.bar-high { background: var(--conf-high); }
.bar-mid  { background: var(--conf-mid);  }
.bar-low  { background: var(--conf-low);  }

.confirmar-campo-body {
  flex: 1;
  padding: 12px 16px;
}

.confirmar-campo-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.confirmar-campo-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Input dentro del campo */
.confirmar-campo-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 14px;
  transition: border-color var(--transition), box-shadow var(--transition),
              background var(--transition);
  outline: none;
}

.confirmar-campo-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}

/* Variantes por nivel */
.input-high { border-color: var(--conf-high); }
.input-mid  {
  border-color: var(--conf-mid);
  background: color-mix(in srgb, var(--warning-bg) 30%, var(--bg-elev));
}
.input-low  {
  border-color: var(--conf-low);
  background: color-mix(in srgb, var(--danger-bg) 30%, var(--bg-elev));
}

[data-theme="dark"] .input-mid {
  background: color-mix(in srgb, var(--warning-bg) 20%, var(--bg-elev));
}
[data-theme="dark"] .input-low {
  background: color-mix(in srgb, var(--danger-bg) 20%, var(--bg-elev));
}

/* Campo tocado: vuelve al color neutro */
.confirmar-campo-tocado .input-low,
.confirmar-campo-tocado .input-mid {
  background: var(--bg-elev);
  border-color: var(--border);
}

/* Badge de porcentaje */
.conf-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 999px;
  white-space: nowrap;
}
.conf-badge-high { background: var(--success-bg); color: var(--success); }
.conf-badge-mid  { background: var(--warning-bg);  color: var(--warning); }
.conf-badge-low  { background: var(--danger-bg);   color: var(--danger);  }

/* Punto de color para la leyenda del header */
.conf-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 3px;
  vertical-align: middle;
}
.conf-dot.high { background: var(--conf-high); }
.conf-dot.mid  { background: var(--conf-mid);  }
.conf-dot.low  { background: var(--conf-low);  }

/* Footer con botón confirmar */
.confirmar-footer {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.confirmar-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Responsive */
@media (max-width: 768px) {
  .confirmar-layout {
    grid-template-columns: 1fr;
  }
  .confirmar-preview {
    order: -1;   /* imagen arriba en mobile */
  }
  .confirmar-preview-sticky {
    position: static;
  }
}

/* ── Imagen clickeable (confirmar) ───────────────────────────── */
.confirmar-imagen-clickeable {
  width: 100%;
  border-radius: var(--radius);
  display: block;
  cursor: zoom-in;
  transition: opacity var(--transition);
}

.confirmar-imagen-clickeable:hover {
  opacity: 0.88;
}

/* ── Lightbox ────────────────────────────────────────────────── */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  cursor: zoom-out;
}

.lightbox-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
}

.lightbox-content img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--radius);
  display: block;
  cursor: default;
}

.lightbox-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 32px;
  height: 32px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: background var(--transition), transform var(--transition);
}

.lightbox-close:hover {
  background: var(--bg-hover);
  transform: scale(1.1);
}

.lightbox-close i,
.lightbox-close svg {
  width: 14px;
  height: 14px;
  color: var(--text);
}

/* ============================================================
   MODAL GRANDE — Detalle de documento (E.2.6)
   ============================================================ */
.modal-lg {
  max-width: 820px;
  width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-body-2col {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 24px;
  align-items: start;
}

@media (max-width: 640px) {
  .modal-body-2col {
    grid-template-columns: 1fr;
  }
}

.modal-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-subtle);
  margin-bottom: 10px;
}

/* Campos */
.modal-campos {
  display: flex;
  flex-direction: column;
  /* min-width:0 es OBLIGATORIO en hijos de grid 1fr: sin esto un
     descendiente con scroll horizontal (ej: la tabla de registros
     multi-entidad) expande la columna y aplasta la sidebar (preview
     desaparece). Caveat clasico de grid. */
  min-width: 0;
}

.modal-campo {
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}
.modal-campo:last-child { border-bottom: none; }

.modal-campo-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.modal-campo-valor {
  font-family: var(--font-mono);
  font-size: 13.5px;
  color: var(--text);
  word-break: break-all;
}

/* Sidebar del modal */
.modal-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.modal-imagen img {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

/* Metadata */
.modal-meta {
  background: var(--bg-subtle);
  border-radius: var(--radius);
  padding: 10px 12px;
}

.modal-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
}
.modal-meta-row:last-child { border-bottom: none; }

.modal-meta-row > span:first-child {
  color: var(--text-muted);
  font-size: 12px;
  flex-shrink: 0;
}
.modal-meta-row > span:last-child {
  text-align: right;
  font-weight: 500;
  word-break: break-word;
}

/* ── Paginación ──────────────────────────────────────────────── */
.pagination {
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border);
  background: var(--bg-hover);
  flex-wrap: wrap;
  gap: 8px;
}

.pagination-info {
  font-size: 13px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.pagination-btns {
  display: flex;
  gap: 8px;
}

/* ============================================================
   APROBACIONES (E.2.8)
   ============================================================ */
.aprobaciones-layout {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 16px;
  align-items: start;
  min-height: calc(100vh - 220px);
}

/* Lista de pendientes */
.aprobaciones-lista {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-elev);
  overflow-y: auto;
  max-height: calc(100vh - 220px);
}

.aprobacion-item {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--transition);
}
.aprobacion-item:last-child { border-bottom: none; }
.aprobacion-item:hover { background: var(--bg-hover); }

.aprobacion-item-activo {
  background: var(--primary-light);
  border-left: 3px solid var(--primary);
  padding-left: 13px; /* compensa el border */
}
[data-theme="dark"] .aprobacion-item-activo {
  background: var(--bg-subtle);
}

.aprobacion-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.aprobacion-item-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 2px;
}

/* Panel en aprobaciones: sticky con altura fija.
   overflow NO es hidden para no clipear el scrollbar del body. */
.aprobaciones-layout .side-panel {
  position: sticky;
  top: 0;
  height: calc(100vh - 100px);   /* altura fija = viewport − header */
  width: 100%;
  max-width: none;
  transform: none;
  overflow: visible;             /* visible para que el scrollbar del body sea clickeable */
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

/* El body en aprobaciones tiene una altura máxima explícita para scrollear
   sin depender de la cadena flex (más robusto que solo flex:1). */
.aprobaciones-layout .side-panel-body {
  max-height: calc(100vh - 250px);   /* viewport - header app(60) - panel header(65) - panel footer(80) */
  overflow-y: auto;
  overflow-x: hidden;
}

/* El overlay no se necesita en este layout */
.aprobaciones-layout .side-panel-overlay {
  display: none !important;
}

/* Responsive */
@media (max-width: 768px) {
  .aprobaciones-layout {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .aprobaciones-lista {
    max-height: 260px;
  }
  .aprobaciones-layout .side-panel {
    min-height: 400px;
  }
}

/* ============================================================
   CHECKBOX GROUP (E.2.9 — Exportar)
   ============================================================ */
.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0;
}

/* ============================================================
   FOCUS VISIBLE (accesibilidad)
   ============================================================ */
*:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
*:focus:not(:focus-visible) {
  outline: none;
}

/* ============================================================
   SCROLLBAR (webkit)
   ============================================================ */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-subtle);
}

/* ============================================================
   EXPORT — Tabs, sidebar de filtros, preview, plantillas
   ============================================================ */

/* ── Tabs ─────────────────────────────────────────────────────── */
.export-tabs {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  border-bottom: 1px solid var(--border);
  margin: 0 0 var(--space-6);
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.export-tabs::-webkit-scrollbar { display: none; }

.export-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transition), border-color var(--transition);
}
.export-tab:hover:not(.is-disabled):not(.is-active) {
  color: var(--text);
}
.export-tab.is-active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
.export-tab.is-disabled,
.export-tab[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.export-tab-pill {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--bg-subtle);
  color: var(--text-subtle);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.export-tab-count {
  font-size: 11px;
  font-weight: 600;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--primary-light);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Layout 2 columnas ───────────────────────────────────────── */
.export-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--space-6);
  align-items: flex-start;
}
@media (max-width: 920px) {
  .export-layout {
    grid-template-columns: 1fr;
  }
}

/* ── Sidebar de filtros ──────────────────────────────────────── */
.export-sidebar {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: sticky;
  top: var(--space-6);
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  /* Evitar scroll horizontal: cualquier hijo que se pase del ancho queda contenido. */
  overflow-x: hidden;
  min-width: 0;
  box-sizing: border-box;
}
/* Que todo input/select del sidebar respete el ancho del contenedor */
.export-sidebar .input,
.export-sidebar select.input,
.export-sidebar input.input,
.export-sidebar textarea.input {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
@media (max-width: 920px) {
  .export-sidebar {
    position: static;
    max-height: none;
  }
}

.export-sidebar .field {
  margin: 0;
  min-width: 0;   /* permite que los hijos shrinkeen dentro del flex column */
}
.export-sidebar .field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  min-width: 0;
}
.export-sidebar .field-row .field { min-width: 0; }

.field-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}
.field-header label { margin: 0; }
.field-header-actions { display: flex; gap: var(--space-1); }
.field-header-actions .btn-sm {
  padding: 2px 8px;
  height: auto;
  font-size: 11px;
}

/* ── Input date con toggle button propio ─────────────────────── */
.date-wrap {
  position: relative;
}
/* Ocultar el ícono nativo del calendar picker (lo reemplazamos por el botón) */
.date-input-no-native::-webkit-calendar-picker-indicator {
  opacity: 0;
  display: none;
  -webkit-appearance: none;
}
.date-input-no-native {
  padding-right: 38px;   /* espacio para nuestro botón */
}
.date-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.date-toggle:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.date-toggle:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

/* ── Estados: chips toggleables ──────────────────────────────── */
.estado-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.estado-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.estado-chip:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.estado-chip:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.estado-chip.is-active {
  background: var(--primary-light);
  color: var(--primary);
  border-color: var(--primary);
}

/* ── Checkbox lists ──────────────────────────────────────────── */
.checkbox-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1) var(--space-3);
}
.checkbox-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-height: 240px;
  overflow-y: auto;
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}
.checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13.5px;
  color: var(--text);
  transition: background var(--transition);
}
.checkbox-row:hover { background: var(--bg-hover); }
.checkbox-row input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--primary);
  cursor: pointer;
}
.checkbox-row span:last-child {
  margin-left: auto;
}

/* ── Radio cards (formato) ───────────────────────────────────── */
.radio-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}
.radio-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--space-3) var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 500;
  text-align: center;
  transition: border-color var(--transition), background var(--transition);
}
.radio-card:hover { border-color: var(--border-strong); }
.radio-card.is-active {
  border-color: var(--primary);
  background: var(--primary-light);
  color: var(--primary);
}
.radio-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.radio-card svg { color: inherit; }

/* ── Preview panel ───────────────────────────────────────────── */
.export-preview {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-height: 400px;
}

.preview-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}
.preview-count {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: 32px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
  font-family: var(--font-mono);
}
.preview-count svg {
  color: var(--primary);
  align-self: center;
  width: 24px;
  height: 24px;
}
.preview-count-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  font-family: var(--font-sans);
}
.preview-spinner {
  display: inline-flex;
  align-self: center;
  color: var(--text-muted);
}
.preview-summary {
  margin-top: var(--space-1);
  font-size: 13.5px;
}

.preview-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.preview-table {
  width: 100%;
  margin: 0;
  font-size: 13px;
}
.preview-table thead th {
  position: sticky;
  top: 0;
  background: var(--bg-subtle);
  z-index: 1;
}
.preview-table .col-right { text-align: right; }
.preview-table .col-mono  { font-family: var(--font-mono); }

.preview-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-12) var(--space-6);
  color: var(--text-muted);
  text-align: center;
}
.preview-empty svg {
  color: var(--text-subtle);
  width: 48px;
  height: 48px;
}
.preview-empty p { margin: 0; }
.preview-empty .preview-empty-cta {
  margin-top: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.preview-empty-hint {
  font-size: 13px;
  color: var(--text-muted);
  max-width: 360px;
}

.preview-slow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  color: var(--text-muted);
  font-size: 13px;
}

.preview-footer {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
@media (max-width: 600px) {
  .preview-footer {
    flex-direction: column-reverse;
  }
  .preview-footer .btn { width: 100%; }
}

/* ── Plantillas grid ─────────────────────────────────────────── */
.plantillas-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.plantillas-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 var(--space-1);
}

.plantillas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-4);
}
.plantilla-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.plantilla-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-strong);
}
.plantilla-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}
.plantilla-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  word-break: break-word;
  flex: 1;
}
.plantilla-card-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.plantilla-card-menu {
  position: relative;
}
.plantilla-card-menu .dropdown {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: var(--space-1);
  min-width: 160px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-1);
  z-index: 30;
}
.plantilla-card-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}
.plantilla-card-menu .dropdown-item:hover {
  background: var(--bg-hover);
}
.plantilla-card-menu .dropdown-item-danger {
  color: var(--danger);
}

.plantilla-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.plantilla-card-foot {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}
.plantilla-card-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.plantilla-card-meta-row {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 12.5px;
  color: var(--text);
}
.plantilla-card-meta-row svg { color: var(--text-muted); }

/* ── Helpers de texto/columna ────────────────────────────────── */
.col-right { text-align: right; }
.col-mono  { font-family: var(--font-mono); }
.text-danger { color: var(--danger); }

/* ── Modo lote (Fase 2.1) ── */
.lote-lista { margin-top: 12px; text-align: left; max-height: 320px; overflow-y: auto; }
.lote-fila {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 8px 10px; border-bottom: 1px solid var(--border);
}
.lote-fila:last-child { border-bottom: none; }
.lote-nombre { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lote-estado { flex-shrink: 0; }

/* ── Multi-entidad: tabla de registros (Fase 2.2 / 2.2.1: sticky+compacta) ── */
.registros-tabla-wrap { overflow-x: auto; }
.registros-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.registros-tabla th, .registros-tabla td {
  padding: 4px 6px; font-size: 12.5px; white-space: nowrap;
}
.registros-tabla th { text-align: left;
  border-bottom: 2px solid var(--border); }
.registros-tabla td { border-bottom: 1px solid var(--border);
  cursor: pointer; }
.registros-tabla td:hover { background: var(--bg-hover); }

/* Columna 1 (#) angosta y columna 2 (primer campo) fijas durante el
   scroll horizontal, para no perder de vista a qué registro corresponde
   cada celda con tablas de 10+ columnas. */
.registros-tabla th:first-child, .registros-tabla td:first-child {
  position: sticky; left: 0; width: 36px;
  background: var(--bg-elev); z-index: 1;
}
.registros-tabla th:nth-child(2), .registros-tabla td:nth-child(2) {
  position: sticky; left: 36px;
  background: var(--bg-elev); z-index: 1;
}
.registros-tabla thead th {
  position: sticky; top: 0; background: var(--bg-elev); z-index: 2;
}
.registros-tabla thead th:first-child, .registros-tabla thead th:nth-child(2) {
  z-index: 3;
}
.celda-corregida { font-weight: 600; }
.celda-input { width: 100%; min-width: 80px; font-size: 13px; padding: 2px 4px; }
.registros-paginador { display: flex; align-items: center; gap: 12px;
  justify-content: center; margin-top: 10px; }
.banner-warning { background: var(--warning-bg); color: var(--warning); border-radius: 6px;
  padding: 8px 12px; font-size: 13px; margin-bottom: 8px; }