/* Rubria · estilos del lote 4 · Convivencia y PIE (CO-02 a CO-07, PIE). Solo clases con prefijo «convivencia-»; lo común vive en ../sistema.css.
   Sin colores nuevos: todo sale de los tokens del sistema (violeta, petróleo, advertencia, tinta). */

/* Texto y filas */
.convivencia-p{margin:0;font-size:.86rem;line-height:1.5}
.convivencia-sub{display:block;font-size:.74rem;color:var(--tinta2);line-height:1.35;margin-top:2px}
.convivencia-acciones,.convivencia-envuelve{flex-wrap:wrap}
.convivencia-tabla td{vertical-align:middle}
.convivencia-destacada{box-shadow:0 0 0 2px var(--violeta-luz)}

/* Formularios: etiqueta sobre campo, ancho completo */
.convivencia-form{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.convivencia-form .lbl{margin-top:8px}
.convivencia-form .campo{width:100%}
.convivencia-subir{cursor:pointer}

/* Pista de casos, estudiantes o procesos: se desliza sin desbordar */
.convivencia-pista{max-width:100%;overflow-x:auto;scrollbar-width:none}
.convivencia-pista::-webkit-scrollbar{display:none}
.convivencia-pista .tabs{display:inline-flex}
.convivencia-pista.pista-ses{display:flex;gap:6px}
.convivencia-pista .chip .tenue{font-size:.7rem}
.convivencia-pista .chip[aria-pressed="true"] .tenue{color:inherit;opacity:.75}

/* Protocolos plegables del Reglamento Interno */
.convivencia-det{border-bottom:1px solid var(--linea);padding:10px 0}
.convivencia-det summary{cursor:pointer;font-size:.88rem;list-style-position:outside}
.convivencia-det .tabla{margin-top:8px}

/* Cifras que se abren */
.convivencia-cifras{margin:4px 0}
.convivencia-cifras .btn-limpio{display:block;padding:16px;border-radius:var(--r-md);background:var(--bandeja)}
.convivencia-cifras .btn-limpio b{display:block;font:300 2.4rem/1 var(--mono);letter-spacing:-.05em}
.convivencia-cifras .btn-limpio span{font-size:.74rem;color:var(--tinta2)}
.convivencia-cifras .btn-limpio:hover b{color:var(--violeta)}

/* Familia y estudiante: botones grandes, uno bajo otro en el teléfono */
.convivencia-botones{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.convivencia-elegir{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.convivencia-elegir .opcion{min-height:2.8rem;font-size:.9rem;justify-content:center}

/* Lo que se conserva y lo que cambia, lado a lado */
.convivencia-compara{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.convivencia-compara>div{padding:12px 14px;border-radius:var(--r-md);background:var(--bandeja)}
.convivencia-compara p{margin:6px 0 0;font-size:.84rem}

/* Sociograma: red restringida, números por omisión */
.convivencia-red{display:block;width:100%;height:auto;max-height:520px;border-radius:var(--r-md);background:var(--papel)}
html[data-modo="oscuro"] .convivencia-red{background:var(--hoja)}
.convivencia-simple{stroke:var(--tinta3);stroke-width:1;opacity:.55}
.convivencia-mutua{stroke:var(--violeta);stroke-width:2.2;opacity:.85}
.convivencia-punta{fill:var(--tinta3)}
.convivencia-nodo{cursor:pointer}
.convivencia-nodo circle{fill:var(--hoja);stroke:var(--tinta3);stroke-width:1.5;transition:stroke-width var(--t) var(--spring)}
.convivencia-nodo:hover circle{stroke-width:3}
.convivencia-nodo text{font:500 11px var(--mono);fill:var(--tinta);text-anchor:middle;pointer-events:none}
.convivencia-nodo text.convivencia-nombre{font:500 10px var(--sans);fill:var(--tinta2)}
.convivencia-sub-violeta circle{fill:var(--violeta-piso);stroke:var(--violeta)}
.convivencia-sub-ok circle{fill:var(--ok-piso);stroke:var(--ok)}
.convivencia-sub-warn circle{fill:var(--warn-piso);stroke:var(--warn)}
.convivencia-sub-navy circle{fill:var(--bandeja);stroke:var(--navy-mid)}
.convivencia-nodo.convivencia-sinelec circle{stroke-dasharray:3 3;stroke:var(--tinta2)}
.convivencia-nodo circle.convivencia-anillo{fill:none;stroke:var(--tinta);stroke-width:1;stroke-dasharray:none}
.convivencia-nodo.convivencia-elegido circle:not(.convivencia-anillo){stroke-width:3.5;stroke:var(--tinta)}
.convivencia-leyenda{margin-top:4px}
.convivencia-leyenda span.convivencia-ley-mutua::before{height:3px;border-radius:2px;background:var(--violeta)}
.convivencia-leyenda span.convivencia-ley-simple::before{height:1px;background:var(--tinta3)}
.convivencia-leyenda span.convivencia-ley-sin::before{background:transparent;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--tinta2);outline:1px dashed var(--tinta2);outline-offset:-1px}
.convivencia-leyenda span.convivencia-ley-ref::before{background:transparent;border-radius:50%;box-shadow:0 0 0 1px var(--tinta),inset 0 0 0 3px var(--hoja),inset 0 0 0 4.5px var(--tinta3)}
.convivencia-leyenda-agenda{margin-top:0}

@media (max-width:760px){
  .convivencia-compara{grid-template-columns:minmax(0,1fr)}
  .convivencia-botones .btn{width:100%}
  .convivencia-elegir{grid-template-columns:1fr 1fr}
}
.convivencia-nw{white-space:nowrap}