/**
 * MOVIMIENTOS (CxC/CxP + envoltorio de pestanas) — copia VERBATIM de los
 * bloques <style> de vencimientos-modulo.php (394-463) y de
 * movimientos-modulo.php (165-211). Si cambia alla, cambia aqui.
 */
    
    .omv-wrap { font-family: var(--om-font); color: var(--om-text); padding: 8px 0 24px; }
    .omv-header { margin-bottom: 20px; }
    .omv-title { font-size: 28px; font-weight: 800; margin: 0 0 6px; letter-spacing: -0.02em; }
    .omv-subtitle { font-size: 14px; color: var(--om-text-muted); margin: 0; }

    /* Toggle pills */
    /* Toggle CxC/CxP: patrón único .omflt-toggle (om-filtros.css, 16-jul). */
    .omflt-toggle i { width: 14px; height: 14px; }

    /* Moneda label si multi */
    .omv-moneda-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--om-text-faint); text-transform: uppercase; margin: 16px 0 8px; }

    /* KPI cards */
    /* auto-fit y no un 3 clavado: la tarjeta "Sin fecha" aparece solo cuando hay,
       y con 3 columnas fijas se caia sola a un segundo renglon. */
    .omv-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 20px; }
    /* LA TARJETA DICE SU PROPIA DISPOSICION (12-sep-2026). Aqui la tarjeta es
       etiqueta / cifra / pie, uno debajo de otro y sin icono. Pero om-ventas.css
       define tambien .omv-kpi —alli SI lleva icono al lado— con display:flex, y
       esa regla ganaba: los tres textos se ponian en fila y no cabian en los
       235px de la columna. Medido: las tarjetas 1, 3 y 4 necesitaban 264, 243 y
       248 px en una caja de 233, y la cuarta cortaba «1 registro sin vigilancia».
       No se toca la regla de Ventas: se dice la de aqui, que es la que manda en
       esta pantalla. min-width:0 para que la columna del grid pueda encogerse. */
    .omv-kpi { background: var(--om-surface); border: 1px solid var(--om-border); border-radius: var(--om-radius-lg); padding: 16px 18px; box-shadow: var(--om-shadow-sm); display: block; min-width: 0; }
    .omv-kpi-label { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--om-text-muted); margin-bottom: 6px; }
    .omv-kpi-val { font-size: 28px; font-weight: 800; color: var(--om-text); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
    .omv-kpi-meta { font-size: 12px; color: var(--om-text-faint); margin-top: 4px; }
    .omv-kpi-danger .omv-kpi-val { color: var(--om-danger); }
    .omv-kpi-warning .omv-kpi-val { color: var(--om-warning); }
    .omv-kpi-muted .omv-kpi-val { color: var(--om-text-muted); }

    /* Tabla */
    .omv-table-card { background: var(--om-surface); border: 1px solid var(--om-border); border-radius: var(--om-radius-lg); overflow: hidden; box-shadow: var(--om-shadow-sm); margin-bottom: 16px; }
    .omv-table { width: 100%; border-collapse: collapse; font-size: 14px; }
    /* A96: acotada a Movimientos (.ommov-wrap). Sin acotar, esta copia —que carga al final— le ponia
       gris a la cabecera indigo del listado de Cotizaciones/Ventas en cuanto el th global dejo de imponer color. */
    .ommov-wrap .omv-table thead th { background: var(--om-surface-alt); text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--om-text-muted); padding: 12px 16px; border-bottom: 1px solid var(--om-border); }
    .omv-table tbody td { padding: 14px 16px; border-bottom: 1px solid var(--om-border); vertical-align: middle; }
    .omv-table tbody tr:last-child td { border-bottom: 0; }
    .omv-th-right, .omv-td-monto { text-align: right; font-variant-numeric: tabular-nums; }
    .omv-td-fecha { font-weight: 600; color: var(--om-text); white-space: nowrap; }
    .omv-td-entidad { font-weight: 600; color: var(--om-text); }
    .omv-td-folio { font-family: ui-monospace, 'SF Mono', Menlo, monospace; color: var(--om-text-muted); font-size: 12px; }
    .omv-td-monto { font-weight: 700; color: var(--om-text); }
    .omv-moneda-mini { font-size: 11px; font-weight: 600; color: var(--om-text-faint); margin-left: 2px; }

    /* Chips estado */
    .omv-chip { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
    .omv-chip-success { background: var(--om-success-light); background: color-mix(in srgb, var(--om-success) 12%, transparent); color: var(--om-success); }
    .omv-chip-warning { background: var(--om-warning-light); background: color-mix(in srgb, var(--om-warning) 14%, transparent); color: var(--om-warning-dark); }
    .omv-chip-danger  { background: var(--om-danger-light); background: color-mix(in srgb, var(--om-danger) 12%, transparent); color: var(--om-danger); }
    .omv-chip-muted   { background: var(--om-surface-alt); color: var(--om-text-muted); }

    /* Botón acción */
    /* El texto va en BLANCO fijo, no en var(--om-surface): el fondo es el
       indigo de marca, que no cambia con el tema, y la superficie si. Con el
       tema oscuro puesto quedaba #171e2e sobre #29108f — 1.24:1. Blanco sobre
       ese indigo mide 13.42:1 en los dos temas. */
    .omv-btn-accion { display: inline-flex; align-items: center; gap: 4px; padding: 7px 12px; background: var(--om-primary); color: #ffffff; text-decoration: none; border-radius: 8px; font-size: 12px; font-weight: 600; white-space: nowrap; transition: background 0.15s; }
    .omv-btn-accion i { width: 13px; height: 13px; }
    .omv-btn-accion:hover { background: var(--om-primary-dark); color: #ffffff; }
    .omv-td-accion { text-align: right; }

    /* Sin fecha */
    .omv-sinfecha-head { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--om-text-muted); margin: 24px 0 8px; }

    /* Vacío */
    .omv-empty { text-align: center; padding: 48px 24px; background: var(--om-surface); border: 1px solid var(--om-border); border-radius: var(--om-radius-lg); box-shadow: var(--om-shadow-sm); }
    .omv-empty i { width: 48px; height: 48px; color: var(--om-success); }
    .omv-empty-title { font-size: 16px; font-weight: 700; color: var(--om-text); margin-top: 12px; }
    .omv-empty-sub { font-size: 13px; color: var(--om-text-muted); margin: 6px 0 0; }

    /* Responsive — colapsar a cards apiladas en móvil */
    @media (max-width: 740px) {
        .omv-kpis { grid-template-columns: 1fr; }
        .omv-table thead { display: none; }
        .omv-table tbody tr { display: block; padding: 14px; border-bottom: 1px solid var(--om-border); }
        .omv-table tbody tr:last-child { border-bottom: 0; }
        .omv-table tbody td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 0; border: 0; text-align: left; }
        .omv-table tbody td[data-label]::before { content: attr(data-label); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--om-text-muted); }
        .omv-table tbody td[data-label='']::before { content: none; }
        .omv-td-monto, .omv-th-right { text-align: right; }
        .omv-td-accion { justify-content: flex-end !important; }
    }
    
    
    /* Fase 4A TravelDesk (2026-06-10): barra que alinea los tabs a la izquierda
     * y el boton "Cuentas bancarias" a la derecha. ASCII puro en comentarios. */
    .ommov-wrap .ommov-tabs-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        flex-wrap: wrap;
        margin-bottom: 24px;
    }
    .ommov-wrap .ommov-tabs-bar .omv-tabs {
        margin-bottom: 0;
        flex: 1 1 auto;
        /* QUE SE DESLICEN ELLAS, NO LA PANTALLA (12-sep-2026). Con flex-wrap
           nowrap y min-width:auto, las seis pestañas exigen 582 px: a 375 px
           arrastraban el <main> a 646 y la pagina ENTERA se iba de lado 271 px
           —medido—, y las tarjetas heredaban ese ancho. Con min-width:0 la caja
           puede encogerse, y con overflow-x:auto lo ancho se desliza DENTRO de
           lo suyo. La pagina nunca hace scroll horizontal. */
        min-width: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .ommov-wrap .ommov-tabs-bar .omv-tabs .omv-tab { flex: 0 0 auto; white-space: nowrap; }
    @media (max-width: 600px) {
        .ommov-wrap .ommov-tabs-bar { align-items: stretch; }
    }

    /* Fase 2 TravelDesk (2026-06-10): los tabs del wrapper reusan el patron
     * .omv-tabs/.omv-tab definido en ventas-modulo.php (cargado por shortcode
     * de Ventas). Cuando se aterriza directo en /mi-cuenta/movimientos/ los
     * estilos podrian no estar cargados; replicamos un minimo aqui acotado
     * a .ommov-wrap para evitar dependencia. ASCII puro en comentarios. */
    .ommov-wrap .omv-tabs {
        display: flex;
        gap: 0;
        border-bottom: 1px solid #e4e4e7;
        margin-bottom: 24px;
        padding-left: 4px;
    }
    .ommov-wrap .omv-tab {
        padding: 12px 18px;
        font-size: 14px;
        font-weight: 600;
        color: #71717a;
        text-decoration: none !important;
        border-bottom: 2px solid transparent;
        margin-bottom: -1px;
        transition: color 0.15s, border-color 0.15s;
    }
    .ommov-wrap .omv-tab:hover { color: #18181b; }
    .ommov-wrap .omv-tab.is-active {
        color: #29108F;
        border-bottom-color: #29108F;
    }