/* Fase del plan y cuenta atrás. (2026-08-28)
   Dos tarjetas pegadas: van juntas porque contestan la misma pregunta —dónde
   estamos y cuánto queda— y separadas se leerían como dos datos sueltos. */

/* El encabezado tenía TRES columnas —identidad | monitoreo | calidad, esta
   última de 220 px fijos—. Al meter un cuarto hijo sin tocar la rejilla, la
   barra de calidad se caía a una segunda fila y se estiraba a lo ancho: por
   eso «se veía más grande y más abajo». Se declara la cuarta columna y cada
   cosa vuelve a su sitio y a su tamaño.
   La columna del plan es flexible y las tarjetas van centradas en ella, que
   es el hueco que sobraba entre el nombre y los indicadores. */
.gd-header { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto 220px; }
.gd-plan { justify-self: center; }

.gd-plan {
  display: flex; align-items: stretch;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #ffffff; box-shadow: var(--shadow-sm); overflow: hidden;
}
.gd-plan-parte {
  border: 0; background: transparent; cursor: pointer; text-align: left;
  padding: 10px 16px; display: grid; gap: 2px; align-content: center; min-width: 132px;
}
/* La línea que las une: una sola, fina, entre las dos. */
.gd-plan-parte + .gd-plan-parte { border-left: 1px solid var(--line); }
.gd-plan-parte:hover { background: var(--line-soft); }
.gd-plan-parte > span {
  font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-muted); font-weight: 600;
}
.gd-plan-parte > strong { font-size: 19px; letter-spacing: -.01em; line-height: 1.15; }
.gd-plan-parte > small { font-size: 11px; color: var(--ink-muted); }
/* El color solo aparece cuando el tiempo aprieta. Si todo se pinta de
   urgente, nada lo parece. */
.gd-plan-parte.cerca > strong { color: var(--amber); }
.gd-plan-parte.urge > strong { color: var(--red); }

#gdPlanEditor {
  position: fixed; right: 28px; top: 96px; width: 300px; z-index: 60;
  background: #ffffff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 18px 44px rgba(15, 23, 42, .18);
  padding: 18px; display: none; gap: 12px;
}
#gdPlanEditor.abierto { display: grid; }
.gd-plan-cabeza { display: flex; justify-content: space-between; align-items: center; }
.gd-plan-cabeza button { border: 0; background: none; cursor: pointer; color: var(--ink-muted); }
#gdPlanEditor label { display: grid; gap: 5px; font-size: 12px; color: var(--ink-soft); }
#gdPlanEditor select, #gdPlanEditor input {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 9px 10px; font: inherit; font-size: 14px; background: #fff; color: var(--ink);
}
.gd-plan-nota { font-size: 12px; color: var(--ink-muted); margin: 0; }
#gdPlanAviso { font-size: 12px; color: var(--ink-muted); }

@media (max-width: 1250px) { .gd-plan-parte > small { display: none; } }
@media (max-width: 1050px) { .gd-plan { display: none; } }