@font-face { font-family: 'Bebas'; src: url('/BEBAS-SPA.ttf') format('truetype'); font-display: swap; }
:root { --tinta:#1b1d20; --suave:#6e747c; --linea:#d9dde2; --fondo:#f6f7f9; --acento:#2f6bd8; }
* { box-sizing: border-box; }
body { margin:0; padding:0 0 3rem; font:16px/1.5 system-ui,-apple-system,'Segoe UI',sans-serif;
       color:var(--tinta); background:var(--fondo); }
header { display:flex; align-items:baseline; gap:1rem; padding:1rem 1.25rem;
         background:var(--tinta); color:#fff; position:sticky; top:0; z-index:5; }
header h1 { margin:0; font-size:1.15rem; font-weight:600; }
.precio { margin-left:auto; color:#b9bec6; font-size:.9rem; }
form, section, .agregar, .enviar { max-width:640px; margin:1rem auto; }
section { background:#fff; border:1px solid var(--linea); border-radius:12px; padding:1rem 1.1rem; }
section h2 { margin:.1rem 0 .8rem; font-size:1rem; letter-spacing:.02em; text-transform:uppercase; color:var(--suave); }
label { display:block; margin:.7rem 0; font-size:.88rem; color:var(--suave); }
label small { font-weight:400; }
input, select, textarea { width:100%; margin-top:.25rem; padding:.7rem .6rem; font-size:1rem;
        border:1px solid var(--linea); border-radius:8px; background:#fff; color:var(--tinta); }
input:focus, select:focus, textarea:focus { outline:2px solid var(--acento); outline-offset:1px; }
.fila { display:flex; gap:.75rem; } .fila label { flex:1; }
.check { display:flex; align-items:center; gap:.5rem; }
.check input { width:auto; margin:0; }
.cabecera { display:flex; align-items:center; }
.cabecera h2 { margin:0; flex:1; }
.quitar { border:0; background:none; color:var(--suave); font-size:1.1rem; cursor:pointer; padding:.2rem .4rem; }
.agregar, .enviar { display:block; width:100%; max-width:640px; padding:.9rem; font-size:1rem;
        border-radius:10px; cursor:pointer; text-align:center; text-decoration:none; }
.agregar { border:1px dashed var(--linea); background:#fff; color:var(--acento); }
.enviar { border:0; background:var(--acento); color:#fff; font-weight:600; }
.error { max-width:640px; margin:1rem auto; padding:.8rem 1rem; border-radius:10px;
         background:#fdecec; color:#a01b1b; border:1px solid #f3c2c2; }
.previa svg { width:100%; height:auto; background:#eceff3; border-radius:8px; display:block; }
.previa .marco { fill:none; stroke:#c3c9d1; stroke-dasharray:4 3; }
.previa .texto { font-family:'Bebas'; fill:var(--tinta); }
.aviso { margin:.4rem 0 0; font-size:.82rem; color:#a06a00; min-height:1.2em; }
.paleta-titulo { margin:.9rem 0 .4rem; font-size:.88rem; color:var(--suave); }
.paleta { display:flex; flex-wrap:wrap; gap:.5rem; }
.paleta button { width:42px; height:42px; border-radius:50%; border:2px solid var(--linea); cursor:pointer; padding:0; }
.paleta button[aria-pressed="true"] { outline:3px solid var(--acento); outline-offset:2px; }
table { width:100%; border-collapse:collapse; font-size:.9rem; }
th, td { text-align:left; padding:.45rem .3rem; border-bottom:1px solid var(--linea); }
th { color:var(--suave); font-weight:600; }
.total { text-align:right; font-weight:600; margin-top:.8rem; }
@media (max-width:520px) { .fila { flex-direction:column; gap:0; } }