:root{--bg:#f5f9ff;--ink:#1c2745;--mut:#5d6a8a;--nina:#ff5c8a;--nino:#2f7bff;--sol:#ffc93c;--card:#fff;--line:#dde6f5;--r:14px}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 ui-rounded,"Segoe UI",system-ui,sans-serif}
a{color:inherit}
header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--ink);color:#fff;position:sticky;top:0;z-index:5}
.logo{font-weight:800;font-size:1.2rem;text-decoration:none}
nav a{margin-left:14px;text-decoration:none}
nav b{background:var(--sol);color:var(--ink);border-radius:99px;padding:1px 8px}
main{max-width:1000px;margin:0 auto;padding:16px}
h1{font-size:1.6rem;margin:.3em 0}
.filtros,.panel{display:flex;flex-wrap:wrap;gap:8px;background:var(--card);padding:12px;border-radius:var(--r);border:1px solid var(--line);margin-bottom:14px}
input,select,button,textarea{font:inherit;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
.filtros input{width:100px}
label{display:flex;flex-direction:column;gap:3px;font-size:.85rem;color:var(--mut);flex:1;min-width:140px}
button{cursor:pointer;font-weight:700;background:var(--sol);border-color:var(--sol)}
button.sec{background:#fff;border-color:var(--line)}
button.del{background:#fff;color:#c0243c;border-color:#f3c3cb}
:focus-visible{outline:3px solid var(--nino);outline-offset:2px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.card{background:var(--card);border-radius:var(--r);border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column}
.card .foto{aspect-ratio:1;background:#e9f0fc;display:grid;place-items:center;font-size:3rem}
.card img{width:100%;height:100%;object-fit:cover}
.card div.i{padding:10px;display:flex;flex-direction:column;gap:6px;flex:1}
.tag{font-size:.75rem;font-weight:700;padding:2px 8px;border-radius:99px;color:#fff;align-self:flex-start}
.tag.nina{background:var(--nina)}.tag.nino{background:var(--nino)}.tag.unisex{background:#7a5cff}
.precio{font-weight:800;font-size:1.1rem}
.mut{color:var(--mut);font-size:.85rem}
.fila{display:grid;grid-template-columns:1fr;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px;margin-bottom:10px}
.fila .ctl{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin-top:6px}
.fila input[type=number]{width:80px}
.total{font-size:1.2rem;font-weight:800;text-align:right}
.vacio{text-align:center;padding:40px 0;color:var(--mut)}
table{width:100%;border-collapse:collapse;background:#fff}
td,th{padding:8px;border-bottom:1px solid var(--line);text-align:left;font-size:.9rem}
.scroll{overflow-x:auto}
.btn{display:inline-block;padding:10px 16px;background:var(--sol);border-radius:10px;font-weight:700;text-decoration:none;color:var(--ink)}
@media(min-width:700px){.fila{grid-template-columns:1fr auto}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}