/* ==========================================================================
   KAMIONCLOUD DASHBOARD (INDEX) v2.0 — Consolidado y Saneado
   Identidad: Grafito + Verde Petróleo · Organización Visual Editorial
   ========================================================================== */

/* ==========================================================================
   1. CONTENEDOR PRINCIPAL Y ESTRUCTURA RESPONSIVE
   ========================================================================== */
.app-container {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 0 16px calc(80px + env(safe-area-inset-bottom, 0px)) 16px;
  box-sizing: border-box;
}

@media (max-width: 360px) {
  .app-container {
    padding-left: 10px;
    padding-right: 10px;
  }
}

@media (min-width: 1024px) {
  .app-container {
    max-width: 1140px;
    padding: 0 32px 80px 32px;
  }
}

@media (min-width: 1280px) {
  .app-container {
    max-width: 1280px;
    padding: 0 36px 80px 36px;
  }
}

@media (min-width: 1440px) {
  .app-container {
    max-width: 1380px;
    padding: 0 40px 80px 40px;
  }
}

@media (min-width: 1920px) {
  .app-container {
    max-width: 1440px;
  }
}

.dashboard-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (min-width: 1024px) {
  .dashboard-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 24px;
    align-items: start;
  }

  .dashboard-col-main,
  .dashboard-col-side {
    display: flex;
    flex-direction: column;
    gap: 22px;
  }
}

@media (min-width: 1280px) {
  .dashboard-grid {
    grid-template-columns: 1.35fr 1fr;
    gap: 28px;
  }

  .dashboard-col-main,
  .dashboard-col-side {
    gap: 24px;
  }
}

@media (min-width: 1440px) {
  .dashboard-grid {
    grid-template-columns: 1.38fr 1fr;
    gap: 32px;
  }

  .dashboard-col-main,
  .dashboard-col-side {
    gap: 28px;
  }
}

/* ==========================================================================
   2. CABECERA DE APLICACIÓN (APP-HEADER)
   ========================================================================== */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px;
  margin: 12px 0 20px 0;
  background-color: var(--kc-surface, #FFFFFF);
  border: 1px solid var(--kc-border, #DCE3DE);
  border-radius: var(--radius-card, 12px);
  box-shadow: var(--shadow-subtle, 0 1px 3px rgba(0, 0, 0, 0.05));
}

.app-header__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}

.app-header .logo,
.app-header__brand .logo {
  width: 34px;
  height: 34px;
  margin: 0;
  display: block;
  object-fit: contain;
  flex-shrink: 0;
  filter: none;
}

.app-header .app-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--kc-text, #202C2A);
  margin: 0;
  padding: 0;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* Navegación para escritorio integrada en cabecera */
.app-header__desktop-nav {
  display: none;
}

@media (min-width: 1024px) {
  .app-header__desktop-nav {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .app-header__desktop-nav a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: var(--radius-control, 8px);
    color: var(--kc-text-muted, #53615D);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition-fast, 150ms ease);
  }

  .app-header__desktop-nav a:hover {
    background-color: var(--kc-surface-subtle, #EEF1ED);
    color: var(--kc-text, #202C2A);
  }

  .app-header__desktop-nav a.active,
  .app-header__desktop-nav a[aria-current="page"] {
    background-color: var(--kc-primary-soft, #DDECE7);
    color: var(--kc-primary, #126B63);
  }

  [data-theme="dark"] .app-header__desktop-nav a.active,
  [data-theme="dark"] .app-header__desktop-nav a[aria-current="page"],
  [data-theme="oscuro"] .app-header__desktop-nav a.active,
  [data-theme="oscuro"] .app-header__desktop-nav a[aria-current="page"] {
    background-color: var(--kc-primary-soft, #1F443B);
    color: var(--kc-primary, #74D4C0);
  }

  .app-header__desktop-nav a svg,
  .app-header__desktop-nav a i {
    width: 18px;
    height: 18px;
    stroke: currentColor;
  }
}

/* Área de usuario y cierre de sesión */
.app-header .usuario-info {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  padding: 0;
  margin: 0;
  max-width: none;
  border: none;
  box-shadow: none;
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .app-header .usuario-info {
    border-left: 1px solid var(--kc-border, #DCE3DE);
    padding-left: 16px;
    margin-left: 8px;
  }

  [data-theme="dark"] .app-header .usuario-info,
  [data-theme="oscuro"] .app-header .usuario-info {
    border-left-color: var(--kc-border, #31423E);
  }
}

#usuarioEmail,
.usuario-nombre {
  font-size: 0.85rem;
  color: var(--kc-text, #202C2A);
  font-weight: 600;
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

[data-theme="dark"] #usuarioEmail,
[data-theme="dark"] .usuario-nombre,
[data-theme="oscuro"] #usuarioEmail,
[data-theme="oscuro"] .usuario-nombre {
  color: var(--kc-text, #E2E8E6);
}

@media (min-width: 640px) {
  #usuarioEmail,
  .usuario-nombre {
    max-width: 200px;
  }
}

#logoutBtn {
  background: var(--kc-surface-subtle, #EEF1ED);
  color: var(--kc-text, #202C2A);
  border: 1px solid var(--kc-border, #DCE3DE);
  padding: 6px 12px;
  font-size: 0.775rem;
  font-weight: 600;
  border-radius: var(--radius-control, 8px);
  cursor: pointer;
  transition: all var(--transition-fast, 150ms ease);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: none;
  white-space: nowrap;
}

#logoutBtn:hover {
  background-color: var(--kc-border, #DCE3DE);
  color: var(--kc-danger, #B53E40);
  transform: none;
}

[data-theme="dark"] #logoutBtn,
[data-theme="oscuro"] #logoutBtn,
html[data-theme="dark"] #logoutBtn {
  background: var(--kc-surface-subtle, #253330);
  color: var(--kc-text, #E2E8E6);
  border-color: var(--kc-border, #31423E);
}

[data-theme="dark"] #logoutBtn:hover,
[data-theme="oscuro"] #logoutBtn:hover,
html[data-theme="dark"] #logoutBtn:hover {
  background: var(--kc-border, #31423E);
  color: var(--kc-danger, #E57373);
}

/* ==========================================================================
   3. ACCIÓN PRINCIPAL (NUEVA RUTA + CONTINUAR RUTA)
   ========================================================================== */
.kc-action-primary {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.btn-nueva-ruta-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 14px 20px;
  background-color: var(--kc-primary, #126B63);
  color: var(--kc-on-primary, #FFFFFF);
  font-size: 1.1rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-control, 8px);
  box-shadow: 0 2px 8px rgba(18, 107, 99, 0.2);
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.btn-nueva-ruta-hero:hover {
  background-color: var(--kc-primary-hover, #0C5751);
  transform: translateY(-1px);
}

@media (min-width: 1280px) {
  .btn-nueva-ruta-hero {
    min-height: 56px;
    font-size: 1.15rem;
    padding: 16px 24px;
  }
}

@media (min-width: 1440px) {
  .btn-nueva-ruta-hero {
    min-height: 60px;
    font-size: 1.2rem;
  }
}

.btn-nueva-ruta-hero svg,
.btn-nueva-ruta-hero i {
  width: 22px;
  height: 22px;
  stroke: currentColor;
}

/* Ruta parcial activa */
#botonRutaParcialArriba:not(:empty) {
  margin: 0;
  width: 100%;
}

.boton-ruta-parcial a,
#botonRutaParcialArriba .btn--alerta,
.btn--alerta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 12px 18px;
  background-color: var(--kc-warning, #9C651C);
  background-image: none;
  color: #FFFFFF;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-control, 8px);
  box-shadow: 0 2px 8px rgba(156, 101, 28, 0.2);
  transition: opacity var(--transition-fast);
}

.boton-ruta-parcial a:hover,
#botonRutaParcialArriba .btn--alerta:hover,
.btn--alerta:hover {
  opacity: 0.92;
  transform: none;
}

/* ==========================================================================
   4. RESUMEN DEL CONDUCTOR (MÉTRICAS OPERATIVAS)
   ========================================================================== */
.dash__resumen {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  max-width: none;
}

.dash__card {
  background-color: var(--kc-surface, #FFFFFF);
  border: 1px solid var(--kc-border, #DCE3DE);
  border-radius: var(--radius-card, 12px);
  padding: 20px;
  box-shadow: var(--shadow-subtle, 0 1px 3px rgba(0, 0, 0, 0.05));
  transition: padding var(--transition-fast);
}

@media (max-width: 480px) {
  .dash__card {
    padding: 16px 12px;
  }
}

@media (max-width: 360px) {
  .dash__card {
    padding: 14px 10px;
  }
}

@media (min-width: 1280px) {
  .dash__card {
    padding: 24px 26px;
  }
}

@media (min-width: 1440px) {
  .dash__card {
    padding: 28px 30px;
  }
}

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

.dash__card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--kc-text-muted, #53615D);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

@media (min-width: 1280px) {
  .dash__card-title {
    font-size: 0.92rem;
  }
}

@media (min-width: 1440px) {
  .dash__card-title {
    font-size: 0.98rem;
  }
}

.dash__card-title svg,
.dash__card-title i {
  width: 18px;
  height: 18px;
  stroke: var(--kc-primary, #126B63);
}

[data-theme="dark"] .dash__card-title svg,
[data-theme="dark"] .dash__card-title i,
[data-theme="oscuro"] .dash__card-title svg,
[data-theme="oscuro"] .dash__card-title i {
  stroke: var(--kc-primary, #74D4C0);
}

.dash__card-link {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--kc-primary, #126B63);
  text-decoration: none;
}

[data-theme="dark"] .dash__card-link,
[data-theme="oscuro"] .dash__card-link {
  color: var(--kc-primary, #74D4C0);
}

.dash__card-link:hover {
  text-decoration: underline;
}

/* Grilla de 4 métricas equilibrada */
.dash__metricas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  text-align: center;
  margin-top: 10px;
}

@media (max-width: 480px) {
  .dash__metricas {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-top: 8px;
  }
}

@media (max-width: 360px) {
  .dash__metricas {
    gap: 6px;
  }
}

@media (min-width: 1280px) {
  .dash__metricas {
    gap: 14px;
    margin-top: 12px;
  }
}

@media (min-width: 1440px) {
  .dash__metricas {
    gap: 16px;
    margin-top: 14px;
  }
}

.dash__metrica {
  background-color: var(--kc-surface-subtle, #EEF1ED);
  border: 1px solid var(--kc-border, #DCE3DE);
  border-radius: var(--radius-control, 8px);
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  box-sizing: border-box;
}

@media (max-width: 480px) {
  .dash__metrica {
    padding: 10px 6px;
  }
}

@media (max-width: 360px) {
  .dash__metrica {
    padding: 8px 4px;
  }
}

@media (min-width: 1280px) {
  .dash__metrica {
    padding: 16px 12px;
  }
}

@media (min-width: 1440px) {
  .dash__metrica {
    padding: 18px 14px;
  }
}

[data-theme="dark"] .dash__metrica,
[data-theme="oscuro"] .dash__metrica {
  background-color: var(--kc-surface-subtle, #253330);
  border-color: var(--kc-border, #31423E);
}

.dash__metrica span {
  font-size: 0.75rem;
  color: var(--kc-text-muted, #53615D);
  line-height: 1.2;
}

@media (max-width: 480px) {
  .dash__metrica span {
    font-size: 0.72rem;
  }
}

@media (max-width: 360px) {
  .dash__metrica span {
    font-size: 0.68rem;
  }
}

@media (min-width: 1280px) {
  .dash__metrica span {
    font-size: 0.8rem;
  }
}

@media (min-width: 1440px) {
  .dash__metrica span {
    font-size: 0.85rem;
  }
}

.dash__metrica strong {
  font-size: clamp(0.95rem, 2.5vw, 1.25rem);
  font-weight: 700;
  color: var(--kc-text, #202C2A);
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
  line-height: 1.25;
  white-space: nowrap;
  letter-spacing: -0.02em;
  display: block;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}

@media (max-width: 480px) {
  .dash__metrica strong {
    font-size: clamp(0.85rem, 3.4vw, 1.12rem);
    letter-spacing: -0.025em;
  }
}

@media (max-width: 360px) {
  .dash__metrica strong {
    font-size: 0.82rem;
    letter-spacing: -0.035em;
  }
}

@media (min-width: 1280px) {
  .dash__metrica strong {
    font-size: 1.35rem;
  }
}

@media (min-width: 1440px) {
  .dash__metrica strong {
    font-size: 1.45rem;
  }
}

[data-theme="dark"] .dash__metrica strong,
[data-theme="oscuro"] .dash__metrica strong {
  color: var(--kc-text, #E2E8E6);
}

.dash__valor-principal {
  display: none;
}

/* ==========================================================================
   5. PAUSA SEMANAL (TACÓGRAFO Y DESCANSO)
   ========================================================================== */
.widget-pausa {
  width: 100%;
  margin: 0;
  padding: 20px;
  background: var(--kc-surface, #FFFFFF);
  background-image: none;
  border: 1px solid var(--kc-border, #DCE3DE);
  border-radius: var(--radius-card, 12px);
  box-shadow: var(--shadow-subtle, 0 1px 3px rgba(0, 0, 0, 0.05));
  text-align: left;
  transition: padding var(--transition-fast);
}

@media (min-width: 1280px) {
  .widget-pausa {
    padding: 24px 26px;
  }
}

@media (min-width: 1440px) {
  .widget-pausa {
    padding: 28px 30px;
  }
}

[data-theme="dark"] .widget-pausa,
[data-theme="oscuro"] .widget-pausa {
  background: var(--kc-surface, #1A2422);
  border-color: var(--kc-border, #31423E);
}

.widget-pausa__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.widget-pausa__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--kc-text-muted, #53615D);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.widget-pausa__title svg,
.widget-pausa__title i {
  width: 18px;
  height: 18px;
  stroke: var(--kc-primary, #126B63);
}

[data-theme="dark"] .widget-pausa__title svg,
[data-theme="dark"] .widget-pausa__title i,
[data-theme="oscuro"] .widget-pausa__title svg,
[data-theme="oscuro"] .widget-pausa__title i {
  stroke: var(--kc-primary, #74D4C0);
}

.widget-pausa #contadorIndex,
.widget-pausa .contador,
.contador-semana-quedan {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--kc-primary, #126B63);
  font-variant-numeric: tabular-nums;
  margin: 8px 0 4px 0;
  line-height: 1.2;
}

[data-theme="dark"] .widget-pausa #contadorIndex,
[data-theme="dark"] .widget-pausa .contador,
[data-theme="dark"] .contador-semana-quedan,
[data-theme="oscuro"] .widget-pausa #contadorIndex,
[data-theme="oscuro"] .widget-pausa .contador,
[data-theme="oscuro"] .contador-semana-quedan {
  color: var(--kc-primary, #74D4C0);
}

.widget-pausa #finTextoIndex,
.widget-pausa .fin-exacto,
.contador-semana-meta,
.contador-semana-limite {
  font-size: 0.85rem;
  color: var(--kc-text-muted, #53615D);
  line-height: 1.4;
}

.contador-semana-meta strong,
.contador-semana-limite strong {
  color: var(--kc-text, #202C2A);
  font-weight: 600;
}

[data-theme="dark"] .contador-semana-meta strong,
[data-theme="dark"] .contador-semana-limite strong,
[data-theme="oscuro"] .contador-semana-meta strong,
[data-theme="oscuro"] .contador-semana-limite strong {
  color: var(--kc-text, #E2E8E6);
}

/* Tarjeta de advertencia de seguimiento y pausa 45h */
.advertencia {
  width: 100%;
  margin: 12px 0 0 0;
  padding: 14px 16px;
  border-radius: var(--radius-control, 8px);
  background-color: var(--kc-surface-subtle, #EEF1ED);
  background-image: none;
  color: var(--kc-text, #202C2A);
  border: 1px solid rgba(156, 101, 28, 0.3);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  box-shadow: none;
}

.advertencia:empty {
  display: none;
}

[data-theme="dark"] .advertencia,
[data-theme="oscuro"] .advertencia {
  background-color: var(--kc-surface-subtle, #253330);
  border-color: rgba(230, 162, 60, 0.35);
  color: var(--kc-text, #E2E8E6);
}

/* Bloque dinámico de 45h (aviso45h-bloque) */
.aviso45h-bloque {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  color: var(--kc-text, #202C2A);
}

[data-theme="dark"] .aviso45h-bloque,
[data-theme="oscuro"] .aviso45h-bloque {
  color: var(--kc-text, #E2E8E6);
}

.aviso45h-inicio {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--kc-text-muted, #53615D);
}

.aviso45h-inicio span,
.aviso45h-limite span {
  display: block;
}

.aviso45h-inicio strong {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--kc-text, #202C2A);
}

[data-theme="dark"] .aviso45h-inicio strong,
[data-theme="oscuro"] .aviso45h-inicio strong {
  color: var(--kc-text, #E2E8E6);
}

.aviso45h-separador {
  height: 1px;
  background: var(--kc-border, #DCE3DE);
  margin: 4px 0;
}

[data-theme="dark"] .aviso45h-separador,
[data-theme="oscuro"] .aviso45h-separador {
  background: var(--kc-border, #31423E);
}

.aviso45h-limite {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--kc-text-muted, #53615D);
}

.aviso45h-limite strong {
  display: block;
  margin-top: 0.25rem;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--kc-warning, #9C651C);
  line-height: 1.2;
}

[data-theme="dark"] .aviso45h-limite strong,
[data-theme="oscuro"] .aviso45h-limite strong {
  color: #F6AD55;
}

.aviso45h-quedan {
  margin-top: 0.25rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--kc-text-muted, #53615D);
}

.aviso45h-quedan strong {
  color: var(--kc-primary, #126B63);
  font-weight: 700;
}

[data-theme="dark"] .aviso45h-quedan strong,
[data-theme="oscuro"] .aviso45h-quedan strong {
  color: var(--kc-primary, #74D4C0);
}

/* ==========================================================================
   6. DOCUMENTOS PRÓXIMOS
   ========================================================================== */
.card-docs-radar {
  background-color: var(--kc-surface, #FFFFFF);
  border: 1px solid var(--kc-border, #DCE3DE);
  border-radius: var(--radius-card, 12px);
  padding: 20px;
  box-shadow: var(--shadow-subtle, 0 1px 3px rgba(0, 0, 0, 0.05));
  transition: padding var(--transition-fast);
}

@media (min-width: 1280px) {
  .card-docs-radar {
    padding: 24px 26px;
  }
}

@media (min-width: 1440px) {
  .card-docs-radar {
    padding: 28px 30px;
  }
}

.docs-radar-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 14px 0 0 0;
  padding: 14px 16px;
  background-color: var(--kc-surface-subtle, #EEF1ED);
  border: 1px solid var(--kc-border, #DCE3DE);
  border-radius: var(--radius-control, 8px);
}

[data-theme="dark"] .docs-radar-stats,
[data-theme="oscuro"] .docs-radar-stats {
  background-color: var(--kc-surface-subtle, #253330);
  border-color: var(--kc-border, #31423E);
}

.docs-stat-urgent {
  display: flex;
  align-items: center;
  gap: 10px;
}

.docs-stat-urgent .dash__numero {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--kc-danger, #B53E40);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.docs-stat-urgent .dash__texto {
  font-size: 0.85rem;
  color: var(--kc-text, #202C2A);
  font-weight: 600;
}

[data-theme="dark"] .docs-stat-urgent .dash__texto,
[data-theme="oscuro"] .docs-stat-urgent .dash__texto {
  color: var(--kc-text, #E2E8E6);
}

.docs-stat-total {
  font-size: 0.85rem;
  color: var(--kc-text-muted, #53615D);
  text-align: right;
}

.docs-stat-total strong {
  font-weight: 700;
  color: var(--kc-text, #202C2A);
  margin-left: 4px;
}

[data-theme="dark"] .docs-stat-total strong,
[data-theme="oscuro"] .docs-stat-total strong {
  color: var(--kc-text, #E2E8E6);
}

/* ==========================================================================
   7. TARJETA PRO (DISCRETA EN PRUEBA / DESTACADA AL VENCER)
   ========================================================================== */
.aviso-prueba-bloque {
  background: var(--kc-surface, #FFFFFF);
  background-image: none;
  color: var(--kc-text, #202C2A);
  border: 1px solid var(--kc-border, #DCE3DE);
  border-radius: var(--radius-card, 12px);
  padding: 20px;
  margin: 0;
  max-width: none;
  box-shadow: var(--shadow-subtle, 0 1px 3px rgba(0, 0, 0, 0.05));
  position: relative;
  overflow: hidden;
}

[data-theme="dark"] .aviso-prueba-bloque,
[data-theme="oscuro"] .aviso-prueba-bloque {
  background: var(--kc-surface, #1A2422);
  border-color: var(--kc-border, #31423E);
  color: var(--kc-text, #E2E8E6);
}

.aviso-prueba-bloque::before {
  display: none;
}

.pro-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.pro-icono {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-control, 8px);
  background-color: var(--kc-primary-soft, #DDECE7);
  color: var(--kc-primary, #126B63);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

[data-theme="dark"] .pro-icono,
[data-theme="oscuro"] .pro-icono {
  background-color: var(--kc-primary-soft, #1F443B);
  color: var(--kc-primary, #74D4C0);
}

.pro-icono svg,
.pro-icono i {
  width: 20px;
  height: 20px;
  stroke: currentColor;
}

.pro-titulo {
  font-size: 1rem;
  font-weight: 700;
  color: var(--kc-text, #202C2A);
}

[data-theme="dark"] .pro-titulo,
[data-theme="oscuro"] .pro-titulo {
  color: var(--kc-text, #E2E8E6);
}

.pro-subtitulo {
  font-size: 0.8rem;
  color: var(--kc-text-muted, #53615D);
}

.pro-prueba {
  margin: 12px 0;
}

.pro-prueba-linea {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  margin-bottom: 6px;
  color: var(--kc-text, #202C2A);
}

[data-theme="dark"] .pro-prueba-linea,
[data-theme="oscuro"] .pro-prueba-linea {
  color: var(--kc-text, #E2E8E6);
}

.pro-barra {
  width: 100%;
  height: 6px;
  background-color: var(--kc-surface-subtle, #EEF1ED);
  border-radius: 3px;
  overflow: hidden;
}

[data-theme="dark"] .pro-barra,
[data-theme="oscuro"] .pro-barra {
  background-color: var(--kc-surface-subtle, #253330);
}

.pro-barra-fill {
  height: 100%;
  background: var(--kc-primary, #126B63);
  background-image: none;
  border-radius: 3px;
  transition: width 0.3s ease;
}

[data-theme="dark"] .pro-barra-fill,
[data-theme="oscuro"] .pro-barra-fill {
  background: var(--kc-primary, #74D4C0);
  background-image: none;
}

.pro-prueba-mini {
  font-size: 0.775rem;
  color: var(--kc-text-muted, #53615D);
  margin-top: 6px;
}

.pro-info {
  font-size: 0.825rem;
  color: var(--kc-text-muted, #53615D);
  line-height: 1.4;
  margin-bottom: 14px;
}

.btn-comprar-pro,
.btn-comprar {
  width: 100%;
  min-height: 44px;
  padding: 10px 16px;
  background-color: var(--kc-primary, #126B63);
  color: var(--kc-on-primary, #FFFFFF);
  font-size: 0.95rem;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-control, 8px);
  cursor: pointer;
  transition: background-color var(--transition-fast);
  box-shadow: none;
}

.btn-comprar-pro:hover,
.btn-comprar:hover {
  background-color: var(--kc-primary-hover, #0C5751);
  transform: none;
}

/* ==========================================================================
   8. HERRAMIENTAS DE CABINA (ACCESOS RÁPIDOS)
   ========================================================================== */
.utility-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
}

@media (max-width: 480px) {
  .utility-buttons {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1280px) {
  .utility-buttons {
    gap: 12px;
  }
}

@media (min-width: 1440px) {
  .utility-buttons {
    gap: 14px;
  }
}

.utility-buttons .btn--secondary {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 64px;
  padding: 12px 8px;
  background-color: var(--kc-surface, #FFFFFF);
  border: 1px solid var(--kc-border, #DCE3DE);
  border-radius: var(--radius-control, 8px);
  color: var(--kc-text, #202C2A);
  font-size: 0.8rem;
  font-weight: 600;
  box-shadow: var(--shadow-subtle, 0 1px 3px rgba(0, 0, 0, 0.05));
  cursor: pointer;
  transition: all var(--transition-fast);
}

@media (min-width: 1280px) {
  .utility-buttons .btn--secondary {
    min-height: 70px;
    padding: 14px 10px;
    font-size: 0.85rem;
  }
}

@media (min-width: 1440px) {
  .utility-buttons .btn--secondary {
    min-height: 76px;
    padding: 16px 12px;
    font-size: 0.9rem;
  }
}

.utility-buttons .btn--secondary:hover {
  background-color: var(--kc-surface-subtle, #EEF1ED);
  border-color: var(--kc-primary, #126B63);
  color: var(--kc-primary, #126B63);
  transform: translateY(-1px);
}

[data-theme="dark"] .utility-buttons .btn--secondary,
[data-theme="oscuro"] .utility-buttons .btn--secondary {
  background-color: var(--kc-surface, #1A2422);
  border-color: var(--kc-border, #31423E);
  color: var(--kc-text, #E2E8E6);
}

[data-theme="dark"] .utility-buttons .btn--secondary:hover,
[data-theme="oscuro"] .utility-buttons .btn--secondary:hover {
  background-color: var(--kc-surface-subtle, #253330);
  border-color: var(--kc-primary, #74D4C0);
  color: var(--kc-primary, #74D4C0);
}

.utility-buttons .btn--secondary svg,
.utility-buttons .btn--secondary i {
  width: 20px;
  height: 20px;
  stroke: var(--kc-primary, #126B63);
}

[data-theme="dark"] .utility-buttons .btn--secondary svg,
[data-theme="dark"] .utility-buttons .btn--secondary i,
[data-theme="oscuro"] .utility-buttons .btn--secondary svg,
[data-theme="oscuro"] .utility-buttons .btn--secondary i {
  stroke: var(--kc-primary, #74D4C0);
}

/* Botón Flotante de sugerencia (FAB) */
.fab-feedback {
  position: fixed;
  bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  right: 18px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: var(--kc-nav-bg, #202C2A);
  color: #FFFFFF;
  border: 1px solid var(--kc-border, #DCE3DE);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 900;
  transition: transform var(--transition-fast);
}

.fab-feedback svg,
.fab-feedback i {
  width: 20px;
  height: 20px;
  stroke: #FFFFFF;
}

.fab-feedback:hover {
  transform: scale(1.08);
}

/* ==========================================================================
   9. BARRA DE NAVEGACIÓN INFERIOR (BOTTOM-NAV)
   ========================================================================== */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  transform: none;
  width: 100%;
  max-width: 100%;
  height: calc(62px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background-color: var(--kc-surface, #FFFFFF);
  border-top: 1px solid var(--kc-border, #DCE3DE);
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 1000;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .bottom-nav,
[data-theme="oscuro"] .bottom-nav {
  background-color: var(--kc-surface, #1A2422);
  border-top-color: var(--kc-border, #31423E);
}

.bottom-nav a {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-decoration: none;
  color: var(--kc-text-muted, #53615D);
  font-size: 0.725rem;
  font-weight: 500;
  transition: color var(--transition-fast);
  position: relative;
  min-width: 0;
  overflow: hidden;
}

.bottom-nav a span {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  font-size: 0.72rem;
  line-height: 1.2;
  padding: 0 2px;
}

.bottom-nav a svg,
.bottom-nav a i {
  width: 22px;
  height: 22px;
  stroke: currentColor;
}

.bottom-nav a.active,
.bottom-nav a[aria-current="page"] {
  color: var(--kc-primary, #126B63);
  font-weight: 700;
}

[data-theme="dark"] .bottom-nav a.active,
[data-theme="dark"] .bottom-nav a[aria-current="page"],
[data-theme="oscuro"] .bottom-nav a.active,
[data-theme="oscuro"] .bottom-nav a[aria-current="page"] {
  color: var(--kc-primary, #74D4C0);
}

/* Línea de acento para pestaña activa */
.bottom-nav a.active::after,
.bottom-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 2.5px;
  background-color: var(--kc-primary, #126B63);
  border-radius: 0 0 2px 2px;
}

[data-theme="dark"] .bottom-nav a.active::after,
[data-theme="dark"] .bottom-nav a[aria-current="page"]::after,
[data-theme="oscuro"] .bottom-nav a.active::after,
[data-theme="oscuro"] .bottom-nav a[aria-current="page"]::after {
  background-color: var(--kc-primary, #74D4C0);
}

/* Ocultar barra inferior en pantallas grandes */
@media (min-width: 1024px) {
  .bottom-nav {
    display: none;
  }

  .fab-feedback {
    bottom: 24px;
    right: 24px;
  }
}

/* Pie de página */
.app-footer {
  padding: 24px 16px 12px 16px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--kc-text-muted, #53615D);
}

.app-footer a {
  color: var(--kc-text-muted, #53615D);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.app-footer a:hover {
  text-decoration: underline;
  color: var(--kc-text, #202C2A);
}

/* ==========================================================================
   10. MAPA DE ACTIVIDAD GEOGRÁFICA EN EUROPA (EXCLUSIVO ESCRITORIO)
   Identidad: Grafito + Verde Petróleo · Tarjetas Profesionales y Modo Oscuro
   ========================================================================== */

/* Oculto estrictamente en móviles y tablets (< 1024px) */
.dash__mapa-actividad {
  display: none !important;
}

/* Activo exclusivamente en escritorio (>= 1024px) */
@media (min-width: 1024px) {
  .dash__mapa-actividad {
    display: block !important;
    grid-column: 1 / -1;
    margin-top: 6px;
  }
}

.dash__mapa-card {
  background-color: var(--kc-surface, #FFFFFF);
  border: 1px solid var(--kc-border, #DCE3DE);
  border-radius: var(--radius-card, 12px);
  padding: 24px;
  box-shadow: var(--shadow-subtle, 0 1px 3px rgba(0, 0, 0, 0.05));
  box-sizing: border-box;
}

[data-theme="dark"] .dash__mapa-card,
[data-theme="oscuro"] .dash__mapa-card {
  background-color: var(--kc-surface, #1C2623);
  border-color: var(--kc-border, #394B44);
}

.dash__mapa-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--kc-border, #DCE3DE);
}

[data-theme="dark"] .dash__mapa-header,
[data-theme="oscuro"] .dash__mapa-header {
  border-bottom-color: var(--kc-border, #31423E);
}

.dash__mapa-header-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dash__mapa-header-info .dash__card-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--kc-text, #202C2A);
  letter-spacing: -0.01em;
}

[data-theme="dark"] .dash__mapa-header-info .dash__card-title,
[data-theme="oscuro"] .dash__mapa-header-info .dash__card-title {
  color: var(--kc-text, #F2F5F2);
}

.dash__mapa-header-info .dash__card-title i,
.dash__mapa-header-info .dash__card-title svg {
  width: 20px;
  height: 20px;
  stroke: var(--kc-primary, #126B63);
}

[data-theme="dark"] .dash__mapa-header-info .dash__card-title i,
[data-theme="dark"] .dash__mapa-header-info .dash__card-title svg,
[data-theme="oscuro"] .dash__mapa-header-info .dash__card-title i,
[data-theme="oscuro"] .dash__mapa-header-info .dash__card-title svg {
  stroke: var(--kc-primary, #74D4C0);
}

.dash__mapa-subtitulo {
  font-size: 0.85rem;
  color: var(--kc-text-muted, #53615D);
  font-weight: 500;
}

[data-theme="dark"] .dash__mapa-subtitulo,
[data-theme="oscuro"] .dash__mapa-subtitulo {
  color: var(--kc-text-muted, #BCC9C2);
}

.mapa-badge-contador {
  background-color: var(--kc-primary-soft, #DDECE7);
  color: var(--kc-primary, #126B63);
  font-size: 0.825rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 9999px;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

[data-theme="dark"] .mapa-badge-contador,
[data-theme="oscuro"] .mapa-badge-contador {
  background-color: var(--kc-primary-soft, #1F443B);
  color: var(--kc-primary, #74D4C0);
}

/* Composición de 2 columnas en escritorio */
.dash__mapa-body {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 24px;
  align-items: start;
}

@media (min-width: 1280px) {
  .dash__mapa-body {
    grid-template-columns: 1.55fr 1fr;
    gap: 30px;
  }
}

/* Columna izquierda: Contenedor del mapa SVG */
.dash__mapa-visual {
  background-color: var(--kc-surface-subtle, #EEF1ED);
  border: 1px solid var(--kc-border, #DCE3DE);
  border-radius: var(--radius-control, 10px);
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  min-height: 400px;
}

[data-theme="dark"] .dash__mapa-visual,
[data-theme="oscuro"] .dash__mapa-visual {
  background-color: var(--kc-surface-subtle, #25322E);
  border-color: var(--kc-border, #394B44);
}

.mapa-europa-svg {
  width: 100%;
  height: auto;
  max-height: 480px;
  display: block;
}

/* Estilos de los países en el SVG */
.mapa-pais {
  fill: var(--kc-surface, #FFFFFF);
  stroke: var(--kc-border, #DCE3DE);
  stroke-width: 0.75px;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: fill 200ms ease, stroke 200ms ease, filter 200ms ease, stroke-width 200ms ease;
  cursor: default;
}

[data-theme="dark"] .mapa-pais,
[data-theme="oscuro"] .mapa-pais {
  fill: var(--kc-surface, #1C2623);
  stroke: var(--kc-border, #394B44);
}

/* País con rutas registradas (iluminado con Verde Petróleo de KamionCloud) */
.mapa-pais.pais-visitado {
  fill: var(--kc-primary, #126B63);
  stroke: var(--kc-primary-hover, #0C5751);
  stroke-width: 1.2px;
  cursor: pointer;
}

[data-theme="dark"] .mapa-pais.pais-visitado,
[data-theme="oscuro"] .mapa-pais.pais-visitado {
  fill: var(--kc-primary, #74D4C0);
  stroke: var(--kc-primary-hover, #9BE3D4);
}

.mapa-pais.pais-visitado:hover,
.mapa-pais.pais-hover-activo {
  filter: brightness(1.15) drop-shadow(0 2px 6px rgba(18, 107, 99, 0.35));
  stroke: var(--kc-text, #202C2A);
  stroke-width: 1.8px;
}

[data-theme="dark"] .mapa-pais.pais-visitado:hover,
[data-theme="dark"] .mapa-pais.pais-hover-activo,
[data-theme="oscuro"] .mapa-pais.pais-visitado:hover,
[data-theme="oscuro"] .mapa-pais.pais-hover-activo {
  filter: brightness(1.2) drop-shadow(0 2px 6px rgba(116, 212, 192, 0.45));
  stroke: #FFFFFF;
}

.mapa-microestado {
  fill: var(--kc-border, #DCE3DE);
  stroke: none;
}

[data-theme="dark"] .mapa-microestado,
[data-theme="oscuro"] .mapa-microestado {
  fill: var(--kc-border, #394B44);
}

/* Columna derecha: Panel de Países y Ciudades */
.dash__mapa-sidebar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 480px;
  overflow-y: auto;
  padding-right: 6px;
}

.dash__mapa-sidebar::-webkit-scrollbar {
  width: 6px;
}

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

.dash__mapa-sidebar::-webkit-scrollbar-thumb {
  background-color: var(--kc-border, #DCE3DE);
  border-radius: 4px;
}

[data-theme="dark"] .dash__mapa-sidebar::-webkit-scrollbar-thumb,
[data-theme="oscuro"] .dash__mapa-sidebar::-webkit-scrollbar-thumb {
  background-color: var(--kc-border, #394B44);
}

/* Estado Vacío cuando no hay viajes registrados */
.mapa-estado-vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 36px 20px;
  background-color: var(--kc-surface-subtle, #EEF1ED);
  border: 1px dashed var(--kc-border, #DCE3DE);
  border-radius: var(--radius-control, 10px);
  min-height: 380px;
  box-sizing: border-box;
}

[data-theme="dark"] .mapa-estado-vacio,
[data-theme="oscuro"] .mapa-estado-vacio {
  background-color: var(--kc-surface-subtle, #25322E);
  border-color: var(--kc-border, #394B44);
}

.mapa-vacio-icono {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--kc-surface, #FFFFFF);
  color: var(--kc-primary, #126B63);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  box-shadow: var(--shadow-subtle, 0 1px 3px rgba(0, 0, 0, 0.05));
}

[data-theme="dark"] .mapa-vacio-icono,
[data-theme="oscuro"] .mapa-vacio-icono {
  background-color: var(--kc-surface, #1C2623);
  color: var(--kc-primary, #74D4C0);
}

.mapa-vacio-icono svg {
  width: 24px;
  height: 24px;
}

.mapa-vacio-titulo {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--kc-text, #202C2A);
  margin-bottom: 6px;
}

[data-theme="dark"] .mapa-vacio-titulo,
[data-theme="oscuro"] .mapa-vacio-titulo {
  color: var(--kc-text, #F2F5F2);
}

.mapa-vacio-desc {
  font-size: 0.825rem;
  color: var(--kc-text-muted, #53615D);
  line-height: 1.45;
  margin: 0 0 16px 0;
  max-width: 280px;
}

[data-theme="dark"] .mapa-vacio-desc,
[data-theme="oscuro"] .mapa-vacio-desc {
  color: var(--kc-text-muted, #BCC9C2);
}

/* Tarjeta individual de país en la lista */
.mapa-lista-paises {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mapa-pais-item {
  background-color: var(--kc-surface-subtle, #EEF1ED);
  border: 1px solid var(--kc-border, #DCE3DE);
  border-radius: var(--radius-control, 10px);
  padding: 12px 14px;
  transition: all var(--transition-fast, 150ms ease);
  cursor: pointer;
}

[data-theme="dark"] .mapa-pais-item,
[data-theme="oscuro"] .mapa-pais-item {
  background-color: var(--kc-surface-subtle, #25322E);
  border-color: var(--kc-border, #394B44);
}

.mapa-pais-item:hover {
  border-color: var(--kc-primary, #126B63);
  transform: translateY(-1px);
  box-shadow: var(--shadow-subtle, 0 2px 6px rgba(0, 0, 0, 0.06));
}

[data-theme="dark"] .mapa-pais-item:hover,
[data-theme="oscuro"] .mapa-pais-item:hover {
  border-color: var(--kc-primary, #74D4C0);
}

.mapa-pais-item__head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mapa-pais-item__bandera {
  font-size: 1.35rem;
  line-height: 1;
}

.mapa-pais-item__nombre {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--kc-text, #202C2A);
  flex: 1;
}

[data-theme="dark"] .mapa-pais-item__nombre,
[data-theme="oscuro"] .mapa-pais-item__nombre {
  color: var(--kc-text, #F2F5F2);
}

.mapa-pais-item__badge {
  background-color: var(--kc-primary-soft, #DDECE7);
  color: var(--kc-primary, #126B63);
  font-size: 0.775rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 9999px;
  white-space: nowrap;
}

[data-theme="dark"] .mapa-pais-item__badge,
[data-theme="oscuro"] .mapa-pais-item__badge {
  background-color: var(--kc-primary-soft, #1F443B);
  color: var(--kc-primary, #74D4C0);
}

.mapa-pais-item__ciudades {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--kc-border, #DCE3DE);
}

[data-theme="dark"] .mapa-pais-item__ciudades,
[data-theme="oscuro"] .mapa-pais-item__ciudades {
  border-top-color: var(--kc-border, #31423E);
}

.mapa-ciudad-chip {
  background-color: var(--kc-surface, #FFFFFF);
  border: 1px solid var(--kc-border, #DCE3DE);
  color: var(--kc-text, #202C2A);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  line-height: 1.3;
}

[data-theme="dark"] .mapa-ciudad-chip,
[data-theme="oscuro"] .mapa-ciudad-chip {
  background-color: var(--kc-surface, #1C2623);
  border-color: var(--kc-border, #394B44);
  color: var(--kc-text, #F2F5F2);
}

/* Tooltip interactivo flotante */
.mapa-tooltip {
  position: fixed;
  pointer-events: none;
  z-index: 1000;
  background-color: var(--kc-nav-bg, #202C2A);
  color: var(--kc-nav-text, #F0F4EF);
  padding: 10px 14px;
  border-radius: var(--radius-control, 8px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
  font-size: 0.85rem;
  line-height: 1.4;
  max-width: 280px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 120ms ease, visibility 120ms ease;
}

.mapa-tooltip.visible {
  opacity: 1;
  visibility: visible;
}

.mapa-tooltip__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.mapa-tooltip__bandera {
  font-size: 1.15rem;
}

.mapa-tooltip__pais {
  font-size: 0.9rem;
  font-weight: 700;
  color: #FFFFFF;
  flex: 1;
}

.mapa-tooltip__badge {
  background-color: var(--kc-primary, #126B63);
  color: #FFFFFF;
  font-size: 0.725rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 9999px;
}

.mapa-tooltip__ciudades {
  font-size: 0.775rem;
  color: #DCE3DE;
  margin-top: 4px;
}

.mapa-tooltip__label {
  font-weight: 600;
  color: #BCC9C2;
}

.mapa-tooltip__sin-visita {
  font-size: 0.775rem;
  color: #BCC9C2;
  font-style: italic;
}