/* =====================================================================
   REPOSITORIO INSTITUCIONAL · IESTP "Alberto Pumayalla Díaz"
   Concepto: catálogo de fichas bibliográficas
   ===================================================================== */

:root {
  --tinta:        #0E2A47;   /* azul institucional profundo (derivado del logo) */
  --tinta-media:  #11497A;   /* azul del escudo, para degradados */
  --tinta-suave:  #3A5E80;
  --papel:        #F1F3F0;   /* papel de archivo, frío */
  --ficha:        #FFFFFF;
  --linea:        #D7DBD4;
  --lacre:        #A23B3B;   /* sello rojo: contadores, acentos puntuales */
  --hilo-oro:     #C29A3A;   /* filete dorado fino */
  --texto:        #243240;
  --texto-tenue:  #68788A;

  --f-display: 'Zilla Slab', Georgia, serif;
  --f-texto:   'Archivo', system-ui, sans-serif;
  --f-mono:    'IBM Plex Mono', monospace;

  --radio: 6px;
  --sombra: 0 1px 2px rgba(20,51,59,.06), 0 6px 18px rgba(20,51,59,.07);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  font-family: var(--f-texto);
  font-size: 16px;
  line-height: 1.6;
  color: var(--texto);
  background: var(--papel);
}

img { max-width: 100%; display: block; }
a { color: var(--tinta); }

.contenedor { width: min(1180px, 92%); margin-inline: auto; }

/* ---------------- Cabecera ---------------- */
.cabecera {
  background: var(--tinta);
  color: #EDF1EE;
  border-bottom: 3px solid var(--hilo-oro);
}
.cabecera__barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .9rem 0;
}
.marca { display: flex; align-items: center; gap: .8rem; text-decoration: none; color: inherit; }
.marca__escudo {
  width: 46px; height: 46px; flex: none;
  border: 2px solid var(--hilo-oro); border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--f-display); font-weight: 700; font-size: 1rem;
  letter-spacing: .5px; color: #F3E7C9;
}
.marca__logo {
  width: 46px; height: 46px; flex: none; border-radius: 50%;
  border: 2px solid var(--hilo-oro); background: #fff; object-fit: cover;
  box-shadow: 0 0 0 3px rgba(194,154,58,.18);
}
.marca__texto small {
  display: block; font-size: .68rem; text-transform: uppercase;
  letter-spacing: .14em; color: #93AECB;
}
.marca__texto strong { font-family: var(--f-display); font-size: 1.12rem; font-weight: 600; }

.nav-publica { display: flex; gap: 1.4rem; align-items: center; }
.nav-publica a {
  color: #C3D3E4; text-decoration: none; font-size: .9rem; letter-spacing: .02em;
}
.nav-publica a:hover, .nav-publica a:focus-visible { color: #fff; }
.nav-publica .enlace-admin {
  border: 1px solid #2E5070; padding: .35rem .85rem; border-radius: 99px;
  font-family: var(--f-mono); font-size: .78rem;
}

/* ---------------- Héroe / buscador ---------------- */
.heroe {
  background: radial-gradient(1100px 480px at 85% -10%, var(--tinta-media), transparent 65%),
              var(--tinta);
  color: #EDF1F4; padding: 3rem 0 3.4rem; position: relative; overflow: hidden;
}
.heroe::after {                       /* emblema en marca de agua */
  content: ''; position: absolute; right: -70px; top: 50%;
  width: 420px; height: 420px; transform: translateY(-50%);
  background: url('../img/logo.png') center/contain no-repeat;
  opacity: .10; pointer-events: none;
}
.heroe .contenedor { position: relative; z-index: 1; }
.heroe h1 {
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(1.7rem, 4vw, 2.7rem); line-height: 1.15;
  max-width: 22ch;
}
.heroe h1 em { font-style: normal; color: #E9C46A; }
.heroe p.sub {
  margin-top: .7rem; color: #A9BDD1; max-width: 56ch; font-size: .98rem;
}
.buscador {
  margin-top: 1.8rem; display: flex; gap: 0;
  max-width: 640px; box-shadow: var(--sombra);
  border-radius: var(--radio); overflow: hidden;
}
.buscador input[type=search] {
  flex: 1; min-width: 0; border: 0; padding: .95rem 1.1rem;
  font: inherit; font-size: 1rem; background: #fff; color: var(--texto);
}
.buscador input:focus { outline: 3px solid var(--hilo-oro); outline-offset: -3px; }
.buscador button {
  border: 0; background: var(--lacre); color: #fff; padding: 0 1.5rem;
  font: 600 .92rem var(--f-texto); letter-spacing: .03em; cursor: pointer;
}
.buscador button:hover { background: #8A3030; }
.heroe__cifras {
  margin-top: 1.6rem; display: flex; gap: 2.2rem; flex-wrap: wrap;
  font-family: var(--f-mono); font-size: .8rem; color: #93AECB;
}
.heroe__cifras b { color: #E9C46A; font-size: 1.05rem; font-weight: 600; }

/* Chips de programas bajo el héroe */
.programas-chips {
  display: flex; gap: .55rem; flex-wrap: wrap; margin-top: 1.6rem;
}
.programas-chips a {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .8rem; text-decoration: none; color: #DCE6EF;
  border: 1px solid rgba(255,255,255,.22); border-radius: 99px;
  padding: .35rem .85rem; transition: background .15s ease, border-color .15s ease;
  background: rgba(255,255,255,.04);
}
.programas-chips a:hover, .programas-chips a.activo {
  background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.45);
}
.programas-chips .punto {
  width: 9px; height: 9px; border-radius: 50%; background: var(--punto, #fff);
  box-shadow: 0 0 0 2px rgba(255,255,255,.18);
}

/* ---------------- Filtros ---------------- */
.filtros {
  display: flex; flex-wrap: wrap; gap: .8rem; align-items: center;
  padding: 1.4rem 0 .4rem;
}
.filtros label {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--texto-tenue);
}
.filtros select {
  font: inherit; font-size: .9rem; padding: .45rem .7rem;
  border: 1px solid var(--linea); border-radius: var(--radio);
  background: var(--ficha); color: var(--texto);
}
.filtros .resultado-cifra {
  margin-left: auto; font-family: var(--f-mono); font-size: .78rem; color: var(--texto-tenue);
}

/* ---------------- Fichas (tarjetas de proyecto) ---------------- */
.fichas {
  display: grid; gap: 1.3rem;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  padding: 1.2rem 0 3rem;
}
.ficha {
  background: var(--ficha); border: 1px solid var(--linea);
  border-radius: var(--radio); box-shadow: var(--sombra);
  display: grid; grid-template-columns: 10px 1fr; overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.ficha:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(20,51,59,.08), 0 14px 30px rgba(20,51,59,.12);
}
.ficha__lomo { background: var(--lomo, var(--tinta)); }
.ficha__cuerpo { padding: 1.1rem 1.2rem 1rem; display: flex; flex-direction: column; gap: .55rem; }

.ficha__meta {
  display: flex; justify-content: space-between; align-items: baseline; gap: .6rem;
  border-bottom: 1px dashed var(--linea); padding-bottom: .5rem;
}
.ficha__codigo { font-family: var(--f-mono); font-size: .72rem; color: var(--texto-tenue); letter-spacing: .03em; }
.ficha__carrera {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--lomo, var(--tinta)); font-weight: 600; text-align: right;
}
.ficha__tipo {
  align-self: flex-start; font-size: .66rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--texto-tenue);
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: 3px; padding: .15rem .5rem;
}
.ficha__titulo { font-family: var(--f-display); font-size: 1.12rem; font-weight: 600; line-height: 1.3; }
.ficha__titulo a { text-decoration: none; color: var(--tinta); }
.ficha__titulo a:hover { text-decoration: underline; text-decoration-color: var(--hilo-oro); text-underline-offset: 3px; }
.ficha__autores { font-size: .86rem; color: var(--tinta-suave); }
.ficha__resumen {
  font-size: .86rem; color: var(--texto-tenue);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ficha__pie {
  margin-top: auto; padding-top: .7rem; border-top: 1px solid var(--linea);
  display: flex; align-items: center; gap: 1rem;
  font-family: var(--f-mono); font-size: .74rem; color: var(--texto-tenue);
}
.ficha__pie .anio { margin-left: auto; color: var(--tinta-suave); }
.sello { display: inline-flex; align-items: center; gap: .35rem; }
.sello svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.sello--lacre { color: var(--lacre); }

.sin-resultados {
  text-align: center; padding: 4rem 1rem; color: var(--texto-tenue);
}
.sin-resultados strong { font-family: var(--f-display); font-size: 1.2rem; color: var(--tinta); display: block; margin-bottom: .4rem; }

/* ---------------- Paginación ---------------- */
.paginacion { display: flex; gap: .4rem; justify-content: center; padding-bottom: 3rem; flex-wrap: wrap; }
.paginacion a, .paginacion span {
  font-family: var(--f-mono); font-size: .82rem; text-decoration: none;
  padding: .4rem .75rem; border: 1px solid var(--linea); border-radius: var(--radio);
  background: var(--ficha); color: var(--tinta);
}
.paginacion .actual { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.paginacion a:hover { border-color: var(--tinta); }

/* ---------------- Detalle del proyecto ---------------- */
.detalle { padding: 2.4rem 0 3.5rem; display: grid; gap: 2rem; grid-template-columns: 1fr 320px; align-items: start; }
.expediente {
  background: var(--ficha); border: 1px solid var(--linea); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: 2rem 2.2rem; border-top: 6px solid var(--lomo, var(--tinta));
}
.expediente .codigo-grande {
  font-family: var(--f-mono); font-size: .78rem; color: var(--texto-tenue);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem;
}
.expediente h1 {
  font-family: var(--f-display); font-weight: 600; line-height: 1.22;
  font-size: clamp(1.4rem, 3vw, 2rem); margin: .7rem 0 1rem;
}
.lista-datos { display: grid; gap: .55rem; margin: 1.2rem 0; }
.lista-datos div { display: grid; grid-template-columns: 150px 1fr; gap: .8rem; font-size: .92rem; }
.lista-datos dt { color: var(--texto-tenue); font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; padding-top: .15rem; }
.lista-datos dd { color: var(--texto); }
.expediente h2 {
  font-family: var(--f-display); font-size: 1.05rem; font-weight: 600;
  margin: 1.6rem 0 .5rem; padding-bottom: .3rem;
  border-bottom: 2px solid var(--hilo-oro); display: inline-block;
}
.expediente .resumen-texto { font-size: .95rem; color: var(--texto); white-space: pre-line; }
.etiquetas { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .8rem; }
.etiqueta {
  font-family: var(--f-mono); font-size: .72rem; padding: .25rem .65rem;
  background: var(--papel); border: 1px solid var(--linea); border-radius: 99px;
  color: var(--tinta-suave);
}

.panel-lateral { display: grid; gap: 1.2rem; position: sticky; top: 1.2rem; }
.tarjeta-accion {
  background: var(--ficha); border: 1px solid var(--linea); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: 1.4rem; text-align: center;
}
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: 600 .95rem var(--f-texto); text-decoration: none; cursor: pointer;
  padding: .8rem 1.4rem; border-radius: var(--radio); border: 0; width: 100%;
  transition: background .15s ease;
}
.boton--lacre { background: var(--lacre); color: #fff; }
.boton--lacre:hover { background: #8A3030; }
.boton--contorno { background: transparent; border: 1px solid var(--linea); color: var(--tinta); width: auto; padding: .5rem 1rem; font-size: .85rem; }
.boton--contorno:hover { border-color: var(--tinta); }
.boton svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; }
.tarjeta-accion .nota-pdf { margin-top: .6rem; font-family: var(--f-mono); font-size: .72rem; color: var(--texto-tenue); }

.contadores { display: grid; grid-template-columns: 1fr 1fr; }
.contadores > div { padding: 1.1rem .5rem; text-align: center; }
.contadores > div + div { border-left: 1px dashed var(--linea); }
.contadores b { display: block; font-family: var(--f-display); font-size: 1.7rem; font-weight: 600; color: var(--tinta); }
.contadores span { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--texto-tenue); }

.cita-bibliografica {
  background: var(--ficha); border: 1px solid var(--linea); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: 1.2rem 1.4rem; font-size: .84rem; color: var(--tinta-suave);
}
.cita-bibliografica h3 { font-family: var(--f-display); font-size: .95rem; margin-bottom: .5rem; color: var(--tinta); }

.miga { padding-top: 1.6rem; font-family: var(--f-mono); font-size: .76rem; color: var(--texto-tenue); }
.miga a { color: var(--texto-tenue); }

/* ---------------- Pie de página ---------------- */
.pie {
  background: var(--tinta); color: #93AECB; margin-top: auto;
  border-top: 3px solid var(--hilo-oro); padding: 2rem 0; font-size: .85rem;
}
.pie .contenedor { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: center; }
.pie strong { color: #EDF1F4; font-family: var(--f-display); font-weight: 600; }
.pie .pie-marca { display: flex; align-items: center; gap: .8rem; }
.pie .pie-marca img { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--hilo-oro); }

/* ---------------- Avisos flash ---------------- */
.aviso {
  padding: .85rem 1.1rem; border-radius: var(--radio); margin: 1rem 0;
  font-size: .9rem; border: 1px solid;
}
.aviso--ok    { background: #EAF3EC; border-color: #BAD8C2; color: #2E5E3C; }
.aviso--error { background: #F8ECEC; border-color: #E2BFBF; color: #7E2E2E; }

/* =====================================================================
   ADMINISTRACIÓN
   ===================================================================== */
.admin-cuerpo { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.admin-lateral {
  background: var(--tinta); color: #C3D3E4; padding: 1.4rem 0;
  display: flex; flex-direction: column;
}
.admin-lateral .marca { padding: 0 1.3rem 1.2rem; border-bottom: 1px solid #234567; }
.admin-menu { padding: 1rem 0; display: grid; }
.admin-menu a {
  color: #C3D3E4; text-decoration: none; padding: .65rem 1.3rem; font-size: .9rem;
  border-left: 3px solid transparent; display: flex; gap: .6rem; align-items: center;
}
.admin-menu a svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.admin-menu a:hover { background: #16395C; color: #fff; }
.admin-menu a.activo { background: #16395C; color: #fff; border-left-color: var(--hilo-oro); }
.admin-lateral .cerrar-sesion { margin-top: auto; padding: 1rem 1.3rem; border-top: 1px solid #234567; }
.admin-lateral .cerrar-sesion a { color: #C3D3E4; font-size: .85rem; text-decoration: none; font-family: var(--f-mono); }
.admin-lateral .cerrar-sesion a:hover { color: #fff; }

.admin-principal { padding: 2rem clamp(1rem, 3vw, 2.6rem); }
.admin-titulo {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  flex-wrap: wrap; margin-bottom: 1.6rem;
}
.admin-titulo h1 { font-family: var(--f-display); font-weight: 600; font-size: 1.6rem; color: var(--tinta); }

.tarjetas-resumen { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: 2rem; }
.tarjeta-resumen {
  background: var(--ficha); border: 1px solid var(--linea); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: 1.2rem 1.3rem; border-top: 4px solid var(--hilo-oro);
}
.tarjeta-resumen b { display: block; font-family: var(--f-display); font-size: 2rem; font-weight: 600; color: var(--tinta); }
.tarjeta-resumen span { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--texto-tenue); }

.tabla-envoltura { background: var(--ficha); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); overflow-x: auto; }
table.tabla { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 640px; }
.tabla th {
  text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--texto-tenue); padding: .8rem 1rem; border-bottom: 2px solid var(--linea);
  background: #FAFAF7;
}
.tabla td { padding: .75rem 1rem; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla .mono { font-family: var(--f-mono); font-size: .76rem; color: var(--texto-tenue); }
.tabla .acciones { display: flex; gap: .4rem; }

.insignia {
  display: inline-block; font-size: .68rem; font-weight: 600; padding: .2rem .6rem;
  border-radius: 99px; text-transform: uppercase; letter-spacing: .06em;
}
.insignia--publicado { background: #EAF3EC; color: #2E5E3C; }
.insignia--borrador  { background: #F2EFE6; color: #7A6A35; }

/* ---------------- Formularios ---------------- */
.formulario {
  background: var(--ficha); border: 1px solid var(--linea); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: 1.8rem; max-width: 860px;
}
.campo { margin-bottom: 1.2rem; }
.campo label { display: block; font-size: .78rem; font-weight: 600; letter-spacing: .04em; color: var(--tinta); margin-bottom: .35rem; }
.campo label small { font-weight: 400; color: var(--texto-tenue); }
.campo input[type=text], .campo input[type=number], .campo input[type=password],
.campo select, .campo textarea {
  width: 100%; font: inherit; font-size: .92rem; padding: .6rem .8rem;
  border: 1px solid var(--linea); border-radius: var(--radio); background: #fff; color: var(--texto);
}
.campo textarea { min-height: 140px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: 2px solid var(--tinta); outline-offset: 0; border-color: var(--tinta);
}
.campo input[type=file] { font-size: .85rem; }
.campos-dobles { display: grid; gap: 1.2rem; grid-template-columns: 1fr 1fr; }
.formulario .pie-form { display: flex; gap: .8rem; align-items: center; margin-top: 1.6rem; }
.boton--tinta { background: var(--tinta); color: #fff; width: auto; padding: .7rem 1.6rem; }
.boton--tinta:hover { background: #0A1F36; }

/* ---------------- Acceso (login) ---------------- */
.acceso-fondo {
  min-height: 100vh; display: grid; place-items: center;
  background: var(--tinta); padding: 1.5rem;
}
.acceso-caja {
  background: var(--ficha); border-radius: var(--radio); box-shadow: var(--sombra);
  width: min(400px, 100%); padding: 2.4rem 2.2rem; border-top: 5px solid var(--hilo-oro);
}
.acceso-caja .marca { color: var(--tinta); margin-bottom: 1.6rem; }
.acceso-caja .marca__escudo { border-color: var(--hilo-oro); color: var(--tinta); }
.acceso-caja .marca__texto small { color: var(--texto-tenue); }
.acceso-caja h1 { font-family: var(--f-display); font-size: 1.25rem; font-weight: 600; margin-bottom: 1.2rem; color: var(--tinta); }

/* ---------------- Visor PDF ---------------- */
.visor-pdf {
  margin-top: 1.6rem; border: 1px solid var(--linea); border-radius: var(--radio);
  overflow: hidden; height: 600px;
}
.visor-pdf iframe { width: 100%; height: 100%; border: 0; }

/* ---------------- Responsivo ---------------- */
.menu-movil-boton { display: none; }

@media (max-width: 900px) {
  .detalle { grid-template-columns: 1fr; }
  .panel-lateral { position: static; }
  .admin-cuerpo { grid-template-columns: 1fr; }
  .admin-lateral {
    flex-direction: row; align-items: center; flex-wrap: wrap;
    padding: .6rem .8rem; gap: .3rem;
  }
  .admin-lateral .marca { padding: .3rem .5rem; border: 0; }
  .admin-menu { display: flex; flex-wrap: wrap; padding: 0; }
  .admin-menu a { border-left: 0; border-bottom: 3px solid transparent; padding: .5rem .8rem; }
  .admin-menu a.activo { border-bottom-color: var(--hilo-oro); }
  .admin-lateral .cerrar-sesion { margin: 0 0 0 auto; border: 0; padding: .5rem .8rem; }
}

@media (max-width: 640px) {
  .cabecera__barra { flex-wrap: wrap; }
  .heroe::after { display: none; }
  .nav-publica { gap: .9rem; }
  .heroe { padding: 2rem 0 2.4rem; }
  .buscador button { padding: 0 1rem; }
  .filtros .resultado-cifra { margin-left: 0; width: 100%; }
  .fichas { grid-template-columns: 1fr; }
  .lista-datos div { grid-template-columns: 1fr; gap: .1rem; }
  .expediente { padding: 1.4rem 1.2rem; }
  .campos-dobles { grid-template-columns: 1fr; }
  .visor-pdf { height: 420px; }
}

:focus-visible { outline: 3px solid var(--hilo-oro); outline-offset: 2px; }