/* ==========================================================================
   Tema corporativo Sierra Gorda SCM  -  capa de branding sobre el CSS legado
   Fuente: Manual de Branding Corporativo 2024 de Sierra Gorda SCM
   Se carga SIEMPRE al final del <head>. Solo presentacion, sin logica.
   Todos los colores viven en los tokens de :root; los componentes usan var().
   Para volver al look anterior basta quitar el <link> a este archivo.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&display=swap');

:root {
  /* marca oficial */
  --brand-primary: #FF3500;
  --brand-secondary: #004CAC;
  --brand-tertiary: #00A0AE;
  --brand-dark: #323E48;

  /* naranjos UI derivados (texto blanco con contraste) */
  --brand-primary-action: #D92D00;
  --brand-primary-hover: #C62800;
  --brand-primary-active: #B82500;
  --brand-primary-soft: #FFF1EC;
  --brand-primary-softer: #FFF7F4;
  --brand-primary-focus: rgba(255, 53, 0, .25);
  --brand-primary-ring: rgba(255, 53, 0, .14);
  --brand-primary-tint: rgba(255, 53, 0, .16);
  --brand-gradient: linear-gradient(135deg, #FF3500 0%, #D92D00 100%);
  --brand-gradient-hover: linear-gradient(135deg, #D92D00 0%, #B82500 100%);
  --shadow-brand: 0 8px 18px -8px rgba(217, 45, 0, .65);
  --overlay-hero: linear-gradient(135deg, rgba(255, 53, 0, .93) 0%, rgba(217, 45, 0, .80) 55%, rgba(50, 62, 72, .72) 100%);

  /* estados */
  --color-success: #00A22E;
  --color-success-text: #007A23;
  --color-success-bg: rgba(0, 162, 46, .10);
  --color-warning: #FFB800;
  --color-warning-text: #6B4D00;
  --color-warning-bg: rgba(255, 184, 0, .15);
  --color-danger: #EE0026;
  --color-danger-text: #B0001C;
  --color-danger-bg: rgba(238, 0, 38, .10);
  --color-info: #004CAC;
  --color-info-bg: rgba(0, 76, 172, .10);

  /* superficies */
  --bg-page: #F6F7F8;
  --bg-surface: #FFFFFF;
  --bg-muted: #F1F3F4;
  --bg-disabled: #E2E5E8;

  /* texto */
  --text-primary: #323E48;
  --text-secondary: #66727C;
  --text-disabled: #9AA3AA;
  --text-disabled-btn: #8C969E;
  --text-on-dark: #FFFFFF;
  --text-on-dark-muted: #C5CCD2;

  /* bordes */
  --border-default: #D9DEE3;
  --border-strong: #B9C0C6;

  /* navegacion lateral */
  --nav-bg: #323E48;
  --nav-hover: #3F4C57;
  --nav-icon: #9AA3AA;

  /* forma y sombra */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 3px rgba(50, 62, 72, .08);

  /* tipografia */
  --font-title: "Montserrat", Arial, sans-serif;
  --font-body: Calibri, Arial, sans-serif;
  --font-sm: 14px;
  --font-md: 16px;
}

/* ---------- base ---------------------------------------------------------- */
/* los elementos que SON un icono (class fa / glyphicon) conservan su fuente de iconos */
html, body, button:not(.fa):not(.glyphicon), input, select, textarea, .form-control, .btn:not(.fa):not(.glyphicon),
.dropdown-menu, .modal-content, .navbar, .swal2-popup {
  font-family: var(--font-body) !important;
}
h1, h2, h3, h4, h5, h6, .modal-title, .ibox-title h5, .o-box__title, .swal2-title {
  font-family: var(--font-title) !important;
  color: var(--text-primary);
  letter-spacing: 0;
}
body {
  background: var(--bg-page);
  color: var(--text-primary);
  font-size: var(--font-sm);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand-secondary); }
a:hover, a:focus { color: var(--brand-secondary); text-decoration: underline; }
.text-muted { color: var(--text-secondary) !important; }
.text-navy, .text-success { color: var(--brand-secondary) !important; }
hr { border-top-color: var(--border-default); opacity: 1; }
::selection { background: var(--brand-primary-tint); }
input[type=checkbox], input[type=radio] { accent-color: var(--brand-primary); }

* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 9px; border: 2px solid transparent; background-clip: content-box; }

/* ---------- botones (regla obligatoria: naranjo = accion) ----------------- */
body .btn {
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-weight: 600;
  padding: 8px 16px;
  box-shadow: none;
  background-image: none;
  transition: background-color .15s, border-color .15s, color .15s, transform .15s, box-shadow .15s;
}
body .btn:focus, body .btn:active:focus {
  outline: 3px solid var(--brand-primary-focus); outline-offset: 2px;
}
/* primario */
body .btn-primary {
  background: var(--brand-gradient); border-color: var(--brand-primary-action); color: var(--text-on-dark);
  box-shadow: var(--shadow-brand);
}
body .btn-primary:hover, body .btn-primary:focus { background: var(--brand-gradient-hover); border-color: var(--brand-primary-hover); color: var(--text-on-dark); transform: translateY(-1px); }
body .btn-primary:active, body .btn-primary.active { background: var(--brand-primary-active); border-color: var(--brand-primary-active); color: var(--text-on-dark); transform: none; box-shadow: none; }
/* secundario */
body .btn-default, body .btn-white, body .btn-outline.btn-primary, body .btn-primary.btn-outline {
  background: var(--bg-surface); box-shadow: none; transform: none; border-color: var(--brand-primary-action); color: var(--brand-primary-action);
}
body .btn-default:hover, body .btn-default:focus, body .btn-white:hover,
body .btn-outline.btn-primary:hover, body .btn-primary.btn-outline:hover {
  background: var(--brand-primary-soft); border-color: var(--brand-primary-action); color: var(--brand-primary-action);
}
/* estados funcionales */
body .btn-success { background: var(--color-success); border-color: var(--color-success); color: var(--text-on-dark); }
body .btn-info    { background: var(--brand-secondary); border-color: var(--brand-secondary); color: var(--text-on-dark); }
body .btn-warning { background: var(--color-warning); border-color: var(--color-warning); color: var(--text-primary); }
body .btn-danger  { background: var(--color-danger); border-color: var(--color-danger); color: var(--text-on-dark); }
body .btn-link { color: var(--brand-secondary); background: transparent; }
body .btn[disabled], body .btn.disabled, body fieldset[disabled] .btn {
  background: var(--bg-disabled) !important; border-color: var(--bg-disabled) !important;
  color: var(--text-disabled-btn) !important; cursor: not-allowed; opacity: 1;
}

/* ---------- formularios --------------------------------------------------- */
body .form-control, body select, body textarea, body input[type=text],
body input[type=password], body input[type=email], body input[type=number] {
  background-color: var(--bg-surface); color: var(--text-primary);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: none;
}
body .form-control { height: 36px; padding: 6px 12px; }
body textarea.form-control { height: auto; }
body .form-control:focus, body input:focus, body select:focus, body textarea:focus {
  border: 1px solid var(--brand-primary) !important; box-shadow: 0 0 0 3px var(--brand-primary-ring) !important; outline: 0;
}
body .has-error .form-control, body .form-control.error { border-color: var(--color-danger); }
body .has-error .help-block, body label.error { color: var(--color-danger); }
body .has-success .form-control { border-color: var(--color-success); }
body label { font-weight: 600; color: var(--text-primary); font-size: var(--font-sm); }
.input-group-addon { background: var(--bg-muted); border-color: var(--border-strong); color: var(--text-secondary); border-radius: var(--radius-md); }
.customSelectInner { border-radius: var(--radius-md) !important; }

/* ---------- cards / paneles ---------------------------------------------- */
.ibox, .panel, .well, .widget {
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
}
.ibox-title, .panel-heading {
  background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--border-default) !important;
  color: var(--text-primary); font-weight: 700;
}
.ibox-content { background: transparent; border: 0; }
.white-bg { background: var(--bg-surface) !important; }
.gray-bg  { background: var(--bg-page) !important; }

/* ---------- header (m01 / m02 / publico) ----------------------------------
   Altura 50px = geometria legada (el menu lateral y el layout dhtmlx parten en top:50).
   Los 3px de la linea naranja van incluidos (border-box). Todo se centra en 47px utiles. */
body .navbar-fixed-top, body .navbar {
  background: var(--bg-surface) !important; border: 0 !important;
  border-bottom: 3px solid var(--brand-primary) !important; box-shadow: none;
}
body .navbar-fixed-top { height: 50px; min-height: 50px; box-sizing: border-box; z-index: 1030; }
body .navbar a, body .navbar .welcome-message, body .navbar h3, body .navbar b { color: var(--text-primary); }
body .navbar-fixed-top .navbar-header { height: 47px; display: flex; align-items: center; padding-left: 12px; }
body .navbar-fixed-top .navbar-header button, #btn-menu {
  float: none; flex: 0 0 auto; width: 36px; height: 36px; margin: 0 14px 0 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-primary); background: var(--bg-surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); font-size: 20px; line-height: 1; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
#btn-menu .icon-lines { margin: 0; }
#btn-menu:hover, #btn-menu.active { background: var(--brand-primary-soft) !important; border-color: var(--brand-primary-action); color: var(--brand-primary-action); }
body .navbar-fixed-top .welcome-message { display: block; margin: 0; min-width: 0; line-height: 1; }
body .navbar-fixed-top .welcome-message h3 {
  margin: 0; font-size: 16px; font-weight: 700; line-height: 1.2; text-transform: none; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* zona derecha: logo y usuario centrados dentro de la barra */
body .navbar-fixed-top .navbar-right { display: flex; align-items: center; height: 47px; margin: 0; }
body .navbar-fixed-top .navbar-right > li > a { display: flex; align-items: center; height: 47px; padding-top: 0; padding-bottom: 0; }
body .navbar-fixed-top .navbar-right img { display: block; height: 32px !important; width: auto !important; margin: 9px 6px 0 !important; }
body .navbar-fixed-top .navbar-right .dropdown-toggle { height: 47px !important; }
body .navbar .nav > li > a:hover, body .navbar .nav > li > a:focus, body .navbar .nav .open > a, body .navbar .nav .open > a:hover {
  background: var(--bg-muted) !important; color: var(--text-primary); border-radius: var(--radius-md);
}
body .navbar .fa-user, body .navbar .count-info i { color: var(--text-secondary); }
/* selector de modulos: misma barra blanca */
.navbar-static-top.white-bg { height: auto; min-height: 56px; }
.navbar-top-links li a { min-height: 56px; }
.count-info .label { background: var(--brand-primary); border-radius: 99px; font-weight: 700; color: var(--text-on-dark); }

/* ---------- dropdowns ----------------------------------------------------- */
body .dropdown-menu {
  background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm); padding: 6px; width: auto; min-width: 240px; margin-top: 4px;
}
body .dropdown-menu > li > a { color: var(--text-primary); border-radius: var(--radius-sm); padding: 8px 12px; }
body .dropdown-menu > li > a:hover { background: var(--bg-muted); color: var(--text-primary); text-decoration: none; }
.dropdown-menu .divider { background: var(--border-default); }
.dropdown-messages-box { background: var(--bg-muted); border-radius: var(--radius-md); padding: 14px; }
.dropdown-menu .alert { border-radius: var(--radius-md); }

/* ---------- menu lateral (riel legado: iconos a la derecha, texto en hover) */
body .menuLateral {
  background: var(--nav-bg) !important; border-right: 0; box-shadow: none;
}
body .menuLateral .nav.navmenu-nav li { border-right: 0 !important; border-left: 0 !important; height: 50px; margin: 0; background: transparent !important; }
body .menuLateral .nav.navmenu-nav li a {
  color: var(--text-on-dark-muted); height: 50px; background: transparent; border-radius: 0; border: 0;
  border-left: 4px solid transparent; padding-top: 14px; font-weight: 600;
}
body .menuLateral .nav.navmenu-nav li a i { color: var(--nav-icon); font-size: 130%; }
body .menuLateral .nav.navmenu-nav li a span { font-size: var(--font-sm); padding-top: 0; color: var(--text-on-dark); }
body .menuLateral .nav.navmenu-nav li a:hover, body .menuLateral .nav.navmenu-nav li a:focus {
  background: var(--nav-hover) !important; color: var(--text-on-dark); text-decoration: none;
}
body .menuLateral .nav.navmenu-nav li.active a {
  background: var(--nav-hover) !important; border-left-color: var(--brand-primary); color: var(--text-on-dark);
}
body .menuLateral .nav.navmenu-nav li.active a i { color: var(--brand-primary); }

/* ---------- tabs ---------------------------------------------------------- */
body .nav-tabs { border-bottom: 1px solid var(--border-default); }
body .nav-tabs > li { background: transparent; border-top: 0; }
body .nav-tabs > li > a {
  background: transparent; color: var(--text-secondary); font-weight: 600; border: 0;
  border-bottom: 3px solid transparent; border-radius: 0; padding: 10px 16px;
}
body .nav-tabs > li > a:hover { background: var(--bg-muted); color: var(--text-primary); }
body .nav-tabs > li.active { border: 0; background: transparent; }
body .nav-tabs > li.active > a, body .nav-tabs > li.active > a:hover, body .nav-tabs > li.active > a:focus {
  background: transparent; color: var(--text-primary); border: 0; border-bottom: 3px solid var(--brand-primary);
}
body .contenTabs > div { background: var(--bg-page); }
body .sectionTab .nav > li a { color: var(--text-secondary); }
body .sectionTab .nav > li.active a { color: var(--text-primary); }

/* ---------- tablas -------------------------------------------------------- */
body .table { color: var(--text-primary); }
body .table > thead > tr > th, body .table-basic thead tr th {
  background: var(--bg-muted); color: var(--text-primary); font-weight: 600; text-transform: none;
  border-bottom: 1px solid var(--border-default);
}
body .table > tbody > tr > td, body .table-basic tbody tr td { border-top: 0; border-bottom: 1px solid var(--border-default); }
body .table-striped > tbody > tr:nth-of-type(odd), body .table-basic tbody tr:nth-of-type(odd),
body .table-basic tbody tr:nth-of-type(even) { background: var(--bg-surface); }
body .table-hover > tbody > tr:hover, body .table-basic tbody tr:hover { background: var(--brand-primary-softer); }
body .table > tbody > tr.selected, body .table > tbody > tr.selected td {
  background: var(--brand-primary-soft) !important;
}
body .table > tbody > tr.selected td:first-child { box-shadow: inset 3px 0 0 var(--brand-primary); }
.dataTables_wrapper .dataTables_filter input { border-radius: var(--radius-md); }
.dataTables_wrapper .dataTables_paginate .paginate_button { border-radius: var(--radius-md) !important; color: var(--text-primary) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--brand-gradient) !important; color: var(--text-on-dark) !important; border: 1px solid var(--brand-primary-action) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--brand-primary-soft) !important; color: var(--brand-primary-action) !important; border: 1px solid var(--brand-primary-action) !important; }
table.dataTable thead th, table.dataTable thead td { border-bottom: 1px solid var(--border-default) !important; }
table.dataTable thead th { background: var(--bg-muted); color: var(--text-primary); font-size: var(--font-sm); font-weight: 600; }

/* ---------- modales / alertas / badges ------------------------------------ */
body .modal-content {
  background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: 10px; box-shadow: var(--shadow-sm); overflow: hidden;
}
body .modal-content .modal-header { padding: 16px 20px; border-bottom: 1px solid var(--border-default); }
body .modal-content .modal-body { padding: 16px 20px; }
.modal-backdrop.in { opacity: .5; background: var(--brand-dark); }
body .alert { border-radius: var(--radius-md); border: 1px solid transparent; }
body .alert-info    { background: var(--color-info-bg);    color: var(--color-info); }
body .alert-success { background: var(--color-success-bg); color: var(--color-success-text); }
body .alert-warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
body .alert-danger  { background: var(--color-danger-bg);  color: var(--color-danger-text); }
.swal2-popup { border-radius: 10px !important; box-shadow: var(--shadow-sm) !important; }
.swal2-styled.swal2-confirm { background: var(--brand-gradient) !important; border-radius: var(--radius-md) !important; box-shadow: var(--shadow-brand) !important; }
.swal2-styled.swal2-cancel  { background: var(--bg-surface) !important; color: var(--brand-primary-action) !important; border: 1px solid var(--brand-primary-action) !important; border-radius: var(--radius-md) !important; }
.label-primary, .badge-primary { background: var(--brand-primary-soft); color: var(--brand-primary-active); }
.label-success, .badge-success { background: var(--color-success-bg); color: var(--color-success-text); }
.label-warning, .badge-warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
.label-danger,  .badge-danger  { background: var(--color-danger-bg);  color: var(--color-danger-text); }
.label-info,    .badge-info    { background: var(--color-info-bg);    color: var(--color-info); }
.progress { border-radius: 99px; background: var(--bg-disabled); box-shadow: none; }
.progress-bar { background: var(--brand-primary); }

/* ---------- dhtmlx -------------------------------------------------------- */
div.dhx_cell_layout, div.dhx_cell_cont_layout { background: transparent !important; }
.dhxwin_active, div.dhx_cell_win { border-radius: var(--radius-md) !important; box-shadow: var(--shadow-sm) !important; overflow: hidden; }
div.dhx_cell_hdr { background: var(--brand-dark) !important; color: var(--text-on-dark) !important; border: 0 !important; }
div.dhx_cell_hdr div.dhx_cell_hdr_text { color: var(--text-on-dark) !important; font-family: var(--font-title) !important; font-weight: 600; }
div.dhxtoolbar_material, div.dhx_toolbar_material, .dhx_toolbar_base_material { background: var(--bg-surface) !important; border-bottom: 1px solid var(--border-default) !important; }
.dhxform_obj_material, .dhxlist_obj_material, .dhx_grid, .objbox, .xhdr { font-family: var(--font-body) !important; }
table.hdr td, div.xhdr table.hdr td {
  background: var(--bg-muted) !important; color: var(--text-primary) !important; font-weight: 600; border-color: var(--border-default) !important;
}
div.gridbox, div.gridbox .objbox { border-color: var(--border-default) !important; background: var(--bg-surface) !important; }
div.gridbox table.obj tr.rowselected td, div.gridbox .rowselected td { background: var(--brand-primary-soft) !important; color: var(--text-primary) !important; }
div.gridbox table.obj tr td { border-color: var(--border-default) !important; }
.dhx_tabbar_row, .dhxtabbar_tabs { background: transparent !important; }
.dhxtabbar_tabs div.dhx_tab_element_active, div.dhx_tabbar_zone_material div.dhxtabbar_tab_actv { border-bottom: 3px solid var(--brand-primary) !important; color: var(--text-primary) !important; }

/* ---------- select2 / datepicker / graficos ------------------------------- */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple { border: 1px solid var(--border-strong); border-radius: var(--radius-md); min-height: 36px; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 34px; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--brand-primary-soft); color: var(--text-primary); }
.select2-container--default.select2-container--focus .select2-selection--single { border-color: var(--brand-primary); }
.select2-dropdown { border-color: var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.datepicker table tr td.active, .datepicker table tr td.active:hover { background: var(--brand-primary-action) !important; border-radius: var(--radius-sm); }
.daterangepicker td.active, .daterangepicker td.active:hover { background: var(--brand-primary-action); }
.highcharts-container { font-family: var(--font-body) !important; }

/* ---------- pantalla de carga inicial -------------------------------------
   El #loading legado (visible hasta body onLoad) pasa a cubrir toda la ventana,
   de modo que no se ve la pagina a medio construir mientras cargan CSS/JS. */
#loading {
  position: fixed !important; left: 0 !important; top: 0 !important; right: 0 !important; bottom: 0 !important;
  width: auto !important; height: auto !important; margin: 0 !important; z-index: 99999 !important;
  background: var(--bg-surface) url(../img/SG-Anaranjado.png) no-repeat center calc(50% - 84px) / 200px auto !important;
}
#loading > img { display: none !important; }
#loading::before {
  content: "Cargando plataforma\2026"; position: absolute; left: 0; right: 0; top: calc(50% + 52px); text-align: center;
  font-family: var(--font-body); font-size: var(--font-md); font-weight: 600; color: var(--text-secondary);
}
#loading::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px;
  border-radius: 50%; border: 4px solid var(--brand-primary-soft); border-top-color: var(--brand-primary);
  animation: sg-spin .8s linear infinite;
}
@keyframes sg-spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   LOGIN  (panel naranjo institucional + formulario sobre blanco)
   ========================================================================== */
body.sg-login { background: var(--bg-surface) !important; min-height: 100vh; overflow: auto; }
body.sg-login .contenedor { background: var(--bg-surface) !important; min-height: 100vh; text-align: left; min-width: 0; }
.sg-login__shell { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: 100vh; }
.sg-login__hero {
  background: var(--overlay-hero), var(--brand-primary); background-size: cover; background-position: center; color: var(--text-on-dark);
  padding: 48px 64px; display: flex; flex-direction: column; justify-content: space-between;
}
.sg-login__brand { display: block; width: 220px; height: auto; }
.sg-login__eyebrow { font-size: var(--font-sm); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .9; margin-bottom: 16px; }
.sg-login__title { font-family: var(--font-title) !important; font-size: clamp(32px, 4vw, 52px); line-height: 1.08; font-weight: 700; color: var(--text-on-dark); margin: 0 0 20px; }
.sg-login__lead { font-size: 18px; line-height: 1.5; max-width: 480px; margin: 0; color: var(--text-on-dark); }
.sg-login__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.sg-login__chips li { font-size: var(--font-sm); font-weight: 600; padding: 6px 12px; border: 1px solid rgba(255,255,255,.55); border-radius: var(--radius-md); }
.sg-login__chips li i { margin-right: 6px; }
.sg-login__panel { display: flex; align-items: center; justify-content: center; padding: 48px 32px; background: var(--bg-page); }
body.sg-login .box-login, body.sg-login #animation_gcl {
  position: relative; width: 100%; max-width: 420px; margin: 0; padding: 40px 36px 28px; float: none; min-width: 0; box-sizing: border-box;
  background: var(--bg-surface) !important; opacity: 1; color: var(--text-primary); text-align: left;
  border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
}
.sg-login__card-title { font-family: var(--font-title) !important; font-size: 26px; font-weight: 700; color: var(--text-primary); margin: 0 0 4px; }
.sg-login__card-sub { color: var(--text-secondary); font-size: var(--font-sm); margin: 0 0 24px; }
body.sg-login .box-login .campo { border-bottom: 0; margin-bottom: 16px; text-align: left; }
body.sg-login .box-login label { display: block; font-size: var(--font-sm); font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
body.sg-login .box-login input[type=email], body.sg-login .box-login input[type=password], body.sg-login .box-login input[type=text] {
  width: 100%; height: 44px; padding: 0 14px; font-size: var(--font-md); color: var(--text-primary);
  background: var(--bg-surface); border: 1px solid var(--border-strong) !important; border-radius: var(--radius-md);
}
body.sg-login .box-login input::placeholder { color: var(--text-disabled); }
body.sg-login .box-login #btnsbm { height: 46px; margin: 8px 0 14px !important; width: 100%; font-size: var(--font-md); font-weight: 700; color: var(--text-on-dark) !important; opacity: 1 !important; }
body.sg-login .box-login #recpwd { color: var(--brand-secondary); float: none !important; display: block; text-align: center; }
body.sg-login .box-login hr { border-top: 1px solid var(--border-default); margin: 22px 0 12px; }
body.sg-login .box-login small, body.sg-login .box-login small strong { color: var(--text-secondary); }

@media (max-width: 991px) {
  .sg-login__shell { grid-template-columns: 1fr; min-height: 0; }
  .sg-login__hero { padding: 28px 24px; gap: 20px; }
  .sg-login__brand { width: 160px; }
  .sg-login__lead, .sg-login__chips { display: none; }
  .sg-login__title { font-size: 30px; margin-bottom: 0; }
  .sg-login__panel { padding: 24px 16px 40px; }
}

/* ==========================================================================
   SELECTOR DE MODULOS (c.jsp)
   ========================================================================== */
body.u-bgimage, body#bodi { background: var(--bg-page) !important; color: var(--text-secondary); }
@media screen and (min-width: 993px) { body#bodi { overflow: auto; } }
.c-container {
  max-width: 1180px; margin: 0 auto; padding: 40px 24px 64px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px;
}
.c-container::before {
  content: "Selecciona un m\00f3 dulo"; grid-column: 1 / -1; text-align: left;
  font-family: var(--font-title); font-size: 28px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px;
}
body .o-box {
  width: auto; min-height: 220px; margin: 0; display: flex; flex-direction: column; position: relative;
  background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden;
  box-shadow: var(--shadow-sm); transition: border-color .2s, box-shadow .2s;
}
body .o-box:hover { border-color: var(--brand-primary); box-shadow: var(--shadow-sm); text-decoration: none; }
body .o-box__header { height: 88px; padding: 0; position: relative; background: var(--bg-muted); border-bottom: 1px solid var(--border-default); }
body .o-box .js-image { background-image: none !important; height: 100%; }
body .o-box .o-box__image { display: none; }
/* icono legado -> glifo Font Awesome en naranjo corporativo */
body .o-box__header::after {
  font-family: FontAwesome; content: "\f1b2"; position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: var(--brand-primary); background: var(--bg-surface); border: 1px solid var(--border-default);
}
body .o-box:has(img[src*="icon_gdc"])    .o-box__header::after { content: "\f0ae"; }
body .o-box:has(img[src*="icon_mda"])    .o-box__header::after { content: "\f0c2"; }
body .o-box:has(img[src*="icon_mdas"])   .o-box__header::after { content: "\f043"; }
body .o-box:has(img[src*="icon_elg"])    .o-box__header::after { content: "\f15c"; }
body .o-box:has(img[src*="icon_idr"])    .o-box__header::after { content: "\f071"; }
body .o-box:has(img[src*="icon_pronos"]) .o-box__header::after { content: "\f185"; }
body .o-box__body { text-align: left; padding: 18px 20px 22px; flex: 1; }
body .o-box__title { font-size: 15px; line-height: 1.3; font-weight: 700; color: var(--text-primary); text-transform: uppercase; margin-bottom: 8px; }
body .o-box__text { font-size: var(--font-sm); line-height: 1.5; color: var(--text-secondary); margin: 0; }
body .o-box__body::after { content: "Abrir \2192"; display: inline-block; margin-top: 14px; font-size: var(--font-sm); font-weight: 700; color: var(--brand-primary-action); }

/* ---------- paginas de error ---------------------------------------------- */
.middle-box { color: var(--text-primary); }
.middle-box h1 { font-family: var(--font-title); font-size: 96px; font-weight: 800; color: var(--brand-primary); }

@media (prefers-reduced-motion: reduce) { #loading::after { animation: none; } body .btn, body .o-box { transition: none; } }

/* ==========================================================================
   PANEL INFERIOR DE m01  (pestanas + tarjetas de condicion)
   Hoja flotante con margen lateral, pestanas segmentadas y 3 tarjetas.
   Los ids y la estructura se mantienen: solo cambia la presentacion.
   ========================================================================== */
body .contenTabs { padding: 0 12px; box-sizing: border-box; overflow-y: auto !important; overflow-x: hidden !important; }

body .contenTabs > div {
  background: var(--bg-page); border: 1px solid var(--border-default); border-bottom: 0;
  border-radius: 16px 16px 0 0; box-shadow: 0 -6px 20px -10px rgba(50, 62, 72, .35);
}
body .contenTabs .container-fluid { padding: 0; }

/* pestanas segmentadas */
body #PreviewEstacion {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 0 !important; padding: 10px 14px 0; border: 0;
}
body #PreviewEstacion > li { float: none; width: auto !important; padding: 0; margin: 0; border: 0; background: transparent; }
body #PreviewEstacion > li > a {
  float: none !important; display: inline-flex; align-items: center; gap: 8px; margin: 0;
  padding: 6px 12px; font-size: var(--font-sm); font-weight: 600; line-height: 1.2;
  color: var(--text-secondary); background: var(--bg-surface);
  border: 1px solid var(--border-default) !important; border-radius: 10px;
}
body #PreviewEstacion > li > a i { float: none !important; margin: 0; color: var(--text-disabled); font-size: 15px; }
body #PreviewEstacion > li > a:hover { background: var(--brand-primary-softer); color: var(--text-primary); }
body #PreviewEstacion > li.active > a, body #PreviewEstacion > li.active > a:hover, body #PreviewEstacion > li.active > a:focus {
  background: var(--brand-dark); color: var(--text-on-dark); border-color: var(--brand-dark) !important;
}
body #PreviewEstacion > li.active > a i { color: var(--brand-primary); }

body #myTabContent.tab-content { background: transparent !important; }
body #myTabContent .tab-pane > .row { margin: 0; }

/* tarjetas */
body #myTabContent .scrollContent {
  display: flex; align-items: stretch; gap: 12px; padding: 10px 14px 14px; height: auto; width: 100%; box-sizing: border-box;
}
body #myTabContent .scrollContent > [class*="col-"] {
  float: none; width: auto; min-width: 0; flex: 1 1 0; box-sizing: border-box;
  padding: 14px !important; background: var(--bg-surface);
  border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
body #tab_00 .scrollContent > [class*="col-"]:nth-child(1) { flex-grow: 1.5; }
body #tab_00 .scrollContent > [class*="col-"]:nth-child(2) { flex-grow: 1.85; }
body #tab_00 .scrollContent > [class*="col-"]:nth-child(3) { flex-grow: 1.15; }

/* cabecera de tarjeta */
body #myTabContent .row.separador { margin: 0 0 10px; border: 0; }
body #myTabContent .row.separador > [class*="col-"] { padding: 0; }
body #myTabContent .separador h3 {
  display: flex; align-items: baseline; gap: 8px; margin: 0; font-family: var(--font-title) !important;
  font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-primary);
}
body #myTabContent .separador h3::before {
  content: ""; align-self: center; width: 4px; height: 16px; border-radius: 2px; background: var(--brand-primary); flex: 0 0 auto;
}
body #myTabContent .separador h3 b { font-weight: 700; }
body #myTabContent .separador h3 small { font-family: var(--font-body); font-size: 12px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-secondary); }

/* tarjeta 1: condicion meteorologica (grilla dhtmlx) */
body #grd_tronadura0 { width: 100% !important; }
body #grd_tronadura0 .objbox, body #grd_tronadura0 .xhdr { font-size: 13px; }
body #grd_tronadura0 .objbox { overflow-x: hidden !important; }
body #grd_tronadura0 td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body #grd_tronadura0 span[style*="color"] {
  display: inline-block; position: relative; padding: 1px 8px; border-radius: 99px; font-weight: 700; font-size: 12px; white-space: nowrap; filter: brightness(.7);
}
body #grd_tronadura0 span[style*="color"]::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: .16; z-index: -1;
}

/* tarjeta 2: calidad de aire (toolbar + grafico + tabla) */
body #tab_00 .row:has(#div_fini) { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
body #tab_00 .row:has(#div_fini) > [class*="col-"] { float: none; width: auto; padding: 0; }
body #tab_00 .row:has(#div_fini) > [class*="col-"]:nth-child(1), body #tab_00 .row:has(#div_fini) > [class*="col-"]:nth-child(2) { flex: 1 1 0; min-width: 0; }
body #tab_00 .row:has(#div_fini) > [class*="col-"]:nth-child(3) { flex: 0 0 auto; display: flex; gap: 6px; }
body #tab_00 .row:has(#div_fini) .btn { margin: 0; height: 36px; width: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
body #tab_00 .row:has(#grafico) { display: flex; align-items: flex-start; gap: 12px; margin: 0; }
body #tab_00 .row:has(#grafico) > [class*="col-"] { float: none; padding: 0; width: auto; min-width: 0; }
body #tab_00 .row:has(#grafico) > [class*="col-"]:nth-child(1) { flex: 1.25 1 0; }
body #tab_00 .row:has(#grafico) > [class*="col-"]:nth-child(2) { flex: 1 1 0; }

body #div_tbl_R { font-size: 12px !important; }
body #tbl_R { width: 100%; border: 0; border-collapse: separate; border-spacing: 0; font-size: 11px; color: var(--text-primary); }
body #tbl_R th, body #tbl_R td { border: 0; border-bottom: 1px solid var(--border-default); padding: 5px 4px; text-align: center; font-weight: 600; background: transparent !important; }
body #tbl_R tr:first-child th { text-align: left; font-family: var(--font-title); font-size: 11px; letter-spacing: .03em; text-transform: uppercase; color: var(--text-secondary); border-bottom: 0; padding: 0 0 6px; }
body #tbl_R tr:nth-child(2) th { background: var(--bg-muted) !important; color: var(--text-secondary); font-size: 10px; text-transform: uppercase; }
body #tbl_R td { font-weight: 400; }
body #tbl_R td:first-child { text-align: left; font-weight: 700; white-space: nowrap; border-left: 4px solid var(--border-strong); padding-left: 8px; }
body #tbl_R td:first-child font { color: inherit !important; }
/* leyenda por componente: el color de cada serie se conserva (dato, no marca) */
body #tbl_R td[bgcolor="#ffa500"]:first-child { border-left-color: #ffa500; }
body #tbl_R td[bgcolor="#8a2be2"]:first-child { border-left-color: #8a2be2; }
body #tbl_R td[bgcolor="#89e200"]:first-child { border-left-color: #89e200; }
body #tbl_R td[bgcolor="#66ffff"]:first-child { border-left-color: #66ffff; }
body #tbl_R td[bgcolor="#808B96"]:first-child { border-left-color: #808B96; }
body #tbl_R td[bgcolor="#c0c0c0"]:first-child { border-left-color: var(--brand-dark); }
body #tbl_R tr:last-child td { font-weight: 700; background: var(--bg-muted) !important; border-bottom: 0; }

/* tarjeta 3: direccion de viento */
body #tab_00 .scrollContent > [class*="col-"]:nth-child(3) > .col-xs-12 {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 0;
}
body #tab_00 #cc_estacion { width: auto !important; flex: 1 1 140px; min-width: 120px; }
body #tab_00 .scrollContent > [class*="col-"]:nth-child(3) .graphicView { flex: 1 0 100%; }

/* graficos de las pestanas: ocupan el ancho de su tarjeta */
body #myTabContent [id^="graficoTab"] { width: 100% !important; }
body #myTabContent .k-grid { width: 100% !important; min-width: 0 !important; }


/* ==========================================================================
   RESPONSIVE
   >=1200 escritorio | 768-1199 tablet | <=767 movil
   ========================================================================== */

/* En movil la app envuelve las tarjetas con jScrollPane (.jspPane): mismo aspecto */
body #myTabContent .scrollContent .jspPane {
  display: flex; gap: 12px; padding: 10px 14px 14px; box-sizing: border-box;
}
body #myTabContent .scrollContent .jspPane > [class*="col-"] {
  float: none; width: auto; min-width: 0; flex: 1 1 0; box-sizing: border-box;
  padding: 14px !important; background: var(--bg-surface);
  border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
body #myTabContent .jspPane .scrollbar, body .jspVerticalBar { width: 8px; }
body .jspTrack { background: transparent; }
body .jspDrag { background: var(--border-strong); border-radius: 8px; }

/* ---- tablet: tarjetas en 2 columnas; "calidad de aire" ocupa todo el ancho ---- */
@media (min-width: 768px) and (max-width: 1199px) {
  body #myTabContent .scrollContent { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  body #myTabContent .scrollContent > [class*="col-"] { flex: none; }
  body #tab_00 .scrollContent > [class*="col-"]:nth-child(1) { grid-area: 1 / 1; }
  body #tab_00 .scrollContent > [class*="col-"]:nth-child(3) { grid-area: 1 / 2; }
  body #tab_00 .scrollContent > [class*="col-"]:nth-child(2) { grid-area: 2 / 1 / 3 / 3; }
  body #PreviewEstacion > li > a { padding: 6px 10px; }
}

/* ---- movil ---- */
@media (max-width: 767px) {
  /* header: titulo recortado + usuario siempre accesible (la barra legada lo ocultaba) */
  body .navbar-fixed-top .navbar-header { width: calc(100% - 64px); float: left; padding-left: 8px; }
  body .navbar-fixed-top .navbar-header.col-xs-8 { width: calc(100% - 64px); }
  body .navbar-fixed-top .navbar-collapse.collapse {
    display: flex !important; position: absolute; right: 4px; top: 0; width: auto !important;
    height: 47px; padding: 0; border: 0; box-shadow: none; overflow: visible; float: none;
  }
  body .navbar-fixed-top .navbar-right > li:first-child { display: none; }          /* logo: ya esta en la pantalla de carga */
  body .navbar-fixed-top .navbar-right .dropdown-menu { right: 0; left: auto; min-width: 230px; }
  body .navbar-fixed-top .welcome-message h3 { font-size: 14px; }

  /* menu lateral: sin hover en tactil -> etiquetas siempre visibles y panel mas ancho */
  body .menuLateral { width: 260px; }
  body .menuLateral .nav.navmenu-nav li a,
  body .menuLateral .nav.navmenu-nav li a:hover,
  body .menuLateral .nav.navmenu-nav li a:focus {
    display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 14px;
    padding: 0 18px !important; position: static;
  }
  body .menuLateral .nav.navmenu-nav li a i { float: none; width: 24px; text-align: center; }
  body .menuLateral .nav.navmenu-nav li a span,
  body .menuLateral .nav.navmenu-nav li a:hover span {
    display: block; opacity: 1; position: static; float: none; width: auto; text-align: left; font-weight: 600;
  }

  /* panel inferior: pestanas con scroll horizontal y tarjetas apiladas */
  body #PreviewEstacion { flex-wrap: nowrap; overflow-x: auto; padding: 10px 12px 2px; -webkit-overflow-scrolling: touch; }
  body #PreviewEstacion > li > a { white-space: nowrap; }
  body #myTabContent .scrollContent .jspPane { flex-direction: column; padding: 10px 8px 14px; }
  body #myTabContent .scrollContent .jspPane > [class*="col-"] { flex: 0 0 auto; width: 100% !important; }
  body #tab_00 .row:has(#div_fini) { flex-wrap: wrap; }
  body #tab_00 .row:has(#div_fini) > [class*="col-"]:nth-child(1),
  body #tab_00 .row:has(#div_fini) > [class*="col-"]:nth-child(2) { flex: 1 1 140px; }
  body #tab_00 .row:has(#grafico) { flex-direction: column; }
  body #tab_00 .row:has(#grafico) > [class*="col-"] { width: 100%; flex: none; }
  body #tab_00 #grafico, body #tab_00 #container { min-width: 0 !important; max-width: 100% !important; }
  body #tab_00 [id^="grafico_wr"] { min-width: 0 !important; max-width: 100% !important; }
  body #div_tbl_R { overflow-x: auto; }
  body #myTabContent .k-grid { overflow-x: auto; }
  body #tab_00 .scrollContent .jspPane > [class*="col-"]:nth-child(1) { overflow-x: auto; }
  body #grd_tronadura0 { min-width: 460px; }

  /* selector de modulos */
  .c-container { padding: 20px 14px 40px; gap: 14px; grid-template-columns: 1fr; }
  .c-container::before { font-size: 22px; }
  body .o-box { min-height: 0; }
  body .o-box__header { height: 72px; }
  .navbar-static-top.white-bg .col-lg-9, .navbar-static-top.white-bg .col-lg-3 { width: 50%; float: left; }
}

/* desplegable de usuario / notificaciones (header) */
body .navbar-fixed-top .dropdown-menu {
  background: var(--bg-surface) !important; width: 264px !important; max-width: calc(100vw - 16px); min-width: 0;
  padding: 10px; right: 0; left: auto; margin-top: 2px;
}
body .navbar-fixed-top .dropdown-menu > li { padding: 0; }
body .navbar-fixed-top .dropdown-menu .btn { width: 100%; margin: 6px 0 0; }
body .navbar-fixed-top .dropdown-menu .btn.btn-xs { padding: 7px 12px; font-size: var(--font-sm); }
body .navbar-fixed-top .dropdown-menu .text-center { text-align: center; }

/* ventanas internas dhtmlx (mantenedores, consultas, etc.): marco y titulo en gris corporativo */
div.dhxwin_hdr { background: var(--brand-dark) !important; border-color: var(--brand-dark) !important; }
div.dhxwin_brd { border-color: var(--brand-dark) !important; }
div.dhxwin_active, div.dhxwin_inactive { background: var(--brand-dark) !important; border-color: var(--brand-dark) !important; }
div.dhxwin_text, div.dhxwin_text_inside { font-family: var(--font-title) !important; font-weight: 600; color: var(--text-on-dark) !important; letter-spacing: 0; }

/* ==========================================================================
   UX: retroalimentacion y guia de uso
   Estilos de js/sg-ux.js y js/sg-ux-pluma.js (ver la documentacion al inicio
   de esos archivos). Solo presentacion; usan los tokens de :root.
   ========================================================================== */

/* ---- avisos (SG.toast) ---------------------------------------------------- */
.sg-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 100000; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 32px)); }
.sg-toast {
  padding: 10px 14px; border-radius: var(--radius-md); background: var(--brand-dark); color: var(--text-on-dark);
  font-size: var(--font-sm); line-height: 1.35; border-left: 4px solid var(--brand-secondary); box-shadow: var(--shadow-sm);
  animation: sg-toast-in .2s ease-out; transition: opacity .3s, transform .3s;
}
.sg-toast--ok    { border-left-color: var(--color-success); }
.sg-toast--warn  { border-left-color: var(--color-warning); }
.sg-toast--error { border-left-color: var(--color-danger); }
.sg-toast.is-leaving { opacity: 0; transform: translateY(6px); }
@keyframes sg-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- barra de progreso superior (SG.busyStart / consultas AJAX) ----------- */
.sg-progress { position: fixed; left: 0; top: 0; width: 100%; height: 3px; z-index: 100001; opacity: 0; pointer-events: none; transition: opacity .15s; overflow: hidden; }
.sg-progress.is-on { opacity: 1; }
.sg-progress::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%; background: var(--brand-primary);
  animation: sg-progress-run 1.1s ease-in-out infinite; /* transform: sigue animandose aunque una consulta sincrona bloquee la pagina */
}
@keyframes sg-progress-run { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
body.sg-busy, body.sg-busy * { cursor: progress !important; }

/* ---- estado vacio (SG.emptyState) ------------------------------------------ */
.sg-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 48px auto; padding: 24px; max-width: 460px; text-align: center; color: var(--text-secondary); }
.sg-empty i { font-size: 34px; color: var(--border-strong); margin-bottom: 4px; }
.sg-empty strong { font-family: var(--font-title); font-size: 15px; color: var(--text-primary); }
.sg-empty span { font-size: var(--font-sm); line-height: 1.45; }
body td.dataTables_empty { text-align: center; color: var(--text-secondary); padding: 28px 12px; font-style: normal; }

/* ---- indicador "Ultimo dato" (SG.lastData) ---------------------------------- */
body #PreviewEstacion > li.sg-lastdata {
  margin-left: auto; align-self: center; display: inline-flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0;
  padding: 5px 12px; border-radius: 99px; font-size: 13px; line-height: 1.2; white-space: nowrap;
  border: 1px solid var(--border-default); background: var(--bg-surface); color: var(--text-primary);
}
.sg-lastdata i { font-size: 9px; }
.sg-lastdata span { color: var(--text-secondary); }
.sg-lastdata--ok    { background: var(--color-success-bg); border-color: var(--color-success); }
.sg-lastdata--ok i  { color: var(--color-success); }
.sg-lastdata--warn  { background: var(--color-warning-bg); border-color: var(--color-warning); }
.sg-lastdata--warn i { color: var(--color-warning); }
.sg-lastdata--stale { background: var(--color-danger-bg); border-color: var(--color-danger); }
.sg-lastdata--stale i { color: var(--color-danger); }
@media (max-width: 767px) { body #PreviewEstacion > li.sg-lastdata { display: none; } }

/* ---- UX: pluma ------------------------------------------------------------- */
.sg-steps { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 10px; padding: 0; text-align: left; }
.sg-steps li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 99px; font-size: var(--font-sm); color: var(--text-secondary); background: var(--bg-muted); border: 1px solid var(--border-default); }
.sg-steps li b { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--border-strong); color: var(--text-on-dark); font-size: 12px; }
.sg-steps li.is-active { background: var(--brand-primary-soft); border-color: var(--brand-primary); color: var(--text-primary); font-weight: 700; }
.sg-steps li.is-active b { background: var(--brand-primary-action); }
.sg-steps li.is-done b { background: var(--color-success); }
.sg-steps li.is-done b::before { content: "\2713"; }
.sg-steps li.is-done b { font-size: 0; }
.sg-steps li.is-done b::before { font-size: 12px; }
.sg-map-instr { margin: 10px; padding: 8px 14px; border-radius: var(--radius-md); background: var(--brand-dark); color: var(--text-on-dark); font-size: var(--font-sm); font-weight: 600; box-shadow: var(--shadow-sm); }
.sg-legend { margin: 0 0 22px 10px; padding: 8px 12px; max-width: 280px; border-radius: var(--radius-md); background: rgba(255, 255, 255, .94); color: var(--text-primary); font-size: 12px; line-height: 1.4; box-shadow: var(--shadow-sm); text-align: left; }
.sg-legend b { display: block; margin-bottom: 4px; font-family: var(--font-title); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); }
.sg-legend div { display: flex; align-items: flex-start; gap: 8px; margin-top: 3px; }
.sg-legend__line { flex: 0 0 18px; height: 0; margin-top: 7px; border-top: 2px solid #ff0000; }
.sg-legend__dot { flex: 0 0 12px; height: 12px; margin: 2px 3px 0; border-radius: 50%; background: var(--brand-primary); opacity: .75; }
.sg-legend .fa { flex: 0 0 18px; margin-top: 2px; text-align: center; color: var(--brand-dark); }
.sg-legend__note { color: var(--text-secondary); }
.sg-help { margin-left: 6px; color: var(--brand-secondary); cursor: help; font-size: 15px; vertical-align: middle; }

/* ---------- pantalla: configurar umbrales de monitoreo (m01_confnivmonitoreo.jsp) ----------
   Barra de filtros con etiquetas, grilla con encabezado y columnas Mes/Nivel fijas,
   resaltado de fila/hora activa. Solo presentacion. */
.sg-umb { display: flex; flex-direction: column; gap: 10px; height: 100vh; padding: 12px 16px; box-sizing: border-box; }
.sg-umb__bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; }
.sg-umb__field { display: flex; flex-direction: column; gap: 4px; }
.sg-umb__field label { margin: 0; }
.sg-umb__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.sg-umb__actions .btn, .sg-umb__field--btn .btn { margin: 0; }
.sg-umb__info { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; color: var(--text-secondary); font-size: 13px; }
.sg-umb__info b { color: var(--text-primary); }
.sg-umb__hint .fa { color: var(--brand-secondary); margin-right: 4px; }
.sg-umb__legend { display: inline-flex; gap: 8px; }
.sg-lvl { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.sg-lvl::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.sg-lvl--1 { background: var(--color-success-bg); }
.sg-lvl--1::before { background: var(--color-success); }
.sg-lvl--2 { background: var(--color-warning-bg); }
.sg-lvl--2::before { background: var(--color-warning); }
.sg-umb__grid { flex: 1; min-height: 0; overflow: auto; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); }
.sg-umb__table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; color: var(--text-primary); }
.sg-umb__table th, .sg-umb__table td { padding: 3px; text-align: center; background: var(--bg-surface); border-bottom: 1px solid var(--border-default); }
.sg-umb__table tr.sg-umb--alt > * { background: var(--bg-page); }
.sg-umb__table tr.sg-umb__n1 > td { border-bottom-style: dashed; }
.sg-umb__table tr.sg-umb__n2 > td, .sg-umb__table th.sg-umb__mes { border-bottom-color: var(--border-strong); }
.sg-umb__table thead th { position: sticky; top: 0; z-index: 2; padding: 8px 3px; background: var(--bg-muted); font-weight: 600; border-bottom: 1px solid var(--border-strong); }
.sg-umb__table .sg-umb__mes { position: sticky; left: 0; z-index: 1; width: 104px; min-width: 104px; max-width: 104px; box-sizing: border-box; padding: 0 12px; text-align: left; font-weight: 600; }
.sg-umb__table .sg-umb__niv { position: sticky; left: 104px; z-index: 1; min-width: 88px; padding: 3px 8px; border-right: 1px solid var(--border-strong); }
.sg-umb__table thead .sg-umb__mes, .sg-umb__table thead .sg-umb__niv { z-index: 3; }
.sg-umb__table thead th.is-col { background: var(--brand-primary-soft); color: var(--brand-primary-action); }
.sg-umb__table tr.is-row > *, .sg-umb__table th.is-row { background: var(--brand-primary-softer); }
#tabla input.entero { width: 100%; min-width: 48px; height: 26px; padding: 0 6px; box-sizing: border-box; font-family: var(--font-body); font-size: 12px; color: var(--text-primary); text-align: right; font-variant-numeric: tabular-nums; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-sm); }
#tabla input.entero:hover { border-color: var(--border-strong); }
@media print {
  .sg-umb { height: auto; padding: 0; }
  .sg-umb__bar .btn, .sg-umb__hint { display: none; }
  .sg-umb__grid { overflow: visible; border: 0; }
  .sg-umb__table thead th, .sg-umb__table .sg-umb__mes, .sg-umb__table .sg-umb__niv { position: static; }
  #tabla input.entero { border: 0; padding: 0; }
}

/* ---------- ventana: niveles de riesgo / boletin GeoAire (components/modafor-wfm/modafor-wfm_G.jsp) ----------
   El boletin es una imagen del proveedor; aqui solo se enmarca: titulo, fuente, fecha,
   acciones y la imagen ajustada al ancho conservando su proporcion. */
body.sg-boletin-body { margin: 0; background: var(--bg-page); }
.sg-boletin { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; box-sizing: border-box; min-height: 100vh; }
.sg-boletin__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.sg-boletin__title { font-family: var(--font-title); font-weight: 700; font-size: 16px; color: var(--text-primary); }
.sg-boletin__meta { margin-top: 2px; font-size: 13px; color: var(--text-secondary); }
.sg-boletin__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sg-boletin__actions .btn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; cursor: pointer; font-size: 13px; padding: 6px 12px; }
.sg-boletin__card.container { width: auto; max-width: 1100px; margin: 0 auto; padding: 12px; box-sizing: border-box; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.sg-boletin__img { display: block; width: 100%; height: auto; margin: 0 auto; border-radius: var(--radius-sm); }