/* DJC Editor — estilos. La paleta y tipografías de la marca vienen de story.djc.pe/assets/djc/base/1/variable.css
   (--color-bg, --color-surface, --color-text, --color-text-muted, --color-accent, --color-border, --font-base,
   --font-heading); el nav de DJC lo inyecta nav/1/script.js. Aquí solo van los tokens propios del editor. */
:root {
  --color-line: #2a2a2a;          /* bordes de reposo: el acento se reserva para hover/activo */
  --color-on-accent: #000000;     /* texto sobre el lima */
  --color-ok: #4ade80;
  --color-error: #f87171;
  --radio: 12px;
}
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.5 var(--font-base); color: var(--color-text); background: var(--color-bg); }
a { color: var(--color-accent); }
img { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, .marca { font-family: var(--font-heading); }
::selection { background: var(--color-accent); color: var(--color-on-accent); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* barra del editor: fija justo debajo del nav de DJC (app.js pone --djc-nav-h con el alto real del nav;
   z-index por debajo del nav (1000) y de sus menús laterales (2000)) */
#cabecera {
  position: sticky; top: var(--djc-nav-h, 60px); z-index: 900;
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; padding: .6rem 1.2rem;
  background: var(--color-surface); color: var(--color-text-muted); border-bottom: 1px solid var(--color-line);
}
#cabecera a { color: var(--color-text); text-decoration: none; }
#cabecera .marca { font-weight: 700; color: var(--color-accent); }
#cabecera .titulo { color: var(--color-text); }
#cabecera .quien { margin-left: auto; font-size: .9rem; }
#cabecera .quien a:hover, #cabecera button:hover { color: var(--color-accent); }
#cabecera button { background: none; border: 0; color: var(--color-text); cursor: pointer; padding: 0; text-decoration: underline; }

main { max-width: 1150px; margin: 0 auto; padding: 1.2rem; }
h1 { margin: .2rem 0 1rem; font-size: 1.7rem; font-weight: 700; }
h2 { margin: 2rem 0 .8rem; padding-bottom: .3rem; border-bottom: 1px solid var(--color-border); font-size: 1.15rem; font-weight: 600; }
.migas { font-size: .9rem; margin-bottom: .4rem; }
.migas a { text-decoration: none; }
.caja { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radio); padding: 1.2rem; }
.muted { color: var(--color-text-muted); font-size: .9rem; }
code { color: var(--color-accent); }

.btn {
  display: inline-flex; align-items: center; gap: .4rem; padding: .6rem 1.1rem; border: 1px solid var(--color-accent);
  border-radius: 999px; background: var(--color-accent); color: var(--color-on-accent); font-weight: 600;
  cursor: pointer; text-decoration: none; transition: background .15s, color .15s;
}
.btn:hover { background: var(--color-accent-hover); }
.btn:disabled { opacity: .6; cursor: wait; }
.btn.suave { background: transparent; color: var(--color-accent); }
.btn.suave:hover { background: var(--color-accent); color: var(--color-on-accent); }
.btn.chico { padding: .35rem .85rem; font-size: .85rem; }
.barra { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.barra .espacio { flex: 1; }
.filtros button {
  border: 1px solid var(--color-line); background: var(--color-surface); border-radius: 999px; padding: .35rem .9rem; cursor: pointer;
}
.filtros button:hover { border-color: var(--color-border); }
.filtros button.activo { background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent); font-weight: 600; }

label { display: block; font-weight: 600; margin: .8rem 0 .3rem; }
input[type=text], input[type=password], textarea {
  width: 100%; padding: .6rem .7rem; border: 1px solid var(--color-line); border-radius: 8px; background: var(--color-bg);
}
input[type=text]:focus, input[type=password]:focus, textarea:focus { border-color: var(--color-border); outline: none; }
input[type=file] { color: var(--color-text-muted); }
input[type=file]::file-selector-button {
  margin-right: .7rem; padding: .4rem .9rem; border: 1px solid var(--color-accent); border-radius: 999px;
  background: transparent; color: var(--color-accent); font-weight: 600; cursor: pointer;
}
input[type=file]::file-selector-button:hover { background: var(--color-accent); color: var(--color-on-accent); }
input[type=checkbox] { accent-color: var(--color-accent); }
::placeholder { color: #6b7280; }
.check { display: flex; gap: .5rem; align-items: center; font-weight: 400; }
.aviso { padding: .6rem .8rem; border-radius: 8px; margin: .8rem 0 0; border: 1px solid; }
.aviso.error { background: rgb(248 113 113 / .1); color: var(--color-error); }
.aviso.ok { background: rgb(229 247 116 / .08); color: var(--color-accent); }

/* login */
.login { max-width: 380px; margin: 3rem auto; }

/* grilla de imágenes */
.grilla { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.tarjeta {
  position: relative; display: block; background: var(--color-surface); border: 1px solid var(--color-line);
  border-radius: var(--radio); overflow: hidden; color: inherit; text-decoration: none; transition: border-color .15s, transform .15s;
}
.tarjeta:hover { border-color: var(--color-border); transform: translateY(-2px); }
.tarjeta .foto { aspect-ratio: 1; background: #fff; display: grid; place-items: center; }  /* fotos de producto sobre blanco */
.tarjeta .foto img { width: 100%; height: 100%; object-fit: contain; }
.tarjeta .falta { color: #6b7280; font-weight: 600; }
.tarjeta .pie { padding: .6rem .7rem; border-top: 1px solid var(--color-line); }
.tarjeta .codigo { font-size: .8rem; font-weight: 700; color: var(--color-accent); }
.etiqueta {
  position: absolute; top: .5rem; right: .5rem; padding: .15rem .6rem; border-radius: 999px; font-size: .78rem;
  font-weight: 700; background: var(--color-accent); color: var(--color-on-accent);
}
.etiqueta.falta-e { background: var(--color-error); color: #000; }

/* ficha */
.ficha { display: grid; gap: 1.2rem; align-items: start; }
@media (min-width: 900px) { .ficha { grid-template-columns: 1.3fr 1fr; } }
.ficha .grande { background: #fff; border: 1px solid var(--color-line); border-radius: var(--radio); padding: .8rem; }
.ficha .grande img { margin: 0 auto; max-height: 70vh; width: auto; }
.ficha .grande .muted { color: #6b7280; }
.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.lista li { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: 10px; padding: .7rem .8rem; }
.lista li.resuelto { opacity: .55; }
.version { display: grid; grid-template-columns: 90px 1fr; gap: .8rem; align-items: center; }
.version img { width: 90px; height: 90px; object-fit: contain; background: #fff; border-radius: 8px; }
.version.es-actual { border-color: var(--color-border); }
.pill { display: inline-block; padding: .05rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 700; background: var(--color-accent); color: var(--color-on-accent); }