/* =========================================================
   BITÁCORA DE SEGUIMIENTO — Programa de Innovación
   Identidad institucional: azul marino + dorado (CITBM / 1551 / UNMSM)
   ========================================================= */

:root{
  --tinta:        #142137;   /* texto principal, azul-carbón */
  --marino-osc:   #0A1E45;   /* azul marino profundo, cabecera */
  --marino:       #0E4589;   /* azul institucional medio */
  --azul-royal:   #1E6FD9;   /* azul vivo, hover / enlaces */
  --azul-teal:    #1C93CE;   /* acento secundario (logo 1551) */
  --papel:        #EEF2F8;   /* fondo gris-azulado claro */
  --papel-claro:  #FFFFFF;
  --papel-linea:  #D7E0EE;   /* líneas de separación */
  --dorado:       #C99A1E;   /* acento dorado, distinción / nota */
  --dorado-suave: #F3DFA0;
  --dorado-fuerte:#A87A0E;
  --verde-ok:     #2E7D4F;   /* entregado */
  --verde-ok-bg:  #E1F0E6;
  --terracota:    #B23A2E;   /* pendiente */
  --terracota-bg: #F8E1DD;
  --sombra:       0 2px 10px rgba(10, 30, 69, 0.12);
  --sombra-fuerte: 0 6px 20px rgba(10, 30, 69, 0.22);
  --radio:        4px;

  --fuente-display: 'Lora', 'Georgia', serif;
  --fuente-cuerpo:  'Inter', 'Segoe UI', sans-serif;
  --fuente-datos:   'JetBrains Mono', 'Consolas', monospace;
}

*{ box-sizing: border-box; }

.sr-only{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

html{ scroll-behavior: smooth; }


body{
  margin: 0;
  background:
    linear-gradient(var(--papel-linea) 1px, transparent 1px) 0 38px / 100% 38px,
    var(--papel);
  color: var(--tinta);
  font-family: var(--fuente-cuerpo);
  line-height: 1.5;
  min-height: 100vh;
}

a{ color: inherit; }

::selection{ background: var(--dorado-suave); }

/* Foco visible accesible */
a:focus-visible, button:focus-visible, input:focus-visible{
  outline: 2px solid var(--dorado);
  outline-offset: 2px;
}

/* ---------- Encabezado ---------- */
.encabezado{
  background: var(--marino-osc);
  color: var(--papel-claro);
  padding: 28px 20px 34px;
  position: relative;
  overflow: hidden;
}

.encabezado::after{
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 6px;
  background: repeating-linear-gradient(
    90deg, var(--dorado) 0 18px, transparent 18px 26px
  );
  opacity: .85;
}

.encabezado__interior{
  max-width: 980px;
  margin: 0 auto;
}

.encabezado__eyebrow{
  font-family: var(--fuente-datos);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dorado-suave);
  margin: 0 0 10px;
}

.encabezado__titulo{
  font-family: var(--fuente-display);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 600;
  margin: 0 0 8px;
}

.encabezado__subtitulo{
  margin: 0;
  max-width: 60ch;
  color: #D9E3DB;
  font-size: .96rem;
}

/* ---------- Contenedor de búsqueda (tarjeta índice) ---------- */
.buscador{
  max-width: 980px;
  margin: -26px auto 0;
  padding: 0 20px;
}

.buscador__tarjeta{
  background: var(--papel-claro);
  border: 1px solid var(--papel-linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 22px 22px 20px;
  position: relative;
}

.buscador__tarjeta::before{
  content: "FICHA DE CONSULTA";
  position: absolute;
  top: -11px;
  left: 22px;
  background: var(--dorado);
  color: #2A1B05;
  font-family: var(--fuente-datos);
  font-size: .66rem;
  letter-spacing: .1em;
  padding: 3px 10px;
  border-radius: 2px;
  font-weight: 700;
}

.buscador__etiqueta{
  display: block;
  font-size: .84rem;
  color: var(--marino);
  font-weight: 600;
  margin: 6px 0 8px;
}

.buscador__fila{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

#campo-apellido{
  flex: 1 1 240px;
  padding: 12px 14px;
  font-size: 1rem;
  font-family: var(--fuente-cuerpo);
  border: 1.5px solid var(--papel-linea);
  border-radius: var(--radio);
  background: #fff;
  color: var(--tinta);
}

#campo-apellido::placeholder{ color: #9C9788; }

.boton-buscar{
  padding: 12px 22px;
  font-size: .96rem;
  font-weight: 600;
  font-family: var(--fuente-cuerpo);
  background: var(--marino-osc);
  color: var(--papel-claro);
  border: none;
  border-radius: var(--radio);
  cursor: pointer;
  transition: background .15s ease, transform .1s ease;
}

.boton-buscar:hover{ background: var(--marino); }
.boton-buscar:active{ transform: translateY(1px); }
.boton-buscar:disabled{ opacity: .6; cursor: wait; }

.buscador__ayuda{
  margin: 10px 0 0;
  font-size: .78rem;
  color: #6B6656;
}

/* ---------- Estados de mensaje ---------- */
.mensaje{
  max-width: 980px;
  margin: 18px auto 0;
  padding: 0 20px;
}

.mensaje__caja{
  border-left: 4px solid var(--dorado);
  background: var(--papel-claro);
  padding: 14px 16px;
  border-radius: 2px;
  font-size: .92rem;
}

.mensaje__caja--error{ border-color: var(--terracota); }

/* ---------- Resultados ---------- */
.resultados{
  max-width: 980px;
  margin: 22px auto 60px;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.resultados__contador{
  font-family: var(--fuente-datos);
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--marino);
  text-transform: uppercase;
}

/* ---------- Tarjeta de expediente del estudiante ---------- */
.expediente{
  background: var(--papel-claro);
  border: 1px solid var(--papel-linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow: hidden;
}

.expediente__cabecera{
  background: linear-gradient(135deg, var(--marino-osc) 0%, var(--marino) 100%);
  color: var(--papel-claro);
  padding: 18px 22px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.expediente__nombre{
  font-family: var(--fuente-display);
  font-size: 1.3rem;
  margin: 0 0 4px;
}

.expediente__meta{
  font-family: var(--fuente-datos);
  font-size: .74rem;
  letter-spacing: .04em;
  color: var(--dorado-suave);
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.expediente__meta span{ white-space: nowrap; }

/* Sello de calificación (circular) — elemento más prominente de la ficha */
.sello{
  flex-shrink: 0;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  border: 4px solid rgba(255,255,255,.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(150deg, var(--azul-royal), var(--marino));
  box-shadow: var(--sombra-fuerte), 0 0 0 4px rgba(255,255,255,.08);
}

.sello__numero{
  font-family: var(--fuente-datos);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
  color: #FFFFFF;
  text-shadow: 0 1px 3px rgba(0,0,0,.25);
}

.sello__etiqueta{
  font-size: .58rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-top: 3px;
  color: rgba(255,255,255,.92);
  font-weight: 600;
}

.sello--destacado{
  background: linear-gradient(150deg, #E9C158, var(--dorado-fuerte));
  border-color: rgba(255,255,255,.75);
  box-shadow: var(--sombra-fuerte), 0 0 0 4px rgba(233,193,88,.28);
}
.sello--destacado .sello__numero{ color: #3A2705; text-shadow: none; }
.sello--destacado .sello__etiqueta{ color: #4A3208; }

.sello--pendiente{
  background: linear-gradient(150deg, #C25A47, var(--terracota));
  border-color: rgba(255,255,255,.5);
}

/* ---------- Cuerpo del expediente ---------- */
.expediente__cuerpo{
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.seccion__titulo{
  font-family: var(--fuente-datos);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--marino);
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.seccion__titulo::after{
  content: "";
  flex: 1;
  height: 1px;
  background: var(--papel-linea);
}

/* Barra de avance */
.avance__fila{
  display: flex;
  align-items: center;
  gap: 12px;
}

.avance__barra{
  flex: 1;
  height: 10px;
  background: var(--papel-linea);
  border-radius: 6px;
  overflow: hidden;
}

.avance__relleno{
  height: 100%;
  background: linear-gradient(90deg, var(--dorado), var(--verde-ok));
  border-radius: 6px;
  transition: width .4s ease;
}

.avance__texto{
  font-family: var(--fuente-datos);
  font-size: .88rem;
  font-weight: 700;
  color: var(--marino-osc);
  white-space: nowrap;
}

/* Tira de entregables (estilo timbrado) */
.entregables{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 8px;
}

.timbre{
  border: 1.5px dashed var(--papel-linea);
  border-radius: var(--radio);
  padding: 8px 6px;
  text-align: center;
  background: #fff;
}

.timbre__n{
  font-family: var(--fuente-datos);
  font-size: .68rem;
  color: #8A8570;
  margin-bottom: 4px;
}

.timbre__marca{
  width: 22px;
  height: 22px;
  border-radius: 50%;
  margin: 0 auto 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
  font-weight: 700;
}

.timbre--ok .timbre__marca{ background: var(--verde-ok-bg); color: var(--verde-ok); }
.timbre--pendiente .timbre__marca{ background: var(--terracota-bg); color: var(--terracota); }
.timbre--sd .timbre__marca{ background: #EDEAE0; color: #B3AE9C; }

.timbre__fecha{
  font-size: .62rem;
  color: #8A8570;
}

/* Proyecto */
.proyecto__nombre{
  font-size: .96rem;
  line-height: 1.5;
  margin: 0 0 12px;
}

.proyecto__enlaces{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.enlace-boton{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  font-size: .85rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
  border: none;
  color: #FFFFFF;
  background: linear-gradient(135deg, var(--azul-royal), var(--marino));
  box-shadow: 0 3px 10px rgba(14, 69, 137, .32);
  transition: transform .12s ease, box-shadow .12s ease, background .15s ease;
}

.enlace-boton:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(14, 69, 137, .4);
  background: linear-gradient(135deg, var(--azul-teal), var(--azul-royal));
  color: #FFFFFF;
}

.enlace-boton:active{ transform: translateY(0); }

.proyecto__vacio{
  font-size: .86rem;
  color: #8A8570;
  font-style: italic;
}

.mentores{
  font-size: .84rem;
  color: var(--marino);
}

.mentores strong{ color: var(--tinta); }

/* ---------- Pie ---------- */
.pie{
  text-align: center;
  padding: 26px 20px 40px;
  font-size: .76rem;
  color: #8A8570;
}

/* ---------- Responsivo ---------- */
@media (max-width: 520px){
  .expediente__cabecera{ flex-direction: column; }
  .sello{ align-self: flex-end; }
  .entregables{ grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
}

/* Reducir movimiento si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .avance__relleno{ transition: none; }
}