/* Factubridge Portal — diseño premium sobre Bootstrap 5 */

/* ── Variables de marca ───────────────────────────────────────────────────── */
:root {
  --font-brand:   'Cinzel', serif;
  --font-tagline: 'Cormorant Garamond', serif;
  --font-nav:     'Raleway', sans-serif;
  --font-data:    'Montserrat', sans-serif;
  --gold-primary: #c8a84b;
  --gold-dark:    #b8972a;
  --gold-accent:  #d4a843;
  --navy-deep:    #0a1a35;
  --navy-mid:     #1a3a6b;
  --navy-card:    rgba(15, 30, 60, 0.82);
  /* Dorado para tema light — más oscuro para contraste sobre fondo claro */
  --gold-light:   #7a5c0a;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
html, body {
  height: 100%;
  overflow: hidden;  /* el scroll del documento queda fijo; main scrollea internamente */
}

body {
  background: #0a1a35;
  font-family: var(--font-data);
  font-size: 0.875rem;
  color: #e8eaf0;
  overflow-x: hidden;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}


/* ── Marco ornamental de esquinas ─────────────────────────────────────────── */
/*
 * El SVG tiene dos capas internas:
 *   1. <rect> de fondo (gradiente) — queda físicamente detrás de todo
 *   2. ornamentos/líneas de marco — deben verse por encima de navbar y contenido
 * Como un único SVG no puede tener partes a distintos z-index, separamos:
 *   - El fondo (#bg-layer) con z-index bajo
 *   - Los ornamentos (#ornament-layer) con z-index muy alto
 * Ambos con pointer-events:none para no bloquear interacción.
 */
.corner-frame {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2000;
  display: block;
  /*
   * Deja libre la franja derecha entre las líneas del marco (25px) y el
   * margen del contenido (32px) — ahí es donde aparece el scrollbar.
   * Se usa clip-path con regla even-odd: el polígono exterior define el área
   * visible, el interior define el hueco.
   */
  clip-path: polygon(
    0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%,
    calc(100% - 32px) 28px,
    calc(100% - 25px) 28px,
    calc(100% - 25px) calc(100% - 28px),
    calc(100% - 32px) calc(100% - 28px),
    calc(100% - 32px) 28px
  );
}

@media (max-width: 575px) {
  .corner-frame { display: none; }
}

/* El fondo SVG (gradiente) se mantiene detrás de todo el contenido */
.corner-frame-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  display: block;
}

/* El contenido del portal se posiciona por encima del fondo pero debajo del marco */
main,
.login-wrapper {
  position: relative;
  z-index: 1;
}

/* En modo claro los ornamentos se oscurecen para contrastar sobre fondo azul claro */
[data-bs-theme="light"] .corner-frame {
  filter: brightness(0.55) saturate(1.2);
}

/* Capa de profundidad central — separa visualmente el contenido del fondo */
main.container-fluid::before {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(
    ellipse 75% 65% at 50% 42%,
    rgba(12, 26, 58, 0.45) 0%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
}

/* Dropdowns, modales y tooltips de Bootstrap por encima del marco ornamental */
.dropdown-menu,
.tooltip {
  z-index: 2055 !important;
}
/* Backdrop y diálogo del modal con z-index escalonado para no bloquearse mutuamente */
.modal-backdrop {
  z-index: 2050 !important;
}
.modal {
  z-index: 2060 !important;
  overflow: hidden !important;
}
.popover {
  z-index: 2070 !important;
}

/* ── Navbar ───────────────────────────────────────────────────────────────── */
/*
 * La navbar se extiende de borde a borde horizontalmente (sin margen lateral),
 * igual que las líneas verticales del marco. El margen superior (28px) la baja
 * hasta quedar pegada a la línea horizontal superior del marco ornamental.
 * El padding horizontal la hace coincidir aproximadamente con las líneas verticales.
 */
.navbar {
  background: rgba(10, 26, 53, 0.88) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: none;
  /* m=20px + 5px inner = 25px es donde están las líneas verticales;
     usamos padding horizontal para que el contenido interno quede alineado */
  padding: 0.55rem 30px;
  margin-top: 26px;
  margin-left: 25px;
  margin-right: 25px;
  position: relative;
  z-index: 10;
  flex-shrink: 0;
}

/* Línea separadora solo bajo el área de contenido del menú, no en los bordes */
.navbar-inner {
  border-bottom: 1px solid rgba(184, 151, 42, 0.4);
  padding-bottom: 0.4rem;
}

/* Legibilidad explícita: refuerzo sobre data-bs-theme="dark" */
.navbar .nav-link,
.navbar .navbar-nav .nav-link {
  color: #9ab8d0 !important;
}
.navbar .nav-link:hover,
.navbar .nav-link.active,
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
  color: var(--gold-primary) !important;
}

.navbar-brand {
  color: #e8d5a0 !important;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
}
.navbar-brand:hover {
  color: var(--gold-primary) !important;
}
.navbar-brand-name {
  font-family: var(--font-brand);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: block;
  line-height: 1.2;
}
.navbar-brand-name::first-letter {
  font-size: 1.5rem;
  line-height: 1;
  vertical-align: baseline;
}

.navbar-tagline {
  font-family: var(--font-tagline);
  font-style: italic;
  font-size: 0.68rem;
  color: var(--gold-primary);
  letter-spacing: 0.03em;
  display: block;
  line-height: 1;
  margin-top: 2px;
  font-weight: 400;
}

.nav-link {
  font-family: var(--font-nav);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8fa8c0 !important;
  padding: 0.4rem 0.85rem !important;
  transition: color 0.15s ease;
}
.nav-link:hover,
.nav-link.active {
  color: var(--gold-primary) !important;
}

.navbar-user-info {
  font-family: var(--font-data);
  font-size: 0.76rem;
  color: #6a88a8;
  letter-spacing: 0.01em;
}
.navbar-user-info strong {
  color: #b0c8e0;
  font-weight: 600;
}

.btn-cerrar-sesion {
  font-family: var(--font-nav);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid rgba(184, 151, 42, 0.45);
  color: var(--gold-primary) !important;
  background: transparent;
  padding: 0.28rem 0.7rem;
  border-radius: 3px;
  transition: background 0.15s, border-color 0.15s;
  text-decoration: none;
}
.btn-cerrar-sesion:hover {
  background: rgba(184, 151, 42, 0.1);
  border-color: var(--gold-primary);
  color: var(--gold-primary) !important;
}

.navbar-toggler {
  border-color: rgba(184, 151, 42, 0.3);
}
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28200,168,75,0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ── Main — área de scroll interna, delimitada por el marco ornamental ────── */
/*
 * La altura se calcula para que el área de scroll quede completamente dentro
 * del marco ornamental:
 *   - Arriba: 30px (margin-top navbar) + ~60px (navbar) = ~90px
 *   - Abajo: 30px para no colisionar con las líneas horizontales inferiores
 * El padding-bottom empuja el último elemento visible por encima del borde.
 */
main.container-fluid {
  flex: 1 1 0;
  /* height:0 + flex:1 es el truco canónico para que un flex-child scrollee
     sin desbordarse — el navegador calcula la altura real desde el flex container */
  height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-left: clamp(1.5rem, 6vw, 6rem);
  padding-right: clamp(1.5rem, 6vw, 6rem);
  max-width: 1600px;
  margin-right: 25px;
  margin-left: 25px;
  margin-bottom: 28px;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/* ── Cards ────────────────────────────────────────────────────────────────── */
.card {
  background-color: var(--navy-card);
  border: 1px solid rgba(184, 151, 42, 0.28);
  box-shadow: 0 4px 28px rgba(0, 0, 0, 0.5);
  color: #e8eaf0;
  border-radius: 10px;
  backdrop-filter: blur(2px);
}
.card-header {
  background-color: rgba(20, 44, 90, 0.6);
  border-bottom: 1px solid rgba(184, 151, 42, 0.22);
  padding: 0.6rem 1.1rem;
  font-family: var(--font-nav);
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gold-primary);
}
.card-footer {
  background-color: rgba(12, 26, 56, 0.5);
  border-top: 1px solid rgba(184, 151, 42, 0.15);
}

/* ── Tablas ──────────────────────────────────────────────────────────────── */
.table {
  font-family: var(--font-data);
  font-size: 0.8rem;
  color: #c8d4e4;
  --bs-table-striped-bg: transparent;
  --bs-table-hover-bg: transparent;
}
.table th {
  font-family: var(--font-nav);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  vertical-align: middle;
  color: #7a98b8;
  border-color: rgba(184, 151, 42, 0.12);
}
.table td {
  vertical-align: middle;
  border-color: rgba(255, 255, 255, 0.05);
}
.table-dark {
  --bs-table-bg: rgba(8, 18, 40, 0.92);
  --bs-table-border-color: rgba(184, 151, 42, 0.18);
}
.table-dark th {
  color: var(--gold-primary);
  font-family: var(--font-nav);
  font-size: 0.7rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.table-hover > tbody > tr:hover > td {
  background-color: rgba(184, 151, 42, 0.06) !important;
  color: #dde8f4;
}
/* Cabeceras de tablas de detalle (certificado) con bg-light en modo oscuro */
.table th.bg-light {
  background-color: rgba(22, 46, 90, 0.65) !important;
  color: #8fa8c0 !important;
}
/* Ancho fijo de columna etiqueta en tablas de detalle */
.w-35 { width: 35%; }

/* ── Tipografía monospace ─────────────────────────────────────────────────── */
.font-monospace {
  font-family: "SFMono-Regular", "Cascadia Code", "Fira Code", Menlo, Consolas,
    monospace;
  font-size: 0.82em;
}

/* ── Badges de estado ────────────────────────────────────────────────────── */
.badge-success    { background-color: #198754 !important; color: #fff !important; }
.badge-danger     { background-color: #dc3545 !important; color: #fff !important; }
.badge-warning    { background-color: #d4a030 !important; color: #12100a !important; }
.badge-secondary  { background-color: #4a6080 !important; color: #e0e8f0 !important; }
.badge-info       { background-color: #0a8eb0 !important; color: #fff !important; }
.badge-dark       { background-color: #1a2a40 !important; color: #a8bcd0 !important; border: 1px solid rgba(184,151,42,0.25); }
.badge-light      { background-color: rgba(200,216,240,0.12) !important; color: #a8bcd0 !important; border: 1px solid rgba(184,151,42,0.2); }

/* ── Formularios ─────────────────────────────────────────────────────────── */
.form-control,
.form-select {
  font-family: var(--font-data);
  font-size: 0.8rem;
  background-color: rgba(8, 20, 48, 0.85);
  border: 1px solid rgba(184, 151, 42, 0.22);
  color: #c8d8ec;
  border-radius: 4px;
}
.form-control:focus,
.form-select:focus {
  background-color: rgba(12, 28, 62, 0.95);
  border-color: rgba(200, 168, 75, 0.55);
  box-shadow: 0 0 0 2px rgba(200, 168, 75, 0.1);
  color: #e0ecf8;
}
.form-control::placeholder {
  color: #3a5470;
}
.form-label {
  font-family: var(--font-nav);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #7a98b8;
  margin-bottom: 0.3rem;
}
.input-group-text {
  background-color: rgba(20, 44, 90, 0.6);
  border: 1px solid rgba(184, 151, 42, 0.22);
  color: var(--gold-primary);
  font-size: 0.85rem;
}
.form-text {
  font-family: var(--font-data);
  font-size: 0.72rem;
  color: #4a6478;
}

/* ── Botones ─────────────────────────────────────────────────────────────── */
.btn-primary {
  background: linear-gradient(
    135deg,
    rgba(184, 151, 42, 0.92) 0%,
    rgba(200, 168, 75, 0.88) 100%
  );
  border: 1px solid rgba(160, 128, 30, 0.8);
  color: #09142a !important;
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 4px;
  transition: filter 0.15s, box-shadow 0.15s;
}
.btn-primary:hover,
.btn-primary:focus {
  filter: brightness(1.08);
  box-shadow: 0 0 0 2px rgba(200, 168, 75, 0.2);
  color: #06100e !important;
}

.btn-outline-secondary {
  font-family: var(--font-nav);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  border-color: rgba(184, 151, 42, 0.22);
  color: #7a98b8;
  border-radius: 3px;
}
.btn-outline-secondary:hover {
  background-color: rgba(184, 151, 42, 0.08);
  border-color: rgba(184, 151, 42, 0.5);
  color: var(--gold-primary);
}

/* Botones descarga inline en tabla del dashboard */
.btn-dl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.22rem 0.45rem;
  font-size: 0.85rem;
  border-radius: 3px;
  border: 1px solid rgba(184, 151, 42, 0.28);
  color: #7a98b8;
  background: transparent;
  line-height: 1;
  text-decoration: none;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.btn-dl:hover {
  border-color: var(--gold-primary);
  color: var(--gold-primary);
  background: rgba(184, 151, 42, 0.08);
}
.btn-dl-json  { color: #64b8d8; border-color: rgba(100, 184, 216, 0.3); }
.btn-dl-json:hover { color: #90d4f0; border-color: rgba(100,184,216,0.65); }
.btn-dl-xmlreq  { color: #70c490; border-color: rgba(112, 196, 144, 0.3); }
.btn-dl-xmlreq:hover { color: #94e0b0; border-color: rgba(112,196,144,0.65); }
.btn-dl-xmlres  { color: #8a9cd8; border-color: rgba(138, 156, 216, 0.3); }
.btn-dl-xmlres:hover { color: #a8bcf0; border-color: rgba(138,156,216,0.65); }

/* Botones de descarga detallados (certificado) */
.btn.text-start {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  white-space: normal;
  text-align: left;
}

/* ── Paginación ──────────────────────────────────────────────────────────── */
.pagination .page-link {
  font-family: var(--font-data);
  font-size: 0.76rem;
  background: rgba(12, 26, 56, 0.75);
  border-color: rgba(184, 151, 42, 0.18);
  color: #7a98b8;
  padding: 0.28rem 0.6rem;
}
.pagination .page-item.active .page-link {
  background: rgba(184, 151, 42, 0.18);
  border-color: var(--gold-primary);
  color: var(--gold-primary);
}
.pagination .page-link:hover {
  background: rgba(184, 151, 42, 0.1);
  border-color: rgba(184, 151, 42, 0.45);
  color: var(--gold-primary);
}
.pagination .page-item.disabled .page-link {
  background: rgba(8, 18, 40, 0.5);
  color: #3a5068;
  border-color: rgba(184, 151, 42, 0.1);
}

/* ── Alertas ─────────────────────────────────────────────────────────────── */
.alert {
  font-family: var(--font-data);
  font-size: 0.8rem;
  border-radius: 4px;
}
.alert-info {
  background-color: rgba(13, 100, 150, 0.18) !important;
  border-color: rgba(13, 100, 150, 0.38) !important;
  color: #80c0e0 !important;
}
.alert-warning {
  background-color: rgba(190, 140, 20, 0.15) !important;
  border-color: rgba(190, 140, 20, 0.35) !important;
  color: #d4a030 !important;
}
.alert-danger {
  background-color: rgba(170, 35, 45, 0.16) !important;
  border-color: rgba(170, 35, 45, 0.36) !important;
  color: #d87080 !important;
}
.alert-success {
  background-color: rgba(25, 120, 65, 0.16) !important;
  border-color: rgba(25, 120, 65, 0.35) !important;
  color: #60c890 !important;
}

/* ── Acordeón (certificado → "Saber más") ───────────────────────────────── */
.accordion-item {
  background-color: rgba(8, 20, 48, 0.75);
  border: 1px solid rgba(184, 151, 42, 0.18);
}
.accordion-button {
  background-color: rgba(12, 28, 62, 0.85);
  color: var(--gold-primary);
  font-family: var(--font-nav);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.05em;
}
.accordion-button:not(.collapsed) {
  background-color: rgba(20, 44, 90, 0.85);
  color: var(--gold-primary);
  box-shadow: none;
}
.accordion-button::after {
  filter: invert(70%) sepia(40%) saturate(350%) hue-rotate(8deg);
}
.accordion-body {
  background-color: rgba(8, 18, 44, 0.65);
  color: #8fa8c0;
  font-family: var(--font-data);
  font-size: 0.78rem;
  line-height: 1.65;
}
.accordion-body .text-dark,
.accordion-body strong.text-dark {
  color: #b8cce0 !important;
}

/* ── Bloque de confianza (certificado) ───────────────────────────────────── */
.trust-block {
  background: linear-gradient(
    135deg,
    rgba(18, 42, 88, 0.62) 0%,
    rgba(10, 26, 58, 0.52) 100%
  ) !important;
  border-color: rgba(184, 151, 42, 0.22) !important;
}
.trust-block p.fw-semibold {
  color: #b8c8e0 !important;
}

/* ── Pasos numerados (formulario certificado) ────────────────────────────── */
.cert-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 50%;
  background: rgba(184, 151, 42, 0.15);
  border: 1px solid rgba(184, 151, 42, 0.45);
  color: var(--gold-primary);
  font-family: var(--font-nav);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0;
  margin-top: 0.1rem;
}

/* ── Código / respuesta AEAT ─────────────────────────────────────────────── */
.aeat-response {
  max-height: 400px;
  overflow-y: auto;
  background-color: rgba(4, 12, 30, 0.75);
  border: 1px solid rgba(184, 151, 42, 0.18);
  border-radius: 4px;
  padding: 0.75rem;
  font-size: 0.76rem;
  color: #90b8d8;
}
pre code {
  white-space: pre-wrap;
  word-break: break-all;
}

/* ── Título de página ────────────────────────────────────────────────────── */
.page-title {
  font-family: var(--font-nav);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-size: 0.9rem;
  color: #c8d8ec;
}

/* ── Login ───────────────────────────────────────────────────────────────── */
.login-wrapper {
  position: fixed;
  inset: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Sin overflow: la card se encoge en lugar de provocar scroll */
}
.login-card {
  width: 100%;
  max-width: 420px;
  /* La card no puede ser más alta que el área interior del marco */
  max-height: 100%;
  display: flex;
  flex-direction: column;
}
.login-card .card {
  overflow-y: auto;
  scrollbar-gutter: stable both-edges;
}
.login-logo {
  width: calc(100% + 6rem);
  margin-left: -3rem;
  margin-right: -3rem;
  height: auto;
  /* En ventanas pequeñas la imagen se encoge */
  max-height: 30vh;
  object-fit: contain;
  filter: drop-shadow(0 2px 16px rgba(184, 151, 42, 0.4));
}
.login-brand-name {
  font-family: var(--font-brand);
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #e8d5a0;
  margin-top: 0.75rem;
  line-height: 1.1;
}
.login-brand-name::first-letter {
  font-size: 2.1rem;
  line-height: 1;
  vertical-align: baseline;
}
.login-tagline {
  font-family: var(--font-tagline);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--gold-primary);
  letter-spacing: 0.04em;
  line-height: 1.4;
}
.login-tagline-sub {
  font-size: 0.75rem;
  opacity: 0.7;
  letter-spacing: 0.12em;
}

/* ── Botón toggle tema claro/oscuro ──────────────────────────────────────── */
.btn-theme-toggle {
  background: transparent;
  border: 1px solid rgba(184, 151, 42, 0.35);
  color: var(--gold-primary);
  padding: 0.28rem 0.55rem;
  border-radius: 3px;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.btn-theme-toggle:hover {
  background: rgba(184, 151, 42, 0.1);
  border-color: var(--gold-primary);
}

/* ── Período activo (navegación mes/trimestre en facturas) ───────────────── */
.periodo-actual {
  font-size: 1rem;
  color: var(--gold-primary);
  letter-spacing: 0.02em;
}
[data-bs-theme="light"] .periodo-actual {
  color: #0a1a35;
}

/* ── Modo claro (azul claro + dorado) ────────────────────────────────────── */
[data-bs-theme="light"] body {
  background: #dce8f5;
  color: #0a1a35;
}
[data-bs-theme="light"] .navbar {
  background: rgba(210, 228, 248, 0.94) !important;
}
[data-bs-theme="light"] .navbar .nav-link,
[data-bs-theme="light"] .navbar .navbar-nav .nav-link,
[data-bs-theme="light"] .nav-link {
  color: #1a3a6b !important;
}
[data-bs-theme="light"] .nav-link:hover,
[data-bs-theme="light"] .navbar .nav-link:hover,
[data-bs-theme="light"] .navbar .navbar-nav .nav-link:hover {
  color: var(--gold-light) !important;
}
[data-bs-theme="light"] .navbar .navbar-nav .nav-link.active,
[data-bs-theme="light"] .navbar .nav-link.active,
[data-bs-theme="light"] .nav-link.active {
  color: var(--gold-light) !important;
  font-weight: 700 !important;
}
[data-bs-theme="light"] .navbar-brand { color: #0a1a35 !important; }
[data-bs-theme="light"] .navbar-brand:hover { color: var(--gold-light) !important; }
[data-bs-theme="light"] .navbar-tagline { color: var(--gold-light); }
[data-bs-theme="light"] .btn-theme-toggle { color: var(--gold-light); border-color: rgba(122,92,10,0.45); }
[data-bs-theme="light"] .btn-theme-toggle:hover { background: rgba(122,92,10,0.08); border-color: var(--gold-light); }
[data-bs-theme="light"] .navbar-user-info { color: #2a4a70; }
[data-bs-theme="light"] .navbar-user-info strong { color: #0a1a35; }
[data-bs-theme="light"] .btn-cerrar-sesion {
  color: #3a2800 !important;
  border-color: rgba(100, 70, 0, 0.5);
}
[data-bs-theme="light"] .btn-cerrar-sesion:hover {
  background: rgba(100, 70, 0, 0.08);
  border-color: rgba(100, 70, 0, 0.7);
}
[data-bs-theme="light"] .navbar-inner {
  border-bottom-color: rgba(184, 151, 42, 0.4);
}
[data-bs-theme="light"] .card {
  background-color: rgba(224, 238, 252, 0.92);
  border-color: rgba(184, 151, 42, 0.35);
  color: #0a1a35;
  box-shadow: 0 4px 20px rgba(10, 26, 80, 0.12);
}
[data-bs-theme="light"] .card-header {
  background-color: rgba(200, 220, 244, 0.75);
  border-bottom-color: rgba(184, 151, 42, 0.3);
}
[data-bs-theme="light"] .card-footer {
  background-color: rgba(208, 226, 246, 0.65);
  border-top-color: rgba(184, 151, 42, 0.2);
}
[data-bs-theme="light"] .table { color: #0a1a35; }
[data-bs-theme="light"] .table th {
  color: #1a3a6b;
  border-color: rgba(184, 151, 42, 0.2);
}
[data-bs-theme="light"] .table td { border-color: rgba(10, 26, 80, 0.08); }
[data-bs-theme="light"] .table-dark {
  --bs-table-bg: rgba(200, 220, 244, 0.85);
  --bs-table-border-color: rgba(184, 151, 42, 0.2);
  color: #0a1a35;
}
[data-bs-theme="light"] .table-dark th { color: var(--gold-light); }
[data-bs-theme="light"] .table-hover > tbody > tr:hover > td {
  background-color: rgba(184, 151, 42, 0.08) !important;
  color: #0a1a35;
}
[data-bs-theme="light"] .table th.bg-light {
  background-color: rgba(200, 220, 244, 0.75) !important;
  color: #1a3a6b !important;
}
[data-bs-theme="light"] .form-control,
[data-bs-theme="light"] .form-select {
  background-color: rgba(236, 246, 255, 0.95);
  border-color: rgba(184, 151, 42, 0.35);
  color: #0a1a35;
}
[data-bs-theme="light"] .form-control:focus,
[data-bs-theme="light"] .form-select:focus {
  background-color: #f0f8ff;
  border-color: rgba(184, 151, 42, 0.65);
  color: #0a1a35;
}
[data-bs-theme="light"] .form-control::placeholder { color: #6a8ab0; }
[data-bs-theme="light"] .form-label { color: #1a3a6b; }
[data-bs-theme="light"] .form-text { color: #3a5a88; }
[data-bs-theme="light"] .input-group-text {
  background-color: rgba(200, 220, 244, 0.75);
  border-color: rgba(184, 151, 42, 0.35);
  color: var(--gold-light);
}
[data-bs-theme="light"] .page-title { color: #0a1a35; }
[data-bs-theme="light"] .login-brand-name { color: #0a1835; }
[data-bs-theme="light"] .login-tagline { color: #8a6a10; }
[data-bs-theme="light"] .login-tagline-sub { color: #5a4010; opacity: 1; }
[data-bs-theme="light"] .aeat-response {
  background-color: rgba(220, 236, 252, 0.9);
  color: #0a1a35;
  border-color: rgba(184, 151, 42, 0.3);
}
[data-bs-theme="light"] .alert-info {
  background-color: rgba(13, 100, 150, 0.12) !important;
  border-color: rgba(13, 100, 150, 0.30) !important;
  color: #0a5878 !important;
}
[data-bs-theme="light"] .alert-warning {
  background-color: rgba(190, 140, 20, 0.12) !important;
  border-color: rgba(190, 140, 20, 0.30) !important;
  color: #7a5408 !important;
}
[data-bs-theme="light"] .alert-danger {
  background-color: rgba(170, 35, 45, 0.10) !important;
  border-color: rgba(170, 35, 45, 0.28) !important;
  color: #8a1828 !important;
}
[data-bs-theme="light"] .alert-success {
  background-color: rgba(25, 120, 65, 0.10) !important;
  border-color: rgba(25, 120, 65, 0.28) !important;
  color: #0e5030 !important;
}
[data-bs-theme="light"] .accordion-item {
  background-color: rgba(220, 236, 252, 0.85);
  border-color: rgba(184, 151, 42, 0.25);
}
[data-bs-theme="light"] .accordion-button {
  background-color: rgba(204, 224, 246, 0.9);
  color: var(--gold-dark);
}
[data-bs-theme="light"] .accordion-button:not(.collapsed) {
  background-color: rgba(190, 214, 242, 0.95);
  color: var(--gold-dark);
}
[data-bs-theme="light"] .accordion-body {
  background-color: rgba(228, 240, 254, 0.8);
  color: #0a1a35;
}
[data-bs-theme="light"] .accordion-body .text-dark,
[data-bs-theme="light"] .accordion-body strong.text-dark {
  color: #0a1a35 !important;
}
[data-bs-theme="light"] .trust-block {
  background: linear-gradient(
    135deg,
    rgba(200, 220, 244, 0.7) 0%,
    rgba(220, 236, 252, 0.6) 100%
  ) !important;
  border-color: rgba(184, 151, 42, 0.3) !important;
}
[data-bs-theme="light"] .trust-block p.fw-semibold { color: #0a1a35 !important; }
[data-bs-theme="light"] .pagination .page-link {
  background: rgba(220, 236, 252, 0.9);
  border-color: rgba(184, 151, 42, 0.25);
  color: #1a3a6b;
}
[data-bs-theme="light"] .pagination .page-item.active .page-link {
  background: rgba(184, 151, 42, 0.2);
  border-color: var(--gold-dark);
  color: var(--gold-dark);
}
[data-bs-theme="light"] .pagination .page-link:hover {
  background: rgba(184, 151, 42, 0.12);
  border-color: rgba(184, 151, 42, 0.5);
  color: var(--gold-dark);
}
[data-bs-theme="light"] .btn-outline-secondary {
  border-color: rgba(26, 58, 107, 0.3);
  color: #1a3a6b;
}
[data-bs-theme="light"] .btn-outline-secondary:hover {
  background-color: rgba(184, 151, 42, 0.1);
  border-color: rgba(184, 151, 42, 0.55);
  color: var(--gold-dark);
}
[data-bs-theme="light"] .btn-dl { color: #1a4a7a; border-color: rgba(26,74,122,0.3); }
[data-bs-theme="light"] .btn-dl:hover { border-color: var(--gold-light); color: var(--gold-light); }
/* Colores diferenciados por tipo en light (más oscuros para contraste) */
[data-bs-theme="light"] .btn-dl-json  { color: #0a6888; border-color: rgba(10,104,136,0.35); }
[data-bs-theme="light"] .btn-dl-json:hover { color: #085070; border-color: rgba(10,104,136,0.7); }
[data-bs-theme="light"] .btn-dl-xmlreq  { color: #1a7a48; border-color: rgba(26,122,72,0.35); }
[data-bs-theme="light"] .btn-dl-xmlreq:hover { color: #0f5c34; border-color: rgba(26,122,72,0.7); }
[data-bs-theme="light"] .btn-dl-xmlres  { color: #5a3aaa; border-color: rgba(90,58,170,0.35); }
[data-bs-theme="light"] .btn-dl-xmlres:hover { color: #42288a; border-color: rgba(90,58,170,0.7); }
[data-bs-theme="light"] main.container-fluid::before {
  background: radial-gradient(
    ellipse 75% 65% at 50% 42%,
    rgba(180, 210, 240, 0.35) 0%,
    transparent 100%
  );
}

/* Cuando hay tabla con scroll interno, el main no debe scrollear */
main.container-fluid:has(.facturas-table-card) {
  overflow: hidden;
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
}

/* ── Tabla facturas con scroll interno en tbody ──────────────────────────── */
/*
 * La card ocupa todo el espacio vertical restante del main (flex: 1).
 * El thead queda fijo (sticky) y solo el tbody scrollea.
 */
.facturas-table-card {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.facturas-table-body {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.facturas-table-scroll {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: auto;
}
.facturas-table-scroll table {
  width: 100%;
  min-width: max-content;
}
.facturas-thead-sticky th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(8, 18, 40, 0.97);
  color: var(--gold-primary);
  font-family: var(--font-nav);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border-color: rgba(184, 151, 42, 0.18);
  border-right: 1px solid rgba(184, 151, 42, 0.22);
}
.facturas-thead-sticky th:last-child {
  border-right: none;
}
.facturas-table-scroll td {
  border-right: 1px solid rgba(184, 151, 42, 0.10);
}
.facturas-table-scroll td:last-child {
  border-right: none;
}
[data-bs-theme="light"] .facturas-thead-sticky th {
  background: rgba(200, 220, 244, 0.97);
  color: var(--gold-light);
  border-color: rgba(122, 92, 10, 0.25);
  border-right-color: rgba(122, 92, 10, 0.2);
}
[data-bs-theme="light"] .facturas-table-scroll td {
  border-right-color: rgba(122, 92, 10, 0.08);
}

/* ── Visor de código (JSON/XML) con syntax highlighting ────────────────── */
/* El modal queda siempre con fondo oscuro, incluso en tema light.          */
.code-viewer {
  margin-bottom: 0;
  border-radius: 4px;
  padding: 1rem;
  font-size: 0.8rem;
  white-space: pre-wrap;
  word-break: break-all;
  background: rgba(8, 18, 40, 0.7);
  color: #c8d4e4;
}

/* Tokens JSON */
.hl-key   { color: #7eb8f7; }
.hl-str   { color: #98d882; }
.hl-num   { color: #f0c060; }
.hl-bool  { color: #c792ea; }
.hl-null  { color: #ff8c7a; }
.hl-punct { color: #8899aa; }

/* Tokens XML */
.hl-tag   { color: #7eb8f7; }
.hl-attr  { color: #c8a84b; }
.hl-attrv { color: #98d882; }
.hl-cmt   { color: #6a7f90; font-style: italic; }
.hl-pi    { color: #c792ea; }
.hl-text  { color: #c8d4e4; }

/* ── Plegado de nodos ────────────────────────────────────────────────────── */
.hl-fold-wrap {
  display: block;
}
/* Toggle de plegado: span con role=button (button no es válido dentro de pre) */
.hl-toggle {
  display: inline-flex;
  align-items: center;
  padding: 0;
  margin: 0 2px 0 0;
  cursor: pointer;
  color: #8899aa;
  font-size: 0.65em;
  line-height: 1;
  vertical-align: middle;
  user-select: none;
  opacity: 0.7;
  transition: opacity 0.1s, color 0.1s;
}
.hl-toggle:hover { opacity: 1; color: #c8a84b; }
.hl-arrow { display: inline-block; transition: transform 0.15s; }

/* Estado plegado */
.hl-fold-hint { display: none; }
.hl-fold-wrap[data-folded="1"] .hl-fold-body { display: none; }
.hl-fold-wrap[data-folded="1"] .hl-fold-hint { display: inline; }
.hl-fold-wrap[data-folded="1"] .hl-arrow     { transform: rotate(-90deg); }

/* ── Posición del modal: anclado al tercio superior, sin centrado vertical ── */
/* Sin modal-dialog-centered, Bootstrap alinea el diálogo al top (flex-start).
 * margin-top fijo garantiza que el borde superior no se mueve al replegar nodos.
 * La suma margin-top + max-height + margin-bottom debe ser ≤ 100vh para que
 * el scroll principal de la página nunca aparezca con el modal abierto. */
.fb-modal-dialog {
  margin-top: 4vh;
  margin-bottom: 4vh;
}

/* ── Marco del modal (fb-modal-content) ─────────────────────────────────── */
/* data-bs-theme se propaga desde JS al abrir/cambiar tema,
 * Bootstrap gestiona background/color/border vía sus variables CSS.
 * Solo sobreescribimos lo específico de Factubridge: bordes dorados y altura. */
.fb-modal-content {
  max-height: calc(100vh - 8vh);
  border-color: rgba(184, 151, 42, 0.3) !important;
}
.fb-modal-content .modal-header {
  border-bottom-color: rgba(184, 151, 42, 0.2) !important;
}
/* Título ocupa el espacio libre; los botones de acción quedan a la derecha */
.fb-modal-content .modal-title { flex: 1; }

.fb-modal-content[data-bs-theme="light"] .modal-header {
  border-bottom-color: rgba(122, 92, 10, 0.25) !important;
}
/* En light el btn-close-white queda invisible; revertir al filtro oscuro */
.fb-modal-content[data-bs-theme="light"] .btn-close-white {
  filter: none;
}

/* ── Página de estado — badges y textos de componentes ───────────────────── */
.status-badge {
  font-family: var(--font-nav);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  padding: 0.3em 0.6em;
  border-radius: 0.25rem;
}
.status-badge-ok {
  background: rgba(25, 135, 84, 0.2);
  border: 1px solid rgba(25, 135, 84, 0.4);
  color: #60c890;
}
.status-badge-warn {
  background: rgba(190, 140, 20, 0.2);
  border: 1px solid rgba(190, 140, 20, 0.4);
  color: #d4a030;
}
.status-ok-icon   { color: #60c890; }
.status-ok-text   { font-family: var(--font-data); font-size: 0.75rem; color: #60c890;  margin-left: 0.4rem; }
.status-warn-icon { color: #d4a030; }
.status-warn-text { font-family: var(--font-data); font-size: 0.75rem; color: #d4a030;  margin-left: 0.4rem; }
.status-err-icon  { color: #d87080; }
.status-err-text  { font-family: var(--font-data); font-size: 0.75rem; color: #d87080;  margin-left: 0.4rem; }

[data-bs-theme="light"] .status-card-header { color: #0a1a35; }

[data-bs-theme="light"] .status-badge-ok {
  background: rgba(25, 135, 84, 0.12);
  border-color: rgba(25, 135, 84, 0.5);
  color: #0d6e3f;
}
[data-bs-theme="light"] .status-badge-warn {
  background: rgba(150, 100, 0, 0.1);
  border-color: rgba(150, 100, 0, 0.45);
  color: #7a5000;
}
[data-bs-theme="light"] .status-ok-icon   { color: #0d6e3f; }
[data-bs-theme="light"] .status-ok-text   { color: #0d6e3f; }
[data-bs-theme="light"] .status-warn-icon { color: #7a5000; }
[data-bs-theme="light"] .status-warn-text { color: #7a5000; }
[data-bs-theme="light"] .status-err-icon  { color: #b02030; }
[data-bs-theme="light"] .status-err-text  { color: #b02030; }

/* Compensa la ausencia de navbar en páginas sin sesión (aviso legal, privacidad) */
main.container-fluid.main-no-navbar {
  margin-top: 28px;
}

/* ── Pie de página legal ───────────────────────────────────────────────────── */
.portal-footer {
  flex-shrink: 0;
  text-align: center;
  padding: 0.65rem 1rem 0.2rem;
  font-family: var(--font-data);
  font-size: 0.6rem;
  color: rgba(180, 190, 210, 0.65);
  letter-spacing: 0.05em;
  position: relative;
  z-index: 1;
}
.portal-footer a {
  color: rgba(200, 168, 75, 0.7);
  text-decoration: none;
  transition: color 0.2s;
}
.portal-footer a:hover { color: var(--gold-primary); }
.portal-footer-sep { margin: 0 0.45em; opacity: 0.35; }

[data-bs-theme="light"] .portal-footer { color: rgba(10, 26, 53, 0.65); }
[data-bs-theme="light"] .portal-footer a { color: rgba(122, 92, 10, 0.8); }
[data-bs-theme="light"] .portal-footer a:hover { color: var(--gold-light); }

/* ── Páginas legales (aviso legal / privacidad) ────────────────────────────── */
.legal-page {
  max-width: 760px;
  margin: 2rem auto;
  padding-bottom: 2rem;
}
.legal-page h1 {
  font-family: var(--font-brand);
  font-size: 1.1rem;
  letter-spacing: 0.12em;
  color: var(--gold-primary);
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}
.legal-page .legal-updated {
  font-family: var(--font-data);
  font-size: 0.65rem;
  color: rgba(180, 190, 210, 0.45);
  letter-spacing: 0.04em;
  margin-bottom: 2rem;
}
.legal-page h2 {
  font-family: var(--font-nav);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-primary);
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
  opacity: 0.85;
}
.legal-page p, .legal-page li {
  font-family: var(--font-data);
  font-size: 0.8rem;
  line-height: 1.7;
  color: rgba(220, 228, 242, 0.78);
}
.legal-page ul { padding-left: 1.4rem; }
.legal-page .legal-pending {
  color: rgba(200, 168, 75, 0.7);
  font-style: italic;
}
[data-bs-theme="light"] .legal-page p,
[data-bs-theme="light"] .legal-page li { color: rgba(10, 26, 53, 0.78); }
[data-bs-theme="light"] .legal-page .legal-updated { color: rgba(10, 26, 53, 0.38); }