body {
  font-family: Arial, sans-serif;
  margin: 0; padding: 0;
  background: #f2f4f7;
  color: #333;
}

header {
  background: linear-gradient(90deg, #004aad, #0078d4);
  color: white;
  padding: 15px;
  text-align: center;
}

h1, h2, h3 { margin: 10px 0; }

.app main, .login-container, form {
  padding: 15px;
}

.btn {
  display: inline-block;
  margin: 5px 0;
  padding: 10px 15px;
  border: none;
  border-radius: 8px;
  background: #004aad;
  color: white;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
}

.btn:hover {
  background: #0078d4;
}

.logout { background: #d40000; }

input, button {
  width: 100%;
  margin: 5px 0;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 16px;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 15px;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}

.error {
  color: red;
  margin: 10px 0;
}
.btn.small { padding:8px 10px; font-size:16px; border-radius:8px; background:#004aad; color:white; border:none; cursor:pointer; }
.btn.small:hover { background:#0078d4; transform:scale(1.02); }
.tabla-factura th, .tabla-factura td { border:1px solid #e6edf6; padding:10px; }
.prod-row input[type="text"] { font-size:16px; padding:10px; }
#scanner-modal { position:fixed; inset:0; background:rgba(0,0,0,0.6); display:none; align-items:center; justify-content:center; z-index:9999; }
#scanner-box { width:70%; max-width:480px; background:#fff; padding:12px; border-radius:8px; text-align:center; }
#scanner { width:80%; height:320px; }
#scanner-close { margin-top:8px; display:inline-block; padding:8px 12px; background:#d40000; color:#fff; border-radius:8px; cursor:pointer; }