body {margin:0;font-family:"Roboto",sans-serif;background:linear-gradient(135deg,#1c1f26,#004d4d);color:#333;}
header {background:#002b36;color:white;padding:15px 40px;display:flex;align-items:center;justify-content:space-between;
        position:sticky;top:0;z-index:10;box-shadow:0 2px 6px rgba(0,0,0,0.4);}
header img.logo {height:50px;}
nav a {color:#fff;margin-left:25px;text-decoration:none;font-weight:500;transition:color .3s;}
nav a:hover {color:#66cccc;}

/* --- Fondo general (mismo estilo que el login) --- */
body {
  margin: 0;
  font-family: "Roboto", sans-serif;
  background: linear-gradient(135deg, #1c1f26, #004d4d);
  color: #333;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* --- Contenido principal centrado --- */
.content {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 40px 0;
}

/* --- Cuadro blanco (zona de carga / previsualización) --- */
#app {
  background: #fff;
  width: 90%;
  max-width: 1800px;  /* 🔹 ancho máximo del cuadro */
  border-radius: 16px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.25);
  padding: 30px;
  overflow-x: auto;
  animation: fadeIn 0.8s ease-in-out;
}

/* --- Animación de entrada --- */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(15px); }
  to   { opacity: 1; transform: translateY(0); }
}






/*.container {max-width:1100px;margin:40px auto;padding:0 20px;}*/
.card {background:#fff;border-radius:12px;padding:30px;box-shadow:0 4px 16px rgba(0,0,0,0.2);margin-bottom:30px;transition:transform .2s;}
.card:hover {transform:translateY(-4px);}
h1,h2,h3 {color:#002b36;margin-top:0;}
.drop {border:2px dashed #009999;border-radius:12px;padding:60px;text-align:center;background:#fdfdfd;color:#666;font-size:18px;cursor:pointer;transition:background .3s,color .3s;}
.drop:hover {background:#eefafa;color:#004d4d;}
button {padding:12px 24px;border:none;border-radius:8px;cursor:pointer;background:#009999;color:white;font-weight:bold;font-size:15px;transition:background .3s,transform .2s;}
button:hover {background:#007777;transform:scale(1.05);}
button:disabled {opacity:.6;cursor:not-allowed;}
table {border-collapse:collapse;width:100%;margin-top:15px;font-size:14px;}
th,td {border:1px solid #ddd;padding:8px;text-align:left;}
th {background:#004d4d;color:#fff;}
tr:nth-child(even) {background:#f9f9f9;}
.ok {color:#009900;font-weight:bold;}
.err {color:#cc0000;font-weight:bold;}
.warn {color:#d8b400;font-weight:bold;}
.pdf-tag {color:#004d4d;font-weight:bold;margin-left:8px;}
.right {text-align:right;}
.summary {margin-top:10px;padding:10px 14px;background:#f6fbfb;border:1px solid #cde;border-radius:8px;}
.factura-block {padding-bottom:14px;margin-bottom:14px;border-bottom:1px dashed #c9e5e5;}
.check-status {font-size:14px;margin-left:10px;margin-bottom:10px;line-height:1.4;}
/* Toasts */
#toast-container {position:fixed;top:16px;right:16px;width:300px;z-index:9999;display:flex;flex-direction:column;gap:10px;}
.toast {background:#00b3b3;color:#fff;padding:12px 14px;border-radius:10px;box-shadow:0 4px 12px rgba(0,0,0,0.2);
        opacity:0;transform:translateX(20px);transition:opacity .3s ease,transform .3s ease;display:flex;align-items:center;gap:8px;font-weight:600;}
.toast.show {opacity:1;transform:translateX(0);}
.toast .icon {font-size:18px;}
.toast {
  position: fixed;
  top: 20px;
  right: 20px;
  background: #00aa66;
  color: white;
  padding: 12px 18px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  font-size: 15px;
  cursor: pointer;
  opacity: 0.95;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.toast.success:hover {
  transform: scale(1.03);
}
.toast.fade-out {
  opacity: 0;
  transform: translateX(20px);
}