/* ============================================================
   CiberGantt — Estructura: rail, barra lateral, cabecera, pestañas
   ============================================================ */

.cg-app {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--cg-bg);
  color: var(--cg-text);
}

.cg-body {
  flex: 1;
  display: flex;
  min-height: 0;
  position: relative;
}

/* ---------- Rail vertical ---------- */
.cg-rail {
  flex: none;
  width: var(--cg-rail-w);
  background: linear-gradient(180deg, var(--cg-rail-from), var(--cg-rail-to));
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 0;
  gap: 6px;
  z-index: 75;
}

.cg-rail__mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--cg-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 14px;
  letter-spacing: -.02em;
}

.cg-rail__btn {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, .75);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}

/* Sobre el rail oscuro el tono primario por defecto (azul profundo) queda
   invisible: aquí el trazo principal sigue al color del botón y el naranja
   pasa a ser el detalle. */
.cg-rail__btn i {
  --fa-primary-color: currentColor;
  --fa-primary-opacity: 1;
  --fa-secondary-color: var(--cg-orange);
  --fa-secondary-opacity: .9;
}
.cg-rail__btn:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.cg-rail__btn.is-active { background: rgba(255, 255, 255, .14); color: #fff; }
.cg-rail__btn.is-active i { --fa-secondary-color: var(--cg-orange); --fa-secondary-opacity: 1; }
.cg-rail__btn--filled { background: rgba(255, 255, 255, .14); color: #fff; }
.cg-rail__btn--filled:hover { background: rgba(255, 255, 255, .24); }
.cg-rail__btn--round { border-radius: 50%; margin-top: 8px; }

.cg-rail__lang {
  width: 38px;
  height: 24px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .14);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
}
.cg-rail__lang:hover { background: rgba(255, 255, 255, .26); }

.cg-rail__logo {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  flex: none;
}
.cg-rail__logo img { width: 26px; height: 26px; object-fit: contain; object-position: center top; }

/* ---------- Barra lateral deslizante ---------- */
.cg-side {
  flex: none;
  width: var(--cg-side-w);
  margin-left: calc(-1 * var(--cg-side-w));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* La geometría (margin-left) cambia al instante: si dependiera de una
     transición y el navegador tuviera las animaciones detenidas, el panel se
     quedaría fuera de pantalla e imposible de pulsar. Se anima la opacidad,
     y el contenido entra con un leve desplazamiento. */
  transition: opacity .18s ease, visibility 0s linear .2s;
  background: var(--cg-surface);
  border-right: 2px solid var(--cg-border);
  display: flex;
  flex-direction: column;
  padding: 14px 12px;
  gap: 4px;
  overflow-y: auto;
  overflow-x: hidden;
}
.cg-side > * {
  transform: translateX(-10px);
  transition: transform .22s cubic-bezier(.4, 0, .2, 1);
}
.cg-side.is-open {
  margin-left: 0;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.cg-side.is-open > * { transform: translateX(0); }

.cg-side__item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: var(--cg-text);
  font-size: 13px;
  font-weight: 600;
  width: 100%;
  text-align: left;
  flex: none;
}
.cg-side__item i {
  width: 16px;
  text-align: center;
  flex: none;
  font-size: 14px;
  --fa-primary-color: var(--cg-icon);
  --fa-primary-opacity: 1;
  --fa-secondary-color: var(--cg-icon);
  --fa-secondary-opacity: .32;
}
.cg-side__item.is-active i { --fa-primary-color: currentColor; --fa-secondary-color: currentColor; }
.cg-side__item:hover { background: var(--cg-surface2); }
.cg-side__item.is-active { background: var(--cg-blue-s); color: var(--cg-blue); font-weight: 700; }

.cg-side__sep { height: 1px; background: var(--cg-border); margin: 10px 2px; flex: none; }

.cg-side__section {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  color: var(--cg-t2);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  flex: none;
}
.cg-side__section button {
  background: none;
  border: none;
  color: inherit;
  padding: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
}
.cg-side__section button:hover { color: var(--cg-blue); }
.cg-side__section .cg-side__add:hover { color: var(--cg-orange); }

.cg-side__project {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: var(--cg-text);
  font-size: 12.5px;
  font-weight: 500;
  width: 100%;
  flex: none;
}
.cg-side__project:hover { background: var(--cg-surface2); }
.cg-side__project.is-active { background: var(--cg-blue-s); color: var(--cg-blue); font-weight: 700; }
.cg-side__project .cg-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.cg-side__project .cg-name { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-side__project .cg-pct { font-size: 10.5px; color: var(--cg-t3); font-weight: 700; }

/* ---------- Columna principal ---------- */
.cg-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  position: relative;
}

/* ---------- Cabecera con pestañas ---------- */
.cg-header {
  flex: none;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 18px;
  border-bottom: 1px solid var(--cg-border);
  background: var(--cg-surface);
  height: 52px;
}

.cg-header__title {
  font-weight: 800;
  font-size: 15px;
  margin-right: 16px;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* overflow-y:hidden evita la segunda barra de desplazamiento */
.cg-tabs {
  display: flex;
  align-items: stretch;
  gap: 2px;
  overflow-x: auto;
  overflow-y: hidden;
  height: 52px;
}

.cg-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  height: 52px;
  border: none;
  background: none;
  font-size: 12.5px;
  font-weight: 700;
  border-bottom: 2.5px solid transparent;
  color: var(--cg-t2);
  white-space: nowrap;
  flex: none;
}
.cg-tab i { font-size: 13px; }
.cg-tab:hover { color: var(--cg-text); }
.cg-tab.is-active { border-bottom-color: var(--cg-orange); color: var(--cg-text); }
/* Solo iconos cuando las etiquetas no caben */
.cg-tabs.is-compact .cg-tab { padding: 0 11px; }

/* ---------- Zona de vistas ---------- */
.cg-views { flex: 1; min-height: 0; position: relative; }

.cg-view {
  display: none;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.cg-view.is-active { display: flex; }

/* ---------- Avisos flotantes ---------- */
.cg-toasts {
  position: fixed;
  bottom: 18px;
  right: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 200;
  align-items: flex-end;
}
.cg-toast {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--cg-navy);
  color: #fff;
  padding: 10px 16px;
  border-radius: 9px;
  box-shadow: var(--cg-shadow);
  font-size: 12.5px;
  font-weight: 600;
  animation: cg-toast-in .18s ease-out;
}
.cg-toast i { color: var(--cg-orange); }
.cg-toast i.fasds { color: #fff; }

/* Entre estos anchos las pestañas van en modo icono; el título del
   proyecto cede espacio para que las diez quepan sin desbordar. */
@media (max-width: 1284px) {
  .cg-header__title { max-width: 130px; margin-right: 10px; }
}

/* ---------- Móvil ---------- */
@media (max-width: 880px) {
  .cg-header { padding: 0 12px; }
  .cg-header__title { max-width: 110px; font-size: 14px; }
}

/* El círculo de cuenta reutiliza la caja del logo: mismo tamaño y sitio,
   pero es un botón y puede llevar foto o iniciales. */
.cg-rail__cuenta {
  padding: 0;
  border: 0;
  cursor: pointer;
  font: 700 12px/1 'Archivo', system-ui, sans-serif;
  letter-spacing: .02em;
  transition: transform .15s, box-shadow .15s;
}
.cg-rail__cuenta:hover { transform: scale(1.06); box-shadow: 0 0 0 2px rgba(255,255,255,.5); }
.cg-rail__cuenta img { width: 100%; height: 100%; object-fit: cover; object-position: center; }