/**
 * Diseño del panel — PORTE del sistema de TravelDesk, no una version propia.
 *
 * FUENTES (copiadas, no reinterpretadas):
 *  - om-agencias/assets/css/tokens.css  -> el bloque :root de abajo, tal cual.
 *  - om-agencias/includes/cotizaciones.php (estilos del listado real) -> las
 *    clases omc-cotiz-*, omc-card, pills, tabla, botones y filtros.
 *  - Regla de marca del proyecto: degradado SOLO en el menu lateral y en
 *    precio/TOTAL; el resto indigo solido #29108F.
 *
 * Si el diseño cambia en OM, este archivo se actualiza EN EL MISMO cambio:
 * es la misma disciplina que la del motor de cotizacion y la del detalle de
 * partida — una fuente, copiada, no dos que divergen.
 */

/* ===== tokens (tokens.css, MASTER) =====
 * A91 (18-sep-2026): sincronizado con om-agencias/assets/css/tokens.css. Faltaban
 * diez (success-dark, success-border, shadow-focus, rosa/magenta-sobre-texto,
 * gris-ayuda, ops-sobre-barra y -tenue, verde-cobro y -fondo); sin ellos, once
 * pantallas escribian #576478 y #52525b a mano. Solo los valores del modo
 * claro: el panel no trae el bloque oscuro del master. */
:root {
	--om-primary:        #29108F;
	--om-primary-dark:   #1D0A66;
	--om-primary-light:  #F1EDFB;
	--om-primary-border: #C7BDEB;
	--om-success:        #16A34A;
	--om-success-light:  #DCFCE7;
	--om-success-dark:   #047857;
	--om-success-border: #A7F3D0;
	--om-danger:         #DC2626;
	--om-danger-light:   #FEE2E2;
	--om-warning:        #F59E0B;
	--om-warning-light:  #FEF3C7;
	--om-warning-dark:   #92400E;
	--om-text:           #0F172A;
	--om-text-muted:     #475569;
	--om-text-faint:     #576478; /* A96: = --om-gris-ayuda; era #94A3B8 (2.56:1). Ver tokens.css. */
	--om-border:         #E2E8F0;
	--om-border-strong:  #CBD5E1;
	--om-surface:        #FFFFFF;
	--om-surface-alt:    #F8FAFC;
	--om-surface-hover:  #F1F5F9;
	--om-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--om-radius-sm: 6px;
	--om-radius-md: 10px;
	--om-radius-lg: 14px;
	--om-shadow-sm: 0 1px 2px rgba(15,23,42,.06);
	--om-shadow-focus: 0 0 0 3px rgba(41,16,143,.2);
	--om-sidebar-deep: #1A0857;
	--om-sidebar-mid:  #29108F;
	--om-magenta:      #EC199C;
	--om-rosa-sobre-texto:    #DC1290;
	--om-magenta-sobre-texto: #BF3CB8;
	--om-gris-ayuda:   #576478;
	--om-ops-sobre-barra:       #27272A;
	--om-ops-sobre-barra-tenue: #52525B;
	--om-verde-cobro:       #0F7A6A;
	--om-verde-cobro-fondo: #E7F5F2;
	--om-canvas:       #F4F6FB;
	/* B1 (Fabian, 20-sep-2026): EL COLOR DE CADA CLASIFICACION VIGENTE SE DEFINE AQUI Y SOLO AQUI.
	   La tarjeta Activas (barra y leyenda), las pastillas de clasificacion y los eventos de la
	   Agenda lo consumen por var(); ninguno escribe el color a mano. Instruccion textual: rojo en
	   preparacion, amarillo en cotizacion enviada, morado en seguimiento, verde pendiente de
	   anticipo. Cada uno apunta a un token que ya existia y que pasa 4.5:1 sobre --om-surface
	   (medido con tests/b1-medir.js): danger 4.83, warning-dark 7.51, primary 12.5, success-dark 5.48.
	   El amarillo y el verde son los tonos OSCUROS de su familia porque los claros (#F59E0B 2.15,
	   #16A34A 3.30) no llegan a 4.5 sobre blanco; morado = el indigo de marca, que es el «purple»
	   que ya usaba .omv-tag-purple. */
	--om-clas-en_preparacion:     var(--om-danger);
	--om-clas-cotizacion_enviada: var(--om-warning-dark);
	/* VARIANTE A UN PASO (Fabian decide, 21-sep-2026): el amarillo CLARO de la familia. Para
	   ponerla: cambiar la linea de arriba por la de abajo Y activar la regla de texto oscuro de
	   la pastilla (.omv-tag--cotizacion_enviada, mas abajo). Medido: #F59E0B da 2.15:1 sobre
	   blanco, 1.96 sobre la pista de la barra, 1.86-2.07 sobre las celdas de la Agenda: NO pasa
	   4.5:1 en ningun fondo del panel. Solo el TEXTO de la pastilla se salva con --om-text
	   encima (8.31:1); el blanco encima da 2.15.
	--om-clas-cotizacion_enviada: var(--om-warning); */
	--om-clas-en_seguimiento:     var(--om-primary);
	--om-clas-pendiente_anticipo: var(--om-success-dark);
	--om-gradient-brand: linear-gradient(135deg,#29108F 0%,#5C1F9E 55%,#C33FBC 100%);
	--om-radius-card: 15px;
	--om-shadow-card: 0 1px 3px rgba(15,23,42,.04), 0 4px 12px rgba(15,23,42,.04);
	--om-shadow-card-hover: 0 2px 6px rgba(15,23,42,.06), 0 10px 24px rgba(15,23,42,.08);
}

/* NADA GLOBAL EN ESTA HOJA. Ni tipografia, ni fondo del body, ni un a{} suelto.
 *
 * El portal usa INTER y la pone om-portal.css. Y `a { color: ... }` estaba aqui
 * como herencia del chasis inventado: como esta hoja carga al final, ese
 * selector de un solo elemento se colaba en TODOS los enlaces del chasis
 * portado, incluidos los del menu lateral. Los modulos de OM no declaran nada
 * global: heredan. Esta hoja hace lo mismo. */

/* ===== layout: LO PONE EL CHASIS PORTADO =====================================
 * El shell inventado (.pa-shell / .pa-side / .pa-nav / .pa-main / .pa-top /
 * .pa-body) se RETIRO en el Bloque 1. El menu lateral, la barra superior y el
 * lienzo son ahora los del portal real, y viven en assets/portal/om-portal*.css
 * copiadas del theme: .omp-app-topbar, .omp-app-sidebar, .omp-app-main.
 *
 * Esta hoja se carga DESPUES de todas ellas a proposito: en OM los estilos de
 * cada modulo van en un <style> dentro del body, es decir despues de las hojas
 * encoladas. Cargarla al final reproduce esa misma cascada.
 * ========================================================================== */

/* ===== A91: titulo de primer nivel y base de botones ====================
 * El h1 lo normaliza om-portal-v2.css (.omp-app-main h1: 23px/700, 0 0 4px,
 * !important). Aqui solo la separacion del bloque que pone el chrome cuando la
 * pantalla no trae h1 propio, y la BASE comun de las familias de boton que
 * viven en este plugin (las del portal copiado ya la tienen en v2). Los nombres
 * de clase no cambian: hay JS enganchado a ellos. La base son los tokens de
 * color, radio y tipografia; el tamano de cada familia se queda. */
.pa-h1-bloque { margin: 0 0 20px; }
/* A95: el saludo del Pulso dejó de ser h1 (un solo título de primer nivel) y
   conserva el tamaño que le daba la normalización de h1 (23px/700). */
.omh-greet .omh-greet-title { font-size: 23px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 4px; }
/* A95: las subdivisiones de la lista son chips-enlace; el chip ya existe, esto solo evita el subrayado del enlace */
.omv-tabs-seg-sub { margin: 0 0 16px; }
.omv-tabs-seg-sub .omflt-chip,
.omv-cuentas .omflt .omflt-chip { text-decoration: none; }   /* un chip no se subraya (medido en la captura del 22-sep) */
/* B2 (22-sep-2026): la pestaña Cuentas. Las tarjetas de cuenta son la MISMA tarjeta omv-kpi, como enlace;
   la elegida lleva borde y fondo de los tokens de marca (los del chip is-on); las demás no se atenúan
   con opacidad (bajaría el contraste): sólo la elegida se distingue. Cero hex. */
.omv-cuentas-kpis a.omv-kpi { text-decoration: none; color: inherit; display: block; }
.omv-cuenta-card.is-on { border-color: var(--om-primary); background: var(--om-primary-light); box-shadow: var(--om-shadow-focus); }
.omv-cuenta-card.is-inactiva .omv-kpi-label { text-decoration: line-through; }
.omv-cuentas .omv-kpi-value small { font-size: 12px; font-weight: 600; color: var(--om-gris-ayuda); }
.omv-cuentas .omh-section-label { margin: 18px 0 8px; }
.omv-cuentas .omv-table-estado .omv-td-num { text-align: right; font-variant-numeric: tabular-nums; }
/* la tabla del estado de cuenta se desliza DENTRO de su tarjeta, no la pagina (12-oct-2026): a 375 px medía 430 y
   la pagina entera se iba 55 px de lado. Mismo remedio que las pestañas de Movimientos (om-movimientos.css, 12-sep). */
.omv-cuentas .omv-cuentas-estado { margin-bottom: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* la fecha no se parte en dos renglones (medido: «2026-08-06» caia partido) */
.omv-cuentas .omv-table-estado tbody td:first-child { white-space: nowrap; }
/* el renglon de totales del estado de cuenta: los MISMOS numeros de las tarjetas del periodo */
.omv-cuentas .omv-table-estado tfoot .omv-estado-total td { border-top: 2px solid var(--om-border); font-size: 13px; color: var(--om-gris-ayuda); }
/* TODAS LAS TARJETAS DE CUENTA MIDEN LO MISMO (Fabian, 22-sep-2026): «en este caso con 3 dejalos
   del mismo tamano, se ve raro». Con auto-fit las tarjetas se REPARTIAN el ancho: medido, con 2
   cuentas cada una media 525px y con 4 media 257px, y ninguna coincidia con las del periodo (257).
   Aqui la rejilla es de 4 columnas fijas: una tarjeta mide lo mismo haya 1, 3 o 4, y lo mismo que
   una tarjeta del periodo. El nombre largo no la estira: la columna manda (min-width:0). */
.omv-cuentas .omv-cuentas-kpis,
.omv-cuentas .omv-cuentas-estado-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; grid-auto-rows: 1fr; }
.omv-cuentas .omv-cuentas-kpis > *, .omv-cuentas .omv-cuentas-estado-kpis > * { min-width: 0; }
/* los cuatro numeros del periodo: el saldo final es el que cierra la cuenta, con la resta escrita debajo */
.omv-cuentas .omv-cuenta-final { border-color: var(--om-primary); }
.omv-cuentas .omv-cuenta-card .omv-kpi-label { overflow-wrap: anywhere; }
@media (max-width: 1100px) { .omv-cuentas .omv-cuentas-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .omv-cuentas .omv-cuentas-kpis, .omv-cuentas .omv-cuentas-estado-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .omv-cuentas .omv-cuentas-kpis, .omv-cuentas .omv-cuentas-estado-kpis { grid-template-columns: 1fr; } }
/* A96: distribución de Activas por subclasificación (barra apilada con divs y tokens; sin colores nuevos) */
.omv-kpi-dist { margin-top: 10px; }
.omv-kpi-dist-bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--om-surface-hover); }
.omv-kpi-dist-seg { height: 100%; flex: 0 0 auto; }
.omv-kpi-dist-leg { display: flex; flex-wrap: wrap; gap: 3px 10px; margin-top: 6px; font-size: 11px; line-height: 1.3; color: var(--om-gris-ayuda); }
.omv-kpi-dist-item { white-space: nowrap; }
.omv-kpi-dist-item b { font-weight: 700; color: var(--om-text); }
.omv-kpi-dist-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: 0; }
/* B1: la barra, la leyenda Y la pastilla de cada clasificacion leen el mismo token --om-clas-* (arriba, en :root). */
.omv-kpi-dist--en_preparacion,     .omv-tag--en_preparacion     { background: var(--om-clas-en_preparacion); }
.omv-kpi-dist--cotizacion_enviada, .omv-tag--cotizacion_enviada { background: var(--om-clas-cotizacion_enviada); }
.omv-kpi-dist--en_seguimiento,     .omv-tag--en_seguimiento     { background: var(--om-clas-en_seguimiento); }
.omv-kpi-dist--pendiente_anticipo, .omv-tag--pendiente_anticipo { background: var(--om-clas-pendiente_anticipo); }
/* la pastilla es el mismo .omv-tag de siempre (om-ventas.css), relleno solido con texto blanco: el color
   pasa 4.5:1 sobre la pagina y el blanco pasa 4.5:1 sobre el color (los cuatro, medidos) */
.omv-tag[class*="omv-tag--"] { color: var(--om-surface); }
/* VARIANTE del amarillo claro (ver :root): con var(--om-warning) de fondo el texto tiene que ser oscuro.
.omv-tag--cotizacion_enviada { color: var(--om-text); } */
.omw-btn, .omcl-btn, .omc-btn-export {
	font-family: inherit; font-weight: 600; border-radius: var(--om-radius-sm);
	cursor: pointer; text-decoration: none; display: inline-flex; align-items: center;
	transition: background .15s, border-color .15s, color .15s;
}
/* ===== KPIs (omc-cotiz-kpis) ===== */
.omc-cotiz-kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 20px; }
@media (max-width: 900px) { .omc-cotiz-kpis { grid-template-columns: repeat(2,1fr); } }
.omc-cotiz-kpi {
	background: var(--om-surface); border: 1px solid var(--om-border);
	border-radius: var(--om-radius-card); padding: 16px; box-shadow: var(--om-shadow-card);
	transition: box-shadow .15s, transform .15s;
}
.omc-cotiz-kpi:hover { box-shadow: var(--om-shadow-card-hover); transform: translateY(-1px); }
.omc-cotiz-kpi-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--om-text-muted); font-weight: 600; margin-bottom: 6px; }
.omc-cotiz-kpi-value { font-size: 24px; font-weight: 700; color: #18181b; }
.omc-cotiz-kpi-value.dinero { font-size: 19px; }
/* EL MISMO DEFECTO QUE EL BOTON, en otra esquina: aqui vivia un
 * `.omc-cotiz-kpi-value.marca` que pintaba el numero con el degradado de marca
 * usando background-clip:text + color:transparent. om-portal-v2.css declara
 * `.omc-cotiz-kpi-value { color: var(--v2-text) !important }`, que anula el
 * transparente: el numero quedaba en tinta oscura SOBRE el degradado, en razon
 * 1.33. Lo atrapo el arnes de contraste. v2 manda en el valor del KPI, igual
 * que en TravelDesk; el degradado de marca se queda donde v2 no opina. */

/* ===== filtros (omc-cotiz-filters) ===== */
.omc-cotiz-filters { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.omc-filter-select, .omc-filter-input {
	padding: 8px 12px; font-size: 13px; border: 1px solid var(--om-border-strong);
	border-radius: var(--om-radius-sm); background: var(--om-surface); font-family: inherit; color: var(--om-text);
}
.omc-filter-input { flex: 1; min-width: 220px; }
.omc-filter-select:focus, .omc-filter-input:focus { outline: none; border-color: var(--om-primary); box-shadow: 0 0 0 3px rgba(41,16,143,.15); }
.omc-filter-conteo { align-self: center; font-size: 12.5px; color: var(--om-text-muted); }

/* ===== cards y tabla (omc-card / omc-cotiz-table) ===== */
.omc-card { background: var(--om-surface); border: 1px solid var(--om-border); border-radius: var(--om-radius-card); box-shadow: var(--om-shadow-card); margin-bottom: 16px; }
.omc-card-padded { padding: 18px 20px; }
.omc-card h2 { font-size: 15px; font-weight: 700; margin-bottom: 12px; }
.omc-cotiz-table-card { overflow-x: auto; }
.omc-cotiz-table { width: 100%; border-collapse: collapse; }
.omc-cotiz-table th {
	text-align: left; padding: 10px 12px; font-size: 11px; text-transform: uppercase;
	letter-spacing: .05em; color: var(--om-text-muted); font-weight: 600;
	background: var(--om-surface-alt); border-bottom: 1px solid var(--om-border);
	white-space: nowrap;
}
.omc-cotiz-table td { padding: 12px; font-size: 13px; color: #3f3f46; border-bottom: 1px solid #f3f4f6; vertical-align: middle; }
.omc-cotiz-table tbody tr:hover { background: var(--om-surface-alt); }
.omc-cotiz-table .num { text-align: right; white-space: nowrap; }
.omc-row-link { cursor: pointer; transition: background .15s; }
/* El realce de fila lo pone om-portal-v2.css con `tr:hover td` !important, que
 * pinta encima de cualquier fondo puesto en el <tr>. Aqui solo queda el cursor. */
.omc-folio-link { color: var(--om-primary); text-decoration: none; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-weight: 700; }
.omc-folio-link:hover { text-decoration: underline; }

/* ===== pills de estado (omc-cotiz-pill + dot) ===== */
.omc-cotiz-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 11px; font-size: 11px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.omc-cotiz-dot { width: 6px; height: 6px; border-radius: 50%; }

/* ===== botones =====
 *
 * EL DEFECTO QUE COSTO EL RECHAZO DEL BLOQUE 1, Y SU LECCION.
 * Este boton quedo con fondo rgb(247,244,252) y letra rgb(255,255,255): letra
 * blanca sobre fondo blanco. Existia y no se veia.
 *
 * La causa NO fue un color mal elegido: fue pelearle la cascada al original.
 * om-portal-v2.css reestiliza TODA la familia .omc-* con !important —es el
 * refinamiento del tema, y en OM gana sobre el <style> del modulo—; aqui el
 * fondo de v2 ganaba (lleva !important) y mi `color:#fff !important` ganaba
 * sobre el color de v2. Ni una cosa ni la otra: una mezcla rota que en OM no
 * existe.
 *
 * Se deja de pelear. v2 manda en el color, el fondo y el borde, igual que en
 * TravelDesk. Aqui solo queda lo que v2 no declara: la caja del enlace. */
.omc-ver-btn {
	display: inline-flex; align-items: center; gap: 4px;
	text-decoration: none !important; white-space: nowrap;
}
.omc-btn-export {
	display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px;
	background: var(--om-surface); color: var(--om-primary); border: 1px solid var(--om-primary-border);
	font-size: 13px;
}
.omc-btn-export:hover { background: var(--om-primary-light); border-color: var(--om-primary); }
.omc-back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--om-primary); text-decoration: none; font-size: 13.5px; font-weight: 600; margin-bottom: 14px; }
.omc-back-link:hover { text-decoration: underline; }

/* ===== encabezado de seccion ===== */
.omp-section-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.omp-section-title { font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.omp-section-title .conteo { color: var(--om-text-faint); font-weight: 600; font-size: 14px; }

/* ===== detalle de partidas (dk/dv de omagen_partida_detalle) ===== */
.det { font-size: 12.5px; line-height: 1.7; color: var(--om-text-muted); margin-top: 4px; }
.det > span { margin-right: 12px; white-space: nowrap; }
.dk { color: var(--om-text-faint); font-weight: 600; }
.dv { color: var(--om-text-muted); }
.tipo-chip { display: inline-block; background: var(--om-primary-light); color: var(--om-primary); border: 1px solid var(--om-primary-border); border-radius: 999px; padding: 2px 10px; font-size: 11px; font-weight: 700; }

/* ===== totales del expediente ===== */
.pa-tot-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(190px,1fr)); gap: 12px; }
.pa-tot { border: 1px solid var(--om-border); border-radius: var(--om-radius-md); padding: 12px 14px; background: var(--om-surface-alt); }
.pa-tot .l { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--om-text-muted); font-weight: 600; }
.pa-tot .v { font-size: 17px; font-weight: 800; margin-top: 4px; }
.pa-tot .v.marca { background: var(--om-gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pa-tot.saldo { background: var(--om-warning-light); border-color: #fde68a; }
.pa-tot.saldo .v { color: var(--om-warning-dark); }
.pa-tot.ok { background: var(--om-success-light); border-color: var(--om-success-border); }
.pa-tot.ok .v { color: var(--om-success-dark); }

.mut { color: var(--om-text-muted); font-size: 13px; }
.omc-empty-state { padding: 32px 16px; text-align: center; color: var(--om-text-muted); }
.cancelado td { color: var(--om-text-faint); text-decoration: line-through; }
.pa-aviso { background: var(--om-primary-light); border: 1px solid var(--om-primary-border); border-radius: var(--om-radius-md); padding: 10px 14px; font-size: 12.5px; color: var(--om-primary-dark); margin-top: 14px; }

@media (max-width: 780px) {
	.omp-app-main { padding: 16px; }
}

/* ===== captura de cotización — PORTE de modal-cotizacion-libre.php ==========
 *
 * FUENTE: om-agencias/includes/modal-cotizacion-libre.php, bloque <style> de la
 * linea 197. Es la pantalla de captura REAL de TravelDesk. Los valores estan
 * copiados, no reinterpretados: mismo borde 1.5px, mismo radio 7px, mismo foco
 * indigo rgba(41,16,143,.12), mismas etiquetas en mayusculas de 11px, mismo
 * degradado lila del bloque de totales.
 *
 * Se mantiene el prefijo .omcl-* a proposito: es la MISMA hoja, no una version
 * del panel. Si cambia alla, cambia aqui en el mismo cambio.
 *
 * LO UNICO QUE NO ES PORTE (y por que): el normalizado de select y de los
 * campos de fecha. OM no lo tiene — sus selects y calendarios son los nativos
 * del navegador y por eso se ven distintos en cada computadora. Se agrega aqui
 * con los tokens que YA existen (indigo #29108F, borde #e2e8f0, radio 7px):
 * sin colores ni tipografias nuevas. Va marcado abajo.
 * ========================================================================= */

/* --- chasis del modal (verbatim) ---
 * No estaba en el primer porte porque la captura era una PAGINA. Al volverla
 * modal, estas 11 reglas son el modal mismo: sin ellas el bloque queda visible
 * en linea, empujando la lista hacia abajo. */
.omcl-modal { display: none; position: fixed; inset: 0; z-index: 100000; align-items: center; justify-content: center; }
.omcl-modal.is-visible { display: flex; }
.omcl-modal-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,0.55); backdrop-filter: blur(4px); }
.omcl-modal-content { position: relative; width: min(840px, 96vw); max-height: 92vh; background: var(--om-surface); border-radius: var(--om-radius-lg); box-shadow: 0 20px 50px rgba(15,23,42,0.30); display: flex; flex-direction: column; overflow: hidden; }
.omcl-modal-header { padding: 16px 22px; border-bottom: 1px solid #eef0f3; display: flex; justify-content: space-between; align-items: center; }
.omcl-modal-title { font-size: 16px; font-weight: 700; color: var(--om-text); margin: 0; }
.omcl-modal-close { background: transparent; border: none; font-size: 24px; color: #64748b; cursor: pointer; line-height: 1; padding: 4px 8px; }
.omcl-modal-close:hover { color: var(--om-text); }
.omcl-modal-body { flex: 1; overflow-y: auto; padding: 18px 22px; }
.omcl-modal-footer { padding: 14px 22px; border-top: 1px solid #eef0f3; background: #fafafa; display: flex; justify-content: flex-end; gap: 10px; }

/* --- fieldsets y campos (verbatim) --- */
.omcl-fset { border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px 14px 6px; margin-bottom: 14px; background: var(--om-surface); }
.omcl-fset legend { padding: 0 6px; font-size: 11px; font-weight: 700; color: var(--om-primary); text-transform: uppercase; letter-spacing: 0.06em; }
/* DATOS DE TODA LA COTIZACION (Fabian, 7-oct-2026): su propio recuadro, distinto de las tarjetas de
   servicio (blancas/grises, borde gris) y separado de ellas. Indigo claro del portal; la ayuda gris
   (--om-gris-ayuda) ya cumple 5.21:1 sobre este fondo. */
.omcl-fset.omcl-fset-general { background: var(--om-primary-light); border: 2px solid var(--om-primary-border); border-radius: 12px; margin-top: 22px; padding: 14px 16px 8px; }
.omcl-fset.omcl-fset-general legend { font-size: 13px; text-transform: none; letter-spacing: 0; padding: 3px 10px; background: var(--om-primary-light); border: 2px solid var(--om-primary-border); border-radius: 999px; }
.omcl-field { margin-bottom: 10px; }
.omcl-field label { display: block; font-size: 11px; font-weight: 600; color: #334155; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.04em; }
.omcl-req { color: var(--om-danger); }
.omcl-field input, .omcl-field select, .omcl-field textarea { width: 100%; padding: 8px 10px; border: 1.5px solid var(--om-border); border-radius: 7px; font-size: 13px; color: var(--om-text); font-family: inherit; box-sizing: border-box; }
.omcl-field input:focus, .omcl-field select:focus, .omcl-field textarea:focus { outline: none; border-color: var(--om-primary); box-shadow: 0 0 0 3px rgba(41,16,143,0.12); }
.omcl-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.omcl-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.omcl-grid-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 10px; }
@media (max-width: 600px) { .omcl-grid-2, .omcl-grid-3, .omcl-grid-4 { grid-template-columns: 1fr; } }

/* --- filas de servicio (verbatim) --- */
.omcl-item-row { border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px; margin-bottom: 10px; background: #fafafa; position: relative; }
.omcl-item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.omcl-item-title { font-size: 12px; font-weight: 700; color: var(--om-primary); text-transform: uppercase; letter-spacing: 0.04em; }
.omcl-item-remove { background: transparent; border: none; color: var(--om-danger); cursor: pointer; font-size: 13px; padding: 2px 8px; border-radius: 4px; font-family: inherit; }
.omcl-item-remove:hover { background: var(--om-danger-light); }
.omcl-item-actions { display: inline-flex; gap: 4px; align-items: center; }
.omcl-item-dup { background: transparent; border: none; color: #3f3f46; cursor: pointer; font-size: 13px; padding: 2px 8px; border-radius: 4px; font-family: inherit; }
.omcl-item-dup:hover { background: #f4f4f5; }
/* Plegado (6-oct-2026): con dos o mas servicios, las tarjetas que no se editan
 * quedan en una linea. Clase, no [hidden]: los campos siguen en la pagina. */
.omcl-item-resumen { display: none; }
.omcl-item-row.is-plegada { padding: 8px 12px; cursor: pointer; }
.omcl-item-row.is-plegada > :not(.omcl-item-header) { display: none; }
.omcl-item-row.is-plegada .omcl-item-header { margin-bottom: 0; gap: 10px; }
.omcl-item-row.is-plegada .omcl-item-title { flex: 0 0 auto; }
.omcl-item-row.is-plegada .omcl-item-resumen { display: block; flex: 1 1 auto; min-width: 0; text-align: left; background: transparent; border: none; padding: 2px 0; font: inherit; font-size: 13px; color: #3f3f46; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- totales (verbatim): aqui vive el peso visual del dinero --- */
.omcl-totals { margin-top: 14px; padding: 12px 14px; background: linear-gradient(135deg, #faf5ff 0%, var(--om-primary-light) 100%); border-radius: 8px; border: 1px solid #e9d8fd; }
.omcl-totals-row { display: flex; justify-content: space-between; font-size: 13px; color: #3f3f46; padding: 3px 0; }
.omcl-totals-row strong { color: #18181b; font-size: 14px; }
.omcl-totals-comision { padding-top: 8px; margin-top: 6px; border-top: 1px dashed #d6b9ee; }
.omcl-totals-comision strong { color: var(--om-primary); font-size: 15px; }
.omcl-pct { color: #71717a; font-size: 12px; font-weight: 400; }

/* --- botones (verbatim) --- */
.omcl-btn { padding: 8px 16px; font-size: 13px; border: 1.5px solid transparent; }
.omcl-btn-sm { padding: 6px 12px; font-size: 12px; }
.omcl-btn-primary { background: var(--om-primary); color: var(--om-surface); border-color: var(--om-primary); }
.omcl-btn-primary:hover { background: var(--om-primary-dark); }
.omcl-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
.omcl-btn-ghost { background: var(--om-surface); color: #3f3f46; border-color: #d4d4d8; }
.omcl-btn-ghost:hover { background: #fafafa; border-color: #a1a1aa; }
#omcl-add-item { background: var(--om-primary); color: var(--om-surface); border-color: var(--om-primary); }
#omcl-add-item:hover { background: #1f0c6e; border-color: #1f0c6e; }

/* --- aviso de comision sin configurar (tokens de warning que ya existen) --- */
.omcl-sin-comision {
	margin-top: 6px; padding: 8px 11px; font-size: 12px; line-height: 1.45;
	background: var(--om-warning-light); border: 1px solid #fde68a;
	border-radius: 7px; color: var(--om-warning-dark); font-weight: 500;
}
.omcl-sin-comision[hidden] { display: none; }

/* --- pie de la pantalla: mismo footer del modal, en pagina --- */
.omcl-footer { padding: 14px 0 0; border-top: 1px solid #eef0f3; display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.omcl-nota { font-size: 12px; color: #71717a; line-height: 1.5; margin-top: 8px; }
.pa-aviso.malo { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

/* --- RETIRADO 10-ago-2026: el normalizado de select y fecha ----------------
 * Aqui vivia un bloque MIO (no porte) que le quitaba el aspecto nativo a los
 * select y les pintaba una flecha SVG indigo. La razon que me di —"OM deja los
 * nativos y se ven distinto en cada computadora"— era interpretacion, no
 * porte, y produjo un defecto medible: en la captura lado a lado, los tres
 * select del panel (Tipo, Tipo de habitacion, Regimen) se veian como CAJAS DE
 * TEXTO, sin flecha ni ninguna senal de que se despliegan. En OM si la tienen.
 *
 * Un control que no se anuncia como control es peor que uno que se ve distinto
 * en cada maquina. Se quita el bloque entero: los select del panel vuelven a
 * ser nativos, identicos a los de TravelDesk. El original manda. */
.omcl-field input[type="number"]::-webkit-outer-spin-button,
.omcl-field input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* --- carrusel de productos OM: VERBATIM del original (Fase B) ---
 * Copiado tal cual del bloque <style> de modal-cotizacion-libre.php.
 * La tarjeta mide 180px y la imagen 100px de alto: esos dos numeros son
 * el carrusel. Si cambian alla, cambian aqui en el mismo cambio. */
.omcl-prod-filtros { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.omcl-prod-filtros .omcl-prod-search { flex:1 1 200px; padding:8px 10px; border:1.5px solid var(--om-border); border-radius:7px; font-size:13px; font-family:inherit; box-sizing:border-box; }
.omcl-prod-filtros .omcl-prod-tipo { flex:0 0 auto; padding:8px 10px; border:1.5px solid var(--om-border); border-radius:7px; font-size:13px; font-family:inherit; }
.omcl-prod-filtros input:focus, .omcl-prod-filtros select:focus { outline:none; border-color:var(--om-primary); box-shadow:0 0 0 3px rgba(41,16,143,0.12); }
.omcl-prod-carrusel { display:flex; gap:10px; overflow-x:auto; padding:12px 2px 6px; margin-top:10px; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; }
.omcl-prod-carrusel::-webkit-scrollbar { height:8px; }
.omcl-prod-carrusel::-webkit-scrollbar-thumb { background:#d4d4d8; border-radius:4px; }
.omcl-prod-carrusel::-webkit-scrollbar-track { background:transparent; }
.omcl-prod-msg { font-size:12.5px; color:#71717a; padding:10px 2px; }
.omcl-prod-card { position:relative; flex:0 0 auto; width:180px; border:1.5px solid #e5e7eb; border-radius:var(--om-radius-md); background:var(--om-surface); cursor:pointer; overflow:hidden; transition:all .15s; text-align:left; font-family:inherit; padding:0; }
.omcl-prod-card:hover { border-color:var(--om-primary); box-shadow:0 8px 18px rgba(41,16,143,0.12); transform:translateY(-2px); }
.omcl-prod-card.is-selected { border-color:#7c3aed; box-shadow:0 0 0 2px rgba(124,58,237,0.30); }
.omcl-prod-card-img { width:100%; height:100px; object-fit:cover; background:var(--om-primary-light); display:block; }
.omcl-prod-card-noimg { width:100%; height:100px; background:var(--om-primary-light); display:flex; align-items:center; justify-content:center; color:var(--om-primary); font-weight:700; }
.omcl-prod-card-body { padding:8px 10px 10px; }
.omcl-prod-card-nombre { font-size:12.5px; font-weight:700; color:#18181b; line-height:1.25; margin-bottom:3px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.omcl-prod-card-meta { font-size:11px; color:#71717a; line-height:1.35; }
.omcl-prod-card-precio { margin-top:5px; font-size:12px; font-weight:700; color:var(--om-primary); }
.omcl-prod-card-check { position:absolute; top:6px; right:6px; width:22px; height:22px; border-radius:50%; background:#7c3aed; color:var(--om-surface); display:none; align-items:center; justify-content:center; font-size:13px; box-shadow:0 1px 4px rgba(0,0,0,0.25); }
.omcl-prod-card.is-selected .omcl-prod-card-check { display:flex; }
.omcl-prod-seleccion { margin-top:10px; font-size:12.5px; color:var(--om-primary); font-weight:600; line-height:1.4; }

/* Periodo arriba de los indicadores de Cotizaciones / Ventas (5-sep-2026).
   El control es el mismo del Pulso (periodo.php); aqui solo su cabecera. */
.omv-period-head { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.omv-period-label { font-size: 11px; font-weight: 700; color: #71717a; text-transform: uppercase; letter-spacing: 0.05em; }
.omv-period { display: inline-flex; gap: 8px; }