:root{
  --ink:#1A2128; --paper:#F5F7F8; --surface:#fff; --surface-2:#EDF1F3;
  --hairline:#D9E0E5; --hairline-2:#C3CDD4; --body:#414B55; --muted:#67717B;
  --gold:#A8853C; --gold-ink:#8A6D2E;
  --hot:#94452E; --hot-bg:#F6E9E4; --ok:#2F6B4F; --ok-bg:#E7F1EB;
  --warn:#8A6A1F; --warn-bg:#F7F0DE;
  /* la fila de año del historial. Se USABA sin declarar, así que siempre
     ganaba su respaldo claro: en tema oscuro salía blanco con texto claro
     encima. (Auditoría del panel, ROL 2, 25-08-2026.) */
  --tarjeta2:#FAFAF8;
  --vino:#7B2D3B;                /* chip de tramo XS */
  --sans:"Libre Franklin","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Consolas,"Liberation Mono",monospace;
  /* alto de la banda de la marca. Va aquí porque TODO lo que se queda pegado
     arriba (barra lateral, cabecera de la ficha, barras de lote) tiene que
     empezar justo debajo de ella. Un número suelto en cada regla se
     desincroniza a la primera. */
  --banda:46px;
}
@media(max-width:880px){:root{--banda:42px}}
@media(prefers-color-scheme:dark){:root{
  --ink:#E8EDF1; --paper:#0E1418; --surface:#161E24; --surface-2:#1D2730;
  --hairline:#28333D; --hairline-2:#39464F; --body:#B6C1CA; --muted:#8A97A2;
  --gold:#D8B96A; --gold-ink:#E3C77E; --hot:#E09B7E; --hot-bg:#331F19;
  --ok:#7FC0A0; --ok-bg:#16241D; --warn:#D9B95F; --warn-bg:#282213;
  --tarjeta2:#1D2730; --vino:#A8465A;
}}
/* La tipografía de la marca, autoalojada (misma woff2 variable que la web) */
@font-face{font-family:"Libre Franklin";src:url("/static/LibreFranklin.woff2?v=1786458739") format("woff2");
           font-weight:100 900;font-style:normal;font-display:swap}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--body);font-family:var(--sans);
     font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--gold-ink)}
::selection{background:var(--gold);color:#1A2128}
button,a,select,input,summary,.chip{transition:background .12s ease,color .12s ease,
    border-color .12s ease,opacity .12s ease}

/* ---------- botones: UNA base para todo el panel ----------
   Primario: tinta que se vuelve oro al pasar. Cada contexto solo declara lo
   que le es propio (tamaño o una variante); el resto se hereda de aquí. */
button,.boton{font:inherit;font-size:14px;cursor:pointer;border:0;
              background:var(--ink);color:#fff;padding:8px 15px;
              text-align:center;text-decoration:none}
button:hover,.boton:hover{background:var(--gold);color:#1A2128}
/* la variante de rechazo, igual en todas las colas */
button.mal{background:transparent;color:var(--muted);border:1px solid var(--hairline-2)}
button.mal:hover{background:var(--hot);color:#fff;border-color:var(--hot)}
:focus-visible{outline:2px solid var(--gold);outline-offset:1px}

/* ---------- iconos de trazo propios (sustituyen a los emojis) ----------
   Heredan el color del texto donde están; nada de colores de emoji ajenos
   a la paleta. Los dibuja icono() en app.py. */
.ico{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;
     stroke-linecap:round;stroke-linejoin:round;vertical-align:-2px;flex:0 0 auto}
h1 .ico{width:18px;height:18px;vertical-align:-2px}
h2 .ico{width:14px;height:14px;color:var(--gold-ink)}
h2 .ico.hot{color:var(--hot)}
.b-lado .ico{width:13px;height:13px;stroke-width:2}

/* ---------- marca corporativa ----------
   El SVG viene tal cual de licitanea.com. No se le cambia el color ni las
   proporciones: solo se le da tamaño. Su oro es la versión nocturna, así que
   siempre va sobre fondo pizarra, como en la web. */
.logo-wrap{display:block;line-height:0}
.logo-wrap svg.logo{display:block;height:26px;width:auto}
.logo-wrap.grande svg.logo{height:46px}
a.logo{text-decoration:none;display:block}

/* ---------- estructura: barra lateral + contenido ----------
   La barra va siempre sobre pizarra (como la cabecera de la web) porque el
   logotipo dorado lo exige; no cambia con el tema. */
/* la banda: barra de sistema — usuario · logo · sesión. El fondo en línea.
   SE QUEDA ARRIBA al bajar (25-08-2026): con ella se iba el aviso de mensajes
   del chat, y un aviso que solo se ve si estás arriba del todo no avisa. */
.banda.compacta{position:sticky;top:0;z-index:30}
.banda .logo{text-decoration:none;line-height:0}
.banda .logo-wrap.grande svg.logo{height:54px}
.banda.compacta .logo-wrap.grande svg.logo{height:26px}
.b-lado{flex:1;display:flex;gap:16px;align-items:center;font-size:12px;
        color:#8A97A2;font-family:var(--mono)}
.b-lado b{color:#C9D1D8;font-weight:600}
.b-der{justify-content:flex-end}
.b-lado a{color:#8A97A2;text-decoration:none}
.b-lado a:hover{color:#D8B96A}
.b-lado .atajos{cursor:help}
@media(max-width:880px){.banda .logo-wrap.grande svg.logo{height:40px}
                        .banda.compacta .logo-wrap.grande svg.logo{height:22px}
                        .b-lado{font-size:11px;gap:10px}
                        .b-lado .atajos{display:none}}

.marco{display:flex;min-height:100vh;align-items:stretch}
/* la barra lateral empieza justo DEBAJO de la banda, no debajo del navegador */
.lado{width:218px;flex:0 0 218px;background:#1A2128;border-right:2px solid #A8853C;
      display:flex;flex-direction:column;padding:10px 0 16px;
      position:sticky;top:var(--banda);
      height:calc(100vh - var(--banda));overflow-y:auto}
.lnav{display:flex;flex-direction:column;margin-top:16px}
.lnav .lab{padding:0 12px 8px 20px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
           color:#8A97A2;font-family:var(--mono);display:flex;justify-content:space-between;
           align-items:center}
.pliega{color:#8A97A2;text-decoration:none;font-size:15px;padding:2px 8px;line-height:1}
.pliega:hover{color:#D8B96A}
/* plegada: solo un raíl estrecho con el botón de desplegar */
.lado.plegada{width:36px;flex:0 0 36px;padding:12px 0;align-items:center;overflow:hidden}
.despliega{color:#C9D1D8;text-decoration:none;font-size:17px;padding:8px 10px;display:block}
.despliega:hover{color:#D8B96A}
.lnav a{color:#C9D1D8;padding:10px 18px;text-decoration:none;display:flex;
        justify-content:space-between;align-items:center;gap:8px;font-size:14px;
        border-left:2px solid transparent}
.lnav a:hover{color:#fff;background:#212B34}
.lnav a.on{color:#D8B96A;border-left-color:#D8B96A;background:#212B34;font-weight:500}
.lnav .cnt{font-family:var(--mono);font-size:11px;color:#C9D1D8;background:#2A3540;
           padding:2px 8px;min-width:26px;text-align:center}
.lnav a.on .cnt{color:#1A2128;background:#D8B96A}
.lpie{margin-top:auto;padding:14px 20px 0;border-top:1px solid #2C363F;display:flex;
      flex-direction:column;gap:7px;font-size:12.5px}
.lpie a{color:#8A97A2;text-decoration:none}
.lpie a:hover{color:#fff}
.lpie .yo{color:#C9D1D8;font-family:var(--mono);font-size:11.5px}
@media(max-width:880px){
  .marco{display:block}
  .lado{width:auto;height:auto;position:static;flex-direction:row;flex-wrap:nowrap;
        align-items:center;gap:0 4px;padding:0 8px;border-right:0;
        border-bottom:2px solid #A8853C}
  /* en el móvil la barra es una tira: las páginas se deslizan en horizontal */
  .lnav{flex-direction:row;flex-wrap:nowrap;margin-top:0;overflow-x:auto;flex:1;
        -webkit-overflow-scrolling:touch}
  .lnav .lab{display:none}
  .lnav a{padding:11px 10px;font-size:13px;border-left:0;white-space:nowrap;
          border-bottom:2px solid transparent;flex-shrink:0}
  .lnav a.on{border-bottom-color:#D8B96A}
  .lnav .cnt{padding:1px 6px;min-width:0;font-size:10.5px}
  .lpie{margin-top:0;margin-left:auto;padding:0 6px;border-top:0;flex-direction:row;
        align-items:center;gap:10px;flex-shrink:0}
  .lpie .yo{display:none}          /* en pantalla estrecha, el usuario sobra */
  /* plegar la barra no tiene sentido en una tira de 44px: se enseña siempre */
  .lado.plegada{width:auto;flex-direction:row;padding:0 8px}
  .despliega{padding:10px 12px}
}

/* ---------- móvil: la lista y la ficha, en columna ---------- */
@media(max-width:620px){
  .wrap{padding:0 13px 56px}
  h1{font-size:20px;margin-top:18px}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .busca input[type=search],.busca select{flex:1 1 100%;min-width:0;width:100%}
  .busca button{flex:1}
  .row{grid-template-columns:auto 1fr;padding:12px 13px}
  .row .der{grid-column:1/-1;order:3;gap:5px}
  .row .sub{grid-column:1/-1;order:4}
  .rank{min-width:20px}
  .cab-lead{flex-direction:column;align-items:stretch}
  .acciones{margin-top:2px;width:100%}
  .acciones select{flex:1;min-width:0}
  .dgrid{grid-template-columns:repeat(2,1fr)}
  .dos{gap:18px}
  th,td{padding:7px 8px;font-size:13px}
  .btel{font-size:16px;padding:8px 13px;white-space:nowrap}
  .kanban{grid-auto-columns:minmax(200px,80vw)}

  /* El formulario de estado de cada fila de /hoy. Era el UNICO desbordamiento
     real que quedaba: sin envolver, empujaba la pagina a 607 px de ancho en
     una pantalla de 390 y obligaba a deslizar en horizontal para leer el
     texto. Medido el 25-08-2026. */
  .estrow{flex-wrap:wrap}
  .estrow select,.estrow .motivo-rapido{flex:1 1 100%;min-width:0}
  .estrow button{flex:1 1 auto}

  /* La banda superior. En 390 px no caben el nombre, los atajos, «cambiar
     contrasena» y «salir»: «salir» se quedaba cortado por el borde y el
     enlace de la contrasena partia en dos lineas. Se quedan las tres cosas
     que en un movil se usan: el chat (con su aviso), el logo y salir. */
  header.banda.compacta{padding:6px 11px!important}
  .b-quien,.banda .atajos,.banda .b-clave{display:none}
  .banda .logo svg{height:17px}
  .b-lado.b-izq{flex:0 0 auto}

  /* El telefono de la fila es EL boton de la pantalla: se pulsa para llamar.
     Media 23 px de alto, la mitad de lo que necesita un dedo. */
  .row a.tel,.der a.tel{padding:9px 11px;font-size:16px;border:1px solid var(--hairline);
    border-radius:6px;line-height:1.1;display:inline-block}
}

/* La tira de paginas del movil desliza en horizontal, y la barra de deslizar
   por defecto roba 15 px de alto en una pantalla donde cada pixel cuenta. */
.lnav{scrollbar-width:thin;scrollbar-color:#A8853C transparent}
.lnav::-webkit-scrollbar{height:3px}
.lnav::-webkit-scrollbar-thumb{background:#A8853C;border-radius:2px}
.lnav::-webkit-scrollbar-track{background:transparent}

/* ---------- estructura ---------- */
.wrap{flex:1;min-width:0;max-width:1180px;margin:0 auto;padding:0 24px 70px}
.centro{max-width:420px;margin:0 auto;padding:56px 20px 70px}
h1{margin:26px 0 3px;font-size:23px;font-weight:300;color:var(--ink);letter-spacing:-.01em}
h1 b{font-weight:600}
h2{margin:26px 0 9px;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
   color:var(--muted);font-weight:500}
.meta{margin:0 0 4px;color:var(--muted);font-size:13.5px}
.peq{font-size:12.5px;color:var(--muted)}
.volver{margin:20px 0 0;font-size:13px}

/* ---------- tarjeta de acceso ---------- */
.tarjeta{background:var(--surface);border:1px solid var(--hairline);
         box-shadow:0 1px 2px rgba(26,33,40,.05),0 16px 40px -22px rgba(26,33,40,.35);
         overflow:hidden}
/* banda pizarra con el logotipo, igual que la cabecera de la web */
.cabecera-marca{background:#1A2128;border-bottom:2px solid var(--gold);
                padding:30px 30px 32px;display:flex;justify-content:center}
.tarjeta > *:not(.cabecera-marca){margin-left:30px;margin-right:30px}
.tarjeta > form,.tarjeta > .lema,.tarjeta > .pie,.tarjeta > .error,
.tarjeta > .aviso,.tarjeta > .ok,.tarjeta > .boton{margin-left:30px;margin-right:30px}
.tarjeta > .pie{margin-bottom:26px}
.lema{text-align:center;margin:22px 30px 24px;font-size:11.5px;letter-spacing:.14em;
      text-transform:uppercase;color:var(--muted)}
.tarjeta label{display:block;margin-bottom:14px;font-size:12px;letter-spacing:.08em;
               text-transform:uppercase;color:var(--muted)}
.tarjeta input{display:block;width:100%;margin-top:6px;padding:11px 12px;font:inherit;
               font-size:15px;background:var(--paper);color:var(--ink);
               border:1px solid var(--hairline-2);text-transform:none;letter-spacing:normal}
.tarjeta input:focus{outline:2px solid var(--gold);outline-offset:-1px}
.tarjeta button,.boton{display:block;width:100%;margin-top:20px;padding:12px;
                       font-size:15px;font-weight:500}
.pie{margin:20px 0 0;font-size:12.5px;color:var(--muted);text-align:center}
.error{background:var(--hot-bg);border-left:2px solid var(--hot);color:var(--ink);
       padding:10px 13px;margin:0 0 18px;font-size:14px}
.aviso{background:var(--warn-bg);border-left:2px solid var(--warn);color:var(--ink);
       padding:10px 13px;margin:0 0 18px;font-size:14px}
/* mensaje de éxito de las pantallas de acceso; delimitado a la tarjeta porque
   la clase suelta chocaba con el número .n.ok de los recuadros de la cola */
.tarjeta .ok{background:var(--ok-bg);border-left:2px solid var(--ok);color:var(--ink);
    padding:10px 13px;margin:0 0 18px;font-size:14px}

/* ===========================================================================
   CHAT INTERNO (25-08-2026). Ventana flotante, arrastrable y superpuesta: un
   closer al teléfono tiene que poder preguntar algo sin salir de la ficha.
   Paleta y tipografía, las de siempre.
   =========================================================================== */
.b-chat{background:transparent;border:1px solid #2C363F;color:#8A97A2;
        padding:3px 7px;line-height:0;position:relative;margin-left:10px}
.b-chat:hover{color:#D8B96A;border-color:#4A5560;background:transparent}
.b-chat .ico{width:14px;height:14px}
.b-chat-n{position:absolute;top:-7px;right:-7px;background:var(--gold);
          color:#1A2128;font-family:var(--mono);font-size:9.5px;font-weight:600;
          line-height:1;padding:2px 4px;min-width:14px;text-align:center}
.b-chat.con-aviso{color:#D8B96A;border-color:#A8853C}

/* Formato VERTICAL y esquinas redondeadas (petición de Ignasi): aquí se leen
   mensajes cortos uno debajo de otro, no tablas. La lista de conversaciones
   va en horizontal bajo la cabecera para no comerse el ancho.
   El redondeo es la única excepción a las esquinas rectas del panel, y es
   deliberada: esto no es una pantalla, es una ventana que flota encima. */
.chat-ventana{position:fixed;right:22px;bottom:22px;z-index:60;
              width:min(345px,calc(100vw - 24px));
              background:var(--surface);border:1px solid var(--hairline-2);
              border-radius:14px;overflow:hidden;
              box-shadow:0 22px 60px -20px rgba(26,33,40,.6);
              display:flex;flex-direction:column;max-height:min(660px,84vh)}
.chat-ventana.moviendo{user-select:none}
.chat-cab{display:flex;align-items:center;gap:8px;background:#1A2128;
          border-bottom:2px solid #A8853C;padding:9px 8px 9px 15px;cursor:move}
.chat-titulo{flex:1;color:#C9D1D8;font-size:11.5px;letter-spacing:.12em;
             text-transform:uppercase;font-weight:600;font-family:var(--mono)}
.chat-x{background:transparent;border:0;border-radius:7px;color:#8A97A2;
        font-size:13px;padding:3px 8px;line-height:1;cursor:pointer}
.chat-x:hover{background:#2A3540;color:#D8B96A}
.chat-cuerpo{display:flex;flex-direction:column;min-height:0;flex:1}
.chat-ventana.plegado .chat-cuerpo,
.chat-ventana.plegado .chat-lista{display:none}

/* las conversaciones, en una tira horizontal */
.chat-lista{display:flex;gap:6px;padding:9px 11px;overflow-x:auto;
            background:var(--surface-2);border-bottom:1px solid var(--hairline)}
.chat-conv{display:flex;align-items:center;gap:6px;flex:0 0 auto;
           background:var(--surface);color:var(--muted);
           border:1px solid var(--hairline);border-radius:16px;
           padding:5px 12px;font-size:12.5px;white-space:nowrap}
.chat-conv:hover{background:var(--surface);color:var(--ink);
                 border-color:var(--hairline-2)}
.chat-conv.on{background:var(--ink);color:#fff;border-color:var(--ink);
              font-weight:600}
.chat-pend{background:var(--gold);color:#1A2128;font-family:var(--mono);
           font-size:9.5px;font-weight:600;padding:1px 6px;line-height:1.5;
           border-radius:9px}
.chat-conv.on .chat-pend{background:var(--gold);color:#1A2128}

.chat-col{display:flex;flex-direction:column;flex:1;min-width:0}
.chat-msgs{flex:1;overflow-y:auto;padding:13px 12px;display:flex;
           flex-direction:column;gap:8px;min-height:220px}
.chat-vacio{color:var(--muted);font-size:13px;margin:auto;text-align:center;
            max-width:24ch;line-height:1.5}
.chat-dia{align-self:center;font-family:var(--mono);font-size:10px;
          color:var(--muted);background:var(--surface-2);border-radius:10px;
          padding:2px 9px;margin:3px 0}
.chat-m{max-width:88%;align-self:flex-start;background:var(--surface-2);
        border:1px solid var(--hairline);border-radius:13px 13px 13px 4px;
        padding:8px 11px;font-size:13.5px;
        line-height:1.5;color:var(--ink);display:flex;flex-direction:column;
        gap:2px;white-space:pre-wrap;overflow-wrap:anywhere}
.chat-m.mio{align-self:flex-end;background:var(--warn-bg);
            border-color:var(--gold);border-radius:13px 13px 4px 13px}
.chat-de{font-family:var(--mono);font-size:10.5px;color:var(--gold-ink);
         font-weight:600}
.chat-h{font-family:var(--mono);font-size:9.5px;color:var(--muted);
        align-self:flex-end}

.chat-pie{display:flex;gap:7px;padding:10px;border-top:1px solid var(--hairline);
          align-items:flex-end}
.chat-escribe{flex:1;min-width:0;padding:8px 11px;font:inherit;font-size:13.5px;
              background:var(--paper);color:var(--ink);border-radius:16px;
              border:1px solid var(--hairline-2);resize:none;line-height:1.4}
.chat-escribe:focus{outline:2px solid var(--gold);outline-offset:-1px}
.chat-pie button{padding:8px 15px;font-size:12.5px;border-radius:16px}
@media(max-width:620px){
  .chat-ventana{left:8px;right:8px;bottom:8px;width:auto;max-height:76vh}
}

/* ---------- cifras ---------- */
.tiles{display:grid;gap:1px;background:var(--hairline);border:1px solid var(--hairline);
       margin-top:20px}
/* auto-fit y no «cuatro fijas»: con cinco recuadros, la rejilla de cuatro
   dejaba una celda vacía y gris a la derecha del quinto */
@media(min-width:680px){.tiles{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}}
.tile{background:var(--surface);padding:14px 17px}
/* los calientes, encasillados en rojo: son la lista de llamadas de la semana;
   los templados, igual pero en verde */
.tile.t-hot{border:2px solid var(--hot);background:var(--hot-bg)}
.tile.t-ok{border:2px solid var(--ok);background:var(--ok-bg)}
.tile .n{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:25px;
         color:var(--ink);font-weight:500}
.tile .n.hot{color:var(--hot)}.tile .n.ok{color:var(--ok)}.tile .n.warn{color:var(--warn)}
.tile .l{display:block;margin-top:3px;font-size:12.5px;color:var(--muted)}
/* la chispa: los últimos días de parte_diario junto a la cifra */
.tile .fila-n{display:flex;align-items:center;gap:10px}
.spark{width:62px;height:16px;flex:0 0 auto;color:var(--hairline-2);opacity:.9}
.spark polyline{fill:none;stroke:currentColor;stroke-width:1.5}
.spark circle{fill:currentColor;stroke:none}
.tile.t-hot .spark{color:var(--hot)}
.tile.t-ok .spark{color:var(--ok)}
.tile .n.warn ~ .spark{color:var(--warn)}

/* ---------- filtros ---------- */
.busca{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px}
.busca input[type=search]{flex:1;min-width:230px}
.busca input,.busca select{padding:8px 11px;font:inherit;font-size:14px;
        background:var(--surface);color:var(--ink);border:1px solid var(--hairline-2)}
.busca button{padding:8px 16px}
.busca .limpiar{padding:8px 4px;font-size:13px;align-self:center}
.filtros{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-top:11px}
.filtros .et{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
             margin-right:2px}
.filtros .et:not(:first-child){margin-left:12px}
.f{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;
   padding:5px 10px;border:1px solid var(--hairline-2);color:var(--muted);text-decoration:none;
   background:var(--surface)}
.f.on{background:var(--ink);color:#fff;border-color:var(--ink)}
@media(prefers-color-scheme:dark){.f.on{background:var(--gold);color:#1A2128;border-color:var(--gold)}}

/* ---------- filas (densas: el objetivo es escanear 40 de un vistazo) ---------- */
.rows{margin-top:12px;display:grid;gap:1px;background:var(--hairline);
      border:1px solid var(--hairline)}
.row{background:var(--surface);padding:7px 13px;display:grid;
     grid-template-columns:auto 1fr auto;gap:2px 12px;align-items:baseline}
.row:hover{background:var(--surface-2)}
.rank{font-family:var(--mono);font-size:11.5px;color:var(--muted);min-width:24px}
.nm{font-weight:600;font-size:14.5px}
.nm a{color:var(--ink);text-decoration:none}
.nm a:hover{text-decoration:underline}
.der{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.sub{grid-column:2/-1;font-size:12.5px;color:var(--muted)}
.sub em{font-style:normal;color:var(--ink)}
.score{font-family:var(--mono);font-size:12.5px;color:var(--ink)}
.tel{font-family:var(--mono);color:var(--gold-ink);text-decoration:none}
.sintel{color:var(--muted)}
.vacio{background:var(--surface);border:1px solid var(--hairline);padding:32px;
       text-align:center;color:var(--muted)}

/* ---------- etiquetas: UN acento fuerte por fila (banda/plazo); el resto,
   susurro. Con todos los chips gritando, ninguno se oye. ---------- */
.chip{display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;
      text-transform:uppercase;padding:2px 6px;border:1px solid var(--hairline);
      color:var(--muted);white-space:nowrap;opacity:.85}
.chip.caliente{border-color:var(--hot);color:#fff;background:var(--hot);
               font-weight:600;opacity:1;font-size:10px;padding:3px 7px}
.chip.templado{border-color:var(--gold);color:var(--gold-ink);opacity:1}
.chip.verificar{border-color:var(--warn);color:var(--warn)}
.chip.est-llamado,.chip.est-interesado{border-color:var(--ok);color:var(--ok);background:var(--ok-bg)}
.chip.est-vendido{border-color:var(--gold);color:#fff;background:var(--gold);font-weight:500}
.chip.est-no-interesa,.chip.est-no-contactar{opacity:.6;text-decoration:line-through}
/* Etiqueta de sector (26-08-2026). Deliberadamente SIN color propio: en una
   fila ya compiten la temperatura, el plazo y el estado, y el sector es
   contexto, no urgencia. Se lee y no grita. */
.chip.sec{border-color:var(--hairline);background:var(--surface-2);
          color:var(--ink);opacity:.9;letter-spacing:.04em;text-transform:none}
.chip.sec + .chip.sec{margin-left:3px}

/* Certeza (15-09-2026): cuántas cosas se le pueden AFIRMAR con prueba a quien
   descuelga. No es la temperatura del lead —eso es la banda— ni lo que vale
   —eso es el score—: es si la llamada se sostiene. La cola ordena por ella
   dentro del plazo, así que tiene que verse o el orden parece arbitrario.
   Verde solo a partir de 6 pruebas: por debajo hay conversación, no caso. */
.chip.cert{font-family:var(--mono);font-weight:600;letter-spacing:0;
           border-color:var(--hairline);margin-right:4px}
.chip.cert-alta{background:#e8f5e9;color:#1b5e20;border-color:#a5d6a7}
.chip.cert-media{background:var(--surface-2);color:var(--ink)}
.chip.cert-baja{background:transparent;color:var(--muted);opacity:.75}

/* ---------- historial por sector, en la ficha ---------- */
.hsector{margin-top:18px}
.hsector > h3{font-size:11px;letter-spacing:.12em;text-transform:uppercase;
              color:var(--muted);margin:0 0 6px;padding-bottom:5px;
              border-bottom:1px solid var(--hairline);
              display:flex;justify-content:space-between;gap:10px}
.hsector > h3 span{font-family:var(--mono);letter-spacing:0}

/* ---------- ficha ---------- */
.contacto{margin-top:14px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.btel{font-family:var(--mono);font-size:19px;background:var(--ink);color:#fff;
      padding:9px 16px;text-decoration:none}
.btel:hover{background:var(--gold);color:#1A2128}
.dgrid{display:grid;gap:1px;background:var(--hairline);margin:16px 0}
@media(min-width:560px){.dgrid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.dgrid{grid-template-columns:repeat(6,1fr)}}
.dgrid div{background:var(--surface-2);padding:10px 13px}
/* la banda del sector, arriba y a todo lo ancho: el nombre no cabe en una
   sexta parte de la rejilla, y con varios sectores menos todavía */
.dgrid div.ancha{grid-column:1/-1}
.dgrid dt{font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);
          margin:0 0 3px}
.dgrid dd{margin:0;font-family:var(--mono);font-size:13.5px;color:var(--ink);
          font-variant-numeric:tabular-nums}
.dos{display:grid;gap:26px}
@media(min-width:860px){.dos{grid-template-columns:1fr 1fr}}
.dos select,.dos textarea{width:100%;padding:9px 11px;font:inherit;font-size:14px;
      background:var(--surface);color:var(--ink);border:1px solid var(--hairline-2)}
.dos button{margin-top:9px;padding:9px 16px}
.com{background:var(--surface);border:1px solid var(--hairline);
     border-left:2px solid var(--gold);padding:11px 13px;margin-top:9px;font-size:14px}
.com-cab{font-family:var(--mono);font-size:11px;color:var(--muted);margin-bottom:5px}
/* línea de tiempo del lead */
.tl-e{display:flex;gap:10px;padding:9px 0 9px 4px;border-left:2px solid var(--hairline);
      margin-left:8px;position:relative}
.tl-e .tl-i{flex:0 0 auto;width:26px;text-align:center;font-size:14px;
            background:var(--paper);margin-left:-18px;color:var(--muted)}
.tl-e .tl-i .ico{width:14px;height:14px;margin-top:2px}
.tl-e .tl-c{font-size:14px;min-width:0}
.tl-e .com-cab{margin-bottom:2px}
.motivo-viejo{border-left:2px solid var(--hot);padding:9px 0 9px 13px;margin-top:11px;color:var(--ink)}

/* ---------- tablas ----------
   Un paso menos de cuerpo y menos aire vertical (25-08-2026, petición de
   Ignasi): en el historial de un lead grande son ~4 filas más por pantalla sin
   que nada se lea peor. La interlínea baja a 1,45 porque en una tabla el ojo
   salta de celda a celda, no lee párrafos. */
.scroller{overflow-x:auto}
table{width:100%;border-collapse:collapse;background:var(--surface);
      border:1px solid var(--hairline)}
th{text-align:left;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
   color:var(--muted);font-weight:500;padding:7px 10px;border-bottom:1px solid var(--hairline-2)}
td{padding:7px 10px;border-bottom:1px solid var(--hairline);font-size:13.5px;
   line-height:1.45;vertical-align:top}
tbody tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right}
td.num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:13px;white-space:nowrap}

/* LA LEYENDA SE QUEDA A LA VISTA (26-08-2026, pedido por Ignasi: en un
   historial largo dejas de saber qué columna es cuál).

   Dos cosas hacían falta y ninguna es obvia:

   1. `.scroller` lleva overflow-x:auto, y eso convierte al contenedor en el
      ancestro de scroll — un `sticky` dentro se queda pegado a ÉL, que no
      desplaza nunca, así que no se activaba jamás. Por eso aquí se le devuelve
      overflow:visible, y solo a partir de 1000 px, que es donde la tabla cabe
      sin desplazarse en horizontal.
   2. La cabecera de la ficha ya es fija y de alto VARIABLE, así que el tope no
      puede ser un número: se apoya en --cab, que publica panel.js midiéndola.

   Y el borde va como sombra interior porque con border-collapse el borde
   pertenece a la tabla y no viaja con la celda pegada. */
@media (min-width: 1000px) {
  .scroller.fijada{overflow:visible}
  .scroller.fijada thead th{position:sticky;top:calc(var(--banda) + var(--cab, 0px));
        z-index:4;background:var(--surface);
        box-shadow:inset 0 -1px 0 var(--hairline-2)}
}

/* Qué venderle: una tarjeta por producto, con el precio siempre a la vista.
   Va debajo del historial porque el argumento nace de los expedientes. */
.ventas{display:grid;gap:12px;margin:14px 0 28px}
.venta{border:1px solid var(--hairline);border-left:3px solid var(--gold);
       background:var(--surface);padding:15px 17px}
.venta-cab{display:flex;justify-content:space-between;align-items:baseline;
           gap:14px;margin-bottom:6px;flex-wrap:wrap}
.venta-cab b{font-size:15.5px;color:var(--ink)}
.venta .precio{font-family:var(--mono);font-size:14px;color:var(--gold-ink);
               white-space:nowrap;font-weight:600}
.venta p{margin:0;font-size:14.5px;color:var(--muted);line-height:1.55}

/* Lo que escribió la mesa. Es texto literal del evaluador: se lee entero,
   y si es largo se pliega con <details>, sin JavaScript. */
.motivo{border-left:2px solid var(--gold);background:var(--surface);
        padding:12px 16px;margin:0 0 10px}
.motivo b{display:block;font-size:13px;letter-spacing:.04em;color:var(--gold-ink);
          margin-bottom:5px}
.motivo p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink)}
details.motivo summary{cursor:pointer;list-style:none;display:block}
details.motivo summary::-webkit-details-marker{display:none}
details.motivo summary .avance{display:block;font-size:14.5px;line-height:1.6;
                               color:var(--muted)}
details.motivo summary::after{content:"Ver texto completo ▾";display:inline-block;
                              margin-top:7px;font-size:12.5px;letter-spacing:.06em;
                              text-transform:uppercase;color:var(--gold-ink);
                              font-weight:600}
details.motivo[open] summary .avance{display:none}
details.motivo[open] summary::after{content:"Plegar ▴"}
details.motivo[open] p{margin-top:8px}

/* ---------- desplegable de estado (Recuperar en descartados) ---------- */
.estrow{display:inline-flex;gap:5px;align-items:center}
.estrow select{padding:4px 7px;font:inherit;font-size:12.5px;background:var(--surface);
               color:var(--ink);border:1px solid var(--hairline-2);max-width:210px}
.estrow button{padding:4px 10px;font-size:12px}

/* ---------- cola de confirmación: columnas FIJAS para despachar en serie */
.conf-row{grid-template-columns:30px 128px 1fr 176px;align-items:center;gap:4px 12px}
.conf-row .sel{display:flex;align-items:center;justify-content:center}
.conf-row input[type=checkbox]{width:16px;height:16px;accent-color:var(--gold)}
.telcol{font-family:var(--mono);font-size:13.5px;white-space:nowrap}
.conf-info{min-width:0}
.conf-nm{font-weight:600;font-size:14px;color:var(--ink);text-decoration:none}
.conf-nm:hover{text-decoration:underline}
.conf-info .sub{display:block;grid-column:auto}
.conf-acc{display:flex;gap:6px;justify-content:flex-end}
.conf-acc button{padding:5px 12px;font-size:12.5px}
/* aceptar un contacto se confirma en verde, no en oro: es un «sí» */
.conf-acc button:not(.mal):hover{background:var(--ok);color:#fff}
.barra-lote{position:sticky;top:var(--banda);z-index:5;display:flex;gap:14px;
    align-items:center;
    background:var(--paper);padding:10px 2px;border-bottom:1px solid var(--hairline)}
.barra-lote .sel{font-size:13.5px;color:var(--ink);display:flex;gap:7px;
    align-items:center;cursor:pointer}
.barra-lote input[type=checkbox]{width:16px;height:16px;accent-color:var(--gold)}
.barra-lote button{padding:8px 16px;font-size:13.5px}
@media(max-width:700px){.conf-row{grid-template-columns:26px 1fr auto}
    .telcol{grid-column:2}.conf-info{grid-column:2/-1;order:3}
    .conf-acc{grid-column:3}}

/* ---------- contacto: búsqueda manual y formulario ---------- */
.busca-contacto{margin-top:8px;font-size:13.5px}
.busca-contacto a{margin:0 2px}
.edita-contacto{margin-top:10px}
.edita-contacto summary{cursor:pointer;font-size:12.5px;letter-spacing:.06em;
    text-transform:uppercase;color:var(--gold-ink);font-weight:600;list-style:none}
.edita-contacto summary::-webkit-details-marker{display:none}
.edita-contacto summary::after{content:" ▾"}
.edita-contacto[open] summary::after{content:" ▴"}
.edita-contacto .fc{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}
.edita-contacto input{flex:1;min-width:130px;padding:8px 10px;font:inherit;font-size:14px;
    background:var(--surface);color:var(--ink);border:1px solid var(--hairline-2)}
.edita-contacto input.corto{flex:0 1 90px;min-width:70px}
.edita-contacto button{margin-top:10px;padding:8px 16px}

/* ---------- guion de llamada ---------- */
.guion{margin:14px 0 6px;padding:0 0 0 22px;display:flex;flex-direction:column;gap:8px;
       max-width:75ch}
.guion li{background:var(--surface);border:1px solid var(--hairline);
          border-left:3px solid var(--gold);padding:10px 14px;font-size:14.5px;
          color:var(--ink);line-height:1.55}
.guion li::marker{font-family:var(--mono);font-size:12px;color:var(--gold-ink)}

/* ---------- seguimiento: llamada en un clic + estado + recontacto ---------- */
.llamada-btns{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin:4px 0 14px}
.llamada-btns .et{font-size:11px;letter-spacing:.1em;text-transform:uppercase;
                  color:var(--muted);margin-right:3px;flex-basis:100%}
/* resultados de llamada: fantasma a propósito — son cinco a la vez y en
   tinta sólida gritarían; al pasar se vuelven el primario */
.llamada-btns button{padding:7px 13px;font-size:13.5px;
                     background:var(--surface);color:var(--ink);
                     border:1px solid var(--hairline-2)}
.llamada-btns button:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
/* ⚠️ Y LOS ENLACES DE ESA MISMA TIRA, IGUAL QUE LOS BOTONES.
   Eran texto suelto separado 7 px, y tres seguidos se leian como UNA frase:
   «Escribirle con el PDF adjunto Verlo en pantalla Hacer otro». Son tres
   acciones distintas y tienen que verse como tres. (26-08-2026, lo vio
   Ignasi en la pantalla del presupuesto.) */
.llamada-btns a.tel{padding:7px 13px;font-size:13.5px;line-height:1.2;
                    background:var(--surface);color:var(--ink);
                    border:1px solid var(--hairline-2);text-decoration:none;
                    display:inline-flex;align-items:center;gap:6px}
.llamada-btns a.tel:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.f-estado{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.f-estado select{flex:0 1 auto;width:auto}
.f-estado .lbl-prox{font-size:13px;color:var(--muted);display:flex;gap:6px;
                    align-items:center}
.f-estado input[type=date]{padding:7px 9px;font:inherit;font-size:13.5px;
        background:var(--surface);color:var(--ink);border:1px solid var(--hairline-2)}
.f-estado button{margin-top:0}

/* ---------- cuadro de mando ---------- */
@media(min-width:680px){.tiles.kpis{grid-template-columns:repeat(4,1fr)}}
.criticos{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.critico{background:var(--surface);border:1px solid var(--hairline);
         border-left:3px solid var(--hairline-2);padding:12px 15px;font-size:14.5px}
.critico.hot{border-left-color:var(--hot);background:var(--hot-bg)}
.critico.warn{border-left-color:var(--warn);background:var(--warn-bg)}
.critico b{color:var(--ink);font-weight:600}
.critico .accion{display:block;margin-top:3px;font-size:13px;color:var(--muted)}

/* ---------- modo llamada: el guion en vivo ---------- */
.barra-guardado{position:sticky;top:var(--banda);z-index:5;background:var(--paper);
                padding:8px 0;text-align:right}
.autosave{font-family:var(--mono);font-size:12px;color:var(--muted);
          padding:4px 10px;border:1px solid var(--hairline)}
.autosave.trabajando{color:var(--warn);border-color:var(--warn)}
.autosave.ok{color:var(--ok);border-color:var(--ok)}
.autosave.mal{color:#fff;background:var(--hot);border-color:var(--hot)}
.punto{background:var(--surface);border:1px solid var(--hairline);
       border-left:3px solid var(--gold);padding:12px 15px;margin-top:10px}
.punto-t b{display:block;color:var(--ink);font-size:14.5px}
.punto-t .pq{display:block;font-size:12.5px;color:var(--muted);margin:2px 0 8px}
.punto textarea,.toma-viva textarea{width:100%;padding:9px 11px;font:inherit;
    font-size:14.5px;background:var(--paper);color:var(--ink);
    border:1px solid var(--hairline-2)}
.punto textarea:focus{outline:2px solid var(--gold);outline-offset:-1px}
.guion-resp{margin:14px 0;background:var(--surface);border:1px solid var(--hairline);
            padding:10px 14px}
.guion-resp summary{cursor:pointer;font-size:12.5px;letter-spacing:.06em;
    text-transform:uppercase;color:var(--gold-ink);font-weight:600}
.guion-resp p{font-size:14px;margin:8px 0 0}

/* ---------- entregables: el formulario del informe ---------- */
.ent-form{margin-top:14px}
.ent-form h2{margin-top:26px}
.ent-g{display:grid;gap:10px;grid-template-columns:1fr 1fr;margin-bottom:6px}
@media(max-width:700px){.ent-g{grid-template-columns:1fr}}
.ent-l{display:flex;flex-direction:column;gap:4px;font-size:12px;
       letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ent-l.ancho{grid-column:1/-1;margin-top:8px}
.ent-l .ayuda{text-transform:none;letter-spacing:0;font-size:12.5px;color:var(--muted)}
.ent-l input,.ent-l textarea,.ent-l select{padding:9px 11px;font:inherit;font-size:14.5px;
    background:var(--surface);color:var(--ink);border:1px solid var(--hairline-2);
    text-transform:none;letter-spacing:normal}
.ent-t{margin-top:4px}
.ent-t td{padding:3px}
.ent-t input{width:100%;padding:7px 9px;font:inherit;font-size:13.5px;
    background:var(--surface);color:var(--ink);border:1px solid var(--hairline)}
.ent-t .cnum input{width:64px}
.ent-pie{display:flex;gap:16px;align-items:flex-end;margin-top:22px;flex-wrap:wrap}
.ent-pie button{padding:11px 26px;font-size:15px;font-weight:500}

/* ---------- página Hoy: el semáforo del plazo y la cola accionable ---------- */
.plazo{display:inline-block;font-family:var(--mono);font-size:11px;font-weight:600;
       letter-spacing:.04em;padding:3px 8px;white-space:nowrap;vertical-align:middle}
.plazo.p-rojo{background:var(--hot);color:#fff}
.plazo.p-ambar{background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn)}
.plazo.p-oro{background:var(--surface);color:var(--gold-ink);border:1px solid var(--gold)}
/* sin margen (≤7 días o ya cerrada): fuera de juego comercial, en susurro —
   ahí el argumento es la vigilancia, no la acción */
.plazo.p-gris{background:var(--surface-2);color:var(--muted);border:1px solid var(--hairline)}
.plazo.p-lejos{background:var(--surface);color:var(--muted);border:1px solid var(--hairline-2)}
.rows.criticas .row{border-left:3px solid var(--hot)}
.sub.lic{color:var(--gold-ink);font-weight:500}
.acc-hoy{margin-top:2px}
/* los cinco resultados, todos fantasma: en tinta sólida gritan cinco veces por
   fila y, mezclados con dos fantasma, los fantasma parecen desactivados */
.acc-hoy button{font-size:11.5px;padding:4px 9px;background:var(--surface);
                color:var(--ink);border:1px solid var(--hairline-2)}
.acc-hoy button:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.acc-hoy button.mal{color:var(--muted)}
.acc-hoy button.mal:hover{background:var(--hot);color:#fff;border-color:var(--hot)}
.motivo-rapido{padding:3px 6px;font:inherit;font-size:11.5px;
               background:var(--surface);color:var(--muted);
               border:1px solid var(--hairline-2);max-width:170px}
.motivo-rapido:valid{color:var(--ink)}
.acc-hoy input[type=date]{padding:3px 6px;font:inherit;font-size:11.5px;
    background:var(--surface);color:var(--ink);border:1px solid var(--hairline-2)}
.acciones-linea{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row.hecho{animation:destello .7s ease}
@keyframes destello{0%{background:var(--ok-bg)}100%{background:var(--surface)}}
.hecho-marca{font-family:var(--mono);font-size:12px;color:var(--ok);font-weight:600}
@media(prefers-reduced-motion:reduce){.row.hecho{animation:none}}
/* Choque de exclusividad: dos clientes en el mismo expediente. Rojo
   de «tuyo», no dorado de aviso: aqui hay que decidir, no leer. */
.aviso-exc{background:var(--mal-bg,#F7E5E2);border:1px solid #E2796E;
  border-radius:4px;padding:11px 14px;margin:0 0 14px;font-size:14px;
  line-height:1.5}
.aviso-exc a{color:#98302A}
.aviso-lic{background:var(--warn-bg);border-left:3px solid var(--gold);
           padding:12px 16px;margin-top:14px;font-size:14.5px;color:var(--ink)}
.aviso-lic .plazo{margin:0 6px}
.reagenda{position:relative}
.fecha-re{position:absolute;right:17px;top:13px;font-family:var(--mono);font-size:12px;
          color:var(--hot);font-weight:600;z-index:1}

/* ---------- cabecera de la ficha: nombre a la izquierda, acciones a la derecha */
.cab-lead{display:flex;justify-content:space-between;align-items:flex-start;
          gap:12px 24px;flex-wrap:wrap}
/* el título puede encoger: sin esto, un nombre largo echaba las acciones
   a la fila de abajo por un solo píxel */
.cab-lead > div:first-child{flex:1 1 320px;min-width:0}
.cab-lead h1{margin:26px 0 3px}
.acciones{display:flex;gap:7px;align-items:center;margin-top:30px}
.acciones select{padding:8px 11px;font:inherit;font-size:14px;background:var(--surface);
                 color:var(--ink);border:1px solid var(--gold)}
/* la acción de cabecera de la ficha va en oro: es LA acción del lead */
.acciones button{background:var(--gold-ink);font-weight:500}
.acciones button:hover{background:var(--ink);color:#fff}
.cab-der{display:flex;flex-direction:column;gap:8px;align-items:flex-end;margin-top:30px}
.cab-der .acciones{margin-top:0}
.asigna select{border-color:var(--hairline-2)}
@media(max-width:620px){.cab-der{align-items:stretch;width:100%;margin-top:2px}}
.chip.est-oportunidad{border-color:var(--gold);color:#fff;background:var(--gold-ink);font-weight:500}
.chip.est-descartado{opacity:.6;text-decoration:line-through}

/* ---------- formulario de descarte ---------- */
.fdescarte{max-width:560px;margin-top:18px}
.fdescarte textarea{width:100%;padding:10px 12px;font:inherit;font-size:14.5px;
       background:var(--surface);color:var(--ink);border:1px solid var(--hairline-2)}
/* descartar es destructivo: rojo, nunca oro */
.fdescarte button{margin-top:10px;padding:10px 18px;background:var(--hot)}
.fdescarte button:hover{background:var(--ink);color:#fff}

/* ---------- embudo de ventas ----------
   Cinco columnas fijas; en pantallas estrechas la parrilla entera se desplaza
   en horizontal dentro de su propio contenedor. */
.kanban{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(232px,1fr);
        gap:12px;overflow-x:auto;margin-top:20px;padding-bottom:10px}
.col{background:var(--surface-2);border:1px solid var(--hairline);
     border-top:3px solid var(--hairline-2);padding:11px 11px 13px;min-height:180px}
.col h3{margin:0 0 4px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
        color:var(--muted);font-weight:500;display:flex;justify-content:space-between;
        align-items:center}
.col h3 .cnt{font-family:var(--mono);font-size:11.5px;color:var(--ink)}
.col.contactado{border-top-color:var(--hairline-2)}
.col.interesado{border-top-color:var(--warn)}
.col.propuesta{border-top-color:var(--gold);background:var(--warn-bg)}
.col.ganado{border-top-color:var(--ok);background:var(--ok-bg)}
.col.perdido{border-top-color:var(--hot);opacity:.75}
.col h3 .cnt{font-size:13px;font-weight:600}
.tarj{background:var(--surface);border:1px solid var(--hairline);
      border-left:3px solid var(--gold);padding:10px 12px;margin-top:9px;
      display:flex;flex-direction:column;gap:3px}
.tarj .tnm{font-weight:600;font-size:14px;color:var(--ink);text-decoration:none}
.tarj .tnm:hover{text-decoration:underline}
/* de quién es la tarjeta: solo cuando el administrador mira todas juntas */
.tdueno{font-family:var(--mono);font-size:10.5px;color:var(--muted);
        border:1px solid var(--hairline);padding:1px 6px;align-self:flex-start;
        margin-top:2px}
.reparto{margin:6px 0 0}
.reparto a{text-decoration:none;color:var(--muted)}
.reparto a:hover{color:var(--gold-ink)}
.reparto a b{color:var(--ink)}
.tarj .tprod{font-size:12.5px;color:var(--muted)}
.tarj .tprod b{color:var(--gold-ink);font-family:var(--mono);font-size:12px}
.tarj .tdato{font-size:12px;color:var(--muted)}
.tarj form{display:flex;gap:5px;margin-top:7px}
.tarj select{flex:1;min-width:0;padding:4px 6px;font:inherit;font-size:12px;
             background:var(--paper);color:var(--ink);border:1px solid var(--hairline-2)}
.tarj button{padding:4px 9px;font-size:11.5px}
.vaciocol{color:var(--muted);text-align:center;padding:22px 0;font-size:13px}
.tarj[draggable]{cursor:grab}
.tarj.arrastrando{opacity:.45}
.col.sobre{outline:2px dashed var(--gold);outline-offset:-4px;background:var(--warn-bg)}
.lpie .atajos{color:#8A97A2;font-size:11px;font-family:var(--mono);cursor:help}

/* Tramo de importe. XS en granate porque es una advertencia: en ese rango no
   hay juicio de valor y por tanto no hay memoria que vender. */
.chip.tr{font-family:var(--mono);font-weight:600;letter-spacing:.04em;
         min-width:34px;text-align:center}
.chip.tr-XS{background:var(--vino);color:#fff;border-color:var(--vino)}
.chip.tr-S{background:var(--surface);color:var(--muted)}
.chip.tr-M{background:var(--surface);color:var(--ink)}
.chip.tr-L{background:var(--gold-ink);color:#fff;border-color:var(--gold-ink)}
.chip.tr-XL{background:var(--ink);color:var(--gold);border-color:var(--ink)}

/* Cuándo vuelve a salir su contrato. Es lo primero que lee el closer en la
   fila, porque decide si llama hoy o agenda. */
.mom{font-weight:600;letter-spacing:.01em}
.mom-ventana{color:var(--hot)}
.mom-vencido{color:var(--warn)}
.mom-preparar{color:var(--muted);font-weight:500}
.mom-dormido{color:var(--muted);font-weight:400}
.mom-sinfecha{color:var(--muted);font-weight:400;font-style:italic}

/* --- suscriptores de alertas (clases con prefijo propio: la clase suelta
       .ok ya nos pintó una raya donde no tocaba) --- */
/* ---------------------------------------------------------------------------
   DIARIO DE ALERTAS del suscriptor: qué le hemos mandado, por días, y qué le
   va a llegar. Antes solo había un «102 alertas enviadas» que no permitía ni
   comprobar que lo que le llega le pega, ni responder a un cliente que
   pregunta por qué le mandamos algo. (25-08-2026.)
   --------------------------------------------------------------------------- */
.diario-alertas{margin-top:14px}
.dia-alertas,.bloque-prox{margin-bottom:20px}
.dia-alertas h3.sec,.bloque-prox h3.sec{display:flex;align-items:center;gap:9px;
    margin:0 0 8px;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--muted);font-weight:600;
    border-top:1px solid var(--hairline);padding-top:10px}
.dia-alertas h3.sec .cuenta{font-family:var(--mono);letter-spacing:0;
    text-transform:none;font-weight:400}
/* lo que TODAVÍA no ha salido: es lo único que aún se puede corregir */
.bloque-prox{border-left:3px solid var(--gold);background:var(--warn-bg);
             padding:2px 16px 12px;margin-bottom:24px}
.bloque-prox h3.sec{border-top:0;color:var(--gold-ink)}
.bloque-prox h3.sec .ico{color:var(--gold-ink)}
.bloque-prox > .peq{margin:0 0 10px}

/* rejilla de ÁREAS, no colocación automática: hora a la izquierda, objeto y
   procedencia en el centro, plazo y sector a la derecha */
.alerta-lic{display:grid;gap:2px 14px;padding:7px 0;
            grid-template-columns:auto minmax(0,1fr) auto;
            grid-template-areas:"izq obj der" "izq meta der";
            align-items:baseline;border-bottom:1px solid var(--hairline)}
.alerta-lic:last-child{border-bottom:0}
.al-izq{grid-area:izq;display:flex;align-items:center;gap:6px;
        font-family:var(--mono);font-size:11.5px;color:var(--muted);
        white-space:nowrap}
.al-izq:empty{display:none}
.al-obj{grid-area:obj;font-size:14px;color:var(--ink);min-width:0;
        line-height:1.4}
.al-obj a{color:var(--ink);text-decoration:none}
.al-obj a:hover{text-decoration:underline;color:var(--gold-ink)}
.al-meta{grid-area:meta;font-size:12.5px;color:var(--muted);min-width:0}
.al-der{grid-area:der;display:flex;gap:6px;align-items:center;flex-wrap:wrap;
        justify-content:flex-end;align-self:center;max-width:300px}
.alerta-lic.ida{opacity:.6}
.chip.warn-chip{border-color:var(--warn);color:var(--warn);background:var(--warn-bg)}
/* lo que exige la licitación y si el suscriptor lo cumple (16-09-2026): una
   fila entera bajo la licitación, igual que en el correo */
.al-encaje{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:3px 16px;
           font-size:12px;color:var(--muted);padding:1px 0 4px;line-height:1.4}
.al-encaje .enc b{font-weight:600;color:var(--muted);margin-right:3px}
.al-encaje .enc-ok{color:#2F6B3A}
.al-encaje .enc-ko{color:var(--gold-ink)}
.al-encaje a{color:var(--gold-ink)}
@media(max-width:820px){
  .alerta-lic{grid-template-columns:minmax(0,1fr);
              grid-template-areas:"izq" "obj" "meta" "der"}
  .al-der{justify-content:flex-start;max-width:none;margin-top:3px}
}
.sus-botones{display:flex;gap:6px;margin-left:auto}
.sus-botones button{padding:6px 12px;font-size:13px}
.sus-perfil,.sus-lectura{margin-top:26px;border-top:1px solid var(--hairline);padding-top:14px}
.sus-lectura{margin-top:18px}
.sus-perfil > summary,.sus-lectura > summary{cursor:pointer;font-size:12.5px;letter-spacing:.06em;
    text-transform:uppercase;color:var(--gold-ink);font-weight:600;
    list-style:none}
.sus-perfil > summary::-webkit-details-marker,.sus-lectura > summary::-webkit-details-marker{display:none}
.sus-perfil > summary::after,.sus-lectura > summary::after{content:" ▾"}
.sus-perfil[open] > summary::after,.sus-lectura[open] > summary::after{content:" ▴"}

.sus-alta { margin: 14px 0 18px; }
/* iba con la tinta escrita a mano: en tema oscuro salía negro sobre negro */
.sus-alta summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.sus-alta[open] summary { margin-bottom: 10px; }
.sus-secs { display: flex; flex-wrap: wrap; gap: 6px 18px; padding-top: 6px; }
.sus-sec { font-size: 13px; display: flex; align-items: center; gap: 6px; font-weight: 400; }


/* --- Historial por AÑO en la ficha del lead (24-08-2026) --------------------
   Pedido por Ignasi: «en 2023 se presentó a dos concursos en X e Y y los
   perdió; en 2024 a Z y Q y ganó uno». La fila del año no es decoración: es la
   frase que el closer lee en voz alta, y por eso va con el peso de un titular
   y las filas de debajo en susurro. */
tr.ano td {
  background: var(--tarjeta2);
  border-top: 2px solid var(--gold);
  padding-top: 12px;
}
tr.ano b { font-size: 16px; letter-spacing: -.01em; color: var(--ink); }
tr.ano .cuenta {
  margin-left: 12px; font-size: 12px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
tr.ano .frase {
  display: block; margin-top: 5px; font-size: 13.5px; line-height: 1.5;
  color: var(--muted); max-width: 78ch;
}
tr.ganada td { opacity: .78; }
tr.mas td, tr.aviso-nif td {
  font-size: 13px; color: var(--muted); font-style: italic;
}
.chip.ok { border-color: var(--ok); color: var(--ok); }

/* ===========================================================================
   LA FICHA DEL LEAD, EN PESTAÑAS  (25-08-2026)
   Prototipo panel-v2. La paleta y la tipografía NO cambian: se reutilizan los
   mismos tokens de siempre. Lo que cambia es la disposición — lo que hace
   falta al descolgar, siempre visible; el resto, detrás de una pestaña.
   =========================================================================== */

/* ===========================================================================
   LA FICHA DEL LEAD — disposición de registro, a ancho completo.

   Tres intentos hasta dar con esto, y los dos primeros fallaron por lo mismo:
   robarle sitio a la información.
     1. Cabecera FIJA con todo el trabajo dentro → 400 px de barra pegada
        arriba y las pestañas en una rendija.
     2. RAÍL lateral de 320 px → con la barra de herramientas abierta, las
        tablas del historial nacían cortadas.
     3. Esto: cabecera de registro a ancho completo (~150 px con las pestañas
        dentro), contenido a TODO el ancho, y la acción —registrar el
        resultado, que es lo que se hace AL COLGAR— en una barra abajo.
   La información nunca comparte anchura con los controles.
   =========================================================================== */
.registro-cab{position:sticky;top:var(--banda);z-index:6;background:var(--paper);
              margin:0 -24px;padding:0 24px;
              border-bottom:1px solid var(--hairline-2)}
@media(max-width:620px){.registro-cab{margin:0 -13px;padding:0 13px;position:static}}

/* El nombre NO tiene que gritar: ya sabes en qué ficha estás. Lo que importa
   es el teléfono, y va aquí mismo detrás de las etiquetas — así la cabecera
   pierde una fila entera y esa altura se la queda la tabla. (25-08-2026.) */
.rc-titulo{display:flex;align-items:center;gap:6px 11px;flex-wrap:wrap;
           padding-top:8px}
.rc-titulo h1{margin:0;font-size:19px;line-height:1.2;font-weight:400;
              letter-spacing:-.01em}
.rc-titulo h1 b{font-weight:600}
.rc-meta{font-size:12.5px;color:var(--muted);font-family:var(--mono)}
/* las acciones de gestión se anclan arriba a la derecha. Con `margin-left:auto`
   dentro del flujo se llevaban una fila entera en cuanto el nombre era largo;
   ancladas no empujan a nadie. */
.menu-acciones{position:absolute;right:24px;top:6px;z-index:8}
@media(max-width:620px){.menu-acciones{right:13px}}
.rc-titulo{padding-right:128px}
.menu-acciones > summary{cursor:pointer;list-style:none;font-size:13px;
    color:var(--ink);background:var(--surface);border:1px solid var(--hairline-2);
    padding:6px 13px;white-space:nowrap}
.menu-acciones > summary::-webkit-details-marker{display:none}
.menu-acciones > summary::after{content:" ▾";color:var(--muted)}
.menu-acciones[open] > summary{background:var(--ink);color:#fff;border-color:var(--ink)}
.menu-acciones[open] > summary::after{content:" ▴"}
.menu-cuerpo{position:absolute;right:0;top:calc(100% + 4px);z-index:20;
    background:var(--surface);border:1px solid var(--hairline-2);
    box-shadow:0 10px 30px -12px rgba(26,33,40,.45);
    padding:12px 14px;min-width:290px;display:flex;flex-direction:column;gap:9px}
.menu-cuerpo .acciones{margin:0;flex-wrap:wrap;gap:6px}
.menu-cuerpo select{flex:1;min-width:0;padding:6px 9px;font:inherit;font-size:13px;
    background:var(--paper);color:var(--ink);border:1px solid var(--hairline-2)}
.menu-cuerpo button{padding:6px 12px;font-size:13px}

/* la barra de trabajo: teléfono · gancho y plazo · producto. En horizontal,
   que es como se lee. */
/* ya sin el teléfono: solo el gancho con su plazo y qué venderle */
.ficha-trabajo{display:grid;gap:6px 22px;align-items:center;
               grid-template-columns:minmax(0,1fr) auto;
               padding:8px 0 9px;margin-top:6px;
               border-top:1px solid var(--hairline)}
@media(max-width:900px){.ficha-trabajo{grid-template-columns:1fr;gap:7px}}
.ficha-trabajo:has(.ft-gancho:empty){display:none}
/* el teléfono, en la línea del título: caja negra para que destaque, pero a
   tamaño de dato, no de titular */
.ft-tel{display:inline-flex;align-items:center;gap:5px}
.ft-tel .btel{display:flex;align-items:center;gap:7px;font-size:15px;
              padding:6px 11px;letter-spacing:.02em}
.ft-tel .btel .ico{width:15px;height:15px}
.copiar{background:var(--surface);color:var(--muted);
        border:1px solid var(--hairline-2);padding:7px 9px;line-height:0}
.copiar:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.copiar.hecho{background:var(--ok);color:#fff;border-color:var(--ok)}
.copiar .ico,.bcorreo .ico{width:14px;height:14px}
.ft-gancho{min-width:0;font-size:14.5px;color:var(--ink);line-height:1.45}
.ft-gancho .ft-g{margin-right:8px}
.ft-prod{min-width:0;text-align:right}
@media(max-width:900px){.ft-prod{text-align:left}}
.ft-p{display:inline-flex;flex-direction:column;align-items:flex-end;
      border-left:3px solid var(--gold);padding:2px 0 2px 12px;text-align:right}
@media(max-width:900px){.ft-p{align-items:flex-start;text-align:left}}
.ft-p b{font-size:14.5px;color:var(--ink);line-height:1.35}
.ft-p .precio{font-family:var(--mono);font-size:14px;color:var(--gold-ink);
              font-weight:600}
.bcorreo{display:inline-flex;align-items:center;background:var(--surface);
         color:var(--muted);border:1px solid var(--hairline-2);padding:7px 9px;
         line-height:0;text-decoration:none}
.bcorreo:hover{background:var(--gold);color:#1A2128;border-color:var(--gold)}
.btel.apagado{background:var(--surface-2);color:var(--muted);
              display:inline-flex;align-items:center;gap:7px;font-size:13px;
              padding:6px 11px}
.btel.apagado:hover{background:var(--ink);color:#fff}
/* «corregir» junto al teléfono: discreto, pero SIEMPRE presente. Hasta el
   26-08-2026 solo había camino al formulario cuando NO había número. */
.edita-tel{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
           color:var(--muted);text-decoration:none;font-family:var(--mono);
           border-bottom:1px dotted var(--hairline-2);padding-bottom:1px}
.edita-tel:hover{color:var(--ink);border-bottom-color:var(--ink)}

/* ------------------------------------------------- pestaña «Datos»
   La ficha de la sociedad. Cada campo se LEE como texto y se edita con su
   lápiz; cada uno manda su propio formulario, así que dos campos no se pisan
   y un envío a medias no borra el resto. */
.datos-ficha{margin-top:16px}
.datos-grupo{border:1px solid var(--hairline);background:var(--surface);
             margin-bottom:20px}
.dato{display:flex;align-items:baseline;gap:10px;padding:8px 12px;
      border-bottom:1px solid var(--hairline);min-height:36px}
.datos-grupo .dato:last-child{border-bottom:0}
.d-eti{flex:0 0 168px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
       color:var(--muted);font-weight:500}
.d-val{flex:1;font-size:14px;line-height:1.4;word-break:break-word}
.d-vacio{color:var(--hairline-2)}
.d-fuente{margin-left:9px;font-family:var(--mono);font-size:10.5px;
          color:var(--muted);background:var(--surface-2);padding:1px 5px}
.lapiz{flex:0 0 auto;background:transparent;border:0;padding:2px 4px;
       line-height:0;color:var(--hairline-2);cursor:pointer}
.lapiz .ico{width:14px;height:14px}
.lapiz:hover{color:var(--gold);background:transparent}
.dato .d-edita{flex:1;display:flex;align-items:center;gap:9px}
.dato .d-edita input{flex:1;min-width:120px;padding:6px 9px;font:inherit;
                     font-size:14px;border:1px solid var(--gold);
                     background:var(--paper);color:var(--ink)}
.dato .d-edita input.corto{flex:0 1 110px}
/* con JavaScript el campo nace cerrado; sin él sale editable, que es la
   degradación correcta: el dato nunca queda fuera de alcance */
body.con-tabs .dato .d-edita{display:none}
body.con-tabs .dato.abierto .d-edita{display:flex}
body.con-tabs .dato.abierto .d-val,
body.con-tabs .dato.abierto .lapiz{display:none}
/* retirar un documento: el boton vive DENTRO de su fila, sin pantalla aparte.
   Un closer solo puede pedirlo; quien retira es direccion. */
.baja-mini{display:inline-flex;gap:6px;align-items:center;margin-left:12px}
.baja-mini input{padding:4px 7px;font:inherit;font-size:12px;width:130px;
                 border:1px solid var(--hairline-2);background:var(--paper)}
.baja-mini button{padding:4px 9px;font-size:12px}
.baja-row{flex-wrap:wrap;gap:8px}
.baja-acc{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-left:auto}
.baja-acc input{padding:5px 8px;font:inherit;font-size:12.5px;min-width:150px;
                border:1px solid var(--hairline-2);background:var(--paper)}
.baja-acc button{padding:5px 11px;font-size:12.5px}

/* lo que NOSOTROS le hemos hecho a este lead, en su ficha. La lista general
   de /entregables es el archivo; esto es donde se busca dentro de un mes. */
.docs-nuestros{list-style:none;padding:0;margin:0 0 22px;
               border:1px solid var(--hairline);background:var(--surface)}
.docs-nuestros li{padding:9px 12px;border-bottom:1px solid var(--hairline);
                  font-size:14px}
.docs-nuestros li:last-child{border-bottom:0}
.docs-nuestros a{font-weight:500}

/* el nombre que trajo el acta, cuando se ha corregido: es el que cruza con
   los expedientes y tiene que quedar escrito */
.n-motor{margin:0;padding:9px 12px;border-top:1px solid var(--hairline);
         background:var(--surface-2)}
.d-notas{display:block;margin-bottom:8px}
.d-notas label{display:block;font-size:10.5px;letter-spacing:.1em;
               text-transform:uppercase;color:var(--muted);font-weight:500}
.d-notas textarea{width:100%;margin-top:7px;padding:9px 11px;font:inherit;
                  font-size:14px;line-height:1.5;border:1px solid var(--hairline-2);
                  background:var(--surface);color:var(--ink);resize:vertical}
.d-notas textarea:focus{border-color:var(--gold);outline:none}
@media(max-width:620px){
  .dato{flex-wrap:wrap}
  .d-eti{flex:0 0 100%}
}

/* ---------------------------------------------------------- barra de acción
   Registrar el resultado es lo ÚLTIMO que se hace en una llamada, no algo que
   se lea. Va abajo, fija, siempre a mano, y sin quitarle ni ancho ni alto a la
   información. Dos zonas: lo que ha pasado · qué sigue. */
.barra-accion{position:sticky;bottom:0;z-index:7;background:var(--surface);
              border-top:2px solid var(--gold);
              box-shadow:0 -8px 24px -18px rgba(26,33,40,.55);
              margin:26px -24px 0;padding:0 24px}
@media(max-width:620px){.barra-accion{margin:20px -13px 0;padding:0 13px;
                                      position:static}}
/* el tirador: pliega la barra y deja la pantalla entera para los datos */
.ba-plegar{display:flex;align-items:center;gap:8px;text-decoration:none;
           color:var(--muted);font-size:11px;letter-spacing:.12em;
           text-transform:uppercase;font-weight:600;padding:5px 0 4px;
           border-bottom:1px solid var(--hairline)}
.ba-plegar:hover{color:var(--gold-ink)}
.ba-flecha{font-size:13px;line-height:1}
.barra-accion.plegada{border-top-width:2px}
.barra-accion.plegada .ba-plegar{border-bottom:0;padding:8px 0}
.barra-accion.plegada .ba-interior{display:none}
/* flujo flexible, no rejilla rígida: con columnas fijas la segunda se salía
   de la pantalla y aparecía una barra de desplazamiento horizontal */
.ba-interior{display:flex;flex-wrap:wrap;align-items:center;
             gap:8px 16px;padding:10px 0 11px}
/* que NO crezca: si ocupa todo el ancho disponible, empuja el seguimiento a
   una segunda fila aunque quepan los dos al lado */
.barra-accion .llamada-btns{margin:0;gap:6px;align-items:center;
                            flex:0 1 auto;min-width:0}
.barra-accion .llamada-btns .et{flex-basis:auto;margin-right:2px;
                                white-space:nowrap}
.barra-accion .llamada-btns button{padding:7px 10px;font-size:13px}
.barra-accion .f-estado{gap:7px;flex:0 1 auto;min-width:0;
                        padding-left:16px;border-left:1px solid var(--hairline)}
.barra-accion .f-estado .lbl-prox{font-size:12.5px}
@media(max-width:1360px){.barra-accion .f-estado{padding-left:0;border-left:0}}
.barra-accion .f-estado .lbl-prox{white-space:nowrap}
.barra-accion .dato-malo{margin-top:0;flex-basis:100%}
.barra-accion .dato-malo summary{font-size:12px;color:var(--muted);
                                 cursor:pointer}
/* el motivo del «no»: compacto y DELANTE de los botones, que son los que
   envían. Se pone en tinta viva en cuanto se elige uno. */
select.motivo-no{padding:7px 9px;font:inherit;font-size:12.5px;max-width:180px;
                 background:var(--paper);color:var(--muted);
                 border:1px solid var(--hairline-2)}
select.motivo-no:valid{color:var(--ink);border-color:var(--gold)}
/* «no interesa» y «mal número» son cierres: se distinguen del resto */
.llamada-btns button.mal{background:transparent;color:var(--muted);
                         border:1px solid var(--hairline-2)}
.llamada-btns button.mal:hover{background:var(--hot);color:#fff;
                               border-color:var(--hot)}

/* la fila de pestañas: ENVUELVE, no se desplaza. Una barra de pestañas con
   scroll horizontal esconde la última y nadie la encuentra. */
.tabs{display:flex;gap:2px;flex-wrap:wrap;margin-top:2px}
.tabs button{background:transparent;color:var(--muted);border:0;
             border-bottom:2px solid transparent;padding:8px 12px;
             font-size:13px;white-space:nowrap;font-weight:500}
.tabs button:hover{color:var(--ink);background:var(--surface-2)}
.tabs button[aria-selected="true"]{color:var(--ink);
                                   border-bottom-color:var(--gold);
                                   background:transparent}
.tabs-cuerpo{padding-top:14px;min-height:40vh}
/* el aviso de reapertura, a ancho completo y en dos líneas en vez de ocho */
.aviso-lic{font-size:14px;padding:11px 15px;margin-top:14px}
/* SIN JavaScript se ven todas las secciones seguidas, cada una con su título:
   la ficha nunca se queda a medias. Con JS, solo la activa. */
.solo-sin-js{margin-top:26px}
body.con-tabs .solo-sin-js{display:none}
body.con-tabs .panel-tab{display:none}
body.con-tabs .panel-tab.on{display:block}
.panel-tab h3.sec{margin:22px 0 8px;font-size:11.5px;letter-spacing:.12em;
                  text-transform:uppercase;color:var(--muted);font-weight:500}
.panel-tab h3.sec:first-child{margin-top:10px}

/* la navegación de la ficha comparte fila con el estado del dato: volver y
   siguiente, mismo formato, arriba a la izquierda */
.nav-reg{font-size:13px;text-decoration:none;color:var(--gold-ink);
         white-space:nowrap}
.nav-reg:hover{text-decoration:underline}

/* documentos del expediente */
.exp-doc{background:var(--surface);border:1px solid var(--hairline);
         border-left:3px solid var(--hairline-2);padding:11px 15px;margin-bottom:8px}
.exp-doc summary{cursor:pointer;font-size:14px;color:var(--ink)}
.exp-doc[open]{border-left-color:var(--gold)}
.exp-doc > p{margin:8px 0 4px}
ul.docs{margin:6px 0 0;padding-left:20px}
ul.docs li{font-size:13.5px;margin-bottom:3px}

/* notas internas y menciones */
.f-nota textarea{width:100%;padding:9px 11px;font:inherit;font-size:14.5px;
                 background:var(--surface);color:var(--ink);
                 border:1px solid var(--hairline-2)}
.f-nota button{margin-top:8px}
.mencion{font-weight:600;color:var(--gold-ink);background:var(--warn-bg);
         padding:0 3px}
.lnav .cnt.avisa{background:var(--gold);color:#1A2128;font-weight:600}
.row.nuevo{border-left:3px solid var(--gold)}
/* el desplegable de compañeros al escribir @ */
.sugerencias{position:absolute;z-index:20;background:var(--surface);
             border:1px solid var(--hairline-2);
             box-shadow:0 6px 20px -10px rgba(26,33,40,.45);min-width:170px}
.sugerencias button{display:block;width:100%;text-align:left;
                    background:transparent;color:var(--ink);padding:7px 12px;
                    font-size:13.5px}
.sugerencias button:hover,.sugerencias button.sel{background:var(--surface-2);
                                                  color:var(--ink)}

/* correo al cliente */
.f-correo textarea{font-family:var(--sans);line-height:1.6}
.adjuntos-caja{margin-top:18px;padding:14px 16px;background:var(--surface);
               border:1px solid var(--hairline);border-left:3px solid var(--gold)}
.adjuntos-caja .ent-l{margin:0}
.adjuntos-caja input[type=file]{font:inherit;font-size:13.5px;color:var(--body);
                                padding:8px 0}
.adjuntos-caja input[type=file]::file-selector-button{font:inherit;
    font-size:13px;background:var(--ink);color:#fff;border:0;
    padding:7px 13px;margin-right:11px;cursor:pointer}
.adjuntos-caja input[type=file]::file-selector-button:hover{background:var(--gold);
    color:#1A2128}
.adjuntos-caja > .peq{margin:10px 0 0}
.pdf-listo{margin:0 0 12px;padding:9px 13px;background:var(--ok-bg);
           border-left:3px solid var(--ok);font-size:14px;color:var(--ink)}
.pdf-listo .ico{color:var(--ok);margin-right:5px}
/* presupuesto */
.incluye{margin:8px 0 0;padding-left:20px}
.incluye li{font-size:14px;margin-bottom:4px;max-width:80ch}
.ent-l[data-solo]{display:none}
.ent-l[data-solo].se-ve{display:flex}
.correos-previos{margin:8px 0 0;padding-left:18px;font-size:13.5px}
.correos-previos li{margin-bottom:3px}
.ok-linea{background:var(--ok-bg);border-left:3px solid var(--ok);
          color:var(--ink);padding:9px 13px;margin:12px 0;font-size:14px}
.ok-linea .ico{color:var(--ok);margin-right:4px}

/* deshacer: la red que permite ir rápido sin miedo */
.deshacer{background:transparent;color:var(--gold-ink);border:1px solid var(--gold);
          padding:2px 9px;font-size:11.5px;font-family:var(--mono);margin-left:8px}
.deshacer:hover{background:var(--gold);color:#1A2128}

/* franja de estado del dato: frescura y averías, en todas las páginas */
.franja-datos{display:flex;gap:8px 16px;flex-wrap:wrap;align-items:center;
              margin:14px 0 0;font-size:12.5px}
.franja-ok{color:var(--muted);font-family:var(--mono)}
/* la navegación va primero y el estado del dato después, separados */
.franja-datos .nav-reg + .franja-ok,
.franja-datos .nav-reg + .nav-reg + .franja-ok{margin-left:6px;
    padding-left:16px;border-left:1px solid var(--hairline)}
.franja-mal{color:var(--ink);background:var(--warn-bg);
            border-left:3px solid var(--warn);padding:7px 12px;font-size:13px}
.franja-mal .ico{color:var(--warn);margin-right:5px}

/* asignación en lote y avisos de la cola */
.row.con-sel{grid-template-columns:auto auto 1fr auto}
.row .sel{display:flex;align-items:center}
.row .sel input{width:15px;height:15px;accent-color:var(--gold)}
.form-lote .barra-lote{flex-wrap:wrap}
.form-lote .barra-lote select{padding:6px 10px;font:inherit;font-size:13.5px;
    background:var(--surface);color:var(--ink);border:1px solid var(--hairline-2)}
.escondidos{margin-top:8px}
.sinfecha-alta{font-style:italic}
@media(max-width:620px){.row.con-sel{grid-template-columns:auto 1fr}}

/* Aviso de nombre incompleto en la ficha: el telefono puede no ser
   de esta empresa. No usa color nuevo: oro de marca y tarjeta2. */
.aviso-nombre{display:flex;gap:.4rem;align-items:flex-start;width:100%;
  margin:.35rem 0 0;padding:.45rem .6rem;border-left:3px solid var(--oro);
  background:var(--tarjeta2);font-size:.86rem;line-height:1.35}
.aviso-nombre svg{flex:0 0 auto;margin-top:.1rem}

/* AGENDA DE DIRECCION (26-08-2026). Los hitos de la empresa que no se pueden
   olvidar; el bot de Agenda los recuerda cada manana a las 07:45. */
.ag-nueva{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:14px 0 4px;
          padding:11px 13px;border:1px solid var(--hairline);background:var(--surface)}
.ag-nueva input{padding:7px 9px;font:inherit;font-size:13.5px;
                border:1px solid var(--hairline-2);background:var(--paper)}
.ag-nueva input[name=texto]{flex:1 1 260px;min-width:180px}
.ag-nueva button{padding:7px 15px;font-size:13.5px}
.ag-acc{display:inline-flex;margin-left:7px}
.ag-acc button{padding:4px 10px;font-size:12.5px}
/* lo vencido y lo de hoy, marcado: es lo unico de la lista que pide algo al
   abrir la pagina. El resto es informacion, no tarea. */
.row.ag-urge{border-left:3px solid var(--hot)}
.row.ag-urge .nm{color:var(--hot)}
@media(max-width:620px){
  .ag-nueva{flex-direction:column;align-items:stretch}
  .ag-nueva input,.ag-nueva button{width:100%}
}

/* NOS HAN ESCRITO (26-08-2026). Quien nos busca a nosotros. Se presenta como
   una tarjeta y no como una fila de tabla a proposito: son pocos, se leen
   enteros y hay que ver el mensaje sin pinchar en nada. */
.ent{border:1px solid var(--hairline);border-left:3px solid var(--hot);
     background:var(--surface);padding:14px 16px;margin-bottom:12px}
.ent-hecho{border-left-color:var(--hairline);opacity:.72}
.ent-cab{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.ent-quien{font-weight:600;font-size:16px;color:var(--ink)}
.ent-cuando{margin-left:auto;font-family:var(--mono);font-size:11.5px;
            color:var(--muted);white-space:nowrap}
.ent-persona{margin:3px 0 0;font-size:13px;color:var(--muted)}
/* el mensaje tal cual lo escribieron: sin recortar y respetando sus saltos.
   Es la unica pista de que necesitan antes de descolgar el telefono. */
.ent-msg{margin:11px 0 12px;font-size:14.5px;line-height:1.55;
         white-space:pre-wrap;overflow-wrap:break-word}
.ent-vias{display:flex;gap:8px;flex-wrap:wrap}
.ent-vias a.tel{padding:7px 12px;font-size:14px;font-weight:600;
                border:1px solid var(--hairline-2);background:var(--paper);
                text-decoration:none;color:var(--ink)}
.ent-vias a.tel:hover{border-color:var(--gold);color:var(--gold-deep)}
.ent-llamada{font-family:var(--mono);font-size:10px;letter-spacing:.12em;
             text-transform:uppercase;color:var(--paper);background:var(--hot);
             padding:3px 8px}
.ent-acc{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.ent-acc input{flex:1 1 200px;padding:7px 10px;font:inherit;font-size:13px;
               border:1px solid var(--hairline-2);background:var(--paper)}
.ent-acc button{padding:7px 15px;font-size:13.5px}
.ent-nota{margin:10px 0 0;font-size:12.5px;color:var(--muted)}
@media(max-width:620px){
  .ent-cuando{margin-left:0;width:100%}
  .ent-vias a.tel{flex:1 1 100%;text-align:center}
}


/* ── objetivo tactil en el movil ──────────────────────────────────────────
   Medido el 31-08-2026 revisando la ficha con la que se va a llamar: el
   boton del telefono tenia 8px de relleno, unos 34px de alto. La referencia
   de accesibilidad (y de Apple) son 44px: por debajo se falla el toque, y
   fallar el toque mientras suena el telefono es peor que en cualquier otra
   pantalla. */
@media (max-width:620px){
  .btel, .llamada-btns button, .llamada-btns a, .b-llam{
    min-height:44px; display:inline-flex; align-items:center;
    justify-content:center; padding:10px 16px;
  }
  .llamada-btns{gap:8px; flex-wrap:wrap}
  .tabs button{min-height:42px}
}


/* ---------- hora del recontacto (21-09-2026) ----------
   El campo de hora va junto al de fecha, con el mismo aspecto, en la barra de
   la ficha y en la fila de «Hoy». */
.f-estado input[type=time],.acc-hoy input[type=time]{padding:7px 9px;font:inherit;
        font-size:13.5px;background:var(--surface);color:var(--ink);
        border:1px solid var(--hairline-2)}
.barra-accion .f-estado .lbl-prox{flex-wrap:nowrap}


/* ---------- agenda: hora y calendario mensual (21-09-2026) ---------- */
.ag-nueva input[type=time]{flex:0 0 auto}
.ag-hora{color:var(--gold-ink);font-weight:600;font-variant-numeric:tabular-nums}
.cal-nav{display:flex;align-items:center;gap:10px;margin:18px 0 8px}
.cal-nav h2{margin:0;font-size:17px;font-weight:600;letter-spacing:.01em;
            text-transform:capitalize;min-width:170px;text-align:center}
.cal-nav a{display:inline-block;padding:4px 11px;border:1px solid var(--hairline-2);
           background:var(--surface);color:var(--ink);text-decoration:none;
           font-size:14px;line-height:1.2}
.cal-nav a.cal-hoy{font-size:12.5px;margin-left:6px}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;
     background:var(--hairline);border:1px solid var(--hairline);margin-bottom:6px}
.cal-dn{background:var(--surface-2);font-size:11px;letter-spacing:.08em;
        text-transform:uppercase;color:var(--muted);padding:6px 4px;text-align:center}
.cal-d{background:var(--surface);min-height:92px;padding:5px 6px;font-size:12.5px;
       min-width:0}
.cal-d.finde{background:var(--tarjeta2)}
.cal-d.fuera{background:var(--paper)}
.cal-d.fuera .cal-n{opacity:.35}
.cal-n{display:inline-block;min-width:22px;height:22px;line-height:22px;
       text-align:center;font-weight:600;font-size:12.5px;margin-bottom:3px;
       font-variant-numeric:tabular-nums}
.cal-d.hoy .cal-n{background:var(--gold);color:#fff;border-radius:50%}
.cal-ev{margin:2px 0;padding:2px 5px;border-left:2px solid var(--gold);
        background:var(--surface-2);line-height:1.3;overflow:hidden;
        text-overflow:ellipsis;white-space:nowrap}
.cal-ev b{color:var(--gold-ink);font-variant-numeric:tabular-nums}
.cal-ev.urge{border-left-color:var(--hot);background:var(--hot-bg)}
.cal-ev.hecho{opacity:.5;text-decoration:line-through;border-left-color:var(--hairline-2)}
.cal-ev a{color:inherit;text-decoration:none}
.cal-ev a:hover{text-decoration:underline}
@media(max-width:760px){
  .cal-d{min-height:64px;padding:3px 4px}
  .cal-ev{white-space:normal;font-size:11px;padding:1px 4px}
  .cal-dn{font-size:10px;letter-spacing:.04em}
}