/*
 * Manifest de estilos de Pago Check. Con Propshaft no hay preprocesado: es
 * CSS plano, organizado como un pequeño sistema de diseño basado en los
 * mockups (colores de geosatelital, badges de estado, tarjetas/modales).
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root {
  /* Marca Corporativa Geosatelital — paleta sólida original */
  --color-primary: #14b8e0;
  --color-primary-dark: #0e93b5;
  --color-primary-light: #e0f7fc;
  --color-navy: #2c3958;
  --color-navy-light: #55617c;
  --color-navy-dark: #1b2337;

  /* Estados semánticos */
  --color-accent: #3ed98a;
  --color-accent-dark: #2fb873;
  --color-accent-light: #ecfdf5;

  --color-warning: #f59e0b;
  --color-warning-dark: #b45309;
  --color-warning-light: #fffbeb;

  --color-danger: #f0555f;
  --color-danger-dark: #d8404a;
  --color-danger-light: #fef2f2;

  --color-info: #0284c7;
  --color-info-dark: #0369a1;
  --color-info-light: #f0f9ff;

  /* Superficies claras */
  --color-bg: #f3f5f8;
  --color-surface: #ffffff;
  --color-border: #e3e7ed;
  --color-border-subtle: #edf2f7;
  /* Secundario legible sobre blanco (evitar grises lavados) */
  --color-muted: #3f4b66;
  --color-text: #1e293b;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius: 8px;
  --radius-lg: 10px;
  --radius-full: 9999px;

  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-card: none;
  --shadow-modal: 0 12px 32px rgba(20, 26, 45, 0.18);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --font-sans: "Segoe UI", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
  --transition-fast: 0.12s ease;
  --row-hover: #eef8fb;
  --row-stripe: #f8fafc;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-navy);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.45;
  accent-color: var(--color-primary);
  text-shadow: none;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

a { color: var(--color-primary-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { color: var(--color-navy); margin: 0 0 16px; }

/* --- Flash messages --- */
.flash {
  margin: 0;
  padding: 10px 24px;
  font-size: 13.5px;
  text-align: center;
}
.flash-notice { background: #e4faf0; color: #1c8a5a; }
.flash-alert  { background: #fdeaec; color: var(--color-danger-dark); }

/* --- Header de la app (barra verde + logo + usuario) --- */
.app-header { background: var(--color-surface); }

.app-header__horario {
  background: linear-gradient(90deg, #14b8b0, #3ed98a);
  color: #fff;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
}

.app-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  border-bottom: 1px solid var(--color-border);
}

.app-header__left { display: flex; align-items: center; gap: 24px; }

.app-header__logo { height: 28px; display: block; }

.app-header__nav { display: flex; align-items: center; gap: 4px; }

.app-header__nav-link {
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-navy-light);
}
.app-header__nav-link:hover { background: #f0f2f5; text-decoration: none; }
.app-header__nav-link.is-active { background: var(--color-primary); color: #fff; }

.app-header__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-navy);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.app-header__user { position: relative; }

.app-header__user-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  border: none;
  background: none;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  font-family: inherit;
}
.app-header__user-toggle:hover { background: #f0f2f5; }

.app-header__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #eef1f6;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-navy-light);
  flex-shrink: 0;
}

.app-header__user-info { text-align: right; line-height: 1.2; }
.app-header__user-role { font-weight: 700; font-size: 13px; color: var(--color-navy); }
.app-header__user-email { font-size: 12px; color: var(--color-muted); }
.app-header__chevron { color: var(--color-muted); flex-shrink: 0; }

.app-header__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-border);
  width: 240px;
  overflow: hidden;
  z-index: 40;
}

.app-header__menu-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border);
}
.app-header__menu-header strong { font-size: 13.5px; color: var(--color-navy); }
.app-header__menu-header span { font-size: 12px; color: var(--color-muted); }

.app-header__menu form { margin: 0; }

.app-header__menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 12px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-danger-dark);
  cursor: pointer;
  font-family: inherit;
}
.app-header__menu-item:hover { background: #fdeced; }
.app-header__menu-item--link { color: var(--color-navy); }
.app-header__menu-item--link:hover { background: #f3f5f8; }

/* --- "Pills" contextuales del header (Depósitos, tabs de Auditoría) --- */
.header-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-weight: 600;
  border: 1px solid var(--color-primary);
  color: var(--color-primary-dark);
  background: #fff;
  text-shadow: none;
}
.header-pill:hover { text-decoration: none; background: var(--color-primary-light); }
.header-pill--activa {
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: #fff;
}
.header-pill--activa:hover {
  background: var(--color-navy-dark);
  color: #fff;
}
.header-pill-group { display: flex; gap: 8px; }

.app-main {
  padding: 24px;
  max-width: 1280px;
  margin: 0 auto;
}

.subtitulo { color: var(--color-navy); font-size: 13.5px; margin: 0 0 24px; text-shadow: none; }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.stat-card {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: none;
  border: 1px solid var(--color-border);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-left: 3px solid var(--color-border);
}

.stat-card__numero { font-size: 26px; font-weight: 600; color: var(--color-navy); text-shadow: none; }

.stat-card--aprobado  { border-left-color: var(--color-accent); }
.stat-card--aprobado  .stat-card__numero { color: var(--color-accent-dark); }
.stat-card--rechazado { border-left-color: var(--color-danger); }
.stat-card--rechazado .stat-card__numero { color: var(--color-danger-dark); }
.stat-card--pendiente { border-left-color: var(--color-navy-light); }

/* --- Dashboard de inicio --- */
.dashboard {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dashboard-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.dashboard-head__eyebrow {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-muted);
}

.dashboard-head__titulo {
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 600;
  color: var(--color-navy);
}

.dashboard-head__subtitulo {
  margin: 0;
  font-size: 14px;
  color: var(--color-muted);
  max-width: 520px;
}

.dashboard-head__acciones {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.dashboard-stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  border-left: 3px solid var(--color-border);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.dashboard-stat:hover {
  text-decoration: none;
  background: #fafbfc;
  border-color: #cfd6e0;
}

.dashboard-stat--pendiente { border-left-color: var(--color-navy-light); }
.dashboard-stat--aprobado { border-left-color: var(--color-accent); }
.dashboard-stat--rechazado { border-left-color: var(--color-danger); }

.dashboard-stat__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.dashboard-stat__hint {
  font-size: 11.5px;
  color: var(--color-muted);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.dashboard-stat:hover .dashboard-stat__hint { opacity: 1; }

.dashboard-stat__numero {
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-navy);
}

.dashboard-stat--aprobado .dashboard-stat__numero { color: var(--color-accent-dark); }
.dashboard-stat--rechazado .dashboard-stat__numero { color: var(--color-danger-dark); }

.dashboard-stat__label {
  font-size: 12.5px;
  color: var(--color-muted);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(260px, 0.9fr);
  gap: 16px;
  align-items: start;
}

.dashboard-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.dashboard-panel--info {
  padding: 16px 18px;
}

.dashboard-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border);
  background: #f7f8fa;
}

.dashboard-panel__titulo {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-navy);
}

.dashboard-panel__meta {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--color-muted);
}

.dashboard-panel__texto {
  margin: 8px 0 0;
  font-size: 13.5px;
  color: var(--color-navy-light);
  line-height: 1.5;
}

.dashboard-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dashboard-lista li {
  border-bottom: 1px solid var(--color-border-subtle);
}

.dashboard-lista li:last-child {
  border-bottom: none;
}

.dashboard-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  text-decoration: none;
  color: inherit;
  transition: background var(--transition-fast);
}

.dashboard-item:hover {
  background: var(--row-hover);
  text-decoration: none;
}

.dashboard-item__id {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--color-navy-light);
  min-width: 42px;
}

.dashboard-item__titulo {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-navy);
}

.dashboard-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin-top: 2px;
  font-size: 12px;
  color: var(--color-muted);
}

.dashboard-vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 36px 20px;
  text-align: center;
}

.dashboard-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dashboard-atajos {
  display: flex;
  flex-direction: column;
}

.dashboard-atajo {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--color-border-subtle);
  transition: background var(--transition-fast);
}

.dashboard-atajo:last-child { border-bottom: none; }

.dashboard-atajo:hover {
  background: var(--row-hover);
  text-decoration: none;
}

.dashboard-atajo strong {
  display: block;
  font-size: 13.5px;
  color: var(--color-navy);
  margin-bottom: 2px;
}

.dashboard-atajo small {
  display: block;
  font-size: 12px;
  color: var(--color-muted);
}

.dashboard-atajo__icono {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
}

.dashboard-atajo__icono--primary {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  border-color: #a5e4f4;
}

.dashboard-atajo__icono--accent {
  background: var(--color-accent-light);
  color: var(--color-accent-dark);
  border-color: #a7f3d0;
}

.dashboard-atajo__icono--warning {
  background: var(--color-warning-light);
  color: var(--color-warning-dark);
  border-color: #fde68a;
}

.dashboard-atajo__icono--navy {
  background: #f1f5f9;
  color: var(--color-navy);
  border-color: #cbd5e1;
}

@media (max-width: 900px) {
  .dashboard-stats { grid-template-columns: 1fr; }
  .dashboard-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .dashboard-stat__hint { display: none; }
  .dashboard-item {
    grid-template-columns: 1fr auto;
    gap: 8px;
  }
  .dashboard-item__id { grid-column: 1 / -1; }
}

.table-card__empty {
  padding: 48px 32px;
  text-align: center;
  color: var(--color-muted);
}

.table-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}

.table-empty__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.table-empty__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-navy);
}

.table-empty__hint {
  margin: 0;
  font-size: 13px;
  color: var(--color-muted);
  max-width: 320px;
}

/* --- Botones --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  border-radius: var(--radius-sm);
  padding: 9px 16px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  text-shadow: none;
  box-shadow: none;
}
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

.btn-primary  {
  background: var(--color-primary);
  color: #fff;
}
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-success  { background: var(--color-accent); color: #fff; }
.btn-success:hover { background: var(--color-accent-dark); }
.btn-danger   { background: var(--color-danger); color: #fff; }
.btn-danger:hover { background: var(--color-danger-dark); }
.btn-muted    { background: #e8ebf0; color: var(--color-navy-light); }
.btn-muted:hover { background: #dde1e8; }
.btn-block    { width: 100%; }

.btn-outline {
  background: #fff;
  border: 1px solid var(--color-border);
  color: var(--color-navy-light);
}
.btn-outline:hover {
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
  background: var(--color-primary-light);
}
.btn-outline-success {
  background: #fff;
  border: 1px solid var(--color-accent);
  color: var(--color-accent-dark);
}
.btn-outline-danger  {
  background: #fff;
  border: 1px solid var(--color-danger);
  color: var(--color-danger-dark);
}
.btn-outline-warning {
  border: 1px solid #fde68a;
  color: var(--color-warning-dark);
  background: var(--color-warning-light);
}
.btn-ghost {
  background: transparent;
  color: var(--color-navy-light);
  border: 1px solid transparent;
}
.btn-ghost:hover {
  background: #eef0f4;
}

/* --- Formularios --- */
.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: 6px;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--color-muted);
  opacity: 1;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="date"],
.field input[type="number"],
.field select,
.field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
  color: var(--color-navy);
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: none;
}

.field input:disabled,
.field select:disabled,
.field textarea:disabled {
  background: #f8fafc;
  color: var(--color-navy);
  cursor: not-allowed;
  border-color: #e2e8f0;
}

.field textarea { resize: vertical; min-height: 80px; }

.monto-moneda { display: flex; gap: 8px; width: 100%; }
.monto-moneda__select { flex: 0 0 100px; min-width: 95px; }
.monto-moneda input[type="number"] { flex: 1 1 auto; min-width: 0; }

/* --- Tarjetas / login --- */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  padding: 24px;
}

.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--color-surface);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  box-shadow: none;
  padding: 36px 32px;
  text-align: center;
}

.login-card__logo { height: 32px; margin-bottom: 24px; }
.login-card h1 { font-size: 19px; margin-bottom: 4px; }
.login-card p.subtitulo { color: var(--color-muted); font-size: 13px; margin-bottom: 24px; }
.login-card form { text-align: left; }

/* --- Tabla de registros --- */
.table-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: none;
  overflow: hidden;
}

.table-card__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--color-border);
  background: #fafbfc;
}

.table-card__toolbar-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-navy);
  letter-spacing: 0;
}

.table-card__toolbar-meta {
  font-size: 12.5px;
  color: var(--color-muted);
}

/* En mobile la tabla no se achica -- se scrollea horizontal adentro de la
   tarjeta (que mantiene "overflow: hidden" solo para las esquinas
   redondeadas, el scroll real pasa por este contenedor interno). */
.table-scroll {
  overflow-x: auto;
}

table.registros {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

table.registros thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--color-navy);
  color: #fff;
  text-align: left;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  padding: 12px 14px;
  white-space: nowrap;
  border-bottom: 1px solid var(--color-navy-dark);
  text-shadow: none;
}

table.registros thead th:first-child { padding-left: 16px; }
table.registros thead th:last-child { padding-right: 16px; }

table.registros tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: 13.5px;
  vertical-align: middle;
  background: var(--color-surface);
  transition: background var(--transition-fast);
}

table.registros tbody td:first-child {
  padding-left: 16px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--color-navy-light);
  font-family: var(--font-mono);
  font-size: 12.5px;
}

table.registros tbody td:last-child { padding-right: 16px; }

table.registros tbody tr:nth-child(even) td {
  background: var(--row-stripe);
}

table.registros tbody tr:hover td {
  background: var(--row-hover);
}

table.registros tbody tr:hover td.acciones {
  background: var(--row-hover);
}

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

.voucher-cliente {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 200px;
}

.voucher-cliente__nombre {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.voucher-cliente__nombre strong {
  font-size: 13.5px;
  color: var(--color-navy);
  font-weight: 700;
  text-shadow: none;
}

.voucher-cliente__meta {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-navy);
  text-shadow: none;
}

.voucher-cliente__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 2px;
}

.voucher-estado-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

.voucher-estado-cell__row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.voucher-estado-cell__row .erp-estado--anulado {
  flex-basis: 100%;
}

/* --- Badge de estado --- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.25;
  border: 1px solid transparent;
  white-space: nowrap;
  letter-spacing: 0;
  text-shadow: none;
  box-shadow: none;
}
.badge-pendiente {
  border-color: #cbd5e1;
  color: #475569;
  background: #f8fafc;
}
.badge-aprobado  {
  border-color: #a7f3d0;
  color: #065f46;
  background: #ecfdf5;
}
.badge-rechazado {
  border-color: #fecaca;
  color: #991b1b;
  background: #fef2f2;
}
.badge-warning {
  border-color: #fde68a;
  color: #b45309;
  background: #fffbeb;
}
.badge-info {
  border-color: #bae6fd;
  color: #0369a1;
  background: #f0f9ff;
}
.badge-navy {
  border-color: #cbd5e1;
  color: var(--color-navy);
  background: #f1f5f9;
}
.badge-estado {
  border-color: #fed7aa;
  color: #9a3412;
  background: #fff7ed;
}

.badge-saldo-pendiente {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  background: #fff7ed;
  border: 1.5px solid #fdba74;
  border-left: 3px solid #f59e0b;
  color: #9a3412;
  white-space: nowrap;
  text-shadow: none;
}

.badge-saldo-pendiente--detraccion {
  background: #fffbeb;
  border-color: #fcd34d;
  border-left-color: #d97706;
  color: #92400e;
}

/* Estado del registro en ERPNext, aparte de la decisión de Contabilidad --
   "Aprobado" en la tabla no dice si ya quedó registrado en ERPNext o no. */
.icon-erp-estado {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  cursor: help;
}
.icon-erp-estado--error { color: var(--color-danger); }
.icon-erp-estado--ok { color: var(--color-accent-dark); }
/* El check de "ya se generó bien en ERPNext" se pidió un poco más grande que
   el resto (14px de por sí, igual que error/pendiente) para que se note más
   a simple vista en la bandeja. */
.icon-erp-estado--ok svg { width: 17px; height: 17px; }
.icon-erp-estado--pendiente { color: var(--color-muted); }
.icon-erp-estado--pendiente svg { animation: girar 1.2s linear infinite; }

/* --- Filtros de bandeja --- */
.filtros {
  display: flex;
  align-items: end;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  padding: 14px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: none;
}

.filtros .field {
  margin-bottom: 0;
  min-width: 130px;
}

.filtros .field label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-navy-light);
  margin-bottom: 5px;
}

.filtros .field input,
.filtros .field select {
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: #fff;
  border: 1px solid var(--color-border);
}

.filtros .field input:hover,
.filtros .field select:hover {
  border-color: #c5ccd6;
}

.filtros-spacer { flex: 1; min-width: 8px; }

.filtros__acciones {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.bandeja-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.bandeja-head__titulo {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--color-navy);
  text-shadow: none;
}

.bandeja-head__subtitulo {
  margin: 0;
  font-size: 13.5px;
  color: var(--color-navy);
  text-shadow: none;
  font-weight: 500;
}

/* --- Tags / Badges Corporativos --- */
.tag-corp {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.3;
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  border-left-width: 3px;
  white-space: nowrap;
  vertical-align: middle;
  text-shadow: none;
}

.tag-corp--detraccion {
  background: #fffbeb;
  border-color: #fcd34d;
  border-left-color: #d97706;
  color: #92400e;
}

.tag-corp--detraccion-pendiente {
  background: #fff7ed;
  border-color: #fdba74;
  border-left-color: #ea580c;
  color: #9a3412;
}

.tag-corp--abono {
  background: #ecfdf5;
  border-color: #6ee7b7;
  border-left-color: #059669;
  color: #065f46;
}

.tag-corp--abono-detraccion {
  background: #fffbeb;
  border-color: #fcd34d;
  border-left-color: #d97706;
  color: #92400e;
}

.tag-corp--credito {
  background: #eff6ff;
  border-color: #93c5fd;
  border-left-color: #2563eb;
  color: #1e3a8a;
}

.tag-corp--estado {
  background: #eef2ff;
  border-color: #a5b4fc;
  border-left-color: #4f46e5;
  color: #312e81;
}

.badge-anulado-erp {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fca5a5;
  font-weight: 600;
}

/* --- Modal --- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 26, 45, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 50;
}

.modal-card {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-modal);
  width: 100%;
  max-width: 640px;
  /* dvh sigue el viewport visible real -- en mobile, vh no baja cuando la
     barra de direcciones se colapsa, así que el fondo del modal (ej. el
     botón Enviar) podía terminar tapado detrás de la barra del navegador.
     El valor en vh queda de fallback para navegadores sin soporte dvh. */
  max-height: 90vh;
  max-height: 90dvh;
  overflow-y: auto;
  padding: 28px 32px;
  position: relative;
}

.modal-card__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: 20px;
  cursor: pointer;
}

.modal-card h2 {
  color: var(--color-primary-dark);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 20px;
}

.modal-card__head { display: flex; align-items: flex-start; justify-content: space-between; }
.modal-card__head h2 { margin-bottom: 20px; }

.modal-card--lg { max-width: 820px; }

.modal-card--motivo { max-width: 460px; text-align: center; }

.modal-card__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
}
.modal-card__actions--center { justify-content: center; }

.modal-card__icono {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  margin: 0 auto 16px;
}
.modal-card__icono--danger  { background: #fdeced; color: var(--color-danger-dark); }
.modal-card__icono--warning { background: #fff4e0; color: #b9791b; }

/* --- Página con encabezado + acción (bandejas) --- */
.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.page-head h1 { margin-bottom: 4px; }
.page-head .subtitulo { margin: 0; }

.texto-muted {
  color: var(--color-navy);
  text-shadow: none;
  opacity: 1;
}
.texto-centrado { text-align: center; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.form-error {
  background: #fdeced;
  color: var(--color-danger-dark);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 16px;
}

/* --- Iconos de acción en la tabla --- */
/* No usar display:flex en el <td>: rompe el fondo de hover de la fila.
   El flex va en un wrapper interno. */
td.acciones {
  vertical-align: middle;
  width: 1%;
  min-width: 76px;
}

.acciones__grupo {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: flex-start;
  width: max-content;
  /* Máximo 5 iconos por fila; el 6º baja a la siguiente. */
  max-width: calc((32px * 5) + (6px * 4));
}

.acciones__grupo form.button_to {
  display: inline-flex;
  margin: 0;
}

.acciones__grupo form.button_to button {
  cursor: pointer;
}

.icon-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f0f2f5;
  color: var(--color-navy-light);
  flex: 0 0 32px;
  border: 1px solid var(--color-border);
  box-shadow: none;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.icon-btn:hover {
  background: #e6e9ef;
  text-decoration: none;
}
.icon-btn-view {
  color: var(--color-primary-dark);
  background: var(--color-primary-light);
  border-color: #a5e4f4;
}
.icon-btn-view:hover { background: #caf0f8; }
.icon-btn-danger {
  color: var(--color-danger-dark);
  background: var(--color-danger-light);
  border-color: #fecaca;
}
.icon-btn-danger:hover { background: #fdeced; }
.icon-btn-success {
  color: var(--color-accent-dark);
  background: var(--color-accent-light);
  border-color: #a7f3d0;
}
.icon-btn-success:hover { background: #eafcf3; }
.icon-btn-warning {
  color: #d97706;
  background: var(--color-warning-light);
  border-color: #fde68a;
}
.icon-btn-warning:hover { background: #fef3c7; }

/* --- Formulario "Nuevo registro" a 2 columnas y Secciones Corporativas --- */
.form-seccion {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: 18px;
  box-shadow: none;
  /* visible: el buscador de producto/cliente abre un dropdown absoluto
     que se cortaba con overflow:hidden */
  overflow: visible;
}

/* --- Tarjeta estética de Detracción SUNAT --- */
.detraccion-card {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-left: 3px solid var(--color-warning);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 18px;
  box-shadow: none;
}

.detraccion-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.detraccion-card__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 13.5px;
  color: #92400e;
}

.detraccion-card__badges {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.detraccion-badge-monto {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}

.detraccion-badge-neto {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.detraccion-card__label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  margin-bottom: 8px;
}

.detraccion-radios {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 640px) {
  .detraccion-radios { grid-template-columns: 1fr; }
}

.detraccion-radio-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  background: #ffffff;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}
.detraccion-radio-card:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}
.detraccion-radio-card input[type="radio"] {
  margin-top: 3px;
  accent-color: #d97706;
  cursor: pointer;
  flex-shrink: 0;
}
.detraccion-radio-card:has(input[type="radio"]:checked) {
  border-color: #f59e0b;
  background: #fffbeb;
  box-shadow: 0 0 0 1px #f59e0b;
}
.detraccion-radio-card__titulo {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 2px;
}
.detraccion-radio-card__desc {
  display: block;
  font-size: 11.5px;
  color: var(--color-navy);
  line-height: 1.35;
  margin: 0;
}

/* --- Tooltips flotantes elegantes --- */
.tooltip-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--color-muted);
  cursor: help;
  transition: color 0.15s ease;
}
.tooltip-info:hover {
  color: var(--color-primary-dark);
}
.tooltip-info__texto {
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #1e293b;
  color: #ffffff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.35;
  white-space: normal;
  width: max-content;
  max-width: 250px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 100;
}
.tooltip-info__texto::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 4px;
  border-style: solid;
  border-color: #1e293b transparent transparent transparent;
}
.tooltip-info:hover .tooltip-info__texto {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.form-seccion__titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-navy);
  margin: 0;
  padding: 11px 16px;
  background: #f7f8fa;
  border-bottom: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  text-shadow: none;
}

.form-seccion__titulo svg {
  color: var(--color-primary);
}

.form-seccion__cuerpo {
  padding: 16px 16px 4px;
}

.tercero-card-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.tercero-card-toggle:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}
.tercero-card-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}
.tercero-card-toggle span {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-navy);
}

.registro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-bottom: 4px;
}
@media (max-width: 640px) {
  .registro-grid { grid-template-columns: 1fr; }
}

/* --- Páginas completas (vouchers/new y vouchers/show) --- */
.formulario-pagina,
.detalle-pagina {
  max-width: 1120px;
  margin: 0 auto;
  color: var(--color-navy);
  text-shadow: none;
}

.formulario-pagina .texto-muted,
.formulario-pagina .bandeja-head__subtitulo,
.formulario-pagina .cliente-seleccionado,
.formulario-pagina .placas-wrap p {
  color: var(--color-navy);
  text-shadow: none;
}

/* Detalle voucher: dos columnas, alto natural (sin recortar campos).
   Orden: Cliente → Operación → Pago → Comentarios → Evidencias → Contabilidad → Historial */
.detalle-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
  margin-bottom: 4px;
}

.detalle-layout > .detalle-seccion {
  margin-bottom: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.detalle-layout__caja {
  min-height: 0;
}

.detalle-layout__ancho {
  grid-column: 1 / -1;
}

.detalle-layout__verificacion,
.detalle-layout__historial {
  min-height: 0;
}

.detalle-notas {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.detalle-notas__bloque {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.detalle-notas__bloque .detalle-caja {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
}

.detalle-revision {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(140px, 220px);
  gap: 14px;
  align-items: start;
}

.detalle-revision__meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.detalle-revision__evidencia {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.detalle-caja--compacto {
  min-height: 0 !important;
  padding: 10px 12px;
  max-height: 88px;
  overflow-y: auto;
}

.evidencia-preview--revision {
  max-width: 220px;
}

.evidencia-preview--revision .evidencia-preview__img {
  max-height: 140px;
  object-fit: cover;
}

.evidencia-preview--revision .evidencia-preview__archivo {
  padding: 18px 12px;
  font-size: 12px;
}

/* Campos semánticos (dl/dt/dd) */
.detalle-campos {
  margin: 0;
  padding: 0;
}

.detalle-campos__fila {
  display: grid;
  grid-template-columns: minmax(120px, 34%) 1fr;
  gap: 6px 12px;
  align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px solid var(--color-border-subtle);
}

.detalle-campos__fila:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.detalle-campos__fila:first-child {
  padding-top: 0;
}

.detalle-campos__fila dt {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-navy-light);
}

.detalle-campos__fila dd {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-navy);
  word-break: break-word;
}

.detalle-campos__fila dd.detalle-campos__valor--destacado {
  font-size: 15px;
  color: var(--color-navy);
}

.detalle-campos__fila dd.detalle-campos__valor--ok {
  color: #047857;
}

.detalle-campos__fila dd.detalle-campos__valor--alerta {
  color: var(--color-warning-dark);
}

.detalle-campos__fila dd.detalle-campos__valor--accent {
  color: var(--color-primary-dark);
}

.detalle-seccion__acciones {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.detalle-seccion__cuerpo--campos {
  padding: 10px 14px 12px;
}

@media (max-width: 900px) {
  .detalle-layout {
    grid-template-columns: 1fr;
  }

  /* No fijar altura: recortaba Aprobar/Desaprobar (overflow:hidden en
     .detalle-seccion) y la Supervisora / Contabilidad no veían el botón. */
  .detalle-layout__caja,
  .detalle-layout__verificacion,
  .detalle-layout__historial {
    height: auto;
  }

  .detalle-revision {
    grid-template-columns: 1fr;
  }

  .evidencia-preview--revision {
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  .detalle-notas { grid-template-columns: 1fr; }
  .detalle-campos__fila {
    grid-template-columns: 1fr;
    gap: 2px 0;
  }
}

.detalle-head-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
  font-size: 13px;
  color: var(--color-muted);
}

.detalle-seccion {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: 18px;
  box-shadow: none;
  overflow: hidden;
}

.detalle-seccion__titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-navy);
  padding: 10px 14px;
  flex-shrink: 0;
  background: #f7f8fa;
  border-bottom: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  text-shadow: none;
}

.detalle-seccion__cuerpo {
  padding: 12px 14px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: visible;
}

.detalle-seccion__cuerpo--campos {
  overflow: visible;
}

.detalle-seccion__cuerpo--flush {
  padding: 0;
  overflow-x: auto;
}

/* Evidencias del voucher: galería dentro de la caja fija uniforme */
.detalle-layout__caja--evidencias .detalle-seccion__cuerpo {
  display: flex;
  flex-direction: column;
}

.detalle-layout__caja--evidencias .evidencias-galeria {
  flex: 1 1 auto;
  min-height: 0;
  grid-template-columns: 1fr;
  align-content: start;
}

.detalle-layout__caja--evidencias .evidencia-card {
  height: 100%;
  min-height: 160px;
}

.detalle-layout__caja--evidencias .evidencia-preview {
  display: block;
  height: 100%;
}

.detalle-layout__caja--evidencias .evidencia-preview__img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: top center;
}

.detalle-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.detalle-tabla thead tr {
  background: #f7f8fa;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}

.detalle-tabla th {
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-navy-light);
}

.detalle-tabla td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--color-border-subtle);
  vertical-align: middle;
}

.detalle-tabla tbody tr:hover td {
  background: var(--row-hover);
}

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

.aviso-abono {
  background: var(--color-info-light);
  border: 1px solid #bae6fd;
  border-left: 3px solid var(--color-info);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  box-shadow: none;
}

.aviso-abono__texto {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--color-info-dark);
}

.page-head__titulo {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--color-navy);
  text-shadow: none;
}

.page-head__badges {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.page-head__acciones {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

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

.codigo-erp {
  font-size: 11.5px;
  font-family: var(--font-mono);
  background: #f0f2f5;
  padding: 3px 7px;
  border-radius: var(--radius-xs);
  color: var(--color-navy);
}

.codigo-erp--ok {
  background: var(--color-accent-light);
  color: var(--color-accent-dark);
}

.vacio-dashed {
  background: #fafbfc;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  padding: 24px;
  text-align: center;
}

.alerta-eliminado {
  background: var(--color-danger-light);
  border: 1px solid #fecaca;
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  color: #991b1b;
  margin-bottom: 12px;
  box-shadow: none;
}

.alerta-errores {
  background: var(--color-danger-light);
  border: 1px solid #f87171;
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  color: #991b1b;
  font-size: 13.5px;
  margin-bottom: 18px;
  box-shadow: none;
}

.alerta-errores__titulo {
  font-weight: 600;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.breadcrumb-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: 10px;
  text-decoration: none;
  text-shadow: none;
  transition: color 0.15s ease, transform 0.15s ease;
}

.breadcrumb-back:hover {
  color: var(--color-primary-dark);
  text-decoration: none;
  transform: translateX(-3px);
}

.form-acciones-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  margin-bottom: 40px;
  padding: 14px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: none;
}

@media (max-width: 640px) {
  .form-acciones-bar {
    flex-direction: column-reverse;
    padding: 14px;
  }
  .form-acciones-bar .btn {
    width: 100%;
    justify-content: center;
  }
}

.input-icon { position: relative; }
.input-icon input { padding-right: 38px; }
.input-icon svg {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  color: var(--color-muted);
  pointer-events: none;
}

.dropzone {
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-sm);
  background: #fafbfc;
  padding: 28px 16px;
  text-align: center;
  color: var(--color-navy);
  cursor: default;
  transition: border-color 0.15s ease, background 0.15s ease;
  text-shadow: none;
}
.dropzone svg { color: var(--color-navy); margin-bottom: 8px; }
.dropzone p { margin: 0 0 12px; font-size: 13.5px; color: var(--color-navy); }
.dropzone--activa { border-color: var(--color-primary); background: #eef8f9; }
.dropzone input[type="file"] { display: none; }

/* Con una foto elegida, el recuadro punteado se vuelve un borde sutil --
   la imagen es lo que debe resaltar, no el "arrastra aquí". */
.dropzone--con-imagen { border-style: solid; background: var(--color-surface); padding: 12px; }

.dropzone__preview-wrap { position: relative; display: inline-block; max-width: 100%; }
.dropzone__preview {
  display: block;
  max-width: 100%;
  /* 220px fijo dejaba una captura vertical (ej. comprobante de Yape, mucho
     más alto que ancho) como una tira angosta -- con más alto disponible
     (relativo a la pantalla, no solo un número fijo) se ve proporcionada
     tanto para fotos horizontales como para capturas verticales de celular. */
  max-height: min(60vh, 420px);
  max-height: min(60dvh, 420px);
  border-radius: var(--radius-sm);
  object-fit: contain;
  background: var(--color-bg);
  box-shadow: var(--shadow-card);
  animation: dropzone-preview-in 0.18s ease;
}
.dropzone__quitar {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: var(--color-navy);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: background 0.15s ease, transform 0.15s ease;
}
.dropzone__quitar:hover { background: var(--color-danger); transform: scale(1.08); }

.dropzone__zoom {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  padding: 0;
  line-height: 1;
  border: none;
  border-radius: 6px;
  background: var(--color-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: background 0.15s ease;
}
.dropzone__zoom:hover { background: var(--color-accent-dark); }
/* ".dropzone svg" (el ícono de "arrastra aquí") también le pega a este svg
   por estar anidado adentro -- el margin-bottom lo empujaba hacia arriba
   dentro del botón, y el color gris lo apagaba contra el fondo verde. */
.dropzone__zoom svg { margin-bottom: 0; color: inherit; }

/* Sin esto, el "display" de arriba pisa el atributo [hidden] (que el
   navegador implementa como "display: none") y quedan visibles incluso
   antes de elegir un archivo. */
.dropzone__preview[hidden], .dropzone__quitar[hidden], .dropzone__zoom[hidden] { display: none; }

@keyframes dropzone-preview-in {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

/* --- Galería de múltiples vouchers en Dropzone --- */
.dropzone__galeria {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-bottom: 12px;
}
.dropzone__item {
  position: relative;
  width: 120px;
  height: 125px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow-card);
  animation: dropzone-preview-in 0.18s ease;
}
.dropzone__item-num {
  position: absolute;
  top: 4px;
  left: 4px;
  background: rgba(15, 23, 42, 0.75);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  z-index: 2;
}
.dropzone__item-quitar {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  background: var(--color-navy);
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 13px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  transition: background 0.15s ease, transform 0.15s ease;
}
.dropzone__item-quitar:hover {
  background: var(--color-danger);
  transform: scale(1.1);
}
.dropzone__item-zoom {
  position: absolute;
  bottom: 22px;
  right: 6px;
  width: 20px;
  height: 20px;
  background: var(--color-accent);
  color: #fff;
  border: none;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}
.dropzone__item-zoom:hover {
  background: var(--color-accent-dark);
}
.dropzone__item-img {
  width: 100%;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  background: var(--color-bg);
}
.dropzone__item-pdf {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-danger);
  background: #fef2f2;
  border-radius: 4px;
}
.dropzone__item-nombre {
  font-size: 10px;
  color: var(--color-navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  text-align: center;
  margin-top: 2px;
}

/* --- Galería de evidencias en Vista de Detalle (show) --- */
.evidencias-galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.evidencia-card {
  position: relative;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}
.evidencia-card__badge {
  position: absolute;
  top: 6px;
  left: 6px;
  background: rgba(15, 23, 42, 0.75);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  z-index: 2;
  backdrop-filter: blur(2px);
}

/* --- Multi-cliente Referencial (Tercero) --- */
.clientes-ref-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 38px;
  padding: 8px 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  align-items: center;
}
.cliente-ref-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
  font-size: 12px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 6px;
  animation: dropzone-preview-in 0.15s ease;
}
.cliente-ref-tag svg {
  color: #3b82f6;
  margin-bottom: 0;
}
.cliente-ref-tag__quitar {
  border: none;
  background: none;
  color: #93c5fd;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
  border-radius: 3px;
  transition: color 0.15s ease;
}
.cliente-ref-tag__quitar:hover {
  color: #ef4444;
}
.placa-check__cliente {
  font-size: 10.5px;
  color: var(--color-navy);
  background: #f1f5f9;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 4px;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
}

/* --- Buscador de cliente y producto (modal Nuevo registro) --- */
.cliente-buscador,
.producto-buscador {
  position: relative;
}

.cliente-buscador__resultados {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16);
  list-style: none;
  margin: 0;
  padding: 4px;
  max-height: min(360px, 50vh);
  overflow-y: auto;
  z-index: 40;
}
.cliente-buscador__resultados li {
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  cursor: pointer;
}
.cliente-buscador__resultados li:hover { background: #eef8f9; }
.cliente-buscador__resultados li.sin-resultados { color: var(--color-muted); cursor: default; }
.cliente-buscador__resultados li.sin-resultados:hover { background: none; }

.cliente-seleccionado {
  padding: 10px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #f8fafc;
  font-size: 13.5px;
  color: var(--color-navy);
  font-weight: 500;
  text-shadow: none;
}
.cliente-seleccionado .texto-muted,
.cliente-seleccionado span {
  color: var(--color-navy);
}
/* Aviso inline propio (reemplaza el globito nativo del navegador -- ver
   form_validacion_controller.js) para que todos los campos requeridos se
   vean igual, y para los que el navegador no puede validar solo (ej.
   "Cliente" es un hidden_field, "required" no hace nada ahí). */
.campo-error {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-danger-dark);
}
/* El "display: block" de arriba pisaría [hidden] si no fuera por esto --
   mismo problema ya visto con .dropzone__preview/.dropzone__quitar. */
.campo-error[hidden] { display: none; }

/* Borde rojo en el campo inválido -- en campos ocultos (ej. el cliente) no
   se ve nada solo, por eso ahí se marca ".cliente-seleccionado" (la cajita
   visible) en su lugar vía "data-error-visual", no el hidden_field mismo. */
.campo-invalido { border-color: var(--color-danger); }
.cliente-seleccionado.campo-invalido { background: #fdeced; }
.placas-wrap.campo-invalido { border-color: var(--color-danger); background: #fdeced; }

.placas-wrap {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  max-height: 180px;
  min-height: 120px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: #ffffff;
}

.placa-check {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 5px 8px;
  border-radius: 4px;
  transition: background 0.1s ease;
}
.placa-check:hover {
  background: #f1f5f9;
}
.placa-check--marcada {
  background: #ecfdf5;
  font-weight: 600;
}
.placa-check input {
  width: 15px;
  height: 15px;
  accent-color: var(--color-primary);
  flex-shrink: 0;
}
.placa-check__contrato {
  font-size: 11px;
  color: var(--color-navy);
  font-family: monospace;
}

/* Chips de placas seleccionadas */
.placas-seleccionadas-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
  max-height: 75px;
  overflow-y: auto;
  padding: 5px 8px;
  background: #f8fafc;
  border-radius: var(--radius-sm);
  border: 1px solid #e2e8f0;
}

.placa-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #ffffff;
  color: #1e293b;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 2px 6px 2px 8px;
  font-size: 11.5px;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.placa-chip__quitar {
  background: transparent;
  border: none;
  color: var(--color-navy);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
  margin-left: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.placa-chip__quitar:hover {
  color: #ef4444;
}

.btn-link-sm {
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
.btn-link-sm:hover {
  color: #0284c7;
}

.placas-toolbar-seleccion {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding: 6px 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-sm);
}

.placas-toolbar-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 0;
  cursor: pointer;
  user-select: none;
}

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

.badge-placas-contador {
  background: #ecfdf5;
  color: #065f46;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid #a7f3d0;
}

.placas-resumen-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 5px 8px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 4px;
  margin-bottom: 5px;
}

.placas-resumen-banner__texto {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: #065f46;
}

.btn-link-desmarcar {
  background: none;
  border: none;
  color: #dc2626;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.btn-link-desmarcar:hover {
  text-decoration: underline;
}

.placas-resumen-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  width: 100%;
}

.placas-mas-badge {
  display: inline-flex;
  align-items: center;
  background: #f1f5f9;
  color: #475569;
  border: 1px dashed #cbd5e1;
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 600;
}

.placa-chip--sm {
  font-size: 11px;
  padding: 1px 5px 1px 7px;
}

.placas-aviso-limite {
  padding: 8px 10px;
  background: #f8fafc;
  border-top: 1px dashed var(--color-border);
  font-size: 11.5px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
  color: var(--color-navy);
  margin-top: 4px;
}

.btn-mostrar-mas-placas {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: var(--color-primary);
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 4px;
  width: 100%;
  text-align: center;
  transition: all 0.15s ease;
}
.btn-mostrar-mas-placas:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}

/* --- Resumen de placas en tabla (ver vouchers/_placas_resumen) + modal
   con el listado completo (vouchers/placas.html.erb) --- */
.placas-mas {
  display: inline-block;
  margin-left: 4px;
  font-weight: 700;
  font-size: 12.5px;
  white-space: nowrap;
}
.placas-modal-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 50vh;
  max-height: 50dvh;
  overflow-y: auto;
  padding-right: 4px;
}

/* --- Detalle de registro (modal Vista de registro) --- */
.detalle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin: 16px 0;
}
.detalle-grid__label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-muted);
  margin-bottom: 3px;
}

.separador { border: none; border-top: 1px solid var(--color-border); margin: 24px 0; }

/* --- Caja "Detalle de registro" / Comentarios / Revisado por (solo lectura) --- */
.detalle-caja {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  background: #fff;
}
.detalle-caja__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  font-size: 13.5px;
}
.detalle-caja__fila span:first-child { font-weight: 600; color: var(--color-navy); }
.detalle-caja--texto { min-height: 48px; font-size: 13px; color: var(--color-navy); white-space: pre-wrap; }
.detalle-caja--fila { display: flex; align-items: center; justify-content: space-between; }
.detalle-caja--fila span { color: var(--color-muted); font-size: 13px; }

/* --- "Ver más detalle de la transacción" (modal Vista de registro) --- */
.detalle-desplegable {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  margin: 16px 0;
  background: #fff;
}
.detalle-desplegable__resumen {
  cursor: pointer;
  padding: 12px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
}
.detalle-desplegable__resumen::-webkit-details-marker { display: none; }
.detalle-desplegable__resumen::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s;
}
.detalle-desplegable[open] .detalle-desplegable__resumen::after { transform: rotate(-135deg); }
.detalle-desplegable__contenido { padding: 0 16px 16px; }

.seccion-contabilidad {
  background: #eaf3fb;
  margin: 20px -32px 16px;
  padding: 10px 32px;
}
.seccion-contabilidad h3 {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-navy);
  margin: 0;
}

.aviso-info {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: var(--color-primary-dark);
  font-size: 13.5px;
  font-weight: 500;
}

.aviso-error {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1.5px solid var(--color-danger);
  background: #fdeced;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: var(--color-danger-dark);
  font-size: 13.5px;
  text-shadow: none;
}
.aviso-error svg { flex: none; margin-top: 1px; }
.aviso-error strong { display: block; font-size: 13px; margin-bottom: 2px; color: var(--color-danger-dark); }
.aviso-error p { margin: 0; line-height: 1.4; color: var(--color-navy); font-weight: 500; }
.aviso-error .texto-muted { color: var(--color-navy); }

.icono-girando { animation: girar 1s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

.aviso-ok {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--color-accent);
  background: #eafcf3;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: var(--color-accent-dark);
  font-size: 13.5px;
  font-weight: 500;
}

.evidencia-preview {
  display: block;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
}
.evidencia-preview__img {
  width: 100%;
  max-height: 200px;
  object-fit: contain;
  display: block;
  background: #f5f6f8;
}
.evidencia-preview__archivo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px 16px;
  text-align: center;
  background: #f5f6f8;
  color: var(--color-navy);
  font-weight: 600;
}
.evidencia-preview__zoom-btn {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--color-accent);
  color: #fff;
}

/* --- Pastilla de decisión ya tomada (badge Aprobar/Desaprobar) --- */
.decision-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  border: 1.5px solid;
  font-weight: 700;
  font-size: 13px;
  width: fit-content;
}
.decision-pill--aprobado { border-color: var(--color-accent); color: var(--color-accent-dark); }
.decision-pill--rechazado { border-color: var(--color-danger); color: var(--color-danger-dark); }

/* --- Toggle Aprobar / Desaprobar --- */
.decision-toggle { display: flex; gap: 12px; margin-bottom: 4px; }
.decision-toggle--apilado { flex-direction: column; }

.decision-toggle__option {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  color: var(--color-navy-light);
}
.decision-toggle__option input { display: none; }
.decision-toggle__option:has(input:checked) { border-width: 2px; }
.decision-toggle__option--success:has(input:checked) { border-color: var(--color-accent); color: var(--color-accent-dark); background: #eafcf3; }
.decision-toggle__option--danger:has(input:checked) { border-color: var(--color-danger); color: var(--color-danger-dark); background: #fdeced; }

.btn-full { display: flex; width: 100%; justify-content: center; margin-top: 16px; }

/* --- Fila editable (módulo Usuarios) --- */
.usuario-fila-form {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
}
.usuario-fila-form__select {
  padding: 8px 10px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-family: inherit;
  color: var(--color-navy);
  background: #fff;
}
.usuario-fila-form__activo {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: var(--color-navy-light);
  cursor: pointer;
}
.usuario-fila-form__activo input { width: 16px; height: 16px; accent-color: var(--color-primary); }

/* --- Menú lateral (hamburguesa) --- */
body.sin-scroll { overflow: hidden; }

.hamburger-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  color: var(--color-navy-light);
  border-radius: var(--radius-sm);
  cursor: pointer;
  flex-shrink: 0;
}
.hamburger-btn:hover { background: #f3f5f8; color: var(--color-navy); }

.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 26, 45, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 65;
}
.sidebar-overlay--visible { opacity: 1; visibility: visible; }

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 260px;
  max-width: 82vw;
  background: var(--color-surface);
  box-shadow: var(--shadow-modal);
  transform: translateX(-100%);
  transition: transform 0.25s ease;
  z-index: 70;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.sidebar--abierto { transform: translateX(0); }

.sidebar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.sidebar__logo { height: 26px; display: block; }
.sidebar__close {
  border: none;
  background: none;
  color: var(--color-navy-light);
  cursor: pointer;
  display: flex;
  padding: 4px;
  border-radius: var(--radius-sm);
}
.sidebar__close:hover { background: #f3f5f8; color: var(--color-navy); }

.sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px;
}

.sidebar__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-navy-light);
}
.sidebar__link svg { flex-shrink: 0; color: var(--color-muted); }
.sidebar__link:hover { background: #f3f5f8; text-decoration: none; color: var(--color-navy); }
.sidebar__link--activo,
.sidebar__link--activo:hover {
  background: var(--color-primary);
  color: #fff;
}
.sidebar__link--activo svg { color: #fff; }

@media (min-width: 900px) {
  .sidebar { width: 280px; }
}

/* ============================================================
   Responsive (tablet / celular en horizontal) -- el hueco entre el
   sidebar permanente (min-width:900px) y el bloque completo de
   celular de abajo (max-width:640px): un celular en landscape (ej.
   ~700-930px de ancho) no calificaba para ninguno de los dos y se
   quedaba con el espaciado de escritorio completo. Este bloque solo
   afloja el espaciado general -- el tratamiento fuerte de modal en
   hoja-inferior/tabla forzada a scroll queda solo para el de abajo.
   ============================================================ */
@media (max-width: 900px) {
  .app-main { padding: 18px; }
  .filtros { gap: 10px; }
  .filtros .field { min-width: 160px; }
}

/* ============================================================
   Responsive (celular) -- el resto del sistema ya usa flex-wrap/
   grid con auto-fit y en general se adapta solo; estos ajustes son
   para los puntos que quedaban apretados o desbordaban en mobile:
   header, tablas anchas, modales y filtros.
   ============================================================ */
@media (max-width: 640px) {
  /* --- Header --- */
  .app-header__horario { font-size: 11.5px; padding: 6px 10px; }

  .app-header__bar {
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 14px;
  }

  .app-header__left { gap: 12px; flex-wrap: wrap; }
  .app-header__logo { height: 22px; }

  /* El pill de la izquierda (ej. "Verificación de depósitos") pasa a ocupar
     todo el ancho, en su propia fila debajo del logo, en vez de competir
     por espacio con el hamburguesa/logo/usuario en una sola línea. Ojo:
     solo el hijo DIRECTO de .app-header__left (el pill suelto, o el
     .header-pill-group que envuelve varios) -- si el selector también le
     pegaba a los .header-pill de adentro del group (ej. en Auditoría, que
     tiene 2), cada uno terminaba con su propia flex-basis:100% y se
     apilaban uno por línea en vez de convivir lado a lado dentro del group
     ya con flex-wrap (ver regla de .header-pill-group más abajo). */
  .app-header__left > [class*="header-pill"] { flex-basis: 100%; }

  .header-pill { padding: 7px 10px; font-size: 12px; }
  .header-pill-group { flex-wrap: wrap; gap: 6px; }

  /* El correo ocupa mucho ancho y no aporta tanto en la barra: se oculta
     acá, sigue visible dentro del menú desplegable al tocar el usuario. */
  .app-header__user-email { display: none; }
  .app-header__user-info { text-align: left; }
  .app-header__user-toggle { gap: 6px; padding: 4px; }
  .app-header__avatar { width: 30px; height: 30px; }
  .app-header__menu { width: calc(100vw - 28px); max-width: 300px; }

  /* Botones de ícono solo: 36px/40px se acercan más al mínimo cómodo para
     tocar con el dedo (los valores de escritorio, pensados para mouse,
     eran más chicos -- 32/26/24px). */
  .hamburger-btn { width: 40px; height: 40px; }
  .sidebar__close { padding: 10px; }

  /* --- Layout general --- */
  .app-main { padding: 14px; }
  .page-head { gap: 10px; }
  .login-card { padding: 24px 20px; }

  /* --- Filtros de bandeja --- */
  .filtros {
    gap: 10px;
    padding: 14px;
  }
  .filtros .field { min-width: 0; flex: 1 1 100%; }
  .filtros-spacer { display: none; }
  .filtros .btn { width: 100%; }
  .filtros__acciones { width: 100%; }
  .filtros__acciones .btn { flex: 1; }

  /* --- Tablas --- */
  /* Vouchers/Auditoría tienen muchas columnas -- forzar el scroll horizontal
     (en vez de apretar todo) es más legible que romper cada celda. */
  table.registros { min-width: 560px; }
  table.registros thead th,
  table.registros tbody td { padding: 10px 12px; font-size: 12.5px; }

  /* La tabla de Usuarios es la excepción: solo 5 columnas angostas, y
     forzarla a 560px obligaba a hacer scroll horizontal pasando por
     Nombre/Correo antes de llegar al selector de Rol/Activo/Guardar de
     cada fila -- sin el mínimo, encoge junto con la pantalla y todo queda
     alcanzable sin desplazar nada. */
  table.registros.registros--compacto { min-width: 0; }

  /* Iconos de acción de la tabla (ver/editar/eliminar): 32px de escritorio
     quedaba un poco chico para tocar con el dedo. */
  .icon-btn { width: 38px; height: 38px; flex-basis: 38px; }
  .acciones__grupo {
    gap: 8px;
    max-width: calc((38px * 5) + (8px * 4));
  }

  /* --- Preview de imagen en el dropzone --- */
  /* En mobile el modal ya se queda corto de alto -- 60vh para la foto dejaría
     casi sin espacio para el resto del formulario debajo. */
  .dropzone__preview { max-height: 38vh; max-height: 38dvh; }

  /* Botones flotantes sobre la foto (quitar/zoom): en escritorio son chicos
     a propósito (no tapan tanto la imagen) pero acá es donde más se usan
     -- foto tomada con el celular -- así que se agrandan para el dedo. */
  .dropzone__quitar { width: 34px; height: 34px; font-size: 17px; top: -10px; right: -10px; }
  .dropzone__zoom, .evidencia-preview__zoom-btn { width: 34px; height: 34px; }

  /* --- Modales --- */
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal-card {
    max-width: 100%;
    max-height: 92vh;
    max-height: 92dvh;
    width: 100%;
    border-radius: var(--radius) var(--radius) 0 0;
    padding: 22px 18px;
  }
  .seccion-contabilidad { margin: 20px -18px 16px; padding: 10px 18px; }

  .modal-card__actions { flex-wrap: wrap; }
  .modal-card__actions .btn { flex: 1 1 auto; }

  /* --- Formularios de fila (módulo Usuarios) --- */
  .usuario-fila-form { flex-wrap: wrap; gap: 10px; }
  .usuario-fila-form__select { flex: 1 1 100%; }

  /* --- Caja de detalle de solo lectura (Vista de registro) --- */
  /* Sin wrap, un par etiqueta/valor largo (ej. nombre de cliente largo)
     se achicaba raro tratando de caber en una sola línea. */
  .detalle-caja__fila, .detalle-caja--fila { flex-wrap: wrap; }

  .field-row { grid-template-columns: 1fr; }
}

/* Celular en horizontal: mismo ancho que uno en vertical no dice nada del
   alto disponible (ej. ~375px de alto) -- el modal grande de "Registrar
   voucher" apretado con el padding de escritorio dejaba muy poco lugar
   para ver el formulario debajo del header. Por alto, no por ancho, para
   agarrar el celular acostado sin importar si technically es "ancho". */
@media (max-height: 480px) {
  .modal-card { padding: 16px; max-height: 96vh; max-height: 96dvh; }
  .dropzone__preview { max-height: 30vh; max-height: 30dvh; }
}

/* --- Paginación (Pagy) --- */
.paginacion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-top: 1px solid var(--color-border);
  background: #fafbfc;
}

.paginacion__info {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-navy);
  text-shadow: none;
}

.paginacion__info .pagy.info {
  color: var(--color-navy);
}

.paginacion__nav {
  margin-left: auto;
}

.pagy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  color: var(--color-navy);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  text-shadow: none;
}

.pagy a:not([role="separator"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--color-navy);
  text-decoration: none;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.pagy a[href]:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  color: var(--color-navy-dark);
  text-decoration: none;
}

.pagy a[aria-current] {
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: #fff;
}

.pagy a[role="link"]:not([aria-current]):not([href]),
.pagy a:not([href]):not([aria-current]) {
  opacity: 0.45;
  cursor: default;
  background: #f8fafc;
}

.pagy a[role="separator"] {
  border: none;
  background: transparent;
  min-width: auto;
  padding: 0 4px;
  color: var(--color-navy);
  cursor: default;
}

@media (max-width: 640px) {
  .paginacion {
    flex-direction: column;
    align-items: stretch;
  }

  .paginacion__nav {
    margin-left: 0;
  }

  .pagy {
    justify-content: center;
  }
}

/* --- Auditoría del proceso --- */
.auditoria-resumen {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.auditoria-resumen__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  background: #fff;
  border: 1.5px solid var(--color-border);
  border-left: 3px solid var(--color-navy);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--color-navy);
  text-shadow: none;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.auditoria-resumen__item:hover {
  text-decoration: none;
  border-color: var(--color-primary);
  background: #f8fbfd;
}

.auditoria-resumen__item--activo {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.auditoria-resumen__item strong {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-navy);
}

.auditoria-resumen__item span {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-navy);
}

.auditoria-resumen__item--pendiente { border-left-color: #64748b; }
.auditoria-resumen__item--aprobado { border-left-color: var(--color-accent-dark); }
.auditoria-resumen__item--rechazado { border-left-color: var(--color-danger-dark); }
.auditoria-resumen__item--erp { border-left-color: var(--color-danger); }

.auditoria-erp-error {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 280px;
  font-size: 12.5px;
  color: var(--color-danger-dark);
}

.auditoria-erp-error strong {
  font-size: 12.5px;
}

.auditoria-decision {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12.5px;
  color: var(--color-navy);
}

.auditoria-decision strong {
  font-size: 13px;
}

.auditoria-decision__motivo {
  margin-top: 2px;
  font-weight: 500;
}

.auditoria-demora {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-navy);
  white-space: nowrap;
}

.auditoria-demora--pendiente {
  color: #9a3412;
}

@media (max-width: 900px) {
  .auditoria-resumen {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- Depósitos múltiples (contado) --- */
.depositos-panel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 14px;
  margin: 14px 0;
  background: #f8fafc;
}

.depositos-panel__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.depositos-panel__suma {
  font-size: 13px;
  color: var(--color-navy-light);
  white-space: nowrap;
}

.depositos-suma--ok { color: #047857; }
.depositos-suma--error { color: #b91c1c; }

.depositos-lista {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.deposito-fila {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 12px;
}

.deposito-fila__campos {
  display: grid;
  grid-template-columns: 1.6fr 0.8fr 0.7fr 0.9fr 1fr 1fr;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.deposito-fila__banco { grid-column: 1 / 2; }
.deposito-fila__archivo { grid-column: 6 / 7; }

.deposito-fila__campos .field { margin-bottom: 0; }

.deposito-fila__quitar {
  margin-top: 22px;
  flex-shrink: 0;
}

.dropzone--compacto {
  min-height: 110px;
  padding: 10px;
}

@media (max-width: 900px) {
  .deposito-fila {
    flex-direction: column;
  }
  .deposito-fila__campos {
    grid-template-columns: 1fr 1fr;
  }
  .deposito-fila__banco,
  .deposito-fila__archivo {
    grid-column: 1 / -1;
  }
  .deposito-fila__quitar {
    margin-top: 0;
    align-self: flex-end;
  }
}

@media (max-width: 560px) {
  .deposito-fila__campos {
    grid-template-columns: 1fr;
  }
}