/* Trato Fino Hub · hoja única · 2026-09-12 00:50 EDT * * Sin CDN, sin framework, sin preprocesador. Las fuentes van embebidas desde * assets/fonts/ (las mismas woff2 del sitio, coste cero). * * La frase que gobierna todo: el Hub es LA VITRINA APAGADA, no la encendida. * El ónice y el oro de Trato Fino son MARCO (barra lateral y cabecera); la zona * de trabajo es papel cálido claro y densa, porque a las once de la mañana con * luz de tienda un fondo #060606 se convierte en espejo. * * Tres reglas del apéndice de HUB-SPEC: * 1. Oro y Cormorant SOLO en cabeceras. Nunca en tablas, botones ni chips. * 2. Ónice como marco de navegación, nunca como fondo de la zona de trabajo. * 3. Bordes finos y plano: ni sombras difusas ni radios grandes de panel SaaS. */ /* ---------- fuentes ---------- */ @font-face{font-family:"Karla";src:url("../fonts/karla-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Karla";src:url("../fonts/karla-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:"Cormorant Garamond";src:url("../fonts/cormorant-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:"Cormorant Garamond";src:url("../fonts/cormorant-600i.woff2") format("woff2");font-weight:600;font-style:italic;font-display:swap} /* ---------- tokens (apéndice de HUB-SPEC, literales) ---------- */ :root{ --hub-bg:#f7f4ee; --hub-surface:#ffffff; --hub-surface-sunken:#f0ece2; --hub-border:rgba(6,6,6,.10); --hub-ink:#1b1710; --hub-ink-muted:#6b6259; --hub-accent:#b8873a; --hub-accent-decor:#cda448; --hub-accent-soft:#f0d186; --hub-success:#3f7d52; --hub-warning:#c07c1f; --hub-danger:#a23b2e; --hub-chrome-bg:#0f0f0f; --hub-chrome-surface:#1b1b1b; --hub-chrome-ink:#f7f1e3; --radius-sm:4px; --radius-md:8px; --fs-small:12.5px; --fs-body:14px; --fs-h2:18px; --ff-ui:"Karla",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --ff-display:"Cormorant Garamond",Georgia,"Times New Roman",serif; --ff-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace; --rail:232px; /* barra lateral desplegada */ --rail-min:64px; /* carril de iconos */ --head:52px; /* cabecera */ } *,*::before,*::after{box-sizing:border-box} html,body{margin:0;padding:0} body{ background:var(--hub-bg);color:var(--hub-ink); font:400 var(--fs-body)/1.45 var(--ff-ui); -webkit-font-smoothing:antialiased; overscroll-behavior-y:none; } a{color:inherit} button,input,select,textarea{font:inherit;color:inherit} h1,h2,h3{margin:0;font-weight:600} /* Cormorant SOLO aquí: títulos de sección y pantalla de acceso. */ .display{font-family:var(--ff-display);font-weight:500;letter-spacing:.01em;line-height:1.15} .mono{font-family:var(--ff-mono);font-variant-numeric:tabular-nums} /* Rótulos mono en mayúscula: 11.5 px con .08em (delta 5-A). A 10.5 px con .14em se leían a un palmo de la pantalla y no a la distancia de un teléfono en la mano; subir el cuerpo y cerrar el espaciado deja el ancho casi igual, que es lo que protege las tarjetas del Panel a 1024 px. */ .eyebrow{ font:600 11.5px/1.2 var(--ff-mono);letter-spacing:.08em;text-transform:uppercase; color:var(--hub-ink-muted); } .muted{color:var(--hub-ink-muted)} /* Texto que se oye y no se ve (lector de pantalla). Para lo que en pantalla es un número suelto —el contador de no leídos— y al oído necesita frase. */ .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0; } .num{font-family:var(--ff-mono);font-variant-numeric:tabular-nums;white-space:nowrap} /* ========================================================================= ARMAZÓN — barra lateral fija + cabecera de 52 px ========================================================================= */ .shell{display:grid;grid-template-columns:var(--rail) 1fr;min-height:100vh} .side{ background:var(--hub-chrome-bg);color:var(--hub-chrome-ink); display:flex;flex-direction:column;position:sticky;top:0;height:100vh; border-right:1px solid rgba(255,255,255,.08); } .side__brand{ height:var(--head);display:flex;align-items:center;gap:10px;padding:0 16px; border-bottom:1px solid rgba(255,255,255,.08);flex:0 0 auto; } /* El símbolo de Trato Fino (assets/img/logo-mark.png · 123×128 nativo). * * ############ ANCHO DECLARADO: 26 px. TECHO: 48 px. ##################### * 26 px de ancho son 52 px reales en una pantalla a 2× y 78 a 3×, siempre por * debajo de los 123 nativos: el navegador REDUCE y el símbolo queda limpio. El * techo que este fichero no pasa son 48 px (96 a 2×). Por encima habría que * pedirle al cliente el original más grande — un PNG de 123 px ampliado se ve * ampliado, y «mejorarlo» con un modelo le inventaría trazos a una marca. * * Se quitó el recuadro dorado que enmarcaba las letras «TF»: era el marco de un * marcador de texto. Un logotipo real dentro de una caja con borde se lee como * un hueco todavía sin rellenar. * * `height:auto` y no una altura fija: 123×128 no es cuadrado, y clavar 26×26 * lo aplastaría un 4 %. El atributo `height="27"` del HTML solo reserva sitio * mientras carga; esta línea manda sobre él. * ######################################################################### */ .side__mark{ width:26px;height:auto;flex:0 0 auto;display:block; } .side__name{font-family:var(--ff-display);font-size:17px;letter-spacing:.02em;white-space:nowrap} .side__nav{padding:10px 8px;overflow-y:auto;flex:1 1 auto} .side__sep{ margin:12px 12px 6px;font:600 9.5px/1 var(--ff-mono);letter-spacing:.16em; text-transform:uppercase;color:rgba(247,241,227,.38); } .nav{ display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--radius-sm); color:rgba(247,241,227,.78);text-decoration:none;font-size:13.5px;white-space:nowrap; } .nav:hover{background:var(--hub-chrome-surface);color:var(--hub-chrome-ink)} .nav[aria-current="page"]{ background:var(--hub-chrome-surface);color:var(--hub-chrome-ink); box-shadow:inset 2px 0 0 var(--hub-accent-decor); } .nav__ico{width:18px;flex:0 0 auto;text-align:center;font-size:13px;opacity:.9} /* La Bandeja en modo mock: VISIBLE y atenuada, nunca escondida. Un módulo que desaparece se lee como "no existe"; atenuado se lee como "todavía no". */ .nav--pausa{opacity:.5} .side__foot{ padding:10px 12px;border-top:1px solid rgba(255,255,255,.08); font:400 11px/1.4 var(--ff-mono);color:rgba(247,241,227,.45);flex:0 0 auto; } .main{display:flex;flex-direction:column;min-width:0} .head{ height:var(--head);flex:0 0 auto;display:flex;align-items:center;gap:16px; padding:0 20px;background:var(--hub-surface);border-bottom:1px solid var(--hub-border); position:sticky;top:0;z-index:20; } .crumb{display:flex;align-items:center;gap:8px;min-width:0;font-size:13px;color:var(--hub-ink-muted)} .crumb b{font-weight:600;color:var(--hub-ink)} .head__spacer{flex:1 1 auto} .search{position:relative;width:min(340px,38vw)} .search input{ width:100%;height:32px;padding:0 10px 0 30px;border:1px solid var(--hub-border); border-radius:var(--radius-sm);background:var(--hub-surface-sunken);font-size:13px; } .search input:focus{outline:2px solid var(--hub-accent-soft);outline-offset:-1px;background:var(--hub-surface)} .search__ico{position:absolute;left:9px;top:7px;font-size:13px;color:var(--hub-ink-muted)} .who{display:flex;align-items:center;gap:9px} .who__av{ width:28px;height:28px;border-radius:50%;background:var(--hub-chrome-bg);color:var(--hub-chrome-ink); display:grid;place-items:center;font:600 11px/1 var(--ff-mono);letter-spacing:.03em; } .who__txt{line-height:1.15;font-size:12.5px} .who__txt span{display:block;color:var(--hub-ink-muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;font-family:var(--ff-mono)} .page{padding:20px;flex:1 1 auto;min-width:0} .page__title{display:flex;align-items:baseline;gap:12px;margin:0 0 16px;flex-wrap:wrap} .page__title h1{font-family:var(--ff-display);font-size:26px;font-weight:500;letter-spacing:.01em} .page__title-hueco{flex:1 1 auto} /* ========================================================================= PIEZAS ========================================================================= */ .card{background:var(--hub-surface);border:1px solid var(--hub-border);border-radius:var(--radius-md);overflow-x:auto} .card__h{padding:12px 14px;border-bottom:1px solid var(--hub-border);display:flex;align-items:center;gap:10px} .card__h h2{font-size:var(--fs-h2);font-family:var(--ff-display);font-weight:500} .card__b{padding:14px} .grid{display:grid;gap:12px} /* Tres columnas FIJAS. Con auto-fit a 1440 px cabían cinco KPI por fila y el Panel, que siempre pinta seis, dejaba uno huérfano debajo. Tres columnas hacen dos filas completas. Excepción: con menos de tres tarjetas (Cobros pinta dos) sigue el reparto automático, para no dejar un tercio vacío. */ .grid--3{grid-template-columns:repeat(3,minmax(0,1fr))} .grid--3:not(:has(> :nth-child(3))){grid-template-columns:repeat(auto-fit,minmax(210px,1fr))} .grid--2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))} .kpi{background:var(--hub-surface);border:1px solid var(--hub-border);border-radius:var(--radius-md);padding:14px} .kpi__n{font:500 30px/1 var(--ff-mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em;margin:8px 0 4px} .kpi__f{font-size:var(--fs-small);color:var(--hub-ink-muted)} .btn{ display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 13px; border:1px solid var(--hub-border);border-radius:var(--radius-sm);background:var(--hub-surface); font-size:13px;cursor:pointer;text-decoration:none;white-space:nowrap; } .btn:hover{background:var(--hub-surface-sunken)} .btn--pri{background:var(--hub-chrome-bg);color:var(--hub-chrome-ink);border-color:var(--hub-chrome-bg)} .btn--pri:hover{background:var(--hub-chrome-surface)} .btn--danger{color:var(--hub-danger);border-color:rgba(162,59,46,.3)} .btn:disabled{cursor:not-allowed;opacity:.5} /* Botones de IA: la leyenda completa, en gris, con su píldora. Nunca un esqueleto: tiene que leerse "en pausa", no "roto". */ .btn--ia{opacity:.45;cursor:not-allowed} .pill{ display:inline-flex;align-items:center;height:19px;padding:0 7px;border-radius:999px; border:1px solid var(--hub-border);background:var(--hub-surface-sunken); font:600 9.5px/1 var(--ff-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--hub-ink-muted); white-space:nowrap; /* a 390 px una píldora partida en dos líneas desbordaba su propia altura */ } .chip{ display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px;border-radius:999px; font:600 10px/1 var(--ff-mono);letter-spacing:.07em;text-transform:uppercase; border:1px solid currentColor;background:transparent; } .chip[data-canal="whatsapp"] {color:#3f7d52} .chip[data-canal="instagram"]{color:#a2623f} .chip[data-canal="facebook"] {color:#5a6b86} .chip[data-canal="sms"] {color:#8f887c} .chip[data-canal="email"] {color:#6b6259} .chip[data-canal="web"] {color:#b8873a} .chip[data-canal="call"] {color:#6b6259} .chip[data-canal="import_ghl"],.chip[data-canal="activity"]{color:#8a94a3} /* Variante rellena, para la lista de hilos: el canal se reconoce de reojo por el color de la marca. Contraste WCAG medido con la fórmula de luminancia relativa (texto de 10 px, así que el listón es 4.5:1): WhatsApp #25D366 con tinta #1b1710 ....... 9.0:1 (blanco daría 1.98) Instagram #C13584 con blanco .............. 5.11:1 Messenger #0064C8 con blanco .............. 5.74:1 (#0084FF daba 3.66) Los demás canales conservan el contorno de arriba. */ .chip--lleno{height:18px} /* Ancho mínimo común en la lista: si cada chip mide lo que su palabra, los nombres de al lado arrancan cada uno en una x distinta y la columna baila. */ .hilo .chip--lleno{min-width:84px;justify-content:center;flex:0 0 auto} .chip--lleno[data-canal="whatsapp"] {background:#25D366;border-color:#25D366;color:#1b1710} .chip--lleno[data-canal="instagram"]{background:#C13584;border-color:#C13584;color:#fff} .chip--lleno[data-canal="facebook"] {background:#0064C8;border-color:#0064C8;color:#fff} /* delta 7 · el chat del sitio (bot web). Oro de la casa con tinta oscura: Web #b8873a con tinta #1b1710 ............ 5.58:1 (blanco daría 3.3) */ .chip--lleno[data-canal="web"] {background:#b8873a;border-color:#b8873a;color:#1b1710} /* ---------- tablas ---------- */ .tbl{width:100%;border-collapse:collapse;font-size:13px} .tbl th{ text-align:left;padding:8px 10px;border-bottom:1px solid var(--hub-border); font:600 10px/1 var(--ff-mono);letter-spacing:.11em;text-transform:uppercase;color:var(--hub-ink-muted); white-space:nowrap; } .tbl td{padding:9px 10px;border-bottom:1px solid var(--hub-border);vertical-align:top} .tbl tbody tr:hover{background:var(--hub-surface-sunken)} .tbl a{color:var(--hub-ink);text-decoration:none;border-bottom:1px solid var(--hub-border)} .tbl a:hover{border-bottom-color:var(--hub-accent)} .tbl--fija{table-layout:fixed;min-width:680px} .trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ---------- vacíos: NUNCA datos de muestra ---------- Sin ilustración. Caja de línea fina, eyebrow mono + UNA frase, a la izquierda. "Vacío es correcto" es una afirmación, no una disculpa. */ .vacio{ border:1px solid var(--hub-border);border-radius:var(--radius-md); padding:20px;background:transparent; } .vacio p{margin:7px 0 0;color:var(--hub-ink-muted);font-size:13.5px;max-width:56ch} .vacio .pill{margin-top:12px} /* ---------- avisos ---------- */ .msg{padding:10px 12px;border:1px solid var(--hub-border);border-radius:var(--radius-sm);font-size:13px;margin:0 0 14px} .msg--ok{border-color:rgba(63,125,82,.35);background:rgba(63,125,82,.06)} .msg--bad{border-color:rgba(162,59,46,.35);background:rgba(162,59,46,.06)} .msg--warn{border-color:rgba(192,124,31,.35);background:rgba(192,124,31,.06)} /* ---------- formularios ---------- */ .field{margin:0 0 13px} .field label{display:block;font:600 11.5px/1 var(--ff-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--hub-ink-muted);margin:0 0 5px} .field input,.field select,.field textarea{ width:100%;padding:8px 10px;border:1px solid var(--hub-border);border-radius:var(--radius-sm); background:var(--hub-surface);font-size:13.5px; } .field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--hub-accent-soft);outline-offset:-1px} .field .hint{font-size:11.5px;color:var(--hub-ink-muted);margin-top:5px} /* Casillas de permisos (Claves API): una fila por scope, casilla pegada a su texto. */ .scopes{margin-top:4px} .scopes__row.scopes__row{display:flex;gap:8px;align-items:flex-start;font:400 12.5px/1.45 inherit;font-family:inherit;letter-spacing:0;text-transform:none;color:inherit;margin:0 0 6px;cursor:pointer} .scopes__row input{width:auto;margin:3px 0 0;padding:0;flex:0 0 auto} .row{display:flex;gap:10px;flex-wrap:wrap} .row>*{flex:1 1 180px} /* ========================================================================= TABLERO DE PIPELINE ========================================================================= El color de etapa vive en la CABECERA DE LA COLUMNA. Nunca en la tarjeta: siete tarjetas de siete colores convierten el tablero en un semáforo roto. */ .board{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;align-items:flex-start} /* 5-B: 300 px y no 262. En 262 el último mensaje y la espera no cabían en la tarjeta, y las siete columnas se recorren igual con el desplazamiento horizontal que ya tenía el tablero. ############ EL ANCHO ES FIJO DE VERDAD (fallo visto en producción) ###### `flex:0 0 300px` NO basta: el tamaño mínimo automático de un elemento flex es su contenido mínimo, y un último mensaje largo en una línea (nowrap) estiraba «Nuevo Lead» a 1.337 px con datos reales. width + min-width:0 + max-width lo clavan; la elipsis de .tar__ult corta dentro. */ .col{ flex:0 0 300px;width:300px;min-width:0;max-width:300px; background:var(--hub-surface-sunken);border:1px solid var(--hub-border); border-radius:var(--radius-md);display:flex;flex-direction:column;max-height:calc(100vh - 190px); } .col+.col{position:relative} .col__h{padding:10px 12px;border-bottom:1px solid var(--hub-border);display:flex;align-items:center;gap:8px} .col__dot{width:8px;height:8px;border-radius:2px;flex:0 0 auto} .col__n{font:600 11.5px/1 var(--ff-ui);letter-spacing:.01em;flex:1 1 auto} .col__c{font:600 10.5px/1 var(--ff-mono);color:var(--hub-ink-muted)} /* F3 · «Cerrado»: lo cerrado este mes, debajo de la cuenta de la columna. */ .col__h{flex-wrap:wrap} .col__mes{flex:1 0 100%;font-size:10.5px;color:var(--hub-success,#3f7d52);text-align:right} .chip--venta{color:var(--hub-ink-muted)} .col__b{padding:8px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;min-height:66px} .col__b.drop{background:rgba(184,135,58,.08);outline:1px dashed var(--hub-accent);outline-offset:-3px} /* Densidad: 12 px de relleno. Es una tarjeta de trabajo, no un póster. */ .tar{ background:var(--hub-surface);border:1px solid var(--hub-border);border-radius:var(--radius-sm); padding:12px;cursor:grab;position:relative;min-width:0;max-width:100%; } .tar:active{cursor:grabbing} .tar.arrastrando{opacity:.4} .tar__n{font-weight:600;font-size:13px;line-height:1.3;margin:0 0 6px;padding-right:8px} .tar__n a{text-decoration:none} .tar__m{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .tar__v{font:500 13.5px/1 var(--ff-mono);font-variant-numeric:tabular-nums} .tar__t{font:400 11px/1 var(--ff-mono);color:var(--hub-ink-muted);margin-left:auto} /* 5-B · lo que la tarjeta dice además de quién es. */ .tar__top{display:flex;align-items:flex-start;gap:7px} .tar__top .tar__n{flex:1 1 auto;min-width:0;margin:0;overflow-wrap:anywhere} .tar__punto{width:8px;height:8px;border-radius:50%;background:var(--hub-danger);flex:0 0 auto;margin-top:5px} .tar__tel{font-size:11px;color:var(--hub-ink-muted);margin:2px 0 0} .tar__ult{margin:6px 0 0;font-size:12.5px;color:var(--hub-ink-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;max-width:100%} .tar__m{margin-top:8px} .tar__espera{font:400 11px/1 var(--ff-mono);color:var(--hub-ink-muted)} .tar__espera--ambar{color:var(--hub-warning);font-weight:600} .tar__espera--rojo{color:var(--hub-danger);font-weight:600} .tar.espera--ambar{border-left:3px solid var(--hub-warning);box-shadow:none} .tar.espera--rojo{border-left:3px solid var(--hub-danger);box-shadow:none} .chip--mini{height:17px;padding:0 6px;font-size:9px} .col__mas{display:block;text-align:center;font-size:12px;padding:8px;border:1px dashed var(--hub-border);border-radius:var(--radius-sm); text-decoration:none;color:var(--hub-ink-muted)} .col__mas:hover{border-color:var(--hub-accent);color:var(--hub-ink)} /* Cifras y filtros de encima del tablero. */ .pipa-cifras{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px} .pipa-cifra{display:inline-flex;align-items:baseline;gap:6px;padding:6px 11px;border:1px solid var(--hub-border);border-radius:var(--radius-sm); background:var(--hub-surface);font-size:12.5px;color:var(--hub-ink-muted);text-decoration:none} .pipa-cifra b{font:600 16px/1 var(--ff-mono);color:var(--hub-ink)} a.pipa-cifra:hover{border-color:var(--hub-accent)} .pipa-cifra--rojo b{color:var(--hub-danger)} /* Delta 5-B · F2 · lo que movió una máquina. La marca es pequeña y de tinta, no de color de etapa (la regla del tablero): dice QUIÉN, no DÓNDE. El motivo va en el title y en el panel, no en la tarjeta. */ .tar__auto{display:inline-flex;align-items:center;height:17px;padding:0 6px;border-radius:3px; font:600 9px/1 var(--ff-mono);letter-spacing:.08em;text-transform:uppercase; border:1px dashed var(--hub-ink-muted);color:var(--hub-ink-muted);cursor:help;white-space:nowrap} .tar__auto--ia{border-color:var(--hub-accent);color:var(--hub-accent)} .pipa-cifra--ia b{color:var(--hub-accent)} .pipa-deshacer{height:auto;align-self:stretch} .pill--cierre{border-color:var(--hub-accent);color:var(--hub-accent);margin-right:4px} .opp-panel__movida{grid-column:1 / -1} .avisos-dest{border:0;padding:0;margin:0 0 14px;display:flex;flex-direction:column;gap:6px} .avisos-dest legend{font:600 10.5px/1 var(--ff-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--hub-ink-muted);margin:0 0 6px;padding:0} /* `.avisos-dest label.…` y no `.avisos-dest__u` solo: `.field label` (mayúsculas en mono, para rótulos de campo) ganaba por especificidad y los nombres salían gritados. Esto es una lista de personas, no un rótulo. */ .avisos-dest label.avisos-dest__u{display:flex;align-items:center;gap:8px;margin:0;font:400 13px/1.3 var(--ff-ui);text-transform:none;letter-spacing:0;color:var(--hub-ink);flex-wrap:wrap} .avisos-dest .avisos-dest__u input{width:auto;height:auto;margin:0} .avisos-dest__u .mono{font-size:11.5px;overflow-wrap:anywhere} /* La caja de respuesta (F3 · partials/hilo.php::hilo_composer). La ventana de 24 h va ENCIMA del texto: es lo que decide si se puede escribir. */ .caja{display:flex;flex-direction:column;gap:8px;width:100%;min-width:0} .caja__ventana{margin:0;font:600 11px/1.3 var(--ff-mono);letter-spacing:.04em;text-transform:uppercase} .caja__ventana--abierta{color:var(--hub-ink-muted)} .caja__ventana--cerrada{color:var(--hub-warning)} .caja__f{display:flex;flex-direction:column;gap:6px;margin:0} .caja__f textarea{width:100%;min-height:76px;resize:vertical;padding:10px 12px;border:1px solid var(--hub-border);border-radius:var(--radius-sm); background:var(--hub-surface);font:400 14px/1.45 var(--ff-ui);color:var(--hub-ink)} .caja__f textarea:focus{outline:2px solid var(--hub-accent-soft);outline-offset:-1px} .caja__pie{display:flex;align-items:center;gap:10px} .caja__cuenta{font-size:11px;margin-right:auto} .caja__enviar{min-height:40px;min-width:96px} .caja__plantillas{border:1px solid var(--hub-border);border-radius:var(--radius-sm);padding:8px 10px;background:var(--hub-surface)} .caja__plantillas summary{cursor:pointer;font-weight:600;font-size:13px;min-height:28px;display:flex;align-items:center} .caja__plantilla{display:flex;flex-direction:column;gap:6px;padding:10px 0;border-top:1px solid var(--hub-border);margin:8px 0 0} .caja__plantilla .field{margin:0} .caja__pnombre{margin:0;font-size:13px} .caja__vista{margin:0;padding:8px 10px;border-left:3px solid var(--hub-accent);background:var(--hub-surface-sunken); font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere} .caja__tel{display:flex;align-items:center;gap:8px;font-size:12.5px} .caja__tel input{width:auto} .caja__origen{margin:2px 0 10px;font-size:12px} .btn--mini{min-height:24px;padding:0 8px;font-size:11.5px} .burb__reintentar{margin-top:6px;align-self:flex-start} /* F3 · «sin confirmar»: «Comprobar» pregunta a Wati; la nota dice que también se comprueba solo. */ .burb__nota{display:block;margin-top:6px;font-size:11px} .burb__comprobar{margin-top:4px;align-self:flex-start} /* Dentro de la burbuja oscura del Hub el botón hereda la tinta clara: se fija la suya. */ .burb--out .burb__reintentar,.burb--out .burb__comprobar{color:var(--hub-ink)} .hilo__caja{margin-top:14px;border-top:1px solid var(--hub-border);padding-top:14px} .hilo__ia{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px} @media (max-width:720px){ /* Toques de 44 px y el botón a la vista con el teclado abierto: la caja no crece por encima de la pantalla y Enviar queda pegado al texto. */ .caja__enviar{min-height:44px;min-width:110px} .caja__f textarea{min-height:64px;max-height:38vh;font-size:16px} /* 16 px: iOS no hace zoom al enfocar */ .caja__plantillas summary{min-height:44px} .caja__tel input{width:22px;height:22px} .btn--mini{min-height:36px} } /* Editor de etapas (Ajustes → Pipeline · 019). Una fila por etapa; el color es un grupo de radios con muestras (sin JS de selector de color, sin CSP rota). */ .etp-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px} .etp{border:1px solid var(--hub-border);border-radius:var(--radius-sm);padding:10px 12px;background:var(--hub-surface)} .etp__f{display:grid;grid-template-columns:auto minmax(160px,1.4fr) 120px minmax(150px,1fr);gap:8px 14px;align-items:end} .etp__f .field{margin:0;min-width:0} .etp__orden{display:flex;align-items:center;gap:4px;align-self:center} .etp__flecha{min-width:34px;padding:0 8px;justify-content:center} .etp__colores{grid-column:2 / -1} .etp__acc{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:8px} .etp__n{margin-right:auto;font-size:12px} .etp__nota{font-size:12px} .etp__destino{height:34px;max-width:220px} .etp__fijo{display:inline-block;padding:9px 0;font-size:13px;color:var(--hub-ink-muted)} .etp__rot{display:block;margin:0 0 6px;font:600 10.5px/1 var(--ff-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--hub-ink-muted)} .etp-color{display:flex;flex-wrap:wrap;gap:6px} .etp-color input{position:absolute;opacity:0;width:1px;height:1px;margin:0} .field .etp-color label{width:28px;height:28px;margin:0;border-radius:50%;border:3px solid var(--hub-surface);box-shadow:0 0 0 1px var(--hub-border);cursor:pointer} .field .etp-color input:checked + label{box-shadow:0 0 0 2px var(--hub-ink)} .field .etp-color input:focus-visible + label{outline:2px solid var(--hub-accent-soft);outline-offset:2px} .etp-nueva{margin-top:18px;padding-top:14px;border-top:1px solid var(--hub-border)} .etp-nueva__t{font:600 13px/1.2 var(--ff-ui);margin:0 0 10px} @media (max-width:720px){ .etp__f{grid-template-columns:1fr} .etp__colores{grid-column:auto} .field .etp-color label{width:36px;height:36px} .etp__destino{max-width:none;flex:1 1 100%} } .pipa-filtros{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px} .pipa-filtros input[type="search"]{width:220px} .pipa-filtros input,.pipa-filtros select{height:32px;padding:0 9px;border:1px solid var(--hub-border);border-radius:var(--radius-sm); background:var(--hub-surface);font-size:13px} .pipa-filtros__chk{display:inline-flex;align-items:center;gap:6px;font-size:13px} .pipa-filtros__chk input{height:auto} .pipa-filtros__f{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--hub-ink-muted)} .pipa-tabs{display:none} .pipa-filtros__toggle{position:absolute;opacity:0;pointer-events:none} .pipa-filtros__abrir{display:none} /* ========================================================================= PANEL LATERAL DE UNA OPORTUNIDAD (5-B) — 460 px a la derecha; en el teléfono, pantalla completa con «← Pipa». ========================================================================= */ .opp-panel{ position:fixed;top:0;right:0;bottom:0;width:min(460px,100vw);z-index:70; background:var(--hub-surface);border-left:1px solid var(--hub-border);box-shadow:-12px 0 32px rgba(6,6,6,.10); display:flex;flex-direction:column;outline:none; } .opp-panel__h{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--hub-border);flex:0 0 auto} .opp-panel__quien{flex:1 1 auto;min-width:0} .opp-panel__quien h2{font-family:var(--ff-display);font-size:20px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .opp-panel__u4{font-size:11.5px} .opp-panel__volver{display:none} .opp-panel__x{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:var(--radius-sm);text-decoration:none;font-size:16px} .opp-panel__x:hover{background:var(--hub-surface-sunken)} .opp-panel__b{overflow-y:auto;overscroll-behavior:contain;padding:14px;display:flex;flex-direction:column;gap:14px;flex:1 1 auto} .opp-panel__meta{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin:0} .opp-panel__meta dt{font:600 10.5px/1 var(--ff-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--hub-ink-muted);margin:0 0 4px} .opp-panel__meta dd{margin:0;font-size:13px;overflow-wrap:anywhere} .opp-panel__acc{display:flex;gap:8px;flex-wrap:wrap} .opp-panel__hilo .eyebrow,.opp-panel__ghl .eyebrow{margin:0 0 8px} .hilo-v--panel .hilo-v__scroll{max-height:none;min-height:0} .ghl-linea{font-size:12.5px;padding:6px 0;border-top:1px solid var(--hub-border);overflow-wrap:anywhere} .ghl-linea--out{padding-left:14px;color:var(--hub-ink-muted)} .opp-panel__mas{display:inline-block;margin-top:8px;font-size:12.5px} /* Con el panel abierto el tablero se estrecha en vez de quedar tapado. */ body:has(.opp-panel) .main{padding-right:460px} /* Ganado/perdido: NO cambia el fondo. Se apaga la tarjeta y se le pone un sello cuadrado. El color se reserva para lo que sigue vivo. */ .tar--cerrada{filter:grayscale(70%)} .tar__sello{ position:absolute;top:8px;right:8px; font:600 8.5px/1 var(--ff-mono);letter-spacing:.12em;text-transform:uppercase; color:var(--hub-ink-muted);border:1px solid var(--hub-border);border-radius:2px;padding:3px 5px; background:var(--hub-surface); } /* ========================================================================= BANDEJA — fila de 56-60 px, porque es triage todo el día en mostrador ========================================================================= */ /* minmax(0,1fr) y no 1fr: el mínimo automático de una pista es su contenido, y una palabra de 300 caracteres en el hilo empujaría la retícula. */ .inbox{display:grid;grid-template-columns:minmax(280px,360px) minmax(0,1fr);gap:12px;align-items:start} .hilo{ display:flex;align-items:center;gap:11px;min-height:58px;padding:9px 12px; border-bottom:1px solid var(--hub-border);text-decoration:none; } .hilo:hover,.hilo[aria-current="true"]{background:var(--hub-surface-sunken)} .hilo__b{min-width:0;flex:1 1 auto} .hilo__n{display:block;font-weight:600;font-size:13px;margin:0 0 2px} .hilo__p{display:block;font-size:12px;color:var(--hub-ink-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .hilo--nuevo .hilo__p{color:var(--hub-ink)} .hilo__r{ flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:5px; font:400 11px/1.2 var(--ff-mono);color:var(--hub-ink-muted); } /* No leídos: un número en un círculo, SOLO si hay (la vista no lo pinta con 0). Ónice y no oro: el oro es de las cabeceras, y un contador es trabajo. */ .badge{ display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px; border-radius:999px;background:var(--hub-chrome-bg);color:var(--hub-chrome-ink); font:600 11px/1 var(--ff-mono);font-variant-numeric:tabular-nums; } .burb{max-width:74%;padding:9px 12px;border-radius:var(--radius-md);font-size:13.5px;margin:0 0 9px;border:1px solid var(--hub-border);overflow-wrap:anywhere} .burb--in{background:var(--hub-surface-sunken)} .burb--out{background:var(--hub-chrome-bg);color:var(--hub-chrome-ink);margin-left:auto;border-color:var(--hub-chrome-bg)} .burb__t{display:block;margin-top:5px;font:400 11px/1.2 var(--ff-mono);opacity:.7} /* Adjunto de Wati: tarjetita con icono, sin miniatura. No hay token de media todavía, así que el Hub no puede pedir el fichero: dice QUÉ es y enlaza a Wati. Fondo papel también dentro de la burbuja de ónice, para que se lea como objeto y no como texto. El icono sale de data-tipo aquí, una sola vez, porque la Bandeja y la ficha pintan la misma tarjeta. */ .adj{ display:inline-flex;align-items:center;gap:8px;max-width:100%;min-height:44px; padding:5px 10px 5px 5px;border:1px solid var(--hub-border);border-radius:var(--radius-sm); background:var(--hub-surface);color:var(--hub-ink);text-decoration:none; font:400 12px/1.2 var(--ff-mono); } .adj:hover{border-color:var(--hub-accent)} .burb .adj{display:flex;width:fit-content;margin:0 0 6px} .adj__ico{ width:30px;height:30px;flex:0 0 auto;display:grid;place-items:center;border-radius:2px; background:var(--hub-surface-sunken);color:var(--hub-ink-muted);font-size:15px; } .adj__ico::before{content:"◇"} .adj__ico[data-tipo="imagen"]::before,.adj__ico[data-tipo="sticker"]::before{content:"▣"} .adj__ico[data-tipo="audio"]::before{content:"♪"} .adj__ico[data-tipo="video"]::before{content:"▶"} .adj__ico[data-tipo="documento"]::before{content:"▤"} .adj__ico[data-tipo="ubicación"]::before{content:"⌖"} .adj__t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ---------- el hilo compartido (portal/views/partials/hilo.php · 5-B) ---------- Antiguo arriba, nuevo abajo, y el contenedor ARRANCA al final: con column-reverse el desplazamiento inicial es el borde de abajo, sin JS. El hijo único (__msgs) lleva el orden normal de lectura. */ .hilo-v{display:flex;flex-direction:column;gap:8px;min-height:0} .hilo-v__barra{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .hilo-v__mas{margin:0;font-size:12px;color:var(--hub-ink-muted)} .hilo-v__scroll{display:flex;flex-direction:column-reverse;overflow-y:auto;max-height:calc(100vh - 290px);min-height:120px; overscroll-behavior:contain;padding-right:2px} .hilo-v__msgs{display:flex;flex-direction:column} .hilo-v__dia{display:flex;justify-content:center;margin:6px 0 10px} .hilo-v__dia span{font:600 10.5px/1 var(--ff-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--hub-ink-muted); background:var(--hub-surface-sunken);border:1px solid var(--hub-border);border-radius:999px;padding:4px 9px} .hilo-v__acc{display:flex;gap:8px;flex-wrap:wrap;padding-top:10px;border-top:1px solid var(--hub-border)} .burb__txt{display:block} .burb__quien{font-weight:600} /* Quién habló, de reojo: la persona de la tienda en ónice lleno; el bot y el asistente en ónice con trazo discontinuo, para que «solo contestó el bot» se vea sin leer la etiqueta. */ .burb--out.burb--q-bot,.burb--out.burb--q-asistente,.burb--out.burb--q-plantilla{ background:var(--hub-chrome-surface);border-style:dashed;border-color:rgba(247,241,227,.35)} .burb--fallo{border-color:var(--hub-danger)!important;box-shadow:inset 3px 0 0 var(--hub-danger)} .burb--fallo .burb__estado{color:#ffb4a8} /* Media en la burbuja (lib/media_ui.php, constructor A): la foto como enlace que abre el original, tope 240×320 para que una foto vertical no se coma el hilo; audio y vídeo nativos; «Descargar» debajo. */ .media{margin:0 0 6px;display:flex;flex-direction:column;gap:5px;align-items:flex-start} .media__img{display:block;line-height:0} .burb video,.burb img,.media img,.media video{display:block;max-width:240px;max-height:320px;width:auto;height:auto;border-radius:var(--radius-sm)} .burb audio,.media audio{display:block;width:240px;max-width:100%} .media__dl{font:400 11.5px/1.2 var(--ff-mono);color:inherit;opacity:.8} .media__dl:hover{opacity:1} .adj--cargando{opacity:.7} .adj--cargando .adj__t::after{content:" …"} .hilo__nota{font-size:11.5px;margin:14px 0 0;border-top:1px solid var(--hub-border);padding-top:12px} .hilo-bar__etapa{flex:0 1 auto;min-width:0} .hilo-bar__etapa .etapa-sel{max-width:180px} .hilo-bar h2{flex:0 1 auto;min-width:5em} .hilo__u4,.hilo__espera{font:400 11px/1.2 var(--ff-mono)} .hilo__espera--ambar{color:var(--hub-warning);font-weight:600} .hilo__espera--rojo{color:var(--hub-danger);font-weight:600} /* Selector de etapa (Bandeja y panel del tablero). Etapa fija = desenlace. */ .etapa-sel{height:30px;max-width:220px;padding:0 8px;border:1px solid var(--hub-border);border-radius:var(--radius-sm); background:var(--hub-surface);font-size:12.5px} .etapa-fija{font-size:12.5px;color:var(--hub-ink-muted)} /* Filtros de lista (Bandeja y tablero): enlaces con forma de píldora. */ .filtros{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px;border-bottom:1px solid var(--hub-border);align-items:center} .filtros__sep{width:1px;height:18px;background:var(--hub-border);margin:0 2px} .filtro{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border:1px solid var(--hub-border); border-radius:999px;font-size:12px;text-decoration:none;color:var(--hub-ink-muted);background:var(--hub-surface);white-space:nowrap} .filtro:hover{border-color:var(--hub-accent)} .filtro[aria-current="true"]{background:var(--hub-chrome-bg);border-color:var(--hub-chrome-bg);color:var(--hub-chrome-ink)} .filtro__n{font:600 10.5px/1 var(--ff-mono);color:#fff;background:var(--hub-danger);border-radius:999px;padding:2px 5px} .filtro__n--ambar{background:var(--hub-warning);color:var(--hub-ink)} /* Barra del hilo. «← Hilos» solo existe en estrecho, donde la lista no se ve; `solo-ancho` / `solo-estrecho` reparten las dos copias de «Responder en Wati» (ver m-inbox.php). */ .hilo-bar h2{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .hilo-bar__hueco{flex:1 1 auto} .hilo-bar__volver{display:none} .solo-estrecho{display:none} /* Ficha de contacto: la pila de tarjetas. El hueco vive aquí y no en un style="margin-top" por tarjeta, para que el teléfono pueda reordenarlas. */ .pila{display:flex;flex-direction:column;gap:12px} /* 5-B · la cabecera de resumen de la ficha: lo que se mira primero y los dos gestos del mostrador. */ .ficha-res{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin:-4px 0 14px;padding:12px 14px; background:var(--hub-surface);border:1px solid var(--hub-border);border-radius:var(--radius-md)} .ficha-res__datos{display:flex;flex-wrap:wrap;gap:10px 24px;margin:0;flex:1 1 auto} .ficha-res__datos dt{font:600 10.5px/1 var(--ff-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--hub-ink-muted);margin:0 0 4px} .ficha-res__datos dd{margin:0;font-size:13.5px} .ficha-res__acc{display:flex;gap:8px;flex-wrap:wrap} .filtros--sin-borde{border:0;padding:0} .hilo-v--ficha .hilo-v__scroll{max-height:520px} /* Vacío de una línea, para sub-bloques de una tarjeta (Notas, Tareas, Citas, En vivo): la caja con eyebrow repetía el título que la tarjeta ya lleva. */ .vacio-linea{margin:0;font-size:13px;color:var(--hub-ink-muted)} /* ========================================================================= DELTA 5-B · PIEZAS COMUNES ========================================================================= */ /* La cifra roja de «sin responder» junto a Bandeja (menú y pestañas). Rojo de la casa y no oro: es trabajo pendiente, no adorno. */ .nav__badge{ display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;margin-left:auto; border-radius:999px;background:var(--hub-danger);color:#fff; font:600 10.5px/1 var(--ff-mono);font-variant-numeric:tabular-nums; } .tabbar__i{position:relative} .tabbar__i .nav__badge{position:absolute;top:5px;left:calc(50% + 6px);margin:0} /* Iniciales del responsable: un círculo de 22 px, ónice como el avatar. */ .ini{ display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;flex:0 0 auto; background:var(--hub-chrome-bg);color:var(--hub-chrome-ink);font:600 9.5px/1 var(--ff-mono);letter-spacing:.02em; } .ini--nadie{background:transparent;color:var(--hub-ink-muted);border:1px dashed var(--hub-border)} /* La espera en color: ámbar ≥ 2 h de tienda, rojo ≥ 24 h. Un borde a la izquierda, no un fondo: siete tarjetas rellenas de rojo no se leen. */ .espera--ambar{box-shadow:inset 3px 0 0 var(--hub-warning)} .espera--rojo{box-shadow:inset 3px 0 0 var(--hub-danger)} .num-d{text-align:right} .grid--4{grid-template-columns:repeat(4,minmax(0,1fr))} .kpi--enlace{display:block;text-decoration:none;color:inherit} .kpi--enlace:hover{border-color:var(--hub-accent)} .kpi--rojo .kpi__n{color:var(--hub-danger)} .kpi--ambar .kpi__n{color:var(--hub-warning)} /* Barras horizontales (Pipa de «Hoy», embudo del Panel). */ .barra{display:flex;align-items:center;gap:10px;margin:0 0 8px} .barra__n{width:132px;font-size:12.5px;flex:0 0 auto} .barra__pista{flex:1 1 auto;height:9px;background:var(--hub-surface-sunken);border-radius:2px;overflow:hidden} .barra__v{display:block;height:100%} .barra__c{min-width:42px;text-align:right;font-size:12.5px} /* Con dinero, la cifra ocupa siempre lo mismo: si no, cada pista mide distinto y las barras no se comparan. */ .barra--dinero .barra__c{min-width:118px} /* «Leads por día» del Panel: catorce barras siempre, con su cifra y su fecha. */ .dias{display:flex;align-items:flex-end;gap:5px;height:132px} .dias__d{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px} .dias__n{font-size:11px;color:var(--hub-ink)} .dias__d--cero .dias__n{color:var(--hub-ink-muted)} .dias__b{width:100%;background:var(--hub-accent);border-radius:2px 2px 0 0} .dias__d--cero .dias__b{background:var(--hub-border)} .dias__f{font-size:9.5px;color:var(--hub-ink-muted);white-space:nowrap} .chip[data-canal="formulario"]{color:#6b6259} /* Pestañas de Ajustes (5-B): subrayado de oro en la activa, como el menú. */ .pestanas{display:flex;gap:2px;overflow-x:auto;margin:-4px 0 16px;border-bottom:1px solid var(--hub-border)} .pestana{padding:9px 14px;font-size:13.5px;text-decoration:none;color:var(--hub-ink-muted);white-space:nowrap; border-bottom:2px solid transparent;margin-bottom:-1px} .pestana:hover{color:var(--hub-ink)} .pestana[aria-current="page"]{color:var(--hub-ink);font-weight:600;border-bottom-color:var(--hub-accent)} /* ========================================================================= «HOY» — la torre de control (delta 5-B) ========================================================================= */ .hoy{display:flex;flex-direction:column;gap:12px} .hoy-estado{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;font-size:13px} .hoy-estado__i{display:inline-flex;align-items:center;gap:7px;color:var(--hub-ink-muted)} .hoy-estado__i b{color:var(--hub-ink)} .hoy-estado__punto{width:9px;height:9px;border-radius:50%;background:var(--hub-ink-muted)} .hoy-estado__i--abierta .hoy-estado__punto{background:var(--hub-success)} .hoy-kpis .kpi__f{min-height:2.6em} .hoy-card .card__b{padding:6px 14px 10px} .hoy__cuenta{font-size:11.5px} .hoy__nota{font-size:11.5px;margin:10px 0 0} .hoy__n{font-weight:600;text-decoration:none;min-width:0;overflow-wrap:anywhere} .hoy__n:hover{text-decoration:underline} .hoy__u4{font-size:11px} .hoy-fila{padding:10px 12px;border-bottom:1px solid var(--hub-border);margin:0 -14px} .hoy-fila:last-child{border-bottom:0} .hoy-fila--rojo{box-shadow:inset 3px 0 0 var(--hub-danger)} .hoy-fila--ambar{box-shadow:inset 3px 0 0 var(--hub-warning)} .hoy-fila__a{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .hoy-fila__p{margin:4px 0;font-size:13px;color:var(--hub-ink-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .hoy-fila__b{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12.5px} .hoy-fila--rojo .hoy-espera{color:var(--hub-danger);font-weight:600} .hoy-fila--ambar .hoy-espera{color:var(--hub-warning);font-weight:600} .hoy-fila__ir{margin-left:auto;font-size:12.5px;font-weight:600;text-decoration:none} .hoy-fila__ir:hover{text-decoration:underline} .hoy-plegables{display:flex;flex-direction:column;gap:8px} .hoy-pleg summary{cursor:pointer;list-style:none} .hoy-pleg summary::-webkit-details-marker{display:none} .hoy-pleg summary::before{content:"▸";color:var(--hub-ink-muted);font-size:12px} .hoy-pleg[open] summary::before{content:"▾"} .hoy-pleg:not([open]) summary{border-bottom:0} .hoy-linea{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:7px 0;border-top:1px solid var(--hub-border);font-size:13px;min-width:0} /* El texto suelto de una línea (el título que reporta el asistente) es texto libre: con 300 caracteres sin espacios ocupaba el ancho entero y empujaba la tarjeta. Una línea, con elipsis. */ .hoy-linea__t{flex:1 1 12em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Tope de lectura: a 2.560 px una vista previa de 300 caracteres corría 2.262 px de lado a lado. Cortada en ~80 caracteres se lee de un vistazo y la fila sigue siendo de una línea. */ .hoy-fila__p{min-width:0;max-width:min(100%,80ch)} .hoy-linea:first-child{border-top:0} /* ========================================================================= TALLER — SIN armazón ========================================================================= Cero barra lateral, cero buscador, cero lista de contactos. Cabecera mínima y una columna de fichas de trabajo a pantalla completa. El joyero llega a cada ficha desde SU propia cola; nunca busca y nunca lista. Esto no es que estén escondidas: para este rol no existen (HUB-SPEC §3.1). */ .taller{max-width:720px;margin:0 auto;padding:20px 16px 48px} .taller__head{ height:var(--head);display:flex;align-items:center;gap:12px;padding:0 16px; background:var(--hub-chrome-bg);color:var(--hub-chrome-ink);position:sticky;top:0;z-index:20; } .ficha{background:var(--hub-surface);border:1px solid var(--hub-border);border-radius:var(--radius-md);padding:16px;margin:0 0 12px} .ficha__t{display:flex;align-items:baseline;gap:10px;margin:0 0 4px} .ficha__t h2{font-size:16px} .ficha__meta{font:400 11.5px/1.5 var(--ff-mono);color:var(--hub-ink-muted)} .ficha__acc{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap} .ficha__tel{font-family:var(--ff-mono);font-size:14px} /* ========================================================================= ACCESO (login · alta · reinicio) — el único sitio con respiro editorial ========================================================================= */ .acceso{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--hub-bg)} .acceso__caja{width:100%;max-width:392px} .acceso__marca{display:flex;align-items:center;gap:10px;margin:0 0 22px} /* ############ EL ORO NECESITA FONDO OSCURO, Y AQUÍ EL FONDO ES PAPEL ##### * El símbolo es oro (#fbd96c en su tinta dominante, medido sobre el PNG). En * el carril cae sobre ónice y contrasta de sobra. Esta pantalla es papel * cálido (#f7f4ee): oro sobre crema da del orden de 1,2:1, o sea invisible. * * El texto «TF» que había antes no tenía este problema porque era tinta * --hub-accent, el oro OSCURO. Cambiar la letra por la imagen sin mirar el * fondo habría dejado la pantalla de acceso con un hueco donde estaba la * marca — y nadie lo habría visto hasta que un usuario dijera «no carga el * logo». * * Se le pone su propio fondo de vitrina en vez de tocar el PNG: el fichero * del cliente viaja byte a byte y ninguna pantalla lo reinterpreta. * `content-box` es obligatorio porque el reset global pone border-box, y con * él los 8 px de aire se comerían el símbolo hasta 18 px. * ######################################################################### */ .acceso__marca .side__mark{ box-sizing:content-box;padding:4px;background:var(--hub-chrome-bg); border-radius:var(--radius-sm); } .acceso h1{font-family:var(--ff-display);font-size:30px;font-weight:500;margin:0 0 6px;letter-spacing:.01em} .acceso .lede{color:var(--hub-ink-muted);font-size:13.5px;margin:0 0 20px;line-height:1.55} .acceso__pie{margin-top:18px;font-size:12px;color:var(--hub-ink-muted);display:flex;gap:14px;flex-wrap:wrap} .acceso__pie a{color:var(--hub-ink-muted)} /* ========================================================================= DENSIDAD COMPACTA — preferencia de cada cuenta ========================================================================= lib/ui.php pinta `` cuando la cuenta lo pide en Mis ajustes. Recorta ≈25 % de los rellenos que más ocupan (tarjetas, filas de tabla, burbujas, cabeceras, formularios). NO toca las alturas mínimas de lo que se toca (.btn a 44 px en el teléfono, .hilo, .nav): compacto es menos aire, nunca objetivos más pequeños. Va antes del bloque responsive pero gana igual por especificidad (atributo en + clase), y ninguna regla del teléfono redefine estos rellenos. */ html[data-density="compact"] .card__b{padding:10px} html[data-density="compact"] .card__h{padding:9px 11px} html[data-density="compact"] .tbl td{padding:7px 8px} html[data-density="compact"] .tbl th{padding:6px 8px} html[data-density="compact"] .burb{padding:7px 9px;margin-bottom:7px} html[data-density="compact"] .kpi{padding:11px} html[data-density="compact"] .kpi__n{margin:6px 0 3px} html[data-density="compact"] .page{padding:15px} html[data-density="compact"] .page__title{margin-bottom:12px} html[data-density="compact"] .field{margin-bottom:10px} html[data-density="compact"] .grid{gap:9px} html[data-density="compact"] .vacio{padding:15px} /* ========================================================================= RESPONSIVE ========================================================================= */ @media (max-width:1024px){ /* Las DOS columnas, declaradas. Con una sola, `.main` no caía en una segunda columna implícita: la colocación automática lo mandaba a la segunda FILA de la primera columna, o sea DEBAJO del carril y estrangulado a sus 64 px, con su propio contenido desbordando dentro. Medido en el DOM a 721/768/900/1023 px sobre cinco pantallas: `.main` estaba en left 0 con 64 px de ancho y scrollWidth de 247–402 px; con las dos columnas pasa a left 64 y 657/704/836/959 px. El desborde estaba DENTRO de .main, y por eso buscarlo por scrollWidth de la página daba un «encaja» tranquilizador con la retícula rota en las pantallas que probé. Pero «el documento nunca desborda» era falso y lo escribí aquí: Cobros SÍ lo desbordaba a estas mismas anchuras, por una causa distinta —su tabla no llevaba `tbl--fija`— y con una sola tabla de lista basta para tirar la frase. Entre 721 y 1024 px, que es donde cae el iPad vertical (768). `minmax(0,1fr)` y no `1fr` porque el mínimo automático de una pista es su contenido, y una tabla ancha la empujaría otra vez. */ .shell{grid-template-columns:var(--rail-min) minmax(0,1fr)} .side__name,.side__sep,.nav span:not(.nav__ico){display:none} .nav{justify-content:center;padding:9px 0} .side__foot{display:none} .inbox{grid-template-columns:1fr} .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))} } /* ############ EL TELÉFONO (≤720 px) — delta 5-A ######################### * El equipo de la tienda usa el Hub desde el móvil y esta anchura no se había * mirado nunca. Tres reglas: * 1. Todo lo que se toca mide 44 px o más (guía de Apple; Material pide 48 * de caja con 44 de objetivo mínimo razonable). * 2. Nada desborda en horizontal: medido con scrollWidth ≤ innerWidth a 390. * 3. Una cosa a la vez: la Bandeja enseña la lista O el hilo, nunca los dos. * La navegación es la barra lateral convertida en barra inferior fija (ya lo * era). Si lib/ui.php pinta `.tabbar`, manda la barra de cuatro y la lateral * pasa a ser la hoja de «Más» (ver el bloque de .tabbar al final). * ######################################################################### */ @media (max-width:720px){ /* Cabecera de taller: el nombre se esconde y los dos botones caben en 390 px también en inglés (hallazgo del gate 5-A). */ .taller__head{gap:8px;padding:0 10px} .taller__quien{display:none} :root{--head:56px} .shell{grid-template-columns:1fr} .grid--3,.grid--3:not(:has(> :nth-child(3))){grid-template-columns:1fr} /* «Hoy»: las cuatro cifras en dos columnas también en el teléfono — una columna de cuatro tarjetas empuja «Esperando respuesta» fuera de la vista. */ .grid--4{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .dias{gap:2px} .dias__f{font-size:8.5px;writing-mode:vertical-rl;transform:rotate(180deg)} .hoy-kpis .kpi{padding:11px} .hoy-kpis .kpi__n{font-size:26px} .hoy-fila__ir{min-height:44px;display:inline-flex;align-items:center} .side{ position:fixed;bottom:0;top:auto;left:0;right:0;height:auto;z-index:40; flex-direction:row;border-right:0;border-top:1px solid rgba(255,255,255,.10); padding-bottom:env(safe-area-inset-bottom); } .side__brand,.side__foot{display:none} .side__nav{display:flex;padding:4px;width:100%;overflow-x:auto} .nav{flex:1 1 auto;min-width:48px;min-height:48px} .main{padding-bottom:calc(60px + env(safe-area-inset-bottom))} .page{padding:14px} .page__title h1{font-size:23px} /* Cabecera: buscador + avatar + Salir. El nombre y el rol no caben a 390 y el avatar ya dice quién es. */ .head{padding:0 12px;gap:10px} .search{width:auto;flex:1 1 auto;min-width:0} .search input{height:44px;font-size:16px} /* <16 px hace zoom en iOS al enfocar */ .search__ico{top:13px} .who__txt{display:none} .crumb,.head__spacer{display:none} /* el hueco se repartía con el buscador */ .card__h{flex-wrap:wrap} .nav[aria-current="page"]{box-shadow:inset 0 2px 0 var(--hub-accent-decor)} .btn{height:auto;min-height:44px} .field input,.field select{min-height:44px;font-size:16px} .field textarea{font-size:16px} .tbl input[type="checkbox"]{width:22px;height:22px;margin:0} /* delta 6+7: los porcentajes de pago del oro viven en una tabla (Ajustes). */ .tbl input[type="number"]{min-height:44px;font-size:16px} /* Tablero en el teléfono: una columna cada vez, elegida con las pestañas. */ .pipa-tabs{display:flex;gap:6px;overflow-x:auto;margin:0 0 10px;padding-bottom:4px} .pipa-tab{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border:1px solid var(--hub-border); border-radius:999px;background:var(--hub-surface);font-size:13px;text-decoration:none;white-space:nowrap;flex:0 0 auto} .pipa-tab[aria-current="true"]{background:var(--hub-chrome-bg);border-color:var(--hub-chrome-bg);color:var(--hub-chrome-ink)} .board{display:block} .board .col{display:none;max-height:none;width:auto;max-width:none} .board .col.col--activa{display:flex} .col{flex:0 0 84vw} .pipa-filtros__abrir{display:inline-flex;margin:0 0 10px} .pipa-filtros__toggle:not(:checked) ~ .pipa-filtros{display:none} .pipa-filtros__toggle:focus-visible + .pipa-filtros__abrir{outline:2px solid var(--hub-accent-soft)} .pipa-filtros input[type="search"]{width:100%} .pipa-filtros input,.pipa-filtros select{height:44px;font-size:16px;flex:1 1 140px} .pipa-filtros__f{flex:1 1 140px} .opp-panel{width:100vw;border-left:0;box-shadow:none} .opp-panel__volver{display:inline-flex;align-items:center;gap:4px;min-height:44px;font-weight:600;font-size:13.5px;text-decoration:none;white-space:nowrap} .opp-panel__x{display:none} .opp-panel__meta{grid-template-columns:1fr} body:has(.opp-panel) .main{padding-right:0} body:has(.opp-panel) .tabbar{display:none} /* El panel es la pantalla: el tablero de detrás no se desplaza con el dedo. */ body:has(.opp-panel){overflow:hidden} /* --- Bandeja: lista O hilo ------------------------------------------- */ .inbox:not(.inbox--abierto) .inbox__hilo{display:none} .inbox--abierto .inbox__lista{display:none} .page:has(.inbox--abierto) > .page__title{display:none} .hilo{min-height:64px} /* El hilo se queda con la pantalla: fuera la barra de navegación (se sale con «← Hilos») y la respuesta abajo, fija, sobre la zona segura. */ body:has(.inbox--abierto) .side, body:has(.inbox--abierto) .tabbar{display:none} body:has(.inbox--abierto) .main{padding-bottom:0} body:has(.hilo__acc) .main{padding-bottom:calc(68px + env(safe-area-inset-bottom))} .inbox__hilo{overflow:visible} /* si no, .card es el contenedor del sticky */ .hilo-bar{ position:sticky;top:var(--head);z-index:10;background:var(--hub-surface); padding:6px 10px;gap:8px;border-radius:var(--radius-md) var(--radius-md) 0 0; flex-wrap:nowrap; /* una sola fila: el nombre cede con elipsis, no los botones */ } .hilo-bar h2{font-size:17px;flex:0 1 auto} .solo-estrecho.hilo__etapa{display:flex;align-items:center;gap:8px;margin:0 0 10px} .hilo-bar .chip{flex:0 0 auto} .hilo-bar__volver{ display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 6px 0 0; font-weight:600;font-size:13.5px;text-decoration:none;white-space:nowrap;flex:0 0 auto; } .hilo-bar__ficha{flex:0 0 auto} .solo-ancho{display:none} .solo-estrecho{display:block} .hilo__acc{ position:fixed;left:0;right:0;bottom:0;z-index:30; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:var(--hub-surface);border-top:1px solid var(--hub-border); } .hilo__acc .btn{width:100%;justify-content:center} /* «Silenciar asistente» en estrecho: arriba del hilo, no en la barra. */ .solo-estrecho.hilo__bot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px} .burb{max-width:90%} .media img,.media video,.burb img,.burb video{max-width:100%} /* El hilo de la Bandeja ocupa la pantalla: su propio desplazamiento entre la barra del hilo y el botón fijo de abajo, arrancando en el último mensaje. */ .hilo-v--bandeja .hilo-v__scroll{max-height:calc(100dvh - 260px)} .filtro{height:36px;padding:0 12px;font-size:13px} .pestana{min-height:44px;display:inline-flex;align-items:center} .etapa-sel{height:40px;font-size:16px;max-width:46vw} /* --- Ficha de contacto: una columna, en el orden del mostrador -------- */ .pila > .grid{display:contents} .pila__ficha{order:1} .pila__opps{order:2} .pila__ia{order:3} /* delta 6+7: la ficha IA, justo antes de lo en vivo */ .pila__vivo{order:3} .pila__notas{order:4} .pila__trabajo{order:5} .pila__hist{order:6} .ficha-res{flex-direction:column;align-items:stretch} .ficha-res__acc .btn{flex:1 1 auto;justify-content:center} .hilo-v--ficha .hilo-v__scroll{max-height:70vh} } /* ############ .tabbar — SOLO SI lib/ui.php LA PINTA ###################### * Cuatro accesos (Panel · Bandeja · Contactos · Más) en vez de once iconos * sin texto con scroll lateral. Todo va detrás de `.shell:has(.tabbar)`: sin * el marcado, nada de esto aplica y sigue mandando la barra de arriba. * «Más» es un ancla a #nav-completa (el