/* ============================================================================
   views.css — Layouts específicos de vista (login, búsqueda, resultados)
   Cada bloque es autocontenido para facilitar su modularización en HubSpot.
   ========================================================================== */

/* ============================================================ LOGIN (#module:login) */
.login {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* mobile: una columna (evita blowout) */
}
.login__panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-6);
  padding: var(--space-6);
}
.login__brand { display: flex; align-items: center; gap: var(--space-3); }
.login__brand .brand__mark { width: 40px; height: 40px; }
.login__brand-name {
  font-family: var(--font-head);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-title);
  color: var(--text-primary);
}
.login__card {
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
}
.login__title { margin-bottom: var(--space-2); }
.login__sub { color: var(--text-secondary); margin-bottom: var(--space-6); }
.login__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.login__link {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: none;
  padding: var(--space-2) 0;
  font: inherit;
  color: var(--brand-primary);
  font-weight: var(--fw-medium);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* target táctil */
}
.login__link:hover { text-decoration: underline; }
.login__divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-tertiary);
  font-size: var(--fs-caption);
}
.login__divider::before,
.login__divider::after { content: ""; flex: 1; height: 1px; background: var(--border-subtle); }

/* Panel hero (gradiente ASTRO, marca blanca — sin imágenes de banco) */
.login__hero {
  display: none;                        /* oculto en mobile */
  position: relative;
  overflow: hidden;
  background: var(--grad-header);
  color: var(--text-inverse);
  padding: var(--space-14);
  align-items: flex-end;
}
.login__hero-content { position: relative; z-index: 1; }
.login__hero-title {
  font-family: var(--font-head);
  font-weight: var(--fw-semibold);
  font-size: 2rem;
  color: var(--text-inverse);
  margin-bottom: var(--space-2);
}
.login__hero-text { color: rgba(255, 255, 255, 0.8); max-width: 32ch; }
.login__hero::after {   /* halo decorativo */
  content: "";
  position: absolute;
  width: 420px; height: 420px;
  border-radius: 50%;
  top: -120px; right: -120px;
  background: radial-gradient(circle, rgba(245,140,0,0.35), transparent 70%);
}

@media (min-width: 900px) {
  .login { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .login__hero { display: flex; }
}

/* ============================================================ BÚSQUEDA (#module:search) */
.search-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--topbar-h) - var(--space-6) * 2);
}
.card--search {
  width: 100%;
  max-width: 940px;
  padding: var(--space-10) var(--space-6);
}
.search__head { text-align: center; margin-bottom: var(--space-6); }
.search__title { margin-bottom: var(--space-2); }
.search__subtitle { color: var(--text-secondary); }

.search-row {
  display: grid;
  grid-template-columns: 1fr;           /* mobile: apilado */
  gap: var(--space-4);
  align-items: end;
}
.name-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.name-actions { display: flex; justify-content: flex-end; margin-top: var(--space-4); }
.search__submit .btn { width: 100%; }

@media (min-width: 720px) {
  .search-row { grid-template-columns: minmax(200px, 240px) 1fr auto; }
  .name-grid { grid-template-columns: 1fr 1fr; }
  .search__submit .btn { width: auto; }
}

/* ============================================================ CABECERA DE VISTA (Regresar + título) */
.view-head { margin-bottom: var(--space-6); }
.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--brand-primary);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  margin-bottom: var(--space-3);
}
.back-link:hover { text-decoration: underline; }
.back-link svg { width: 16px; height: 16px; }
.view-head__title { margin-bottom: var(--space-1); }
.view-head__sub { color: var(--text-secondary); }

/* Cabecera de la tarjeta de resultados (conteo) */
.results-count {
  padding: var(--space-4);
  font-family: var(--font-head);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-subtle);
}
.table th button.th-sort {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.table th button.th-sort svg { width: 12px; height: 12px; opacity: 0.6; }
.link { color: var(--brand-primary); font-weight: var(--fw-medium); }
.link:hover { text-decoration: underline; }

/* ============================================================ MIS TICKETS (#module:ticket-list) */
.list-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.filter-bar {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  padding: var(--space-4) 0 var(--space-5);
}
.filter-bar .field { min-width: 0; }
.filter-bar__actions { display: flex; gap: var(--space-3); }
.filter-bar__actions .btn { flex: 1; }

.pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-4);
  color: var(--text-tertiary);
  font-size: var(--fs-body);
}

/* "Por página" (épica TAM): selector de tamaño integrado a la barra */
.pagination__size {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-right: auto;               /* selector a la izquierda, flechas a la derecha */
}
.pagination__size select {
  min-height: 44px;                 /* target táctil AA */
  padding: 0 var(--space-3);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-primary);
  font: inherit;
  font-size: 16px;                  /* evita zoom iOS */
  cursor: pointer;
}
.pagination__size select:hover { border-color: var(--accent-primary-line); }
.pagination__size select:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}
.pagination__num {
  display: inline-grid;
  place-items: center;
  min-width: 36px; height: 36px;
  padding-inline: var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-badge);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-weight: var(--fw-medium);
}

@media (min-width: 900px) {
  .filter-bar { grid-template-columns: 1fr 1fr 1fr auto; align-items: end; }
  .filter-bar__actions { justify-content: flex-end; }
  .filter-bar__actions .btn { flex: 0 0 auto; }
}

/* ============================================================ DETALLE DE TICKET (#module:ticket-detail) */
.ticket-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.ticket-title-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.ticket-head__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

.ticket-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
.ticket-col { display: flex; flex-direction: column; gap: var(--space-4); }
@media (min-width: 768px)  { .ticket-cols { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .ticket-cols { grid-template-columns: 1fr 1fr 1fr; align-items: start; } }

/* Lista etiqueta/valor (repetida en las cards del ticket) */
.info-list { display: flex; flex-direction: column; gap: var(--space-4); }
.info-item__label { display: block; font-size: var(--fs-caption); color: var(--text-tertiary); margin-bottom: 2px; }
.info-item__value { display: block; font-weight: var(--fw-medium); color: var(--text-primary); }

/* Chip de documento */
.doc-chip {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.doc-chip + .doc-chip { margin-top: var(--space-2); }
.doc-chip__icon {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: var(--radius-badge);
  background: var(--bg-blue-50);
  color: var(--brand-primary);
  flex-shrink: 0;
}
.doc-chip__icon svg { width: 16px; height: 16px; }
.doc-chip__name { font-size: var(--fs-caption); color: var(--text-tertiary); }
.doc-chip__file { font-size: var(--fs-body); color: var(--text-primary); word-break: break-all; }

/* Panel del historial (tabs) */
.tabpanel { padding-top: var(--space-4); }
.activity { display: flex; gap: var(--space-3); }
.activity__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-primary); margin-top: 6px; flex-shrink: 0; }
.activity__meta { display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.activity__author { font-weight: var(--fw-semibold); }
.activity__time { font-size: var(--fs-caption); color: var(--text-tertiary); }
.activity__text { color: var(--text-secondary); margin-top: 2px; }
.activity + .activity { margin-top: var(--space-4); }

/* ============================================================ PERFIL DE CLIENTE (#module:profile) */
.profile-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.profile-head__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.profile-caract { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }
.profile-caract .badge { background: var(--pill-active-bg); color: var(--pill-active-tx); }

/* Cabecera rica del perfil (perfil 360) — flujo vertical apilado */
.profile-hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
/* el gap de la columna manda: sin márgenes propios de los hijos dentro del hero */
.profile-hero .profile-caract { margin-top: 0; }
.profile-hero .view-head__sub { margin: 0; }
.profile-hero__title { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.profile-hero__title h1 { margin: 0; }
/* acciones en la misma fila del título, alineadas al extremo derecho */
.profile-hero__title .profile-head__actions { margin-left: auto; }
@media (max-width: 719px) {
  .profile-hero__title .profile-head__actions { margin-left: 0; flex-basis: 100%; }
  .profile-hero__title .profile-head__actions .btn { flex: 1 1 auto; }
}
.profile-contact {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding: 0;
}
.profile-contact li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-body);
  color: var(--text-secondary);
  min-width: 0;
}
.profile-contact svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-tertiary); }
/* métricas en fila a lo ancho; en móvil envuelven a 2 columnas */
.profile-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3) var(--space-4);
  margin: 0;
}
.profile-metrics dt { font-size: var(--fs-caption); color: var(--text-tertiary); }
.profile-metrics dd { margin: 0; font-size: var(--fs-strong); font-weight: var(--fw-semibold); color: var(--text-primary); }

/* Tabs del perfil 360 + grid de tarjetas-resumen */
.profile-tabs { margin-bottom: var(--space-4); }
.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4);
}
.summary-card { display: flex; flex-direction: column; gap: var(--space-3); }
/* ícono en la esquina superior derecha, centrado verticalmente con el bloque
   de título (con flex-start el círculo de 40px quedaba corrido hacia abajo) */
.summary-card__head {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}
.summary-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-10);
  height: var(--space-10);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.summary-card__icon svg { width: var(--space-5); height: var(--space-5); }
.summary-card__icon--activo    { background: var(--pill-active-bg);  color: var(--pill-active-tx); }
.summary-card__icon--pendiente { background: var(--pill-pending-bg); color: var(--pill-pending-tx); }
.summary-card__icon--hecho     { background: var(--pill-done-bg);    color: var(--pill-done-tx); }
.summary-card__icon--neutro    { background: var(--pill-draft-bg);   color: var(--pill-draft-tx); }
.summary-card__text { min-width: 0; }
.summary-card__title { margin: 0; font-size: var(--fs-title); }
.summary-card__sub { margin: 0; font-size: var(--fs-caption); color: var(--text-tertiary); }
.summary-card__metrics { grid-template-columns: 1fr; gap: var(--space-2); }
.summary-card__link {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding-block: var(--space-2);
  background: none;
  border: 0;
  font: inherit;
  cursor: pointer;
}
.summary-card__link svg { width: var(--space-4); height: var(--space-4); }

/* Consentimientos (solo lectura, datos demo) */
.consent-list { margin-top: var(--space-3); }
.consent-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}
.consent-item:last-child { border-bottom: 0; }
.consent-item__fecha { display: block; margin-top: var(--space-1); font-size: var(--fs-caption); color: var(--text-tertiary); }

.producto-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 560px) { .producto-grid { grid-template-columns: 1fr 1fr; } }
.producto-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.producto-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.producto-card__meta { margin-top: var(--space-2); font-size: var(--fs-caption); color: var(--text-tertiary); }

/* --- Pólizas de seguro (épica SEG) --------------------------------------- */
/* Encabezado de cada bloque de la tab Productos ("Productos financieros" / "Seguros") */
.producto-grupo {
  margin: var(--space-5) 0 var(--space-3);
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-tertiary);
}
.card__title + .producto-grupo { margin-top: var(--space-3); }

/* Barra lateral de acento: distingue una póliza de una cuenta de un vistazo,
   sin recurrir al color como único canal (la píldora sigue llevando el texto). */
.producto-card--seguro { border-left: 3px solid var(--accent-soft, var(--border-strong)); }

.poliza { margin: var(--space-3) 0 0; display: grid; gap: var(--space-2); }
.poliza__fila { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--fs-caption); }
.poliza__fila dt { color: var(--text-tertiary); flex: none; }
.poliza__fila dd { margin: 0; color: var(--text-secondary); text-align: right; }
.poliza__carnet { font-variant-numeric: tabular-nums; letter-spacing: .02em; font-weight: var(--fw-semibold); color: var(--text-primary); }
.poliza__nota { margin: var(--space-3) 0 0; font-size: var(--fs-caption); color: var(--text-tertiary); }

/* Drawer lateral (persona jurídica) */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  justify-content: flex-end;
  background: rgba(0, 15, 25, 0.5);
}
.drawer {
  width: 100%;
  max-width: 420px;
  height: 100%;
  overflow-y: auto;
  background: var(--bg-surface);
  box-shadow: var(--shadow-xl);
  padding: var(--space-6);
}
.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.drawer__warn {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-banner);
  background: var(--pill-pending-bg);
  color: var(--pill-pending-tx);
  font-size: var(--fs-caption);
  margin-bottom: var(--space-4);
}
.drawer__warn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ============================================================ WIZARD CREAR TICKET (Fase 4) */
.wizard-grid { display: grid; gap: var(--space-4); align-items: start; }
@media (min-width: 960px) {
  .wizard-grid { grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); }
  /* Si la columna izquierda está oculta (no-cliente paso 1), el wizard ocupa todo */
  .wizard-grid:has(> .is-hidden:first-child) { grid-template-columns: minmax(0, 1fr); }
}
.wizard__head { text-align: center; margin-bottom: var(--space-5); }
.wizard__title { font-size: var(--fs-h3); font-family: var(--font-head); font-weight: var(--fw-semibold); }
.wizard__sub { color: var(--text-tertiary); font-size: var(--fs-caption); margin-top: 2px; }
.stepper--wizard { max-width: 460px; margin: 0 auto var(--space-6); }
.stepper--wizard .step__line { flex: 1; }

/* Radio-cards Producto / Servicio */
.choice-row { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
@media (min-width: 560px) { .choice-row { grid-template-columns: 1fr 1fr; } }
.choice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.choice input { accent-color: var(--brand-primary); width: 18px; height: 18px; }
.choice:has(input:checked) { border-color: var(--brand-primary); background: var(--bg-blue-50); }
.choice:has(input:focus-visible) { box-shadow: var(--focus-ring); }

/* Campo de documento (carga simulada en el demo) */
.file-field { display: flex; align-items: center; gap: var(--space-2); }
.file-field .file-drop { flex: 1; }
.file-drop {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-tertiary);
  font-size: var(--fs-body);
  cursor: pointer;
  transition: border-color var(--transition-fast);
}
.file-drop:hover { border-color: var(--brand-primary); }
.file-drop:has(:focus-visible) { box-shadow: var(--focus-ring); }
.file-drop[data-filled="true"] { color: var(--text-primary); }
.file-drop svg { width: 18px; height: 18px; flex-shrink: 0; }
.file-drop__clear { color: var(--error); background: none; border: 0; cursor: pointer; display: inline-flex; padding: 4px; }
.file-drop input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* Resumen (paso 3) */
.resumen-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  background: var(--bg-surface);
}
.resumen-card + .resumen-card { margin-top: var(--space-4); }
.resumen-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.resumen-card__head h3 { font-size: var(--fs-strong); font-family: var(--font-head); font-weight: var(--fw-semibold); }
.resumen-card .info-item + .info-item { margin-top: var(--space-2); }

.wizard-actions {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-6);
  flex-wrap: wrap;
}

/* Overlay "Creando ticket…" */
.spinner {
  width: 48px; height: 48px;
  margin: 0 auto var(--space-4);
  border: 4px solid var(--border-subtle);
  border-top-color: var(--brand-primary);
  border-radius: 50%;
  animation: btn-spin 0.8s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

/* ============================================================ DRAWER NOTIFICACIONES */
.notif-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  justify-content: flex-start;
  background: rgba(0, 15, 25, 0.5);
}
.notif-panel {
  width: 100%;
  max-width: 360px;
  height: 100%;
  overflow-y: auto;
  background: var(--bg-surface);
  box-shadow: var(--shadow-xl);
  padding: var(--space-5);
}
.notif-item {
  width: 100%;
  text-align: left;
  font-family: inherit;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.notif-item + .notif-item { margin-top: var(--space-2); }
.notif-item:hover { background: var(--bg-sunken); }
.notif-item[data-leida="false"] { background: var(--bg-blue-50); border-color: var(--brand-primary); }
.notif-item__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.notif-item__title { font-weight: var(--fw-semibold); font-size: var(--fs-body); }
.notif-item__time { font-size: var(--fs-overline); color: var(--text-tertiary); white-space: nowrap; }
.notif-item__text { margin-top: 4px; font-size: var(--fs-caption); color: var(--text-secondary); }
.notif-panel__mark {
  background: none;
  border: 0;
  color: var(--brand-primary);
  font-family: inherit;
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  cursor: pointer;
  padding: var(--space-2) 0;
}
.notif-panel__mark:hover { text-decoration: underline; }

/* ============================================================ COMMAND PALETTE (Ctrl+K) */
.cmdk-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 10vh var(--space-4) var(--space-4);
  background: rgba(0, 15, 25, 0.5);
}
.cmdk-panel {
  width: 100%;
  max-width: 640px;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}
.cmdk-input-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}
.cmdk-input-row svg { width: 20px; height: 20px; color: var(--text-tertiary); flex-shrink: 0; }
.cmdk-input {
  flex: 1;
  min-height: 48px;
  border: 0;
  outline: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 16px; /* evita zoom iOS */
  color: var(--text-primary);
}
.cmdk-panel kbd {
  font-family: var(--font-body);
  font-size: var(--fs-overline);
  padding: 2px 6px;
  border-radius: var(--radius-badge);
  background: var(--bg-sunken);
  border: 1px solid var(--border-subtle);
  color: var(--text-tertiary);
}
.cmdk-list { flex: 1; overflow-y: auto; padding: var(--space-2); }
.cmdk-group {
  font-size: var(--fs-overline);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-tertiary);
  padding: var(--space-3) var(--space-3) var(--space-1);
}
.cmdk-opt {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 48px;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  font-family: inherit;
  font-size: var(--fs-body);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}
.cmdk-opt[aria-selected="true"] { background: var(--bg-blue-50); }
.cmdk-opt .badge { flex-shrink: 0; }
.cmdk-opt__meta { color: var(--text-tertiary); font-size: var(--fs-caption); }
.cmdk-foot {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--border-subtle);
  color: var(--text-tertiary);
  font-size: var(--fs-caption);
}

/* ============================================================ ACTIVIDADES (timeline) */
.tabs--filtro { flex-wrap: wrap; margin-bottom: var(--space-3); }
.timeline__dia {
  margin: var(--space-5) 0 var(--space-2);
  font-size: var(--fs-strong);
  color: var(--text-tertiary);
}
.timeline__dia:first-of-type { margin-top: var(--space-2); }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}
.timeline__item:last-child { border-bottom: 0; }
.timeline__cuerpo { flex: 1; min-width: 0; }
.timeline__texto { margin: 0; overflow-wrap: anywhere; }
.timeline__meta { font-size: var(--fs-caption); color: var(--text-tertiary); }
.timeline__abrir { flex-shrink: 0; padding-block: var(--space-2); }

/* ============================================================ PERSONAS (directorio) */
.personas-recientes { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.persona-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  color: var(--text-primary);
  text-decoration: none;
  font-size: var(--fs-body);
  transition: border-color var(--transition-base), background-color var(--transition-base);
}
.persona-chip:hover { border-color: var(--brand-primary); background: var(--pill-active-bg); }
.persona-chip__avatar { width: 32px; height: 32px; font-size: var(--fs-overline); }
.personas-filtros {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  align-items: end;
  margin-bottom: var(--space-4);
}
@media (min-width: 720px) { .personas-filtros { grid-template-columns: 2fr 1fr 1fr auto; } }
.personas-filtros__toggle { min-height: 44px; align-self: end; }
.personas-flags .badge { margin-inline-end: var(--space-1); }
.personas-acciones { white-space: nowrap; }
.personas-acciones .link + .link { margin-inline-start: var(--space-3); }

/* ============================================================ PRODUCTOS (dashboard) */
.kpi-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
@media (min-width: 560px) { .kpi-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .kpi-grid { grid-template-columns: repeat(4, 1fr); } }
.kpi-card { display: flex; flex-direction: column; gap: var(--space-1); }
.kpi-card__valor { font-family: var(--font-head); font-size: var(--fs-h2); font-weight: var(--fw-semibold); color: var(--text-primary); }
.kpi-card__label { font-size: var(--fs-caption); color: var(--text-tertiary); }

/* Contenedor de los DOS bloques (financieros / seguros): el grid de cards
   pasó a `.productos-grid__items`, uno por bloque. Así cada sección conserva su
   propio auto-fill y el encabezado ocupa su línea completa sin trucos de
   `grid-column: 1 / -1`. */
.productos-grid { display: block; }
.productos-grid__titulo {
  margin: var(--space-6) 0 var(--space-3);
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-tertiary);
}
.productos-grid__titulo:first-child { margin-top: 0; }
.productos-grid__items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-4);
}
.producto-tipo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: transform var(--anim-fast) var(--ease-salida), box-shadow var(--anim-fast) var(--ease-salida);
}
.producto-tipo:hover { transform: translateY(calc(var(--space-1) * -0.5)); box-shadow: var(--shadow-lg); }
.producto-tipo__nombre { font-weight: var(--fw-semibold); color: var(--text-primary); }
.producto-tipo__total { font-family: var(--font-head); font-size: var(--fs-h2); font-weight: var(--fw-semibold); color: var(--text-primary); }
.producto-tipo__total-label { font-family: var(--font-body); font-size: var(--fs-caption); font-weight: 400; color: var(--text-tertiary); }
.producto-tipo__desglose { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.producto-tipo__variacion {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-caption);
  color: var(--text-tertiary);
}
.producto-tipo__variacion svg { width: 14px; height: 14px; }
.producto-tipo__variacion--sube { color: var(--pill-done-tx); }
.producto-tipo__variacion--baja { color: var(--error-text); }

.prod-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}
.prod-item:last-child { border-bottom: 0; }
.prod-item__meta { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.prod-item__numero { font-size: var(--fs-caption); color: var(--text-tertiary); }

/* ============================================================ GRÁFICOS (Productos/Reportes) */
.graficas-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
@media (min-width: 1024px) { .graficas-grid { grid-template-columns: 3fr 2fr; } }

/* Reportes (épica REP): barra de filtros en UNA línea — fechas compactas,
   tipo con su ancho natural y los 3 botones alineados al final */
.reportes-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-end;
}
.reportes-filtros .field { margin: 0; }
.reportes-filtros__fecha .input { width: 175px; }   /* lo justo para dd/mm/aaaa */
.reportes-filtros__tipo .input { width: 200px; }   /* la opción larga del select no manda */
.reportes-filtros__acciones {
  display: flex;
  gap: var(--space-2);
  margin-left: auto;                                 /* botones al final de la línea */
}
@media (max-width: 719px) {
  .reportes-filtros .field { flex: 1 1 100%; }
  .reportes-filtros__fecha .input, .reportes-filtros__tipo .input { width: 100%; }
  .reportes-filtros__acciones { margin-left: 0; flex: 1 1 100%; }
  .reportes-filtros__acciones .btn { flex: 1; }
}

/* Barras apiladas (reporte Personas - Tickets) */
.apiladas__leyenda {
  list-style: none; margin: 0 0 var(--space-3); padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
  font-size: var(--fs-caption); color: var(--text-secondary);
}
.apiladas__leyenda li { display: inline-flex; align-items: center; gap: var(--space-1); }
.apiladas__swatch { width: 10px; height: 10px; border-radius: var(--radius-badge); flex-shrink: 0; }
.apiladas__filas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.apiladas__filas li { display: flex; align-items: center; gap: var(--space-3); }
.apiladas__nombre {
  flex: 0 0 170px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--fs-caption); color: var(--text-secondary);
}
.apiladas__barra {
  flex: 1; height: 18px; border-radius: var(--radius-badge);
  overflow: hidden; background: var(--bg-sunken);   /* riel: el largo se compara contra el máximo */
}
.apiladas__relleno { display: flex; height: 100%; border-radius: inherit; overflow: hidden; }
.apiladas__barra i {
  display: flex; align-items: center; justify-content: center;
  min-width: 3px; font-style: normal; font-size: 11px;
  font-weight: var(--fw-semibold); color: #fff;
}
.apiladas__filas strong { flex: 0 0 24px; text-align: right; font-size: var(--fs-caption); }

/* Reportes (épica REP): grid pareja de 2 columnas y valores siempre visibles */
@media (min-width: 1024px) { .graficas-grid--rep { grid-template-columns: 1fr 1fr; } }
#repGraficas .chart-bar__valor { opacity: 1; }
#repGraficas .chart-barras { max-width: 460px; }
.grafica-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.donut-wrap { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.donut-wrap__chart { flex: 0 0 auto; width: clamp(140px, 30vw, 180px); }
.chart-donut { width: 100%; height: auto; display: block; }
.chart-donut__valor { font-family: var(--font-head); font-weight: var(--fw-semibold); font-size: 7px; fill: var(--text-primary); }
.chart-donut__label { font-family: var(--font-body); font-size: 3px; fill: var(--text-tertiary); }
.donut__seg { cursor: pointer; }
.donut-leyenda { list-style: none; margin: 0; padding: 0; flex: 1 1 200px; min-width: 0; }
.donut-leyenda__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 36px;
  padding: var(--space-1) var(--space-2);
  background: none;
  border: 0;
  border-radius: var(--radius-badge);
  font: inherit;
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
}
.donut-leyenda__item:hover { background: var(--bg-sunken); }
.donut-leyenda__swatch { width: 12px; height: 12px; border-radius: var(--radius-badge); flex-shrink: 0; }
.donut-leyenda__texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-barras { width: 100%; max-width: 420px; height: auto; display: block; }
.chart-bar rect { fill: var(--brand-primary); }
.chart-bar--actual rect { fill: var(--brand-accent); }
.chart-bar__valor { font-family: var(--font-head); font-weight: var(--fw-semibold); font-size: 6px; fill: var(--text-primary); opacity: 0; }
.chart-bar:hover .chart-bar__valor, .chart-bar--actual .chart-bar__valor { opacity: 1; }
.chart-bar__mes { font-family: var(--font-body); font-size: 5px; fill: var(--text-tertiary); }
.chart-spark { width: 100%; height: 28px; display: block; }
.kpi-card__spark { margin-top: var(--space-2); }
.kpi-card__var { font-size: var(--fs-caption); }

/* barra apilada de las cards del grid (números siempre en texto al lado).
   OJO: no llamarla `.stack` — ese nombre es el helper de layout de base.css
   (lo usan el login y los wizards) y la colisión los colapsaba a 8px. */
.barra-apilada {
  display: flex;
  width: 100%;
  height: var(--space-2);
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--bg-sunken);
}
.barra-apilada__texto { display: block; margin-top: var(--space-1); font-size: var(--fs-caption); color: var(--text-secondary); }

/* chip de filtro activo del grid */
.filtro-activo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  background: var(--pill-active-bg);
  color: var(--pill-active-tx);
  font-size: var(--fs-body);
}

/* Reportes: adelanto de visualizaciones, atenuado */
.reportes-hint__charts {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-top: var(--space-3);
  opacity: 0.45;
}
.reportes-hint__charts .chart-donut { width: 140px; }
.reportes-hint__charts .chart-barras { max-width: 280px; }

/* ============================================================ PERFIL 360: MODO DASHBOARD
   Toggle tabs ↔ dashboard: mismo markup e IDs; esta clase de modo solo cambia
   el layout. Selectores de HIJO DIRECTO a propósito: los tabpanels anidados
   (Tickets/Notas dentro de Interacciones) siguen funcionando como tabs. */
.perfil--dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}
.perfil--dashboard > .profile-hero { margin-bottom: 0; order: -2; }
.perfil--dashboard > .profile-tabs { display: none; }
.perfil--dashboard > .tabpanel.is-hidden { display: block !important; }
/* móvil: datos personales primero (colapsados por JS al entrar al modo) */
.perfil--dashboard > .tabpanel--lateral { order: -1; }
@media (min-width: 1024px) {
  .perfil--dashboard { grid-template-columns: 340px minmax(0, 1fr); align-items: start; }
  .perfil--dashboard > .profile-hero { grid-column: 1 / -1; }
  .perfil--dashboard > .tabpanel--lateral {
    grid-column: 1;
    grid-row: 2 / span 5;
    position: sticky;
    top: calc(var(--topbar-h) + var(--space-4));
  }
  .perfil--dashboard > .tabpanel:not(.tabpanel--lateral) { grid-column: 2; }
}

/* cabecera del panel lateral con botón de colapso (solo existe en dashboard) */
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.panel-head .card__title { margin-bottom: 0; }
[data-colapsar-perfil] { display: none; }
.perfil--dashboard [data-colapsar-perfil] { display: inline-flex; }
.perfil--dashboard [data-colapsar-perfil][aria-expanded="false"] svg { transform: rotate(-90deg); }
[data-colapsar-perfil] svg { transition: transform var(--transition-base); }