/* CRM de prueba · misma identidad del "Panel de su negocio" del prototipo:
   marino #132235, azul #125ACC, amarillo #EAA824, Montserrat; chips de tienda CHISPA / BullMOTORS / Fénix. */
:root { --marino: #132235; --azul: #125ACC; --amarillo: #EAA824; --tx: #1F2937; --tx2: #5B6472; --borde: #E3E7EE; --fondo: #F5F7FA;
  --ch: #FFC400; --bm: #A06D43; --fx: #E30613; --verde: #16A34A; --rojo: #DC2626; --banda-min: 36px; --banda: 52px; --barra: 0px; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--banda) + 10px); }
body { margin: 0; font-family: Montserrat, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 14.5px; line-height: 1.5; color: var(--tx); background: var(--fondo); overflow-x: hidden; padding-top: var(--banda); padding-bottom: calc(var(--barra) + env(safe-area-inset-bottom, 0px)); }
img, svg { display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: not-allowed; opacity: .5; }
/* 16 px en TODO control de formulario: con menos, el iPhone hace zoom al tocarlo. */
input, select, textarea { min-height: 44px; border: 1.5px solid var(--borde); border-radius: 10px; padding: 8px 12px; background: #fff; width: 100%; max-width: 100%; min-width: 0; font-size: 16px; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(18, 90, 204, .15); }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
[hidden] { display: none !important; }
.ic { width: 20px; height: 20px; flex: none; }
h1, h2, h3 { color: var(--marino); margin: 0; letter-spacing: -.01em; }
h2 { font-size: 18px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
h2 small { font-size: 12px; color: var(--tx2); font-weight: 600; }
h3 { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--tx2); margin: 16px 0 8px; }
.simbolo { display: inline-block; width: 22px; height: 22px; flex: none; background-position: center; background-size: contain; background-repeat: no-repeat; }

/* Banda fija arriba */
/* La altura real de la banda la mide app.js y la deja en --banda (el texto ocupa 2-4 líneas según el ancho). */
.banda { position: fixed; top: 0; left: 0; right: 0; z-index: 100; min-height: var(--banda-min); display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 14px; background: #FFF7E0; color: var(--marino); font-size: 12.5px; line-height: 1.3; border-bottom: 1px solid #F1D48A; box-shadow: 0 2px 10px rgba(0, 0, 0, .06); text-align: center; }
.banda .ic { width: 16px; height: 16px; color: #B45309; }

/* Estructura */
.crm { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: calc(100vh - var(--banda)); }
.lado { background: var(--marino); color: #C7CDD8; padding: 20px 14px; position: sticky; top: var(--banda); height: calc(100vh - var(--banda)); display: flex; flex-direction: column; gap: 18px; border-top: 4px solid var(--amarillo); overflow-y: auto; }
.marca { display: flex; gap: 12px; align-items: center; padding: 0 6px; }
.marca-ic { width: 40px; height: 40px; border-radius: 10px; background: var(--amarillo); color: var(--marino); display: flex; align-items: center; justify-content: center; flex: none; }
.marca b { display: block; color: #fff; font-size: 15px; line-height: 1.2; }
.marca small { font-size: 12px; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 10px; font-weight: 600; font-size: 14px; }
.nav a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.nav a.on { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 3px 0 0 var(--amarillo); }
.nav a span { flex: 1; }
.cnt { font-style: normal; background: var(--amarillo); color: var(--marino); font-size: 11.5px; font-weight: 800; min-width: 22px; height: 22px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; }
.lado-tiendas { display: flex; flex-direction: column; gap: 8px; padding: 14px 8px 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.lado-tiendas .t { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: #fff; }
.lado-tiendas .t::before { content: ""; width: 10px; height: 10px; border-radius: 50%; }
.lado-tiendas .ch::before { background: var(--ch); } .lado-tiendas .bm::before { background: var(--bm); } .lado-tiendas .fx::before { background: var(--fx); }
.pie { margin-top: auto; display: flex; align-items: center; gap: 8px; font-size: 11.5px; padding: 0 8px; }
.main { padding: 24px 30px 40px; min-width: 0; }
.pie-main { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 28px; color: var(--tx2); font-size: 12px; font-weight: 600; }
.sinjs { max-width: 560px; margin: 30px auto; background: #fff; border: 1px solid var(--borde); border-radius: 16px; padding: 22px; }
.sinjs h1 { font-size: 22px; margin-bottom: 8px; }
.pie-sinjs { color: var(--tx2); font-size: 12px; }

/* Barra inferior (celular) y hoja "Más" */
.barra { display: none; }
.hoja { position: fixed; inset: 0; z-index: 120; }
.hoja-fondo { position: absolute; inset: 0; background: rgba(10, 18, 30, .45); }
.hoja-caja { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 18px 18px 0 0; padding: 10px 14px calc(16px + env(safe-area-inset-bottom, 0px)); max-height: 80vh; overflow-y: auto; }
.hoja-cab { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 8px; font-size: 16px; color: var(--marino); }
.b-ico { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; }
.hoja-it { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 0 12px; border-radius: 12px; font-weight: 700; color: var(--marino); text-align: left; }
.hoja-it.on { background: #EEF3FC; }
.hoja-it .ic { color: var(--azul); }
.pie-hoja { color: var(--tx2); justify-content: center; margin-top: 10px; }

/* Cabeceras y tarjetas */
.cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.cab h1 { font-size: 27px; font-weight: 800; }
.cab p { margin: 3px 0 0; color: var(--tx2); max-width: 680px; }
.cab p b { color: var(--marino); }
.card { background: #fff; border: 1px solid var(--borde); border-radius: 16px; padding: 18px; margin-bottom: 16px; min-width: 0; }
.card-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.cuenta { font-weight: 800; color: var(--marino); background: #FEF3C7; padding: 4px 12px; border-radius: 12px; font-size: 13px; }
.nota { color: var(--tx2); font-size: 13px; margin: 10px 0 0; display: flex; gap: 6px; align-items: flex-start; }
.nota .ic { width: 16px; height: 16px; margin-top: 2px; }
.vacio { padding: 18px; text-align: center; color: var(--tx2); margin: 0; }
.dos-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

/* Botones */
.b { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 10px; font-weight: 700; font-size: 14px; text-align: center; line-height: 1.2; }
.b .ic { width: 18px; height: 18px; }
.b-pri { background: var(--marino); color: #fff; }
.b-pri:hover { background: var(--azul); }
.b-sec { background: #fff; border: 1.5px solid var(--borde); color: var(--marino); }
.b-sec:hover { border-color: var(--marino); }
.b-wa { background: #128C4B; color: #fff; }
.b-wa:hover { background: #0F7A41; }
.wa-ic { background: #fff; border-radius: 50%; }
.b-ok { background: var(--verde); color: #fff; }
.b-no { background: #fff; color: #B91C1C; border: 1.5px solid #E5B4B4; }
.b-mini { min-height: 44px; padding: 0 12px; font-size: 13px; background: var(--marino); color: #fff; border-radius: 10px; }
.b-mini.wa { background: #fff; border: 1.5px solid var(--borde); width: 44px; padding: 0; }
.b-link { background: none; color: var(--azul); font-weight: 700; min-height: 44px; padding: 0 4px; text-decoration: underline; text-underline-offset: 3px; }
.b.off { opacity: .5; }
.b-q { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; border: 1.5px solid var(--borde); background: #fff; color: var(--marino); font-weight: 800; font-size: 13px; flex: none; }
.b-q .ic { width: 16px; height: 16px; }
.b-q.diez { width: auto; padding: 0 10px; }

/* Chips */
.tchip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 12px; white-space: nowrap; vertical-align: middle; }
.tchip svg { width: 11px; height: 12px; }
.tchip.ch { background: #111; color: var(--ch); }
.tchip.bm { background: #1B1512; color: #D9B48F; font-family: Teko, Montserrat, sans-serif; font-weight: 600; font-size: 15px; letter-spacing: .04em; padding: 1px 10px 0; line-height: 1.3; }
.tchip.fx { background: #FDE8E9; color: #B8050F; font-style: italic; }
.tchip.tot { background: var(--marino); color: #fff; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { min-height: 44px; padding: 0 15px; border-radius: 22px; border: 1.5px solid var(--borde); background: #fff; font-size: 13px; font-weight: 700; color: var(--tx2); }
.chip.on { background: var(--marino); border-color: var(--marino); color: #fff; }
.etq { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 800; padding: 3px 9px; border-radius: 10px; background: #EEF1F6; color: var(--tx2); white-space: nowrap; vertical-align: middle; }
.etq .ic { width: 13px; height: 13px; }
.etq.ag { background: #EDE9FE; color: #5B21B6; white-space: normal; max-width: 100%; }
.e-nuevo.etq { background: #FEF3C7; color: #92400E; } .e-cotizado.etq { background: #E0EBFF; color: #1E40AF; } .e-negociando.etq { background: #EDE9FE; color: #5B21B6; }
.e-ganado.etq { background: #DCFCE7; color: #166534; } .e-perdido.etq { background: #F1F2F4; color: #6B7280; }
.est { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; font-style: normal; padding: 3px 9px; border-radius: 10px; line-height: 1.25; }
.est.ok { background: #DCFCE7; color: #166534; } .est.azul { background: #E0EBFF; color: #1E40AF; } .est.amb { background: #FEF3C7; color: #92400E; }
.est.rojo { background: #FEE2E2; color: #991B1B; } .est.mor { background: #EDE9FE; color: #5B21B6; } .est.gris { background: #F1F2F4; color: #6B7280; }
.rojo { color: #B91C1C; } .ok { color: #166534; }
.av { width: 40px; height: 40px; border-radius: 50%; background: #E0EBFF; color: var(--azul); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; flex: none; }
.av.fx { background: #FDE8E9; color: #B8050F; font-style: italic; }
.av.grande { width: 56px; height: 56px; font-size: 24px; }

/* KPIs */
.kpis { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.kpi { background: #fff; border: 1px solid var(--borde); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 4px; position: relative; overflow: hidden; min-width: 0; }
.kpi::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; }
.kpi.ch::before { background: var(--ch); } .kpi.bm::before { background: var(--bm); } .kpi.fx::before { background: var(--fx); }
.kpi.total::before { background: linear-gradient(90deg, #E02B75, #E8672E, #EAA824, #1A99AA, #00B7FF, #125ACC); }
.kpi-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.kpi-n { font-size: 12px; color: var(--tx2); font-weight: 600; }
.kpi-m { font-size: 24px; font-weight: 800; color: var(--marino); letter-spacing: -.01em; }
.kpi.total .kpi-m { font-size: 28px; }
.kpi-s { font-size: 12.5px; color: var(--tx2); } .kpi-s b { color: var(--marino); }
.kpi-g { display: flex; align-items: flex-end; gap: 5px; height: 40px; margin-top: 4px; }
.kpi-g i { flex: 1; border-radius: 3px 3px 0 0; background: #DDE3EC; }
.kpi.ch .kpi-g i.hoy { background: var(--ch); } .kpi.bm .kpi-g i.hoy { background: var(--bm); } .kpi.fx .kpi-g i.hoy { background: var(--fx); }
.kpi-pie { display: flex; justify-content: space-between; font-size: 11px; color: var(--tx2); font-weight: 600; }
.kpi-rep { display: grid; gap: 7px; margin-top: 6px; }
.kpi-rep div { display: grid; grid-template-columns: 92px 1fr 38px; gap: 8px; align-items: center; font-size: 12.5px; font-weight: 600; color: var(--tx2); }
.kpi-rep b { text-align: right; color: var(--marino); }
.kpi-rep small { color: var(--tx2); font-size: 11px; }
.bar { display: block; height: 8px; border-radius: 4px; background: #EEF1F6; overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 4px; background: var(--azul); transition: width .4s; }
.bar i.ch { background: var(--ch); } .bar i.bm { background: var(--bm); } .bar i.fx { background: var(--fx); }
.bar.grande { height: 12px; border-radius: 6px; }
.minis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.mini { display: flex; gap: 10px; align-items: flex-start; background: #fff; border: 1px solid var(--borde); border-radius: 14px; padding: 14px; min-height: 44px; }
.mini .ic { color: var(--azul); margin-top: 2px; }
.mini b { display: block; font-size: 20px; color: var(--marino); line-height: 1.2; }
.mini > span { min-width: 0; overflow-wrap: anywhere; }
.mini span { font-size: 12.5px; color: var(--tx2); font-weight: 600; }
.mini em { font-style: normal; color: #B91C1C; }
.mini.rojo { border-color: #F5B5B5; }
.mini.ag { border-color: #D8CCFB; background: #FAF8FF; }
.mini.ag .ic { color: #6D28D9; }
.mini:hover { border-color: var(--marino); }

/* Alertas */
.alertas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.alerta { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; border: 1px solid var(--borde); border-left-width: 5px; border-radius: 12px; padding: 12px 14px; }
.alerta > div:first-child { min-width: 0; flex: 1 1 280px; }
.alerta b { display: block; color: var(--marino); }
.alerta span { color: var(--tx2); font-size: 13.5px; overflow-wrap: anywhere; }
.alerta.amb { border-left-color: var(--amarillo); } .alerta.rojo { border-left-color: var(--rojo); } .alerta.azul { border-left-color: var(--azul); }
.alerta-ac { display: flex; gap: 8px; flex-wrap: wrap; }

/* Filtros y buscador */
.filtros { display: flex; flex-direction: column; gap: 12px; }
.bus { display: flex; align-items: center; gap: 8px; min-height: 48px; border: 1.5px solid var(--borde); border-radius: 24px; padding: 0 14px; color: var(--tx2); background: #fff; margin: 0; }
.bus input { border: 0; box-shadow: none; padding: 0; min-height: 44px; background: transparent; }
.fsels { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.fsel { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: var(--tx2); min-width: 0; }
.filtros .fsel { max-width: 340px; }
.fsels .fsel { max-width: none; }

/* Tablas que pasan a tarjetas */
.tabla { border: 1px solid var(--borde); border-radius: 14px; overflow: hidden; background: #fff; }
.tr { display: grid; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid #EEF1F5; min-height: 60px; }
.tr:last-child { border-bottom: 0; }
a.tr:hover { background: #F8FAFC; }
.tr.th { min-height: 42px; background: #F8FAFC; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--tx2); }
.tr small { display: block; font-size: 12px; color: var(--tx2); font-weight: 500; }
.tr.flash { animation: flash 1.8s ease; }
@keyframes flash { 0%, 40% { background: #DCFCE7; } 100% { background: transparent; } }
.t-cli .tr { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr) 120px; }
.c-cl { display: flex; gap: 10px; align-items: center; min-width: 0; }
.c-cl > span { min-width: 0; }
.c-cl b { display: block; color: var(--marino); overflow-wrap: anywhere; }
.c-ti .tchip { margin-right: 4px; }
.c-ub { display: block; font-weight: 600; }
.c-ub .ic { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; margin-right: 3px; color: var(--tx2); }
.c-as { font-weight: 600; }
.t-ped .tr { grid-template-columns: 130px 120px minmax(0, 1fr) 170px 200px; }
.t-ped .c-cl { display: block; }
.t-ped .c-cl a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--marino); text-decoration: underline; text-decoration-color: #C5CEDC; text-underline-offset: 3px; }
.c-id b { color: var(--marino); }
.c-tot b { display: block; color: var(--marino); }
.c-es { display: flex; flex-direction: column; gap: 6px; }
.medio { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 8px; background: #EEF1F6; color: var(--tx2); }
.m-addi { background: #E6F6F4; color: #0F766E; } .m-credito { background: #FEF3C7; color: #92400E; } .m-contraentrega { background: #F5ECE4; color: #7C4A22; }
.sel-est { font-weight: 700; font-size: 16px; }
.sel-est.e-ok { border-color: #86EFAC; } .sel-est.e-amb { border-color: #FCD34D; } .sel-est.e-azul { border-color: #93C5FD; } .sel-est.e-mor { border-color: #C4B5FD; }
.t-inv .tr { grid-template-columns: minmax(0, 1fr) 110px 80px 70px 150px; }
.c-pr b { display: block; overflow-wrap: anywhere; font-size: 13.5px; }
.c-pr small .tchip { margin-right: 4px; font-size: 10.5px; }
.c-pre { font-weight: 700; }
.c-b small, .c-v small { display: none; }
.c-b, .c-v { font-weight: 700; color: var(--marino); }
.c-to { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.c-to b { font-size: 18px; color: var(--marino); }

/* Formularios */
.form h2 { margin-bottom: 12px; }
.campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.campos.dos { grid-template-columns: 1fr 1fr; margin: 12px 0; }
.campos label, .campo, .fila-form label, .esc-fila label, .cta-fila label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--tx2); min-width: 0; }
.campo { margin-top: 10px; }
.fila-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; margin-top: 12px; }
.chk { flex-direction: row !important; align-items: center; gap: 8px !important; min-height: 44px; }
.chk input { width: 22px; height: 22px; min-height: 0; }

/* Ficha */
.volver { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; color: var(--azul); margin-bottom: 6px; }
.ficha-cab { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.ficha-cab > div:nth-child(2) { flex: 1 1 260px; min-width: 0; }
.ficha-cab h1 { font-size: 25px; font-weight: 800; overflow-wrap: anywhere; }
.ficha-cab p { margin: 4px 0 0; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ficha-ac { display: flex; gap: 10px; flex-wrap: wrap; }
.ficha { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.ficha .card { margin: 0; }
.ficha .ancho { grid-column: span 3; }
.ficha .ancho:last-child { grid-column: span 3; }
.dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0 0; }
.dl dt { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--tx2); }
.dl dd { margin: 0; font-weight: 700; color: var(--marino); overflow-wrap: anywhere; }
.dl dd small { font-weight: 500; color: var(--tx2); }
.aviso { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-radius: 12px; font-weight: 600; margin: 0 0 14px; }
.aviso.azul { background: #EEF3FC; color: #1E3A8A; } .aviso.rojo { background: #FEE2E2; color: #991B1B; }
.aviso span { flex: 1 1 200px; }
.card .aviso { margin: 10px 0 0; }
.mini-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mini-lista li { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; border: 1px solid var(--borde); border-radius: 10px; padding: 8px 12px; }
.mini-lista li > span:first-child { min-width: 0; flex: 1 1 160px; overflow-wrap: anywhere; }
.mini-lista small { display: block; color: var(--tx2); font-size: 12px; }
.mini-lista .der { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mini-lista b { color: var(--marino); }
.nota-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; margin: 10px 0 12px; }
.notas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.notas li { border-left: 3px solid var(--amarillo); background: #FFFBEB; border-radius: 0 10px 10px 0; padding: 8px 12px; }
.notas time { font-size: 12px; font-weight: 700; color: #92400E; }
.notas p { margin: 2px 0 0; overflow-wrap: anywhere; }

/* Embudo */
.emb-tabs { display: none; }
.kanban { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; align-items: start; }
.col { background: #EEF1F6; border-radius: 14px; padding: 10px; min-height: 200px; transition: box-shadow .2s; min-width: 0; }
.col.sobre { box-shadow: 0 0 0 3px var(--azul) inset; background: #E3ECFB; }
.col header { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; flex-wrap: wrap; padding: 4px 4px 10px; border-bottom: 3px solid #CBD3E0; margin-bottom: 10px; }
.col header span { font-weight: 800; color: var(--marino); }
.col header i { font-style: normal; color: var(--tx2); font-size: 12px; }
.col header b { font-size: 13px; color: var(--marino); }
.col.e-nuevo header { border-color: var(--amarillo); } .col.e-cotizado header { border-color: #60A5FA; } .col.e-negociando header { border-color: #A78BFA; }
.col.e-ganado header { border-color: var(--verde); } .col.e-perdido header { border-color: #9CA3AF; }
.col-cuerpo { display: grid; gap: 10px; }
.op { background: #fff; border: 1px solid var(--borde); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 6px; cursor: grab; min-width: 0; }
.op.arr { opacity: .5; }
.op-cab { display: flex; gap: 6px; flex-wrap: wrap; }
.op a b { color: var(--marino); overflow-wrap: anywhere; }
.op a { min-height: 24px; }
.op-t { font-size: 12.5px; color: var(--tx2); overflow-wrap: anywhere; }
.op-pie { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.op-pie b { color: var(--marino); }
.op-pie small { color: var(--tx2); font-size: 11.5px; }
.op-mover { display: flex; flex-direction: column; gap: 2px; font-size: 11px; font-weight: 700; color: var(--tx2); }
.op-mover select { font-size: 16px; padding: 6px 8px; }

/* Cotizador */
.cz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
/* Fijo al bajar, pero nunca más alto que la pantalla: si no cabe, se desplaza por dentro (el botón de abajo siempre se alcanza). */
.cz-der { position: sticky; top: calc(var(--banda) + 12px); max-height: calc(100vh - var(--banda) - 24px); overflow-y: auto; overscroll-behavior: contain; }
.prods { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.prods li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; border: 1px solid var(--borde); border-radius: 12px; padding: 8px 10px; }
.prods b { display: block; font-size: 13px; overflow-wrap: anywhere; }
.prods small { display: block; color: var(--tx2); font-size: 11.5px; }
.prods em { font-style: normal; }
.pr { font-weight: 800; color: var(--marino); text-align: right; white-space: nowrap; }
.prods-bt { display: flex; gap: 6px; }
.prods-bt .b-mini { padding: 0 10px; min-width: 48px; }
.lineas { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.lineas li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; align-items: center; border-bottom: 1px solid #EEF1F5; padding-bottom: 10px; }
.ln-n { grid-column: 1 / -1; min-width: 0; }
.ln-n b { display: block; font-size: 13.5px; overflow-wrap: anywhere; }
.ln-n small { color: var(--tx2); font-size: 12px; }
.cant { display: flex; align-items: center; gap: 6px; }
.cant input { width: 72px; text-align: center; font-weight: 800; padding: 8px 4px; }
.ln-t { display: flex; align-items: center; gap: 8px; justify-content: flex-end; font-weight: 800; color: var(--marino); white-space: nowrap; }
.escalas { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin: 6px 0 10px; }
.esc { border: 1.5px solid var(--borde); border-radius: 10px; padding: 6px 10px; font-size: 12px; color: var(--tx2); font-weight: 600; }
.esc b { display: block; color: var(--marino); font-size: 13px; }
.esc small { display: block; font-size: 11px; }
.esc.on { border-color: var(--verde); background: #F0FDF4; }
.esc.pasada { opacity: .65; }
.nivel { margin: 4px 0 12px; }
.nivel p { margin: 6px 0 0; font-size: 13.5px; }
.nivel .bar i { background: linear-gradient(90deg, var(--amarillo), var(--verde)); }
.totales { margin: 0; display: grid; gap: 6px; border-top: 1px solid var(--borde); padding-top: 10px; }
.totales div { display: flex; justify-content: space-between; gap: 10px; }
.totales dt { color: var(--tx2); font-weight: 600; }
.totales dd { margin: 0; font-weight: 700; color: var(--marino); white-space: nowrap; }
.totales .gran { font-size: 19px; border-top: 1px dashed var(--borde); padding-top: 6px; }
.totales .gran dt { color: var(--marino); font-weight: 800; }
.totales .gran dd { font-weight: 800; }
.cz-ac { margin-top: 14px; }
.b.grande { width: 100%; min-height: 52px; font-size: 15.5px; }
.cz-sec { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.convertir { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; margin-top: 12px; border-top: 1px solid var(--borde); padding-top: 12px; }
.convertir .campo { margin: 0; }
.esc-ed summary { display: flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 800; color: var(--marino); cursor: pointer; }
.esc-filas { display: grid; gap: 10px; margin: 12px 0; }
.esc-fila { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .8fr) auto auto; gap: 8px; align-items: end; }

/* Agente de ventas */
.rotulo { display: flex; gap: 10px; align-items: flex-start; background: #F5F3FF; border: 1px solid #DDD6FE; color: #4C1D95; border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; font-size: 13.5px; }
.rotulo .ic { color: #6D28D9; margin-top: 1px; }
.rotulo.azul { background: #EEF3FC; border-color: #C7D7F5; color: #1E3A8A; }
.rotulo.azul .ic { color: var(--azul); }
.ag-vista { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 16px; align-items: start; }
.tel { background: #ECE5DD; border: 8px solid #1F2937; border-radius: 28px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.tel-cab { display: flex; gap: 10px; align-items: center; background: #075E54; color: #fff; padding: 10px 14px; }
.tel-cab small { display: block; font-size: 11.5px; opacity: .85; }
.chat { display: flex; flex-direction: column; gap: 8px; padding: 14px 12px; min-height: 360px; max-height: 520px; overflow-y: auto; }
.chat-vacio { color: #5B6472; text-align: center; margin: auto 0; font-size: 13px; }
.msg { max-width: 88%; padding: 8px 11px; border-radius: 10px; font-size: 13.5px; line-height: 1.45; box-shadow: 0 1px 1px rgba(0, 0, 0, .08); overflow-wrap: anywhere; animation: entra .3s ease; }
.msg.cliente { align-self: flex-end; background: #DCF8C6; }
.msg.agente { align-self: flex-start; background: #fff; }
.msg.agente small { display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; color: #6D28D9; margin-bottom: 2px; }
.msg.agente small .ic { width: 13px; height: 13px; }
.msg.sistema { align-self: center; background: #FFF3C4; font-size: 12px; font-weight: 700; color: #6B5300; }
@keyframes entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tel-ac { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; padding: 10px; background: #fff; }
.tel-ac .b { padding: 0 8px; font-size: 13px; }
.ag-der .card { margin-bottom: 14px; }
.log { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.log li { display: flex; gap: 8px; align-items: flex-start; background: #F0FDF4; border-radius: 10px; padding: 8px 10px; font-size: 13.5px; }
.log .ic { color: var(--verde); width: 18px; height: 18px; margin-top: 2px; }
.reglas { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.reglas li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; }
.reglas .ic { color: #6D28D9; width: 18px; height: 18px; margin-top: 1px; }
.ag-kpi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.ag-kpi span { background: #FAF8FF; border: 1px solid #E9E3FD; border-radius: 12px; padding: 10px; font-size: 12px; color: var(--tx2); font-weight: 600; }
.ag-kpi b { display: block; font-size: 22px; color: var(--marino); }

/* Asesores */
.lineas-v { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.lineas-v div { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; border: 1px solid var(--borde); border-radius: 12px; padding: 10px 12px; font-weight: 700; color: var(--marino); }
.lineas-v small { color: var(--tx2); font-weight: 500; }
.ases { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; margin-bottom: 16px; }
.ases .card { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ase-cab { display: flex; gap: 10px; align-items: center; }
.ase-cab > span:nth-child(2) { flex: 1; min-width: 0; }
.ase-cab b { display: block; color: var(--marino); }
.ase-cab small { color: var(--tx2); font-size: 12px; }
.codigo { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 800; font-size: 12.5px; background: #FEF3C7; color: #92400E; padding: 4px 8px; border-radius: 8px; }
.zonas { display: flex; gap: 6px; flex-wrap: wrap; }
.zonas span { font-size: 11.5px; font-weight: 700; background: #EEF1F6; color: var(--tx2); padding: 3px 8px; border-radius: 8px; }
.ase-pie { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--borde); padding-top: 10px; font-size: 13px; color: var(--tx2); }
.ase-pie b { color: var(--marino); }
.ase-bt { display: flex; gap: 6px; }
.ranking { display: grid; gap: 8px; }
.rk { display: grid; grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.rk-n { width: 28px; height: 28px; border-radius: 50%; background: var(--marino); color: #fff; font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.rk-c b { display: block; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; color: var(--marino); }
.rk-c small, .rk-b small { display: block; color: var(--tx2); font-size: 11.5px; overflow-wrap: anywhere; }
.rk-m { color: var(--marino); white-space: nowrap; }
.rk .bar i { background: var(--amarillo); }

/* Vistas previas (popup y cuentas) */
.prev-card { background: #F8FAFC; }
.prev-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; color: var(--marino); }
.tel.prev { max-width: 380px; margin: 0 auto; background: #F3F4F6; position: relative; }
.prev-tienda { padding: 14px 14px 50px; display: flex; flex-direction: column; gap: 10px; background: #fff; }
.prev-lineas { display: grid; gap: 8px; }
.prev-lineas i { display: block; height: 70px; border-radius: 10px; background: #E5E7EB; }
.prev-lineas i:nth-child(2) { height: 12px; width: 70%; } .prev-lineas i:nth-child(3) { height: 12px; width: 45%; }
.pop { position: relative; margin: -36px 10px 10px; background: #fff; border-radius: 16px; padding: 14px; box-shadow: 0 -10px 30px rgba(0, 0, 0, .18); display: flex; flex-direction: column; gap: 10px; }
.pop-cab { display: flex; justify-content: space-between; align-items: center; color: var(--marino); }
.pop-x .ic { width: 18px; height: 18px; color: var(--tx2); }
.pop-pri { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; border-radius: 12px; background: #128C4B; color: #fff; font-weight: 800; padding: 0 12px; text-align: center; }
.prev.ch .pop-pri { background: #111; color: var(--ch); } .prev.bm .pop-pri { background: #1B1512; color: #E3C3A0; }
.pop-txt { margin: 0; font-size: 12.5px; color: var(--tx2); }
.pop-bus { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--borde); border-radius: 12px; padding: 0 10px; color: var(--tx2); }
.pop-bus input { border: 0; box-shadow: none; padding: 0; }
.pop-sug { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.b-sug { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 0 10px; border-radius: 10px; background: #F3F4F6; font-weight: 700; color: var(--marino); text-align: left; }
.b-sug small { color: var(--tx2); font-weight: 500; }
.b-sug .ic { width: 16px; height: 16px; }
.pop-nada { margin: 0; font-size: 13px; color: var(--tx2); }
.pop-ase { display: flex; gap: 10px; align-items: center; background: #F0FDF4; border-radius: 12px; padding: 10px; }
.pop-ase small { display: block; font-size: 11.5px; color: var(--tx2); }
.pop-ase b { display: block; color: var(--marino); }
.pop-sec { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: 12px; border: 1.5px solid #128C4B; color: #0F7A41; font-weight: 700; padding: 0 10px; }
.pub { padding: 16px; display: flex; flex-direction: column; gap: 12px; background: #fff; min-height: 100%; }
.pub-cab { display: flex; gap: 10px; align-items: center; color: var(--marino); }
.pub-cab .ic { width: 34px; height: 34px; color: var(--verde); }
.pub-cab small { display: block; color: var(--tx2); font-size: 11.5px; }
.pub-tit { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.pub-tit small { color: var(--tx2); }
.pub-cuentas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pub-cuentas li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; align-items: center; border: 1px solid var(--borde); border-radius: 12px; padding: 10px; }
.pub-cuentas .ic { color: var(--azul); }
.pub-cuentas b { display: block; color: var(--marino); overflow-wrap: anywhere; }
.pub-cuentas small { color: var(--tx2); font-size: 12px; }
.pub-cuentas code { grid-column: 1 / -1; font-size: 17px; font-weight: 800; letter-spacing: .04em; color: var(--marino); background: #F3F4F6; border-radius: 8px; padding: 6px 10px; overflow-wrap: anywhere; }
.pub-aviso { display: flex; gap: 10px; background: #FEF2F2; border: 1.5px solid #FCA5A5; color: #991B1B; border-radius: 12px; padding: 10px 12px; font-weight: 600; font-size: 13.5px; }
.pub-aviso p { margin: 0; overflow-wrap: anywhere; }
.pub-aviso .ic { flex: none; margin-top: 2px; }
.ctas { display: grid; gap: 10px; margin-bottom: 12px; }
.cta-fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; align-items: end; border: 1px solid var(--borde); border-radius: 12px; padding: 10px; }

/* Inventario */
.sim { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; background: #F8FAFC; border-style: dashed; border-color: #B8C2D3; }
.sim-bt { display: flex; flex-direction: column; gap: 8px; }
.b-sim { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 16px; border-radius: 12px; font-weight: 800; font-size: 14px; text-align: left; }
.b-sim .ic { width: 18px; height: 18px; }
.b-sim.ch { background: #111; color: var(--ch); } .b-sim.bm { background: #1B1512; color: #E3C3A0; } .b-sim.fx { background: var(--fx); color: #fff; }
.sim-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13.5px; color: var(--tx2); }
.sim-log li { background: #fff; border: 1px solid var(--borde); border-radius: 10px; padding: 10px 12px; overflow-wrap: anywhere; }
.sim-log li.ult { border-color: var(--verde); box-shadow: inset 4px 0 0 var(--verde); color: var(--tx); }
.sim-log li.ayuda { border-style: dashed; }
.sim-log b { color: var(--marino); }

/* Ventana del mensaje de WhatsApp (la demo no abre chats) */
.modal { position: fixed; inset: 0; z-index: 125; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal .hoja-fondo { position: absolute; inset: 0; }
.modal-caja { position: relative; background: #fff; border-radius: 16px; padding: 14px 16px 16px; width: min(520px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; box-shadow: 0 20px 50px rgba(0, 0, 0, .3); }
.mw-aviso { margin: 0 0 8px; background: #FFF7E0; border: 1px solid #F1D48A; color: #6B4E00; border-radius: 10px; padding: 8px 10px; font-size: 13px; font-weight: 600; }
.mw-para { margin: 0 0 8px; font-size: 13.5px; color: var(--tx2); }
.mw-para b { color: var(--marino); }
#mw-txt { font-size: 16px; line-height: 1.45; background: #F8FAFC; }
.plan { margin: 6px 0 0; font-size: 12px; font-weight: 700; color: #5B21B6; text-align: center; }
.pop .plan { margin: -4px 0 0; }
.plan-nota { max-width: 380px; margin: 10px auto 0; font-weight: 600; }
.cta-tiendas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.cta-tiendas > b { color: var(--marino); }
.cta-tiendas .nota { flex-basis: 100%; margin: 0; }
.aviso-vencido { margin: 12px 0 0; font-size: 13.5px; }
.aviso-vencido .ic { flex: none; }

/* Aviso flotante */
.toast { position: fixed; left: 50%; bottom: calc(var(--barra) + 20px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); z-index: 130; width: max-content; max-width: min(92vw, 480px); background: var(--marino); color: #fff; padding: 12px 18px; border-radius: 12px; font-size: 14px; font-weight: 600; box-shadow: 0 12px 30px rgba(0, 0, 0, .3); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; text-align: center; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
/* Con la ventana del mensaje abierta, el aviso va arriba, en una franja reservada: no tapa los botones de la ventana. */
body.modal-on .toast { top: 10px; bottom: auto; transform: translate(-50%, -20px); max-height: 96px; overflow: hidden; }
body.modal-on .toast.on { transform: translate(-50%, 0); }
body.modal-on .modal { padding-top: 116px; }
/* 100dvh = alto visible real (Safari en iPhone descuenta sus barras); 100vh queda de respaldo. */
body.modal-on .modal-caja { max-height: calc(100vh - 132px); max-height: calc(100dvh - 132px); }
.aviso-migra { margin: 0 0 14px; }
.aviso-migra .b { min-height: 44px; }

/* ===================== Responsive ===================== */
@media (max-width: 1280px) {
  .kpis { grid-template-columns: 1fr 1fr; }
  .minis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fsels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .t-cli .tr { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) 110px; }
  .t-cli .c-as, .t-cli .th span:nth-child(4) { display: none; }
  .kanban { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ficha { grid-template-columns: 1fr 1fr; }
  .ficha .ancho, .ficha .ancho:last-child { grid-column: span 2; }
}
@media (max-width: 900px) {
  :root { --banda-min: 48px; --banda: 84px; --barra: 64px; }
  .crm { grid-template-columns: 1fr; }
  .lado { display: none; }
  .main { padding: 14px 12px 24px; }
  .barra { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--marino); border-top: 3px solid var(--amarillo); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .barra a, .barra button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 61px; color: #C7CDD8; font-size: 11px; font-weight: 700; }
  .barra .on { color: #fff; box-shadow: inset 0 3px 0 var(--amarillo); }
  .barra .cnt { position: absolute; top: 4px; left: 50%; margin-left: 6px; min-width: 18px; height: 18px; font-size: 10.5px; padding: 0 5px; }
  .banda { font-size: 12px; }
  .cab h1 { font-size: 23px; }
  .cab .b { width: 100%; }
  .cab .b[data-act=reiniciar] { width: auto; min-height: 44px; font-size: 13px; }
  .card { padding: 14px; border-radius: 14px; }
  .kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpis .kpi.total { grid-column: span 2; }
  .kpi-m { font-size: 20px; }
  .minis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .minis .mini.ag { grid-column: span 2; }
  .dos-col, .cz, .ag-vista { grid-template-columns: 1fr; }
  .cz-der { position: static; max-height: none; overflow: visible; }
  .fsels { grid-template-columns: 1fr 1fr; }
  .filtros .fsel { max-width: none; }
  .ficha { grid-template-columns: 1fr; }
  .ficha .ancho, .ficha .ancho:last-child { grid-column: auto; }
  .ficha-ac { width: 100%; display: grid; grid-template-columns: 1fr; }
  /* Tablas → tarjetas */
  .tabla { border: 0; background: transparent; border-radius: 0; overflow: visible; }
  .tr.th { display: none; }
  .tabla .tr { border: 1px solid var(--borde); border-radius: 12px; margin-bottom: 10px; padding: 12px 14px; background: #fff; }
  .tabla .tr:last-child { border-bottom: 1px solid var(--borde); }
  .t-cli .tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "cl et" "ti ti" "ub as"; gap: 8px 10px; }
  .t-cli .c-cl { grid-area: cl; } .t-cli .c-et { grid-area: et; } .t-cli .c-ti { grid-area: ti; } .t-cli .c-ub { grid-area: ub; } .t-cli .c-as { grid-area: as; display: block; text-align: right; }
  .t-ped .tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id t" "cl tot" "es es"; gap: 8px 12px; }
  .t-ped .c-id { grid-area: id; } .t-ped .c-t { grid-area: t; justify-self: end; } .t-ped .c-cl { grid-area: cl; } .t-ped .c-tot { grid-area: tot; text-align: right; } .t-ped .c-es { grid-area: es; display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .t-ped .c-es .b-mini:only-child { grid-column: span 2; }
  .t-inv .tr { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "pr pr pr" "pre b v" "to to to"; gap: 6px 14px; }
  .t-inv .c-pr { grid-area: pr; } .t-inv .c-pre { grid-area: pre; } .t-inv .c-b { grid-area: b; } .t-inv .c-v { grid-area: v; } .t-inv .c-to { grid-area: to; }
  .c-b small, .c-v small { display: inline; margin-right: 4px; font-weight: 600; }
  /* Embudo por pestañas */
  .emb-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
  .emb-tab { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 52px; padding: 6px 10px; border-radius: 12px; border: 1.5px solid var(--borde); background: #fff; font-size: 12px; font-weight: 700; color: var(--tx2); text-align: left; }
  .emb-tab b { font-size: 12.5px; color: var(--marino); }
  .emb-tab.on { border-color: var(--marino); background: var(--marino); color: #fff; }
  .emb-tab.on b { color: #fff; }
  .kanban { grid-template-columns: 1fr; }
  .col { display: none; min-height: 0; }
  .col.visible { display: block; }
  .op { cursor: default; }
  .lineas-v { grid-template-columns: 1fr; }
  .sim { grid-template-columns: 1fr; }
  .b-sim { width: 100%; }
  .esc-fila { grid-template-columns: 1fr 1fr; }
  .cta-fila { grid-template-columns: 1fr 1fr; }
  .tel-ac { grid-template-columns: 1fr 1fr; }
  .tel-ac .b-pri { grid-column: span 2; }
  .rk { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .rk-n { grid-row: 1; grid-column: 1; } .rk-c { grid-row: 1; grid-column: 2; } .rk-m { grid-row: 1; grid-column: 3; }
  .rk-b { grid-row: 2; grid-column: 2 / -1; }
}
@media (max-width: 420px) {
  .banda { font-size: 11px; line-height: 1.25; padding: 5px 10px; }
  .banda .ic { display: none; }
  /* iPhone SE con las barras de Safari (≈548 px visibles): franja del aviso más baja para que «Copiar mensaje» y «Cerrar» quepan. */
  body.modal-on .modal { padding-top: 92px; }
  body.modal-on .modal-caja { max-height: calc(100vh - 104px); max-height: calc(100dvh - 104px); }
  body.modal-on .toast { font-size: 13px; padding: 9px 14px; line-height: 1.4; max-height: 78px; }
  .kpis, .minis { grid-template-columns: 1fr; }
  .kpis .kpi.total, .minis .mini.ag { grid-column: auto; }
  .fsels, .campos.dos, .fila-form, .cz-sec, .convertir { grid-template-columns: 1fr; }
  .prods li { grid-template-columns: minmax(0, 1fr) auto; }
  .prods-bt { grid-column: 1 / -1; }
  .prods-bt .b-mini { flex: 1; }
  .lineas li { grid-template-columns: 1fr; }
  .ln-t { justify-content: space-between; }
  .nota-form { grid-template-columns: 1fr; }
  .ag-kpi { grid-template-columns: 1fr 1fr 1fr; }
  .esc-fila { grid-template-columns: 1fr 1fr; }
  .cta-fila { grid-template-columns: 1fr; }
}
/* La cabecera (con la X) y los botones de la ventana del mensaje quedan fijos dentro de la caja: si el contenido
   no cabe, solo se desplaza el mensaje del medio. */
.modal-caja > .hoja-cab { position: sticky; top: -14px; margin-top: -14px; padding-top: 18px; background: #fff; z-index: 2; }
.modal-caja > .acciones { position: sticky; bottom: -16px; margin-bottom: -16px; padding: 10px 0 16px; background: #fff; z-index: 2; }
/* Pantallas bajas (iPhone SE con las barras de Safari): el mensaje se ve en un cuadro más bajo, así la ventana
   entera (título, «Cerrar», mensaje, «Copiar mensaje») cabe sin desplazarse. */
@media (max-height: 640px) {
  #mw-txt { height: 140px; }
  .mw-aviso, .mw-para { margin: 0 0 6px; }
}
@media (max-height: 480px) {
  body.modal-on .modal { padding-top: 92px; padding-bottom: 8px; }
  body.modal-on .modal-caja { max-height: calc(100vh - 100px); max-height: calc(100dvh - 100px); }
  body.modal-on .toast { font-size: 13px; padding: 9px 14px; line-height: 1.4; max-height: 78px; }
  #mw-txt { height: 96px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }