/* Portal familiar — deltas propios sobre static/css/operativo.css.
   El grueso de los componentes (card-custom, card-familia, btn-modulo,
   badge-estado, chip, btn-primario, app-topbar/side-nav/bottom-nav) se
   reutiliza tal cual del panel operativo: mismos tokens verdes, misma app. */

/* El botón "?" (tour) y "Salir" del topbar reusan .app-topbar__usuario, que
   en operativo.css es siempre un <a>. Acá también aparece como <button>. */
button.app-topbar__usuario {
  font: inherit;
  cursor: pointer;
}

/* Tarjeta de cuota (cuenta corriente): mismo patrón cuerpo+acciones que
   .card-familia (ficha clicable arriba, fila de botones abajo, para no
   anidar un <button>/<a> dentro de otro). */
.cuota-card__cuerpo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .75rem;
  flex-wrap: wrap;
}
.cuota-card__importe {
  font-weight: 800;
  font-family: "Plus Jakarta Sans", Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 1.1rem;
  color: var(--verde-principal);
}
.cuota-card__pendiente { font-size: .85rem; color: var(--gris-secundario); }

/* Accesos rápidos del inicio: botones grandes, mismo componente que
   .btn-modulo/.modulo-grid del panel operativo. El inicio los muestra de a 2
   por línea con la variante .modulo-grid--doble (definida en operativo.css). */

/* Punto rojo en la card de Mensajería del inicio: la institución respondió y
   la familia todavía no abrió la bandeja. Mismo lenguaje visual que el punto
   "sin ver" del panel (.punto-sin-ver en operativo.css). */
.btn-modulo__punto {
  position: absolute; top: .7rem; right: .7rem;
  width: .7rem; height: .7rem; border-radius: 50%;
  background: var(--peligro);
  box-shadow: 0 0 0 3px var(--peligro-borde);
}

/* Bandeja de mensajería del portal: cada conversación es un <details>
   compacto. Cerrado se ve una línea (título + extracto + punto si hay algo
   sin leer); abierto despliega el hilo completo y el cuadro para responder. */
.conv {
  border: 1px solid #e3e9e4; border-radius: var(--radio-tarjeta);
  background: var(--blanco-panel); margin-bottom: .6rem; overflow: hidden;
}
.conv[open] { box-shadow: var(--sombra-tarjeta); }
.conv__resumen {
  display: flex; align-items: center; gap: .55rem;
  padding: .8rem 1rem; cursor: pointer; list-style: none;
}
.conv__resumen::-webkit-details-marker { display: none; }
.conv__resumen:focus-visible { outline: 2px solid var(--verde-principal); outline-offset: -2px; }
.conv__punto {
  flex-shrink: 0; width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--peligro);
}
.conv__fecha { flex-shrink: 0; font-weight: 600; color: var(--verde-principal); font-size: .9rem; }
.conv__extracto {
  flex: 1; min-width: 0; color: var(--gris-secundario); font-size: .82rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.conv__chevron { flex-shrink: 0; color: var(--gris-secundario); transition: transform .15s ease; }
.conv[open] .conv__chevron { transform: rotate(90deg); }
.conv__cuerpo { padding: 0 1rem 1rem; }
.conv__cuerpo .hilo__mensajes { margin-top: .25rem; }
.conv__responder { display: flex; flex-direction: column; gap: .5rem; margin-top: .75rem; }
.conv__responder .btn-primario { align-self: flex-start; }

/* driver.js: paleta institucional en vez del azul por defecto.
   Nombres de clase reales de driver.css (sin ".driverjs-theme": esa clase no
   existe salvo que se declare a mano en la config de driver(), así que se
   apunta directo a las clases base que la librería sí pone). */
.driver-popover {
  border-radius: var(--radio-tarjeta);
}
.driver-popover-title {
  color: var(--verde-principal);
  font-family: "Plus Jakarta Sans", Inter, ui-sans-serif, system-ui, sans-serif;
}
.driver-popover-progress-text {
  color: var(--gris-secundario);
}
.driver-popover-footer-btn {
  background: var(--verde-principal);
  color: #fff;
  text-shadow: none;
  border: none;
  border-radius: var(--radio-pastilla);
  padding: .4rem .9rem;
}
.driver-popover-footer-btn:hover {
  background: var(--verde-secundario);
  color: #fff;
}
.driver-popover-footer-btn.driver-popover-btn-disabled {
  background: #d6dcd8;
  color: var(--gris-secundario);
}
.driver-popover-close-btn {
  color: var(--gris-secundario);
}

/* --- Pagar cuotas desde la cuenta corriente --------------------------------
   Checkbox de selección múltiple + barra de acción fija abajo, y el historial
   de pagos plegado en un <details>. El asistente de pago (pagar_cuota.html)
   reutiliza .wizard-modal / .wizard-paso-cliente de operativo.css. */
.cuota-select {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .9rem;
  border-top: 1px solid #eef2ef;
  font-size: .9rem;
  color: var(--gris-secundario);
  cursor: pointer;
}
.cuota-select input { width: 1.1rem; height: 1.1rem; flex-shrink: 0; }

.barra-pago {
  position: sticky;
  bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  padding: .75rem 1rem;
  background: var(--verde-principal);
  color: #fff;
  border-radius: var(--radio-tarjeta);
  box-shadow: 0 8px 24px -8px rgba(12, 53, 39, .45);
}
.barra-pago__texto { font-weight: 700; }
.barra-pago .btn-primario { background: #fff; color: var(--verde-principal); flex-shrink: 0; }
.barra-pago[hidden] { display: none; }

.pagos-historial > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.pagos-historial > summary::-webkit-details-marker { display: none; }
.pagos-historial > summary::before {
  content: "▸";
  color: var(--gris-secundario);
  transition: transform .15s ease;
}
.pagos-historial[open] > summary::before { transform: rotate(90deg); }
.pagos-historial__titulo {
  font-family: "Plus Jakarta Sans", Inter, ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--verde-principal);
}

/* Pastillas de filtro de cuotas: se reusa .selector-pastillas de operativo.css,
   pero acá las opciones son <a> (navegan con ?filtro=), así que hay que apagar
   el subrayado del link. */
.selector-pastillas__opcion { text-decoration: none; }
.selector-pastillas__opcion.activa { color: #fff; }

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

/* Botones de reacción del detalle de un aviso (❤️ / 👍 / 👎). Toggle: la
   opción elegida queda resaltada; volver a tocarla la limpia (lo hace la
   vista). */
.btn-reaccion {
  font-size: 1.5rem;
  line-height: 1;
  padding: .4rem .7rem;
  background: #fff;
  border: 1px solid #d6dcd8;
  border-radius: 12px;
  cursor: pointer;
}
.btn-reaccion.activa {
  border-color: var(--verde-principal);
  background: var(--menta-pastel);
}

/* Tarjeta de "Avisos" al tope del inicio: se ve primero, y si hay sin leer
   toma el borde de alerta. */
.aviso-destacado { border-left: 4px solid var(--verde-principal); }
.aviso-destacado--nuevo {
  border-color: var(--peligro-borde);
  background: var(--peligro-suave);
}

/* ---------------------------------------------------------------------------
   Asistente de solicitud de vacante (pasos verticales). Cada paso es una
   tarjeta con un número a la izquierda; una línea los conecta. El botón de
   acción va a la derecha. Ver docs/README_PLAN_SOLICITUD_DE_VACANTES.md §3.
--------------------------------------------------------------------------- */
.vac-pasos { display: flex; flex-direction: column; gap: 0; margin: 1rem 0; }
.vac-paso {
  display: grid;
  grid-template-columns: 2.5rem 1fr auto;
  gap: .25rem 1rem;
  align-items: start;
  padding: 1rem 0;
  border-top: 1px solid var(--borde-suave, #e3e7e4);
}
.vac-paso:first-child { border-top: 0; }
.vac-paso__num {
  grid-row: 1 / span 2;
  width: 2.25rem; height: 2.25rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-weight: 700;
  background: #eef1ef; color: var(--gris-secundario);
}
.vac-paso--hecho .vac-paso__num { background: var(--exito-suave); color: var(--verde-secundario); }
.vac-paso--actual .vac-paso__num { background: var(--verde-principal); color: #fff; }
.vac-paso--bloqueado { opacity: .55; }
.vac-paso__titulo { font-weight: 700; margin: 0; }
.vac-paso__desc { margin: .15rem 0 0; font-size: .9rem; color: var(--gris-secundario); }
.vac-paso__accion { grid-row: 1 / span 2; align-self: center; }
@media (max-width: 30rem) {
  .vac-paso { grid-template-columns: 2.25rem 1fr; }
  .vac-paso__accion { grid-column: 1 / -1; grid-row: auto; margin-top: .5rem; }
}
.vac-resultado { border-left: 4px solid var(--verde-principal); }
.vac-resultado--danger { border-left-color: var(--peligro); background: var(--peligro-suave); }
.vac-resultado--secondary { border-left-color: var(--gris-secundario); }
.vac-disclaimer {
  font-size: .85rem; color: var(--gris-secundario);
  background: #f6f8f7; border-radius: 10px; padding: .75rem 1rem; margin-bottom: 1rem;
}