/* ============================================================================
   panel.css — SISTEMA DE DISEÑO DEL PANEL
   ----------------------------------------------------------------------------
   Neutro a propósito. Lo ÚNICO que cambia por colegio es --acento, que se
   inyecta desde la base de datos (colegio.color_acento), y el logo.
   Los colores de estado son fijos en todas las escuelas: verde es correcto,
   ámbar es atención, rojo es problema.
   ========================================================================== */

:root {
  --acento:      #1B6B31;   /* ← lo pisa el colegio */
  --acento-lav:  #E9F3E9;

  --fondo:       #F6F7F5;
  --panel:       #FFFFFF;
  --suave:       #F1F3EF;
  --linea:       #E4E7E2;

  --tinta:       #232722;
  --tinta-2:     #5F665D;
  --tinta-3:     #929A8F;

  --ok:          #12805A;  --ok-bg:     #E4F3EC;
  --aviso:       #A66A00;  --aviso-bg:  #FAF0DC;
  --alerta:      #B3261E;  --alerta-bg: #FAE9E8;
  --info:        #1D5FA8;  --info-bg:   #E7EFFA;

  --radio:       10px;
  --sombra:      0 1px 2px rgba(35,39,34,.04), 0 8px 22px -14px rgba(35,39,34,.2);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .cifra {
  font-family: "Baloo 2", ui-rounded, ui-sans-serif, system-ui, sans-serif;
  margin: 0;
  line-height: 1.2;
}

a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; border-radius: 6px; }

/* ---- Formularios -------------------------------------------------------- */

label { display: block; font-weight: 700; font-size: 13.5px; margin-bottom: 6px; color: var(--tinta-2); }

input[type="text"], input[type="email"], input[type="password"] {
  width: 100%;
  font-family: inherit;
  font-size: 15.5px;
  color: var(--tinta);
  background: var(--panel);
  border: 1.5px solid var(--linea);
  border-radius: 8px;
  padding: 12px 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-lav);
}

.campo + .campo { margin-top: 16px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  font-family: inherit;
  font-weight: 700;
  font-size: 15.5px;
  padding: 13px 22px;
  border: 0;
  border-radius: 8px;
  background: var(--acento);
  color: #fff;
  cursor: pointer;
  transition: filter .15s ease, transform .15s ease;
}
.btn:hover { filter: brightness(.92); text-decoration: none; }
.btn:active { transform: translateY(1px); }

/* ---- Avisos ------------------------------------------------------------- */

.aviso {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 20px;
}
.aviso svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.aviso-alerta { background: var(--alerta-bg); color: var(--alerta); }
.aviso-atencion { background: var(--aviso-bg); color: var(--aviso); }
.aviso-info { background: var(--info-bg); color: var(--info); }
.aviso-ok { background: var(--ok-bg); color: var(--ok); }

/* ---- Pantalla de acceso ------------------------------------------------- */

.acceso {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 20px;
}

.acceso-caja {
  width: 100%;
  max-width: 420px;
}

.acceso-marca {
  text-align: center;
  margin-bottom: 26px;
}
.acceso-marca img { width: 96px; height: auto; margin: 0 auto 14px; display: block; }
.acceso-marca b {
  display: block;
  font-family: "Baloo 2", sans-serif;
  font-size: 21px;
  font-weight: 700;
  color: var(--tinta);
  line-height: 1.2;
}
.acceso-marca span { font-size: 13px; color: var(--tinta-3); }

.tarjeta {
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: 14px;
  box-shadow: var(--sombra);
  padding: 30px 28px;
}
.tarjeta h1 { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
.tarjeta .sub { font-size: 14px; color: var(--tinta-3); margin: 0 0 22px; }

.acceso-pie {
  text-align: center;
  margin-top: 20px;
  font-size: 12.5px;
  color: var(--tinta-3);
  line-height: 1.55;
}

/* ---- Estructura del panel ---------------------------------------------- */

.app { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }

.lateral {
  background: var(--panel);
  border-right: 1px solid var(--linea);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lateral .marca {
  display: flex; align-items: center; gap: 10px;
  padding: 0 6px 16px;
  border-bottom: 1px solid var(--linea);
  margin-bottom: 14px;
}
.lateral .marca img { width: 40px; height: 40px; object-fit: contain; flex: none; }
.lateral .marca b { display: block; font-family: "Baloo 2", sans-serif; font-size: 15px; font-weight: 700; line-height: 1.15; }
.lateral .marca small { font-size: 11px; color: var(--tinta-3); }

.lateral .rotulo {
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta-3); padding: 14px 8px 6px;
}
.lateral a.item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 8px;
  color: var(--tinta-2); font-weight: 600; font-size: 14px;
}
.lateral a.item:hover { background: var(--suave); text-decoration: none; color: var(--tinta); }
.lateral a.item.on { background: var(--acento-lav); color: var(--acento); font-weight: 700; }
.lateral a.item .ic { width: 17px; text-align: center; flex: none; opacity: .85; }
.lateral .empuje { flex: 1; }

.lienzo { display: flex; flex-direction: column; min-width: 0; }

.topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 24px;
  background: var(--panel);
  border-bottom: 1px solid var(--linea);
  position: sticky; top: 0; z-index: 10;
}
.topbar h1 { font-size: 19px; font-weight: 700; }
.topbar .derecha { margin-left: auto; display: flex; align-items: center; gap: 14px; }

.reloj {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 700;
  background: var(--suave); color: var(--tinta-2);
  border-radius: 999px; padding: 5px 12px;
  font-variant-numeric: tabular-nums;
}
.reloj.pronto { background: var(--aviso-bg); color: var(--aviso); }

.yo { display: flex; align-items: center; gap: 9px; }
.yo .av {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--acento-lav); color: var(--acento);
  display: grid; place-items: center; font-weight: 700; font-size: 12.5px;
}
.yo .quien b { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.2; }
.yo .quien span { font-size: 11.5px; color: var(--tinta-3); }

.cuerpo { padding: 24px; display: flex; flex-direction: column; gap: 18px; }

/* ---- Modal de sesión por vencer ---------------------------------------- */

.velo {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(35, 39, 34, .45);
  display: grid; place-items: center;
  padding: 24px;
}
.velo[hidden] { display: none; }
.velo .tarjeta { max-width: 400px; text-align: center; }
.velo .cuenta {
  font-family: "Baloo 2", sans-serif;
  font-size: 44px; font-weight: 800; color: var(--aviso);
  line-height: 1; margin: 8px 0 6px;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .lateral {
    flex-direction: row; align-items: center; gap: 4px;
    overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--linea);
    padding: 10px 12px;
  }
  .lateral .marca, .lateral .rotulo, .lateral .empuje { display: none; }
  .lateral a.item { white-space: nowrap; }
  .cuerpo { padding: 16px; }
  .topbar { padding: 12px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .001ms !important; }
}

/* Módulo aún no construido: visible en el menú, pero sin enlace */
.lateral .item.pendiente {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 8px;
  color: var(--tinta-3); font-weight: 600; font-size: 14px;
  cursor: default;
}
.lateral .item.pendiente .ic { opacity: .45; }
.lateral .item.pendiente .chip {
  margin-left: auto;
  font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: var(--suave); color: var(--tinta-3);
  border-radius: 999px; padding: 2px 7px;
}

/* ============================================================================
   Componentes de módulo
   ========================================================================== */

.tenue { color: var(--tinta-3); font-size: 12.5px; display: block; font-weight: 400; }
/* .tenue y .malo se usan también en celdas de tabla. Ahí NO pueden ser bloque:
   dos celdas atenuadas seguidas se funden en una sola columna, porque el
   navegador las envuelve juntas en una celda anónima. Se nota solo cuando van
   pegadas, que es justo por lo que costó verlo. */
td.tenue, th.tenue, td.malo, th.malo { display: table-cell; }
.fuerte { font-weight: 700; color: var(--tinta); }
.malo { color: var(--alerta); font-size: 12px; display: block; font-weight: 600; }
.num { font-variant-numeric: tabular-nums; }
.der { text-align: right; }
.mini-titulo { display: block; font-family: "Baloo 2", sans-serif; font-size: 15px; font-weight: 700; margin-bottom: 12px; }
.volver { font-size: 13.5px; font-weight: 600; }

/* Píldoras de estado — tonos fijos en todos los colegios */
.pill { display: inline-block; font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.pill-ok     { background: var(--ok-bg);     color: var(--ok); }
.pill-aviso  { background: var(--aviso-bg);  color: var(--aviso); }
.pill-alerta { background: var(--alerta-bg); color: var(--alerta); }
.pill-info   { background: var(--info-bg);   color: var(--info); }
.pill-neutro { background: var(--suave);     color: var(--tinta-2); }

/* Botones chicos de módulo */
.btn-chico {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-family: inherit; font-weight: 700; font-size: 13.5px;
  padding: 9px 16px; border: 1.5px solid transparent; border-radius: 8px;
  background: var(--acento); color: #fff; cursor: pointer; text-decoration: none;
  transition: filter .15s ease;
}
.btn-chico:hover { filter: brightness(.92); text-decoration: none; color: #fff; }
.btn-chico.fantasma { background: var(--panel); color: var(--tinta-2); border-color: var(--linea); }
.btn-chico.fantasma:hover { background: var(--suave); color: var(--tinta); filter: none; }
.btn-chico.peligro { background: var(--alerta); }

/* Filtros */
.filtros { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 14px 16px; }
.filtro-fila { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.filtro-fila input[type="search"], .filtro-fila input[type="text"], .filtro-fila input[type="date"], .filtro-fila select {
  font-family: inherit; font-size: 14px; color: var(--tinta); background: var(--panel);
  border: 1.5px solid var(--linea); border-radius: 8px; padding: 9px 12px;
}
.filtro-fila input[type="search"] { min-width: 240px; flex: 1; }
.filtro-fila input:focus, .filtro-fila select:focus { outline: none; border-color: var(--acento); }

/* Cabecera de sección */
.sec-cabeza { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--linea); }
.sec-cabeza b { font-size: 14.5px; }
.sec-acciones { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* Tablas de módulo */
.tabla-scroll { overflow-x: auto; }
table.tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 640px; }
table.tabla th {
  text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tinta-3); padding: 10px 18px;
  border-bottom: 1px solid var(--linea); white-space: nowrap;
}
table.tabla td { padding: 11px 18px; border-bottom: 1px solid var(--suave); vertical-align: top; }
table.tabla tbody tr:last-child td { border-bottom: 0; }
table.tabla tbody tr:hover { background: var(--suave); }

/* Estado vacío */
.vacio { padding: 34px 20px; text-align: center; }
.vacio p { margin: 0; font-weight: 700; color: var(--tinta-2); }
.vacio small { display: block; margin-top: 5px; color: var(--tinta-3); font-size: 13px; }

/* Paginador */
.pager { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-top: 1px solid var(--linea); font-size: 13px; color: var(--tinta-3); }
.pager .actual { margin-left: auto; font-weight: 700; color: var(--tinta-2); }
.pager a { font-weight: 700; }

/* Ficha del postulante */
.ficha { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.ficha-col { display: flex; flex-direction: column; gap: 18px; }

.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; padding: 18px; }
.datos > div span { display: block; font-size: 12px; color: var(--tinta-3); margin-bottom: 2px; }
.datos > div b { font-size: 14.5px; }

.comentario { border-top: 1px solid var(--suave); padding: 16px 18px; }
.comentario p { margin: 6px 0 0; font-size: 14px; color: var(--tinta-2); line-height: 1.6; }

.contacto p { margin: 0 0 8px; font-size: 14px; }

.nota-form { display: flex; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--suave); align-items: flex-start; }
.nota-form textarea {
  flex: 1; font-family: inherit; font-size: 14px; color: var(--tinta);
  border: 1.5px solid var(--linea); border-radius: 8px; padding: 10px 12px; resize: vertical;
}
.nota-form textarea:focus { outline: none; border-color: var(--acento); }

.estado-form { display: flex; gap: 10px; }
.estado-form select {
  flex: 1; font-family: inherit; font-size: 14px; color: var(--tinta);
  border: 1.5px solid var(--linea); border-radius: 8px; padding: 9px 12px; background: var(--panel);
}

.historial { list-style: none; margin: 0; padding: 6px 18px 16px; }
.historial li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--suave); }
.historial li:last-child { border-bottom: 0; }
.hito-punto { width: 9px; height: 9px; border-radius: 50%; background: var(--acento); margin-top: 7px; }
.historial p { margin: 0; font-size: 14px; line-height: 1.5; }
.historial small { margin-top: 3px; }

/* Formularios de módulo */
.form-modulo { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.form-modulo .fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.form-modulo input[type="text"], .form-modulo input[type="email"], .form-modulo input[type="date"],
.form-modulo input[type="time"], .form-modulo input[type="number"], .form-modulo input[type="url"],
.form-modulo select, .form-modulo textarea {
  width: 100%; font-family: inherit; font-size: 14.5px; color: var(--tinta); background: var(--panel);
  border: 1.5px solid var(--linea); border-radius: 8px; padding: 10px 12px;
}
.form-modulo textarea { resize: vertical; }
.form-modulo input:focus, .form-modulo select:focus, .form-modulo textarea:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-lav); }
.form-modulo label { font-size: 13px; }
.form-modulo .check { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 14px; color: var(--tinta-2); cursor: pointer; }
.form-modulo .check input { width: 17px; height: 17px; accent-color: var(--acento); }

/* Tiles reutilizables */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.tile { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 15px 17px; }
.tile .k { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); }
.tile .v { font-family: "Baloo 2", sans-serif; font-size: 29px; font-weight: 800; line-height: 1.1; margin-top: 2px; font-variant-numeric: tabular-nums; }
.tile .d { font-size: 12px; color: var(--tinta-3); }

@media (max-width: 980px) {
  .ficha { grid-template-columns: minmax(0, 1fr); }
}

.dia-cabeza {
  display: flex; align-items: baseline; gap: 12px;
  padding: 11px 18px; background: var(--suave);
  border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
  font-family: "Baloo 2", sans-serif; font-weight: 700; font-size: 14px; color: var(--tinta);
}
.dia-cabeza .tenue { margin-left: auto; }

@media (max-width: 1020px) {
  .escritorio-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ============================================================================
   Barra lateral: el menú se desplaza, «Cerrar sesión» queda anclado abajo
   ========================================================================== */

.lateral { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.lateral .marca { flex: none; }
.lateral-nav {
  flex: 1;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
  margin: 0 -6px; padding: 0 6px;
  scrollbar-width: thin;
}
.lateral .item.salir {
  flex: none;
  margin-top: 8px; padding-top: 12px;
  border-top: 1px solid var(--linea);
  border-radius: 0 0 8px 8px;
}

/* ============================================================================
   Menú de la persona conectada
   ========================================================================== */

.yo-caja { position: relative; }

.yo {
  display: flex; align-items: center; gap: 9px;
  background: none; border: 1.5px solid transparent; border-radius: 10px;
  padding: 5px 10px 5px 5px;
  font-family: inherit; text-align: left; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.yo:hover { background: var(--suave); }
.yo[aria-expanded="true"] { background: var(--suave); border-color: var(--linea); }
.yo .flecha { color: var(--tinta-3); transition: transform .18s ease; flex: none; }
.yo[aria-expanded="true"] .flecha { transform: rotate(180deg); }

.yo-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 270px;
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: 12px;
  box-shadow: 0 8px 28px -10px rgba(35,39,34,.32);
  padding: 6px;
  display: flex; flex-direction: column; gap: 1px;
}
.yo-menu[hidden] { display: none; }

.yo-menu-cabeza { padding: 12px 12px 10px; border-bottom: 1px solid var(--linea); margin-bottom: 5px; }
.yo-menu-cabeza b { display: block; font-size: 14.5px; }
.yo-menu-cabeza span { display: block; font-size: 12.5px; color: var(--tinta-3); }
.yo-menu-cabeza .rol {
  display: inline-block; margin-top: 6px;
  background: var(--acento-lav); color: var(--acento);
  font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 9px;
}

.yo-menu a, .yo-menu .como-enlace {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 10px 12px; border: 0; border-radius: 8px;
  background: none; color: var(--tinta-2);
  font-family: inherit; font-size: 14px; font-weight: 600; text-align: left;
  cursor: pointer; text-decoration: none;
}
.yo-menu a:hover, .yo-menu .como-enlace:hover { background: var(--suave); color: var(--tinta); text-decoration: none; }
.yo-menu .ic { width: 18px; text-align: center; flex: none; }
.yo-menu a.salir { color: var(--alerta); margin-top: 4px; border-top: 1px solid var(--linea); border-radius: 0 0 8px 8px; padding-top: 12px; }
.yo-menu a.salir:hover { background: var(--alerta-bg); color: var(--alerta); }

.yo-menu-dato { margin: 0; padding: 8px 12px; font-size: 12px; color: var(--tinta-3); line-height: 1.5; }
.yo-menu-dato b { color: var(--tinta-2); font-variant-numeric: tabular-nums; }

@media (max-width: 860px) {
  .lateral { position: static; height: auto; }
  .lateral-nav { flex-direction: row; overflow-x: auto; margin: 0; padding: 0; }
  .lateral .item.salir { border-top: 0; margin-top: 0; padding-top: 9px; white-space: nowrap; }
  .yo .quien { display: none; }
  .yo-menu { right: -6px; min-width: 240px; }
}

/* Barra de contexto al dar hora a un niño concreto */
.barra-agendando {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--acento-lav);
  border: 1.5px solid var(--acento);
  border-radius: var(--radio);
  padding: 14px 18px;
}
.barra-agendando .k {
  display: block; font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--acento);
}
.barra-agendando b { font-family: "Baloo 2", sans-serif; font-size: 17px; }

/* Matriz de permisos por rol */
table.matriz th.c { text-align: center; }
table.matriz th .tenue { font-weight: 400; text-transform: none; letter-spacing: 0; margin-top: 2px; }
table.matriz td.c { text-align: center; }
.perm { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; font-size: 13px; }
.perm-todo { background: var(--ok-bg);    color: var(--ok); font-weight: 700; }
.perm-ver  { background: var(--info-bg);  filter: grayscale(.2); }
.perm-no   { background: transparent;     color: var(--tinta-3); }

.leyenda {
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center;
  padding: 12px 18px; border-top: 1px solid var(--linea);
  font-size: 13px; color: var(--tinta-2);
}
.leyenda > span { display: inline-flex; align-items: center; gap: 7px; }

/* ---- Seguimiento fonoaudiológico --------------------------------------- */

.dos-notas { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }

.etq-interna, .etq-familia {
  display: inline-block; font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  border-radius: 999px; padding: 2px 8px; margin-left: 6px;
}
.etq-interna { background: var(--alerta-bg); color: var(--alerta); }
.etq-familia { background: var(--ok-bg);     color: var(--ok); }

ul.clinico { list-style: none; margin: 0; padding: 0; }
ul.clinico > li { padding: 16px 18px; border-bottom: 1px solid var(--suave); }
ul.clinico > li:last-child { border-bottom: 0; }

.clinico-cabeza { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.clinico-cabeza b { font-family: "Baloo 2", sans-serif; font-size: 15px; }
.clinico-obj { font-size: 14px; color: var(--tinta-2); margin: 8px 0 0; line-height: 1.55; }

/* La nota interna se ve distinta a la de la familia: el borde rojo recuerda
   que ese texto NUNCA sale en el informe. */
.nota { border-radius: 10px; padding: 11px 14px; margin-top: 10px; }
.nota p { margin: 6px 0 0; font-size: 14px; line-height: 1.6; color: var(--tinta-2); }
.nota-interna { background: var(--fondo); border-left: 3px solid var(--alerta); }
.nota-familia { background: var(--ok-bg); border-left: 3px solid var(--ok); }
.nota-familia p { color: var(--tinta); }

/* Columna del propio rol, destacada en la matriz */
table.matriz th.mi-rol, table.matriz td.mi-rol { background: var(--acento-lav); }
table.matriz th.mi-rol { color: var(--acento); }