* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  background: #f4f6f8;
  color: #1f2937;
}

button {
  font-family: inherit;
}

#grsApp {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.topbar {
  height: 64px;
  background: #111827;
  color: white;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 22px;

  flex-shrink: 0;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.brand-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .5px;
}

.brand-subtitle {
  font-size: 13px;
  opacity: .65;
}

.top-status {
  display: flex;
  align-items: center;
  gap: 10px;
}

.status-badge,
.status-user {
  background: rgba(255,255,255,.08);

  border-radius: 20px;

  padding: 6px 12px;

  font-size: 12px;
}

.workspace {
  min-height: 0;
  flex: 1;

  display: flex;
}

.sidebar {
  width: 230px;
  background: #1f2937;
  color: white;

  overflow-y: auto;

  padding:
    14px
    10px
    30px;
}

.menu-section {
  margin:
    18px
    10px
    7px;

  font-size: 10px;
  font-weight: 700;

  letter-spacing: 1.2px;

  color: #9ca3af;
}

.menu-item {
  width: 100%;

  border: 0;

  border-radius: 6px;

  padding:
    10px
    12px;

  margin-bottom: 3px;

  background: transparent;

  color: #d1d5db;

  cursor: pointer;

  text-align: left;

  font-size: 14px;
}

.menu-item:hover {
  background: #374151;
  color: white;
}

.menu-item.active {
  background: #2563eb;
  color: white;
}

.main-content {
  flex: 1;

  min-width: 0;

  overflow-y: auto;

  padding: 24px;
}

.page-header {
  display: flex;
  justify-content: space-between;

  margin-bottom: 20px;
}

.page-header h1 {
  margin: 0 0 4px;

  font-size: 24px;
}

#pageSubtitle {
  color: #6b7280;

  font-size: 14px;
}

.module-content {
  min-height: 300px;
}

.grid {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(220px,1fr)
    );

  gap: 16px;
}

.card {
  background: white;

  border-radius: 9px;

  padding: 18px;

  box-shadow:
    0 1px 3px
    rgba(0,0,0,.08);
}

.card-title {
  font-size: 13px;

  color: #6b7280;

  margin-bottom: 10px;
}

.card-value {
  font-size: 27px;

  font-weight: 700;
}

.placeholder {
  background: white;

  border-radius: 9px;

  padding: 30px;

  box-shadow:
    0 1px 3px
    rgba(0,0,0,.08);
}

.placeholder h2 {
  margin-top: 0;
}

.placeholder p {
  color: #6b7280;
}

@media (
  max-width: 900px
) {

  .brand-subtitle {
    display: none;
  }

  .sidebar {
    width: 185px;
  }

}

@media (
  max-width: 650px
) {

  .sidebar {
    width: 60px;
  }

  .menu-section {
    display: none;
  }

  .menu-item {
    font-size: 0;

    height: 44px;
  }

  .main-content {
    padding: 14px;
  }

}


/* ==========================================
   Platform status
========================================== */

.status-ok {
  background: #dcfce7;
  color: #166534;
}

.status-warn {
  background: #fef3c7;
  color: #92400e;
}

.status-bad {
  background: #fee2e2;
  color: #991b1b;
}

.status-user {
  min-width: 130px;
}

.user-name {
  font-weight: 600;
  line-height: 1.1;
}

.user-role {
  margin-top: 2px;
  font-size: 10px;
  opacity: .7;
}

.logout-button {
  border: 1px solid
    rgba(255,255,255,.15);

  border-radius: 6px;

  background:
    rgba(255,255,255,.06);

  color: white;

  padding: 7px 12px;

  cursor: pointer;
}

.logout-button:hover {
  background:
    rgba(255,255,255,.12);
}

.card-value-text {
  font-size: 19px;
}


/* ==========================================
   GRS visual comfort
========================================== */

html,
body {
  background: #e8ecef;
  color: #25313c;
}

.main-content {
  background: #e8ecef;
}

.card,
.placeholder,
.section-block,
.loading-panel,
.error-panel {
  background: #f6f8f9;
}

.topbar {
  background: #18212b;
}

.sidebar {
  background: #25313c;
}

.menu-item:hover {
  background: #344352;
}

.menu-item.active {
  background: #355f88;
}


/* ==========================================
   Situation
========================================== */

.situation-grid {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(180px, 1fr)
    );

  gap: 14px;

  margin-bottom: 20px;
}

.metric-card {
  background: #f6f8f9;

  border-radius: 10px;

  padding: 17px 18px;

  box-shadow:
    0 1px 3px
    rgba(15,23,42,.07);

  border-left:
    4px solid #aab4bd;
}

.metric-card.good {
  border-left-color: #5f8b73;
}

.metric-card.warn {
  border-left-color: #b28b4b;
}

.metric-card.muted {
  border-left-color: #8d979f;
}

.metric-title {
  color: #66727d;

  font-size: 12px;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: .35px;
}

.metric-value {
  font-size: 28px;

  font-weight: 700;

  margin-top: 6px;

  color: #24313b;
}

.metric-subtitle {
  color: #7a858e;

  font-size: 12px;

  margin-top: 4px;
}

.section-block {
  border-radius: 10px;

  padding: 18px;

  box-shadow:
    0 1px 3px
    rgba(15,23,42,.07);
}

.section-header {
  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 14px;
}

.section-header h2 {
  margin: 0;

  font-size: 17px;
}

.section-header p {
  margin:
    3px 0 0;

  color: #74808a;

  font-size: 12px;
}

.secondary-button {
  border:
    1px solid #bcc5cc;

  background: #edf1f3;

  color: #34424e;

  border-radius: 6px;

  padding:
    7px 12px;

  cursor: pointer;
}

.secondary-button:hover {
  background: #e2e7ea;
}

.table-wrap {
  overflow-x: auto;
}

.platform-table {
  width: 100%;

  border-collapse: collapse;

  font-size: 13px;
}

.platform-table th {
  color: #68747e;

  text-align: left;

  font-size: 11px;

  text-transform: uppercase;

  letter-spacing: .4px;

  padding:
    9px 10px;

  border-bottom:
    1px solid #d7dde1;
}

.platform-table td {
  padding:
    10px;

  border-bottom:
    1px solid #e1e5e8;
}

.platform-table tbody tr:hover {
  background: #edf1f3;
}

.user-cell {
  font-weight: 600;
}

.table-badge {
  display: inline-block;

  min-width: 58px;

  text-align: center;

  padding:
    3px 7px;

  border-radius: 12px;

  background: #e5e9ec;

  color: #5f6b74;

  font-size: 11px;

  font-weight: 600;
}

.table-badge.good {
  background: #dce9e1;
  color: #3f6953;
}

.table-badge.warn {
  background: #eee4d2;
  color: #826a3e;
}

.table-badge.muted {
  background: #e3e6e8;
  color: #737d84;
}

.loading-panel,
.error-panel {
  border-radius: 9px;

  padding: 25px;
}

.loading-panel {
  color: #65727d;
}

.error-panel {
  color: #8c5353;
}

.language-select {
  border: 1px solid
    rgba(255,255,255,.15);

  background:
    rgba(255,255,255,.06);

  color: white;

  border-radius: 6px;

  padding:
    6px 8px;

  cursor: pointer;
}

.language-select option {
  color: #1f2937;
  background: white;
}


/* =====================================
   DATA TABLES
   ===================================== */

.module-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}

.data-table-wrapper {
  overflow:auto;
  border:1px solid #d7dde1;
  border-radius:8px;
  background:#f6f8f9;
}

.data-table {
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}

.data-table th {
  text-align:left;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#6b7780;
  background:#edf1f3;
  padding:10px 12px;
  border-bottom:1px solid #d7dde1;
}

.data-table td {
  padding:11px 12px;
  border-bottom:1px solid #e1e5e8;
  vertical-align:middle;
}

.data-table tr:last-child td {
  border-bottom:0;
}

.data-table tbody tr:hover {
  background:#eef3f6;
}

.table-secondary {
  margin-top:3px;
  font-size:11px;
  color:#7b8790;
}

.table-number {
  text-align:center;
}

.table-action {
  border:1px solid #bfc8ce;
  background:#fff;
  color:#355f88;
  padding:6px 10px;
  border-radius:6px;
  cursor:pointer;
}

.table-action:hover {
  background:#edf3f8;
}

.tenant-status {
  display:inline-block;
  padding:3px 7px;
  border-radius:12px;
  font-size:11px;
  text-transform:uppercase;
}

.tenant-status-active {
  background:#dfeee5;
  color:#27643c;
}

.tenant-status-inactive {
  background:#eceff1;
  color:#66727b;
}

.tenant-users-panel {
  margin-top:20px;
}

.tenant-users-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}

.table-actions {
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}

.table-action-primary {
  background:#355f88;
  border-color:#355f88;
  color:#fff;
}

.table-action-primary:hover {
  background:#2f557a;
}

.table-action-danger {
  color:#9a3d3d;
}

.table-action-success {
  color:#27643c;
}

.tenant-editor {
  margin-bottom:18px;
}

.tenant-editor-card {
  background:#f6f8f9;
  border:1px solid #d7dde1;
  border-radius:8px;
  padding:18px;
}

.tenant-editor-title {
  font-weight:700;
  margin-bottom:16px;
}

.tenant-form-grid {
  display:grid;
  grid-template-columns:
    repeat(4,minmax(160px,1fr));
  gap:14px;
}

.tenant-form-field label {
  display:block;
  font-size:11px;
  color:#66727b;
  margin-bottom:5px;
}

.tenant-form-field input,
.tenant-form-field select {
  width:100%;
  min-height:36px;
  box-sizing:border-box;
  border:1px solid #c6ced4;
  border-radius:6px;
  background:#fff;
  padding:7px 9px;
}

.tenant-editor-actions {
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:15px;
}

.tenant-form-status {
  min-height:18px;
  margin-top:10px;
  font-size:12px;
  color:#6b7780;
}

@media (max-width:1100px) {

  .tenant-form-grid {
    grid-template-columns:
      repeat(2,minmax(160px,1fr));
  }
}

.users-toolbar-left {
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

.platform-filter-input,
.platform-filter-select {
  min-height:34px;
  border:1px solid #c6ced4;
  background:#fff;
  border-radius:6px;
  padding:6px 9px;
  box-sizing:border-box;
}

.platform-filter-input {
  min-width:230px;
}

.user-detail-tabs {
  display:grid;
  grid-template-columns:
    repeat(3,1fr);
  gap:10px;
  margin-top:18px;
}

.user-detail-tab {
  padding:12px;
  border:1px solid #d7dde1;
  background:#fff;
  border-radius:7px;
}

.user-detail-tab strong {
  display:block;
  font-size:12px;
  margin-bottom:5px;
}

.user-detail-tab span {
  color:#68747d;
  font-size:12px;
}

@media (max-width:900px) {

  .user-detail-tabs {
    grid-template-columns:1fr;
  }

  .platform-filter-input {
    min-width:160px;
  }
}

.user-editor-v2 {
  margin-bottom:18px;
}

.user-editor-card {
  background:#f6f8f9;
  border:1px solid #d7dde1;
  border-radius:8px;
  padding:18px;
}

.user-editor-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.user-tabs {
  display:flex;
  gap:4px;
  border-bottom:1px solid #d5dce1;
  margin-bottom:18px;
  overflow-x:auto;
}

.user-tab-button {
  appearance:none;
  border:0;
  background:transparent;
  cursor:pointer;
  padding:9px 13px;
  font-weight:600;
  color:#65717a;
  border-bottom:3px solid transparent;
}

.user-tab-button.active {
  color:#355f88;
  border-bottom-color:#355f88;
}

.user-info-grid {
  display:grid;
  grid-template-columns:
    repeat(4,minmax(160px,1fr));
  gap:12px;
}

.user-info-card {
  border:1px solid #d7dde1;
  background:#fff;
  border-radius:7px;
  padding:13px;
}

.user-info-card strong {
  display:block;
  font-size:11px;
  text-transform:uppercase;
  color:#67737c;
  margin-bottom:7px;
}

.user-info-card span,
.user-info-card p {
  margin:0;
  font-size:13px;
}

.user-groups-list {
  display:flex;
  flex-direction:column;
  gap:9px;
}

.user-group-row {
  display:grid;
  grid-template-columns:
    minmax(190px,1fr) 3fr;
  gap:12px;
  border:1px solid #d7dde1;
  background:#fff;
  border-radius:7px;
  padding:12px;
}

.user-group-main {
  min-width:0;
}

.user-group-options {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  flex-wrap:wrap;
}

.user-group-options select {
  min-height:32px;
  border:1px solid #c6ced4;
  border-radius:5px;
  background:#fff;
}

.user-group-check {
  display:flex;
  align-items:center;
  gap:4px;
  font-size:12px;
}

@media (max-width:1000px) {

  .user-info-grid {
    grid-template-columns:
      repeat(2,minmax(150px,1fr));
  }

  .user-group-row {
    grid-template-columns:1fr;
  }

  .user-group-options {
    justify-content:flex-start;
  }
}

.device-imei-list {
  display:grid;
  grid-template-columns:
    repeat(2,minmax(220px,1fr));
  gap:12px;
}

.device-notes-field {
  margin-top:14px;
}

.device-notes-field textarea {
  width:100%;
  min-height:80px;
  border:1px solid #c6ced4;
  border-radius:6px;
  padding:8px 9px;
  box-sizing:border-box;
  resize:vertical;
}

@media (max-width:800px) {

  .device-imei-list {
    grid-template-columns:1fr;
  }
}

.device-instance-editor {
  margin:12px 0 18px;
}

.device-instance-card {
  border:1px solid #d7dde1;
  background:#fff;
  border-radius:7px;
  padding:14px;
}

/* ==========================================
   Devices operational
========================================== */

.device-operational-header {
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;

  margin:14px 0 16px;
  padding:12px 14px;

  border:1px solid #d7dde1;
  border-radius:8px;

  background:#fff;
}

.device-online-state {
  display:flex;
  align-items:center;
  gap:7px;

  min-width:90px;

  font-size:12px;
  font-weight:700;
}

.device-online-dot,
.device-list-online {
  display:inline-block;

  width:9px;
  height:9px;

  border-radius:50%;

  background:#9ca3af;
}

.device-online-state.online
.device-online-dot,
.device-list-online.online {
  background:#26915a;
}

.device-online-state.offline
.device-online-dot,
.device-list-online.offline {
  background:#9ca3af;
}

.device-capabilities {
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
}

.device-capability {
  display:inline-flex;
  align-items:center;
  gap:5px;

  padding:4px 8px;

  border-radius:12px;

  font-size:11px;
  font-weight:600;
}

.device-capability-ok {
  background:#e1f0e7;
  color:#27643c;
}

.device-capability-off {
  background:#eceff1;
  color:#75808a;
}

.device-capability-icon {
  font-weight:700;
}

.device-runtime-last-seen {
  margin-left:auto;

  color:#66727b;
  font-size:11px;
}

.device-list-name {
  display:flex;
  align-items:center;
  gap:8px;
}

.device-operational-grid {
  display:grid;

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

  gap:12px;

  margin-bottom:16px;
}

.device-operational-card {
  display:flex;
  flex-direction:column;
  gap:5px;

  padding:13px;

  border:1px solid #d7dde1;
  border-radius:8px;

  background:#fff;
}

.device-operational-label {
  color:#66727b;
  font-size:11px;
}

.device-location-layout {
  display:grid;

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

  gap:14px;
}

.device-location-panel {
  padding:15px;

  border:1px solid #d7dde1;
  border-radius:8px;

  background:#fff;
}

.device-location-panel h4 {
  margin:0 0 14px;
}

.device-detail-grid {
  display:grid;

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

  gap:14px;
}

.device-detail-grid > div {
  display:flex;
  flex-direction:column;
  gap:4px;
}

.device-detail-grid span {
  color:#66727b;
  font-size:11px;
}

.device-detail-grid strong {
  font-size:14px;
}

.device-coordinate-copy {
  margin-top:14px;

  padding:10px 12px;

  background:#eef1f3;
  border-radius:6px;
}

.device-location-empty {
  display:flex;
  flex-direction:column;
  gap:6px;

  padding:20px;

  border:1px dashed #c6ced4;
  border-radius:8px;

  background:#fff;
}

.device-location-empty span {
  color:#66727b;
  font-size:12px;
}

@media (max-width:900px) {

  .device-operational-grid {
    grid-template-columns:
      repeat(2,minmax(140px,1fr));
  }

  .device-location-layout {
    grid-template-columns:1fr;
  }

  .device-runtime-last-seen {
    margin-left:0;
  }
}

@media (max-width:600px) {

  .device-operational-grid {
    grid-template-columns:1fr;
  }

  .device-detail-grid {
    grid-template-columns:1fr;
  }
}


/* ==========================================
   Device Location Map
========================================== */

.device-location-map-card {
  margin-bottom:16px;

  border:1px solid #d7dde1;
  border-radius:8px;

  overflow:hidden;

  background:#fff;
}

.device-location-map-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;

  padding:12px 14px;

  border-bottom:1px solid #d7dde1;
}

.device-location-map-header > div:first-child {
  display:flex;
  flex-direction:column;
  gap:2px;
}

.device-location-map-header span {
  color:#66727b;
  font-size:11px;
}

.device-map-status {
  display:flex;
  align-items:center;
  gap:7px;

  font-size:11px;
  font-weight:700;
}

.device-location-map {
  width:100%;
  height:420px;

  background:#eef1f3;
}

.device-map-loading,
.device-map-empty {
  height:100%;

  display:flex;
  align-items:center;
  justify-content:center;

  color:#66727b;
  font-size:13px;
}

.device-map-info {
  min-width:170px;

  font-family:
    Arial,
    sans-serif;

  line-height:1.5;
}

.device-map-info strong {
  display:block;
  margin-bottom:3px;
}

@media (max-width:800px) {

  .device-location-map {
    height:320px;
  }

}


/* ==========================================
   Device location controls
========================================== */

.device-location-actions {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;

  margin-bottom:12px;
}

.device-location-auto {
  margin-left:auto;

  color:#66727b;
  font-size:11px;
}

@media (max-width:700px) {

  .device-location-auto {
    width:100%;
    margin-left:0;
  }

}



/* =====================================
   GROUP MEMBER EDITOR
   ===================================== */

#groupMemberEditor {
  margin-top: 18px;
}

#groupMemberEditor .tenant-editor-card {
  padding: 20px;
}

#groupMemberEditor .tenant-editor-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

#groupMemberEditor .tenant-editor-title strong {
  font-size: 18px;
}

.group-member-form-grid {
  display: grid;
  grid-template-columns:
    minmax(220px, 1.4fr)
    repeat(5, minmax(120px, 0.7fr));
  gap: 18px;
  align-items: start;
}

#groupMemberEditor .tenant-form-field {
  min-width: 0;
}

#groupMemberEditor .tenant-form-field > label:first-child {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
}

#groupMemberEditor .tenant-form-field select {
  width: 100%;
}

#groupMemberEditor .tenant-form-field label:has(input[type="checkbox"]) {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  margin: 0;
}

#groupMemberEditor input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0;
}

#groupMemberEditor .tenant-editor-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
}

#groupMemberEditor .tenant-form-status {
  min-height: 20px;
  margin-top: 12px;
}

@media (max-width: 1200px) {

  .group-member-form-grid {
    grid-template-columns:
      repeat(3, minmax(180px, 1fr));
  }
}

@media (max-width: 800px) {

  .group-member-form-grid {
    grid-template-columns: 1fr;
  }

  #groupMemberEditor .tenant-editor-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}


/* =====================================
   GROUP CAPABILITIES
   ===================================== */

.group-capabilities-grid {
  display: grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(260px, 1fr)
    );
  gap: 16px;
}

.group-capability-card {
  border: 1px solid #d8dee6;
  border-radius: 10px;
  padding: 16px;
  background: #fff;
}

.group-capability-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}

.group-capability-header strong {
  display: block;
  margin-bottom: 4px;
}

.group-capability-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.group-capability-toggle input {
  width: 18px;
  height: 18px;
  margin: 0;
}

.group-capability-config {
  width: 100%;
  margin-top: 14px;
}

@media (max-width: 700px) {

  .group-capability-header {
    flex-direction: column;
  }
}

/* =====================================
   GROUP RUNTIME UI
   ===================================== */

.group-runtime-layout {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.group-runtime-block {
  border: 1px solid #d8dee6;
  border-radius: 10px;
  padding: 16px;
  background: #fff;
}

.group-runtime-block-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 700;
}

.group-runtime-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(140px, 1fr));
  gap: 12px;
}

.group-runtime-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid #e1e6ea;
  border-radius: 8px;
  background: #f8fafb;
}

.group-runtime-item span {
  color: #66727b;
  font-size: 11px;
}

.group-runtime-item strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.group-runtime-mono {
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;
}

.group-runtime-state {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.group-runtime-state.active {
  background: #e1f0e7;
  color: #27643c;
}

.group-runtime-state.idle {
  background: #eceff1;
  color: #75808a;
}

.group-runtime-participants {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #e1e6ea;
}

.group-runtime-participants-title {
  margin-bottom: 9px;
  color: #66727b;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.group-runtime-participant {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 7px 0;
  border-bottom: 1px solid #eef1f3;
  font-size: 12px;
}

.group-runtime-participant:last-child {
  border-bottom: 0;
}

.group-runtime-participant span {
  overflow: hidden;
  color: #66727b;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 900px) {

  .group-runtime-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {

  .group-runtime-grid {
    grid-template-columns: 1fr;
  }
}

/* =====================================
   DISPATCHER PLATFORM V1
   ===================================== */

.dispatcher-root {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.dispatcher-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  padding: 14px 16px;

  border: 1px solid #d7dde1;
  border-radius: 9px;

  background: #f6f8f9;
}

.dispatcher-metrics {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(150px, 1fr)
    );

  gap: 14px;
}

.dispatcher-groups {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(330px, 1fr)
    );

  gap: 16px;
}

.dispatcher-group-card {
  border: 1px solid #d7dde1;
  border-radius: 10px;

  padding: 16px;

  background: #fff;

  box-shadow:
    0 1px 3px
    rgba(15,23,42,.05);
}

.dispatcher-group-card.runtime-active {
  border-left:
    4px solid #5f8b73;
}

.dispatcher-group-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;

  margin-bottom: 15px;
}

.dispatcher-group-name {
  font-size: 17px;
  font-weight: 700;
}

.dispatcher-group-code {
  margin-top: 3px;

  color: #74808a;
  font-size: 11px;
}

.dispatcher-group-header-status {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;

  justify-content: flex-end;
}

.dispatcher-priority {
  display: inline-flex;

  padding: 4px 8px;

  border-radius: 999px;

  background: #eceff1;
  color: #66727b;

  font-size: 10px;
  font-weight: 700;

  text-transform: uppercase;
}

.dispatcher-priority.high {
  background: #eee4d2;
  color: #826a3e;
}

.dispatcher-priority.critical {
  background: #f1dada;
  color: #8c3d3d;
}

.dispatcher-group-runtime {
  display: grid;

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

  gap: 9px;
}

.dispatcher-group-runtime > div {
  display: flex;
  flex-direction: column;
  gap: 4px;

  min-width: 0;

  padding: 10px;

  border-radius: 7px;

  background: #f4f6f7;
}

.dispatcher-group-runtime span {
  color: #74808a;
  font-size: 10px;

  text-transform: uppercase;
}

.dispatcher-group-runtime strong {
  overflow: hidden;

  font-size: 13px;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.dispatcher-active-detail {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;

  margin-top: 12px;
  padding-top: 11px;

  border-top: 1px solid #e1e5e8;

  color: #74808a;
  font-size: 11px;
}

.dispatcher-active-detail strong {
  color: #34424e;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;
}

.dispatcher-group-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;

  margin-top: 14px;
}

.dispatcher-group-actions button:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.dispatcher-empty {
  padding: 25px;

  border: 1px dashed #c6ced4;
  border-radius: 8px;

  color: #74808a;

  text-align: center;
}

@media (max-width: 700px) {

  .dispatcher-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .dispatcher-groups {
    grid-template-columns: 1fr;
  }

  .dispatcher-group-runtime {
    grid-template-columns:
      repeat(2, minmax(90px, 1fr));
  }
}

@media (max-width: 450px) {

  .dispatcher-group-runtime {
    grid-template-columns: 1fr;
  }
}

/* =====================================
   DISPATCHER PTT V1
   ===================================== */

.dispatcher-toolbar-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.dispatcher-media-panel {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(180px, 1fr))
    minmax(220px, 2fr);
  gap: 10px;

  padding: 12px 14px;

  border: 1px solid #d7dde1;
  border-radius: 9px;

  background: #fff;
}

.dispatcher-media-panel > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dispatcher-media-panel span {
  color: #74808a;
  font-size: 10px;
  text-transform: uppercase;
}

.dispatcher-media-status {
  font-size: 13px;
}

.dispatcher-media-status.connected {
  color: #27643c;
}

.dispatcher-media-status.transmitting {
  color: #9b3131;
}

.dispatcher-message {
  justify-content: center;

  color: #8a4b28;
  font-size: 12px;
  font-weight: 600;
}

.dispatcher-group-card.media-connected {
  box-shadow:
    0 0 0 2px
    rgba(70,110,90,.12);
}

.dispatcher-ptt-button {
  min-width: 145px;

  padding: 9px 14px;

  border: 0;
  border-radius: 7px;

  background: #34495e;
  color: #fff;

  cursor: pointer;

  font-size: 12px;
  font-weight: 700;

  touch-action: none;
  user-select: none;
}

.dispatcher-ptt-button:not(:disabled):active {
  transform: translateY(1px);
}

.dispatcher-ptt-button:disabled {
  cursor: not-allowed;
  opacity: .35;
}

.dispatcher-media-status.transmitting +
* {
  color: inherit;
}

#dispatcherRemoteAudio {
  display: none;
}

@media (max-width: 800px) {

  .dispatcher-media-panel {
    grid-template-columns: 1fr;
  }
}


/* ==========================================
   DISPATCHER PTT TOUCH
========================================== */

.dispatcher-ptt-button {
  min-height: 64px;
  min-width: 150px;

  padding: 14px 22px;

  font-size: 15px;
  font-weight: 700;

  cursor: pointer;

  touch-action: none;

  user-select: none;
  -webkit-user-select: none;

  -webkit-touch-callout: none;

  -webkit-tap-highlight-color:
    transparent;

  overscroll-behavior:
    contain;
}

.dispatcher-ptt-button.is-pressed,
.dispatcher-ptt-button:active {
  transform:
    scale(.98);
}

.dispatcher-ptt-button:disabled {
  cursor:
    not-allowed;
}


/*
 * Tablet:
 * superficie táctil amplia para PTT.
 */
@media (
  max-width: 1100px
) {

  .dispatcher-ptt-button {
    min-height: 82px;
    min-width: 190px;

    padding: 18px 26px;

    font-size: 17px;
  }
}


/*
 * Teléfono:
 * PTT prácticamente a ancho completo.
 */
@media (
  max-width: 650px
) {

  .dispatcher-ptt-button {
    width: 100%;
    min-width: 0;
    min-height: 92px;

    padding: 20px 18px;

    font-size: 18px;

    border-radius: 12px;
  }
}

/* ==========================================
   GRS_MOBILE_DRAWER_V1
========================================== */

.mobile-menu-toggle {
  display: none;
}

.mobile-menu-overlay {
  display: none;
}

@media (max-width: 650px) {

  html,
  body {
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
  }

  #grsApp {
    min-height: 100dvh;
  }

  .topbar {
    height: auto;
    min-height: 64px;

    padding:
      max(8px, env(safe-area-inset-top))
      12px
      8px;

    gap: 8px;
  }

  .mobile-menu-toggle {
    width: 44px;
    height: 44px;

    flex: 0 0 44px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 5px;

    border: 0;
    border-radius: 8px;

    background:
      rgba(255,255,255,.10);

    cursor: pointer;
  }

  .mobile-menu-toggle span {
    width: 21px;
    height: 2px;

    display: block;

    border-radius: 2px;

    background: #fff;
  }

  .brand {
    min-width: 0;
    margin-right: auto;
  }

  .brand-title {
    font-size: 19px;
  }

  .brand-subtitle {
    display: none;
  }

  .top-status {
    min-width: 0;
    gap: 5px;
  }

  .status-badge {
    display: none;
  }

  .status-user {
    min-width: 0;
    max-width: 110px;

    padding: 5px 8px;

    overflow: hidden;

    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .language-select {
    max-width: 58px;
  }

  .logout-button {
    padding: 7px 9px;
  }

  /*
   * Sustituye el antiguo sidebar de 60px
   * por un drawer real.
   */
  .sidebar {
    width: min(82vw, 290px);
    max-width: 290px;

    position: fixed;

    top: 0;
    left: 0;
    bottom: 0;

    z-index: 1001;

    transform:
      translateX(-105%);

    transition:
      transform .2s ease;

    overflow-y: auto;
    overscroll-behavior: contain;

    -webkit-overflow-scrolling: touch;

    padding:
      calc(16px + env(safe-area-inset-top))
      12px
      calc(24px + env(safe-area-inset-bottom));

    box-shadow:
      8px 0 24px
      rgba(0,0,0,.25);
  }

  /*
   * Anula expresamente las reglas antiguas:
   *
   * sidebar width:60px
   * menu-section display:none
   * menu-item font-size:0
   */
  .sidebar .menu-section {
    display: block;
  }

  .sidebar .menu-item {
    height: auto;
    min-height: 44px;

    font-size: 14px;

    padding:
      11px
      12px;

    text-align: left;
  }

  .mobile-menu-overlay {
    position: fixed;

    inset: 0;

    z-index: 1000;

    display: block;

    background:
      rgba(15,23,42,.48);

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition:
      opacity .2s ease,
      visibility .2s ease;
  }

  body.mobile-menu-open {
    overflow: hidden;
  }

  body.mobile-menu-open .sidebar {
    transform:
      translateX(0);
  }

  body.mobile-menu-open
  .mobile-menu-overlay {
    opacity: 1;
    visibility: visible;

    pointer-events: auto;
  }

  .workspace {
    width: 100%;
  }

  .main-content {
    width: 100%;
    min-width: 0;
  }
}



/* GRS_FLOATING_REMOTE_VIDEO_CSS_V2 */

.grs-floating-video {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: min(360px, calc(100vw - 32px));
  background: #111;
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.35);
  z-index: 1200;
}

.grs-floating-video[hidden] {
  display: none !important;
}

.grs-floating-video-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px;
  background: rgba(0, 0, 0, 0.82);
  color: #fff;
}

.grs-floating-video-title {
  font-size: 13px;
  font-weight: 600;
}

.grs-floating-video-action {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 7px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}

.grs-floating-video-action:hover {
  background: rgba(255,255,255,0.2);
}

.grs-floating-video-body {
  aspect-ratio: 4 / 3;
  background: #000;
}

.grs-floating-video-body video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.grs-floating-video-meta {
  padding: 7px 10px 9px;
  background: rgba(0,0,0,0.9);
  color: rgba(255,255,255,0.8);
  font-size: 12px;
}

.grs-floating-video.is-minimized
  .grs-floating-video-body,
.grs-floating-video.is-minimized
  .grs-floating-video-meta {
  display: none;
}

@media (max-width: 720px) {
  .grs-floating-video {
    right: 10px;
    bottom: 10px;
    width: min(300px, calc(100vw - 20px));
  }
}


/* GRS_GLOBAL_PTT_BAR_CSS_V2 */

.grs-global-ptt {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);

  display: flex;
  align-items: center;
  gap: 16px;

  width: min(620px, calc(100vw - 40px));

  padding: 10px 12px;

  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;

  background: rgba(17,24,39,.96);
  color: #fff;

  box-shadow:
    0 14px 36px rgba(0,0,0,.32);

  backdrop-filter: blur(12px);

  z-index: 1300;
}

.grs-global-ptt[hidden] {
  display: none !important;
}

.grs-global-ptt-info {
  flex: 1;
  min-width: 0;
}

.grs-global-ptt-main {
  display: flex;
  align-items: center;
  gap: 9px;

  margin-bottom: 4px;
}

.grs-global-ptt-main > strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  font-size: 14px;
}

.grs-global-ptt-state {
  padding: 3px 8px;

  border-radius: 999px;

  background: rgba(255,255,255,.10);

  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.grs-global-ptt-detail {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;

  font-size: 11px;
  color: rgba(255,255,255,.72);
}

.grs-global-ptt-button {
  min-width: 160px;
  min-height: 58px;

  padding: 10px 18px;

  border: 0;
  border-radius: 11px;

  background: #2563eb;
  color: #fff;

  font-size: 14px;
  font-weight: 800;

  cursor: pointer;

  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.grs-global-ptt-button:disabled {
  cursor: not-allowed;
  opacity: .42;
}

.grs-global-ptt-button.is-pressed {
  transform: translateY(1px);
  background: #dc2626;
}

.grs-global-ptt.is-transmitting
  .grs-global-ptt-state {
  background: rgba(220,38,38,.30);
}

.grs-global-ptt.is-requesting
  .grs-global-ptt-state {
  background: rgba(37,99,235,.32);
}

.grs-global-ptt.is-queued
  .grs-global-ptt-state {
  background: rgba(245,158,11,.30);
}

.grs-global-ptt.is-listening
  .grs-global-ptt-state {
  background: rgba(34,197,94,.24);
}

@media (max-width: 720px) {

  .grs-global-ptt {
    left: 10px;
    right: 10px;
    bottom: 10px;

    transform: none;

    width: auto;

    gap: 10px;
    padding: 9px;
  }

  .grs-global-ptt-detail {
    flex-direction: column;
    gap: 3px;
  }

  .grs-global-ptt-button {
    min-width: 118px;
    min-height: 66px;

    padding: 8px 10px;
  }
}



/* GRS_GLOBAL_PTT_DRAG_CSS_V1 */

.grs-global-ptt-drag-handle {
  cursor: grab;

  touch-action: none;
  user-select: none;

  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.grs-global-ptt.is-dragging
  .grs-global-ptt-drag-handle {
  cursor: grabbing;
}

.grs-global-ptt.is-dragging {
  transition: none !important;
}



/* GRS_FLOATING_VIDEO_DRAG_CSS_V1 */

.grs-floating-video-drag-handle {
  cursor: grab;

  touch-action: none;
  user-select: none;

  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.grs-floating-video.is-dragging
  .grs-floating-video-drag-handle {
  cursor: grabbing;
}

.grs-floating-video.is-dragging {
  transition: none !important;
}



/* GRS_GLOBAL_PTT_UI_CSS_V3 */

.grs-ptt-operational-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.grs-ptt-group,
.grs-ptt-speaker,
.grs-ptt-sip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.grs-ptt-group {
  font-size: 14px;
}

.grs-ptt-group strong,
.grs-ptt-speaker strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grs-ptt-speaker {
  color: rgba(255,255,255,.76);
  font-size: 12px;
}

.grs-ptt-speaker strong {
  color: #fff;
  font-weight: 600;
}

.grs-ptt-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  opacity: .86;
}

.grs-ptt-sip {
  font-size: 11px;
  color: rgba(255,255,255,.72);
  white-space: nowrap;
}

.grs-ptt-sip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.grs-ptt-tool-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 36px;
  height: 36px;

  flex: 0 0 auto;

  padding: 0;

  border: 1px solid rgba(255,255,255,.12);
  border-radius: 9px;

  background: rgba(255,255,255,.08);
  color: #fff;

  cursor: pointer;
}

.grs-ptt-tool-button:hover {
  background: rgba(255,255,255,.15);
}

.grs-ptt-tool-button svg {
  width: 19px;
  height: 19px;
}

.grs-global-ptt-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.grs-ptt-main-icon {
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
}

@media (max-width: 720px) {

  .grs-ptt-operational-row {
    display: grid;
    grid-template-columns:
      minmax(0, 1fr)
      auto
      auto;

    gap: 5px 8px;
  }

  .grs-ptt-group {
    grid-column: 1;
  }

  .grs-global-ptt-state {
    grid-column: 2;
  }

  .grs-ptt-tool-button {
    grid-column: 3;
    grid-row: 1 / span 2;

    width: 38px;
    height: 38px;
  }

  .grs-ptt-speaker {
    grid-column: 1;
  }

  .grs-ptt-sip {
    grid-column: 2;
  }

  .grs-global-ptt-button {
    min-width: 126px;
  }
}



/* GRS_PTT_SIP_STATE_V3 */

.grs-ptt-sip.sip-online {
  color: rgba(134,239,172,.95);
}

.grs-ptt-sip.sip-offline {
  color: rgba(252,165,165,.95);
}

.grs-ptt-tool-button.is-active {
  background: rgba(255,255,255,.18);
}



/* ==================================================
 * GRS_MENU_SVG_ICONS_V1
 *
 * Iconografia funcional MCX.
 *
 * Se implementa mediante mask SVG para:
 * - mantener currentColor;
 * - respetar hover/active;
 * - no interferir con i18n;
 * - no añadir JS.
 * ================================================== */

.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.menu-item::before {
  content: "";

  width: 18px;
  height: 18px;

  flex: 0 0 18px;

  background-color: currentColor;

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-position: center;
  mask-position: center;

  -webkit-mask-size: contain;
  mask-size: contain;

  opacity: .82;
}

.menu-item.active::before {
  opacity: 1;
}


/* SITUACION - radar */
.menu-item[data-module="situation"]::before {
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='2' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='6' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M12 2a10 10 0 1 1-7.1 2.9M12 12l6-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='2' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='6' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M12 2a10 10 0 1 1-7.1 2.9M12 12l6-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}


/* DISPATCHER - radio */
.menu-item[data-module="dispatcher"]::before {
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='2.5' fill='black'/%3E%3Cpath d='M7.8 7.8a6 6 0 0 0 0 8.4M16.2 7.8a6 6 0 0 1 0 8.4M4.5 4.5a10.5 10.5 0 0 0 0 15M19.5 4.5a10.5 10.5 0 0 1 0 15' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='2.5' fill='black'/%3E%3Cpath d='M7.8 7.8a6 6 0 0 0 0 8.4M16.2 7.8a6 6 0 0 1 0 8.4M4.5 4.5a10.5 10.5 0 0 0 0 15M19.5 4.5a10.5 10.5 0 0 1 0 15' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}


/* OPERACIONES - actividad */
.menu-item[data-module="operations"]::before {
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 12h4l2-6 4 12 2-6h6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 12h4l2-6 4 12 2-6h6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}


/* MAPA */
.menu-item[data-module="map"]::before {
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6l6-3 6 3 6-3v15l-6 3-6-3-6 3V6zM9 3v15M15 6v15' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6l6-3 6 3 6-3v15l-6 3-6-3-6 3V6zM9 3v15M15 6v15' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
}


/* USUARIOS */
.menu-item[data-module="users"]::before {
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='3.5' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M5 20c.8-4 3.2-6 7-6s6.2 2 7 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='3.5' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M5 20c.8-4 3.2-6 7-6s6.2 2 7 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}


/* DISPOSITIVOS */
.menu-item[data-module="devices"]::before {
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='7' y='2' width='10' height='20' rx='2' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M10 5h4M11 19h2' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='7' y='2' width='10' height='20' rx='2' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M10 5h4M11 19h2' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}


/* GRUPOS */
.menu-item[data-module="groups"]::before {
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='8' r='3' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='17' cy='9' r='2' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M3 20c.5-4 2.6-6 6-6s5.5 2 6 6M15 14c3 0 5 1.7 5.5 5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='8' r='3' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='17' cy='9' r='2' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M3 20c.5-4 2.6-6 6-6s5.5 2 6 6M15 14c3 0 5 1.7 5.5 5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}


/* COMUNICACIONES */
.menu-item[data-module="communications"]::before {
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h16v11H8l-4 4V5z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M8 9h8M8 12h5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h16v11H8l-4 4V5z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M8 9h8M8 12h5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}


/* INCIDENCIAS */
.menu-item[data-module="incidents"]::before {
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3L2.8 20h18.4L12 3z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M12 9v5M12 17.2v.2' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3L2.8 20h18.4L12 3z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M12 9v5M12 17.2v.2' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}


/* EVIDENCIAS */
.menu-item[data-module="evidences"]::before {
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 3h7l4 4v14H7V3z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M14 3v5h5M10 13h5M10 17h5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 3h7l4 4v14H7V3z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M14 3v5h5M10 13h5M10 17h5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}


/* TENANTS */
.menu-item[data-module="tenants"]::before {
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 21V7l8-4 8 4v14M8 21v-4h8v4M8 9h2M14 9h2M8 13h2M14 13h2' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 21V7l8-4 8 4v14M8 21v-4h8v4M8 9h2M14 9h2M8 13h2M14 13h2' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}


/* ROLES */
.menu-item[data-module="roles"]::before {
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l8 3v5c0 5-3 8.5-8 10-5-1.5-8-5-8-10V6l8-3z' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M9 12l2 2 4-5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l8 3v5c0 5-3 8.5-8 10-5-1.5-8-5-8-10V6l8-3z' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M9 12l2 2 4-5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}


/* CONFIGURACION */
.menu-item[data-module="configuration"]::before {
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='3' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M19 12a7 7 0 0 0-.1-1l2-1.5-2-3.4-2.4 1a7 7 0 0 0-1.8-1L14.4 3h-4.8l-.4 3.1a7 7 0 0 0-1.8 1L5 6.1 3 9.5 5.1 11a7 7 0 0 0 0 2L3 14.5l2 3.4 2.4-1a7 7 0 0 0 1.8 1l.4 3.1h4.8l.4-3.1a7 7 0 0 0 1.8-1l2.4 1 2-3.4-2.1-1.5c.1-.3.1-.7.1-1z' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='3' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M19 12a7 7 0 0 0-.1-1l2-1.5-2-3.4-2.4 1a7 7 0 0 0-1.8-1L14.4 3h-4.8l-.4 3.1a7 7 0 0 0-1.8 1L5 6.1 3 9.5 5.1 11a7 7 0 0 0 0 2L3 14.5l2 3.4 2.4-1a7 7 0 0 0 1.8 1l.4 3.1h4.8l.4-3.1a7 7 0 0 0 1.8-1l2.4 1 2-3.4-2.1-1.5c.1-.3.1-.7.1-1z' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E");
}


/* AUDITORIA */
.menu-item[data-module="audit"]::before {
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10' cy='10' r='6' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M14.5 14.5L21 21M7.5 10l1.7 1.7 3.5-4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10' cy='10' r='6' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M14.5 14.5L21 21M7.5 10l1.7 1.7 3.5-4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}


/* SISTEMA */
.menu-item[data-module="system"]::before {
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='18' height='6' rx='2' fill='none' stroke='black' stroke-width='2'/%3E%3Crect x='3' y='14' width='18' height='6' rx='2' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='7' cy='7' r='1' fill='black'/%3E%3Ccircle cx='7' cy='17' r='1' fill='black'/%3E%3Cpath d='M11 7h6M11 17h6' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='18' height='6' rx='2' fill='none' stroke='black' stroke-width='2'/%3E%3Crect x='3' y='14' width='18' height='6' rx='2' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='7' cy='7' r='1' fill='black'/%3E%3Ccircle cx='7' cy='17' r='1' fill='black'/%3E%3Cpath d='M11 7h6M11 17h6' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}



/* GRS_GLOBAL_GROUP_SELECTOR_CSS_V1 */

.grs-global-group-select {
  min-width: 100px;
  max-width: 175px;

  height: 34px;

  padding: 0 28px 0 9px;

  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;

  background-color: rgba(255,255,255,.08);
  color: #fff;

  font: inherit;
  font-size: 13px;
  font-weight: 600;

  cursor: pointer;

  outline-offset: 2px;
}

.grs-global-group-select:hover {
  background-color: rgba(255,255,255,.13);
}

.grs-global-group-select:disabled {
  opacity: .55;
  cursor: default;
}

.grs-global-group-select option {
  color: #111;
  background: #fff;
}

@media (max-width: 720px) {

  .grs-global-group-select {
    min-width: 0;
    max-width: 130px;
    width: 100%;
  }
}



/* GRS_GLOBAL_GROUP_CONDITIONAL_CSS_V1 */

.grs-global-group-label {
  display: inline-block;

  max-width: 175px;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  font-size: 14px;
  font-weight: 700;

  color: #fff;
}

.grs-global-group-label[hidden],
.grs-global-group-select[hidden] {
  display: none !important;
}

@media (max-width: 720px) {

  .grs-global-group-label {
    max-width: 118px;
  }
}



/* GRS_GLOBAL_STATUS_VISUAL_CSS_V1 */

.grs-ptt-sip {
  transition:
    color .15s ease,
    opacity .15s ease;
}

.grs-ptt-sip.sip-online {
  color: rgba(134,239,172,.96);
}

.grs-ptt-sip.sip-offline {
  color: rgba(252,165,165,.96);
}

.grs-ptt-sip-dot {
  width: 8px;
  height: 8px;

  flex: 0 0 8px;

  border-radius: 999px;

  background: currentColor;

  box-shadow:
    0 0 0 2px rgba(255,255,255,.05);
}


/* ESCUCHANDO */
.grs-global-ptt.is-listening
  .grs-global-ptt-state {
  color: #dcfce7;
  background: rgba(34,197,94,.24);
}


/* SOLICITANDO */
.grs-global-ptt.is-requesting
  .grs-global-ptt-state {
  color: #dbeafe;
  background: rgba(37,99,235,.34);
}


/* TRANSMITIENDO */
.grs-global-ptt.is-transmitting
  .grs-global-ptt-state {
  color: #fee2e2;
  background: rgba(220,38,38,.36);
}

.grs-global-ptt.is-transmitting
  .grs-global-ptt-button {
  background: #dc2626;
}


/* EN COLA */
.grs-global-ptt.is-queued
  .grs-global-ptt-state {
  color: #fef3c7;
  background: rgba(245,158,11,.34);
}


/* DENEGADO / ERROR */
.grs-global-ptt.is-denied
  .grs-global-ptt-state,
.grs-global-ptt.is-error
  .grs-global-ptt-state {
  color: #fee2e2;
  background: rgba(220,38,38,.30);
}


/* CAMBIO / CONEXION */
.grs-global-ptt.is-connecting
  .grs-global-ptt-state {
  color: #dbeafe;
  background: rgba(59,130,246,.26);
}


/* Animacion muy suave del punto durante TX */
.grs-global-ptt.is-transmitting
  .grs-global-ptt-state::before {
  content: "";

  display: inline-block;

  width: 7px;
  height: 7px;

  margin-right: 5px;

  border-radius: 50%;

  background: currentColor;

  vertical-align: middle;
}


/* El botón recupera su azul fuera de TX */
.grs-global-ptt:not(.is-transmitting)
  .grs-global-ptt-button:not(:disabled) {
  background: #2563eb;
}



/* ==================================================
 * GRS_GLOBAL_PTT_COMPACT_CSS_V1
 * ================================================== */

.grs-ptt-compact-toggle {
  position: relative;
}

.grs-ptt-compact-icon {
  width: 18px;
  height: 18px;
}

.grs-ptt-compact-icon-expand {
  display: none;
}


/*
 * Modo compacto:
 * dejamos únicamente grupo, estado,
 * control de expansión y PTT.
 */
.grs-global-ptt.is-compact {
  width: auto;
  max-width: calc(100vw - 32px);

  gap: 10px;
  padding: 8px 9px;
}

.grs-global-ptt.is-compact
  .grs-ptt-speaker,
.grs-global-ptt.is-compact
  .grs-ptt-sip,
.grs-global-ptt.is-compact
  #grsGlobalVideoToggle {
  display: none !important;
}

.grs-global-ptt.is-compact
  .grs-ptt-operational-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.grs-global-ptt.is-compact
  .grs-ptt-compact-icon-collapse {
  display: none;
}

.grs-global-ptt.is-compact
  .grs-ptt-compact-icon-expand {
  display: block;
}

.grs-global-ptt.is-compact
  .grs-global-ptt-button {
  min-width: 145px;
  min-height: 50px;

  padding: 8px 14px;
}

.grs-global-ptt.is-compact
  .grs-global-ptt-state {
  margin: 0;
}


/*
 * El selector futuro multigrupo sigue
 * funcionando también en modo compacto.
 */
.grs-global-ptt.is-compact
  .grs-global-group-select {
  max-width: 145px;
}


/* MOBILE */
@media (max-width: 720px) {

  .grs-global-ptt.is-compact {
    left: auto;
    right: auto;

    width: auto;
    max-width: calc(100vw - 16px);

    gap: 7px;
    padding: 7px;
  }

  .grs-global-ptt.is-compact
    .grs-global-ptt-info {
    flex: 0 1 auto;
  }

  .grs-global-ptt.is-compact
    .grs-ptt-operational-row {
    display: grid;

    grid-template-columns:
      minmax(70px, auto)
      auto
      38px;

    gap: 5px 7px;
  }

  .grs-global-ptt.is-compact
    .grs-ptt-group {
    grid-column: 1;
    grid-row: 1;
  }

  .grs-global-ptt.is-compact
    .grs-global-ptt-state {
    grid-column: 2;
    grid-row: 1;
  }

  .grs-global-ptt.is-compact
    .grs-ptt-compact-toggle {
    grid-column: 3;
    grid-row: 1;

    width: 36px;
    height: 36px;
  }

  .grs-global-ptt.is-compact
    .grs-global-ptt-button {
    min-width: 112px;
    min-height: 58px;

    padding: 7px 9px;
  }

  .grs-global-ptt.is-compact
    .grs-ptt-main-icon {
    width: 19px;
    height: 19px;
  }

  .grs-global-ptt.is-compact
    .grs-global-ptt-button span {
    font-size: 12px;
  }
}



/* ==================================================
 * GRS_GLOBAL_FLOOR_VISUAL_CSS_V1
 * ================================================== */


/* OTRO USUARIO TIENE EL FLOOR */

.grs-global-ptt.is-receiving
  .grs-global-ptt-state {
  color: #dbeafe;
  background: rgba(14,165,233,.26);
}

.grs-global-ptt.is-receiving
  .grs-global-ptt-state::before {
  content: "";

  display: inline-block;

  width: 7px;
  height: 7px;

  margin-right: 5px;

  border-radius: 50%;

  background: currentColor;

  vertical-align: middle;
}


/* Speaker activo */

.grs-ptt-speaker {
  transition:
    color .15s ease,
    opacity .15s ease;
}

.grs-ptt-speaker.is-active {
  color: #fff;
}

.grs-ptt-speaker.is-active
  .grs-ptt-icon {
  opacity: 1;
}


/* TRANSMISION LOCAL */

.grs-global-ptt.is-transmitting {
  box-shadow:
    0 14px 36px rgba(0,0,0,.32),
    0 0 0 1px rgba(220,38,38,.30);
}


/* RECEPCION REMOTA */

.grs-global-ptt.is-receiving {
  box-shadow:
    0 14px 36px rgba(0,0,0,.32),
    0 0 0 1px rgba(14,165,233,.24);
}


/*
 * En compacto el nombre del usuario ya
 * aparece dentro del propio estado:
 * "Recibiendo · usuario".
 */
.grs-global-ptt.is-compact.is-receiving
  .grs-global-ptt-state {
  max-width: 180px;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


@media (max-width: 720px) {

  .grs-global-ptt.is-compact.is-receiving
    .grs-global-ptt-state {
    max-width: 125px;
  }
}



/* ==================================================
 * GRS_MENU_RADIO_ACTIVITY_CSS_V1
 * Actividad MCX visible fuera de Dispatcher.
 * ================================================== */

.menu-item[data-module="dispatcher"] {
  position: relative;
}


/*
 * Punto de actividad.
 */
.menu-item[data-module="dispatcher"]
  .grs-menu-radio-indicator {
  display: none;
}


/*
 * Usamos ::after únicamente en Dispatcher.
 */
.menu-item[data-module="dispatcher"]
  ::after {
  pointer-events: none;
}


/*
 * Recepción remota.
 */
.menu-item[data-module="dispatcher"]
  {
  --grs-radio-indicator: transparent;
}

.menu-item[data-module="dispatcher"]
  .grs-radio-unused {
  display: none;
}

.menu-item[data-module="dispatcher"].has-radio-activity::after {
  content: "";

  position: absolute;

  right: 11px;
  top: 50%;

  width: 8px;
  height: 8px;

  margin-top: -4px;

  border-radius: 999px;

  background: #38bdf8;

  box-shadow:
    0 0 0 0 rgba(56,189,248,.42);

  animation:
    grs-radio-menu-pulse
    1.35s
    ease-out
    infinite;
}


/*
 * Cuando transmite el operador,
 * rojo operativo.
 */
.menu-item[data-module="dispatcher"].is-radio-transmitting::after {
  background: #ef4444;

  box-shadow:
    0 0 0 0 rgba(239,68,68,.45);

  animation-name:
    grs-radio-menu-pulse-tx;
}


/*
 * También damos una mínima señal
 * al propio SVG de radio.
 */
.menu-item[data-module="dispatcher"].has-radio-activity::before {
  opacity: 1;
}


/* REMOTO */
@keyframes grs-radio-menu-pulse {

  0% {
    box-shadow:
      0 0 0 0
      rgba(56,189,248,.42);
  }

  70% {
    box-shadow:
      0 0 0 7px
      rgba(56,189,248,0);
  }

  100% {
    box-shadow:
      0 0 0 0
      rgba(56,189,248,0);
  }
}


/* LOCAL TX */
@keyframes grs-radio-menu-pulse-tx {

  0% {
    box-shadow:
      0 0 0 0
      rgba(239,68,68,.48);
  }

  70% {
    box-shadow:
      0 0 0 8px
      rgba(239,68,68,0);
  }

  100% {
    box-shadow:
      0 0 0 0
      rgba(239,68,68,0);
  }
}


/*
 * Accesibilidad:
 * no animar si el sistema pide
 * reducción de movimiento.
 */
@media (prefers-reduced-motion: reduce) {

  .menu-item[data-module="dispatcher"]
    .has-radio-activity::after,
  .menu-item[data-module="dispatcher"].has-radio-activity::after {
    animation: none;
  }
}



/* ==================================================
 * GRS_SITUATION_OPERATIONAL_CSS_V2
 * ================================================== */

.situation-operational-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;

  margin-bottom: 18px;
}

.situation-operational-kicker {
  margin-bottom: 4px;

  color: #74808a;

  font-size: 10px;
  font-weight: 700;
  letter-spacing: .11em;
}

.situation-operational-header h1 {
  margin: 0;

  color: #24313b;

  font-size: 24px;
  line-height: 1.2;
}

.situation-operational-header p {
  margin: 5px 0 0;

  color: #74808a;

  font-size: 12px;
}

.situation-overall-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  flex: 0 0 auto;

  padding: 7px 10px;

  border-radius: 999px;

  background: #edf1f3;
  color: #68747d;

  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
}

.situation-overall-status.good {
  background: #dce9e1;
  color: #3f6953;
}

.situation-overall-status.warn {
  background: #eee4d2;
  color: #826a3e;
}

.situation-overall-dot {
  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: currentColor;
}


.situation-operational-grid {
  display: grid;

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

  gap: 12px;

  margin-bottom: 14px;
}

.situation-operational-card {
  display: flex;
  align-items: center;
  gap: 13px;

  min-width: 0;

  padding: 14px 15px;

  border: 1px solid #dce2e6;
  border-radius: 10px;

  background: #f7f9fa;

  box-shadow:
    0 1px 2px rgba(15,23,42,.04);
}

.situation-operational-card.good {
  border-color: #cddfd4;
}

.situation-operational-card.warn {
  border-color: #e5d7ba;
}

.situation-operational-card.muted {
  opacity: .78;
}

.situation-operational-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;

  flex: 0 0 38px;

  border-radius: 9px;

  background: #e8edf0;
  color: #53616c;
}

.situation-operational-card.good
  .situation-operational-icon {
  background: #e2ede6;
  color: #46705a;
}

.situation-operational-card.warn
  .situation-operational-icon {
  background: #f1e8d7;
  color: #856b3d;
}

.situation-operational-icon svg {
  width: 21px;
  height: 21px;
}

.situation-operational-content {
  min-width: 0;
}

.situation-operational-title {
  color: #68747d;

  font-size: 11px;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: .04em;
}

.situation-operational-value {
  margin-top: 2px;

  color: #24313b;

  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
}

.situation-operational-subtitle {
  margin-top: 3px;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  color: #7b8790;

  font-size: 11px;
}


/* COMUNICACIONES AHORA */

.situation-live-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  margin-bottom: 18px;

  padding: 12px 15px;

  border: 1px solid #d8e0e5;
  border-radius: 10px;

  background: #fff;
}

.situation-live-strip.listening {
  border-color: #d1e1d7;
}

.situation-live-strip.receiving {
  border-color: #bfdbec;
}

.situation-live-strip.transmitting {
  border-color: #efc6c6;
}

.situation-live-main {
  display: flex;
  align-items: center;
  gap: 10px;
}

.situation-live-radio {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  border-radius: 50%;

  background: #e7eef5;
  color: #355f88;
}

.situation-live-strip.listening
  .situation-live-radio {
  background: #e2ede6;
  color: #46705a;
}

.situation-live-strip.receiving
  .situation-live-radio {
  background: #e0f2fe;
  color: #0369a1;
}

.situation-live-strip.transmitting
  .situation-live-radio {
  background: #fee2e2;
  color: #b91c1c;
}

.situation-live-radio svg {
  width: 19px;
  height: 19px;
}

.situation-live-label {
  color: #7b8790;

  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
}

.situation-live-main strong {
  display: block;

  margin-top: 2px;

  color: #27353f;

  font-size: 14px;
}

.situation-live-data {
  display: flex;
  align-items: center;
  gap: 24px;
}

.situation-live-data > div {
  min-width: 70px;
}

.situation-live-data span {
  display: block;

  color: #849099;

  font-size: 10px;
  text-transform: uppercase;
}

.situation-live-data strong {
  display: block;

  margin-top: 2px;

  color: #34424e;

  font-size: 12px;
}

.situation-live-data strong.good {
  color: #3f6953;
}

.situation-live-data strong.muted {
  color: #8c5353;
}


@media (max-width: 1000px) {

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


@media (max-width: 720px) {

  .situation-operational-header {
    align-items: stretch;
    flex-direction: column;

    gap: 10px;
  }

  .situation-overall-status {
    align-self: flex-start;
  }

  .situation-operational-grid {
    grid-template-columns:
      1fr;

    gap: 8px;
  }

  .situation-operational-card {
    padding: 11px 12px;
  }

  .situation-operational-value {
    font-size: 19px;
  }

  .situation-live-strip {
    align-items: stretch;
    flex-direction: column;

    gap: 11px;
  }

  .situation-live-data {
    display: grid;

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

    gap: 8px;
  }

  .situation-live-data > div {
    min-width: 0;
  }
}


/* ==================================================
 * GRS_DISPATCHER_OPERATIONAL_CSS_V2
 * ================================================== */


/* CABECERA */

.dispatcher-operational-header {
  padding: 12px 14px;

  border-color: #d5dde2;

  background:
    linear-gradient(
      180deg,
      #f8fafb 0%,
      #f3f6f7 100%
    );
}

.dispatcher-operational-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dispatcher-operational-title > div:last-child {
  min-width: 0;
}

.dispatcher-operational-title strong {
  display: block;

  color: #24313b;

  font-size: 17px;
}

.dispatcher-operational-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;

  flex: 0 0 38px;

  border-radius: 9px;

  background: #e5edf4;
  color: #355f88;
}

.dispatcher-operational-icon svg {
  width: 21px;
  height: 21px;
}


/* BOTONES DE CABECERA */

.dispatcher-toolbar-actions
  .secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  min-height: 36px;
}


/*
 * Iconos SVG mediante mask:
 * no modifica listeners ni HTML.
 */

#dispatcherRefresh::before,
#dispatcherAudioStats::before,
#dispatcherMediaConnect::before,
#dispatcherMediaDisconnect::before,
#dispatcherVideoToggle::before {
  content: "";

  width: 15px;
  height: 15px;

  flex: 0 0 15px;

  background: currentColor;

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-position: center;
  mask-position: center;

  -webkit-mask-size: contain;
  mask-size: contain;
}


/* Refresh */

#dispatcherRefresh::before {
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6v5h-5M4 18v-5h5M6.1 9a7 7 0 0 1 11.6-2.6L20 11M4 13l2.3 4.6A7 7 0 0 0 18 15' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6v5h-5M4 18v-5h5M6.1 9a7 7 0 0 1 11.6-2.6L20 11M4 13l2.3 4.6A7 7 0 0 0 18 15' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}


/* Diagnóstico */

#dispatcherAudioStats::before {
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 17V9M9 20V4M14 16V8M19 19V5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");

  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 17V9M9 20V4M14 16V8M19 19V5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}


/* Conectar */

#dispatcherMediaConnect::before {
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 12h8M12 8v8M5 5a10 10 0 1 0 14 0' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");

  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 12h8M12 8v8M5 5a10 10 0 1 0 14 0' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}


/* Desconectar */

#dispatcherMediaDisconnect::before {
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 12h8M5 5a10 10 0 1 0 14 0' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");

  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 12h8M5 5a10 10 0 1 0 14 0' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}


/* Vídeo */

#dispatcherVideoToggle::before {
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='6' width='13' height='12' rx='2' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M16 10l5-3v10l-5-3z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");

  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='6' width='13' height='12' rx='2' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M16 10l5-3v10l-5-3z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
}


/* STATUS PRINCIPAL */

.dispatcher-status-strip {
  grid-template-columns:
    minmax(150px, .8fr)
    minmax(150px, .8fr)
    minmax(200px, 2fr);

  padding: 10px 12px;

  background: #f9fafb;
}

.dispatcher-status-strip
  > div:not(.dispatcher-tech-details) {
  justify-content: center;

  min-height: 43px;

  padding: 0 10px;

  border-right: 1px solid #e1e5e8;
}

.dispatcher-status-strip
  > div:nth-child(2) {
  border-right: 1px solid #e1e5e8;
}

.dispatcher-media-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  font-weight: 800;
}

.dispatcher-media-status::before {
  content: "";

  width: 8px;
  height: 8px;

  flex: 0 0 8px;

  border-radius: 50%;

  background: #8d979f;
}

.dispatcher-media-status.connected::before {
  background: #4f8a67;
}

.dispatcher-media-status.transmitting::before {
  background: #d44b4b;
}


/* MENSAJES */

.dispatcher-message {
  min-height: 18px;

  justify-content: center;

  padding: 3px 6px;
}


/* DIAGNOSTICO TECNICO */

.dispatcher-tech-details {
  grid-column: 1 / -1;

  margin-top: 2px;

  border-top: 1px solid #e3e7ea;
}

.dispatcher-tech-details summary {
  padding: 9px 3px 3px;

  color: #78848d;

  font-size: 11px;
  font-weight: 600;

  cursor: pointer;

  user-select: none;
}

.dispatcher-audio-diag {
  margin-top: 7px;

  padding: 9px 10px;

  border: 1px solid #d7dde1;
  border-radius: 7px;

  background: #f4f6f7;

  color: #59656e;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  font-size: 11px;

  white-space: normal;
}


/* VIDEO */

#dispatcherVideoPanel {
  display: grid !important;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 320px)
    );

  gap: 12px !important;

  align-items: start;

  margin: 0 !important;
}

#dispatcherVideoPanel > div {
  overflow: hidden;

  border: 1px solid #d7dde1;
  border-radius: 10px;

  background: #15191d;

  box-shadow:
    0 1px 3px rgba(15,23,42,.08);
}

#dispatcherVideoPanel > div > div:first-child {
  margin: 0 !important;

  padding: 8px 10px;

  background: #20262c;

  color: #dce3e8;

  font-size: 11px !important;
  font-weight: 600 !important;
}

#dispatcherLocalVideo,
#dispatcherRemoteVideo {
  display: block;

  width: 100% !important;
  max-width: none !important;

  aspect-ratio: 4 / 3;

  max-height: 260px !important;

  border-radius: 0 !important;

  object-fit: contain;

  background: #050607 !important;
}


/*
 * Cuando syncRemoteMediaElements oculta
 * el vídeo remoto porque no hay track,
 * respetamos ese estado.
 */

#dispatcherRemoteVideo[style*="display: none"] {
  display: none !important;
}


/* METRICAS SECUNDARIAS */

.dispatcher-metrics-secondary {
  gap: 8px;
}

.dispatcher-metrics-secondary
  .metric-card {
  padding: 10px 12px;

  box-shadow: none;

  border-left-width: 3px;
}

.dispatcher-metrics-secondary
  .metric-title {
  font-size: 10px;
}

.dispatcher-metrics-secondary
  .metric-value {
  margin-top: 2px;

  font-size: 19px;
}

.dispatcher-metrics-secondary
  .metric-subtitle {
  font-size: 10px;
}


/* TARJETAS DE GRUPO */

.dispatcher-group-card {
  position: relative;

  overflow: hidden;

  padding: 14px;

  transition:
    border-color .15s ease,
    box-shadow .15s ease;
}

.dispatcher-group-card.media-connected {
  border-color: #9fbdab;

  box-shadow:
    0 0 0 2px
    rgba(70,110,90,.10);
}

.dispatcher-group-card.media-connected::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;
  bottom: 0;

  width: 4px;

  background: #5f8b73;
}

.dispatcher-group-name {
  display: flex;
  align-items: center;
  gap: 7px;

  color: #26333d;
}

.dispatcher-group-name::before {
  content: "";

  width: 17px;
  height: 17px;

  flex: 0 0 17px;

  background: #53616c;

  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='2.5' fill='black'/%3E%3Cpath d='M7.8 7.8a6 6 0 0 0 0 8.4M16.2 7.8a6 6 0 0 1 0 8.4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");

  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='2.5' fill='black'/%3E%3Cpath d='M7.8 7.8a6 6 0 0 0 0 8.4M16.2 7.8a6 6 0 0 1 0 8.4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-position: center;
  mask-position: center;

  -webkit-mask-size: contain;
  mask-size: contain;
}

.dispatcher-group-runtime {
  gap: 7px;
}

.dispatcher-group-runtime > div {
  padding: 8px 9px;

  background: #f6f8f9;
}


/* PTT COMO CONTROL PRINCIPAL */

.dispatcher-group-actions {
  align-items: stretch;
}

.dispatcher-ptt-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;

  min-width: 185px;

  border-radius: 10px;

  background: #2563eb;

  font-weight: 800;

  letter-spacing: .015em;

  box-shadow:
    0 2px 4px rgba(37,99,235,.18);
}

.dispatcher-ptt-button::before {
  content: "";

  width: 20px;
  height: 20px;

  flex: 0 0 20px;

  background: currentColor;

  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a4 4 0 0 0-4 4v5a4 4 0 0 0 8 0V7a4 4 0 0 0-4-4zM5.5 11.5a6.5 6.5 0 0 0 13 0M12 18v3M8.5 21h7' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");

  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a4 4 0 0 0-4 4v5a4 4 0 0 0 8 0V7a4 4 0 0 0-4-4zM5.5 11.5a6.5 6.5 0 0 0 13 0M12 18v3M8.5 21h7' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-position: center;
  mask-position: center;

  -webkit-mask-size: contain;
  mask-size: contain;
}

.dispatcher-ptt-button.is-pressed {
  background: #dc2626;

  box-shadow:
    0 0 0 3px rgba(220,38,38,.16);
}


/* MOBILE / TABLET */

@media (max-width: 900px) {

  #dispatcherVideoPanel {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .dispatcher-toolbar-actions {
    width: 100%;
  }

  .dispatcher-toolbar-actions
    .secondary-button {
    flex: 1 1 auto;
  }
}


@media (max-width: 650px) {

  .dispatcher-root {
    gap: 12px;
  }

  .dispatcher-operational-header {
    gap: 10px;
  }

  .dispatcher-operational-title {
    width: 100%;
  }

  .dispatcher-toolbar-actions {
    display: grid;

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

    gap: 6px;
  }

  .dispatcher-toolbar-actions
    .secondary-button {
    width: 100%;

    min-height: 42px;

    padding: 7px 8px;

    font-size: 11px;
  }

  #dispatcherVideoPanel {
    grid-template-columns: 1fr;
  }

  #dispatcherVideoPanel > div {
    width: 100%;
  }

  .dispatcher-status-strip {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap: 0;
  }

  .dispatcher-status-strip
    > div:not(.dispatcher-tech-details) {
    border-right: 0;
  }

  .dispatcher-message {
    grid-column: 1 / -1;
  }

  .dispatcher-tech-details {
    grid-column: 1 / -1;
  }

  .dispatcher-metrics-secondary {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );
  }

  .dispatcher-metrics-secondary
    .metric-card {
    padding: 8px;
  }

  .dispatcher-metrics-secondary
    .metric-subtitle {
    display: none;
  }

  .dispatcher-group-card {
    padding: 12px;
  }

  .dispatcher-group-actions {
    display: grid;

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

  .dispatcher-group-actions
    .dispatcher-ptt-button {
    grid-column: 1 / -1;

    width: 100%;

    min-width: 0;
    min-height: 92px;

    font-size: 18px;
  }
}


/* Muy estrecho */

@media (max-width: 430px) {

  .dispatcher-metrics-secondary {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }
}



/* ==================================================
 * GRS_DISPATCHER_GROUP_OPERATIONAL_CSS_V2
 *
 * Presentacion MCX de grupos.
 * Solo UI: no modifica runtime ni PTT.
 * ================================================== */


/* TARJETA */

.dispatcher-group-card {
  display: flex;
  flex-direction: column;

  min-width: 0;

  padding: 0;

  overflow: hidden;

  border:
    1px solid #d8dee3;

  border-radius: 12px;

  background: #fff;

  box-shadow:
    0 2px 6px
    rgba(15,23,42,.055);
}


/*
 * Evitamos duplicar el antiguo borde
 * izquierdo cuando el runtime está activo.
 */
.dispatcher-group-card.runtime-active {
  border-left:
    1px solid #d8dee3;
}


/* GRUPO CONECTADO */

.dispatcher-group-card.media-connected {
  border-color: #9db9a8;

  box-shadow:
    0 0 0 2px
    rgba(63,105,83,.09),
    0 3px 9px
    rgba(15,23,42,.06);
}


/*
 * Barra superior operativa.
 */
.dispatcher-group-card.media-connected::before {
  content: "";

  display: block;

  width: 100%;
  height: 4px;

  flex: 0 0 4px;

  background: #5f8b73;
}


/* HEADER */

.dispatcher-group-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 14px;

  margin: 0;

  padding:
    15px
    16px
    13px;

  border-bottom:
    1px solid #e5e9ec;

  background:
    linear-gradient(
      180deg,
      #fafbfc,
      #f6f8f9
    );
}

.dispatcher-group-header > div:first-child {
  min-width: 0;
}


.dispatcher-group-name {
  display: flex;
  align-items: center;

  gap: 8px;

  min-width: 0;

  color: #25323c;

  font-size: 18px;
  font-weight: 750;
}


/* ICONO RADIO */

.dispatcher-group-name::before {
  content: "";

  width: 19px;
  height: 19px;

  flex: 0 0 19px;

  background:
    #53616c;

  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='2.5' fill='black'/%3E%3Cpath d='M7.8 7.8a6 6 0 0 0 0 8.4M16.2 7.8a6 6 0 0 1 0 8.4M4.5 4.5a10.5 10.5 0 0 0 0 15M19.5 4.5a10.5 10.5 0 0 1 0 15' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");

  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='2.5' fill='black'/%3E%3Cpath d='M7.8 7.8a6 6 0 0 0 0 8.4M16.2 7.8a6 6 0 0 1 0 8.4M4.5 4.5a10.5 10.5 0 0 0 0 15M19.5 4.5a10.5 10.5 0 0 1 0 15' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");

  -webkit-mask-repeat:
    no-repeat;

  mask-repeat:
    no-repeat;

  -webkit-mask-position:
    center;

  mask-position:
    center;

  -webkit-mask-size:
    contain;

  mask-size:
    contain;
}


.dispatcher-group-card.media-connected
  .dispatcher-group-name::before {
  background:
    #427159;
}


/* CODIGO / EXTENSION */

.dispatcher-group-code {
  margin:
    4px
    0
    0
    27px;

  color: #7b8790;

  font-size: 10px;
  font-weight: 500;

  letter-spacing: .025em;
}


/* ESTADOS */

.dispatcher-group-header-status {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 6px;

  flex-wrap: wrap;
}


.dispatcher-priority,
.group-runtime-state {
  min-height: 23px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding:
    3px
    8px;

  border-radius:
    999px;

  font-size: 9px;
  font-weight: 750;

  letter-spacing: .045em;
  text-transform: uppercase;
}


/* RUNTIME ACTIVO */

.group-runtime-state.active {
  position: relative;

  padding-left: 18px;

  background: #dce9e1;
  color: #3f6953;
}

.group-runtime-state.active::before {
  content: "";

  position: absolute;

  left: 7px;

  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: currentColor;
}


.group-runtime-state.idle {
  background: #eceff1;
  color: #737d84;
}


/* DATOS RUNTIME */

.dispatcher-group-runtime {
  display: grid;

  grid-template-columns:
    minmax(0, 1.8fr)
    minmax(80px, .65fr)
    minmax(70px, .55fr);

  gap: 0;

  padding:
    0
    16px;

  background: #fff;
}


.dispatcher-group-runtime > div {
  min-width: 0;

  display: flex;
  flex-direction: column;
  justify-content: center;

  gap: 3px;

  min-height: 72px;

  padding:
    11px
    14px;

  border-radius: 0;

  background:
    transparent;

  border-right:
    1px solid #e5e9ec;
}


.dispatcher-group-runtime > div:first-child {
  padding-left: 0;
}


.dispatcher-group-runtime > div:last-child {
  padding-right: 0;

  border-right: 0;
}


/* LABEL */

.dispatcher-group-runtime span {
  color: #89949c;

  font-size: 9px;
  font-weight: 700;

  letter-spacing: .055em;

  text-transform: uppercase;
}


/* VALOR */

.dispatcher-group-runtime strong {
  color: #34424e;

  font-size: 15px;
  font-weight: 700;
}


/*
 * Speaker es el dato principal.
 */
.dispatcher-group-runtime
  > div:first-child strong {
  display: flex;
  align-items: center;

  gap: 6px;

  color: #26343e;

  font-size: 16px;
}


/* ICONO SPEAKER */

.dispatcher-group-runtime
  > div:first-child strong::before {
  content: "";

  width: 16px;
  height: 16px;

  flex: 0 0 16px;

  background:
    #849099;

  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 9h4l5-4v14l-5-4H5V9zM17 9a4 4 0 0 1 0 6M19 6a8 8 0 0 1 0 12' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 9h4l5-4v14l-5-4H5V9zM17 9a4 4 0 0 1 0 6M19 6a8 8 0 0 1 0 12' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  -webkit-mask-repeat:
    no-repeat;

  mask-repeat:
    no-repeat;

  -webkit-mask-position:
    center;

  mask-position:
    center;

  -webkit-mask-size:
    contain;

  mask-size:
    contain;
}


/* DETALLE ACTIVO */

.dispatcher-active-detail {
  margin: 0;

  padding:
    9px
    16px;

  border-top:
    1px solid #e8ecef;

  background:
    #fafbfb;

  color:
    #7b8790;

  font-size:
    10px;
}


.dispatcher-active-detail strong {
  color:
    #4b5963;

  font-size:
    10px;
}


/* ACCIONES */

.dispatcher-group-actions {
  display: grid;

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

  align-items: stretch;

  gap: 8px;

  margin: 0;

  padding:
    13px
    16px
    16px;

  border-top:
    1px solid #e5e9ec;

  background:
    #fafbfc;
}


/*
 * PTT primero y dominante.
 */

.dispatcher-group-actions
  [data-ptt-group] {
  grid-column: 1;
  grid-row: 1;

  min-width: 0;
  min-height: 62px;

  width: 100%;

  margin: 0;

  border-radius:
    10px;

  background:
    #2563eb;

  color:
    #fff;

  font-size:
    15px;

  font-weight:
    800;
}


.dispatcher-group-actions
  [data-ptt-group]:not(:disabled):hover {
  background:
    #1d4ed8;
}


.dispatcher-group-actions
  [data-ptt-group].is-pressed,
.dispatcher-group-actions
  [data-ptt-group]:active {
  background:
    #dc2626;

  box-shadow:
    0 0 0 3px
    rgba(220,38,38,.13);
}


/* MICRO PTT */

.dispatcher-group-actions
  [data-ptt-group]::before {
  content: "";

  width: 20px;
  height: 20px;

  display: inline-block;

  margin-right: 7px;

  vertical-align:
    -5px;

  background:
    currentColor;

  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a4 4 0 0 0-4 4v5a4 4 0 0 0 8 0V7a4 4 0 0 0-4-4zM5.5 11.5a6.5 6.5 0 0 0 13 0M12 18v3M8.5 21h7' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");

  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a4 4 0 0 0-4 4v5a4 4 0 0 0 8 0V7a4 4 0 0 0-4-4zM5.5 11.5a6.5 6.5 0 0 0 13 0M12 18v3M8.5 21h7' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");

  -webkit-mask-repeat:
    no-repeat;

  mask-repeat:
    no-repeat;

  -webkit-mask-position:
    center;

  mask-position:
    center;

  -webkit-mask-size:
    contain;

  mask-size:
    contain;
}


/* ENTRAR */

.dispatcher-group-actions
  [data-enter-group] {
  grid-column: 2;

  min-width: 105px;

  padding:
    8px
    12px;
}


/* ABRIR DETALLE */

.dispatcher-group-actions
  [data-open-group] {
  grid-column: 3;

  min-width: 90px;

  padding:
    8px
    12px;
}


/* ICONO ENTRAR */

.dispatcher-group-actions
  [data-enter-group]::before {
  content: "";

  display: inline-block;

  width: 15px;
  height: 15px;

  margin-right: 5px;

  vertical-align:
    -3px;

  background:
    currentColor;

  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h14M13 7l5 5-5 5M20 4v16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h14M13 7l5 5-5 5M20 4v16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  -webkit-mask-repeat:
    no-repeat;

  mask-repeat:
    no-repeat;

  -webkit-mask-position:
    center;

  mask-position:
    center;

  -webkit-mask-size:
    contain;

  mask-size:
    contain;
}


/* DETALLE */

.dispatcher-group-actions
  [data-open-group]::before {
  content: "";

  display: inline-block;

  width: 15px;
  height: 15px;

  margin-right: 5px;

  vertical-align:
    -3px;

  background:
    currentColor;

  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M12 11v6M12 7.5v.2' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");

  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M12 11v6M12 7.5v.2' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");

  -webkit-mask-repeat:
    no-repeat;

  mask-repeat:
    no-repeat;

  -webkit-mask-position:
    center;

  mask-position:
    center;

  -webkit-mask-size:
    contain;

  mask-size:
    contain;
}


/* DESHABILITADO */

.dispatcher-group-actions
  [data-ptt-group]:disabled {
  background:
    #9aa5ad;

  box-shadow:
    none;
}


/* TABLET */

@media (max-width: 900px) {

  .dispatcher-group-runtime {
    grid-template-columns:
      minmax(0, 1.5fr)
      minmax(80px, .7fr)
      minmax(65px, .6fr);
  }

  .dispatcher-group-actions {
    grid-template-columns:
      minmax(0, 1fr)
      auto;
  }

  .dispatcher-group-actions
    [data-ptt-group] {
    grid-column:
      1 / -1;

    min-height:
      78px;
  }

  .dispatcher-group-actions
    [data-enter-group] {
    grid-column:
      1;
  }

  .dispatcher-group-actions
    [data-open-group] {
    grid-column:
      2;
  }
}


/* TELEFONO */

@media (max-width: 650px) {

  .dispatcher-group-header {
    padding:
      13px
      13px
      11px;
  }

  .dispatcher-group-name {
    font-size:
      17px;
  }

  .dispatcher-group-code {
    margin-left:
      27px;
  }

  .dispatcher-group-header-status {
    max-width:
      110px;
  }


  .dispatcher-group-runtime {
    grid-template-columns:
      minmax(0, 1fr)
      72px
      58px;

    padding:
      0
      13px;
  }

  .dispatcher-group-runtime
    > div {
    min-height:
      65px;

    padding:
      9px;
  }

  .dispatcher-group-runtime
    > div:first-child {
    padding-left:
      0;
  }

  .dispatcher-group-runtime
    strong {
    font-size:
      13px;
  }

  .dispatcher-group-runtime
    > div:first-child strong {
    font-size:
      14px;
  }


  .dispatcher-group-actions {
    grid-template-columns:
      1fr
      1fr;

    padding:
      11px
      13px
      13px;
  }

  .dispatcher-group-actions
    [data-ptt-group] {
    grid-column:
      1 / -1;

    min-height:
      94px;

    font-size:
      18px;
  }

  .dispatcher-group-actions
    [data-enter-group],
  .dispatcher-group-actions
    [data-open-group] {
    width:
      100%;

    min-width:
      0;

    min-height:
      42px;
  }
}


/* MUY ESTRECHO */

@media (max-width: 390px) {

  .dispatcher-group-header {
    flex-direction:
      column;

    gap:
      9px;
  }

  .dispatcher-group-header-status {
    max-width:
      none;

    justify-content:
      flex-start;
  }

  .dispatcher-group-runtime {
    grid-template-columns:
      1fr
      64px
      52px;
  }

}



/* ==================================================
 * GRS_DISPATCHER_GROUP_ADAPTIVE_CSS_V3
 *
 * La accion principal cambia:
 *   fuera -> ENTRAR EN GRUPO
 *   dentro -> MANTENER PTT
 * ================================================== */


/* ------------------------------------------
 * BANDA DE DATOS
 * ------------------------------------------ */

.dispatcher-group-runtime {
  display: grid;

  grid-template-columns:
    minmax(220px, 2fr)
    minmax(95px, .7fr)
    minmax(70px, .55fr)
    minmax(80px, .6fr)
    minmax(70px, .55fr)
    minmax(90px, .7fr);

  gap: 0;

  padding:
    0
    16px;

  background: #fff;
}


.dispatcher-group-runtime > div {
  min-height: 68px;

  padding:
    10px
    13px;

  border-right:
    1px solid #e4e9ec;

  background:
    transparent;
}


.dispatcher-group-runtime > div:last-child {
  border-right: 0;
}


.dispatcher-group-runtime span {
  font-size: 9px;

  letter-spacing: .055em;
}


.dispatcher-group-runtime strong {
  margin-top: 2px;

  font-size: 14px;
}


/* Speaker sigue siendo principal */

.dispatcher-group-runtime
  > div:first-child strong {
  font-size: 16px;
}


/* ------------------------------------------
 * ZONA DE ACCIONES
 * ------------------------------------------ */

.dispatcher-group-actions {
  display: grid;

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

  gap: 9px;

  align-items: stretch;

  margin: 0;

  padding:
    13px
    16px
    16px;

  border-top:
    1px solid #e5e9ec;

  background:
    #fafbfc;
}


/*
 * Abrir grupo siempre secundario,
 * segunda columna.
 */

.dispatcher-group-actions
  [data-open-group] {
  grid-column: 2;
  grid-row: 1;

  min-width: 118px;
  min-height: 54px;

  padding:
    9px
    13px;

  align-self: stretch;
}


/* ------------------------------------------
 * FUERA DEL GRUPO
 * ------------------------------------------ */


/*
 * PTT no debe mostrarse como un gran
 * bloque gris cuando aun no hemos entrado.
 */

.dispatcher-group-card.media-disconnected
  [data-ptt-group] {
  display: none !important;
}


/*
 * Entrar pasa a ser la accion principal.
 */

.dispatcher-group-card.media-disconnected
  [data-enter-group] {
  display: inline-flex;

  grid-column: 1;
  grid-row: 1;

  align-items: center;
  justify-content: center;

  width: 100%;
  min-width: 0;
  min-height: 54px;

  padding:
    10px
    18px;

  border-color:
    #2563eb;

  border-radius:
    10px;

  background:
    #2563eb;

  color:
    #fff;

  font-size:
    14px;

  font-weight:
    800;

  letter-spacing:
    .015em;

  box-shadow:
    0 2px 4px
    rgba(37,99,235,.16);
}


.dispatcher-group-card.media-disconnected
  [data-enter-group]:not(:disabled):hover {
  background:
    #1d4ed8;

  border-color:
    #1d4ed8;
}


/*
 * Si el grupo no permite SIP,
 * sigue siendo visible pero claramente
 * no operativo.
 */

.dispatcher-group-card.media-disconnected
  [data-enter-group]:disabled {
  background:
    #aeb7be;

  border-color:
    #aeb7be;

  color:
    #fff;

  cursor:
    not-allowed;

  box-shadow:
    none;
}


/* Icono entrada */

.dispatcher-group-card.media-disconnected
  [data-enter-group]::before {
  content: "";

  width: 18px;
  height: 18px;

  flex: 0 0 18px;

  margin-right:
    7px;

  background:
    currentColor;

  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h13M12 7l5 5-5 5M20 4v16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h13M12 7l5 5-5 5M20 4v16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  -webkit-mask-repeat:
    no-repeat;

  mask-repeat:
    no-repeat;

  -webkit-mask-position:
    center;

  mask-position:
    center;

  -webkit-mask-size:
    contain;

  mask-size:
    contain;
}


/* ------------------------------------------
 * DENTRO DEL GRUPO
 * ------------------------------------------ */


/*
 * "Audio conectado" deja de ocupar sitio.
 * La propia tarjeta y el status superior
 * ya indican la conexion.
 */

.dispatcher-group-card.media-connected
  [data-enter-group] {
  display:
    none !important;
}


/*
 * PTT pasa a ocupar toda la accion principal.
 */

.dispatcher-group-card.media-connected
  [data-ptt-group] {
  display:
    inline-flex !important;

  grid-column:
    1;

  grid-row:
    1;

  align-items:
    center;

  justify-content:
    center;

  width:
    100%;

  min-width:
    0;

  min-height:
    64px;

  margin:
    0;

  border-radius:
    10px;

  background:
    #2563eb;

  color:
    #fff;

  font-size:
    16px;

  font-weight:
    800;
}


.dispatcher-group-card.media-connected
  [data-ptt-group]:not(:disabled):hover {
  background:
    #1d4ed8;
}


.dispatcher-group-card.media-connected
  [data-ptt-group].is-pressed,
.dispatcher-group-card.media-connected
  [data-ptt-group]:active {
  background:
    #dc2626;
}


/*
 * Tarjeta conectada:
 * barra superior verde discreta.
 */

.dispatcher-group-card.media-connected {
  border-color:
    #9fbdaa;
}


.dispatcher-group-card.media-connected::before {
  height:
    4px;

  background:
    #5f8b73;
}


/* ------------------------------------------
 * CABECERA MAS COMPACTA
 * ------------------------------------------ */

.dispatcher-group-header {
  padding:
    13px
    16px
    11px;
}


.dispatcher-group-name {
  font-size:
    18px;
}


.dispatcher-group-code {
  margin-top:
    2px;
}


/* ------------------------------------------
 * TABLET
 * ------------------------------------------ */

@media (max-width: 1100px) {

  .dispatcher-group-runtime {
    grid-template-columns:
      minmax(200px, 1.5fr)
      repeat(
        2,
        minmax(80px, .65fr)
      )
      repeat(
        3,
        minmax(72px, .58fr)
      );
  }

}


/* ------------------------------------------
 * MOVIL
 * ------------------------------------------ */

@media (max-width: 700px) {

  /*
   * Datos en dos filas de tres columnas.
   */

  .dispatcher-group-runtime {
    grid-template-columns:
      minmax(0, 1.6fr)
      minmax(75px, .65fr)
      minmax(60px, .55fr);

    padding:
      0
      13px;
  }


  .dispatcher-group-runtime > div {
    min-height:
      58px;

    padding:
      8px
      9px;

    border-bottom:
      1px solid #e7ebee;
  }


  .dispatcher-group-runtime
    > div:nth-child(3),
  .dispatcher-group-runtime
    > div:nth-child(6) {
    border-right:
      0;
  }


  .dispatcher-group-runtime
    > div:nth-child(n+4) {
    border-bottom:
      0;
  }


  .dispatcher-group-runtime strong {
    font-size:
      13px;
  }


  .dispatcher-group-runtime
    > div:first-child strong {
    font-size:
      14px;
  }


  /*
   * Acciones:
   * principal a todo el ancho,
   * detalle debajo.
   */

  .dispatcher-group-actions {
    grid-template-columns:
      1fr;

    gap:
      7px;

    padding:
      11px
      13px
      13px;
  }


  .dispatcher-group-actions
    [data-open-group] {
    grid-column:
      1;

    grid-row:
      2;

    width:
      100%;

    min-height:
      42px;
  }


  .dispatcher-group-card.media-disconnected
    [data-enter-group] {
    grid-column:
      1;

    min-height:
      64px;

    font-size:
      15px;
  }


  .dispatcher-group-card.media-connected
    [data-ptt-group] {
    grid-column:
      1;

    min-height:
      94px;

    font-size:
      18px;
  }

}


/* ------------------------------------------
 * MUY ESTRECHO
 * ------------------------------------------ */

@media (max-width: 420px) {

  .dispatcher-group-header {
    padding:
      12px;
  }


  .dispatcher-group-header-status {
    gap:
      4px;
  }


  .dispatcher-group-runtime {
    padding:
      0
      10px;
  }


  .dispatcher-group-runtime > div {
    padding:
      8px
      6px;
  }


  .dispatcher-group-actions {
    padding:
      10px
      12px
      12px;
  }

}



/* ==================================================
 * GRS_DISPATCHER_VIDEO_CSS_V3
 * ================================================== */

.dispatcher-video-console {
  overflow: hidden;

  width: 100%;

  border:
    1px solid #d7dde1;

  border-radius:
    11px;

  background:
    #fff;

  box-shadow:
    0 1px 3px
    rgba(15,23,42,.05);
}


.dispatcher-video-console-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 14px;

  padding:
    10px
    13px;

  border-bottom:
    1px solid #dfe4e7;

  background:
    #f7f9fa;
}


.dispatcher-video-console-kicker {
  margin-bottom: 2px;

  color:
    #83909a;

  font-size:
    9px;

  font-weight:
    750;

  letter-spacing:
    .09em;
}


.dispatcher-video-console-header strong {
  color:
    #293640;

  font-size:
    14px;
}


/* SIP */

.dispatcher-video-sip {
  display: inline-flex;
  align-items: center;

  gap: 6px;

  padding:
    5px
    8px;

  border-radius:
    999px;

  background:
    #edf1f3;

  color:
    #75818a;

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    .04em;
}


.dispatcher-video-sip > span {
  width: 7px;
  height: 7px;

  border-radius:
    50%;

  background:
    currentColor;
}


.dispatcher-video-sip.online {
  background:
    #dce9e1;

  color:
    #3f6953;
}


.dispatcher-video-sip.offline {
  background:
    #f0dddd;

  color:
    #8b4a4a;
}


/* DOS SUPERFICIES */

.dispatcher-video-grid {
  display: grid;

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

  gap: 1px;

  background:
    #dce1e5;
}


.dispatcher-video-card {
  min-width: 0;

  background:
    #11161b;
}


/* CABECERA DE CADA VIDEO */

.dispatcher-video-card-header {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 10px;

  min-height: 44px;

  padding:
    7px
    10px;

  background:
    #20272d;

  color:
    #dce3e8;
}


.dispatcher-video-card-header
  > div:first-child {
  min-width: 0;
}


.dispatcher-video-card-header
  > div:first-child
  > span {
  display: block;

  color:
    #99a6af;

  font-size:
    9px;

  font-weight:
    750;

  letter-spacing:
    .06em;
}


.dispatcher-video-card-header strong {
  display: block;

  margin-top: 2px;

  overflow: hidden;

  text-overflow: ellipsis;
  white-space: nowrap;

  color:
    #f1f5f7;

  font-size:
    11px;
}


.dispatcher-video-card-header
  strong span {
  display: inline;

  color: inherit;

  font-size: inherit;
  font-weight: inherit;

  letter-spacing: 0;
}


/* ESTADO DE VIDEO */

.dispatcher-video-card-state {
  flex: 0 0 auto;

  padding:
    4px
    6px;

  border-radius:
    999px;

  background:
    rgba(255,255,255,.08);

  color:
    #9ea9b1;

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    .055em;
}


.dispatcher-video-card-state.active {
  background:
    rgba(34,197,94,.16);

  color:
    #86efac;
}


.dispatcher-video-card-state.remote {
  background:
    rgba(59,130,246,.14);

  color:
    #93c5fd;
}


/* VIDEO */

.dispatcher-video-surface {
  position: relative;

  overflow: hidden;

  aspect-ratio:
    16 / 9;

  min-height:
    190px;

  background:
    #050708;
}


.dispatcher-video-surface video {
  position: relative;

  z-index: 2;

  display: block;

  width:
    100% !important;

  height:
    100% !important;

  max-width:
    none !important;

  max-height:
    none !important;

  border-radius:
    0 !important;

  object-fit:
    contain;

  background:
    #050708 !important;
}


/* PLACEHOLDER */

.dispatcher-video-placeholder {
  position: absolute;

  inset: 0;

  z-index: 1;

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 8px;

  color:
    #6f7c85;

  pointer-events:
    none;
}


.dispatcher-video-placeholder svg {
  width: 31px;
  height: 31px;

  opacity: .7;
}


.dispatcher-video-placeholder span {
  font-size: 10px;

  font-weight: 600;
}


/*
 * syncRemoteMediaElements usa display:none
 * cuando no existe track.
 */

.dispatcher-video-surface
  video[style*="display: none"] {
  position: absolute;

  visibility: hidden;
}


/*
 * Neutralizamos estilos históricos del
 * antiguo dispatcherVideoPanel.
 */

#dispatcherVideoPanel {
  display:
    block !important;

  width:
    100%;

  max-width:
    none;

  margin:
    0 !important;
}


#dispatcherVideoPanel
  > .dispatcher-video-console-header {
  margin:
    0 !important;
}


/* TABLET */

@media (max-width: 900px) {

  .dispatcher-video-surface {
    min-height:
      170px;
  }

}


/* MOVIL */

@media (max-width: 650px) {

  .dispatcher-video-console-header {
    padding:
      9px
      10px;
  }


  .dispatcher-video-grid {
    grid-template-columns:
      1fr;
  }


  .dispatcher-video-card-header {
    min-height:
      40px;

    padding:
      7px
      9px;
  }


  .dispatcher-video-surface {
    min-height:
      175px;

    aspect-ratio:
      4 / 3;
  }

}


@media (max-width: 420px) {

  .dispatcher-video-surface {
    min-height:
      150px;
  }

}



/* ==================================================
 * GRS_DISPATCHER_TOOLBAR_CSS_V3
 * ================================================== */


/*
 * Barra superior:
 * acciones compactas y jerarquia clara.
 */

.dispatcher-toolbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 7px;

  flex-wrap: wrap;
}


/* Controles secundarios */

.dispatcher-toolbar-actions
  .secondary-button {
  min-height: 36px;

  padding:
    7px
    10px;

  border:
    1px solid #c8d0d6;

  border-radius:
    8px;

  background:
    #fff;

  color:
    #43525e;

  box-shadow:
    none;

  font-size:
    11px;

  font-weight:
    650;
}


/* Hover */

.dispatcher-toolbar-actions
  .secondary-button:not(:disabled):hover {
  border-color:
    #adb8c0;

  background:
    #edf2f5;
}


/* VIDEO */

#dispatcherVideoToggle {
  color:
    #355f88;
}


#dispatcherVideoToggle:not(:disabled)::before {
  opacity:
    .9;
}


/*
 * SIP conectado no debe parecer un boton
 * de accion principal.
 */

#dispatcherMediaConnect:disabled {
  border-color:
    #cddfd4;

  background:
    #e6f0ea;

  color:
    #46705a;

  opacity:
    1;

  cursor:
    default;
}


/*
 * Si por el codigo actual permanece habilitado
 * aunque el SIP ya este registrado, la propia
 * etiqueta "SIP conectado" se mantiene discreta.
 */

.dispatcher-toolbar-connect {
  min-width:
    120px;
}


/* Desconexion como accion secundaria */

.dispatcher-toolbar-disconnect {
  color:
    #8b4a4a !important;

  border-color:
    #dfcaca !important;
}


.dispatcher-toolbar-disconnect:hover {
  background:
    #f7eeee !important;
}


/*
 * Actualizar y video:
 * menor peso visual.
 */

.dispatcher-toolbar-tool {
  white-space:
    nowrap;
}


/* ------------------------------------------
 * PANEL TECNICO
 * ------------------------------------------ */

.dispatcher-tech-actions {
  display: flex;
  align-items: center;

  gap: 7px;

  margin:
    8px
    0
    6px;
}


.dispatcher-tech-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap:
    6px;

  min-height:
    32px;

  padding:
    6px
    9px;

  border:
    1px solid #ccd4d9;

  border-radius:
    7px;

  background:
    #fff;

  color:
    #596772;

  font-size:
    10px;

  cursor:
    pointer;
}


.dispatcher-tech-button::before {
  content: "";

  width:
    14px;

  height:
    14px;

  flex:
    0 0 14px;

  background:
    currentColor;

  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 17V9M9 20V4M14 16V8M19 19V5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");

  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 17V9M9 20V4M14 16V8M19 19V5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");

  -webkit-mask-repeat:
    no-repeat;

  mask-repeat:
    no-repeat;

  -webkit-mask-position:
    center;

  mask-position:
    center;

  -webkit-mask-size:
    contain;

  mask-size:
    contain;
}


/*
 * El details completo queda realmente
 * como herramienta de soporte/laboratorio.
 */

.dispatcher-tech-details[open] {
  padding-bottom:
    5px;
}


/* ------------------------------------------
 * TABLET
 * ------------------------------------------ */

@media (max-width: 900px) {

  .dispatcher-toolbar-actions {
    justify-content:
      flex-start;

    width:
      100%;
  }

}


/* ------------------------------------------
 * MOVIL
 * ------------------------------------------ */

@media (max-width: 650px) {

  .dispatcher-toolbar-actions {
    display:
      grid;

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

    gap:
      6px;
  }


  .dispatcher-toolbar-actions
    .secondary-button {
    width:
      100%;

    min-width:
      0;

    min-height:
      42px;

    padding:
      7px
      8px;

    font-size:
      11px;
  }


  /*
   * Conectar / SIP conectado ocupa una fila
   * completa para evitar apretar el texto.
   */

  #dispatcherMediaConnect {
    grid-column:
      1 / -1;
  }


  /*
   * Cuando existe Desconectar, tambien
   * queda claramente separado.
   */

  #dispatcherMediaDisconnect {
    grid-column:
      1 / -1;
  }

}



/* ==================================================
 * GRS_VIDEO_FULL_COVER_V1
 *
 * El vídeo llena completamente su superficie.
 * Puede existir un recorte mínimo lateral/vertical
 * cuando cambia la relación de aspecto.
 * ================================================== */


/* Dispatcher local + remoto */

.dispatcher-video-surface video,
#dispatcherLocalVideo,
#dispatcherRemoteVideo {
  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;
  object-position: center center;

  background: #000 !important;
}


/* Vídeo remoto flotante */

.grs-floating-video-body video,
#grsFloatingRemoteVideoElement {
  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;
  object-position: center center;

  background: #000 !important;
}



/* ==================================================
 * GRS_VIDEO_SURFACE_FULL_FIX_V2
 *
 * Neutraliza reglas antiguas:
 *   max-height:260px !important
 *   aspect-ratio heredado
 *
 * El video ocupa toda la superficie V3.
 * ================================================== */

.dispatcher-video-surface {
  position: relative;

  overflow: hidden;

  width: 100%;

  aspect-ratio: 16 / 9;

  min-height: 0;

  background: #000;
}


/*
 * Es importante sobrescribir también
 * max-height porque Dispatcher V2 dejó
 * max-height:260px !important.
 */

.dispatcher-video-surface
  #dispatcherLocalVideo,

.dispatcher-video-surface
  #dispatcherRemoteVideo {

  position: absolute !important;

  inset: 0 !important;

  z-index: 2;

  display: block;

  width: 100% !important;
  height: 100% !important;

  min-width: 100% !important;
  min-height: 100% !important;

  max-width: none !important;
  max-height: none !important;

  margin: 0 !important;

  aspect-ratio: auto !important;

  border-radius: 0 !important;

  object-fit: cover !important;
  object-position: center center !important;

  background: #000 !important;
}


/*
 * Cuando Dispatcher decide que no existe
 * vídeo remoto, respetamos el hide.
 */

.dispatcher-video-surface
  #dispatcherRemoteVideo[style*="display: none"] {

  display: none !important;
}


/*
 * El placeholder queda por debajo del vídeo.
 */

.dispatcher-video-placeholder {
  z-index: 1;
}


/* MOVIL */

@media (max-width: 650px) {

  .dispatcher-video-surface {
    aspect-ratio: 4 / 3;
  }

}



/* ==================================================
 * GRS_DISPATCHER_VIDEO_HEADER_FIX_V1
 *
 * Neutraliza selectores heredados de la antigua
 * estructura #dispatcherVideoPanel > div.
 * ================================================== */


/* CABECERA PRINCIPAL */

#dispatcherVideoPanel.dispatcher-video-console
  > .dispatcher-video-console-header {

  display: flex !important;

  align-items: center !important;
  justify-content: space-between !important;

  gap: 14px !important;

  min-height: 46px;

  margin: 0 !important;

  padding:
    10px
    13px !important;

  border-bottom:
    1px solid #dfe4e7 !important;

  background:
    #f7f9fa !important;

  color:
    #293640 !important;
}


/*
 * Neutraliza concretamente:
 *
 * #dispatcherVideoPanel > div > div:first-child
 *
 * de la versión anterior.
 */

#dispatcherVideoPanel.dispatcher-video-console
  > .dispatcher-video-console-header
  > div:first-child {

  margin: 0 !important;

  padding: 0 !important;

  background:
    transparent !important;

  color:
    inherit !important;
}


/* COMUNICACIONES DE GRUPO */

#dispatcherVideoPanel
  .dispatcher-video-console-kicker {

  display: block;

  margin:
    0
    0
    3px !important;

  padding: 0 !important;

  background:
    transparent !important;

  color:
    #75838e !important;

  font-size:
    9px !important;

  font-weight:
    800 !important;

  letter-spacing:
    .09em !important;
}


/* VIDEO OPERATIVO */

#dispatcherVideoPanel
  .dispatcher-video-console-header
  strong {

  display: block;

  margin: 0 !important;

  color:
    #26343e !important;

  font-size:
    14px !important;

  font-weight:
    750 !important;

  line-height:
    1.2;
}


/* Mantener el badge SIP independiente */

#dispatcherVideoPanel
  .dispatcher-video-sip {

  color:
    #75818a !important;
}


#dispatcherVideoPanel
  .dispatcher-video-sip.online {

  background:
    #dce9e1 !important;

  color:
    #3f6953 !important;
}


#dispatcherVideoPanel
  .dispatcher-video-sip.offline {

  background:
    #f0dddd !important;

  color:
    #8b4a4a !important;
}


/* BADGE CAMARA */

.dispatcher-video-card.local
  .dispatcher-video-card-state.active {

  background:
    rgba(34,197,94,.16);

  color:
    #86efac;
}



/* ==================================================
 * GRS_OPERATIONAL_MAP_CSS_V1B
 * ================================================== */

.op-map {
  display: flex;
  flex-direction: column;
  gap: 10px;

  min-height:
    calc(100vh - 145px);
}


.op-map-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  padding:
    10px 12px;

  border:
    1px solid #d7dde1;

  border-radius:
    9px;

  background:
    #fff;
}


.op-map-header strong {
  display: block;

  color:
    #25333e;

  font-size:
    15px;
}


.op-map-header
  > div:first-child
  > span {
  display: block;

  margin-top:
    2px;

  color:
    #7c8891;

  font-size:
    10px;
}


.op-map-kpis {
  display: flex;
  gap: 6px;

  flex-wrap: wrap;
}


.op-map-kpis span {
  padding:
    5px 8px;

  border-radius:
    999px;

  background:
    #edf1f3;

  color:
    #68757e;

  font-size:
    9px;

  font-weight:
    800;

  text-transform:
    uppercase;
}


.op-map-kpis .online {
  background:
    #dce9e1;

  color:
    #3f6953;
}


.op-map-kpis .alarm {
  background:
    #f7dddd;

  color:
    #9d3434;
}


.op-map-layout {
  display: grid;

  grid-template-columns:
    230px
    minmax(0, 1fr)
    285px;

  flex: 1;

  min-height:
    620px;

  overflow:
    hidden;

  border:
    1px solid #d7dde1;

  border-radius:
    10px;

  background:
    #fff;
}


.op-map-sidebar {
  border-right:
    1px solid #dce2e6;

  background:
    #f8fafb;
}


.op-map-detail {
  padding:
    14px;

  border-left:
    1px solid #dce2e6;

  background:
    #f8fafb;
}


.op-map-section-title {
  padding:
    11px 12px;

  border-bottom:
    1px solid #dfe4e7;

  color:
    #65727d;

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    .09em;
}


.op-map-filters {
  display: flex;
  flex-direction: column;

  gap:
    8px;

  padding:
    10px;

  border-bottom:
    1px solid #e1e6e9;
}


.op-map-filters
  input[type="search"] {
  width:
    100%;

  min-height:
    34px;

  padding:
    6px 8px;

  border:
    1px solid #cbd4da;

  border-radius:
    6px;

  background:
    #fff;

  font-size:
    11px;
}


.op-map-filters label {
  display: flex;
  align-items: center;

  gap:
    6px;

  color:
    #53616c;

  font-size:
    10px;
}


.op-map-resources {
  max-height:
    calc(100vh - 330px);

  overflow:
    auto;
}


.op-map-resource {
  width:
    100%;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  padding:
    10px;

  border:
    0;

  border-bottom:
    1px solid #e4e8eb;

  background:
    transparent;

  text-align:
    left;

  cursor:
    pointer;
}


.op-map-resource:hover {
  background:
    #eef3f6;
}


.op-map-resource.selected {
  background:
    #e4edf5;
}


.op-map-resource.emergency {
  background:
    #fff2f2;
}


.op-map-resource > i {
  width:
    8px;

  height:
    8px;

  flex:
    0 0 8px;

  border-radius:
    50%;
}


.op-map-resource
  > i.online {
  background:
    #4b8965;
}


.op-map-resource
  > i.offline {
  background:
    #9aa4ab;
}


.op-map-resource
  > span {
  min-width:
    0;

  flex:
    1;
}


.op-map-resource strong {
  display:
    block;

  overflow:
    hidden;

  color:
    #293640;

  font-size:
    11px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.op-map-resource small {
  display:
    block;

  margin-top:
    2px;

  overflow:
    hidden;

  color:
    #818d96;

  font-size:
    9px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.op-map-resource > b {
  padding:
    3px 5px;

  border-radius:
    999px;

  background:
    #d93636;

  color:
    #fff;

  font-size:
    8px;
}


.op-map-main {
  min-width:
    0;

  background:
    #e8ecef;
}


.op-map-canvas {
  width:
    100%;

  height:
    100%;

  min-height:
    620px;
}


.op-map-center-message {
  height:
    100%;

  min-height:
    500px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  padding:
    25px;

  color:
    #78848d;

  text-align:
    center;
}


.op-map-center-message strong {
  color:
    #34424d;
}


.op-map-empty-detail {
  min-height:
    300px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  color:
    #7d8992;

  text-align:
    center;
}


.op-map-empty-detail strong {
  color:
    #43515c;

  font-size:
    12px;
}


.op-map-empty-detail span {
  max-width:
    190px;

  font-size:
    10px;
}


.op-map-detail-head {
  display:
    flex;

  justify-content:
    space-between;

  gap:
    10px;

  padding-bottom:
    12px;

  border-bottom:
    1px solid #dfe4e7;
}


.op-map-detail-head small {
  display:
    block;

  color:
    #89949c;

  font-size:
    8px;

  font-weight:
    800;
}


.op-map-detail-head strong {
  display:
    block;

  margin-top:
    3px;

  color:
    #25333d;

  font-size:
    15px;
}


.op-map-detail-head span {
  display:
    block;

  color:
    #75818a;

  font-size:
    10px;
}


.op-map-detail-head > b {
  height:
    fit-content;

  padding:
    4px 6px;

  border-radius:
    999px;

  font-size:
    8px;
}


.op-map-detail-head > b.online {
  background:
    #dce9e1;

  color:
    #3f6953;
}


.op-map-detail-head > b.offline {
  background:
    #eceff1;

  color:
    #737d84;
}


.op-map-sos {
  margin-top:
    12px;

  padding:
    9px;

  border-radius:
    7px;

  background:
    #d93636;

  color:
    #fff;

  font-size:
    10px;

  font-weight:
    800;

  text-align:
    center;
}


.op-map-detail-data {
  display:
    grid;

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

  gap:
    1px;

  margin-top:
    12px;

  background:
    #dfe4e7;
}


.op-map-detail-data > div {
  min-width:
    0;

  padding:
    9px;

  background:
    #fff;
}


.op-map-detail-data span {
  display:
    block;

  color:
    #89949c;

  font-size:
    8px;

  text-transform:
    uppercase;
}


.op-map-detail-data strong {
  display:
    block;

  margin-top:
    2px;

  overflow:
    hidden;

  color:
    #34424d;

  font-size:
    10px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.op-map-actions {
  display:
    grid;

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

  gap:
    7px;

  margin-top:
    14px;
}


.op-map-actions button {
  width:
    100%;

  min-height:
    38px;
}


.op-map-none {
  padding:
    20px 12px;

  color:
    #849099;

  font-size:
    10px;

  text-align:
    center;
}


@media (max-width: 1100px) {

  .op-map-layout {
    grid-template-columns:
      200px
      minmax(0,1fr)
      245px;
  }

}


@media (max-width: 650px) {

  .op-map {
    min-height:
      auto;
  }


  .op-map-header {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .op-map-layout {
    display:
      flex;

    flex-direction:
      column;

    min-height:
      0;
  }


  .op-map-sidebar {
    border-right:
      0;

    border-bottom:
      1px solid #dce2e6;
  }


  .op-map-resources {
    max-height:
      180px;
  }


  .op-map-canvas {
    min-height:
      430px;
  }


  .op-map-detail {
    border-left:
      0;

    border-top:
      1px solid #dce2e6;
  }

}



/* ==================================================
 * GRS_OPERATIONAL_MAP_CSS_V3
 * ================================================== */

.op-map-groups {
  max-height: 180px;
  overflow: auto;

  border-bottom:
    1px solid #e1e6e9;
}


.op-map-group {
  width: 100%;

  display: flex;
  align-items: center;

  gap: 8px;

  padding: 9px 10px;

  border: 0;
  border-bottom:
    1px solid #e5e9ec;

  background:
    #fff;

  text-align: left;

  cursor: pointer;
}


.op-map-group:hover {
  background:
    #eef3f6;
}


.op-map-group > i {
  width: 10px;
  height: 10px;

  flex:
    0 0 10px;

  border-radius:
    50%;
}


.op-map-group > span {
  min-width: 0;

  flex: 1;
}


.op-map-group strong {
  display: block;

  overflow: hidden;

  color:
    #34414b;

  font-size: 10px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  text-transform:
    uppercase;
}


.op-map-group small {
  display: block;

  margin-top: 2px;

  color:
    #849099;

  font-size: 8px;
}


.op-map-group > b {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-width: 20px;
  height: 20px;

  padding: 0 5px;

  border-radius:
    999px;

  background:
    #d93636;

  color:
    #fff;

  font-size: 8px;
}


.op-map-resource-location {
  margin-top: 3px;

  font-size: 8px !important;

  font-weight: 700;

  letter-spacing:
    .02em;
}


.op-map-resource.emergency {
  border-left:
    3px solid #d93636;
}


.op-map-resource.emergency
  strong {
  color:
    #9c3030;
}


@media (max-width: 650px) {

  .op-map-groups {
    max-height:
      125px;
  }

}



/* ==================================================
 * GRS_OPERATIONAL_MAP_CSS_V4
 * Runtime / PTT / Incidentes
 * ================================================== */

.op-map-actions {
  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );
}


.op-map-actions
  .op-map-incident-action {
  grid-column:
    1 / -1;
}


.op-map-ptt {
  user-select:
    none;

  -webkit-user-select:
    none;

  touch-action:
    none;
}


.op-map-ptt.is-pressed {
  transform:
    translateY(1px);

  box-shadow:
    inset 0 2px 5px
    rgba(0,0,0,.2);
}


#opMapIncidentEditor {
  margin-top:
    12px;
}


.op-map-incident-editor {
  padding:
    11px;

  border:
    1px solid #d8dfe3;

  border-radius:
    8px;

  background:
    #fff;
}


.op-map-incident-head {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    8px;

  margin-bottom:
    10px;
}


.op-map-incident-head small {
  display:
    block;

  color:
    #8a959d;

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    .08em;
}


.op-map-incident-head strong {
  display:
    block;

  margin-top:
    2px;

  color:
    #293740;

  font-size:
    12px;
}


.op-map-incident-head
  > button {
  width:
    28px;

  height:
    28px;

  border:
    0;

  border-radius:
    6px;

  background:
    #eef1f3;

  color:
    #65727b;

  font-size:
    18px;

  cursor:
    pointer;
}


.op-map-incident-editor
  > label,
.op-map-incident-row
  label {
  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;

  margin-top:
    8px;

  color:
    #66737c;

  font-size:
    9px;

  font-weight:
    700;
}


.op-map-incident-editor
  input,
.op-map-incident-editor
  select,
.op-map-incident-editor
  textarea {
  width:
    100%;

  box-sizing:
    border-box;

  padding:
    7px 8px;

  border:
    1px solid #ccd4d9;

  border-radius:
    6px;

  background:
    #fff;

  color:
    #2f3b44;

  font: inherit;

  font-size:
    10px;
}


.op-map-incident-editor
  textarea {
  resize:
    vertical;
}


.op-map-incident-row {
  display:
    grid;

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

  gap:
    7px;
}


.op-map-incident-context {
  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;

  margin-top:
    10px;

  padding:
    8px;

  border-radius:
    6px;

  background:
    #f3f6f7;

  color:
    #75818a;

  font-size:
    8px;
}


.op-map-incident-context strong {
  color:
    #45525c;
}


.op-map-incident-status {
  min-height:
    16px;

  margin-top:
    8px;

  color:
    #56656f;

  font-size:
    9px;
}


.op-map-incident-buttons {
  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    7px;

  margin-top:
    8px;
}


.op-map-incident-buttons button {
  width:
    100%;
}


@media (max-width:650px) {

  .op-map-actions {
    grid-template-columns:
      1fr;
  }


  .op-map-actions
    .op-map-incident-action {
    grid-column:
      auto;
  }


  .op-map-incident-row {
    grid-template-columns:
      1fr;
  }

}



/* ==================================================
 * GRS_OPERATIONAL_MAP_CSS_V5
 * Command & Control
 * ================================================== */

.op-map-layer-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;

  padding: 8px 10px;

  border-bottom:
    1px solid #dfe5e8;

  background:
    #f7f9fa;
}


.op-map-layer-toolbar button {
  padding:
    6px 10px;

  border:
    1px solid #d1d9de;

  border-radius:
    999px;

  background:
    #fff;

  color:
    #65727b;

  font-size:
    9px;

  font-weight:
    700;

  cursor:
    pointer;
}


.op-map-layer-toolbar button.active {
  border-color:
    #6f93af;

  background:
    #e7f0f6;

  color:
    #315f85;
}


.op-map-layer-toolbar button:hover {
  background:
    #edf3f6;
}


.op-map-resource[data-state="live"] {
  border-left:
    3px solid #3c8167;
}


.op-map-resource[data-state="online-no-gps"] {
  border-left:
    3px solid #c39342;
}


.op-map-resource[data-state="last-known"] {
  border-left:
    3px solid #7f8990;
}


.op-map-resource[data-state="offline"] {
  opacity:
    .68;
}


@media (max-width:650px) {

  .op-map-layer-toolbar {
    overflow-x:
      auto;

    white-space:
      nowrap;
  }

}



/* ==================================================
 * GRS_OPERATIONAL_MAP_CSS_V6B
 * Tracking historico
 * ================================================== */

.op-map-track-panel {
  margin-top: 12px;
  padding: 10px;
  border: 1px solid #dce3e7;
  border-radius: 8px;
  background: #f8fafb;
}

.op-map-track-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.op-map-track-head > strong {
  font-size: 11px;
  color: #34434d;
}

.op-map-track-ranges {
  display: flex;
  gap: 4px;
}

.op-map-track-ranges button {
  padding: 5px 8px;
  border: 1px solid #ccd5da;
  border-radius: 999px;
  background: #fff;
  color: #66747d;
  font-size: 9px;
  cursor: pointer;
}

.op-map-track-ranges button.active {
  background: #e6f0f6;
  border-color: #7797ad;
  color: #315f85;
}

.op-map-track-status {
  margin: 8px 0;
  color: #687781;
  font-size: 9px;
}

.op-map-track-metrics {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0,1fr));
  gap: 6px;
  margin-bottom: 8px;
}

.op-map-track-metrics > div {
  padding: 6px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #e0e5e8;
}

.op-map-track-metrics span {
  display: block;
  font-size: 8px;
  color: #88949b;
}

.op-map-track-metrics strong {
  display: block;
  margin-top: 2px;
  color: #3d4b55;
  font-size: 9px;
}



/* ==================================================
 * GRS_MAP_COMMAND_ACTIONS_V6C
 *
 * El mapa es Command & Control.
 * No presentar PTT de grupo como llamada individual.
 * ================================================== */

[data-map-connect-group],
[data-map-ptt],
[data-map-video] {
  display: none !important;
}


.op-map-actions {
  grid-template-columns:
    1fr 1fr;
}


.op-map-track-custom {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 6px;

  margin:
    8px 0;
}


.op-map-track-custom label {
  display: flex;

  flex-direction: column;

  gap: 3px;

  color: #7a8790;

  font-size: 8px;

  font-weight: 700;
}


.op-map-track-custom input {
  width: 100%;

  box-sizing: border-box;

  padding: 6px;

  border:
    1px solid #ccd5da;

  border-radius: 6px;

  background: #fff;

  color: #34434d;

  font-size: 9px;
}


.op-map-track-custom
  button {
  grid-column:
    1 / -1;
}


@media (max-width:650px) {

  .op-map-track-custom {
    grid-template-columns:
      1fr;
  }


  .op-map-track-custom
    button {
    grid-column:
      auto;
  }

}



/* ==================================================
 * GRS_MAP_TRACK_UX_V6E2
 * Panel lateral compacto
 * ================================================== */

.op-map-track-panel {
  padding: 10px;
}

.op-map-track-head {
  align-items: flex-start;
  gap: 8px;
}

.op-map-track-ranges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.op-map-track-ranges button {
  min-width: 32px;
  padding: 5px 7px;
  line-height: 1.05;
}

.op-map-track-custom[hidden] {
  display: none !important;
}

.op-map-track-custom {
  grid-template-columns:
    minmax(0,1fr)
    minmax(0,1fr);

  gap: 6px;

  margin:
    8px 0 4px;
}

.op-map-track-custom input {
  min-width: 0;
}

.op-map-track-status {
  margin:
    8px 0 4px;
}

.op-map-track-metrics {
  margin-top: 7px;
}

.op-map-track-panel
[data-track-clear][hidden] {
  display: none !important;
}

.op-map-track-panel
[data-track-clear] {
  width: 100%;
  margin-top: 5px;
}


/*
 * Panel lateral estrecho:
 * cabecera y rangos en filas distintas.
 */
@media (max-width:1500px) {

  .op-map-track-head {
    display: block;
  }

  .op-map-track-ranges {
    margin-top: 7px;
  }

}


@media (max-width:1100px) {

  .op-map-track-custom {
    grid-template-columns:
      1fr;
  }

  .op-map-track-metrics {
    grid-template-columns:
      1fr;
  }

}