/* =========================================================
   TSUNAMIGO
   DASHBOARD INSTITUCIONAL

   Archivo:
   assets/css/institucional/dashboard_institucional.css

   Estructura:
   - Header
   - Sidebar
   - Main
   - Selector Histórico / En vivo
   - Controles
   - Tarjetas resumen
   - Mapas
   - Participantes
========================================================= */


/* =========================================================
   01. VARIABLES
========================================================= */

:root {

  --institutional-bg:
    #eef3f7;

  --institutional-surface:
    #ffffff;

  --institutional-surface-soft:
    #f7fafc;

  --institutional-surface-blue:
    #edf8fc;

  --institutional-border:
    #d8e2e9;

  --institutional-border-soft:
    #e8eef2;

  --institutional-text:
    #0b1720;

  --institutional-text-secondary:
    #52636f;

  --institutional-text-muted:
    #7d8c96;

  --institutional-blue-dark:
    #06121f;

  --institutional-blue:
    #0875a8;

  --institutional-blue-medium:
    #0b95c8;

  --institutional-cyan:
    #22c5f6;

  --institutional-cyan-soft:
    #dff7ff;

  --institutional-green:
    #20a875;

  --institutional-green-soft:
    #e4f8f0;

  --institutional-red:
    #e64b57;

  --institutional-red-soft:
    #fff0f1;

  --institutional-orange:
    #ed9a28;

  --institutional-orange-soft:
    #fff6e9;

  --institutional-shadow:
    0 10px 30px rgba(5, 25, 40, 0.08);

  --institutional-shadow-soft:
    0 4px 16px rgba(5, 25, 40, 0.06);

  --institutional-radius:
    16px;

  --institutional-radius-small:
    10px;

  --institutional-header-height:
    78px;

  --institutional-sidebar-width:
    245px;

  --institutional-transition:
    180ms ease;
}


/* =========================================================
   02. RESET
========================================================= */

*,
*::before,
*::after {
  box-sizing:
    border-box;
}


html {
  scroll-behavior:
    smooth;
}


html,
body {
  margin:
    0;

  padding:
    0;

  min-height:
    100%;

  background:
    var(--institutional-bg);

  color:
    var(--institutional-text);

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  -webkit-font-smoothing:
    antialiased;
}


body {
  min-width:
    320px;
}


button,
input,
select,
textarea {
  font:
    inherit;
}


button {
  cursor:
    pointer;
}


img {
  display:
    block;

  max-width:
    100%;
}


button,
a,
input,
select {
  outline:
    none;
}


button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline:
    3px solid rgba(34, 197, 246, 0.3);

  outline-offset:
    2px;
}


[hidden] {
  display:
    none !important;
}


/* =========================================================
   03. APLICACIÓN
========================================================= */

.institutional-app {
  min-height:
    100vh;

  background:
    var(--institutional-bg);
}


/* =========================================================
   04. HEADER
========================================================= */

.institutional-header {
  position:
    sticky;

  top:
    0;

  z-index:
    1000;

  width:
    100%;

  min-height:
    var(--institutional-header-height);

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    24px;

  padding:
    10px 22px;

  background:
    #ffffff;

  border-bottom:
    1px solid var(--institutional-border);

  box-shadow:
    0 3px 12px rgba(4, 20, 32, 0.05);
}


/* =========================================================
   HEADER MARCA
========================================================= */

.institutional-header__brand {
  display:
    flex;

  align-items:
    center;

  gap:
    18px;

  min-width:
    0;
}


.institutional-brand-link {
  display:
    flex;

  align-items:
    center;

  text-decoration:
    none;
}


.institutional-header__logo {
  width:
    168px;

  max-height:
    56px;

  object-fit:
    contain;

  object-position:
    left center;
}


.institutional-header__brand-text {
  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  gap:
    3px;

  min-width:
    0;
}


.institutional-header__eyebrow {
  color:
    var(--institutional-blue-dark);

  font-size:
    0.73rem;

  font-weight:
    800;

  letter-spacing:
    0.12em;

  line-height:
    1.2;
}


.institutional-header__subtitle {
  color:
    var(--institutional-text-secondary);

  font-size:
    0.84rem;

  line-height:
    1.3;
}


/* =========================================================
   HEADER CONTEXTO
========================================================= */

.institutional-header__context {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    14px;

  min-width:
    0;
}


.institutional-context-item {
  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  padding:
    8px 12px;

  background:
    var(--institutional-surface-soft);

  border:
    1px solid var(--institutional-border-soft);

  border-radius:
    10px;
}


.institutional-context-icon {
  width:
    27px;

  height:
    27px;

  object-fit:
    contain;

  flex:
    0 0 auto;
}


.institutional-context-item > div {
  display:
    flex;

  flex-direction:
    column;

  gap:
    1px;
}


.institutional-context-label {
  color:
    var(--institutional-text-muted);

  font-size:
    0.67rem;

  font-weight:
    700;

  text-transform:
    uppercase;

  letter-spacing:
    0.06em;
}


.institutional-context-value {
  max-width:
    180px;

  overflow:
    hidden;

  color:
    var(--institutional-text);

  font-size:
    0.81rem;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;
}


/* =========================================================
   ESTADO SISTEMA
========================================================= */

.institutional-system-status {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;
}


.institutional-status {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

  min-height:
    31px;

  padding:
    6px 9px;

  background:
    #f5f8fa;

  border:
    1px solid var(--institutional-border);

  border-radius:
    999px;

  color:
    var(--institutional-text-secondary);

  font-size:
    0.7rem;

  font-weight:
    700;
}


.institutional-status-dot {
  width:
    8px;

  height:
    8px;

  background:
    var(--institutional-green);

  border-radius:
    50%;

  box-shadow:
    0 0 0 3px rgba(32, 168, 117, 0.12);
}


.institutional-status--websocket .institutional-status-dot {
  background:
    var(--institutional-text-muted);

  box-shadow:
    none;
}


/* =========================================================
   HEADER USUARIO
========================================================= */

.institutional-header__user {
  display:
    flex;

  align-items:
    center;

  gap:
    9px;
}


.institutional-header__avatar {
  width:
    38px;

  height:
    38px;

  display:
    grid;

  place-items:
    center;

  background:
    var(--institutional-cyan-soft);

  border:
    1px solid rgba(34, 197, 246, 0.28);

  border-radius:
    50%;
}


.institutional-header__avatar img {
  width:
    24px;

  height:
    24px;

  object-fit:
    contain;
}


.institutional-header__user-info {
  display:
    flex;

  flex-direction:
    column;

  gap:
    1px;
}


.institutional-header__user-info strong {
  max-width:
    130px;

  overflow:
    hidden;

  color:
    var(--institutional-text);

  font-size:
    0.8rem;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;
}


.institutional-header__user-info span {
  color:
    var(--institutional-text-muted);

  font-size:
    0.7rem;
}


.institutional-header__logout {
  width:
    38px;

  height:
    38px;

  display:
    grid;

  place-items:
    center;

  padding:
    0;

  background:
    transparent;

  border:
    1px solid var(--institutional-border);

  border-radius:
    9px;

  transition:
    background var(--institutional-transition),
    border-color var(--institutional-transition);
}


.institutional-header__logout:hover {
  background:
    var(--institutional-red-soft);

  border-color:
    rgba(230, 75, 87, 0.25);
}


.institutional-header__logout img {
  width:
    21px;

  height:
    21px;

  object-fit:
    contain;
}


/* =========================================================
   05. LAYOUT
========================================================= */

.institutional-layout {
  display:
    grid;

  grid-template-columns:
    var(--institutional-sidebar-width) minmax(0, 1fr);

  min-height:
    calc(100vh - var(--institutional-header-height));
}


/* =========================================================
   06. SIDEBAR
========================================================= */

.institutional-sidebar {
  position:
    sticky;

  top:
    var(--institutional-header-height);

  align-self:
    start;

  height:
    calc(100vh - var(--institutional-header-height));

  display:
    flex;

  flex-direction:
    column;

  overflow-y:
    auto;

  padding:
    18px 12px;

  background:
    var(--institutional-blue-dark);

  color:
    #ffffff;
}


.institutional-sidebar__logo {
  display:
    flex;

  align-items:
    center;

  gap:
    11px;

  margin:
    2px 5px 18px;

  padding:
    12px 11px;

  border-bottom:
    1px solid rgba(255, 255, 255, 0.09);
}


.institutional-sidebar__logo img {
  width:
    42px;

  height:
    42px;

  object-fit:
    contain;
}


.institutional-sidebar__logo span {
  color:
    #ffffff;

  font-size:
    0.88rem;

  font-weight:
    700;
}


/* =========================================================
   NAVEGACIÓN
========================================================= */

.institutional-nav {
  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;
}


.institutional-nav__item {
  width:
    100%;

  min-height:
    43px;

  display:
    flex;

  align-items:
    center;

  gap:
    11px;

  padding:
    8px 11px;

  background:
    transparent;

  border:
    1px solid transparent;

  border-radius:
    9px;

  color:
    #c8d6df;

  font-size:
    0.82rem;

  font-weight:
    600;

  text-align:
    left;

  transition:
    background var(--institutional-transition),
    border-color var(--institutional-transition),
    color var(--institutional-transition),
    transform var(--institutional-transition);
}


.institutional-nav__item img {
  width:
    26px;

  height:
    26px;

  object-fit:
    contain;

  flex:
    0 0 auto;
}


.institutional-nav__item:hover {
  background:
    rgba(255, 255, 255, 0.07);

  color:
    #ffffff;

  transform:
    translateX(2px);
}


.institutional-nav__item--active {
  background:
    rgba(34, 197, 246, 0.14);

  border-color:
    rgba(34, 197, 246, 0.22);

  color:
    #ffffff;
}


.institutional-nav__item--active::after {
  content:
    "";

  width:
    3px;

  height:
    22px;

  margin-left:
    auto;

  background:
    var(--institutional-cyan);

  border-radius:
    10px;
}


/* =========================================================
   SIDEBAR FOOTER
========================================================= */

.institutional-sidebar__footer {
  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;

  margin-top:
    auto;

  padding-top:
    16px;

  border-top:
    1px solid rgba(255, 255, 255, 0.08);
}


.institutional-nav__item--secondary {
  min-height:
    40px;

  color:
    #9eb0bc;
}


/* =========================================================
   07. MAIN
========================================================= */

.institutional-main {
  min-width:
    0;

  padding:
    24px;

  overflow:
    hidden;
}


/* =========================================================
   CABECERA DE PÁGINA
========================================================= */

.institutional-page-header {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    24px;

  margin-bottom:
    18px;
}


.institutional-page-header > div:first-child {
  min-width:
    0;
}


.institutional-page-eyebrow {
  display:
    block;

  margin-bottom:
    5px;

  color:
    var(--institutional-blue-medium);

  font-size:
    0.68rem;

  font-weight:
    800;

  letter-spacing:
    0.14em;
}


.institutional-page-header h1 {
  margin:
    0;

  color:
    var(--institutional-text);

  font-size:
    clamp(1.6rem, 2.5vw, 2.15rem);

  font-weight:
    760;

  line-height:
    1.1;

  letter-spacing:
    -0.035em;
}


.institutional-page-header p {
  max-width:
    720px;

  margin:
    7px 0 0;

  color:
    var(--institutional-text-secondary);

  font-size:
    0.9rem;

  line-height:
    1.5;
}


/* =========================================================
   SELECTOR SIMULACRO
========================================================= */

.institutional-simulation-selector {
  min-width:
    245px;

  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;
}


.institutional-control-label {
  display:
    flex;

  align-items:
    center;

  gap:
    6px;

  color:
    var(--institutional-text-secondary);

  font-size:
    0.7rem;

  font-weight:
    700;
}


.institutional-control-label img {
  width:
    20px;

  height:
    20px;

  object-fit:
    contain;
}


.institutional-simulation-selector select {
  width:
    100%;

  height:
    42px;

  padding:
    0 36px 0 12px;

  background:
    #ffffff;

  border:
    1px solid var(--institutional-border);

  border-radius:
    9px;

  color:
    var(--institutional-text);

  font-size:
    0.82rem;
}


/* =========================================================
   08. SELECTOR HISTÓRICO / EN VIVO
========================================================= */

.institutional-mode-selector {
  display:
    grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    12px;

  margin-bottom:
    18px;
}


.institutional-mode-button {
  min-height:
    76px;

  display:
    flex;

  align-items:
    center;

  gap:
    13px;

  padding:
    12px 16px;

  background:
    #ffffff;

  border:
    1px solid var(--institutional-border);

  border-radius:
    13px;

  text-align:
    left;

  box-shadow:
    var(--institutional-shadow-soft);

  transition:
    transform var(--institutional-transition),
    border-color var(--institutional-transition),
    background var(--institutional-transition);
}


.institutional-mode-button:hover {
  transform:
    translateY(-1px);

  border-color:
    rgba(34, 197, 246, 0.42);
}


.institutional-mode-button img {
  width:
    45px;

  height:
    45px;

  object-fit:
    contain;

  flex:
    0 0 auto;
}


.institutional-mode-button > span {
  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


.institutional-mode-button strong {
  color:
    var(--institutional-text);

  font-size:
    0.95rem;
}


.institutional-mode-button small {
  color:
    var(--institutional-text-muted);

  font-size:
    0.73rem;
}


.institutional-mode-button--active {
  background:
    linear-gradient(
      135deg,
      #ffffff,
      var(--institutional-cyan-soft)
    );

  border-color:
    rgba(34, 197, 246, 0.55);

  box-shadow:
    0 8px 24px rgba(16, 152, 201, 0.10);
}


.institutional-mode-button--active::after {
  content:
    "";

  width:
    9px;

  height:
    9px;

  margin-left:
    auto;

  background:
    var(--institutional-cyan);

  border-radius:
    50%;

  box-shadow:
    0 0 0 4px rgba(34, 197, 246, 0.13);
}


/* =========================================================
   09. PANELES
========================================================= */

.institutional-mode-panel {
  min-width:
    0;
}


.institutional-mode-panel--active {
  display:
    block;
}


/* =========================================================
   10. TOOLBAR HISTÓRICO
========================================================= */

.institutional-toolbar {
  display:
    flex;

  align-items:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    10px;

  margin-bottom:
    16px;

  padding:
    12px;

  background:
    #ffffff;

  border:
    1px solid var(--institutional-border);

  border-radius:
    12px;

  box-shadow:
    var(--institutional-shadow-soft);
}


.institutional-search {
  flex:
    1 1 300px;

  min-width:
    220px;

  height:
    40px;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  padding:
    0 11px;

  background:
    var(--institutional-surface-soft);

  border:
    1px solid var(--institutional-border);

  border-radius:
    9px;
}


.institutional-search img {
  width:
    20px;

  height:
    20px;

  object-fit:
    contain;
}


.institutional-search input {
  width:
    100%;

  min-width:
    0;

  padding:
    0;

  background:
    transparent;

  border:
    0;

  color:
    var(--institutional-text);

  font-size:
    0.8rem;
}


.institutional-search input::placeholder {
  color:
    #8d9aa3;
}


.institutional-toolbar-control {
  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;
}


.institutional-toolbar-control > span {
  color:
    var(--institutional-text-secondary);

  font-size:
    0.66rem;

  font-weight:
    700;
}


.institutional-toolbar-control input {
  height:
    40px;

  padding:
    0 9px;

  background:
    #ffffff;

  border:
    1px solid var(--institutional-border);

  border-radius:
    9px;

  color:
    var(--institutional-text);

  font-size:
    0.76rem;
}


.institutional-action-button {
  min-height:
    40px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  padding:
    7px 12px;

  background:
    #ffffff;

  border:
    1px solid var(--institutional-border);

  border-radius:
    9px;

  color:
    var(--institutional-text);

  font-size:
    0.75rem;

  font-weight:
    700;

  transition:
    background var(--institutional-transition),
    border-color var(--institutional-transition);
}


.institutional-action-button:hover {
  background:
    var(--institutional-cyan-soft);

  border-color:
    rgba(34, 197, 246, 0.35);
}


.institutional-action-button img {
  width:
    20px;

  height:
    20px;

  object-fit:
    contain;
}


/* =========================================================
   11. TARJETAS RESUMEN
========================================================= */

.institutional-summary-grid,
.institutional-live-summary {
  display:
    grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap:
    11px;

  margin-bottom:
    16px;
}


.institutional-live-summary {
  grid-template-columns:
    repeat(5, minmax(0, 1fr));
}


.institutional-summary-card {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    11px;

  min-height:
    86px;

  padding:
    13px;

  background:
    #ffffff;

  border:
    1px solid var(--institutional-border);

  border-radius:
    12px;

  box-shadow:
    var(--institutional-shadow-soft);
}


.institutional-summary-card > img {
  width:
    42px;

  height:
    42px;

  object-fit:
    contain;

  flex:
    0 0 auto;
}


.institutional-summary-card > div {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;
}


.institutional-summary-card span {
  color:
    var(--institutional-text-secondary);

  font-size:
    0.7rem;

  font-weight:
    700;
}


.institutional-summary-card strong {
  margin-top:
    1px;

  color:
    var(--institutional-text);

  font-size:
    1.38rem;

  line-height:
    1.1;

  letter-spacing:
    -0.035em;
}


.institutional-summary-card small {
  margin-top:
    2px;

  color:
    var(--institutional-text-muted);

  font-size:
    0.65rem;
}
/* =========================================================
   12. TARJETAS GENERALES
========================================================= */

.institutional-map-card,
.institutional-participants-card,
.institutional-selected-participant,
.institutional-routes-history,
.institutional-route-detail,
.institutional-profile-card,
.institutional-live-participants,
.institutional-live-selected,
.institutional-live-profile-card {
  min-width:
    0;

  background:
    #ffffff;

  border:
    1px solid var(--institutional-border);

  border-radius:
    var(--institutional-radius);

  box-shadow:
    var(--institutional-shadow-soft);
}


/* =========================================================
   13. HEADER DE TARJETAS
========================================================= */

.institutional-card-header,
.institutional-section-header {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

  padding:
    13px 15px;

  border-bottom:
    1px solid var(--institutional-border-soft);
}


.institutional-card-header > div:first-child,
.institutional-section-header > div:first-child {
  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  min-width:
    0;
}


.institutional-card-header img,
.institutional-section-header img {
  width:
    31px;

  height:
    31px;

  object-fit:
    contain;

  flex:
    0 0 auto;
}


.institutional-card-header h2,
.institutional-section-header h2,
.institutional-card-header h3 {
  margin:
    1px 0 0;

  color:
    var(--institutional-text);

  line-height:
    1.2;
}


.institutional-card-header h2,
.institutional-section-header h2 {
  font-size:
    0.95rem;
}


.institutional-card-header h3 {
  font-size:
    0.87rem;
}


.institutional-card-eyebrow {
  display:
    block;

  color:
    var(--institutional-blue-medium);

  font-size:
    0.61rem;

  font-weight:
    800;

  letter-spacing:
    0.10em;

  line-height:
    1.2;
}


/* =========================================================
   14. MONITOR HISTÓRICO
========================================================= */

.institutional-monitor-grid {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1.75fr) minmax(280px, 0.75fr);

  gap:
    14px;

  margin-bottom:
    16px;
}


/* =========================================================
   15. MAPAS
========================================================= */

.institutional-map-card {
  position:
    relative;

  overflow:
    hidden;
}


.institutional-map {
  width:
    100%;

  height:
    510px;

  background:
    #dbe5eb;
}


.institutional-map--live {
  height:
    560px;
}


.institutional-map-status {
  display:
    inline-flex;

  align-items:
    center;

  min-height:
    28px;

  padding:
    5px 9px;

  background:
    var(--institutional-surface-soft);

  border:
    1px solid var(--institutional-border);

  border-radius:
    999px;

  color:
    var(--institutional-text-secondary);

  font-size:
    0.66rem;

  font-weight:
    700;
}


/* =========================================================
   ACCIONES MAPA
========================================================= */

.institutional-map-actions {
  position:
    absolute;

  left:
    12px;

  bottom:
    12px;

  z-index:
    500;

  display:
    flex;

  gap:
    7px;
}


.institutional-map-actions button {
  min-height:
    35px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

  padding:
    6px 9px;

  background:
    rgba(255, 255, 255, 0.96);

  border:
    1px solid rgba(200, 215, 224, 0.95);

  border-radius:
    8px;

  color:
    var(--institutional-text);

  font-size:
    0.67rem;

  font-weight:
    700;

  box-shadow:
    0 4px 12px rgba(8, 28, 42, 0.12);
}


.institutional-map-actions button:hover {
  background:
    #ffffff;

  border-color:
    var(--institutional-cyan);
}


.institutional-map-actions img {
  width:
    19px;

  height:
    19px;

  object-fit:
    contain;
}


//* =========================================================
   LEAFLET
========================================================= */

.leaflet-container {
  position:
    relative;

  width:
    100%;

  overflow:
    hidden;

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    sans-serif;
}


/* =========================================================
   CORRECCIÓN CRÍTICA DE TESELAS LEAFLET

   Evita que la regla global:

   img {
     max-width: 100%;
   }

   reduzca o deforme las imágenes de las teselas.
========================================================= */

.leaflet-container img,
.leaflet-container .leaflet-tile,
.leaflet-pane img,
.leaflet-tile-pane img {
  max-width:
    none !important;

  max-height:
    none !important;
}


/* =========================================================
   TESELAS
========================================================= */

.leaflet-tile {
  position:
    absolute;

  left:
    0;

  top:
    0;
}


/* =========================================================
   CONTROL DE CAPAS
========================================================= */

.leaflet-control-layers {
  border:
    1px solid var(--institutional-border) !important;

  border-radius:
    9px !important;

  background:
    #ffffff;

  box-shadow:
    0 5px 18px rgba(5, 23, 36, 0.12) !important;
}


.leaflet-control-layers-expanded {
  padding:
    9px 11px !important;

  color:
    var(--institutional-text);

  font-size:
    0.72rem;
}


/* =========================================================
   ZOOM
========================================================= */

.leaflet-bar {
  overflow:
    hidden;

  border:
    1px solid var(--institutional-border) !important;

  border-radius:
    8px !important;

  box-shadow:
    0 4px 12px rgba(5, 23, 36, 0.10) !important;
}


.leaflet-bar a {
  color:
    var(--institutional-text) !important;
}


/* =========================================================
   POPUPS
========================================================= */

.leaflet-popup-content-wrapper {
  border-radius:
    10px;
}


.leaflet-popup-content {
  margin:
    12px 14px;

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    sans-serif;
}
/* =========================================================
   16. PARTICIPANTES HISTÓRICOS
========================================================= */

.institutional-participants-card,
.institutional-live-participants {
  display:
    flex;

  flex-direction:
    column;

  min-height:
    0;

  overflow:
    hidden;
}


.institutional-participants-card {
  max-height:
    580px;
}


.institutional-participants-card .institutional-card-header strong {
  min-width:
    30px;

  text-align:
    right;

  color:
    var(--institutional-blue-medium);

  font-size:
    0.9rem;
}


/* =========================================================
   BÚSQUEDA PARTICIPANTE
========================================================= */

.institutional-participant-search {
  min-height:
    40px;

  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  margin:
    10px;

  padding:
    0 9px;

  background:
    var(--institutional-surface-soft);

  border:
    1px solid var(--institutional-border);

  border-radius:
    9px;
}


.institutional-participant-search img {
  width:
    19px;

  height:
    19px;

  object-fit:
    contain;
}


.institutional-participant-search input {
  width:
    100%;

  min-width:
    0;

  padding:
    0;

  background:
    transparent;

  border:
    0;

  color:
    var(--institutional-text);

  font-size:
    0.76rem;
}


/* =========================================================
   LISTAS
========================================================= */

.institutional-participants-list,
.institutional-live-participants-list {
  flex:
    1;

  min-height:
    0;

  overflow-y:
    auto;

  padding:
    0 9px 10px;
}


/* =========================================================
   PARTICIPANTE DINÁMICO
========================================================= */

.institutional-participant-item,
.institutional-live-participant-item {
  width:
    100%;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  margin-bottom:
    6px;

  padding:
    9px;

  background:
    #ffffff;

  border:
    1px solid var(--institutional-border-soft);

  border-radius:
    9px;

  text-align:
    left;

  transition:
    background var(--institutional-transition),
    border-color var(--institutional-transition);
}


.institutional-participant-item:hover,
.institutional-live-participant-item:hover {
  background:
    var(--institutional-surface-blue);

  border-color:
    rgba(34, 197, 246, 0.30);
}


.institutional-participant-item--active,
.institutional-live-participant-item--active {
  background:
    var(--institutional-cyan-soft);

  border-color:
    rgba(34, 197, 246, 0.55);
}


.institutional-participant-item img,
.institutional-live-participant-item img {
  width:
    31px;

  height:
    31px;

  object-fit:
    contain;

  flex:
    0 0 auto;
}


.institutional-participant-item__content {
  min-width:
    0;

  display:
    flex;

  flex:
    1;

  flex-direction:
    column;

  gap:
    2px;
}


.institutional-participant-item__content strong {
  overflow:
    hidden;

  color:
    var(--institutional-text);

  font-size:
    0.76rem;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;
}


.institutional-participant-item__content span {
  color:
    var(--institutional-text-muted);

  font-size:
    0.65rem;
}


/* =========================================================
   EMPTY STATE
========================================================= */

.institutional-empty-state {
  min-height:
    190px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    6px;

  padding:
    20px;

  text-align:
    center;
}


.institutional-empty-state img {
  width:
    52px;

  height:
    52px;

  object-fit:
    contain;

  opacity:
    0.78;
}


.institutional-empty-state strong {
  color:
    var(--institutional-text-secondary);

  font-size:
    0.8rem;
}


.institutional-empty-state span {
  max-width:
    230px;

  color:
    var(--institutional-text-muted);

  font-size:
    0.7rem;

  line-height:
    1.4;
}


/* =========================================================
   17. PARTICIPANTE SELECCIONADO
========================================================= */

.institutional-selected-participant {
  margin-bottom:
    16px;
}


.institutional-participant-code {
  padding:
    5px 9px;

  background:
    var(--institutional-cyan-soft);

  border:
    1px solid rgba(34, 197, 246, 0.25);

  border-radius:
    7px;

  color:
    var(--institutional-blue);

  font-size:
    0.7rem;

  font-weight:
    800;
}


.institutional-participant-info-grid {
  display:
    grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap:
    0;

  padding:
    0 14px 14px;
}


.institutional-participant-info-grid > div {
  padding:
    11px 12px;

  border-right:
    1px solid var(--institutional-border-soft);
}


.institutional-participant-info-grid > div:last-child {
  border-right:
    0;
}


.institutional-participant-info-grid span {
  display:
    block;

  margin-bottom:
    3px;

  color:
    var(--institutional-text-muted);

  font-size:
    0.65rem;
}


.institutional-participant-info-grid strong {
  color:
    var(--institutional-text);

  font-size:
    0.78rem;
}


/* =========================================================
   18. HISTORIAL
========================================================= */

.institutional-routes-history {
  margin-bottom:
    16px;

  overflow:
    hidden;
}


.institutional-table-wrapper {
  width:
    100%;

  overflow-x:
    auto;
}


.institutional-table {
  width:
    100%;

  border-collapse:
    collapse;

  font-size:
    0.73rem;
}


.institutional-table thead {
  background:
    #f4f8fa;
}


.institutional-table th {
  padding:
    10px 12px;

  color:
    var(--institutional-text-secondary);

  font-size:
    0.65rem;

  font-weight:
    800;

  text-align:
    left;

  text-transform:
    uppercase;

  letter-spacing:
    0.035em;

  white-space:
    nowrap;
}


.institutional-table td {
  padding:
    10px 12px;

  border-top:
    1px solid var(--institutional-border-soft);

  color:
    var(--institutional-text-secondary);

  vertical-align:
    middle;
}


.institutional-table tbody tr {
  transition:
    background var(--institutional-transition);
}


.institutional-table tbody tr:hover {
  background:
    var(--institutional-surface-soft);
}


.institutional-table-empty td {
  height:
    90px;

  color:
    var(--institutional-text-muted);

  text-align:
    center;
}


/* =========================================================
   19. DETALLE RECORRIDO
========================================================= */

.institutional-route-detail {
  margin-bottom:
    16px;

  overflow:
    hidden;
}


.institutional-route-status {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    28px;

  padding:
    5px 10px;

  background:
    var(--institutional-surface-soft);

  border:
    1px solid var(--institutional-border);

  border-radius:
    999px;

  color:
    var(--institutional-text-secondary);

  font-size:
    0.67rem;

  font-weight:
    800;
}


/* =========================================================
   MÉTRICAS RECORRIDO
========================================================= */

.institutional-route-metrics,
.institutional-live-metrics {
  display:
    grid;

  grid-template-columns:
    repeat(7, minmax(0, 1fr));

  gap:
    9px;

  padding:
    14px;
}


.institutional-live-metrics {
  grid-template-columns:
    repeat(5, minmax(0, 1fr));
}


.institutional-metric-card {
  min-width:
    0;

  min-height:
    78px;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  padding:
    10px;

  background:
    var(--institutional-surface-soft);

  border:
    1px solid var(--institutional-border-soft);

  border-radius:
    10px;
}


.institutional-metric-card img {
  width:
    34px;

  height:
    34px;

  object-fit:
    contain;

  flex:
    0 0 auto;
}


.institutional-metric-card > div {
  min-width:
    0;
}


.institutional-metric-card span {
  display:
    block;

  margin-bottom:
    2px;

  color:
    var(--institutional-text-muted);

  font-size:
    0.61rem;

  font-weight:
    700;
}


.institutional-metric-card strong {
  display:
    block;

  overflow:
    hidden;

  color:
    var(--institutional-text);

  font-size:
    0.8rem;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;
}


/* =========================================================
   20. PERFIL
========================================================= */

.institutional-profile-card,
.institutional-live-profile-card {
  margin:
    0 14px 14px;

  overflow:
    hidden;

  box-shadow:
    none;
}


.institutional-elevation-profile,
.institutional-live-profile {
  position:
    relative;

  min-height:
    190px;

  overflow:
    hidden;

  background:
    linear-gradient(
      to bottom,
      #fafdff,
      #eef6fa
    );
}


.institutional-profile-empty {
  position:
    absolute;

  inset:
    0;

  display:
    grid;

  place-items:
    center;

  padding:
    20px;

  color:
    var(--institutional-text-muted);

  font-size:
    0.72rem;

  text-align:
    center;
}


/* =========================================================
   21. MODO EN VIVO
========================================================= */

.institutional-live-header {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    18px;

  margin-bottom:
    14px;

  padding:
    14px 16px;

  background:
    linear-gradient(
      135deg,
      #ffffff,
      #edfaff
    );

  border:
    1px solid rgba(34, 197, 246, 0.30);

  border-radius:
    13px;

  box-shadow:
    var(--institutional-shadow-soft);
}


.institutional-live-title {
  display:
    flex;

  align-items:
    center;

  gap:
    12px;
}


.institutional-live-title > img {
  width:
    48px;

  height:
    48px;

  object-fit:
    contain;
}


.institutional-live-title h2 {
  margin:
    2px 0 0;

  color:
    var(--institutional-text);

  font-size:
    1rem;
}


.institutional-live-title p {
  margin:
    3px 0 0;

  color:
    var(--institutional-text-muted);

  font-size:
    0.72rem;
}


/* =========================================================
   WEBSOCKET
========================================================= */

.institutional-websocket-status {
  min-width:
    165px;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  padding:
    9px 11px;

  background:
    var(--institutional-green-soft);

  border:
    1px solid rgba(32, 168, 117, 0.24);

  border-radius:
    10px;
}


.institutional-websocket-status img {
  width:
    34px;

  height:
    34px;

  object-fit:
    contain;
}


.institutional-websocket-status > div {
  display:
    flex;

  flex-direction:
    column;

  gap:
    1px;
}


.institutional-websocket-status span {
  color:
    var(--institutional-text-muted);

  font-size:
    0.63rem;
}


.institutional-websocket-status strong {
  color:
    var(--institutional-green);

  font-size:
    0.76rem;
}


.institutional-websocket-status--disconnected {
  background:
    var(--institutional-red-soft);

  border-color:
    rgba(230, 75, 87, 0.22);
}


.institutional-websocket-status--disconnected strong {
  color:
    var(--institutional-red);
}


/* =========================================================
   22. MONITOREO EN VIVO
========================================================= */

.institutional-live-monitor-grid {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1.8fr) minmax(300px, 0.72fr);

  gap:
    14px;

  margin-bottom:
    16px;
}


.institutional-map-card--live {
  overflow:
    hidden;
}


.institutional-live-clock {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-end;

  gap:
    2px;
}


.institutional-live-clock span {
  color:
    var(--institutional-text-muted);

  font-size:
    0.61rem;
}


.institutional-live-clock strong {
  color:
    var(--institutional-text);

  font-size:
    0.74rem;
}


/* =========================================================
   FILTROS EN VIVO
========================================================= */

.institutional-live-filters {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    5px;

  padding:
    0 10px 10px;
}


.institutional-live-filter {
  min-height:
    28px;

  padding:
    4px 9px;

  background:
    #ffffff;

  border:
    1px solid var(--institutional-border);

  border-radius:
    999px;

  color:
    var(--institutional-text-secondary);

  font-size:
    0.63rem;

  font-weight:
    700;
}


.institutional-live-filter:hover {
  border-color:
    rgba(34, 197, 246, 0.45);

  color:
    var(--institutional-blue-medium);
}


.institutional-live-filter--active {
  background:
    var(--institutional-blue-dark);

  border-color:
    var(--institutional-blue-dark);

  color:
    #ffffff;
}


/* =========================================================
   23. PARTICIPANTE EN VIVO
========================================================= */

.institutional-live-selected {
  margin-bottom:
    16px;

  overflow:
    hidden;
}


.institutional-live-participant-status {
  min-height:
    28px;

  display:
    inline-flex;

  align-items:
    center;

  padding:
    5px 10px;

  background:
    var(--institutional-cyan-soft);

  border:
    1px solid rgba(34, 197, 246, 0.25);

  border-radius:
    999px;

  color:
    var(--institutional-blue);

  font-size:
    0.67rem;

  font-weight:
    800;
}


.institutional-live-participant-info {
  display:
    grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  padding:
    0 14px;

  border-bottom:
    1px solid var(--institutional-border-soft);
}


.institutional-live-participant-info > div {
  padding:
    11px;

  border-right:
    1px solid var(--institutional-border-soft);
}


.institutional-live-participant-info > div:last-child {
  border-right:
    0;
}


.institutional-live-participant-info span {
  display:
    block;

  margin-bottom:
    2px;

  color:
    var(--institutional-text-muted);

  font-size:
    0.62rem;
}


.institutional-live-participant-info strong {
  color:
    var(--institutional-text);

  font-size:
    0.77rem;
}
/* =========================================================
   24. ESTADOS PARTICIPANTES
========================================================= */

.institutional-state {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  min-height:
    24px;

  padding:
    3px 7px;

  border-radius:
    999px;

  font-size:
    0.6rem;

  font-weight:
    800;
}


.institutional-state--connected {
  background:
    var(--institutional-green-soft);

  color:
    var(--institutional-green);
}


.institutional-state--evacuating {
  background:
    var(--institutional-cyan-soft);

  color:
    var(--institutional-blue-medium);
}


.institutional-state--finished {
  background:
    #ecf8f2;

  color:
    #18865e;
}


.institutional-state--no-signal {
  background:
    var(--institutional-red-soft);

  color:
    var(--institutional-red);
}


/* =========================================================
   25. SCROLLBARS
========================================================= */

.institutional-sidebar,
.institutional-participants-list,
.institutional-live-participants-list,
.institutional-table-wrapper {
  scrollbar-width:
    thin;

  scrollbar-color:
    #a8bac6 transparent;
}


.institutional-sidebar::-webkit-scrollbar,
.institutional-participants-list::-webkit-scrollbar,
.institutional-live-participants-list::-webkit-scrollbar,
.institutional-table-wrapper::-webkit-scrollbar {
  width:
    7px;

  height:
    7px;
}


.institutional-sidebar::-webkit-scrollbar-thumb,
.institutional-participants-list::-webkit-scrollbar-thumb,
.institutional-live-participants-list::-webkit-scrollbar-thumb,
.institutional-table-wrapper::-webkit-scrollbar-thumb {
  background:
    #a8bac6;

  border-radius:
    20px;
}


/* =========================================================
   26. TOAST
========================================================= */

.institutional-toast {
  position:
    fixed;

  right:
    22px;

  bottom:
    22px;

  z-index:
    5000;

  max-width:
    360px;

  padding:
    11px 14px;

  background:
    var(--institutional-blue-dark);

  border:
    1px solid rgba(255, 255, 255, 0.12);

  border-radius:
    10px;

  color:
    #ffffff;

  font-size:
    0.76rem;

  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.18);
}


/* =========================================================
   27. LOGIN INSTITUCIONAL
========================================================= */

.institutional-access-gate {
  position:
    fixed;

  inset:
    0;

  z-index:
    99999;

  display:
    grid;

  place-items:
    center;

  padding:
    24px;
}


.institutional-access-gate[hidden] {
  display:
    none !important;
}


.institutional-access-backdrop {
  position:
    absolute;

  inset:
    0;

  background:
    rgba(4, 13, 22, 0.58);

  backdrop-filter:
    blur(3px);
}


.institutional-access-card {
  position:
    relative;

  z-index:
    2;

  width:
    min(430px, 100%);

  padding:
    27px;

  background:
    #ffffff;

  border:
    1px solid rgba(255, 255, 255, 0.50);

  border-radius:
    17px;

  box-shadow:
    0 22px 70px rgba(0, 0, 0, 0.26);
}


.institutional-access-logo {
  display:
    flex;

  justify-content:
    center;

  margin-bottom:
    17px;
}


.institutional-access-logo img {
  width:
    190px;

  max-height:
    70px;

  object-fit:
    contain;
}


.institutional-access-eyebrow {
  display:
    block;

  margin-bottom:
    5px;

  color:
    var(--institutional-blue-medium);

  font-size:
    0.66rem;

  font-weight:
    800;

  text-align:
    center;

  letter-spacing:
    0.13em;
}


.institutional-access-card h2 {
  margin:
    0;

  color:
    var(--institutional-text);

  font-size:
    1.45rem;

  text-align:
    center;

  letter-spacing:
    -0.03em;
}


.institutional-access-card > p {
  max-width:
    330px;

  margin:
    8px auto 20px;

  color:
    var(--institutional-text-secondary);

  font-size:
    0.78rem;

  line-height:
    1.5;

  text-align:
    center;
}


/* =========================================================
   FORMULARIO LOGIN
========================================================= */

.institutional-access-form {
  display:
    flex;

  flex-direction:
    column;

  gap:
    13px;
}


.institutional-access-field {
  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;
}


.institutional-access-field > span {
  color:
    var(--institutional-text-secondary);

  font-size:
    0.7rem;

  font-weight:
    700;
}


.institutional-access-input {
  min-height:
    45px;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  padding:
    0 10px;

  background:
    var(--institutional-surface-soft);

  border:
    1px solid var(--institutional-border);

  border-radius:
    9px;
}


.institutional-access-input:focus-within {
  border-color:
    var(--institutional-cyan);

  box-shadow:
    0 0 0 3px rgba(34, 197, 246, 0.10);
}


.institutional-access-input > img {
  width:
    22px;

  height:
    22px;

  object-fit:
    contain;
}


.institutional-access-input input {
  flex:
    1;

  min-width:
    0;

  height:
    42px;

  padding:
    0;

  background:
    transparent;

  border:
    0;

  color:
    var(--institutional-text);

  font-size:
    0.8rem;
}


.institutional-password-toggle {
  width:
    32px;

  height:
    32px;

  display:
    grid;

  place-items:
    center;

  padding:
    0;

  background:
    transparent;

  border:
    0;

  border-radius:
    7px;
}


.institutional-password-toggle:hover {
  background:
    #e9f1f5;
}


.institutional-password-toggle img {
  width:
    20px;

  height:
    20px;

  object-fit:
    contain;
}


.institutional-access-remember {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  color:
    var(--institutional-text-secondary);

  font-size:
    0.7rem;
}


.institutional-access-remember input {
  accent-color:
    var(--institutional-blue-medium);
}


.institutional-access-message {
  min-height:
    18px;

  color:
    var(--institutional-red);

  font-size:
    0.68rem;

  text-align:
    center;
}


.institutional-access-submit {
  min-height:
    46px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  padding:
    8px 14px;

  background:
    var(--institutional-blue-dark);

  border:
    1px solid var(--institutional-blue-dark);

  border-radius:
    9px;

  color:
    #ffffff;

  font-size:
    0.79rem;

  font-weight:
    800;

  transition:
    background var(--institutional-transition),
    transform var(--institutional-transition);
}


.institutional-access-submit:hover {
  background:
    #0a2236;

  transform:
    translateY(-1px);
}


.institutional-access-submit img {
  width:
    24px;

  height:
    24px;

  object-fit:
    contain;
}


/* =========================================================
   28. BREAKPOINT 1500
========================================================= */

@media (max-width: 1500px) {

  :root {
    --institutional-sidebar-width:
      225px;
  }


  .institutional-header__brand-text {
    display:
      none;
  }


  .institutional-summary-grid {
    grid-template-columns:
      repeat(4, minmax(0, 1fr));
  }


  .institutional-live-summary {
    grid-template-columns:
      repeat(5, minmax(0, 1fr));
  }


  .institutional-route-metrics {
    grid-template-columns:
      repeat(4, minmax(0, 1fr));
  }

}


/* =========================================================
   29. BREAKPOINT 1250
========================================================= */

@media (max-width: 1250px) {

  .institutional-context-item {
    display:
      none;
  }


  .institutional-header__user-info {
    display:
      none;
  }


  .institutional-monitor-grid,
  .institutional-live-monitor-grid {
    grid-template-columns:
      minmax(0, 1fr) 290px;
  }


  .institutional-live-summary {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }


  .institutional-participant-info-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .institutional-participant-info-grid > div:nth-child(2n) {
    border-right:
      0;
  }

}


/* =========================================================
   30. BREAKPOINT 1050
========================================================= */

@media (max-width: 1050px) {

  :root {
    --institutional-sidebar-width:
      76px;
  }


  .institutional-sidebar {
    padding:
      15px 8px;
  }


  .institutional-sidebar__logo {
    justify-content:
      center;

    margin-inline:
      0;

    padding-inline:
      0;
  }


  .institutional-sidebar__logo img {
    width:
      41px;

    height:
      41px;
  }


  .institutional-sidebar__logo span,
  .institutional-nav__item span {
    display:
      none;
  }


  .institutional-nav__item {
    justify-content:
      center;

    padding:
      8px;
  }


  .institutional-nav__item--active::after {
    position:
      absolute;

    right:
      4px;
  }


  .institutional-nav__item {
    position:
      relative;
  }


  .institutional-page-header {
    flex-direction:
      column;
  }


  .institutional-simulation-selector {
    width:
      100%;

    min-width:
      0;
  }


  .institutional-monitor-grid,
  .institutional-live-monitor-grid {
    grid-template-columns:
      1fr;
  }


  .institutional-participants-card {
    max-height:
      400px;
  }


  .institutional-map,
  .institutional-map--live {
    height:
      500px;
  }


  .institutional-summary-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .institutional-live-summary {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

}


/* =========================================================
   31. BREAKPOINT 760
========================================================= */

@media (max-width: 760px) {

  :root {
    --institutional-header-height:
      68px;
  }


  .institutional-header {
    min-height:
      68px;

    padding:
      8px 12px;
  }


  .institutional-header__logo {
    width:
      132px;
  }


  .institutional-system-status {
    display:
      none;
  }


  .institutional-header__avatar {
    display:
      none;
  }


  .institutional-layout {
    display:
      block;
  }


  .institutional-sidebar {
    position:
      fixed;

    left:
      0;

    right:
      0;

    bottom:
      0;

    top:
      auto;

    z-index:
      3000;

    width:
      100%;

    height:
      66px;

    display:
      block;

    padding:
      6px;

    overflow:
      hidden;

    background:
      var(--institutional-blue-dark);
  }


  .institutional-sidebar__logo,
  .institutional-sidebar__footer {
    display:
      none;
  }


  .institutional-nav {
    height:
      100%;

    display:
      grid;

    grid-template-columns:
      repeat(5, minmax(0, 1fr));

    gap:
      3px;
  }


  .institutional-nav__item {
    min-height:
      52px;

    justify-content:
      center;

    padding:
      5px;

    border-radius:
      8px;
  }


  .institutional-nav__item:nth-child(n+6) {
    display:
      none;
  }


  .institutional-nav__item img {
    width:
      25px;

    height:
      25px;
  }


  .institutional-nav__item--active::after {
    top:
      2px;

    left:
      50%;

    right:
      auto;

    width:
      22px;

    height:
      3px;

    transform:
      translateX(-50%);
  }


  .institutional-main {
    padding:
      16px 12px 84px;
  }


  .institutional-page-header h1 {
    font-size:
      1.55rem;
  }


  .institutional-mode-selector {
    grid-template-columns:
      1fr;
  }


  .institutional-toolbar {
    align-items:
      stretch;
  }


  .institutional-search {
    flex-basis:
      100%;
  }


  .institutional-toolbar-control {
    flex:
      1 1 130px;
  }


  .institutional-action-button {
    flex:
      1 1 120px;
  }


  .institutional-summary-grid,
  .institutional-live-summary {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .institutional-map,
  .institutional-map--live {
    height:
      410px;
  }


  .institutional-participant-info-grid,
  .institutional-live-participant-info {
    grid-template-columns:
      1fr;
  }


  .institutional-participant-info-grid > div,
  .institutional-live-participant-info > div {
    border-right:
      0;

    border-bottom:
      1px solid var(--institutional-border-soft);
  }


  .institutional-route-metrics,
  .institutional-live-metrics {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .institutional-live-header {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .institutional-websocket-status {
    width:
      100%;
  }

}


/* =========================================================
   32. BREAKPOINT 500
========================================================= */

@media (max-width: 500px) {

  .institutional-header__logout {
    width:
      35px;

    height:
      35px;
  }


  .institutional-header__logo {
    width:
      118px;
  }


  .institutional-main {
    padding-inline:
      9px;
  }


  .institutional-page-header p {
    font-size:
      0.8rem;
  }


  .institutional-summary-grid,
  .institutional-live-summary {
    grid-template-columns:
      1fr;
  }


  .institutional-summary-card {
    min-height:
      76px;
  }


  .institutional-map,
  .institutional-map--live {
    height:
      360px;
  }


  .institutional-route-metrics,
  .institutional-live-metrics {
    grid-template-columns:
      1fr;
  }


  .institutional-mode-button {
    min-height:
      70px;

    padding:
      10px 12px;
  }


  .institutional-mode-button img {
    width:
      39px;

    height:
      39px;
  }


  .institutional-access-gate {
    padding:
      12px;
  }


  .institutional-access-card {
    padding:
      22px 17px;
  }


  .institutional-table {
    min-width:
      760px;
  }

}


/* =========================================================
   33. IMPRESIÓN
========================================================= */

@media print {

  .institutional-header,
  .institutional-sidebar,
  .institutional-mode-selector,
  .institutional-toolbar,
  .institutional-map-actions,
  .institutional-toast,
  .institutional-access-gate {
    display:
      none !important;
  }


  .institutional-layout {
    display:
      block;
  }


  .institutional-main {
    padding:
      0;
  }


  .institutional-map-card,
  .institutional-participants-card,
  .institutional-selected-participant,
  .institutional-routes-history,
  .institutional-route-detail {
    box-shadow:
      none;
  }

}