/* ===========================================================================
   ElectroCell Tech — Sistema de taller. COMPONENTES.

   Lo de acá NO es de una pantalla sola: son las piezas que se repiten por todo
   el sistema — tablas de tickets, diálogos, controles de formulario, fichas de
   detalle. Nacieron con la pantalla de Reparaciones (2026-09-10) y las van a
   reusar Cotizaciones, Ventas y las que sigan.

   `app.css` se queda con el armazón (barra lateral, contenido, paleta).
   =========================================================================== */

/* ---------- Encabezado simple de página (título + acciones) ---------- */
.tit-pag{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.tit-pag__izq{flex:1;min-width:220px}
.tit-pag h1{
  font-family:var(--hero);font-weight:900;
  font-size:clamp(1.5rem,3vw,2.15rem);color:var(--blanco);
  letter-spacing:-.01em;line-height:1.1;
}
.tit-pag p{color:var(--tenue);font-size:.85rem;margin-top:4px}
.tit-pag__acc{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- Barra de búsqueda + filtros ---------- */
.barra{display:flex;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.barra .busca{flex:1 1 420px}

/* ---------- Celdas de la tabla de tickets ---------- */
.tk{
  display:inline-block;font-family:var(--tec);font-weight:700;font-size:.76rem;
  letter-spacing:.04em;color:var(--azul-vivo);
  background:rgba(43,127,255,.1);border:1px solid rgba(43,127,255,.28);
  padding:4px 11px;border-radius:8px;
}
.tk__f{color:var(--tenue);font-size:.68rem;margin-top:6px;line-height:1.35}
/* El chip del número es un <button> en la lista y un <span> en la ficha: la
   misma pinta, pero en la lista se toca para entrar al detalle. .tk ya fija
   tipo, peso y tamaño, así que la letra del <button> del sistema queda pisada
   y no hay más que resetear que el cursor. */
.tk--ir{cursor:pointer}
.tk--ir:hover{background:rgba(43,127,255,.2);border-color:var(--azul-vivo)}
.tk--ir:focus-visible{outline:2px solid var(--azul-vivo);outline-offset:2px}
.cli{color:var(--blanco);font-weight:600;font-size:.88rem}
.eq{color:var(--tenue);font-size:.76rem;margin-top:3px}
.tec{
  display:inline-flex;align-items:center;gap:5px;margin-top:6px;
  font-family:var(--tec);font-weight:600;font-size:.64rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--azul-vivo);
  background:rgba(43,127,255,.1);border:1px solid rgba(43,127,255,.22);
  padding:3px 8px;border-radius:6px;
}
.tec svg{width:11px;height:11px;stroke:currentColor}

/* Bloque de dinero: la cifra arriba y qué-es abajo. La etiqueta va DEBAJO y en
   chico porque el ojo busca el número; al revés se lee la etiqueta primero. */
.din{white-space:nowrap}
.din__n{font-family:var(--tec);font-weight:700;font-size:.87rem;color:var(--blanco)}
.din__e{
  font-family:var(--tec);font-weight:600;font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tenue);margin-top:2px;
}
.din--cero .din__n{color:var(--tenue)}
.din--ok   .din__n{color:var(--verde)}
.din--mal  .din__n{color:var(--rojo-vivo)}
.din--util .din__n{color:var(--azul-vivo)}

/* ---------- Estados del ticket (las 7 fases del flujo) ----------
   Punto + palabra, nunca solo el color. Clase propia y no `.fase` porque estos
   son los estados OFICIALES: si mañana se agrega uno, se agrega acá y en el
   detalle, y en ningún otro lado. */
.est{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--tec);font-weight:700;font-size:.66rem;
  letter-spacing:.08em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;white-space:nowrap;
  border:1px solid transparent;
}
.est::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 6px}
.est--recibido {color:var(--azul-vivo);background:rgba(43,127,255,.12);border-color:rgba(43,127,255,.3)}
.est--diag     {color:var(--ambar);background:rgba(240,180,41,.1);border-color:rgba(240,180,41,.28)}
.est--repara   {color:#B69CFA;background:rgba(139,92,246,.14);border-color:rgba(139,92,246,.34)}
.est--piezas   {color:var(--tenue);background:rgba(114,124,140,.12);border-color:rgba(114,124,140,.26)}
.est--listo    {color:var(--verde);background:rgba(61,220,151,.1);border-color:rgba(61,220,151,.28)}
.est--entregado{color:var(--verde);background:rgba(61,220,151,.06);border-color:rgba(61,220,151,.2)}
.est--cancelado{color:var(--rojo-vivo);background:rgba(232,33,58,.12);border-color:rgba(232,33,58,.32)}

/* Bandera de urgencia. NO es un estado: un ticket urgente igual está en
   diagnóstico o en reparación. Por eso va aparte y nunca dentro de .est. */
.urge{
  display:inline-flex;align-items:center;gap:5px;margin-top:6px;
  font-family:var(--tec);font-weight:700;font-size:.6rem;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--rojo-vivo);background:rgba(232,33,58,.12);
  border:1px solid rgba(232,33,58,.35);padding:3px 8px;border-radius:6px;
}
.urge svg{width:11px;height:11px;stroke:currentColor}

/* Fecha de entrega */
.ent{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--tec);font-weight:600;font-size:.68rem;
  letter-spacing:.05em;text-transform:uppercase;color:var(--verde);
}
.ent svg{width:13px;height:13px;stroke:currentColor}
.ent--sin{color:var(--tenue);font-style:italic}

/* ---------- Grupo de acciones de la fila ----------
   Cada acción se tiñe de lo que hace al pasar el mouse. */
.accs{display:flex;gap:2px;justify-content:flex-end}
.acc--cobro:hover,.acc--wasap:hover{color:var(--verde);background:var(--negro)}
/* El de anular se tiñe de rojo: es la única acción de la fila que quita
   plata de la cuenta, y conviene que la mano dude un instante. */
.acc--anul:hover{color:var(--rojo-vivo);background:var(--negro)}

/* ===========================================================================
   DIÁLOGOS
   =========================================================================== */
.modal{
  position:fixed;inset:0;z-index:60;
  display:none;align-items:flex-start;justify-content:center;
  padding:28px 16px;overflow-y:auto;
  background:rgba(4,5,8,.78);backdrop-filter:blur(3px);
}
.modal.ver{display:flex}
.modal__caja{
  background:var(--panel);border:1px solid var(--linea-2);
  border-radius:20px;width:100%;max-width:960px;
  box-shadow:0 24px 70px rgba(0,0,0,.6);
  margin:auto;overflow:hidden;
}
.modal--chico .modal__caja{max-width:520px}
.modal--medio .modal__caja{max-width:660px}

/* La cabecera lleva el degradado de la marca muy diluido: identifica el
   diálogo sin robarle atención al formulario. */
.modal__enc{
  display:flex;align-items:center;gap:16px;padding:22px 26px;
  background:linear-gradient(100deg,rgba(232,33,58,.16) 0%,rgba(139,92,246,.14) 50%,rgba(43,127,255,.16) 100%);
  border-bottom:1px solid var(--linea-2);
}
.modal__ico{
  width:48px;height:48px;flex:0 0 48px;border-radius:14px;
  background:var(--panel-2);border:1px solid var(--linea-2);
  color:var(--azul-vivo);display:flex;align-items:center;justify-content:center;
}
.modal__ico svg{width:22px;height:22px;stroke:currentColor}
.modal__tit{
  font-family:var(--hero);font-weight:900;font-size:1.3rem;
  color:var(--blanco);text-transform:uppercase;letter-spacing:.01em;line-height:1.15;
}
.modal__sub{color:var(--texto);font-size:.7rem;margin-top:4px;opacity:.85}
.modal__x{
  margin-left:auto;width:38px;height:38px;border-radius:11px;flex:0 0 38px;
  display:flex;align-items:center;justify-content:center;
  color:var(--texto);background:rgba(0,0,0,.25);transition:background .18s,color .18s;
}
.modal__x:hover{background:var(--rojo-hondo);color:#fff}
.modal__x svg{width:18px;height:18px;stroke:currentColor}
.modal__cuerpo{padding:24px 26px}
.modal__pie{
  padding:18px 26px;border-top:1px solid var(--linea);
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--panel-2);
}

/* Dos columnas dentro del diálogo de nuevo ticket */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:26px}
@media (max-width:820px){ .cols{grid-template-columns:1fr;gap:20px} }

/* ---------- Título de bloque dentro de un formulario ---------- */
.bloque{display:flex;align-items:center;gap:9px;color:var(--azul-vivo);margin:0 0 12px}
.bloque svg{width:15px;height:15px;stroke:currentColor;flex:0 0 15px}
.bloque--conf{color:var(--ambar)}
.bloque-cont{display:flex;flex-direction:column;gap:11px;margin-bottom:22px}

/* ---------- Controles de formulario ---------- */
.campo{position:relative;display:block}
.campo__eti{
  display:block;font-family:var(--tec);font-weight:700;font-size:.64rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--tenue);margin-bottom:7px;
}
.campo input,.campo select,.campo textarea{
  width:100%;background:var(--panel-2);border:1px solid var(--linea-2);
  border-radius:11px;padding:12px 14px;color:var(--blanco);font-size:.86rem;
  transition:border-color .18s;
}
.campo textarea{min-height:104px;resize:vertical;line-height:1.6}
.campo input::placeholder,.campo textarea::placeholder{color:var(--tenue)}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--azul)}
/* La flechita del desplegable va como SVG embebido para no pedir otro archivo */
.campo select{
  appearance:none;cursor:pointer;padding-right:38px;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23727C8C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:15px;
}
.campo select option,.campo select optgroup{background:var(--panel-2);color:var(--blanco)}
/* Campo con ícono adentro, a la izquierda */
.campo--ico input{padding-left:40px}
.campo__i{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:16px;height:16px;stroke:var(--tenue);pointer-events:none}
.campo--eti .campo__i{top:auto;bottom:14px;transform:none}
.fila{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.fila--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:520px){ .fila,.fila--3{grid-template-columns:1fr} }
.nota{color:var(--tenue);font-size:.68rem;line-height:1.55;font-style:italic}
.nota b{color:var(--texto);font-style:normal}

/* Caja resaltada (códigos de desbloqueo, avisos) */
.caja{background:var(--panel-2);border:1px solid var(--linea-2);border-radius:13px;padding:15px}
.caja--conf{border-color:rgba(240,180,41,.3);background:rgba(240,180,41,.04)}
.caja--aviso{
  border-color:rgba(240,180,41,.3);background:rgba(240,180,41,.07);
  color:var(--ambar);font-size:.72rem;line-height:1.6;
  display:flex;gap:10px;align-items:flex-start;
}
.caja--aviso svg{width:16px;height:16px;stroke:currentColor;flex:0 0 16px;margin-top:1px}

/* ---------- Casilla de verificación ---------- */
.check{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:.76rem;color:var(--texto)}
.check input{width:17px;height:17px;flex:0 0 17px;accent-color:var(--rojo-btn);cursor:pointer}

/* ---------- Checklist de recepción (OK / FALLA / NO PROB.) ---------- */
.chk{display:flex;flex-direction:column;gap:7px}
.chk__f{
  display:flex;align-items:center;gap:10px;
  background:var(--panel-2);border:1px solid var(--linea);
  border-radius:10px;padding:9px 12px;
}
.chk__n{flex:1;font-size:.79rem;color:var(--texto);min-width:0}
.tri{display:flex;gap:4px;flex:0 0 auto}
.tri__b{
  font-family:var(--tec);font-weight:700;font-size:.6rem;
  letter-spacing:.08em;text-transform:uppercase;
  padding:5px 9px;border-radius:7px;
  border:1px solid var(--linea-2);color:var(--tenue);
  transition:background .15s,color .15s,border-color .15s;
}
.tri__b:hover{color:var(--blanco);border-color:var(--tenue)}
.tri__b--ok[aria-pressed="true"] {background:rgba(61,220,151,.16);border-color:var(--verde);color:var(--verde)}
.tri__b--mal[aria-pressed="true"]{background:rgba(232,33,58,.16);border-color:var(--rojo);color:var(--rojo-vivo)}
.tri__b--na[aria-pressed="true"] {background:rgba(240,180,41,.16);border-color:var(--ambar);color:var(--ambar)}

/* Los dos atajos de arriba del checklist */
.atajos{display:flex;gap:10px;margin-bottom:12px}
.atajo{
  flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:12px;border-radius:11px;border:1px solid;
  font-family:var(--tec);font-weight:700;font-size:.7rem;
  letter-spacing:.08em;text-transform:uppercase;transition:background .16s;
}
.atajo svg{width:14px;height:14px;stroke:currentColor}
.atajo--ok{color:var(--verde);border-color:rgba(61,220,151,.4);background:rgba(61,220,151,.09)}
.atajo--ok:hover{background:rgba(61,220,151,.18)}
.atajo--off{color:var(--ambar);border-color:rgba(240,180,41,.4);background:rgba(240,180,41,.09)}
.atajo--off:hover{background:rgba(240,180,41,.18)}

/* ---------- Método de pago del diálogo de cobro ----------
   Tiene clase propia y no .atajo--ok por un choque real: .atajo--ok es el
   botón "Todo OK" del checklist de ingreso, y el escucha global lo usa para
   marcar las siete filas de la revisión. Mientras "Efectivo" compartió esa
   clase, cobrar dejaba la revisión del equipo toda en OK sin que nadie lo
   pidiera. Es el mismo error que .barra: una clase que ya tenía dueño. */
.pago{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;padding:16px 8px;border-radius:11px;
  border:1px solid var(--linea-2);background:transparent;color:var(--tenue);
  font-family:var(--tec);font-weight:700;font-size:.7rem;
  letter-spacing:.08em;text-transform:uppercase;
  cursor:pointer;transition:background .16s,color .16s,border-color .16s;
}
.pago svg{width:14px;height:14px;stroke:currentColor}
.pago:hover{color:var(--texto);border-color:var(--tenue)}
.pago--sel{color:var(--verde);border-color:rgba(61,220,151,.4);background:rgba(61,220,151,.09)}
.pago--sel:hover{color:var(--verde);background:rgba(61,220,151,.18)}

/* ---------- Zonas para soltar archivos / firmar ---------- */
.zonas{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.zona{
  border:1.5px dashed var(--linea-2);border-radius:13px;
  padding:22px 14px;text-align:center;color:var(--texto);
  transition:border-color .18s,background .18s;
}
.zona:hover{border-color:var(--azul);background:rgba(43,127,255,.05)}
.zona svg{width:26px;height:26px;stroke:var(--tenue);margin:0 auto 10px}
.zona__t{font-weight:600;font-size:.82rem;color:var(--blanco)}
.zona__s{color:var(--tenue);font-size:.68rem;margin-top:3px}
.zona--ancha{grid-column:1 / -1;display:flex;align-items:center;justify-content:center;gap:14px;padding:26px}
.zona--ancha svg{margin:0}
.cuenta{font-family:var(--tec);font-weight:700;font-size:.64rem;letter-spacing:.1em;color:var(--tenue);margin-left:auto}

/* ---------- Patrón de desbloqueo 3x3 ---------- */
.patron{
  background:var(--panel-2);border:1px solid var(--linea-2);border-radius:16px;
  padding:26px;display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
  width:max-content;margin:0 auto;
}
.patron__p{
  width:20px;height:20px;border-radius:50%;
  background:var(--linea-2);border:2px solid transparent;
  transition:background .15s,border-color .15s,transform .15s;
}
.patron__p:hover{background:var(--tenue)}
.patron__p[aria-pressed="true"]{background:var(--azul);border-color:var(--azul-vivo);transform:scale(1.15)}
.patron-n{
  text-align:center;font-family:var(--tec);font-weight:700;font-size:.72rem;
  letter-spacing:.14em;color:var(--azul-vivo);margin-top:16px;min-height:1.2em;
}

/* ===========================================================================
   DETALLE DEL TICKET
   =========================================================================== */
.det{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}
@media (max-width:1100px){ .det{grid-template-columns:1fr} }

.det__enc{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.det__num{font-family:var(--hero);font-weight:900;font-size:1.65rem;color:var(--blanco);letter-spacing:-.01em}
.det__f{color:var(--tenue);font-size:.74rem;margin-top:3px;display:flex;align-items:center;gap:6px}
.det__f svg{width:13px;height:13px;stroke:currentColor}
.det__acc{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}

.volver{
  width:42px;height:42px;flex:0 0 42px;border-radius:12px;
  background:var(--panel-2);border:1px solid var(--linea-2);color:var(--texto);
  display:flex;align-items:center;justify-content:center;transition:border-color .18s,color .18s;
}
.volver:hover{border-color:var(--azul);color:var(--blanco)}
.volver svg{width:18px;height:18px;stroke:currentColor}

/* Botones de fase — el flujo completo, con el actual marcado */
.fases{display:flex;flex-wrap:wrap;gap:9px}
.fase-b{
  font-family:var(--tec);font-weight:700;font-size:.68rem;
  letter-spacing:.09em;text-transform:uppercase;
  padding:10px 16px;border-radius:10px;
  background:var(--panel-2);border:1px solid var(--linea-2);color:var(--tenue);
  transition:border-color .16s,color .16s,background .16s;
}
.fase-b:hover{color:var(--blanco);border-color:var(--tenue)}
.fase-b[aria-pressed="true"]{background:var(--azul);border-color:var(--azul);color:#fff}
.fase-b--cancel[aria-pressed="true"]{background:var(--rojo-hondo);border-color:var(--rojo-hondo)}

/* Las 3 tarjetas de plata del detalle */
.platas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
/* La fila del margen son DOS tarjetas, no tres: si compartiera la cuadrícula
   de arriba quedaría un hueco del ancho de una tarjeta que parecería un dato
   que falta. */
.platas--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:640px){ .platas--2{grid-template-columns:1fr} }
.plata--inv{border-color:rgba(43,127,255,.22)}
.plata--inv .plata__e{color:var(--azul-vivo)}
.plata--uti{border-color:rgba(61,220,151,.22)}
.plata--uti .plata__e{color:var(--verde)}
/* Una utilidad NEGATIVA se pinta en rojo. Pasa de verdad —una garantía cuesta
   y no cobra— y un número en verde con un menos adelante se lee mal de reojo,
   que es como se lee un tablero. */
.plata--uti.plata--mal{border-color:rgba(232,33,58,.26)}
.plata--uti.plata--mal .plata__e,.plata--uti.plata--mal .plata__n{color:var(--rojo-vivo)}
@media (max-width:760px){ .platas{grid-template-columns:1fr} }
.plata{border-radius:14px;padding:18px;border:1px solid var(--linea-2);background:var(--panel-2)}
.plata__e{
  display:flex;align-items:center;gap:7px;
  font-family:var(--tec);font-weight:700;font-size:.63rem;
  letter-spacing:.12em;text-transform:uppercase;
}
.plata__e::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.plata__n{font-family:var(--hero);font-weight:900;font-size:1.7rem;color:var(--blanco);margin-top:10px;line-height:1.1}
.plata__s{color:var(--tenue);font-size:.65rem;margin-top:5px;line-height:1.5}
.plata--pres{border-color:rgba(61,220,151,.22)}
.plata--pres .plata__e{color:var(--verde)}
.plata--abo{border-color:rgba(240,180,41,.24);background:rgba(240,180,41,.05)}
.plata--abo .plata__e,.plata--abo .plata__n{color:var(--ambar)}
.plata--deb{border-color:rgba(232,33,58,.26);background:rgba(232,33,58,.05)}
.plata--deb .plata__e,.plata--deb .plata__n{color:var(--rojo-vivo)}

/* Columna derecha: fichas de datos */
.ficha{background:var(--panel);border:1px solid var(--linea);border-radius:var(--radio);padding:18px 20px;margin-bottom:16px}
.ficha__t{display:flex;align-items:center;gap:9px;color:var(--azul-vivo);margin-bottom:14px}
.ficha__t svg{width:15px;height:15px;stroke:currentColor;flex:0 0 15px}
.dato{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid var(--linea)}
.dato:last-child{border-bottom:none;padding-bottom:0}
.dato__e{
  font-family:var(--tec);font-weight:600;font-size:.66rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--tenue);flex:0 0 42%;
}
.dato__v{color:var(--blanco);font-size:.8rem;font-weight:500;flex:1;text-align:right;word-break:break-word}
.dato__v--na{color:var(--tenue);font-weight:400}
.dato__v--azul{color:var(--azul-vivo)}

.cli-g{font-family:var(--hero);font-weight:800;font-size:1.15rem;color:var(--blanco);line-height:1.25}
.cli-t{color:var(--texto);font-size:.82rem;margin-top:4px}
.eq-g{font-family:var(--hero);font-weight:900;font-size:1.3rem;color:var(--blanco);text-transform:uppercase;line-height:1.15}
.eq-m{font-family:var(--hero);font-weight:900;font-size:1.3rem;color:#B69CFA;line-height:1.15}

/* Evidencia visual: dos pestañas */
.tabs{display:flex;gap:6px;background:var(--panel-2);border-radius:11px;padding:4px;margin-bottom:14px}
.tab{
  flex:1;font-family:var(--tec);font-weight:700;font-size:.63rem;
  letter-spacing:.07em;text-transform:uppercase;color:var(--tenue);
  padding:9px 6px;border-radius:8px;line-height:1.35;transition:background .16s,color .16s;
}
.tab:hover{color:var(--blanco)}
.tab[aria-selected="true"]{background:var(--azul);color:#fff}

/* Chat interno del ticket */
.chat{background:var(--panel-2);border:1px solid var(--linea);border-radius:13px;min-height:200px;display:flex;flex-direction:column}
.chat__cuerpo{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--tenue);padding:34px 16px;gap:10px;text-align:center;
}
.chat__cuerpo svg{width:30px;height:30px;stroke:currentColor;opacity:.4}
.chat__pie{display:flex;gap:9px;padding:12px;border-top:1px solid var(--linea)}
.chat__pie input{flex:1;background:var(--panel);border:1px solid var(--linea-2);border-radius:10px;padding:11px 14px;color:var(--blanco);font-size:.82rem}
.chat__pie input:focus{outline:none;border-color:var(--azul)}
.chat__env{width:44px;flex:0 0 44px;border-radius:10px;background:var(--azul);color:#fff;display:flex;align-items:center;justify-content:center;transition:background .16s}
.chat__env:hover{background:var(--azul-vivo)}
.chat__env svg{width:17px;height:17px;stroke:currentColor}

/* Aviso de dato protegido / restringido */
.protegido{
  display:flex;gap:11px;align-items:flex-start;
  background:rgba(43,127,255,.07);border:1px solid rgba(43,127,255,.22);
  border-radius:13px;padding:14px 16px;
}
.protegido svg{width:17px;height:17px;stroke:var(--azul-vivo);flex:0 0 17px;margin-top:1px}
.protegido__t{font-family:var(--tec);font-weight:700;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--azul-vivo)}
.protegido__s{color:var(--texto);font-size:.72rem;margin-top:4px;line-height:1.55}

/* ---------- Botones extra que aparecen en estas pantallas ---------- */
.btn--v{background:var(--verde);color:#08210F}
.btn--v:hover{background:#2FC084}
.btn--a{background:var(--azul);color:#fff}
.btn--a:hover{background:#1F6FE0}
.btn--n{background:var(--panel-2);color:var(--texto);border:1px solid var(--linea-2)}
.btn--n:hover{border-color:var(--tenue);color:var(--blanco)}
.btn--ancho{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ===========================================================================
   MÓDULO DE COTIZACIONES — agregado el 2026-09-10
   =========================================================================== */

/* ---------- Cabecera de módulo: ícono + título + acción ----------
   Distinta de .tit-pag: acá el encabezado es un panel con peso propio, porque
   la pantalla arranca vacía y necesita algo que la sostenga. */
.modulo{
  background:var(--panel);border:1px solid var(--linea);
  border-radius:var(--radio);padding:22px 26px;margin-bottom:18px;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
.modulo__ico{
  width:46px;height:46px;flex:0 0 46px;border-radius:13px;
  background:rgba(43,127,255,.12);color:var(--azul-vivo);
  display:flex;align-items:center;justify-content:center;
}
.modulo__ico svg{width:22px;height:22px;stroke:currentColor}
.modulo__txt{flex:1;min-width:240px}
.modulo__t{
  font-family:var(--hero);font-weight:900;
  font-size:clamp(1.35rem,2.7vw,1.9rem);color:var(--blanco);
  text-transform:uppercase;letter-spacing:.005em;line-height:1.12;
}
.modulo__s{color:var(--tenue);font-size:.74rem;margin-top:6px;line-height:1.5}

/* ---------- Indicadores en FILA (ícono al lado, no arriba) ----------
   Los de la vista general son verticales y grandes porque son el centro de esa
   pantalla. Acá son de apoyo: en fila ocupan la mitad de alto y dejan el aire
   para la lista, que es lo que importa. */
.kpis--f{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}
@media (max-width:1180px){ .kpis--f{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .kpis--f{grid-template-columns:1fr} }
.kpi-f{
  background:var(--panel);border:1px solid var(--linea);
  border-radius:var(--radio);padding:16px 18px;
  display:flex;align-items:center;gap:14px;
}
.kpi-f__ico{
  width:40px;height:40px;flex:0 0 40px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
}
.kpi-f__ico svg{width:19px;height:19px;stroke:currentColor}
.kpi-f__e{
  font-family:var(--tec);font-weight:700;font-size:.63rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--tenue);
}
.kpi-f__n{
  font-family:var(--hero);font-weight:800;font-size:1.35rem;
  color:var(--blanco);line-height:1.15;margin-top:3px;
}
.kpi-f__s{color:var(--tenue);font-size:.66rem;margin-top:2px}
.kpi-f--total{color:var(--azul-vivo)}
.kpi-f--total .kpi-f__ico{background:rgba(43,127,255,.12)}
.kpi-f--pend{color:var(--ambar)}
.kpi-f--pend .kpi-f__ico{background:rgba(240,180,41,.1)}
.kpi-f--acep{color:var(--verde)}
.kpi-f--acep .kpi-f__ico{background:rgba(61,220,151,.1)}
.kpi-f--rech{color:var(--rojo-vivo)}
.kpi-f--rech .kpi-f__ico{background:rgba(232,33,58,.12)}

/* ---------- Píldoras de filtro ---------- */
.pills{display:flex;gap:8px;flex-wrap:wrap}
.pill{
  font-family:var(--tec);font-weight:700;font-size:.68rem;
  letter-spacing:.08em;text-transform:uppercase;
  padding:11px 17px;border-radius:10px;
  background:var(--panel-2);border:1px solid var(--linea-2);color:var(--tenue);
  transition:background .16s,color .16s,border-color .16s;
}
.pill:hover{color:var(--blanco);border-color:var(--tenue)}
.pill[aria-pressed="true"]{background:var(--azul);border-color:var(--azul);color:#fff}

/* ---------- Estado vacío con acción ---------- */
.vacio__t{
  font-family:var(--hero);font-weight:900;font-size:1.25rem;
  color:var(--blanco);text-transform:uppercase;letter-spacing:.01em;
}
.vacio__s{color:var(--tenue);font-size:.85rem;margin:10px auto 20px;max-width:420px;line-height:1.6}

/* ---------- Estados de una cotización ---------- */
.est--pendiente{color:var(--ambar);background:rgba(240,180,41,.1);border-color:rgba(240,180,41,.28)}
.est--aceptada {color:var(--verde);background:rgba(61,220,151,.1);border-color:rgba(61,220,151,.28)}
.est--rechazada{color:var(--rojo-vivo);background:rgba(232,33,58,.12);border-color:rgba(232,33,58,.32)}
.est--vencida  {color:var(--tenue);background:rgba(114,124,140,.12);border-color:rgba(114,124,140,.26)}

/* Vigencia: cuenta de días. Se pone ámbar cuando queda poco y gris al vencer,
   porque una cotización vencida es plata que ya se perdió y hay que verlo. */
.vig{font-family:var(--tec);font-weight:600;font-size:.72rem;color:var(--texto);white-space:nowrap}
.vig__d{display:block;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--tenue);margin-top:3px}
.vig--pronto{color:var(--ambar)}
.vig--pronto .vig__d{color:var(--ambar)}
.vig--vencida{color:var(--tenue);text-decoration:line-through}

/* Enlace a la orden en la que se convirtió la cotización */
.convertida{
  display:inline-flex;align-items:center;gap:5px;margin-top:6px;
  font-family:var(--tec);font-weight:700;font-size:.6rem;
  letter-spacing:.09em;text-transform:uppercase;
  color:var(--verde);background:rgba(61,220,151,.1);
  border:1px solid rgba(61,220,151,.3);padding:3px 8px;border-radius:6px;
}
.convertida svg{width:11px;height:11px;stroke:currentColor}

/* ---------- Vigencia dentro del formulario ---------- */
.vigencia{background:var(--panel-2);border:1px solid var(--linea-2);border-radius:13px;padding:14px}
.vigencia__n{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.vigencia__n input{
  width:82px;background:var(--panel);border:1px solid var(--linea-2);border-radius:9px;
  padding:10px 12px;color:var(--blanco);font-family:var(--tec);font-weight:700;
  font-size:1.05rem;text-align:center;
}
.vigencia__n input:focus{outline:none;border-color:var(--azul)}
.vigencia__op{display:flex;gap:7px;flex-wrap:wrap}
.vigencia__b{
  font-family:var(--tec);font-weight:700;font-size:.64rem;
  letter-spacing:.07em;text-transform:uppercase;
  padding:7px 12px;border-radius:8px;
  background:var(--panel);border:1px solid var(--linea-2);color:var(--tenue);
  transition:color .15s,border-color .15s;
}
.vigencia__b:hover{color:var(--blanco);border-color:var(--tenue)}
.vigencia__b[aria-pressed="true"]{color:var(--azul-vivo);border-color:var(--azul)}
.vence{
  display:flex;align-items:center;gap:7px;margin-top:12px;
  font-family:var(--tec);font-weight:700;font-size:.68rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ambar);
}
.vence svg{width:13px;height:13px;stroke:currentColor}

/* ---------- Total estimado, en el pie del formulario ---------- */
.total-est{
  background:rgba(43,127,255,.07);border:1px solid rgba(43,127,255,.28);
  border-radius:13px;padding:15px 18px;min-width:200px;
}
.total-est__e{
  font-family:var(--tec);font-weight:700;font-size:.63rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--azul-vivo);
}
.total-est__i{
  display:flex;align-items:baseline;gap:7px;margin-top:8px;
  border-bottom:1px solid var(--linea-2);padding-bottom:6px;
}
.total-est__i span{font-family:var(--tec);font-weight:700;font-size:1.15rem;color:var(--azul-vivo)}
.total-est__i input{
  flex:1;min-width:0;background:none;border:none;color:var(--blanco);
  font-family:var(--tec);font-weight:700;font-size:1.35rem;padding:0;
}
.total-est__i input:focus{outline:none}
.total-est__s{font-family:var(--tec);font-size:.63rem;letter-spacing:.1em;
              text-transform:uppercase;color:var(--tenue);margin-top:7px}

/* ===========================================================================
   HISTORIAL DE VENTAS — agregado el 2026-09-10
   =========================================================================== */

/* ---------- Barra de rango de fechas y segmentos ---------- */
.rango{
  background:var(--panel);border:1px solid var(--linea);
  border-radius:var(--radio);padding:14px 16px;margin-bottom:18px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.rango__ico{
  width:38px;height:38px;flex:0 0 38px;border-radius:11px;
  background:rgba(43,127,255,.12);color:var(--azul-vivo);
  display:flex;align-items:center;justify-content:center;
}
.rango__ico svg{width:17px;height:17px;stroke:currentColor}
.rango__f{display:flex;align-items:center;gap:9px}
.rango__f input{
  background:var(--panel-2);border:1px solid var(--linea-2);border-radius:10px;
  padding:10px 13px;color:var(--blanco);font-family:var(--tec);
  font-weight:600;font-size:.8rem;width:132px;
}
.rango__f input:focus{outline:none;border-color:var(--azul)}
/* El campo de fecha necesita un poco más: al ancho del texto se le suma el
   iconito del calendario que dibuja el navegador, y con los 132px de arriba la
   fecha queda apretada contra él. El `cursor:pointer` es porque todo el campo
   abre el calendario, no solo el icono. */
.rango__f input[type="date"]{width:152px;cursor:pointer}
.rango__sep{color:var(--tenue)}
.rango .busca{flex:1 1 220px;min-width:180px}

/* Grupo de segmentos: se ven pegados porque son excluyentes entre sí */
.seg{display:flex;background:var(--panel-2);border:1px solid var(--linea-2);border-radius:11px;padding:3px}
.seg__b{
  font-family:var(--tec);font-weight:700;font-size:.66rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--tenue);
  padding:8px 15px;border-radius:8px;transition:background .16s,color .16s;
}
.seg__b:hover{color:var(--blanco)}
.seg__b[aria-pressed="true"]{background:var(--azul);color:#fff}

/* ---------- Seis indicadores en fila ---------- */
.kpis--6{grid-template-columns:repeat(6,minmax(0,1fr))}
@media (max-width:1400px){ .kpis--6{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:900px){  .kpis--6{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){  .kpis--6{grid-template-columns:1fr} }
/* El total va resaltado: es el número que el dueño viene a buscar. */
.kpi-f--neto{color:var(--azul-vivo);border-color:rgba(43,127,255,.35);background:rgba(43,127,255,.06)}
.kpi-f--neto .kpi-f__ico{background:rgba(43,127,255,.18)}
.kpi-f--efvo{color:var(--verde)}
.kpi-f--efvo .kpi-f__ico{background:rgba(61,220,151,.1)}
.kpi-f--tarj{color:#B69CFA}
.kpi-f--tarj .kpi-f__ico{background:rgba(139,92,246,.14)}
.kpi-f--transf{color:var(--tenue)}
.kpi-f--transf .kpi-f__ico{background:rgba(114,124,140,.12)}
.kpi-f--inv{color:var(--rojo-vivo)}
.kpi-f--inv .kpi-f__ico{background:rgba(232,33,58,.12)}
.kpi-f--uti{color:var(--azul-vivo)}
.kpi-f--uti .kpi-f__ico{background:rgba(43,127,255,.12)}

/* ---------- Celdas de la tabla de ventas ---------- */
.ref{font-family:var(--tec);font-weight:700;font-size:.82rem;color:var(--azul-vivo)}
.ref__f{color:var(--tenue);font-size:.68rem;margin-top:4px;line-height:1.35}

/* Botoncito de reimprimir, al principio de la fila */
.reimp{
  width:38px;height:38px;flex:0 0 38px;border-radius:11px;
  background:var(--panel-2);border:1px solid var(--linea-2);color:var(--tenue);
  display:inline-flex;align-items:center;justify-content:center;
  transition:border-color .16s,color .16s;
}
.reimp:hover{border-color:var(--azul);color:var(--azul-vivo)}
.reimp svg{width:16px;height:16px;stroke:currentColor}

/* Categoría de la venta: de taller o de mostrador */
.cat{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--tec);font-weight:700;font-size:.64rem;
  letter-spacing:.09em;text-transform:uppercase;
  padding:5px 11px;border-radius:8px;border:1px solid;white-space:nowrap;
}
.cat svg{width:12px;height:12px;stroke:currentColor}
.cat--rep {color:var(--verde);background:rgba(61,220,151,.09);border-color:rgba(61,220,151,.3)}
.cat--most{color:#B69CFA;background:rgba(139,92,246,.12);border-color:rgba(139,92,246,.32)}

.vend{color:var(--texto);font-size:.8rem;font-weight:500}
.vend__u{color:var(--tenue);font-size:.68rem;margin-top:2px}

/* Resumen de lo que se vendió */
.conc{color:var(--texto);font-size:.78rem;line-height:1.45;max-width:270px}
.conc__o{
  display:inline-block;margin-bottom:5px;
  font-family:var(--tec);font-weight:700;font-size:.66rem;
  color:var(--azul-vivo);background:rgba(43,127,255,.1);
  border:1px solid rgba(43,127,255,.26);padding:2px 8px;border-radius:6px;
}

/* Método de pago */
.met{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--tec);font-weight:600;font-size:.7rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--texto);
}
.met svg{width:14px;height:14px;stroke:currentColor}
.met--efvo svg{stroke:var(--verde)}
.met--tarj svg{stroke:#B69CFA}
.met--transf svg{stroke:var(--azul-vivo)}

/* Total de la venta, con inversión y utilidad debajo */
.vta{text-align:right;white-space:nowrap}
.vta__t{font-family:var(--tec);font-weight:700;font-size:1.02rem;color:var(--blanco)}
.vta__d{display:flex;gap:6px;justify-content:flex-end;margin-top:5px}
.mini{
  font-family:var(--tec);font-weight:700;font-size:.62rem;
  padding:2px 7px;border-radius:5px;border:1px solid;
}
.mini--inv{color:var(--rojo-vivo);background:rgba(232,33,58,.1);border-color:rgba(232,33,58,.28)}
.mini--uti{color:var(--verde);background:rgba(61,220,151,.09);border-color:rgba(61,220,151,.28)}
.liq{
  display:inline-block;margin-top:6px;
  font-family:var(--tec);font-weight:700;font-size:.6rem;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--verde);background:rgba(61,220,151,.09);
  border:1px solid rgba(61,220,151,.3);padding:3px 9px;border-radius:6px;
}
.liq--debe{color:var(--ambar);background:rgba(240,180,41,.09);border-color:rgba(240,180,41,.3)}

/* ---------- Acciones CON ETIQUETA ----------
   Acá las acciones llevan texto y no solo ícono: son tres y no cinco, hay
   lugar, y una etiqueta se entiende sin tener que pasar el mouse por encima. */
.acc-b{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--tec);font-weight:700;font-size:.64rem;
  letter-spacing:.08em;text-transform:uppercase;
  padding:8px 12px;border-radius:9px;
  background:var(--panel-2);border:1px solid var(--linea-2);color:var(--texto);
  transition:border-color .16s,color .16s,background .16s;white-space:nowrap;
}
.acc-b svg{width:13px;height:13px;stroke:currentColor}
.acc-b:hover{border-color:var(--azul);color:var(--blanco)}
.acc-b--w{
  color:var(--verde);border-color:rgba(61,220,151,.34);background:rgba(61,220,151,.09);
  padding:8px 11px;
}
.acc-b--w:hover{background:rgba(61,220,151,.2);border-color:var(--verde);color:var(--verde)}
.accs--b{display:flex;gap:7px;justify-content:flex-end;flex-wrap:wrap}

/* ---------- Aviso de bloqueo (la pantalla de "sin caja asignada") ---------- */
.bloqueo{max-width:520px;margin:0 auto;text-align:center;padding:36px 26px}
.bloqueo__ico{
  width:78px;height:78px;margin:0 auto 22px;border-radius:24px;
  background:rgba(240,180,41,.1);border:1px solid rgba(240,180,41,.3);
  color:var(--ambar);display:flex;align-items:center;justify-content:center;
}
.bloqueo__ico svg{width:34px;height:34px;stroke:currentColor}
.bloqueo__t{
  font-family:var(--hero);font-weight:900;font-size:1.5rem;
  color:var(--blanco);text-transform:uppercase;letter-spacing:.01em;
}
.bloqueo__s{color:var(--tenue);font-size:.76rem;margin-top:8px}
.pasos{
  background:var(--panel-2);border:1px solid var(--linea-2);border-radius:15px;
  padding:20px 22px;margin:24px 0;text-align:left;
}
.paso{display:flex;gap:13px;align-items:flex-start;padding:9px 0}
.paso__n{
  width:24px;height:24px;flex:0 0 24px;border-radius:8px;
  background:rgba(43,127,255,.14);color:var(--azul-vivo);
  font-family:var(--tec);font-weight:700;font-size:.72rem;
  display:flex;align-items:center;justify-content:center;
}
.paso__t{color:var(--texto);font-size:.82rem;line-height:1.55}
.paso__t b{color:var(--blanco);font-weight:600}

/* ---------- Comprobante de venta, dentro del diálogo ---------- */
.comp-caja{background:var(--panel-2);border:1px solid var(--linea-2);border-radius:14px;padding:18px}
.comp-caja__e{
  font-family:var(--tec);font-weight:700;font-size:.66rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--tenue);
  text-align:center;
}
.comp-caja__t{
  font-family:var(--hero);font-weight:900;font-size:1.3rem;
  color:var(--verde);text-align:center;margin-top:8px;
}
.pago-f{
  background:var(--panel);border:1px solid var(--linea);border-radius:11px;
  padding:12px 14px;display:flex;align-items:center;gap:12px;
}
.pago-f__i{flex:1;min-width:0}
.pago-f__d{color:var(--texto);font-size:.78rem}
.pago-f__m{
  font-family:var(--tec);font-weight:600;font-size:.64rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--azul-vivo);margin-top:3px;
}
.pago-f__n{font-family:var(--tec);font-weight:700;font-size:.95rem;color:var(--verde);white-space:nowrap}

/* El MISMO renglon, usado como boton para elegir cual cobro se corrige
   (diálogo "Corregir con qué se pagó", 2026-09-15). Solo aparece con una venta
   MIXTA, que es cuando hay mas de uno.

   El estado marcado no es cosmetico: dos cobros de la misma venta se ven casi
   iguales —mismo renglon, otro metodo— y sin borde que diga cual esta elegido
   se corrige el que no era. El hover solo no alcanza: con el dedo no hay
   hover. */
button.pago-f{width:100%;text-align:left;cursor:pointer;font:inherit}
button.pago-f + button.pago-f{margin-top:8px}
button.pago-f:hover{border-color:var(--azul)}
button.pago-f[aria-pressed="true"]{border-color:var(--azul-vivo);background:var(--panel-2)}

/* ===========================================================================
   GASTOS OPERATIVOS — agregado el 2026-09-10
   =========================================================================== */

/* ---------- Bloque de arriba: egreso total + los dos orígenes ---------- */
/* Cuatro columnas desde el 2026-09-15: entró el tercer origen del egreso —la
   pieza que sale del almacén— y las tres tienen que sumar el total de la
   izquierda. Los saltos de abajo ya estaban y siguen sirviendo. */
.egresos{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:16px;margin-bottom:18px}
@media (max-width:1100px){ .egresos{grid-template-columns:1fr 1fr} .egresos > :first-child{grid-column:1 / -1} }
@media (max-width:640px){ .egresos{grid-template-columns:1fr} }

.egreso{
  background:var(--panel);border:1px solid rgba(232,33,58,.22);
  border-radius:var(--radio);padding:24px 26px;
  display:flex;align-items:center;gap:20px;
}
.egreso__txt{flex:1;min-width:0}
.egreso__e{
  font-family:var(--tec);font-weight:700;font-size:.66rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--tenue);
}
.egreso__n{
  font-family:var(--hero);font-weight:900;font-size:clamp(1.9rem,4vw,2.6rem);
  color:var(--blanco);line-height:1.05;margin-top:10px;letter-spacing:-.015em;
}
.egreso__s{
  display:flex;align-items:center;gap:7px;margin-top:8px;
  font-family:var(--tec);font-weight:700;font-size:.65rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--rojo-vivo);
}
.egreso__s svg{width:13px;height:13px;stroke:currentColor}
.egreso__ico{
  width:64px;height:64px;flex:0 0 64px;border-radius:50%;
  background:rgba(232,33,58,.1);border:1px solid rgba(232,33,58,.26);
  color:var(--rojo-vivo);display:flex;align-items:center;justify-content:center;
}
.egreso__ico svg{width:26px;height:26px;stroke:currentColor}

/* Las dos bolsas de donde sale la plata */
.fondo{
  background:var(--panel);border:1px solid var(--linea);
  border-radius:var(--radio);padding:20px 22px;
}
.fondo__t{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.fondo__ico{
  width:38px;height:38px;flex:0 0 38px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
}
.fondo__ico svg{width:18px;height:18px;stroke:currentColor}
.fondo__e{
  font-family:var(--tec);font-weight:700;font-size:.66rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--tenue);
}
.fondo__n{
  font-family:var(--hero);font-weight:900;font-size:1.65rem;
  color:var(--blanco);line-height:1.1;
}
/* La barrita dice qué parte del egreso total salió de esta bolsa. Sin ella los
   dos números se leen sueltos y no se ve cuál pesa más. */
.fondo__b{height:5px;border-radius:3px;background:var(--linea-2);margin-top:12px;overflow:hidden}
.fondo__b i{display:block;height:100%;border-radius:3px}
.fondo__p{font-family:var(--tec);font-size:.63rem;letter-spacing:.08em;
          text-transform:uppercase;color:var(--tenue);margin-top:7px}
.fondo--caja .fondo__ico{background:rgba(43,127,255,.12);color:var(--azul-vivo)}
.fondo--caja .fondo__b i{background:var(--azul)}
.fondo--bolsa .fondo__ico{background:rgba(139,92,246,.14);color:#B69CFA}
.fondo--bolsa .fondo__b i{background:#8B5CF6}
/* Verde, el color que en este sistema es el del inventario y el de lo que no
   mueve efectivo. Contraste medido sobre --panel: #3DDC97 da 9.6. */
.fondo--inv .fondo__ico{background:rgba(61,220,151,.14);color:#3DDC97}
.fondo--inv .fondo__b i{background:#3DDC97}

/* ---------- Filtros + distribución, lado a lado ---------- */
.gastos-med{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;margin-bottom:18px;align-items:start}
@media (max-width:1100px){ .gastos-med{grid-template-columns:1fr} }

.filtros{
  background:var(--panel);border:1px solid var(--linea);
  border-radius:var(--radio);padding:20px 24px;
}
.filtros__t{display:flex;align-items:center;gap:9px;color:var(--azul-vivo);margin-bottom:16px}
.filtros__t svg{width:15px;height:15px;stroke:currentColor}
.filtros__g{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-end}
.limpiar{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--tec);font-weight:700;font-size:.68rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--tenue);
  padding:12px 18px;border-radius:11px;border:1px dashed var(--linea-2);
  transition:color .16s,border-color .16s;
}
.limpiar:hover{color:var(--rojo-vivo);border-color:rgba(232,33,58,.4)}
.limpiar svg{width:13px;height:13px;stroke:currentColor}

/* ---------- Gráfico de dona ----------
   SVG a mano, sin librería (CLAUDE.md §5.1). El truco es el radio: con
   r = 100/(2π) = 15.9155 la circunferencia mide 100 exacto, así que el
   stroke-dasharray se escribe directamente en PORCENTAJES y no hay que
   calcular nada. Los desfases van 25 − (suma de los anteriores). */
.dona-p{background:var(--panel);border:1px solid var(--linea);border-radius:var(--radio);padding:20px 22px}
.dona-p__t{display:flex;align-items:center;gap:9px;color:var(--rojo-vivo);margin-bottom:16px}
.dona-p__t svg{width:15px;height:15px;stroke:currentColor}
.dona{width:172px;height:172px;margin:0 auto;display:block;transform:rotate(-90deg)}
.dona circle{fill:none;stroke-width:5.5}
.dona-c{position:relative}
.dona-c__m{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;pointer-events:none;
}
.dona-c__n{font-family:var(--hero);font-weight:900;font-size:1.15rem;color:var(--blanco);line-height:1.1}
.dona-c__e{font-family:var(--tec);font-size:.58rem;letter-spacing:.12em;
           text-transform:uppercase;color:var(--tenue);margin-top:3px}
.leyenda{display:flex;flex-direction:column;gap:9px;margin-top:20px}
.leyenda__i{display:flex;align-items:center;gap:9px;font-size:.74rem;color:var(--texto)}
.leyenda__p{width:10px;height:10px;flex:0 0 10px;border-radius:3px}
.leyenda__n{margin-left:auto;font-family:var(--tec);font-weight:700;font-size:.72rem;color:var(--blanco)}

/* ---------- Celdas de la bitácora ---------- */
.gto{color:var(--blanco);font-weight:600;font-size:.9rem;text-transform:uppercase;letter-spacing:.01em}
.gto__b{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-top:7px}
.folio{
  font-family:var(--tec);font-weight:700;font-size:.63rem;
  color:var(--rojo-vivo);background:rgba(232,33,58,.1);
  border:1px solid rgba(232,33,58,.3);padding:2px 8px;border-radius:5px;
}
.folio--ord{color:var(--azul-vivo);background:rgba(43,127,255,.1);border-color:rgba(43,127,255,.3)}
.folio svg{width:10px;height:10px;stroke:currentColor;vertical-align:-1px;margin-right:3px}
.categ{
  font-family:var(--tec);font-weight:600;font-size:.62rem;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--tenue);background:var(--panel-2);
  border:1px solid var(--linea-2);padding:3px 9px;border-radius:5px;
}
.categ--oculta{color:var(--ambar);background:rgba(240,180,41,.09);border-color:rgba(240,180,41,.28)}
.gto__f{color:var(--tenue);font-size:.68rem}

/* De dónde salió la plata */
.orig{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--tec);font-weight:700;font-size:.64rem;
  letter-spacing:.09em;text-transform:uppercase;
  padding:5px 11px;border-radius:8px;border:1px solid;white-space:nowrap;
}
.orig svg{width:12px;height:12px;stroke:currentColor}
.orig--caja {color:var(--azul-vivo);background:rgba(43,127,255,.1);border-color:rgba(43,127,255,.3)}
.orig--bolsa{color:#B69CFA;background:rgba(139,92,246,.12);border-color:rgba(139,92,246,.32)}

/* Quién lo registró */
.quien{display:flex;align-items:center;gap:10px}
.quien__a{
  width:32px;height:32px;flex:0 0 32px;border-radius:9px;
  background:linear-gradient(135deg,var(--rojo) 0%,var(--morado) 100%);
  color:#fff;font-family:var(--hero);font-weight:800;font-size:.82rem;
  display:flex;align-items:center;justify-content:center;
}
.quien__n{color:var(--blanco);font-size:.8rem;font-weight:600}
.quien__r{font-family:var(--tec);font-size:.6rem;letter-spacing:.1em;
          text-transform:uppercase;color:var(--tenue);margin-top:2px}

.neg{font-family:var(--tec);font-weight:700;font-size:1rem;color:var(--rojo-vivo);white-space:nowrap}

/* Fila anulada: se tacha pero NO se borra — ver el comentario de la vista */
tr.anulado{opacity:.55}
tr.anulado .neg,tr.anulado .gto{text-decoration:line-through}
.anul{
  font-family:var(--tec);font-weight:700;font-size:.6rem;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--tenue);background:var(--panel-2);
  border:1px solid var(--linea-2);padding:3px 9px;border-radius:5px;
}

/* ---------- Selector de origen en el formulario (mosaicos) ---------- */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{
  padding:18px 14px;border-radius:13px;text-align:center;
  background:var(--panel-2);border:1.5px solid var(--linea-2);color:var(--texto);
  transition:border-color .16s,background .16s,color .16s;
}
.tile svg{width:22px;height:22px;stroke:currentColor;margin:0 auto 9px}
.tile__t{font-family:var(--tec);font-weight:700;font-size:.68rem;
         letter-spacing:.09em;text-transform:uppercase}
.tile:hover{border-color:var(--tenue);color:var(--blanco)}
.tile[aria-pressed="true"]{border-color:var(--azul);background:rgba(43,127,255,.1);color:var(--azul-vivo)}
.tile--bolsa[aria-pressed="true"]{border-color:#8B5CF6;background:rgba(139,92,246,.12);color:#B69CFA}

/* Bloque de la caja de retiro: aparece con "caja chica" y se va con "bolsa" */
.retiro{
  background:rgba(43,127,255,.06);border:1px solid rgba(43,127,255,.24);
  border-radius:13px;padding:16px;margin-top:14px;
  display:flex;gap:18px;align-items:flex-end;flex-wrap:wrap;
}
.retiro__c{flex:1;min-width:220px}
.retiro__n{flex:1;min-width:200px;color:var(--azul-vivo);font-size:.7rem;
           line-height:1.55;font-family:var(--tec);font-weight:600;
           letter-spacing:.03em;text-transform:uppercase;}

/* display:flex le gana al [hidden] del navegador, asi que hay que decirlo. */
.retiro[hidden]{display:none}

/* ===========================================================================
   ADMINISTRACIÓN DE CAJAS — agregado el 2026-09-10
   =========================================================================== */

/* ---------- Las tres tarjetas de resumen ---------- */
.resumen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:18px}
@media (max-width:1100px){ .resumen{grid-template-columns:1fr 1fr} .resumen > :last-child{grid-column:1 / -1} }
@media (max-width:640px){ .resumen{grid-template-columns:1fr} .resumen > :last-child{grid-column:auto} }

.res{
  background:var(--panel);border:1px solid var(--linea);
  border-radius:var(--radio);padding:22px 24px;
  display:flex;align-items:flex-start;gap:16px;position:relative;overflow:hidden;
}
.res__txt{flex:1;min-width:0}
.res__e{
  font-family:var(--tec);font-weight:700;font-size:.64rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--tenue);
}
.res__n{
  font-family:var(--hero);font-weight:900;font-size:1.9rem;
  color:var(--blanco);line-height:1.1;margin-top:10px;letter-spacing:-.01em;
}
.res__n--chico{font-size:1.35rem;line-height:1.2}
.res__s{
  display:flex;align-items:center;gap:7px;margin-top:9px;
  font-family:var(--tec);font-weight:700;font-size:.63rem;
  letter-spacing:.1em;text-transform:uppercase;
}
.res__s svg{width:12px;height:12px;stroke:currentColor}
.res__s--ok{color:var(--verde)}
.res__s--ojo{color:var(--ambar)}
.res__s--info{color:var(--azul-vivo);text-transform:none;letter-spacing:.01em;
              font-weight:500;font-family:var(--cuerpo);font-size:.7rem;line-height:1.55}
.res__fondo{
  position:absolute;right:-10px;top:14px;width:78px;height:78px;
  opacity:.05;stroke:var(--blanco);pointer-events:none;
}

/* ---------- Tarjeta de cada caja ---------- */
.cajas-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}

.caja-c{
  background:var(--panel);border:1px solid var(--linea);
  border-radius:var(--radio);padding:22px 24px;
  display:flex;flex-direction:column;gap:16px;
}
/* La caja abierta se distingue con borde y no solo con el puntito: el punto
   solo es el refuerzo, nunca el único indicador. */
.caja-c--abierta{border-color:rgba(61,220,151,.32);background:linear-gradient(180deg,rgba(61,220,151,.04) 0%,transparent 60%)}

.caja-c__t{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.caja-c__n{
  font-family:var(--hero);font-weight:900;font-size:1.2rem;
  color:var(--blanco);text-transform:uppercase;letter-spacing:.005em;
}
.caja-c--cerrada .caja-c__n{color:var(--texto)}
.estado-p{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--tec);font-weight:700;font-size:.6rem;
  letter-spacing:.1em;text-transform:uppercase;
  padding:3px 9px;border-radius:6px;border:1px solid;
}
.estado-p::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.estado-p--abierta{color:var(--verde);background:rgba(61,220,151,.1);border-color:rgba(61,220,151,.3)}
.estado-p--cerrada{color:var(--tenue);background:rgba(114,124,140,.1);border-color:rgba(114,124,140,.26)}
.caja-c__ses{
  display:flex;align-items:center;gap:7px;width:100%;
  font-family:var(--tec);font-size:.63rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--tenue);
}
.caja-c__ses svg{width:12px;height:12px;stroke:currentColor}

/* Saldo */
.saldo{background:var(--panel-2);border:1px solid var(--linea);border-radius:13px;padding:16px 18px}
.saldo__e{
  font-family:var(--tec);font-weight:700;font-size:.62rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--tenue);
}
.saldo__n{
  font-family:var(--hero);font-weight:900;font-size:1.75rem;
  color:var(--blanco);line-height:1.1;margin-top:7px;
}
.caja-c--abierta .saldo__n{color:var(--verde)}
.saldo__d{
  display:flex;justify-content:space-between;gap:10px;
  padding-top:11px;margin-top:12px;border-top:1px solid var(--linea);
  font-family:var(--tec);font-size:.68rem;
}
.saldo__d span:first-child{color:var(--tenue);letter-spacing:.06em;text-transform:uppercase}
.saldo__d span:last-child{color:var(--texto);font-weight:700}
.saldo__d--mas span:last-child{color:var(--verde)}
.saldo__d--menos span:last-child{color:var(--rojo-vivo)}

/* Responsable */
.resp{
  display:flex;align-items:center;gap:12px;
  background:var(--panel-2);border:1px solid var(--linea);
  border-radius:13px;padding:12px 14px;
}
.resp__a{
  width:38px;height:38px;flex:0 0 38px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--hero);font-weight:800;font-size:.95rem;color:#fff;
  background:linear-gradient(135deg,var(--rojo) 0%,var(--morado) 100%);
}
.resp__e{font-family:var(--tec);font-weight:700;font-size:.6rem;
         letter-spacing:.12em;text-transform:uppercase;color:var(--tenue)}
.resp__n{color:var(--blanco);font-weight:600;font-size:.88rem;margin-top:3px}

.caja-c__acc{display:flex;flex-direction:column;gap:9px;margin-top:auto}

/* ===========================================================================
   INVENTARIO — agregado el 2026-09-10
   =========================================================================== */

/* ---------- Banda de alerta de faltantes ---------- */
.alerta-b{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:rgba(240,180,41,.08);border:1px solid rgba(240,180,41,.32);
  border-radius:var(--radio);padding:18px 22px;margin-bottom:18px;
}
.alerta-b__ico{
  width:46px;height:46px;flex:0 0 46px;border-radius:13px;
  background:rgba(240,180,41,.16);color:var(--ambar);
  display:flex;align-items:center;justify-content:center;
}
.alerta-b__ico svg{width:22px;height:22px;stroke:currentColor}
.alerta-b__txt{flex:1;min-width:220px}
.alerta-b__t{
  font-family:var(--tec);font-weight:700;font-size:.72rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ambar);
}
.alerta-b__s{color:var(--texto);font-size:.83rem;margin-top:5px;line-height:1.55}
.btn--am{background:var(--ambar);color:#1E1503}
.btn--am:hover{background:#D89F1C}

/* ---------- Celdas del producto ---------- */
.prod{display:flex;align-items:center;gap:14px;min-width:0}
.prod__ico{
  width:44px;height:44px;flex:0 0 44px;border-radius:12px;
  background:var(--panel-2);border:1px solid var(--linea-2);color:var(--tenue);
  display:flex;align-items:center;justify-content:center;
}
.prod__ico svg{width:20px;height:20px;stroke:currentColor}
/* LA FOTO DEL PRODUCTO en el mismo cuadrito del ícono — 2026-09-16. Recortada
   al cuadrado y no estirada: las fotos del catálogo vienen de celulares, cada
   una con su proporción, y deformadas a 44x44 no se reconoce ninguna. */
.prod__ico--foto{padding:0;overflow:hidden;background:var(--panel)}
.prod__ico--foto img{width:100%;height:100%;object-fit:cover;display:block}
.prod__txt{min-width:0}
.prod__n{
  color:var(--blanco);font-weight:700;font-size:.9rem;
  text-transform:uppercase;letter-spacing:.005em;line-height:1.25;
}
.prod__b{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
.sku{
  font-family:var(--tec);font-weight:600;font-size:.6rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--tenue);
  background:var(--panel-2);border:1px solid var(--linea);
  padding:2px 8px;border-radius:5px;
}
.cate{
  font-family:var(--tec);font-weight:700;font-size:.6rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--azul-vivo);
  background:rgba(43,127,255,.1);border:1px solid rgba(43,127,255,.28);
  padding:2px 8px;border-radius:5px;
}

/* ---------- Disponibilidad ---------- */
.disp{text-align:center;white-space:nowrap}
.disp__n{font-family:var(--hero);font-weight:900;font-size:1.5rem;color:var(--blanco);line-height:1}
.disp__e{
  display:inline-flex;align-items:center;gap:6px;margin-top:7px;
  font-family:var(--tec);font-weight:600;font-size:.6rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--tenue);
}
.disp__e::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--verde)}
.disp__m{font-family:var(--tec);font-size:.6rem;letter-spacing:.06em;
         text-transform:uppercase;color:var(--tenue);margin-top:5px}
/* Bajo el mínimo, y sin stock. El color va acompañado del punto Y del texto. */
.disp--bajo .disp__n{color:var(--ambar)}
.disp--bajo .disp__e{color:var(--ambar)}
.disp--bajo .disp__e::before{background:var(--ambar)}
.disp--cero .disp__n{color:var(--rojo-vivo)}
.disp--cero .disp__e{color:var(--rojo-vivo)}
.disp--cero .disp__e::before{background:var(--rojo-vivo)}

/* ---------- Estructura de costeo ---------- */
.cost{border-left:2px solid var(--verde);padding-left:14px;white-space:nowrap}
.cost__p{font-family:var(--hero);font-weight:900;font-size:1.2rem;color:var(--verde);line-height:1.1}
.cost__p small{
  font-family:var(--tec);font-weight:700;font-size:.58rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--tenue);margin-left:7px;
}
/* El SEGUNDO precio — la pieza instalada, con mano de obra. Solo se pinta
   cuando el producto tiene los dos, asi que no deja hueco en los accesorios.
   Va mas chico y en gris: el que se cobra en el mostrador es el de arriba. */
.cost__s{margin-top:3px;font-family:var(--tec);font-size:.66rem;color:var(--tenue);
         letter-spacing:.05em;text-transform:uppercase}
.cost__s b{color:var(--texto);font-weight:700}
.cost__d{display:flex;gap:14px;margin-top:7px;font-family:var(--tec);font-size:.66rem}
.cost__d span{color:var(--tenue);letter-spacing:.05em;text-transform:uppercase}
.cost__d b{color:var(--texto);font-weight:700}
.cost__m b{color:var(--azul-vivo)}
/* Margen negativo: se vende por debajo del costo. NO puede verse igual que el
   resto — es plata que el taller pierde en cada unidad. */
.cost--perdida{border-left-color:var(--rojo)}
.cost--perdida .cost__p{color:var(--rojo-vivo)}
.cost--perdida .cost__m b{color:var(--rojo-vivo)}
.perdida-t{
  display:inline-flex;align-items:center;gap:5px;margin-top:7px;
  font-family:var(--tec);font-weight:700;font-size:.58rem;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--rojo-vivo);background:rgba(232,33,58,.12);
  border:1px solid rgba(232,33,58,.35);padding:3px 8px;border-radius:5px;
}
.perdida-t svg{width:10px;height:10px;stroke:currentColor}

/* Acción de alertas apagadas */
.acc--mudo{color:var(--ambar)}

/* ---------- Interruptor ---------- */
.sw{
  display:flex;align-items:center;gap:14px;
  background:var(--panel-2);border:1px solid var(--linea-2);
  border-radius:13px;padding:13px 15px;cursor:pointer;width:100%;text-align:left;
}
.sw__ico{
  width:34px;height:34px;flex:0 0 34px;border-radius:10px;
  background:var(--panel);border:1px solid var(--linea-2);color:var(--tenue);
  display:flex;align-items:center;justify-content:center;
}
.sw__ico svg{width:16px;height:16px;stroke:currentColor}
.sw__txt{flex:1;min-width:0}
.sw__t{color:var(--blanco);font-weight:600;font-size:.82rem}
.sw__s{color:var(--tenue);font-size:.68rem;margin-top:2px}
.sw__p{
  width:44px;height:24px;flex:0 0 44px;border-radius:999px;
  background:var(--linea-2);position:relative;transition:background .2s;
}
.sw__p::after{
  content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;
  border-radius:50%;background:var(--tenue);transition:transform .2s,background .2s;
}
.sw[aria-pressed="true"] .sw__p{background:var(--azul)}
.sw[aria-pressed="true"] .sw__p::after{transform:translateX(20px);background:#fff}
.sw[aria-pressed="true"] .sw__ico{color:var(--azul-vivo);border-color:rgba(43,127,255,.34)}

/* ---------- Historial de un producto ---------- */
.hist-k{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:18px}
@media (max-width:560px){ .hist-k{grid-template-columns:1fr} }
.hist-k__c{background:var(--panel-2);border:1px solid var(--linea-2);border-radius:13px;padding:15px 17px}
.hist-k__e{
  display:flex;align-items:center;gap:7px;
  font-family:var(--tec);font-weight:700;font-size:.6rem;
  letter-spacing:.12em;text-transform:uppercase;
}
.hist-k__e svg{width:12px;height:12px;stroke:currentColor}
.hist-k__n{font-family:var(--hero);font-weight:900;font-size:1.4rem;color:var(--blanco);margin-top:9px;line-height:1.1}
.hist-k__n small{font-family:var(--cuerpo);font-weight:400;font-size:.72rem;color:var(--tenue);margin-left:5px}
.hist-k__c--u .hist-k__e{color:var(--azul-vivo)}
.hist-k__c--i .hist-k__e{color:var(--verde)}
.hist-k__c--g .hist-k__e{color:#B69CFA}

/* Pestañas del historial */
.subtabs{display:flex;gap:22px;border-bottom:1px solid var(--linea);margin-bottom:16px}
.subtab{
  font-family:var(--tec);font-weight:700;font-size:.68rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--tenue);
  padding:0 0 11px;border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color .16s,border-color .16s;
}
.subtab:hover{color:var(--blanco)}
.subtab[aria-selected="true"]{color:var(--azul-vivo);border-bottom-color:var(--azul)}

/* Gráfico de barras de la tendencia */
.barras{
  display:flex;align-items:flex-end;gap:8px;height:120px;
  background:var(--panel-2);border:1px solid var(--linea);border-radius:13px;
  padding:16px;margin-bottom:18px;
}
.barras__c{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:7px;height:100%}
.barras__b{width:100%;border-radius:4px 4px 0 0;background:var(--azul);min-height:3px}
.barras__e{font-family:var(--tec);font-size:.58rem;letter-spacing:.06em;
          text-transform:uppercase;color:var(--tenue)}

/* ===========================================================================
   PUNTO DE VENTA e HISTORIAL DE CORTES — agregado el 2026-09-10
   =========================================================================== */

/* ---------- Encabezado del POS: caja abierta + acciones del turno ---------- */
.pos-h{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.pos-h__txt{flex:1;min-width:200px}
.caja-chip{
  display:inline-flex;align-items:center;gap:11px;
  background:var(--panel);border:1px solid rgba(61,220,151,.3);
  border-radius:12px;padding:9px 15px;
}
.caja-chip__ico{
  width:32px;height:32px;flex:0 0 32px;border-radius:9px;
  background:rgba(61,220,151,.12);color:var(--verde);
  display:flex;align-items:center;justify-content:center;
}
.caja-chip__ico svg{width:15px;height:15px;stroke:currentColor}
.caja-chip__e{font-family:var(--tec);font-weight:700;font-size:.58rem;
              letter-spacing:.11em;text-transform:uppercase;color:var(--tenue)}
.caja-chip__n{font-family:var(--tec);font-weight:700;font-size:.95rem;color:var(--verde);margin-top:2px}

/* ---------- Pestañas principales del POS ---------- */
.ptabs{display:flex;gap:26px;border-bottom:1px solid var(--linea);margin-bottom:18px;flex-wrap:wrap}
.ptab{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--tec);font-weight:700;font-size:.78rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--tenue);
  padding:0 0 13px;border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color .16s,border-color .16s;
}
.ptab:hover{color:var(--blanco)}
.ptab[aria-selected="true"]{color:var(--azul-vivo);border-bottom-color:var(--azul)}
.ptab__n{
  font-size:.62rem;background:var(--rojo-btn);color:#fff;
  padding:1px 7px;border-radius:999px;letter-spacing:.04em;
}

/* ---------- Atajos de servicio ---------- */
.chips{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:18px}
.chip{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--tec);font-weight:700;font-size:.66rem;
  letter-spacing:.09em;text-transform:uppercase;
  padding:9px 15px;border-radius:9px;border:1px solid;
  transition:background .16s;
}
.chip svg{width:13px;height:13px;stroke:currentColor}
.chip--v{color:var(--verde);border-color:rgba(61,220,151,.34);background:rgba(61,220,151,.08)}
.chip--v:hover{background:rgba(61,220,151,.18)}
.chip--a{color:var(--azul-vivo);border-color:rgba(43,127,255,.34);background:rgba(43,127,255,.08)}
.chip--a:hover{background:rgba(43,127,255,.18)}
.chip--m{color:#B69CFA;border-color:rgba(139,92,246,.34);background:rgba(139,92,246,.1)}
.chip--m:hover{background:rgba(139,92,246,.2)}
.chip--am{color:var(--ambar);border-color:rgba(240,180,41,.34);background:rgba(240,180,41,.08)}
.chip--am:hover{background:rgba(240,180,41,.18)}

/* ---------- Dos columnas: catálogo + carrito ---------- */
.pos-l{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}
@media (max-width:1100px){ .pos-l{grid-template-columns:1fr} }

/* ---------- Rejilla de productos ---------- */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.pcard{
  background:var(--panel);border:1px solid var(--linea);
  border-radius:14px;padding:15px 16px;text-align:left;
  display:flex;flex-direction:column;gap:6px;min-height:150px;
  transition:border-color .16s,transform .12s;
}
.pcard:hover{border-color:var(--azul);transform:translateY(-2px)}
.pcard__c{font-family:var(--tec);font-weight:700;font-size:.6rem;
          letter-spacing:.11em;text-transform:uppercase;color:var(--azul-vivo)}
.pcard__n{color:var(--blanco);font-weight:700;font-size:.86rem;line-height:1.3;text-transform:uppercase}
.pcard__pie{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:auto;padding-top:12px}
.pcard__s{font-family:var(--tec);font-size:.6rem;letter-spacing:.09em;
          text-transform:uppercase;color:var(--tenue);line-height:1.4}
.pcard__s b{display:block;font-size:.82rem;color:var(--verde)}
.pcard__s--bajo b{color:var(--ambar)}
.pcard__s--cero b{color:var(--rojo-vivo)}
.pcard__p{font-family:var(--hero);font-weight:900;font-size:1.1rem;color:var(--blanco);white-space:nowrap}

/* ---------- Tarjetas de reparación lista para cobrar ---------- */
.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.rcard{
  background:var(--panel);border:1px solid var(--linea);
  border-radius:14px;padding:15px 16px;text-align:left;
  display:flex;flex-direction:column;gap:5px;
  transition:border-color .16s,transform .12s;
}
.rcard:hover{border-color:var(--verde);transform:translateY(-2px)}
.rcard__f{font-family:var(--tec);font-weight:700;font-size:.64rem;color:var(--azul-vivo)}
.rcard__e{color:var(--blanco);font-weight:700;font-size:.9rem;text-transform:uppercase;margin-top:4px}
.rcard__c{color:var(--tenue);font-size:.75rem}
/* EL PIE DE LA TARJETA BAJA DE RENGLÓN CUANDO NO CABE — 2026-09-15.

   Era una fila fija. La pastilla del estado tiene `white-space:nowrap`, así
   que cuando el rótulo es largo —"Listo para entrega", que es el que sale de
   la base— se salía por el borde derecho de la tarjeta. El demo no lo mostraba
   porque tenía "Listo" escrito a mano, que sí cabía.

   Con `wrap` la pastilla se va sola a su propio renglón cuando no entra, y no
   cambia nada cuando entra. Sirve para CUALQUIER rótulo, no solo para el que
   destapó el problema: los otros seis estados también pueden crecer.

   Lo vio el usuario en pantalla. La consola no puede ver esto (§4). */
.rcard__pie{display:flex;align-items:flex-end;justify-content:space-between;
            flex-wrap:wrap;gap:10px;margin-top:12px}
.rcard__r{font-family:var(--tec);font-size:.6rem;letter-spacing:.09em;
          text-transform:uppercase;color:var(--tenue);line-height:1.4}
/* Un nombre de equipo o de cliente largo se corta en cualquier lado antes que
   empujar la tarjeta: "Samsung Galaxy S24 Ultra 512GB" no tiene espacios donde
   convenga. */
.rcard__e,.rcard__c{overflow-wrap:anywhere}
/* Y DENTRO DE LA TARJETA la pastilla puede partir el texto. `.est` lleva
   `white-space:nowrap` para las tablas —ahi partirla desalinearia la columna—
   pero aca es lo unico que garantiza que NUNCA se salga, sin depender de que
   el rotulo mida menos que la tarjeta. Solo se parte si no cabe.
   Alcance acotado a `.rcard__pie` a proposito: no toca ninguna otra pastilla. */
.rcard__pie .est{white-space:normal;text-align:left}
.rcard__r b{display:block;font-size:.95rem;color:var(--azul-vivo)}
.rcard__r--pago b{color:var(--verde)}

/* ---------- Carrito ---------- */
.carro{
  background:var(--panel);border:1px solid var(--linea);
  border-radius:var(--radio);display:flex;flex-direction:column;
  position:sticky;top:22px;min-height:420px;
}
.carro__t{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--linea)}
.carro__ico{
  width:38px;height:38px;flex:0 0 38px;border-radius:11px;
  background:rgba(43,127,255,.12);color:var(--azul-vivo);
  display:flex;align-items:center;justify-content:center;
}
.carro__ico svg{width:18px;height:18px;stroke:currentColor}
.carro__n{font-family:var(--tec);font-weight:700;font-size:.8rem;letter-spacing:.1em;
          text-transform:uppercase;color:var(--blanco)}
.carro__c{color:var(--tenue);font-size:.66rem;margin-top:2px}
.carro__cli{padding:16px 20px;border-bottom:1px solid var(--linea)}
.carro__cuerpo{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:40px 20px;gap:12px;color:var(--tenue);text-align:center;
}
.carro__cuerpo svg{width:38px;height:38px;stroke:currentColor;opacity:.4}
.carro__pie{border-top:1px solid var(--linea);padding:18px 20px}
.carro__tot{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.carro__tot span{font-family:var(--tec);font-weight:700;font-size:.66rem;
                 letter-spacing:.11em;text-transform:uppercase;color:var(--tenue)}
.carro__tot b{font-family:var(--hero);font-weight:900;font-size:1.7rem;color:var(--blanco)}

/* ---------- Aprobaciones de caja ---------- */
/* LAS TARJETAS DE "APROBACIONES DE CAJA" se quitaron el 2026-09-15, con su
   marcado. Mostraban ₡0 y ₡0 sobre un mecanismo de doble firma que el sistema
   NO TIENE, debajo de un cartel verde que decía "Caja conciliada". Nadie lo
   había visto nunca: las tres pestañas del POS estaban rotas y ese panel no se
   podía abrir.

   Eran `.aprob`, `.aprob__c--e` y `.aprob__c--s` y ocho reglas más. Se van
   enteras: CSS de una pantalla que no existe es CSS que alguien va a tratar de
   entender algún día. Si la doble firma se construye, se diseña con lo que el
   taller pida entonces, no con lo que se dibujó en el demo.

   Lo cazó `npm run clases` en la misma corrida, que para eso está. */

/* ---------- Historial de cortes ---------- */
.folio-c{
  display:inline-block;font-family:var(--tec);font-weight:700;font-size:.7rem;
  color:var(--texto);background:var(--panel-2);border:1px solid var(--linea-2);
  padding:4px 11px;border-radius:8px;
}
.periodo{white-space:nowrap}
.periodo__a{display:flex;align-items:center;gap:8px;color:var(--blanco);font-size:.82rem;font-weight:600}
.periodo__a::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--azul);flex:0 0 7px}
.periodo__c{font-family:var(--tec);font-size:.65rem;letter-spacing:.05em;
            text-transform:uppercase;color:var(--tenue);margin-top:5px;padding-left:15px}
.tx{font-family:var(--tec);font-size:.62rem;letter-spacing:.06em;
    text-transform:uppercase;color:var(--tenue);margin-top:3px}

/* El cuadre: la diferencia entre lo que dice el sistema y lo que se contó.
   Es el número por el que existe la pantalla, así que tiene su propio bloque. */
.cuadre{
  display:inline-block;text-align:center;
  padding:8px 14px;border-radius:10px;border:1px solid;
  font-family:var(--tec);white-space:nowrap;
}
.cuadre__n{font-weight:700;font-size:.92rem;display:block}
.cuadre__e{font-size:.58rem;letter-spacing:.11em;text-transform:uppercase;margin-top:3px;display:block}
.cuadre--ok{color:var(--verde);background:rgba(61,220,151,.08);border-color:rgba(61,220,151,.28)}
.cuadre--falta{color:var(--rojo-vivo);background:rgba(232,33,58,.09);border-color:rgba(232,33,58,.32)}
.cuadre--sobra{color:var(--ambar);background:rgba(240,180,41,.08);border-color:rgba(240,180,41,.3)}

/* ---------- Movimientos de un turno ---------- */
.movs{display:flex;flex-direction:column;gap:9px}
.mov{
  display:flex;align-items:center;gap:14px;
  background:var(--panel-2);border:1px solid var(--linea);
  border-radius:12px;padding:13px 15px;
}
.mov__ico{
  width:38px;height:38px;flex:0 0 38px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
}
.mov__ico svg{width:17px;height:17px;stroke:currentColor}
.mov__ico--efvo{background:rgba(61,220,151,.1);color:var(--verde)}
.mov__ico--tarj{background:rgba(139,92,246,.13);color:#B69CFA}
.mov__txt{flex:1;min-width:0}
.mov__t{color:var(--blanco);font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.01em}
.mov__s{color:var(--tenue);font-size:.68rem;margin-top:3px}
.mov__n{font-family:var(--hero);font-weight:900;font-size:1.1rem;color:var(--blanco);white-space:nowrap;text-align:right}
.mov__v{font-family:var(--tec);font-size:.58rem;letter-spacing:.09em;
        text-transform:uppercase;color:var(--tenue);margin-top:3px;text-align:right}

/* Anulaciones */
.anul-c{
  background:rgba(240,180,41,.06);border:1px solid rgba(240,180,41,.3);
  border-radius:12px;padding:14px 16px;
}
.anul-c__t{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.anul-c__e{font-family:var(--tec);font-weight:700;font-size:.6rem;
           letter-spacing:.1em;text-transform:uppercase;color:var(--ambar)}
.anul-c__q{
  font-family:var(--tec);font-weight:700;font-size:.58rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ambar);
  background:rgba(240,180,41,.14);border:1px solid rgba(240,180,41,.34);
  padding:2px 8px;border-radius:5px;
}
.anul-c__n{color:var(--blanco);font-weight:700;font-size:.95rem;margin-top:8px}
.anul-c__f{color:var(--tenue);font-size:.68rem;margin-top:5px;line-height:1.5}
.anul-c__m{font-family:var(--hero);font-weight:900;font-size:1.2rem;color:var(--ambar);white-space:nowrap}
.anul-c__fila{display:flex;align-items:flex-start;gap:16px}
.anul-c__fila > div:first-child{flex:1;min-width:0}

/* ===========================================================================
   CLIENTES y DISPOSITIVOS — agregado el 2026-09-10
   =========================================================================== */

/* ---------- Rejilla de fichas de cliente ---------- */
.clis{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}

.ccard{
  background:var(--panel);border:1px solid var(--linea);
  border-radius:var(--radio);padding:18px 20px;
  display:flex;flex-direction:column;gap:4px;
  transition:border-color .16s;
}
.ccard:hover{border-color:var(--linea-2)}
.ccard__t{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.ccard__acc{margin-left:auto;display:flex;gap:2px}
.ccard__n{
  font-family:var(--hero);font-weight:900;font-size:1.05rem;
  color:var(--blanco);text-transform:uppercase;letter-spacing:.005em;line-height:1.2;
}
.ccard__d{display:flex;align-items:center;gap:8px;color:var(--texto);font-size:.82rem;margin-top:7px}
.ccard__d svg{width:14px;height:14px;stroke:var(--tenue);flex:0 0 14px}
.ccard__d--tenue{color:var(--tenue);font-size:.76rem}
.ccard__pie{display:flex;gap:9px;margin-top:16px}
.ccard__pie .btn{flex:1;padding:10px 12px;font-size:.68rem}

.folio-cli{
  font-family:var(--tec);font-weight:700;font-size:.6rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--tenue);
  background:var(--panel-2);border:1px solid var(--linea-2);
  padding:3px 9px;border-radius:6px;
}
.tickets{
  font-family:var(--tec);font-weight:700;font-size:.6rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--azul-vivo);
  background:rgba(43,127,255,.1);border:1px solid rgba(43,127,255,.28);
  padding:3px 9px;border-radius:6px;
}
.tickets--cero{color:var(--tenue);background:var(--panel-2);border-color:var(--linea-2)}

/* ---------- Tabla de dispositivos ---------- */
.equipo-n{
  font-family:var(--hero);font-weight:900;font-size:.95rem;
  color:var(--azul-vivo);text-transform:uppercase;letter-spacing:.005em;
}
.equipo-m{color:var(--tenue);font-size:.74rem;margin-top:4px}

/* El IMEI es lo ÚNICO que identifica un equipo de forma única. Cuando falta,
   la celda lo dice fuerte: no es un dato opcional que quedó vacío. */
.imei{
  font-family:var(--tec);font-weight:600;font-size:.76rem;
  letter-spacing:.04em;color:var(--texto);
  background:var(--panel-2);border:1px solid var(--linea-2);
  padding:5px 11px;border-radius:7px;display:inline-block;white-space:nowrap;
}
.imei--serie{color:var(--tenue)}
.imei--falta{
  color:var(--ambar);background:rgba(240,180,41,.09);
  border-color:rgba(240,180,41,.32);
}
.imei__e{
  display:block;font-size:.58rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tenue);margin-bottom:4px;font-weight:700;
}

/* ---------- Ficha del dispositivo ---------- */
.disp-g{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
@media (max-width:900px){ .disp-g{grid-template-columns:1fr} }
.campo-v{margin-bottom:16px}
.campo-v__e{
  font-family:var(--tec);font-weight:700;font-size:.62rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--tenue);
}
.campo-v__v{color:var(--blanco);font-size:1rem;font-weight:600;margin-top:6px}
.campo-v__v--g{font-family:var(--hero);font-weight:900;font-size:1.35rem;line-height:1.2}
.campo-v__v--na{color:var(--tenue);font-weight:400;font-style:italic}

/* Los códigos tapados: se ven pero no se leen hasta que alguien los pida. */
.tapado{
  display:flex;align-items:center;gap:11px;
  background:var(--panel-2);border:1px solid var(--linea-2);
  border-radius:11px;padding:11px 14px;
}
.tapado__v{
  flex:1;font-family:var(--tec);font-weight:700;font-size:1rem;
  color:var(--tenue);letter-spacing:.28em;
}
.tapado__b{
  font-family:var(--tec);font-weight:700;font-size:.6rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--azul-vivo);
  padding:6px 11px;border-radius:7px;border:1px solid rgba(43,127,255,.3);
  background:rgba(43,127,255,.08);transition:background .16s;
}
.tapado__b:hover{background:rgba(43,127,255,.2)}

/* ===========================================================================
   CONTROL DE UTILIDAD y MI EQUIPO — agregado el 2026-09-10
   =========================================================================== */

/* ---------- El panel grande del resultado ---------- */
.hero-u{
  border-radius:var(--radio);padding:30px 32px;margin-bottom:18px;
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;align-items:center;
  background:linear-gradient(115deg,rgba(43,127,255,.16) 0%,rgba(139,92,246,.14) 55%,rgba(232,33,58,.12) 100%);
  border:1px solid var(--linea-2);
}
@media (max-width:900px){ .hero-u{grid-template-columns:1fr;gap:22px;padding:24px} }
.hero-u__e{
  display:inline-block;
  font-family:var(--tec);font-weight:700;font-size:.64rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--texto);
  background:rgba(0,0,0,.25);border:1px solid var(--linea-2);
  padding:6px 14px;border-radius:999px;
}
.hero-u__n{
  font-family:var(--hero);font-weight:900;
  font-size:clamp(2.4rem,6vw,4rem);line-height:1;
  color:var(--blanco);margin:18px 0 16px;letter-spacing:-.02em;
}
.hero-u__n--mal{color:var(--rojo-vivo)}
/* El periodo en POSITIVO. Faltaba, y no por olvido: el demo solo tenia el caso
   rojo porque el numero estaba escrito a mano y era negativo. Conectada la
   pantalla, el verde hace falta el primer mes que el taller cierre bien.
   Es el mismo verde que ya usa "Margen bruto" dos cajas mas alla
   (.hero-u__c--v) y entra como INDICADOR DE ESTADO, que es lo unico para lo
   que §2 lo autoriza — nunca en un titulo ni en un boton. Medido sobre
   --panel-2: 10.05, y el fondo de esta caja es mas oscuro todavia. */
.hero-u__n--ok{color:var(--verde)}
.hero-u__t{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.veredicto{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--tec);font-weight:700;font-size:.68rem;
  letter-spacing:.1em;text-transform:uppercase;
  padding:8px 15px;border-radius:999px;border:1px solid;
}
.veredicto svg{width:14px;height:14px;stroke:currentColor}
.veredicto--ok{color:#08210F;background:var(--verde);border-color:var(--verde)}
.veredicto--mal{color:#fff;background:var(--rojo-btn);border-color:var(--rojo-btn)}
.hero-u__s{color:var(--texto);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;font-family:var(--tec)}

/* Las cuatro cifras que arman el resultado */
.hero-u__g{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:520px){ .hero-u__g{grid-template-columns:1fr} }
.hero-u__c{
  background:rgba(0,0,0,.22);border:1px solid var(--linea-2);
  border-radius:13px;padding:15px 17px;
}
.hero-u__ce{
  font-family:var(--tec);font-weight:700;font-size:.6rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--tenue);
}
.hero-u__cn{
  font-family:var(--hero);font-weight:900;font-size:1.4rem;
  color:var(--blanco);margin-top:8px;line-height:1.1;
}
.hero-u__cs{color:var(--tenue);font-size:.64rem;margin-top:6px;line-height:1.5}
.hero-u__c--v .hero-u__cn{color:var(--verde)}
.hero-u__c--r .hero-u__cn{color:var(--rojo-vivo)}

/* ---------- Listas de ingresos y egresos ---------- */
.rel{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:1000px){ .rel{grid-template-columns:1fr} }
.rel-i{
  display:flex;align-items:center;gap:13px;
  background:var(--panel-2);border:1px solid var(--linea);
  border-radius:12px;padding:13px 15px;
}
.rel-i__txt{flex:1;min-width:0}
.rel-i__t{color:var(--blanco);font-weight:600;font-size:.84rem;line-height:1.3}
.rel-i__s{color:var(--tenue);font-size:.68rem;margin-top:4px;line-height:1.45}
.rel-i__n{font-family:var(--tec);font-weight:700;font-size:.98rem;white-space:nowrap}
.rel-i__n--mas{color:var(--verde)}
.rel-i__n--menos{color:var(--rojo-vivo)}
.rel-l{display:flex;flex-direction:column;gap:9px;padding:18px 20px;max-height:420px;overflow-y:auto}

/* ---------- Mi equipo: fichas de persona ---------- */
.gente{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;margin-bottom:18px}
.persona{
  background:var(--panel);border:1px solid var(--linea);
  border-radius:var(--radio);padding:22px 24px;
}
.persona--jefe{border-color:rgba(240,180,41,.32);background:linear-gradient(180deg,rgba(240,180,41,.04) 0%,transparent 55%)}
.persona__t{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.persona__a{
  width:52px;height:52px;flex:0 0 52px;border-radius:15px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--hero);font-weight:900;font-size:1.35rem;color:#fff;
  background:linear-gradient(135deg,var(--azul) 0%,var(--morado) 100%);
}
.persona--jefe .persona__a{background:linear-gradient(135deg,#F0B429 0%,var(--rojo) 100%)}
.persona__n{font-family:var(--hero);font-weight:900;font-size:1.1rem;color:var(--blanco);line-height:1.2}
.persona__r{
  display:inline-flex;align-items:center;gap:6px;margin-top:7px;
  font-family:var(--tec);font-weight:700;font-size:.6rem;
  letter-spacing:.1em;text-transform:uppercase;
  padding:3px 9px;border-radius:6px;border:1px solid;
}
.persona__r svg{width:11px;height:11px;stroke:currentColor}
.persona__r--jefe{color:var(--ambar);background:rgba(240,180,41,.1);border-color:rgba(240,180,41,.32)}
.persona__r--op{color:var(--azul-vivo);background:rgba(43,127,255,.1);border-color:rgba(43,127,255,.3)}
.persona__acc{display:flex;gap:9px;margin-top:16px}
.persona__acc .btn{flex:1;padding:10px;font-size:.66rem}

/* ---------- Fichas de rol ---------- */
.roles{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.rol-c{
  background:var(--panel);border:1px solid var(--linea);
  border-radius:var(--radio);padding:20px 22px;
}
.rol-c__t{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.rol-c__n{font-family:var(--hero);font-weight:900;font-size:1.05rem;color:var(--blanco);text-transform:uppercase;line-height:1.2}
.rol-c__d{color:var(--tenue);font-size:.72rem;margin-top:5px}
.rol-c__acc{margin-left:auto;display:flex;gap:2px}
.rol-c__ps{display:flex;flex-wrap:wrap;gap:6px}
.pchip{
  font-family:var(--tec);font-weight:600;font-size:.6rem;
  letter-spacing:.05em;color:var(--texto);
  background:var(--panel-2);border:1px solid var(--linea-2);
  padding:4px 9px;border-radius:6px;
}
.pchip--sens{color:var(--ambar);background:rgba(240,180,41,.08);border-color:rgba(240,180,41,.3)}
.pchip--mas{color:var(--tenue);border-style:dashed}
.rol-c__pie{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-top:14px;margin-top:16px;border-top:1px solid var(--linea);
  font-family:var(--tec);font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tenue);
}

/* ---------- Matriz de permisos ---------- */
.perm-t{
  display:inline-block;margin:22px 0 12px;
  font-family:var(--tec);font-weight:700;font-size:.62rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--azul-vivo);
  background:rgba(43,127,255,.1);border:1px solid rgba(43,127,255,.28);
  padding:4px 11px;border-radius:6px;
}
.perm-g{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:640px){ .perm-g{grid-template-columns:1fr} }
.perm{
  display:flex;align-items:center;gap:12px;
  background:var(--panel-2);border:1px solid var(--linea-2);
  border-radius:11px;padding:12px 14px;text-align:left;width:100%;
  transition:border-color .16s,background .16s;
}
.perm:hover{border-color:var(--tenue)}
.perm__p{
  width:38px;height:21px;flex:0 0 38px;border-radius:999px;
  background:var(--linea-2);position:relative;transition:background .2s;
}
.perm__p::after{
  content:"";position:absolute;top:3px;left:3px;width:15px;height:15px;
  border-radius:50%;background:var(--tenue);transition:transform .2s,background .2s;
}
.perm[aria-pressed="true"] .perm__p{background:var(--azul)}
.perm[aria-pressed="true"] .perm__p::after{transform:translateX(17px);background:#fff}
.perm__t{flex:1;min-width:0;color:var(--texto);font-size:.78rem;line-height:1.35}
.perm[aria-pressed="true"] .perm__t{color:var(--blanco)}
/* Los permisos que dejan ver plata o borrar cosas se marcan SIEMPRE, prendidos
   o apagados: son los que hay que pensar dos veces antes de dar. */
.perm--sens{border-color:rgba(240,180,41,.28)}
.perm--sens[aria-pressed="true"]{background:rgba(240,180,41,.07);border-color:rgba(240,180,41,.45)}
.perm--sens .perm__a{
  width:20px;height:20px;flex:0 0 20px;color:var(--ambar);
  display:flex;align-items:center;justify-content:center;
}
.perm--sens .perm__a svg{width:15px;height:15px;stroke:currentColor}
.perm[aria-pressed="true"].perm--sens .perm__p{background:var(--ambar)}

/* Asientos disponibles */
.asientos{
  display:inline-flex;align-items:center;gap:11px;
  background:var(--panel);border:1px solid var(--linea);
  border-radius:12px;padding:10px 16px;
}
.asientos__e{font-family:var(--tec);font-weight:700;font-size:.58rem;
             letter-spacing:.11em;text-transform:uppercase;color:var(--tenue)}
.asientos__n{font-family:var(--hero);font-weight:900;font-size:1.15rem;color:var(--blanco);margin-top:3px}

/* ===========================================================================
   REPORTES — agregado el 2026-09-10
   =========================================================================== */

/* ---------- Medidor grande de porcentaje ---------- */
.medidor{
  background:var(--panel-2);border:1px solid var(--linea-2);
  border-radius:15px;padding:18px 22px;min-width:190px;
}
.medidor__e{font-family:var(--tec);font-weight:700;font-size:.6rem;
            letter-spacing:.12em;text-transform:uppercase;color:var(--tenue)}
.medidor__n{font-family:var(--hero);font-weight:900;font-size:2.1rem;color:var(--blanco);line-height:1.05;margin-top:8px}
.medidor__b{height:6px;border-radius:3px;background:var(--linea-2);margin-top:12px;overflow:hidden}
.medidor__b i{display:block;height:100%;border-radius:3px;background:var(--azul)}
.medidor__s{color:var(--tenue);font-size:.65rem;margin-top:8px;line-height:1.5}

/* ---------- Gráfico de dos barras por mes, con negativos ----------
   La línea del cero está al 65 % de la altura: lo positivo sube desde ahí y lo
   negativo baja. Sin esa línea, un mes en pérdida se dibuja igual que uno bueno
   y solo cambia el color — que es lo que hace ReparaCel. */
.meses{
  display:flex;gap:10px;align-items:stretch;height:230px;
  padding:18px 20px 0;position:relative;
}
.mes{flex:1;display:flex;flex-direction:column;min-width:0}
.mes__g{flex:1;position:relative}
/* La línea del cero, que cruza todo el gráfico */
.meses::before{
  content:"";position:absolute;left:20px;right:20px;top:calc(18px + (100% - 46px) * .65);
  height:1px;background:var(--linea-2);
}
.mes__b{
  position:absolute;width:38%;border-radius:4px 4px 0 0;
}
.mes__b--ing{left:8%;background:var(--azul);bottom:35%}
.mes__b--uti{right:8%;background:var(--verde);bottom:35%}
/* En pérdida la barra cuelga hacia abajo Y cambia de color */
.mes__b--mal{background:var(--rojo);border-radius:0 0 4px 4px;bottom:auto;top:65%}
.mes__e{
  text-align:center;padding:8px 0 14px;
  font-family:var(--tec);font-weight:700;font-size:.62rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--tenue);
}
.mes__e small{display:block;font-size:.55rem;color:var(--tenue);opacity:.7;margin-top:3px;letter-spacing:.04em}

/* ---------- Flujo de operación: estados con barra ---------- */
.flujo{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){ .flujo{grid-template-columns:1fr} }
.flujo__i{background:var(--panel-2);border:1px solid var(--linea);border-radius:12px;padding:14px 16px}
.flujo__t{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.flujo__ico{
  width:30px;height:30px;flex:0 0 30px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
}
.flujo__ico svg{width:14px;height:14px;stroke:currentColor}
.flujo__n{flex:1;color:var(--texto);font-size:.8rem;font-weight:600}
.flujo__c{
  font-family:var(--tec);font-weight:700;font-size:.72rem;color:var(--blanco);
  background:var(--panel);border:1px solid var(--linea-2);padding:3px 10px;border-radius:6px;
}
.flujo__b{height:5px;border-radius:3px;background:var(--linea-2);overflow:hidden}
.flujo__b i{display:block;height:100%;border-radius:3px}
.flujo__p{
  display:flex;justify-content:space-between;gap:8px;margin-top:7px;
  font-family:var(--tec);font-size:.58rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--tenue);
}

/* ---------- Ranking de productividad ---------- */
.rank{display:flex;flex-direction:column;gap:11px}
.rank__i{
  display:flex;align-items:center;gap:14px;
  background:var(--panel-2);border:1px solid var(--linea);
  border-radius:13px;padding:14px 16px;
}
.rank__p{
  width:40px;height:40px;flex:0 0 40px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--hero);font-weight:900;font-size:1rem;color:var(--blanco);
  background:var(--panel);border:1px solid var(--linea-2);
}
.rank__txt{flex:1;min-width:0}
.rank__n{color:var(--blanco);font-weight:700;font-size:.88rem}
.rank__s{color:var(--tenue);font-size:.68rem;margin-top:3px}
.rank__c{text-align:right;white-space:nowrap}
.rank__cn{font-family:var(--hero);font-weight:900;font-size:1.35rem;color:var(--azul-vivo);line-height:1}
.rank__ce{font-family:var(--tec);font-size:.56rem;letter-spacing:.11em;
          text-transform:uppercase;color:var(--tenue);margin-top:4px}

/* ---------- Métodos de pago ---------- */
.pagos{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.pago-c{border-radius:14px;padding:18px 20px;border:1px solid}
.pago-c__t{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.pago-c__ico{
  width:38px;height:38px;flex:0 0 38px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
}
.pago-c__ico svg{width:17px;height:17px;stroke:currentColor}
.pago-c__pc{font-family:var(--hero);font-weight:900;font-size:1.5rem}
.pago-c__e{font-family:var(--tec);font-weight:700;font-size:.6rem;
           letter-spacing:.12em;text-transform:uppercase;color:var(--tenue)}
.pago-c__n{font-family:var(--hero);font-weight:900;font-size:1.35rem;color:var(--blanco);margin-top:6px;line-height:1.1}
.pago-c--efvo{border-color:rgba(61,220,151,.3);background:rgba(61,220,151,.05)}
.pago-c--efvo .pago-c__ico{background:rgba(61,220,151,.12);color:var(--verde)}
.pago-c--efvo .pago-c__pc{color:var(--verde)}
.pago-c--tarj{border-color:rgba(139,92,246,.32);background:rgba(139,92,246,.05)}
.pago-c--tarj .pago-c__ico{background:rgba(139,92,246,.14);color:#B69CFA}
.pago-c--tarj .pago-c__pc{color:#B69CFA}
.pago-c--transf{border-color:rgba(43,127,255,.3);background:rgba(43,127,255,.05)}
.pago-c--transf .pago-c__ico{background:rgba(43,127,255,.12);color:var(--azul-vivo)}
.pago-c--transf .pago-c__pc{color:var(--azul-vivo)}

/* ---------- Repuestos más usados ---------- */
.reps{display:flex;flex-direction:column;gap:11px}
.rep-i{
  display:flex;align-items:center;gap:14px;
  background:var(--panel-2);border:1px solid var(--linea);
  border-radius:12px;padding:13px 15px;
}
.rep-i__p{
  width:32px;height:32px;flex:0 0 32px;border-radius:9px;
  background:var(--panel);border:1px solid var(--linea-2);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--tec);font-weight:700;font-size:.78rem;color:var(--tenue);
}
.rep-i__txt{flex:1;min-width:0}
.rep-i__n{color:var(--blanco);font-weight:600;font-size:.84rem;line-height:1.3}
.rep-i__b{height:4px;border-radius:2px;background:var(--linea-2);margin-top:8px;overflow:hidden}
.rep-i__b i{display:block;height:100%;border-radius:2px;background:var(--azul)}
.rep-i__c{text-align:right;white-space:nowrap}
.rep-i__cn{font-family:var(--tec);font-weight:700;font-size:.88rem;color:var(--azul-vivo)}
.rep-i__ce{font-family:var(--tec);font-size:.56rem;letter-spacing:.1em;
           text-transform:uppercase;color:var(--tenue);margin-top:3px}

/* ---------- Aviso de "esto está en otro lado" ---------- */
.puente{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:rgba(61,220,151,.06);border:1px solid rgba(61,220,151,.28);
  border-radius:var(--radio);padding:18px 22px;margin-bottom:18px;
}
.puente__ico{
  width:42px;height:42px;flex:0 0 42px;border-radius:12px;
  background:rgba(61,220,151,.12);color:var(--verde);
  display:flex;align-items:center;justify-content:center;
}
.puente__ico svg{width:19px;height:19px;stroke:currentColor}
.puente__txt{flex:1;min-width:220px}
.puente__t{font-family:var(--tec);font-weight:700;font-size:.72rem;
           letter-spacing:.1em;text-transform:uppercase;color:var(--verde)}
.puente__s{color:var(--texto);font-size:.82rem;margin-top:5px;line-height:1.55}

/* ===========================================================================
   CONFIGURACIÓN — agregado el 2026-09-10
   =========================================================================== */

/* ---------- Zona del logo ---------- */
.logo-z{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.logo-c{
  width:150px;height:150px;flex:0 0 150px;border-radius:18px;
  background:var(--panel-2);border:1px solid var(--linea-2);
  display:flex;align-items:center;justify-content:center;overflow:hidden;padding:14px;
}
.logo-c img{max-width:100%;max-height:100%;object-fit:contain}
.logo-t{flex:1;min-width:220px}
.logo-t__t{font-family:var(--tec);font-weight:700;font-size:.66rem;
           letter-spacing:.12em;text-transform:uppercase;color:var(--tenue)}
.logo-t__s{color:var(--texto);font-size:.8rem;margin-top:8px;line-height:1.6}
.logo-t__acc{display:flex;gap:9px;margin-top:14px;flex-wrap:wrap}

/* ---------- Selector de tipo de documento ---------- */
.docs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.doc{
  flex:1;min-width:104px;padding:15px 10px;border-radius:12px;text-align:center;
  background:var(--panel-2);border:1.5px solid var(--linea-2);color:var(--tenue);
  transition:border-color .16s,color .16s,background .16s;
}
.doc svg{width:20px;height:20px;stroke:currentColor;margin:0 auto 8px}
.doc__t{font-family:var(--tec);font-weight:700;font-size:.62rem;
        letter-spacing:.09em;text-transform:uppercase}
.doc:hover{color:var(--blanco);border-color:var(--tenue)}
.doc[aria-pressed="true"]{border-color:var(--azul);background:rgba(43,127,255,.1);color:var(--azul-vivo)}

/* ---------- Vista previa del papel ---------- */
.vista-p{
  background:#fff;color:#000;border-radius:8px;padding:18px 16px;
  font-family:"Consolas","DejaVu Sans Mono","Courier New",monospace;
  font-size:.68rem;line-height:1.5;max-width:290px;margin:0 auto;
}
.vista-p__logo{display:block;width:64px;margin:0 auto 8px;filter:grayscale(1) contrast(1.6)}
.vista-p__m{text-align:center;font-weight:700;font-size:.86rem;line-height:1.2}
.vista-p__s{text-align:center;font-size:.62rem;margin-top:3px}
.vista-p__sep{border:none;border-top:1px dashed #000;margin:9px 0}
.vista-p__l{display:flex;justify-content:space-between;gap:10px}
.vista-p__l b{font-weight:700}
.vista-p__t{display:flex;justify-content:space-between;gap:10px;font-weight:700;font-size:.85rem;margin-top:4px}
.vista-p__c{text-align:center;font-size:.6rem;margin-top:9px;line-height:1.45}

/* La cinta que dice si el logo va a salir o no */
.aviso-logo{
  display:flex;align-items:center;gap:11px;
  border-radius:11px;padding:11px 14px;margin-bottom:14px;
  font-size:.76rem;line-height:1.5;
}
.aviso-logo svg{width:17px;height:17px;stroke:currentColor;flex:0 0 17px}
.aviso-logo--ok{color:var(--verde);background:rgba(61,220,151,.08);border:1px solid rgba(61,220,151,.3)}
.aviso-logo--no{color:var(--ambar);background:rgba(240,180,41,.08);border:1px solid rgba(240,180,41,.32)}

/* ---------- Catálogos de marcas y tipos ---------- */
.cat-g{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:820px){ .cat-g{grid-template-columns:1fr} }
.cat-l{display:flex;flex-direction:column;gap:7px;max-height:240px;overflow-y:auto;margin-top:12px}
.cat-i{
  display:flex;align-items:center;gap:10px;
  background:var(--panel-2);border:1px solid var(--linea);
  border-radius:10px;padding:10px 13px;
}
.cat-i__n{flex:1;min-width:0;color:var(--texto);font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.01em}
.cat-i__x{
  width:26px;height:26px;flex:0 0 26px;border-radius:7px;color:var(--tenue);
  display:flex;align-items:center;justify-content:center;transition:color .16s,background .16s;
}
.cat-i__x:hover{color:var(--rojo-vivo);background:var(--negro)}
.cat-i__x svg{width:13px;height:13px;stroke:currentColor}
/* Una entrada sospechosa: mal escrita, o que no es lo que dice ser */
.cat-i--ojo{border-color:rgba(240,180,41,.34);background:rgba(240,180,41,.05)}
.cat-i--ojo .cat-i__n{color:var(--ambar)}
.cat-i__p{
  font-family:var(--tec);font-weight:700;font-size:.56rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ambar);
  background:rgba(240,180,41,.14);border:1px solid rgba(240,180,41,.34);
  padding:2px 7px;border-radius:5px;white-space:nowrap;
}
.cat-add{display:flex;gap:9px}
.cat-add .campo{flex:1}
.cat-add__b{
  width:46px;flex:0 0 46px;border-radius:11px;
  background:var(--azul);color:#fff;
  display:flex;align-items:center;justify-content:center;transition:background .16s;
}
.cat-add__b:hover{background:var(--azul-vivo)}
.cat-add__b svg{width:18px;height:18px;stroke:currentColor}

/* ---------- Registro de auditoría ---------- */
.log-a{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--tec);font-weight:700;font-size:.6rem;
  letter-spacing:.09em;text-transform:uppercase;
  padding:5px 11px;border-radius:7px;border:1px solid;white-space:nowrap;
}
.log-a svg{width:12px;height:12px;stroke:currentColor}
.log-a--nuevo{color:var(--azul-vivo);background:rgba(43,127,255,.1);border-color:rgba(43,127,255,.3)}
.log-a--edit{color:var(--ambar);background:rgba(240,180,41,.09);border-color:rgba(240,180,41,.3)}
.log-a--cobro{color:var(--verde);background:rgba(61,220,151,.09);border-color:rgba(61,220,151,.3)}
.log-a--borra{color:var(--rojo-vivo);background:rgba(232,33,58,.1);border-color:rgba(232,33,58,.32)}
.log-d{color:var(--texto);font-size:.78rem;line-height:1.45}
.log-f{font-family:var(--tec);font-weight:600;font-size:.78rem;color:var(--blanco)}
.log-f small{display:block;font-weight:400;font-size:.66rem;color:var(--tenue);margin-top:3px}

/* ---------- La fila recién creada ----------
   Se marca unos segundos despues de guardar. Hoy la lista se ordena por
   numero y la nueva queda arriba — pero cuando haya 200 ordenes eso ya no va
   a ser obvio, y este destello es lo que va a decir cual es. */
.recien{animation:aparecio 2.6s ease-out}
@keyframes aparecio{
  0%, 55% { background:rgba(61,220,151,.16) }
  100%    { background:transparent }
}
@media (prefers-reduced-motion:reduce){
  .recien{animation:none;background:rgba(61,220,151,.12)}
}

/* ---------- Campo obligatorio, y campo con problema ----------
   El obligatorio se marca en el CONTROL con data-req, no en la etiqueta: estos
   campos no tienen etiqueta arriba, solo placeholder. Y se marca con el BORDE
   y no con un asterisco, porque un asterisco al final de un placeholder gris
   no lo ve nadie.

   Ambar y no rojo: el rojo es para lo que esta MAL. Esto todavia no esta mal,
   solo falta.

   CONTRASTES MEDIDOS sobre --panel-2 (#141821):
     borde .55  ->  #8D6E25  =  3.71   (un borde que SIGNIFICA algo necesita
                                        3.0; con .40 daba 2.53 y no pasaba)
     placeholder    #9A8548  =  4.92   (es texto: necesita 4.5) */
[data-req]{border-color:rgba(240,180,41,.55) !important}
[data-req]:focus{border-color:var(--azul) !important}
[data-req]::placeholder{color:#9A8548}

/* El campo que el servidor rechazo. El borde rojo Y el fondo: el color solo
   no alcanza para quien no distingue rojo de gris. */
.campo--mal > input,
.campo--mal > select,
.campo--mal > textarea,
.campo--mal input,
.campo--mal select{
  border-color:var(--rojo) !important;
  background:rgba(232,33,58,.07);
}
.campo--mal .campo__i{stroke:var(--rojo-vivo)}

/* ---------- Aviso flotante ----------
   Para cosas que el usuario tiene que SABER pero que no le piden hacer nada
   —"se borraron los codigos al entregar"—. Un alert() para eso obliga a
   apretar aceptar por algo que no era una pregunta. */
.aviso-flota{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:80;
  display:flex;align-items:center;gap:11px;max-width:min(520px,92vw);
  background:var(--panel);border:1px solid rgba(43,127,255,.4);
  border-radius:13px;padding:14px 20px;
  box-shadow:0 12px 40px rgba(0,0,0,.55);
  color:var(--texto);font-size:.84rem;line-height:1.5;
  animation:subeAviso .22s ease-out;
}
.aviso-flota svg{width:18px;height:18px;stroke:var(--azul-vivo);flex:0 0 18px}
@keyframes subeAviso{
  from { opacity:0; transform:translate(-50%, 12px) }
  to   { opacity:1; transform:translate(-50%, 0) }
}
@media (prefers-reduced-motion:reduce){ .aviso-flota{animation:none} }

/* Un pago anulado: sigue a la vista, tachado, y deja de contar. */
tr.anulado .importe{text-decoration:line-through;opacity:.6}


/* ===========================================================================
   SweetAlert2 — tema oscuro, 2026-09-11.

   La libreria viene con tema CLARO: un recuadro blanco en medio de un sistema
   negro se ve como un error, no como un aviso. Esto lo pone en la paleta del
   proyecto, usando los MISMOS tokens que el resto (--panel-2, --linea, --texto)
   para que si algun dia cambia un color, cambie tambien aca.

   Las clases `swal2-*` son de la libreria y NO chocan con ninguna del proyecto
   (comprobado: 0 coincidencias). Por eso se tocan directamente en vez de
   envolverlas en una clase propia.
   =========================================================================== */
.swal2-popup{
  background:var(--panel-2);
  border:1px solid var(--linea);
  border-radius:16px;
  color:var(--texto);
  font-family:var(--cuerpo);
}
.swal2-title{color:var(--blanco);font-family:var(--hero);font-size:1.12rem}
.swal2-html-container{color:var(--texto);font-size:.9rem;line-height:1.6}

/* Los botones se ven como los del sistema: el rojo manda las acciones y el
   gris las cancela, igual que en toda la aplicacion (§2 del CLAUDE.md). */
.swal2-styled.swal2-confirm{
  background:var(--rojo-btn)!important;
  border-radius:10px;font-weight:700;font-size:.79rem;padding:11px 20px;
}
.swal2-styled.swal2-cancel{
  background:transparent!important;
  border:1px solid var(--linea)!important;
  color:var(--texto)!important;
  border-radius:10px;font-weight:700;font-size:.79rem;padding:11px 20px;
}
.swal2-styled:focus{box-shadow:none;outline:2px solid var(--rojo-vivo);outline-offset:3px}

/* El campo de texto del `prompt`: mismo aspecto que cualquier campo del
   sistema, para que no parezca de otra aplicacion. */
.swal2-input,.swal2-textarea{
  background:var(--panel)!important;
  border:1px solid var(--linea)!important;
  color:var(--blanco)!important;
  border-radius:10px;font-family:var(--cuerpo);
}
.swal2-input:focus,.swal2-textarea:focus{border-color:var(--azul)!important;box-shadow:none}
.swal2-validation-message{
  background:rgba(232,33,58,.08)!important;
  color:var(--rojo-vivo)!important;
}

/* La cortina, mas oscura que la de fabrica: atras hay un fondo casi negro y la
   gris de la libreria casi no se nota. */
.swal2-container{background:rgba(4,5,8,.72)}

/* Los iconos de fabrica son muy saturados para este fondo. */
.swal2-icon.swal2-warning{border-color:var(--ambar);color:var(--ambar)}
.swal2-icon.swal2-error{border-color:var(--rojo-vivo);color:var(--rojo-vivo)}
.swal2-icon.swal2-success{border-color:var(--verde);color:var(--verde)}
.swal2-icon.swal2-success [class^='swal2-success-line']{background-color:var(--verde)}
.swal2-icon.swal2-success .swal2-success-ring{border-color:rgba(61,220,151,.3)}
.swal2-icon.swal2-info,.swal2-icon.swal2-question{border-color:var(--azul);color:var(--azul)}

/* ===========================================================================
   LA COTIZACION PARA MANDAR — la tarjeta que se fotografia.   2026-09-14

   El cliente del taller no manda un PDF ni un enlace: manda UN PANTALLAZO por
   WhatsApp. Asi que esto no es "el detalle de la cotizacion": es una pieza
   pensada para que se lea bien RECORTADA Y COMPRIMIDA en un chat, en un
   telefono, con el pulgar encima.

   Tres decisiones que salen de eso y que no son de gusto:

   · FONDO CLARO Y LETRA OSCURA, al reves que todo el resto del sistema. Una
     tarjeta oscura fotografiada y comprimida por WhatsApp se llena de manchas
     en los degradados, y el precio es justo lo que no puede quedar dudoso.
   · EL PRECIO ENORME. Es el dato que el cliente busca primero y el unico que
     se lee sin acercar el telefono.
   · NADA QUE NO VAYA A SALIR EN LA FOTO. Ni botones, ni costo, ni margen, ni
     el estado interno. Lo que esta adentro del recuadro, sale.
   =========================================================================== */
.cotf{
  background:#FFFFFF;color:#10141C;border-radius:14px;
  padding:26px 24px 20px;max-width:440px;margin:0 auto;
  font-family:var(--cuerpo);
}
.cotf__enc{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  border-bottom:2px solid #10141C;padding-bottom:10px;margin-bottom:16px;
}
.cotf__taller{font-family:var(--hero);font-weight:900;font-size:1.15rem;letter-spacing:-.01em}
.cotf__folio{font-family:var(--tec);font-weight:700;font-size:.8rem;color:#5A6472}

.cotf__cli{font-weight:700;font-size:1.05rem;line-height:1.2}
.cotf__eq{font-size:.92rem;color:#3C4553;margin-top:2px;margin-bottom:18px}

.cotf__d{margin-bottom:14px}
.cotf__e{
  font-family:var(--tec);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:#6B7585;
}
.cotf__v{font-size:1.05rem;font-weight:600;line-height:1.3;margin-top:3px;overflow-wrap:anywhere}

/* El precio, separado y grande: es lo que se lee de lejos. */
.cotf__precio{
  border-top:1px solid #D7DCE4;margin-top:18px;padding-top:14px;
}
.cotf__n{
  font-family:var(--hero);font-weight:900;font-size:2.2rem;line-height:1.05;
  margin-top:2px;letter-spacing:-.02em;
}
.cotf__pie{
  font-size:.72rem;color:#6B7585;margin-top:16px;line-height:1.5;
  border-top:1px solid #EDF0F4;padding-top:10px;
}

/* En un telefono la tarjeta usa el ancho que haya: se fotografia desde el
   celular del mostrador tanto como desde la computadora. */
@media (max-width:520px){
  .cotf{padding:20px 16px 16px}
  .cotf__n{font-size:1.8rem}
}

/* ===========================================================================
   EL DIALOGO DE COBRO.   2026-09-15

   Lo que el mostrador mira primero es CUANTO HAY QUE COBRAR, y despues con que
   se lo pagan. Por eso el total va grande y arriba, y el resto es mas chico:
   el que cobra tiene al cliente enfrente esperando.
   =========================================================================== */
.cobro__tot{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 18px;margin-bottom:16px;
  background:var(--panel-2);border:1px solid var(--linea);border-radius:12px;
}
.cobro__n{
  font-family:var(--hero);font-weight:900;font-size:2rem;line-height:1.05;
  color:var(--verde);letter-spacing:-.02em;margin-top:2px;
}
/* El desglose solo aparece cuando hay descuento: sin el, decir "₡18.000 − ₡0"
   es ruido que hay que leer para descubrir que no dice nada. */
.cobro__d{font-family:var(--tec);font-size:.72rem;color:var(--tenue);margin-top:4px}

/* El vuelto. Va al lado del efectivo recibido porque es su respuesta. */
.cobro__v{padding-bottom:10px;text-align:right}
.cobro__vn{
  font-family:var(--tec);font-weight:700;font-size:1.3rem;color:var(--azul-vivo);
  line-height:1.1;margin-top:3px;
}

/* Una linea del pago mixto: metodo, monto y el boton de sacarla. */
.cobro__l{
  display:grid;grid-template-columns:1fr 130px auto;gap:10px;align-items:center;
  margin-bottom:10px;
}


/* ---------- Buscar o agregar cliente en el ticket — 2026-09-16 ----------
   La lista cuelga del buscador y tapa lo de abajo, como en ReparaCel: empujar
   el formulario cada vez que se escribe una letra hace saltar todo. */
.tcli{position:relative}
.tcli__lista{
  position:absolute;left:0;right:0;top:calc(100% - 8px);z-index:5;
  background:var(--panel-2);border:1px solid var(--linea-2);border-radius:11px;
  padding:6px;max-height:280px;overflow:auto;box-shadow:0 14px 30px rgba(0,0,0,.45);
}
.tcli__op{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:9px 10px;border-radius:8px;color:var(--texto);
}
.tcli__op:hover,.tcli__op:focus-visible{background:var(--negro);outline:none}
.tcli__op svg{width:16px;height:16px;stroke:currentColor;flex:0 0 16px}
.tcli__op--nuevo{color:var(--verde);border-bottom:1px solid var(--linea);border-radius:8px 8px 0 0;margin-bottom:4px}
.tcli__card{
  display:flex;align-items:center;gap:12px;margin-bottom:14px;
  background:var(--panel);border:1px solid rgba(61,220,151,.34);border-radius:11px;padding:10px 12px;
}
.tcli__card > svg{width:18px;height:18px;stroke:var(--verde);flex:0 0 18px}
.tcli__i{flex:1;min-width:0}
.tcli__n{color:var(--blanco);font-weight:600;font-size:.86rem;text-transform:uppercase}
.tcli__t{font-family:var(--tec);font-size:.7rem;color:var(--azul-vivo);margin-top:2px}