/* ============================================================
   Ciclo Campeon - hoja de estilos unica
   Paleta clara: azul de marca, gris cromo y blanco.
   ============================================================ */
:root{
  --azul:#0F62C8;
  --azul-osc:#0A4A9B;
  --azul-vivo:#1E88FF;
  --azul-suave:#E8F1FD;
  --azul-borde:#BFD8F5;
  --niebla:#F3F6FA;
  --papel:#FFFFFF;
  --tinta:#1A2733;
  --gris:#2B3742;        /* texto secundario: oscuro, legible sobre blanco */
  --gris-claro:#55636F;  /* texto de ayuda: gris oscuro, no claro */
  --linea:#DCE4EC;
  --linea-2:#EDF2F7;
  --maillot:#F2B705;
  --maillot-osc:#C08F00;
  --ruta:#D32F3F;
  --pasto:#0E7A50;
  --radio:10px;
  --radio-s:6px;
  --sombra:0 1px 2px rgba(26,39,51,.06);
  --sombra-alta:0 10px 30px rgba(26,39,51,.14);
  --lateral:224px;
  --fuente:"Barlow","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --fuente-cond:"Barlow Semi Condensed","Barlow","Segoe UI Semibold",system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--niebla);color:var(--tinta);
  font-family:var(--fuente);font-size:14.5px;line-height:1.48;
}
h1,h2,h3,h4{font-family:var(--fuente-cond);font-weight:600;letter-spacing:.1px;margin:0 0 .4em}
h1{font-size:1.36rem}
h2{font-size:1.1rem}
h3{font-size:.98rem}
a{color:var(--azul);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--azul-vivo);outline-offset:2px}
table{border-collapse:collapse;width:100%}
img{max-width:100%}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ---------- Estructura ---------- */
.app{display:flex;min-height:100vh}
.lateral{
  width:var(--lateral);flex:0 0 var(--lateral);background:var(--papel);color:var(--gris);
  border-right:1px solid var(--linea);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
}
.marca{padding:14px 16px 12px;border-bottom:1px solid var(--linea)}
.marca-logo{display:block;line-height:0}
.marca-logo img{display:block;width:auto;max-width:100%;max-height:56px;object-fit:contain}
.marca-sede{margin-top:8px;font-size:.76rem;color:var(--gris-claro)}

.nav{padding:8px 0;overflow-y:auto;flex:1}
.nav-grupo{padding:12px 16px 4px;font-size:.68rem;color:var(--gris-claro);letter-spacing:.1em;text-transform:uppercase}
.nav-enlace{
  display:flex;align-items:center;gap:9px;padding:8px 16px;color:var(--tinta);
  font-size:.9rem;border-left:3px solid transparent;
}
.nav-enlace:hover{background:var(--linea-2);color:var(--tinta);text-decoration:none}
.nav-enlace.es-activo{background:var(--azul-suave);border-left-color:var(--azul);color:var(--azul-osc);font-weight:600}
.nav-enlace svg{width:16px;height:16px;flex:0 0 16px;stroke:currentColor;fill:none;stroke-width:1.7}
.lateral-pie{padding:12px 16px;border-top:1px solid var(--linea);font-size:.78rem}
.lateral-pie a{color:var(--tinta)}

.principal{flex:1;min-width:0;display:flex;flex-direction:column}
.barra{
  background:var(--papel);border-bottom:1px solid var(--linea);
  padding:10px 18px;display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:20;
}
.barra h1{margin:0}
.barra-espacio{flex:1}
.usuario-chip{display:flex;align-items:center;gap:8px;font-size:.84rem;color:var(--gris)}
.avatar{
  width:30px;height:30px;border-radius:50%;background:var(--azul);color:#fff;
  display:grid;place-items:center;font-family:var(--fuente-cond);font-size:.86rem
}
.contenido{padding:18px;flex:1}
.abrir-menu{display:none;background:none;border:1px solid var(--linea);border-radius:var(--radio-s);padding:6px 9px;cursor:pointer}

/* ---------- Tarjetas ---------- */
.tarjeta{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);box-shadow:var(--sombra)}
.tarjeta-cab{padding:12px 16px;border-bottom:1px solid var(--linea);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tarjeta-cab h2,.tarjeta-cab h3{margin:0}
.tarjeta-cuerpo{padding:16px}
.rejilla{display:grid;gap:14px}
.r-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.r-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.r-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.r-pos{grid-template-columns:minmax(0,1.55fr) minmax(300px,.8fr);align-items:start}

/* Indicadores del panel */
.dato{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);padding:13px 15px}
.dato .etiqueta{font-size:.76rem;color:var(--tinta)}
.dato .cifra{font-family:var(--fuente-cond);font-size:1.5rem;line-height:1.15;margin-top:2px}
.dato.oro{border-top:3px solid var(--azul)}
.dato.taller{border-top:3px solid var(--azul-vivo)}

/* ---------- Formularios ---------- */
label{display:block;font-size:.8rem;color:var(--tinta);margin-bottom:3px}
input[type=text],input[type=password],input[type=number],input[type=date],input[type=email],input[type=search],select,textarea{
  width:100%;padding:7px 10px;border:1px solid var(--linea);border-radius:var(--radio-s);
  font:inherit;font-size:.92rem;color:var(--tinta);background:var(--papel);
}
input:focus,select:focus,textarea:focus{border-color:var(--azul);outline:none;box-shadow:0 0 0 3px rgba(15,98,200,.14)}
input[readonly]{background:#F5F8FB;color:var(--gris)}
textarea{resize:vertical;min-height:70px}
.campo{margin-bottom:12px}
.campos{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.ayuda{font-size:.76rem;color:var(--gris-claro);margin-top:3px}
.requerido::after{content:" *";color:var(--ruta)}

.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 14px;border-radius:var(--radio-s);
  border:1px solid transparent;background:var(--azul);color:#fff;font:inherit;font-size:.9rem;font-weight:500;
  cursor:pointer;text-decoration:none;line-height:1.3;
}
.boton:hover{background:var(--azul-osc);text-decoration:none;color:#fff}
.boton.oro{background:var(--azul);color:#fff}
.boton.oro:hover{background:var(--azul-osc);color:#fff}
.boton.suave{background:var(--papel);border-color:var(--linea);color:var(--tinta)}
.boton.suave:hover{background:var(--linea-2);color:var(--tinta)}
.boton.peligro{background:var(--ruta)}
.boton.peligro:hover{background:#A81F2D}
.boton.chico{padding:5px 9px;font-size:.82rem}
.boton.ancho{width:100%;justify-content:center}
.boton[disabled]{opacity:.5;cursor:not-allowed}
.acciones{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ---------- Tablas ---------- */
.tabla-caja{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabla{width:100%;font-size:.87rem}
.tabla th{
  text-align:left;padding:8px 11px;border-bottom:2px solid var(--linea);
  font-family:var(--fuente-cond);font-weight:600;color:var(--gris);white-space:nowrap;font-size:.88rem;
}
.tabla td{padding:8px 11px;border-bottom:1px solid var(--linea-2);vertical-align:middle}
.tabla tbody tr:hover{background:#F7FAFD}
.tabla .der{text-align:right}
.tabla .cen{text-align:center}
.vacio{padding:28px 16px;text-align:center;color:var(--gris)}
.vacio p{margin:6px 0 12px}

/* ---------- Etiquetas de estado ---------- */
.tag{display:inline-block;padding:2px 8px;border-radius:99px;font-size:.74rem;font-weight:500;border:1px solid;white-space:nowrap}
.tag-ok{background:#E7F5EE;color:var(--pasto);border-color:#B9E2CE}
.tag-no{background:#FBE9EB;color:var(--ruta);border-color:#F0C2C7}
.tag-espera{background:#FFF6DC;color:#8A6400;border-color:#F3DFA2}
.tag-taller{background:var(--azul-suave);color:var(--azul-osc);border-color:var(--azul-borde)}
.tag-sede{background:#F0F3F6;color:var(--gris);border-color:var(--linea)}

/* ---------- Avisos ---------- */
.aviso{padding:10px 14px;border-radius:var(--radio-s);margin-bottom:14px;border-left:4px solid;font-size:.89rem}
.aviso-ok{background:#E7F5EE;border-color:var(--pasto);color:#0A5537}
.aviso-error{background:#FBE9EB;border-color:var(--ruta);color:#8E1826}
.aviso-aviso{background:#FFF6DC;border-color:var(--maillot);color:#7A5A00}

/* ---------- Filtros ---------- */
.filtros{display:flex;gap:9px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}
.filtros .campo{margin:0;min-width:140px}
.filtros .crece{flex:1;min-width:200px}

/* ---------- Buscador en vivo ---------- */
.buscador{position:relative}
.sugerencias{
  position:absolute;z-index:40;left:0;right:0;top:calc(100% + 4px);background:var(--papel);
  border:1px solid var(--linea);border-radius:var(--radio);box-shadow:var(--sombra-alta);
  max-height:320px;overflow-y:auto;display:none;
}
.sugerencias.visible{display:block}
.sug{display:flex;gap:10px;padding:8px 11px;cursor:pointer;border-bottom:1px solid var(--linea-2);align-items:center}
.sug:last-child{border-bottom:0}
.sug:hover,.sug.marcada{background:var(--azul-suave)}
.sug-img{width:36px;height:36px;border-radius:var(--radio-s);object-fit:cover;background:#E9EFF3;flex:0 0 36px}
.sug-txt{flex:1;min-width:0}
.sug-txt b{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sug-txt small{color:var(--gris);font-size:.76rem}
.sug-precio{font-family:var(--fuente-cond);font-size:.98rem;white-space:nowrap}
.sug-stock{font-size:.74rem;color:var(--gris)}
.sug-stock.sin{color:var(--ruta)}

/* ---------- Punto de venta ---------- */
.pos-carrito{min-height:180px}
.pos-lineas{width:100%;font-size:.87rem}
.pos-lineas th{font-family:var(--fuente-cond);color:var(--gris);text-align:left;padding:7px 9px;border-bottom:2px solid var(--linea);font-size:.85rem}
.pos-lineas td{padding:7px 9px;border-bottom:1px solid var(--linea-2)}
.pos-lineas input[type=number]{width:62px;padding:4px 6px;text-align:center;font-size:.88rem}
.pos-quitar{background:none;border:0;color:var(--ruta);cursor:pointer;font-size:1rem;line-height:1;padding:3px 5px}

.pago{
  background:var(--papel);color:var(--tinta);border:1px solid var(--linea);
  border-top:3px solid var(--azul);border-radius:var(--radio);overflow:hidden;
  position:sticky;top:70px;box-shadow:var(--sombra);
}
.pago-cab{padding:11px 15px;border-bottom:1px solid var(--linea);font-family:var(--fuente-cond);font-size:1rem;color:var(--tinta);background:#F7FAFD}
.pago-cuerpo{padding:15px}
.pago-fila{display:flex;justify-content:space-between;align-items:baseline;padding:4px 0;font-size:.88rem}
.pago-total{
  display:flex;justify-content:space-between;align-items:baseline;
  border-top:1px solid var(--linea);margin-top:8px;padding-top:10px;
}
.pago-total span{font-size:.86rem;color:var(--gris)}
.pago-total b{font-family:var(--fuente-cond);font-size:1.6rem;color:var(--tinta);line-height:1}
.pago label{color:var(--tinta)}
.pago-recibido input{font-family:var(--fuente-cond);font-size:1.2rem;text-align:right;padding:8px 10px}

.cambio{
  margin-top:12px;background:var(--azul-suave);border:1px solid var(--azul-borde);
  border-left:4px solid var(--azul);
  border-radius:var(--radio-s);padding:11px 14px;display:flex;justify-content:space-between;align-items:baseline;gap:10px;
}
.cambio span{color:var(--azul-osc);font-size:.85rem}
.cambio b{font-family:var(--fuente-cond);font-size:1.75rem;color:var(--azul-osc);line-height:1}
.cambio.falta{background:#FBE9EB;border-color:#F0C2C7;border-left-color:var(--ruta)}
.cambio.falta span{color:var(--ruta)}
.cambio.falta b{color:var(--ruta);font-size:1.25rem}

.billetes{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:10px}
.billete{
  background:var(--papel);border:1px solid var(--linea);color:var(--tinta);border-radius:var(--radio-s);
  padding:6px 3px;font:inherit;font-size:.78rem;cursor:pointer;font-variant-numeric:tabular-nums;
}
.billete:hover{background:var(--azul-suave);border-color:var(--azul-borde);color:var(--azul-osc)}
.billete.exacto{grid-column:span 2;background:var(--azul);color:#fff;border-color:var(--azul);font-weight:600}
.billete.exacto:hover{background:var(--azul-osc);color:#fff}
.billete.limpiar{grid-column:span 2}

/* ---------- Ficha de producto ---------- */
.foto-producto{
  width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radio);
  border:1px solid var(--linea);background:#E9EFF3;
}
.sin-foto{
  width:100%;aspect-ratio:4/3;border:1px dashed var(--linea);border-radius:var(--radio);
  display:grid;place-items:center;color:var(--gris-claro);background:#F5F8FB;font-size:.84rem;
}
.miniatura{width:38px;height:38px;border-radius:var(--radio-s);object-fit:cover;background:#E9EFF3}
.datos-lista{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;font-size:.89rem;margin:0}
.datos-lista dt{color:var(--tinta)}
.datos-lista dd{margin:0;min-width:0;word-break:break-word}

/* ---------- Hoja de vida ---------- */
.hv-codigo{font-family:var(--fuente-cond);font-size:1.4rem;letter-spacing:.04em;color:var(--azul-osc)}
.linea-tiempo{list-style:none;margin:0;padding:0}
.linea-tiempo li{padding:7px 0 7px 16px;border-left:2px solid var(--linea);position:relative;font-size:.88rem}
.linea-tiempo li::before{
  content:"";position:absolute;left:-6px;top:13px;width:10px;height:10px;border-radius:50%;
  background:var(--papel);border:2px solid var(--azul-borde);
}
.linea-tiempo li:first-child::before{background:var(--azul);border-color:var(--azul-osc)}

/* ---------- Ingreso ---------- */
.acceso{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}
.acceso-arte{
  background:#EDF3F8;color:var(--tinta);padding:40px;
  display:grid;place-items:center;position:relative;overflow:hidden;
}
.acceso-form{display:grid;place-items:center;padding:28px;background:var(--papel)}
.acceso-form form{width:100%;max-width:330px}
.acceso-form h2{margin-bottom:4px}
.acceso-pie{font-size:.76rem;color:var(--gris-claro);margin-top:20px;text-align:center}

/* ---------- Recibo ---------- */
.recibo{max-width:320px;margin:16px auto;background:#fff;padding:16px;font-size:.86rem}
.recibo h2{text-align:center;margin-bottom:2px}
.recibo .centro{text-align:center}
.recibo table{width:100%;font-size:.82rem}
.recibo td{padding:2px 0}
.recibo .sep{border-top:1px dashed #999;margin:8px 0}

/* ---------- Modal ---------- */
.modal{position:fixed;inset:0;background:rgba(26,39,51,.42);display:none;place-items:center;z-index:60;padding:16px}
.modal.abierto{display:grid}
.modal-caja{background:var(--papel);border-radius:var(--radio);max-width:520px;width:100%;box-shadow:var(--sombra-alta);max-height:90vh;overflow-y:auto}
.modal-cab{padding:12px 16px;border-bottom:1px solid var(--linea);display:flex;align-items:center}
.modal-cab h3{margin:0;flex:1}
.modal-cuerpo{padding:16px}
.cerrar{background:none;border:0;font-size:1.35rem;line-height:1;cursor:pointer;color:var(--gris)}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1250px){
  .r-pos{grid-template-columns:minmax(0,1.35fr) minmax(280px,.9fr)}
}
@media (max-width:1080px){
  .r-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .r-pos{grid-template-columns:1fr}
  .pago{position:static}
  .billetes{grid-template-columns:repeat(6,1fr)}
  .billete.exacto,.billete.limpiar{grid-column:span 3}
}
@media (max-width:900px){
  .lateral{
    position:fixed;left:0;top:0;bottom:0;z-index:50;transform:translateX(-100%);
    transition:transform .18s ease;box-shadow:var(--sombra-alta);width:250px;flex-basis:250px;
  }
  .lateral.abierta{transform:translateX(0)}
  .abrir-menu{display:inline-flex}
  .r-2,.r-3{grid-template-columns:1fr}
  .contenido{padding:14px}
  .barra{padding:9px 12px;gap:9px}
  .barra h1{font-size:1.1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .velo{position:fixed;inset:0;background:rgba(26,39,51,.4);z-index:45}
  .rejilla{gap:12px}
  .acceso{grid-template-columns:1fr;min-height:100vh}
  .acceso-arte{padding:22px;min-height:210px}
}
@media (max-width:680px){
  body{font-size:14px}
  .r-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contenido{padding:11px}
  .tarjeta{border-radius:8px}
  .tarjeta-cab{padding:11px 13px}
  .tarjeta-cuerpo{padding:13px}
  .campos{grid-template-columns:1fr}
  .filtros{gap:8px}
  .filtros .campo,.filtros .crece{min-width:100%;flex:1 1 100%}
  .filtros .boton{flex:1}
  .acciones .boton{flex:1 1 auto}
  .tabla{font-size:.84rem}
  .tabla th,.tabla td{padding:7px 9px}
  .dato{padding:11px 13px}
  .dato .cifra{font-size:1.3rem}
  .datos-lista{grid-template-columns:1fr;gap:1px 0}
  .datos-lista dt{margin-top:8px;font-size:.78rem}
  .modal{padding:0;place-items:end center}
  .modal-caja{max-height:94vh;border-radius:12px 12px 0 0}
  .usuario-chip .quien{display:none}
  /* El movil necesita objetivos tactiles comodos */
  input,select,textarea{font-size:16px;padding:9px 11px}
  .boton{padding:9px 14px}
  .boton.chico{padding:7px 10px}
}
@media (max-width:460px){
  .r-4{grid-template-columns:1fr}
  .billetes{grid-template-columns:repeat(3,1fr)}
  .billete.exacto,.billete.limpiar{grid-column:span 3}
  .pago-total b{font-size:1.45rem}
  .cambio b{font-size:1.55rem}
  .hv-codigo{font-size:1.2rem}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}
@media print{
  .lateral,.barra,.acciones,.filtros,.no-imprimir{display:none!important}
  body{background:#fff}
  .contenido{padding:0}
  .tarjeta{border:0;box-shadow:none}
}

/* ---------- Foto ampliable ---------- */
[data-foto]{cursor:zoom-in}
.pos-miniatura{width:38px;height:38px;border-radius:var(--radio-s);object-fit:cover;background:#E9EFF3;flex:0 0 38px}
.pos-producto{display:flex;align-items:center;gap:9px}
.pos-producto .sin-img{
  width:38px;height:38px;border-radius:var(--radio-s);background:#F0F3F6;border:1px dashed var(--linea);
  flex:0 0 38px;display:grid;place-items:center;font-size:.62rem;color:var(--gris-claro);
}
.visor-caja{max-width:min(92vw,760px);width:auto}
.visor-caja .modal-cuerpo{padding:12px;text-align:center}
.visor-caja img{max-width:100%;max-height:74vh;border-radius:var(--radio-s);background:#E9EFF3}

/* ---------- Cobro de hoja de vida en el punto de venta ---------- */
.hv-cobro{border-left:4px solid var(--azul);margin-bottom:12px}
.hv-cobro .hv-datos{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:flex-start}
.hv-cobro .hv-saldo{font-family:var(--fuente-cond);font-size:1.5rem;line-height:1.1;color:var(--azul-osc)}

/* ---------- Listado en vivo y paginador ---------- */
.cargando{opacity:.45;transition:opacity .12s ease}
.paginador{
  display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;
  margin-top:14px;
}
.paginador .ayuda{width:100%;text-align:center;margin-top:4px}
.paginador-puntos{color:var(--gris-claro);padding:0 2px}

/* ---------- Cuadre de caja ---------- */
.tabla-cuadre td{padding:8px 10px}
.tabla-cuadre .fila-total td{border-top:2px solid var(--linea);font-size:1.02rem}
.tabla-cuadre .cifra-esperado{font-family:var(--fuente-cond);font-size:1.35rem;color:var(--azul-osc)}