/* ============================================================
   PORTAL PÚBLICO — UNSCH Convocatorias
   Estilo: Swiss Typographic — claridad, función, elegancia discreta
   Paleta: guinda #5c0000 · marino #00385C · naranja acento #F66123
   Fuente: Open Sans — misma que UNSCH institucional
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,400&display=swap');

:root {
  --guinda:      #5c0000;
  --guinda-mid:  #712b2f;
  --guinda-dark: #3d0000;
  --navy:        #00385C;
  --orange:      #F66123;

  --white:   #ffffff;
  --bg:      #fafafa;
  --surface: #ffffff;
  --line:    #e0dbd5;
  --line-sm: #ede9e4;
  --muted:   #6b6560;
  --text:    #1a1614;

  --t: 160ms ease;
  --r: 4px;
  --shadow-card: 0 1px 3px rgba(0,0,0,.07);
  --shadow-lift: 0 4px 16px rgba(0,0,0,.10);
}

/* ── UTILIDAD: línea degradada ── */
.grad-line {
  height: 2px;
  background: linear-gradient(to right, var(--guinda), var(--navy), transparent);
  border: none;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
body {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Open Sans', sans-serif;
  line-height: 1.2;
  font-weight: 600;
  color: var(--text);
}
a { color: var(--navy); }

/* ══════════════════════════════════════════════
   HEADER — franja institucional mínima
══════════════════════════════════════════════ */
.site-header {
  background: linear-gradient(
    120deg,
    #f8f2ef 0%,    /* crema cálido — eco del guinda */
    #faf8f7 45%,   /* transición neutra */
    #f4f7fb 100%   /* blanco frío — eco del navy */
  );
  color: var(--text);
  padding: .65rem 0;
  position: relative;
}
.site-header::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(to right, var(--guinda) 0%, var(--navy) 60%, transparent 100%);
}
.header-logo {
  height: 38px;
  width: auto;
  display: block;
  flex-shrink: 0;
}
.header-institution {
  font-size: .88rem; font-weight: 700;
  letter-spacing: .01em; color: var(--guinda);
}
.header-subtitle {
  font-size: .67rem; color: var(--muted);
  margin-top: 1px; font-weight: 400;
}

/* ══════════════════════════════════════════════
   HERO — fondo limpio con acento cromático sutil
══════════════════════════════════════════════ */
.hero-section {
  background: var(--white);
  color: var(--text);
  padding: 2.8rem 0 2.2rem;
  text-align: center;
  position: relative;
}
/* Barra de acento izquierda muy sutil detrás del contenido */
.hero-section::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(to bottom, var(--guinda), var(--navy));
  opacity: .35;
}
.hero-title {
  font-size: 2rem; font-weight: 700;
  letter-spacing: -.015em; margin-bottom: .4rem;

  background: linear-gradient(
    105deg,
    var(--guinda-dark)   0%,
    var(--guinda-dark)  30%,
    #d4826a             43%,
    #fff8f0             50%,
    #d4826a             57%,
    var(--guinda-dark)  70%,
    var(--guinda-dark) 100%
  );
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent; /* Chrome / Safari / Edge */
  color: transparent;                   /* Firefox */
  will-change: background-position;
  transform: translateZ(0);
  animation: titleSweep 33s infinite;
}
/* El ícono necesita color explícito porque hereda transparent */
.hero-title .bi {
  -webkit-text-fill-color: initial;
  color: var(--guinda) !important;
  opacity: .75;
}

@keyframes titleSweep {
  0%  { background-position: 150% center; animation-timing-function: ease-in-out; }
  91% { background-position: -50% center; }
  100%{ background-position: -50% center; }
}
.hero-subtitle {
  font-size: .88rem; color: var(--muted); font-weight: 400;
  margin-bottom: 1.8rem;
}
.search-box { max-width: 580px; margin: 0 auto; }
.search-box .input-group {
  border: 1px solid transparent;
  border-radius: var(--r);
  overflow: hidden;
  background: linear-gradient(var(--white), var(--white)) padding-box,
              linear-gradient(to right, var(--guinda), var(--navy) 55%, transparent) border-box;
}
.search-box .input-group-text {
  background: var(--white); border: none;
  color: var(--guinda); padding: .55rem .85rem;
}
.search-box .form-control {
  border: none; font-size: .92rem; padding: .55rem .4rem;
  color: var(--text); background: var(--white);
}
.search-box .form-control:focus { box-shadow: none; outline: none; }
.search-box .form-control::placeholder { color: #b0a8a3; }
.search-box .btn-search {
  background: linear-gradient(160deg, #7a1a1e 0%, var(--guinda) 45%, #2a0a1a 100%);
  color: #fff; border: none;
  font-weight: 700; padding: .55rem 1.3rem;
  cursor: pointer; transition: filter var(--t);
  font-size: .88rem; letter-spacing: .03em;
  position: relative; overflow: hidden;
  isolation: isolate; /* evita que el ::after afecte capas externas */
}
.search-box .btn-search::after {
  content: '';
  position: absolute; top: 0; left: -80%; width: 55%; height: 100%;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255,255,255,.18) 50%,
    transparent 100%
  );
  animation: btnGleam 6s ease-in-out infinite;
  pointer-events: none;
  will-change: left;
}
@keyframes btnGleam {
  0%   { left: -80%; }
  25%  { left: -80%; }
  55%  { left: 130%; }
  100% { left: 130%; }
}
.search-box .btn-search:hover { filter: brightness(1.15); }

/* ══════════════════════════════════════════════
   STATS — números protagonistas, acento por color
══════════════════════════════════════════════ */
/* stats-section eliminada — los stats viven en el site-header */
.stat-card {
  text-align: center;
  padding: .25rem .5rem .2rem;
  border-top: 2px solid var(--line);
  transition: border-color var(--t), transform var(--t);
  cursor: default;
  position: relative;
  min-width: 52px;
}
.stat-card:hover {
  border-top-color: var(--guinda);
  transform: translateY(-1px);
}
.stat-number {
  font-size: 1rem; font-weight: 700; line-height: 1;
  display: block; color: var(--guinda-dark);
  letter-spacing: -.02em;
}
.stat-label {
  font-size: .5rem; text-transform: uppercase;
  letter-spacing: .09em; color: var(--muted);
  margin-top: 2px; display: block; font-weight: 600;
}
.s-nuevo     { border-top-color: #4AABCF !important; }
.s-nuevo .stat-number     { color: #1A5276; }
.s-proceso   { border-top-color: var(--orange) !important; }
.s-proceso .stat-number   { color: #7D3100; }
.s-concluido { border-top-color: #2E8B57 !important; }
.s-concluido .stat-number { color: #1D6A39; }
.s-desierto  { border-top-color: #B8860B !important; }
.s-desierto .stat-number  { color: #7E5109; }
.s-cancelado { border-top-color: #8B1A1A !important; }
.s-cancelado .stat-number { color: #78281F; }

/* ══════════════════════════════════════════════
   FILTER BAR — borde degradado como ancla visual
══════════════════════════════════════════════ */
.filter-section {
  background: var(--white);
  padding: .3rem 0;
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  border-bottom: 2px solid transparent;
  background-clip: padding-box;
  position: sticky;
}
.filter-section::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(to right, var(--guinda) 0%, var(--navy) 45%, rgba(0,56,92,.12) 100%);
}
.filter-label {
  display: block; font-size: .58rem; font-weight: 700;
  color: var(--guinda); text-transform: uppercase;
  letter-spacing: .1em; margin-bottom: 2px;
}
/* Checkboxes de estado */
.filter-check {
  display: inline-flex; align-items: center; gap: .35rem;
  cursor: pointer; user-select: none;
  font-size: .8rem; color: var(--muted);
  font-weight: 400;
}
.filter-check input[type="checkbox"] {
  width: 14px; height: 14px;
  accent-color: var(--guinda);
  cursor: pointer;
}
.filter-check:has(input:checked) { color: var(--text); font-weight: 600; }
.form-select, .form-control {
  border-color: var(--line); color: var(--text);
  font-size: .855rem; border-radius: var(--r);
  background-color: var(--white);
}
.form-select:focus, .form-control:focus {
  border-color: var(--guinda);
  box-shadow: 0 0 0 2px rgba(92,0,0,.12);
}
.btn-outline-secondary {
  color: var(--muted); border-color: var(--line); border-radius: var(--r);
}
.btn-outline-secondary:hover { background: var(--bg); color: var(--text); border-color: var(--line); }

/* ══════════════════════════════════════════════
   RESULTS
══════════════════════════════════════════════ */
.results-section { padding: 1.6rem 0 3.5rem; min-height: 420px; }
.results-count { font-size: .8rem; color: var(--muted); font-weight: 600; }

/* ══════════════════════════════════════════════
   CONVOCATORIA CARD — Swiss grid card
══════════════════════════════════════════════ */
.conv-card {
  background: var(--white);
  border-radius: var(--r);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  height: 100%;
  display: flex; flex-direction: column;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow var(--t), transform var(--t), border-color var(--t);
  position: relative;
}
.conv-card:hover {
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
  border-color: #c8c0b8;
}
/* Acento superior por estado — línea, no relleno */
.conv-card[data-estado="NUEVO"]      { border-top: 3px solid #4AABCF; }
.conv-card[data-estado="EN_PROCESO"] { border-top: 3px solid var(--orange); }
.conv-card[data-estado="CONCLUIDO"]  { border-top: 3px solid #2E8B57; }
.conv-card[data-estado="DESIERTO"]   { border-top: 3px solid #B8860B; }
.conv-card[data-estado="CANCELADO"]  { border-top: 3px solid #8B1A1A; }

.conv-card-top { padding: 1rem 1.1rem .7rem; flex: 1; }
.conv-card-badges {
  display: flex; gap: .3rem; flex-wrap: wrap;
  margin-bottom: .6rem; align-items: center;
}

.conv-vistas {
  font-size: .58rem;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: .2rem;
}

.conv-codigo {
  font-size: .62rem; font-weight: 800; letter-spacing: .07em;
  color: var(--guinda);
  border: 1.5px solid var(--guinda);
  padding: 1px 7px; border-radius: 2px;
  font-variant-numeric: tabular-nums;
}
/* Código y botón toman el color del estado */
.conv-card[data-estado="NUEVO"]      .conv-codigo { color:#1A5276; border-color:#4AABCF; }
.conv-card[data-estado="EN_PROCESO"] .conv-codigo { color:#7D3100; border-color:#F66123; }
.conv-card[data-estado="CONCLUIDO"]  .conv-codigo { color:#1D6A39; border-color:#2E8B57; }
.conv-card[data-estado="DESIERTO"]   .conv-codigo { color:#7E5109; border-color:#B8860B; }
.conv-card[data-estado="CANCELADO"]  .conv-codigo { color:#78281F; border-color:#8B1A1A; }
.status-badge {
  font-size: .6rem; font-weight: 700; padding: 2px 8px;
  border-radius: 2px; text-transform: uppercase; letter-spacing: .06em;
}
.badge-NUEVO      { background: #EBF5FB; color: #1A5276; border: 1px solid #AED6F1; }
.badge-EN_PROCESO { background: #FEF5E7; color: #784212; border: 1px solid #F8C471; }
.badge-CONCLUIDO  { background: #EAFAF1; color: #1D6A39; border: 1px solid #A9DFBF; }
.badge-DESIERTO   { background: #FDF2E9; color: #7E5109; border: 1px solid #F0B27A; }
.badge-CANCELADO  { background: #FDEDEC; color: #78281F; border: 1px solid #F1948A; }

.conv-cargo {
  font-size: .97rem; font-weight: 700;
  line-height: 1.35; margin-bottom: .3rem;
  color: var(--text);
}
.conv-unidad {
  font-size: .74rem; color: var(--muted);
  margin-bottom: .5rem;
  display: flex; align-items: center; gap: .3rem;
}
.conv-tags { display: flex; gap: .25rem; flex-wrap: wrap; margin-bottom: .4rem; }
.conv-tag {
  font-size: .6rem; padding: 1px 6px; border-radius: 2px;
  font-weight: 600;
  color: var(--navy);
  border: 1px solid rgba(0,56,92,.25);
  background: transparent;
}
.conv-progress       { margin-top: .55rem; }
.conv-progress-label {
  font-size: .64rem; color: var(--muted);
  display: flex; align-items: center; gap: .3rem;
}

/* Última etapa en la tarjeta */
.conv-ultima-etapa {
  display: flex; align-items: center; justify-content: space-between; gap: .4rem;
  margin-top: .45rem;
  padding-top: .4rem;
  border-top: 1px solid var(--line-sm);
}
.conv-ultima-nombre {
  font-size: .7rem; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1;
}
.conv-ultima-fecha {
  font-size: .65rem; color: var(--muted);
  white-space: nowrap; flex-shrink: 0;
  opacity: .75;
}
.conv-ultima-icon { flex-shrink: 0; font-size: 1rem; line-height: 1; }
/* Fila entera como enlace — sin cambiar aspecto visual */
a.conv-ultima-link {
  text-decoration: none; color: inherit;
  cursor: pointer;
}
a.conv-ultima-link:hover { opacity: .75; }

.conv-card-footer {
  padding: .55rem 1.1rem;
  border-top: 1px solid var(--line-sm);
  display: flex; justify-content: space-between; align-items: center;
  background: var(--white);
}
.btn-detalle {
  background: transparent;
  color: var(--guinda);
  border: 1.5px solid var(--guinda);
  font-size: .78rem; font-weight: 700;
  padding: .3rem .85rem; border-radius: var(--r);
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t);
  letter-spacing: .02em;
}
.btn-detalle:hover { background: var(--guinda); color: var(--white); }

/* Botón toma el color del estado */
.conv-card[data-estado="NUEVO"]      .btn-detalle { color:#1A5276; border-color:#4AABCF; }
.conv-card[data-estado="NUEVO"]      .btn-detalle:hover { background:#4AABCF; border-color:#4AABCF; color:#fff; }

.conv-card[data-estado="EN_PROCESO"] .btn-detalle { color:#7D3100; border-color:#F66123; }
.conv-card[data-estado="EN_PROCESO"] .btn-detalle:hover { background:#F66123; border-color:#F66123; color:#fff; }

.conv-card[data-estado="CONCLUIDO"]  .btn-detalle { color:#1D6A39; border-color:#2E8B57; }
.conv-card[data-estado="CONCLUIDO"]  .btn-detalle:hover { background:#2E8B57; border-color:#2E8B57; color:#fff; }

.conv-card[data-estado="DESIERTO"]   .btn-detalle { color:#7E5109; border-color:#B8860B; }
.conv-card[data-estado="DESIERTO"]   .btn-detalle:hover { background:#B8860B; border-color:#B8860B; color:#fff; }

.conv-card[data-estado="CANCELADO"]  .btn-detalle { color:#78281F; border-color:#8B1A1A; }
.conv-card[data-estado="CANCELADO"]  .btn-detalle:hover { background:#8B1A1A; border-color:#8B1A1A; color:#fff; }

/* ══════════════════════════════════════════════
   MODAL
══════════════════════════════════════════════ */
.modal-header {
  background: var(--white);
  color: var(--text);
  padding: 1rem 1.25rem .85rem;
  position: relative;
}
/* Línea degradada en la base del modal header */
.modal-header::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(to right, var(--guinda) 0%, var(--navy) 55%, transparent 100%);
}
.modal-header .modal-title { color: var(--guinda-dark); font-weight: 700; }
.modal-header small { color: var(--muted); }
.modal-header .btn-close { filter: none; }
#modalCodigoWrap .badge {
  background: transparent !important;
  color: var(--guinda) !important;
  border: 1.5px solid var(--guinda) !important;
  font-weight: 800;
  border-radius: 2px;
  letter-spacing: .06em;
  font-size: .73rem;
}

/* Acento lateral izquierdo sutil en el cuerpo del modal */
.modal-body { padding: 1rem 1.25rem; }

/* Bloque info modal */
.modal-info-block {
  border-left: 2px solid var(--line);
  padding: .35rem 0 .35rem .9rem;
  display: flex; flex-direction: column; gap: .5rem;
  margin-bottom: .25rem;
}
.modal-info-row {
  display: flex; align-items: baseline; gap: .5rem;
  font-size: .85rem; flex-wrap: wrap;
}
.modal-info-label {
  font-size: .6rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--guinda); min-width: 68px;
  flex-shrink: 0;
}
.modal-info-val { color: var(--text); font-weight: 500; }
.modal-info-sep { color: var(--muted); font-size: .75rem; }

.section-title {
  font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--guinda);
  padding-bottom: .3rem; margin-bottom: .85rem;
  position: relative;
}
/* Mini línea degradada bajo cada sección */
.section-title::after {
  content: '';
  position: absolute; bottom: 0; left: 0;
  width: 100%; height: 1px;
  background: linear-gradient(to right, var(--guinda), var(--navy) 40%, var(--line) 100%);
}

/* ── Etapas timeline ── */
.etapas-timeline { position: relative; padding-left: 1.6rem; }
.etapas-timeline::before {
  content: ''; position: absolute;
  left: .5rem; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, var(--guinda) 0%, var(--navy) 60%, var(--line) 100%);
}
.etapa-item { position: relative; margin-bottom: 1rem; padding-left: .8rem; }
.etapa-item::before {
  content: ''; position: absolute;
  left: -1.15rem; top: .35rem;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--line);
}
.etapa-item.publicado::before {
  background: var(--navy);
  border-color: var(--navy);
}
.etapa-item.cancelado::before {
  background: var(--guinda);
  border-color: var(--guinda);
}
.etapa-nombre { font-size: .88rem; font-weight: 600; color: var(--text); }
.etapa-fecha  { font-size: .72rem; color: var(--muted); margin-top: 2px; }
.etapa-doc a  {
  font-size: .76rem; color: var(--navy); text-decoration: none;
  display: inline-flex; align-items: center; gap: .3rem;
  transition: color var(--t);
}
.etapa-doc a:hover { color: var(--guinda); }

/* ── Formatos ── */
.formato-item {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .85rem;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r);
  font-size: .79rem; color: var(--navy);
  text-decoration: none; margin: .2rem;
  transition: border-color var(--t), color var(--t);
  cursor: pointer;
}
.formato-item:hover {
  border-color: var(--guinda);
  color: var(--guinda);
}

/* ── No results ── */
.no-results { text-align: center; padding: 4rem 0; color: var(--muted); }
.no-results .bi {
  font-size: 2.5rem; display: block;
  margin-bottom: .8rem; opacity: .2;
  color: var(--guinda);
}

/* ══════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════ */
.site-footer {
  background: linear-gradient(
    120deg,
    #f4f7fb 0%,    /* blanco frío — eco del navy */
    #faf8f7 55%,   /* transición neutra */
    #f8f2ef 100%   /* crema cálido — eco del guinda */
  );
  color: var(--muted);
  padding: 1.4rem 0;
  font-size: .8rem; line-height: 1.85;
  position: relative;
}
.site-footer::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(to right, var(--guinda) 0%, var(--navy) 55%, transparent 100%);
}
.site-footer strong { color: var(--guinda-dark); }
.site-footer a { color: var(--guinda-mid); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════
   ACCESSIBILITY
══════════════════════════════════════════════ */
:focus-visible {
  outline: 2px solid var(--guinda);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* ══════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════ */
@media (max-width: 768px) {
  .hero-title  { font-size: 1.7rem; }
  .stat-number { font-size: 1.6rem; }
}
@media (max-width: 576px) {
  .hero-title    { font-size: 1.4rem; }
  .hero-subtitle { font-size: .85rem; }
  .hero-section  { padding: 2rem 0 1.6rem; }
}

/* ══════════════════════════════════════════════
   PAGINADOR
══════════════════════════════════════════════ */
#paginadorTop  { margin-bottom: 1.2rem; }
#paginadorBottom { margin-top: .5rem; }

#paginadorTop .pagination,
#paginadorBottom .pagination { gap: 2px; }

#paginadorTop .page-link,
#paginadorBottom .page-link {
  border-radius: var(--r) !important;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: .8rem;
  padding: .28rem .58rem;
  min-width: 32px;
  text-align: center;
  background: var(--white);
  transition: border-color var(--t), color var(--t);
}
#paginadorTop .page-link:hover,
#paginadorBottom .page-link:hover {
  border-color: var(--guinda);
  color: var(--guinda);
  background: var(--white);
}
#paginadorTop .page-item.active .page-link,
#paginadorBottom .page-item.active .page-link {
  background: var(--white);
  border-color: var(--guinda);
  color: var(--guinda);
  font-weight: 800;
}
#paginadorTop .page-item.disabled .page-link,
#paginadorBottom .page-item.disabled .page-link {
  color: #ccc;
  background: transparent;
  border-color: transparent;
}