/* Coffee Rush STA v10.5.2 · responsive hardening
   Prioridad: que los controles sigan siendo utilizables y legibles en portátiles,
   tablets y ventanas estrechas sin alterar economía, simulación ni persistencia. */

/* Evita que hijos de grid/flex fuerzen anchuras superiores a su columna. */
body[data-interface-phase="planning"] .v105-planning-grid > *,
body[data-interface-phase="planning"] .v105-left-rail > *,
body[data-interface-phase="planning"] .v105-right-rail > *,
body[data-interface-phase="planning"] .v105-decisions-panel *,
body[data-interface-phase="planning"] .v105-purchases-panel *{min-width:0}

/* La escena ya incorpora el branding aprobado: no lo duplicamos mediante overlays. */
body[data-interface-phase="planning"] .v105-scene-ista,
body[data-interface-phase="planning"] .v105-scene-way{display:none!important}

/* Ya existe un footer real; eliminamos la firma duplicada de v10.5.1. */
body[data-interface-phase="planning"] .workspace::after{content:none!important;display:none!important}

/* Contenedor fluido: usamos el ancho disponible, no una maqueta de tamaño fijo. */
body[data-interface-phase="planning"] .workspace{
  width:min(100%,1600px);
  max-width:1600px;
  margin-inline:auto;
  padding-inline:clamp(10px,1.2vw,18px)
}

/* Cabecera: permite reducir y envolver sin comprimir botones o estados. */
body[data-interface-phase="planning"] .appbar{
  grid-template-columns:minmax(250px,1fr) minmax(360px,auto) minmax(330px,1fr)
}
body[data-interface-phase="planning"] .brand-block,
body[data-interface-phase="planning"] .app-status,
body[data-interface-phase="planning"] .app-tools{min-width:0}
body[data-interface-phase="planning"] .app-status{flex-wrap:wrap;justify-content:center}
body[data-interface-phase="planning"] .app-status>div{flex:0 1 96px;min-width:82px}
body[data-interface-phase="planning"] .app-tools{flex-wrap:wrap}
body[data-interface-phase="planning"] .platform-session-chip{min-width:220px;max-width:100%;flex:1 1 220px}
body[data-interface-phase="planning"] .tool-menu{flex:0 1 auto}
body[data-interface-phase="planning"] .tool-menu>summary{white-space:nowrap}

/* Flujo didáctico: nunca rompe el viewport. */
body[data-interface-phase="planning"] .v105-learning-flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));min-width:0}
body[data-interface-phase="planning"] .v105-learning-flow span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Tres columnas fluidas en escritorio. */
body[data-interface-phase="planning"] .v105-planning-grid{
  grid-template-columns:minmax(300px,23%) minmax(460px,1fr) minmax(300px,23%);
  gap:clamp(9px,1vw,14px)
}

/* Contexto: no truncar el dato que el alumno necesita analizar. */
body[data-interface-phase="planning"] .v105-briefing .compact-scenario-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
body[data-interface-phase="planning"] .v105-briefing .scenario-box{height:auto;min-height:94px}
body[data-interface-phase="planning"] .v105-briefing .scenario-box strong,
body[data-interface-phase="planning"] .v105-briefing .scenario-box p{
  overflow-wrap:anywhere;
  word-break:normal
}
body[data-interface-phase="planning"] .v105-briefing .scenario-box p{
  display:block;
  overflow:visible;
  -webkit-line-clamp:unset
}

/* Decisiones: cada control reserva una fila completa útil. */
body[data-interface-phase="planning"] .v105-decisions-panel .section-heading-row{align-items:flex-start;flex-wrap:wrap}
body[data-interface-phase="planning"] .v105-decisions-panel .section-heading-row p{max-width:none;text-align:left}
body[data-interface-phase="planning"] .v105-decisions-panel .decision-card{
  grid-template-columns:48px minmax(0,1fr);
  grid-auto-rows:auto;
  align-items:center;
  row-gap:4px
}
body[data-interface-phase="planning"] .v105-decisions-panel .compact-field,
body[data-interface-phase="planning"] .v105-decisions-panel .price-card>input,
body[data-interface-phase="planning"] .v105-decisions-panel .production-card>input,
body[data-interface-phase="planning"] .v105-decisions-panel .promo-card>input,
body[data-interface-phase="planning"] .v105-decisions-panel .scale,
body[data-interface-phase="planning"] .v105-decisions-panel .decision-help,
body[data-interface-phase="planning"] .v105-decisions-panel .decision-impact{grid-column:2;width:100%;max-width:100%}
body[data-interface-phase="planning"] .v105-decisions-panel select,
body[data-interface-phase="planning"] .v105-decisions-panel input[type=range]{width:100%;max-width:100%;min-width:0}
body[data-interface-phase="planning"] .v105-decisions-panel .decision-title strong{overflow-wrap:anywhere}
body[data-interface-phase="planning"] .v105-decisions-panel .decision-impact{display:flex;flex-wrap:wrap}

/* Plan: evita que etiquetas largas empujen las cifras. */
body[data-interface-phase="planning"] .v105-right-rail .plan-ledger>div{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center
}
body[data-interface-phase="planning"] .v105-right-rail .plan-ledger dt{min-width:0;overflow-wrap:anywhere}
body[data-interface-phase="planning"] .v105-right-rail .plan-ledger dd{white-space:nowrap;text-align:right}

/* Inventario: las tarjetas pueden crecer y el texto no invade la contigua. */
body[data-interface-phase="planning"] .v105-purchases-panel .inventory-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
body[data-interface-phase="planning"] .v105-purchases-panel .inventory-card{height:auto;min-height:78px}
body[data-interface-phase="planning"] .v105-purchases-panel .inventory-card .note{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}

/* Compras: dos filas por recurso. El slider nunca se colapsa entre etiqueta y valor. */
body[data-interface-phase="planning"] .v105-purchases-panel .purchase-grid{grid-template-columns:1fr 1fr}
body[data-interface-phase="planning"] .v105-purchases-panel .purchase-row{
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:auto auto;
  column-gap:8px;
  row-gap:4px;
  align-items:center;
  min-height:66px
}
body[data-interface-phase="planning"] .v105-purchases-panel .purchase-row>span:first-child{grid-column:1;grid-row:1;min-width:0}
body[data-interface-phase="planning"] .v105-purchases-panel .purchase-row>strong{grid-column:2;grid-row:1;white-space:nowrap}
body[data-interface-phase="planning"] .v105-purchases-panel .purchase-row>input[type=range]{grid-column:1/-1;grid-row:2;width:100%;min-width:0;margin:0}

/* Escena: responde al ancho de la columna; no fuerza alturas mínimas. */
body[data-interface-phase="planning"] .v105-scene-stage{min-height:0;aspect-ratio:626/594}
body[data-interface-phase="planning"] .v105-scene-caption{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* ---- Portátil estrecho / ventana reducida ---- */
@media(max-width:1380px){
  body[data-interface-phase="planning"] .appbar{
    grid-template-columns:minmax(230px,1fr) minmax(340px,auto);
    grid-template-areas:"brand status" "tools tools";
    align-items:center
  }
  body[data-interface-phase="planning"] .brand-block{grid-area:brand}
  body[data-interface-phase="planning"] .app-status{grid-area:status;justify-content:flex-end}
  body[data-interface-phase="planning"] .app-tools{grid-area:tools;justify-content:flex-end}
  body[data-interface-phase="planning"] .platform-session-chip{flex:0 1 310px}
  body[data-interface-phase="planning"] .v105-planning-grid{
    grid-template-columns:minmax(300px,34%) minmax(500px,1fr)
  }
  body[data-interface-phase="planning"] .v105-right-rail{
    grid-column:1/-1;
    display:grid;
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    gap:10px
  }
  body[data-interface-phase="planning"] .v105-right-rail .plan-summary,
  body[data-interface-phase="planning"] .v105-purchases-panel{margin:0}
  body[data-interface-phase="planning"] .v105-purchases-panel .purchase-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---- Tablet horizontal / portátil pequeño ---- */
@media(max-width:1080px){
  body[data-interface-phase="planning"] .appbar{
    grid-template-columns:1fr;
    grid-template-areas:"brand" "status" "tools";
    position:static
  }
  body[data-interface-phase="planning"] .app-status,
  body[data-interface-phase="planning"] .app-tools{justify-content:stretch}
  body[data-interface-phase="planning"] .app-status>div{flex:1 1 120px}
  body[data-interface-phase="planning"] .platform-session-chip{flex:1 1 280px}
  body[data-interface-phase="planning"] .v105-heading{display:grid;gap:8px}
  body[data-interface-phase="planning"] .v105-heading .team-pill{justify-self:start;flex-wrap:wrap}
  body[data-interface-phase="planning"] .v105-planning-grid{grid-template-columns:1fr}
  body[data-interface-phase="planning"] .v105-scene-panel{order:-1}
  body[data-interface-phase="planning"] .v105-left-rail{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  body[data-interface-phase="planning"] .v105-right-rail{grid-column:auto;grid-template-columns:1fr 1fr}
  body[data-interface-phase="planning"] .v105-decisions-panel .decision-grid{grid-template-columns:1fr}
}

/* ---- Tablet vertical / móvil grande ---- */
@media(max-width:760px){
  body[data-interface-phase="planning"] .workspace{padding-inline:8px}
  body[data-interface-phase="planning"] .brand-block>div strong{font-size:17px}
  body[data-interface-phase="planning"] .brand-block .sta-brand-logo-img{width:44px;height:44px}
  body[data-interface-phase="planning"] .app-status{display:grid;grid-template-columns:1fr 1fr;width:100%}
  body[data-interface-phase="planning"] .app-status>div{min-width:0;width:100%}
  body[data-interface-phase="planning"] .app-tools{display:grid;grid-template-columns:1fr 1fr;width:100%}
  body[data-interface-phase="planning"] .platform-session-chip{grid-column:1/-1;width:100%;min-width:0}
  body[data-interface-phase="planning"] .tool-menu>summary{width:100%;text-align:center}
  body[data-interface-phase="planning"] .v105-heading h1{font-size:22px}
  body[data-interface-phase="planning"] .v105-learning-flow{display:flex;overflow-x:auto;scroll-snap-type:x proximity}
  body[data-interface-phase="planning"] .v105-learning-flow span{flex:0 0 118px;scroll-snap-align:start;overflow:visible;text-overflow:clip}
  body[data-interface-phase="planning"] .v105-left-rail,
  body[data-interface-phase="planning"] .v105-right-rail{grid-template-columns:1fr}
  body[data-interface-phase="planning"] .v105-briefing .compact-scenario-grid{grid-template-columns:1fr}
  body[data-interface-phase="planning"] .v105-purchases-panel .purchase-grid{grid-template-columns:1fr}
  body[data-interface-phase="planning"] .v105-market-strip{grid-template-columns:1fr 1fr}
  body[data-interface-phase="planning"] .v105-scene-caption span{display:none}
  body[data-interface-phase="planning"] .primary-nav{max-width:none;width:100%;overflow-x:auto;justify-content:flex-start}
  body[data-interface-phase="planning"] .primary-nav .nav-tab{flex:1 0 108px}
}

/* ---- Móvil estrecho ---- */
@media(max-width:480px){
  body[data-interface-phase="planning"] .app-tools{grid-template-columns:1fr}
  body[data-interface-phase="planning"] .v105-purchases-panel .inventory-grid{grid-template-columns:1fr}
  body[data-interface-phase="planning"] .v105-market-strip{grid-template-columns:1fr}
  body[data-interface-phase="planning"] .v105-decisions-panel .decision-card{grid-template-columns:42px minmax(0,1fr);padding:8px}
  body[data-interface-phase="planning"] .v105-decisions-panel .decision-title .decision-icon-badge{width:34px;height:34px}
}