/* Tokens reales del sitio actual de la UAH (docs/08-guia-visual.md), no una paleta inventada. */
:root {
  --uah-naranja: #ef6427;
  --uah-verde: #75fb7e;
  --uah-marengo-1: #111111;
  --uah-marengo-2: #222222;
  --uah-gris-1: #666666;
  --uah-gris-2: #3c3c3c;
  --uah-gris-claro: #cccccc;
  --uah-blanco-2: #f3f2ec;
  --uah-blanco-3: #f0efe9;

  --bs-primary: var(--uah-naranja);
  --bs-primary-rgb: 239, 100, 39;
  --bs-body-color: var(--uah-marengo-1);
  --bs-body-font-family: 'Rubik', sans-serif;
  --bs-border-radius: 0.6rem;
  --bs-border-radius-lg: 1rem;
  --bs-border-radius-pill: 50rem;
  --bs-link-color: var(--uah-marengo-1);
  --bs-link-color-rgb: 17, 17, 17;
  --bs-link-hover-color: var(--uah-naranja);
  --bs-link-hover-color-rgb: 239, 100, 39;

  /* Derivados de los tokens de arriba, no colores nuevos: el borde y la sombra de las tarjetas se
     repetían a mano en cada regla y empezaban a divergir (identidad-visual, regla cero). */
  --uah-borde: #e2e0d8;
  --uah-sombra: 0 1px 3px rgba(17, 17, 17, 0.06);
  --uah-sombra-alta: 0 4px 14px rgba(17, 17, 17, 0.1);
}

body {
  background-color: var(--uah-blanco-2);
}

h1, h2, .titular {
  font-family: 'Frank Ruhl Libre', serif;
}

/* El Bootstrap precompilado del CDN no rearma sus componentes a partir de --bs-primary: cada
   variante de botón trae sus propios --bs-btn-* con el azul de Bootstrap ya fijo en la hoja
   minificada (verificado leyendo el CSS real, no asumido). Sobreescribir --bs-primary en :root no
   alcanza — hay que fijar las variables del propio .btn-primary. Texto siempre marengo, nunca
   blanco: el contraste del naranja de marca da 3.2:1, insuficiente para texto normal
   (docs/08-guia-visual.md, sección Accesibilidad). El borde marengo al pasar el mouse es la misma
   idea que ya usa la insignia "urgente": naranja + borde marengo como estado de énfasis. */
.btn-primary {
  --bs-btn-color: var(--uah-marengo-1);
  --bs-btn-bg: var(--uah-naranja);
  --bs-btn-border-color: var(--uah-naranja);
  --bs-btn-hover-color: var(--uah-marengo-1);
  --bs-btn-hover-bg: var(--uah-naranja);
  --bs-btn-hover-border-color: var(--uah-marengo-1);
  --bs-btn-active-color: var(--uah-marengo-1);
  --bs-btn-active-bg: var(--uah-naranja);
  --bs-btn-active-border-color: var(--uah-marengo-1);
  --bs-btn-disabled-color: var(--uah-marengo-1);
  --bs-btn-disabled-bg: var(--uah-naranja);
  --bs-btn-disabled-border-color: var(--uah-naranja);
}

.btn-outline-primary {
  --bs-btn-color: var(--uah-naranja);
  --bs-btn-border-color: var(--uah-naranja);
  --bs-btn-hover-color: var(--uah-marengo-1);
  --bs-btn-hover-bg: var(--uah-naranja);
  --bs-btn-hover-border-color: var(--uah-naranja);
  --bs-btn-active-color: var(--uah-marengo-1);
  --bs-btn-active-bg: var(--uah-naranja);
  --bs-btn-active-border-color: var(--uah-naranja);
  --bs-btn-disabled-color: var(--uah-naranja);
  --bs-btn-disabled-border-color: var(--uah-naranja);
}

/* ---- Vitrina de ofertas ----------------------------------------------------------------
   Fila horizontal, no cuadrícula de tres columnas: una vitrina de empleo es para escanear
   (identidad-visual, "Densidad correcta"). En una fila el ojo baja por una sola columna de
   títulos; en una cuadrícula tiene que recorrer en zigzag y el plazo de cierre, que es el
   diferenciador del proyecto, queda en una esquina distinta en cada tarjeta. */
.buscador {
  background: #fff;
  border: 1px solid var(--uah-borde);
  border-radius: var(--bs-border-radius-lg);
  box-shadow: var(--uah-sombra);
  padding: 1rem;
}

/* El icono hereda tamaño y color del texto que acompaña: no hay que mantener una paleta ni una
   escala de tamaños aparte para los iconos. */
.icono {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

.card-oferta {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--uah-borde);
  border-radius: var(--bs-border-radius-lg);
  box-shadow: var(--uah-sombra);
  padding: 1rem 1.25rem;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
/* Solo la sombra y el borde cambian al pasar el mouse. Nada se mueve ni escala: mover, escalar y
   cambiar color a la vez es uno de los tics de interfaz generada por IA (identidad-visual). */
.card-oferta:hover {
  box-shadow: var(--uah-sombra-alta);
  border-color: var(--uah-gris-claro);
}
@media (prefers-reduced-motion: reduce) {
  .card-oferta {
    transition: none;
  }
}

/* Ranura del logo de la empresa. Todavía no hay subida de logos: hasta entonces lleva la inicial
   de la razón social, que al menos distingue una empresa de otra al escanear la lista. */
.oferta-logo {
  width: 3.5rem;
  height: 3.5rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--uah-blanco-3);
  border: 1px solid var(--uah-borde);
  border-radius: var(--bs-border-radius);
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 1.5rem;
  color: var(--uah-gris-1);
}
.oferta-logo .icono {
  width: 1.5rem;
  height: 1.5rem;
}

.oferta-cuerpo {
  flex: 1;
  min-width: 0; /* sin esto un título largo sin espacios desborda la fila en vez de cortarse */
}

.oferta-titulo {
  font-family: 'Rubik', sans-serif; /* el titular serif es para la página, no para cada fila */
  font-size: 1.0625rem;
  font-weight: 500;
  margin: 0 0 0.15rem;
  line-height: 1.35;
}
.oferta-titulo a {
  color: var(--uah-marengo-1);
  text-decoration: none;
}
.oferta-titulo a:hover {
  color: var(--uah-naranja);
  text-decoration: underline;
}

.oferta-empresa {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--uah-gris-1);
  margin: 0 0 0.5rem;
}

.oferta-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.8125rem;
  color: var(--uah-gris-2);
}
.oferta-meta li {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.oferta-etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  list-style: none;
  padding: 0;
  margin: 0.6rem 0 0;
}
.etiqueta {
  font-size: 0.75rem;
  padding: 0.15rem 0.6rem;
  border-radius: var(--bs-border-radius-pill);
  background: var(--uah-blanco-3);
  border: 1px solid var(--uah-borde);
  color: var(--uah-gris-2);
}

.oferta-lateral {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.6rem;
  flex-shrink: 0;
}

/* Bajo 576px la fila se apila: con el logo y la columna lateral compitiendo por el ancho, el
   título quedaba en dos palabras por línea. */
@media (max-width: 575.98px) {
  .card-oferta {
    flex-wrap: wrap;
  }
  .oferta-cuerpo {
    flex-basis: calc(100% - 4.5rem);
  }
  .oferta-lateral {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
}

.btn {
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.btn:hover:not(:disabled) {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.btn:active:not(:disabled) {
  transform: scale(0.97);
}

/* Insignia de estado de vigencia de una oferta: el color y el texto van siempre juntos, nunca solo
   uno de los dos (accesibilidad para daltonismo, docs/08-guia-visual.md). */
.estado-oferta {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.3em 0.8em;
  border-radius: var(--bs-border-radius-pill);
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--uah-marengo-1);
}
/* Hasta 2026-09-20 'normal' y 'urgente' compartían el mismo naranja y se distinguían solo por un
   borde de 2px: a un metro de la pantalla eran la misma insignia, y toda la vitrina gritaba por
   igual. La regla ahora es la de identidad-visual: la urgencia es lo ÚNICO que llama la atención en
   una fila. Un plazo cómodo es información, no alarma, así que va neutro; el naranja de marca queda
   reservado para 'cierra pronto'. Cada una lleva además su propio icono (calendario / reloj /
   archivado), porque el color solo no comunica a quien no distingue colores. */
.estado-oferta.normal {
  background: var(--uah-blanco-3);
  border: 1px solid var(--uah-borde);
  color: var(--uah-gris-2);
}
.estado-oferta.urgente {
  background: var(--uah-naranja);
  border: 1px solid var(--uah-naranja);
  font-weight: 600;
}
.estado-oferta.vencida {
  background: var(--uah-gris-claro);
  border: 1px solid var(--uah-gris-claro);
  color: var(--uah-gris-2);
}

/* Insignia de estado de una postulación (docs/08-guia-visual.md, sección "Postulación") — la misma
   idea de "color y texto siempre juntos" de arriba, especificada desde Fase 6 pero nunca aplicada:
   los tres paneles mostraban el estado en texto plano, sin ninguna de estas cinco variantes. */
.estado-postulacion {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.3em 0.8em;
  border-radius: var(--bs-border-radius-pill);
  font-weight: 500;
  font-size: 0.875rem;
}
.estado-postulacion.en-curso {
  background: var(--uah-blanco-3);
  color: var(--uah-marengo-1);
  border: 1px solid var(--uah-gris-claro);
}
.estado-postulacion.seleccionada {
  background: var(--uah-verde);
  color: var(--uah-marengo-1); /* nunca blanco: ~1.3:1 de contraste, ver guía visual */
}
.estado-postulacion.no-seleccionada {
  background: var(--bs-danger);
  color: #fff;
}
.estado-postulacion.sin-respuesta {
  background: var(--uah-gris-claro);
  color: var(--uah-gris-2);
}
.estado-postulacion.retirada {
  background: var(--uah-gris-claro);
  color: var(--uah-gris-1);
  text-decoration: line-through;
}

/* Insignia de estado de validación de una empresa (docs/08-guia-visual.md, sección "Empresa") —
   solo la ve coordinación. Misma lógica de contraste que las de arriba. */
.estado-empresa {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.3em 0.8em;
  border-radius: var(--bs-border-radius-pill);
  font-weight: 500;
  font-size: 0.875rem;
}
.estado-empresa.pendiente {
  background: var(--uah-blanco-3);
  color: var(--uah-marengo-1);
  border: 1px solid var(--uah-gris-claro);
}
.estado-empresa.validada {
  background: var(--uah-verde);
  color: var(--uah-marengo-1);
}
.estado-empresa.rechazada {
  background: var(--bs-danger);
  color: #fff;
}
.estado-empresa.suspendida {
  /* Una suspensión es más grave que un rechazo simple: se marca más oscura, no el mismo rojo
     (docs/08-guia-visual.md) — es la única insignia de este archivo con fondo oscuro y texto claro. */
  background: var(--uah-gris-2);
  color: #fff;
}

/* ---- Panel de contenido -----------------------------------------------------------------
   La caja blanca sobre el fondo hueso que usan las páginas de contenido (perfil de empresa,
   detalle de oferta). Mismo tratamiento que .buscador y .card-oferta: sin esto, el perfil de una
   empresa quedaba como texto suelto sobre el fondo y se leía como una página a medio cargar al
   lado de la vitrina. */
.panel {
  background: #fff;
  border: 1px solid var(--uah-borde);
  border-radius: var(--bs-border-radius-lg);
  box-shadow: var(--uah-sombra);
  padding: 1.5rem;
}

/* Bootstrap no trae esta utilidad y hace falta en cada fila flex con texto largo: sin
   min-width:0 un hijo flex no baja de su ancho de contenido y desborda en vez de cortarse. */
.min-w-0 {
  min-width: 0;
}

/* Indicadores de transparencia (docs/08-guia-visual.md). Cifra grande arriba y etiqueta abajo, no
   una lista de definiciones: son cuatro números que se comparan entre empresas, y en formato de
   lista había que leer cada renglón entero para encontrarlos. */
.indicadores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.75rem;
  margin: 0;
}
.indicador {
  background: var(--uah-blanco-3);
  border: 1px solid var(--uah-borde);
  border-radius: var(--bs-border-radius);
  padding: 0.85rem 1rem;
}
.indicador dt {
  font-size: 0.75rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--uah-gris-1);
  margin-bottom: 0.2rem;
}
.indicador dd {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--uah-marengo-1);
  /* Cifras de ancho fijo: sin esto las columnas de números bailan al comparar una empresa con
     otra, que es justamente para lo que existen estos indicadores. */
  font-variant-numeric: tabular-nums;
}
.indicador .cifra {
  display: block;
  font-size: 1.6rem;
  line-height: 1.15;
}
.indicador .nota {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--uah-gris-1);
  margin-top: 0.15rem;
}

/* El logo llega como lo subió la empresa: apaisado, cuadrado o vertical. object-fit:contain lo
   encuadra sin deformarlo y sin recortarle nada — no procesamos imágenes en el servidor
   (specs/10-logo-de-empresa/spec.md, fuera de alcance), así que el encuadre es trabajo del CSS. */
.oferta-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: inherit;
}