*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;min-height:100vh}*{box-sizing:border-box;margin:0;padding:0;font-family:Segoe UI,sans-serif}body{color:#333;background:#f5f5f5}nav{color:#fff;box-sizing:border-box;background:#c0392b;justify-content:space-between;align-items:center;width:100%;padding:16px 32px;display:flex;box-shadow:0 2px 8px #0003}nav h1{letter-spacing:2px;font-size:22px;font-weight:300}nav button{color:#fff;cursor:pointer;background:0 0;border:1px solid #fff;border-radius:4px;margin-left:10px;padding:8px 20px;font-size:14px;transition:all .2s}nav button:hover{color:#c0392b;background:#fff}main{padding:32px}.app{width:100%;min-height:100vh}h2{color:#c0392b;border-bottom:1px solid #ddd;margin-bottom:24px;padding-bottom:8px;font-size:24px;font-weight:300}.form-row{background:#fff;border-radius:8px;flex-wrap:nowrap;gap:10px;margin-bottom:24px;padding:20px;display:flex;box-shadow:0 1px 4px #0000001a}input,select{border:1px solid #ddd;border-radius:4px;outline:none;padding:10px 14px;font-size:14px;transition:border .2s}input:focus,select:focus{border-color:#c0392b}button.agregar{color:#fff;cursor:pointer;white-space:nowrap;background:#c0392b;border:none;border-radius:4px;min-width:90px;padding:10px 24px;font-size:14px;transition:background .2s}button.agregar:hover{background:#a93226}table{border-collapse:collapse;background:#fff;border-radius:8px;width:100%;overflow:hidden;box-shadow:0 1px 4px #0000001a}thead{color:#fff;background:#c0392b}th{text-align:left;padding:14px 16px;font-size:14px;font-weight:500}td{white-space:nowrap;border-bottom:1px solid #f0f0f0;padding:12px 16px;font-size:14px}tr:last-child td{border-bottom:none}tr:hover td{background:#fdf2f2}button.eliminar{color:#c0392b;cursor:pointer;background:0 0;border:1px solid #c0392b;border-radius:4px;padding:6px 14px;font-size:13px;transition:all .2s}button.eliminar:hover{color:#fff;background:#c0392b}.form-card{background:#fff;border-radius:8px;margin-bottom:24px;padding:20px;box-shadow:0 1px 4px #0000001a}.form-row{flex-wrap:wrap;gap:10px;margin-bottom:12px;display:flex}.form-card button.agregar{color:#fff;cursor:pointer;white-space:nowrap;background:#c0392b;border:none;border-radius:4px;padding:10px 24px;font-size:14px}.form-card button.agregar:hover{background:#a93226}input[name=hojas],input[name=precio_hoja]{width:140px}th,td{text-align:center}button.agregar{padding:7px 14px;font-size:13px}tr input,tr select{box-sizing:border-box;max-width:100%}th:last-child,td:last-child{width:160px}.login-container{background:#f5f5f5;justify-content:center;align-items:center;min-height:100vh;display:flex}.login-box{text-align:center;background:#fff;border-radius:8px;flex-direction:column;gap:16px;width:320px;padding:40px;display:flex;box-shadow:0 2px 12px #00000026}.login-box h1{color:#c0392b;font-size:24px;font-weight:300}.login-box h2{color:#888;letter-spacing:3px;border:none;font-size:14px;font-weight:300}.login-box input{width:100%;padding:12px}.login-box button{color:#fff;cursor:pointer;background:#c0392b;border:none;border-radius:4px;padding:12px;font-size:16px}.login-box button:hover{background:#a93226}.error{color:#c0392b;font-size:14px}.stats-cards{gap:20px;margin-bottom:32px;display:flex}.stat-card{text-align:center;border-radius:8px;flex:1;padding:24px;box-shadow:0 1px 4px #0000001a}.stat-card h3{color:#fff;margin-bottom:12px;font-size:14px;font-weight:400}.stat-card p{color:#fff;font-size:28px;font-weight:600}.stat-card.verde{background:#27ae60}.stat-card.rojo{background:#c0392b}.stat-card.gris{background:#7f8c8d}.subtitulo{color:#555;text-align:center;border:none;margin:24px 0 12px;padding:0;font-size:18px;font-weight:400}.stats-tables table{width:100%;margin-bottom:32px}button.editar{color:#fff;cursor:pointer;background:#c0392b;border:none;border-radius:4px;margin-right:6px;padding:6px 14px;font-size:13px;transition:background .2s}@media (width<=768px){nav{flex-direction:column;gap:12px;padding:16px}nav h1{font-size:16px}nav button{margin-left:4px;padding:6px 12px;font-size:12px}main{padding:16px}.stats-cards,.form-row{flex-direction:column}.form-card{padding:12px}input,select,input[name=hojas],input[name=precio_hoja]{width:100%}table{display:block;overflow-x:auto}button.agregar,button.editar,button.eliminar{padding:6px 10px;font-size:12px}}button.whatsapp{color:#fff;cursor:pointer;background:#25d366;border:none;border-radius:4px;margin-right:6px;padding:6px 14px;font-size:13px}button.whatsapp:hover{background:#1da851}