/* =========================================================
   TSUNAMIGO
   DASHBOARD PERSONAL

   Archivo:
   assets/css/dashboard.css

   Objetivo:
   - Un usuario.
   - Sus propios recorridos.
   - Mapa principal.
   - Métricas del recorrido seleccionado.
   - Perfil de elevación.
   - Historial compacto en panel izquierdo.
========================================================= */


/* =========================================================
   1. VARIABLES
========================================================= */

:root {
  --color-bg: #030b13;
  --color-bg-soft: #06121f;

  --color-panel: #081724;
  --color-panel-soft: #0b1d2c;
  --color-panel-hover: #102638;

  --color-border: rgba(145, 180, 204, 0.16);
  --color-border-strong: rgba(34, 197, 246, 0.34);

  --color-primary: #22c5f6;
  --color-primary-strong: #1687d9;
  --color-primary-soft: rgba(34, 197, 246, 0.12);

  --color-text: #f5f9fc;
  --color-text-soft: #b7c7d4;
  --color-text-muted: #7891a5;

  --color-success: #4de0a5;
  --color-success-soft: rgba(77, 224, 165, 0.13);

  --color-warning: #ff9f43;
  --color-warning-soft: rgba(255, 159, 67, 0.14);

  --color-danger: #ff5c67;
  --color-danger-soft: rgba(255, 92, 103, 0.14);

  --shadow-soft:
    0 12px 34px rgba(0, 0, 0, 0.18);

  --shadow-panel:
    0 18px 50px rgba(0, 0, 0, 0.24);

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;

  --header-height: 82px;

  /*
   * Más ancho que el antiguo sidebar
   * porque ahora contiene los recorridos.
   */
  --sidebar-width: 290px;

  --transition-fast: 160ms ease;
  --transition-normal: 240ms ease;
}


/* =========================================================
   2. RESET
========================================================= */

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


html {
  scroll-behavior: smooth;
}


body {
  margin: 0;

  min-width: 320px;
  min-height: 100vh;

  overflow-x: hidden;

  background:
    radial-gradient(
      circle at 80% 5%,
      rgba(34, 197, 246, 0.06),
      transparent 30%
    ),
    var(--color-bg);

  color: var(--color-text);

  font-family:
    Inter,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

  font-size: 16px;
  line-height: 1.5;
}


img {
  display: block;

  max-width: 100%;
}


a {
  color: inherit;

  text-decoration: none;
}


button,
input,
select {
  font: inherit;
}


button,
select {
  cursor: pointer;
}


button {
  color: inherit;
}


h1,
h2,
h3,
p {
  margin-top: 0;
}


h1,
h2,
h3,
strong {
  letter-spacing: -0.02em;
}


::selection {
  background: rgba(34, 197, 246, 0.28);

  color: var(--color-text);
}


/* =========================================================
   3. ACCESIBILIDAD
========================================================= */

.skip-link {
  position: fixed;

  top: -100px;
  left: 16px;

  z-index: 9999;

  padding: 10px 16px;

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

  background: var(--color-primary);

  color: #021019;

  font-weight: 800;

  transition:
    top var(--transition-fast);
}


.skip-link:focus {
  top: 14px;
}


.sr-only {
  position: absolute !important;

  width: 1px !important;
  height: 1px !important;

  padding: 0 !important;
  margin: -1px !important;

  overflow: hidden !important;

  clip: rect(0, 0, 0, 0) !important;

  white-space: nowrap !important;

  border: 0 !important;
}


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

  outline-offset: 3px;
}


/* =========================================================
   4. APP GENERAL
========================================================= */

.dashboard-app {
  min-height: 100vh;
}


.dashboard-app--personal {
  width: 100%;
}


.dashboard-body {
  display: grid;

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

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


.dashboard-main {
  min-width: 0;

  padding: 24px;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.01),
      transparent 180px
    );
}


.dashboard-main--personal {
  width: 100%;
}


/* =========================================================
   5. HEADER PERSONAL
========================================================= */

.dashboard-header {
  position: sticky;

  top: 0;

  z-index: 100;

  display: grid;

  grid-template-columns:
    235px
    minmax(260px, 1fr)
    auto;

  align-items: center;

  gap: 22px;

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

  padding:
    11px 22px;

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

  background:
    linear-gradient(
      90deg,
      rgba(3, 11, 19, 0.99),
      rgba(6, 18, 31, 0.98)
    );

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);
}


.dashboard-brand {
  display: inline-flex;

  align-items: center;

  width: fit-content;
}


.dashboard-brand__logo {
  width: 185px;

  max-height: 56px;

  object-fit: contain;

  object-position:
    left center;
}


/* Contexto */

.dashboard-context {
  display: flex;

  align-items: center;

  min-width: 0;
}


.dashboard-context__heading {
  display: flex;

  flex-direction: column;

  min-width: 0;
}


.dashboard-context__eyebrow {
  color:
    var(--color-text-muted);

  font-size: 0.67rem;

  font-weight: 900;

  letter-spacing: 0.13em;

  text-transform: uppercase;
}


.dashboard-context__title {
  margin-top: 2px;

  overflow: hidden;

  color:
    var(--color-text);

  font-size: 0.95rem;

  text-overflow:
    ellipsis;

  white-space: nowrap;
}


/* Acciones */

.dashboard-header__actions {
  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 14px;
}


/* Estado sincronizado */

.dashboard-account-status {
  display: flex;

  align-items: center;
}


.status-indicator {
  display: inline-flex;

  align-items: center;

  gap: 7px;

  padding:
    5px 9px;

  border-radius:
    999px;

  font-size: 0.69rem;

  font-weight: 800;
}


.status-indicator::before {
  content: "";

  width: 7px;

  height: 7px;

  border-radius: 50%;
}


.status-indicator--online {
  background:
    var(--color-success-soft);

  color:
    var(--color-success);
}


.status-indicator--online::before {
  background:
    var(--color-success);

  box-shadow:
    0 0 0 5px
    rgba(77, 224, 165, 0.1);
}


/* Usuario */

.dashboard-user {
  display: flex;

  align-items: center;

  gap: 10px;

  padding:
    6px 9px;

  border:
    1px solid transparent;

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

  background:
    transparent;

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


.dashboard-user:hover {
  border-color:
    var(--color-border);

  background:
    var(--color-panel);
}


.dashboard-user__avatar {
  display: grid;

  place-items: center;

  width: 38px;

  height: 38px;

  flex-shrink: 0;

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

  border-radius: 50%;

  background:
    linear-gradient(
      145deg,
      rgba(34, 197, 246, 0.22),
      rgba(22, 135, 217, 0.18)
    );

  color:
    var(--color-primary);

  font-size: 0.76rem;

  font-weight: 900;
}


.dashboard-user__identity {
  display: flex;

  flex-direction: column;

  align-items: flex-start;
}


.dashboard-user__identity strong {
  font-size: 0.82rem;
}


.dashboard-user__identity small {
  color:
    var(--color-text-muted);

  font-size: 0.68rem;
}


.dashboard-user__chevron {
  color:
    var(--color-text-muted);
}


/* =========================================================
   6. SIDEBAR PERSONAL
========================================================= */

.dashboard-sidebar {
  position: sticky;

  top:
    var(--header-height);

  display: flex;

  flex-direction: column;

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

  padding:
    18px 12px;

  overflow-y: auto;

  border-right:
    1px solid
    var(--color-border);

  background:
    linear-gradient(
      180deg,
      rgba(6, 18, 31, 0.99),
      rgba(3, 11, 19, 0.99)
    );
}


.dashboard-sidebar--personal {
  gap: 16px;
}


/* Navegación */

.sidebar-nav {
  display: flex;

  flex-direction: column;

  gap: 5px;
}


.sidebar-nav__label {
  margin:
    0 10px 9px;

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

  font-size: 0.65rem;

  font-weight: 900;

  letter-spacing: 0.14em;

  text-transform: uppercase;
}


.sidebar-link {
  position: relative;

  display: flex;

  align-items: center;

  gap: 11px;

  width: 100%;

  padding:
    10px 11px;

  border:
    1px solid transparent;

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

  color:
    var(--color-text-soft);

  font-size: 0.82rem;

  font-weight: 700;

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


.sidebar-link::before {
  content: "";

  position: absolute;

  left: -12px;

  width: 3px;

  height: 21px;

  border-radius:
    0 4px 4px 0;

  background:
    transparent;
}


.sidebar-link img {
  width: 25px;

  height: 25px;

  flex-shrink: 0;

  object-fit: contain;

  opacity: 0.8;
}


.sidebar-link:hover {
  border-color:
    var(--color-border);

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

  color:
    var(--color-text);

  transform:
    translateX(2px);
}


.sidebar-link--active {
  border-color:
    rgba(34, 197, 246, 0.18);

  background:
    linear-gradient(
      90deg,
      rgba(34, 197, 246, 0.16),
      rgba(34, 197, 246, 0.04)
    );

  color:
    var(--color-primary);
}


.sidebar-link--active::before {
  background:
    var(--color-primary);
}


/* =========================================================
   7. PANEL "MIS RECORRIDOS"
========================================================= */

.personal-routes-panel {
  display: flex;

  flex-direction: column;

  min-height: 0;

  padding:
    13px;

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

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

  background:
    linear-gradient(
      145deg,
      rgba(11, 29, 44, 0.84),
      rgba(7, 22, 35, 0.86)
    );
}


.personal-routes-panel__header {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

  padding-bottom:
    10px;

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


.personal-routes-panel__header > div {
  display: flex;

  flex-direction: column;
}


.personal-routes-panel__eyebrow {
  color:
    var(--color-primary);

  font-size: 0.59rem;

  font-weight: 900;

  letter-spacing:
    0.11em;

  text-transform:
    uppercase;
}


.personal-routes-panel__header h2 {
  margin: 2px 0 0;

  font-size: 0.93rem;
}


.personal-routes-panel__refresh {
  display: grid;

  place-items: center;

  width: 31px;

  height: 31px;

  padding: 5px;

  flex-shrink: 0;

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

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

  background:
    rgba(255, 255, 255, 0.02);
}


.personal-routes-panel__refresh:hover {
  border-color:
    var(--color-border-strong);

  background:
    var(--color-primary-soft);
}


.personal-routes-panel__refresh img {
  width: 19px;

  height: 19px;

  object-fit: contain;
}


/* Lista */

.personal-routes-list {
  display: flex;

  flex-direction: column;

  gap: 6px;

  max-height: 365px;

  margin-top: 10px;

  overflow-y: auto;

  scrollbar-width: thin;

  scrollbar-color:
    rgba(34, 197, 246, 0.25)
    transparent;
}


.personal-routes-list::-webkit-scrollbar {
  width: 6px;
}


.personal-routes-list::-webkit-scrollbar-thumb {
  border-radius:
    999px;

  background:
    rgba(34, 197, 246, 0.25);
}


/* Placeholder */

.personal-route-placeholder {
  display: grid;

  place-items: center;

  min-height: 80px;

  padding: 12px;

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

  font-size: 0.7rem;

  text-align: center;
}


/* Tarjeta individual.
   dashboard.js la generará. */

.personal-route-item {
  display: grid;

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

  align-items: center;

  gap: 8px;

  width: 100%;

  padding:
    9px 10px;

  border:
    1px solid
    rgba(145, 180, 204, 0.12);

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

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

  cursor: pointer;

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


.personal-route-item:hover {
  border-color:
    rgba(34, 197, 246, 0.3);

  background:
    rgba(34, 197, 246, 0.06);

  transform:
    translateX(2px);
}


.personal-route-item--active {
  border-color:
    rgba(34, 197, 246, 0.45);

  background:
    linear-gradient(
      90deg,
      rgba(34, 197, 246, 0.14),
      rgba(34, 197, 246, 0.035)
    );
}


.personal-route-item__main {
  display: flex;

  flex-direction: column;

  min-width: 0;
}


.personal-route-item__code {
  color:
    var(--color-text);

  font-size: 0.74rem;

  font-weight: 900;
}


.personal-route-item--active
.personal-route-item__code {
  color:
    var(--color-primary);
}


.personal-route-item__date {
  margin-top: 1px;

  overflow: hidden;

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

  font-size: 0.61rem;

  text-overflow:
    ellipsis;

  white-space: nowrap;
}


.personal-route-item__metrics {
  display: flex;

  align-items: center;

  gap: 5px;

  margin-top: 5px;

  color:
    var(--color-text-soft);

  font-size: 0.61rem;
}


.personal-route-item__metrics span + span::before {
  content: "·";

  margin-right: 5px;

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


.personal-route-item__status {
  width: 8px;

  height: 8px;

  flex-shrink: 0;

  border-radius: 50%;

  background:
    var(--color-success);

  box-shadow:
    0 0 0 4px
    rgba(77, 224, 165, 0.08);
}


/* Footer del listado */

.personal-routes-panel__footer {
  margin-top: 9px;

  padding-top: 8px;

  border-top:
    1px solid
    var(--color-border);

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

  font-size: 0.62rem;
}


/* =========================================================
   8. PIE DEL SIDEBAR
========================================================= */

.sidebar-footer {
  display: flex;

  flex-direction: column;

  gap: 5px;

  margin-top: auto;

  padding-top: 13px;

  border-top:
    1px solid
    var(--color-border);
}


.sidebar-link--button {
  text-align: left;
}


.sidebar-link--logout {
  color:
    #ff949b;
}


.sidebar-link--logout:hover {
  border-color:
    rgba(255, 92, 103, 0.2);

  background:
    var(--color-danger-soft);
}


/* =========================================================
   9. ENCABEZADO INTERNO
========================================================= */

.dashboard-page-heading {
  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 28px;

  margin-bottom: 19px;
}


.dashboard-eyebrow,
.dashboard-card__eyebrow {
  margin-bottom: 4px;

  color:
    var(--color-primary);

  font-size: 0.66rem;

  font-weight: 900;

  letter-spacing:
    0.14em;

  text-transform:
    uppercase;
}


.dashboard-page-heading h1 {
  margin-bottom: 5px;

  font-size:
    clamp(
      1.55rem,
      2.2vw,
      2.15rem
    );

  line-height: 1.1;
}


.dashboard-page-heading__description {
  max-width: 720px;

  margin-bottom: 0;

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

  font-size: 0.89rem;
}


.dashboard-page-heading__status {
  display: flex;

  flex-direction: column;

  align-items: flex-end;

  gap: 6px;

  flex-shrink: 0;
}


.dashboard-update-time {
  color:
    var(--color-text-muted);

  font-size: 0.69rem;
}


/* =========================================================
   10. CONTENEDORES GENERALES
========================================================= */

.dashboard-map-card,
.route-detail-panel,
.dashboard-summary {
  border:
    1px solid
    var(--color-border);

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

  background:
    linear-gradient(
      145deg,
      rgba(11, 29, 44, 0.95),
      rgba(7, 22, 35, 0.96)
    );

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


/* =========================================================
   11. MAPA + PANEL
========================================================= */

.dashboard-monitor {
  display: grid;

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

  gap: 16px;

  margin-bottom: 20px;
}


.dashboard-map-card {
  min-width: 0;

  overflow: hidden;
}


.dashboard-map-card__header {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 18px;

  padding:
    14px 17px;

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


.dashboard-map-card__header h2 {
  margin-bottom: 0;

  font-size: 1.02rem;
}


.dashboard-map-card__meta {
  display: flex;

  align-items: center;

  gap: 7px;

  flex-wrap: wrap;

  justify-content: flex-end;
}


.dashboard-map-card__meta span {
  padding:
    4px 8px;

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

  border-radius:
    999px;

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

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

  font-size: 0.66rem;

  font-weight: 700;
}


/* =========================================================
   12. MAPA LEAFLET
========================================================= */

#mapa-dashboard {
  position: relative;

  z-index: 1;

  width: 100%;

  height: 570px;

  min-height: 570px;

  overflow: hidden;

  background: #071725;
}


#mapa-dashboard.leaflet-container {
  width: 100%;

  height: 570px;

  min-height: 570px;

  background: #071725;

  font-family:
    Inter,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
}


#mapa-dashboard .leaflet-map-pane,
#mapa-dashboard .leaflet-tile-pane,
#mapa-dashboard .leaflet-overlay-pane,
#mapa-dashboard .leaflet-shadow-pane,
#mapa-dashboard .leaflet-marker-pane,
#mapa-dashboard .leaflet-tooltip-pane,
#mapa-dashboard .leaflet-popup-pane {
  visibility: visible;
}


#mapa-dashboard .leaflet-tile-pane {
  z-index: 200;
}


#mapa-dashboard .leaflet-overlay-pane {
  z-index: 400;
}


#mapa-dashboard .leaflet-shadow-pane {
  z-index: 500;
}


#mapa-dashboard .leaflet-marker-pane {
  z-index: 600;
}


#mapa-dashboard .leaflet-tooltip-pane {
  z-index: 650;
}


#mapa-dashboard .leaflet-popup-pane {
  z-index: 700;
}


#mapa-dashboard .leaflet-tile {
  visibility: visible;

  opacity: 1;

  filter: none;
}


/* Zoom + selector */

#mapa-dashboard .leaflet-control-zoom,
#mapa-dashboard .leaflet-control-layers {
  overflow: hidden;

  border:
    1px solid
    rgba(145, 180, 204, 0.3);

  border-radius: 9px;

  background:
    rgba(3, 11, 19, 0.94);

  box-shadow:
    0 10px 28px
    rgba(0, 0, 0, 0.32);
}


#mapa-dashboard
.leaflet-control-zoom a {
  display: grid;

  place-items: center;

  width: 35px;

  height: 35px;

  border: 0;

  border-bottom:
    1px solid
    rgba(145, 180, 204, 0.18);

  background:
    rgba(3, 11, 19, 0.94);

  color: #f5f9fc;

  font-size: 1.2rem;
}


#mapa-dashboard
.leaflet-control-zoom a:last-child {
  border-bottom: 0;
}


#mapa-dashboard
.leaflet-control-zoom a:hover {
  background: #102638;

  color:
    var(--color-primary);
}


#mapa-dashboard
.leaflet-control-layers {
  padding: 6px;

  color: #f5f9fc;
}


#mapa-dashboard
.leaflet-control-layers-expanded {
  min-width: 150px;

  padding:
    9px 11px;
}


#mapa-dashboard
.leaflet-control-layers label {
  display: flex;

  align-items: center;

  gap: 7px;

  margin: 4px 0;

  color: #d7e4ec;

  font-size: 0.69rem;

  font-weight: 700;
}


#mapa-dashboard
.leaflet-control-layers-selector {
  accent-color:
    var(--color-primary);
}


/* Escala */

#mapa-dashboard
.leaflet-control-scale-line {
  border-color:
    rgba(255, 255, 255, 0.74);

  background:
    rgba(3, 11, 19, 0.76);

  color: #ffffff;

  font-size: 0.6rem;
}


/* Popup */

#mapa-dashboard
.leaflet-popup-content-wrapper,
#mapa-dashboard
.leaflet-popup-tip {
  background: #081724;

  color: #f5f9fc;
}


#mapa-dashboard
.leaflet-popup-content-wrapper {
  border:
    1px solid
    rgba(34, 197, 246, 0.3);

  border-radius: 11px;

  box-shadow:
    0 12px 30px
    rgba(0, 0, 0, 0.34);
}


#mapa-dashboard
.leaflet-popup-content {
  margin:
    13px 15px;

  font-size: 0.76rem;

  line-height: 1.45;
}


#mapa-dashboard
.leaflet-popup-close-button {
  color:
    var(--color-text-soft);
}


#mapa-dashboard
.leaflet-popup-close-button:hover {
  color:
    var(--color-primary);
}


/* Popup TsunamiGo */

.tsunamigo-map-popup {
  display: flex;

  flex-direction: column;

  gap: 3px;
}


.tsunamigo-map-popup strong {
  color:
    var(--color-text);

  font-size: 0.82rem;
}


.tsunamigo-map-popup span {
  color:
    var(--color-primary);

  font-size: 0.68rem;

  font-weight: 700;
}


.tsunamigo-map-popup small {
  color:
    var(--color-text-muted);

  font-size: 0.65rem;
}


/* Tooltip */

#mapa-dashboard .leaflet-tooltip {
  border:
    1px solid
    rgba(34, 197, 246, 0.28);

  border-radius: 7px;

  background:
    rgba(3, 11, 19, 0.92);

  color:
    var(--color-text);

  box-shadow:
    0 8px 20px
    rgba(0, 0, 0, 0.28);

  font-size: 0.68rem;

  font-weight: 800;
}


#mapa-dashboard
.leaflet-tooltip-top::before {
  border-top-color:
    rgba(3, 11, 19, 0.92);
}


/* Atribución */

#mapa-dashboard
.leaflet-control-attribution {
  padding:
    3px 6px;

  background:
    rgba(3, 11, 19, 0.78);

  color:
    var(--color-text-soft);

  font-size: 0.55rem;
}


#mapa-dashboard
.leaflet-control-attribution a {
  color:
    var(--color-primary);
}


/* Error */

.dashboard-map-error {
  display: grid;

  place-content: center;

  gap: 5px;

  width: 100%;

  height: 570px;

  min-height: 570px;

  padding: 24px;

  background:
    linear-gradient(
      145deg,
      rgba(8, 35, 52, 0.92),
      rgba(4, 19, 31, 0.96)
    );

  color:
    var(--color-text);

  text-align: center;
}
/* =========================================================
   13. PANEL DERECHO
========================================================= */

.route-detail-panel {
  display: flex;

  flex-direction: column;

  min-width: 0;

  padding: 15px;
}


.route-detail-panel__header {
  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 12px;

  padding-bottom: 12px;

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


.route-detail-panel__header h2 {
  margin-bottom: 0;

  font-size: 1.16rem;
}


/* Estado */

.route-status,
.table-status {
  display: inline-flex;

  align-items: center;

  gap: 6px;

  width: fit-content;

  padding:
    4px 8px;

  border-radius: 999px;

  font-size: 0.65rem;

  font-weight: 900;
}


.route-status::before,
.table-status::before {
  content: "";

  width: 6px;

  height: 6px;

  border-radius: 50%;
}


.route-status--completed,
.table-status--completed {
  background:
    var(--color-success-soft);

  color:
    var(--color-success);
}


.route-status--completed::before,
.table-status--completed::before {
  background:
    var(--color-success);
}


.table-status--active {
  background:
    var(--color-primary-soft);

  color:
    var(--color-primary);
}


.table-status--active::before {
  background:
    var(--color-primary);
}


.table-status--warning {
  background:
    var(--color-warning-soft);

  color:
    var(--color-warning);
}


.table-status--warning::before {
  background:
    var(--color-warning);
}


/* =========================================================
   14. IDENTIDAD PERSONAL
========================================================= */

.route-participant {
  display: grid;

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

  align-items: center;

  gap: 10px;

  margin:
    13px 0;

  padding: 11px;

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

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

  background:
    rgba(255, 255, 255, 0.02);
}


.route-participant__avatar {
  display: grid;

  place-items: center;

  width: 44px;

  height: 44px;

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

  border-radius: 50%;

  background:
    var(--color-primary-soft);

  color:
    var(--color-primary);

  font-size: 0.76rem;

  font-weight: 900;
}


.route-participant__identity {
  display: flex;

  flex-direction: column;

  min-width: 0;
}


.route-participant__identity > span {
  color:
    var(--color-text-muted);

  font-size: 0.63rem;
}


.route-participant__identity strong {
  font-size: 0.86rem;
}


.route-participant__identity small {
  overflow: hidden;

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

  font-size: 0.64rem;

  text-overflow:
    ellipsis;

  white-space: nowrap;
}


/* =========================================================
   15. MÉTRICAS DEL RECORRIDO
========================================================= */

.route-metric-list {
  display: grid;

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

  gap: 7px;
}


.route-metric {
  display: flex;

  align-items: center;

  gap: 7px;

  min-width: 0;

  padding:
    9px;

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

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

  background:
    rgba(255, 255, 255, 0.016);
}


.route-metric img {
  width: 25px;

  height: 25px;

  flex-shrink: 0;

  object-fit: contain;
}


.route-metric div {
  display: flex;

  flex-direction: column;

  min-width: 0;
}


.route-metric span {
  color:
    var(--color-text-muted);

  font-size: 0.59rem;
}


.route-metric strong {
  margin-top: 1px;

  overflow: hidden;

  font-size: 0.77rem;

  text-overflow:
    ellipsis;

  white-space: nowrap;
}


/* =========================================================
   16. PERFIL DE ELEVACIÓN
========================================================= */

.route-profile {
  margin-top: 11px;

  padding: 11px;

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

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

  background:
    linear-gradient(
      145deg,
      rgba(34, 197, 246, 0.035),
      rgba(255, 255, 255, 0.01)
    );
}


.route-profile__header {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

  margin-bottom: 7px;
}


.route-profile__header > div {
  display: flex;

  flex-direction: column;
}


.route-profile__header img {
  width: 29px;

  height: 29px;

  object-fit: contain;
}


.route-profile__label {
  color:
    var(--color-primary);

  font-size: 0.58rem;

  font-weight: 900;

  letter-spacing:
    0.09em;

  text-transform:
    uppercase;
}


.route-profile h3 {
  margin-bottom: 0;

  font-size: 0.78rem;
}


.route-profile__chart {
  position: relative;

  height: 128px;

  padding:
    8px 0
    20px 34px;

  overflow: hidden;

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

  background:
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 30px,
      rgba(255, 255, 255, 0.04) 31px
    );
}


.route-profile__chart svg {
  width: 100%;

  height: 100%;
}


.profile-area {
  fill:
    url("#profileFill");
}


.profile-line {
  fill: none;

  stroke:
    var(--color-primary);

  stroke-width: 3;

  stroke-linecap: round;

  stroke-linejoin: round;

  filter:
    drop-shadow(
      0 0 6px
      rgba(34, 197, 246, 0.38)
    );
}


.profile-axis,
.profile-distance {
  position: absolute;

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

  font-size: 0.55rem;

  font-weight: 700;
}


.profile-axis--top {
  top: 8px;

  left: 3px;
}


.profile-axis--bottom {
  bottom: 20px;

  left: 3px;
}


.profile-distance--start {
  bottom: 3px;

  left: 34px;
}


.profile-distance--end {
  right: 4px;

  bottom: 3px;
}


/* Botón detalle */

.route-detail-button {
  display: flex;

  align-items: center;

  justify-content: center;

  min-height: 39px;

  margin-top: auto;

  padding:
    9px 13px;

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

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

  background:
    linear-gradient(
      90deg,
      rgba(34, 197, 246, 0.15),
      rgba(22, 135, 217, 0.08)
    );

  color:
    var(--color-primary);

  font-size: 0.7rem;

  font-weight: 900;
}


.route-detail-button:hover {
  border-color:
    rgba(34, 197, 246, 0.56);

  background:
    var(--color-primary-soft);

  transform:
    translateY(-1px);
}


/* =========================================================
   17. RESUMEN PERSONAL
========================================================= */

.dashboard-summary {
  margin-bottom: 20px;

  padding: 18px;
}


.dashboard-section-heading {
  display: flex;

  align-items: flex-end;

  justify-content:
    space-between;

  gap: 20px;

  margin-bottom: 14px;
}


.dashboard-section-heading h2 {
  margin-bottom: 0;

  font-size: 1.16rem;
}


.summary-grid {
  display: grid;

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

  gap: 10px;
}


.summary-card {
  position: relative;

  display: flex;

  align-items: center;

  gap: 10px;

  min-width: 0;

  min-height: 96px;

  padding: 12px;

  overflow: hidden;

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

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

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.026),
      rgba(255, 255, 255, 0.008)
    );

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


.summary-card::after {
  content: "";

  position: absolute;

  right: -22px;

  bottom: -28px;

  width: 70px;

  height: 70px;

  border-radius: 50%;

  background:
    rgba(34, 197, 246, 0.055);
}


.summary-card:hover {
  border-color:
    var(--color-border-strong);

  background:
    linear-gradient(
      145deg,
      rgba(34, 197, 246, 0.07),
      rgba(255, 255, 255, 0.012)
    );

  transform:
    translateY(-2px);
}


.summary-card__icon {
  display: grid;

  place-items: center;

  width: 40px;

  height: 40px;

  flex-shrink: 0;

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

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

  background:
    var(--color-primary-soft);
}


.summary-card__icon img {
  width: 27px;

  height: 27px;

  object-fit: contain;
}


.summary-card__content {
  display: flex;

  flex-direction: column;

  min-width: 0;
}


.summary-card__content > span {
  overflow: hidden;

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

  font-size: 0.61rem;

  font-weight: 800;

  letter-spacing:
    0.04em;

  text-overflow:
    ellipsis;

  text-transform:
    uppercase;

  white-space: nowrap;
}


.summary-card__content strong {
  margin:
    2px 0 1px;

  color:
    var(--color-text);

  font-size: 1.08rem;
}


.summary-card__content small {
  overflow: hidden;

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

  font-size: 0.59rem;

  text-overflow:
    ellipsis;

  white-space: nowrap;
}


/* =========================================================
   18. COMPATIBILIDAD TEMPORAL
========================================================= */

/*
 * dashboard.js todavía puede consultar
 * data-routes-body.
 *
 * El bloque sigue existiendo en HTML
 * pero debe permanecer invisible.
 */

.dashboard-routes--compatibility {
  display: none !important;
}


[hidden] {
  display: none !important;
}


/* =========================================================
   19. SCROLLBAR
========================================================= */

.dashboard-sidebar {
  scrollbar-width: thin;

  scrollbar-color:
    rgba(34, 197, 246, 0.25)
    transparent;
}


.dashboard-sidebar::-webkit-scrollbar {
  width: 7px;
}


.dashboard-sidebar::-webkit-scrollbar-thumb {
  border-radius:
    999px;

  background:
    rgba(34, 197, 246, 0.23);
}


.dashboard-sidebar::-webkit-scrollbar-track {
  background: transparent;
}


/* =========================================================
   20. LOGIN / BLOQUEO
========================================================= */

body.access-locked {
  overflow: hidden;
}


/*
 * MUY IMPORTANTE:
 * hidden debe ganar siempre sobre display:grid.
 */

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


.access-gate {
  position: fixed;

  inset: 0;

  z-index: 9999;

  display: grid;

  place-items: center;

  padding: 24px;

  overflow-y: auto;
}


/* Fondo */

.access-gate__backdrop {
  position: fixed;

  inset: 0;

  background:
    linear-gradient(
      135deg,
      rgba(2, 9, 16, 0.58),
      rgba(4, 17, 29, 0.68)
    );

  backdrop-filter: none;

  -webkit-backdrop-filter: none;
}


/* Tarjeta */

.access-gate__card {
  position: relative;

  z-index: 2;

  width:
    min(
      420px,
      100%
    );

  padding: 28px;

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

  border-radius: 20px;

  background:
    linear-gradient(
      145deg,
      rgba(8, 23, 36, 0.98),
      rgba(4, 15, 25, 0.99)
    );

  box-shadow:
    0 28px 80px
      rgba(0, 0, 0, 0.58),
    0 0 0 1px
      rgba(255, 255, 255, 0.025);

  color:
    var(--color-text);
}


.access-gate__card::before {
  content: "";

  position: absolute;

  top: 0;

  right: 36px;

  left: 36px;

  height: 2px;

  border-radius:
    999px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--color-primary),
      transparent
    );

  box-shadow:
    0 0 18px
    rgba(34, 197, 246, 0.45);
}


/* Logo */

.access-gate__brand {
  display: flex;

  justify-content: center;

  margin-bottom: 18px;
}


.access-gate__brand img {
  width: 175px;

  max-height: 58px;

  object-fit: contain;
}


/* Encabezado */

.access-gate__heading {
  margin-bottom: 20px;

  text-align: center;
}


.access-gate__eyebrow {
  margin-bottom: 5px;

  color:
    var(--color-primary);

  font-size: 0.66rem;

  font-weight: 900;

  letter-spacing:
    0.14em;

  text-transform:
    uppercase;
}


.access-gate__heading h2 {
  margin-bottom: 7px;

  color:
    var(--color-text);

  font-size: 1.48rem;
}


.access-gate__heading > p:last-child {
  max-width: 345px;

  margin:
    0 auto;

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

  font-size: 0.77rem;

  line-height: 1.55;
}


/* Formulario */

.access-form {
  display: flex;

  flex-direction: column;

  gap: 14px;
}


.access-form__group {
  display: flex;

  flex-direction: column;

  gap: 5px;
}


.access-form__group > label {
  color:
    var(--color-text-soft);

  font-size: 0.72rem;

  font-weight: 800;
}


.access-form__control {
  display: flex;

  align-items: center;

  min-height: 47px;

  overflow: hidden;

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

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

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

  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background var(--transition-fast);
}


.access-form__control:focus-within {
  border-color:
    rgba(34, 197, 246, 0.58);

  background:
    rgba(34, 197, 246, 0.04);

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


.access-form__control-icon {
  display: grid;

  place-items: center;

  width: 43px;

  height: 47px;

  flex-shrink: 0;

  color:
    var(--color-primary);

  font-size: 0.76rem;

  font-weight: 900;
}


.access-form__control input {
  width: 100%;

  height: 45px;

  min-width: 0;

  padding:
    0 9px 0 0;

  border: 0;

  outline: 0;

  background:
    transparent;

  color:
    var(--color-text);

  font-size: 0.8rem;
}


.access-form__control input::placeholder {
  color:
    rgba(120, 145, 165, 0.78);
}


/* Ver/Ocultar */

.access-form__password-toggle {
  height: 45px;

  padding:
    0 13px;

  border: 0;

  background:
    transparent;

  color:
    var(--color-primary);

  font-size: 0.67rem;

  font-weight: 900;
}


.access-form__password-toggle:hover {
  background:
    var(--color-primary-soft);
}


/* Errores */

.access-form__error {
  min-height: 13px;

  color: #ff8b93;

  font-size: 0.63rem;
}


/* Opciones */

.access-form__options {
  display: flex;

  align-items: center;

  justify-content:
    space-between;

  gap: 13px;
}


.access-form__remember {
  display: inline-flex;

  align-items: center;

  gap: 7px;

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

  font-size: 0.67rem;
}


.access-form__remember input {
  accent-color:
    var(--color-primary);
}


.access-form__forgot {
  padding: 0;

  border: 0;

  background:
    transparent;

  color:
    var(--color-primary);

  font-size: 0.66rem;

  font-weight: 800;
}


.access-form__forgot:hover {
  text-decoration: underline;
}


/* Mensajes */

.access-form__message {
  padding:
    9px 11px;

  border:
    1px solid
    rgba(255, 92, 103, 0.26);

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

  background:
    var(--color-danger-soft);

  color: #ff9ca2;

  font-size: 0.69rem;
}


.access-form__message--success {
  border-color:
    rgba(77, 224, 165, 0.26);

  background:
    var(--color-success-soft);

  color:
    var(--color-success);
}


/* Login button */

.access-form__submit {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 9px;

  min-height: 47px;

  padding:
    10px 16px;

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

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

  background:
    linear-gradient(
      90deg,
      #1687d9,
      #22c5f6
    );

  color: #021019;

  font-size: 0.76rem;

  font-weight: 900;

  box-shadow:
    0 12px 28px
    rgba(22, 135, 217, 0.2);
}


.access-form__submit:hover {
  filter:
    brightness(1.07);

  transform:
    translateY(-1px);
}


.access-form__submit:disabled {
  cursor: wait;

  opacity: 0.72;
}


/* Loader */

.access-form__loader {
  width: 17px;

  height: 17px;

  border:
    2px solid
    rgba(2, 16, 25, 0.3);

  border-top-color:
    #021019;

  border-radius: 50%;

  animation:
    access-loader-spin
    700ms
    linear
    infinite;
}


@keyframes access-loader-spin {
  to {
    transform:
      rotate(360deg);
  }
}


/* Footer login */

.access-gate__footer {
  margin-top: 19px;

  padding-top: 14px;

  border-top:
    1px solid
    var(--color-border);

  text-align: center;
}


.access-gate__footer p {
  margin-bottom: 4px;

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

  font-size: 0.64rem;
}


.access-gate__footer a {
  color:
    var(--color-primary);

  font-weight: 800;
}


/* =========================================================
   21. PANTALLAS GRANDES
========================================================= */

@media (min-width: 1600px) {

  :root {
    --sidebar-width: 305px;
  }


  .dashboard-main {
    padding: 28px;
  }


  .dashboard-monitor {
    grid-template-columns:
      minmax(0, 1fr)
      335px;
  }


  #mapa-dashboard,
  #mapa-dashboard.leaflet-container,
  .dashboard-map-error {
    height: 620px;

    min-height: 620px;
  }

}


/* =========================================================
   22. NOTEBOOKS
========================================================= */

@media (max-width: 1380px) {

  :root {
    --sidebar-width: 270px;
  }


  .dashboard-header {
    grid-template-columns:
      205px
      minmax(220px, 1fr)
      auto;

    gap: 15px;
  }


  .dashboard-brand__logo {
    width: 165px;
  }


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


  .personal-routes-list {
    max-height: 320px;
  }

}


/* =========================================================
   23. PANTALLAS MEDIANAS
========================================================= */

@media (max-width: 1120px) {

  :root {
    --sidebar-width: 230px;
  }


  .dashboard-header {
    grid-template-columns:
      185px
      minmax(180px, 1fr)
      auto;
  }


  .dashboard-context__title {
    font-size: 0.85rem;
  }


  .dashboard-monitor {
    grid-template-columns: 1fr;
  }


  .route-detail-panel {
    display: grid;

    grid-template-columns:
      1fr
      1.4fr;

    gap: 13px;
  }


  .route-detail-panel__header,
  .route-detail-button {
    grid-column:
      1 / -1;
  }


  .route-participant {
    margin: 0;
  }


  .route-profile {
    margin-top: 0;
  }


  .route-metric-list {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );
  }

}


/* =========================================================
   24. TABLET
========================================================= */

@media (max-width: 860px) {

  :root {
    --header-height: auto;
    --sidebar-width: 100%;
  }


  .dashboard-header {
    position: relative;

    grid-template-columns:
      1fr
      auto;

    min-height: auto;
  }


  .dashboard-context {
    grid-column:
      1 / -1;

    grid-row: 2;
  }


  .dashboard-user__identity,
  .dashboard-user__chevron {
    display: none;
  }


  .dashboard-account-status {
    display: none;
  }


  .dashboard-body {
    display: block;
  }


  .dashboard-sidebar {
    position: relative;

    top: auto;

    width: 100%;

    height: auto;

    padding:
      10px 14px;

    overflow: visible;

    border-right: 0;

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


  .sidebar-nav {
    flex-direction: row;

    gap: 7px;
  }


  .sidebar-nav__label {
    display: none;
  }


  .sidebar-link {
    width: auto;
  }


  .sidebar-link::before {
    display: none;
  }


  /*
   * En tablet los recorridos pasan
   * debajo del menú.
   */

  .personal-routes-panel {
    margin-top: 10px;
  }


  .personal-routes-list {
    display: grid;

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

    max-height: 210px;
  }


  .sidebar-footer {
    flex-direction: row;

    margin-top: 10px;
  }


  .dashboard-main {
    padding:
      19px 15px;
  }


  .dashboard-page-heading {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .dashboard-page-heading__status {
    align-items:
      flex-start;
  }


  .route-detail-panel {
    display: block;
  }


  .route-participant {
    margin:
      13px 0;
  }


  .route-profile {
    margin-top:
      11px;
  }


  .route-detail-button {
    margin-top:
      11px;
  }


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


  #mapa-dashboard,
  #mapa-dashboard.leaflet-container,
  .dashboard-map-error {
    height: 520px;

    min-height: 520px;
  }

}


/* =========================================================
   25. TELÉFONO
========================================================= */

@media (max-width: 580px) {

  .dashboard-header {
    padding:
      10px 13px;
  }


  .dashboard-brand__logo {
    width: 145px;
  }


  .dashboard-header__actions {
    gap: 5px;
  }


  .dashboard-user {
    padding: 4px;
  }


  .dashboard-user__avatar {
    width: 35px;

    height: 35px;
  }


  .dashboard-context__heading {
    width: 100%;
  }


  .dashboard-main {
    padding:
      14px 10px;
  }


  .dashboard-page-heading h1 {
    font-size: 1.5rem;
  }


  .dashboard-page-heading__description {
    font-size: 0.82rem;
  }


  .personal-routes-list {
    grid-template-columns:
      1fr;

    max-height: 250px;
  }


  .dashboard-map-card__header {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .dashboard-map-card__meta {
    justify-content:
      flex-start;
  }


  #mapa-dashboard,
  #mapa-dashboard.leaflet-container,
  .dashboard-map-error {
    height: 450px;

    min-height: 450px;
  }


  #mapa-dashboard
  .leaflet-control-layers-expanded {
    min-width: 128px;

    padding:
      8px 9px;
  }


  #mapa-dashboard
  .leaflet-control-layers label {
    font-size: 0.63rem;
  }


  .route-metric-list {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


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


  .summary-card {
    min-height: 84px;
  }


  .dashboard-summary {
    padding: 14px;
  }


  .dashboard-section-heading {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .access-gate {
    align-items:
      flex-start;

    padding:
      18px 12px;
  }


  .access-gate__card {
    margin:
      auto 0;

    padding:
      23px 18px;
  }


  .access-gate__brand img {
    width: 155px;
  }


  .access-form__options {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

}


/* =========================================================
   26. MOVIMIENTO REDUCIDO
========================================================= */

@media (
  prefers-reduced-motion:
  reduce
) {

  *,
  *::before,
  *::after {
    scroll-behavior:
      auto !important;

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;
  }

}