/* ==========================================================================
   EduTrack — Módulo «Pre-faltas». Ver docs/PREFALTAS.md.

   Solo lo propio de este módulo. El FORMULARIO no tiene estilos aquí a propósito: reusa las
   clases .disc-* de app.css, porque el colegio pidió «el mismo form» que el de disciplina y un
   juego paralelo de estilos garantizaría que algún día se vean distintos.
   Lo que sí es nuevo: el tablero (.pf-*) y la lista de adjuntos.
   ========================================================================== */

/* ---- El chip de la ficha del estudiante ---- */
/* Deliberadamente NO rojo: al lado vive «Añadir falta de disciplina», que sí es un registro
   formal y visible para la familia. Si los dos fueran rojos, un docente apurado confundiría
   la herramienta interna con la que le llega a la casa. */
.pref-btn { display: inline-flex; align-items: center; gap: 7px; background: #eef2ff;
  color: #3730a3; font-size: 12.5px; font-weight: 700; padding: 8px 14px; border-radius: 8px;
  border: none; cursor: pointer; white-space: nowrap; transition: background .13s ease; }
.pref-btn:hover { background: #e0e7ff; }
.pref-btn:focus-visible { outline: 2px solid #3730a3; outline-offset: 2px; }

/* ---- Tarjeta y cabecera ---- */
.pf-card { margin: 24px; background: #fff; border: 1px solid var(--line-soft);
  border-radius: 12px; overflow: hidden; }

.pf-head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; padding: 20px 22px 14px; }
.pf-title { margin: 0; font-size: 18px; font-weight: 700; color: var(--ink); }
.pf-sub { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); }
/* El recordatorio de que esto no lo ven las familias va en el color de marca: es la propiedad
   que define la herramienta, no una nota al pie. */
.pf-sub b { color: var(--brand); font-weight: 700; }

.pf-search { flex: 1 1 260px; max-width: 340px; border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 12px; font: inherit; font-size: 13px;
  color: var(--ink); background: #fff; outline: none; transition: border-color .15s; }
.pf-search:focus { border-color: var(--brand); }

/* ---- Pestañas de estado ---- */
.pf-tabs { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 22px 14px;
  border-bottom: 1px solid var(--line-soft); }
.pf-tab { border: 1px solid var(--line); background: #fff; color: var(--ink-3);
  font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 13px;
  border-radius: 999px; cursor: pointer; transition: background .13s, border-color .13s; }
.pf-tab:hover { background: var(--row-hover); }
.pf-tab.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }
.pf-tab:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.pf-vacio { margin: 0; padding: 40px 22px; text-align: center;
  font-size: 13.5px; color: var(--muted); }

/* ---- Tabla ---- */
/* overflow-x propio: con 8 columnas la tabla se pasa de ancho en un portátil, y la alternativa
   —recortar columnas— escondería justo el texto de la infracción. */
.pf-tablewrap { overflow-x: auto; }
.pf-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pf-table th { text-align: left; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--muted); padding: 12px 14px; white-space: nowrap;
  border-bottom: 1px solid var(--line-soft); }
.pf-table td { padding: 11px 14px; border-bottom: 1px solid var(--line-soft);
  color: var(--ink); vertical-align: top; }
.pf-table tbody tr { cursor: pointer; transition: background .1s; }
.pf-table tbody tr:hover { background: var(--row-hover); }
.pf-table tbody tr:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.pf-nowrap { white-space: nowrap; }
/* La infracción es la columna larga: se le da cuerda y se le quita a las demás. */
.pf-falta { min-width: 220px; max-width: 360px; }

/* ---- Insignia de estado ---- */
.pf-est { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 3px 9px;
  border-radius: 999px; white-space: nowrap; letter-spacing: .2px; }
.pf-est--abierta  { background: #fef3c7; color: #92400e; }
.pf-est--revision { background: #dbeafe; color: #1e40af; }
.pf-est--cerrada  { background: #e8e8e8; color: #4b4b4b; }
.pf-clip { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px;
  font-size: 11px; color: var(--muted); white-space: nowrap; vertical-align: middle; }

/* ---- Eliminadas ---- */
.pf-est--borrada { background: #f3f4f6; color: #6b7280; text-decoration: line-through; }

.pf-borrada { background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px;
  padding: 10px 12px; margin-bottom: 14px; font-size: 12.5px; color: #7f1d1d; }
.pf-borrada b { font-weight: 700; }
.pf-borrada .pf-pre { margin-top: 6px; font-size: 12.5px; }

/* Eliminar no es la acción principal: se ofrece en texto rojo sobre el botón fantasma, y solo
   el botón de CONFIRMAR es rojo sólido. Un botón rojo lleno en el pie invitaría a tocarlo. */
.pf-danger { color: var(--danger); }
.pf-danger:hover { border-color: var(--danger); }
.pf-danger-solid { background: var(--danger); border-color: var(--danger); }
.pf-danger-solid:hover { background: #a02a11; border-color: #a02a11; }

.pf-dfoot--confirm { display: block; }
.pf-confirm { display: flex; flex-direction: column; gap: 10px; }
.pf-confirm-tx { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.pf-confirm-btns { display: flex; justify-content: flex-end; gap: 10px; }

/* ---- Adjuntos (formulario y detalle) ---- */
.pf-adj-list { display: flex; flex-direction: column; gap: 6px; }
.pf-adj-it { display: flex; align-items: center; gap: 9px; width: 100%;
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px;
  background: #fff; font-size: 12.5px; color: var(--ink); text-align: left; }
.pf-adj-it--link { cursor: pointer; font: inherit; font-size: 12.5px;
  transition: background .13s, border-color .13s; }
.pf-adj-it--link:hover { background: var(--row-hover); border-color: var(--brand); }
.pf-adj-it--link:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.pf-adj-ic { display: flex; flex: none; width: 18px; height: 18px; }
.pf-adj-ic svg { width: 100%; height: 100%; }
/* min-width:0 para que el nombre largo se recorte en vez de empujar el tamaño fuera de la caja. */
.pf-adj-nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-adj-sz { flex: none; font-size: 11px; color: var(--muted); }
.pf-adj-x { flex: none; border: none; background: none; cursor: pointer; color: var(--muted);
  font-size: 18px; line-height: 1; padding: 0 2px; }
.pf-adj-x:hover { color: var(--danger); }
.pf-adj-add { align-self: flex-start; margin-top: 6px; border: 1px dashed var(--line);
  background: #fff; color: var(--ink-3); font: inherit; font-size: 12.5px; font-weight: 600;
  padding: 7px 12px; border-radius: 8px; cursor: pointer; transition: border-color .13s, color .13s; }
.pf-adj-add:hover { border-color: var(--brand); color: var(--brand); }

/* ---- Cuadrícula por estudiante ---- */
.pf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px; padding: 18px 22px 22px; }

.pf-scard { display: flex; flex-direction: column; align-items: center; gap: 8px;
  border: 1px solid var(--line-soft); border-radius: 14px; padding: 18px 14px 14px;
  background: #fff; font: inherit; text-align: center; cursor: pointer;
  transition: border-color .15s, box-shadow .15s; }
.pf-scard:hover { border-color: #bbb; box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.pf-scard:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.pf-scard-nm { font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.pf-scard-meta { font-size: 11.5px; color: var(--muted); }

/* Una sola clase para la foto y para el monograma, con un modificador: es el idioma del repo
   (.card-av + .mono-av en app.css, .bully-row-avatar + .mono). Al llegar la foto se le quita
   --mono y se le mete el <img> dentro, sin cambiar el tamaño ni la forma. */
.pf-av { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; flex: none;
  background: var(--chip); display: block; }
.pf-av--mono { display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 20px; font-weight: 700; }
.pf-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-av--lg { width: 84px; height: 84px; font-size: 26px; }

/* ---- Los tres contadores ---- */
.pf-cats { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; margin-top: 2px; }
.pf-cat { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px;
  border-radius: 999px; font-size: 11.5px; font-weight: 700; line-height: 1; }
/* Los mismos tres colores que el tablero de disciplina (app.css:1059-1061). No se inventan
   otros: el mismo dato no puede tener dos códigos de color en el mismo sistema. */
.pf-cat--academia    { background: oklch(0.93 0.03 250); color: oklch(0.35 0.1 250); }
.pf-cat--disciplina  { background: oklch(0.93 0.03 18);  color: oklch(0.35 0.12 18); }
.pf-cat--convivencia { background: oklch(0.93 0.03 160); color: oklch(0.35 0.1 160); }
/* Las categorías en cero se atenúan en vez de ocultarse: así todas las tarjetas tienen la misma
   forma y la cuadrícula se recorre de un vistazo, en vez de leerse tarjeta por tarjeta. */
.pf-cat.is-cero { background: var(--gray-50, #f5f5f5); color: #b4b4b4; }

/* ---- Historial de un estudiante ---- */
.pf-hist-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.pf-hist-nm { margin: 0 0 2px; font-size: 15px; font-weight: 700; color: var(--ink); }
.pf-hist-head .pf-cats { justify-content: flex-start; margin-top: 8px; }
.pf-hist-list { display: flex; flex-direction: column; gap: 6px; }
.pf-hist-it { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  border: 1px solid var(--line-soft); border-radius: 9px; padding: 9px 12px; background: #fff;
  font: inherit; font-size: 12.5px; color: var(--ink); cursor: pointer;
  transition: border-color .13s, background .13s; }
.pf-hist-it:hover { background: var(--row-hover); border-color: #bbb; }
.pf-hist-it:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.pf-hist-f { flex: none; color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.pf-hist-tx { flex: 1; min-width: 0; }

/* ---- Detalle ---- */
.pf-detalle .disc-student-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pf-dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; font-size: 13px; }
.pf-dl dt { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--muted); padding-top: 2px; white-space: nowrap; }
.pf-dl dd { margin: 0; color: var(--ink); }
/* Las observaciones y el follow up se escriben con saltos de línea; sin esto se ven como un
   párrafo corrido y se pierde el sentido de lo que el docente separó. */
.pf-pre { white-space: pre-wrap; margin: 0; }

.pf-bloque { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.pf-h4 { margin: 0 0 8px; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--muted); }
.pf-fu-ro { font-size: 13px; color: var(--ink); }
.pf-meta { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.pf-mini { margin-top: 8px; }
.pf-estsel { width: auto; min-width: 150px; }

@media (max-width: 720px) {
  .pf-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); padding: 14px 16px 18px; }
  .pf-hist-head { gap: 12px; }
  .pf-card { margin: 14px; }
  .pf-head, .pf-tabs { padding-left: 16px; padding-right: 16px; }
  .pf-search { max-width: none; }
  .pf-dl { grid-template-columns: 1fr; gap: 2px 0; }
  .pf-dl dd { margin-bottom: 10px; }
}