/* =====================================================================
   Waltieri UI — tokens y componentes (rediseño, nov 2026)
   Destino: backend/public/assets/css/ui.css

   Cárgalo en cada página, después de las fuentes:
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600&family=Archivo+Narrow:wght@600&display=swap">
     <link rel="stylesheet" href="/assets/css/ui.css">

   Las reglas base solo aplican a <body class="w-ui">. Así migras página
   por página sin romper las que siguen con styles.css.
   Las reglas base usan :where() para no ganarle a las clases .w-*.
   ===================================================================== */

:root {
  /* Superficies */
  --w-bg: #0B1520;          /* fondo de página (theme del manifest) */
  --w-panel: #0F1C2B;       /* paneles, menú lateral */
  --w-raised: #15263A;      /* elementos elevados, botón secundario */
  --w-inset: #132233;       /* listas desplegables, avisos */
  --w-line: #22364D;        /* divisiones */
  --w-line-soft: #1C2E43;   /* divisiones entre filas */
  --w-steel: #2E4E73;       /* borde de botón secundario, selección */
  --w-field: #4B6B8F;       /* borde de campos: 3:1 sobre panel */

  /* Texto */
  --w-text: #E8EDF3;
  --w-text-2: #A5B3C4;
  --w-text-3: #8597AC;
  --w-text-soft: #C7D1DD;

  /* Acción */
  --w-action: #C9A54C;            /* texto marino encima: 7.7:1 */
  --w-action-hover: #B8933B;
  --w-action-text: #0B1520;
  --w-action-tint: rgba(201, 165, 76, 0.18);
  --w-action-tint-text: #F4E6BF;
  --w-link: #D9B865;
  --w-link-hover: #E6CD86;
  --w-focus: rgba(201, 165, 76, 0.30);

  /* Estados: siempre con ícono y texto, nunca solo color */
  --w-pending: #6AA9FF; --w-pending-bg: rgba(106, 169, 255, 0.12); /* pendiente, en revisión y «por atender» van en azul porque el tono cálido es del latón */
  --w-ok: #4CC38A;    --w-ok-bg: rgba(76, 195, 138, 0.12);
  --w-bad: #F07A84;   --w-bad-bg: rgba(240, 122, 132, 0.12);
  --w-muted: #A5B3C4; --w-muted-bg: rgba(165, 179, 196, 0.12);

  /* Recibo (papel de seguridad) */
  --w-paper: #F8F7F3;
  --w-paper-edge: #E9E6DC;
  --w-ink: #14202E;
  --w-ink-2: #5B6676;
  --w-ink-3: #3D4A5C;
  --w-folio: #8A6A16;

  /* Tipografía */
  --w-font: 'Archivo', system-ui, 'Segoe UI', Roboto, sans-serif;
  --w-font-narrow: 'Archivo Narrow', 'Arial Narrow', 'Roboto Condensed', sans-serif;

  /* Radios: cambian con la jerarquía */
  --w-r-badge: 6px;
  --w-r-control: 8px;
  --w-r-group: 10px;
  --w-r-panel: 14px;

  /* Medidas */
  --w-sidebar: 248px;
  --w-content: 100%;        /* contenido a todo el ancho (la referencia usaba 1160px) */
}

/* ---------- Base (solo con body.w-ui) ---------- */
:where(body.w-ui) {
  margin: 0;
  background: var(--w-bg);
  color: var(--w-text);
  font-family: var(--w-font);
  font-size: 14px;
  line-height: 20px;
  color-scheme: dark;
  -webkit-font-smoothing: antialiased;
}
:where(.w-ui) a { color: var(--w-link); }
:where(.w-ui) a:where(:hover) { color: var(--w-link-hover); }
:where(.w-ui) ::placeholder { color: var(--w-text-3); opacity: 1; }
:where(.w-ui) :where(:focus-visible) { outline: 2px solid var(--w-link); outline-offset: 2px; }
:where(.w-ui) :where(h1, h2, h3, p) { margin: 0; }

.w-sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Estructura: menú lateral + contenido ---------- */
/* width: 100% porque styles.css centra el body con flex en las páginas sin migrar */
.w-app { width: 100%; min-height: 100vh; display: flex; flex-wrap: wrap; align-items: stretch; }

/* Tipografía propia: el menú se ve igual en páginas migradas y sin migrar */
.w-sidebar {
  flex: 1 1 var(--w-sidebar);
  box-sizing: border-box;
  padding: 24px 16px;
  display: flex; flex-direction: column; gap: 26px;
  background: var(--w-panel);
  border-right: 1px solid var(--w-line);
  color: var(--w-text); font-family: var(--w-font); font-size: 14px; line-height: 20px;
}
.w-sidebar__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.w-sidebar__top > .w-sidebar__brand { flex: 1 1 auto; } /* toda la fila es clic, como en la referencia */
.w-sidebar__menu { display: flex; flex-direction: column; gap: 26px; }
.w-sidebar .w-nav-toggle { display: none; }
.w-sidebar :focus-visible { outline: 2px solid var(--w-link); outline-offset: 2px; } /* el de base solo aplica con body.w-ui */
.w-sidebar__brand { display: flex; align-items: center; padding: 6px 12px; text-decoration: none; }
.w-sidebar__brand img { height: auto; width: auto; display: block; } /* el SVG solo trae viewBox: ocupa el ancho del menú */
.w-nav-group { display: flex; flex-direction: column; gap: 2px; }
.w-nav-label { margin: 0 0 6px; padding: 0 12px; font-size: 12px; line-height: 16px; color: var(--w-text-3); }
.w-nav-link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 40px; padding: 0 12px;
  border-radius: var(--w-r-control);
  font-size: 14px; font-weight: 500; text-decoration: none;
  color: var(--w-text-2);
}
.w-nav-link:hover { background: var(--w-raised); color: var(--w-text); }
.w-nav-link[aria-current="page"] { background: var(--w-action-tint); color: var(--w-action-tint-text); font-weight: 600; }
.w-nav-count {
  min-width: 22px; height: 22px; padding: 0 7px; box-sizing: border-box;
  border-radius: var(--w-r-badge);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
  color: var(--w-pending); background: rgba(106, 169, 255, 0.14);
}
/* En el enlace activo, el 14 % azul encima del tinte latón bajaba a 4.1:1: fondo opaco igual al de los
   contadores de los demás enlaces (#1C3049 = ese 14 % sobre el panel), 5.6:1 */
.w-nav-link[aria-current="page"] .w-nav-count { background: #1C3049; }
.w-sidebar__user { display: flex; flex-direction: column; gap: 12px; padding: 16px 12px 0; border-top: 1px solid var(--w-line); }
.w-sidebar__who { display: flex; align-items: center; gap: 10px; }
.w-sidebar__id { display: flex; flex-direction: column; min-width: 0; }
.w-sidebar__name { font-size: 13px; font-weight: 500; }
.w-sidebar__role { font-size: 12px; line-height: 16px; color: var(--w-text-3); }
.w-sidebar__logout { align-self: flex-start; font-size: 13px; color: var(--w-text-2); text-decoration: none; }
.w-sidebar a:hover { text-decoration: none; } /* gana al a:hover{underline} de páginas sin migrar (pagos_brokers) */
.w-avatar {
  width: 32px; height: 32px; flex: none; border-radius: var(--w-r-control);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--w-raised); color: var(--w-text-2); font-size: 12px; font-weight: 600;
}

.w-main { flex: 999 1 560px; min-width: 0; box-sizing: border-box; padding: 32px 40px 56px; }
.w-container { max-width: var(--w-content); display: flex; flex-direction: column; gap: 20px; }

/* Menú (248) + contenido (560) caben lado a lado desde 808 px. Debajo, en vez de apilar el menú completo
   encima de la página, se vuelve una barra con botón «Menú» que lo despliega (layout.js pone .is-open).
   nowrap arriba de 808: con barra de desplazamiento clásica el contenedor mide ~15 px menos que el viewport. */
@media (min-width: 808px) {
  .w-app { flex-wrap: nowrap; }
  /* el menú se queda fijo al desplazar la página; si no cabe en la ventana, se desplaza solo él */
  .w-sidebar { position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto; }
}
@media (max-width: 807px) {
  .w-app { align-content: flex-start; } /* sin esto la barra se estira cuando el contenido es corto */
  .w-sidebar { padding: 12px 16px; border-right: 0; border-bottom: 1px solid var(--w-line); }
  .w-sidebar .w-nav-toggle { display: inline-flex; }
  .w-sidebar__brand img { height: 22px; } /* en la barra plegada el logo a todo el ancho la haría de 100-200 px de alto */
  .w-sidebar:not(.is-open) .w-sidebar__menu { display: none; }
}
@media (max-width: 640px) {
  .w-main { padding: 24px 16px 40px; }
}

/* ---------- Encabezados ---------- */
.w-page-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.w-title { margin: 0; font-family: var(--w-font-narrow); font-weight: 600; font-size: 32px; line-height: 38px; }
.w-subtitle { margin: 4px 0 0; font-size: 13px; color: var(--w-text-2); }
.w-section-title { margin: 0; font-family: var(--w-font-narrow); font-weight: 600; font-size: 21px; line-height: 26px; }

/* ---------- Botones ---------- */
.w-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; box-sizing: border-box;
  border-radius: var(--w-r-control); border: 1px solid transparent;
  font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.w-btn:disabled, .w-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
/* styles.css le pone brillo a todo <button>; mientras siga cargado, los .w-btn no lo heredan */
.w-btn, .w-btn:hover, .w-btn:active { box-shadow: none; }
.w-btn--primary { background: var(--w-action); color: var(--w-action-text); font-weight: 600; }
.w-btn--primary:hover { background: var(--w-action-hover); color: var(--w-action-text); }
.w-btn--secondary { background: var(--w-raised); border-color: var(--w-steel); color: var(--w-text); }
.w-btn--secondary:hover { color: var(--w-text); border-color: var(--w-field); }
.w-btn--tint { background: var(--w-action-tint); color: var(--w-action-tint-text); font-weight: 600; }
.w-btn--tint:hover { background: rgba(201, 165, 76, 0.28); color: var(--w-action-tint-text); }
.w-btn--danger { background: transparent; border-color: var(--w-bad); color: var(--w-bad); }
.w-btn--ghost { background: transparent; color: var(--w-link); padding: 0 10px; }
.w-btn--sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: 7px; }
.w-btn--lg { height: 48px; padding: 0 18px; font-size: 15px; border-radius: var(--w-r-group); }
.w-btn--block { width: 100%; }
.w-icon-btn {
  width: 32px; height: 32px; padding: 0; box-sizing: border-box;
  border-radius: 7px; border: 1px solid var(--w-line); background: transparent;
  color: var(--w-text-2);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.w-icon-btn--lg { width: 44px; height: 44px; border-radius: var(--w-r-group); }

/* ---------- Filtro por estado (pestañas) ---------- */
.w-segmented {
  display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px;
  background: var(--w-panel); border: 1px solid var(--w-line); border-radius: var(--w-r-group);
}
.w-segmented > button {
  height: 32px; padding: 0 12px; border: 0; border-radius: 7px;
  background: transparent; color: var(--w-text-2);
  font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
}
.w-segmented > button[aria-pressed="true"] {
  background: var(--w-raised); box-shadow: inset 0 0 0 1px var(--w-steel);
  color: var(--w-text); font-weight: 600;
}
.w-segmented .w-count { color: var(--w-text-2); font-weight: 500; }
.w-segmented .w-count--pending { color: var(--w-pending); font-weight: 600; }
.w-segmented--lg > button { height: 44px; border-radius: 9px; font-size: 14px; }
.w-segmented--md > button { height: 34px; padding: 0 14px; } /* periodo del Resumen */

.w-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }

/* ---------- Campos ---------- */
.w-field { display: flex; flex-direction: column; gap: 8px; }
.w-label { font-size: 13px; font-weight: 500; color: var(--w-text); }
.w-label .w-req { color: var(--w-link); }
.w-input, .w-select, .w-textarea {
  width: 100%; box-sizing: border-box; height: 44px; padding: 0 12px;
  border-radius: var(--w-r-control); border: 1px solid var(--w-field);
  background: var(--w-bg); color: var(--w-text);
  font-family: inherit; font-size: 15px;
}
.w-textarea { height: auto; min-height: 96px; padding: 10px 12px; line-height: 21px; resize: vertical; }
.w-input:focus, .w-select:focus, .w-textarea:focus {
  outline: none; border-color: var(--w-action); box-shadow: 0 0 0 3px var(--w-focus);
}
.w-input[aria-invalid="true"], .w-select[aria-invalid="true"] { border-color: var(--w-bad); }
.w-input--sm { height: 40px; font-size: 14px; background: var(--w-panel); }
.w-input--lg { height: 48px; font-size: 16px; border-radius: var(--w-r-group); background: var(--w-panel); }
.w-help { font-size: 12px; line-height: 16px; color: var(--w-text-2); }
.w-error { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; color: var(--w-bad); }

.w-search { position: relative; }
.w-search > svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--w-text-3); pointer-events: none;
}
.w-search > .w-input { padding-left: 36px; }

.w-money {
  display: flex; align-items: center; gap: 6px; height: 44px; box-sizing: border-box; padding: 0 12px;
  border-radius: var(--w-r-control); border: 1px solid var(--w-field); background: var(--w-bg);
}
.w-money:focus-within { border-color: var(--w-action); box-shadow: 0 0 0 3px var(--w-focus); }
.w-money > span { color: var(--w-text-2); font-size: 12px; }
.w-money > input {
  flex: 1 1 auto; min-width: 0; height: 40px; border: 0; padding: 0; outline: none;
  background: transparent; color: var(--w-text);
  font-family: inherit; font-size: 15px; font-weight: 600;
  font-variant-numeric: tabular-nums; text-align: right;
}

/* Buscador con lista (cliente registrado o «sin cuenta») */
.w-listbox {
  margin: 0; padding: 6px; list-style: none;
  display: flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--w-steel); border-radius: var(--w-r-group); background: var(--w-inset);
}
.w-listbox [role="option"] {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  min-height: 48px; padding: 6px 10px; border-radius: 7px; cursor: pointer;
}
.w-listbox [role="option"][aria-selected="true"], .w-listbox [role="option"]:hover { background: #1B3049; }
.w-listbox .w-listbox__create { justify-content: flex-start; margin-top: 4px; border-top: 1px solid var(--w-line); color: var(--w-link-hover); }

/* ---------- Paneles y tablas ---------- */
.w-panel { background: var(--w-panel); border: 1px solid var(--w-line); border-radius: var(--w-r-panel); }
.w-panel--pad { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 22px; }
.w-panel--clip { overflow: hidden; }
.w-panel__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }

.w-table-wrap { overflow-x: auto; }
.w-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.w-table th {
  text-align: left; padding: 12px 16px;
  font-size: 12px; font-weight: 500; color: var(--w-text-3); white-space: nowrap;
}
.w-table td { padding: 13px 16px; border-top: 1px solid var(--w-line-soft); vertical-align: middle; }
.w-table tbody tr:hover td { background: rgba(21, 38, 58, 0.55); }
.w-table .w-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.w-table .w-code { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.w-table .w-muted { color: var(--w-text-2); }
.w-table .w-nowrap { white-space: nowrap; }
.w-table .w-actions { text-align: right; white-space: nowrap; }
.w-table .w-actions > * + * { margin-left: 4px; }
.w-table-footer {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 16px; border-top: 1px solid var(--w-line);
  font-size: 13px; color: var(--w-text-2);
}
.w-empty { padding: 40px 24px; text-align: center; color: var(--w-text-2); }

.w-pagination { display: flex; gap: 6px; }
.w-pagination > button {
  min-width: 34px; height: 34px; padding: 0 10px; box-sizing: border-box;
  border-radius: 7px; border: 1px solid var(--w-line); background: transparent;
  color: var(--w-text-2); font-family: inherit; font-size: 13px; cursor: pointer;
}
.w-pagination > button[aria-current="page"] { border-color: var(--w-steel); background: var(--w-raised); color: var(--w-text); font-weight: 600; }
.w-pagination > button:disabled { opacity: 0.6; cursor: not-allowed; }

/* ---------- Estados ---------- */
.w-badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 9px 0 7px; box-sizing: border-box;
  border-radius: var(--w-r-badge);
  font-size: 12px; font-weight: 500; white-space: nowrap;
}
.w-badge svg { width: 12px; height: 12px; flex: none; }
.w-badge--pending { background: var(--w-pending-bg); color: var(--w-pending); }
.w-badge--ok { background: var(--w-ok-bg); color: var(--w-ok); }
.w-badge--bad { background: var(--w-bad-bg); color: var(--w-bad); }
.w-badge--muted { background: var(--w-muted-bg); color: var(--w-muted); }
.w-badge-stack { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.w-badge-stack > small { font-size: 12px; line-height: 16px; color: var(--w-text-3); }
.w-tag {
  display: inline-flex; align-items: center; height: 20px; padding: 0 6px; box-sizing: border-box;
  border-radius: 5px; border: 1px solid var(--w-field);
  color: var(--w-text-2); font-size: 12px; line-height: 16px; white-space: nowrap;
}

/* ---------- Cifras (Resumen) ---------- */
.w-stat { display: flex; flex-direction: column; gap: 4px; }
.w-stat__label { font-size: 13px; color: var(--w-text-2); }
.w-stat__value { font-size: 24px; line-height: 30px; font-weight: 600; }
.w-stat__note { font-size: 12px; line-height: 16px; color: var(--w-text-3); }
.w-hero { font-size: 52px; line-height: 58px; font-weight: 600; letter-spacing: -0.015em; } /* una por vista */
.w-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 20px 24px; }

/* Bloque «Pendiente de atención»: celdas separadas por línea de 1px */
.w-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 1px; background: var(--w-line); border-top: 1px solid var(--w-line); }
.w-split > * { background: var(--w-panel); padding: 18px 24px 22px; display: flex; flex-direction: column; gap: 10px; }

/* Barra segmentada: <div class="w-bar"><span style="flex: 7 1 0%; background: var(--w-pending)"></span>…</div> */
.w-bar { display: flex; gap: 2px; height: 8px; border-radius: 999px; overflow: hidden; }
.w-bar > span { min-width: 2px; }
.w-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 12px; line-height: 16px; color: var(--w-text-2); }
.w-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.w-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; }

/* Medidor contra meta: relleno = estado (azul bajo meta, verde en meta) */
.w-meter { position: relative; height: 18px; }
.w-meter__track, .w-meter__fill { position: absolute; left: 0; top: 5px; height: 8px; border-radius: 999px; }
.w-meter__track { right: 0; background: rgba(106, 169, 255, 0.20); }
.w-meter__fill { background: var(--w-pending); }
.w-meter__target { position: absolute; top: 0; width: 2px; height: 18px; margin-left: -1px; border-radius: 1px; background: var(--w-text); }
.w-meter--ok .w-meter__track { background: rgba(76, 195, 138, 0.20); }
.w-meter--ok .w-meter__fill { background: var(--w-ok); }

/* ---------- Panel lateral (altas y detalles) ---------- */
.w-scrim { position: fixed; inset: 0; background: rgba(5, 10, 16, 0.62); z-index: 40; }
.w-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 41;
  width: min(440px, 100vw); box-sizing: border-box;
  display: flex; flex-direction: column;
  background: var(--w-panel); border-left: 1px solid var(--w-line);
}
.w-drawer__head { padding: 20px 24px 18px; border-bottom: 1px solid var(--w-line); display: flex; flex-direction: column; gap: 6px; }
.w-drawer__title { margin: 0; font-family: var(--w-font-narrow); font-weight: 600; font-size: 26px; line-height: 32px; }
.w-drawer__body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 22px 24px; display: flex; flex-direction: column; gap: 20px; }
.w-drawer__foot { padding: 16px 24px; border-top: 1px solid var(--w-line); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
@media (prefers-reduced-motion: no-preference) {
  .w-drawer { animation: w-drawer-in 0.18s ease-out; }
  @keyframes w-drawer-in { from { transform: translateX(24px); opacity: 0; } }
}
/* El panel es un <dialog class="w-drawer"> que se abre con showModal(): el navegador pone la capa
   (::backdrop hace de .w-scrim), deja inerte la página de atrás, cierra con Esc y devuelve el foco.
   Estas reglas quitan los estilos de <dialog> del navegador para que quede igual que el <div> de la referencia. */
dialog.w-drawer {
  left: auto; height: auto; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; border-left: 1px solid var(--w-line); color: var(--w-text); overflow: hidden;
}
dialog.w-drawer:not([open]) { display: none; }
dialog.w-drawer::backdrop { background: rgba(5, 10, 16, 0.62); }
.w-drawer > form { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.w-ui:has(dialog.w-drawer[open]) { overflow: hidden; } /* la lista de atrás no se desplaza con el panel abierto */

/* ---------- Avisos (toast.js: .toast-container > .toast.success|error|info) ---------- */
.w-ui .toast-container {
  position: fixed; top: 20px; right: 20px; z-index: 60;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.w-ui .toast {
  pointer-events: auto; max-width: 380px; box-sizing: border-box; padding: 12px 14px;
  border-radius: var(--w-r-group); border: 1px solid var(--w-steel); background: var(--w-inset);
  color: var(--w-text); font-size: 14px; line-height: 20px; font-weight: 500;
  animation: w-toast-in 0.18s ease-out;
}
.w-ui .toast.success { border-color: var(--w-ok); }
.w-ui .toast.error { border-color: var(--w-bad); }
.w-ui .toast.toast-out { animation: w-toast-out 0.2s ease-in forwards; } /* toast.js lo quita en animationend: siempre con animación */
@keyframes w-toast-in { from { opacity: 0; transform: translateY(-6px); } }
@keyframes w-toast-out { to { opacity: 0; } }
@media (max-width: 640px) {
  .w-ui .toast-container { top: 12px; right: 12px; left: 12px; }
  .w-ui .toast { max-width: none; }
}

/* ---------- Recibo (papel de seguridad) ---------- */
.w-receipt {
  padding: 7px; border-radius: 12px;
  background-color: var(--w-paper-edge);
  background-image:
    repeating-radial-gradient(circle at 0% 0%, rgba(46, 78, 115, 0.16) 0 1px, transparent 1px 5px),
    repeating-radial-gradient(circle at 100% 100%, rgba(201, 165, 76, 0.26) 0 1px, transparent 1px 5px);
}
.w-receipt__paper {
  border-radius: 8px; background: var(--w-paper); border: 1px solid rgba(46, 78, 115, 0.28);
  padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 14px; color: var(--w-ink);
}
.w-receipt__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.w-receipt__kind { font-family: var(--w-font-narrow); font-size: 18px; font-weight: 600; letter-spacing: 0.04em; }
.w-folio { font-family: var(--w-font-narrow); font-size: 20px; font-weight: 600; letter-spacing: 0.08em; color: var(--w-folio); font-variant-numeric: tabular-nums; }
.w-receipt__rows { margin: 0; display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 6px 12px; font-size: 14px; border-top: 1px solid rgba(46, 78, 115, 0.22); padding-top: 12px; }
.w-receipt__rows dt { color: var(--w-ink-2); }
.w-receipt__rows dd { margin: 0; }
.w-receipt__total { font-size: 34px; line-height: 40px; font-weight: 600; }
.w-receipt__words { font-size: 13px; color: var(--w-ink-3); }

.w-signature { position: relative; height: 210px; border-radius: 12px; background: var(--w-paper); border: 1px solid var(--w-field); touch-action: none; }
.w-signature canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; }
.w-signature__line { position: absolute; left: 18px; right: 18px; bottom: 54px; height: 1px; background: #8C97A6; pointer-events: none; }
.w-signature__hint { position: absolute; left: 0; right: 0; bottom: 22px; text-align: center; font-size: 13px; color: var(--w-ink-2); pointer-events: none; }

/* Textura de seguridad para el inicio de sesión (y solo ahí, fuera del recibo) */
.w-security-bg {
  background-color: #0E1B2A;
  background-image:
    repeating-radial-gradient(circle at 0% 100%, rgba(75, 107, 143, 0.18) 0 1px, transparent 1px 9px),
    repeating-radial-gradient(circle at 100% 0%, rgba(201, 165, 76, 0.14) 0 1px, transparent 1px 9px);
}

/* ---------- App del repartidor ---------- */
.w-card { padding: 16px; border-radius: var(--w-r-panel); background: var(--w-panel); border: 1px solid var(--w-line); display: flex; flex-direction: column; gap: 12px; }
.w-banner { padding: 12px 14px; border-radius: 12px; background: var(--w-inset); border: 1px solid var(--w-steel); display: flex; align-items: center; gap: 12px; }

/* ---------- Fase 2: comunes ---------- */
/* Fase 2, por componente. Complementa las reglas de arriba (diseñador y Fases 0/1), que no se tocan. Secciones:
   comunes, estructura, botones, barras de filtros, campos, archivo, tablas y paginación, estados y etiquetas,
   paneles, panel lateral, documentos y visor, avisos y mensajes, cifras y gráficas, tarjetas, recibo y firma,
   acceso, app del repartidor y portal del cliente.
   Con la misma especificidad gana la regla que va después: al mover una, revisa que no cambie cuál gana. */
/* hidden siempre le gana al display de las clases .w-*: no hace falta una regla [hidden] por clase */
.w-ui [hidden] { display: none !important; }
/* Texto libre que puede traer una palabra larguísima sin espacios (nombre capturado a mano): se parte en vez de
   ensanchar la tabla. Solo en esa columna; las demás conservan sus palabras enteras. */
.w-wrap-anywhere { overflow-wrap: anywhere; }
/* Cifras del mismo ancho (teléfonos en tablas y campos) */
.w-tnum { font-variant-numeric: tabular-nums; }

/* ---------- Fase 2: estructura ---------- */
/* El Resumen y los detalles separan sus bloques 24 px; las listas, 20 */
.w-container--loose { gap: 24px; }
/* Formulario en página (portal): columna de 720 px; a todo el ancho, a 1440 los campos medirían 1,310 px */
.w-container--form { max-width: 720px; }
/* Enlaces de regreso sobre el título de un detalle («Volver a reportes»): 13 px en 500, con la flecha de .w-back */
.w-backlinks { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-bottom: 8px; }
.w-backlinks > a { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; text-decoration: none; }
.w-backlinks svg { flex: none; }
/* Fila con su contenido a la derecha («Borrar firma», «Enviar requerimiento») */
.w-row-end { display: flex; justify-content: flex-end; }
/* Nombre del usuario en el menú: sin espacios se parte en vez de ensanchar el menú (y la página, en teléfono) */
.w-sidebar__name { overflow-wrap: anywhere; }
/* «Activar avisos» del menú (layout.js; lo muestra push-notifications.js): a la izquierda, como «Cerrar sesión» */
.w-sidebar__push { align-self: flex-start; }

/* ---------- Fase 2: botones ---------- */
/* Mediano (Resumen): 38 px, los 36 de la referencia más su borde */
.w-btn--md { height: 38px; padding: 0 14px; font-size: 13px; }
/* Acción de fila «Ver» (.w-btn--ghost): se aclara al pasar el puntero, como el a:hover de la referencia */
.w-btn--ghost:hover { color: var(--w-link-hover); }
/* Con borde de línea (PDF, «Descargar ZIP», «Borrar firma») */
.w-btn--outline { background: transparent; border-color: var(--w-line); color: var(--w-text); padding: 0 10px; gap: 6px; }
.w-btn--outline:hover { border-color: var(--w-steel); color: var(--w-text); }
/* Ícono destructivo (cancelar, eliminar): rojo al pasar el puntero; la página pide confirmación */
.w-icon-btn--danger:hover { color: var(--w-bad); border-color: var(--w-bad); }
/* Eliminar o cancelar mientras va la petición: aria-disabled (no disabled, para no soltar el foco), como .w-btn */
.w-icon-btn[aria-disabled="true"], .w-icon-btn[aria-disabled="true"]:hover { opacity: 0.55; cursor: not-allowed; color: var(--w-text-2); border-color: var(--w-line); }
/* Cerrar un panel lateral: 40 px */
.w-icon-btn--md { width: 40px; height: 40px; border-radius: var(--w-r-control); }
/* Botón de 44 px del teléfono; «Borrar firma» con borde acero, como la referencia */
.w-btn--touch { height: 44px; padding: 0 14px; border-radius: var(--w-r-group); }
.w-btn--outline.w-btn--touch { border-color: var(--w-steel); }
/* Confirmar la firma: 54 px */
.w-btn--xl { height: 54px; border-radius: 12px; font-size: 16px; }
/* Botón de texto sin relleno lateral («Limpiar» de las barras de filtros): si baja de renglón, su texto queda
   alineado con los controles de arriba */
.w-btn--flush { padding-left: 0; padding-right: 0; border-width: 0; }

/* ---------- Fase 2: barras de filtros ---------- */
/* Buscador junto a las pestañas: hasta 380 px; si no cabe, baja de renglón (mínimo 240) */
.w-toolbar > .w-search { flex: 0 1 380px; min-width: 240px; }
/* Grupo en línea de controles (filtros a la derecha de la barra, botones del pie de un panel). min-width 0 aquí, en
   .w-field--inline y en .w-select--sm: con un nombre largo en el select, el grupo se encoge en vez de salirse */
.w-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; max-width: 100%; }
.w-cluster > .w-search { width: 300px; max-width: 100%; } /* buscador junto a otro filtro: 300 px */
.w-cluster--nowrap { flex-wrap: nowrap; } /* no baja de renglón («Elegir archivo» y «Subir» en la fila de una tabla) */
/* En teléfono, el grupo de filtros ocupa su renglón y el buscador lo llena (junto a «Limpiar», si lo hay). Sin la
   primera regla, el grupo mediría lo que su contenido y el buscador bajaría de 300 a 240 px. */
@media (max-width: 640px) {
  .w-toolbar > .w-cluster { flex: 1 1 100%; }
  .w-cluster > .w-search { flex: 1 1 240px; width: auto; }
}
/* Campo con la etiqueta a la izquierda (filtro «Repartidor»): etiqueta de 13 px en texto secundario */
.w-field--inline { flex-direction: row; align-items: center; min-width: 0; max-width: 100%; }
.w-field--inline > .w-label { font-weight: 400; color: var(--w-text-2); }
/* Select compacto: ancho según su texto, 40 px, fondo de panel */
.w-select--sm { width: auto; max-width: 100%; min-width: 0; height: 40px; padding: 0 32px 0 12px; font-size: 14px; background: var(--w-panel); }
/* Campo con el ancho de su contenido (mes de Reportes) */
.w-input--auto { width: auto; max-width: 100%; min-width: 0; }
/* Pestañas a todo lo ancho, en columnas iguales (app del repartidor, con .w-segmented--lg) */
.w-segmented--full { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border-radius: 12px; }

/* ---------- Fase 2: campos ---------- */
/* Campos en columnas: dos lado a lado (Total y Fecha) mientras cada uno tenga 150 px, si no uno bajo otro (en el panel
   a 360 y 320 px el monto se cortaba); o las de 200 px que quepan (montos por orden; una en teléfono).
   .w-grid-2 sirve porque lleva exactamente 2 hijos: con 3 o más, auto-fit armaría 3 columnas o más. */
.w-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 16px; }
.w-grid-fit { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 16px; }
/* Grupo de campos a 16 px; etiqueta de 14 px y ayuda de 13/18 del teléfono (la ayuda también muestra el nombre de la
   foto, que puede no tener espacios) */
.w-fields { display: flex; flex-direction: column; gap: 16px; }
.w-label--lg { font-size: 14px; }
.w-label__aside { font-weight: 400; color: var(--w-text-2); } /* «(opcional)» */
.w-help--lg { font-size: 13px; line-height: 18px; overflow-wrap: anywhere; }
/* Errores de campo: el texto largo se parte y el ícono no se aplasta */
.w-error { overflow-wrap: anywhere; }
.w-error > svg { flex: none; }
/* Monto con error: el aria-invalid va en el input de dentro */
.w-money:has(> input[aria-invalid="true"]) { border-color: var(--w-bad); }
/* Monto con type="number" (el navegador valida mínimo y centavos): sin flechas, como el campo de la referencia */
.w-money > input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.w-money > input[type="number"]::-webkit-inner-spin-button,
.w-money > input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* Deshabilitados («Comisión» sin broker, recibo ya firmado): atenuados como .w-btn:disabled */
.w-input:disabled, .w-select:disabled, .w-textarea:disabled { opacity: 0.55; cursor: not-allowed; }
/* Casilla con su texto («Repartidor activo»): área de 44 px para el dedo (12 px arriba y abajo) que no ocupa lugar.
   La casilla mide 18 px y se dibuja como campo; marcada, en el color de acción con palomita (accent-color solo
   pintaba la marcada). El foco es el :focus-visible de base. */
.w-check { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; padding: 12px 0; margin: -12px 0; font-size: 14px; cursor: pointer; }
.w-check > input {
  flex: none; width: 18px; height: 18px; margin: 0; box-sizing: border-box; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  border: 1px solid var(--w-field); border-radius: 5px; background: var(--w-bg);
}
.w-check > input:checked {
  border-color: var(--w-action);
  background: var(--w-action) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 6.2l2.2 2.2 4.8-4.9' stroke='%230B1520' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}
@media (forced-colors: active) {
  .w-check > input { -webkit-appearance: auto; appearance: auto; } /* alto contraste: la casilla del sistema */
}
/* Campo con su botón al lado (beneficiario + «Guardar nombre»): el botón mide 44 px, como el campo, y baja de
   renglón si no cabe */
.w-input-row { display: flex; flex-wrap: wrap; gap: 10px; }
.w-input-row > .w-input { flex: 1 1 220px; width: auto; min-width: 0; }
.w-input-row > .w-btn { height: 44px; }
/* Campo suelto en un panel ancho (motivo del cambio de estado): no pasa de 440 px */
.w-field--limit { max-width: 440px; }
/* Fila que se repite (distribución entre brokers): broker, porcentaje y quitar; su error va en su propio renglón */
.w-field-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.w-field-row > .w-select { flex: 1 1 200px; width: auto; min-width: 0; }
.w-field-row > .w-money { flex: 0 1 128px; min-width: 96px; }
.w-field-row > .w-error { flex: 1 0 100%; }
/* Buscador con lista (cliente de «Nuevo recibo»): nombre y dato secundario; la opción activa en 600 */
.w-listbox__text { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; } /* un nombre sin espacios no se encima en la etiqueta */
.w-listbox__title { font-weight: 500; }
.w-listbox [aria-selected="true"] .w-listbox__title { font-weight: 600; }
.w-listbox__meta { font-size: 12px; line-height: 16px; color: var(--w-text-2); font-variant-numeric: tabular-nums; }
.w-listbox .w-tag { height: 22px; padding: 0 7px; }
.w-listbox .w-listbox__create { gap: 10px; }
.w-listbox__create > svg { flex: none; }
/* Fila de estado («Cargando clientes…»): no se elige, así que no se resalta al pasar el puntero */
.w-listbox [role="option"][aria-disabled="true"] { cursor: default; background: none; }

/* ---------- Fase 2: archivo ---------- */
/* <input type="file" class="w-sr-only"> seguido de <label class="w-file">, que hace de botón. El foco, el
   deshabilitado y el error se leen del input oculto. */
.w-file {
  display: flex; align-items: center; justify-content: center; gap: 10px; height: 52px; box-sizing: border-box;
  border-radius: var(--w-r-group); border: 1px dashed var(--w-field); background: var(--w-panel);
  color: var(--w-text); font-size: 15px; font-weight: 500; cursor: pointer;
}
.w-sr-only:focus-visible + .w-file { outline: 2px solid var(--w-link); outline-offset: 2px; }
.w-sr-only:disabled + .w-file { opacity: 0.55; cursor: not-allowed; }
.w-sr-only[aria-invalid="true"] + .w-file { border-color: var(--w-bad); } /* con error: el aria-invalid va en el input */
/* Al enfocarlo, el JS trae el botón a la vista (en la página o en un panel) y este margen deja ver su contorno de foco
   (2 px más 2 de separación) contra el borde de la ventana o, en un panel, sobre el pie */
.w-file { scroll-margin: 8px; }
/* Compacto, en la fila de una tabla (archivo de cada orden): medidas de .w-btn--sm */
.w-file--sm { display: inline-flex; height: 32px; padding: 0 12px; gap: 6px; border-radius: 7px; font-size: 13px; white-space: nowrap; }

/* ---------- Fase 2: tablas y paginación ---------- */
/* Ancho mínimo de la tabla (de la referencia): en pantallas angostas se desplaza dentro de .w-table-wrap */
.w-table--min-940 { min-width: 940px; }
.w-table--min-900 { min-width: 900px; }
/* Los .w-sr-only (absolute) de la tabla quedan dentro del desplazamiento; si no, en teléfono la página se ensanchaba */
.w-table-wrap { position: relative; }
/* Tabla que se desplaza sin nada enfocable dentro (tabindex="0" en .w-table-wrap): el contorno va por dentro, porque
   .w-panel--clip recorta lo que sale del panel */
.w-table-wrap:focus-visible { outline-offset: -2px; }
/* Montos (van con .w-num): peso 500 */
.w-table .w-num--amount { font-weight: 500; }
/* Acciones de fila: «Revisar» y «Ver» sin borde, como la referencia, y todas alineadas por su centro (con y sin texto) */
.w-table .w-actions > .w-btn--tint, .w-table .w-actions > .w-btn--ghost { border-width: 0; }
.w-table .w-actions > * { vertical-align: middle; }
/* Columna de nombre junto a muchas cifras: 128 px como mínimo, para no partir palabras normales («Distri-buido-ra») */
.w-table .w-th-name { min-width: 128px; }
/* Correo (<span class="w-email"> con <wbr> después de la @): se parte después de la @ y, solo si un tramo pasa de
   200 px, a media palabra. Así un correo larguísimo no empuja las acciones fuera del panel. */
.w-table .w-email { display: inline-block; max-width: 200px; overflow-wrap: break-word; }
/* Correo como enlace mailto (Brokers): en el texto secundario de su celda, como en Clientes y Repartidores; al pasar el
   puntero, color de enlace y subrayado. El foco es el :focus-visible de base. */
.w-table a.w-email { color: inherit; text-decoration: none; }
.w-table a.w-email:hover { color: var(--w-link-hover); text-decoration: underline; }
/* Encabezado que agrupa columnas (Reportes: Importe › Mes y General): centrado, con la línea en su <span> para que
   quede un hueco entre un grupo y el siguiente */
.w-table .w-th-group { text-align: center; padding-bottom: 0; }
.w-table .w-th-group > span { display: block; padding-bottom: 8px; border-bottom: 1px solid var(--w-line-soft); }
.w-table thead tr + tr th { padding-top: 8px; } /* el segundo renglón, pegado a su grupo */
.w-table th[rowspan] { vertical-align: bottom; } /* «Cliente» a la altura de «Mes» y «General» */
/* Fila de total (<tfoot>): línea completa arriba y texto en 600 */
.w-table tfoot td { border-top: 1px solid var(--w-line); font-weight: 600; }
/* Tabla bajo .w-panel__top: la primera y la última columna a 24 px, alineadas con el título; el segundo renglón de un
   encabezado agrupado no empieza ni termina la tabla y conserva los 16 px de sus cifras */
.w-table--inset th:first-child, .w-table--inset td:first-child { padding-left: 24px; }
.w-table--inset th:last-child, .w-table--inset td:last-child { padding-right: 24px; }
.w-table--inset thead tr + tr th:first-child { padding-left: 16px; }
.w-table--inset thead tr + tr th:last-child { padding-right: 16px; }
/* Pie bajo una tabla .w-table--inset: «Mostrando…» y la paginación también a 24 px */
.w-table-wrap:has(> .w-table--inset) + .w-table-footer { padding-left: 24px; padding-right: 24px; }
/* Paginación: «Anterior» y «Siguiente» con más aire y texto claro (atenuados si no aplican), salto «…» entre números,
   y baja de renglón si no cabe en el pie (4 páginas o más en teléfono) */
.w-pagination > .w-pagination__step { padding: 0 12px; color: var(--w-text); font-weight: 500; }
.w-pagination > .w-pagination__step:disabled { color: var(--w-text-3); font-weight: 400; }
.w-pagination__gap { display: inline-flex; align-items: center; padding: 0 4px; color: var(--w-text-3); }
.w-pagination { flex-wrap: wrap; }

/* ---------- Fase 2: estados y etiquetas ---------- */
/* Nombre con etiqueta al lado (cliente «Sin cuenta») */
.w-with-tag { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Etiqueta dentro de una celda: borde acero, más tenue que el de campo */
.w-tag--quiet { border-color: var(--w-steel); }
/* «Nuevo» en la tarjeta de un recibo recién asignado (va con .w-card--new) */
.w-tag--new { border-color: var(--w-action); background: var(--w-action-tint); color: var(--w-action-tint-text); }
/* Estado en una celda o dato (.w-state): el «Sin verificar» de WUI.badge (.w-tag) mide como un .w-badge */
.w-state > .w-tag { height: 24px; padding: 0 8px; border-radius: var(--w-r-badge); font-weight: 400; }

/* ---------- Fase 2: paneles ---------- */
/* Título sencillo de un panel .w-panel--clip («Pendiente de atención») y enlace discreto en un encabezado («Ver recibos») */
.w-panel__title { margin: 0; padding: 18px 24px 14px; font-size: 15px; line-height: 20px; font-weight: 600; }
.w-panel__link { font-size: 13px; font-weight: 500; text-decoration: none; }
/* Paneles lado a lado mientras quepan a 440 px; si no, uno debajo de otro */
.w-panel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); gap: 24px; }
/* Panel .w-panel--clip con una tabla debajo: arriba, el relleno de .w-panel--pad. Sus 10 px de abajo más los 12 del
   encabezado de la tabla dan los 22 px que separan los bloques. */
.w-panel__top { padding: 20px 24px 10px; display: flex; flex-direction: column; gap: 22px; }

/* ---------- Fase 2: panel lateral ---------- */
/* Subtítulo a 6 px del título y botones del pie de 44 px, como la referencia */
.w-drawer__head .w-subtitle { margin: 0; }
.w-drawer__foot .w-btn { height: 44px; }
.w-drawer__foot .w-btn--primary { padding: 0 18px; }
/* Renglón del título y la X: .w-panel__head baja de renglón (wrap) y aquí no, como la referencia. Un título que no cabe
   se parte en su lugar y la X no se encoge ni baja a la izquierda. */
.w-drawer__head > .w-panel__head { flex-wrap: nowrap; }
.w-drawer__title { min-width: 0; overflow-wrap: anywhere; }
.w-drawer__head .w-icon-btn { flex: none; }
/* El cuerpo se desplaza y sus bloques no se encogen (un .w-tiles, con overflow:hidden, quedaba como una línea) */
.w-drawer__body > * { flex-shrink: 0; }
/* Panel abierto sobre otro («Registrar pago» desde el detalle): su capa no oscurece la página por segunda vez */
dialog.w-drawer[open] ~ dialog.w-drawer::backdrop { background: transparent; }

/* ---------- Fase 2: documentos y visor ---------- */
/* Visor: la imagen (INE, comprobantes) se amplía en un panel lateral */
.w-media { display: block; max-width: 100%; height: auto; border-radius: var(--w-r-control); }
/* Documentos: tarjetas con vista previa del mismo tamaño (imagen, PDF o ZIP), tipo y nombre del archivo */
.w-docs { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 20px 16px; }
.w-doc { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.w-doc--sm { max-width: 260px; } /* la INE en el panel Beneficiario */
.w-doc__preview {
  box-sizing: border-box; width: 100%; aspect-ratio: 16 / 10; margin: 0 0 4px; padding: 0; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border-radius: var(--w-r-group); border: 1px solid var(--w-line); background: var(--w-inset);
  color: var(--w-text-2); font-family: inherit; font-size: 12px; line-height: 16px; font-weight: 500;
}
.w-doc__preview > img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Imagen con transparencia (una firma o un escaneo en PNG): fondo de papel, para que el trazo oscuro no desaparezca
   sobre el fondo oscuro. En una foto no se ve: la imagen cubre todo su recuadro. */
.w-doc__preview > img, .w-media { background: var(--w-paper); }
button.w-doc__preview { cursor: zoom-in; }
button.w-doc__preview:hover { border-color: var(--w-steel); }
.w-doc__kind { font-size: 13px; font-weight: 500; }
.w-doc__name { font-size: 12px; line-height: 16px; text-decoration: none; overflow-wrap: anywhere; } /* sin subrayado, como la referencia; nombres sin espacios */
.w-doc > .w-cluster { margin-top: 4px; } /* «Descargar ZIP» */

/* ---------- Fase 2: avisos y mensajes ---------- */
/* Aviso .w-banner («Activa las notificaciones»): ícono, texto y botón de 44 px */
.w-banner > svg { flex: none; color: var(--w-link); }
.w-banner__text { margin: 0; flex: 1 1 auto; font-size: 13px; line-height: 18px; color: var(--w-text-soft); }
.w-banner__action {
  flex: none; height: 44px; padding: 0 14px; border-radius: var(--w-r-group); border: 0;
  background: rgba(201, 165, 76, 0.20); color: var(--w-action-tint-text);
  font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.w-banner__action:disabled { opacity: 0.55; cursor: not-allowed; }
/* Mensaje de resultado (ícono + texto): verde si salió bien, rojo si falló; vacío no ocupa lugar */
.w-status { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 14px; line-height: 20px; }
.w-status:empty { display: none; }
.w-status > svg { flex: none; margin-top: 2px; }
.w-status--ok { color: var(--w-ok); }
.w-status--bad { color: var(--w-bad); }
/* Avisos dentro de un panel (toast.js pone el contenedor en el último <dialog> abierto): abajo, a 12 px sobre el pie,
   para no tapar la X. El pie es su ancla y cada panel la busca solo dentro de sí. Panel sin pie: a 24 px del fondo;
   navegador sin anclaje CSS: a 120 px. */
.w-drawer__foot { anchor-name: --w-pie-panel; }
dialog.w-drawer { anchor-scope: --w-pie-panel; }
dialog.w-drawer .toast-container { top: auto; bottom: 120px; bottom: calc(anchor(--w-pie-panel top, 12px) + 12px); }
/* Aviso de toast.js: el texto (con role=alert; una palabra sin espacios se parte) y su botón «Cerrar» (.w-icon-btn de
   28 px, sin borde hasta pasar el puntero), arriba a la derecha. Sus márgenes negativos lo meten en el renglón de 20 px:
   el aviso mide de alto lo mismo que sin botón. */
.w-ui .toast { display: flex; align-items: flex-start; gap: 8px; }
.w-toast__text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.w-ui .toast .w-toast__close { flex: none; width: 28px; height: 28px; margin: -4px -6px -4px 0; border-color: transparent; }
.w-ui .toast .w-toast__close:hover { border-color: var(--w-line); color: var(--w-text); }

/* ---------- Fase 2: cifras y gráficas ---------- */
/* Celda de .w-split («Pendiente de atención»): etiqueta con ícono, cifra, nota y botón */
.w-split__label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--w-text-2); }
.w-split__label > svg { flex: none; color: var(--w-pending); }
.w-split__label--quiet > svg { color: var(--w-text-3); } /* conteo en 0: el ícono no pide acción */
.w-split__value { font-size: 30px; line-height: 36px; font-weight: 600; }
.w-split__note { margin: 0; font-size: 13px; color: var(--w-text-2); }
.w-split > * > .w-btn { align-self: flex-start; }
/* Fila de cifras: la principal (.w-stat--hero) ocupa el doble y no se encoge (si no cabe junto a las otras, ellas
   bajan de renglón); las demás se alinean abajo */
.w-stat-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 24px 40px; }
.w-stat-row > .w-stat { flex: 1 1 160px; min-width: 0; }
.w-stat-row > .w-stat--hero { flex: 2 1 300px; gap: 6px; min-width: auto; }
.w-stat--hero > .w-stat__note { font-size: 13px; line-height: inherit; color: var(--w-text-2); }
/* El JS las pone si la cifra a 52 px no cabe ni sola en su renglón: primero 36 px y, si aún no cabe, se parte */
.w-hero--fit { font-size: 36px; line-height: 42px; }
.w-hero--wrap { overflow-wrap: anywhere; }
/* Montos de miles de millones: se parten dentro de su celda en vez de encimarse con la de al lado */
.w-stat-row .w-stat__value, .w-stat-grid .w-stat__value, .w-tiles__value { overflow-wrap: anywhere; }
/* El JS la pone si una cifra de 24 px no cabe en su renglón (miles de millones con los paneles lado a lado): baja a
   18 px; si aún no cabe, se parte (regla de arriba, último recurso) */
.w-stat__value--fit { font-size: 18px; line-height: 24px; }
/* Barra o medidor con su encabezado y su pie */
.w-chart { display: flex; flex-direction: column; gap: 10px; }
.w-chart__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px; }
.w-chart__value { font-size: 15px; font-weight: 600; }
.w-chart__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 12px; line-height: 16px; color: var(--w-text-3); }
.w-chart__foot > :last-child { margin-left: auto; } /* la meta queda a la derecha aunque no haya texto a la izquierda */
/* Color de un segmento de .w-bar o de la muestra de .w-legend; .w-bar sin importe: pista neutra */
.w-fill--ok { background: var(--w-ok); }
.w-fill--pending { background: var(--w-pending); }
.w-fill--bad { background: var(--w-bad); }
.w-fill--quiet { background: var(--w-text-3); }
.w-bar--empty { background: var(--w-line); }
/* Mosaico de cifras chicas separadas por línea de 1 px (firmados hoy, 7 días, mes); en teléfono, una columna */
.w-tiles {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  background: var(--w-line); border: 1px solid var(--w-line); border-radius: var(--w-r-group); overflow: hidden;
}
.w-tiles > * { background: var(--w-inset); padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; }
.w-tiles__label { font-size: 12px; line-height: 16px; color: var(--w-text-3); }
.w-tiles__value { font-size: 15px; font-weight: 600; }
.w-tiles__sub { font-weight: 400; color: var(--w-text-2); }
@media (max-width: 480px) {
  .w-tiles { grid-template-columns: minmax(0, 1fr); } /* en tres columnas de ~73 px se cortaban montos de seis cifras */
}
/* Ficha de datos: <dl class="w-stat-grid w-facts"> con .w-stat > dt.w-stat__label + dd.w-fact; en renglones
   (etiqueta a la izquierda, valor a la derecha) con .w-facts--rows */
.w-facts { margin: 0; }
.w-fact { margin: 0; font-weight: 500; overflow-wrap: anywhere; } /* un correo o nombre sin espacios se parte */
.w-fact--prose { max-width: 72ch; } /* texto largo (motivo del rechazo): medida de lectura aunque el panel sea ancho */
.w-facts--rows { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
.w-facts--rows > .w-fact { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Fase 2: tarjetas ---------- */
/* Lista de tarjetas .w-card (recibos del repartidor, órdenes del portal, comisiones de un broker); dentro de un
   panel, sin margen propio */
.w-card-list { display: flex; flex-direction: column; gap: 12px; padding: 14px 20px 24px; }
.w-drawer .w-card-list { padding: 0; }
.w-card--new { border-color: var(--w-action); } /* recién asignado (2 min), con .w-tag--new; sin brillo ni animación */
/* Encabezado: nombre y datos a la izquierda, monto a la derecha. Si el monto no cabe junto a 7rem de nombre (9 o más
   dígitos en un teléfono angosto), baja de renglón en vez de dejar el nombre en trozos de pocas letras */
.w-card__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; }
.w-card__who { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 7rem; }
.w-card__name { font-size: 18px; line-height: 24px; font-weight: 600; overflow-wrap: anywhere; }
.w-card__meta { font-size: 13px; line-height: 18px; color: var(--w-text-2); }
.w-card__amount { font-size: 22px; line-height: 28px; font-weight: 600; white-space: nowrap; }
/* Acciones de 48 px; la última ocupa el resto de la fila («Firmar recibo») */
.w-card__actions { display: flex; gap: 10px; }
.w-card__actions > .w-btn { flex: none; height: 48px; padding: 0 14px; border-radius: var(--w-r-group); font-size: 14px; }
.w-card__actions > .w-btn--primary { font-size: 15px; }
.w-card__actions > :last-child { flex: 1 1 auto; }
/* Pie: enlace a la izquierda («Ver comprobante») y acción a la derecha («Registrar pago») */
.w-card__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }

/* ---------- Fase 2: recibo y firma ---------- */
/* Vista previa «Así lo verá el cliente» (panel «Nuevo recibo») y partes del recibo: isotipo, notas («Folio al
   guardar», «Total»), «Por elegir», monto con moneda y línea de firma */
.w-preview { display: flex; flex-direction: column; gap: 10px; }
.w-receipt__brand { display: inline-flex; align-items: center; gap: 10px; }
.w-receipt__brand img { width: 22px; height: auto; display: block; }
.w-receipt__note { font-size: 12px; color: var(--w-ink-2); }
.w-receipt__empty { color: var(--w-ink-2); font-style: italic; }
.w-receipt__amount { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* Total largo (la base admite hasta 9,999,999,999.99): primero baja «MXN» y la cifra solo se parte si no cabe sola,
   en vez de salirse del papel */
.w-receipt__total { overflow-wrap: anywhere; }
.w-receipt__currency { font-size: 15px; font-weight: 500; }
.w-receipt__sign { display: flex; flex-direction: column; gap: 6px; padding-top: 18px; }
.w-receipt__line { height: 1px; background: var(--w-ink); opacity: 0.55; }
/* Recibo compacto (vista previa del panel): medidas de referencia/nuevo-recibo.html */
.w-receipt--compact .w-receipt__paper { border-radius: 7px; }
.w-receipt--compact .w-receipt__rows { grid-template-columns: 96px minmax(0, 1fr); font-size: 13px; }
.w-receipt--compact .w-receipt__total { font-size: 30px; line-height: 36px; }
.w-receipt--compact .w-receipt__currency { font-size: 14px; }
.w-receipt--compact .w-receipt__words { font-size: 12px; }
/* Recibo completo (el que se firma): radio 14, isotipo de 24, total con línea arriba y el cliente en 600 */
.w-receipt--full { border-radius: var(--w-r-panel); }
.w-receipt--full .w-receipt__brand img { width: 24px; }
.w-receipt--full .w-receipt__amount { border-top: 1px solid rgba(46, 78, 115, 0.22); padding-top: 12px; }
.w-receipt__strong { font-weight: 600; }
/* Cliente y teléfono son texto libre: sin espacios se parten en vez de salirse del papel */
.w-receipt--compact .w-receipt__rows dd, .w-receipt--full .w-receipt__rows dd { overflow-wrap: anywhere; }
/* Firma: título, declaración, recuadro (.w-signature) y «Borrar firma» a la derecha */
.w-sign { display: flex; flex-direction: column; gap: 10px; }
.w-statement { margin: 0; font-size: 14px; line-height: 20px; color: var(--w-text-soft); }
.w-signature__mark { position: absolute; left: 18px; bottom: 60px; font-size: 18px; line-height: 20px; color: var(--w-ink-2); pointer-events: none; }
.w-signature canvas { cursor: crosshair; touch-action: none; }
.w-signature--locked canvas { cursor: default; opacity: 0.9; } /* bloqueado (cargando, firmado o cancelado); firmado, muestra la firma guardada */
.w-signature--locked .w-signature__hint { display: none; }
/* Confirmar: arriba el mensaje, abajo la nota centrada */
.w-submit { display: flex; flex-direction: column; gap: 10px; }
.w-submit > .w-help { text-align: center; }

/* ---------- Fase 2: acceso ---------- */
/* Inicio de sesión y registro (referencia/login.html): panel de marca con .w-security-bg y formulario. Sin media
   queries, como la referencia: debajo de 920 px (520 + 400) el panel de marca se apila arriba. */
.w-auth { min-height: 100vh; display: flex; flex-wrap: wrap; }
.w-auth__brand {
  flex: 1 1 520px; min-height: 380px; box-sizing: border-box; position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; gap: 48px;
  padding: 48px 56px; border-right: 1px solid var(--w-line);
}
.w-auth__logo { position: relative; height: 28px; width: auto; align-self: flex-start; display: block; }
.w-auth__mark { position: absolute; right: -60px; bottom: -40px; width: 460px; height: auto; opacity: 0.07; display: block; } /* isotipo de fondo, decorativo */
.w-auth__tagline {
  position: relative; margin: 0; max-width: 440px;
  font-family: var(--w-font-narrow); font-weight: 600; font-size: 36px; line-height: 42px; text-wrap: pretty;
}
.w-auth__main { flex: 1 1 400px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; padding: 48px 32px; }
.w-auth__box { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 28px; }
.w-auth__head { display: flex; flex-direction: column; gap: 6px; }
.w-auth__title { margin: 0; font-family: var(--w-font-narrow); font-weight: 600; font-size: 34px; line-height: 40px; }
.w-auth__lead { margin: 0; font-size: 14px; color: var(--w-text-2); }
.w-auth__form { display: flex; flex-direction: column; gap: 18px; }
.w-auth__form .w-input { height: 46px; padding: 0 14px; border-radius: 9px; background: var(--w-panel); } /* campos de la referencia: 46 px, radio 9 */
.w-auth__submit { margin-top: 6px; border-radius: 9px; line-height: 20px; } /* va con .w-btn--primary.w-btn--lg.w-btn--block */
.w-auth__foot { margin: 0; padding-top: 20px; border-top: 1px solid var(--w-line); font-size: 14px; color: var(--w-text-2); }
.w-auth__foot a { font-weight: 500; }
/* Contraseña con «Mostrar» dentro del campo (auth.js alterna el type y el texto). Va después de .w-auth__form .w-input:
   con la misma especificidad, su padding-right tiene que ganar. */
.w-password { position: relative; }
.w-password > .w-input { padding-right: 84px; }
.w-password__toggle {
  position: absolute; right: 4px; top: 4px; bottom: 4px; padding: 0 12px; /* 38 px de alto en el campo de 46 */
  border: 0; border-radius: 7px; background: transparent; color: var(--w-link-hover);
  font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
}

/* ---------- Fase 2: app del repartidor ---------- */
/* Columna de teléfono: 390 px como la referencia, centrada en pantallas anchas; cuerpo 15/21 */
.w-phone { box-sizing: border-box; width: 100%; max-width: 390px; margin: 0 auto; font-size: 15px; line-height: 21px; }
/* Barra de «Mis recibos» (también la del portal): isotipo y título; a la derecha, botón de cuenta (cierra sesión) */
.w-appbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 20px 14px; }
.w-appbar__brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.w-appbar__brand > img { width: 28px; height: auto; display: block; }
.w-appbar__title { margin: 0; font-family: var(--w-font-narrow); font-weight: 600; font-size: 26px; line-height: 32px; }
.w-account-btn {
  flex: none; width: 44px; height: 44px; padding: 0; box-sizing: border-box;
  border-radius: 12px; border: 1px solid var(--w-line); background: var(--w-panel); color: var(--w-text-2);
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
/* Aviso y pestañas con el margen del teléfono */
.w-phone .w-banner { margin: 0 20px; }
.w-phone .w-segmented--full { margin: 16px 20px 0; }
.w-phone .w-banner[hidden] + .w-segmented--full { margin-top: 0; } /* sin aviso: 14 px bajo la barra, como el aviso */
/* Barra de la firma: volver a «Mis recibos»; a la derecha, número de recibo y cuenta */
.w-topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px 0 8px; }
.w-topbar__end { display: flex; align-items: center; gap: 12px; min-width: 0; }
.w-topbar__note { font-size: 13px; color: var(--w-text-2); white-space: nowrap; }
.w-back {
  display: inline-flex; align-items: center; gap: 4px; height: 44px; padding: 0 12px 0 8px; box-sizing: border-box;
  border-radius: var(--w-r-group); color: var(--w-link-hover); font-size: 15px; font-weight: 500; text-decoration: none;
}
/* Contenido de la firma: bloques a 22 px; encabezado con título y subtítulo */
.w-phone__body { display: flex; flex-direction: column; gap: 22px; padding: 6px 20px 28px; }
.w-heading { display: flex; flex-direction: column; gap: 6px; }
.w-heading__title { margin: 0; font-family: var(--w-font-narrow); font-weight: 600; font-size: 28px; line-height: 34px; }
.w-heading__sub { margin: 0; font-size: 14px; line-height: 20px; color: var(--w-text-2); }
/* Campos del teléfono (.w-input--lg): 14 px de margen interno */
.w-phone .w-input--lg { padding: 0 14px; }

/* ---------- Fase 2: portal del cliente ---------- */
/* Sin menú lateral: barra y contenido con el máximo de .w-container (--w-content, hoy 100%) y los márgenes de .w-main
   (40 px; 16 en teléfono). content-box: el máximo es del contenido y el relleno va aparte. */
.w-portal { box-sizing: content-box; max-width: var(--w-content); margin: 0 auto; padding: 0 40px 56px; }
/* La barra, sin margen lateral propio y a 32 px del título, como el margen de arriba de .w-main */
.w-portal > .w-appbar { padding: 18px 0 32px; }
@media (max-width: 640px) {
  .w-portal { padding: 0 16px 40px; }
  .w-portal > .w-appbar { padding-bottom: 24px; }
}