/* ============================================================================
   avisos.css — Los diálogos y notas de EURECA (ver assets/js/avisos.js).

   Uno solo para los cuatro paneles: estudiante, instructor, administrador y
   empresa. Antes cada zona heredaba el diálogo del navegador, que se veía igual
   de ajeno en las cuatro; ahora se ve igual de propio en las cuatro.

   El radio y el verde salen de los tokens con valor de reserva, así el
   componente funciona aunque se cargue en una página que no traiga la hoja de
   tokens (los correos, una vista suelta) en vez de quedarse sin estilo.
   ========================================================================== */
.zvc {
  position: fixed; inset: 0; z-index: 9000;
  display: grid; place-items: center; padding: clamp(1rem, 4vw, 2rem);
  background: rgba(9, 15, 30, .55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: zvcFondo .14s ease both;
}
.zvc[hidden] { display: none; }
/* Con el aviso abierto la página de detrás no se desplaza: si se mueve, el
   usuario cree que puede seguir usándola. */
.zvc-abierto, .zvc-abierto body { overflow: hidden; }

.zvc__card {
  width: min(440px, 100%);
  background: #fff; color: #0D1B33;
  border-radius: var(--radio, 12px);
  padding: 1.7rem 1.5rem 1.35rem; text-align: center;
  box-shadow: 0 24px 60px rgba(5, 10, 25, .35);
  animation: zvcEntra .18s cubic-bezier(.2, .8, .3, 1) both;
}

.zvc__ic {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto .85rem;
  display: grid; place-items: center;
  background: #EAF6EF; color: var(--verde, #16A34A);
}
.zvc__ic svg { width: 26px; height: 26px; }
.zvc__card--peligro .zvc__ic { background: #FDECEC; color: #C81E1E; }

.zvc__tit {
  font-family: var(--font-display, inherit); font-weight: 700;
  font-size: 1.18rem; line-height: 1.3; letter-spacing: -.01em;
  margin: 0 0 .4rem; color: #0D1B33;
}
.zvc__txt {
  margin: 0 0 .35rem; font-size: .88rem; line-height: 1.55; color: #5B6B84;
  /* El texto de la confirmación puede traer saltos de línea escritos a mano. */
  white-space: pre-line;
}
.zvc__txt[hidden] { display: none; }
.zvc__nota {
  margin: .7rem 0 0; font-size: .8rem; font-weight: 600; color: #8A5A00;
  background: #FEF6E7; border-radius: 8px; padding: .5rem .7rem;
}
.zvc__nota[hidden] { display: none; }

.zvc__btns { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-top: 1.2rem; }
.zvc__b[hidden] { display: none; }
/* Aviso de un solo botón (zvAviso): el icono es informativo, no una advertencia,
   y el azul lo separa de la pregunta verde y del peligro rojo. */
.zvc__ic--info { background: #E8F0FB; color: #1C3984; }
.zvc__b {
  font: inherit; font-weight: 700; font-size: .88rem;
  padding: .62rem 1.25rem; border-radius: var(--radio-pill, 999px);
  border: 1.5px solid transparent; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.zvc__b:focus-visible { outline: 2px solid var(--verde, #16A34A); outline-offset: 2px; }
/* Cancelar es el botón de contorno y va PRIMERO en el DOM: es donde arranca el
   foco, para que un Enter por inercia no confirme un borrado. Visualmente queda
   a la izquierda, que es donde se busca la salida. */
.zvc__b--no { background: #fff; border-color: #CBD5E1; color: #334155; }
.zvc__b--no:hover { border-color: #94A3B8; background: #F8FAFC; }
.zvc__b--ok { background: var(--verde, #16A34A); color: #fff; }
.zvc__b--ok:hover { background: var(--verde-700, #15803D); }
.zvc__card--peligro .zvc__b--ok { background: #DC2626; }
.zvc__card--peligro .zvc__b--ok:hover { background: #B91C1C; }

@keyframes zvcFondo { from { opacity: 0; } to { opacity: 1; } }
@keyframes zvcEntra { from { transform: translateY(12px) scale(.985); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .zvc, .zvc__card { animation: none; }
}

/* En pantallas estrechas los botones ocupan la fila entera: un botón de 1.25rem
   de relleno en un teléfono es un blanco pequeño para el pulgar. */
@media (max-width: 380px) {
  .zvc__btns { flex-direction: column-reverse; }
  .zvc__b { width: 100%; }
}

/* ============================================================================
   Notas pasajeras (zvNota) — lo que NO merece detener la página.

   Un `alert()` para «la IA no está disponible» obliga a leer y a hacer clic por
   algo que no cambia lo que se estaba haciendo. Esto se asoma en una esquina,
   deja seguir trabajando y se va solo.
   ========================================================================== */
.zvn {
  position: fixed; z-index: 9100;
  right: clamp(.7rem, 2vw, 1.2rem); bottom: clamp(.7rem, 2vw, 1.2rem);
  display: flex; flex-direction: column; gap: .5rem;
  width: min(380px, calc(100vw - 1.4rem));
  /* El contenedor no debe robar clics a la página que hay debajo; cada nota sí
     los acepta, para poder cerrarla. */
  pointer-events: none;
}
.zvn__it {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: .6rem;
  background: #0F1B2E; color: #E8EDF5;
  border-radius: var(--radio, 12px); padding: .7rem .7rem .7rem .9rem;
  box-shadow: 0 12px 32px rgba(5, 10, 25, .3);
  font-size: .86rem; line-height: 1.45;
  border-left: 4px solid #64748B;
  animation: zvnEntra .2s cubic-bezier(.2, .8, .3, 1) both;
}
.zvn__it--ok    { border-left-color: var(--verde, #16A34A); }
.zvn__it--error { border-left-color: #EF4444; }
.zvn__it--info  { border-left-color: #60A5FA; }
.zvn__t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.zvn__x {
  flex: none; width: 22px; height: 22px; border: 0; border-radius: 6px;
  background: transparent; color: #93A3BC; font-size: 1.1rem; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
}
.zvn__x:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.zvn__it.is-sale { animation: zvnSale .2s ease both; }

@keyframes zvnEntra { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes zvnSale  { to { transform: translateY(6px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .zvn__it, .zvn__it.is-sale { animation: none; }
}

/* En el teléfono van arriba: abajo se las come el teclado y la barra del
   navegador, que es justo donde aparecen al enviar un formulario. */
@media (max-width: 560px) {
  .zvn { top: clamp(.7rem, 2vw, 1.2rem); bottom: auto; left: .7rem; right: .7rem; width: auto; }
  @keyframes zvnEntra { from { transform: translateY(-10px); opacity: 0; } to { transform: none; opacity: 1; } }
}