/* SWITCH CRM · estilos de app10.js (elegir gente en las listas) */

/* .fila es un grid de dos columnas (contenido + acciones). Al meter el tilde
   hay que abrirle una tercera, si no el tilde se come la columna del texto. */
.fila.con-tilde{grid-template-columns:auto 1fr auto}
.tildar{display:flex;align-items:center;justify-content:center;align-self:stretch;
  padding:0 .8rem 0 .15rem;margin:-.75rem .1rem -.75rem -.85rem;cursor:pointer;
  border-right:1px solid var(--bd)}
.tildar input{width:17px;height:17px;margin:0;accent-color:var(--or);cursor:pointer}
.tildar:hover{background:var(--or-soft,rgba(255,106,0,.08))}

.fila.elegida{border-left-color:var(--or);background:var(--or-soft,rgba(255,106,0,.07))}
body.arrastrando{user-select:none;-webkit-user-select:none;cursor:cell}
body.arrastrando .fila{cursor:cell}

.barra-elegidos{position:fixed;left:50%;transform:translateX(-50%);bottom:1.1rem;z-index:60;
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  background:var(--b2);border:1px solid var(--or);border-radius:var(--rg,2px);
  padding:.7rem 1rem;box-shadow:0 10px 34px rgba(0,0,0,.55);max-width:min(94vw,58rem)}
.barra-elegidos.oculto{display:none}
body.con-barra main{padding-bottom:6rem}
.barra-elegidos .cuenta{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tx3);white-space:nowrap}
.barra-elegidos .cuenta b{font-family:var(--fd);font-size:1.5rem;letter-spacing:.02em;color:var(--or);margin-right:.35rem}
.barra-elegidos .quienes{font-size:.72rem;color:var(--tx2);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;max-width:24rem;flex:1 1 8rem}
.barra-elegidos .acc{display:flex;gap:.4rem;flex-wrap:wrap}

/* -- el tablero de un envio -- */
.barra-envio-top{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.8rem}
.fila.destino-fila{align-items:flex-start}
.acc-destino{flex-wrap:wrap;justify-content:flex-end;max-width:42rem}
.acc-destino .btn{padding:.42rem .6rem}
.acc-destino .btn.elegido{border-color:var(--or);color:var(--or);background:var(--or-soft,rgba(255,106,0,.12))}
.ver-texto{margin-top:.45rem}
.ver-texto summary{cursor:pointer;font-size:.66rem;letter-spacing:.06em;color:var(--tx3)}
.ver-texto summary:hover{color:var(--or)}
.paginado{display:flex;align-items:center;justify-content:center;gap:.7rem;margin-top:.9rem;
  font-size:.7rem;color:var(--tx3)}

@media(max-width:700px){
  /* En celular la fila pasa a una sola columna: el tilde arriba, a la izquierda. */
  .fila.con-tilde{grid-template-columns:auto 1fr}
  .fila.con-tilde .acc{grid-column:1/-1}
  .barra-elegidos{left:.6rem;right:.6rem;transform:none;max-width:none;gap:.6rem}
  .barra-elegidos .quienes{display:none}
  .barra-elegidos .acc{flex:1 1 auto;justify-content:flex-end}
  .acc-destino{max-width:none}
  .tildar{padding-right:.6rem;margin-left:-.75rem}
}

/* -- la guia y las notas del tablero -- */
.guia{margin-top:.9rem;border:1px solid var(--bd);background:var(--b3);padding:.7rem .9rem}
.guia summary{cursor:pointer;font:800 .6rem var(--fb);letter-spacing:.14em;text-transform:uppercase;color:var(--or)}
.guia ol{margin:.7rem 0 .2rem;padding-left:1.15rem;display:grid;gap:.4rem;
  font-size:.75rem;line-height:1.6;color:var(--tx2)}
.guia b{color:var(--tx)}
.nota-dijo{color:var(--ok) !important}
.nota-campo{margin-top:.5rem;font-size:.75rem;padding:.4rem .55rem;background:var(--b2);
  border:1px solid var(--bd);color:var(--tx);width:100%;max-width:30rem}
.nota-campo:focus{border-color:var(--or);outline:none}
.nota-campo.guardado{border-color:var(--ok)}

/* -- la pista de la primera vez -- */
.pista-elegir{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  border:1px solid var(--bd);border-left:2px solid var(--or);background:var(--b3);
  padding:.65rem .85rem;margin-bottom:.6rem;font-size:.74rem;line-height:1.55;color:var(--tx2)}
.pista-elegir b{color:var(--or)}
.pista-elegir .btn{margin-left:auto}

/* -- los que quedaste en retomar, en Hoy -- */
#panelRetomar .fila.retomar{align-items:flex-start}
#panelRetomar .fila.retomar .acc{align-self:center}

/* ---------- Barras de desplazamiento ----------
   Antes Chrome dibujaba su barra gris por encima de la barra lateral y
   quedaba una franja sobre otra. Acá la barra pasa a ser parte del CRM:
   finita, sin flechas, del color de la marca cuando la tocás. */
:root{ --barra:rgba(255,255,255,.14); --barra-viva:var(--or); }
:root[data-tema="claro"]{ --barra:rgba(17,20,24,.18); }

*{ scrollbar-width:thin; scrollbar-color:var(--barra) transparent; }

*::-webkit-scrollbar{ width:8px; height:8px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-corner{ background:transparent; }
*::-webkit-scrollbar-thumb{
  background:var(--barra);
  border-radius:999px;
  border:2px solid transparent;
  background-clip:content-box;
}
*::-webkit-scrollbar-thumb:hover{ background:var(--barra-viva); background-clip:content-box; }
*::-webkit-scrollbar-button{ display:none; width:0; height:0; }

/* La lateral y la ficha sólo muestran la barra cuando el mouse está encima:
   mientras tanto el borde queda limpio. */
.lateral,.ficha{ scrollbar-color:transparent transparent; }
.lateral:hover,.ficha:hover,.lateral:focus-within,.ficha:focus-within{ scrollbar-color:var(--barra) transparent; }
.lateral::-webkit-scrollbar-thumb,.ficha::-webkit-scrollbar-thumb{ background:transparent; background-clip:content-box; }
.lateral:hover::-webkit-scrollbar-thumb,.ficha:hover::-webkit-scrollbar-thumb,
.lateral:focus-within::-webkit-scrollbar-thumb,.ficha:focus-within::-webkit-scrollbar-thumb{
  background:var(--barra); background-clip:content-box;
}

/* ===================== LOS DETALLITOS =====================
   Nada de acá cambia lo que el CRM hace. Son los gestos que hacen que se
   sienta vivo: que la pantalla avise que cambió, que el botón responda al
   dedo, que se vea dónde está parado el teclado. Todo se apaga solo si la
   persona pidió menos movimiento en su sistema. */

/* La fila se corre apenas al pasarle el mouse. Durante el arrastre no, que
   ahí estás barriendo veinte y el movimiento marea. */
.fila{transition:border-color .15s ease, background .15s ease, transform .15s ease}
.fila:hover{transform:translateX(2px)}
body.arrastrando .fila:hover{transform:none}

/* Un botón que no se hunde al apretarlo se siente roto aunque funcione. */
.btn{transition:border-color .15s ease, color .15s ease, background .15s ease,
  transform .08s ease, box-shadow .15s ease}
.btn:active{transform:translateY(1px)}
.btn.pri:active{box-shadow:0 1px 0 rgba(0,0,0,.35)}

/* Dónde está parado el teclado. Antes, en oscuro, no se veía: el que anda
   con Tab quedaba a ciegas. */
:is(button,a,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--or);outline-offset:2px;border-radius:1px}

/* El naranja plano sobre fondo oscuro se ve apagado. Un brillo mínimo y el
   número grande vuelve a pesar lo que tiene que pesar. */
.kpi b{text-shadow:0 0 18px rgba(255,106,0,.22)}
:root[data-tema="claro"] .kpi b{text-shadow:none}

@media (prefers-reduced-motion: no-preference){
  @keyframes sw-subir{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  @keyframes sw-crecer{from{width:0}to{width:54px}}
  /* Los números entran escalonados: el ojo los lee en orden en vez de que
     le caigan los cuatro encima. */
  .kpis .kpi{animation:sw-subir .22s ease-out both}
  .kpis .kpi:nth-child(2){animation-delay:.05s}
  .kpis .kpi:nth-child(3){animation-delay:.1s}
  .kpis .kpi:nth-child(4){animation-delay:.15s}
  .titulo h2::after{animation:sw-crecer .45s cubic-bezier(.2,.8,.2,1) both}
}

/* ===================== QUIEN LO ESTA LLEVANDO =====================
   Un CRM compartido sin esto termina siempre igual: dos personas le escriben
   al mismo cliente el mismo dia y el cliente se da cuenta. El nombre va en la
   fila, a la vista, no escondido adentro de la ficha. */

.dueno{display:inline-block;vertical-align:middle;margin-left:.35rem;
  font-size:.52rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.16rem .45rem;border:1px solid var(--bd);border-radius:999px;
  color:var(--tx3);white-space:nowrap}
.dueno.mio{color:var(--or);border-color:rgba(255,106,0,.45)}

/* Lo tuyo se enciende; lo de otro se apaga un poco. La diferencia tiene que
   notarse de reojo, sin leer: por eso es el borde y no solo el texto. */
.fila[data-mio]{border-left-color:var(--or)}
.fila[data-ajeno]{opacity:.78}
.fila[data-ajeno]:hover{opacity:1}
.fila[data-ajeno] strong{color:var(--tx2)}

/* ============ CUÁNTO CUESTA DEJARLA LISTA ============
   Un peritaje que no termina en un número no sirve para comprar. El
   casillero aparece solo cuando algo está Mal o Regular: mientras todo está
   bien, no estorba. */
.item-peritaje .costo-arreglo{
  flex:0 0 auto;width:11rem;margin-left:.5rem;
  font-size:.72rem;padding:.35rem .55rem;min-height:0;
  border-color:rgba(255,77,77,.35)}
.item-peritaje .costo-arreglo::placeholder{font-size:.66rem;color:var(--tx3)}
.item-peritaje .costo-arreglo:focus{border-color:var(--or)}
@media (max-width:640px){
  .item-peritaje .costo-arreglo{width:100%;margin:.4rem 0 0}
}