/* =========================================================
   PROSPECTOS (/panel/prospectos) — el embudo de ventas
   Todo con prefijo pp-. Colores, radios y sombras de styles.css y las piezas
   de panel.css (pn-pill, pn-chips, pn-caja, pn-tabla…): esta pantalla es una
   más del panel, no una aplicación aparte.
   ========================================================= */

/* ---------- Un color por etapa ----------
   El mismo en el contador, la columna, la etiqueta, el menú y el historial:
   así «naranja = negociación» se aprende una vez y sirve en toda la pantalla.
   Van de frío (recién llegado) a caliente (negociando); vendido en verde y
   perdido en gris, que es salirse del camino y no un paso más. */
.pp-e-nuevo { --c: #6366f1; }
.pp-e-contactado { --c: #0ea5e9; }
.pp-e-interesado { --c: #8b5cf6; }
.pp-e-prueba_manejo { --c: #f59e0b; }
.pp-e-negociacion { --c: #ff6a13; }
.pp-e-vendido { --c: #16a34a; }
.pp-e-perdido { --c: #94a3b8; }
.pp-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--muted)); flex: none; }

/* La etiqueta de etapa: el tinte de su color de fondo y el texto oscurecido.
   Con color-mix; donde no lo hay, queda gris con el punto de color, que se
   sigue leyendo. */
.pp-etapa { display: inline-flex; align-items: center; gap: .35rem; border-radius: 999px; padding: .14rem .6rem .14rem .5rem; font-size: .74rem; font-weight: 700; white-space: nowrap; background: var(--bg); color: var(--ink); }
.pp-etapa { background: color-mix(in srgb, var(--c) 13%, #fff); color: color-mix(in srgb, var(--c) 62%, #0f172a); }
.pp-etapa::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: none; }

/* Mientras llega la respuesta de un filtro, lo de antes se queda a la vista y
   atenuado: borrarlo para enseñar tres puntos hace parpadear la pantalla en
   cada clic. */
.pp { transition: opacity .15s; }
.pp.pp-cargando { opacity: .55; pointer-events: none; }

/* ---------- Contadores ---------- */
.pp-resumen { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1.1fr); gap: .75rem; margin-bottom: 1rem; }
@media (max-width: 1150px) { .pp-resumen { grid-template-columns: minmax(0, 1fr); } }

.pp-cifras { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.pp-cifra { position: relative; display: flex; flex-direction: column; gap: .15rem; padding: .8rem .8rem .7rem; min-width: 0; }
.pp-cifra + .pp-cifra { border-left: 1px solid var(--line); }
.pp-cifra::before { content: ''; position: absolute; left: .8rem; right: .8rem; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--c); }
.pp-cifra b { font-size: 1.45rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pp-cifra span { font-size: .76rem; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pp-alertas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.pp-alerta { display: flex; flex-direction: column; gap: .25rem; min-width: 0; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: .65rem .75rem; font: inherit; color: var(--ink); }
button.pp-alerta { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
button.pp-alerta:hover { border-color: #cbd5e1; box-shadow: var(--shadow); }
.pp-alerta.on { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.pp-alerta-top { display: flex; align-items: center; gap: .45rem; }
.pp-alerta-top svg { width: 17px; height: 17px; color: var(--muted); }
.pp-alerta-top b { font-size: 1.3rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pp-alerta-eti { display: flex; flex-direction: column; font-size: .76rem; font-weight: 600; color: var(--muted); line-height: 1.25; }
.pp-alerta-eti small { font-weight: 500; font-size: .72rem; opacity: .85; }
.pp-alerta.pp-tono-warn { background: #fffbeb; border-color: #fde68a; }
.pp-alerta.pp-tono-warn .pp-alerta-top b, .pp-alerta.pp-tono-warn .pp-alerta-top svg { color: #b45309; }
.pp-alerta.pp-tono-info .pp-alerta-top b, .pp-alerta.pp-tono-info .pp-alerta-top svg { color: #4f46e5; }
.pp-alerta.pp-tono-ok .pp-alerta-top svg { color: var(--ok); }
.pp-alerta.pp-tono-warn.on { border-color: #b45309; box-shadow: inset 0 0 0 1px #b45309; }

@media (max-width: 560px) {
  .pp-cifras { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pp-cifra:nth-child(4) { border-left: 0; }
  .pp-cifra:nth-child(n + 4) { border-top: 1px solid var(--line); }
  .pp-cifra { padding: .7rem .65rem .6rem; }
  .pp-cifra::before { left: .65rem; right: .65rem; }
  .pp-cifra b { font-size: 1.2rem; }
  .pp-alertas { gap: .4rem; }
  .pp-alerta { padding: .55rem .6rem; }
  .pp-alerta-top b { font-size: 1.1rem; }
}

/* ---------- La barra ----------
   Arriba, los filtros a la izquierda y la vista a la derecha; debajo, el
   vendedor y los archivados. En el teléfono la vista va primero y a lo ancho
   —es lo primero que se cambia—, y los filtros en una sola fila que se
   desliza: partidos en tres líneas ocupaban media pantalla antes de ver un
   solo cliente. */
.pp-barra { display: flex; flex-direction: column; gap: .55rem; margin-bottom: .9rem; }
.pp-barra-fila { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; min-width: 0; }
.pp-barra-extra { justify-content: flex-start; gap: .5rem; }
.pp-filtros { max-width: 100%; }
.pp-vistas { display: inline-flex; gap: .15rem; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: .2rem; }
.pp-vistas button { border: 0; background: transparent; border-radius: 9px; padding: .38rem .7rem; font: inherit; font-weight: 600; font-size: .85rem; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; gap: .4rem; cursor: pointer; white-space: nowrap; }
.pp-vistas button svg { width: 16px; height: 16px; }
.pp-vistas button:hover { color: var(--ink); }
.pp-vistas button.on { background: var(--accent-soft); color: var(--accent-dark); }

.pp-select { position: relative; display: inline-flex; align-items: center; }
.pp-select > svg { position: absolute; left: .7rem; width: 15px; height: 15px; color: var(--muted); pointer-events: none; }
.pp-select select {
  appearance: none; -webkit-appearance: none; max-width: 220px; border: 1px solid var(--line); border-radius: 999px;
  padding: .42rem 2rem .42rem 2rem; font: inherit; font-weight: 600; font-size: .85rem; color: var(--ink); cursor: pointer;
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .7rem center;
  text-overflow: ellipsis;
}
.pp-select select:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 106, 19, .15); }

.pp-toggle { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: .42rem .8rem; font: inherit; font-weight: 600; font-size: .85rem; color: var(--muted); cursor: pointer; white-space: nowrap; }
.pp-toggle svg { width: 15px; height: 15px; }
.pp-toggle:hover { color: var(--ink); border-color: #cbd5e1; }
.pp-toggle.on { background: var(--navy); border-color: var(--navy); color: #fff; }

@media (max-width: 700px) {
  .pp-barra { gap: .5rem; }
  .pp-barra-fila { flex-direction: column; align-items: stretch; gap: .5rem; }
  .pp-barra-extra { flex-direction: row; flex-wrap: nowrap; }
  .pp-vistas { order: -1; display: flex; }
  .pp-vistas button { flex: 1; }
  .pp-filtros { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .pp-filtros::-webkit-scrollbar { display: none; }
  .pp-filtros .pn-chip { flex: none; }
  .pp-select { flex: 1; min-width: 0; }
  .pp-select select { max-width: none; width: 100%; }
}

.pp-aviso-btn { margin-left: auto; border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; white-space: nowrap; }
.pn-aviso > span { min-width: 0; }

/* ---------- Tablero ---------- */
.pp-tablero-cab { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .55rem; min-height: 32px; }
.pp-pista-toque { display: none; }
.pp-flechas { display: flex; gap: .3rem; flex: none; }
.pp-flechas button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.pp-flechas button svg { width: 17px; height: 17px; }
.pp-flechas button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-dark); }
.pp-flechas button:disabled { opacity: .35; cursor: default; }
@media (pointer: coarse) {
  .pp-pista-raton, .pp-flechas { display: none; }
  .pp-pista-toque { display: block; }
}

/* Los bordes que se difuminan dicen «hay más por este lado». */
.pp-marco { position: relative; }
.pp-marco::before, .pp-marco::after { content: ''; position: absolute; top: 0; bottom: .75rem; width: 26px; pointer-events: none; opacity: 0; transition: opacity .2s; z-index: 2; }
.pp-marco::before { left: 0; background: linear-gradient(90deg, var(--bg), rgba(244, 246, 251, 0)); }
.pp-marco::after { right: 0; background: linear-gradient(270deg, var(--bg), rgba(244, 246, 251, 0)); }
.pp-marco.pp-hay-izq::before, .pp-marco.pp-hay-der::after { opacity: 1; }

/* Las columnas se desplazan DENTRO del tablero: la página nunca se sale de
   ancho, ni en el teléfono. */
/* Todas las columnas tan altas como la más larga: se puede soltar una tarjeta
   en cualquier punto de la columna, no solo encima de la última tarjeta. */
.pp-tablero { display: grid; grid-auto-flow: column; grid-auto-columns: 268px; gap: .7rem; overflow-x: auto; padding-bottom: .75rem; align-items: stretch; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
.pp-col { background: #e9edf4; border-radius: 14px; padding: .55rem; min-height: 190px; display: flex; flex-direction: column; scroll-snap-align: start; transition: background .15s, box-shadow .15s; }
.pp-col-cab { display: flex; align-items: center; gap: .45rem; padding: .2rem .35rem .55rem; margin-bottom: .55rem; border-bottom: 2px solid var(--c); }
.pp-col-cab h3 { flex: 1; min-width: 0; font-size: .86rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-col-cab b { font-size: .74rem; font-weight: 700; background: var(--card); color: var(--muted); border-radius: 999px; padding: .05rem .5rem; font-variant-numeric: tabular-nums; }
.pp-col-lista { display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.pp-col-vacia { border: 1.5px dashed #cfd6e2; border-radius: 12px; padding: 1.1rem .6rem; text-align: center; color: var(--muted); font-size: .8rem; }
.pp-col.pp-sobre { background: #e2e8f0; background: color-mix(in srgb, var(--c) 14%, #e9edf4); box-shadow: inset 0 0 0 2px var(--c); }
.pp-en-arrastre .pp-col-vacia { border-color: #94a3b8; }
.pp-ver-mas { border: 0; background: transparent; border-radius: 10px; padding: .45rem; font: inherit; font-weight: 600; font-size: .8rem; color: var(--muted); cursor: pointer; }
.pp-ver-mas:hover { background: var(--card); color: var(--ink); }

@media (max-width: 700px) {
  .pp-tablero { grid-auto-columns: min(80vw, 290px); scroll-snap-type: x mandatory; gap: .55rem; }
}

/* ---------- Tarjeta ---------- */
.pp-tarjeta { position: relative; display: flex; flex-direction: column; gap: .4rem; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: .65rem .7rem .55rem; cursor: pointer; box-shadow: 0 1px 2px rgba(15, 23, 42, .05); transition: border-color .15s, box-shadow .15s, opacity .15s; }
.pp-tarjeta:hover { border-color: #cbd5e1; box-shadow: 0 8px 18px -12px rgba(15, 23, 42, .4); }
.pp-tarjeta[draggable="true"] { cursor: grab; }
.pp-tarjeta[draggable="true"]:active { cursor: grabbing; }
.pp-tarjeta.pp-arrastrando { opacity: .4; }
/* Quien lleva horas esperando se ve de lejos: una franja a la izquierda,
   ámbar pasadas las horas de gracia y roja pasado un día. La misma franja que
   las cifras de Inicio (.pn-kpi), para que signifique lo mismo en todo el panel. */
.pp-tarjeta.pp-urge::before, .pp-tarjeta.pp-urge-mal::before { content: ''; position: absolute; left: -1px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: #f59e0b; }
.pp-tarjeta.pp-urge-mal::before { background: var(--danger); }
.pp-tarjeta.pp-recien { animation: ppRecien .9s ease-out; }
@keyframes ppRecien { from { box-shadow: 0 0 0 3px rgba(255, 106, 19, .45); } to { box-shadow: 0 0 0 3px rgba(255, 106, 19, 0); } }

.pp-t-cab { display: flex; align-items: flex-start; gap: .3rem; }
.pp-t-nombre { flex: 1; min-width: 0; border: 0; background: none; padding: 0; font: inherit; font-weight: 700; font-size: .92rem; line-height: 1.3; color: var(--ink); text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-t-nombre:hover { color: var(--accent-dark); }
.pp-t-mover { flex: none; width: 28px; height: 28px; margin: -.25rem -.35rem 0 0; border: 0; background: transparent; border-radius: 8px; display: grid; place-items: center; color: var(--muted); cursor: pointer; }
.pp-t-mover svg { width: 17px; height: 17px; }
.pp-t-mover:hover, .pp-t-mover[aria-expanded="true"] { background: var(--bg); color: var(--ink); }
.pp-t-carro { display: flex; align-items: center; gap: .35rem; min-width: 0; font-size: .82rem; color: var(--muted); }
.pp-t-carro svg { width: 15px; height: 15px; }
.pp-t-carro span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-t-pills { display: flex; flex-wrap: wrap; gap: .3rem; }
.pp-t-pills .pn-pill { font-size: .7rem; padding: .08rem .45rem; }
.pp-t-pie { display: flex; align-items: center; justify-content: space-between; gap: .5rem; border-top: 1px solid var(--line); padding-top: .45rem; margin-top: .1rem; font-size: .76rem; min-width: 0; }
.pp-t-meta { display: inline-flex; align-items: center; gap: .55rem; flex: none; }
.pp-t-tiempo { display: inline-flex; align-items: center; gap: .2rem; color: var(--muted); white-space: nowrap; }
.pp-t-tiempo svg { width: 12px; height: 12px; }
.pp-t-oferta { font-weight: 800; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Quién lo atiende: el círculo con sus iniciales y su nombre. */
.pp-quien { display: inline-flex; align-items: center; gap: .4rem; min-width: 0; color: var(--muted); }
.pp-quien > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-quien-no { font-style: italic; }
.pp-av { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; font-size: .6rem; font-weight: 800; letter-spacing: .02em; font-style: normal; background: hsl(var(--h, 220) 75% 92%); color: hsl(var(--h, 220) 50% 30%); }
.pp-av-vacio { background: var(--bg); color: var(--muted); border: 1px dashed #cbd5e1; }
.pp-av-vacio svg { width: 12px; height: 12px; }
.pp-av-grande { width: 40px; height: 40px; font-size: .82rem; }

/* ---------- «Mover a…» ---------- */
.pp-menu { position: fixed; z-index: 90; min-width: 220px; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: .35rem; box-shadow: 0 18px 40px -16px rgba(15, 23, 42, .45); }
.pp-menu-tit { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: .35rem .55rem .3rem; }
.pp-menu button { display: flex; align-items: center; gap: .6rem; border: 0; background: none; border-radius: 8px; padding: .52rem .55rem; font: inherit; font-weight: 600; font-size: .88rem; color: var(--ink); text-align: left; cursor: pointer; }
.pp-menu button:hover, .pp-menu button:focus-visible { background: var(--bg); outline: none; }
.pp-menu button:disabled { cursor: default; color: var(--muted); background: none; }
.pp-menu small { margin-left: auto; font-weight: 500; font-size: .72rem; color: var(--muted); }
.pp-menu-sep { height: 1px; background: var(--line); margin: .25rem .4rem; }

/* ---------- Lista ---------- */
.pp-lista-caja { padding-top: .4rem; padding-bottom: .4rem; }
.pp-tabla tbody tr { cursor: pointer; }
.pp-cel-cli { display: flex; flex-direction: column; min-width: 150px; }
.pp-cel-cli small { color: var(--muted); font-size: .76rem; font-variant-numeric: tabular-nums; }
.pp-link { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--ink); text-align: left; cursor: pointer; }
.pp-link:hover { color: var(--accent-dark); }
.pp-cel-carro { min-width: 140px; }
.pp-origen-txt { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; color: var(--muted); }
.pp-origen-txt svg { width: 15px; height: 15px; }
.pp-tabla .pp-quien { color: var(--ink); white-space: nowrap; }
.pp-cel-pills { display: flex; flex-wrap: wrap; gap: .25rem; min-width: 110px; }
.pp-nowrap { white-space: nowrap; }
@media (max-width: 700px) { .pp-ocultable { display: none; } }

/* ---------- Clientes ---------- */
.pp-pista { margin: -.2rem 0 .8rem; }
.pp-clientes { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: .75rem; align-items: start; }
@media (max-width: 700px) { .pp-clientes { grid-template-columns: minmax(0, 1fr); } }
.pp-cli { display: flex; flex-direction: column; gap: .55rem; min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: .85rem .9rem .55rem; }
.pp-cli-cab { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .65rem; align-items: center; }
.pp-cli-quien { display: flex; flex-direction: column; min-width: 0; }
.pp-cli-quien b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-cli-sub { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; font-size: .8rem; }
.pp-cli-tel { display: inline-flex; align-items: center; gap: .25rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.pp-cli-tel svg { width: 13px; height: 13px; color: var(--muted); }
.pp-cli-tel:hover { color: var(--accent-dark); }
.pp-cli-wa { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; background: #dcfce7; color: #15803d; }
.pp-cli-wa svg { width: 13px; height: 13px; }
.pp-cli-wa:hover { background: #25d366; color: #fff; }
.pp-cli-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.pp-cli-lista button { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: .5rem; align-items: center; padding: .55rem .1rem; border: 0; border-bottom: 1px solid var(--line); background: none; font: inherit; font-size: .86rem; color: var(--ink); text-align: left; cursor: pointer; }
.pp-cli-lista li:last-child button { border-bottom: 0; }
.pp-cli-lista button > svg { width: 16px; height: 16px; color: var(--muted); }
.pp-cli-lista button:hover .pp-cli-carro { color: var(--accent-dark); }
.pp-cli-carro { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.pp-cli-espera { display: inline-grid; color: #6366f1; }
.pp-cli-espera svg { width: 15px; height: 15px; }
.pp-cli-espera.pn-warn { color: #b45309; }
.pp-cli-espera.pn-mal { color: var(--danger); }

/* ---------- La ficha ---------- */
/* El pie con las acciones se queda pegado abajo: la ficha es larga y «Confirmar
   venta» no puede quedar tres pantallas más abajo en el teléfono. */
.pp-ficha-modal .pn-modal-pie { position: sticky; bottom: 0; background: var(--card); z-index: 2; }
.pp-ficha-modal h2:focus { outline: none; }
.pp-ficha-top { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-top: .55rem; }
.pp-izq { margin-right: auto; }
/* En el teléfono los tres botones no caben en una línea: que se repartan el
   ancho en vez de quedar dos a un lado y uno colgando del otro. */
@media (max-width: 520px) {
  .pp-ficha-modal .pn-modal-pie .btn { flex: 1 1 auto; }
  .pp-ficha-modal .pp-izq { margin-right: 0; }
}
.pp-btn-perder { color: var(--danger); }
.pp-btn-perder:hover { border-color: #fecaca; background: #fef2f2; }

.pp-avisos { display: flex; flex-direction: column; gap: .45rem; margin-bottom: .9rem; }
.pp-aviso { display: flex; align-items: flex-start; gap: .55rem; border-radius: 12px; padding: .6rem .75rem; font-size: .86rem; line-height: 1.4; background: var(--soft); color: #3730a3; }
.pp-aviso svg { width: 17px; height: 17px; flex: none; margin-top: .1rem; }
.pp-aviso.pp-tono-warn { background: #fffbeb; color: #92400e; }
.pp-aviso.pp-tono-mal { background: #fef2f2; color: #b91c1c; }

.pp-ficha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .8rem; align-items: start; }
.pp-ficha-col { display: flex; flex-direction: column; gap: .8rem; min-width: 0; }
@media (max-width: 720px) { .pp-ficha { grid-template-columns: minmax(0, 1fr); } }

.pp-bloque { border: 1px solid var(--line); border-radius: 14px; padding: .8rem .9rem; min-width: 0; }
.pp-bloque h3 { display: flex; align-items: center; gap: .4rem; margin-bottom: .6rem; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.pp-bloque h3 svg { width: 15px; height: 15px; color: var(--accent); }
.pp-grande { font-size: 1.05rem; font-weight: 700; overflow-wrap: anywhere; }
.pp-grande-2 { font-weight: 700; }
.pp-tel { margin-top: .1rem; font-variant-numeric: tabular-nums; color: var(--muted); }
.pp-contacto { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .6rem; }
.pp-email { display: flex; align-items: center; gap: .35rem; margin-top: .6rem; font-size: .84rem; min-width: 0; }
.pp-email svg { width: 14px; height: 14px; color: var(--muted); flex: none; }
.pp-email a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.pp-email a:hover { color: var(--accent-dark); }

.pp-carro { display: flex; align-items: center; gap: .6rem; padding: .6rem .7rem; border-radius: 10px; background: var(--bg); color: var(--ink); }
.pp-carro:hover { background: var(--accent-soft); }
.pp-carro > svg { width: 17px; height: 17px; color: var(--muted); flex: none; }
.pp-carro-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.pp-carro-txt b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-carro-txt span { font-size: .8rem; color: var(--muted); }

.pp-datos { display: flex; flex-direction: column; margin: 0; }
.pp-datos > div { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: .6rem; padding: .5rem 0; border-top: 1px solid var(--line); font-size: .86rem; align-items: baseline; }
.pp-datos > div:first-child { border-top: 0; padding-top: 0; }
.pp-datos > div:last-child { padding-bottom: 0; }
.pp-datos dt { font-size: .8rem; font-weight: 600; color: var(--muted); }
.pp-datos dd { margin: 0; min-width: 0; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
@media (max-width: 420px) { .pp-datos > div { grid-template-columns: minmax(0, 1fr); gap: .15rem; } }
.pp-enlace { display: inline-flex; align-items: center; gap: .2rem; color: var(--accent); font-weight: 600; }
.pp-enlace svg { width: 14px; height: 14px; }
.pp-enlace:hover { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 2px; }
.pp-rojo { color: var(--danger); font-weight: 600; }

.pp-trato .field { margin-bottom: .75rem; }
.pp-campo-ro { margin-bottom: .75rem; }
.pp-campo-ro:last-child { margin-bottom: 0; }
.pp-campo-tit { display: block; font-size: .82rem; font-weight: 600; color: var(--muted); margin-bottom: .25rem; }
.pp-fila-dato { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.pp-pista-campo { font-size: .76rem; color: var(--muted); margin-top: .3rem; }
.pp-oferta-fila { display: flex; align-items: stretch; gap: .4rem; }
.pp-oferta-mon { display: grid; place-items: center; padding: 0 .6rem; border-radius: 10px; background: var(--bg); color: var(--muted); font-weight: 700; font-size: .85rem; }
.pp-oferta-fila input { flex: 1; min-width: 0; font-variant-numeric: tabular-nums; }
.pp-oferta-fila .btn { flex: none; }
.pp-nota { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .88rem; background: var(--bg); border-radius: 10px; padding: .55rem .7rem; }

.pp-cita summary { display: flex; align-items: center; gap: .45rem; list-style: none; cursor: pointer; font-weight: 700; font-size: .9rem; }
.pp-cita summary::-webkit-details-marker { display: none; }
.pp-cita summary > svg:first-child { width: 17px; height: 17px; color: var(--accent); }
.pp-cita-flecha { margin-left: auto; width: 17px; height: 17px; color: var(--muted); transition: transform .15s; }
.pp-cita[open] summary { margin-bottom: .8rem; }
.pp-cita[open] .pp-cita-flecha { transform: rotate(180deg); }
.pp-cita form > .btn { margin-top: .2rem; }

/* El historial, como línea de tiempo: un punto del color de la etapa a la que
   llegó y una raya que los une. */
.pp-hist-caja { margin-top: .8rem; }
.pp-hist { list-style: none; margin: 0; padding: 0; }
.pp-hist li { position: relative; display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: .7rem; padding-bottom: .85rem; }
.pp-hist li::before { content: ''; position: absolute; left: 6px; top: 16px; bottom: 0; width: 2px; background: var(--line); }
.pp-hist li:last-child { padding-bottom: 0; }
.pp-hist li:last-child::before { display: none; }
.pp-hist-punto { width: 14px; height: 14px; margin-top: .2rem; border-radius: 50%; background: var(--card); border: 3px solid var(--c, var(--muted)); }
.pp-hist-txt { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; min-width: 0; }
.pp-hist-txt > b { display: inline-flex; align-items: center; gap: .3rem; flex-wrap: wrap; font-size: .88rem; }
.pp-hist-txt > b svg { width: 14px; height: 14px; color: var(--muted); }
.pp-hist-meta { display: inline-flex; align-items: center; gap: .3rem; font-size: .76rem; color: var(--muted); }
.pp-hist-meta svg { width: 13px; height: 13px; }
.pp-hist-nota { font-size: .84rem; color: var(--ink); overflow-wrap: anywhere; }

/* ---------- Diálogos: perdido, venta, nuevo ---------- */
.pp-linea-cli { margin-bottom: .9rem; font-size: .92rem; }
.pp-legend { padding: 0; margin-bottom: .4rem; font-size: .82rem; font-weight: 600; color: var(--muted); }
.field textarea.pp-nota-corta { min-height: 76px; }

/* Los motivos, como tarjetas que se eligen de un toque: seis botones grandes
   se contestan más rápido y mejor que un desplegable con seis líneas. El
   círculo de opción se esconde pero sigue ahí, para el teclado. */
.pp-motivos { border: 0; margin: 0 0 .9rem; padding: 0; min-width: 0; }
.pp-motivos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
.pp-motivos .pp-legend { grid-column: 1 / -1; }
.pp-motivo { position: relative; display: flex; align-items: center; gap: .5rem; min-width: 0; border: 1px solid var(--line); border-radius: 12px; padding: .6rem .7rem; background: var(--card); font-weight: 600; font-size: .86rem; line-height: 1.25; cursor: pointer; transition: border-color .15s, background .15s; }
.pp-motivo:hover { border-color: #cbd5e1; }
.pp-motivo input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.pp-motivo svg { width: 18px; height: 18px; flex: none; color: var(--muted); }
.pp-motivo:has(input:checked) { border-color: var(--danger); background: #fef2f2; color: #991b1b; }
.pp-motivo:has(input:checked) svg { color: var(--danger); }
.pp-motivo:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(255, 106, 19, .28); }

.pp-opciones { display: flex; flex-direction: column; gap: .6rem; }
.pp-opcion { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .85rem; align-items: center; width: 100%; text-align: left; border: 1px solid var(--line); border-radius: 14px; padding: .85rem .9rem; background: var(--card); font: inherit; color: var(--ink); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.pp-opcion:hover:not(:disabled) { border-color: var(--accent); box-shadow: var(--shadow); }
.pp-opcion:disabled { opacity: .6; cursor: progress; }
.pp-opcion > svg { width: 18px; height: 18px; color: var(--muted); }
.pp-opcion-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--bg); color: var(--ink); }
.pp-opcion-ic svg { width: 21px; height: 21px; }
.pp-opcion-rec { border-color: #ffd9c2; background: linear-gradient(135deg, #fff, var(--accent-soft)); }
.pp-opcion-rec .pp-opcion-ic { background: var(--accent); color: #fff; }
.pp-opcion-txt { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.pp-opcion-txt b { font-size: .95rem; }
.pp-opcion-txt span { font-size: .82rem; color: var(--muted); line-height: 1.4; }
.pp-opcion-txt .pp-opcion-extra { color: var(--ink); font-weight: 600; }
.pp-nota-permiso { display: flex; align-items: flex-start; gap: .5rem; margin-top: .8rem; font-size: .84rem; color: var(--muted); }
.pp-nota-permiso svg { width: 15px; height: 15px; flex: none; margin-top: .15rem; }
.pp-final { margin-top: .8rem; }

.pp-campo { border: 0; margin: 0 0 .9rem; padding: 0; min-width: 0; }
.pp-origenes { display: flex; flex-wrap: wrap; gap: .35rem; }
.pp-origen { position: relative; display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--line); border-radius: 999px; padding: .4rem .75rem; background: var(--card); font-weight: 600; font-size: .85rem; color: var(--ink); cursor: pointer; transition: background .15s, border-color .15s; }
.pp-origen:hover { border-color: #cbd5e1; }
.pp-origen input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.pp-origen svg { width: 15px; height: 15px; color: var(--muted); }
.pp-origen:has(input:checked) { background: var(--navy); border-color: var(--navy); color: #fff; }
.pp-origen:has(input:checked) svg { color: #fff; }
.pp-origen:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(255, 106, 19, .28); }

@media (prefers-reduced-motion: reduce) {
  .pp-tarjeta.pp-recien { animation: none; }
  .pp, .pp-tarjeta, .pp-col, .pp-marco::before, .pp-marco::after { transition: none; }
}