*{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;min-height:100vh}body{background:#f3f4f6;font-family:Arial,Helvetica,sans-serif}*{box-sizing:border-box}html,body,#root{width:100%;min-height:100%;margin:0}body{overflow-x:hidden}.erp-layout{width:100%;height:100vh;min-height:100vh;display:flex;overflow:hidden}.erp-content{-webkit-overflow-scrolling:touch;flex:1;min-width:0;height:100vh;overflow:auto}.erp-loading{justify-content:center;align-items:center;height:100vh;display:flex}@media (width<=768px){.erp-layout{width:100%;height:100dvh;min-height:100dvh;display:block;overflow:auto}.erp-content{width:100%;min-width:0;height:100dvh;padding-top:58px;overflow:auto}}.productos{width:100%;padding:30px}.productos-header{justify-content:space-between;align-items:center;margin-bottom:25px;display:flex}.productos-header h1{color:#1f2937;margin:0;font-size:30px;font-weight:700}.contador{color:#6b7280;margin-top:5px;font-size:14px;display:block}.btn-nuevo{color:#fff;cursor:pointer;background:#0d6efd;border:none;border-radius:10px;padding:12px 20px;font-size:15px;font-weight:600;transition:all .2s}.btn-nuevo:hover{background:#0b5ed7;transform:translateY(-1px)}.barra-superior{margin-bottom:20px}.buscador{border:1px solid #d7dce5;border-radius:10px;outline:none;width:100%;max-width:450px;padding:12px 16px;font-size:15px}.buscador:focus{border-color:#0d6efd}.tabla-container{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 5px 18px #0000000f}.tabla-productos{border-collapse:collapse;width:100%}.tabla-productos thead{background:#f7f8fa}.tabla-productos th{text-align:left;color:#4b5563;white-space:nowrap;border-bottom:1px solid #e5e7eb;padding:15px;font-size:14px}.tabla-productos td{color:#374151;border-bottom:1px solid #eef1f4;padding:15px;font-size:14px}.tabla-productos tbody tr{transition:all .15s}.tabla-productos tbody tr:hover{background:#f9fbff}.nombre{color:#111827;font-weight:600}.badge{border-radius:30px;justify-content:center;align-items:center;min-width:80px;padding:6px 10px;font-size:13px;font-weight:600;display:inline-flex}.activo{color:#047857;background:#d1fae5}.inactivo{color:#b91c1c;background:#fee2e2}.btn-editar{cursor:pointer;background:#eef5ff;border:none;border-radius:8px;width:38px;height:38px;font-size:17px;transition:all .2s}.btn-editar:hover{background:#dbeafe;transform:scale(1.05)}.sin-registros{text-align:center;color:#9ca3af;padding:45px!important}.cargando{text-align:center;color:#6b7280;padding:50px;font-size:15px}@media (width<=900px){.productos-header{flex-direction:column;align-items:flex-start;gap:15px}.tabla-container{overflow:auto}.tabla-productos{min-width:1100px}}.miniatura-producto{object-fit:cover;border:1px solid #d9dee7;border-radius:10px;width:60px;height:60px}.miniatura-vacia{background:#fafafa;border:2px dashed #d9dee7;border-radius:10px;justify-content:center;align-items:center;width:60px;height:60px;font-size:24px;display:flex}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9999;background:#0f172a73;justify-content:center;align-items:center;animation:.2s fade;display:flex;position:fixed;inset:0}.modal-producto{background:#fff;border-radius:16px;width:720px;max-width:95%;animation:.25s subir;overflow:hidden;box-shadow:0 20px 60px #00000040}.modal-header{color:#fff;background:#1565d8;padding:22px 28px}.modal-header h2{margin:0;font-size:26px;font-weight:700}.modal-body{grid-template-columns:1fr 1fr;gap:18px;padding:30px;display:grid}.modal-body input{border:1px solid #d9dee7;border-radius:10px;outline:none;width:100%;padding:13px 15px;font-size:15px;transition:all .2s}.modal-body input:focus{border-color:#1565d8}.modal-body input[name=nombre]{grid-column:1/span 2}.check{color:#555;align-items:center;gap:10px;font-weight:600;display:flex}.check input{width:18px;height:18px}.modal-footer{border-top:1px solid #eee;justify-content:flex-end;gap:15px;padding:25px 30px;display:flex}.btn-cancelar{cursor:pointer;background:#eceff4;border:none;border-radius:10px;padding:12px 22px;font-weight:600}.btn-cancelar:hover{background:#dde3ea}.btn-guardar{color:#fff;cursor:pointer;background:#1565d8;border:none;border-radius:10px;padding:12px 24px;font-weight:600}.btn-guardar:hover{background:#0d4db3}@keyframes subir{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes fade{0%{opacity:0}to{opacity:1}}@media (width<=700px){.modal-body{grid-template-columns:1fr}.modal-body input[name=nombre]{grid-column:auto}}.campo-imagen{flex-direction:column;grid-column:1/span 2;align-items:center;gap:12px;margin-bottom:10px;display:flex}.preview-imagen{object-fit:cover;border:1px solid #d9dee7;border-radius:12px;width:160px;height:160px}.sin-imagen{color:#888;background:#fafafa;border:2px dashed #cfd8e3;border-radius:12px;justify-content:center;align-items:center;width:160px;height:160px;font-weight:600;display:flex}.campo-imagen input{border:none!important;padding:0!important}.modal{background:#fff;border-radius:12px;width:560px;max-width:95%;padding:30px;box-shadow:0 15px 40px #00000040}.modal h2{margin:0 0 20px}.modal input,.modal select,.modal textarea{box-sizing:border-box;border:1px solid #d9d9d9;border-radius:8px;width:100%;margin-top:6px;padding:10px;font-size:15px}.acciones-modal{justify-content:flex-end;gap:10px;margin-top:25px;display:flex}.btn-guardar{color:#fff;cursor:pointer;background:#2563eb;border:none;border-radius:8px;padding:10px 18px}.btn-cancelar{cursor:pointer;background:#e5e7eb;border:none;border-radius:8px;padding:10px 18px}