/* IMG360 · piezas propias encima de tokens.css (Concepto B). Sin hex sueltos: todo desde tokens. */

.brand-sub { font-size: 13px; font-weight: 600; color: var(--side-muted); letter-spacing: 0; margin-top: 4px; }
.side-light .brand { color: var(--side-title); }
.saldo { display: flex; align-items: center; gap: 10px; margin: 6px 0 2px; padding: 10px 12px; border: 1px solid var(--side-line); border-radius: 10px; color: var(--side-text); font-size: 13px; cursor: pointer; }
.saldo b { font-size: 16px; color: var(--side-title); }
.saldo:hover { background: var(--side-hover); }
.usuario-lat { display: flex; align-items: center; gap: 10px; padding: 10px 12px; color: var(--side-text); }
.usuario-lat .n { font-weight: 600; font-size: 14px; }
.usuario-lat .o { font-size: 12px; color: var(--side-muted); }
.usuario-lat .icon-btn svg.lucide { color: var(--side-muted); }

.topbar .menu-crear { position: relative; }
.pastilla-tokens { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; background: var(--teal-soft); color: var(--navy); font-weight: 600; font-size: 13px; cursor: pointer; }
.pastilla-tokens svg.lucide { color: var(--teal); width: 15px; height: 15px; }
.boton-menu { display: none; }

/* ---------- Menú y diálogo ---------- */
.menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 220px; z-index: 40; padding: 6px; background: var(--bg); border: 1px solid var(--tile-line); border-radius: var(--r-card); box-shadow: var(--float); }
.menu button, .menu a { display: flex; width: 100%; align-items: center; gap: 10px; height: 38px; padding: 0 10px; border: 0; background: transparent; border-radius: 8px; cursor: pointer; color: var(--navy); text-align: left; }
.menu button:hover, .menu a:hover { background: var(--hover); }
.fondo-dialogo { position: fixed; inset: 0; z-index: 50; background: var(--overlay); display: grid; place-items: center; padding: 16px; }
.dialogo { width: min(560px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--tile-line); border-radius: var(--r-tile); box-shadow: var(--float); }
.dialogo.ancho { width: min(980px, 100%); }
.dialogo > header { display: flex; align-items: center; gap: 10px; padding: 18px 22px 10px; }
.dialogo > header h2 { margin: 0; font-size: 18px; color: var(--navy); }
.dialogo > header .icon-btn { margin-left: auto; }
.dialogo > .cuerpo { padding: 6px 22px 18px; overflow: auto; }
.dialogo > footer { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--line); }

/* ---------- Formularios ---------- */
.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.campo > label, .etq { font-weight: 600; color: var(--navy); font-size: 14px; display: flex; align-items: center; gap: 6px; }
.etq .opc { font-weight: 400; color: var(--subtle); }
.ayuda { font-size: 13px; color: var(--muted); margin: 0; }
.input, .select, .area { width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--tile-line); border-radius: var(--r-ctl); background: var(--bg); color: var(--text); outline: 0; }
.area { height: auto; min-height: 96px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.input:focus, .select:focus, .area:focus { border-color: var(--teal); }
.contador { align-self: flex-end; font-size: 12px; color: var(--subtle); margin-top: -2px; }
.fila-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.seg.lleno { display: flex; }
.seg.lleno button { flex: 1; }
@media (max-width: 760px) {
  .seg.lleno button { white-space: normal; height: auto; min-height: 32px; padding: 6px 10px; line-height: 1.3; }
  .views { overflow-x: auto; scrollbar-width: none; }
  .views .view { flex: none; margin-bottom: 0; }
}
.btn.grande { height: 46px; width: 100%; font-size: 15px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.coste { font-weight: 500; opacity: .8; font-size: 13px; }
.aviso-linea { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--fill-paper); color: var(--muted); font-size: 13px; }
.aviso-linea.ia { background: var(--fill-cyan); color: var(--navy); }
.aviso-linea.mal { background: var(--tag-red); color: var(--tag-red-t); }

/* ---------- Zona de subida ---------- */
.soltar { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 120px; padding: 16px; border: 1.5px dashed var(--teal-line); border-radius: var(--r-card); background: var(--fill-paper); color: var(--muted); text-align: center; cursor: pointer; }
.soltar:hover, .soltar.sobre { border-color: var(--teal); background: var(--teal-soft); }
.soltar svg.lucide { width: 26px; height: 26px; color: var(--teal); }
.soltar b { color: var(--navy); }
.minis { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; margin-top: 10px; }
.mini { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 1px solid var(--tile-line); background: var(--fill-paper); }
.mini img { width: 100%; height: 100%; object-fit: contain; }
.mini .quitar { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: var(--bg); box-shadow: var(--card-shadow); cursor: pointer; display: grid; place-items: center; }
.mini .quitar svg.lucide { width: 14px; height: 14px; }
.mini .rotulo { position: absolute; left: 4px; bottom: 4px; max-width: calc(100% - 8px); }
.mini .rotulo .tag { height: 20px; font-size: 11px; padding: 0 8px; }

/* ---------- Generador ---------- */
.generador { display: grid; grid-template-columns: minmax(340px, 420px) minmax(0, 1fr); gap: var(--gap); align-items: start; }
.generador .tile { grid-column: auto; }
.lienzo { position: relative; display: grid; place-items: center; min-height: 420px; border-radius: var(--r-card); background: var(--fill-paper); overflow: hidden; }
.lienzo img { max-width: 100%; max-height: 640px; display: block; }
.lienzo canvas { position: absolute; cursor: crosshair; touch-action: none; }
.lienzo .vacio-lienzo { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--subtle); padding: 40px; text-align: center; }
.lienzo .vacio-lienzo svg.lucide { width: 40px; height: 40px; color: var(--teal-line); }
.cargando { display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--muted); }
.giro { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--teal-soft); border-top-color: var(--teal); animation: giro 0.9s linear infinite; }
@keyframes giro { to { transform: rotate(360deg); } }
.acciones-img { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tira { display: flex; gap: 8px; overflow-x: auto; padding: 12px 0 2px; }
.tira button { flex: none; width: 72px; height: 72px; padding: 0; border-radius: 10px; border: 2px solid transparent; overflow: hidden; background: var(--fill-paper); cursor: pointer; }
.tira button.on { border-color: var(--teal); }
.tira img { width: 100%; height: 100%; object-fit: cover; }
.meta-img { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

/* ---------- Galería ---------- */
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.pieza { position: relative; border: 1px solid var(--tile-line); border-radius: var(--r-card); overflow: hidden; background: var(--bg); cursor: pointer; display: flex; flex-direction: column; }
.pieza:hover { border-color: var(--tile-line-hover); }
.pieza.sel { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal); }
.pieza .foto { aspect-ratio: 1; background: var(--fill-paper); display: grid; place-items: center; }
.pieza .foto img { width: 100%; height: 100%; object-fit: contain; }
.pieza .pie { padding: 8px 10px; display: flex; align-items: center; gap: 6px; min-width: 0; }
.pieza .pie .t { flex: 1; min-width: 0; font-size: 13px; color: var(--navy); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pieza .pie .s { font-size: 12px; color: var(--subtle); }
.pieza .esquina { position: absolute; top: 8px; left: 8px; }
.pieza .fav { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--bg); box-shadow: var(--card-shadow); display: grid; place-items: center; cursor: pointer; }
.pieza .fav.on svg.lucide { color: var(--warn); fill: var(--warn); }
.galeria.peq { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }

.dos-col { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--gap); align-items: start; }
.lista-lat { display: flex; flex-direction: column; gap: 2px; }
.lista-lat button { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text); cursor: pointer; text-align: left; }
.lista-lat button:hover { background: var(--hover); }
.lista-lat button.on { background: var(--teal-soft); color: var(--navy); font-weight: 600; }
.lista-lat button .n { margin-left: auto; color: var(--subtle); font-size: 12px; }

/* ---------- Progreso y registro ---------- */
.barra { height: 8px; border-radius: 999px; background: var(--fill-paper); overflow: hidden; }
.barra > i { display: block; height: 100%; background: var(--teal); border-radius: 999px; transition: width .4s; }
.barra > i.mal { background: var(--bad); }
.registro { height: 320px; overflow: auto; padding: 12px; border-radius: var(--r-card); background: var(--fill-paper); font: 12.5px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text); }
.registro time { color: var(--subtle); margin-right: 8px; }
.registro .error { color: var(--bad); }
.visor3d { width: 100%; height: 560px; border: 0; border-radius: var(--r-card); background: var(--fill-paper); }

/* ---------- Varios ---------- */
.muestras { display: flex; gap: 8px; flex-wrap: wrap; }
.muestra { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--tile-line); cursor: pointer; position: relative; }
.codigo { padding: 12px 14px; border-radius: var(--r-card); background: var(--fill-paper); font: 12.5px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-x: auto; white-space: pre; color: var(--navy); }
.secreto { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--tag-amber); color: var(--tag-amber-t); font: 13px ui-monospace, Menlo, monospace; word-break: break-all; }
.logo-conector { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--teal-soft); color: var(--navy); font-weight: 700; font-size: 15px; flex: none; }
.rejilla-con { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.opcion-con { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--tile-line); border-radius: var(--r-card); background: var(--bg); cursor: pointer; text-align: left; }
.opcion-con:hover { border-color: var(--teal); }
.opcion-con .t { font-weight: 600; color: var(--navy); }

#avisos { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: flex; flex-direction: column; gap: 8px; }
.toast { min-width: 260px; max-width: 420px; padding: 12px 16px; border-radius: var(--r-card); background: var(--bg); border: 1px solid var(--tile-line); box-shadow: var(--float); color: var(--navy); display: flex; gap: 10px; align-items: flex-start; }
.toast.ok svg.lucide { color: var(--ok); } .toast.mal svg.lucide { color: var(--bad); }

/* ---------- Acceso ---------- */
.acceso { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: var(--page); }
.acceso .caja { width: min(420px, 100%); }
.acceso .marca-acceso { font-size: 26px; font-weight: 700; color: var(--navy); line-height: 1.1; margin: 0 0 18px 4px; }
.acceso .marca-acceso em { font-style: normal; color: var(--teal); display: block; font-size: 18px; }

@media (max-width: 1100px) {
  .generador, .dos-col { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .boton-menu { display: inline-grid; }
  .app.cajon .sidebar { display: flex; position: fixed; inset: 0 auto 0 0; width: var(--side-w); z-index: 45; }
  .app.cajon::after { content: ""; position: fixed; inset: 0; background: var(--overlay); z-index: 44; }
  .topbar .crumbs span.sep, .topbar .crumbs .inter { display: none; }
  .fila-campos { grid-template-columns: 1fr; }
  .galeria { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .page-head { flex-wrap: wrap; }
}