/* ============================================================
   SkinnyProject — Página PERT/CPM Detail
   ============================================================ */

/* ── BREADCRUMB ────────────────────────────────────────────── */
.pert-breadcrumb {
  padding: var(--space-3) 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.breadcrumb-list {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  list-style: none;
}

.breadcrumb-list a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--transition);
}
.breadcrumb-list a:hover { color: var(--accent); }

.breadcrumb-list [aria-current="page"] {
  color: var(--text-main);
  font-weight: var(--font-medium);
}

/* ── APP HERO ─────────────────────────────────────────────── */
.pert-hero {
  background: radial-gradient(ellipse 60% 50% at 30% 0%, var(--accent-soft) 0%, transparent 70%);
  border-bottom: 1px solid var(--border);
  padding: var(--space-10) 0;
}

.pert-hero__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
}

.pert-hero__icon {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}

/* ── LAYOUT PRINCIPAL ─────────────────────────────────────── */
.pert-layout__grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-8);
  align-items: flex-start;
}

/* ── TOOLBAR ──────────────────────────────────────────────── */
.pert-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.pert-toolbar__left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.pert-toolbar__title {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-main);
}

.pert-toolbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Canvas */
.pert-canvas-panel .pert-canvas {
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  border-top: none;
  min-height: 280px;
  /* Nunca desborda su contenedor — el SVG usa width:100% height:auto */
  overflow: hidden;
  max-width: 100%;
}

/* ── TABLA ────────────────────────────────────────────────── */
.pert-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  /* Limita el ancho al contenedor padre en cualquier pantalla */
  max-width: 100%;
}

.pert-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  /* Ancho mínimo para que las columnas no se aplasten;
     el wrapper añade scroll horizontal si hace falta */
  min-width: 560px;
}

.pert-table th,
.pert-table td {
  padding: var(--space-2) var(--space-3);
  text-align: center;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.pert-table th {
  background: var(--surface-2);
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 10px;
  position: sticky;
  top: 0;
  z-index: 1;
}

.pert-table td {
  color: var(--text-secondary);
  background: var(--surface);
}

/* Columnas ID y Nombre: alineadas a la izquierda */
.pert-table td:first-child,
.pert-table td:nth-child(2) {
  text-align: left;
  color: var(--text-main);
}

/* Fila crítica */
.pert-table__critical td {
  background: color-mix(in srgb, var(--warning) 8%, transparent);
  color: var(--text-main);
}
.pert-table__critical td:first-child,
.pert-table__critical td:nth-child(2) {
  color: var(--warning);
  font-weight: var(--font-semibold);
}
/* Franja izquierda para filas críticas */
.pert-table__critical td:first-child {
  border-left: 3px solid var(--warning);
}

/* Columnas IC/TC/IT/TT con sus colores */
.pert-table td.col-ic { color: var(--ic); }
.pert-table td.col-tc { color: var(--tc); }
.pert-table td.col-it { color: var(--it); }
.pert-table td.col-tt { color: var(--tt); }

/* Holgura = 0 → naranja */
.pert-table td.col-slack-zero {
  color: var(--warning);
  font-weight: var(--font-semibold);
}

.pert-table tr:last-child td { border-bottom: none; }

.pert-table tr:not(.pert-table__critical):hover td {
  background: var(--surface-2);
}

/* ── PROGRESS BAR ─────────────────────────────────────────── */
.pert-progress {
  width: 100%;
  height: 6px;
  background: var(--surface-2);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.pert-progress__bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--warning));
  border-radius: var(--radius-full);
  transition: width 0.5s ease;
}

/* ── FAQ LAYOUT ───────────────────────────────────────────── */
.pert-faq-layout {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--space-12);
  align-items: flex-start;
}

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .pert-layout__grid {
    grid-template-columns: 1fr;
  }
  .sticky-cta {
    position: static;
  }
}

@media (max-width: 768px) {
  .pert-hero__inner {
    flex-direction: column;
    gap: var(--space-4);
  }

  .pert-faq-layout {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .pert-toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .pert-toolbar__actions {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 2px;
  }

  /* El SVG del canvas escala al 100% del ancho — sin scroll horizontal */
  .pert-canvas svg {
    width: 100% !important;
    height: auto !important;
    display: block;
  }

  /* La tabla de la página demo tiene scroll horizontal,
     nunca fuerza el ancho de la página */
  .pert-table-wrapper {
    max-width: calc(100vw - 2 * var(--space-4));
  }

  /* Reduce padding de celdas en pantallas pequeñas */
  .pert-table th,
  .pert-table td {
    padding: 6px 8px;
  }
}

@media (max-width: 480px) {
  .pert-hero__icon {
    width: 56px;
    height: 56px;
  }

  /* Botones de exportar: apilados */
  .export-row {
    flex-direction: column;
  }

  .pert-table th,
  .pert-table td {
    padding: 5px 6px;
    font-size: 10px;
  }
}