/* Hub PDC — identidad de la casa sobre layout de herramienta.
   Tokens tomados de 07-diseno/web/index.html (marca) */
:root{
  --ink:#0E0E14; --pink:#FF4D8D; --gray:#8A8A94;
  --paper:#FFFFFF; --paper-soft:#F7F7F9; --line:rgba(14,14,20,.08);
  --ok:#0CA30C; --warn:#F5B104; --err:#D63A3A;
  --grad7:linear-gradient(90deg,#FE5484,#FA7E4A,#F5B104,#96B547,#19B1B0,#338EE5,#865EF6);
  --font-display:"Bebas Neue",sans-serif;
  --font-head:"Montserrat",sans-serif;
  --font-body:"Roboto",sans-serif;
  --font-mono:"Roboto Mono",ui-monospace,monospace;
  --lat:196px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper-soft);color:var(--ink);font-family:var(--font-body);font-size:14px;line-height:1.45}

.grad-bar{height:5px;background:var(--grad7);position:sticky;top:0;z-index:50}
.app{display:flex;min-height:calc(100vh - 5px)}

/* ---------- navegación lateral ---------- */
.lateral{width:var(--lat);flex:0 0 var(--lat);background:var(--ink);color:#fff;
  display:flex;flex-direction:column;padding:22px 0 14px;position:sticky;top:5px;height:calc(100vh - 5px)}
.marca{padding:2px 20px 20px;display:block}
.marca img{width:132px;display:block;filter:invert(1)}
.nav-item{color:#c9c8cf;text-decoration:none;font-family:var(--font-head);font-weight:600;
  font-size:12.5px;letter-spacing:.04em;padding:10px 20px;border-left:3px solid transparent}
.nav-item:hover{color:#fff;background:rgba(255,255,255,.05)}
.nav-item.activo{color:#fff;border-left-color:var(--pink);background:rgba(255,77,141,.12)}
.lateral-pie{margin-top:auto;padding:14px 20px 0;font-family:var(--font-mono);font-size:10px;color:var(--gray);line-height:1.7}
.pie-liga{color:var(--gray);text-decoration:none;border-bottom:1px dotted rgba(255,255,255,.25)}
.pie-liga:hover{color:var(--pink);border-bottom-color:var(--pink)}
#modal-rep textarea{width:100%;resize:vertical;margin:0 0 8px}
#rep-aviso .aviso{margin:0 0 8px}
/* wordmark Prisma: Bebas + degradado oficial de 7 colores, solo letras */
.grad7-texto{background:var(--grad7);-webkit-background-clip:text;background-clip:text;color:transparent;width:fit-content}
h1.prisma{letter-spacing:.045em}
.prisma-marca{font-family:var(--font-display);font-size:19px;letter-spacing:.09em;padding:0 20px 14px;margin-top:-14px}
.nav-grupo{padding:14px 20px 4px;font-family:var(--font-head);font-weight:700;font-size:9.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gray)}

/* ---------- para hoy ---------- */
.hoy-lista{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.hoy-item{display:flex;gap:10px;align-items:baseline;text-decoration:none;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--pink);
  border-radius:0 8px 8px 0;padding:9px 12px;font-size:13px}
.hoy-item:hover{background:var(--paper-soft);border-left-color:var(--ink)}
.hoy-tipo{flex:0 0 auto;font-family:var(--font-head);font-weight:700;font-size:9.5px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--pink)}

/* ---------- contenido ---------- */
.contenido{flex:1;min-width:0;padding:26px 30px 60px;max-width:1180px}
h1{font-family:var(--font-display);font-size:42px;font-weight:400;letter-spacing:.01em;margin:0 0 4px}
h1 em{font-style:normal;color:var(--pink)}
h2{font-family:var(--font-head);font-weight:700;font-size:15px;margin:26px 0 10px}
.sub{color:var(--gray);margin:0 0 18px}

/* ---------- KPIs ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:16px 0 6px}
.kpi{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:14px 16px;
  min-height:92px;display:flex;flex-direction:column;justify-content:space-between}
.kpi .et{font-family:var(--font-head);font-weight:600;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gray)}
.kpi .num{font-family:var(--font-display);font-size:31px;line-height:1.15;margin-top:2px;
  font-variant-numeric:tabular-nums}
.kpi.hero{background:var(--ink);color:#fff;border-color:var(--ink)}
a.kpi{display:block;text-decoration:none;color:inherit;transition:border-color .12s,transform .12s}
a.kpi:hover{border-color:var(--pink);transform:translateY(-1px)}
a.alerta-item{display:block;text-decoration:none;color:inherit}
a.alerta-item:hover{border-color:var(--pink);border-left-color:var(--pink);background:var(--paper-soft)}
.muted a{color:inherit}
.kpi.hero .num{color:var(--pink)}
.kpi.alerta .num{color:var(--err)}
/* tarjetas de /cotizaciones: filtran la tabla, la activa se marca */
.kpis-cot{grid-template-columns:repeat(auto-fit,minmax(128px,1fr))}
.kpis-ganado{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:0}
.kpi.activo{border-color:var(--pink);box-shadow:inset 0 0 0 1px var(--pink)}
.kpi.activo .et{color:var(--pink)}

/* ---------- tablas ---------- */
.tabla-scroll{overflow-x:auto;background:var(--paper);border:1px solid var(--line);border-radius:8px}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{font-family:var(--font-head);font-weight:600;font-size:10.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--gray);text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:none}
tr.clic{cursor:pointer}
tr.clic:hover{background:var(--paper-soft)}

/* los links dentro de tablas se ven y se sienten clicleables */
td a:not(.btn){color:var(--pink);text-decoration:none;font-weight:600}
td a:not(.btn):hover{text-decoration:underline}

/* filas expandibles con desglose */
tr.exp{cursor:pointer}
tr.exp:hover{background:var(--paper-soft)}
tr.exp td:first-child::before{content:"▸ ";color:var(--gray);font-size:10px}
tr.exp.abierta td:first-child::before{content:"▾ "}
tr.det{display:none}
tr.det.vis{display:table-row}
tr.det>td{background:var(--paper-soft);padding:12px 16px}
.det-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px 20px;font-size:12.5px}
.det-g .et{font-family:var(--font-head);font-weight:700;font-size:9.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--gray);display:block}
.det-nota{grid-column:1/-1;white-space:pre-wrap;line-height:1.55}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--font-mono);font-size:12.5px}
.muted{color:var(--gray)}
.mono{font-family:var(--font-mono);font-size:12px}

/* ---------- chips de estado ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-head);
  font-weight:600;font-size:11px;white-space:nowrap}
.chip i{width:8px;height:8px;border-radius:50%;display:inline-block}

/* ---------- botones y formularios ---------- */
.btn{display:inline-block;border:none;border-radius:6px;cursor:pointer;text-decoration:none;
  font-family:var(--font-head);font-weight:700;font-size:12.5px;padding:9px 16px;letter-spacing:.02em}
.btn-pink{background:var(--pink);color:#fff}
.btn-pink:hover{filter:brightness(.94)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn-mini{padding:5px 10px;font-size:11px}
.btn[disabled]{opacity:.5;cursor:default}

.form{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:18px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 14px}
label{display:block;font-family:var(--font-head);font-weight:600;font-size:10.5px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--gray);margin:8px 0 3px}
input,select,textarea{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:6px;
  font-family:var(--font-body);font-size:13.5px;background:var(--paper)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--pink);outline-offset:0;border-color:transparent}
input[readonly]{background:var(--paper-soft);color:var(--gray)}
.check{display:flex;align-items:center;gap:7px;font-size:13px}
.check input{width:auto}

.fila-acciones{display:flex;gap:10px;margin-top:16px;align-items:center;flex-wrap:wrap}
.aviso{border-left:3px solid var(--warn);background:#fff8e6;padding:10px 12px;border-radius:0 6px 6px 0;margin:12px 0}
.aviso.err{border-color:var(--err);background:#fdeeee}
.aviso.ok{border-color:var(--ok);background:#eef9ee}

/* ---------- alertas de inicio ---------- */
.alerta-item{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--pink);
  border-radius:0 8px 8px 0;padding:10px 14px;margin-bottom:8px}
.alerta-item .cuando{font-family:var(--font-head);font-weight:700;font-size:12px}
.alerta-item .cita{color:var(--gray);font-size:12.5px;margin-top:2px}

/* ---------- chat de Azul ---------- */
.azul-grid{display:grid;grid-template-columns:290px 1fr;gap:14px;min-height:60vh}
.lista-chats{background:var(--paper);border:1px solid var(--line);border-radius:8px;overflow-y:auto;max-height:74vh}
.chat-item{padding:10px 12px;border-bottom:1px solid var(--line);cursor:pointer}
.chat-item:hover,.chat-item.activo{background:var(--paper-soft)}
.chat-item .quien{font-family:var(--font-head);font-weight:600;font-size:13px;display:flex;gap:6px;align-items:center}
.chat-item .ultimo{color:var(--gray);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-caja{background:var(--paper);border:1px solid var(--line);border-radius:8px;display:flex;flex-direction:column;max-height:74vh}
.chat-msgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px}
.burbuja{max-width:72%;padding:8px 11px;border-radius:10px;font-size:13px;white-space:pre-wrap;word-break:break-word}
.burbuja.cliente{background:var(--paper-soft);align-self:flex-start;border:1px solid var(--line)}
.burbuja.azul{background:#e8f3ff;align-self:flex-end}
.chat-envio{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line)}
.chat-envio textarea{resize:none;height:44px}
.tag{display:inline-block;font-family:var(--font-head);font-weight:700;font-size:9.5px;
  letter-spacing:.06em;padding:2px 7px;border-radius:99px;text-transform:uppercase}
.tag.pausado{background:#fdeeee;color:var(--err)}
.tag.flag{background:#fff3d6;color:#8a6d00}

/* ---------- gráfica de finanzas ---------- */
.tarjeta-chart{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:16px 18px 8px}
.chart-cab{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.leyenda{display:flex;gap:16px}
.ley{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink);font-family:var(--font-head);font-weight:600}
.ley i{width:12px;height:12px;border-radius:3px;display:inline-block}
.mes-resumen{font-size:12.5px;color:var(--gray)}
.tt{position:fixed;z-index:200;background:var(--ink);color:#fff;font-size:12px;line-height:1.5;
  padding:8px 10px;border-radius:8px;pointer-events:none;max-width:180px}
.tabla-chart{margin:8px 0 6px}
.tabla-chart summary{cursor:pointer;font-size:12px;color:var(--gray)}

/* ---------- rentabilidad y línea de tiempo ---------- */
.rent-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:12px}
.rent-kpis .et{font-family:var(--font-head);font-weight:700;font-size:10px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--gray)}
.num-r{font-family:var(--font-display);font-size:26px;margin-top:2px}
.linea-tiempo{border-left:2px solid var(--line);margin:6px 0 18px 6px;padding-left:0}
.lt-evento{display:flex;gap:12px;padding:7px 0 7px 14px;position:relative}
.lt-evento::before{content:"";position:absolute;left:-5px;top:14px;width:8px;height:8px;
  border-radius:50%;background:var(--gray)}
.lt-evento.version::before{background:var(--pink)}
.lt-fecha{flex:0 0 62px;font-size:11px;color:var(--gray);padding-top:2px}
.lt-texto{font-size:12.5px;line-height:1.5;max-width:860px}
.lt-version{font-weight:700;font-family:var(--font-head);font-size:12px}

/* ---------- pipeline y top clientes ---------- */
.dos-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px;margin:16px 0}
.pipe-barra{display:flex;height:26px;border-radius:6px;overflow:hidden;gap:2px;background:var(--paper-soft)}
.pipe-seg{min-width:3px}
.pipe-leyenda{display:flex;flex-direction:column;gap:7px;margin-top:12px}
.pipe-item{display:flex;align-items:center;gap:8px;font-size:12.5px}
.pipe-item i{width:11px;height:11px;border-radius:3px;flex:0 0 auto}
.pipe-item b{margin-left:auto;font-family:var(--font-mono);font-size:12px}
.top-fila{display:grid;grid-template-columns:150px 1fr 90px;gap:10px;align-items:center;margin:7px 0;
  text-decoration:none;color:var(--ink);border-radius:6px;padding:2px 4px}
a.top-fila:hover{background:var(--paper-soft)}
a.pipe-item{text-decoration:none;color:var(--ink);border-radius:6px;padding:3px 6px}
a.pipe-item:hover{background:var(--paper-soft)}
.dona-caja{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.dona{width:132px;height:132px;border-radius:50%;flex:0 0 auto;position:relative}
.dona::after{content:"";position:absolute;inset:26%;border-radius:50%;background:var(--paper)}
.dona-leyenda{display:flex;flex-direction:column;gap:7px;flex:1;min-width:200px}
.top-nombre{font-size:12px;font-weight:600;font-family:var(--font-head);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-pista{background:var(--paper-soft);border-radius:4px;height:14px}
.top-barra{background:var(--pink);height:100%;border-radius:4px;min-width:3px;
  transform-origin:left;animation:barra-crece .55s cubic-bezier(.2,.7,.3,1)}
.pipe-seg{transform-origin:left;animation:barra-crece .55s cubic-bezier(.2,.7,.3,1)}
@keyframes barra-crece{from{transform:scaleX(0)}}
.punto{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:7px;vertical-align:baseline}
.top-monto{font-family:var(--font-mono);font-size:11.5px;text-align:right}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;background:rgba(14,14,20,.55);display:flex;align-items:center;
  justify-content:center;z-index:100}
.modal.oculto{display:none}
.modal-caja{background:var(--paper);border-radius:10px;padding:22px;max-width:440px;width:92%}
.modal-caja h3{font-family:var(--font-head);margin:0 0 8px}
#modal-texto{white-space:pre-line}
.modal-botones{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}

/* ---------- preview de PDF ---------- */
.pdf-marco{width:100%;height:72vh;border:1px solid var(--line);border-radius:8px;background:#fff}

/* partidas dinámicas del cotizador */
.partida{border:1px dashed var(--line);border-radius:8px;padding:10px 12px;margin:8px 0;background:var(--paper-soft)}
.seccion-bloque{border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin:12px 0;background:var(--paper)}
.quitar{float:right;color:var(--err);background:none;border:none;cursor:pointer;font-size:12px}

/* ---------- celular ----------
   En pantalla chica el sidebar estorba: se esconde y manda la barra de abajo.
   Iris es el botón de en medio porque es lo que más se usa fuera del escritorio.
   Todo lo demás vive en la hoja de "Más". */
.tabs,.hoja{display:none}
.grad7-fondo{background:var(--grad7)}

@media (max-width:900px){
  .lateral{display:none}
  .app{display:block}
  .contenido{padding:16px 14px calc(78px + env(safe-area-inset-bottom));max-width:none}
  h1{font-size:34px}
  .sub{font-size:12.5px}

  /* Barra alta y con ícono: el pulgar necesita blanco donde caer, no una
     tira de texto. Alto útil ~62px, más lo que pida el iPhone abajo. */
  .tabs{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:90;
    background:var(--ink);border-top:1px solid rgba(255,255,255,.08);
    padding-bottom:env(safe-area-inset-bottom)}
  .tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;
    padding:11px 2px 12px;font-family:var(--font-head);font-weight:600;
    font-size:11px;letter-spacing:.03em;text-transform:uppercase;
    color:var(--gray);text-decoration:none;-webkit-tap-highlight-color:transparent}
  .tab svg{width:20px;height:20px;display:block}
  .tab:active{background:rgba(255,255,255,.06)}
  .tab.activo{color:#fff}
  .tab.activo:not(.tab-iris){box-shadow:inset 0 2px 0 var(--pink)}
  /* el botón sobresale, la etiqueta se queda alineada con las demás */
  .tab-iris{position:relative}
  .tab-iris-btn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
    font-family:var(--font-display);font-size:22px;line-height:1;color:#fff;
    border:3px solid var(--ink);box-shadow:0 3px 12px rgba(0,0,0,.4);
    margin:-19px 0 -4px}

  .hoja{display:block;position:fixed;inset:0;z-index:95;background:rgba(14,14,20,.5)}
  .hoja.oculto{display:none}
  .hoja-caja{position:absolute;left:0;right:0;bottom:0;background:var(--ink);
    border-radius:14px 14px 0 0;padding:14px 16px calc(16px + env(safe-area-inset-bottom));
    max-height:82vh;overflow-y:auto}
  .hoja-cab{display:flex;justify-content:space-between;align-items:center;
    color:#fff;font-family:var(--font-head);margin-bottom:6px}
  .hoja-cab .btn{color:#fff;border-color:rgba(255,255,255,.25)}
  .hoja-item{display:block;padding:11px 2px;color:rgba(255,255,255,.82);
    text-decoration:none;border-bottom:1px solid rgba(255,255,255,.07)}
  .hoja-item.activo{color:var(--pink);font-weight:600}
  .hoja-pie{margin-top:12px;font-family:var(--font-mono);font-size:10px;color:var(--gray)}

  .kpis,.kpis-cot{grid-template-columns:1fr 1fr}
  .kpis-ganado{grid-template-columns:1fr}
  .azul-grid,.grid2,.grid3,.dos-col{grid-template-columns:1fr}
  .fila-acciones{flex-direction:column;align-items:stretch}
  .fila-acciones .btn,.fila-acciones form{width:100%;max-width:none}
  .fila-acciones form{flex-wrap:wrap}
  .iris-caja{height:calc(100dvh - 250px);min-height:340px}
  /* el campo a lo ancho arriba, los botones abajo: en el pulgar se escribe mejor */
  .chat-envio{flex-wrap:wrap}
  .chat-envio textarea{flex:1 0 100%;height:56px}
  .chat-envio .btn{flex:1}
  .burbuja{max-width:88%}
  .modal-caja{width:100%;max-width:none;border-radius:14px 14px 0 0;
    position:fixed;left:0;right:0;bottom:0}
  table{font-size:12.5px}
}

/* ---------- Iris ---------- */
.iris-caja{max-height:none;height:calc(100vh - 260px);min-height:420px}
.iris-vacio{margin:auto;text-align:center;max-width:560px}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:10px}
.chip-ej{font:inherit;font-size:12.5px;color:var(--ink);background:var(--paper-soft);
  border:1px solid var(--line);border-radius:999px;padding:7px 13px;cursor:pointer}
.chip-ej:hover{border-color:var(--pink);color:var(--pink)}
.burbuja.yo{background:var(--ink);color:#fff;align-self:flex-end}
.burbuja.iris{background:var(--paper-soft);align-self:flex-start;
  border:1px solid var(--line);max-width:88%;line-height:1.55}
.burbuja.iris a{color:var(--pink);font-weight:600}
.burbuja.iris b{font-family:var(--font-head);font-weight:700}
.burbuja.iris.pensando{color:var(--gray);font-style:italic}
.burbuja.iris.err{background:#fdf0f0;border-color:var(--err);color:var(--err)}
.iris-li{padding-left:14px;position:relative;margin:3px 0}
.iris-li:before{content:"·";position:absolute;left:4px;color:var(--pink);font-weight:700}
.burbuja .pie{margin-top:7px;padding-top:6px;border-top:1px solid var(--line);
  font-family:var(--font-mono);font-size:10px;color:var(--gray)}

/* ---------- invitación a instalar ---------- */
.instalar{position:fixed;left:10px;right:10px;bottom:calc(84px + env(safe-area-inset-bottom));
  z-index:96;background:var(--ink);color:#fff;border-radius:14px;padding:14px 16px 16px;
  box-shadow:0 8px 30px rgba(0,0,0,.45)}
.instalar.oculto{display:none}
.instalar-cab{display:flex;gap:11px;align-items:center}
.instalar-cab .muted{font-size:12px;color:var(--gray);margin-top:2px}
.instalar-ico{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;
  flex:0 0 auto;font-family:var(--font-display);font-size:22px;color:#fff}
.instalar-x{margin-left:auto;background:none;border:0;color:var(--gray);font-size:26px;
  line-height:1;cursor:pointer;padding:0 2px}
.instalar-pasos{margin:11px 0 12px;padding-left:20px;font-size:13px;line-height:1.75;
  color:rgba(255,255,255,.85)}
.instalar .btn{width:100%;color:#fff;border-color:rgba(255,255,255,.25)}

/* ---------- pantalla de entrada ---------- */
.pantalla-login{display:grid;place-items:center;min-height:100vh;background:var(--ink)}
.login-caja{background:var(--paper);border-radius:14px;padding:30px 28px;width:min(340px,90vw);
  display:flex;flex-direction:column;gap:11px;box-shadow:0 10px 40px rgba(0,0,0,.4)}
.login-marca{font-family:var(--font-display);font-size:48px;line-height:.9;letter-spacing:.02em}
.login-caja .muted{margin:-6px 0 6px;font-size:12.5px}
.login-caja input{width:100%}

/* ---------- vista de la cotización ---------- */
.hoja-pdf{display:block;margin:10px 0 4px;max-width:420px;text-decoration:none;
  border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--paper);
  transition:border-color .12s,transform .12s}
.hoja-pdf:hover{border-color:var(--pink);transform:translateY(-1px)}
.hoja-pdf img{display:block;width:100%;height:auto}
.hoja-pdf-pie{display:block;padding:7px 10px;font-family:var(--font-mono);
  font-size:10.5px;color:var(--gray);border-top:1px solid var(--line)}
.tiene-pdf{color:var(--gray);font-size:11px}
.falta-pdf{color:var(--warn);font-size:11px}

/* ---------- datos de quien pagó ---------- */
.pago-caja{background:var(--paper);border:1px solid var(--line);border-radius:8px;
  padding:12px 14px;margin-bottom:10px}
.pago-cab{display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:9px;padding-bottom:7px;border-bottom:1px solid var(--line)}
.pago-cab .num{font-family:var(--font-display);font-size:20px;color:var(--ok)}
.pago-datos{display:grid;grid-template-columns:1fr 1fr;gap:7px 16px;margin-bottom:10px}
.pago-datos .ancho{grid-column:1/-1}
.pago-datos span{display:block;font-family:var(--font-mono);font-size:9.5px;
  text-transform:uppercase;letter-spacing:.05em;color:var(--gray)}
.apagadas{margin:8px 0 4px}
.apagadas summary{cursor:pointer;font-family:var(--font-mono);font-size:11px;
  color:var(--gray);padding:5px 0}
.apagadas summary:hover{color:var(--pink)}
.apagadas table{font-size:12.5px;color:var(--gray)}

/* ---------- lo que Iris deja listo para confirmar ---------- */
.propuesta{align-self:flex-start;max-width:88%;background:#fff8e6;
  border:1px solid var(--warn);border-left-width:3px;border-radius:10px;
  padding:11px 13px;margin:2px 0}
.propuesta.prop-lista{background:#f0faf0;border-color:var(--ok)}
.propuesta.prop-descartada{background:var(--paper-soft);border-color:var(--line);
  opacity:.65}
.prop-que{font-size:13px;line-height:1.5;white-space:pre-wrap;margin-bottom:9px}
.prop-botones{display:flex;gap:7px;align-items:center}
.prop-hecho{color:var(--ok);font-weight:600;font-size:12.5px}
.prop-error{color:var(--err);font-size:12.5px}

/* ---------- deslizar para actualizar ---------- */
.recargar{position:fixed;top:0;left:0;right:0;z-index:120;display:flex;
  align-items:center;justify-content:center;gap:9px;height:46px;
  margin-top:-46px;background:var(--ink);color:#fff;opacity:0;
  font-family:var(--font-head);font-weight:600;font-size:11.5px;
  letter-spacing:.04em;text-transform:uppercase;
  transition:transform .18s ease-out,opacity .18s ease-out}
.recargar-marca{width:15px;height:15px;border-radius:50%}
.recargar.listo .recargar-marca{transform:scale(1.25)}
.recargar.recargando .recargar-marca{animation:girar .7s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .recargar{transition:none}
  .recargar.recargando .recargar-marca{animation:none}
}
/* el pendiente de cobrar destaca: hay dinero esperando */
.hoy-item .hoy-tipo{white-space:nowrap}
.hoy-lista a[data-tipo="Cobrar"]{border-left-color:var(--ok)}
.hoy-lista a[data-tipo="Cobrar"] .hoy-tipo{color:var(--ok)}

/* ---------- pendientes que se pueden cerrar ---------- */
.hoy-fila{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.hoy-fila .hoy-item{flex:1;min-width:0}
.hoy-acciones{display:flex;gap:6px;flex-shrink:0}
.hoy-fila.hoy-hecho .hoy-item{opacity:.45;text-decoration:line-through}
@media (max-width:900px){
  .hoy-fila{flex-direction:column;align-items:stretch;gap:0}
  .hoy-acciones{padding:0 0 8px 14px}
  .hoy-acciones .btn{flex:1}
}

/* ---------- pendientes agrupados ---------- */
.hoy-bloque{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.09em;color:var(--gray);margin:14px 0 5px;padding-left:2px}
.hoy-bloque:first-child{margin-top:2px}
/* cada tipo con su color: se distingue de un vistazo qué clase de pendiente es */
.hoy-lista a[data-tipo="Cobrar"]{border-left-color:var(--ok)}
.hoy-lista a[data-tipo="Cobrar"] .hoy-tipo{color:var(--ok)}
.hoy-lista a[data-tipo="Por cobrar"]{border-left-color:#19B1B0}
.hoy-lista a[data-tipo="Por cobrar"] .hoy-tipo{color:#19B1B0}
.hoy-lista a[data-tipo="Pagar"]{border-left-color:var(--err)}
.hoy-lista a[data-tipo="Pagar"] .hoy-tipo{color:var(--err)}
.hoy-lista a[data-tipo="Evento"]{border-left-color:var(--warn)}
.hoy-lista a[data-tipo="Evento"] .hoy-tipo{color:var(--warn)}
.hoy-lista a[data-tipo="Facturar"]{border-left-color:#865EF6}
.hoy-lista a[data-tipo="Facturar"] .hoy-tipo{color:#865EF6}
/* captura corta dentro del pendiente */
.hoy-form{flex-basis:100%;display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;
  background:var(--paper-soft);border:1px solid var(--line);border-radius:8px;
  padding:10px 12px;margin-top:2px}
.hoy-form label{display:flex;flex-direction:column;gap:3px;font-family:var(--font-mono);
  font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--gray)}
.hoy-form input,.hoy-form select{width:auto;min-width:120px;font-size:13px}
.atajos{display:flex;gap:5px;margin-top:4px}
.atajo{font:inherit;font-family:var(--font-mono);font-size:10.5px;
  text-transform:none;letter-spacing:0;color:var(--gray);background:none;
  border:1px solid var(--line);border-radius:999px;padding:2px 8px;cursor:pointer}
.atajo:hover{border-color:var(--pink);color:var(--pink)}
.suelta-caja{flex:1;min-width:250px;display:flex;flex-direction:column;gap:3px}
.suelta-etiqueta{font-family:var(--font-mono);font-size:9.5px;
  text-transform:uppercase;letter-spacing:.05em;color:var(--gray)}
.suelta{display:block;position:relative;padding:7px 10px;
  border:1.5px dashed rgba(14,14,20,.22);border-radius:7px;
  background:var(--paper-soft);transition:border-color .12s,color .12s;
  font-family:var(--font-body);font-size:12.5px;color:var(--gray)}
/* El campo cubre la zona entera y es invisible: así el dedo toca el campo
   nativo y no hay que provocarle un click, que es lo que en el iPhone abría
   el selector sin llegar a entregar nunca el archivo. */
.suelta input[type=file]{position:absolute;inset:0;width:100%;height:100%;
  opacity:0;cursor:pointer;font-size:0}
.suelta-texto{display:block;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;pointer-events:none}
.suelta:hover,.suelta:focus-within{border-color:var(--pink);color:var(--ink)}
.suelta.encima{border-color:var(--pink);border-style:solid;color:var(--ink)}
.suelta.subiendo{border-style:solid;color:var(--ink)}
.suelta.puesto{border-style:solid;border-color:var(--ok);color:var(--ink)}
.suelta.mal{border-color:var(--err);color:var(--err)}
/* encabezado de un formulario dentro de una tarjeta */
.titulo-form{font-family:var(--font-head);font-size:12.5px;font-weight:700;
  margin:14px 0 2px;padding-top:12px;border-top:1px solid var(--line)}

/* ---------- iPhone: que escribir no agrande la pantalla ---------- */
/* Safari hace zoom a la página en cuanto enfocas un campo con letra menor a
   16px, y ya no la regresa: los iconos se quedan grandes y la pantalla se
   recorre de lado. Con 16px no hace nada. Va al final del archivo a propósito,
   porque .hoy-form input y compañía se definen más arriba y con la misma
   especificidad gana la última. No se usa maximum-scale para arreglarlo:
   eso le quitaría al usuario el zoom con los dedos. */
@media (max-width:900px){
  input,select,textarea,
  .hoy-form input,.hoy-form select,
  .chat-envio textarea{font-size:16px}
  .suelta,.suelta-texto{font-size:15px}
}

/* ---------- campos de un formulario en fila ---------- */
.campo-corto{width:120px}
.campo-medio{width:150px}
.campo-ancho{flex:1;min-width:190px}
.campo-doble{flex:2;min-width:220px}
/* En el celular la fila se vuelve columna, y con anchos fijos los campos
   cortos quedaban recargados a la izquierda, como renglones a medias. Aquí
   todos ocupan el ancho, que además es lo que agradece el pulgar. */
@media (max-width:900px){
  .fila-acciones .campo{width:100%;min-width:0;flex:1 1 100%}
}

/* ---------- adjuntos en el chat de Iris ---------- */
.clip{position:relative;display:inline-flex;align-items:center;
  padding:0 12px;border:1px solid var(--line);border-radius:6px;
  font-family:var(--font-head);font-weight:600;font-size:12.5px;
  color:var(--ink);background:var(--paper);cursor:pointer;white-space:nowrap}
/* el campo cubre el botón, invisible: el dedo toca el campo nativo */
.clip input[type=file]{position:absolute;inset:0;width:100%;height:100%;
  opacity:0;cursor:pointer;font-size:0}
.clip:focus-within,.clip:hover{border-color:var(--pink)}
.adjuntos{display:flex;flex-wrap:wrap;gap:6px;padding:8px 10px 0}
.adj{display:inline-flex;align-items:center;gap:6px;padding:4px 6px 4px 10px;
  border-radius:999px;background:var(--paper-soft);border:1px solid var(--line);
  font-size:12px;color:var(--ink);max-width:100%}
.adj.mal{border-color:var(--err);color:var(--err)}
.adj button{font:inherit;border:0;background:none;cursor:pointer;
  color:var(--gray);font-size:15px;line-height:1;padding:0 4px}
.adj-en-burbuja{margin-top:6px;font-family:var(--font-mono);font-size:11px;
  opacity:.75}
@media (max-width:900px){
  .chat-envio .clip{flex:1;justify-content:center;min-height:44px}
}

/* ---------- lo que se cotizó, antes del precio ---------- */
.cotizado{margin-top:14px;padding:12px 14px;border:1px solid var(--line);
  border-left:3px solid var(--pink);border-radius:0 8px 8px 0;background:var(--paper)}
.cotizado-cab{font-family:var(--font-head);font-weight:700;font-size:13px;margin-bottom:8px}
.cotizado-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;font-size:13px;line-height:1.5}
.cotizado .et{font-family:var(--font-head);font-weight:600;font-size:10.5px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--gray);margin-bottom:3px}
.cotizado-total{margin-top:6px;padding-top:6px;border-top:1px solid var(--line)}
@media (max-width:900px){.cotizado-grid{grid-template-columns:1fr}}