/* =====================================================================
   Fase 12: seguimiento, avisos, reportes y manual
   ===================================================================== */
/* Ficha del alumno */
.pf-head { align-items: center; }
.pf-av { width: 64px; height: 64px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font: 700 1.8rem var(--display); flex: none; }
.pf-alerts { background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); border-radius: var(--r); padding: 14px 18px; display: grid; gap: 8px; }
.pf-alerts > b { color: var(--warn); display: flex; align-items: center; gap: 6px; }
.pf-alerts ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.pf-alerts li { display: flex; gap: 8px; align-items: center; font-weight: 700; }
.pf-alerts li.al-bad { color: var(--bad); }
.ok-note { background: var(--ok-soft); color: var(--ok); font-weight: 700; display: flex; align-items: center; gap: 6px; }
.pg-chart-wrap { width: 100%; }
.pg-chart { width: 100%; height: auto; display: block; }
.pg-grid { stroke: var(--line); stroke-width: 1; }
.pg-pass { stroke: var(--warn); stroke-width: 1.5; stroke-dasharray: 5 4; }
.pg-axis { font: 700 10px var(--body); fill: var(--muted); }
.pg-line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; }
.pg-pt { fill: var(--surface); stroke: var(--accent); stroke-width: 2.5; }
.pg-pt.low { stroke: var(--bad); }
.pg-strip { display: flex; flex-wrap: wrap; gap: 4px; }
.pg-day { width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; font: 800 .75rem var(--body); background: var(--surface-2); color: var(--muted); }
.pg-day.s-present { background: var(--ok); color: #fff; } .pg-day.s-late { background: #D96F06; color: #fff; }
.pg-day.s-absent { background: var(--bad); color: #fff; } .pg-day.s-excused { background: #7C88A3; color: #fff; }
.pg-rows { display: grid; gap: 12px; }
.pg-row { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(110px, 180px); gap: 12px; align-items: center; }
.pg-ico { width: 38px; height: 38px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.pg-bar { display: grid; gap: 2px; }
.pg-bar .ts-bar { display: block; margin: 0; }
.pg-bar small { font-weight: 800; color: var(--muted); text-align: right; }
@media (max-width: 560px) { .pg-row { grid-template-columns: auto 1fr; } .pg-bar { grid-column: 1 / -1; } }

/* Avisos en el Inicio */
.al-card { border-color: color-mix(in srgb, var(--warn) 35%, var(--line)); }
.al-card h2 .ico { color: var(--warn); }
.al-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.al-list a { display: grid; grid-template-columns: auto minmax(140px, 220px) 1fr auto; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 12px; color: inherit; text-decoration: none; }
.al-list a:hover { background: var(--surface-2); }
.al-av { width: 38px; height: 38px; background: var(--warn); font-size: 1rem; }
.al-who b { display: block; }
.al-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.al-tag { padding: 3px 10px; border-radius: 99px; font-size: .82rem; font-weight: 800; background: var(--warn-soft); color: var(--warn); }
.al-tag.al-bad { background: var(--bad-soft); color: var(--bad); }
.al-tag.al-mild { background: var(--surface-2); color: var(--muted); }
@media (max-width: 700px) { .al-list a { grid-template-columns: auto 1fr auto; } .al-tags { grid-column: 2 / -1; } }

/* Reportes (hoja para imprimir) */
.rp { min-height: 100vh; background: var(--surface-2); padding: 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; justify-items: center; align-content: start; }
.rp-bar > p { flex: 1 1 200px; min-width: 0; }
.rp-bar { width: 100%; max-width: 840px; display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.rp-sheet { width: 100%; max-width: 840px; background: var(--surface); color: var(--ink); border-radius: 12px; box-shadow: var(--shadow); padding: 36px 40px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.rp-head { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; align-items: center; border-bottom: 3px solid var(--accent); padding-bottom: 14px; }
.rp-head .brand { color: var(--ink); }
.rp-head .brand-mark i { background: var(--ink); box-shadow: none; }
.rp-head > div:nth-child(2) { text-align: right; display: grid; }
.rp-head > div:nth-child(2) small { color: var(--muted); }
.rp-title { grid-column: 1 / -1; }
.rp-title h1 { font-size: 1.8rem; }
.rp-title p { font-weight: 700; color: var(--muted); }
.rp-meta { color: var(--muted); font-size: .92rem; margin-top: -10px; }
.rp-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.rp-tile { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: grid; gap: 2px; }
.rp-tile small { color: var(--muted); font-weight: 800; font-size: .78rem; }
.rp-tile b { font: 700 1.6rem var(--display); }
.rp-tile span { font-size: .8rem; color: var(--muted); }
.rp-box { border-radius: 12px; padding: 12px 16px; }
.rp-box.warn { background: var(--warn-soft); } .rp-box.ok { background: var(--ok-soft); color: var(--ok); font-weight: 700; }
.rp-box h2 { font-size: 1rem; margin-bottom: 4px; }
.rp-box ul { margin: 0; padding-left: 20px; }
.rp-sec { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; break-inside: avoid; }
.rp-sec h2 { font-size: 1.1rem; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.rp-table { width: 100%; min-width: 0; border-collapse: collapse; font-size: .9rem; }
.rp-table th, .rp-table td { border-bottom: 1px solid var(--line); padding: 6px 8px; text-align: left; }
.rp-table th { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.rp-table .num { text-align: right; }
.rp-note-out { white-space: pre-wrap; min-height: 1.5em; border-bottom: 1px dashed var(--line); padding-bottom: 6px; }
.rp-sign { display: flex; flex-wrap: wrap; gap: 24px 40px; justify-content: space-around; margin-top: 30px; }
.rp-sign div { display: grid; gap: 6px; text-align: center; font-size: .85rem; color: var(--muted); min-width: 140px; flex: 1; max-width: 240px; }
.rp-sign span { border-bottom: 1.5px solid var(--ink); height: 40px; }
@media (max-width: 640px) { .rp { padding: 8px; } .rp-sheet { padding: 20px 16px; } .rp-tiles { grid-template-columns: 1fr 1fr; } .rp-head { grid-template-columns: minmax(0, 1fr); } .rp-head .brand { white-space: normal; } .rp-title h1 { font-size: 1.4rem; overflow-wrap: anywhere; } .rp-head > div:nth-child(2) { text-align: left; } .rp-table { font-size: .8rem; display: block; overflow-x: auto; min-width: 0; max-width: 100%; } .rp-table th { white-space: nowrap; } .rp-table th, .rp-table td { padding: 5px 4px; } }

/* Manual */
.mh-toc { display: flex; flex-wrap: wrap; gap: 8px; }
.mh-toc a { padding: 6px 12px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); font-weight: 800; font-size: .88rem; text-decoration: none; color: var(--ink); }
.mh-toc a:hover { border-color: var(--accent); color: var(--accent); }
.mh-sec summary { cursor: pointer; display: flex; align-items: center; gap: 12px; font: 700 1.2rem var(--display); list-style: none; }
.mh-sec summary::-webkit-details-marker { display: none; }
.mh-sec summary::after { content: "▾"; margin-left: auto; color: var(--muted); transition: transform .2s; }
.mh-sec:not([open]) summary::after { transform: rotate(-90deg); }
.mh-ico { width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex: none; }
.mh-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.mh-step { display: grid; grid-template-columns: auto 1fr; gap: 12px; }
.mh-n { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 900; }
.mh-step b { display: block; font-size: 1.05rem; margin-bottom: 2px; }
.mh-step p { color: var(--ink); line-height: 1.5; }
.mh-sub { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 4px; }
.mh-tip { background: var(--accent-soft); color: var(--ink); border-radius: 10px; padding: 8px 12px; font-size: .92rem; margin-top: 6px; }
.mh-tip .ico { color: var(--accent); }
.mh-faq { margin: 0; display: grid; gap: 4px; }
.mh-faq dt { font-weight: 800; margin-top: 8px; }
.mh-faq dd { margin: 0; color: var(--muted); }
.mh .btn.ghost.small { justify-self: start; }

/* Al imprimir siempre en claro, sin menú ni botones */
@media print {
  :root, :root[data-theme="dark"] { --bg: #fff; --surface: #fff; --surface-2: #F1F4F9; --ink: #142036; --muted: #5A6680; --line: #DAE1EC; --accent: #2350D8; --accent-soft: #E3EAFD; --ok: #157347; --ok-soft: #DCF2E5; --warn: #A95306; --warn-soft: #FCEFD7; --bad: #B8321A; --bad-soft: #FCE4DD; color-scheme: light; }
  body { background: #fff; }
  .rp { padding: 0; background: #fff; }
  .rp-sheet { box-shadow: none; padding: 0; max-width: none; }
  .no-print, .rp-bar, .sec-tabs { display: none !important; }
  .pg-day, .rp-tile, .rp-box, .al-tag { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .mh details { border: 0; padding: 0; }
  .mh-sec summary::after { display: none; }
}