/* ═══════════════════════════════════════════
       DASHBOARD VIEW
    ═══════════════════════════════════════════ */
    /* El saludo hace de cabecera de la vista: mismo patrón que
       .page-header —antetítulo, titular condensado grande, acciones a
       la derecha— sobre el papel. No se convierte en un segundo campo
       acero: el sistema admite un único bloque macizo por pantalla, y
       ese es la navegación. */
    .welcome-banner {
      background: transparent;
      border: 0;
      border-bottom: 1px solid var(--color-rule-strong);
      padding: 0 0 18px;
      margin-bottom: 22px;
      display: flex; align-items: flex-end; gap: 16px;
    }
    /* Igual que en las tarjetas KPI: la cabecera del wireframe no
       lleva icono junto al titular. */
    .welcome-banner .icon { display: none; }
    .welcome-banner h2 {
      font-family: var(--font-heading);
      font-size: 38px; font-weight: 600; line-height: .95;
      color: var(--color-text-strong);
    }
    /* La glosa sube a antetítulo, sobre el titular. */
    .welcome-banner > div:not(.icon) { display: flex; flex-direction: column-reverse; }
    .welcome-banner p  {
      font-family: var(--font-heading);
      font-size: 10px; font-weight: 500;
      letter-spacing: var(--track-kicker); text-transform: uppercase;
      color: var(--text3); margin: 0 0 4px;
    }

    .dash-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }
    @media (max-width: 900px) { .dash-grid { grid-template-columns: 1fr; } }

    /* ── El área de trabajo llena el alto disponible ──
       En los artboards 6b y 6d los paneles llegan al borde inferior de la
       pantalla; el contenido no flota arriba dejando papel muerto debajo.
       Se aplica sólo a las dos vistas que el wireframe define así.

       min-height y no height: si el contenido crece por encima del
       viewport sigue desplazándose con normalidad. Los min-height:0 son
       los que permiten que las tablas interiores scrolleen en vez de
       desbordar el panel. */
    #view-dashboard.active,
    #view-admin.active {
      display: flex;
      flex-direction: column;
      min-height: 100%;
    }
    #view-dashboard .dash-grid,
    #view-admin .admin-grid {
      flex: 1;
      min-height: 0;
    }
    #view-dashboard .dash-grid > .card,
    #view-admin .admin-grid > .card {
      min-height: 0;
    }
    /* Las tablas dejan de tener un techo fijo: se estiran con el panel. */
    #view-admin .admin-grid .table-wrap { max-height: none; }

    /* Nueve columnas no caben en el ~65 % de ancho que deja la columna de
       filtros: sin un mínimo, «Cliente» se partía en tres líneas y la fila
       subía a 83 px. Con el mínimo, las columnas respiran y si el panel es
       más estrecho aparece el scroll horizontal —que es el patrón que este
       proyecto ya usa aquí, con la columna de acciones anclada a la
       derecha (ver el bloque correspondiente en components.css). */
    #view-admin .table-wrap table { min-width: 880px; }

    .activity-item {
      display: flex; align-items: flex-start; gap: 12px;
      padding: 12px 0;
      border-bottom: 1px solid var(--border);
    }
    .activity-item:last-child { border-bottom: none; }
    .activity-dot {
      width: 7px; height: 7px; border-radius: 0; margin-top: 6px; flex-shrink: 0;
    }
    .activity-item p  { font-size: 13px; }
    .activity-item small { font-size: 11px; color: var(--text3); }

    /* ═══════════════════════════════════════════
       VALIDADOR VIEW
    ═══════════════════════════════════════════ */
    .validator-input-area {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 20px;
      margin-bottom: 20px;
      display: flex;
      align-items: flex-end;
      gap: 12px;
      flex-wrap: wrap;
    }
    .validator-input-area .group { flex: 1; min-width: 200px; }

    .result-panel {
      display: none;
    }
    .result-panel.show { display: grid; gap: 16px; }

    .result-main {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
    }
    .result-topbar {
      padding: 14px 18px;
      border-bottom: 1px solid var(--border);
      display: flex; align-items: center; justify-content: space-between; gap: 12px;
    }
    /* La patente es la figura de la pantalla de resultado. */
    .result-topbar .plate {
      font-family: var(--font-heading);
      font-size: 46px; font-weight: 600;
      line-height: .9; letter-spacing: .04em;
    }

    .result-kv {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 12px;
      padding: 16px;
    }
    .kv-box {
      background: var(--color-bg);
      border: none;
      border-radius: var(--radius-sm);
      box-shadow: var(--relieve-hundido);
      padding: 12px 14px;
    }
    .kv-box .k {
      font-family: var(--font-heading);
      font-size: 9.5px; font-weight: 500;
      letter-spacing: var(--track-label); text-transform: uppercase;
      color: var(--text3); margin-bottom: 5px;
    }
    .kv-box .v { font-family: var(--font-mono); font-size: 12.5px; font-weight: 400; }

    /* ═══════════════════════════════════════════
       ADMIN VIEW
    ═══════════════════════════════════════════ */
    .admin-grid {
      display: grid;
      grid-template-columns: 1.3fr .7fr;
      gap: 18px;
    }
/* ═══════════════════════════════════════════════════════════════
   css/views.css — ANEXO: estilos del validador admin
   Agregar al final del views.css existente en el repo
   ═══════════════════════════════════════════════════════════════ */

/* ── Tabs del validador ──────────────────────────────────────── */
.val-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  margin: 16px 0 0;
  padding: 0;
}

.val-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--text2);
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  user-select: none;
}
.val-tab:hover { color: var(--text); }
.val-tab.active {
  color: var(--sky);
  border-bottom-color: var(--sky);
}

.val-tab-count {
  background: var(--sky-dim);
  color: var(--sky);
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  line-height: 1.6;
}

.val-tab-panel { margin-top: 16px; }

/* ── Panel recibidos ─────────────────────────────────────────── */
#val-panel-recibidos .val-resp-ok   { color: var(--green); font-size: 11px; font-weight: 600; }
#val-panel-recibidos .val-resp-fail { color: var(--red);   font-size: 11px; font-weight: 600; }
#val-panel-recibidos .val-resp-text {
  font-size: 11px;
  color: var(--text2);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Topbar del resultado ────────────────────────────────────── */
.result-topbar .btn {
  padding: 6px 12px;
  font-size: 12px;
  font-family: var(--font);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border2);
  background: var(--color-surface-glass-strong);
  color: var(--text);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
  white-space: nowrap;
}
.result-topbar .btn:hover {
  background: var(--color-surface-hover);
  border-color: var(--border3);
}
.result-topbar .btn.primary {
  background: var(--sky-dim);
  border-color: rgb(var(--p-brand-rgb) / .3);
  color: var(--sky);
}
.result-topbar .btn.primary:hover { background: rgb(var(--p-brand-rgb) / .18); }

/* ── Badges de estado en resultado ──────────────────────────── */
.badge.sky {
  background: var(--sky-dim);
  color: var(--sky);
  border: 1px solid rgb(var(--p-brand-rgb) / .25);
}
    @media (max-width: 1100px) { .admin-grid { grid-template-columns: 1fr; } }



/* ═══════════════════════════════════════════
   Vista: Gestión de Clientes (.gc-*)
   Estaba dentro de un template literal en js/gestion_clientes.js,
   reinyectado en cada render. Movido aquí sin cambios de aspecto.
   ═══════════════════════════════════════════ */
.gc-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.gc-client-card {
  background: var(--color-bg);
  border: none;
  border-radius: var(--radius-card);
  box-shadow: var(--relieve);
  padding: 18px;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  position: relative;
  overflow: hidden;
}
/* Filete de acento macizo al pasar por encima, en vez de degradado. */
.gc-client-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--color-brand-fill);
  opacity: 0; transition: opacity var(--transition);
}
.gc-client-card:hover { border-color: var(--border2); background: var(--color-surface-hover); transform: none; }
.gc-client-card:hover::before { opacity: 1; }
.gc-client-card.inactive { opacity: .55; }
.gc-card-avatar {
  width: 36px; height: 36px; border-radius: var(--radius-sm); flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--color-border-strong);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading);
  font-size: 13px; font-weight: 600; color: var(--text); text-transform: uppercase;
}
.gc-card-actions { display: flex; gap: 4px; opacity: 0; transition: opacity .15s; }
.gc-client-card:hover .gc-card-actions { opacity: 1; }

/* Modal */
#gc-detail-modal {
  position: fixed; inset: 0; z-index: 90;
  background: var(--color-scrim); backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center; padding: 16px;
}
#gc-detail-modal.show { display: flex; }
.gc-modal-shell {
  width: min(900px, 100%); max-height: 90vh;
  background: var(--color-bg); border: none;
  border-radius: var(--radius-card); box-shadow: var(--relieve), var(--shadow-xl);
  display: flex; flex-direction: column; overflow: hidden;
  animation: fadeIn .2s ease;
}
.gc-modal-header {
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
}
.gc-modal-avatar {
  width: 38px; height: 38px; border-radius: var(--radius-sm); flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--color-border-strong);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading);
  font-size: 14px; font-weight: 600; color: var(--text);
}
.gc-modal-toolbar {
  padding: 10px 20px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px; flex-shrink: 0; flex-wrap: wrap;
}
/* Acceso al portal (contraseña del cliente) */
.gc-modal-acceso {
  padding: 10px 20px; border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 10px; flex-shrink: 0;
}
.gc-acceso-fila { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.gc-acceso-titulo {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--text);
}
.gc-acceso-estado {
  flex: 1; min-width: 200px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 12px; color: var(--text2);
}
.gc-acceso-estado .badge:not(.sky):not(.amber) { border-color: var(--border); color: var(--text3); }
.gc-acceso-estado code { font-family: var(--font-mono); color: var(--text); }
.gc-acceso-form { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gc-acceso-entrega {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--sky-dim); border: 1px solid rgb(var(--p-brand-rgb) / .25);
}
.gc-acceso-entrega code { font-family: var(--font-mono); color: var(--text); }

/* ── Facturación ── */
.fac-tabs { display: flex; gap: 2px; margin-bottom: 20px; border-bottom: 1px solid var(--border); }
.fac-toolbar { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.fac-toolbar > div { display: flex; flex-direction: column; }
.fac-aviso {
  margin-bottom: 14px; padding: 10px 14px; border-radius: var(--radius-sm);
  font-size: 12.5px; color: var(--text2); background: var(--color-surface-glass-strong);
}
.fac-aviso.fuerte { background: var(--color-warning-dim); color: var(--text); }
#view-facturacion th.num, #view-facturacion td.num { text-align: right; }
#view-facturacion td.mono { font-family: var(--font-mono); font-size: 12px; }
.fac-fila { cursor: pointer; }
.fac-fila.abierta td { background: var(--color-surface-glass-strong); }
.fac-flecha { display: inline-block; width: 12px; color: var(--text3); }
.fac-detalle > td { padding: 0 0 12px 28px !important; background: var(--color-surface-glass); }
.fac-subtabla thead th { background: transparent; }
.fac-sub { font-size: 11px; color: var(--text3); }

.gc-chart-vacio { padding: 20px 8px; text-align: center; font-size: 12px; color: var(--text3); line-height: 1.5; }

/* Destinos que puede integrar el cliente */
#gc-modal-permitidos .gc-acceso-estado .badge { font-size: 10px; }
.gc-permitidos-lista {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px;
  max-height: 180px; overflow-y: auto; padding: 2px;
}
.gc-permitido {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 7px 10px; border-radius: var(--radius-sm); font-size: 12px;
  background: var(--color-bg); box-shadow: var(--relieve-sm);
}
.gc-permitido em { color: var(--text3); font-style: normal; }

/* Solicitudes de integración del cliente */
.gc-modal-solicitudes {
  padding: 10px 20px; border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 10px; flex-shrink: 0;
  background: var(--color-warning-dim);
}
.gc-solicitudes-lista { display: flex; flex-direction: column; gap: 6px; }
.gc-solicitud {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 12px; border-radius: var(--radius-sm);
  background: var(--color-bg); box-shadow: var(--relieve-sm); font-size: 12px;
}
.gc-dest-chip.gc-dest-pendiente {
  background: var(--color-warning-dim); color: var(--color-warning);
  border-color: rgb(var(--p-amber-rgb) / .35); border-style: dashed;
}

/* Modal de alta / edición de cliente */
.modal.gc-form-shell { width: min(460px, 100%); }
.gc-form-shell .modal-header h3 { margin: 0; }
.gc-form-shell .modal-body { gap: 16px; }
.gc-f-ayuda { font-size: 11px; color: var(--text3); margin-top: 5px; }
.gc-f-seccion {
  padding: 12px 14px; border-radius: var(--radius-sm);
  border: 1px dashed var(--color-border-strong);
}

.gc-modal-search { position: relative; flex: 1; min-width: 180px; }
.gc-modal-search svg {
  position: absolute; left: 10px; top: 50%;
  transform: translateY(-50%); color: var(--text3); pointer-events: none;
}
.gc-modal-search input {
  width: 100%; padding: 8px 10px 8px 32px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text);
  font-size: 13px; font-family: inherit; outline: none;
  transition: border-color var(--transition);
}
.gc-modal-search input:focus { border-color: rgb(var(--p-brand-rgb) / .35); }
.gc-modal-body { flex: 1; overflow-y: auto; min-height: 0; }
.gc-modal-footer {
  padding: 10px 20px; border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.gc-units-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.gc-units-table thead th {
  padding: 9px 16px; font-size: 10px; font-weight: 600;
  letter-spacing: .5px; text-transform: uppercase; color: var(--text3);
  background: var(--surface2); border-bottom: 1px solid var(--border);
  text-align: left; position: sticky; top: 0; z-index: 1;
}
.gc-units-table tbody tr { border-bottom: 1px solid var(--border); transition: background .1s; }
.gc-units-table tbody tr:hover { background: var(--color-surface-glass); }
.gc-units-table tbody td { padding: 10px 16px; vertical-align: middle; }
.gc-dest-chip {
  display: inline-flex; align-items: center; padding: 2px 7px;
  border-radius: var(--radius-xs); font-size: 10px; font-weight: 500; border: 1px solid;
}

/* Dropdown de peligro */
.gc-more-btn {
  position: relative;
}
.gc-more-dropdown {
  position: absolute; top: calc(100% + 6px); right: 0;
  background: var(--color-bg); border: none;
  border-radius: var(--radius); box-shadow: var(--relieve), var(--shadow-lg);
  min-width: 220px; z-index: 100;
  overflow: hidden;
  display: none;
  animation: fadeIn .15s ease;
}
.gc-more-dropdown.open { display: block; }
.gc-more-dropdown-header {
  padding: 8px 12px 6px;
  font-size: 10px; font-weight: 600; letter-spacing: .5px;
  text-transform: uppercase; color: var(--text3);
  border-bottom: 1px solid var(--border);
}
.gc-more-dropdown-item {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; cursor: pointer;
  font-size: 12px; color: var(--color-danger);
  transition: background .1s;
  border: none; background: none; width: 100%; text-align: left;
}
.gc-more-dropdown-item:hover { background: rgb(var(--p-red-rgb) / .08); }
.gc-more-dropdown-item svg { flex-shrink: 0; }