/* ══════════════════════════════════════════
   FICHA DE DETALLE · Digital Core
   Stepper de fases, pestañas, tarjetas y bloques de la ficha (Portfolio IA y Portfolio Data).
══════════════════════════════════════════ */

#detail-page { display: none; }

#detail-page.active { display: block; }

.detail-actions { display: flex; gap: 8px; flex-shrink: 0; margin-left: 20px; margin-top: 4px; }

/* Stepper */

.stepper {
  display: block;
  width: 100%; margin-bottom: 24px;
  overflow-x: auto; padding: 0 0 8px;
}

.phase-stepper-stack {
  display: grid;
  gap: 10px;
}

.phase-stepper-card {
  min-width: max-content;
}

.phase-stepper-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  margin: 0 4px 6px;
  color: var(--text2);
  font-size: 12px;
}

.stepper-flow {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-start;
  min-width: max-content;
  flex: 1;
  --step-progress-duration: 900ms;
  padding: 12px 14px 10px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--surface-white) 4%, transparent) inset;
}

.stepper-progress-rail,
.stepper-progress-fill {
  position: absolute;
  z-index: 0;
  top: 28px;
  left: 62px;
  height: 2px;
  border-radius: var(--radius-pill);
  pointer-events: none;
}

.stepper-progress-rail {
  right: 62px;
  background: var(--border);
}

.stepper-progress-fill {
  z-index: 1;
  width: calc((100% - 124px) * var(--step-progress-ratio, 0));
  background: var(--step-active-color, var(--green));
  transform-origin: left center;
}

.step-circle {
  width: 32px; height: 32px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; font-family: var(--font-mono);
  border: 1px solid var(--border); color: var(--text3);
  background: var(--bg2); flex-shrink: 0;
  transition: border-color var(--transition), background var(--transition), color var(--transition), box-shadow var(--transition);
}

.step-circle.done {
  background: var(--step-active-color, var(--green));
  border-color: var(--step-active-color, var(--green));
  color: var(--step-complete-ink, var(--bg));
}

.step-circle.active {
  background: color-mix(in srgb, var(--step-active-color, var(--accent)) 14%, var(--bg2));
  border-color: var(--step-active-color, var(--accent));
  color: var(--step-active-color, var(--accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--step-active-color, var(--accent)) 18%, transparent);
}

.step-circle.blocked { border-color: var(--warning); color: var(--warning); }

.step-label {
  font-family: var(--font-mono);
  font-size: 10px; color: var(--text2); margin-top: 7px; text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: normal; line-height: 1.3;
  max-width: 92px; word-break: keep-all;
}

.step-label.active { color: var(--step-active-color, var(--accent)); font-weight: 600; }

.step-wrapper {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 92px;
}

.step-connector {
  flex: 1; min-width: 12px; height: 2px;
  background: transparent; flex-shrink: 1;
  margin-top: 16px;
}

.step-connector.done { background: transparent; }

/* Animación de entrada del flujo de estados — solo al abrir la ficha.
   Las animaciones se activan explícitamente después de aplicar las custom
   properties del stepper, evitando que Edge capture valores iniciales aún no
   resueltos al insertar el HTML. */
.stepper-flow:not(.stepper-ready) .step-wrapper {
  opacity: 0;
  transform: translateY(6px) scale(0.94);
}

.stepper-flow:not(.stepper-ready) .stepper-progress-fill {
  opacity: 0.72;
  transform: scaleX(0);
}

.stepper-flow.stepper-ready .step-wrapper {
  animation: stepFadeIn 0.22s cubic-bezier(0.22,1,0.36,1) both;
}

.stepper-flow.stepper-ready .stepper-progress-fill {
  animation: stepProgressLoad var(--step-progress-duration) linear both;
}

.stepper-flow.stepper-ready .step-circle.done {
  animation: stepCircleDoneLoad 180ms cubic-bezier(0.22,1,0.36,1) both;
  animation-delay: max(0ms, calc(var(--step-complete-delay, 0ms) - 180ms));
}

.stepper-flow.stepper-ready .step-circle.active {
  animation: stepCircleActiveLoad 220ms cubic-bezier(0.22,1,0.36,1) both;
  animation-delay: max(0ms, calc(var(--step-complete-delay, 0ms) - 220ms));
}

.step-connector {
  animation: none;
}

@keyframes stepFadeIn {
  from { opacity: 0; transform: translateY(6px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

@keyframes stepProgressLoad {
  from { transform: scaleX(0); opacity: 0.72; }
  to   { transform: scaleX(1); opacity: 1; }
}

@keyframes stepCircleDoneLoad {
  from {
    background: var(--bg2);
    border-color: var(--border);
    color: var(--text3);
    transform: scale(0.94);
  }
  to {
    background: var(--step-active-color, var(--green));
    border-color: var(--step-active-color, var(--green));
    color: var(--step-complete-ink, var(--bg));
    transform: scale(1);
  }
}

@keyframes stepCircleActiveLoad {
  from {
    background: var(--bg2);
    border-color: var(--border);
    color: var(--text3);
    box-shadow: 0 0 0 0 transparent;
    transform: scale(0.94);
  }
  to {
    background: color-mix(in srgb, var(--step-active-color, var(--accent)) 14%, var(--bg2));
    border-color: var(--step-active-color, var(--accent));
    color: var(--step-active-color, var(--accent));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--step-active-color, var(--accent)) 18%, transparent);
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .step-wrapper,
  .step-connector,
  .stepper-progress-fill,
  .step-circle.done,
  .step-circle.active { animation: none; }

  .stepper-flow:not(.stepper-ready) .step-wrapper {
    opacity: 1;
    transform: none;
  }

  .stepper-flow:not(.stepper-ready) .stepper-progress-fill {
    opacity: 1;
    transform: none;
  }
}

/* Info rows (.info-row, .info-label, .info-value): shared/css/components/detail-blocks.css */

.detail-owner-value {
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
}

.detail-team-value {
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
  font-weight: 400;
}

.focus-flash { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius); animation: pulseFocus 1.4s ease; }

@keyframes pulseFocus { 0%,100% { box-shadow: none; } 50% { box-shadow: 0 0 0 6px var(--accent-soft); } }

/* Nombre de la iniciativa en la barra superior: solo en la ficha en móvil (≤ 640 px). */
.topbar-iniciativa { display: none; }
:root { --topbar-nombre-h: 33px; }

/* ── Detail tabs row ── */

.detail-tabs-row {
  position: sticky; top: -28px; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 0 20px; padding: 10px 0;
  background: linear-gradient(var(--bg) 85%, transparent);
  border-bottom: 1px solid var(--border);
}

/* Si no caben, las pestañas se desplazan en horizontal (a cualquier ancho, como en móvil). */
.detail-tabs {
  display: flex; gap: 6px; flex-wrap: nowrap; align-items: center;
  flex: 1 1 auto; min-width: 0;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding-bottom: 2px;
}
.detail-tabs::-webkit-scrollbar { display: none; }
.detail-tabs > .detail-tab { flex: none; white-space: nowrap; }

/* Acciones de la pestaña activa («Editar» / «+» y la estrella de favorito),
   alineadas a la derecha en la misma línea que las pestañas y separadas entre
   sí (estándar de todas las apps). */
.detail-tabs-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-tabs-actions:empty { display: none; }

.detail-tab {
  border: 1px solid var(--border); background: var(--bg2); color: var(--text2);
  border-radius: var(--radius-sm); padding: 7px 11px; font-size: 12px;
}

.detail-tab:hover { color: var(--text); border-color: var(--border2); background: var(--bg3); }
/* Pestaña activa: mismo estilo «seleccionado» que .tab-btn, .segmented y .view-toggle. */
.detail-tab.active { color: var(--accent); border-color: var(--accent-ring); background: var(--accent-soft); font-weight: 600; }

/* Extra separation between tab groups */
.detail-tab.detail-tab-group-start { margin-left: 22px; position: relative; }

/* Línea divisoria fina centrada en el hueco entre cada grupo de pestañas */
.detail-tab.detail-tab-group-start::before {
  content: "";
  position: absolute;
  left: -12px; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 18px;
  background: var(--border2);
}

/* ── Descripción tab cards ── */

.desc-top-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; align-items: stretch; }
/* Igual altura: la tarjeta con menos contenido se estira hasta la de al lado. */
.desc-top-grid > .card { height: 100%; margin-bottom: 0; display: flex; flex-direction: column; }
.desc-top-grid > .card > .card-body { flex: 1 1 auto; }
/* Portfolio IA: Clasificación · Grupo · Business Case · Equipo. */
.desc-top-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1360px) { .desc-top-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.detail-bc-card .card-header { justify-content: space-between; }
.detail-bc-ir { font-size: 12px; }

.desc-text-section { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }

.desc-text-section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }

.desc-text-label { font-size: 11px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }

.desc-text-label svg { width: 12px; height: 12px; opacity: 0.7; }

.desc-text-content { font-size: 13px; color: var(--text); line-height: 1.7; white-space: pre-wrap; }

.desc-text-content.empty { color: var(--text3); font-style: italic; }

/* Render de renderMultilineText(): párrafos y listas de viñetas (presentación). */
.desc-text-content .desc-text-plain { white-space: pre-wrap; }
.desc-text-content .desc-bullets { margin: 4px 0; padding-left: 1.3em; list-style: disc; white-space: normal; }
.desc-text-content .desc-bullets li { margin: 3px 0; }
.desc-text-content .desc-text-plain + .desc-bullets,
.desc-text-content .desc-bullets + .desc-text-plain { margin-top: 8px; }

/* ── Documentación: celdas de archivo (Business Case, PDD, …) ── */
.docs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 12px; }
/* Tarjeta y título: .upload-cell / .upload-cell-label (shared/css/components/file-upload.css).
   El archivo ya subido tiene el mismo aspecto que el de la zona común (.file-drop-file). */
.file-cell-ico { width: 15px; height: 15px; flex: 0 0 auto; }
.file-cell-file { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg2); }
.upload-cell .upload-cell .file-cell-file { background: var(--bg2); }
.file-cell-name { display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%; background: none; border: none; padding: 4px 6px; margin: -4px -6px; border-radius: var(--radius-sm); cursor: pointer; color: var(--text); font: inherit; font-size: 13px; text-align: left; }
.file-cell-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-cell-name:hover { background: var(--bg3); color: var(--accent); }
.file-cell-name-staged { cursor: default; color: var(--text2); }
.file-cell-name-staged:hover { background: none; color: var(--text2); }
.file-cell-remove { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: none; background: none; border-radius: 50%; cursor: pointer; color: var(--text3); }
.file-cell-remove svg { width: 13px; height: 13px; }
.file-cell-remove:hover { background: var(--bg3); color: var(--semantic-risk); }
.file-cell-hint { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text3); }
.file-cell-empty { font-size: 13px; color: var(--text3); font-style: italic; }

/* ── Chips de documentación en la tabla de iniciativas ── */
.doc-chip-list { display: flex; flex-wrap: wrap; gap: 5px; }
.doc-chip { display: inline-flex; align-items: center; font-size: 11px; padding: 2px 8px; border-radius: var(--radius-pill); border: 1px solid var(--border); line-height: 1.5; }
.doc-chip-empty { color: var(--text3); background: transparent; opacity: 0.7; }
.doc-chip-has { cursor: pointer; color: var(--accent); background: var(--accent-soft); border-color: transparent; font: inherit; font-size: 11px; }
.doc-chip-has:hover { text-decoration: underline; }

.detail-tab-panels { margin-bottom: 20px; }

.detail-pane { display: none; }

.detail-pane.active { display: block; }

.detail-add-btn { white-space: nowrap; }

.detail-table-toolbar .detail-add-btn {
  margin-left: auto;
}

/* El botón «+» de acción (.detail-add-icon) vive en buttons.css: lo usan todas las apps. */

@media (max-width: 980px) {
  .desc-top-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  body[data-detail="1"] .main {
    padding-top: calc(var(--header-h) + 12px);
  }

  body[data-detail="1"] .content {
    padding-top: 14px;
    padding-left: 12px;
    padding-right: 12px;
  }

  body[data-detail="1"] .topbar {
    background: color-mix(in srgb, var(--bg2) 78%, transparent);
    border-bottom-color: transparent;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: 0 1px 0 color-mix(in srgb, var(--surface-white) 6%, transparent) inset;
  }

  /* Ficha en móvil sin flujo de estados: el nombre de la iniciativa va en una segunda fila de la
     barra superior (mismo bloque, fija en pantalla) y las pestañas se pegan debajo. */
  body[data-detail="1"] .topbar {
    height: auto;
    flex-wrap: wrap;
    align-content: flex-start;
  }
  body[data-detail="1"] .topbar-left,
  body[data-detail="1"] .topbar-right {
    min-height: var(--header-h);
  }
  /* Mismo color que las pestañas (opaco, sin el cristal de la barra) y sin raya entre los dos. */
  body[data-detail="1"] .topbar {
    background: var(--bg2);
    border-color: var(--border2);
    border-bottom-color: transparent;
  }
  /* Sin hueco reservado para la barra de scroll: las pestañas miden lo mismo que la barra superior. */
  body[data-detail="1"] .content {
    overscroll-behavior-y: none;
    scrollbar-gutter: auto;
  }
  body[data-detail="1"] .topbar-iniciativa {
    display: block;
    flex: 0 0 100%;
    min-width: 0;
    padding: 6px 0;
    text-align: center;
    font: 600 15px/1.3 var(--font-display);
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body[data-detail="1"] .main {
    padding-top: calc(var(--header-h) + 12px + var(--topbar-nombre-h));
  }
  body[data-detail="1"] .content {
    padding-top: 0;
  }
  body[data-detail="1"] #detail-content > .stepper {
    display: none;
  }

  body[data-detail="1"] .detail-tabs-row {
    top: 0;
    margin-top: 0;
    padding: 8px 10px;
    overflow: hidden;
    background: var(--bg2);
    border: 1px solid var(--border2);
    border-top: 0;
    border-radius: 0 0 18px 18px;
    gap: 14px;
    box-shadow:
      0 8px 18px color-mix(in srgb, var(--shadow-color) 8%, transparent),
      0 16px 16px -6px var(--bg);
  }

  /* «Editar» / «+» de la pestaña: el mismo cuadrado que la estrella de favorito. */
  .detail-tabs-actions .detail-add-btn.detail-add-icon {
    width: var(--control-h);
    min-width: var(--control-h);
    height: var(--control-h);
    padding: 0;
  }

  .detail-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    width: 100%;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .detail-tab {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}