/* Estructura del tablero: rail de navegación a la izquierda y barra de
   herramientas arriba. El interior de las tarjetas conserva su CSS original;
   acá solo se rearma el marco.

   Los tokens extienden los que ya traía el dashboard (--navy, --teal, --blue)
   en vez de abrir una paleta nueva. */

:root {
  --rail: 236px;
  --barra: 60px;

  --rail-fondo: #0b1643;
  --rail-texto: rgba(255, 255, 255, 0.72);
  --rail-texto-fuerte: #fff;
  --rail-rotulo: rgba(255, 255, 255, 0.38);
  --rail-linea: rgba(255, 255, 255, 0.1);
  --rail-activo: rgba(32, 137, 255, 0.16);
}

/* ------------------------------------------------------------------ marco */

body.ssc-adentro {
  padding-left: var(--rail);
}

body.ssc-adentro > .topbar {
  display: none; /* la franja de color la reemplaza el rail */
}

body.ssc-adentro > .wrap {
  max-width: 1560px;
  padding: 20px 28px 48px;
}

/* La cabecera original se reemplaza por el rail y la barra. */
body.ssc-adentro .hdr,
body.ssc-adentro .main-tabs {
  display: none;
}

/* El filtro por frente ahora vive en el rail; dejar también los chips del
   tablero da dos controles para lo mismo, que además se desincronizan visualmente. */
body.ssc-adentro #frontFilters {
  display: none;
}

/* ------------------------------------------------------------------- rail */

.ssc-rail {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--rail);
  background: var(--rail-fondo);
  color: var(--rail-texto);
  display: flex;
  flex-direction: column;
  z-index: 500;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ssc-rail-marca {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 18px 18px 16px;
  border-bottom: 1px solid var(--rail-linea);
  flex-shrink: 0;
}

.ssc-rail-marca img {
  height: 34px;
  width: auto;
  /* El logo viene sobre fondo blanco; sobre el navy se lo aclara en vez de
     pedir otro archivo. */
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

.ssc-rail-marca div {
  min-width: 0;
  line-height: 1.25;
}

.ssc-rail-marca strong {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--rail-texto-fuerte);
  letter-spacing: -0.01em;
}

.ssc-rail-marca span {
  display: block;
  font-size: 10.5px;
  color: var(--rail-rotulo);
  margin-top: 1px;
}

.ssc-grupo {
  padding: 16px 12px 4px;
}

.ssc-grupo-rotulo {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--rail-rotulo);
  padding: 0 8px 8px;
}

/* Los botones de pestaña son los originales, movidos acá adentro: conservan su
   onclick y el toggle de .active, así que no se reimplementa la navegación. */
.ssc-rail .mtab,
.ssc-rail-enlace {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  text-align: left;
  color: var(--rail-texto);
  background: none;
  border: 0;
  border-radius: 7px;
  padding: 8px 10px;
  margin-bottom: 1px;
  cursor: pointer;
  position: relative;
  transition: background 0.12s, color 0.12s;
}

.ssc-rail .mtab:hover,
.ssc-rail-enlace:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--rail-texto-fuerte);
}

.ssc-rail .mtab.active {
  background: var(--rail-activo);
  color: var(--rail-texto-fuerte);
  font-weight: 600;
}

.ssc-rail .mtab.active::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 7px;
  bottom: 7px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--blue, #2089ff);
}

/* El número que traían las pestañas ("1. Resumen ejecutivo") se oculta con
   ::first-line no; se limpia desde JS. Acá solo se asegura el corte. */
.ssc-rail .mtab {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ------------------------------------------------------- frentes del rail */

/* Cada frente lleva su color real del sistema y su avance de la semana: el
   menú de la izquierda es, además de navegación, el estado del programa. */
.ssc-frente {
  display: block;
  width: 100%;
  font: inherit;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 7px;
  padding: 7px 10px 8px;
  margin-bottom: 1px;
  cursor: pointer;
  position: relative;
  transition: background 0.12s;
}

.ssc-frente:hover {
  background: rgba(255, 255, 255, 0.06);
}

.ssc-frente.activo {
  background: var(--rail-activo);
}

.ssc-frente-fila {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ssc-frente-color {
  width: 3px;
  height: 13px;
  border-radius: 2px;
  flex-shrink: 0;
  background: var(--color-frente);
}

.ssc-frente-nombre {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--rail-texto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ssc-frente.activo .ssc-frente-nombre {
  color: var(--rail-texto-fuerte);
  font-weight: 600;
}

.ssc-frente-pct {
  font-size: 11px;
  font-weight: 600;
  color: var(--rail-texto-fuerte);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.ssc-frente-pct.vacio {
  color: var(--rail-rotulo);
  font-weight: 400;
}

.ssc-frente-medidor {
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
  margin: 6px 0 0 11px;
  overflow: hidden;
}

.ssc-frente-medidor i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--color-frente);
  transition: width 0.35s ease;
}

/* ------------------------------------------------------- pie del rail */

.ssc-rail-pie {
  margin-top: auto;
  padding: 12px;
  border-top: 1px solid var(--rail-linea);
  flex-shrink: 0;
}

.ssc-yo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
}

.ssc-yo-inicial {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--blue, #2089ff);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 11.5px;
  font-weight: 700;
  flex-shrink: 0;
}

.ssc-yo-datos {
  min-width: 0;
  line-height: 1.3;
  flex: 1;
}

.ssc-yo-datos strong {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--rail-texto-fuerte);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ssc-yo-datos span {
  display: block;
  font-size: 10.5px;
  color: var(--rail-rotulo);
}

.ssc-yo-salir {
  font: inherit;
  font-size: 15px;
  line-height: 1;
  color: var(--rail-rotulo);
  background: none;
  border: 0;
  padding: 5px;
  border-radius: 5px;
  cursor: pointer;
  flex-shrink: 0;
}

.ssc-yo-salir:hover {
  color: var(--rail-texto-fuerte);
  background: rgba(255, 255, 255, 0.08);
}

/* ------------------------------------------------------ barra superior */

.ssc-barra {
  position: sticky;
  top: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--barra);
  padding: 0 28px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule, #d9d9d9);
  margin: 0 -28px;
}

.ssc-barra-titulo {
  min-width: 0;
  flex: 1;
}

.ssc-barra-titulo h1 {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy, #0b1643);
  letter-spacing: -0.02em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ssc-barra-titulo p {
  font-size: 11px;
  color: var(--ink-3, #757575);
  margin-top: 2px;
}

.ssc-barra-acciones {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}

/* Aviso de guardado: discreto cuando todo va bien, evidente cuando no. */
.ssc-guardado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3, #757575);
  padding: 5px 10px;
  border-radius: 20px;
  background: #f2f5fa;
  white-space: nowrap;
}

.ssc-guardado::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.ssc-guardado.ssc-ok {
  color: var(--green, #007a5e);
  background: #e8f5f0;
}

.ssc-guardado.ssc-mal {
  color: var(--red, #c00000);
  background: #fde8e8;
}

.ssc-menu-movil {
  display: none;
  font: inherit;
  font-size: 18px;
  line-height: 1;
  background: none;
  border: 1px solid var(--rule, #d9d9d9);
  border-radius: 7px;
  width: 34px;
  height: 34px;
  cursor: pointer;
  color: var(--navy, #0b1643);
  flex-shrink: 0;
}

/* ------------------------------------------------------------- angosto */

@media (max-width: 1024px) {
  body.ssc-adentro {
    padding-left: 0;
  }

  .ssc-rail {
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    box-shadow: 0 0 40px rgba(4, 10, 32, 0.4);
  }

  body.ssc-rail-abierto .ssc-rail {
    transform: none;
  }

  body.ssc-rail-abierto::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(11, 22, 67, 0.4);
    z-index: 450;
  }

  .ssc-menu-movil {
    display: block;
  }

  body.ssc-adentro > .wrap {
    padding: 14px 16px 40px;
  }

  /* La barra pasa a dos renglones en vez de desbordar: el título arriba y las
     acciones abajo. */
  .ssc-barra {
    height: auto;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 16px;
    margin: 0 -16px;
  }

  .ssc-barra-titulo {
    flex: 1 1 60%;
  }

  .ssc-barra-acciones {
    flex: 1 1 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

/* Las tablas del tablero son más anchas que un teléfono. Que las desplace su
   propio contenedor en vez de estirar la página entera.
   Algunas ya venían dentro de un div con overflow; otras no. */
body.ssc-adentro :has(> table.obj-table),
body.ssc-adentro .card:has(table) {
  overflow-x: auto;
}

/* La guía de arriba mantiene cada definición en una línea, que en desktop se
   lee como una fila de etiquetas pero en un teléfono desborda la página. */
@media (max-width: 1024px) {
  body.ssc-adentro .dash-guide-row span {
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ssc-rail,
  .ssc-frente-medidor i {
    transition: none;
  }
}