:root{--accent:#6366f1;--accent-hover:#4f52d8;--accent-soft:#6366f11f;--urgente:#f59e0b;--urgente-soft:#f59e0b1f;--vencida:#ef4444;--vencida-soft:#ef44441f;--verde:#22c55e;--verde-soft:#22c55e1f;--radius:14px;--radius-sm:8px;--shadow:0 2px 16px #00000014;--transition:.2s ease}@media (prefers-color-scheme:dark){:root{--bg:#0f0f13;--bg-card:#1a1a24;--bg-elevated:#22222f;--bg-input:#2a2a38;--border:#ffffff12;--text:#f0f0f5;--text-secondary:#9090a8;--text-muted:#606075;--shadow:0 2px 24px #0006}}@media (prefers-color-scheme:light){:root{--bg:#f4f4f8;--bg-card:#fff;--bg-elevated:#ededf5;--bg-input:#f0f0f7;--border:#00000012;--text:#1a1a2e;--text-secondary:#555570;--text-muted:#9090aa;--shadow:0 2px 16px #00000012}}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;min-height:100dvh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}button{cursor:pointer;background:0 0;border:none;font-family:inherit}input,select{font-family:inherit}.app{flex-direction:column;max-width:680px;min-height:100dvh;margin:0 auto;display:flex}.header{z-index:10;background:var(--bg);border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(12px);position:sticky;top:0}.header-content{padding:16px 20px;padding-top:max(16px, env(safe-area-inset-top));padding-left:max(20px, env(safe-area-inset-left));padding-right:max(20px, env(safe-area-inset-right));justify-content:space-between;align-items:center;gap:12px;display:flex}.header-titulo{align-items:center;gap:10px;display:flex}.header-icono{font-size:24px}.header-titulo h1{letter-spacing:-.3px;font-size:20px;font-weight:700}.badge-urgente{background:var(--urgente-soft);color:var(--urgente);white-space:nowrap;border:1px solid #f59e0b40;border-radius:20px;padding:6px 12px;font-size:12px;font-weight:600}.main{flex-direction:column;flex:1;gap:16px;padding:16px 20px 32px;display:flex}.toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;display:flex}.toolbar-izquierda,.toolbar-derecha{align-items:center;gap:6px;display:flex}.btn-tab{color:var(--text-secondary);transition:all var(--transition);background:0 0;border:1px solid #0000;border-radius:20px;align-items:center;gap:6px;padding:7px 14px;font-size:14px;font-weight:500;display:flex}.btn-tab.activo{background:var(--accent-soft);color:var(--accent);border-color:#6366f133}.btn-tab:hover:not(.activo){background:var(--bg-elevated)}.contador{background:var(--accent);color:#fff;border-radius:9px;justify-content:center;align-items:center;min-width:18px;height:18px;padding:0 5px;font-size:11px;font-weight:700;display:flex}.btn-tab:not(.activo) .contador{background:var(--text-muted)}.btn-orden{color:var(--text-secondary);border:1px solid var(--border);background:var(--bg-card);transition:all var(--transition);border-radius:20px;padding:7px 12px;font-size:13px}.btn-orden.activo{background:var(--accent-soft);color:var(--accent);border-color:#6366f133}.btn-nueva{background:var(--accent);color:#fff;transition:background var(--transition), transform var(--transition);border-radius:20px;padding:8px 18px;font-size:14px;font-weight:600}.btn-nueva:hover{background:var(--accent-hover);transform:translateY(-1px)}.btn-nueva:active{transform:translateY(0)}.lista-compras{flex-direction:column;gap:12px;display:flex}.card{background:var(--bg-card);border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow);transition:transform var(--transition), box-shadow var(--transition);flex-direction:column;gap:12px;padding:18px;display:flex}.card:hover{transform:translateY(-2px);box-shadow:0 4px 24px #0000001f}.card.urgente{border-left:3px solid var(--urgente)}.card.vencida{border-left:3px solid var(--vencida)}.card.normal{border-left:3px solid #0000}.card-header{justify-content:space-between;align-items:center;gap:8px;display:flex}.card-tienda{align-items:center;gap:7px;display:flex}.tienda-icono{font-size:18px}.tienda-nombre{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;font-size:13px;font-weight:600}.dias-badge{white-space:nowrap;border-radius:20px;align-items:center;gap:5px;padding:4px 10px;font-size:12px;font-weight:600;display:flex}.dias-badge.normal{background:var(--verde-soft);color:var(--verde)}.dias-badge.urgente{background:var(--urgente-soft);color:var(--urgente)}.dias-badge.vencida{background:var(--vencida-soft);color:var(--vencida)}.alerta-punto{background:var(--urgente);border-radius:50%;width:6px;height:6px;animation:1.5s infinite pulso}@keyframes pulso{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.7)}}.card-articulo{letter-spacing:-.2px;font-size:17px;font-weight:700;line-height:1.3}.card-meta{grid-template-columns:1fr 1fr;gap:8px 16px;display:grid}.meta-item{flex-direction:column;gap:2px;display:flex}.meta-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;font-size:11px;font-weight:500}.meta-valor{color:var(--text);font-size:14px;font-weight:500}.fecha-urgente{color:var(--urgente)!important;font-weight:700!important}.card-acciones{border-top:1px solid var(--border);gap:8px;padding-top:4px;display:flex}.btn-accion{border-radius:var(--radius-sm);transition:all var(--transition);flex:1;padding:8px;font-size:13px;font-weight:600}.btn-editar{background:var(--bg-elevated);color:var(--text-secondary)}.btn-editar:hover{background:var(--accent-soft);color:var(--accent)}.btn-archivar{background:var(--verde-soft);color:var(--verde)}.btn-archivar:hover{opacity:.85}.btn-archivar.confirmando{background:var(--urgente-soft);color:var(--urgente)}.btn-restaurar{background:var(--accent-soft);color:var(--accent)}.btn-restaurar:hover{opacity:.85}.btn-eliminar{background:var(--vencida-soft);color:var(--vencida)}.btn-eliminar:hover{opacity:.85}.btn-eliminar.confirmando{background:var(--vencida-soft);color:var(--vencida);opacity:.9}.estado-vacio{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:12px;padding:60px 20px;display:flex}.vacio-icono{opacity:.4;font-size:52px}.estado-vacio p{color:var(--text-secondary);font-size:16px}.btn-nueva-vacio{background:var(--accent);color:#fff;border-radius:var(--radius);transition:background var(--transition), transform var(--transition);margin-top:8px;padding:12px 24px;font-size:15px;font-weight:600}.btn-nueva-vacio:hover{background:var(--accent-hover);transform:translateY(-1px)}.spinner{border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:32px;height:32px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.modal-overlay{-webkit-backdrop-filter:blur(4px);z-index:100;background:#0000008c;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}@media (width>=480px){.modal-overlay{align-items:center;padding:20px}}.modal{background:var(--bg-card);border-radius:var(--radius) var(--radius) 0 0;width:100%;max-width:520px;max-height:92dvh;animation:.25s slideUp;overflow-y:auto;box-shadow:0 -4px 32px #0000004d}@media (width>=480px){.modal{border-radius:var(--radius);animation:.2s fadeIn;box-shadow:0 8px 48px #0000004d}}@keyframes slideUp{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)translateY(8px)}to{opacity:1;transform:scale(1)translateY(0)}}.modal-header{justify-content:space-between;align-items:center;padding:20px 20px 0;display:flex}.modal-header h2{font-size:18px;font-weight:700}.btn-cerrar{background:var(--bg-elevated);width:32px;height:32px;color:var(--text-secondary);transition:background var(--transition);border-radius:50%;justify-content:center;align-items:center;font-size:14px;display:flex}.btn-cerrar:hover{background:var(--vencida-soft);color:var(--vencida)}.formulario{flex-direction:column;gap:16px;padding:20px;display:flex}.campo{flex-direction:column;flex:1;gap:6px;display:flex}.campo label{color:var(--text-secondary);font-size:13px;font-weight:600}.campo input,.campo select{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);transition:border-color var(--transition), box-shadow var(--transition);appearance:none;outline:none;width:100%;padding:11px 14px;font-size:15px}.campo input:focus,.campo select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.campo input.error,.campo select.error{border-color:var(--vencida)}.campo select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-position:right 14px center;background-repeat:no-repeat;padding-right:36px}.error-msg{color:var(--vencida);font-size:12px;font-weight:500}.campos-fila{grid-template-columns:1fr 1fr;gap:12px;display:grid}.form-acciones{gap:10px;padding-top:4px;display:flex}.btn-cancelar{border-radius:var(--radius-sm);background:var(--bg-elevated);color:var(--text-secondary);transition:background var(--transition);flex:1;padding:12px;font-size:15px;font-weight:600}.btn-cancelar:hover{background:var(--vencida-soft);color:var(--vencida)}.btn-guardar{border-radius:var(--radius-sm);background:var(--accent);color:#fff;transition:background var(--transition), transform var(--transition);flex:2;padding:12px;font-size:15px;font-weight:700}.btn-guardar:hover{background:var(--accent-hover);transform:translateY(-1px)}.btn-guardar:active{transform:translateY(0)}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}.banner-config{background:var(--urgente-soft);color:var(--urgente);text-align:center;border-bottom:1px solid #f59e0b33;padding:10px 20px;font-size:13px;font-weight:500}.banner-config code{background:#f59e0b26;border-radius:4px;padding:1px 5px;font-family:monospace}.main{padding-bottom:max(32px, env(safe-area-inset-bottom))}.modal{padding-bottom:env(safe-area-inset-bottom)}