/**
 * CLIENTES (CRM) — copia VERBATIM del bloque <style> de
 * om-agencias/includes/clientes-modulo.php (lineas 1621-1803).
 * Si cambia alla, cambia aqui EN EL MISMO CAMBIO.
 */

    /* Sprint 8 Fase C.2 — MASTER tokens (Plus Jakarta Sans + paleta --om-*) */
    .omcli-wrap {
        max-width: 1200px; margin: 0 auto; padding: 24px 16px;
        font-family: var(--om-font);
        color: var(--om-text);
        font-weight: 500;
    }
    .omcli-wrap * { font-family: var(--om-font); }

    .omcli-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
    .omcli-title { font-size: 28px; font-weight: 700; margin: 0; color: var(--om-text); }
    .omcli-sub { font-size: 14px; color: var(--om-text-muted); margin: 4px 0 0; }
    /* Fase 1B: barra de pestañas de pagina (Clientes / En transito). Clase propia para no chocar con .omcli-tab del detalle. */
    .omcli-pagetab { display: flex; gap: 4px; border-bottom: 1px solid var(--om-border); margin-bottom: 20px; }
    .omcli-pagetab-btn { background: none; border: none; border-bottom: 2px solid transparent; padding: 10px 16px; font-size: 14px; font-weight: 600; color: var(--om-text-muted); cursor: pointer; font-family: inherit; margin-bottom: -1px; }
    .omcli-pagetab-btn:hover { color: var(--om-text); }
    .omcli-pagetab-btn.is-active { color: var(--om-primary); border-bottom-color: var(--om-primary); }
    /* En la pestaña En transito, ocultar el titulo propio de viajeros (evita duplicado). */
    .omcli-pagepanel[data-pagepanel-content="transito"] .omvja-header { display: none; }
    .omcli-back { margin-bottom: 12px; font-size: 13px; }
    .omcli-back a { color: var(--om-primary); text-decoration: none; font-weight: 600; }
    .omcli-back a:hover { text-decoration: underline; }

    .omcli-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border: 1px solid transparent; border-radius: var(--om-radius-md); font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; transition: background 150ms ease, border-color 150ms ease, color 150ms ease; }
    .omcli-btn i { width: 14px; height: 14px; }
    .omcli-btn-primary { background: var(--om-primary); color: #fff; border-color: var(--om-primary); }
    .omcli-btn-primary:hover { background: var(--om-primary-dark); border-color: var(--om-primary-dark); }
    .omcli-btn-ghost { background: var(--om-surface); color: var(--om-text); border-color: var(--om-border-strong); }
    .omcli-btn-ghost:hover { background: var(--om-surface-alt); border-color: var(--om-primary); color: var(--om-primary); }

    /* Filtros de la tabla (rediseno 14-jul): busqueda + status + orden. El canal
       (0% capturado) y el rango de fechas salieron de la UI; el REST los soporta. */
    /* Filtros: patrón único .omflt (om-filtros.css del theme, 16-jul).
       Las reglas propias del listado se retiraron — la hoja compartida manda. */
    /* .omcli-card base: lo usa el DETALLE (bloques informativos); las cards del
       LISTADO se retiraron en el rediseno de tabla (14-jul). */
    .omcli-card {
        background: var(--om-surface); border: 1px solid var(--om-border);
        border-radius: var(--om-radius-lg); padding: 18px 20px;
        transition: border-color 200ms ease, box-shadow 200ms ease;
        text-decoration: none;
        color: inherit;
        display: block;
    }

    /* Listado: TABLA de consulta (rediseno 14-jul) — sin avatar, sin monto.
       A64 (15-sep-2026): la tabla CABE por construccion. Con 200 clientes de
       nombre largo en 40 etiquetas media 1418 px dentro de un contenedor de 976 y
       «Editar» quedaba 420 px fuera, entero tapado. Las reglas de max-width de
       antes eran letra muerta: el JS nunca ponia esas clases en las celdas. Hoy
       el ancho lo fija el <colgroup> (table-layout: fixed): las columnas de
       ancho conocido lo llevan en px, Nombre y Email se reparten el resto, y lo
       que no cabe se corta con elipsis y viaja entero en el title. La suma de
       columnas es el ancho del contenedor, siempre, no «por dos pixeles».
       El padding de las celdas lleva !important porque om-portal-v2.css tiene
       `td { padding: 14px 16px !important }` y ganaba: los anchos de abajo
       estan medidos con ESTE padding (10 px por lado), no con el que se lee.
       Lo que cada columna necesita, medido el 15-sep-2026 a 1280:
       ID 34, telefono «+52 33 1031 0031» 121, cabecera ULTIMA ACTIVIDAD 107,
       Ver+Editar 115; cada ancho de aqui lleva al menos 10 px de sobra.
       Lo mide tests/arnes-cartera-cabe.sh. */
    .omcli-tabla-scroll { overflow-x: auto; border: 1px solid var(--om-border); border-radius: var(--om-radius-lg); background: var(--om-surface); }
    .omcli-tabla { border-collapse: collapse; width: 100%; font-size: 13px; min-width: 900px; table-layout: fixed; }
    .omcli-col-id { width: 66px; }
    .omcli-col-tel { width: 184px; }   /* B1 (21-sep-2026): +32 px para que quepan los dos botones y el telefono entero (medido: a 152 se veia el 74% del numero); ceden Nombre y Email, las dos sin ancho fijo */
    .omcli-col-etiqueta { width: 160px; }
    .omcli-col-fecha { width: 138px; }
    .omcli-col-acciones { width: 146px; }
    /* B1 (Fabian, 20-sep-2026): la cabecera va en el MISMO par de tokens que las demas tablas
       desde A96 (.omv-table thead: fondo --om-primary; th: texto --om-surface). Ni un azul nuevo.
       El fondo va en el THEAD, no en el th: om-portal-v2.css pone `th { background: transparent
       !important }` y un fondo en el th se pierde (medido: blanco sobre blanco, 1:1). */
    .omcli-tabla thead { background: var(--om-primary); color: var(--om-surface); }
    .omcli-tabla thead th {
        text-align: left; padding: 10px 10px !important;
        font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
        color: var(--om-surface); font-weight: 700;
        border-bottom: 0;
        white-space: nowrap; user-select: none; overflow: hidden; text-overflow: ellipsis;
    }
    .omcli-tabla thead th[data-sort] { cursor: pointer; }
    .omcli-tabla thead th[data-sort]:hover { color: var(--om-surface); }
    .omcli-sort { color: var(--om-surface); margin-left: 2px; }
    /* B1 (21-sep-2026): los iconos van ANTES del numero, con margen a la derecha; asi la elipsis de la celda
       recorta el final del telefono y nunca los botones (medido: antes quedaban fuera del recorte). */
    .omcli-td-contacto .omv-row-arrow { margin-right: 4px; vertical-align: middle; }
    .omcli-tabla tbody td { padding: 10px 10px !important; border-bottom: 1px solid var(--om-border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .omcli-tabla tbody tr[data-url] { cursor: pointer; }
    .omcli-tabla tbody tr[data-url]:hover { background: var(--om-primary-light); }
    .omcli-tabla tbody tr:last-child td { border-bottom: 0; }
    .omcli-td-id { font-variant-numeric: tabular-nums; color: var(--om-text-muted); font-weight: 700; }
    .omcli-td-nombre { font-weight: 700; color: var(--om-text); }
    .omcli-td-contacto { color: var(--om-text-muted); }
    .omcli-td-fecha { color: var(--om-text-muted); font-variant-numeric: tabular-nums; }
    /* El chip de la etiqueta se corta dentro de su celda (160 - 20 de padding). */
    .omcli-tabla .omcli-etiqueta-chip { max-width: 100%; vertical-align: middle; }
    .omcli-td-acciones a, .omcli-td-acciones button {
        background: none; border: 1px solid var(--om-primary); color: var(--om-primary);
        border-radius: var(--om-radius-sm); padding: 4px 12px;
        font-size: 11.5px; font-weight: 700; cursor: pointer; font-family: inherit;
        text-decoration: none; margin-right: 6px; display: inline-block;
    }
    .omcli-td-acciones > :last-child { margin-right: 0; }
    .omcli-td-acciones a:hover, .omcli-td-acciones button:hover { background: var(--om-primary); color: #fff; }

    /* A65 (15-sep-2026, decidido por Fabian): entre 641 y 1203 la tabla se queda
       con Nombre, Telefono, Etiqueta y Acciones. Por que 1203 y no 1023: el ancho
       que importa es el del CONTENEDOR, no el de la ventana — la barra lateral
       se come 304 px hasta ~801 de viewport y 64 debajo, asi que el contenedor
       baja de los 900 que la tabla entera necesita desde 1203, y el peor caso
       es 900 de viewport (596 de contenedor), no 768 (704). Se esconden el
       <col> y las celdas: Chrome honra display:none en col (medido) y asi los
       anchos del colgroup siguen cayendo en su columna. Un nombre recortado
       con title es una molestia; un «Editar» detras del scroll es un callejon
       sin salida. La celda con colspan («Cargando», «Sin clientes») es la
       primera de su fila y NO se esconde. Lo mide tests/arnes-cartera-cabe.sh
       en todo el rango. */
    @media (max-width: 1203px) and (min-width: 641px) {
        .omcli-tabla { min-width: 0; }
        .omcli-col-id, .omcli-col-email, .omcli-col-fecha,
        .omcli-tabla th:nth-child(1), .omcli-tabla td:nth-child(1):not([colspan]),
        .omcli-tabla th:nth-child(4), .omcli-tabla td:nth-child(4),
        .omcli-tabla th:nth-child(6), .omcli-tabla td:nth-child(6) { display: none; }
    }

    /* La afinacion (Fabian, 15-sep-2026): en la pantalla mas estrecha importa
       mas quien es el cliente que como se llama su etiqueta. Donde el
       CONTENEDOR baja de ~660 px —a 900 de viewport son 596 y a 641 son 577;
       con la barra lateral eso es 801-963 de viewport, y sin ella 641-723—
       la etiqueta cede 60 px al nombre: 100 en vez de 160. Los cortes salen
       de la tabla viewport -> contenedor medida, no de la ventana. */
    @media (max-width: 963px) and (min-width: 801px), (max-width: 723px) and (min-width: 641px) {
        .omcli-col-etiqueta { width: 100px; }
    }

    /* Movil: la tabla degrada a filas compactas apiladas (sin avatar). */
    @media (max-width: 640px) {
        /* La tabla y el tbody son bloques: un <tr> en bloque DENTRO de una
           tabla vive en una celda anonima cuyo ancho lo manda el contenido, y
           una palabra sin espacios de 300 caracteres (un correo) la abria a
           3510 px aunque el td envolviera (medido 15-sep-2026). */
        .omcli-tabla, .omcli-tabla tbody { display: block; min-width: 0; width: auto; }
        .omcli-tabla thead { display: none; }
        .omcli-tabla tbody tr { display: block; padding: 10px 12px; border-bottom: 1px solid var(--om-border); }
        /* Un correo no tiene espacios: sin overflow-wrap, uno de 45 caracteres
           quedaba a 2 px del borde y uno de 50 se salia del telefono (medido
           15-sep-2026, 300 caracteres = 3534 px de fila). */
        .omcli-tabla tbody td { display: inline-block; border: 0; padding: 1px 8px 1px 0 !important; white-space: normal; overflow: visible; max-width: 100%; overflow-wrap: anywhere; }
        .omcli-tabla .omcli-etiqueta-chip { white-space: normal; }
        .omcli-td-id::before { content: '#'; }
        .omcli-td-nombre { display: block; font-size: 14px; }
        .omcli-td-acciones { display: block; margin-top: 6px; }
    }

    .omcli-empty { text-align: center; padding: 32px 16px; color: var(--om-text-faint); font-size: 14px; grid-column: 1 / -1; }

    .omcli-badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--om-radius-sm); white-space: nowrap; flex-shrink: 0; display: inline-block; }
    .omcli-badge-activo    { background: var(--om-success-light); color: var(--om-success-dark); }
    .omcli-badge-vip       { background: var(--om-primary-light); color: var(--om-primary-dark); }
    .omcli-badge-dormido   { background: var(--om-warning-light); color: var(--om-warning-dark); }
    .omcli-badge-archivado { background: var(--om-surface-alt); color: var(--om-text-muted); }

    .omcli-paginator { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; font-size: 13px; color: var(--om-text-muted); }
    .omcli-paginator button { background: var(--om-surface); border: 1px solid var(--om-border-strong); border-radius: var(--om-radius-sm); padding: 6px 12px; cursor: pointer; font-size: 13px; font-family: inherit; font-weight: 500; }
    .omcli-paginator button:hover { border-color: var(--om-primary); color: var(--om-primary); }

    /* Modal (no tocado en C.2 — solo tokens en bordes y focus) */
    .omcli-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; }
    /* El atributo [hidden] DEBE ganar al display:flex (si no, el modal se abre
       solo y no cierra). Misma convencion que el resto de modales de OM
       (.omg-modal[hidden], .omcb-modal[hidden], .tm-modal[hidden]); a .omcli-modal
       le faltaba y por eso la pantalla de Clientes salio inusable en produccion. */
    .omcli-modal[hidden] { display: none; }
    .omcli-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .55); }
    .omcli-modal-card { position: relative; background: var(--om-surface); border-radius: 12px; padding: 28px; max-width: 720px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 25px 50px -12px rgba(0,0,0,.25); }
    .omcli-modal-card h2 { margin: 0 0 16px; font-size: 22px; color: var(--om-text); }
    .omcli-modal-close { position: absolute; top: 12px; right: 16px; background: none; border: none; font-size: 28px; line-height: 1; cursor: pointer; color: var(--om-text-faint); }
    .omcli-modal-close:hover { color: var(--om-text); }
    .omcli-modal-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--om-border); }
    .omcli-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin-bottom: 16px; }
    .omcli-modal-card label { display: flex; flex-direction: column; font-size: 12px; font-weight: 600; color: var(--om-text-muted); gap: 4px; }
    .omcli-modal-card input, .omcli-modal-card select, .omcli-modal-card textarea { padding: 9px 12px; border: 1px solid var(--om-border); border-radius: 8px; font-size: 14px; font-weight: 400; color: var(--om-text); font-family: inherit; }
    .omcli-modal-card input:focus, .omcli-modal-card select:focus, .omcli-modal-card textarea:focus { outline: none; border-color: var(--om-primary); box-shadow: var(--om-shadow-focus); }
    .omcli-fs { border: 1px solid var(--om-border); border-radius: 8px; padding: 12px 16px 4px; margin-bottom: 12px; }
    .omcli-fs legend { padding: 0 6px; font-size: 12px; color: var(--om-text-muted); font-weight: 600; }
    .omcli-form-error { margin-top: 12px; padding: 10px 14px; border-radius: 8px; background: var(--om-danger-light); color: var(--om-danger); font-size: 13px; }

    /* Detalle (cosmético: tokens + KPIs Swiss) */
    .omcli-detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--om-border); }
    .omcli-detail-name { font-size: 28px; font-weight: 700; color: var(--om-text); margin: 0 0 6px; }
    .omcli-detail-contact { font-size: 14px; color: var(--om-text-muted); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
    .omcli-detail-contact a { color: var(--om-primary); text-decoration: none; }
    .omcli-detail-contact a:hover { text-decoration: underline; }
    .omcli-wa { color: var(--om-success-dark) !important; font-weight: 600; }   /* A96: mismo caso que .omc-saav-stat-green */
    .omcli-detail-badges { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
    .omcli-detail-actions { display: flex; gap: 8px; flex-shrink: 0; }

    .omcli-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
    .omcli-kpi {
        background: var(--om-surface); border: 1px solid var(--om-border);
        border-radius: var(--om-radius-lg); padding: 18px 20px;
        display: flex; flex-direction: column; gap: 6px;
        transition: border-color 200ms ease, box-shadow 200ms ease;
    }
    .omcli-kpi:hover { border-color: var(--om-primary-border); box-shadow: var(--om-shadow-sm); }
    .omcli-kpi-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--om-text-muted); font-weight: 600; }
    .omcli-kpi-value { font-size: 28px; font-weight: 800; color: var(--om-text); font-variant-numeric: tabular-nums; line-height: 1.1; }
    .omcli-kpi-small { font-size: 18px; }

    .omcli-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--om-border); margin-bottom: 20px; }
    .omcli-tab { background: none; border: none; padding: 12px 16px; font-size: 14px; font-weight: 600; color: var(--om-text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: inherit; }
    .omcli-tab:hover { color: var(--om-primary); }
    .omcli-tab.is-active { color: var(--om-primary); border-bottom-color: var(--om-primary); }

    .omcli-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
    /* .omcli-card del DETALLE: no usa el patrón del listado (card → bloque informativo, no clickeable) */
    .omcli-card-grid .omcli-card { background: var(--om-surface); border: 1px solid var(--om-border); border-radius: var(--om-radius-lg); padding: 16px 20px; cursor: default; }
    .omcli-card-grid .omcli-card:hover { border-color: var(--om-border); box-shadow: none; }
    .omcli-card-grid .omcli-card h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: var(--om-text-muted); margin: 0 0 12px; }
    .omcli-card-grid .omcli-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin: 0; font-size: 13px; }
    .omcli-card-grid .omcli-card dt { color: var(--om-text-faint); }
    .omcli-card-grid .omcli-card dd { margin: 0; color: var(--om-text); }
    .omcli-notas { font-size: 14px; line-height: 1.5; color: var(--om-text); white-space: pre-wrap; }

    @media (max-width: 720px) {
        .omcli-grid-2 { grid-template-columns: 1fr; }
        .omcli-kpis { grid-template-columns: repeat(2, 1fr); }
        .omcli-detail-header { flex-direction: column; }
    }

    /* Timeline de actividad (Fase E rebanada 1) */
    .omcli-timeline { list-style: none; margin: 0; padding: 0; }
    .omcli-timeline-item { position: relative; padding: 0 0 18px 36px; margin-left: 12px; border-left: 2px solid var(--om-border); }
    .omcli-timeline-item:last-child { border-left-color: transparent; padding-bottom: 0; }
    .omcli-timeline-bubble {
        position: absolute;
        left: -14px;
        top: -2px;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: var(--om-primary-light);
        color: var(--om-primary);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 2px solid var(--om-surface);
        box-shadow: 0 0 0 1px var(--om-border);
    }
    .omcli-timeline-bubble svg { width: 14px; height: 14px; }
    .omcli-timeline-content { padding-top: 1px; }
    .omcli-timeline-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
    .omcli-timeline-titulo { font-size: 13px; font-weight: 600; color: var(--om-text); }
    .omcli-timeline-fecha { font-size: 12px; color: var(--om-text-faint); white-space: nowrap; }
    .omcli-timeline-detalle { font-size: 12px; color: var(--om-text-muted); margin-top: 2px; }
    .omcli-timeline-empty { font-size: 13px; color: var(--om-text-faint); padding: 8px 0; margin: 0; }