/* =============================================================================
   Estilos propios del renderizado en servidor
   =============================================================================
   Las ocho hojas restantes de este directorio vienen tal cual de
   frontend/src/**\/*.css y no se tocan: mantenerlas idénticas es lo que
   permite comparar cada vista contra la SPA archivada
   (git checkout archivo/spa-react-v0).

   Aquí van solo las clases que la SPA no necesitaba, porque sus vistas
   mostraban datos inventados y no listas reales: listados de eventos,
   agrupación por campus, avisos de error en página y la pantalla de error.

   Reutilizan las mismas variables y la misma paleta que el resto.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   Listas de registros
   ----------------------------------------------------------------------------- */
.eco-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* La rejilla de dos columnas vive en el elemento que ocupa toda la fila: el
   propio <li> cuando la fila no es navegable, y el enlace cuando sí lo es, de
   modo que en ese caso toda el área sea clicable y no solo el texto. La
   distinción va por clase y no por :has(), que no aporta nada aquí y sí una
   dependencia de soporte del navegador (RNF-COM-001). */
.eco-lista-item,
.eco-lista-item--enlace .eco-lista-enlace {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 16px;
  align-items: center;
  padding: 14px 20px;
  text-decoration: none;
  color: inherit;
}

.eco-lista-item {
  border-top: 1px solid #eeeef2;
}

.eco-lista-item:first-child {
  border-top: none;
}

.eco-lista-item--enlace {
  display: block;
  padding: 0;
}

.eco-lista-enlace:hover {
  background: #fafafd;
}

.eco-lista-principal {
  font-size: 14px;
  font-weight: 500;
  color: #1A1A2E;
}

.eco-lista-secundario {
  grid-column: 1;
  font-size: 12px;
  color: #8E8EA0;
}

.eco-lista-meta {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-size: 12px;
  color: #8E8EA0;
  white-space: nowrap;
}


/* -----------------------------------------------------------------------------
   Agrupación por campus (vista de mapa)
   ----------------------------------------------------------------------------- */
.eco-campus-lista {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 20px;
  width: 100%;
}

.eco-campus-titulo {
  font-size: 14px;
  font-weight: 600;
  color: #1A1A2E;
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}


/* -----------------------------------------------------------------------------
   Aviso de error dentro de una página
   ----------------------------------------------------------------------------- */
.eco-aviso {
  margin: 0 0 20px;
  padding: 12px 16px;
  border: 1px solid #F5C6C6;
  border-left: 3px solid #C62828;
  border-radius: 8px;
  background: #FDF3F3;
  color: #8E2B2B;
  font-size: 13px;
}


/* -----------------------------------------------------------------------------
   Pantalla de error (404, 403, 405, 500)
   ----------------------------------------------------------------------------- */
.eco-error {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
  background: #F7F7FB;
}

.eco-error-caja {
  max-width: 440px;
  padding: 40px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  text-align: center;
}

.eco-error-codigo {
  display: block;
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  color: #002D72;
}

.eco-error-titulo {
  font-size: 20px;
  margin: 12px 0 8px;
  color: #1A1A2E;
}

.eco-error-mensaje {
  font-size: 14px;
  color: #6B6375;
  margin-bottom: 24px;
}

.eco-error-enlace {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 8px;
  background: #002D72;
  color: #fff;
  font-size: 14px;
  text-decoration: none;
}

.eco-error-enlace:hover {
  background: #00224F;
}

/* Variantes del aviso. La base es de error; el éxito necesita otro color, y la
   diferencia no puede ser solo el color: cada mensaje lleva además su texto y
   su `role` (RNF-USA-002, WCAG 2.1 AA). */
.eco-aviso--exito {
  border-color: #B7E4D3;
  border-left-color: #0E8A6E;
  background: #F1FAF7;
  color: #0B5A48;
}

.eco-aviso--error {
  border-color: #F5C6C6;
  border-left-color: #C62828;
  background: #FDF3F3;
  color: #8E2B2B;
}

/* Barra de filtros de consulta (RF-CON-001).
   Se apoya en `.input-field` y `.login-button`, que ya existen: un filtro no
   necesita controles propios, y reutilizarlos es lo que hace que el formulario
   se vea igual que el de administración. El grid colapsa a una columna en
   pantalla estrecha para no obligar al desplazamiento horizontal. */
.filtros {
  margin-bottom: 20px;
  padding: 16px 20px;
  border: 1px solid #E4E4EF;
  border-radius: 12px;
  background: #fff;
}

.filtros-grid {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) repeat(2, minmax(140px, 1fr)) auto;
  gap: 16px;
  align-items: end;
}

.filtros-campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.filtros-acciones {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* Los botones de la barra no ocupan el ancho completo como en el login, donde
   son la única acción de la pantalla. */
.filtros-acciones .login-button {
  width: auto;
  margin: 0;
  padding: 10px 20px;
  white-space: nowrap;
  text-align: center;
  text-decoration: none;
}

@media (max-width: 820px) {
  .filtros-grid {
    grid-template-columns: 1fr;
  }

  .filtros-acciones .login-button {
    flex: 1;
  }
}

/* Registro de auditoría (INF-006).
   Cinco filtros no caben en el grid de tres de la consulta de eventos, así que
   esta variante deja que se repartan solos según el ancho disponible. */
.filtros-grid--auditoria {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.auditoria-conteo {
  margin: 0 0 4px;
  padding: 14px 20px 0;
  color: #4A4A68;
  font-size: 13px;
}

/* Cada entrada apila su cabecera y sus dos desplegables de valores, en lugar
   de la fila de una sola línea del resto de listas. */
.auditoria-fila {
  flex-wrap: wrap;
}

.auditoria-id {
  padding: 1px 6px;
  border-radius: 4px;
  background: #F1F1F6;
  color: #4A4A68;
  font-size: 12px;
}

.auditoria-valores {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
  margin-top: 8px;
}

.auditoria-valores .admin-detalle {
  flex: 1 1 260px;
  min-width: 0;
}

/* El JSON de un valor anterior puede ser ancho. Se desplaza dentro de su caja
   en vez de estirar la página, que es lo que exige RNF-COM-001. */
.auditoria-valores .admin-json {
  overflow-x: auto;
  max-width: 100%;
}

.auditoria-paginacion {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 16px 20px;
  border-top: 1px solid #E4E4EF;
}

.auditoria-paginacion .login-button {
  width: auto;
  margin: 0;
  padding: 8px 18px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.auditoria-pagina-actual {
  color: #4A4A68;
  font-size: 13px;
}

/* Enlace de botón dentro de un párrafo de ayuda: mismo color y forma que
   `.eco-error-enlace`, pero al tamaño del texto que lo rodea. */
.eco-enlace-en-linea {
  padding: 4px 12px;
  font-size: 13px;
  vertical-align: baseline;
}


/* -----------------------------------------------------------------------------
   Comparativo línea base vs. intervención (RF-CMP-001)
   ----------------------------------------------------------------------------- */
/* El signo de la diferencia se lee antes que la cifra, y en este piloto una
   bajada es el resultado buscado. El color acompaña al signo, que ya va escrito
   con «+» o «−»: quien no distinga los colores lo lee igual (RNF-USA-002). */
.eco-delta--baja {
  color: #2E7D32;
}

.eco-delta--sube {
  color: #C62828;
}