/* Etapa 2 de la transformacion (2026-10-25): rediseño de ventas. Solo reglas de esta pantalla.
 * La caja del dia llenandose: una frase heroe, una barra (costo / te quedo / sin costear) y las
 * ventas como tickets de un recibo vertical. */

.vt{ max-width:var(--ancho-maximo); }
.vt__dias .libro-mes{ margin-top:0; }
.vt__datos{ display:block; padding:0; background:none; border:0; box-shadow:none; margin-top:var(--sp-4); }

/* ---- La caja del dia ---- */
.vt__caja{
  padding:var(--sp-5); border-radius:var(--r-lg); background:var(--marca-tenue);
  border:1px solid color-mix(in srgb, var(--marca) 22%, var(--line));
}
.vt-frase{
  font-family:var(--font-marca); font-size:clamp(24px, 6.5vw, 30px); line-height:1.2; color:var(--ink);
  margin:0; text-wrap:balance;
}
.vt-heroe{
  display:block; font-family:var(--font-marca); font-weight:600; color:var(--marca-ink);
  font-size:clamp(46px, 14vw, 64px); line-height:1.05; margin-top:var(--sp-1); letter-spacing:-.01em;
}
.vt-cuenta{ margin:var(--sp-1) 0 0; font-size:14px; color:var(--ink-2); }

.vt-barra{
  display:flex; gap:2px; height:28px; margin-top:var(--sp-5); border-radius:var(--r-sm); overflow:hidden;
  background:var(--paper-2);
}
.vt-seg{ min-width:6px; height:100%; }
.vt-seg--costo, .vt-muestra--costo{ background:var(--neutro-medio); }
.vt-seg--queda, .vt-muestra--queda{ background:var(--pos); }
.vt-seg--perdida, .vt-muestra--perdida{
  background:repeating-linear-gradient(135deg, var(--neg) 0 5px, color-mix(in srgb, var(--neg) 55%, var(--paper)) 5px 10px);
}
/* Sin costear: rayado y sin relleno firme. No es ganancia ni costo, es un dato que falta. */
.vt-seg--sin, .vt-muestra--sin{
  background:repeating-linear-gradient(135deg, transparent 0 4px, var(--neutro-suave) 4px 6px);
  box-shadow:inset 0 0 0 1.5px var(--neutro-medio);
}
.vt-leyenda{ display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-6); margin:var(--sp-3) 0 0; }
.vt-leyenda__item{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.vt-leyenda dt{ display:flex; align-items:center; gap:6px; font-size:13px; color:var(--ink-2); }
.vt-leyenda dd{ margin:0; font-size:20px; font-weight:700; color:var(--ink); }
.vt-muestra{ display:inline-block; width:12px; height:12px; border-radius:3px; flex:none; }
.vt-neg{ color:var(--neg); }

.vt-invita{
  margin-top:var(--sp-5); padding:var(--sp-4); border-radius:var(--r-md);
  border:1.5px dashed var(--neutro-medio); background:var(--surface);
}
.vt-invita p{ margin:0; font-size:14px; line-height:1.45; color:var(--ink-2); }
.vt-invita b{ color:var(--ink); }
.vt-invita__accion{ margin-top:var(--sp-3); min-height:44px; display:inline-flex; align-items:center; text-decoration:none; }

/* ---- Los tickets ---- */
.vt__tickets{ margin-top:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-3); }
.vt-t{
  position:relative; padding:var(--sp-4) var(--sp-4) var(--sp-3); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-md);
  border-left:4px solid var(--marca);
}
.vt-t__linea{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3); }
.vt-t__nombre{ margin:0; font-size:17px; font-weight:600; line-height:1.25; min-width:0; overflow-wrap:anywhere; }
.vt-t__cant{ font-weight:500; color:var(--ink-2); }
.vt-t__monto{ font-size:20px; font-weight:700; flex:none; }
.vt-t__quien{ margin:2px 0 0; font-size:13px; color:var(--ink-3); }
.vt-t__costo{ margin:var(--sp-2) 0 0; font-size:13.5px; color:var(--ink-2); }
.vt-t__pie{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2);
  margin-top:var(--sp-3); padding-top:var(--sp-2); border-top:1px dashed var(--line-fuerte);
}
.vt-chip{
  min-height:44px; padding:0 var(--sp-4); border-radius:var(--r-pill); border:1px solid var(--line-fuerte);
  background:var(--paper-2); color:var(--ink); font:inherit; font-size:14px; font-weight:600; cursor:pointer;
  display:inline-flex; align-items:center; gap:var(--sp-2);
}
.vt-chip__cambiar{ font-weight:500; font-size:12.5px; color:var(--ink-3); text-decoration:underline; }
.vt-chip--falta{ background:var(--marca-tenue); border-color:var(--marca-ink); color:var(--marca-ink); border-style:dashed; }
.vt-mas{
  width:44px; height:44px; flex:none; border:0; border-radius:var(--r-pill); background:transparent;
  color:var(--ink-3); font-size:22px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.vt-mas:hover, .vt-mas[aria-expanded="true"]{ background:var(--paper-2); color:var(--ink); }
.vt-chip:focus-visible, .vt-mas:focus-visible, .vt-invita__accion:focus-visible{ outline:3px solid var(--anillo-foco); outline-offset:2px; }
.vt-t__acciones{
  flex-direction:column; align-items:flex-start; gap:var(--sp-3);
  margin-top:var(--sp-2); padding-top:var(--sp-3); border-top:1px solid var(--line);
}
.vt-t__acciones .boton{ min-height:44px; }
.vt-t__confirmar{ font-size:14px; width:100%; }
.vt-t__confirmar p{ margin:0 0 var(--sp-2); }
.vt-t__confirmar-botones{ display:flex; gap:var(--sp-2); flex-wrap:wrap; }

/* ---- Escritorio: la caja a la izquierda (fija), el recibo a la derecha ---- */
@media (min-width:1000px){
  .vt__datos{ display:grid; grid-template-columns:minmax(340px, 5fr) minmax(0, 6fr); gap:var(--sp-7); align-items:start; }
  .vt__caja{ position:sticky; top:var(--sp-5); padding:var(--sp-7); }
  .vt__tickets{ margin-top:0; }
  .vt-heroe{ font-size:64px; }
}
@media (prefers-reduced-motion:reduce){ .vt-seg{ transition:none; } }

/* Fase 6.90: cotizaciones. */
.cot-cabeza{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap; }
.cot-titulo{ margin:var(--sp-2) 0; font-size:22px; }
.cot-titulo small{ font-size:13px; color:var(--ink-3); font-weight:400; }
.cot-volver{ background:none; border:0; padding:6px 0; color:var(--ink-3); font:inherit; cursor:pointer; min-height:44px; }
.cot-lista{ display:flex; flex-direction:column; gap:var(--sp-2); }
.cot-fila{ display:flex; flex-direction:column; gap:4px; text-align:left; padding:var(--sp-3); border:1px solid var(--line); border-radius:12px;
  background:var(--paper); color:var(--ink); font:inherit; cursor:pointer; }
.cot-fila__arriba, .cot-fila__abajo{ display:flex; justify-content:space-between; align-items:center; gap:var(--sp-2); }
.cot-fila__cliente{ color:var(--ink-2); font-size:14px; }
.cot-estado{ font-size:12px; font-weight:700; padding:2px 8px; border-radius:999px; border:1px solid var(--line-fuerte); color:var(--ink-2); white-space:nowrap; }
.cot-estado--enviada{ border-color:var(--ink); color:var(--ink); }
.cot-estado--aceptada, .cot-estado--convertida{ background:var(--ink); color:var(--ink-inv); border-color:var(--ink); }
.cot-estado--vencida, .cot-estado--rechazada{ color:var(--ink-3); text-decoration:line-through; }
.cot-margen{ font-size:12px; font-weight:700; color:var(--ink-2); }
.cot-margen--bajo{ color:var(--neg-ink, var(--neg, #b3261e)); }
.cot-margen--sin{ color:var(--ink-3); font-weight:400; }
.cot-cliente{ margin:0; font-weight:600; }
.cot-lineas{ list-style:none; padding:0; margin:var(--sp-3) 0; border-top:1px solid var(--line); }
.cot-linea{ display:grid; grid-template-columns:1fr auto; gap:2px var(--sp-3); padding:var(--sp-2) 0; border-bottom:1px solid var(--line); }
.cot-linea__sub{ grid-column:1 / -1; font-size:12px; color:var(--ink-3); }
.cot-tag{ font-size:11px; color:var(--ink-3); border:1px solid var(--line); border-radius:6px; padding:0 4px; }
.cot-totales{ margin:var(--sp-3) 0 0; }
.cot-totales div{ display:flex; justify-content:space-between; padding:3px 0; }
.cot-totales dt{ color:var(--ink-2); } .cot-totales dd{ margin:0; }
.cot-totales__total{ font-size:18px; font-weight:700; border-top:1px solid var(--line-fuerte); margin-top:4px; padding-top:6px !important; }
.cot-totales__interno{ color:var(--ink-3); font-size:14px; }
.cot-texto{ margin:var(--sp-2) 0 0; font-size:14px; overflow-wrap:anywhere; }
.cot-acciones{ display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-4); }
.cot-acciones .boton{ flex:1 1 160px; min-height:48px; }
.cot-sugeridos{ display:flex; flex-wrap:wrap; gap:6px; margin:6px 0; }
.cot-ed-linea{ position:relative; padding:var(--sp-3) 0; border-bottom:1px solid var(--line); }
.cot-ed-nombre{ margin:0 72px 6px 0; font-weight:600; overflow-wrap:anywhere; }
.cot-ed-desc{ width:calc(100% - 72px); }
.cot-ed-nums{ display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:6px; }
.cot-ed-nums label{ flex:1 1 90px; display:flex; flex-direction:column; gap:2px; font-size:12px; color:var(--ink-3); min-width:0; }
.cot-ed-linea input, .cot-ed-linea select, .cot-mas textarea{ width:100%; min-height:44px; padding:0 var(--sp-2); border-radius:var(--r-sm);
  border:1px solid var(--line-fuerte); background:var(--paper); color:var(--ink); font-size:16px; font-variant-numeric:tabular-nums; min-width:0; }
.cot-mas textarea{ min-height:72px; padding:var(--sp-2); font-family:inherit; }
.cot-ed-quitar{ position:absolute; top:var(--sp-3); right:0; background:none; border:0; color:var(--ink-3); font:inherit; font-size:13px;
  min-height:32px; cursor:pointer; text-decoration:underline; }
.cot-check{ display:flex; align-items:center; gap:8px; margin:var(--sp-3) 0; min-height:44px; }
.cot-check input{ width:22px; height:22px; }
.cot-mas{ margin:var(--sp-3) 0; } .cot-mas summary{ cursor:pointer; min-height:44px; display:flex; align-items:center; color:var(--ink-2); }
.cot-resumen{ position:sticky; bottom:0; display:flex; flex-direction:column; gap:2px; padding:var(--sp-3); margin:var(--sp-3) 0 var(--sp-2);
  background:var(--paper); border:1px solid var(--line-fuerte); border-radius:12px; z-index:2; }