/* Layout: hojas A4 apiladas que replican la revista impresa (cabezal, banda verde por rubro, grilla 4x4, pie) + barra de herramientas fija arriba */
:root{
  --green:#008F1C; --green-dark:#004F10; --ink:#141414; --muted:#5b605a; --sheet:#F5F5F2;
  --line:#CCCCCC; --card:#FFFFFF; --desk:#DDE3DA; --bar:#FFFFFF; --bar-ink:#141414; --warn:#C62828;
  --font:"Inter Tight","Helvetica Neue",Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--desk:#1A1F19;--bar:#232922;--bar-ink:#EEF2EC;--muted:#AEB5AB;color-scheme:dark}}
:root[data-theme="dark"]{--desk:#1A1F19;--bar:#232922;--bar-ink:#EEF2EC;--muted:#AEB5AB;color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--desk);color:var(--bar-ink);font-family:var(--font)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bar)}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.sr{position:absolute;}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Barra */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:6;background:var(--bar);border-bottom:3px solid var(--green);box-shadow:0 2px 10px rgba(0,0,0,.08)}
.barin{max-width:1000px;margin:0 auto;display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;padding-block:10px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.brand{font-weight:800;color:var(--green);letter-spacing:-.01em;font-size:17px;white-space:nowrap}
.brand small{display:block;font-weight:500;color:var(--muted);font-size:12px}
.seg{display:inline-flex;border:2px solid var(--green);border-radius:999px;overflow:hidden}
.seg button{border:0;background:transparent;padding:5px 12px;font-weight:700;cursor:pointer;font-size:14px}
.seg button[aria-pressed="true"]{background:var(--green);color:#fff}
.search{flex:1;min-width:160px}
.search input{width:100%;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:7px 14px}
.btn{border:2px solid var(--green);background:transparent;border-radius:999px;padding:5px 14px;font-weight:700;cursor:pointer;font-size:14px;white-space:nowrap}
.btn.solid{background:var(--green);color:#fff}
a.btn{text-decoration:none;color:var(--green);display:inline-block}
.denied{max-width:560px;margin:40px auto;background:var(--bar);border-radius:12px;padding:20px;color:var(--bar-ink)}
.btn:disabled{opacity:.5;cursor:default}
.status{font-size:13px;color:var(--muted);width:100%}
.status:empty{display:none}

/* Panel de edición */
.panel{max-width:1000px;margin:14px auto 0;background:var(--bar);border:2px dashed var(--green);border-radius:12px;padding:14px 16px;display:grid;gap:12px;color:var(--bar-ink)}
.wrapx{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.panel h2{margin:0;font-size:16px}
.row{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:end}
.field{display:grid;gap:3px;font-size:12px;color:var(--muted)}
.field input,.field select{border:1px solid var(--line);border-radius:8px;padding:6px 8px;background:var(--card);color:var(--ink);font-size:14px}
.panel p{margin:0;font-size:13px;color:var(--muted);max-width:75ch}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:12px;border:1px solid var(--line);border-radius:999px;padding:2px 8px;background:var(--card);color:var(--ink);cursor:pointer}

/* Hojas A4: 1 unidad (--u) = 1 punto tipográfico de la página impresa */
.sheets{display:grid;gap:22px;justify-items:center;padding-block:22px 60px}
.sheetwrap{width:100%;max-width:900px;container-type:inline-size}
.page{--u:calc(100cqw / 595.28);position:relative;width:100%;aspect-ratio:595.28/841.89;background:var(--sheet);color:var(--ink);overflow:hidden;box-shadow:0 6px 24px rgba(0,0,0,.18)}
.page.auto{aspect-ratio:auto;padding-bottom:calc(70 * var(--u))}
.hdr{position:absolute;left:0;top:0;width:100%;height:calc(167.8 * var(--u));display:block}
.date{position:absolute;left:calc(461 * var(--u));top:calc(62.5 * var(--u));width:calc(106 * var(--u));height:calc(44 * var(--u));background:var(--green-dark);border-radius:calc(6 * var(--u));display:flex;align-items:center;gap:calc(4 * var(--u));padding:0 calc(5 * var(--u))}
.cal{width:calc(22 * var(--u));height:calc(22 * var(--u));background:#fff;border-radius:calc(3 * var(--u));position:relative;flex:none;display:grid;place-items:end center;padding-bottom:calc(2 * var(--u));font-weight:800;font-size:calc(9.5 * var(--u));color:var(--ink);border-top:calc(5 * var(--u)) solid #E53935}
.dtxt{color:#fff;font-weight:800;font-size:calc(12.6 * var(--u));line-height:1;text-align:center;flex:1}
.dtxt small{display:block;font-weight:400;font-size:calc(4.6 * var(--u));margin-top:calc(2 * var(--u));letter-spacing:.02em;opacity:.9}
.band{position:absolute;left:0;right:0;top:calc(141 * var(--u));text-align:center;color:#fff;font-weight:800;font-size:calc(20 * var(--u));letter-spacing:.01em;text-shadow:0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(0,0,0,.25)}
.ftr{position:absolute;left:0;bottom:0;width:100%;height:calc(51.9 * var(--u));display:block}
.pnum{position:absolute;right:calc(28 * var(--u));bottom:calc(14 * var(--u));color:#fff;font-weight:800;font-size:calc(11 * var(--u))}
.grid{position:absolute;left:calc(29 * var(--u));top:calc(181 * var(--u));display:grid;grid-template-columns:repeat(4,calc(125.6 * var(--u)));grid-auto-rows:calc(146 * var(--u));gap:calc(9 * var(--u)) calc(12.5 * var(--u))}
.page.auto .grid{position:relative;left:auto;top:auto;margin:calc(181 * var(--u)) 0 0 calc(29 * var(--u))}

.card{position:relative;background:var(--card);border:calc(.75 * var(--u)) solid var(--line);border-radius:calc(6 * var(--u));overflow:hidden;cursor:pointer;text-align:left;padding:0;display:block;width:100%;height:100%;color:var(--ink)}
.card:hover{border-color:var(--green)}
.cimg{position:absolute;left:calc(6 * var(--u));top:calc(6 * var(--u));width:calc(113.6 * var(--u));height:calc(86 * var(--u));display:block}
.cimg img{width:100%;height:100%;object-fit:contain;display:block}
.noimg{width:100%;height:100%;display:grid;place-items:center;border:calc(.75 * var(--u)) dashed #c9cfc6;border-radius:calc(4 * var(--u));color:#9aa296;font-size:calc(7 * var(--u));text-align:center;padding:calc(6 * var(--u))}
.tacc{position:absolute;right:calc(4 * var(--u));top:calc(4 * var(--u));width:calc(17 * var(--u));height:calc(17 * var(--u))}
.nuevo{position:absolute;left:calc(4 * var(--u));top:calc(4 * var(--u));background:var(--green);color:#fff;font-weight:800;font-size:calc(6 * var(--u));padding:calc(1.5 * var(--u)) calc(4 * var(--u));border-radius:calc(3 * var(--u))}
.ctext{position:absolute;left:calc(8 * var(--u));right:calc(6 * var(--u));top:calc(96 * var(--u))}
.price{font-weight:800;font-size:calc(16 * var(--u));line-height:1;letter-spacing:-.01em;white-space:nowrap;font-variant-numeric:tabular-nums}
.price sup{font-weight:400;font-size:calc(6.5 * var(--u));vertical-align:top;position:relative;top:calc(1 * var(--u));margin-left:calc(2 * var(--u));letter-spacing:0}
.price.two{font-size:calc(13 * var(--u))}
.pb{font-weight:700;font-size:calc(8.5 * var(--u));color:var(--ink);margin-top:calc(1 * var(--u));white-space:nowrap}
.pb span{font-weight:400;color:var(--muted)}
.unit{color:var(--green);font-size:calc(7.6 * var(--u));line-height:1.2;margin-top:calc(2.5 * var(--u));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.name{font-size:calc(7.6 * var(--u));line-height:1.22;margin-top:calc(.5 * var(--u));display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.editing .card.missing{border:calc(1.5 * var(--u)) dashed var(--warn)}

/* Tapa: nuevo ingreso */
.ni{position:absolute;left:calc(67 * var(--u));width:calc(461 * var(--u));height:calc(245 * var(--u));background:#0B5A16;border-radius:calc(10 * var(--u));padding:calc(36 * var(--u)) calc(7 * var(--u)) calc(7 * var(--u))}
.ni h3{position:absolute;top:calc(7 * var(--u));left:0;right:0;margin:0;text-align:center;color:#fff;font-size:calc(23 * var(--u));font-weight:400;line-height:1}
.ni h3 b{font-weight:800}
.nicard{width:100%;height:100%;background:#fff;border-radius:calc(7 * var(--u));display:grid;grid-template-columns:calc(170 * var(--u)) 1fr;align-items:center;gap:calc(18 * var(--u));padding:calc(8 * var(--u)) calc(18 * var(--u));cursor:pointer;border:0;text-align:left;color:var(--ink)}
.nicard .cimg{position:static;width:100%;height:calc(180 * var(--u))}
.nicard .t1{font-weight:800;font-size:calc(17 * var(--u));line-height:1.1}
.nicard .t2{font-size:calc(11 * var(--u));margin-top:calc(3 * var(--u));color:var(--muted)}
.nicard hr{border:0;border-top:calc(1.5 * var(--u)) solid #d0d0d0;margin:calc(7 * var(--u)) 0}
.nicard .price{font-weight:500;font-size:calc(21 * var(--u))}
.nicard .price sup{font-size:calc(9 * var(--u));vertical-align:baseline;top:0}
.nicard .unit{font-size:calc(9 * var(--u))}

.empty{position:absolute;left:0;right:0;top:calc(300 * var(--u));text-align:center;color:var(--muted);font-size:calc(14 * var(--u))}

/* Ficha ampliada */
dialog{border:0;border-radius:14px;padding:0;max-width:min(560px,calc(100vw - 32px));width:100%;background:var(--card);color:var(--ink);box-shadow:0 20px 60px rgba(0,0,0,.35)}
dialog::backdrop{background:rgba(10,20,10,.55)}
.dlg{display:grid;gap:12px;padding:18px}
.dlg .big{background:#fff;border:1px solid #e3e3e3;border-radius:10px;height:min(52vh,320px);display:grid;place-items:center;overflow:hidden}
.dlg .big img{max-width:100%;max-height:100%;object-fit:contain}
.dlg h3{margin:0;font-size:20px;line-height:1.2;text-wrap:balance}
.dlg .u{color:var(--green);font-weight:600}
.dlg .ps{display:flex;gap:10px;flex-wrap:wrap}
.dlg .pbox{border:1px solid #e3e3e3;border-radius:8px;padding:6px 12px}
.dlg .pbox small{display:block;font-size:11px;color:#6a6f68;text-transform:uppercase;letter-spacing:.06em}
.dlg .pbox b{font-size:24px;font-variant-numeric:tabular-nums}
.dlg p{margin:0;color:#4a4f49;line-height:1.5}
.dlg .meta{font-size:12px;color:#6a6f68}
.dlg .ed{display:flex;flex-wrap:wrap;gap:8px;align-items:center;border-top:1px dashed #cfcfcf;padding-top:12px}
.dlg .ed label.chk{display:flex;gap:6px;align-items:center;font-size:14px}
.dlg .ed .btn{color:var(--green)}
.dlg .ed select{border:1px solid #ccc;border-radius:8px;padding:5px 8px;background:#fff;color:#141414}
.dlg .close{justify-self:end;color:var(--green)}
@media (prefers-reduced-motion:no-preference){.card{transition:border-color .12s}}
@page{size:A4;margin:0}
@media print{:root{padding:0!important}body{background:#fff;margin:0}.bar,.panel,dialog,body::before{display:none!important}.sheets{display:block;padding:0!important;margin:0}.sheetwrap{height:297mm;overflow:hidden}.sheetwrap{max-width:none;width:210mm;break-after:page}.sheetwrap:last-child{break-after:auto}.page{box-shadow:none}}