/* css/app.css */
/* Estilos compartidos entre ambos entry points */
/* REGLA: todos los colores via var(--usj-*), NUNCA hardcoded */
/* Orden de carga: Bootstrap CDN -> tokens.css -> este archivo */

/* ===================================================
   TIPOGRAFIA GLOBAL
   =================================================== */

/* Instrument Sans como unica fuente de la plataforma */
/* Decision del usuario confirmada en CONTEXT.md */
/* Solo existe --usj-fuente-principal — NO usar --usj-fuente-titulos ni --usj-fuente-cuerpo */

h1, h2, h3, h4, h5, h6,
body, input, button, select, textarea {
  font-family: var(--usj-fuente-principal);
}

h1, h2, h3 {
  font-weight: 700;
  color: var(--usj-texto-primario);
  line-height: 1.2;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }

/* ===================================================
   BADGES DE ESTADO
   Componente: components/badge.js
   7 estados: pre-aprobada, pendiente, rechazada, en_revision, subsanando, escalada, borrador
   =================================================== */

.badge-estado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--usj-radio-badge);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  font-family: var(--usj-fuente-principal);
  white-space: nowrap;
}

.badge-estado::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: currentColor;
  flex-shrink: 0;
}

.badge--pre-aprobada {
  background-color: var(--usj-pre-aprobado-bg);
  color: var(--usj-pre-aprobado);
}

.badge--pendiente {
  background-color: var(--usj-pendiente-bg);
  color: var(--usj-pendiente);
}

.badge--rechazada {
  background-color: var(--usj-rechazado-bg);
  color: var(--usj-rechazado);
}

.badge--en-revision {
  background-color: var(--usj-info-bg);
  color: var(--usj-info);
}

.badge--subsanando {
  background-color: var(--usj-pendiente-bg);
  color: var(--usj-pendiente);
}

.badge--escalada {
  background-color: var(--usj-escalada-bg);
  color: var(--usj-escalada);
}

.badge--borrador {
  background-color: var(--usj-fondo-superficie);
  color: var(--usj-texto-secundario);
}

/* ===================================================
   BOTONES
   Componente: components/boton.js
   Variantes: primario, secundario, peligro, fantasma
   Alto: 48px, radio: 12px, padding: 0 24px
   =================================================== */

.btn-usj {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--usj-alto-boton);
  min-width: var(--usj-min-ancho-boton);
  padding: 0 24px;
  border-radius: var(--usj-radio-boton);
  font-family: var(--usj-fuente-principal);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  text-decoration: none;
  white-space: nowrap;
}

.btn-usj:disabled,
.btn-usj[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Variante: primario — fondo morado, texto blanco */
.btn-usj--primario {
  background-color: var(--usj-primario);
  color: var(--usj-texto-blanco);
  border-color: var(--usj-primario);
}

.btn-usj--primario:hover:not(:disabled) {
  box-shadow: var(--usj-sombra-boton);
  background-color: var(--usj-primario-900);
  border-color: var(--usj-primario-900);
  color: var(--usj-texto-blanco);
}

/* Variante: secundario — borde morado, texto morado, sin fondo */
.btn-usj--secundario {
  background-color: transparent;
  color: var(--usj-primario);
  border-color: var(--usj-primario);
}

.btn-usj--secundario:hover:not(:disabled) {
  background-color: var(--usj-primario-ultra);
  box-shadow: var(--usj-sombra-boton);
  color: var(--usj-primario);
}

/* Variante: peligro — fondo rojo, texto blanco */
.btn-usj--peligro {
  background-color: var(--usj-peligro);
  color: var(--usj-texto-blanco);
  border-color: var(--usj-peligro);
}

.btn-usj--peligro:hover:not(:disabled) {
  background-color: var(--usj-rechazado);
  border-color: var(--usj-rechazado);
  color: var(--usj-texto-blanco);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

/* Variante: fantasma — sin fondo ni borde, texto coloreado */
.btn-usj--fantasma {
  background-color: transparent;
  color: var(--usj-primario);
  border-color: transparent;
  min-width: auto;
  padding: 0 12px;
}

.btn-usj--fantasma:hover:not(:disabled) {
  background-color: var(--usj-primario-ultra);
  color: var(--usj-primario);
}

/* ===================================================
   CHIPS DE FILTRO
   Componente: components/chip.js
   Alto: 36px, radio: 18px (pill), padding: 0 16px
   =================================================== */

.chip-filtro {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--usj-alto-chip);
  padding: 0 16px;
  border-radius: var(--usj-radio-chip);
  font-family: var(--usj-fuente-principal);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--usj-borde);
  background-color: var(--usj-fondo-superficie);
  color: var(--usj-texto-secundario);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}

.chip-filtro:hover {
  background-color: var(--usj-primario-claro);
  color: var(--usj-primario);
  border-color: var(--usj-primario-claro);
}

/* Estado activo: fondo morado suave, texto morado */
.chip-filtro--activo {
  background-color: var(--usj-primario-claro);
  color: var(--usj-primario);
  border-color: var(--usj-primario-claro);
  font-weight: 600;
}

.chip-filtro--activo:hover {
  background-color: var(--usj-primario-400);
  color: var(--usj-texto-blanco);
  border-color: var(--usj-primario-400);
}

/* ===================================================
   MODAL OVERRIDES
   Componente: components/modal.js
   Radio: 16px, padding: 32px, sombra del token
   Bootstrap Modal se encarga de accessibility y behavior
   =================================================== */

.modal-content {
  border-radius: var(--usj-radio-modal) !important;
  border: none;
  box-shadow: var(--usj-sombra-modal);
  font-family: var(--usj-fuente-principal);
}

.modal-header {
  padding: 24px 32px 16px;
  border-bottom: 1px solid var(--usj-borde);
}

.modal-title {
  font-family: var(--usj-fuente-principal);
  font-weight: 700;
  color: var(--usj-texto-primario);
  font-size: 1.1rem;
}

.modal-body {
  padding: 24px 32px;
  color: var(--usj-texto-primario);
  font-size: 15px;
  line-height: 1.6;
}

.modal-footer {
  padding: 16px 32px 24px;
  border-top: 1px solid var(--usj-borde);
  gap: 12px;
  justify-content: flex-end;
}

/* Botón de cierre del modal — override de Bootstrap */
.modal-header .btn-close {
  opacity: 0.5;
  transition: opacity 0.15s ease;
}

.modal-header .btn-close:hover {
  opacity: 1;
}

/* ===================================================
   HEADER DE LA APLICACION
   Componente: components/header.js
   Sticky, z-index 1000
   --backoffice: fondo navy, --estudiante: fondo primario
   =================================================== */

.header-app {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: 64px;
  display: flex;
  align-items: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

/* Backoffice: fondo blanco segun mockup 2.1 */
.header-app--backoffice {
  background-color: var(--usj-fondo-card);
  box-shadow: none;
  border-bottom: 1px solid var(--usj-borde);
}

/* Estudiante: fondo morado primario — textos e iconos en blanco para contraste */
.header-app--estudiante {
  background-color: var(--usj-primario);
}

.header-app--estudiante .header-app__page-title {
  color: rgba(255, 255, 255, 0.85);
}

.header-app--estudiante .header-app__divider {
  background: rgba(255, 255, 255, 0.3);
}

.header-app--estudiante .header-app__bell-wrap i {
  color: rgba(255, 255, 255, 0.9) !important;
}

.header-app--estudiante .header-app__avatar {
  background: rgba(255, 255, 255, 0.2);
  color: var(--usj-texto-blanco);
}

.header-app--estudiante .header-app__nombre {
  color: var(--usj-texto-blanco);
}

/* Contenedor interno del header */
.header-app__contenedor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 32px;
  gap: 12px;
}

/* ── Header mockup 2.1: left + right layout ── */
.header-app__left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-app__right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Logo USANJOSÉ */
.header-app__logo {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: opacity 0.15s ease;
}

.header-app__logo:hover {
  opacity: 0.85;
}

.header-app__logo img {
  display: block;
}

/* Divider vertical */
.header-app__divider {
  width: 1px;
  height: 24px;
  background: var(--usj-borde);
}

/* Page title */
.header-app__page-title {
  font-family: var(--usj-fuente-principal);
  font-size: 16px;
  font-weight: 500;
  color: var(--usj-texto-secundario);
  white-space: nowrap;
}

/* Bell icon with badge */
.header-app__bell-wrap {
  position: relative;
  width: 28px;
  height: 28px;
  cursor: pointer;
}

.header-app__bell-wrap i {
  position: absolute;
  top: 4px;
  left: 4px;
}

.header-app__bell-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  border-radius: 9px;
  background: var(--usj-rechazado);
  color: var(--usj-texto-blanco);
  font-family: var(--usj-fuente-principal);
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Avatar circular */
.header-app__avatar {
  width: 36px;
  height: 36px;
  border-radius: 18px;
  background: var(--usj-primario);
  color: var(--usj-texto-blanco);
  font-family: var(--usj-fuente-principal);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.header-app__nombre {
  font-family: var(--usj-fuente-principal);
  font-size: 14px;
  font-weight: 500;
  color: var(--usj-texto-primario);
}

/* ── Legacy nav/user styles for estudiante header ── */
.header-app__nav {
  flex: 1;
  display: flex;
  justify-content: center;
}

.header-app__nav-lista {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.header-app__nav-link {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.header-app__nav-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--usj-texto-blanco);
}

.header-app__nav-link--activo {
  background-color: rgba(255, 255, 255, 0.15);
  color: var(--usj-texto-blanco);
  font-weight: 600;
}

.header-app__usuario {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}

.header-app__btn-salir {
  color: rgba(255, 255, 255, 0.75);
  min-width: auto;
  height: 36px;
  font-size: 13px;
}

.header-app__btn-salir:hover:not(:disabled) {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--usj-texto-blanco);
}

/* Chip fecha especial */
.chip-filtro--fecha {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* ===================================================
   HEADER WIZARD (Mockup 1.4)
   Componente: components/header.js — crearHeaderWizard()
   Solo para el wizard de postulacion — header simplificado
   =================================================== */

.header-wizard {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: var(--usj-landing-medio);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.header-wizard__contenedor {
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-wizard__info {
  flex: 1;
  min-width: 0;
}

.header-wizard__linea-superior {
  display: flex;
  align-items: center;
}

.header-wizard__izquierda {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.header-wizard__titulo {
  font-family: var(--usj-fuente-principal);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--usj-texto-blanco);
}

.header-wizard__fecha {
  font-family: var(--usj-fuente-principal);
  font-weight: 400;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}

.header-wizard__derecha {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-wizard__logo {
  height: 52px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}

.header-wizard__acciones {
  display: flex;
  align-items: center;
}

.header-wizard__linea-inferior {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.header-wizard__icono-usuario {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.7);
}

.header-wizard__datos-usuario {
  font-family: var(--usj-fuente-principal);
  font-weight: 400;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
}

/* ===================================================
   UTILIDADES GENERALES
   =================================================== */

/* Contenedor de pagina */
.pagina-contenedor {
  min-height: calc(100vh - 64px);
  background-color: var(--usj-fondo-pagina);
}

/* Cards */
.card-usj {
  background-color: var(--usj-fondo-card);
  border-radius: var(--usj-radio-card);
  box-shadow: var(--usj-sombra-card);
  border: 1px solid var(--usj-borde);
  padding: 20px;
}

/* Input override — altura y radio del design system */
.form-control,
.form-select {
  height: var(--usj-alto-input);
  border-radius: var(--usj-radio-input) !important;
  border-color: var(--usj-borde);
  font-family: var(--usj-fuente-principal);
  font-size: 15px;
  color: var(--usj-texto-primario);
  background-color: var(--usj-fondo-card);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--usj-primario);
  box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.15);
  outline: none;
}

/* Textarea tiene altura variable, solo sobreescribir el min */
textarea.form-control {
  height: auto;
  min-height: calc(var(--usj-alto-input) * 2.5);
  resize: vertical;
}

/* Labels de formulario */
.form-label {
  font-family: var(--usj-fuente-principal);
  font-weight: 500;
  font-size: 14px;
  color: var(--usj-texto-primario);
  margin-bottom: 6px;
}

/* Texto de error en formularios */
.form-error {
  font-size: 13px;
  color: var(--usj-peligro);
  margin-top: 4px;
}

/* Divisor */
.divisor {
  border: none;
  border-top: 1px solid var(--usj-borde);
  margin: 24px 0;
}

/* ===================================================
   SKIP LINK — WCAG 2.4.1
   Oculto off-screen por defecto, visible al recibir foco con Tab
   Anti-patron prevenido: NO usar display:none (screen readers lo ignorarian)
   =================================================== */

.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link:focus {
  position: fixed;
  top: 8px;
  left: 8px;
  width: auto;
  height: auto;
  overflow: visible;
  padding: 8px 16px;
  background: var(--usj-primario);
  color: var(--usj-texto-blanco);
  border-radius: var(--usj-radio-boton);
  font-family: var(--usj-fuente-principal);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  z-index: 9999;
  box-shadow: var(--usj-sombra-modal);
}

/* Estado vacio (empty state) */
.estado-vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  color: var(--usj-texto-secundario);
}

.estado-vacio__icono {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.estado-vacio__titulo {
  font-family: var(--usj-fuente-principal);
  font-weight: 600;
  font-size: 1rem;
  color: var(--usj-texto-primario);
  margin-bottom: 8px;
}

.estado-vacio__descripcion {
  font-size: 14px;
  line-height: 1.5;
}