/**
 * css/views/evidencias.css
 */
/* ---------------- acordeón de franjas ---------------- */
.franja-acordeon{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); margin-bottom:8px; overflow:hidden; }
.franja-header{ width:100%; display:flex; align-items:center; gap:10px; padding:13px 14px; text-align:left; }
.franja-dot{ width:11px; height:11px; border-radius:50%; background:var(--fc); flex:0 0 auto; box-shadow:0 0 0 3px var(--fcbg); }
.franja-nombre{
  font-family:var(--font-d); font-weight:600; font-size:.86rem; flex:1; min-width:0;
  background:none; border:none; color:var(--text); outline:none; border-radius:6px; padding:2px 4px;
}
.franja-nombre:focus{ background:var(--card-2); }
.franja-rango{ font-family:var(--font-m); font-size:.68rem; color:var(--faint); flex:0 0 auto; }
.franja-count{ font-size:.64rem; color:var(--fc); background:var(--fcbg); padding:3px 8px; border-radius:999px; flex:0 0 auto; font-weight:600; }
.franja-reorder{ display:flex; flex-direction:column; gap:1px; flex:0 0 auto; }
.franja-reorder button{ width:18px; height:14px; font-size:.6rem; color:var(--faint); display:flex; align-items:center; justify-content:center; }
.franja-reorder button:hover{ color:var(--text); }
.chevron{ font-size:.8rem; color:var(--faint); transition:transform .2s; flex:0 0 auto; }
.franja-acordeon.open .chevron{ transform:rotate(180deg); }
.franja-body{ display:none; padding:0 14px 16px; }
.franja-acordeon.open .franja-body{ display:block; }
.sub-row{ display:flex; align-items:center; gap:8px; padding:9px 0; border-bottom:1px solid var(--line-soft); }
.sub-row:last-of-type{ border-bottom:none; }
.sub-row .sub-nombre{
  flex:1; min-width:0; height:38px; background:var(--card-2); border:1px solid var(--line); border-radius:10px;
  padding:0 11px; font-size:.8rem; color:var(--text); outline:none;
}
.sub-row .sub-nombre:focus{ border-color:var(--fc); }
.sub-row .sub-rango{ font-family:var(--font-m); font-size:.68rem; color:var(--faint); flex:0 0 auto; white-space:nowrap; }
.sub-row .sub-bound{
  width:52px; height:32px; background:var(--card-2); border:1px solid var(--line); border-radius:8px;
  text-align:center; font-family:var(--font-m); font-size:.72rem; color:var(--text); outline:none;
}
.sub-row .sub-bound:focus{ border-color:var(--fc); }
.sub-row .del-sub{ width:28px; height:28px; border-radius:8px; background:var(--card-2); border:1px solid var(--line); color:var(--muted); font-size:.7rem; flex:0 0 auto; }
.sub-row .del-sub:hover{ color:var(--rojo); border-color:var(--rojo); }
.add-subnivel{ width:100%; margin-top:8px; padding:10px; border-radius:10px; border:1.5px dashed var(--line); color:var(--fc); font-size:.76rem; font-weight:600; }
.add-subnivel:hover{ border-color:var(--fc); background:var(--fcbg); }
.franja-avanzado{ margin-top:14px; padding-top:12px; border-top:1px solid var(--line-soft); }
.franja-avanzado summary{ font-size:.72rem; color:var(--muted); font-weight:600; cursor:pointer; list-style:none; }
.franja-avanzado summary::-webkit-details-marker{ display:none; }
.franja-avanzado summary::before{ content:'⚙ '; opacity:.7; }
.franja-avanzado-body{ display:flex; gap:10px; margin-top:10px; flex-wrap:wrap; align-items:flex-end; }
.franja-avanzado-body .campo{ display:flex; flex-direction:column; gap:5px; }
.franja-avanzado-body label{ font-size:.64rem; color:var(--muted); font-weight:600; }
.franja-avanzado-body input[type=color]{ width:40px; height:34px; border-radius:8px; border:1px solid var(--line); background:none; padding:2px; }
.franja-avanzado-body input[type=number]{ width:64px; height:34px; border-radius:8px; border:1px solid var(--line); background:var(--card-2); color:var(--text); text-align:center; font-family:var(--font-m); font-size:.76rem; }

/* ---------------- escalas ---------------- */
.scale-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px; }
.scale-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); padding:14px; display:flex; flex-direction:column; gap:10px; text-align:left; }
.scale-card-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.scale-card-head b{ font-size:.85rem; font-weight:600; line-height:1.3; }
.scale-actions{ display:flex; gap:4px; flex:0 0 auto; }
.scale-actions button{ width:26px; height:26px; border-radius:8px; background:var(--card-2); border:1px solid var(--line); font-size:.72rem; color:var(--muted); display:flex; align-items:center; justify-content:center; transition:all .15s; }
.scale-actions button:hover{ color:var(--text); border-color:var(--accent); }
.scale-strip{ display:flex; gap:3px; height:9px; }
.scale-strip.compact{ height:6px; flex:0 0 60px; }
.scale-seg{ flex:1; border-radius:3px; }
.scale-labels{ display:flex; gap:3px; }
.scale-labels span{ flex:1; font-size:.58rem; color:var(--faint); text-align:center; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.scale-meta{ font-size:.66rem; color:var(--faint); font-family:var(--font-m); }
.add-card{
  border:1.5px dashed var(--line); border-radius:var(--r-md);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  padding:20px; color:var(--muted); font-size:.78rem; font-weight:600; min-height:120px;
  transition:all .15s;
}
.add-card:hover{ border-color:var(--accent); color:var(--accent-2); }
.add-card .plus{ font-size:1.3rem; font-weight:400; line-height:1; }
.escala-pick-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; }
.scale-card.pick{ cursor:pointer; padding:12px; gap:8px; }
.scale-card.pick b{ font-size:.78rem; }
.scale-card.pick.sel{ border-color:var(--accent); background:var(--accent-bg); }

/* ---------------- lista de evidencias ---------------- */
.peso-resumen{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 14px; border-radius:var(--r-md); margin-bottom:10px; font-size:.8rem; font-weight:600;
  border:1px solid transparent; transition:background .2s,color .2s,border-color .2s;
}
.peso-resumen.ok{ background:var(--verde-bg); color:var(--verde); border-color:rgba(52,211,153,.25); }
.peso-resumen.warn{ background:var(--rojo-bg); color:var(--rojo); border-color:rgba(248,113,113,.25); }
.peso-resumen .pr-btn{ font-size:.72rem; font-weight:700; color:inherit; text-decoration:underline; text-underline-offset:2px; flex:0 0 auto; }
.evid-row{
  width:100%; display:flex; align-items:center; gap:10px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
  padding:10px 10px 10px 14px; margin-bottom:8px; transition:border-color .2s;
}
.evid-row:hover{ border-color:color-mix(in srgb, var(--line) 70%, var(--text) 15%); }
.evid-click{ flex:1; min-width:0; display:flex; align-items:center; gap:12px; text-align:left; background:none; border:none; padding:2px; }
.evid-info{ flex:1; min-width:0; }
.evid-info .nom{ font-weight:600; font-size:.86rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.evid-info .sub{ font-size:.68rem; color:var(--faint); font-family:var(--font-m); margin-top:1px; }
.evid-peso-edit{ flex:0 0 auto; display:flex; align-items:center; gap:3px; background:var(--card-2); border:1px solid var(--line); border-radius:10px; padding:0 4px 0 10px; }
.evid-peso-edit input{
  width:34px; height:34px; background:none; border:none; color:var(--text); outline:none;
  font-family:var(--font-d); font-weight:700; font-size:.88rem; text-align:right;
}
.evid-peso-edit input::-webkit-outer-spin-button,
.evid-peso-edit input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.evid-peso-edit input[type=number]{ -moz-appearance:textfield; }
.evid-peso-edit input:focus{ color:var(--accent-2); }
.evid-peso-edit span{ font-size:.72rem; color:var(--faint); font-weight:600; }
.evid-peso-edit:focus-within{ border-color:var(--accent); }

/* ---------------- niveles fijos (usado en editores de campo genérico) ---------------- */
.niv-row{ display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line-soft); }
.niv-row:last-child{ border-bottom:none; }
.niv-fixed{ flex:0 0 58px; display:flex; flex-direction:column; align-items:center; gap:1px; font-size:1.1rem; color:var(--nc); }
.niv-fixed small{ font-family:var(--font-m); font-size:.58rem; color:var(--faint); }
.niv-input{ flex:1; height:40px; background:var(--card-2); border:1px solid var(--line); border-radius:10px; padding:0 12px; font-size:.84rem; color:var(--text); outline:none; }
.niv-input:focus{ border-color:var(--accent); }
.niv-input::placeholder{ color:var(--faint); }