:root {
  --bg:#0f172a; --fg:#e2e8f0; --muted:#94a3b8; --primary:#22c55e;
  --card:#111827; --border:#1f2937;
}

* { box-sizing: border-box; }
html, body {
  height: 100%;
  margin:0;
  display: flex;
  flex-direction: column;
  background:var(--bg);
  color:var(--fg);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu;
}

main.container {
  flex: 1; /* ocupa todo el espacio disponible */
  position: relative; /* para posicionar el botón Atrás en esquina superior derecha */
}
main.auth-container {
  flex: 1; /* ocupa todo el espacio disponible */
}

/* Topbar */
.topbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 16px;
  border-bottom:1px solid var(--border);
  background:rgba(0,0,0,.3);
  backdrop-filter:blur(6px);
}
.topbar .brand { font-weight:700; letter-spacing:.5px; }
.topbar .nav a { color:var(--fg); margin-left:12px; text-decoration:none; }

/* Layout helpers */
.container { padding:24px; }
.center {
  min-height:70vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
}
.menu-vertical {
  display:flex;
  flex-direction:column;
  gap:12px;
  max-width:280px;
  width:100%;
}
.actions {
  display:flex;
  gap:12px;
  margin-top:12px;
  justify-content:center;
}

/* Back button top-right */
.back-button {
  position:absolute;
  top:16px;
  right:24px;
}
.print-button {
  position:absolute;
  top:16px;
  right:120px;
}
.reports-button {
  position:absolute;
  top:16px;
  right:120px;
}

@media print {
  body { background:#fff; color:#000; }
  .topbar, .footer, .print-hidden, .back-button, .reports-button, .btn { display:none !important; }
  .card { border:1px solid #000; background:#fff !important; }
}

/* Report document styles */
.report-doc {
  max-width: 900px;
  margin: 0 auto;
  background: #fff0;
}
.report-header {
  display:flex; align-items:center; gap:16px; margin-bottom:12px;
}
.report-header img { height:42px; opacity:.9; }
.report-title { margin:0; font-size:22px; font-weight:800; letter-spacing:.3px; }
.report-meta { color: var(--muted); font-size: 12px; margin-top:2px; }

.section { margin: 12px 0; border:1px solid var(--border); border-radius:10px; overflow:hidden; background:var(--card); }
.section .section-title { margin:0; padding:10px 12px; background: rgba(255,255,255,0.04); font-weight:700; border-bottom:1px solid var(--border); }
.section .section-body { padding:12px; }

/* Key-Value grid */
.kv-grid { display:grid; grid-template-columns: 1fr 2fr; column-gap:16px; row-gap:6px; }
.kv-grid .kv-key { color: var(--muted); font-weight:600; }
.kv-grid .kv-val { color: var(--fg); }

/* Two-column helper for denser layout */
.cols-2 { display:grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }

@media (max-width: 720px) {
  .cols-2 { grid-template-columns: 1fr; }
}

/* Print tweaks to fit one page (A4) */
@media print {
  @page { size: A4 portrait; margin: 12mm; }
  body { -webkit-print-color-adjust: exact; print-color-adjust: exact; font-size: 11pt; }
  .report-doc { max-width: initial; }
  .section { page-break-inside: avoid; background:#fff !important; border:1px solid #000; }
  .section .section-title { background:#fff !important; color:#000; border-bottom:1px solid #000; }
  .section .section-body { color:#000; }
  .report-header { margin-bottom: 6px; }
  .report-title { font-size: 16pt; }
  .kv-grid { grid-template-columns: 35% 65%; row-gap:4px; }
  .kv-grid .kv-key { color:#333; }
  .kv-grid .kv-val { color:#000; }
  a { color:#000; text-decoration:none; }
}

/* Components */
.btn {
  padding:10px 16px;
  border:1px solid var(--border);
  background:transparent;
  color:var(--fg);
  border-radius:8px;
  cursor:pointer;
  display:inline-block;
  text-decoration:none;
}
.btn.primary { border-color:var(--primary); color:var(--primary); }

.error {
  background:#7f1d1d;
  color:#fecaca;
  border:1px solid #ef4444;
  padding:10px;
  border-radius:8px;
  margin-bottom:12px;
}
.success {
  background:#44c767;
  color:#fff;
  padding:8px;
  border-radius:6px;
  margin-bottom:12px;
}

.watermark { opacity:.15; max-width:180px; }
.hint { color:var(--muted); }

/* Auth / Login */
.auth-container {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:70vh;
  padding:24px;
}
.login-card {
  display:flex;
  gap:24px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:24px;
  max-width:760px;
  width:100%;
}
.logo-side img { max-width:160px; opacity:.8; }
.form-side { flex:1; }
.form-side h1 { margin-top:0; }
.form-side label { display:block; margin:.5rem 0 .25rem; color:var(--muted); }
.form-side input {
  width:100%;
  padding:10px;
  border-radius:8px;
  border:1px solid var(--border);
  background:#0b1220;
  color:var(--fg);
}

/* Operaciones & RTE */
.operaciones, .rte {
  max-width:800px;
  margin:0 auto;
  padding:24px;
}
.operaciones h1, .rte h1 { margin-bottom:16px; }

.rte fieldset {
  border:1px solid var(--border);
  border-radius:8px;
  padding:16px;
  margin-bottom:24px;
}
.rte legend { font-weight:bold; color:var(--primary); }
.rte label { display:block; margin-top:8px; font-weight:600; }
.rte input, .rte select, .rte textarea {
  width:100%;
  padding:8px;
  border-radius:6px;
  border:1px solid var(--border);
  background:#0b1220;
  color:var(--fg);
}

/* Accordion */
.accordion { margin-top: 12px; }
.accordion .card {
  border:1px solid var(--border);
  border-radius:10px;
  margin-bottom:12px;
  overflow:hidden;
  background: var(--card);
}
.accordion .card-header {
  padding:12px 14px;
  font-weight:700;
  background: rgba(255,255,255,0.03);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.accordion .card-header::after {
  content: '\25BC'; /* ▼ */
  font-size: 12px;
  opacity:.7;
  transition: transform .2s ease;
}
.accordion .card.open .card-header::after { transform: rotate(180deg); }
.accordion .card-body { display:none; padding:14px; }
.accordion .card.open .card-body { display:block; }

/* Footer */
.footer {
  text-align: center;
  padding: 8px;
  background: #f5f5f5; /* o var(--card) si usas variables */
  color: #333;         /* o var(--fg) */
  border-top: 1px solid #ddd; /* o var(--border) */
  font-size: 11px;
}

.footer p {
  margin: 0;
  line-height: 1.4;
  word-wrap: break-word;
}
@media (max-width: 600px) {
  .footer {
    font-size: 10px;
    padding: 8px;
  }
}