:root {
  --tinta: #1b1320;
  --rosa: #ff3d8b;
  --rosa-osc: #d4176a;
  --rosa-claro: #ffe0ec;
  --amarillo: #ffd400;
  --amarillo-claro: #fff3b8;
  --verde: #169c4a;
  --verde-osc: #0e7a38;
  --verde-claro: #d9f7e4;
  --celeste: #4cc9f0;
  --celeste-claro: #dcf4fc;
  --rojo: #d42a1e;
  --rojo-claro: #ffe1de;
  --fondo: #fff4e0;
  --blanco: #ffffff;
  --gris: #5f5462;
  --borde: 3px solid var(--tinta);
  --sombra: 5px 5px 0 var(--tinta);
  --sombra-chica: 3px 3px 0 var(--tinta);
  --display: 'Lilita One', 'Arial Black', sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 19px/1.5 'Archivo', system-ui, sans-serif; }
h1, h2 { font-family: var(--display); font-weight: 400; line-height: 1.1; }
h1 { font-size: 38px; margin: 8px 0 14px; }
h2 { font-size: 26px; margin: 30px 0 10px; }
a { color: var(--tinta); text-decoration-thickness: 2px; text-underline-offset: 3px; }
kbd {
  display: inline-block; padding: 0 8px; border: 2px solid var(--tinta); border-bottom-width: 4px;
  border-radius: 6px; background: var(--blanco); font: 800 16px 'Archivo', sans-serif;
}
code { background: var(--blanco); border: 2px solid var(--tinta); padding: 0 6px; border-radius: 6px; }

/* Barra de arriba */
.barra {
  display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; justify-content: space-between;
  padding: 12px 20px; background: var(--rosa); border-bottom: var(--borde);
}
.marca {
  color: var(--blanco); text-decoration: none; font: 34px var(--display);
  -webkit-text-stroke: 2px var(--tinta); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--tinta);
}
.marca small { font: 800 14px 'Archivo', sans-serif; -webkit-text-stroke: 0; text-shadow: none; color: var(--tinta); background: var(--amarillo); border: 2px solid var(--tinta); border-radius: 6px; padding: 0 6px; vertical-align: middle; }
.menu { display: flex; flex-wrap: wrap; gap: 8px; }
.menu a {
  color: var(--tinta); background: var(--blanco); text-decoration: none; font-weight: 800; font-size: 16px;
  padding: 8px 14px; border-radius: 10px; border: 2px solid var(--tinta); box-shadow: 2px 2px 0 var(--tinta);
}
.menu a:hover { background: var(--amarillo-claro); }
.menu a.activo { background: var(--amarillo); }
.menu a.salir { background: var(--tinta); color: var(--blanco); }

.contenido { max-width: 1000px; margin: 0 auto; padding: 24px 16px 80px; }
.bajada { font-size: 20px; margin-top: 0; }

/* Avisos */
.aviso {
  padding: 16px 20px; border-radius: 14px; margin: 12px 0 22px;
  font-weight: 800; font-size: 20px; border: var(--borde); box-shadow: var(--sombra-chica);
}
.aviso-ok { background: var(--verde-claro); }
.aviso-error { background: var(--rojo-claro); }

/* Botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 10px 22px; border: var(--borde); border-radius: 12px; cursor: pointer;
  background: var(--rosa); color: var(--tinta); text-decoration: none; text-align: center;
  font: 800 19px 'Archivo', sans-serif; box-shadow: var(--sombra-chica); transition: transform .08s, box-shadow .08s;
}
.boton:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--tinta); }
.boton:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, .zona-foto:focus-visible, a:focus-visible {
  outline: 4px solid var(--celeste); outline-offset: 2px;
}
.boton:disabled { opacity: .6; cursor: wait; }
.boton-grande { width: 100%; min-height: 64px; font: 26px var(--display); background: var(--amarillo); }
.boton-secundario { background: var(--blanco); }
.boton-secundario:hover { background: var(--amarillo-claro); }
.boton-guardar { background: var(--verde); color: var(--blanco); min-height: 66px; min-width: 260px; font: 28px var(--display); }
.boton-peligro { background: var(--blanco); color: var(--rojo); border-color: var(--rojo); box-shadow: 3px 3px 0 var(--rojo); }
.boton-peligro:hover { background: var(--rojo); color: var(--blanco); box-shadow: 1px 1px 0 var(--rojo); }
.boton-ocultar { background: var(--blanco); }
.boton-mostrar { background: var(--verde); color: var(--blanco); }
.boton-chico { min-height: 44px; padding: 6px 14px; font-size: 17px; }

/* Formularios */
.formulario { display: grid; gap: 20px; }
.formulario.angosto { max-width: 540px; }
label { display: grid; gap: 6px; font-weight: 800; }
input[type=text], input:not([type]), input[type=password], input[type=search], textarea, select {
  width: 100%; padding: 14px 16px; font: 20px 'Archivo', sans-serif; color: var(--tinta);
  background: var(--blanco); border: var(--borde); border-radius: 12px;
}
input:focus, textarea:focus, select:focus { background: #fffdf0; outline: none; box-shadow: var(--sombra-chica); }
textarea { font-size: 17px; line-height: 1.4; resize: vertical; }
.check { display: flex; align-items: center; gap: 12px; font-weight: 700; cursor: pointer; }
.check input, .check-tabla { width: 28px; height: 28px; accent-color: var(--verde); flex: none; }
.check-grande { font-size: 21px; padding: 12px 16px; background: var(--verde-claro); border: var(--borde); border-radius: 12px; }
.ayuda { color: var(--gris); font-size: 17px; margin: 0; }

/* Pasos del formulario */
.paso { background: var(--blanco); border: var(--borde); border-radius: 16px; padding: 18px 20px 22px; box-shadow: var(--sombra); }
.paso h2 { margin: 0 0 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.paso h2 small { font: 700 16px 'Archivo', sans-serif; color: var(--gris); }
.paso .ayuda { margin-bottom: 12px; }
.paso-num, .opcion-num {
  display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px;
  background: var(--amarillo); border: var(--borde); color: var(--tinta); font: 24px var(--display); transform: rotate(-4deg);
}
.campo-precio { display: flex; align-items: center; gap: 10px; max-width: 380px; }
.campo-precio span { font: 36px var(--display); }
.campo-precio input { font-size: 30px; font-weight: 800; }
.vista-precio { margin: 10px 0 0; font-weight: 800; font-size: 19px; min-height: 1.5em; }
.vista-precio.bien, .foto-estado.bien { color: var(--verde-osc); }
.vista-precio.mal, .foto-estado.mal { color: var(--rojo); }

.zona-foto {
  display: flex; flex-wrap: wrap; gap: 20px; align-items: center; padding: 18px;
  border: 3px dashed var(--tinta); border-radius: 14px; background: var(--rosa-claro);
}
.zona-foto.encima { background: var(--amarillo-claro); border-style: solid; }
.zona-foto img { width: 180px; height: 180px; object-fit: contain; background: var(--blanco); border-radius: 12px; border: var(--borde); }
.zona-foto-textos { flex: 1 1 280px; display: grid; gap: 10px; justify-items: start; }
.zona-foto-textos p { margin: 0; }
.foto-estado { font-weight: 800; }
.acciones { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 8px; }

.zona-borrar { margin-top: 48px; padding: 18px 20px; border: 3px dashed var(--rojo); border-radius: 14px; background: var(--blanco); }
.zona-borrar p { margin: 0 0 12px; color: var(--gris); }

/* Elegir categoría (tarjetas con ícono) */
.cat-opciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.cat-opcion { position: relative; display: block; cursor: pointer; }
.cat-opcion input { position: absolute; opacity: 0; }
.cat-opcion span {
  display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 10px 12px;
  background: var(--blanco); border: var(--borde); border-radius: 12px; font-weight: 800; font-size: 17px; line-height: 1.2;
}
.cat-opcion .icono { width: 38px; height: 38px; flex: none; padding: 5px; border: 2px solid var(--tinta); border-radius: 10px; background: var(--cat-fondo); }
.cat-opcion:hover span { background: var(--amarillo-claro); }
.cat-opcion input:checked + span { background: var(--cat-fondo); box-shadow: var(--sombra-chica); outline: 3px solid var(--tinta); }
.cat-opcion input:checked + span::after { content: '✓'; margin-left: auto; font: 26px var(--display); }
.cat-opcion input:focus-visible + span { outline: 4px solid var(--celeste); }
.cat-nueva { margin-top: 14px; max-width: 460px; }

/* Elegir ícono */
.iconos-opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.icono-opcion { position: relative; cursor: pointer; }
.icono-opcion input { position: absolute; opacity: 0; }
.icono-opcion span { display: grid; place-items: center; width: 56px; height: 56px; border: 2px solid var(--tinta); border-radius: 12px; background: var(--cat-fondo); }
.icono-opcion .icono { width: 30px; height: 30px; }
.icono-opcion input:checked + span { outline: 4px solid var(--tinta); outline-offset: 2px; box-shadow: var(--sombra-chica); }
.icono-opcion input:focus-visible + span { outline: 4px solid var(--celeste); }

/* Inicio */
.opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin: 20px 0 30px; }
.opcion {
  display: grid; gap: 8px; align-content: start; padding: 22px; border-radius: 18px; text-decoration: none;
  color: var(--tinta); border: var(--borde); box-shadow: var(--sombra); transition: transform .08s, box-shadow .08s;
}
.opcion:hover { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--tinta); }
.opcion strong { font: 28px/1.1 var(--display); font-weight: 400; }
.opcion span:last-child { font-size: 18px; }
.opcion-rosa { background: var(--rosa); }
.opcion-amarilla { background: var(--amarillo); }
.opcion-verde { background: #7fe0a8; }
.opcion-azul { background: var(--celeste); }
.opcion-lila { background: #c9adff; }
.opcion-blanca { background: var(--blanco); }
.opcion .opcion-num { background: var(--blanco); }
.resumen { background: var(--blanco); border: var(--borde); border-radius: 16px; padding: 8px 20px; }

/* Lista de productos */
.instrucciones { background: var(--amarillo-claro); border: var(--borde); padding: 12px 18px; border-radius: 14px; margin-bottom: 20px; }
.instrucciones p { margin: 6px 0; }
.buscador { display: grid; gap: 6px; margin-bottom: 12px; }
.filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-weight: 800; margin: 0 0 16px; }
.filtros a {
  padding: 6px 14px; border-radius: 999px; border: 2px solid var(--tinta); background: var(--blanco);
  text-decoration: none; font-size: 16px;
}
.filtros a:hover { background: var(--amarillo-claro); }
.filtros a.activo { background: var(--tinta); color: var(--amarillo); }
.lista-productos { display: grid; gap: 14px; }
.fila-producto {
  display: grid; grid-template-columns: 110px 1fr auto; gap: 16px; align-items: center;
  background: var(--blanco); border: var(--borde); border-radius: 16px; padding: 12px; box-shadow: var(--sombra-chica); scroll-margin-top: 20px;
}
.fila-producto:target { background: var(--verde-claro); }
.miniatura {
  width: 110px; height: 110px; border-radius: 10px; overflow: hidden; display: grid; place-items: center;
  background: var(--rosa-claro); border: 2px solid var(--tinta); font-weight: 800; text-decoration: none; text-align: center; font-size: 15px;
}
.miniatura img { width: 100%; height: 100%; object-fit: contain; background: var(--blanco); }
.fila-datos h2 { margin: 0; font-size: 23px; }
.fila-meta { margin: 4px 0 10px; font-size: 16px; font-weight: 600; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pastilla { background: var(--cat-fondo, #eee); border: 2px solid var(--tinta); border-radius: 8px; padding: 0 8px; font-weight: 800; font-size: 14px; }
.etiqueta { background: var(--tinta); color: var(--blanco); border-radius: 8px; padding: 1px 8px; font-size: 14px; font-weight: 800; }
.precio-rapido { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.precio-rapido label { display: flex; align-items: center; gap: 8px; }
.precio-rapido input { width: 170px; font-weight: 800; font-size: 22px; padding: 10px 12px; }
.fila-botones { display: grid; gap: 10px; }
.fila-botones form { display: grid; }
.fila-producto.oculto { background: #eee6ea; border-style: dashed; box-shadow: none; }
.fila-producto.oculto .miniatura, .fila-producto.oculto h2 { opacity: .5; }
.vacio { text-align: center; padding: 30px; font-size: 20px; font-weight: 800; }

/* Categorías */
.lista-cats { display: grid; gap: 12px; }
.fila-cat {
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center;
  background: var(--blanco); border: var(--borde); border-radius: 16px; padding: 12px 14px; box-shadow: var(--sombra-chica);
}
.fila-cat > .icono { width: 54px; height: 54px; padding: 8px; background: var(--cat-fondo); border: var(--borde); border-radius: 12px; }
.fila-cat h2 { margin: 0; font-size: 24px; }
.fila-cat p { margin: 0; color: var(--gris); font-weight: 600; font-size: 16px; }
.fila-cat-botones { display: flex; flex-wrap: wrap; gap: 8px; justify-content: end; }
.fila-cat-botones form { display: contents; }
details.editar-cat { grid-column: 1 / -1; }
details.editar-cat summary { cursor: pointer; font-weight: 800; color: var(--rosa-osc); }
details.editar-cat .formulario { margin-top: 12px; padding: 14px; background: var(--fondo); border-radius: 12px; border: 2px dashed var(--tinta); }

/* Flyer */
.chip-filtro {
  padding: 6px 14px; border-radius: 999px; border: 2px solid var(--tinta); background: var(--blanco);
  font: 800 16px 'Archivo', sans-serif; color: var(--tinta); cursor: pointer;
}
.chip-filtro:hover { background: var(--amarillo-claro); }
.chip-filtro.activo { background: var(--tinta); color: var(--amarillo); }
.flyer-productos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 16px; max-height: 620px; overflow-y: auto; padding: 4px 8px 8px 4px; }
.flyer-item { position: relative; cursor: pointer; display: block; }
.flyer-item input { position: absolute; top: 8px; left: 8px; width: 30px; height: 30px; accent-color: var(--verde); z-index: 1; }
.flyer-item span {
  display: grid; gap: 4px; height: 100%; padding: 8px; background: var(--blanco); border: var(--borde); border-radius: 12px;
  opacity: .55; transition: opacity .1s;
}
.flyer-item input:checked + span { opacity: 1; background: var(--verde-claro); box-shadow: var(--sombra-chica); }
.flyer-item img, .flyer-item i { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--blanco); border-radius: 8px; }
.flyer-item i { display: grid; place-items: center; background: var(--rosa-claro); font: 800 15px 'Archivo', sans-serif; font-style: normal; }
.flyer-item b { font-size: 15px; line-height: 1.2; }
.flyer-item em { font: 20px var(--display); font-style: normal; }
.contador { margin: 16px 0 0; padding: 10px 16px; background: var(--amarillo); border: var(--borde); border-radius: 12px; font-weight: 800; font-size: 20px; }
.formato-opciones .cat-opcion span { min-height: 110px; font-size: 20px; }
.formato-opciones small { font-weight: 600; font-size: 15px; }
.forma { flex: none; display: block; border: 3px solid var(--tinta); border-radius: 6px; background: var(--cat-fondo); }
.forma-post { width: 44px; height: 55px; }
.forma-historia { width: 36px; height: 64px; }
.flyer-resultados { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; margin-top: 16px; }
.flyer-resultado { margin: 0; display: grid; gap: 10px; }
.flyer-resultado img { width: 100%; border: var(--borde); border-radius: 12px; box-shadow: var(--sombra-chica); }
.flyer-resultado figcaption { font-weight: 800; }

/* Pegar lista */
.pasos-lista { font-size: 20px; padding-left: 28px; display: grid; gap: 8px; margin-bottom: 20px; }
.tabla-envoltura { overflow-x: auto; background: var(--blanco); border: var(--borde); border-radius: 16px; box-shadow: var(--sombra-chica); }
.tabla { width: 100%; border-collapse: collapse; font-size: 17px; }
.tabla th, .tabla td { padding: 10px 14px; text-align: left; border-bottom: 2px solid var(--fondo); vertical-align: middle; }
.tabla th { background: var(--amarillo); font-weight: 800; border-bottom: var(--borde); }
.tabla td input, .tabla td select { font-size: 17px; padding: 8px 10px; min-width: 200px; border-width: 2px; }
.estado { display: inline-block; padding: 2px 10px; border-radius: 999px; font-weight: 800; font-size: 15px; border: 2px solid var(--tinta); }
.estado-sube { background: var(--rojo-claro); }
.estado-baja { background: var(--verde-claro); }
.estado-igual { background: #eee; }
.fila-igual { color: var(--gris); }
.campo-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 0 14px; }
.campo-inline input { max-width: 280px; }

/* Login e instalación */
.pagina-simple { min-height: 100vh; display: grid; place-items: center; padding: 20px 16px; background: var(--rosa); }
.tarjeta-simple { width: 100%; max-width: 480px; background: var(--blanco); border: var(--borde); border-radius: 22px; padding: 28px 24px; box-shadow: 8px 8px 0 var(--tinta); }
.tarjeta-simple h1 { margin-top: 0; }
.marca-grande {
  margin: 0 0 6px; font: 60px/1 var(--display); color: var(--rosa);
  -webkit-text-stroke: 2px var(--tinta); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--tinta);
}
.tarjeta-simple .ayuda { margin-top: 14px; text-align: center; }

@media (max-width: 640px) {
  body { font-size: 18px; }
  h1 { font-size: 30px; }
  .fila-producto { grid-template-columns: 80px 1fr; }
  .miniatura { width: 80px; height: 80px; }
  .fila-botones { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .precio-rapido input { width: 140px; }
  .boton-guardar { width: 100%; }
  .fila-cat { grid-template-columns: auto 1fr; }
  .fila-cat-botones { grid-column: 1 / -1; justify-content: start; }
}