:root {
  --bs-primary: #2E5AAC;
  --bs-primary-rgb: 46, 90, 172;
  --bs-link-color: #2E5AAC;
  --bs-link-hover-color: #244890;
  --bs-border-radius: .375rem;
  --bs-border-radius-sm: .25rem;
  --bs-border-radius-lg: .5rem;

  --brand: #2E5AAC;
  --brand-hover: #244890;
  --brand-light: #5B9DFF;
  --brand-soft: rgba(46, 90, 172, .08);

  --topbar-bg: #1E293B;
  --topbar-bg-hover: rgba(255, 255, 255, .06);
  --topbar-bg-active: rgba(255, 255, 255, .1);
  --topbar-text: #E5E9F0;
  --topbar-text-muted: #94A3B8;
  --topbar-border: #30405C;

  --bg-page: #F1F3F6;
  --bg-surface: #FFFFFF;
  --border: #E2E5EA;

  --text: #1E2430;
  --text-secondary: #5B6472;
  --text-muted: #98A0AC;

  --success: #1F9D55;
  --success-hover: #187D44;
  --success-soft: #E7F7EE;
  --warning: #B98900;
  --warning-soft: #FDF3DC;
  --danger: #C0392B;
  --danger-hover: #A22F22;
  --danger-soft: #FBE9E7;

  --sidebar-w: 240px;
  --header-h: 56px;
}

* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  background: var(--bg-page);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

.shell {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 100vh;
}

/* ─── Topbar (marca + menú principal) ─── */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-h);
  background: var(--topbar-bg);
  display: flex;
  align-items: stretch;
  padding: 0 16px;
  z-index: 110;
  gap: 20px;
}

.topbar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-shrink: 0;
}

.topbar__logo-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
}

.topbar__brand-name {
  font-size: .9rem;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar__hamburger {
  display: none;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  padding: 4px;
  align-self: center;
}

.topbar__hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--topbar-text);
  border-radius: 1px;
}

/* Menú principal horizontal */
.topbar__menu {
  display: flex;
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.topbar__menu::-webkit-scrollbar {
  display: none;
}

.topbar__item {
  display: flex;
  align-items: stretch;
  position: relative;
  flex-shrink: 0;
}

.topbar__link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  font-size: .82rem;
  color: var(--topbar-text-muted);
  white-space: nowrap;
  transition: background .15s, color .15s;
}

.topbar__link:hover {
  background: var(--topbar-bg-hover);
  color: var(--topbar-text);
}

.topbar__item.active>.topbar__link,
.topbar__link.active {
  background: var(--topbar-bg-active);
  color: #fff;
}

.topbar__link i {
  font-size: .95rem;
}

.topbar__menu .dropdown-menu {
  border: 1px solid var(--border);
  border-radius: var(--bs-border-radius);
  box-shadow: 0 8px 24px rgba(16, 24, 40, .12);
  padding: 6px;
  margin-top: 0;
}

.topbar__menu .dropdown-item {
  font-size: .82rem;
  color: var(--text);
  padding: 7px 12px;
  border-radius: var(--bs-border-radius-sm);
}

.topbar__menu .dropdown-item:hover,
.topbar__menu .dropdown-item:focus {
  background: var(--brand-soft);
  color: var(--brand);
}

/* Zona derecha: fecha, usuario, logout */
.topbar__right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  /* En escritorio queda pegado al borde derecho porque `.topbar__menu` (flex:1, entre medias) lo
     empuja — pero ese menú se oculta entero por debajo de 768px (ver el resto de este archivo), y
     sin nada que empuje, este bloque se quedaba flotando donde acabase el resto del contenido, no
     en el borde real de la pantalla. `margin-left:auto` no depende de que exista ese hermano: lo
     deja siempre pegado a la derecha, con o sin `.topbar__menu` visible. Motivo real, no
     cosmético: los desplegables de notificaciones/usuario se posicionan con `right:0` relativos a
     este mismo bloque — si él no está en el borde real, el desplegable se sale de la pantalla por
     la izquierda (reportado por el usuario en móvil). */
  margin-left: auto;
}

.topbar__date {
  font-size: .74rem;
  color: var(--topbar-text-muted);
  text-align: right;
  line-height: 1.2;
}

.topbar__date strong {
  display: block;
  color: var(--topbar-text);
  font-weight: 500;
}

.topbar__user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 14px;
  border-left: 1px solid var(--topbar-border);
}

.topbar__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  font-weight: 600;
  flex-shrink: 0;
}

.topbar__user-name {
  font-size: .78rem;
  color: var(--topbar-text);
  font-weight: 500;
  white-space: nowrap;
}

/* Desplegable de usuario */
.topbar__user-menu {
  position: relative;
}

.topbar__user-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: var(--bs-border-radius-sm);
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  transition: background .15s;
  font-size: inherit;
}

.topbar__user-btn:hover {
  background: var(--topbar-bg-hover);
}

.topbar__user-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--bs-border-radius);
  box-shadow: 0 8px 24px rgba(16, 24, 40, .12);
  min-width: 280px;
  z-index: 1000;
  display: none;
}

.topbar__user-dropdown.show {
  display: block;
}

.topbar__user-info {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}

.topbar__user-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.topbar__user-avatar-lg {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  font-weight: 600;
  flex-shrink: 0;
}

.topbar__user-details {
  min-width: 0;
}

.topbar__user-name-lg {
  font-size: .85rem;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar__user-email {
  font-size: .75rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar__company-info {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: .75rem;
}

.topbar__company-label {
  color: var(--text-muted);
  display: block;
  margin-bottom: 2px;
}

.topbar__company-name {
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar__user-menu-items {
  list-style: none;
  margin: 0;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.topbar__user-menu-item a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-size: .82rem;
  color: var(--text);
  border-radius: var(--bs-border-radius-sm);
  transition: background .15s, color .15s;
}

.topbar__user-menu-item a:hover {
  background: var(--brand-soft);
  color: var(--brand);
}

.topbar__user-menu-item.logout a:hover {
  background: var(--danger-soft);
  color: var(--danger);
}

.topbar__user-menu-item i {
  font-size: .9rem;
  width: 16px;
  flex-shrink: 0;
}

/* ─── Sidebar (panel lateral con menú del componente) ─── */
.sidebar {
  position: fixed;
  top: var(--header-h);
  left: 0;
  width: var(--sidebar-w);
  height: calc(100vh - var(--header-h));
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  z-index: 90;
  transition: transform .25s ease;
  display: flex;
  flex-direction: column;
}

.sidebar__nav {
  flex: 1;
  padding: 8px;
}

.sidebar__menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar__menu-item {
  display: block;
}

.sidebar__menu-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-size: .82rem;
  color: var(--text-secondary);
  border-radius: var(--bs-border-radius);
  transition: background .15s, color .15s;
}

.sidebar__menu-link:hover {
  background: var(--bg-page);
  color: var(--text);
}

.sidebar__menu-link.active {
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 500;
}

.sidebar__menu-link i {
  font-size: .95rem;
  width: 18px;
  flex-shrink: 0;
  text-align: center;
}

/* ─── Contenido ─── */
.main-wrap {
  margin-left: var(--sidebar-w);
  padding-top: var(--header-h);
  padding-bottom: 50px;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.content-area {
  flex: 1;
  padding: 24px;
}

/* ─── Botón flotante "Volver arriba" ───
   Oculto por defecto (custom.js le añade/quita .is-visible según el scroll); bottom:66px para
   quedar justo encima del footer fijo (.site-footer, 50px reservados en .main-wrap). z-index por
   debajo de los modales de Bootstrap (>=1050) y del desplegable de usuario (1000), para no tapar
   nada mientras esté abierto. */
.btn-volver-arriba {
  position: fixed;
  right: 24px;
  bottom: 66px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--brand);
  color: #fff;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(16, 24, 39, .25);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, background-color .15s ease;
  z-index: 900;
}

.btn-volver-arriba.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.btn-volver-arriba:hover {
  background: var(--brand-hover);
}

/* ─── Cabecera estándar de página: tarjeta reutilizable en todas las vistas ───
   Compactada a petición explícita del usuario: se comía demasiado espacio vertical en pantalla
   en TODAS las páginas de la app (este bloque es compartido). */
.erp-page-header {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--bs-border-radius);
  padding: 10px 16px;
  margin-bottom: 14px;
  box-shadow: 0 1px 2px rgba(16, 24, 39, .04);
  position: relative;
  overflow: hidden;
}

.erp-page-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-light) 100%);
}

.erp-page-header__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--bs-border-radius);
  background: linear-gradient(135deg, #16213A 0%, var(--brand) 100%);
  color: #fff;
  font-size: 1rem;
}

.erp-page-header__text {
  min-width: 0;
}

.erp-page-header__eyebrow {
  display: block;
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 1px;
}

.erp-page-header h1 {
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--text);
  margin: 0 0 1px 0;
  line-height: 1.25;
}

.erp-page-header p {
  font-size: .78rem;
  font-weight: 400;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.3;
}

/* ─── Toolbar de acciones (clases/Toolbar.php) ─── */
.erp-toolbar {
  --bs-gutter-x: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--bs-border-radius);
  padding: 12px 16px;
  margin: 0 0 20px 0 !important;
  box-shadow: 0 1px 2px rgba(16, 24, 39, .04);
  position: relative;
  overflow: hidden;
}

.erp-toolbar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-light) 100%);
}

.erp-toolbar .col-auto {
  margin: 0 !important;
}

/* ─── Botones propios del ERP (clases/Toolbar.php), sin depender de .btn de Bootstrap ─── */
.erp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 84px;
  padding: 7px 16px;
  font-family: inherit;
  font-size: .82rem;
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 1.4;
  border: 1.5px solid transparent;
  border-radius: var(--bs-border-radius-sm);
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  transition: transform .12s, box-shadow .12s, background .2s, color .2s;
}

.erp-btn:not(:disabled):hover {
  transform: translateY(-1px);
  text-decoration: none;
}

.erp-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
  box-shadow: none !important;
  transform: none !important;
}

/* Nuevo — acción principal, navy sólido */
.erp-btn-success {
  color: #fff;
  background: linear-gradient(135deg, #16213A 0%, #263A5F 100%);
  box-shadow: 0 2px 6px rgba(16, 24, 39, .28);
}

.erp-btn-success:not(:disabled):hover {
  background: linear-gradient(135deg, #1C2B47 0%, #2E5AAC 100%);
  box-shadow: 0 4px 12px rgba(16, 24, 39, .35);
}

/* Editar — acción secundaria, navy en contorno */
.erp-btn-primary {
  color: var(--topbar-bg);
  background: transparent;
  border-color: var(--topbar-bg);
}

.erp-btn-primary:not(:disabled):hover {
  color: #fff;
  background: var(--topbar-bg);
}

/* Eliminar — acción destructiva, acento que resalta */
.erp-btn-danger {
  color: #fff;
  background: linear-gradient(135deg, #FF4B5C 0%, #E0293B 100%);
  box-shadow: 0 2px 10px rgba(224, 41, 59, .35);
}

.erp-btn-danger:not(:disabled):hover {
  background: linear-gradient(135deg, #FF6070 0%, #EA3A4C 100%);
  box-shadow: 0 4px 14px rgba(224, 41, 59, .45);
}

.site-footer {
  padding: 12px 24px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--topbar-bg);
  position: fixed;
  bottom: 0;
  left: var(--sidebar-w);
  right: 0;
  z-index: 100;
  height: 50px;
}

.site-footer__left {
  display: flex;
  align-items: center;
}

.site-footer__right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.site-footer__company {
  font-size: .9rem;
  color: var(--topbar-text);
  font-weight: 500;
}

.site-footer__label {
  font-size: .82rem;
  color: var(--topbar-text-muted);
  margin: 0;
  font-weight: 500;
}

.site-footer__select {
  padding: 6px 8px;
  font-size: .82rem;
  background: rgba(255, 255, 255, .08);
  color: var(--topbar-text);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 4px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.site-footer__select:hover {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .25);
}

.site-footer__select:focus {
  outline: none;
  background: rgba(255, 255, 255, .15);
  border-color: var(--brand);
}

.site-footer__select option {
  background: var(--topbar-bg);
  color: var(--topbar-text);
}

/* ─── Sobrescritura de tablas/formularios genéricos (DataTable.php / CreateForms.php) ─── */
.table {
  background: var(--bg-surface);
  font-size: .85rem;
}

.table thead th {
  font-weight: 500;
  color: var(--text-secondary);
  border-bottom-width: 1px;
  background: var(--bg-page);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 .2rem var(--brand-soft);
}

.badge-app {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--bs-border-radius-sm);
  font-size: .72rem;
  font-weight: 500;
}

.badge-app--success {
  background: var(--success-soft);
  color: var(--success);
}

.badge-app--warning {
  background: var(--warning-soft);
  color: var(--warning);
}

.badge-app--danger {
  background: var(--danger-soft);
  color: var(--danger);
}

.badge-app--secondary {
  background: var(--bg-page);
  color: var(--text-secondary);
}

/* Campana de notificaciones (sustituye al antiguo aviso de actualizacion aislado: ahora una
   actualizacion disponible es, sencillamente, una notificacion mas). Mismo patron de desplegable
   que .topbar__user-dropdown de arriba. */
.topbar__notif-menu {
  position: relative;
}

.topbar__notif-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: none;
  /* "inherit" tiraba del color oscuro de <body> (no hay ningun ancestro entre este boton y <body>
     que fije color), invisible sobre el fondo oscuro de la topbar — mismo tono claro que ya usan
     el resto de elementos de la topbar (fecha, nombre de usuario). */
  color: var(--topbar-text);
  cursor: pointer;
  font-size: 1.05rem;
  transition: background .15s;
}

.topbar__notif-btn:hover {
  background: var(--topbar-bg-hover);
}

.topbar__notif-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 8px;
  background: var(--danger);
  color: #fff;
  font-size: .64rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.topbar__notif-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--bs-border-radius);
  box-shadow: 0 8px 24px rgba(16, 24, 40, .12);
  width: 340px;
  max-width: 90vw;
  z-index: 1000;
  display: none;
}

.topbar__notif-dropdown.show {
  display: block;
}

.topbar__notif-dropdown__header {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: .85rem;
  color: var(--text);
}

.topbar__notif-dropdown__list {
  max-height: 360px;
  overflow-y: auto;
}

.topbar__notif-dropdown__empty {
  padding: 20px 14px;
  text-align: center;
  color: var(--text-muted);
  font-size: .82rem;
}

.topbar__notif-item {
  display: block;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background .15s;
}

.topbar__notif-item:last-child {
  border-bottom: none;
}

.topbar__notif-item:hover {
  background: var(--brand-soft);
}

.topbar__notif-item__texto {
  font-size: .82rem;
  color: var(--text);
  line-height: 1.35;
}

.topbar__notif-item__fecha {
  display: block;
  margin-top: 3px;
  font-size: .7rem;
  color: var(--text-muted);
}

.topbar__notif-dropdown__footer {
  display: block;
  padding: 10px 14px;
  text-align: center;
  font-size: .8rem;
  font-weight: 500;
  color: var(--brand);
  text-decoration: none;
  border-top: 1px solid var(--border);
}

.topbar__notif-dropdown__footer:hover {
  background: var(--brand-soft);
}

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .3);
  z-index: 95;
}

/* ─── Cajón de navegación móvil (2 niveles) ───
   Sustituye por completo, en pantallas <1024px, al viejo intento de reutilizar `.sidebar` (el
   panel de escritorio) como cajón: ese panel solo conoce el submenú de la sección ACTUAL, así que
   en móvil no había ninguna forma de saltar a otra sección — y además, al compartir el mismo
   `.sidebar-overlay` de fondo con un z-index más alto (95) que el suyo (90), el overlay quedaba
   POR ENCIMA del propio panel y se comía todos los toques, aunque el panel se viera detrás
   ("me sale un overlay que no me deja pulsar los items", tal cual lo reportó el usuario). Aquí el
   cajón (100) siempre queda por delante del overlay (95): el fondo oscurece pero nunca intercepta
   el toque. Nivel 1 = las 6 secciones principales; nivel 2 = el submenú de la que se toque — ver
   HtmlDocument::getMobileMenu() y el marcado en templates/plantilla/index.php. */
.mobile-nav {
  position: fixed;
  top: var(--header-h);
  left: 0;
  width: min(300px, 85vw);
  height: calc(100vh - var(--header-h));
  background: var(--bg-surface);
  z-index: 100;
  transform: translateX(-100%);
  transition: transform .25s ease;
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 24px rgba(16, 24, 40, .18);
}

.mobile-nav.open {
  transform: translateX(0);
}

.mobile-nav__panel {
  display: none;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  padding: 8px;
}

.mobile-nav__panel--active {
  display: flex;
}

.mobile-nav__panel-title {
  padding: 14px 12px 8px;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  font-weight: 700;
}

.mobile-nav__back {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 14px 12px;
  font-size: .86rem;
  font-weight: 600;
  color: var(--brand);
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
  text-align: left;
  cursor: pointer;
}

.mobile-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mobile-nav__link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 12px;
  font-size: .88rem;
  color: var(--text);
  background: none;
  border: none;
  border-radius: var(--bs-border-radius);
  text-align: left;
  cursor: pointer;
}

.mobile-nav__link:hover {
  background: var(--bg-page);
}

.mobile-nav__link.active {
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 500;
}

.mobile-nav__link i {
  font-size: 1rem;
  width: 20px;
  flex-shrink: 0;
  text-align: center;
}

.mobile-nav__chevron {
  margin-left: auto;
  font-size: .8rem !important;
  width: auto !important;
  color: var(--text-muted);
}

@media (max-width: 1024px) {
  /* El panel de escritorio ya no se usa como cajón en móvil (ver .mobile-nav arriba) — se oculta
     entero en vez de quedar fuera de pantalla sin ninguna forma de abrirlo. */
  .sidebar {
    display: none;
  }

  .sidebar-overlay.open {
    display: block;
  }

  .main-wrap {
    margin-left: 0;
  }

  .site-footer {
    left: 0;
  }

  .topbar__hamburger {
    display: flex;
  }

  .content-area {
    padding: 16px;
  }
}

@media (max-width: 768px) {
  .topbar {
    padding: 0 12px;
    gap: 12px;
  }

  .topbar__brand-name {
    display: none;
  }

  .topbar__menu {
    display: none;
  }

  .topbar__right {
    gap: 8px;
  }

  .topbar__date,
  .topbar__user {
    display: none;
  }

  .topbar__logout {
    padding: 4px;
  }

  .content-area {
    padding: 12px;
  }

  /* Los desplegables de notificaciones y usuario se posicionan con `right:0` relativos a su
     propio botón — en escritorio da igual, pero en móvil el botón de la campana no es el último
     elemento de la fila (el de usuario va detrás), así que su `right:0` no coincide con el borde
     real de la pantalla y el desplegable (340px) se sale por la izquierda. Aquí se ancla cada uno
     directamente al borde derecho de la PANTALLA, no del botón que lo abre — reportado por el
     usuario probando en un móvil real. */
  .topbar__notif-dropdown,
  .topbar__user-dropdown {
    position: fixed;
    top: var(--header-h);
    right: 8px;
    left: auto;
    margin-top: 6px;
  }
}

/* ─── Pestañas de formulario (fichas de entidad: producto, cliente...) ─── */
.erp-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
  overflow-x: auto;
}

.erp-tabs__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 13px 18px;
  font-size: .84rem;
  font-weight: 500;
  font-family: inherit;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s, background .15s;
}

.erp-tabs__item:hover {
  color: var(--text);
  background: var(--bg-page);
}

.erp-tabs__item.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
  font-weight: 600;
}

.erp-tab-panel {
  display: none;
}

.erp-tab-panel.active {
  display: block;
}

/* ─── Tarjeta y campos de formulario ─── */
.erp-form-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  margin-bottom: 20px;
  background: var(--danger-soft);
  color: var(--danger);
  border: 1px solid rgba(192, 57, 43, .25);
  border-radius: var(--bs-border-radius-sm);
  font-size: .88rem;
}

.erp-form-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--bs-border-radius);
  padding: 24px;
  box-shadow: 0 1px 2px rgba(16, 24, 39, .04);
}

.erp-form-section-title {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 26px 0 14px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}

.erp-form-section-title:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.erp-form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  min-width: 0;
}

.erp-form-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.erp-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.erp-form-group--full {
  grid-column: 1 / -1;
}

/* Input de texto + botón de búsqueda en la misma fila (p.ej. "Documento" + lupa en el alta de
   apuntes de caja, Contabilidad > Asientos) — mismo alto/borde que un input normal de CreateForms. */
.erp-input-group {
  display: flex;
  gap: 8px;
}

.erp-input-group input {
  flex: 1;
  min-width: 0;
}

.erp-barcode-preview {
  margin-top: 4px;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 6px;
}

.erp-form-group label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.erp-form-group .required {
  color: var(--danger);
}

.erp-form-group input:not([type="radio"]):not([type="checkbox"]),
.erp-form-group select,
.erp-form-group textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--bs-border-radius-sm);
  font-size: .88rem;
  color: var(--text);
  background: var(--bg-surface);
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}

.erp-form-group textarea {
  resize: vertical;
}

.erp-form-group input:focus,
.erp-form-group select:focus,
.erp-form-group textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 .2rem var(--brand-soft);
}

/* Campos de solo lectura (CreateForms 'readonly' => true): fondo gris claro para
   distinguirlos a simple vista de los editables.
   Especificidad: igual o mayor que la regla base de arriba (que ahora excluye
   radio/checkbox con dos :not()), si no esta regla deja de ganarle. */
.erp-form-group input[readonly]:not([type="radio"]),
.erp-form-group textarea[readonly] {
  background: var(--bg-page);
  color: var(--text-secondary);
  cursor: default;
}

.erp-form-group input[readonly]:focus,
.erp-form-group textarea[readonly]:focus {
  border-color: var(--border);
  box-shadow: none;
}

/* Mejora genérica de <select> (custom.js la aplica automáticamente a selects grandes,
   o a cualquiera con data-searchable="true"): input de texto que filtra una lista
   desplegable, sobre el <select> nativo real (oculto visualmente, no con display:none,
   para no romper "required" ni la accesibilidad). */
.erp-searchable-select {
  position: relative;
}

.erp-searchable-select__native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.erp-searchable-select__input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--bs-border-radius-sm);
  font-size: .88rem;
  background: var(--bg-surface);
  cursor: text;
}

.erp-searchable-select__input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 .2rem var(--brand-soft);
}

.erp-searchable-select__input:disabled {
  background: var(--bg-page);
  color: var(--text-secondary);
  cursor: default;
}

.erp-searchable-select__list {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 60;
  max-height: 240px;
  overflow-y: auto;
  margin-top: 4px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--bs-border-radius-sm);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
}

.erp-searchable-select.is-open .erp-searchable-select__list {
  display: block;
}

.erp-searchable-select__item {
  padding: 8px 12px;
  font-size: .85rem;
  cursor: pointer;
}

.erp-searchable-select__item:hover,
.erp-searchable-select__item.is-active {
  background: var(--brand-soft);
}

.erp-searchable-select__empty {
  padding: 8px 12px;
  font-size: .85rem;
  color: var(--text-secondary);
}

/* Fila de tarjetas de resumen numérico (totales, KPIs...), reutilizable en cualquier vista. */
.erp-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.erp-stat-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--brand);
  border-radius: var(--bs-border-radius-sm);
  padding: 14px 16px;
}

.erp-stat-card--success {
  border-left-color: var(--success);
}

.erp-stat-card--warning {
  border-left-color: var(--warning);
}

.erp-stat-card__label {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--text-secondary);
  margin: 0 0 6px;
}

.erp-stat-card__value {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.erp-stat-card--success .erp-stat-card__value {
  color: var(--success);
}

.erp-stat-card--warning .erp-stat-card__value {
  color: var(--warning);
}

/* ─── Panel de filtros de catálogo (búsqueda + rango de fechas + selects) ─── */
.erp-filter-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--bs-border-radius);
  padding: 18px 20px;
  margin-top: 20px;
}

.erp-filter-card__title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 14px;
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-secondary);
}

.erp-filter-card__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  align-items: end;
}

.erp-filter-card__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.erp-filter-card__field--grow {
  grid-column: span 2;
}

.erp-filter-card__field label {
  font-size: .78rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.erp-filter-card__field input,
.erp-filter-card__field select {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--bs-border-radius-sm);
  font-size: .88rem;
  color: var(--text);
  background: var(--bg-surface);
  transition: border-color .15s, box-shadow .15s;
}

.erp-filter-card__field input:focus,
.erp-filter-card__field select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 .2rem var(--brand-soft);
}

.erp-filter-card__field--actions {
  flex-direction: row;
}

@media (max-width: 640px) {
  .erp-filter-card__field--grow {
    grid-column: span 1;
  }
}

/* ─── Ficha de documento (presupuestos...): dos columnas, cliente | datos del documento ─── */
.erp-two-col-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 8px;
}

.erp-two-col-row__col {
  flex: 1 1 300px;
  min-width: 0;
}

/* Neutraliza el estilo nativo de <fieldset> (borde, margen, min-width propio del navegador) para
   poder usarlo como envoltorio de "solo lectura" (fieldset disabled desactiva en cascada todos
   los campos/selects/botones de dentro) sin que afecte al layout de la ficha. */
.erp-fieldset-reset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.erp-two-col-row__col--doc {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--bs-border-radius);
  padding: 16px 18px;
  box-shadow: 0 1px 3px rgba(16, 24, 39, .06);
}

.erp-two-col-row__col--doc .erp-form-group input,
.erp-two-col-row__col--doc .erp-form-group select {
  background: var(--bg-page);
}

/* Cabecera del presupuesto (cliente / dirección de envío / documento): son muchos campos
   en poco espacio, así que aquí (y SOLO aquí) usamos una variante más compacta que el resto
   de formularios de la app, para que la cabecera ocupe menos alto de pantalla. */
.erp-two-col-row__col--doc .erp-form-grid {
  gap: 10px;
}

.erp-two-col-row__col--doc .erp-form-group {
  gap: 3px;
}

.erp-two-col-row__col--doc .erp-form-group label {
  font-size: .72rem;
}

.erp-two-col-row__col--doc .erp-form-group input:not([type="radio"]):not([type="checkbox"]),
.erp-two-col-row__col--doc .erp-form-group select {
  padding: 5px 10px;
  font-size: .82rem;
}

.erp-form-group .erp-doc-field,
.erp-form-group input.erp-doc-field[readonly]:not([type="radio"]) {
  background: var(--bg-page);
}

/* ─── Modal "Convertir presupuesto": lista de opciones de arriba a abajo, una por documento
   destino, no botones lado a lado ─── */
.erp-convertir-opciones {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.erp-convertir-opciones .erp-btn {
  width: 100%;
  justify-content: flex-start;
  padding: 14px 16px;
  font-size: 1rem;
}

.erp-convertir-error {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: var(--bs-border-radius-sm);
  background: var(--danger-soft, rgba(220, 53, 69, .12));
  color: var(--danger);
  font-size: .85rem;
}

/* ─── Modal "Generar Fichero SEPA" (adeudos): lista de errores de validación + estado completado ─── */
.sepa-lista-errores {
  margin: 8px 0 0;
  padding: 10px 12px 10px 28px;
  border-radius: var(--bs-border-radius-sm);
  background: var(--danger-soft, rgba(220, 53, 69, .12));
  color: var(--danger);
  font-size: .85rem;
  max-height: 260px;
  overflow-y: auto;
}

.sepa-lista-errores li {
  margin-bottom: 4px;
}

.sepa-completado-texto {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  color: var(--success);
  font-weight: 600;
}

/* ─── Formulario de "añadir línea" (presupuestos/pedidos/albaranes...) en una sola fila ─── */
.erp-line-form-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--bs-border-radius);
  padding: 16px 18px;
  box-shadow: 0 1px 3px rgba(16, 24, 39, .06);
  /* Tras guardar/editar una línea, guardarLineaFactura (y equivalentes de los otros 4 documentos)
     redirige a "...#formLinea" para volver aquí mismo — sin esto, el navegador coloca el
     formulario justo debajo del borde superior de la ventana, tapado por el topbar fijo
     (.topbar, position:fixed, var(--header-h)). scroll-margin-top reserva ese hueco al saltar al
     ancla, para que el formulario quede visible por debajo del menú, no oculto detrás de él. */
  scroll-margin-top: calc(var(--header-h) + 16px);
}

.erp-line-form-hint {
  margin: 0 0 12px;
  font-size: .8rem;
  color: var(--text-secondary);
}

.erp-line-form-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 16px;
}

.erp-line-form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.erp-line-form-field label {
  font-size: .74rem;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
}

.erp-line-form-field input,
.erp-line-form-field select {
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: var(--bs-border-radius-sm);
  font-size: .85rem;
  color: var(--text);
  background: var(--bg-surface);
}

.erp-line-form-field input:focus,
.erp-line-form-field select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 .2rem var(--brand-soft);
}

.erp-line-form-field--producto { flex: 2 1 220px; }
.erp-line-form-field--combinacion,
.erp-line-form-field--lote { flex: 1 1 160px; }
.erp-line-form-field--referencia { flex: 0 1 110px; }
.erp-line-form-field--nombre { flex: 2 1 200px; }
.erp-line-form-field--numero { flex: 0 1 90px; }
.erp-line-form-field--boton { flex: 0 0 auto; }

.erp-line-form-field--numero input[readonly] {
  background: var(--bg-page);
  color: var(--text-secondary);
}

/* Total de la línea que se está añadiendo: destacado en negro/blanco para que se note bien
   frente al resto de campos, tanto en tema claro como oscuro. */
.erp-line-form-field--numero input.erp-line-total-preview[readonly] {
  background: #14171C;
  color: #FFFFFF;
  font-weight: 700;
  border-color: #14171C;
}

.erp-line-form-field--numero input,
.erp-line-form-field--numero select,
.erp-input-numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ─── Barra de totales compacta (debajo de la tabla de líneas) ─── */
.erp-totals-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: stretch;
  gap: 0;
  margin-top: 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--bs-border-radius);
  overflow: hidden;
}

.erp-totals-bar__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 10px 18px;
  border-left: 1px solid var(--border);
}

.erp-totals-bar__item:first-child {
  border-left: none;
}

.erp-totals-bar__label {
  font-size: .72rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
}

.erp-totals-bar__value {
  font-size: .95rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.erp-totals-bar__item--total {
  background: var(--brand-soft);
}

.erp-totals-bar__item--total .erp-totals-bar__label {
  color: var(--brand);
}

.erp-totals-bar__item--total .erp-totals-bar__value {
  color: var(--brand);
  font-size: 1.05rem;
}

@media (max-width: 720px) {
  .erp-totals-bar {
    justify-content: stretch;
  }

  .erp-totals-bar__item {
    flex: 1 1 45%;
  }
}

.erp-form-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 26px;
}

.erp-form-check input {
  width: 17px;
  height: 17px;
  accent-color: var(--brand);
  cursor: pointer;
}

.erp-form-check label {
  font-size: .85rem;
  color: var(--text);
  cursor: pointer;
}

/* Contabilidad > Verifactu (components/contabilidad/view/verifactu) — layout de dos columnas
   (formularios a la izquierda, datos del certificado a la derecha), calco del maquetado del
   SeleccionarCertificado.cs original (groupBox1/groupBox2 lado a lado). */
.erp-verifactu-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 20px;
  align-items: start;
}

@media (max-width: 900px) {
  .erp-verifactu-layout {
    grid-template-columns: 1fr;
  }
}

.erp-verifactu-layout__principal {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.erp-verifactu-card {
  padding: 20px;
}

.erp-verifactu-card h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .95rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 14px;
}

.erp-verifactu-card .erp-form-check {
  padding-top: 0;
  margin-bottom: 10px;
}

.erp-verifactu-layout__datos {
  position: sticky;
  top: 20px;
}

.erp-verifactu-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--bs-border-radius-sm);
  font-size: .8rem;
  font-weight: 600;
  margin: 0 0 14px;
}

.erp-verifactu-badge--success {
  background: var(--success-soft);
  color: var(--success);
}

.erp-verifactu-badge--warning {
  background: var(--warning-soft);
  color: var(--warning);
}

.erp-verifactu-badge--danger {
  background: var(--danger-soft);
  color: var(--danger);
}

.erp-verifactu-datos {
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: .8rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: var(--bs-border-radius-sm);
  padding: 12px 14px;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}

/* Contabilidad > Verifactu — banda inferior "Declaración Responsable" (DRSIF.pdf, junto a esta
   misma vista): documento oficial que todo proveedor VeriFactu debe poder mostrar. Banda oscura a
   todo lo ancho para distinguirla claramente de las tarjetas de configuración de arriba — es
   documentación, no un formulario más — con un botón que abre el PDF en un visor propio (modal +
   iframe, visor nativo del navegador) en vez de forzar una descarga o una pestaña nueva. */
.erp-verifactu-drsif {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
  padding: 22px 26px;
  background: linear-gradient(135deg, var(--topbar-bg) 0%, #24344F 100%);
  color: #fff;
  border-radius: var(--bs-border-radius);
  box-shadow: 0 8px 24px rgba(16, 24, 39, .18);
  position: relative;
  overflow: hidden;
}

.erp-verifactu-drsif::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%, rgba(91, 157, 255, .28), transparent 60%);
  pointer-events: none;
}

.erp-verifactu-drsif__icon {
  position: relative;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  font-size: 1.5rem;
  color: var(--brand-light);
}

.erp-verifactu-drsif__texto {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.erp-verifactu-drsif__texto h3 {
  margin: 0 0 4px;
  font-size: .95rem;
  font-weight: 700;
  color: #fff;
}

.erp-verifactu-drsif__texto p {
  margin: 0;
  font-size: .82rem;
  color: rgba(255, 255, 255, .75);
  line-height: 1.5;
  max-width: 620px;
}

.erp-verifactu-drsif__accion {
  position: relative;
  flex: 0 0 auto;
}

.erp-verifactu-drsif__accion .erp-btn {
  background: #fff;
  color: var(--topbar-bg);
  border-color: #fff;
  white-space: nowrap;
}

.erp-verifactu-drsif__accion .erp-btn:not(:disabled):hover {
  background: var(--brand-light);
  border-color: var(--brand-light);
  color: #fff;
}

@media (max-width: 640px) {
  .erp-verifactu-drsif {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}

/* Modal visor de la Declaración Responsable — el PDF se pinta con canvas (pdf.js, ver el script
   de esta misma vista) en vez de un <iframe src="...pdf">: así el resultado es el mismo en
   cualquier navegador, sin depender de cómo tenga cada uno configurado qué hacer con los PDF. El
   fondo gris oscuro imita al de los visores nativos, para que la página en sí (blanca, con
   sombra) destaque como una hoja real sobre un "escritorio" oscuro. */
.erp-drsif-modal-dialog {
  max-width: 980px;
}

.erp-drsif-modal-content {
  overflow: hidden;
}

.erp-drsif-viewer {
  position: relative;
  width: 100%;
  height: 78vh;
  overflow-y: auto;
  background: #525659;
}

.erp-drsif-paginas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 24px;
}

.erp-drsif-pagina {
  max-width: 100%;
  height: auto;
  background: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .4);
}

.erp-drsif-estado {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: rgba(255, 255, 255, .85);
  text-align: center;
  padding: 24px;
}

.erp-drsif-estado .spinner-border {
  color: var(--brand-light);
}

.erp-drsif-estado p {
  margin: 0;
  font-size: .88rem;
}

.erp-drsif-estado--error {
  color: #fff;
}

.erp-drsif-estado--error i {
  font-size: 1.8rem;
  color: var(--warning);
}

.erp-drsif-estado--error a {
  color: var(--brand-light);
  font-weight: 600;
}

@media (max-width: 767px) {
  .erp-drsif-viewer {
    height: 65vh;
  }
}

/* Grupo de radio buttons (CreateForms no genera radios: HTML normal + esta clase para que
   el círculo quede alineado con su texto en vez de estirarse como un input de texto). */
.erp-radio-option {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  margin-bottom: 6px;
}

.erp-radio-option:last-child {
  margin-bottom: 0;
}

.erp-radio-option input[type="radio"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--brand);
  cursor: pointer;
}

.erp-radio-option span {
  font-size: .85rem;
  color: var(--text);
}

.erp-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.erp-form-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}

.erp-form-empty i {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 14px;
  opacity: .5;
}

/* ─── Tarifas por cliente (fichas de producto) ─── */
.erp-tarifas-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

.erp-tarifa {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: var(--bs-border-radius-sm);
}

.erp-tarifa label {
  font-size: .74rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.erp-tarifa__dto {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--bs-border-radius-sm);
  font-size: .85rem;
  text-align: center;
  background: var(--bg-surface);
}

.erp-tarifa__dto:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 .2rem var(--brand-soft);
}

.erp-tarifa__pvp-label {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brand);
  margin-top: 4px;
}

.erp-tarifa__pvp {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--bs-border-radius-sm);
  font-size: .85rem;
  font-weight: 600;
  text-align: center;
  background: var(--bg-surface);
  color: var(--text-secondary);
}

@media (max-width: 992px) {
  .erp-form-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .erp-tarifas-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .erp-form-grid {
    grid-template-columns: 1fr;
  }

  .erp-tarifas-grid {
    grid-template-columns: 1fr;
  }

  .erp-form-actions {
    flex-direction: column-reverse;
  }

  .erp-form-actions .erp-btn {
    width: 100%;
  }
}

/* ─── Imagen principal del producto (tab Ficha Producto) ─── */
.erp-ficha-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.erp-ficha-layout__fields {
  flex: 1;
  min-width: 0;
}

.erp-image-upload-wrap {
  flex: 0 0 180px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.erp-image-upload {
  width: 180px;
  height: 180px;
  border: 1.5px dashed var(--border);
  border-radius: var(--bs-border-radius);
  background: var(--bg-page);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.erp-image-upload:hover {
  border-color: var(--brand);
  background: var(--brand-soft);
}

.erp-image-upload img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.erp-image-upload__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  text-align: center;
  padding: 12px;
}

.erp-image-upload__placeholder i {
  font-size: 1.8rem;
}

.erp-image-upload__placeholder span {
  font-size: .78rem;
  font-weight: 500;
}

.erp-image-upload__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--bs-border-radius-sm);
  background: transparent;
  color: var(--danger);
  font-size: .78rem;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.erp-image-upload__remove:hover {
  background: var(--danger-soft);
  border-color: var(--danger);
}

/* ─── Mini-formularios de las pestañas de detalle (lotes, características...) ─── */
.erp-subform {
  margin-bottom: 20px;
}

.erp-form-actions--inline {
  border-top: none;
  margin-top: 16px;
  padding-top: 0;
  justify-content: flex-start;
}

/* ─── Subtabla compacta (lotes, características, combinaciones) ─── */
.erp-subtable-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--bs-border-radius-sm);
}

.erp-subtable {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
}

.erp-subtable thead th {
  text-align: left;
  padding: 10px 14px;
  background: var(--bg-page);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--border);
}

.erp-subtable tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

.erp-subtable tbody tr:last-child td {
  border-bottom: none;
}

.erp-subtable tbody tr:hover td {
  background: var(--bg-page);
}

.erp-subtable__row-clickable {
  cursor: pointer;
}

.erp-subtable__actions {
  text-align: right;
  white-space: nowrap;
}

.erp-subtable__actions form {
  display: inline-block;
}

.erp-subtable__edit,
.erp-subtable__delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: var(--bs-border-radius-sm);
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, border-color .15s;
}

.erp-subtable__edit {
  color: var(--brand);
  margin-right: 6px;
}

.erp-subtable__edit:hover {
  background: var(--brand-soft);
  border-color: var(--brand);
}

.erp-subtable__delete {
  color: var(--danger);
}

.erp-subtable__delete:hover {
  background: var(--danger-soft);
  border-color: var(--danger);
}

/* ─── Campos editables en línea dentro de una subtabla ─── */
.erp-inline-input {
  width: 100%;
  min-width: 80px;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: var(--bs-border-radius-sm);
  background: transparent;
  color: var(--text);
  font-size: .85rem;
  font-family: inherit;
  transition: border-color .15s, background .15s;
}

.erp-inline-input:hover {
  border-color: var(--border);
}

.erp-inline-input:focus {
  outline: none;
  border-color: var(--brand);
  background: var(--bg-surface);
  box-shadow: 0 0 0 .2rem var(--brand-soft);
}

/* ─── Combinador de variantes (Combinaciones) ─── */
.erp-combinar-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 16px;
}

.erp-combinar-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: var(--bs-border-radius-sm);
}

.erp-combinar-tipo-nuevo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.erp-combinar-valores {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 38px;
  padding: 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--bs-border-radius-sm);
}

.erp-combinar-hint {
  margin: 0;
  font-size: .8rem;
  color: var(--text-muted);
}

.erp-combinar-valor-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: .8rem;
  color: var(--text);
  cursor: pointer;
}

.erp-combinar-valor-item input {
  accent-color: var(--brand);
  cursor: pointer;
}

.erp-combinar-valor-nuevo-wrap {
  display: flex;
  gap: 8px;
}

.erp-combinar-valor-nuevo-wrap input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--bs-border-radius-sm);
  font-size: .85rem;
  font-family: inherit;
}

.erp-combinar-valor-nuevo-wrap input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 .2rem var(--brand-soft);
}

@media (max-width: 768px) {
  .erp-combinar-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── Galería de imágenes adicionales ─── */
.erp-image-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
}

.erp-image-gallery__item {
  position: relative;
  aspect-ratio: 1;
  border: 1px solid var(--border);
  border-radius: var(--bs-border-radius-sm);
  overflow: hidden;
  background: var(--bg-page);
}

.erp-image-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.erp-image-gallery__item form {
  position: absolute;
  top: 6px;
  right: 6px;
}

.erp-image-gallery__delete {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: rgba(16, 24, 39, .65);
  color: #fff;
  cursor: pointer;
  transition: background .15s;
}

.erp-image-gallery__delete:hover {
  background: var(--danger);
}

@media (max-width: 768px) {
  .erp-ficha-layout {
    flex-direction: column;
  }

  .erp-image-upload-wrap {
    flex: 0 0 auto;
  }

  .erp-image-upload,
  .erp-image-upload__remove {
    width: 140px;
  }

  .erp-image-upload {
    height: 140px;
  }
}

/* ─── Modales: siempre centrados verticalmente, en toda la app ─── */
.modal-dialog {
  display: flex;
  align-items: center;
  min-height: calc(100% - 1rem);
}

@media (min-width: 576px) {
  .modal-dialog {
    min-height: calc(100% - 3.5rem);
  }
}

.modal-dialog .modal-content {
  width: 100%;
}

/* ─── Aviso flotante (Message::setFlashMessage), abajo a la derecha ─── */
/* Tarjeta blanca con borde de acento por tipo (no el relleno sólido "text-bg-*" de Bootstrap,
   que se veía plano) + badge circular con el icono + barra de progreso del auto-cierre — mismo
   componente en toda la app (Message::displayFlashMessage() y erpMostrarToast() en custom.js
   generan el mismo marcado), así que este cambio mejora el aviso en todas partes, no solo en un
   sitio. data-bs-delay="4500" en el HTML y los 4.5s de la animación de abajo van cogidos de la
   mano: si se cambia uno hay que cambiar el otro. */
.erp-toast {
  min-width: 360px;
  max-width: 420px;
  background: var(--bg-surface) !important;
  color: var(--text) !important;
  border-width: 0 0 0 5px !important;
  border-style: solid !important;
  border-color: var(--brand) !important;
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(16, 24, 39, .22), 0 3px 10px rgba(16, 24, 39, .1);
  overflow: hidden;
  position: relative;
  animation: erp-toast-in .4s cubic-bezier(.34, 1.56, .64, 1);
}

/* Con !important en border-color de arriba (necesario para ganarle a Bootstrap): estos overrides
   por tipo también necesitan !important, si no la regla base (misma especificidad, .erp-toast de
   una sola clase) gana igual por venir después en la cascada dentro del propio fichero. */
.erp-toast.text-bg-success { border-color: var(--success) !important; }
.erp-toast.text-bg-danger { border-color: var(--danger) !important; }
.erp-toast.text-bg-warning { border-color: var(--warning) !important; }
.erp-toast.text-bg-info,
.erp-toast.text-bg-primary { border-color: var(--brand) !important; }

@keyframes erp-toast-in {
  from { transform: translateX(28px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.erp-toast .toast-body {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  font-size: .92rem;
  font-weight: 500;
  line-height: 1.5;
}

.erp-toast__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1.15rem;
  background: var(--brand-soft);
  color: var(--brand);
}

.erp-toast.text-bg-success .erp-toast__icon { background: var(--success-soft); color: var(--success); }
.erp-toast.text-bg-danger .erp-toast__icon { background: var(--danger-soft); color: var(--danger); }
.erp-toast.text-bg-warning .erp-toast__icon { background: var(--warning-soft); color: var(--warning); }

.erp-toast__text {
  padding-top: 6px;
}

.erp-toast .btn-close {
  filter: none;
  opacity: .35;
  margin-top: 4px;
}

.erp-toast .btn-close:hover {
  opacity: .7;
}

.erp-toast__progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: var(--brand);
  transform-origin: left;
  animation: erp-toast-progress 4.5s linear forwards;
}

.erp-toast.text-bg-success .erp-toast__progress { background: var(--success); }
.erp-toast.text-bg-danger .erp-toast__progress { background: var(--danger); }
.erp-toast.text-bg-warning .erp-toast__progress { background: var(--warning); }

@keyframes erp-toast-progress {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

/* ─── Familias: tabla (50%) + árbol de familias (50%), solo visual ─── */
.erp-familias-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
  margin-top: 20px;
}

.erp-familia-tree {
  margin-top: 0;
  padding: 20px;
}

.erp-familia-tree__header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: .95rem;
  color: var(--text);
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.erp-familia-tree__list {
  list-style: none;
  margin: 0;
  padding-left: 18px;
  border-left: 1px dashed var(--border);
}

.erp-familia-tree__body > .erp-familia-tree__list {
  padding-left: 0;
  border-left: none;
}

.erp-familia-tree__item {
  margin: 8px 0;
}

.erp-familia-tree__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .88rem;
  color: var(--text);
}

.erp-familia-tree__label i {
  color: var(--brand);
}

@media (max-width: 900px) {
  .erp-familias-layout {
    grid-template-columns: 1fr;
  }
}

/* Modal "Enviar por correo" (réplica de Email/EnviarEmailSend.cs) — campos más bajos y más
   juntos que el formulario estándar (Desde/Para/Bcc/Asunto/Acuse/Copia) para dejarle el máximo
   de alto posible al editor de cuerpo, que es lo importante de este modal. */
.correo-form-compacta .erp-form-group input:not([type="checkbox"]) {
  padding: 5px 10px;
}

.correo-form-compacta .erp-form-group {
  gap: 3px;
}

.correo-form-compacta .erp-form-grid {
  gap: 10px;
  margin-bottom: 6px;
}

/* Acuse/Copia son casillas sueltas en su propia fila (no acompañan a un input con label encima,
   que es para lo que .erp-form-check trae 26px de padding-top de fábrica — aquí sobra entero y
   es la causa del hueco grande que se veía entre Asunto y estas dos casillas). */
.correo-opciones-envio {
  margin-bottom: 2px !important;
}

.correo-opciones-envio .erp-form-check {
  padding-top: 0;
}

/* Adjunto obligatorio del correo: chip fijo (no una casilla que se pueda desmarcar), en rojo
   como el resto de acciones de PDF de la app (mismo tono que el botón "Descargar PDF" de la
   vista previa de informes). */
.correo-adjunto-pdf {
  display: inline-flex;
  align-items: center;
  /* .erp-form-group es flex-direction:column, cuyo eje transversal (horizontal) estira a los
     hijos a todo el ancho por defecto (align-items:stretch) — display:inline-flex por sí solo no
     evita eso, hace falta align-self para que este chip solo mida lo que ocupa su contenido. */
  align-self: flex-start;
  gap: 8px;
  padding: 8px 14px;
  background: #FDECEA;
  border: 1px solid #C0392B;
  border-radius: 6px;
  color: #C0392B;
  font-weight: 600;
  font-size: .85rem;
}

.correo-adjunto-pdf i {
  font-size: 1.05rem;
}

/* El editor de cuerpo es lo importante de este modal — con los campos de arriba ya apretados
   (Desde/Para/Bcc/Asunto/Acuse/Copia) le sobra sitio para ser más alto que la variante
   ".html-editor--compacto" de fábrica (140px): el selector con id gana en especificidad a
   ".html-editor--compacto .html-editor__visual" sin tener que quitarle esa clase (que sigue
   aportando el resto de ajustes compactos del editor). */
#correoCuerpoEditor.html-editor--compacto .html-editor__visual,
#correoCuerpoEditor.html-editor--compacto .html-editor__codigo {
  height: 220px;
  min-height: 220px;
}

/* Sin informe predeterminado configurado: no hay nada que adjuntar, se avisa en gris en vez de
   en rojo (no es "el PDF a enviar", es un aviso de que falta configuración) y el envío se
   bloquea desde JS (btnEnviarCorreo.disabled). */
.correo-adjunto-pdf--falta {
  background: var(--bg-page);
  border-color: var(--border);
  color: var(--text-secondary);
}

/* El modal completo (cabecera + campos + editor + adjunto) no debe salirse de la pantalla en
   monitores bajos: modal-dialog-scrollable (Bootstrap) limita el diálogo a la altura del
   viewport y deja que solo el modal-body haga scroll interno si hiciera falta; aquí además se
   recorta el margen vertical del diálogo y el padding de cabecera/pie para que en la práctica
   quepa entero sin necesidad de ese scroll. */
.correo-modal-dialog .modal-header,
.correo-modal-dialog .modal-footer {
  padding: 10px 20px;
}

.correo-modal-dialog .modal-body {
  padding: 14px 20px;
}

/* Overlay de envío: cubre todo el modal (cabecera+cuerpo+pie) con un fondo gris translúcido y
   un spinner + texto centrados, para que quede claro que el correo se está enviando de verdad y
   no se pueda cerrar el modal a mitad de envío (ver mostrarEnviando() en el JS de la vista). */
.correo-modal-content {
  position: relative;
}

.correo-enviando-overlay {
  position: absolute;
  inset: 0;
  background: rgba(30, 41, 59, .6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border-radius: inherit;
  z-index: 10;
}

.correo-enviando-overlay .spinner-border {
  width: 2.5rem;
  height: 2.5rem;
  color: #fff;
}

.correo-enviando-overlay p {
  color: #fff;
  font-weight: 600;
  font-size: .95rem;
  margin: 0;
}

/* Traspaso de albaranes a factura: réplica visual de SeleccionarFacturaElectronica.cs (C#) —
   barra de título gris claro, cabeceras de sección "WhiteSmoke" y cajas con borde tipo GroupBox,
   en vez del modal Bootstrap genérico. */
.traspaso-dialog {
  max-width: 440px;
}

.traspaso-modal {
  border-radius: 6px;
  overflow: hidden;
}

.traspaso-titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #d3d3d3;
  padding: 12px 16px;
  font-weight: 700;
  font-size: .95rem;
  color: #222;
}

.traspaso-titulo .btn-close {
  font-size: .75rem;
}

.traspaso-cuerpo {
  padding: 16px 18px 6px;
}

.traspaso-seccion-titulo {
  background: #f5f5f5;
  font-weight: 700;
  font-size: .82rem;
  color: #333;
  padding: 7px 10px;
  margin: 0 0 8px;
  border-radius: 3px;
}

.traspaso-caja {
  border: 1px solid #a9a9a9;
  border-radius: 4px;
  padding: 12px 16px;
  margin-bottom: 18px;
}

.traspaso-caja .erp-radio-option {
  padding-left: 6px;
  margin-bottom: 10px;
}

.traspaso-caja .erp-radio-option:last-child {
  margin-bottom: 0;
}

.traspaso-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-top: 1px solid var(--border);
}

.traspaso-check {
  padding-top: 0;
}

/* Dos tarjetas de filtro lado a lado (Facturas: filtro + serie por defecto) reutilizando el grid
   de 2 columnas ya existente — evita el margin-top duplicado (el del contenedor + el de cada
   tarjeta) que se acumularía si .erp-filter-card conservase el suyo propio dentro del grid. */
.erp-familias-layout > .erp-filter-card {
  margin-top: 0;
}

/* Variante compacta de .erp-filter-card dentro de un modal (p.ej. "Importar facturas" en
   Ficheros SEPA): sin el margen superior pensado para separarla de la cabecera de página. */
.erp-filter-card--modal {
  margin-top: 0;
  margin-bottom: 14px;
  padding: 14px 16px;
}

/* Modal "Email masivo" (Facturas) — contador de progreso + barra + lista de errores. */
.email-masivo-contador {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.email-masivo-spinner {
  width: 22px;
  height: 22px;
  border: 3px solid var(--border);
  border-top-color: var(--brand);
  border-radius: 50%;
  flex-shrink: 0;
  animation: email-masivo-girar .8s linear infinite;
}

@keyframes email-masivo-girar {
  to { transform: rotate(360deg); }
}

.email-masivo-contador p {
  margin: 0;
  font-weight: 600;
  color: var(--text);
  font-size: .92rem;
}

.email-masivo-barra {
  height: 10px;
  border-radius: 999px;
  background: var(--bg-muted, #eef0f3);
  overflow: hidden;
  margin-bottom: 6px;
}

.email-masivo-barra__relleno {
  height: 100%;
  background: linear-gradient(90deg, var(--brand), var(--brand-hover, var(--brand)));
  border-radius: inherit;
  transition: width .35s ease;
}

.email-masivo-errores {
  margin-top: 18px;
  padding: 12px 14px;
  border: 1px solid #f3b4b4;
  background: #fdf1f1;
  border-radius: var(--bs-border-radius-sm);
  max-height: 180px;
  overflow-y: auto;
}

.email-masivo-errores__titulo {
  margin: 0 0 8px;
  font-weight: 700;
  font-size: .85rem;
  color: #c0392b;
  display: flex;
  align-items: center;
  gap: 6px;
}

.email-masivo-errores ul {
  margin: 0;
  padding-left: 18px;
}

.email-masivo-errores li {
  color: #a83232;
  font-size: .84rem;
  margin-bottom: 4px;
}

.email-masivo-errores li:last-child {
  margin-bottom: 0;
}

/* ─── Modal "Generar PDF" (Facturas) — generación masiva en lote, descarga en ZIP ───
   Deliberadamente más elaborado que el resto de modales de progreso de la app (cabecera con
   icono en degradado, anillo de progreso circular, estado de completado con animación) — pensado
   como una exportación "seria" de documentos fiscales, no un simple aviso. */
.pdf-lote-modal {
  overflow: hidden;
  border: none;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(16, 24, 39, .22);
}

.pdf-lote-modal__header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 24px;
  background: linear-gradient(135deg, var(--topbar-bg) 0%, var(--brand-hover) 140%);
  color: #fff;
  border: none;
}

.pdf-lote-modal__header-icon {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, .14);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}

.pdf-lote-modal__header-text {
  flex: 1;
  min-width: 0;
}

.pdf-lote-modal__header-text h5 {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 700;
}

.pdf-lote-modal__header-text p {
  margin: 2px 0 0;
  font-size: .78rem;
  color: rgba(255, 255, 255, .72);
  letter-spacing: .02em;
  text-transform: uppercase;
}

.pdf-lote-modal__header .btn-close {
  filter: invert(1) grayscale(1) brightness(2);
  opacity: .8;
}

.pdf-lote-modal__header .btn-close:hover {
  opacity: 1;
}

.pdf-lote-modal__body {
  padding: 26px 24px;
}

.pdf-lote-confirmacion__resumen {
  margin: 0 0 10px;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text);
}

.pdf-lote-confirmacion__nota {
  margin: 0;
  padding: 12px 14px;
  background: var(--brand-soft);
  border-radius: var(--bs-border-radius-sm);
  color: var(--text-secondary);
  font-size: .85rem;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.pdf-lote-confirmacion__nota i {
  color: var(--brand);
  margin-top: .15rem;
  flex-shrink: 0;
}

.pdf-lote-progreso {
  display: flex;
  align-items: center;
  gap: 22px;
}

.pdf-lote-progreso__anillo {
  position: relative;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
}

.pdf-lote-progreso__anillo svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.pdf-lote-progreso__anillo-fondo {
  fill: none;
  stroke: var(--border);
  stroke-width: 5;
}

.pdf-lote-progreso__anillo-relleno {
  fill: none;
  stroke: var(--brand);
  stroke-width: 5;
  stroke-linecap: round;
  transition: stroke-dashoffset .35s ease;
}

.pdf-lote-progreso__porcentaje {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .82rem;
  font-weight: 700;
  color: var(--text);
}

.pdf-lote-progreso__texto {
  flex: 1;
  min-width: 0;
}

.pdf-lote-progreso__estado {
  margin: 0 0 4px;
  font-weight: 600;
  color: var(--text);
  font-size: .95rem;
}

.pdf-lote-progreso__detalle {
  margin: 0;
  color: var(--text-secondary);
  font-size: .82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pdf-lote-errores {
  margin-top: 18px;
  padding: 12px 14px;
  border: 1px solid #f3b4b4;
  background: #fdf1f1;
  border-radius: var(--bs-border-radius-sm);
  max-height: 160px;
  overflow-y: auto;
}

.pdf-lote-errores__titulo {
  margin: 0 0 8px;
  font-weight: 700;
  font-size: .85rem;
  color: #c0392b;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pdf-lote-errores ul {
  margin: 0;
  padding-left: 18px;
}

.pdf-lote-errores li {
  color: #a83232;
  font-size: .84rem;
  margin-bottom: 4px;
}

.pdf-lote-errores li:last-child {
  margin-bottom: 0;
}

.pdf-lote-completado {
  text-align: center;
  padding: 8px 0 4px;
}

.pdf-lote-completado__icono {
  width: 58px;
  height: 58px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--success-soft);
  color: var(--success);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  animation: pdf-lote-completado-aparece .35s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes pdf-lote-completado-aparece {
  from { transform: scale(.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.pdf-lote-completado h6 {
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
}

.pdf-lote-completado > p:not(.pdf-lote-completado__manual) {
  margin: 0 0 18px;
  color: var(--text-secondary);
  font-size: .9rem;
}

.pdf-lote-completado__descarga {
  padding: 10px 22px;
}

.pdf-lote-completado__manual {
  margin: 14px 0 0;
  font-size: .8rem;
  color: var(--text-muted);
}

.pdf-lote-completado__manual a {
  color: var(--brand);
  font-weight: 600;
}

/* Modal "Buscar factura a rectificar" — input de búsqueda + tabla de resultados clicables. */
.erp-buscador-input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--bs-border-radius-sm);
  font-size: .9rem;
  color: var(--text);
  background: var(--bg-surface);
  margin-bottom: 14px;
}

.buscar-factura-resultados {
  height: 340px;
  overflow-y: auto;
}

.buscar-factura-vacio {
  color: var(--text-secondary);
  font-size: .85rem;
  text-align: center;
  padding: 18px 0;
  margin: 0;
}

.buscar-factura-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
}

.buscar-factura-tabla th {
  text-align: left;
  padding: 8px 10px;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg-surface);
}

.buscar-factura-tabla td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

.buscar-factura-tabla tbody tr {
  cursor: pointer;
}

.buscar-factura-tabla tbody tr:hover {
  background: var(--bg-hover, rgba(0, 0, 0, .03));
}

/* Columna de checkbox de selección múltiple (p.ej. modal "Importar facturas" de Ficheros SEPA). */
.buscar-factura-check-col {
  width: 36px;
  text-align: center !important;
}

/* Aviso informativo genérico (ficha de factura rectificativa/simplificada). */
.erp-info-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #eef4ff;
  border: 1px solid #c6d9f7;
  color: #2c517a;
  border-radius: var(--bs-border-radius-sm);
  padding: 12px 16px;
  margin-top: 16px;
  font-size: .87rem;
}

/* ─── Aplicaciones (integraciones WooCommerce / PrestaShop) ─── */

.aplicaciones-banner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 28px;
  border-radius: var(--bs-border-radius-lg);
  border: 1px solid var(--border);
  background: linear-gradient(120deg, var(--aplicaciones-brand-soft, var(--brand-soft)) 0%, var(--bg-surface) 65%);
  margin-bottom: 20px;
}

.aplicaciones-banner__logo {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-surface);
  border-radius: 14px;
  border: 1px solid var(--border);
  padding: 10px;
  box-shadow: 0 2px 8px rgba(16, 24, 40, .06);
}

.aplicaciones-banner__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.aplicaciones-banner__text h1 {
  margin: 0 0 4px;
  font-size: 1.3rem;
}

.aplicaciones-banner__text p {
  margin: 0;
  color: var(--text-secondary);
  font-size: .88rem;
}

.aplicaciones-sitebar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 18px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--bs-border-radius);
  margin-bottom: 18px;
}

.aplicaciones-sitebar label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}

.aplicaciones-sitebar select {
  flex: 1;
  min-width: 220px;
  max-width: 360px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--bs-border-radius-sm);
  font-size: .87rem;
  background: var(--bg-page);
  color: var(--text);
}

.aplicaciones-sitebar__spacer { flex: 1; }

.aplicaciones-tabcontent {
  position: relative;
  min-height: 220px;
}

.aplicaciones-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px 20px;
  color: var(--text-secondary);
  font-size: .87rem;
}

.aplicaciones-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 50px 24px;
  text-align: center;
  color: var(--text-secondary);
  background: var(--bg-page);
  border: 1px dashed var(--border);
  border-radius: var(--bs-border-radius);
}

.aplicaciones-empty i { font-size: 2.2rem; color: var(--text-muted); }
.aplicaciones-empty p { margin: 0; max-width: 420px; font-size: .87rem; }

.aplicaciones-sitio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.aplicaciones-sitio-card {
  border: 1px solid var(--border);
  border-radius: var(--bs-border-radius);
  padding: 18px;
  background: var(--bg-surface);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.aplicaciones-sitio-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.aplicaciones-sitio-card__nombre {
  font-weight: 600;
  font-size: .95rem;
  color: var(--text);
}

.aplicaciones-sitio-card__url {
  font-size: .78rem;
  color: var(--text-secondary);
  word-break: break-all;
}

.aplicaciones-sitio-card__mensaje {
  font-size: .78rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.aplicaciones-sitio-card__acciones {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.aplicaciones-split {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 22px;
}

@media (max-width: 1100px) {
  .aplicaciones-split { grid-template-columns: 1fr; }
}

.aplicaciones-panel {
  border: 1px solid var(--border);
  border-radius: var(--bs-border-radius-lg);
  background: var(--bg-surface);
  display: flex;
  flex-direction: column;
  min-height: 460px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
  overflow: hidden;
}

.aplicaciones-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
}

.aplicaciones-panel__head h3 {
  margin: 0;
  font-size: .95rem;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.aplicaciones-panel__head input[type="text"] {
  width: 240px;
  max-width: 45%;
  padding: 8px 12px;
  font-size: .85rem;
  border: 1px solid var(--border);
  border-radius: var(--bs-border-radius-sm);
  background: var(--bg-surface);
  color: var(--text);
}

.aplicaciones-panel__body {
  flex: 1;
  overflow-y: auto;
  max-height: 640px;
}

/* ─── Tabla dentro de cada panel de traspaso (Productos/Clientes/Familias/Pedidos) — mismo
   lenguaje visual que .erp-datatable del resto de la app, pero autocontenida en un panel. ─── */
.aplicaciones-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}

.aplicaciones-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: linear-gradient(135deg, #101827 0%, var(--topbar-bg) 55%, var(--brand) 170%);
  box-shadow: inset 0 -3px 0 0 var(--brand-light);
  color: var(--topbar-text);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  text-align: left;
  padding: 12px 18px;
  white-space: nowrap;
}

.aplicaciones-table th.aplicaciones-col--num,
.aplicaciones-table td.aplicaciones-col--num { text-align: right; }

.aplicaciones-table th.aplicaciones-col--check,
.aplicaciones-table td.aplicaciones-col--check { width: 40px; text-align: center; }

.aplicaciones-table th.aplicaciones-col--icon,
.aplicaciones-table td.aplicaciones-col--icon { width: 36px; text-align: center; }

.aplicaciones-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background .12s;
}

.aplicaciones-table tbody tr:last-child { border-bottom: none; }
.aplicaciones-table tbody tr:hover { background: var(--bg-page); }
.aplicaciones-table tbody tr.is-selected { background: var(--brand-soft); }

.aplicaciones-table td {
  padding: 14px 18px;
  vertical-align: middle;
  color: var(--text);
}

.aplicaciones-table__nombre {
  font-weight: 600;
  color: var(--text);
}

.aplicaciones-table__meta {
  font-size: .78rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

.aplicaciones-table__enlazado {
  color: var(--success);
  font-size: 1.05rem;
}

.aplicaciones-panel__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  background: var(--bg-surface);
}

.aplicaciones-pager {
  display: flex;
  align-items: center;
  gap: 8px;
}

.aplicaciones-pager .erp-btn {
  padding: 6px 10px;
}

.aplicaciones-pager__info {
  font-size: .8rem;
  color: var(--text-secondary);
  white-space: nowrap;
  min-width: 90px;
  text-align: center;
}

.aplicaciones-panel__head-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.aplicaciones-panel__head-row input[type="date"] {
  padding: 8px 10px;
  font-size: .8rem;
  border: 1px solid var(--border);
  border-radius: var(--bs-border-radius-sm);
  background: var(--bg-surface);
  color: var(--text);
}

.aplicaciones-transfer {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: var(--brand);
  padding: 0 4px;
}

@media (max-width: 1100px) {
  .aplicaciones-transfer { transform: rotate(90deg); padding: 4px 0; }
}

.erp-info-banner i {
  font-size: 1.1rem;
  flex-shrink: 0;
}