/* Diseño Lienzo (doc/DESIGN.md). Carga el último porque reemplaza el aspecto de Argon sin tocar su JavaScript. */

html, body { height: 100%; }
body, body.g-sidenav-show {
  margin: 0; background: var(--st-bg) !important; color: var(--st-fg);
  font-family: var(--st-fuente); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased;
}
.min-height-300, .fixed-plugin { display: none !important; }
h1, h2, h3, h4, h5, h6, p, label, span, a, td, th, li, small, b, strong, input, select, textarea, button { font-family: var(--st-fuente); }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--st-fg); letter-spacing: -.012em; text-wrap: balance; }
a { color: var(--st-primary); }
small, .text-muted, .text-secondary { color: var(--st-muted) !important; }
.text-dark, .text-body { color: var(--st-fg) !important; }
hr { border-color: var(--st-line); opacity: 1; background: var(--st-line); }
:focus-visible { outline: 2px solid var(--st-primary); outline-offset: 2px; }

/* Estructura: una columna sobre el fondo y un lienzo con scroll propio */
.lz-ventana { display: grid; grid-template-columns: 264px minmax(0, 1fr); height: 100dvh; }
.lz-columna {
  display: flex; flex-direction: column; min-height: 0; padding: 24px 16px 16px; overflow-y: auto;
  background: var(--st-bg); position: static; width: auto; max-width: none; box-shadow: none; transform: none; margin: 0; z-index: 1;
}
.lz-marca { display: block; padding: 0 12px; color: var(--st-fg); font-size: 17px; font-weight: 700; letter-spacing: -.012em; text-decoration: none; }
.lz-empresa { display: block; padding: 2px 12px 0; color: var(--st-muted); font-size: 13px; overflow-wrap: anywhere; }
.lz-columna ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.lz-columna > .lz-nav { margin-top: 28px; }
.lz-columna .nav-link {
  display: flex; align-items: center; gap: 10px; min-height: 38px; width: 100%; padding: 8px 12px; border-radius: var(--st-r-control);
  color: var(--st-fg); font-size: 15px; font-weight: 500; text-decoration: none; cursor: pointer; background: none; transition: background-color 120ms;
}
.lz-columna .nav-link:hover { background: var(--st-nav-hover); color: var(--st-fg); }
.lz-columna .nav-link.active { background: var(--st-nav-activo); color: var(--st-fg); font-weight: 600; }
.lz-columna .nav-link[data-bs-toggle="collapse"] { color: var(--st-muted); font-size: 14px; }
.lz-columna .nav-link[data-bs-toggle="collapse"]::after {
  content: ""; margin-left: auto; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform 120ms; font-family: inherit; background: none; position: static;
}
.lz-columna .nav-link[aria-expanded="true"]::after { transform: rotate(45deg); }
.lz-columna .collapse .nav-link, .lz-columna .collapsing .nav-link { padding-left: 24px; font-size: 14px; min-height: 36px; }
.lz-seccion-menu { margin: 28px 0 8px; padding: 0 12px; color: var(--st-muted); font-size: 13px; font-weight: 500; }
.lz-cuenta { color: var(--st-muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.lz-pie-columna { margin-top: auto; padding-top: 24px; display: grid; gap: 2px; }
.lz-usuario { padding: 0 12px 8px; font-size: 13px; color: var(--st-muted); overflow-wrap: anywhere; }
.lz-accion {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 6px 12px; border: 0; border-radius: var(--st-r-control);
  background: none; color: var(--st-fg); font-size: 14px; text-align: left; text-decoration: none; cursor: pointer; transition: background-color 120ms;
}
.lz-accion:hover { background: var(--st-nav-hover); color: var(--st-fg); }
.lz-accion i { width: 16px; text-align: center; color: var(--st-muted); }
.lz-version { padding: 8px 12px 0; font-size: 12px; color: var(--st-muted); }

.lz-lienzo {
  min-width: 0; min-height: 0; margin: 12px 12px 12px 0; display: flex; flex-direction: column;
  background: var(--st-surface); border-radius: var(--st-r-lienzo); box-shadow: var(--st-sombra); overflow: hidden;
}
.lz-rollo { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.lz-contenido { padding: 32px 40px 40px; }
.lz-movil, .lz-pestanas, .lz-velo { display: none; }

/* Encabezado de pantalla */
.lz-cabeza {
  position: sticky; top: 0; z-index: 20; margin: -32px -40px 24px; padding: 32px 40px 16px; background: var(--st-surface);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 24px; align-items: end; transition: padding 160ms;
}
.lz-titulo { grid-column: 1; margin: 0; font-size: 34px; line-height: 1.15; font-weight: 600; letter-spacing: -.02em; transition: font-size 160ms; }
.lz-meta { grid-column: 1; margin: 0; color: var(--st-muted); font-size: 15px; }
.lz-herramientas { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.lz-cabeza.compacta { padding-top: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--st-line); }
.lz-cabeza.compacta .lz-titulo { font-size: 20px; }
.lz-cabeza.compacta .lz-meta { display: none; }

/* Piezas de contenido */
.lz-seccion { margin: 0 0 12px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.lz-mosaico { background: var(--st-surface-2); border-radius: var(--st-r-mosaico); padding: 20px; min-width: 0; }
.lz-mosaicos { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.lz-lista { display: grid; }
.lz-fila { display: grid; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px; border-top: 1px solid var(--st-line); border-radius: 0; min-width: 0; }
.lz-fila:first-child { border-top: 0; }
.lz-estado { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; white-space: nowrap; }
.lz-estado.ok { color: var(--st-ok); }
.lz-estado.neu { color: var(--st-muted); }
.lz-estado.bad { color: var(--st-bad); }
.lz-estado.warn { color: var(--st-warn); }
.lz-vacio { padding: 56px 24px; text-align: center; color: var(--st-muted); display: grid; gap: 12px; justify-items: center; }
.lz-vacio b { color: var(--st-fg); font-size: 17px; font-weight: 600; }
.st-num, .st-mono { font-variant-numeric: tabular-nums; }
.st-lbl { font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--st-muted); }

/* Bootstrap y Argon llevados a Lienzo */
.card, .st-card { background: var(--st-surface-2) !important; color: var(--st-fg); border: 0 !important; border-radius: var(--st-r-mosaico) !important; box-shadow: none !important; }
.card-header, .st-card-h { background: transparent !important; border: 0 !important; padding: 16px 20px 4px; }
.card-header.bg-primary, .card-header.bg-dark, .card-header[class*="bg-gradient"] { color: var(--st-fg) !important; }
.card-body, .st-card-b { padding: 16px 20px; }
.card-footer { background: transparent !important; border: 0 !important; }
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6, .card-header * { color: var(--st-fg) !important; }
.bg-primary, .bg-dark, [class*="bg-gradient-"] { background-image: none !important; }
.bg-primary { background-color: var(--st-primary) !important; color: var(--st-primary-ink) !important; }
.bg-dark { background-color: var(--st-surface-2) !important; color: var(--st-fg) !important; }
.bg-white, .bg-gray-100 { background-color: var(--st-surface) !important; }
.text-primary { color: var(--st-primary) !important; }
.text-success { color: var(--st-ok) !important; }
.text-danger { color: var(--st-bad) !important; }
.text-warning { color: var(--st-warn) !important; }
.text-info { color: var(--st-info) !important; }
.text-uppercase { text-transform: none !important; }

.btn, button.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; margin-bottom: 0;
  border: 0; border-radius: var(--st-r-control); background: var(--st-surface-2); background-image: none; color: var(--st-fg);
  font-size: 15px; font-weight: 500; text-transform: none; letter-spacing: 0; box-shadow: none; white-space: nowrap;
  transition: background-color 120ms, color 120ms, transform 120ms;
}
.btn:hover:not(:disabled):not(.disabled) { background: var(--st-hover); color: var(--st-fg); box-shadow: none; transform: none; }
.btn:active:not(:disabled) { transform: scale(.98); }
.btn:focus, .btn:active { box-shadow: none !important; }
.btn:focus-visible { outline: 2px solid var(--st-primary); outline-offset: 2px; }
.btn-sm { min-height: 36px; padding: 0 12px; font-size: 14px; }
.btn-lg { min-height: 44px; }
.btn-primary, .btn-success, .btn.bg-gradient-primary, .btn.bg-gradient-success { background: var(--st-primary) !important; color: var(--st-primary-ink) !important; font-weight: 600; }
.btn-primary:hover:not(:disabled):not(.disabled), .btn-success:hover:not(:disabled):not(.disabled) { background: var(--st-primary-hover) !important; color: var(--st-primary-ink) !important; }
.btn-danger, .btn.bg-gradient-danger { background: var(--st-surface-2) !important; color: var(--st-bad) !important; }
.btn-danger:hover:not(:disabled):not(.disabled) { background: var(--st-hover) !important; color: var(--st-bad) !important; }
.btn-secondary, .btn-info, .btn-warning, .btn-dark, .btn-light, .btn-outline-primary, .btn-outline-secondary, .btn-outline-danger, .btn-link { background: var(--st-surface-2) !important; color: var(--st-fg) !important; border: 0 !important; }
.btn:disabled, .btn.disabled { background: var(--st-nav-activo) !important; color: var(--st-faint) !important; opacity: 1; cursor: not-allowed; }

.form-control, .form-select, select.form-control, textarea.form-control {
  min-height: 40px; padding: 8px 12px; background-color: var(--st-surface); color: var(--st-fg); font-size: 15px;
  border: 1px solid var(--st-line-2); border-radius: var(--st-r-control) !important; box-shadow: none; transition: border-color 120ms, box-shadow 120ms;
}
.form-control:hover, .form-select:hover { border-color: var(--st-muted); }
.form-control:focus, .form-select:focus { background-color: var(--st-surface); color: var(--st-fg); border-color: var(--st-primary); box-shadow: 0 0 0 1px var(--st-primary); outline: 0; }
.form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: var(--st-surface-2); color: var(--st-muted); opacity: 1; }
.form-control::placeholder { color: var(--st-faint); opacity: 1; }
.form-select { background-image: var(--st-select-flecha, none); }
label, .form-label, .form-control-label { color: var(--st-fg); font-size: 14px; font-weight: 500; margin-bottom: 6px; margin-left: 0; }
.input-group { flex-wrap: nowrap; }
.input-group-text { min-height: 40px; background: var(--st-surface-2); color: var(--st-muted); border: 1px solid var(--st-line-2); border-radius: var(--st-r-control); box-shadow: none; }
.input-group > .form-control:not(:first-child), .input-group > .input-group-text:not(:first-child), .input-group > .btn:not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; margin-left: -1px; }
.input-group > .form-control:not(:last-child), .input-group > .input-group-text:not(:last-child), .input-group > .btn:not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.form-check-input { accent-color: var(--st-primary); border-color: var(--st-line-2); box-shadow: none; }
.form-check-input:checked { background-color: var(--st-primary); border-color: var(--st-primary); background-image: none; }
.form-switch .form-check-input { background-color: var(--st-nav-activo); }
.form-switch .form-check-input:checked { background-color: var(--st-primary); }
.form-switch .form-check-input::after { background: var(--st-surface); box-shadow: none; }

.table { color: var(--st-fg); --bs-table-color: var(--st-fg); --bs-table-bg: transparent; --bs-table-border-color: var(--st-line); margin-bottom: 0; }
.table thead th, .table > thead > tr > th {
  padding: 8px 12px; background: transparent; border-bottom: 1px solid var(--st-line); color: var(--st-muted) !important;
  font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; opacity: 1; white-space: nowrap;
}
.table tbody td, .table > tbody > tr > td { padding: 12px; background: transparent; border-bottom: 1px solid var(--st-line); color: var(--st-fg); font-size: 14px; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--st-surface-2); }
.table-responsive { overflow-x: auto; }

.modal-backdrop.show, .modal-backdrop { background: var(--st-velo); opacity: 1; }
.modal-content { background: var(--st-surface); color: var(--st-fg); border: 0; border-radius: var(--st-r-lienzo); box-shadow: 0 16px 48px rgb(0 0 0 / .18); }
.modal-header, .modal-footer { border: 0; padding: 24px 24px 8px; background: transparent !important; }
.modal-footer { padding: 8px 24px 24px; gap: 8px; }
.modal-header .modal-title, .modal-header h1, .modal-header h2, .modal-header h3, .modal-header h4, .modal-header h5, .modal-header h6 { color: var(--st-fg) !important; font-size: 20px; font-weight: 600; }
.modal-body { padding: 8px 24px 16px; }
.modal-header .btn-close, .modal-header .close { color: var(--st-fg); opacity: .7; }

.badge { background: var(--st-surface-2) !important; background-image: none !important; color: var(--st-fg) !important; border-radius: var(--st-r-corto); font-size: 13px; font-weight: 500; text-transform: none; padding: 2px 8px; }
.dropdown-menu { background: var(--st-surface); color: var(--st-fg); border: 1px solid var(--st-line); border-radius: var(--st-r-mosaico); box-shadow: var(--st-sombra); }
.dropdown-item { color: var(--st-fg); border-radius: var(--st-r-corto); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--st-nav-hover); color: var(--st-fg); }
.nav-tabs { border-bottom: 1px solid var(--st-line); }
.nav-tabs .nav-link { color: var(--st-muted); border: 0; border-radius: 0; background: none; font-weight: 500; }
.nav-tabs .nav-link.active { color: var(--st-fg); background: none; box-shadow: inset 0 -2px 0 var(--st-primary); }
.page-link { background: transparent; color: var(--st-fg); border: 0; border-radius: var(--st-r-corto) !important; }
.page-item.active .page-link { background: var(--st-primary); color: var(--st-primary-ink); }

.st-subtabs button { border-radius: var(--st-r-control); border: 0; background: var(--st-surface-2); }
.st-subtabs button[aria-selected="true"] { background: var(--st-nav-activo); border: 0; color: var(--st-fg); }
.st-pill { background: none !important; padding: 0; border-radius: 0; font-size: 14px; font-weight: 500; }
.st-tone-warn, .st-tone-bad, .st-tone-info { box-shadow: none; }

.swal2-popup { background: var(--st-surface) !important; color: var(--st-fg) !important; border-radius: var(--st-r-lienzo) !important; font-family: var(--st-fuente) !important; }
.swal2-title { color: var(--st-fg) !important; font-size: 20px !important; font-weight: 600 !important; }
.swal2-html-container { color: var(--st-muted) !important; font-size: 15px !important; }
.swal2-actions .swal2-confirm { background: var(--st-primary) !important; color: var(--st-primary-ink) !important; border-radius: var(--st-r-control) !important; box-shadow: none !important; font-weight: 600; }
.swal2-actions .swal2-cancel, .swal2-actions .swal2-deny { background: var(--st-surface-2) !important; color: var(--st-fg) !important; border-radius: var(--st-r-control) !important; box-shadow: none !important; }
.swal2-backdrop-show { background: var(--st-velo) !important; }
.LoadCapaBlack { background: var(--st-velo); }
.toast-success { background-color: var(--st-primary) !important; }

@media (max-width: 1023px) {
  .lz-contenido { padding: 24px; }
  .lz-cabeza { margin: -24px -24px 20px; padding: 24px 24px 12px; grid-template-columns: minmax(0, 1fr); }
  .lz-herramientas { grid-column: 1; grid-row: auto; justify-content: flex-start; margin-top: 8px; }
}
@media (max-width: 767px) {
  .lz-ventana { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
  .lz-movil { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 16px; }
  .lz-movil .lz-marca { padding: 0; }
  .lz-boton-menu { min-width: 44px; min-height: 44px; border: 0; border-radius: var(--st-r-control); background: none; color: var(--st-fg); font-size: 18px; }
  .lz-columna {
    position: fixed; inset: 0 auto 0 0; width: min(320px, 86vw); z-index: 1100; box-shadow: var(--st-sombra);
    transform: translateX(-102%); transition: transform 200ms cubic-bezier(.2, .8, .2, 1); visibility: hidden;
  }
  .lz-menu-abierto .lz-columna { transform: none; visibility: visible; }
  .lz-menu-abierto .lz-velo { display: block; position: fixed; inset: 0; z-index: 1050; background: var(--st-velo); }
  .lz-columna .nav-link,   .lz-lienzo { margin: 0 8px; }
  .lz-contenido { padding: 20px 16px 24px; }
  .lz-cabeza { margin: -20px -16px 16px; padding: 20px 16px 12px; }
  .lz-titulo { font-size: 26px; }
  .lz-pestanas { display: flex; gap: 2px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); }
  .lz-pestanas a, .lz-pestanas button {
    flex: 1 1 0; display: grid; place-items: center; min-height: 44px; padding: 0 4px; border: 0; border-radius: var(--st-r-control);
    background: none; color: var(--st-fg); font-size: 14px; font-weight: 500; text-decoration: none; text-align: center;
  }
  .lz-pestanas [aria-current] { background: var(--st-nav-activo); font-weight: 600; }
  .btn { min-height: 44px; }
  .form-control, .form-select { min-height: 44px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .lz-cabeza, .lz-titulo, .lz-columna, .btn, .nav-link { transition: none !important; }
  .btn:active { transform: none !important; }
}

/* Argon y EstilosServextex fuerzan colores en .dark-version: aquí se devuelven a las variables. */
body.dark-version { background: var(--st-bg) !important; color: var(--st-fg) !important; }
body.dark-version .lz-lienzo, body.dark-version .main-content, body.dark-version .lz-contenido { background: var(--st-surface) !important; color: var(--st-fg); }
body.dark-version .lz-columna { background: var(--st-bg) !important; }
body.dark-version .lz-cabeza { background: var(--st-surface) !important; }
body.dark-version .lz-columna .nav-link, body.dark-version .lz-columna .nav-link.active { color: var(--st-fg) !important; }
body.dark-version .lz-columna .nav-link[data-bs-toggle="collapse"] { color: var(--st-muted) !important; }
body.dark-version .lz-columna .nav-link.active { background: var(--st-nav-activo) !important; }
body.dark-version .lz-columna .nav-link:hover { background: var(--st-nav-hover) !important; }
body.dark-version .card, body.dark-version .st-card, body.dark-version .lz-mosaico { background: var(--st-surface-2) !important; color: var(--st-fg) !important; }
body.dark-version .form-control, body.dark-version .form-select, body.dark-version select, body.dark-version textarea.form-control {
  background-color: var(--st-surface) !important; color: var(--st-fg) !important; border-color: var(--st-line-2) !important;
}
body.dark-version .form-control:focus, body.dark-version .form-select:focus { border-color: var(--st-primary) !important; }
body.dark-version .form-control:disabled, body.dark-version .form-control[readonly] { background-color: var(--st-surface-2) !important; color: var(--st-muted) !important; }
body.dark-version .input-group-text { background: var(--st-surface-2) !important; color: var(--st-muted) !important; border-color: var(--st-line-2) !important; }
body.dark-version label, body.dark-version h1, body.dark-version h2, body.dark-version h3, body.dark-version h4, body.dark-version h5, body.dark-version h6 { color: var(--st-fg) !important; }
body.dark-version .modal-content { background: var(--st-surface) !important; color: var(--st-fg) !important; }
body.dark-version .table td, body.dark-version .table th { color: var(--st-fg) !important; border-color: var(--st-line) !important; }
body.dark-version .btn:not(.btn-primary):not(.btn-success):not(.btn-danger) { background: var(--st-surface-2) !important; color: var(--st-fg) !important; }
.lz-rollo, .lz-columna { scrollbar-width: thin; scrollbar-color: var(--st-line) transparent; }
.lz-lienzo, .main-content { transition: none !important; }
.lz-lienzo.main-content { padding: 0 !important; }
@media (max-width: 767px) {
  .btn, button.btn { min-height: 44px; }
}
body.dark-version .form-select:disabled { background-color: var(--st-surface-2) !important; color: var(--st-muted) !important; }
.dark-version { color-scheme: dark; }