/* Rubria · estilos del lote 2b · Familias, estudiantes y comunicaciones (FAM, AL, COM). Solo clases con prefijo «familias-»; lo común vive en ../sistema.css.
   Familia y estudiante usan sobre todo el teléfono: todo se piensa primero a 390 px y crece hacia el escritorio. Solo tokens del sistema. */

/* ── Selector de pupilo: persistente, por vínculo vigente ── */
.familias-hijos{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:999px;background:var(--bandeja);box-shadow:0 0 0 1px var(--bandeja-borde);max-width:440px}
.familias-hijos button{display:flex;align-items:center;justify-content:center;gap:10px;min-height:3rem;border:0;border-radius:999px;background:transparent;color:var(--tinta2);padding:4px 12px 4px 6px;transition:background-color .35s var(--spring),color var(--t) var(--spring),box-shadow .35s var(--spring)}
.familias-hijos button[aria-pressed="true"]{background:var(--acento);color:var(--acento-tinta);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 18px -10px rgba(19,38,73,.6)}
.familias-hijos button[aria-pressed="true"] .av{background:var(--violeta);color:#fff}
.familias-hijo-t{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;text-align:left}
.familias-hijo-t b{font-weight:500;font-size:.9rem}
.familias-hijo-t small{font:400 .56rem/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;opacity:.8}

/* ── Requiere atención ── */
.familias-pend{display:flex;align-items:center;gap:12px;padding:12px 4px;border-top:1px solid var(--linea)}
.familias-pend:first-of-type{border-top:0}
.familias-pend .t{flex:1;min-width:0}.familias-pend .t b{display:block;font-weight:500;font-size:.9rem;line-height:1.35}.familias-pend .t span{display:block;font-size:.76rem;color:var(--tinta2);line-height:1.4}
.familias-mk{flex:none;align-self:flex-start;width:10px;height:10px;margin-top:6px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--warn)}
.familias-info .familias-mk{background:var(--navy-mid);box-shadow:0 0 0 3px rgba(29,57,109,.12)}
html[data-modo="oscuro"] .familias-info .familias-mk{background:#A9BACD}
.familias-pend .btn{flex:none}

/* ── Datos resumidos: cada uno abre su evidencia ── */
.familias-resumen{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.familias-resumen-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.familias-dato{display:flex;flex-direction:column;gap:6px;min-width:0;padding:16px;border:0;border-radius:var(--r-md);background:var(--hoja);box-shadow:var(--luz),0 0 0 1px var(--bandeja-borde);text-align:left;color:var(--tinta);font:inherit}
button.familias-dato{cursor:pointer;transition:box-shadow var(--t) var(--spring),transform var(--t) var(--spring)}
button.familias-dato:hover{box-shadow:var(--luz),0 0 0 1px var(--tinta)}
button.familias-dato:hover .kpi-m{color:var(--violeta)}
.familias-dato .d{font-size:.74rem;color:var(--tinta2);line-height:1.4}

/* ── Canales de un aviso: entregado no es leído ── */
.familias-canales{display:flex;flex-wrap:wrap;gap:6px}
.familias-canales .est{white-space:normal}

/* ── Asistencia ── */
.familias-dias{display:flex;flex-wrap:wrap;gap:6px}
.familias-dia{display:flex;flex-direction:column;gap:2px;min-width:4.4rem;padding:8px 10px;border-radius:12px;font-size:.7rem;color:var(--tinta2);background:var(--bandeja)}
.familias-dia b{font:500 .74rem/1.2 var(--mono);color:var(--tinta)}
.familias-dia.familias-P{background:var(--ok-piso);color:var(--ok-tinta)}
.familias-dia.familias-A{background:var(--err-piso);color:var(--err-tinta)}
.familias-dia.familias-T{background:var(--warn-piso);color:var(--warn-tinta)}
.familias-dia.familias-S{box-shadow:inset 0 0 0 1px var(--linea2);background:transparent}
.familias-tipo{flex:none;align-self:flex-start;min-width:4.6rem;padding:4px 8px;border-radius:999px;text-align:center;font:500 .62rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.familias-tipo.familias-A{background:var(--err-piso);color:var(--err-tinta)}
.familias-tipo.familias-T{background:var(--warn-piso);color:var(--warn-tinta)}
.familias-motivos{display:flex;max-width:100%}

/* ── Aprendizajes y hogar ── */
.familias-hogar{padding:12px 16px;border-radius:var(--r-md);background:var(--violeta-piso)}
.familias-hogar p{margin:4px 0 0;font-size:.88rem;line-height:1.5}
.familias-hogar .lbl{color:var(--violeta-tinta)}
.familias-oficial{font-size:.84rem}
.familias-oficial summary{cursor:pointer;color:var(--tinta2);font-size:.8rem;text-decoration:underline;text-decoration-color:var(--linea2);text-underline-offset:3px}
.familias-oficial p{margin:8px 0 4px;font:400 1.05rem/1.4 var(--serif);color:var(--tinta)}
.familias-audio{padding:14px 16px;border-radius:var(--r-md);background:var(--bandeja)}
.familias-audio p{margin:6px 0 0;font:400 1.08rem/1.5 var(--serif)}
.familias-reproductor{display:flex;align-items:center;gap:12px;margin-top:8px}
.familias-reproductor .medidor{flex:1;height:6px}
.familias-play{display:grid;place-items:center;flex:none;width:2.2rem;height:2.2rem;border-radius:50%;background:var(--violeta);color:#fff;font-size:.8rem}
.familias-nota{font-size:1.15rem}
.familias-criterios{margin:0;padding-left:1.1rem;font-size:.88rem;line-height:1.6}

/* ── Opciones en píldora (destinatarios, canales, fechas) ── */
.familias-opciones{display:flex;flex-wrap:wrap;gap:6px}
.familias-opciones .chip{box-shadow:0 0 0 1px var(--linea2);white-space:normal;text-align:left;min-height:2.25rem;height:auto;padding:6px 14px}
.familias-opciones .chip[disabled]{opacity:.45;cursor:not-allowed}
.familias-dest{max-width:100%}
.familias-sel{box-shadow:0 0 0 2px var(--violeta)}

/* ── Agenda de la familia: cada evento dice de quién es ── */
.familias-dia-ag{display:flex;flex-direction:column;gap:2px;padding:10px 0;border-top:1px solid var(--linea)}
.familias-dia-ag:first-child{border-top:0;padding-top:0}
.familias-dia-ag.hoy>.lbl{color:var(--violeta-tinta)}
html[data-modo="oscuro"] .familias-dia-ag.hoy>.lbl{color:var(--violeta-luz)}
.familias-evento{--k:var(--navy-mid);display:grid;grid-template-columns:3rem minmax(0,1fr) auto;gap:10px;align-items:start;width:100%;padding:10px 10px 10px 14px;margin:2px 0;border:0;border-radius:var(--r-md);background:transparent;color:var(--tinta);text-align:left;font:inherit;cursor:pointer;position:relative;transition:background-color var(--t) var(--spring)}
.familias-evento::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--k)}
.familias-evento:hover{background:var(--hover)}
.familias-evento>.num{font-size:.74rem;color:var(--tinta2);padding-top:2px}
.familias-evento .t b{display:block;font-weight:500;font-size:.86rem;line-height:1.35}
.familias-evento .t>span{display:block;font-size:.74rem;color:var(--tinta2)}
.familias-evento .est{white-space:normal}
.familias-q-tomas{--k:var(--petrol-claro)}.familias-q-emilia{--k:var(--violeta)}.familias-q-general{--k:var(--tinta3)}
.familias-quien{display:inline-flex;align-items:center;gap:5px;margin-right:6px;padding:1px 8px 1px 6px;border-radius:999px;font:normal 500 .6rem/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;background:var(--bandeja);color:var(--tinta)}
.familias-quien::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--k)}

/* ── Despacho ── */
.familias-despacho{display:flex;flex-direction:column;gap:8px;padding:14px;margin-bottom:8px;border-radius:var(--r-md);background:var(--bandeja)}
.familias-despacho-cab{display:flex;flex-direction:column;gap:3px;width:100%}
.familias-despacho-cab b{font:500 1.1rem/1.2 var(--serif)}
.familias-despacho-cab .sec{font-size:.78rem}
.familias-despacho-cab:hover b{color:var(--violeta)}
.familias-despacho .hallazgo{margin:0}
.familias-ok{margin:0;font-size:.8rem;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.familias-sms{padding:10px 14px;margin-bottom:6px;border-radius:var(--r-md);background:var(--bandeja)}
.familias-sms p{margin:4px 0 0;font:400 .8rem/1.45 var(--mono);color:var(--tinta)}

/* ── Citación ── */
.familias-cita-fecha{display:flex;flex-direction:column;gap:2px;padding:16px 18px;border-radius:var(--r-md);background:var(--violeta-piso)}
.familias-cita-fecha .lbl{color:var(--violeta-tinta)}
.familias-cita-fecha b{font:400 2rem/1 var(--serif);color:var(--tinta)}
.familias-cita-fecha .num{font-size:1.3rem;color:var(--violeta-tinta)}
html[data-modo="oscuro"] .familias-cita-fecha .num,html[data-modo="oscuro"] .familias-cita-fecha .lbl,html[data-modo="oscuro"] .familias-hogar .lbl{color:var(--violeta-luz)}

/* ── Estudiante ── */
.familias-auto{display:flex;flex-direction:column;gap:8px;padding:10px 0;border-top:1px solid var(--linea)}
.familias-auto b{font-weight:500;font-size:.88rem}
.familias-urgente .core{background:var(--hoja-calida)}
.familias-pasos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;counter-reset:paso}
.familias-pasos li{counter-increment:paso;display:flex;align-items:center;gap:10px;font-size:.86rem;color:var(--tinta3)}
.familias-pasos li::before{content:counter(paso);display:grid;place-items:center;flex:none;width:1.6rem;height:1.6rem;border-radius:50%;font:500 .7rem/1 var(--mono);box-shadow:inset 0 0 0 1.5px var(--tinta3)}
.familias-pasos li.hecho{color:var(--tinta)}
.familias-pasos li.hecho::before{content:"✓";background:var(--ok);color:#fff;box-shadow:none}

/* ── Barra de accesos en el teléfono (familia y estudiante) ── */
.familias-barra{display:none}
.familias-punto{position:absolute;top:2px;right:calc(50% - 20px);min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--violeta);color:#fff;font:normal 500 .56rem/16px var(--mono);text-align:center}

@media (max-width:1100px){
  .familias-primero{order:-1}
}
@media (max-width:760px){
  .familias-hijos{max-width:none}
  .familias-resumen{grid-template-columns:1fr 1fr}
  .familias-resumen>.familias-ancho{grid-column:1 / -1}
  .familias-v .fl{flex-wrap:wrap;row-gap:6px}
  .familias-v .fl>.t{flex:1 1 11rem}
  .familias-v .fl>.est,.familias-v .fl>.linkp,.familias-v .fl>.btn{margin-left:auto}
  .familias-resumen-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .familias-resumen-3 .kpi-m{font-size:1.5rem}
  .familias-dato{padding:12px}
  .familias-dato .kpi-m{font-size:1.6rem}
  .familias-pend{flex-wrap:wrap}
  .familias-pend .btn{margin-left:22px}
  .familias-evento{grid-template-columns:2.6rem minmax(0,1fr)}
  .familias-evento .est{grid-column:2}
  .familias-barra{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));position:fixed;left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom));z-index:40;padding:6px;border-radius:999px;background:var(--acento);box-shadow:0 18px 30px -12px rgba(19,38,73,.6)}
  html[data-modo="oscuro"] .familias-barra{background:#091222;box-shadow:0 0 0 1px var(--linea2)}
  .familias-barra button{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;min-height:3rem;padding:6px 0;border:0;border-radius:999px;background:transparent;color:#A9BACD;font:400 .52rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}
  .familias-barra button .ic{width:1.15rem;height:1.15rem}
  .familias-barra button.on{background:rgba(237,234,227,.12);color:#EDEAE3}
  .familias-barra button span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media (max-width:420px){
  .familias-resumen-3 .kp .d{display:none}
}