/* Primera hora. Rejilla de tarjetas expandibles.
 *
 * Sin semáforos de color: la guía IKIGAI es monocroma y el rojo está reservado
 * a lo vencido y a lo que está debajo de meta. El estado se lee por tipografía
 * y por un cuadro lleno / hueco, no por color.
 */

.mod-inicio .tarjetas{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  border-top:1px solid var(--ink);
}
.mod-inicio .tarjeta{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:clamp(16px,1.8vw,26px) clamp(16px,1.8vw,26px) clamp(16px,1.8vw,26px) 0}
.mod-inicio .tarjeta:last-child{border-right:0}

.mod-inicio .tarjeta .nom{font-size:clamp(11px,.8vw,13px);text-transform:uppercase;letter-spacing:.09em;font-weight:600}
.mod-inicio .tarjeta .n{
  font-size:clamp(46px,5.4vw,78px);font-weight:600;line-height:1;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;margin-top:12px;
}
.mod-inicio .tarjeta .n.nd{font-size:clamp(28px,2.6vw,38px);color:var(--meta)}
.mod-inicio .tarjeta .contra{font-size:clamp(11px,.82vw,13px);color:var(--meta);margin-top:8px;font-variant-numeric:tabular-nums}
.mod-inicio .tarjeta .estado{font-size:clamp(12px,.88vw,14px);margin-top:10px;display:flex;align-items:baseline;gap:8px}
.mod-inicio .marca{flex:0 0 auto;width:10px;height:10px;border:1px solid var(--ink);transform:translateY(1px)}
.mod-inicio .marca.lleno{background:var(--ink)}
.mod-inicio .marca.mal{border-color:var(--alarma);background:var(--alarma)}
.mod-inicio .tarjeta .quien{font-size:clamp(11px,.8vw,13px);color:var(--meta);margin-top:14px;padding-top:10px;border-top:1px solid var(--rule)}

/* tendencia: chispa de barras, misma gramática que el gráfico grande de OTD */
.mod-inicio .chispa{display:flex;align-items:flex-end;gap:3px;height:34px;margin-top:14px}
.mod-inicio .chispa i{flex:1 1 0;background:var(--ink);min-height:2px;display:block}
.mod-inicio .chispa i.bajo{background:var(--paper);border:1px solid var(--ink)}
.mod-inicio .chispa i.nulo{background:var(--rule)}
.mod-inicio .chispa-pie{font-size:clamp(10px,.72vw,12px);color:var(--meta);margin-top:5px;display:flex;justify-content:space-between}

/* detalle: la cadena KPI → causa → responsable → acción termina aquí */
.mod-inicio details{margin-top:14px;border-top:1px solid var(--rule);padding-top:10px}
.mod-inicio summary{
  cursor:pointer;font-size:clamp(11px,.82vw,13px);color:var(--meta);
  list-style:none;user-select:none;
}
.mod-inicio summary::-webkit-details-marker{display:none}
.mod-inicio summary::before{content:"▸ ";font-size:.9em}
.mod-inicio details[open] summary::before{content:"▾ "}
.mod-inicio summary:hover{color:var(--ink)}
.mod-inicio details ul{list-style:none;margin-top:10px;font-size:clamp(12px,.88vw,14px)}
.mod-inicio details li{padding:7px 0;border-bottom:1px solid var(--rule);font-variant-numeric:tabular-nums}
.mod-inicio details li:last-child{border-bottom:0}
.mod-inicio details li .cli{color:var(--meta)}
.mod-inicio details .mas{font-size:clamp(11px,.8vw,13px);color:var(--meta);padding-top:9px}
.mod-inicio details .liga{display:inline-block;margin-top:10px;font-size:clamp(11px,.82vw,13px)}

.mod-inicio .nota-nd{margin-top:clamp(26px,3vw,44px);border-top:1px solid var(--rule);padding-top:14px}
.mod-inicio .nota-nd p{font-size:clamp(11px,.8vw,13px);color:var(--meta);max-width:100ch}
.mod-inicio .nota-nd p + p{margin-top:5px}

@media (max-width:640px){
  .mod-inicio .tarjeta{border-right:0}
}