/* Pantallas de error del sistema (400/403/404/429/500): sin sidebar/nav, card centrada en su
   propio shell — mismo patrón que las pantallas de autenticación (auth-shell/auth-card en
   autenticacion.css). Se duplican unas pocas reglas de shell/tamaño en vez de reusar esas
   clases: son familias de pantallas de módulos distintos y este archivo lo linkea base.html
   para TODO el sistema (incluido basePDF.html), así que tiene que quedar autocontenido.

   OJO: la 500 se renderiza vía template.render() sin request (django.views.defaults.server_error),
   así que acá NO puede haber nada que dependa de request.organizacion. El color de marca sí llega:
   base.html emite su :root sólo si hay coloresMarca, y sin él aplica el :root default de
   modern-ui-new.css. */

/* Alto en dvh (viewport visible del celular) con 100vh de fallback, igual que .auth-shell:
   con 100vh a secas la card queda centrada respecto de un alto mayor al que se ve. */
.error-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  text-align: center;
}

.error-card {
  width: 100%;
  max-width: 420px;
  padding: 2.5rem 2rem;
}

.error-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--woker-danger-bg);
  color: var(--woker-danger);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
}

.error-icon .ico { width: 28px; height: 28px; }

/* La 429 no es una falla del sistema sino un límite alcanzado: ámbar en vez de rojo. */
.error-icon.is-warn {
  background: var(--woker-warn-bg);
  color: var(--woker-warn);
}

.error-code {
  font-size: 2.75rem;
  font-weight: 700;
  color: var(--woker-ink);
  margin: 0;
  line-height: 1;
}

/* No toda pantalla de la familia tiene código HTTP (emisor/error_stepper.html es un error de
   negocio, no un status): sin la regla, el <p> vacío deja 44px muertos entre el chip y el título. */
.error-code:empty { display: none; }

.error-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--woker-ink);
  margin: .5rem 0 .75rem;
}

.error-text {
  color: var(--woker-muted);
  font-size: .9rem;
}

.error-text p { margin: 0; }

/* Las pantallas con mensaje + salida (el "volver a la cotización" del emisor) separan los dos
   párrafos; con un solo <p> —el caso de 400/403/404/429/500— la regla no aplica. */
.error-text p + p { margin-top: .75rem; }

.error-text a {
  color: var(--woker-violet);
  font-weight: 500;
}

.error-text a:hover {
  color: var(--woker-violet-hover);
  text-decoration: underline;
}

@media (max-width: 575.98px) {
  .error-card { padding: 1.75rem 1.5rem; }
  .error-code { font-size: 2.25rem; }
}

/* Legacy AdminLTE: el único que todavía usa estas clases es templates/pdf/error_pdf.html
   (emisor/error_stepper.html ya migró a error_base.html). No colisionan con las clases nuevas
   de arriba; se borran cuando migre esa última. */
.error-pagina {
  width: 100%;
}

.error-pagina > .headline {
  float: none;
  text-align: center;
  font-size: 100px;
  font-weight: 300;
}

.error-pagina > .error-content {
  display: block;
  margin-left: 0;
}

.error-pagina > .error-content > h3 {
  font-size: 25px;
  font-weight: 300;
  text-align: center;
}