/* public/assets/pares_panell.css — L'Aula de la Laia · panell dels pares (revisor diari)
 * (I6-REVISOR-PANELL I6-C panell, docs/briefs/I6-REVISOR-PANELL-BRIEF.md §4.3).
 *
 * Només variables del sistema de pells ja existent (var(--...)) i els tres colors semàntics ja
 * establerts per pressupost.css (verd/groc/vermell) -- cap color nou escrit a mà, cap !important.
 * Reutilitza .rl-card/.rl-btn/.rl-meta/.rl-input de roles.css; aquest fitxer NOMÉS hi afegeix les
 * peces NOVES del panell de §20: semàfor gran, graella de 14 dies, targetes d'evidències i xat.
 */

.pp-nivell-verd    { --pp-color: var(--aip-verd, #1f7a4d); }
.pp-nivell-groc    { --pp-color: var(--aip-groc, #b8860b); }
.pp-nivell-vermell { --pp-color: var(--aip-vermell, #a63a3a); }
.pp-nivell-gris    { --pp-color: var(--text-mut, #6b7280); }

/* ── Semàfor gran (§4.3.a) ── */
.pp-semafor-gran { display: flex; flex-direction: column; gap: 6px; border-left: 4px solid var(--pp-color); }
.pp-emoji { margin: 0; font-size: 26px; line-height: 1; }
.pp-frase { margin: 0; font-size: 17px; font-weight: 700; color: var(--pp-color); }
.pp-resum { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text, #1f2937); white-space: pre-line; }
.pp-detall-bo { margin: 0; font-size: 13px; color: var(--text-mut, #6b7280); }

/* ── 8 semàfors amb fletxa de tendència (§4.3.b) ── */
.pp-ambits-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.pp-ambit-chip { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--bg3, #eef2f8); border: 1px solid var(--border, rgba(15,23,42,.08)); cursor: default; text-align: left; font: inherit; color: inherit; }
.pp-ambit-chip.pp-clicable { cursor: pointer; }
.pp-ambit-chip.pp-clicable:hover { border-color: var(--pp-color); }
.pp-ambit-nom { font-size: 12px; color: var(--text-mut, #6b7280); }
.pp-ambit-valor { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; }
.pp-ambit-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.pp-tendencia-puja::after { content: '↗'; margin-left: 4px; }
.pp-tendencia-baixa::after { content: '↘'; margin-left: 4px; }
.pp-tendencia-igual::after { content: '→'; margin-left: 4px; }

/* ── Graella de 14 dies (§4.3.c) ── */
.pp-graella-wrap { overflow-x: auto; }
.pp-graella { border-collapse: collapse; font-size: 11px; }
.pp-graella th, .pp-graella td { padding: 3px 4px; text-align: center; white-space: nowrap; }
.pp-graella th { font-weight: 600; color: var(--text-mut, #6b7280); }
.pp-graella td.pp-fila-nom { text-align: left; font-weight: 600; color: var(--text, #1f2937); }
.pp-punt { display: inline-block; width: 16px; height: 16px; border-radius: 4px; }
.pp-punt-0 { background: var(--aip-verd, #1f7a4d); opacity: .35; }
.pp-punt-1 { background: var(--aip-groc, #b8860b); }
.pp-punt-2 { background: var(--aip-vermell, #a63a3a); }
.pp-punt-9 { background: var(--bg3, #eef2f8); border: 1px dashed var(--border, rgba(15,23,42,.18)); }
.pp-llegenda { margin: 6px 0 0; font-size: 11.5px; color: var(--text-mut, #6b7280); }

/* ── Gràfiques (§4.3.d): xifres senzilles, ella contra ella mateixa ── */
.pp-grafiques-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.pp-graf-xifra { margin: 0; font-size: 20px; font-weight: 700; }
.pp-graf-nom { margin: 0; font-size: 11.5px; color: var(--text-mut, #6b7280); }

/* ── Evidències (§4.3.e) ── */
.pp-evidencies-llista { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pp-evidencia { padding: 8px 10px; border-radius: 8px; background: var(--bg3, #eef2f8); font-size: 13px; }
.pp-evidencia-cita { margin: 0 0 2px; font-style: italic; }
.pp-evidencia-meta { margin: 0; font-size: 11px; color: var(--text-mut, #6b7280); }
.pp-avis-groc { font-size: 12px; color: var(--text-mut, #6b7280); margin: 0 0 6px; }

/* ── «Què fer» (§4.3.f) ── */
.pp-que-fer-bloc { margin-top: 10px; }
.pp-que-fer-bloc h4 { margin: 8px 0 4px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-mut, #6b7280); }
.pp-que-fer-bloc ol, .pp-que-fer-bloc ul { margin: 0; padding-left: 18px; font-size: 13px; }

/* ── Calibratge ── */
.pp-calibratge { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.pp-calibratge button { font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border, rgba(15,23,42,.15)); background: var(--bg2, #fff); cursor: pointer; }
.pp-calibratge button.pp-triat { background: var(--pp-color, #1f7a4d); color: #fff; border-color: transparent; }

/* ── Xat amb la Penny (§4.3.f) ── */
.pp-xat-nota { font-size: 12px; color: var(--text-mut, #6b7280); margin: 0 0 8px; }
.pp-xat-fils { display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow-y: auto; margin-bottom: 8px; }
.pp-xat-bombolla { padding: 7px 10px; border-radius: 10px; font-size: 13px; max-width: 85%; white-space: pre-line; }
.pp-xat-pare { align-self: flex-end; background: var(--pp-color, #1f7a4d); color: #fff; }
.pp-xat-penny { align-self: flex-start; background: var(--bg3, #eef2f8); color: var(--text, #1f2937); }
.pp-xat-form { display: flex; gap: 6px; }
.pp-xat-form textarea { flex: 1 1 auto; resize: vertical; min-height: 38px; }

/* ── Setmana / informes / qualitat del tutor / transparència ── */
.pp-llista-simple { margin: 4px 0 0; padding-left: 18px; font-size: 13px; }
.pp-transparencia-text { font-size: 13px; line-height: 1.5; white-space: pre-line; }