:root { --rosa: #e91e63; --rosa-suave: #fce4ec; --verde: #2e7d32; --rojo: #c62828; }
* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; margin: 0; background: #faf7f8; color: #222; }
.barra { background: var(--rosa); color: #fff; padding: .6rem 1rem; display: flex;
         flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }
.marca { font-weight: 700; font-size: 1.2rem; }
.barra nav { display: flex; flex-wrap: wrap; gap: .25rem; }
.barra a { color: #fff; text-decoration: none; padding: .5rem .75rem; border-radius: 8px; }
.barra a:hover { background: rgba(255,255,255,.2); }
main { max-width: 60rem; margin: 0 auto; padding: 1rem; }
.aviso { max-width: 60rem; margin: .75rem auto 0; padding: .75rem 1rem; border-radius: 8px; }
.aviso-ok { background: #e8f5e9; color: var(--verde); }
.aviso-error { background: #ffebee; color: var(--rojo); }
.tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1rem; }
.tarjeta { display: block; background: #fff; border: 1px solid #eee; border-radius: 12px;
           padding: 1.5rem; font-size: 1.15rem; text-decoration: none; color: #222;
           box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.tarjeta:hover { border-color: var(--rosa); }
button, .boton { font-size: 1.05rem; padding: .8rem 1.4rem; border-radius: 10px; border: none;
         cursor: pointer; background: var(--rosa); color: #fff; text-decoration: none;
         display: inline-block; }
button:disabled { opacity: .5; cursor: wait; }
.boton-secundario { background: #757575; }
.boton-verde { background: var(--verde); }
.boton-rojo { background: var(--rojo); }
input, select { font-size: 1.05rem; padding: .7rem; border: 1px solid #ccc; border-radius: 8px;
                width: 100%; }
label { display: block; margin: .8rem 0 .25rem; font-weight: 600; }
table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 10px;
        overflow: hidden; }
th, td { text-align: left; padding: .7rem .6rem; border-bottom: 1px solid #f0f0f0; }
.chip { padding: .2rem .6rem; border-radius: 999px; font-size: .85rem; font-weight: 600; }
.chip-nuevo { background: #fff8e1; color: #b26a00; }
.chip-confirmado { background: #e3f2fd; color: #1565c0; }
.chip-entregado { background: #e8f5e9; color: var(--verde); }
.chip-cancelado { background: #eceff1; color: #607d8b; }
.filtros { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 1rem; }
.chip-filtro { padding: .5rem .9rem; border-radius: 999px; background: #fff; color: #555;
               border: 1px solid #ddd; text-decoration: none; font-size: .95rem;
               font-weight: 600; }
.chip-filtro.activo { background: var(--rosa); border-color: var(--rosa); color: #fff; }
.stock-bajo { color: var(--rojo); font-weight: 700; }
.fila-form { display: flex; gap: .75rem; flex-wrap: wrap; align-items: end; }
.fila-form > div { flex: 1 1 12rem; }
@media (max-width: 640px) { th, td { padding: .5rem .35rem; font-size: .95rem; } }