/* ══ Vista crono (#sec-crono) · Cronograma con el diseño del Figma «CRONOGRAMA» (759:1111) ══
   Origen: bloque <style id="crono-figma"> de ui/figma (781453a, index.html 15427-15581) y su
   @media print (14708-14717), movidos aquí. Cabecera 759:1230, pestañas 759:1244 y los bloques
   22, 21, 23, 24+25, 26 y 27 (759:1253, 759:1282, 759:1307, 759:1375, 759:1441, 759:1461).

   Todo acotado a #sec-crono. Los colores van con las variables de tokens.css; donde la paleta
   no tiene el paso, queda el hex del Figma con la nota «sin token» (no se edita tokens.css).
   Varias reglas llevan !important porque la capa «unificación tipográfica» global redefine
   .chart-title, .section-header y .mini-*.

   Añadido sobre ui/figma, para no perder función de main:
     · .crof-aviso.v-warn  → el nivel «Riesgo moderado» de la proyección (decidido: se conserva).
     · .crof-aviso.v-info  → el aviso «esta obra todavía no publicó un corte» (cronoSinDatos).
     · .crof-nota-calc     → la nota «Cálculo: días restantes ÷ SPI…» del bloque 26.
     · h2.section-header   → neutraliza la barra y el margen globales (lo pide el recorrido).
     · tr.dest             → los hitos `destacado` de main, en negrita. */

#sec-crono .crof-vista{ display:flex; flex-direction:column; gap:20px; line-height:normal; color:var(--gray-7); }
#sec-crono .crof-vista h2, #sec-crono .crof-vista h3, #sec-crono .crof-vista p{ margin:0; letter-spacing:0; }

/* Cabecera (759:1230) */
#sec-crono .crof-cab{ background:var(--gray-1); border-radius:12px; display:flex; align-items:center; gap:16px; padding:10px 20px 10px 0; }
#sec-crono .crof-cab-tit{ flex:1 1 auto; min-width:0; padding-left:20px; display:flex; flex-direction:column; gap:4px; }
#sec-crono .crof-cab-h{ font-size:24px !important; font-weight:700 !important; line-height:28px !important;
  color:#111827 !important; }                                                             /* sin token */
/* El h2 lleva `section-header` solo para que el recorrido guiado lo encuentre: la barra
   azul, el margen y el espaciado globales de .section-header no son de este diseño. */
#sec-crono .crof-cab-h.section-header{ display:block; margin:0 !important; letter-spacing:0 !important; text-transform:none !important; }
#sec-crono .crof-cab-h.section-header::before{ display:none !important; content:none !important; }
#sec-crono .crof-cab-sub{ font-size:14px !important; font-weight:400 !important; line-height:22px !important;
  color:#4B5563 !important; }                                                             /* sin token */
#sec-crono .crof-cab-sub b{ font-weight:600; color:var(--gray-7); }
#sec-crono .crof-cab-div{ align-self:stretch; width:1px; flex:none;
  background:repeating-linear-gradient(180deg,var(--gray-4) 0 2px,transparent 2px 4px); }
/* 781:2395 · degradé, radio 100 y texto en bold */
#sec-crono .crof-btn{ flex:none; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:10px 18px; border:0; border-radius:100px;
  background:linear-gradient(90deg,var(--degrade-1),var(--degrade-2)); color:var(--gray-1);
  font:700 14px/normal 'Inter',sans-serif; white-space:nowrap; cursor:pointer; }        /* 781:2397 */
#sec-crono .crof-btn svg{ flex:none; }                                                  /* 781:2396 */
#sec-crono .crof-btn:hover{ filter:brightness(.95); }

/* Tarjetas de bloque (759:1282: r8, relleno 24, sombra suave) */
#sec-crono .crof-card{ background:var(--gray-1); border-radius:8px; padding:24px; box-shadow:0 1px 4px rgba(0,0,0,.05);
  display:flex; flex-direction:column; gap:20px; min-width:0; }
#sec-crono .crof-card-tabs{ padding:0 0 24px; gap:16px; }
#sec-crono #cronoDashView{ display:flex; flex-direction:column; gap:20px; }
#sec-crono .crof-card-tabs>*:not(.crof-tabs){ margin-left:24px; margin-right:24px; }
#sec-crono #cronoDashResto{ display:flex; flex-direction:column; gap:20px; }
#sec-crono .crof-dos{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
/* Título de bloque: el número en azul y el título en 16 (759:1284) */
#sec-crono .crof-b-cab{ display:flex; align-items:center; gap:8px; }
#sec-crono .crof-n{ font-size:14px; font-weight:600; color:var(--blue-300); }
#sec-crono .crof-b-cab h3{ font-size:16px !important; font-weight:500 !important; line-height:normal !important; color:var(--gray-7) !important; }
#sec-crono .crof-b-sub{ font-size:12px !important; font-weight:400 !important; line-height:normal !important; color:var(--gray-5) !important; margin-top:-16px !important; }
#sec-crono .crof-nota{ font-size:11px; color:var(--gray-5); line-height:1.5; }
#sec-crono .crof-chart{ position:relative; }

/* Pestañas (759:1245), como las de RFI */
#sec-crono .crof-tabs{ display:flex; align-items:center; gap:0; margin:0; padding:8px 20px 0;
  box-shadow:inset 0 -2px 0 var(--blue-50); }
#sec-crono .crof-tabs .presup-subtab{ border:0; background:none; box-shadow:inset 0 -2px 0 #ECEEF2; border-radius:0;  /* sin token */
  padding:8px 12px; font:inherit; font-size:16px; font-weight:400; line-height:24px; color:#677790; cursor:pointer; }  /* sin token */
#sec-crono .crof-tabs .presup-subtab.active{ color:var(--blue-300); font-weight:600; box-shadow:inset 0 -2px 0 var(--blue-300); }

/* Las cifras de cada bloque (759:1289): rótulo, número grande y nota */
#sec-crono .crof-kpis{ display:flex !important; flex-wrap:wrap; align-items:flex-start; gap:16px !important;
  grid-template-columns:none !important; margin:0 !important; }
#sec-crono .crof-kpis .mini{ flex:1 1 0; min-width:120px; display:flex; flex-direction:column; gap:4px;
  background:none !important; border:0 !important; border-radius:0 !important;
  padding:12px 16px !important; }                                                      /* 759:1289 */
/* La caja (borde 1px, radio 8) existe SOLO en el bloque 26 (759:1448) y en el 27 (759:1467). */
#sec-crono #cronoProyeccion .crof-kpis .mini,
#sec-crono #cronoHitosResumen .mini{ border:1px solid #DEEBFF !important; border-radius:8px !important; }  /* sin token */
#sec-crono .crof-kpis .mini-lbl{ font-size:10px !important; font-weight:400 !important; letter-spacing:0 !important;
  text-transform:none !important; color:var(--gray-5) !important; }
#sec-crono .crof-kpis .mini-val{ font-size:28px !important; font-weight:800 !important; line-height:normal !important;
  color:var(--gray-7) !important; }
#sec-crono .crof-kpis .mini-val.v-ok{ color:var(--green-500) !important; }
#sec-crono .crof-kpis .mini-val.v-warn{ color:var(--orange-400) !important; }
#sec-crono .crof-kpis .mini-val.v-bad{ color:#FA5252 !important; }                      /* 759:1453 · sin token */
#sec-crono .crof-kpis .mini-val.v-blue{ color:var(--blue-300) !important; }
/* 759:1480 · los días, debajo de la fecha del próximo hito */
#sec-crono .crof-kpis .mini-sub{ font-size:12px; font-weight:400; color:var(--gray-5); margin-top:2px; }
#sec-crono .crof-kpis .mini-val.chico{ font-size:16px !important; line-height:1.3 !important; }
/* el aviso de «sin cortes» vive dentro de #cronoMinis: ocupa la fila entera */
#sec-crono .crof-kpis > .crof-aviso{ flex:1 1 100%; }

/* 22 · Línea de tiempo (759:1259): las fechas ENCIMA, a la altura del «HOY», que es texto
   suelto de 10px con su punto de 10px sobre el riel (759:1265), no una pastilla. */
#sec-crono .crof-linea{ display:flex; flex-direction:column; gap:8px; }
#sec-crono .crof-linea-fechas{ display:flex; justify-content:space-between;
  font-size:10px; line-height:12px; color:var(--gray-5); }                             /* 759:1260 */
#sec-crono .crof-linea-riel{ position:relative; height:8px; border-radius:4px; background:var(--blue-50); }   /* 759:1263 */
#sec-crono .crof-linea-fill{ position:absolute; left:0; top:0; bottom:0; width:0; border-radius:4px;
  background:var(--blue-300); }                                                        /* 759:1264 */
#sec-crono .crof-linea-hoy{ position:absolute; left:0; top:-1px; transform:translateX(-50%);
  width:10px; height:10px; border-radius:50%; background:var(--blue-300); box-shadow:0 0 0 1px var(--gray-1); }  /* 759:1267 */
#sec-crono .crof-linea-hoy span{ position:absolute; bottom:calc(100% + 4px); left:50%;
  transform:translateX(-50%); font-size:10px; line-height:12px; font-weight:400; color:var(--blue-300);
  white-space:nowrap; }                                                                /* 759:1266 */
/* sin cortes (cronoSinDatos): el punto se queda en el 0 % y su etiqueta pasa bajo el riel,
   alineada a la izquierda, para no pisar la fecha de inicio ni salirse de la tarjeta. */
#sec-crono .crof-linea-hoy.sin-dato span{ bottom:auto; top:calc(100% + 4px); left:0; transform:none; }

/* las cuatro fases (759:1268): fondo gris, el color solo en el título, cada tarjeta del
   ancho de su texto. Solo existen en E140 (cronoFases); en otra obra el contenedor queda vacío. */
#sec-crono .crof-fases{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
#sec-crono .crof-fases:empty{ display:none; }
#sec-crono .crof-fase{ justify-self:start; align-self:start; background:#F5F6F8; border-radius:4px;   /* sin token */
  padding:12px; display:flex; flex-direction:column; gap:4px; min-width:0; }           /* 759:1269 */
#sec-crono .crof-fase b{ font-size:12px; font-weight:600; }
#sec-crono .crof-fase span{ font-size:12px; color:var(--gray-5); }
#sec-crono .crof-fase.ok b{ color:var(--green-500); }                                  /* 759:1270 */
#sec-crono .crof-fase.act b{ color:var(--blue-300); }                                  /* 759:1273 */
#sec-crono .crof-fase.sig b{ color:var(--blue-300); }                                  /* 759:1276 */
#sec-crono .crof-fase.pend b{ color:var(--orange-400); }                               /* 759:1279 */

/* 759:1281 · la fase en curso cierra el bloque */
#sec-crono .crof-fase-actual{ font-size:12px !important; font-weight:600 !important; color:var(--gray-7) !important; }
#sec-crono .crof-fase-actual b{ color:var(--gray-7); font-weight:600; }
#sec-crono .crof-fase-actual:empty{ display:none; }

/* 26 · el aviso de la proyección (759:1460) con la alerta estándar «alert-banner» (264:331). */
#sec-crono #cronoProyeccion .crof-aviso{ margin-top:20px; }
#sec-crono .crof-aviso{ display:flex; align-items:flex-start; gap:12px; padding:16px; border-radius:12px;
  background:rgba(255,228,228,.8); border:1px solid var(--gray-1); color:var(--red-400); }
#sec-crono .crof-aviso svg, #sec-crono .crof-aviso img{ flex:none; width:18px; height:18px; }
#sec-crono .crof-aviso>div>b{ display:block; margin:0 0 8px; font:700 12px/18px 'Inter',sans-serif; color:#B91C1C; }  /* sin token */
#sec-crono .crof-aviso p{ margin:0; font:400 12px/18px 'Inter',sans-serif; color:inherit; }
#sec-crono .crof-aviso p b{ font-weight:700; }
:root[data-theme="dark"] #sec-crono .crof-aviso:not(.v-ok):not(.v-warn):not(.v-info){ background:rgba(226,104,92,.13); border-color:rgba(226,104,92,.26); color:#EE8078; }
:root[data-theme="dark"] #sec-crono .crof-aviso:not(.v-ok):not(.v-warn):not(.v-info)>div>b{ color:#EE8078; }
/* en plazo no es una alerta: verde, con la misma forma */
#sec-crono .crof-aviso.v-ok{ background:var(--green-50); border-color:var(--gray-1); color:#03582C; }   /* sin token */
#sec-crono .crof-aviso.v-ok>div>b{ color:#03582C; }
/* riesgo moderado (≤ 30 días de atraso): ámbar, el par del chip «en proceso» del bloque 27 */
#sec-crono .crof-aviso.v-warn{ background:#FFF4E6; border-color:var(--gray-1); color:var(--orange-500); }  /* sin token (fondo) */
#sec-crono .crof-aviso.v-warn>div>b{ color:var(--orange-400); }
/* sin cortes: no es un riesgo, es que todavía no hay dato */
#sec-crono .crof-aviso.v-info{ background:var(--blue-50); border-color:var(--gray-1); color:var(--blue-400); }
#sec-crono .crof-aviso.v-info>div>b{ color:var(--blue-400); }
#sec-crono .crof-aviso.v-bad{ background:#FDECEB; border-color:#F3C9C6; color:#A8293B; }   /* sin token */
#sec-crono .crof-nota-calc{ margin-top:12px; }

/* 27 · la tabla de hitos (759:1481) */
#sec-crono .crof-hitos{ width:100%; border-collapse:collapse; }
#sec-crono .crof-hitos th{ background:#F9FAFB; text-align:left; padding:16px 12px; border-bottom:1px solid #E5E7EB;  /* 759:1482 · sin token */
  font-size:11px !important; font-weight:700 !important; color:var(--gray-5) !important;
  text-transform:none !important; letter-spacing:0 !important; }
/* G01: el encabezado de tabla va en tipo oración. ui/figma lo tenía en mayúsculas por CSS, y
   una regla global de `th` también lo pone: por eso el none lleva !important. */
#sec-crono .crof-hitos td{ padding:12px; border-bottom:1px solid #E5E7EB; font-size:12px; color:var(--gray-6); vertical-align:middle; }  /* sin token */
#sec-crono .crof-hitos td.d{ font-weight:600; color:var(--gray-7); }                  /* 759:1488 */
#sec-crono .crof-hitos tr.dest td{ font-weight:700; }
#sec-crono .crof-hitos td small{ display:block; font-size:10px; font-weight:600; margin-top:2px; }   /* G04: 9.5 -> 10, el piso de escritorio */
#sec-crono .crof-hitos td small.va{ color:var(--blue-300); }
#sec-crono .crof-hitos td small.ven{ color:#A8293B; }                                  /* sin token */
#sec-crono .crof-chip{ display:inline-flex; align-items:center; gap:4px; border-radius:12px; padding:4px 8px;  /* 759:1492 */
  font-size:12px; font-weight:500; white-space:nowrap; }
#sec-crono .crof-chip.ok{ background:var(--green-50); color:var(--green-500); }
#sec-crono .crof-chip.proc{ background:#FFF4E6; color:var(--orange-400); }              /* sin token (fondo) */
#sec-crono .crof-chip[onclick]{ cursor:pointer; }

@media (max-width:1100px){
  #sec-crono .crof-dos{ grid-template-columns:minmax(0,1fr); }
  #sec-crono .crof-cab{ flex-wrap:wrap; }
  #sec-crono .crof-cab-div{ display:none; }
  #sec-crono .crof-btn{ margin-left:20px; }
  #sec-crono .crof-fases{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:700px){
  #sec-crono .crof-card{ padding:16px; }
  #sec-crono .crof-card-tabs>*:not(.crof-tabs){ margin-left:16px; margin-right:16px; }
  #sec-crono .crof-kpis .mini{ flex:1 1 40%; padding:10px 12px !important; }
  #sec-crono .crof-kpis .mini-val{ font-size:22px !important; }
  #sec-crono .crof-fases{ grid-template-columns:minmax(0,1fr); }
  #sec-crono .crof-hitos{ display:block; overflow-x:auto; white-space:nowrap; }
  /* G04: en el teléfono ningún texto baja de 12 px. El Figma pone rótulos, fechas de la
     línea y notas en 10-11; en escritorio se quedan así, aquí suben al piso. */
  #sec-crono .crof-kpis .mini-lbl,
  #sec-crono .crof-linea-fechas,
  #sec-crono .crof-linea-hoy span,
  #sec-crono .crof-nota,
  #sec-crono .crof-hitos td small{ font-size:12px !important; line-height:16px; }
  #sec-crono .crof-hitos th{ font-size:12px !important; }
}
@media (pointer:coarse){ #sec-crono .crof-btn{ min-height:44px; } #sec-crono .crof-tabs .presup-subtab{ min-height:44px; } }

/* ── «Descargar PDF» (781:2395) → imprimir sólo el Cronograma (cronoDescargarPDF) ── */
@media print{
  body.crono-imprimiendo *{ visibility:hidden!important; }
  body.crono-imprimiendo #sec-crono,body.crono-imprimiendo #sec-crono *{ visibility:visible!important; }
  body.crono-imprimiendo #sec-crono{ position:absolute!important; left:0; top:0; width:100%!important; }
  body.crono-imprimiendo,body.crono-imprimiendo html,body.crono-imprimiendo .app,body.crono-imprimiendo .content-area,body.crono-imprimiendo .scroll-area{
    overflow:visible!important; height:auto!important; max-height:none!important;
  }
  body.crono-imprimiendo #sec-crono .crof-btn{ display:none!important; }
  body.crono-imprimiendo #sec-crono .crof-card{ break-inside:avoid; box-shadow:none!important; border:1px solid var(--blue-50); }
}