/* MOLÉCULAS — grupos pequeños de átomos con UNA función. Solo usan átomos y tokens. */

/* Tarjeta (superficie) */
.card,.hero{
  margin-bottom:var(--space-4);padding:var(--space-4);
  background:var(--color-surface);border:var(--border-w) solid var(--color-border);
  border-top:var(--border-w-strong) solid var(--dc);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
}
.card.soft{background:var(--color-brand-soft)}
.hero{background:linear-gradient(120deg,var(--color-brand-soft),var(--color-surface));border-top-color:var(--cat-4)}
.card h2,.card h3{margin:0 0 var(--space-2);font-size:var(--text-lg);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight)}

/* Aviso (.alert / .alert.err) */
.alert{margin-bottom:var(--space-3);padding:var(--space-3) var(--space-4);border:var(--border-w) solid var(--color-warning-border);border-left:5px solid var(--color-warning-edge);border-radius:var(--radius-md);background:var(--color-warning-soft);color:var(--color-text)}
.alert.err{background:var(--color-danger-soft);border-color:var(--color-danger-border);border-left-color:var(--color-danger);color:var(--color-danger)}

/* Campo de formulario: etiqueta + control + ayuda + error */
.fld{display:flex;flex-direction:column}
.fld.full{grid-column:1/-1}
.fld label{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1);margin:var(--space-3) 0 var(--space-1);font-size:var(--text-md);font-weight:var(--weight-medium)}
.fld .chkl{margin:var(--space-3) 0 var(--space-1)}
.fld input,.fld select,.fld textarea{width:100%;height:var(--control-h-lg);font-size:var(--text-base)}
.fld textarea{height:auto;min-height:5.25rem}
.calc{padding:var(--space-3);border-radius:var(--radius-md);background:var(--color-brand-soft);font-size:var(--text-base)}
.multi{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4)}

/* Control segmentado (Sí / No) */
.seg{display:inline-flex;width:fit-content;border:var(--border-w) solid var(--color-border);border-radius:var(--radius-md);overflow:hidden}
.seg button{height:var(--control-h-lg);min-width:4.4rem;border:0;border-radius:0;background:var(--color-surface);color:var(--color-text);box-shadow:none}
.seg button+button{border-left:var(--border-w) solid var(--color-border)}
.seg button.on{background:var(--color-brand);color:var(--color-brand-contrast)}

/* Chip de navegación interna */
.chip{height:var(--control-h-sm);padding:0 var(--space-3);border:0;border-radius:var(--radius-pill);background:var(--color-brand-soft);color:var(--color-brand);font-size:var(--text-sm);font-weight:var(--weight-semibold);box-shadow:none;white-space:nowrap}
.chip:hover:not(:disabled){background:var(--color-brand);color:var(--color-brand-contrast)}

/* Ficha de datos (término / valor) */
.ficha{display:grid;grid-template-columns:minmax(7.5rem,12.5rem) 1fr;gap:var(--space-1) var(--space-3);margin:var(--space-2) 0 0;font-size:var(--text-md)}
.ficha dt{color:var(--color-text-muted)}
.ficha dd{margin:0}

/* Desplegable simple */
details.fi summary,details.tec summary{cursor:pointer;color:var(--color-text-muted);font-size:var(--text-sm);margin-top:var(--space-1)}
details.tec{display:inline-block}
details.tec summary{font-size:var(--text-md)}

/* Menú desplegable (botón + lista) */
details.menu{position:relative}
details.menu summary{list-style:none}
.mlist{position:absolute;right:0;z-index:var(--z-menu);display:flex;flex-direction:column;gap:2px;min-width:18.75rem;max-height:60vh;overflow:auto;padding:var(--space-2);background:var(--color-surface);border:var(--border-w) solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}
.mi{justify-content:flex-start;text-align:left;border:0;box-shadow:none}

/* Pestañas */
.tabs{display:flex;gap:var(--space-1);margin:0 0 var(--space-4);border-bottom:var(--border-w) solid var(--color-border);overflow-x:auto}
.tabs button{height:var(--control-h-lg);border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;color:var(--color-text-muted);box-shadow:none}
.tabs button:hover:not(:disabled){background:transparent;color:var(--color-text)}
.tabs button[aria-selected=true]{border-bottom-color:var(--dc);color:var(--color-brand);font-weight:var(--weight-bold)}

/* Caja de búsqueda y filtros */
.filtros{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;margin:var(--space-3) 0}
.filtros .bx{position:relative;flex:1;min-width:12.5rem}
.filtros .bx .ic{position:absolute;left:var(--space-3);top:var(--space-3);color:var(--color-text-muted)}
.filtros .bx input{width:100%;padding-left:2rem}

/* Estado vacío */
.vacio{padding:var(--space-6) var(--space-3);text-align:center;color:var(--color-text-muted)}
.vacio .ic{width:2rem;height:2rem;margin-bottom:var(--space-2)}
.vacio p{margin:var(--space-1) 0 var(--space-3)}

/* Tarjeta de resumen (KPI) */
.kpi{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;height:auto;
  padding:var(--space-3) var(--space-4);text-align:left;
  background:linear-gradient(120deg,color-mix(in srgb,var(--kc,var(--cat-1)) 13%,var(--color-surface)),var(--color-surface));
  color:var(--color-text);border:var(--border-w) solid var(--color-border);border-left:var(--accent-w) solid var(--kc,var(--cat-1));
  border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
}
.kpi b{font-size:var(--text-display);line-height:var(--leading-tight);color:var(--kc,var(--cat-1))}
.kpi span{font-size:var(--text-sm);font-weight:var(--weight-regular);color:var(--color-text-muted)}
.kpi:hover:not(:disabled){background:linear-gradient(120deg,color-mix(in srgb,var(--kc,var(--cat-1)) 20%,var(--color-surface)),var(--color-surface));border-color:var(--color-border);border-left-color:var(--kc,var(--cat-1))}
.kpi[aria-pressed=true]{box-shadow:0 0 0 2px var(--kc,var(--cat-1))}

/* Paso numerado y tarjeta de rol */
.paso{padding:var(--space-3);border-radius:var(--radius-lg);background:color-mix(in srgb,var(--pc,var(--cat-1)) 13%,var(--color-surface))}
.paso b{display:block;color:var(--color-brand)}
.rol{display:flex;flex-direction:column;align-items:flex-start;gap:2px;height:auto;padding:var(--space-3) var(--space-4);text-align:left;background:var(--color-surface);color:var(--color-text);border:var(--border-w) solid var(--color-border);border-left:var(--accent-w) solid var(--rc);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.rol b{font-size:var(--text-base);color:var(--rc)}
.rol span{font-size:var(--text-md);font-weight:var(--weight-regular);color:var(--color-text-muted)}
.rol:hover:not(:disabled){background:color-mix(in srgb,var(--rc) 10%,var(--color-surface));border-color:var(--rc)}

/* Encabezado de grupo dentro de una pieza, indicadores y lista de requisitos */
.eg{margin:var(--space-3) 0 var(--space-1);font-size:var(--text-sm);font-weight:var(--weight-semibold);text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--cat-4)}
.ind{display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:var(--space-2) var(--space-3);font-size:var(--text-base)}
.ind div{display:flex;gap:var(--space-2);align-items:center}
ul.chk{list-style:none;margin:0;padding:0}
ul.chk li{display:flex;gap:var(--space-2);align-items:flex-start;padding:var(--space-1) 0}
.hj{padding:var(--space-2) 0;border-top:var(--border-w) solid var(--color-border)}
.hj-t{margin-bottom:var(--space-1)}

/* Fila de revisión de formulario (hoja de validación) */
.rev{display:grid;grid-template-columns:1fr 12.5rem;gap:var(--space-2) var(--space-3);align-items:start;padding:var(--space-3) 0;border-top:var(--border-w) solid var(--color-border)}
.rev textarea{grid-column:1/-1;min-height:3rem;margin:0}
.rev .tu{margin-left:var(--space-1);padding:0 var(--space-2);border-radius:var(--radius-sm);background:var(--color-brand-soft);font-size:var(--text-xs);font-weight:var(--weight-semibold)}

/* Aviso emergente (toast) */
.toast{display:flex;gap:var(--space-3);align-items:center;padding:var(--space-3);background:var(--color-surface);border:var(--border-w) solid var(--color-border);border-left:var(--accent-w) solid var(--color-success);border-radius:var(--radius-md);box-shadow:var(--shadow-md);font-size:var(--text-base)}
.toast span{flex:1}
.toast.e{border-left-color:var(--color-danger)}
.toast.e .ic{color:var(--color-danger)}
.toast.o .ic{color:var(--color-success)}
.toast .x{height:var(--control-h-sm);padding:0 var(--space-2);border:0;background:transparent;color:var(--color-text-muted);box-shadow:none}
.toast .lnk{height:var(--control-h-sm);border:var(--border-w) solid var(--color-border);background:transparent;color:var(--color-text);box-shadow:none}

/* Botón de comentario por campo */
.fc{margin-left:auto;height:var(--control-h-sm);padding:0 var(--space-2);color:var(--color-text-muted)}
.fc.on{color:var(--color-brand);background:var(--color-brand-soft)}

/* Tarea de sesión */
.tk{display:flex;gap:var(--space-2);align-items:center;justify-content:space-between;padding:var(--space-2) 0;border-top:var(--border-w) solid var(--color-border)}
.tk.hecha span{text-decoration:line-through;color:var(--color-text-muted)}

/* Cifra destacada */
.stat{display:flex;flex-direction:column;gap:2px;padding:var(--space-3) var(--space-4);background:var(--color-surface);border:var(--border-w) solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.stat b{font-size:var(--text-display);line-height:var(--leading-tight)}
.stat span{font-size:var(--text-sm);color:var(--color-text-muted)}

/* Gráfica de barras: marcas delgadas, 4 px redondeadas solo en el extremo de datos, ejes recesivos */
.chart h3{margin-bottom:var(--space-1)}
.bc{display:grid;gap:var(--space-2);margin-top:var(--space-3)}
.bc-row{display:grid;grid-template-columns:minmax(6rem,11rem) 1fr 2.5rem;align-items:center;gap:var(--space-3);border-radius:var(--radius-sm)}
.bc-l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-md);color:var(--color-text)}
.bc-t{display:flex;align-items:center;height:1.5rem;border-left:var(--border-w) solid var(--color-border)}
.bc-bar{position:relative;display:block;height:100%;background:var(--chart-mark);border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.bc-bar::after{content:attr(data-tip);position:absolute;left:calc(100% + var(--space-2));top:50%;z-index:var(--z-menu);display:none;transform:translateY(-50%);padding:var(--space-1) var(--space-2);white-space:nowrap;font-size:var(--text-sm);color:var(--color-text);background:var(--color-surface);border:var(--border-w) solid var(--color-border);border-radius:var(--radius-sm);box-shadow:var(--shadow-md)}
.bc-row:hover .bc-bar::after,.bc-row:focus .bc-bar::after{display:block}
.bc-row:hover,.bc-row:focus{background:var(--color-brand-soft)}
.bc-v{text-align:right;font-variant-numeric:tabular-nums;color:var(--color-text)}