/* Módulo cuentas-onta (pantallas 10, 11 y 12). Solo tokens: nada de colores literales. Prefijo propio `cta-`. */

.cta-aviso { display: flex; gap: .5rem; align-items: flex-start; margin-bottom: 14px; }

/* Celda principal de las listas: avatar con el identificador corto + nombre y subtítulo. */
.cta-cuenta { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cta-txt { min-width: 0; overflow-wrap: anywhere; }
.cta-avatar { width: 32px; height: 32px; font-size: 11px; flex: none; }

/* Filtro por cliente (viene de ?cliente=): chip con botón para quitarlo. */
.cta-chip-filtro { display: inline-flex; align-items: center; gap: .4rem; max-width: 100%; height: 30px; padding: 0 2px 0 10px; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent); background: var(--accent-soft); font-size: 12.5px; font-weight: 600; overflow: hidden; }
.cta-chip-filtro .btn { color: inherit; }

/* Drawer: pills, pestañas, errores y ayudas. */
.cta-pills { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 12px; }
.cta-tabs { display: flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; margin-bottom: 12px; }
.cta-tabs button { flex: none; }
.cta-error { margin: 0 0 12px; }
.cta-ayuda { font-size: 12.5px; margin: 0 0 12px; }
.cta-ayuda i { color: var(--accent); }

/* Vehículos de la cuenta. */
.cta-barra { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: 8px; }
.cta-barra .search-wrap { flex: 1 1 180px; }
.cta-cuenta-txt { font-size: 12.5px; margin-right: auto; }
.cta-subform { padding: 4px 14px 14px; margin-bottom: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--sunken); }
.cta-subform .seccion-titulo { margin-top: 12px; }
.cta-titulo-accion { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.cta-info-principal { font: 700 14px var(--font-brand); overflow-wrap: anywhere; }
.cta-info-detalle { font-size: 12px; overflow-wrap: anywhere; margin-top: 2px; }
.cta-acciones-form { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 12px; }
.cta-item { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--border); }
.cta-item:last-child { border-bottom: 0; }
.cta-item .who { flex: 1; min-width: 0; }
.cta-item .who-name { font: 700 14px var(--font-brand); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; overflow-wrap: anywhere; }
.cta-item .who-id { font-size: 12px; color: var(--ink-3); overflow-wrap: anywhere; }

/* Bitácora de integradores: selector de semana. */
.cta-semana { display: flex; align-items: flex-end; gap: .5rem; flex-wrap: wrap; margin-bottom: 14px; }
.cta-semana-campo { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink-3); }
.cta-semana-campo .campo-input { width: 96px; }

/* Clientes en línea. */
.cta-actualizado { display: flex; align-items: center; gap: .4rem; margin-top: 6px; font-size: 12.5px; }
.cta-vivo { color: var(--success); }
.cta-kpis-drawer { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 760px) {
  .cta-vista .pagina-acciones { flex-wrap: wrap; }
  .cta-vista .pagina-acciones .seg-toggle { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .cta-vista .pagina-acciones .seg-toggle button { flex: none; }
  .cta-vista .pagina-acciones .btn:not(.btn-primario) span { display: none; }
  .cta-item { flex-wrap: wrap; }
  .cta-item .who { flex: 1 1 calc(100% - 100px); }
  .cta-semana-campo .campo-input { width: 80px; }
}