/* Fábrica de Peluches · tema claro, un acento vino (el de la tarjeta de adopción).
   Verde/ámbar/rojo solo para el significado del stock. */
:root {
  --ink: #1c1917; --ink-2: #44403c; --muted: #78716c; --line: #ece7e2; --bg: #fcfaf8;
  --accent: #8b1e3f; --accent-dk: #6f1832; --accent-sf: #fbf1f4;
  --ok: #15803d; --warn: #b45309; --bad: #b91c1c;
}
body { background: var(--bg); color: var(--ink); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
h1,h2,h3,h4,h5,h6 { color: var(--ink); letter-spacing: -.011em; }
.text-muted { color: var(--muted) !important; }
a { text-decoration: none; color: var(--accent); }
.mono { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; }

.sidebar { width: 236px; min-height: 100vh; background: #fff; border-right: 1px solid var(--line); position: sticky; top: 0; z-index: 1040; }
.sidebar .brand { color: var(--ink); line-height: 1.1; }
.sidebar .brand b { letter-spacing: .14em; font-size: .95rem; }
.sidebar .brand small { letter-spacing: .12em; color: var(--muted); font-size: .6rem; }
.sidebar .seccion { font-size: .64rem; text-transform: uppercase; letter-spacing: .12em; color: #a8a29e; font-weight: 700; padding: .9rem .7rem .3rem; }
.sidebar .nav-link { color: var(--ink-2); border-radius: 9px; font-size: .9rem; font-weight: 500; padding: .45rem .7rem; display: flex; align-items: center; }
.sidebar .nav-link i { font-size: 1rem; color: var(--muted); margin-right: .6rem; }
.sidebar .nav-link:hover { background: #f7f3f0; color: var(--ink); }
.sidebar .nav-link.active { background: var(--accent-sf); color: var(--accent-dk); font-weight: 600; }
.sidebar .nav-link.active i { color: var(--accent); }
.sidebar .usuario { border: 1px solid var(--line); border-radius: 11px; }
.content { min-width: 0; }
.topbar-movil { display: none; }
.sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(28,25,23,.35); z-index: 1044; }
@media (max-width: 991.98px) {
  .topbar-movil { display: flex; align-items: center; gap: .6rem; background: #fff; border-bottom: 1px solid var(--line); padding: .6rem .9rem; position: sticky; top: 0; z-index: 1043; }
  .sidebar { position: fixed; top: 0; left: 0; height: 100vh; overflow-y: auto; transform: translateX(-100%); transition: transform .22s ease; z-index: 1045; }
  .sidebar.show { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.18); }
  .sidebar-backdrop.show { display: block; }
  .content { padding: 1rem !important; }
}

.card { border: 1px solid var(--line); border-radius: 14px; box-shadow: none; }
.content h4 { font-size: 1.5rem; font-weight: 650; margin-bottom: .15rem; }
.btn { border-radius: 9px; font-weight: 500; }
.btn-accent { background: var(--accent); color: #fff; border: 1px solid var(--accent); }
.btn-accent:hover, .btn-accent:focus { background: var(--accent-dk); border-color: var(--accent-dk); color: #fff; }
.btn-suave { background: #fff; border: 1px solid var(--line); color: var(--ink-2); }
.btn-suave:hover { background: #faf7f5; border-color: #ddd5ce; color: var(--ink); }
.form-control, .form-select { border-color: var(--line); border-radius: 9px; }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: #d9a9b8; box-shadow: 0 0 0 3px var(--accent-sf); }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.form-label { font-size: .8rem; font-weight: 600; color: var(--ink-2); margin-bottom: .25rem; }
.form-text { font-size: .76rem; }
.table > :not(caption) > * > * { border-bottom-color: var(--line); vertical-align: middle; }
.table thead th { font-weight: 600; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); background: #fbf9f7 !important; white-space: nowrap; }
.badge { font-weight: 600; border-radius: 7px; padding: .34em .6em; }
.badge.bg-secondary { background: #f5f5f4 !important; color: #57534e !important; }
.badge.bg-success { background: #dcfce7 !important; color: #15803d !important; }
.badge.bg-warning { background: #fef3c7 !important; color: #b45309 !important; }
.badge.bg-danger { background: #fee2e2 !important; color: #b91c1c !important; }
.badge.bg-info { background: #e0f2fe !important; color: #0369a1 !important; }
.alert { border-radius: 11px; border: 0; }
.punto { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 9px; }
.kpi .valor { font-size: 1.7rem; font-weight: 650; line-height: 1; letter-spacing: -.02em; }
.kpi .rotulo { font-size: .78rem; color: var(--muted); }
.st-ok { color: var(--ok); font-weight: 600; } .st-bajo { color: var(--warn); font-weight: 600; } .st-cero { color: var(--bad); font-weight: 600; }

/* Subnavegación de Configuración */
.subnav { display: flex; gap: .35rem; overflow-x: auto; border-bottom: 1px solid var(--line); margin-bottom: 1.2rem; }
.subnav a { padding: .55rem .85rem; color: var(--muted); font-size: .88rem; font-weight: 500; border-bottom: 2px solid transparent; white-space: nowrap; }
.subnav a:hover { color: var(--ink); }
.subnav a.active { color: var(--accent-dk); border-color: var(--accent); font-weight: 600; }

.mini { width: 40px; height: 40px; border-radius: 9px; object-fit: cover; background: #f5f0ec; display: inline-flex; align-items: center; justify-content: center; font-size: .66rem; font-weight: 700; color: var(--muted); flex: 0 0 40px; overflow: hidden; }
.mini img { width: 100%; height: 100%; object-fit: cover; }

/* ── Tienda (POS) ─────────────────────────────────────────── */
.pos { display: grid; grid-template-columns: 1fr 360px; gap: 1.1rem; align-items: start; }
@media (max-width: 1100px) { .pos { grid-template-columns: 1fr; } }
.botonera { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.boton-venta { border: 1px solid var(--line); background: #fff; border-radius: 16px; padding: 0; text-align: left; overflow: hidden; transition: transform .08s ease, box-shadow .15s, border-color .15s; display: flex; flex-direction: column; }
.boton-venta:hover { border-color: #e2c8d0; box-shadow: 0 10px 26px -16px rgba(28,25,23,.35); }
.boton-venta:active { transform: scale(.97); }
.boton-venta .foto { height: 116px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--c, #8b1e3f) 8%, #fff); }
.boton-venta .foto img { width: 100%; height: 100%; object-fit: cover; }
.boton-venta .foto .ini { font-size: 2.2rem; font-weight: 700; color: var(--c, #8b1e3f); opacity: .55; }
.boton-venta .cuerpo { padding: .6rem .75rem .75rem; }
.boton-venta .nom { font-weight: 600; font-size: .92rem; line-height: 1.25; color: var(--ink); }
.boton-venta .precio { font-weight: 700; color: var(--accent-dk); font-size: .95rem; margin-top: .2rem; }
.boton-venta .meta { font-size: .72rem; color: var(--muted); }
.boton-venta[disabled] { opacity: .45; }
.ticket { position: sticky; top: 1rem; }
.ticket .linea { display: flex; gap: .6rem; padding: .6rem 0; border-bottom: 1px dashed var(--line); }
.ticket .linea:last-child { border-bottom: 0; }
.ticket .total { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; }
.opciones { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.opcion { border: 2px solid var(--line); border-radius: 14px; background: #fff; padding: 0; overflow: hidden; text-align: left; }
.opcion .foto { height: 92px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--c, #8b1e3f) 8%, #fff); }
.opcion .foto img { width: 100%; height: 100%; object-fit: cover; }
.opcion .foto .ini { font-size: 1.7rem; font-weight: 700; color: var(--c, #8b1e3f); opacity: .55; }
.opcion .cuerpo { padding: .45rem .6rem .55rem; font-size: .82rem; }
.opcion.sel { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-sf); }
.opcion[disabled] { opacity: .4; }
.pasos { display: flex; gap: .4rem; flex-wrap: wrap; }
.pasos span { font-size: .75rem; padding: .25rem .6rem; border-radius: 999px; background: #f5f0ec; color: var(--muted); }
.pasos span.on { background: var(--accent-sf); color: var(--accent-dk); font-weight: 600; }
.pasos span.ok { background: #dcfce7; color: var(--ok); }
.segmentado { display: flex; gap: .4rem; flex-wrap: wrap; }
.segmentado label { flex: 1 1 0; }
.segmentado input { display: none; }
.segmentado span { display: block; text-align: center; border: 1px solid var(--line); border-radius: 10px; padding: .55rem .4rem; font-size: .85rem; cursor: pointer; background: #fff; }
.segmentado input:checked + span { border-color: var(--accent); background: var(--accent-sf); color: var(--accent-dk); font-weight: 600; }

.componente { border: 1px solid var(--line); border-radius: 12px; padding: .8rem; background: #fdfcfb; }
.etapa-fac { font-size: .75rem; }

.recibo { max-width: 360px; margin: 0 auto; font-size: .85rem; }
.recibo .tit { text-align: center; }
@media print {
  .sidebar, .topbar-movil, .no-imprimir, .alert { display: none !important; }
  .content { padding: 0 !important; }
  body { background: #fff; }
  .card { border: 0; }
}
.auth-body { background: var(--bg); }
.auth-card { width: 400px; border-radius: 18px; }

/* Experiencia (tablet dentro de la fábrica) */
.lector { border-radius: 12px; overflow: hidden; background: #111; }
.lector video { width: 100% !important; }
.ticket-pend { display: flex; justify-content: space-between; gap: .75rem; align-items: center; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: 12px; color: inherit; background: #fff; }
.ticket-pend:hover { border-color: var(--accent); background: var(--accent-sf); }
.opciones-exp { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .6rem; }
.opciones-exp form { margin: 0; }
.qr svg { width: 100%; height: auto; display: block; }

/* Guía "Cómo funciona" */
.pasos-guia { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.pasos-guia > li { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.1rem; }
.pasos-guia .cab { display: flex; gap: .75rem; align-items: center; margin-bottom: .5rem; }
.pasos-guia .cab small { display: block; color: #6b6b6b; font-size: .75rem; }
.pasos-guia .num { flex: 0 0 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 700; }
.pasos-guia p { font-size: .9rem; margin-bottom: .4rem; }