@font-face { font-family: 'Fraunces'; font-weight: 700; font-display: swap; src: url('../fonts/fraunces-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-display: swap; src: url('../fonts/inter-latin-500-normal.woff2') format('woff2'); }

:root { --bg:#F2F3F5; --sup:#FFFFFF; --sup2:#F8F7F5; --txt:#1F2330; --mut:#6E7383; --linea:#E2DFDB; --vino:#7A1F35; --vino-s:#F3E4E8; --ok:#2C6B49; --ok-s:#E1F0E7; --av:#9A5B12; --av-s:#F8EBD6; --neu-s:#ECEEF1; --err:#A12A2A; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --bg:#121317; --sup:#1B1D24; --sup2:#22252E; --txt:#F0ECE9; --mut:#A3A9B8; --linea:#33363F; --vino:#C25B74; --vino-s:#3A2229; --ok:#7FCB9F; --ok-s:#1F3328; --av:#E3B16B; --av-s:#3A2C16; --neu-s:#2A2D37; --err:#EE8D8D; } }
:root[data-tema="oscuro"] { --bg:#121317; --sup:#1B1D24; --sup2:#22252E; --txt:#F0ECE9; --mut:#A3A9B8; --linea:#33363F; --vino:#C25B74; --vino-s:#3A2229; --ok:#7FCB9F; --ok-s:#1F3328; --av:#E3B16B; --av-s:#3A2C16; --neu-s:#2A2D37; --err:#EE8D8D; }

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--txt); font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 500; font-size: 15px; line-height: 1.5; }
h1, h2, h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 700; margin: 0; line-height: 1.2; }
b, strong { font-weight: 600; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid #FF6B35; outline-offset: 2px; }
.oculto { display: none !important; }
.envoltorio { max-width: 1000px; margin: 0 auto; padding: 18px 16px 28px; }

/* Marca AntropIA (bloque de marca de las demos) */
.antropia-header { background: #000; border-bottom: 2px solid #FF6B35; }
.antropia-header-content { max-width: 1080px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 24px; }
.antropia-logo-header { display: flex; align-items: center; }
.antropia-logo-header img { width: auto; height: 60px; margin-right: 14px; display: block; }
.antropia-header-divider { width: 1px; height: 43px; background: #FF6B35; flex: none; margin-right: 14px; }
.antropia-header-textblock { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.antropia-logo-text { font-family: 'Fraunces', serif; font-weight: 700; font-size: 19px; color: #fff; line-height: 1; letter-spacing: .01em; }
.antropia-logo-text .ia, .antropia-footer-wordmark .ia { color: #FF6B35; }
.antropia-header-tagline { font-size: 10.5px; color: #C7CDD6; letter-spacing: .02em; }
.antropia-aviso { color: #C7CDD6; font-size: 12.5px; border: 1px solid #3A3F4D; border-radius: 999px; padding: 3px 12px; white-space: nowrap; }
.antropia-footer { margin-top: 14px; padding: 8px 24px; background: #000; border-top: 2px solid #FF6B35; }
.antropia-footer-content { display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 1080px; margin: 0 auto; text-align: center; }
.antropia-footer-wordmark { font-family: 'Fraunces', serif; font-weight: 700; font-size: 18px; color: #fff; line-height: 1; }
.antropia-footer-tagline { color: #C7CDD6; font-size: 10.5px; }
.antropia-footer-location { color: #9AA5B1; font-size: 9.5px; margin: 2px 0 0; opacity: .8; }
@media (max-width: 600px) {
  .antropia-header-content { padding: 6px 16px; }
  .antropia-logo-header img { height: 48px; margin-right: 12px; }
  .antropia-header-divider { height: 34px; margin-right: 12px; }
  .antropia-logo-text { font-size: 16px; }
  .antropia-aviso { font-size: 11px; padding: 2px 9px; }
}

/* Bloque del producto y del negocio ficticio (misma estructura y colores que el panel de Facti) */
.hero { display: flex; align-items: center; justify-content: space-between; gap: 18px; background: #2A2E3E; border-radius: 14px; border-bottom: 3px solid #FF6B35; padding: 20px 24px; margin: 0 0 16px; }
.hero-et { color: #FF6B35; font-weight: 600; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.hero-nombre { font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 40px; line-height: 1.05; color: #fff; margin: 4px 0; }
.hero-nombre .ia { color: #FF6B35; }
.hero-lema { margin: 0 0 10px; color: #C7CDD6; font-size: 14px; }
.hero-cli { color: #fff; font-weight: 600; font-size: 15px; }
.hero-lugar { color: #9AA5B1; font-weight: 500; }
.hero-logo-w { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: none; max-width: 130px; text-align: center; }
.hero-logo { width: 96px; height: 96px; flex: none; outline: 2px dashed rgba(255,255,255,.6); outline-offset: 5px; border-radius: 50%; }
.hero-logo-cap { color: #C7CDD6; font-size: 11px; line-height: 1.3; }
/* Barra de botones de la demo (con el acento del proyecto) */
.barra-demo { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin: 0 0 12px; }
.barra-txt { color: var(--mut); font-size: 13.5px; }
.barra-bot { display: flex; gap: 8px; flex-wrap: wrap; }
.barra-demo .bt { display: inline-flex; align-items: center; text-decoration: none; border: 1px solid var(--linea); background: var(--sup); color: var(--txt); border-radius: 10px; padding: 7px 14px; font-weight: 600; font-size: 13.5px; min-height: 38px; }
.barra-demo .bt.prim { background: var(--vino); border-color: var(--vino); color: #fff; }
@media (max-width: 600px) { .hero-logo { width: 68px; height: 68px; } .hero-logo-w { max-width: 96px; } .barra-bot { width: 100%; } .barra-demo .bt { flex: 1 1 auto; justify-content: center; } }
@media (max-width: 600px) { .hero { padding: 14px 16px; } .hero-nombre { font-size: 32px; } .hero-logo { width: 68px; height: 68px; } }

/* Pasos */
.pasos { display: flex; gap: 6px; overflow-x: auto; padding: 0 0 10px; margin: 0 0 14px; border-bottom: 1px solid var(--linea); }
.pasos button { display: flex; align-items: center; gap: 8px; border: 0; background: none; color: var(--mut); padding: 8px 12px; border-radius: 10px; white-space: nowrap; }
.pasos button .n { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid currentColor; display: grid; place-items: center; font-size: 12.5px; flex: none; }
.pasos button[aria-current="step"] { background: var(--vino-s); color: var(--vino); }
.pasos button[aria-current="step"] .n { background: var(--vino); border-color: var(--vino); color: #fff; }
.pasos button:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 600px) { .pasos button .t { display: none; } .pasos button[aria-current="step"] .t { display: inline; } }

h2.tit { font-size: 24px; margin: 0 0 4px; }
.lead { color: var(--mut); margin: 0 0 16px; max-width: 62ch; }
.dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 16px; align-items: start; }
@media (max-width: 800px) { .dos { grid-template-columns: 1fr; } }
.card { background: var(--sup); border: 1px solid var(--linea); border-radius: 14px; padding: 16px; }
.card + .card { margin-top: 12px; }
.btn { background: var(--vino); color: #fff; border: 0; border-radius: 10px; padding: 11px 18px; font-weight: 600; min-height: 44px; }
.btn.sec { background: transparent; color: var(--txt); border: 1px solid var(--linea); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.chico { padding: 6px 12px; min-height: 34px; font-size: 13.5px; }
.fila-btn { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.chip { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.chip.ok { background: var(--ok-s); color: var(--ok); } .chip.av { background: var(--av-s); color: var(--av); }
.chip.neu { background: var(--neu-s); color: var(--mut); } .chip.vino { background: var(--vino-s); color: var(--vino); }

/* Remito de papel */
.papel { background: #FBF8F2; color: #2A2622; border-radius: 6px; padding: 16px; font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; line-height: 1.7; box-shadow: 0 6px 18px rgba(0,0,0,.18); transform: rotate(-.5deg); }
.papel h4 { margin: 0 0 6px; text-align: center; font-size: 13px; letter-spacing: .08em; border-bottom: 1px dashed #9a9288; padding-bottom: 6px; }
.papel .it { display: flex; justify-content: space-between; gap: 8px; }
.papel .tot { margin-top: 8px; border-top: 1px dashed #9a9288; padding-top: 6px; text-align: right; }

/* Renglones leídos */
.lineas { display: grid; gap: 10px; }
.linea { border: 1px solid var(--linea); border-radius: 12px; padding: 10px 12px; background: var(--sup2); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; }
.linea.pend { border-color: var(--av); }
.linea .crudo { font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: var(--mut); }
.linea .prod { font-weight: 600; }
.linea .num { text-align: right; white-space: nowrap; }
.total-fila { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.total-fila .m { font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 20px; }

/* Stock */
.tw { overflow-x: auto; border: 1px solid var(--linea); border-radius: 14px; background: var(--sup); }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 12px; color: var(--mut); background: var(--sup2); padding: 10px 12px; font-weight: 600; }
td { padding: 11px 12px; border-top: 1px solid var(--linea); }
td.d, th.d { text-align: right; }
tr.nuevo td { background: var(--vino-s); }
.banner { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--vino-s); border: 1px solid var(--vino); color: var(--txt); border-radius: 14px; padding: 12px 14px; margin: 0 0 14px; }
.banner b { color: var(--vino); }

/* Pedido */
.chat { background: var(--sup2); border: 1px solid var(--linea); border-radius: 14px; padding: 14px; }
.burbuja { background: var(--sup); border: 1px solid var(--linea); border-radius: 12px 12px 12px 3px; padding: 10px 12px; white-space: pre-wrap; font-size: 14px; }
.precio { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--linea); border-radius: 8px; padding: 0 8px; background: var(--sup); }
.precio input { width: 92px; border: 0; background: none; text-align: right; padding: 7px 2px; min-height: 36px; }
.desc input { width: 56px; border: 1px solid var(--linea); border-radius: 8px; background: var(--sup); text-align: right; padding: 6px 8px; min-height: 36px; }

/* Ingreso a la demo */
.login { max-width: 440px; margin: 20px auto; }
.login-card { padding: 22px; }
.marca-login { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 0 14px; }
.marca-login .wm { font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 44px; line-height: 1; }
.marca-login .wm .ia { color: #FF6B35; }
.marca-login img { height: 48px; width: auto; display: block; }
.login label { display: block; font-size: 14px; margin: 12px 0 4px; font-weight: 600; }
.login .campo { width: 100%; min-height: 46px; border: 1px solid var(--linea); border-radius: 10px; background: var(--sup); padding: 8px 12px; }
.login .btn.full { width: 100%; margin-top: 18px; }
.login .error { color: var(--err); font-size: 13.5px; margin: 0 0 4px; }
.prueba { background: var(--av-s); border-radius: 12px; padding: 12px 14px; margin-top: 18px; }
.prueba b { color: var(--av); display: block; margin-bottom: 2px; }
.prueba code { background: var(--sup); border-radius: 6px; padding: 1px 7px; font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.prueba .btn { margin-top: 10px; }
@media (max-width: 600px) { .marca-login .wm { font-size: 38px; } }

/* Nota */
.nota { background: #fff; color: #1F2330; border: 1px solid #D9D5D0; border-radius: 6px; padding: 24px; max-width: 720px; margin: 0 auto; box-shadow: 0 10px 30px rgba(0,0,0,.14); font-size: 13.5px; }
.nota .cab { display: flex; align-items: center; gap: 14px; border-bottom: 2px solid #1F2330; padding-bottom: 12px; flex-wrap: wrap; }
.nota .cab img { width: 72px; height: 72px; }
.nota .cab .meta { margin-left: auto; text-align: right; }
.nota .cab .meta b { display: block; font-family: 'Fraunces', Georgia, serif; font-size: 19px; }
.nota table { margin-top: 14px; min-width: 0; }
.nota th { background: none; color: #5b5551; border-bottom: 1px solid #1F2330; }
.nota td { border-top: 1px solid #E2DFDB; }
.nota td.d, .nota th.d { white-space: nowrap; }
@media (max-width: 600px) { .nota { padding: 16px 12px; font-size: 12.5px; } .nota td, .nota th { padding: 8px 6px; } }
.nota .tt { margin-top: 12px; margin-left: auto; width: 260px; max-width: 100%; }
.nota .tt div { display: flex; justify-content: space-between; padding: 3px 0; }
.nota .tt .g { font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 19px; border-top: 2px solid #1F2330; margin-top: 4px; padding-top: 6px; }
.nota .legal { margin-top: 18px; border-top: 1px dashed #D9D5D0; padding-top: 8px; font-size: 12px; color: #5b5551; }
.cierre { text-align: center; margin: 20px auto 0; max-width: 620px; }
.cierre h3 { font-size: 22px; margin: 0 0 6px; }
.cierre p { color: var(--mut); margin: 0 0 12px; }
.wa { display: inline-block; text-decoration: none; background: #1F8A4C; color: #fff; border-radius: 10px; padding: 12px 20px; font-weight: 600; min-height: 46px; }
.tour { position: sticky; bottom: 14px; z-index: 30; max-width: 560px; margin: 20px auto 0; background: #1F2330; color: #F0ECE9; border: 2px solid #FF6B35; border-radius: 14px; padding: 14px 16px; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.tour .et { color: #FF9A73; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.tour h3 { font-size: 18px; color: #fff; margin: 2px 0 4px; }
.tour p { margin: 0 0 12px; color: #C7CDD6; font-size: 14px; }
.tour .fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tour .fila-b { display: flex; gap: 8px; }
.tour .puntos { display: flex; gap: 6px; }
.tour .puntos i { width: 8px; height: 8px; border-radius: 50%; background: #4A4F5E; }
.tour .puntos i.on { background: #FF6B35; }
.tour .btn { background: #B0445F; color: #fff; }
.tour .btn.sec { background: transparent; color: #F0ECE9; border: 1px solid #4A4F5E; }
.tour .wa.chico { padding: 6px 12px; min-height: 34px; font-size: 13.5px; }
.guia { margin-left: auto; border: 1px solid var(--linea); background: var(--sup); color: var(--vino); border-radius: 10px; padding: 6px 12px; white-space: nowrap; }
.aviso { position: fixed; left: 50%; top: 84px; transform: translateX(-50%); background: #2A2E3E; color: #F2F3F5; padding: 10px 16px; border-radius: 10px; font-size: 14px; z-index: 50; max-width: 92vw; text-align: center; }

@media print {
  body * { visibility: hidden; }
  #nota-doc, #nota-doc * { visibility: visible; }
  #nota-doc { position: absolute; left: 0; top: 0; box-shadow: none; border: 0; max-width: none; width: 100%; }
}