:root{ /* Tinta. --ink-4 (#a8a8ad) se elimina del sistema: daba 2,27:1 sobre el papel, muy por debajo de AA. Lo atenuado se resuelve por tamaño y espacio, nunca bajando el contraste. --ink-3 medido sobre papel: 5,02:1. */ --ink:#101012; --ink-2:#3c3c3f; --ink-3:#6f6c66; --line:#e3e0da; --line-2:#dcd9d2; --line-3:#c9c5bd; /* Papel apenas cálido: es lo que separa "pantalla" de "impreso". */ --paper:#fbfaf8; --paper-2:#f4f2ee; --surface:#ffffff; --surface-2:#f7f5f1; --surface-3:#f4f2ee; --surface-4:#efece6; --black:#101012; --white:#ffffff; /* Sistema plano: la separación es por tono y por regla, nunca por sombra. Lo que flota (diálogos) se separa con borde de tinta sobre el velo. */ --shadow:none; --shadow-pop:none; --font:"Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --ease:cubic-bezier(.2,.7,.2,1); /* Estado activo de un interruptor, y el "sí coinciden" del cambio de clave. */ --active:#2f7d4f; /* Rojo de validación, agregado el 31-ago-2026 a pedido de Matías para que el aviso de contraseñas se lea de un golpe. Medido con backend/contraste.py: 6,94:1 sobre el papel #fbfaf8 y 7,24:1 sobre el blanco del diálogo, contra el 4,5:1 que pide WCAG AA. El verde de al lado da 4,83:1 sobre papel. */ --danger:#a3282d; /* Rampa del embudo: escala fría azul → verde. Decisión del cliente (ago 2026): es la excepción cromática del sistema, junto con la marca de terceros. */ --funnel-1:#2f7d4f; --funnel-2:#479e8a; --funnel-3:#3f83a6; --funnel-4:#4a6274; /* Tracking de versalita. El piso del sistema es .1em; nunca por debajo. */ --track-label:.15em; --track-label-tight:.1em; } *{box-sizing:border-box;} [hidden]{display:none !important;} html,body{margin:0;height:100%;} body{font-family:var(--font); color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;} button{font-family:inherit; cursor:pointer;} input,select,textarea{font-family:inherit;} ::selection{background:var(--black); color:var(--white);} ::-webkit-scrollbar{width:11px;height:11px;} ::-webkit-scrollbar-thumb{background:var(--line-3); border-radius:0; border:3px solid transparent; background-clip:content-box;} ::-webkit-scrollbar-thumb:hover{background:var(--ink-3);} /* ---------- Shell ---------- */ .app{display:grid; grid-template-columns:248px 1fr; grid-template-rows:64px 1fr; grid-template-areas:"brand top" "nav main"; height:100vh;} @media (max-width:900px){ .app{grid-template-columns:1fr; grid-template-rows:56px auto 1fr; grid-template-areas:"top" "nav" "main";} } .brand{grid-area:brand; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:0 20px; background:var(--black); color:var(--white); border-right:1px solid var(--black);} .brand .wm{font-weight:400; font-size:20px; letter-spacing:.46em; padding-left:.46em; line-height:1;} .brand .sub{font-size:8.5px; letter-spacing:.30em; text-transform:uppercase; color:#b9b9bd; margin-top:7px; padding-left:.30em; font-weight:500;} @media (max-width:900px){ .brand{display:none;} } /* OJO: .top se usa en dos lugares sin relación,
y el
de cada ficha de campaña. Lo compartido es solo el flex. */ header.top{display:flex; align-items:center; justify-content:space-between; gap:16px;} header.top{grid-area:top;} .top .lead{display:flex; align-items:center; gap:14px; min-width:0;} .brand-mini{display:none; font-weight:400; letter-spacing:.34em; padding-left:.34em; font-size:15px;} @media (max-width:900px){ .brand-mini{display:block;} } .crumb{display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--ink-3); min-width:0;} .crumb b{color:var(--ink); font-weight:600;} .crumb .d{color:var(--line-3);} @media (max-width:640px){ .crumb{display:none;} } .env{display:inline-flex; align-items:center; gap:7px; font-size:10.5px; letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink-3); border:1px solid var(--line-2); border-radius:0; padding:5px 11px; font-weight:600;} .env .dot{width:6px;height:6px;border-radius:0;background:var(--ink);} .top .trail{display:flex; align-items:center; gap:14px;} .who{display:flex; align-items:center; gap:10px;} .who .av{width:32px;height:32px;border-radius:0;background:var(--black);color:var(--white);display:grid;place-items:center;font-weight:600;font-size:12px;letter-spacing:.02em;} .who .t{line-height:1.2;} .who .t b{display:block;font-size:12.5px;font-weight:600;} .who .t span{font-size:10.5px;color:var(--ink-3);letter-spacing:.02em;} @media (max-width:640px){ .who .t{display:none;} .env{display:none;} } /* ---------- Nav ---------- */ .nav{grid-area:nav; background:var(--surface); border-right:1px solid var(--line); padding:18px 14px; display:flex; flex-direction:column; gap:2px;} @media (max-width:900px){ .nav{flex-direction:row; overflow-x:auto; border-right:0; border-bottom:1px solid var(--line); padding:8px 12px; gap:4px;} } .nav .cap{font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); font-weight:700; padding:6px 12px 10px;} @media (max-width:900px){ .nav .cap{display:none;} } .nav a{display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:0; color:var(--ink-2); font-size:13.5px; font-weight:500; text-decoration:none; white-space:nowrap; position:relative; transition:background .15s var(--ease), color .15s var(--ease);} .nav a .ix{font-size:10.5px; color:var(--ink-3); font-weight:600; width:12px; letter-spacing:.02em;} .nav a svg{width:18px;height:18px;flex:none;stroke-width:1.6;opacity:.9;} .nav a:hover{background:var(--surface-3); color:var(--ink);} .nav a[aria-current="true"]{background:var(--black); color:var(--white);} .nav a[aria-current="true"] .ix{color:#8f8f94;} .nav a .badge{margin-left:auto; font-size:10.5px; font-weight:700; color:var(--ink-3); background:var(--surface-3); border-radius:0; padding:2px 8px; min-width:22px; text-align:center;} .nav a[aria-current="true"] .badge{background:rgba(255,255,255,.16); color:#fff;} .nav .spring{flex:1;} @media (max-width:900px){ .nav .spring{display:none;} .nav a .badge{display:none;} } .nav .foot{font-size:10px; color:var(--ink-3); padding:10px 12px; letter-spacing:.02em; line-height:1.5;} .nav .foot{text-align:center;} /* Marca de terceros: conserva su color propio, no se trata como foto. */ .nav .foot .aa-logo{width:150px; max-width:100%; height:auto; display:block; margin:0 auto;} @media (max-width:900px){ .nav .foot{display:none;} } /* ---------- Main ---------- */ .main{grid-area:main; overflow:auto; padding:0;} .screen{display:none; animation:fade .28s var(--ease);} .screen.on{display:block;} @keyframes fade{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}} @media (prefers-reduced-motion:reduce){ .screen.on{animation:none;} } .wrap{padding:clamp(20px,3vw,40px) clamp(18px,3.4vw,48px) 64px; max-width:1360px;} .phead{margin:0 0 26px;} .phead h1{font-family:var(--font); font-size:clamp(26px,3.2vw,34px); font-weight:600; line-height:1.04; letter-spacing:-.03em; margin:0;} .phead p{margin:8px 0 0; color:var(--ink-3); font-size:14px; max-width:none; line-height:1.6;} .rule{height:1px; background:var(--line); border:0; margin:0;} .label{font-size:10.5px; letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink-3); font-weight:700;} /* ---------- Buttons ---------- */ .btn{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line-2); background:var(--surface); color:var(--ink); font-size:13px; font-weight:600; padding:9px 15px; border-radius:0; transition:all .15s var(--ease); white-space:nowrap;} .btn svg{width:16px;height:16px;stroke-width:1.7;} .btn:hover{border-color:var(--ink); background:var(--surface-3);} .btn:disabled{opacity:.4; cursor:not-allowed;} .btn.pri{background:var(--black); color:var(--white); border-color:var(--black);} .btn.pri:hover{background:#000; box-shadow:var(--shadow);} .btn.pri:disabled:hover{box-shadow:none; background:var(--black);} .btn.sm{padding:6px 11px; font-size:12px; border-radius:0;} .btn.ghost{border-color:transparent; background:transparent;} .btn.ghost:hover{background:var(--surface-3); border-color:transparent;} .btn.danger:hover{border-color:var(--ink); background:var(--black); color:var(--white);} .iconbtn{width:32px;height:32px;border-radius:0;border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);display:grid;place-items:center;transition:all .15s var(--ease);} .iconbtn svg{width:16px;height:16px;stroke-width:1.7;} .iconbtn:hover{border-color:var(--ink);color:var(--ink);} /* ---------- Portada ---------- */ .index{margin:30px 0 0; border-top:1px solid var(--ink);} .index .row{display:flex; align-items:center; gap:22px; padding:16px 6px; border-bottom:1px solid var(--line); text-decoration:none; color:inherit; transition:padding .2s var(--ease), background .2s var(--ease);} .index .row:hover{padding-left:22px; background:linear-gradient(90deg, var(--surface-3), transparent);} .index .row .num{font-size:12px; font-weight:600; color:var(--ink-3); width:26px; letter-spacing:.04em;} .index .row .ti{flex:1; min-width:0;} .index .row .ti .h{font-size:clamp(17px,1.9vw,21px); font-weight:500; letter-spacing:-.01em;} .index .row .ti .d{font-size:12.5px; color:var(--ink-3); margin-top:4px; line-height:1.5; max-width:60ch;} .index .row .meta{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:600; text-align:right; white-space:nowrap;} @media (max-width:640px){ .index .row .meta{display:none;} } .index .row .arw{color:var(--ink-3); transition:transform .2s var(--ease), color .2s var(--ease);} .index .row:hover .arw{transform:translateX(4px); color:var(--ink);} .index .row .arw svg{width:22px;height:22px;stroke-width:1.4;} /* ---------- Segmentador (Base de clientes) ---------- */ .seg{display:grid; grid-template-columns:248px 1fr; gap:22px; align-items:start;} @media (max-width:1040px){ .seg{grid-template-columns:1fr;} } .filters{background:var(--surface); border:1px solid var(--line); border-radius:0; padding:20px 18px; box-shadow:var(--shadow); height:calc(100vh - 240px); overflow:auto;} @media (max-width:1040px){ .filters{position:static; height:auto; overflow:visible;} .results{height:auto;} .tscroll{max-height:64vh;} } .filters .fh{display:flex; align-items:center; justify-content:space-between; margin:0 0 16px;} .filters .fh .label{color:var(--ink);} .fgroup{padding:15px 0; border-top:1px solid var(--line);} .fgroup:first-of-type{border-top:0; padding-top:2px;} .fgroup > .label{display:block; margin-bottom:11px;} .search{display:flex; align-items:center; gap:9px; border:1px solid var(--line-2); border-radius:0; padding:9px 12px; transition:border-color .15s;} .search:focus-within{border-color:var(--ink);} .search svg{width:16px;height:16px;color:var(--ink-3);stroke-width:1.7;flex:none;} .search input{border:0; outline:0; width:100%; font-size:13px; background:transparent; color:var(--ink);} .chips{display:flex; flex-wrap:wrap; gap:7px;} .chip{border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2); font-size:12px; font-weight:500; padding:6px 11px; border-radius:0; transition:all .13s var(--ease);} .chip:hover{border-color:var(--ink-3);} .chip[aria-pressed="true"]{background:var(--black); color:var(--white); border-color:var(--black);} .marcabox{max-height:200px; overflow:auto; border:1px solid var(--line); border-radius:0; padding:5px; margin-top:11px;} .fdrop{width:100%; display:flex; align-items:center; justify-content:space-between; background:none; border:0; padding:0; cursor:pointer; color:var(--ink);} .fdrop .label{color:var(--ink);} .fdrop-r{display:flex; align-items:center; gap:8px;} .fdrop-n{font-size:11px; font-weight:700; background:var(--black); color:#fff; border-radius:0; padding:1px 7px; min-width:18px; text-align:center;} .fdrop .chev{width:16px; height:16px; color:var(--ink-3); transition:transform .18s var(--ease); stroke-width:2; flex:none;} .fdrop[aria-expanded="true"] .chev{transform:rotate(180deg);} .mrow{display:flex; align-items:center; gap:9px; padding:6px 8px; border-radius:0; font-size:12.5px; cursor:pointer; color:var(--ink-2);} .mrow:hover{background:var(--surface-3);} .mrow input{accent-color:var(--black); width:14px; height:14px;} .mrow .c{margin-left:auto; font-size:11px; color:var(--ink-3); font-weight:600;} .segd{display:flex; gap:2px; background:var(--surface-3); border-radius:0; padding:3px;} .segd button{flex:1; border:0; background:transparent; color:var(--ink-2); font-size:12px; font-weight:600; padding:6px 4px; border-radius:0; transition:all .13s var(--ease);} .segd button[aria-pressed="true"]{background:var(--surface); color:var(--ink); box-shadow:var(--shadow);} .rangerow{display:flex; align-items:center; gap:8px;} .rangerow input{width:100%; border:1px solid var(--line-2); border-radius:0; padding:8px 10px; font-size:13px; color:var(--ink); outline:0;} .rangerow input:focus{border-color:var(--ink);} .rangerow span{color:var(--ink-3); font-size:12px;} .togg{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 0; cursor:pointer;} .togg .tl{font-size:12.5px; color:var(--ink-2); font-weight:500;} .switch{width:38px; height:22px; border-radius:999px; background:var(--line-2); position:relative; transition:background .18s var(--ease); flex:none;} .switch::after{content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.28); transition:transform .18s var(--ease);} .togg[aria-pressed="true"] .switch{background:var(--black);} .togg[aria-pressed="true"] .switch::after{transform:translateX(16px);} select.sel{width:100%; border:1px solid var(--line-2); border-radius:0; padding:9px 10px; font-size:13px; color:var(--ink); outline:0; background:var(--surface); appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237d7d82' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; padding-right:32px;} select.sel:focus{border-color:var(--ink);} /* results / table */ .results{background:var(--surface); border:1px solid var(--line); border-radius:0; overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column; height:calc(100vh - 240px);} .rbar{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:15px 18px; border-bottom:1px solid var(--line); flex-wrap:wrap;} .rbar .cnt{font-size:13px; color:var(--ink-2);} .rbar .cnt b{color:var(--ink); font-weight:700; font-size:15px;} .rbar .cnt .sel{margin-left:10px; padding-left:10px; border-left:1px solid var(--line-2); color:var(--ink-3);} .rbar .cnt .sel b{color:var(--ink);} .tscroll{overflow:auto; flex:1; min-height:0;} table{width:100%; border-collapse:collapse; font-size:13px;} thead th{position:sticky; top:0; background:var(--surface); text-align:left; font-size:10px; letter-spacing:var(--track-label-tight); text-transform:uppercase; color:var(--ink-3); font-weight:700; padding:11px 11px; border-bottom:1.5px solid var(--ink); white-space:nowrap; z-index:1;} tbody td{padding:10px 11px; border-bottom:0; color:var(--ink-2); white-space:nowrap;} /* Filas alternas en vez de reglas: con seis columnas es lo que permite seguir una fila de punta a punta sin perderla. */ tbody tr:nth-child(even) td{background:var(--surface-2);} tbody tr:hover td{background:var(--surface-4);} td.num, th.num{text-align:right; font-variant-numeric:tabular-nums;} /* Toda cifra de dato alinea por unidad, para poder compararlas de un vistazo. */ .mono, td.mono, .rk .n, .fk .n, .cnt, .ac-metric, .metabar .m .n, .ss-row.tot .ss-v, .rt-n{font-variant-numeric:tabular-nums;} tbody tr:hover{background:var(--surface-3);} tbody tr.sel{background:var(--surface-4);} tbody tr:last-child td{border-bottom:0;} td.name b{color:var(--ink); font-weight:600; display:block; font-size:13px;} td.name span{color:var(--ink-3); font-size:11px; letter-spacing:.02em;} .mono{font-variant-numeric:tabular-nums; letter-spacing:.01em;} .cbx{width:15px;height:15px;accent-color:var(--black);} .pill{display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; padding:3px 9px; border-radius:0; border:1px solid var(--line-2); color:var(--ink-2); letter-spacing:.01em;} .pill.solid{background:var(--black); color:var(--white); border-color:var(--black);} .pill.open{border-style:dashed; color:var(--ink-3);} .tags{display:flex; gap:5px; flex-wrap:nowrap;} .tag{font-size:11px; color:var(--ink-2); border:1px solid var(--line-2); border-radius:0; padding:2px 7px; font-weight:500;} .tag.more{color:var(--ink-3);} .empty{padding:64px 24px; text-align:center; color:var(--ink-3);} .empty svg{width:34px;height:34px;stroke-width:1.3;color:var(--ink-3);margin-bottom:14px;} .empty b{display:block; color:var(--ink); font-size:15px; font-weight:600; margin-bottom:6px;} .empty p{margin:0 auto; font-size:13px; max-width:38ch; line-height:1.6;} /* ---------- Campañas ---------- */ /* Un solo componente de pestañas, dos instancias. Los nombres de clase se mantienen separados porque el JS los usa como gancho (querySelector). */ /* Regla gruesa bajo las pestañas, igual que bajo el encabezado de tabla. En Campañas quien la lleva es .camp-toolbar, porque anula la de .tabs. */ /* .auto-tabs comparte estilo pero NO clase con .base-tabs: el JS engancha por `document.querySelector(".base-tabs")` y una clase repetida rompería Base. */ .tabs, .base-tabs, .auto-tabs{display:flex; gap:4px; border-bottom:1.5px solid var(--ink); margin:0 0 22px;} .camp-toolbar{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; border-bottom:1.5px solid var(--ink); margin:0 0 22px; flex-wrap:wrap;} .camp-toolbar .tabs{border-bottom:0; margin:0;} /* El buscador pierde su caja y queda como una línea de escritura. */ .camp-search{margin-bottom:9px; min-width:210px; border:0; border-bottom:1px solid var(--line-3); background:transparent; padding-left:0; padding-right:0;} .camp-search:focus-within{border-bottom-color:var(--ink);} /* Versalita, igual que los filtros de estado con los que comparten fila. */ .tabs button, .base-tabs button, .auto-tabs button{border:0; background:transparent; color:var(--ink-3); font-size:12px; font-weight:700; letter-spacing:var(--track-label-tight); text-transform:uppercase; padding:11px 4px; margin-right:20px; position:relative; transition:color .15s;} .tabs button[aria-pressed="true"], .base-tabs button[aria-pressed="true"], .auto-tabs button[aria-pressed="true"]{color:var(--ink);} .tabs button[aria-pressed="true"]::after, .base-tabs button[aria-pressed="true"]::after, .auto-tabs button[aria-pressed="true"]::after{content:""; position:absolute; left:0; right:0; bottom:-1.5px; height:3px; background:var(--black);} .tabs button .n, .base-tabs button .n, .auto-tabs button .n{font-size:11px; color:var(--ink-3); margin-left:5px; font-weight:600;} /* Filtros de la lista, con la misma piel discreta del buscador de campaña: línea de escritura en vez de caja. No compiten con las fichas. */ /* Van en la misma fila que las pestañas y el buscador, alineados a la línea de base de las pestañas. Si no caben, bajan enteros en vez de partirse. */ /* Bases guardadas: el buscador era el único sin fondo propio y quedaba como un hueco entre dos cajas blancas. Todos pasan a la piel de línea de Campañas. Acotado a .rbar para no alcanzar los mismos controles en Reporte. */ .rbar .rt-filters .search, .rbar .rt-filters .msel-btn, .rbar .rt-filters .monthin{border:0; border-bottom:1px solid var(--line-3); background-color:transparent; padding:5px 0;} .rbar .rt-filters .msel-btn{padding-right:4px;} .rbar .rt-filters .search:focus-within, .rbar .rt-filters .monthin:focus{border-bottom-color:var(--ink);} /* Dos niveles y no cinco: los rótulos en versalita de 9,5 px y los campos que se escriben o se eligen en 12,5 px. Vale igual acá y en Campañas. */ .rbar .rt-filters .search input, .rbar .rt-filters .msel-btn, .rbar .rt-filters .monthin, .camp-filters .camp-search input, .camp-filters .msel-btn, .camp-filters .monthin{font-size:12.5px; font-weight:500; letter-spacing:normal; text-transform:none; color:var(--ink-2);} .rbar .rt-filters .rt-range, .camp-filters .rt-range{font-size:9.5px; letter-spacing:var(--track-label-tight); text-transform:uppercase; font-weight:700; color:var(--ink-3); gap:7px;} /* El input de mes trae un ancho intrínseco muy holgado y dejaba un vacío entre el valor y el rótulo siguiente. Se ajusta a lo que mide "septiembre de 2026". */ .rbar .rt-filters .monthin, .camp-filters .monthin{width:134px; text-align:center;} .camp-filters{display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin:0 0 16px;} .camp-filters .camp-search{margin-bottom:0; min-width:230px;} /* El retorno al pie se separa de las acciones de envío: no es una acción más. */ .ed-back2{margin-right:auto;} .ed-back2 svg{transform:rotate(0deg);} .camp-filters .msel-btn{border:0; border-bottom:1px solid var(--line-3); background-color:transparent; padding:5px 0; min-width:150px; justify-content:space-between;} .camp-filters .msel-btn:focus{border-bottom-color:var(--ink);} .camp-filters .rt-range{gap:9px; font-size:8.5px; color:var(--ink-3);} .camp-filters .monthin{border:0; border-bottom:1px solid var(--line-3); background:transparent; padding:5px 0; font-size:12.5px; color:var(--ink-2); width:118px;} .camp-filters .monthin:focus{border-bottom-color:var(--ink); color:var(--ink);} /* Comparten fila con las pestañas, así que comparten cuerpo: mismo tamaño, mismo peso y el mismo subrayado al encenderse. */ .camp-estados{display:inline-flex; gap:20px; align-items:flex-end;} .camp-estados .chip{border:0; background:transparent; padding:11px 4px; font-size:12px; letter-spacing:var(--track-label-tight); text-transform:uppercase; font-weight:700; color:var(--ink-3);} .camp-estados .chip[aria-pressed="true"]{background:transparent; color:var(--ink); box-shadow:inset 0 -3px 0 var(--ink);} .camp-clear{border:0; background:transparent; padding:2px 0; font-size:9px; letter-spacing:var(--track-label-tight); text-transform:uppercase; font-weight:700; color:var(--ink-3); text-decoration:underline; text-underline-offset:3px;} .camp-clear:hover{color:var(--ink);} .camp-count{font-size:9px; letter-spacing:var(--track-label-tight); text-transform:uppercase; font-weight:700; color:var(--ink-3); margin-left:auto;} /* Sin separación entre filas: las reglas inferiores se encadenan como una lista. */ .clist{display:flex; flex-direction:column; gap:0;} /* La tarjeta pasa a fila: la separación es la regla inferior, no una caja. */ .ccard{background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0; box-shadow:none; padding:16px 0; display:grid; grid-template-columns:64px 1fr auto; gap:20px; align-items:center; transition:background .15s var(--ease);} .ccard:hover{background:var(--surface-2);} /* Miniatura de la pieza: gráfica en gris, o las primeras líneas compuestas. */ .cthumb{width:64px; height:80px; overflow:hidden; background:var(--surface-3); border:1px solid var(--line);} .cthumb img{width:100%; height:100%; object-fit:cover; filter:grayscale(1); display:block;} .cthumb.txt{display:flex; align-items:center; padding:6px; font-size:7px; line-height:1.5; color:var(--ink-3); overflow:hidden;} .cthumb.void{border-style:dashed; border-color:var(--line-3); background:var(--paper);} .ccard .ci{min-width:0;} .ccard .ci .top{display:flex; align-items:center; gap:12px; flex-wrap:wrap;} .ccard .ci h3{margin:0; font-size:16px; font-weight:600; letter-spacing:-.01em;} .ccard .ci .meta{display:flex; gap:18px; flex-wrap:wrap; margin-top:9px; font-size:12px; color:var(--ink-3);} .ccard .ci .meta b{color:var(--ink-2); font-weight:600;} .ccard .ci .meta .it{display:inline-flex; align-items:center; gap:6px;} .ccard .ci .meta svg{width:13px;height:13px;stroke-width:1.7;opacity:.7;} .ccard .cx{display:flex; align-items:center; gap:12px;} @media (max-width:720px){ .ccard{grid-template-columns:64px 1fr;} .ccard .cx{grid-column:1/-1; justify-content:space-between; border-top:1px solid var(--line); padding-top:14px;} } /* El estado se lee por peso, no por pastilla: enviada en tinta, el resto en gris y el borrador con guion. Cuatro estados, no tres: archivada también existe. */ .state{font-size:9px; letter-spacing:var(--track-label-tight); text-transform:uppercase; font-weight:700; padding:0; border:0; background:transparent; white-space:nowrap;} .state.enviada{color:var(--ink);} .state.programada, .state.borrador, .state.archivada{color:var(--ink-3);} .state.borrador::before{content:"— ";} /* editor */ .editor{display:grid; grid-template-columns:1fr 400px; gap:28px; align-items:start;} @media (max-width:1040px){ .editor{grid-template-columns:1fr;} } .ehead{display:flex; align-items:center; justify-content:space-between; gap:14px; margin:0 0 22px; flex-wrap:wrap;} .ehead .back{display:inline-flex; align-items:center; gap:7px; color:var(--ink-3); font-size:12.5px; font-weight:600; background:none; border:0; padding:0;} .ehead .back:hover{color:var(--ink);} .ehead .back svg{width:15px;height:15px;stroke-width:1.8;} .card{background:var(--surface); border:1px solid var(--line); border-radius:0; padding:22px; box-shadow:var(--shadow);} .card + .card{margin-top:16px;} .card h4{margin:0 0 4px; font-size:14px; font-weight:700;} .card .hint{margin:0 0 16px; font-size:12px; color:var(--ink-3); line-height:1.5;} .field{margin-bottom:16px;} .field:last-child{margin-bottom:0;} .field > label{display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); font-weight:700; margin-bottom:7px;} .field input[type=text], .field input[type=datetime-local], .field textarea{width:100%; border:1px solid var(--line-2); border-radius:0; padding:11px 13px; font-size:13.5px; color:var(--ink); outline:0; transition:border-color .15s; background:var(--surface);} .field textarea{resize:vertical; min-height:150px; line-height:1.65;} .field input:focus, .field textarea:focus{border-color:var(--ink);} .field .cofield{display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:0; padding:11px 13px; background:var(--surface-3); color:var(--ink-3); font-size:13px;} .inline2{display:grid; grid-template-columns:1fr auto; gap:16px; align-items:end; margin-bottom:16px;} @media (max-width:520px){ .inline2{grid-template-columns:1fr;} } .actions{display:flex; gap:10px; margin-top:20px; flex-wrap:wrap;} /* preview */ .preview{position:sticky; top:20px;} .device{background:var(--surface); border:1px solid var(--line-2); border-radius:0; overflow:hidden; box-shadow:var(--shadow-pop);} .device .bar{display:flex; align-items:center; gap:8px; padding:11px 14px; border-bottom:1px solid var(--line); background:var(--surface-3);} .device .bar .d{width:9px;height:9px;border-radius:0;background:var(--line-3);} .device .bar .u{margin-left:8px; font-size:11px; color:var(--ink-3); letter-spacing:.02em;} .mail{padding:0;} .mail .mh{background:var(--black); color:var(--white); padding:26px 24px; text-align:center;} .mail .mh .wm{font-weight:300; font-size:22px; letter-spacing:.42em; padding-left:.42em;} .mail .mh .sub{font-size:8px; letter-spacing:.26em; text-transform:uppercase; color:#b9b9bd; margin-top:8px;} .mail .mfrom{padding:14px 24px; border-bottom:1px solid var(--line); font-size:12px; color:var(--ink-3);} .mail .mfrom b{color:var(--ink); font-weight:600;} .mail .msubj{padding:18px 24px 6px; font-size:16px; font-weight:600; letter-spacing:-.01em; line-height:1.35;} .mail .mbody{padding:6px 24px 22px; font-size:13.5px; color:var(--ink-2); line-height:1.7; white-space:pre-wrap; min-height:120px;} .mail .mcta{margin:6px 24px 24px; display:block; text-align:center; background:var(--black); color:var(--white); font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:13px; border-radius:0; text-decoration:none;} .mail .mf{padding:18px 24px; border-top:1px solid var(--line); font-size:10px; color:var(--ink-3); text-align:center; line-height:1.7; letter-spacing:.02em;} .pvtag{text-align:center; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); font-weight:600; margin-top:14px;} /* ---------- Reporte ---------- */ .repgrid{display:grid; grid-template-columns:300px 1fr; gap:26px; align-items:stretch;} @media (max-width:980px){ .repgrid{grid-template-columns:1fr;} } .replist{background:var(--surface); border:1px solid var(--line); border-radius:0; overflow:hidden; box-shadow:var(--shadow);} .replist .rl{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line); cursor:pointer; transition:background .13s;} .replist .rl:last-child{border-bottom:0;} .replist .rl:hover{background:var(--surface-3);} .replist .rl[aria-pressed="true"]{background:#2f2f33; color:var(--white);} .replist .rl .nm{font-size:13px; font-weight:600;} .replist .rl .dt{font-size:11px; color:var(--ink-3); margin-top:3px;} .replist .rl[aria-pressed="true"] .dt{color:#9a9a9f;} .replist .rl .op{font-size:12px; font-weight:700; font-variant-numeric:tabular-nums;} .rtable{margin-top:26px; background:var(--surface); border:1px solid var(--line); border-radius:0; overflow:hidden; box-shadow:var(--shadow);} .rtable .rt-h{padding:16px 20px; border-bottom:1px solid var(--line); font-size:13px; font-weight:700;} /* ---------- Dialog ---------- */ dialog{border:0; border-radius:0; padding:0; box-shadow:var(--shadow-pop); max-width:440px; width:calc(100% - 32px); color:var(--ink);} dialog::backdrop{background:rgba(11,11,12,.42); backdrop-filter:blur(3px);} .dlg{border:1px solid var(--ink); padding:26px;} .dlg h3{margin:0 0 6px; font-size:18px; font-weight:600; letter-spacing:-.01em;} .dlg p{margin:0 0 20px; font-size:13px; color:var(--ink-3); line-height:1.6;} .dlg .field{margin-bottom:18px;} .dlg input{width:100%; border:1px solid var(--line-2); border-radius:0; padding:11px 13px; font-size:14px; outline:0;} .dlg input:focus{border-color:var(--ink);} .dlg .dact{display:flex; gap:10px; justify-content:flex-end;} .segnote{display:flex; align-items:center; gap:10px; padding:12px 14px; border:1px solid var(--line); border-radius:0; background:var(--surface-3); font-size:12.5px; color:var(--ink-2); margin-bottom:20px;} .segnote b{font-weight:700;} /* ---------- Confirmación de envío ---------- */ .ss-warn{display:flex; align-items:flex-start; gap:9px; padding:11px 13px; border:1px dashed var(--ink-3); border-radius:0; background:var(--surface-2); font-size:12px; color:var(--ink-2); line-height:1.5; margin-bottom:16px;} .ss-warn svg{width:16px; height:16px; stroke-width:1.8; flex:none; margin-top:1px; color:var(--ink);} .sendsum{border:1px solid var(--line); border-radius:0; overflow:hidden; margin-bottom:18px;} .ss-row{display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:10px 14px; border-bottom:1px solid var(--line); font-size:12.5px;} .ss-row:last-child{border-bottom:0;} .ss-k{color:var(--ink-3); font-size:10.5px; letter-spacing:var(--track-label-tight); text-transform:uppercase; font-weight:700; flex:none;} .ss-v{color:var(--ink-2); text-align:right; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .ss-row.tot{background:var(--surface-3);} .ss-row.tot .ss-v{color:var(--ink); font-weight:700; font-size:16px; font-variant-numeric:tabular-nums;} .ss-ack{display:flex; align-items:flex-start; gap:10px; font-size:12.5px; color:var(--ink-2); line-height:1.5; margin-bottom:20px; cursor:pointer;} .ss-ack input{accent-color:var(--black); width:15px; height:15px; margin-top:1px; flex:none;} .ss-ack b{color:var(--ink); font-weight:700;} .ss-act{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;} .ss-act .r{display:flex; gap:10px; margin-left:auto;} .ss-v.wrap{white-space:normal; overflow:visible;} /* Lista de especificacion: clave a la izquierda, valor pegado a ella. El space-between del dialogo de envio deja un hueco raro con valores cortos. */ #dlg-filtros{max-width:400px;} #dlg-filtros .dlg p{margin-bottom:14px;} #fd-rows .ss-row{display:grid; grid-template-columns:118px 1fr; gap:12px; align-items:baseline; padding:11px 14px;} #fd-rows .ss-v{text-align:left;} /* Resumen de filtros de una base guardada */ .fchips{display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; border:0; background:none; padding:0; text-align:left; font:inherit; cursor:pointer;} .fchips:hover .tag{border-color:var(--ink-3); color:var(--ink);} .fchips .tag.more{color:var(--ink-3); border-style:dashed;} .fc-none{font-size:11px; color:var(--ink-3); font-style:italic;} /* ---------- Toast ---------- */ .toast{position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--black); color:var(--white); font-size:13px; font-weight:500; padding:13px 20px; border-radius:0; box-shadow:var(--shadow-pop); opacity:0; pointer-events:none; transition:all .3s var(--ease); z-index:50; display:flex; align-items:center; gap:10px;} .toast svg{width:16px;height:16px;stroke-width:2;} .toast.show{opacity:1; transform:translateX(-50%) translateY(0);} .synthetic{margin-top:26px; font-size:10.5px; color:var(--ink-3); letter-spacing:.02em; line-height:1.55; border-top:1px solid var(--line); padding-top:14px; max-width:none;} /* ---- Assets reales: logo MOSSO + portada boutique ---- */ .brand-logo{width:154px; max-width:82%; height:auto; display:block;} .brand-mini img{height:15px; width:auto; display:block;} .hero{position:relative; height:clamp(178px,26vh,240px); background:#0b0b0c url('boutique_bw.jpg') center 42% / cover no-repeat; display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--line);} .hero::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,11,12,.38), rgba(11,11,12,.16) 45%, rgba(11,11,12,.66));} .hero-inner{position:relative; z-index:1; text-align:center; padding:20px;} .hero-logo{width:clamp(132px,16vw,196px); height:auto; filter:drop-shadow(0 3px 20px rgba(0,0,0,.55));} .hero-kick{margin-top:14px; color:#fff; font-size:clamp(9.5px,1.3vw,11.5px); letter-spacing:.28em; text-transform:uppercase; font-weight:500; text-shadow:0 1px 14px rgba(0,0,0,.75);} .cover-body{padding:clamp(22px,3vw,36px) clamp(20px,6vw,96px) 44px; max-width:1340px;} .cover-lead{margin:0; font-size:clamp(16px,1.65vw,20px); color:var(--ink); font-weight:400; max-width:none; line-height:1.5; letter-spacing:-.005em;} .metabar{display:flex; flex-wrap:wrap; gap:34px; margin:26px 0 0; padding-top:22px; border-top:1px solid var(--line);} .metabar .m .n{font-size:29px; font-weight:600; letter-spacing:-.02em; line-height:1;} .metabar .m .k{font-size:10px; letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink-3); font-weight:700; margin-top:8px;} .mail-logo{height:19px; width:auto; margin:0 auto; display:block;} @media (max-width:900px){ .hero{height:186px;} } /* Estado activo (verde) + base con nombre */ [data-auto][aria-pressed="true"] .switch, #ae-activo[aria-pressed="true"] .switch{ background:var(--active); } .baseband{display:flex; align-items:center; gap:10px; border:1px solid var(--line-2); border-radius:0; padding:11px 13px; font-weight:600; font-size:13.5px; color:var(--ink);} .baseband svg{width:16px; height:16px; stroke-width:1.7; color:var(--ink-2); flex:none;} .baseband .bn{margin-left:auto; font-size:10.5px; letter-spacing:var(--track-label-tight); text-transform:uppercase; color:var(--ink-3); font-weight:700; white-space:nowrap;} /* Always-on */ .auto-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(345px,1fr)); gap:16px;} .auto-card{background:var(--surface); border:1px solid var(--line); border-radius:0; padding:20px; box-shadow:none; display:flex; flex-direction:column;} /* La pausada se lee como papel en reposo: sin blanco y con la regla punteada. */ .auto-card.off{background:var(--paper-2); border-style:dashed; border-color:var(--line-3);} .ac-head{display:flex; align-items:flex-start; gap:14px;} .ac-n{font-size:12px; font-weight:700; color:var(--ink-3); letter-spacing:.04em; padding-top:3px; font-variant-numeric:tabular-nums;} .ac-ti{flex:1; min-width:0;} .ac-ti h3{margin:0; font-size:16px; font-weight:600; letter-spacing:-.01em;} .ac-tag{font-size:11px; color:var(--ink-3); margin-top:4px; letter-spacing:.02em; font-weight:500;} .ac-trigger{display:flex; align-items:flex-start; gap:8px; margin:15px 0 4px; font-size:12px; color:var(--ink-2); line-height:1.5;} .ac-trigger svg{width:14px; height:14px; stroke-width:1.7; color:var(--ink-3); flex:none; margin-top:1px;} .ac-trigger b{font-weight:600;} .auto-steps{margin:14px 0 6px; padding-left:4px; flex:1;} .step{display:flex; gap:12px; position:relative; padding-bottom:13px;} .step:last-child{padding-bottom:0;} .step::before{content:""; position:absolute; left:3.5px; top:12px; bottom:-2px; width:1px; background:var(--line-2);} .step:last-child::before{display:none;} .st-dot{width:8px; height:8px; border-radius:0; background:var(--ink); margin-top:4px; flex:none; box-shadow:0 0 0 3px var(--surface);} .auto-card.off .st-dot{background:var(--ink-3); box-shadow:0 0 0 3px var(--surface-2);} .st-body{min-width:0;} .st-t{font-size:10.5px; font-weight:700; letter-spacing:var(--track-label-tight); text-transform:uppercase; color:var(--ink-3);} .st-d{font-size:12.5px; color:var(--ink-2); margin-top:2px; line-height:1.45;} .ac-foot{display:flex; align-items:center; gap:12px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); font-size:11.5px;} .ac-live{color:var(--ink); font-weight:700; display:inline-flex; align-items:center; gap:6px;} .ac-live::before{content:""; width:7px; height:7px; border-radius:0; background:var(--ink);} .ac-paused{color:var(--ink-3); font-weight:600; display:inline-flex; align-items:center; gap:6px;} .ac-paused::before{content:""; width:7px; height:7px; border-radius:0; border:1px solid var(--ink-3);} .ac-metric{color:var(--ink-2); font-weight:600;} .ac-count{margin-left:auto; color:var(--ink-3); font-weight:600; letter-spacing:.03em;} /* Editor: carga de gráfica */ .uploadzone{display:block; width:100%; border:1.5px dashed var(--line-3); border-radius:0; padding:18px; background:var(--surface-2); cursor:pointer; text-align:left; transition:border-color .15s, background .15s; font:inherit;} .uploadzone:hover{border-color:var(--ink-3); background:var(--surface-3);} .uz-inner{display:flex; align-items:center; gap:14px;} .uz-inner svg{width:26px; height:26px; stroke-width:1.5; color:var(--ink-3); flex:none;} .uz-t{display:flex; flex-direction:column; min-width:0;} .uz-t b{font-size:13px; font-weight:600; color:var(--ink);} .uz-t span{font-size:11.5px; color:var(--ink-3); margin-top:2px; line-height:1.4;} .graf-loaded{margin-top:14px;} .gl-row{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;} .gl-lbl{font-size:11px; letter-spacing:var(--track-label-tight); text-transform:uppercase; color:var(--ink-3); font-weight:700;} .gl-w{font-size:13px; font-weight:700; font-variant-numeric:tabular-nums;} .graf-loaded input[type=range]{width:100%; accent-color:var(--black);} .mail-graphic{display:block; width:100%;} .mbody.has-graphic{padding:0 !important; min-height:0 !important;} /* Detalle del cliente */ tbody tr{cursor:pointer;} #dlg-client{max-width:640px;} .cdlg{padding:28px; position:relative;} .cdlg-x{position:absolute; top:16px; right:16px; width:32px; height:32px; border-radius:0; border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2); display:grid; place-items:center; cursor:pointer;} .cdlg-x:hover{border-color:var(--ink); color:var(--ink);} .cdlg-x svg{width:15px; height:15px; stroke-width:2;} .cd-head{display:flex; align-items:center; gap:14px; margin-bottom:16px; padding-right:40px;} .cd-av{width:50px; height:50px; border-radius:0; background:var(--black); color:#fff; display:grid; place-items:center; font-weight:600; font-size:16px; flex:none; letter-spacing:.02em;} .cd-id{flex:1; min-width:0;} .cd-id h3{margin:0; font-size:19px; font-weight:600; letter-spacing:-.01em;} .cd-sub{font-size:12.5px; color:var(--ink-3); margin-top:3px;} .cd-contact{display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--ink-2); border:1px solid var(--line); border-radius:0; padding:10px 13px; background:var(--surface-2); margin-bottom:18px;} .cd-contact svg{width:15px; height:15px; stroke-width:1.7; color:var(--ink-3); flex:none;} .cd-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:0; overflow:hidden; margin-bottom:18px;} .cd-st{background:var(--surface); padding:15px 10px; text-align:center;} .cd-st .n{font-size:23px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums;} .cd-st .l{font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); font-weight:600; margin-top:5px;} .cd-block{margin-bottom:18px;} .cd-block:last-child{margin-bottom:0;} .cd-bt{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:700; margin-bottom:11px;} .cd-marcas{display:flex; flex-wrap:wrap; gap:6px;} .cd-timeline{max-height:280px; overflow:auto; border:1px solid var(--line); border-radius:0;} .cd-ev{display:flex; align-items:center; gap:12px; padding:11px 14px; border-bottom:1px solid var(--line); font-size:12.5px;} .cd-ev:last-child{border-bottom:0;} .cd-ev-d{width:96px; flex:none; color:var(--ink-3);} .cd-ev-b{flex:1; min-width:0; display:flex; align-items:center; gap:9px;} .cd-ev-txt{color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .cd-ev-txt b{color:var(--ink); font-weight:600;} .cd-ev-ch{flex:none; font-size:11px; color:var(--ink-3);} .vt{font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:2px 7px; border-radius:0; flex:none;} .vt-c{background:var(--black); color:#fff;} .vt-q{background:var(--surface-3); color:var(--ink-2); border:1px solid var(--line-2);} .vt-s{background:var(--surface); color:var(--ink-3); border:1px dashed var(--line-3);} /* Fixes + reporte compacto + previsualizador */ .cofield svg{width:16px; height:16px; stroke-width:1.7; color:var(--ink-3); flex:none;} .dest-mini{display:flex; align-items:center; gap:8px; margin-top:14px; padding:10px 13px; border:1px solid var(--line); border-radius:0; background:var(--surface-3); font-size:13px; color:var(--ink-2);} .dest-mini svg{width:15px; height:15px; stroke-width:1.7; color:var(--ink-3); flex:none;} .dest-mini b{color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums;} .showing-inline{color:var(--ink-3); font-size:12px;} /* La columna de campañas activas es una lista de consulta, no un panel: con 320 px fijos quedaba angosta y alta al lado del embudo. Pasa a proporción. */ /* Altura común explícita en las dos tarjetas. Estirar ambas al 100% creaba una dependencia circular (cada una definía el alto de la fila) y el embudo se quedaba sin pintar sus etapas. */ .repgrid{grid-template-columns:1.9fr 1fr; align-items:start;} .repgrid .funnel, .repgrid .replist{height:436px;} @media (max-width:980px){ .repgrid{grid-template-columns:1fr;} } /* Misma altura que la tarjeta del embudo, con scroll interno en la lista: las dos columnas terminan en la misma línea en vez de una colgando bajo la otra. */ .replist{max-height:none; display:flex; flex-direction:column;} .rl-search{display:flex; align-items:center; gap:8px; padding:11px 18px; border-bottom:1px solid var(--line);} .rl-search svg{width:15px; height:15px; color:var(--ink-3); stroke-width:1.7; flex:none;} .rl-search input{border:0; outline:0; width:100%; font-size:12.5px; background:transparent; color:var(--ink); font-family:inherit;} .rl-list{overflow:auto; flex:1; min-height:0;} .rl-empty{padding:20px; text-align:center; color:var(--ink-3); font-size:12.5px;} /* La cabecera calca la caja de .fhd: 20 px de aire arriba, una línea de 19 px (el alto del h3 del embudo) y 18 px abajo. Así los dos rótulos arrancan a la misma altura y lo que sigue en cada columna también. */ .rl-title{padding:20px 18px 0; margin-bottom:18px; line-height:19px; font-size:11px; letter-spacing:var(--track-label-tight); text-transform:uppercase; color:var(--ink-3); font-weight:700;} .compro-col{text-align:center;} .sb-table tbody td{padding:9px 11px; vertical-align:middle;} .sb-acts{display:flex; align-items:center; justify-content:flex-end; gap:8px;} .sb-acts .btn.sm{height:32px;} .sb-table .btn.sm{padding:5px 10px;} .msel{position:relative;} .msel-btn{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line-2); border-radius:0; padding:7px 12px; background:var(--surface); font-size:12.5px; font-weight:500; color:var(--ink-2); cursor:pointer; font-family:inherit;} .msel-btn:hover{border-color:var(--ink-3);} .msel-chev{width:15px; height:15px; stroke-width:2; color:var(--ink-3);} .msel-menu{position:absolute; right:0; top:calc(100% + 6px); width:220px; background:var(--surface); border:1px solid var(--line-2); border-radius:0; box-shadow:var(--shadow-pop); z-index:30; padding:6px;} .msel-search{display:flex; align-items:center; gap:8px; padding:6px 8px; border-bottom:1px solid var(--line); margin-bottom:4px;} .msel-search svg{width:14px; height:14px; color:var(--ink-3); stroke-width:1.7; flex:none;} .msel-search input{border:0; outline:0; width:100%; font-size:12.5px; background:transparent; color:var(--ink); font-family:inherit;} .msel-list{max-height:200px; overflow:auto;} .msel-item{display:flex; align-items:center; gap:9px; padding:7px 8px; border-radius:0; font-size:12.5px; color:var(--ink-2); cursor:pointer;} .msel-item:hover{background:var(--surface-3);} .msel-item input{accent-color:var(--black); width:14px; height:14px;} .msel-empty{padding:10px; text-align:center; color:var(--ink-3); font-size:12px;} /* Mismo encuadre que las métricas de la Portada: regla gruesa arriba, fina abajo y separadores verticales, sin cuatro cajas sueltas. */ .rep-kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:0; background:transparent; border:0; border-top:1.5px solid var(--ink); border-bottom:1px solid var(--line); border-radius:0; overflow:visible; margin-bottom:24px;} .rk{background:transparent; padding:17px 16px 19px; text-align:center; border-right:1px solid var(--line);} .rk:last-child{border-right:0;} .rk .n{font-size:24px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums;} .rk .l{font-size:10.5px; letter-spacing:var(--track-label-tight); text-transform:uppercase; color:var(--ink-3); font-weight:700; margin-top:6px;} @media (max-width:640px){ .rep-kpis{grid-template-columns:repeat(2,1fr);} } .funnel{background:var(--surface); border:1px solid var(--line); border-radius:0; padding:20px 22px; box-shadow:var(--shadow); height:100%; display:flex; flex-direction:column;} /* Tres columnas: rótulo de ancho fijo, barra elástica y cifras alineadas a la derecha, para que los cuatro números formen columna. */ .fstage{display:grid; grid-template-columns:96px 1fr 108px; align-items:center; gap:16px; margin-bottom:0; padding:9px 0;} .fstage .nm{font-size:11px; letter-spacing:var(--track-label-tight); text-transform:uppercase; font-weight:700; color:var(--ink-2);} .fstage .vv{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;} .fstage .vv b{font-size:15px; font-weight:700; color:var(--ink);} .fstage .vv .pc{display:inline-block; min-width:38px; margin-left:8px; font-size:11px; color:var(--ink-3); font-weight:600;} .fstages{flex:1; display:flex; flex-direction:column; justify-content:space-evenly; gap:0; margin-top:6px;} .fhd{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:18px; flex-wrap:wrap;} .fhd h3{margin:0; font-size:16px; font-weight:600; letter-spacing:-.01em;} .fhd .dt{font-size:11.5px; color:var(--ink-3);} .fstage{margin-bottom:9px;} .fstage:last-child{margin-bottom:0;} .fl{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:6px;} .fl .nm{font-size:12.5px; font-weight:600;} .fl .vv{font-size:12px; color:var(--ink-3); font-variant-numeric:tabular-nums;} .fl .vv b{color:var(--ink); font-size:14px; font-weight:700;} .fbar{height:16px; border-radius:0; background:var(--surface-3); overflow:hidden;} .fbar .fill{height:100%; border-radius:0; transition:width .8s var(--ease); background:var(--funnel-1);} .fbar.g2 .fill{background:var(--funnel-2);} .fbar.g3 .fill{background:var(--funnel-3);} .fbar.g4 .fill{background:var(--funnel-4);} .rt-n{font-size:11px; font-weight:700; color:var(--ink-3); background:var(--surface-3); border-radius:0; padding:2px 9px; margin-left:6px;} .rrow{cursor:pointer;} .rrow.sel{background:var(--surface-4);} .fkpis{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:0; overflow:hidden; margin-bottom:18px;} @media (max-width:560px){ .fkpis{grid-template-columns:repeat(2,1fr);} } .fk{background:var(--surface); padding:12px 14px; text-align:center;} .fk .n{font-size:20px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums;} .fk .l{font-size:9.5px; letter-spacing:var(--track-label-tight); text-transform:uppercase; color:var(--ink-3); font-weight:700; margin-top:5px;} .rt-h{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;} .rt-filters{display:flex; align-items:center; gap:10px; flex-wrap:wrap;} .search.sm{padding:6px 10px;} .search.sm input{font-size:12px;} .rt-range{display:inline-flex; align-items:center; gap:7px; font-size:10.5px; letter-spacing:var(--track-label-tight); text-transform:uppercase; color:var(--ink-3); font-weight:700;} .monthin{padding:7px 10px; font-size:12.5px; font-weight:400; text-transform:none; letter-spacing:normal; color:var(--ink); border:1px solid var(--line-2); border-radius:0; background:var(--surface); outline:0; font-family:inherit;} .monthin:focus{border-color:var(--ink);} #dlg-preview{max-width:min(800px,96vw); width:auto; background:transparent; box-shadow:none; padding:0;} .pvdlg{width:min(760px,94vw); background:var(--surface); border-radius:0; overflow:hidden; box-shadow:var(--shadow-pop);} .pvdlg-bar{display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--line);} .pvdlg-t{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:700;} .pvdlg-bar .cdlg-x{position:static;} .pvdlg-scroll{max-height:82vh; overflow:auto; background:var(--surface-3); padding:26px;} /* Editor de flujo (timeline de pasos) */ #ae-steps{margin-bottom:6px;} .ae-step{display:flex; gap:14px; position:relative; padding-bottom:12px;} .ae-step::before{content:""; position:absolute; left:14px; top:32px; bottom:-2px; width:2px; background:var(--line-2);} .ae-step:last-child::before{display:none;} .ae-node{width:30px; height:30px; border-radius:0; background:var(--black); color:#fff; display:grid; place-items:center; font-size:12px; font-weight:700; flex:none; z-index:1; box-shadow:0 0 0 4px var(--surface); margin-top:3px;} .ae-body{flex:1; min-width:0; display:flex; align-items:flex-end; gap:10px; background:var(--surface-2); border:1px solid var(--line); border-radius:0; padding:12px 13px;} .ae-fields{flex:1; min-width:0; display:grid; grid-template-columns:132px 1fr; gap:10px;} @media (max-width:560px){ .ae-fields{grid-template-columns:1fr;} } .ae-fl{display:block; font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); font-weight:700;} .ae-fl input{display:block; width:100%; margin-top:5px; border:1px solid var(--line-2); border-radius:0; padding:9px 11px; font-size:13px; font-weight:400; letter-spacing:normal; text-transform:none; color:var(--ink); outline:0; background:var(--surface);} .ae-fl input:focus{border-color:var(--ink);} .ae-rm{width:34px; height:34px; border-radius:0; border:1px solid var(--line-2); background:var(--surface); color:var(--ink-3); display:grid; place-items:center; cursor:pointer; flex:none;} .ae-rm:hover{border-color:var(--ink); color:var(--ink);} .ae-rm svg{width:15px; height:15px; stroke-width:1.7;} .ae-addstep{display:flex; align-items:center; gap:14px; width:100%; background:none; border:0; padding:0; cursor:pointer; color:var(--ink-3); font-size:13px; font-weight:600;} .ae-addstep:hover{color:var(--ink);} .ae-addnode{width:30px; height:30px; border-radius:0; border:1.5px dashed var(--line-3); display:grid; place-items:center; font-size:18px; color:var(--ink-3); flex:none; line-height:1;} .ae-addstep:hover .ae-addnode{border-color:var(--ink); color:var(--ink);} .ae-body{flex-direction:column; align-items:stretch;} .ae-row1{display:flex; align-items:flex-end; gap:10px;} .ae-graf-add{display:inline-flex; align-items:center; gap:8px; background:none; border:1px dashed var(--line-3); border-radius:0; padding:8px 12px; font-size:12px; font-weight:600; color:var(--ink-3); cursor:pointer;} .ae-graf-add:hover{border-color:var(--ink); color:var(--ink);} .ae-graf-add svg{width:15px; height:15px; stroke-width:1.7;} .ae-graf{display:flex; align-items:center; gap:12px;} .ae-graf-thumb{width:64px; height:44px; object-fit:cover; border-radius:0; border:1px solid var(--line-2);} .ae-graf-rm{background:none; border:0; color:var(--ink-3); font-size:12px; font-weight:600; cursor:pointer; text-decoration:underline;} .ae-graf-rm:hover{color:var(--ink);} .ae-graf-actions{display:flex; align-items:center; gap:12px; flex-wrap:wrap;} .ae-graf-prev{display:inline-flex; align-items:center; gap:7px; background:none; border:1px solid var(--line-2); border-radius:0; padding:8px 12px; font-size:12px; font-weight:600; color:var(--ink-2); cursor:pointer;} .ae-graf-prev:hover{border-color:var(--ink); color:var(--ink);} .ae-graf-prev svg{width:15px; height:15px; stroke-width:1.7;} .ae-cond{display:flex; flex-direction:column; gap:9px; margin-top:12px; padding-top:12px; border-top:1px dashed var(--line-2);} .ae-cond-ctrls{display:flex; align-items:center; gap:9px; flex-wrap:wrap;} .ae-cond-ctrls select.ae-cond-i, .ae-cond-ctrls select.ae-cp{border:1px solid var(--line-2); border-radius:0; padding:9px 30px 9px 11px; font-size:13px; color:var(--ink); outline:0; background:var(--surface); appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237d7d82' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; font-family:inherit;} .ae-cond-ctrls select.ae-cond-i{min-width:230px;} .ae-cond-ctrls select:focus, .ae-cond-ctrls input:focus{border-color:var(--ink);} .ae-cp-wrap{display:inline-flex; align-items:center; gap:7px;} input.ae-cp{width:84px; border:1px solid var(--line-2); border-radius:0; padding:9px 11px; font-size:13px; color:var(--ink); outline:0; background:var(--surface); font-family:inherit;} .ae-cp-suf{font-size:12px; color:var(--ink-3); font-weight:600;} .ae-cond-tag{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--ink-3); font-weight:600;} .ae-cond-tag svg{width:13px; height:13px; stroke-width:1.7;} .ae-cond-out{display:flex; flex-direction:column; gap:8px; background:var(--surface-2); border:1px solid var(--line); border-radius:0; padding:12px 14px;} .ae-cond-sql{display:block; font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace; font-size:11.5px; line-height:1.55; color:var(--ink-2); white-space:pre-wrap; word-break:break-word;} .ae-cond-cnt{font-size:12.5px; color:var(--ink-3); font-weight:500;} .ae-cond-cnt b{color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums;} .ae-cond-src{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-3); font-weight:600;} .ae-cond-src svg{width:13px; height:13px; stroke-width:1.7;} .ae-fl select{display:block; width:100%; margin-top:5px; border:1px solid var(--line-2); border-radius:0; padding:9px 30px 9px 11px; font-size:13px; font-weight:400; letter-spacing:normal; text-transform:none; color:var(--ink); outline:0; background:var(--surface); appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237d7d82' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; font-family:inherit;} .ae-fl select:focus{border-color:var(--ink);} /* Sin recuadro: el catálogo es la hoja entera, no una tarjeta colgando en una esquina. La bajada va a todo el ancho y las filas se encadenan por regla. */ .cond-head{display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin:0 0 22px; flex-wrap:wrap;} .cond-head p{margin:0; font-size:13px; color:var(--ink-2); line-height:1.7; text-align:justify; max-width:none; flex:1 1 460px; hyphens:none; text-wrap:pretty;} .cond-head .btn{flex:none;} .cond-sec{font-size:9.5px; letter-spacing:var(--track-label-tight); text-transform:uppercase; font-weight:700; color:var(--ink-3); padding:18px 2px 9px; border-bottom:1.5px solid var(--ink);} .cond-sec:first-child{padding-top:0;} .cond-empty{padding:22px 2px; font-size:12.5px; color:var(--ink-3);} .cond-tscroll{margin-bottom:6px;} .cond-table{table-layout:auto;} .cond-table .cond-nm{font-weight:600; color:var(--ink); width:30%;} .cond-table .cond-par{font-size:12px; color:var(--ink-3); line-height:1.5;} .cond-table .cond-de{color:var(--ink-3); font-weight:500;} .cond-table td.num{white-space:nowrap;} .cond-th-acts, .cond-acts{text-align:right; white-space:nowrap;} .cond-acts{display:flex; gap:6px; justify-content:flex-end; align-items:center;} .cond-par{font-size:11.5px; color:var(--ink-3); margin-top:3px;} /* Reglas del diálogo: cada una es un bloque, y el nexo Y / O va entre ellas para que se lea la lógica sin tener que interpretarla. */ /* El diálogo base topa en 440 px, que aquí corta la bajada y el botón de crear. */ #dlg-cond{max-width:660px;} .dlg-cond{max-height:86vh; overflow:auto;} .cnd-rules{display:flex; flex-direction:column;} .cnd-rule{border:1px solid var(--line); background:var(--paper-2); padding:12px 14px;} .cnd-rule-top{display:flex; align-items:center; gap:10px;} .cnd-rule-top .sel{flex:1;} .cnd-rule .cnd-rp{margin-top:10px;} .cnd-desc{font-size:11.5px; color:var(--ink-3); line-height:1.55; margin-top:8px;} .dlg-cond .hint{margin:7px 0 0; font-size:11.5px; color:var(--ink-3); line-height:1.55;} .dlg-cond .cofield{font-weight:600; color:var(--ink);} .cnd-nexo{align-self:flex-start; margin:0 0 0 16px; padding:5px 10px; border-left:1px solid var(--line-3); font-size:9px; letter-spacing:var(--track-label); text-transform:uppercase; font-weight:700; color:var(--ink-3);} .cond-list{display:flex; flex-direction:column;} .cond-row{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 2px; border-top:1px solid var(--line); flex-wrap:wrap;} .cond-row:first-child{border-top:0;} .cond-nm{font-size:13.5px; font-weight:600; color:var(--ink);} .cond-r{display:flex; align-items:center; gap:16px;} .cond-cnt{font-size:12.5px; color:var(--ink-3); font-weight:500; white-space:nowrap;} .cond-cnt b{color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums;} .cond-src{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-3); font-weight:600;} .cond-src svg{width:13px; height:13px; stroke-width:1.7;} .cond-sqlbtn, .ae-cond-sqlbtn{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line-2); background:var(--surface); border-radius:0; padding:6px 11px; font-size:12px; font-weight:600; color:var(--ink-2); cursor:pointer; font-family:inherit; white-space:nowrap;} .cond-sqlbtn:hover, .ae-cond-sqlbtn:hover{border-color:var(--ink); color:var(--ink);} .cond-sqlbtn svg, .ae-cond-sqlbtn svg{width:14px; height:14px; stroke-width:1.7;} .ae-cond-out2{display:flex; align-items:center; gap:16px; flex-wrap:wrap;} #dlg-sql{max-width:min(680px,96vw); width:auto;} .sqldlg{width:min(640px,94vw);} .sqldlg-meta{padding:15px 20px 0; font-size:12.5px; color:var(--ink-3); font-weight:500;} .sqldlg-meta b{color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums;} .sqldlg-code{margin:12px 0 0; padding:16px 20px 20px; background:var(--surface-3); overflow:auto; max-height:60vh;} .sqldlg-code code{font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace; font-size:12.5px; line-height:1.6; color:var(--ink); white-space:pre-wrap; word-break:break-word;} .cond-chip{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:500; color:var(--ink-2); background:var(--surface-3); border:1px solid var(--line-2); border-radius:0; padding:6px 8px 6px 13px;} .cond-rm{width:18px; height:18px; border-radius:0; border:0; background:var(--line-2); color:var(--ink-2); font-size:14px; line-height:1; cursor:pointer; display:grid; place-items:center;} .cond-rm:hover{background:var(--ink); color:#fff;} .cond-empty{font-size:12.5px; color:var(--ink-3);} .cond-add{display:flex; gap:10px;} .cond-add input{flex:1; border:1px solid var(--line-2); border-radius:0; padding:9px 12px; font-size:13px; outline:0; font-family:inherit;} .cond-add input:focus{border-color:var(--ink);} .basepick{position:relative;} .basepick-ctrl{display:flex; align-items:center; gap:10px; border:1px solid var(--line-2); border-radius:0; padding:10px 12px; background:var(--surface);} .basepick-ctrl:focus-within{border-color:var(--ink);} .basepick-ctrl > svg:first-child{width:16px; height:16px; stroke-width:1.7; color:var(--ink-3); flex:none;} .basepick-ctrl input{flex:1; border:0; outline:0; font-size:13.5px; background:transparent; color:var(--ink); font-family:inherit;} .bp-chev{width:16px; height:16px; stroke-width:2; color:var(--ink-3); flex:none;} .basepick-menu{position:absolute; left:0; right:0; top:calc(100% + 6px); background:var(--surface); border:1px solid var(--line-2); border-radius:0; box-shadow:var(--shadow-pop); z-index:20; max-height:240px; overflow:auto; padding:5px;} .basepick-item{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 11px; border-radius:0; cursor:pointer; font-size:13px; color:var(--ink-2);} .basepick-item:hover{background:var(--surface-3); color:var(--ink);} .basepick-item .bp-n{font-size:11px; color:var(--ink-3); font-weight:600; white-space:nowrap;} .basepick-empty{padding:12px; text-align:center; color:var(--ink-3); font-size:12.5px;} .st-graf{color:var(--ink-3); font-size:11px; font-weight:600;} .ae-backend{display:flex; align-items:flex-start; gap:10px; margin:-2px 0 16px; padding:11px 13px; border:1px dashed var(--line-3); border-radius:0; background:var(--surface-2);} .ae-backend svg{width:16px; height:16px; stroke-width:1.7; color:var(--ink-3); flex:none; margin-top:1px;} .ae-backend-t b{display:block; font-size:12px; font-weight:600; color:var(--ink);} .ae-backend-t span{font-size:11.5px; color:var(--ink-3); line-height:1.5;} .fdates{display:flex; flex-direction:column; gap:8px;} .fdate{display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:10.5px; text-transform:uppercase; letter-spacing:var(--track-label-tight); color:var(--ink-3); font-weight:700;} .fdate .monthin{width:128px;} /* ===================== Cabecera horizontal (v2) ===================== */ .app{grid-template-columns:1fr; grid-template-rows:auto auto 1fr; grid-template-areas:"top" "nav" "main"; background:var(--paper);} .brand{display:none;} .brand-mini{display:block; padding-left:0; letter-spacing:normal;} .brand-mini img{height:25px; width:auto; display:block;} header.top{padding:14px clamp(18px,3.4vw,36px) 12px; background:var(--paper); border-bottom:1px solid var(--ink);} header.top .lead{gap:18px;} header.top .crumb{font-size:11px; letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink-3); font-weight:700;} header.top .crumb b{color:var(--ink); font-weight:700;} .nav{flex-direction:row; gap:26px; overflow-x:auto; border-right:0; border-bottom:1px solid var(--line); padding:10px clamp(18px,3.4vw,36px); background:var(--paper);} .nav .cap{display:none;} .nav a{padding:0; gap:9px; font-size:11.5px; letter-spacing:var(--track-label); text-transform:uppercase; font-weight:700; color:var(--ink-3); background:transparent;} .nav a:hover{background:transparent; color:var(--ink);} .nav a[aria-current="true"]{background:transparent; color:var(--ink);} /* Barra bajo la sección activa: sin barra lateral, el color del rótulo solo no alcanzaba para saber en qué hoja se está. Se apoya en el borde del menú. */ .nav a[aria-current="true"]::after{content:""; position:absolute; left:0; right:0; bottom:-10px; height:2px; background:var(--ink-3);} .nav a .ix{display:none;} .nav a svg{width:16px; height:16px; opacity:1;} .nav a .badge{margin-left:0; background:transparent; padding:0 0 0 3px; color:var(--ink-3); min-width:0; font-size:11.5px;} .nav a[aria-current="true"] .badge{background:transparent; color:var(--ink);} /* El crédito de Agency AI vivía al pie de la barra lateral. Sin esa columna, queda como crédito discreto al final de la fila de secciones. */ .nav .foot{margin-left:auto; padding:0; display:flex; align-items:center;} .nav .foot .aa-logo{width:112px; margin:0;} /* Sin la barra lateral, el tope de 1360px empezó a dejar márgenes que antes no existían: el área útil era 1440-248. El contenido vuelve a ocupar el ancho completo y el aire lo da el padding fluido. */ .wrap{max-width:none;} /* ===================== Portada (v2) ===================== */ /* Banda de vitrinas. La relación nativa es 3,9:1, que a 1440 de ancho daría 369px: demasiado. Se acota a 240, la altura de la portada original, y el encuadre se centra para conservar el rótulo y las puertas. */ /* Sin aspect-ratio: combinado con max-height, la caja reducía su ANCHO para conservar la proporción y la banda dejaba de ir a sangre. Altura fija y el recorte lo hace cover, centrado en el rótulo y las puertas. */ /* Vuelve la fotografía del prototipo inicial, por decisión del usuario. La banda de vitrinas queda en el repositorio por si se retoma. */ .hero{height:clamp(190px,25vh,240px); aspect-ratio:auto; background:#0b0b0c url('boutique_bw.jpg') center 42% / cover no-repeat; display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--line);} /* Vuelve el logotipo blanco con su bajada sobre la foto, como el prototipo inicial. El velo se refuerza para que el texto se sostenga sobre la piedra. */ .hero::after{background:linear-gradient(180deg, rgba(16,16,18,.28), rgba(16,16,18,.16) 40%, rgba(16,16,18,.42));} .cover-lede{margin:0 0 30px;} .cover-lede .kick{font-size:9px; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-3); font-weight:700;} .cover-h1{font-family:var(--font); font-weight:600; font-size:clamp(32px,4.2vw,52px); line-height:1.04; letter-spacing:-.032em; margin:12px 0 10px; text-wrap:pretty; hyphens:none; max-width:none;} .cover-lede .dek{font-family:var(--font); font-style:normal; font-size:15px; color:var(--ink-2); line-height:1.4; max-width:none; text-wrap:pretty;} /* Retícula de cuatro columnas iguales, encuadrada entre reglas, en vez de cuatro bloques sueltos de ancho desparejo. Mismo patrón que los KPI del Reporte, para que las dos pantallas se lean como un sistema. */ .metabar{display:grid; grid-template-columns:repeat(4,1fr); gap:0; flex-wrap:nowrap; border-top:1.5px solid var(--ink); border-bottom:1px solid var(--line); margin:28px 0 0; padding-top:0;} .metabar .m{padding:17px 16px 19px; border-right:1px solid var(--line); text-align:center;} .metabar .m:last-child{border-right:0;} /* Toda cifra de dato en Montserrat, también acá: son métricas, no gestos. */ .metabar .m .n{font-family:var(--font); font-weight:600; font-size:32px; letter-spacing:-.022em; line-height:1; font-variant-numeric:tabular-nums;} .metabar .m .k{font-size:9px; letter-spacing:var(--track-label-tight); margin-top:9px;} @media (max-width:720px){ .metabar{grid-template-columns:repeat(2,1fr);} } /* El índice numera sus propias entradas de 01 a 04. Antes arrancaba en 2, porque contaba la Portada, y se leía como si faltara la primera. */ .index{margin-top:0; border-top:0;} .index .row .num{width:32px; font-size:10.5px; font-weight:700; letter-spacing:var(--track-label-tight); font-variant-numeric:tabular-nums;} .index .row .meta{font-family:var(--font); font-size:10.5px; font-weight:700; letter-spacing:var(--track-label-tight); text-transform:uppercase; color:var(--ink-3); font-variant-numeric:tabular-nums;} .synthetic{font-size:13px; line-height:1.7; color:var(--ink-2); text-align:justify; max-width:none; hyphens:none; text-wrap:pretty;} /* ===================== Base de clientes (v2) ===================== */ .rbar{background:var(--paper-2); border-bottom:1px solid var(--line);} .rbar .cnt{font-size:9.5px; letter-spacing:var(--track-label-tight); text-transform:uppercase; font-weight:700; color:var(--ink);} .rbar .cnt b{font-size:12px;} .showing-inline{color:var(--ink-2);} /* El panel de filtros pierde la caja: columna sobre el papel, separada por una regla. */ .filters{background:transparent; border:0; border-right:1px solid var(--line); box-shadow:none; padding:0 22px 0 0;} .seg{gap:0;} .results{padding-left:0;} /* ================================================================== Pantalla de ingreso · agregada el 31-ago-2026 ================================================================== Solo aparece en el modo con datos reales. Sin `config.js` la aplicacion corre como boceto y esto no se muestra nunca. Usa los tokens del sistema y ninguna medida inventada: mismo papel, misma tipografia, mismas reglas de 1px, cero color. El estado se comunica por relleno y por peso, como en el resto del producto. ================================================================== */ .login{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; background:var(--paper); } .login-card{ width:min(92vw, 380px); display:flex; flex-direction:column; border-top:1px solid var(--ink); padding-top:28px; } /* El logo, no el wordmark tipografiado. La marca de Mosso tiene su propio dibujo y remedarla con letra espaciada es aproximarla; el archivo ya estaba en la carpeta y se usa en otras tres partes. */ .login-logo{width:170px; max-width:70%; height:auto; display:block;} .login-sub{ margin-top:10px; margin-bottom:30px; font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:var(--track-label); color:var(--ink-3); } /* El envoltorio de la contrasena tiene que ser columna flexible como la tarjeta: al meter el rotulo y el campo dentro de un
comun, el