/* --------------------------------------------------------------------------
   Estilos generales de tema: franja de cifras, marcos de medios,
   tarjetas, carruseles, animaciones de aparición y botón volver-arriba.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Franja de cifras
   -------------------------------------------------------------------------- */
.stats-band { border-bottom: 1px solid var(--color-border); }

.stat { text-align: center; padding-block: 1rem; }

.stat-number {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stat-label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: 0.35rem;
}

.stats-band .col-stat + .col-stat { border-left: 1px solid var(--color-border); }

@media (max-width: 767.98px) {
  .stats-band .col-stat + .col-stat { border-left: 0; border-top: 1px solid var(--color-border); }
}

/* --------------------------------------------------------------------------
   Marcos de medios y placeholders
   Las imágenes/videos son la única fuente de color permitida.
   -------------------------------------------------------------------------- */
.media-frame {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--ink-100);
  border: 1px solid var(--color-border);
}

.media-frame img,
.media-frame video,
.media-frame iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

a.media-frame:hover img { transform: scale(1.04); }

.ratio-poster { aspect-ratio: 3 / 4; }
.ratio-photo { aspect-ratio: 4 / 3; }
.ratio-wide { aspect-ratio: 16 / 9; }
.ratio-square { aspect-ratio: 1 / 1; }

/* Placeholder gris para medios aún no cargados al gestor */
.media-ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(10,10,10,0.03) 14px 28px),
    linear-gradient(160deg, var(--ink-100), var(--ink-050));
  color: var(--ink-300);
}

.media-ph svg { width: 42px; height: 42px; }

/* Safari: un <img> con height:100% dentro de un grid absoluto no rellena la fila
   (queda centrado con huecos). Se posiciona absoluto para cubrir el placeholder. */
.media-frame .media-ph > img,
.media-ph > img.img-fluid {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
}

/* Imagen de exposición: se muestra completa (sin recorte), acotada a la pantalla */
.expo-media {
  display: flex;
  justify-content: center;
}

.expo-media img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  border: 1px solid var(--color-border);
  border-radius: inherit;
}

/* --------------------------------------------------------------------------
   Tarjetas
   -------------------------------------------------------------------------- */
.card-ink {
  height: 100%;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  transition: border-color 0.2s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.card-ink:hover {
  border-color: var(--ink-900);
  transform: translateY(-4px);
  box-shadow: 8px 8px 0 rgba(10, 10, 10, 0.07);
}
#profesores .card-ink:hover {
  border-color: transparent;
  transform: none;
  box-shadow: none;
}

.card-ink .card-body { padding: 1.5rem; }

.card-ink .card-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}

.card-ink .card-text {
  font-size: 0.92rem;
  color: var(--color-text-muted);
}

/* Enlace que cubre toda la tarjeta */
.card-link-cover { text-decoration: none; color: inherit; display: block; height: 100%; }
.card-link-cover:hover { color: inherit; }

/* Flecha de acción en tarjetas */
.card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 1rem;
}

.card-cta svg { width: 18px; height: 18px; transition: transform 0.2s ease; }
.card-ink:hover .card-cta svg { transform: translateX(5px); }

/* Noticias: tarjeta destacada + secundarias */
.news-date {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.news-title-lg {
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  margin-top: 0.5rem;
}

/* Tiles de servicios / posgrados / publicaciones */
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.25rem;
  height: 100%;
  min-height: 168px;
  padding: 1.4rem;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  text-decoration: none;
  color: var(--color-text);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Etiqueta roja (Convocatoria / En curso) anclada arriba a la derecha del
   tile; el icono ya ocupa la esquina superior izquierda. */
.tile .news-card-category {
  top: 1rem;
  right: 1rem;
  left: auto;
}

.tile:hover, .tile:focus-visible {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: var(--ink-000);
}

.tile:hover .tile-meta, .tile:focus-visible .tile-meta { color: var(--ink-300); }

.tile-icon svg { width: 30px; height: 30px; }

.tile-title {
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
  margin: 0;
  /* Hereda del .tile: el h3 no debe quedarse negro cuando el fondo se invierte */
  color: inherit;
}

.tile-meta {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: color 0.2s ease;
}

.tile-meta svg { width: 14px; height: 14px; }

/* --------------------------------------------------------------------------
   Carruseles (Bootstrap, ajustados a B/N)
   -------------------------------------------------------------------------- */
.carousel-ink .carousel-control-prev,
.carousel-ink .carousel-control-next {
  width: 56px;
  height: 56px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--ink-900);
  border: 1px solid var(--ink-900);
  border-radius: 50%;
  opacity: 1;
  transition: background-color 0.2s ease;
}

.carousel-ink .carousel-control-prev { left: 0; }
.carousel-ink .carousel-control-next { right: 0; }

/* -24px cabe siempre: padding del container (12px) + margen mínimo a 992px (16px) */
@media (min-width: 992px) {
  .carousel-ink .carousel-control-prev { left: -24px; }
  .carousel-ink .carousel-control-next { right: -24px; }
}

.carousel-ink .carousel-control-prev:hover,
.carousel-ink .carousel-control-next:hover { background: var(--ink-500); }

/* Chevrons de Bootstrap Icons (mismo recurso que .hero-ctrl) */
.carousel-ink .carousel-control-prev i,
.carousel-ink .carousel-control-next i {
  font-size: 1.5rem;
  color: var(--ink-000);
}

.carousel-ink .carousel-indicators { position: static; margin-top: 1.5rem; gap: 0.5rem; }

/* Indicadores en barras, como .hero-indicators pero sobre fondo claro */
.carousel-ink .carousel-indicators [data-bs-target] {
  width: 28px;
  height: 3px;
  border-radius: 0;
  background: var(--ink-300);
  border: 0;
  opacity: 1;
  transition: width 0.3s ease, background-color 0.3s ease;
}

.carousel-ink .carousel-indicators .active {
  width: 44px;
  background: var(--ink-900);
}

/* --------------------------------------------------------------------------
   Animaciones de aparición (respetan reduced motion)
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Volver arriba
   -------------------------------------------------------------------------- */
.to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  /* Por debajo del backdrop del offcanvas de Bootstrap (1040) */
  z-index: 1035;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: var(--ink-900);
  color: var(--ink-000);
  border: 1px solid var(--ink-900);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }

.to-top:hover { background: var(--ink-000); color: var(--ink-900); }

.to-top svg { width: 20px; height: 20px; }

.dropdown-item.active, .dropdown-item:active { background-color: var(--ink-900); color: var(--ink-000); }

.c--search-form > .search-form.google-cse {
  display: none;
}
.c--search-form h2 {
  display: none;
}
.autoridades .prof-card {
  background: #f3f4f4;
}

.prof-card a:not(#profesores .prof-card a) {color: var(--color-text) !important;}

/* Retrato de autoridad: encuadre vertical que recorta un 15% del ancho
   de la foto cuadrada (se pierden los laterales, sin deformar) */
.autoridades .team-thumb {
  aspect-ratio: 0.85 / 1;
  overflow: hidden;
}

.autoridades .team-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(85%);
  transition: var(--transition);
}
.contactos .team-thumb {
  aspect-ratio: 0.85 / 1;
  overflow: hidden;
}

/* Correo de la autoridad: icono de sobre + dirección. Las tarjetas son
   angostas (col-lg-3) y los correos institucionales largos, así que el texto
   corta por cualquier punto y el icono nunca se encoge. */
.autoridades .team-mail {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 100%;
  min-height: 44px;
  margin-top: 0.35rem;
  font-size: 0.85rem;
  line-height: 1.4;
  text-decoration: none;
}

/* Color propio: .prof-card a lleva !important y no deja pintar el enlace,
   pero el SVG es hijo y sí admite su propio tono. */
.autoridades .team-mail-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--ink-500);
  transition: color 0.2s ease;
}

.autoridades .team-mail-text {
  min-width: 0;
  overflow-wrap: anywhere;
  border-bottom: none;
  padding-bottom: 1px;
  transition: border-color 0.2s ease;
}

.autoridades .team-mail:hover .team-mail-icon,
.autoridades .team-mail:focus-visible .team-mail-icon {
  color: var(--ink-900);
}

.autoridades .team-mail:hover .team-mail-text,
.autoridades .team-mail:focus-visible .team-mail-text {
  border-bottom-color: var(--ink-900);
}

.autoridades .team-mail:focus-visible {
  outline: 2px solid var(--ink-900);
  outline-offset: 3px;
}

/* Horarios de atención (paragraph Horarios en Autoridades) */
.horario-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  padding: 1.5rem;
  transition: border-color 0.2s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.horario-card:hover {
  border-color: var(--ink-900);
  transform: translateY(-4px);
  box-shadow: 8px 8px 0 rgba(10, 10, 10, 0.07);
}

.horario-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
}

.horario-panel {
  flex: 1 1 auto;
  background: var(--ink-050);
  padding: 1.25rem 1.5rem;
}

/* Tabla Horario / Día dentro de la descripción (texto con formato) */
.horario-panel table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.horario-panel th {
  font-weight: 500;
  color: var(--color-text-muted);
  text-align: left;
}

.horario-panel th,
.horario-panel td {
  background: transparent;
  border: 0;
  padding: 0.65rem 1rem;
  vertical-align: top;
  color: var(--color-text-muted);
}

/* Separador vertical entre columnas y líneas horizontales entre filas */
.horario-panel th + th,
.horario-panel td + td { border-left: 1px solid var(--ink-900); }

.horario-panel tr + tr th,
.horario-panel tr + tr td,
.horario-panel thead + tbody tr:first-child td { border-top: 1px solid var(--ink-900); }

.horario-panel p:last-child { margin-bottom: 0; }

  @media only screen and (min-width: 768px) {
    .practicas-subtitle {
      padding-top: 1.5rem;
      padding-bottom: 1.5rem;
    }
  }
.imgrayscale{
  -webkit-filter: grayscale(100%);
}
.form-control:focus {
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  border-color: var(--bs-body-color);
  outline: 0;
  box-shadow: none;
}
.imggrayscale{
  filter: grayscale(85%);
}
#centro-diseno .rule {
  width: 72px;
  height: 3px;
  background: #fff;
  margin-top: 1.25rem;
}