/* ==========================================================================
   Espacio de trabajo — hoja de estilos unica.

   El catalogo sigue la estructura del de TUU, que es la que el usuario ya
   conoce: barra lateral fija con las secciones e iconos, y a la derecha el
   area de trabajo con buscador, pastillas de categoria y fichas en lista.
   ========================================================================== */

:root{
  --azul:#2f6bf3;
  --azul-oscuro:#1e51cc;
  --azul-suave:#eaf1fe;
  --tinta:#152344;
  --texto:#3c4a63;
  --suave:#6b7a92;
  --tenue:#9aa7ba;
  --linea:#e9edf3;
  --borde:#d9e0ea;
  --fondo:#f7f8fa;
  --panel:#fff;
  --ok-fondo:#e3f8ec;  --ok-texto:#0b7a44;
  --mal-fondo:#fdeaea;  --mal-texto:#d94a4a;
  --lateral:268px;
  --lateral-chica:74px;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; background:var(--fondo); color:var(--texto);
  font:15px/1.5 "Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  -webkit-text-size-adjust:100%;
}
h1,h2,h3{color:var(--tinta); line-height:1.2; letter-spacing:-.01em;}
a{color:var(--azul);}
.ico{width:22px; height:22px; flex:0 0 auto;}

/* --- Armazon con barra lateral ------------------------------------------- */
body.con-lateral{display:flex; align-items:stretch; min-height:100vh;}

.lateral{
  width:var(--lateral); flex:0 0 var(--lateral);
  background:var(--panel); border-right:1px solid var(--linea);
  display:flex; flex-direction:column; padding:14px 0 18px;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.lateral-cuenta{display:flex; align-items:center; gap:11px; padding:6px 18px 20px;}
.lateral-avatar{
  width:38px; height:38px; flex:0 0 38px; border-radius:50%;
  background:#e8552e; color:#fff; font-weight:700; font-size:14px;
  display:flex; align-items:center; justify-content:center; letter-spacing:.5px;
}
.lateral-cuenta-txt{min-width:0; display:flex; flex-direction:column;}
.lateral-cuenta-txt strong{
  color:var(--tinta); font-size:14px; font-weight:700; text-transform:uppercase;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.lateral-cuenta-txt small{color:var(--suave); font-size:12px;}

/* Acceso a la caja: oscuro, para que se distinga de las secciones del catálogo. */
.lateral-caja{
  display:flex; align-items:center; gap:12px; margin:0 14px 14px; padding:13px 16px;
  background:var(--tinta); color:#fff; border-radius:12px; text-decoration:none;
  font-size:15px; font-weight:700;
}
.lateral-caja:hover{background:#0d1628;}
.lateral-caja .ico{width:20px; height:20px; color:#fff;}
body.lateral-chica .lateral-caja{margin:0 10px 12px; padding:13px 0; justify-content:center;}
body.lateral-chica .lateral-caja span{display:none;}

.lateral-nav{display:flex; flex-direction:column; gap:2px; flex:1;}
.lateral-item{
  display:flex; align-items:center; gap:13px;
  padding:12px 18px; text-decoration:none; font-size:14.5px; font-weight:600;
  color:var(--texto); border-left:3px solid transparent; line-height:1.25;
}
.lateral-item .ico{color:var(--suave);}
.lateral-item:hover{background:#f4f6fa;}
/* Seccion actual: fondo celeste, texto e icono azules y barra a la izquierda,
   igual que TUU. */
.lateral-item.actual{
  background:var(--azul-suave); color:var(--azul);
  border-left-color:var(--azul);
}
.lateral-item.actual .ico{color:var(--azul);}
/* Secciones todavia sin pagina: se ven, pero no llevan a ninguna parte. */
.lateral-item.pronto{color:var(--tenue); cursor:default;}
.lateral-item.pronto .ico{color:#c6cfdb;}
.lateral-salir{
  margin:14px 18px 0; padding-top:14px; border-top:1px solid var(--linea);
  color:var(--mal-texto); text-decoration:none; font-size:14px; font-weight:600;
}

.lateral-plegar{
  position:fixed; left:calc(var(--lateral) - 17px); bottom:22px; z-index:5;
  width:34px; height:34px; border-radius:50%; cursor:pointer;
  background:var(--panel); border:1px solid var(--borde); color:var(--suave);
  display:flex; align-items:center; justify-content:center;
  transition:left .18s;
}
.lateral-plegar:hover{color:var(--azul); border-color:var(--azul);}

/* Plegada: solo iconos. */
body.lateral-chica .lateral{width:var(--lateral-chica); flex-basis:var(--lateral-chica);}
body.lateral-chica .lateral-item{justify-content:center; padding:12px 0; border-left-width:0;}
body.lateral-chica .lateral-item span,
body.lateral-chica .lateral-cuenta-txt,
body.lateral-chica .lateral-salir{display:none;}
body.lateral-chica .lateral-cuenta{justify-content:center; padding-left:0; padding-right:0;}
body.lateral-chica .lateral-plegar{left:calc(var(--lateral-chica) - 17px); transform:rotate(180deg);}

.contenido{flex:1; min-width:0; padding:26px 34px 70px;}

/* --- Paginas sin sesion (acceso, instalacion) ---------------------------- */
.marca{background:var(--tinta); color:#fff; padding:14px 22px;}
.marca a{color:#fff; text-decoration:none; font-weight:800;}
.marca a span{font-weight:500; opacity:.72; margin-left:6px;}
.suelto{padding:0 20px;}

/* --- Encabezado de seccion ----------------------------------------------- */
.cabeza{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:16px; flex-wrap:wrap; margin-bottom:22px;
}
.cabeza h1{margin:0; font-size:28px; font-weight:800;}
.cabeza p{margin:5px 0 0; color:var(--suave); font-size:14px;}

/* --- Botones ------------------------------------------------------------- */
.boton{
  display:inline-flex; align-items:center; gap:8px; padding:12px 20px;
  border-radius:999px; border:1px solid var(--borde); background:var(--panel);
  color:var(--texto); font-size:14.5px; font-weight:600; text-decoration:none;
  cursor:pointer; font-family:inherit; white-space:nowrap;
}
.boton:hover{background:#f2f5f9;}
.boton .ico{width:19px; height:19px; color:var(--suave);}
.boton--principal{
  background:var(--azul); border-color:var(--azul); color:#fff;
  padding:13px 26px; font-weight:700;
}
.boton--principal:hover{background:var(--azul-oscuro);}
.boton--principal .ico{color:#fff;}
.boton--icono{padding:11px; border-radius:50%; background:#eef1f6; border-color:transparent;}

/* --- Buscador y filtros --------------------------------------------------- */
.barra{display:flex; gap:12px; align-items:center; margin-bottom:20px; flex-wrap:wrap;}
.buscador{
  flex:1 1 340px; min-width:220px; position:relative;
  display:flex; align-items:center;
}
.buscador .ico{position:absolute; left:18px; color:var(--tenue); width:20px; height:20px;}
.buscador input{
  width:100%; padding:14px 18px 14px 48px; font-size:15px; font-family:inherit;
  border:1px solid var(--borde); border-radius:999px; background:var(--panel);
  color:var(--tinta);
}
.buscador input::placeholder{color:var(--tenue);}
.buscador input:focus{outline:none; border-color:var(--azul);}
.barra select{
  padding:13px 16px; border:1px solid var(--borde); border-radius:999px;
  background:var(--panel); font-size:14.5px; font-weight:600; color:var(--texto);
  font-family:inherit; cursor:pointer;
}

/* Contador de filtros activos en el boton "Filtros". */
.pip{
  background:var(--azul); color:#fff; border-radius:999px; font-size:11.5px;
  font-weight:700; min-width:20px; height:20px; padding:0 6px;
  display:inline-flex; align-items:center; justify-content:center;
}

/* --- Panel de filtros (cajon lateral) ------------------------------------- */
body.sin-scroll{overflow:hidden;}
.pf{position:fixed; inset:0; z-index:60;}
.pf-fondo{position:absolute; inset:0; background:rgba(16,24,40,.45);}
.pf-caja{
  position:absolute; top:0; right:0; height:100%; width:min(430px,100%);
  background:var(--fondo); box-shadow:-8px 0 30px rgba(16,24,40,.16);
  padding:20px 22px 40px; overflow-y:auto;
}
.pf-cabeza{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;}
.pf-volver{
  background:none; border:none; cursor:pointer; color:var(--texto);
  padding:6px; display:inline-flex; border-radius:9px;
}
.pf-volver:hover{background:#eef1f6;}
.pf-limpiar{
  background:none; border:none; cursor:pointer; color:var(--texto);
  font-size:14.5px; font-weight:600; font-family:inherit; padding:6px 10px; border-radius:9px;
}
.pf-limpiar:hover{background:#eef1f6; color:var(--azul);}
.pf-caja > h2{margin:0 0 20px; font-size:26px; font-weight:800;}

.pf-grupo{
  background:var(--panel); border:1px solid var(--linea); border-radius:16px;
  padding:16px 18px; margin-bottom:16px;
}
.pf-grupo header{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.pf-grupo h3{margin:0; font-size:18px; font-weight:800;}
.pf-aplicar{
  border:1px solid var(--azul); background:var(--azul-suave); color:var(--azul);
  border-radius:999px; padding:8px 20px; font-size:14px; font-weight:600;
  cursor:pointer; font-family:inherit;
}
.pf-aplicar:hover:not(:disabled){background:var(--azul); color:#fff;}
.pf-aplicar:disabled{border-color:var(--borde); background:transparent; color:var(--tenue); cursor:not-allowed;}
.pf-cuerpo{padding-top:12px; border-top:1px solid var(--linea); margin-top:14px;}
.pf-cuerpo label{
  display:flex; align-items:center; gap:14px; padding:11px 4px;
  font-size:15px; color:var(--texto); cursor:pointer;
}
.pf-cuerpo input[type=checkbox]{width:19px; height:19px; accent-color:var(--azul); cursor:pointer;}
.pf-grupo.pronto h3,.pf-grupo.pronto .pf-cuerpo label{color:var(--tenue);}
.pf-grupo.pronto .pf-cuerpo label{cursor:not-allowed;}
.pf-cuerpo .sub{margin:6px 4px 0; font-size:13px;}

/* --- Pastillas de categoria ---------------------------------------------- */
.chips{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:26px;}
.chip{
  display:inline-flex; align-items:center; gap:9px; padding:11px 20px;
  border-radius:999px; border:1px solid var(--borde); background:var(--panel);
  color:var(--tinta); text-decoration:none; font-size:14.5px; font-weight:600;
}
.chip .ico{width:18px; height:18px; color:var(--suave);}
.chip:hover{background:#f2f5f9;}
.chip[aria-current="true"]{border-color:var(--tinta); box-shadow:inset 0 0 0 1px var(--tinta);}

/* --- Conteo y acciones del listado --------------------------------------- */
.conteo{
  display:flex; justify-content:space-between; align-items:center;
  gap:14px; flex-wrap:wrap; margin-bottom:18px;
}
.conteo h2{margin:0; font-size:19px; font-weight:800;}
.conteo h2 span{color:var(--suave); font-weight:600;}
.conteo-acciones{display:flex; gap:10px; align-items:center;}

/* --- Fila de alta rapida --------------------------------------------------- */
/* Una FILA, no un formulario aparte: se agrega arriba del listado y con el
   mismo aire que una ficha, para que se lea como "la fila que estas creando". */
.fila-rapida{
  display:grid; align-items:center; gap:16px;
  grid-template-columns:78px minmax(0,1.5fr) minmax(0,1fr) minmax(0,1.4fr) minmax(0,1.6fr) auto auto;
  padding:18px 22px; background:var(--panel); border:1px solid var(--azul);
  border-radius:16px; margin-bottom:14px;
}
.fr-foto{
  width:78px; height:78px; border-radius:12px; background:#f1f4f8;
  display:flex; align-items:center; justify-content:center; color:var(--tenue);
}
.fr-foto .ico{width:26px; height:26px;}
.fr-campo{position:relative; display:block;}
.fr-campo input,.fr-campo > button{
  width:100%; padding:14px 14px; border:1px solid var(--borde); border-radius:11px;
  font-size:15px; font-family:inherit; background:var(--panel); color:var(--tinta);
}
.fr-campo input:focus,.fr-campo > button:focus{outline:none; border-color:var(--azul);}
/* Rotulo sobre el borde, como los campos flotantes de TUU. */
.fr-campo.rotulado > span{
  position:absolute; top:-8px; left:12px; padding:0 6px; background:var(--panel);
  font-size:12px; font-weight:600; color:var(--suave); z-index:1;
}
.fr-desp > button{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  cursor:pointer; text-align:left; min-height:50px;
}
.fr-desp > button .ico{width:18px; height:18px; color:var(--suave); transform:rotate(-90deg); flex:0 0 auto;}
.fr-desp > button[aria-expanded="true"] .ico{transform:rotate(90deg);}
.fr-desp > button:disabled{background:#f6f7f9; color:var(--tenue); cursor:not-allowed;}
.fr-desp > button em{font-style:normal; display:flex; gap:5px; flex-wrap:wrap; align-items:center; min-width:0;}
.fr-desp > button em:empty::before{content:'Sin categoría'; color:var(--tenue);}
.fr-panel{
  position:absolute; top:calc(100% + 8px); left:0; min-width:100%; z-index:20;
  background:var(--panel); border:1px solid var(--linea); border-radius:14px;
  box-shadow:0 12px 30px rgba(16,24,40,.14); padding:10px;
}
.fr-panel label{
  display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:10px;
  font-size:14.5px; color:var(--texto); cursor:pointer; white-space:nowrap;
}
.fr-panel label:hover{background:#f4f6fa;}
.fr-panel input[type=checkbox]{width:19px; height:19px; accent-color:var(--azul); flex:0 0 auto;}
.fr-panel input[type=text],.fr-panel input:not([type]){
  border:1px solid var(--borde); border-radius:8px; padding:8px 10px; font-size:14px;
  min-width:150px;
}
.fr-panel input:disabled{background:#f6f7f9;}
.fr-cats label{color:var(--azul); font-weight:600;}
.fr-cats .ico{width:16px; height:16px;}
.fr-cats label:has(input:checked){background:var(--azul-suave);}
.fr-ok,.fr-cancelar{
  width:46px; height:46px; border-radius:50%; cursor:pointer; border:none;
  display:inline-flex; align-items:center; justify-content:center; font-family:inherit;
}
.fr-ok{background:#e7ebf2; color:var(--suave);}
.fila-rapida:valid .fr-ok{background:var(--azul); color:#fff;}
.fr-cancelar{background:transparent; color:var(--suave); font-size:26px; line-height:1;}
.fr-cancelar:hover{background:#f1f4f8;}
@media (max-width:1150px){
  .fila-rapida{grid-template-columns:78px minmax(0,1fr) auto;}
  .fila-rapida > .fr-campo{grid-column:2 / -1;}
}

/* --- Fichas de producto --------------------------------------------------- */
.lista{display:flex; flex-direction:column; gap:14px;}
.ficha{
  display:grid; align-items:center; gap:18px;
  grid-template-columns:96px minmax(0,2fr) minmax(0,1fr) minmax(0,1.2fr) minmax(0,1.2fr) auto;
  padding:18px 22px; background:var(--panel); border:1px solid var(--linea);
  border-radius:16px;
}
.ficha-foto,.ficha-foto-vacia{
  width:96px; height:96px; border-radius:14px; object-fit:cover; background:#f1f4f8;
}
.ficha-foto-vacia{
  display:flex; align-items:center; justify-content:center;
  color:var(--tenue); font-size:32px; font-weight:800;
}
.ficha h3{margin:0 0 4px; font-size:17px; font-weight:800;}
.dato{font-size:13px; color:var(--suave); margin-bottom:4px;}
.valor{font-size:15px; color:var(--tinta); font-weight:600;}
.sub{font-size:13.5px; color:var(--suave);}
.marbete{
  display:inline-block; margin-top:7px; padding:5px 13px; border-radius:999px;
  font-size:12.5px; font-weight:600;
}
.marbete.si{background:var(--ok-fondo); color:var(--ok-texto);}
.marbete.no{background:var(--mal-fondo); color:var(--mal-texto);}
.etiqueta{
  display:inline-flex; align-items:center; gap:6px; padding:5px 12px;
  border-radius:999px; background:var(--azul-suave); color:var(--azul);
  font-size:13px; font-weight:600; margin:2px 5px 2px 0;
}
.etiqueta .ico{width:15px; height:15px;}
/* Acciones en iconos: la fila queda limpia y el ancho se va a los datos. */
.acciones{display:flex; gap:6px; align-items:center;}
.acciones button,.acciones a{
  border:1px solid transparent; background:transparent; border-radius:10px;
  cursor:pointer; padding:8px; color:var(--suave); font-family:inherit;
  display:inline-flex; align-items:center; justify-content:center;
}
.acciones .ico{width:19px; height:19px;}
.acciones button:hover,.acciones a:hover{background:#eef1f6; color:var(--azul);}
.acciones .peligro:hover{background:var(--mal-fondo); color:var(--mal-texto);}

@media (max-width:1150px){
  .ficha{grid-template-columns:80px minmax(0,1fr) minmax(0,1fr); }
  .ficha-foto,.ficha-foto-vacia{width:80px; height:80px;}
  .acciones{grid-column:1 / -1;}
}
@media (max-width:820px){
  :root{--lateral:var(--lateral-chica);}
  .lateral-item{justify-content:center; padding:12px 0; border-left-width:0;}
  .lateral-item span,.lateral-cuenta-txt,.lateral-salir{display:none;}
  .lateral-cuenta{justify-content:center; padding-left:0; padding-right:0;}
  .lateral-plegar{display:none;}
  .contenido{padding:20px 16px 60px;}
  .ficha{grid-template-columns:64px minmax(0,1fr);}
  .ficha-foto,.ficha-foto-vacia{width:64px; height:64px; font-size:24px;}
  .ficha > div:not(:nth-child(2)),.acciones{grid-column:2 / -1;}
}

/* --- Categorias ------------------------------------------------------------ */
.cat-fila{grid-template-columns:24px 62px minmax(0,1.6fr) minmax(0,.7fr) minmax(0,1.4fr) minmax(0,1.2fr) auto;}
.cat-fila.llevando{opacity:.45;}
.cat-asa{cursor:grab; color:var(--tenue); font-size:17px; letter-spacing:-3px; user-select:none;}
.cat-asa:active{cursor:grabbing;}
.cat-ico{
  width:62px; height:62px; border-radius:14px; background:#eef1f6;
  display:flex; align-items:center; justify-content:center; color:var(--tinta);
  object-fit:cover;
}
.cat-ico .ico{width:26px; height:26px;}

/* Interruptor de "categoria dinamica". */
.cat-switch{display:flex; align-items:center; justify-content:space-between; gap:18px;}
.cat-switch strong{display:block; color:var(--tinta); font-size:16px;}
.cat-switch small{display:block; color:var(--suave); font-size:13px; margin-top:3px;}
.palanca{position:relative; display:inline-block; width:52px; height:29px; flex:0 0 52px;}
.palanca input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer;}
.palanca span{
  position:absolute; inset:0; background:#d5dbe4; border-radius:999px; transition:background .18s;
  pointer-events:none;
}
.palanca span::after{
  content:''; position:absolute; top:3px; left:3px; width:23px; height:23px;
  background:#fff; border-radius:50%; transition:transform .18s;
}
.palanca input:checked + span{background:var(--azul);}
.palanca input:checked + span::after{transform:translateX(23px);}
.palanca input:focus-visible + span{outline:2px solid var(--azul); outline-offset:2px;}

.cat-reglas{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; margin:16px 0;}
.cat-regla{padding:14px 16px;}
.cat-regla .tarjeta-ico{width:38px; height:38px; flex-basis:38px; font-size:16px;}
.cat-regla.pronto{opacity:.55; cursor:not-allowed;}
.cat-regla.pronto strong{color:var(--suave);}

.cat-buscar-prod{margin-bottom:16px; max-width:520px;}
.cat-vacio{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:34px 20px; text-align:center;
}
.cat-vacio-ico{
  width:52px; height:52px; border-radius:14px; background:var(--azul-suave);
  display:flex; align-items:center; justify-content:center; color:var(--azul);
}
.cat-vacio strong{font-size:19px; color:var(--tinta);}

@media (max-width:1150px){
  .cat-fila{grid-template-columns:24px 62px minmax(0,1fr);}
  .cat-fila > div,.cat-fila .acciones{grid-column:3 / -1;}
}

/* --- Avisos --------------------------------------------------------------- */
.aviso{
  background:var(--panel); border:1px solid var(--linea); border-left:4px solid var(--tenue);
  border-radius:12px; padding:16px 20px; margin:0 0 16px; font-size:15px;
}
.aviso--ok{background:var(--ok-fondo); border-color:var(--ok-texto); color:var(--ok-texto);}
.aviso--error{background:var(--mal-fondo); border-color:var(--mal-texto); color:var(--mal-texto);}

/* --- Acceso e instalacion -------------------------------------------------- */
.panel-login{
  max-width:420px; margin:8vh auto; background:var(--panel);
  border:1px solid var(--linea); border-radius:18px; padding:30px;
}
.panel-login h1{margin:0 0 3px; font-size:24px;}
.panel-login > p{margin:0 0 22px; color:var(--suave);}
.panel-login label{display:block; margin:15px 0 6px; font-size:14px; font-weight:600; color:var(--tinta);}
.panel-login input,.panel-login select{
  width:100%; padding:12px 14px; border:1px solid var(--borde);
  border-radius:11px; font-size:16px;   /* 16px: menos de eso, iOS hace zoom */
  font-family:inherit;
}
.panel-login button{width:100%; margin-top:22px; justify-content:center;}

/* --- Ficha a pantalla completa: barra superior ----------------------------- */
.barra-alta{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:16px;
  background:var(--panel); border-bottom:1px solid var(--linea);
  padding:14px 26px;
}
.barra-alta h1{margin:0; font-size:21px; font-weight:800; flex:1;}
.barra-volver{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:10px; color:var(--texto); text-decoration:none;
}
.barra-volver:hover{background:#eef1f6;}
.contenido-ficha{max-width:1000px; margin:0 auto; width:100%; padding:26px 26px 90px;}
.fx-titulo{margin:0 0 22px; font-size:28px; font-weight:800;}

/* --- Ficha del producto: armazon ------------------------------------------- */
.fx-pestanas{display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:18px; flex-wrap:wrap;}
.fx-pestana{
  display:inline-flex; align-items:center; gap:9px; padding:11px 22px;
  border:1px solid var(--azul); border-radius:999px; color:var(--azul);
  font-size:14.5px; font-weight:600; background:var(--panel);
}
.fx-pestana .ico{width:18px; height:18px;}
.fx-props{
  display:inline-flex; align-items:center; gap:9px; background:none; border:none;
  color:var(--azul); font-size:14.5px; font-weight:600; cursor:pointer;
  font-family:inherit; padding:10px 12px; border-radius:10px;
}
.fx-props:hover{background:var(--azul-suave);}
.fx-props .ico{width:19px; height:19px;}

/* Imagen a la izquierda y datos a la derecha, como en TUU. */
.fx-dos{display:grid; grid-template-columns:minmax(230px,300px) minmax(0,1fr); gap:16px; align-items:start;}
.fx-imagen{display:flex; flex-direction:column; align-items:center; gap:12px;}
/* El recuadro entero es el boton de subir: sin texto al lado, solo el icono. */
.fx-imagen .previa{width:100%; height:240px; border-radius:14px; cursor:pointer;}
.fx-imagen .previa:hover{background:#e9edf3; color:var(--azul);}
.fx-imagen .previa:focus-within{outline:2px solid var(--azul); outline-offset:2px;}
.fx-imagen .previa .ico{width:56px; height:56px;}
.fx-oculto{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;}
.fx-quitar{font-size:13.5px; display:flex; gap:8px; align-items:center; align-self:flex-start;}

/* Rotulo de seccion, fuera de la ficha (gris chico), como "Tipo de precio". */
.fx-rotulo{margin:22px 0 10px; font-size:14px; color:var(--suave); font-weight:600;}

/* Campo con el rotulo montado sobre el borde. */
.fx-campo{position:relative; display:block; margin-bottom:20px;}
.fx-campo:last-child{margin-bottom:0;}
.fx-campo > span{
  position:absolute; top:-8px; left:13px; padding:0 6px; background:var(--panel);
  font-size:12.5px; font-weight:600; color:var(--suave); z-index:1;
}
.fx-campo input,.fx-campo select,.fx-campo textarea{
  width:100%; padding:15px 15px; border:1px solid var(--borde); border-radius:12px;
  font-size:16px; font-family:inherit; color:var(--tinta); background:var(--panel);
}
.fx-campo textarea{resize:vertical; min-height:96px;}
.fx-campo input:focus,.fx-campo select:focus,.fx-campo textarea:focus{outline:none; border-color:var(--azul);}
.fx-campo.con-signo input{padding-left:34px;}
.fx-campo.con-signo::after{
  content:'$'; position:absolute; left:15px; top:50%; transform:translateY(-50%);
  color:var(--suave); font-size:16px;
}
.fx-contador{
  position:absolute; right:14px; bottom:10px; font-style:normal;
  font-size:12.5px; color:var(--suave);
}
.fx-marcar{display:flex; gap:10px; align-items:center; font-size:14.5px; cursor:pointer;}

/* Tarjetas de tipo de precio, con el icono en cuadrado redondeado. */
.tarjeta-ico{
  width:42px; height:42px; flex:0 0 42px; border-radius:12px; background:#eef1f6;
  display:flex; align-items:center; justify-content:center; color:var(--suave);
  font-size:18px; font-weight:700;
}
.tarjeta-ico .ico{width:20px; height:20px;}
.tarjeta:has(input:checked) .tarjeta-ico{background:var(--azul-suave); color:var(--azul);}

/* Desglose de impuestos y margen. */
.fx-calculo{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:0 34px; margin-top:20px;
}
.fx-linea{
  display:flex; align-items:center; gap:12px; padding:14px 0;
  border-bottom:1px solid var(--linea); font-size:15px;
}
.fx-linea > span:first-child{flex:1;}
.fx-linea b{color:var(--tinta); font-weight:700;}
.fx-linea button{
  background:none; border:none; cursor:pointer; color:var(--mal-texto);
  padding:4px; display:inline-flex; border-radius:50%;
}
.fx-linea button:hover{background:var(--mal-fondo);}
.fx-total{border-bottom:none; align-items:flex-start;}
.fx-total strong{display:block; color:var(--tinta); font-size:15.5px;}
.fx-total small{display:block; color:var(--suave); font-size:13px; margin-top:2px;}
.fx-exento{
  display:flex; align-items:center; gap:10px; margin:14px 0 12px;
  background:var(--azul-suave); border:1px solid var(--azul); border-radius:12px;
  padding:14px 16px; color:var(--azul); font-weight:600; font-size:15px;
}
.fx-volver-iva{
  display:flex; align-items:center; gap:10px; width:100%; cursor:pointer;
  border:1px solid var(--borde); border-radius:12px; background:var(--panel);
  padding:13px 16px; font-size:15px; color:var(--texto); font-family:inherit;
}
.fx-volver-iva:hover{border-color:var(--azul); color:var(--azul);}
.fx-volver-iva .ico{width:19px; height:19px; color:var(--suave);}

/* Modal de propiedades: mismo cajon, pero centrado. */
.pf-centro{
  position:relative; inset:auto; margin:8vh auto; height:auto; width:min(520px,100%);
  border-radius:18px; background:var(--panel); padding:26px;
}
.pf-prop{
  display:flex; align-items:center; gap:12px; padding:14px 4px;
  border-bottom:1px solid var(--linea); font-size:15px; cursor:pointer;
}
.pf-prop:last-of-type{border-bottom:none;}
.pf-prop .ico{width:20px; height:20px; color:var(--suave);}
.pf-prop input[type=checkbox]{width:19px; height:19px; accent-color:var(--azul);}
.pf-prop small{display:block; font-size:12px; color:var(--tenue); font-weight:500;}
.pf-prop.pronto{color:var(--tenue); cursor:not-allowed;}
.pf-prop.pronto .ico{color:#d0d7e2;}

@media (max-width:900px){
  .fx-dos{grid-template-columns:1fr;}
}

/* --- Ficha del producto (formulario) --------------------------------------- */
.bloque{
  border:1px solid var(--linea); border-radius:16px; background:var(--panel);
  padding:22px; margin-bottom:16px;
}
.bloque h3{margin:0 0 16px; font-size:17px; font-weight:800;}
.rejilla{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px;}
.campo{display:flex; flex-direction:column; gap:6px; font-size:14px; font-weight:600; color:var(--tinta);}
.campo input,.campo select,.campo textarea{
  padding:12px 14px; border:1px solid var(--borde); border-radius:11px;
  font-size:15px; font-family:inherit; font-weight:400; color:var(--texto);
}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none; border-color:var(--azul);}
.tarjetas{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px;}
.tarjeta{
  display:flex; gap:13px; align-items:flex-start; padding:18px;
  border:1px solid var(--borde); border-radius:14px; cursor:pointer;
}
.tarjeta:has(input:checked){border-color:var(--azul); box-shadow:inset 0 0 0 1px var(--azul);}
.tarjeta strong{display:block; font-size:15.5px; margin-bottom:4px; color:var(--tinta);}
.tarjeta span span{font-size:13.5px; color:var(--suave); font-weight:400; line-height:1.45;}
.previa{
  width:150px; height:150px; border-radius:14px; background:#f1f4f8;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  color:var(--tenue); font-size:13px; flex:0 0 auto;
}
.previa img{width:100%; height:100%; object-fit:cover;}
.casillas{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px;}
.casillas label{
  display:flex; gap:10px; align-items:center; padding:12px 14px;
  border:1px solid var(--borde); border-radius:11px; font-size:14px; cursor:pointer;
}
.contador{font-size:12.5px; color:var(--suave); text-align:right;}
.fin{display:flex; gap:12px; justify-content:flex-end; margin-top:10px; flex-wrap:wrap;}

/* --- Configuración del punto de venta ------------------------------------- */
.cfg-datos{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px;}
.cfg-datos > div{display:flex; flex-direction:column; gap:3px;}
.cfg-datos span{font-size:12.5px; color:var(--suave); font-weight:600;}
.cfg-datos b{color:var(--tinta); font-size:15px;}
.cfg-filas{padding:0;}
.cfg-fila{
  display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%;
  background:none; border:none; padding:18px 22px; cursor:pointer; text-align:left;
  font-family:inherit; color:var(--texto);
}
.cfg-fila + .cfg-fila{border-top:1px solid var(--linea);}
.cfg-fila:hover{background:#f6f8fb;}
.cfg-fila strong{display:block; color:var(--tinta); font-size:15.5px;}
.cfg-fila small{display:block; color:var(--suave); font-size:13px; margin-top:3px;}
.cfg-fila .ico{color:var(--suave); flex:0 0 auto;}
.cfg-palanca{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:16px 4px; border-bottom:1px solid var(--linea); cursor:pointer;
}
.cfg-palanca:last-of-type{border-bottom:none;}
.cfg-palanca strong{display:block; color:var(--tinta); font-size:15px;}
.cfg-palanca small{display:block; color:var(--suave); font-size:13px; margin-top:3px;}

/* --- Tablero de inicio: los dos modulos ------------------------------------ */
.inicio{max-width:760px; margin:9vh auto 0; text-align:center;}
.inicio-hola{
  margin:0 0 4px; font-size:13px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--tenue);
}
.inicio h1{margin:0 0 32px; font-size:30px; font-weight:800;}
.inicio-modulos{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.modulo{
  display:block; padding:34px 26px 30px; text-decoration:none; color:var(--texto);
  background:var(--panel); border:1px solid var(--linea); border-radius:20px;
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.modulo:hover{
  border-color:var(--azul); box-shadow:0 10px 26px rgba(47,107,243,.14);
  transform:translateY(-2px);
}
.modulo-ico{
  display:inline-flex; padding:15px; margin-bottom:16px;
  background:var(--azul-suave); color:var(--azul); border-radius:16px;
}
.modulo-ico .ico{width:28px; height:28px;}
.modulo strong{display:block; color:var(--tinta); font-size:19px; font-weight:800;}
.modulo small{display:block; margin-top:6px; font-size:13.5px; color:var(--suave); line-height:1.45;}
.inicio-salir{
  display:inline-block; margin-top:30px; font-size:14px; font-weight:600;
  color:var(--suave); text-decoration:none;
}
.inicio-salir:hover{color:var(--azul); text-decoration:underline;}

@media (max-width:640px){
  .inicio{margin-top:6vh;}
  .inicio-modulos{grid-template-columns:1fr;}
}

/* --- Bienvenida al catalogo: el asistente de la primera vez ----------------
   Cuatro pasos encadenados sobre el listado vacio, como en TUU. Comparten el
   cajon centrado .pf-centro; .ob solo lo centra y lo achica. */
.ob{text-align:center; width:min(560px,100%); padding:34px 34px 26px;}
/* Es <button> en los pasos del asistente y <a> en el de exito, que se cierra
   navegando para no dejar un POST repetible atras. Sirve para los dos. */
.ob-cerrar{
  position:absolute; top:18px; right:18px; width:38px; height:38px; border:none;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; background:#eef1f6; color:var(--suave); font-size:20px;
  line-height:1; cursor:pointer; font-family:inherit; text-decoration:none;
}
.ob-cerrar:hover{background:#e3e8f0; color:var(--tinta);}
.ob-dibujo{width:min(340px,100%); height:auto; margin:0 auto 24px; display:block;}
.ob-sello{
  display:inline-flex; padding:13px; margin-bottom:18px;
  background:var(--ok-fondo); color:var(--ok-texto); border-radius:16px;
}
.ob h2{margin:0 0 10px; font-size:25px; font-weight:800;}
.ob > p{margin:0 auto 26px; max-width:430px; color:var(--suave); font-size:15px;}
.ob-fin{display:flex; justify-content:flex-end; gap:10px; margin-top:6px;}
.ob-fin .boton{border-radius:999px; padding:12px 26px;}

.ob-opciones{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:6px;}
.ob-opcion{
  display:flex; flex-direction:column; align-items:center; gap:16px;
  border:1px solid var(--linea); border-radius:16px; padding:26px 20px;
}
.ob-opcion p{margin:0; font-size:14.5px; color:var(--suave); line-height:1.5;}
.ob-opcion .boton{width:100%; justify-content:center; border-radius:999px;
  border-color:var(--azul); color:var(--azul); font-weight:700;}
.ob-opcion .boton:hover{background:var(--azul-suave);}
.ob-opcion-ico{
  display:inline-flex; padding:12px; background:#f2f5f9; color:var(--suave); border-radius:14px;
}
/* "Crear desde Excel" todavia no existe: se ve, pero no promete nada. */
.ob-opcion.pronto{opacity:.6;}
.ob-opcion.pronto .boton{
  border-color:var(--borde); color:var(--tenue); cursor:not-allowed; background:transparent;
}
.ob-campo{text-align:left; margin-bottom:26px;}
.ob-campo span{display:block; margin-bottom:7px; font-size:13.5px; font-weight:700; color:var(--tinta);}
.ob-campo input{
  width:100%; padding:14px 16px; border:1.5px solid var(--azul); border-radius:12px;
  font-size:16px;   /* 16px: menos de eso, iOS hace zoom al enfocar */
  font-family:inherit; color:var(--tinta);
}
.ob-campo input:focus{outline:2px solid var(--azul-suave); outline-offset:1px;}

@media (max-width:640px){
  .ob{padding:28px 20px 20px;}
  .ob-opciones{grid-template-columns:1fr;}
}