/* =========================================================================
   FotoCiencia — sistema de diseño
   Alineado al Manual de Marca / Procedimiento Operativo Portales Web de
   SENACYT (colores institucionales, tipografía Helvetica/Roboto, look &
   feel de claridad/limpieza/simplicidad con fondos predominantemente
   blancos, accesibilidad y botones táctiles ≥46px).
   ========================================================================= */

:root {
  --fc-celeste: #00aeed;     /* color de marca — menús, acentos interactivos */
  --fc-azul: #1c75bc;        /* color de marca — hover, header/footer, CTAs */
  --fc-azul-dark: #14568c;   /* derivado del azul de marca, para hover/contraste AA */
  --fc-gris: #b2b4b6;        /* color de marca — bordes, texto secundario */
  --fc-gris-copyright: #cccccc;
  --fc-bg-topbar: #efefef;
  --fc-bg-light: #f4f4f4;    /* color de marca — fondos alternos */
  --fc-surface: #ffffff;
  --fc-ink: #333333;
  --fc-ink-soft: #58595b;
  --fc-ink-faint: #646f78;     /* gris apagado — 5.1:1 sobre blanco (WCAG AA). Antes #7c8b94 daba 3.5:1 */
  --fc-danger: #d64545;
  --fc-success: #2fa86b;
  --fc-line: rgba(51, 51, 51, 0.12);
  --fc-shadow: 0 8px 24px rgba(28, 117, 188, 0.08);
  --fc-shadow-lift: 0 14px 32px rgba(28, 117, 188, 0.14);
  --fc-radius: 10px;

  /* Color identificador de cada categoría del concurso.
     No es decoración: permite reconocer la categoría de un vistazo en la
     portada, en el panel de revisión y en la pantalla del jurado, donde hay
     cientos de fotografías mezcladas.
     Los cuatro superan 4.5:1 sobre blanco (WCAG AA) tanto para texto como
     para texto blanco encima; el naranja se oscureció de #c25e00 a #b35700
     justamente por eso. */
  --fc-cat-investigacion: #1c75bc;   /* 4.86:1 */
  --fc-cat-microscopica:  #6b3fa0;   /* 7.38:1 */
  --fc-cat-sociedad:      #b35700;   /* 4.91:1 */
  --fc-cat-ambiente:      #1f7a4d;   /* 5.32:1 */

  /* --- Estados de interacción -------------------------------------------
     Faltaban las variantes hover/active del color principal, así que cada
     componente las improvisaba con un valor suelto. Ahora salen de aquí. */
  --fc-azul-hover:  #17629e;
  --fc-azul-active: #114b79;

  /* --- Colores semánticos ------------------------------------------------
     Dos tonos por estado: el fuerte para texto e iconos (todos verificados
     por encima de 4.5:1 sobre blanco) y el suave para fondos de avisos.
     Antes solo existía el fuerte y los fondos se escribían a mano con
     rgba() distintos en cada sitio. */
  --fc-success-fuerte: #1c7a4f;   /* 4.60:1 */
  --fc-success-suave:  #e8f6ef;
  --fc-warning-fuerte: #8a5a00;   /* 5.46:1 */
  --fc-warning-suave:  #fdf3e2;
  --fc-error-fuerte:   #b3241f;   /* 5.94:1 */
  --fc-error-suave:    #fdecea;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

html { scroll-behavior: smooth; height: 100%; }

body {
  background-color: var(--fc-surface);
  color: var(--fc-ink);
  /* Open Sans, autoalojada (ver vendor/fonts/open-sans/). Detrás quedan las
     de sistema por si el archivo no llegara a cargar: el texto se lee igual,
     solo cambia la forma de las letras. */
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px; /* Body — 17 px, peso 400 */
  font-weight: 400;
  line-height: 1.6;
  /* Footer anclado al fondo del viewport en páginas con poco contenido
     (ej. Ediciones con una sola fila) en vez de quedar flotando arriba con
     un vacío debajo — body ocupa todo el alto, main crece para llenarlo. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body > main {
  flex: 1 0 auto;
}

h1, h2, h3, h4, h5, h6, .fc-display {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--fc-ink);
}
/* Tamaños según manual: H1 30px/700, H2 24px/400, H3 20px/700 */
h1 { font-size: 30px; font-weight: 700; }
h2 { font-size: 24px; font-weight: 400; }
h3 { font-size: 20px; font-weight: 700; }

a { color: var(--fc-azul); }
a:hover { color: var(--fc-azul-dark); }

/* ---------- Navbar ---------- */
.fc-navbar {
  background: var(--fc-azul);
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

.fc-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.fc-brand img { display: block; width: auto; }

.fc-navbar .nav-link {
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 500;
  padding: 0.6rem 0.9rem !important;
  min-height: 46px; /* botones táctiles — mínimo 46px de alto (manual de marca) */
  display: flex;
  align-items: center;
  border-radius: 6px;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.fc-navbar .nav-link:hover { background: rgba(255, 255, 255, 0.12); color: #fff !important; }
.fc-navbar .btn-link.nav-link { text-decoration: none; }

.fc-btn-accent {
  /* #007aad, no --fc-celeste: con el celeste de marca (#00aeed) el texto
     blanco quedaba en 2.54:1, muy por debajo del 4.5:1 de WCAG AA. Este tono
     más profundo da 4.79:1 y sigue en la familia de azules de marca. La
     variable --fc-celeste no se toca: se sigue usando para bordes, anillos de
     foco y acentos, que no tienen texto encima. */
  background: #007aad;
  border-color: #007aad;
  color: #fff;
  font-weight: 600;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.fc-btn-accent:hover {
  background: #006a96;
  border-color: #006a96;
  color: #fff;
  box-shadow: 0 6px 16px rgba(0, 174, 237, 0.35);
}

/* ---------- Buttons (global) ---------- */
.btn {
  border-radius: var(--fc-radius);
  font-weight: 600;
  min-height: 46px; /* accesibilidad táctil, manual de marca sección 7 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.btn-primary {
  background-color: var(--fc-azul);
  border-color: var(--fc-azul);
}
.btn-primary:hover {
  background-color: var(--fc-azul-dark);
  border-color: var(--fc-azul-dark);
  box-shadow: var(--fc-shadow);
}
.btn-outline-primary { color: var(--fc-azul); border-color: var(--fc-azul); }
.btn-outline-primary:hover { background-color: var(--fc-azul); border-color: var(--fc-azul); }
.btn-success { background-color: var(--fc-success); border-color: var(--fc-success); }
.btn-danger { background-color: var(--fc-danger); border-color: var(--fc-danger); }

/* ---------- Hero (home) — fondo claro, conforme al look&feel institucional ---------- */
.fc-hero {
  background: var(--fc-bg-light);
  padding: 4rem 0 4.5rem;
  border-bottom: 1px solid var(--fc-line);
}

.fc-hero .eyebrow {
  display: inline-block;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fc-azul);
  background: rgba(0, 174, 237, 0.12);
  border: 1px solid rgba(0, 174, 237, 0.35);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  margin-bottom: 1.25rem;
}

.fc-hero h1 {
  color: var(--fc-ink);
  font-size: clamp(28px, 4.5vw, 40px);
  line-height: 1.15;
}

.fc-hero p.lead {
  color: var(--fc-ink-soft);
  max-width: 50ch;
  font-size: 18px;
}

/* ---------- Category cards ---------- */
.fc-cat-card {
  background: var(--fc-surface);
  border: 1px solid var(--fc-line);
  border-radius: var(--fc-radius);
  padding: 1.75rem 1.5rem;
  height: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.fc-cat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--fc-shadow-lift);
  border-color: var(--fc-celeste);
}
.fc-cat-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  margin-bottom: 1rem;
  background: var(--fc-bg-light);
  color: var(--fc-azul);
}
.fc-cat-card h3 { font-size: 17px; margin-bottom: 0.5rem; }
.fc-cat-card p { color: var(--fc-ink-soft); font-size: 15px; margin-bottom: 0; }

/* ---------- Steps ("Cómo participar") ---------- */
.fc-step {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
}
.fc-step-num {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--fc-azul);
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fc-step h3 { font-size: 16px; margin-bottom: 0.25rem; }
.fc-step p { color: var(--fc-ink-soft); font-size: 15px; margin-bottom: 0; }

/* ---------- Sections ---------- */
.fc-section { padding: 4rem 0; }
.fc-section-alt { background: var(--fc-bg-light); }
.fc-eyebrow-dark {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* --fc-azul-dark, no --fc-azul: este rótulo va sobre el gris de sección
     (#f4f4f4), donde --fc-azul daba 4.42:1. El tono oscuro da ~7:1. */
  color: var(--fc-azul-dark);
}

/* ---------- Cards (general, used in forms/galleries) ---------- */
.card {
  border: 1px solid var(--fc-line);
  border-radius: var(--fc-radius);
  box-shadow: 0 2px 10px rgba(51, 51, 51, 0.05);
  transition: box-shadow 0.2s ease;
}
.card:hover { box-shadow: var(--fc-shadow); }

/* ---------- Forms ---------- */
.form-control, .form-select {
  border-radius: 6px;
  border-color: var(--fc-gris);
  padding: 0.6rem 0.85rem;
  min-height: 46px;
}
.form-control:focus, .form-select:focus {
  border-color: var(--fc-celeste);
  box-shadow: 0 0 0 0.2rem rgba(0, 174, 237, 0.2);
}
.form-label { font-weight: 700; font-size: 15px; color: var(--fc-ink); }
.form-text { color: var(--fc-ink-faint); }

/* ---------- Footer ----------
   El manual de marca pide fondo blanco con el logo a color y una franja de
   copyright gris debajo. No se cuenta con una versión a color del logo
   FOTOCIENCIA (solo la versión blanca, pensada para fondo oscuro) — como
   compromiso se usa el azul de marca como fondo de esa franja, que sigue
   siendo un color oficial, en vez de inventar una versión de logo que no
   se tiene. */
.fc-footer .bg-primary-fc { background: var(--fc-azul); }
.fc-footer .fc-brand { display: inline-flex; }
.fc-footer .copyright {
  background: var(--fc-gris-copyright);
  color: #4d4d4d;
  font-size: 12px;
}

/* ---------- Scroll-reveal animation ---------- */
.fc-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fc-reveal.is-visible { opacity: 1; transform: translateY(0); }
.fc-reveal-delay-1 { transition-delay: 0.08s; }
.fc-reveal-delay-2 { transition-delay: 0.16s; }
.fc-reveal-delay-3 { transition-delay: 0.24s; }
.fc-reveal-delay-4 { transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
  .fc-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Estado vacío (listas de fotos sin resultados) ---------- */
.fc-empty-state {
  text-align: center;
  padding: 2.5rem 1rem;
  border: 1px dashed var(--fc-gris);
  border-radius: var(--fc-radius);
  color: var(--fc-ink-faint);
}
.fc-empty-state i {
  display: block;
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
  color: var(--fc-gris);
}
.fc-empty-state p { margin-bottom: 0; }

/* ---------- Cuadrícula de fotos a evaluar (jurados) ---------- */
.fc-photo-card-link { display: block; text-decoration: none; color: inherit; }
.fc-photo-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.fc-photo-card-link:hover .fc-photo-card,
.fc-photo-card-link:focus-visible .fc-photo-card {
  transform: translateY(-3px);
  box-shadow: var(--fc-shadow-lift);
  border-color: var(--fc-celeste);
}
.fc-photo-card-link:focus-visible { outline: 3px solid var(--fc-celeste); outline-offset: 2px; border-radius: var(--fc-radius); }
.fc-photo-card .card-title { color: var(--fc-ink); }
.fc-badge-done, .fc-badge-pending {
  font-size: 13px;
  font-weight: 600;
  padding: 0.45em 0.75em;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}
.fc-badge-done { background: var(--fc-success); }
.fc-badge-pending { background: var(--fc-gris); color: var(--fc-ink); }
.fc-photo-card-cta {
  border-top: 1px solid var(--fc-line);
  padding: 0.75rem 1rem;
  font-weight: 700;
  color: var(--fc-azul);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ---------- Evaluación de fotografías (jurados) ----------
   Pantalla pensada para jurados que pueden ser personas mayores o con
   dificultad visual/motriz: texto más grande de lo habitual, botones de
   puntaje amplios con etiqueta de texto (no solo un número), fondo neutro
   detrás de la foto para no cansar la vista, y navegación clara entre
   fotografías sin depender de volver a la cuadrícula. */
.fc-eval-topbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.fc-eval-back {
  font-weight: 600;
  text-decoration: none;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.fc-eval-progress {
  font-weight: 700;
  color: var(--fc-ink-soft);
  background: var(--fc-bg-light);
  border-radius: 999px;
  padding: 0.4rem 1rem;
}
.fc-eval-nav { display: flex; justify-content: space-between; gap: 1rem; }
.fc-eval-nav .btn { flex: 1 1 0; }
.fc-eval-nav .btn.disabled { opacity: 0.45; }

.fc-eval-photo-frame {
  background: var(--fc-bg-light);
  border-radius: var(--fc-radius);
  padding: 1.25rem;
}
.fc-eval-photo-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: zoom-in;
  position: relative;
}
.fc-eval-photo-btn img { width: 100%; display: block; }
.fc-eval-photo-btn:focus-visible {
  outline: 3px solid var(--fc-celeste);
  outline-offset: 3px;
}
.fc-eval-zoom-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.85rem;
  font-weight: 600;
  font-size: 15px;
  color: var(--fc-azul);
}

.fc-eval-title { font-size: 1.6rem; margin-bottom: 0.5rem; }
.fc-eval-meta { color: var(--fc-ink-soft); font-size: 16px; margin-bottom: 1rem; }
.fc-eval-description { font-size: 17px; line-height: 1.6; }

.fc-eval-criteria {
  background: var(--fc-bg-light);
  border-radius: var(--fc-radius);
  padding: 1rem 1.25rem;
  font-size: 16px;
}
.fc-eval-criteria-title {
  font-weight: 700;
  color: var(--fc-azul);
  margin-bottom: 0.5rem;
}
.fc-eval-tiebreak {
  background: rgba(214, 69, 69, 0.08);
  color: var(--fc-danger);
  border-radius: 8px;
  padding: 0.6rem 0.9rem;
  font-weight: 600;
}

.fc-eval-score-legend {
  font-weight: 700;
  font-size: 18px;
  color: var(--fc-ink);
  padding: 0;
  margin-bottom: 0.75rem;
  width: 100%;
}
.fc-score-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.6rem;
}
.fc-score-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.fc-score-label {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  min-height: 76px;
  padding: 0.6rem 0.35rem;
  border: 2px solid var(--fc-gris);
  border-radius: var(--fc-radius);
  color: var(--fc-ink);
  cursor: pointer;
  text-align: center;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.fc-score-number { font-size: 1.4rem; font-weight: 700; line-height: 1; }
.fc-score-word { font-size: 12px; font-weight: 600; }
.fc-score-label:hover { border-color: var(--fc-celeste); }
.fc-score-input:checked + .fc-score-label {
  background: var(--fc-azul);
  border-color: var(--fc-azul);
  color: #fff;
}
.fc-score-input:checked + .fc-score-label::after {
  content: "\2713";
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 12px;
  font-weight: 700;
}
.fc-score-input:focus-visible + .fc-score-label {
  outline: 3px solid var(--fc-celeste);
  outline-offset: 2px;
}

.fc-eval-modal .modal-body { background: var(--fc-ink); }
.fc-eval-modal img { max-height: 80vh; }

/* ---------- Bases del concurso / contenido largo editable ---------- */
.fc-bases-content {
  font-size: 17px;
  line-height: 1.7;
  max-width: 70ch;
}

/* ---------- Gestión de ediciones (admin) ---------- */
.fc-category-row {
  border: 1px solid var(--fc-line);
  border-radius: var(--fc-radius);
  padding: 1rem;
  margin-bottom: 0.75rem;
}
.fc-edition-badge-active {
  background: var(--fc-success);
}
.fc-edition-badge-inactive {
  background: var(--fc-gris);
  color: var(--fc-ink);
}

/* ---------- Responsive tweaks ---------- */
@media (max-width: 767.98px) {
  .fc-hero { padding: 2.5rem 0 3rem; text-align: center; }
  .fc-hero p.lead { max-width: none; margin-left: auto; margin-right: auto; }
  .fc-section { padding: 2.5rem 0; }
  .navbar-nav { padding-top: 0.75rem; }
  .fc-eval-nav { flex-direction: column; }
}

/* Teléfonos: 5 columnas apretadas son difíciles de tocar con precisión —
   se apilan en una sola columna, cada opción de ancho completo y con texto
   más grande (número y palabra lado a lado). */
@media (max-width: 479.98px) {
  .fc-score-grid { grid-template-columns: 1fr; gap: 0.5rem; }
  .fc-score-label {
    flex-direction: row;
    justify-content: flex-start;
    gap: 0.75rem;
    min-height: 58px;
    padding: 0.6rem 1rem;
  }
  .fc-score-word { font-size: 16px; }
}

/* --- Panel de revisión de fotografías (RRPP) --- */

/* Barra de acciones en lote, fija al pie. Con 48 o 96 fotos por página, tener
   los botones solo al final obligaba a recorrer toda la grilla en cada tanda. */
.fc-barra-acciones {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  background: #fff;
  border-top: 1px solid var(--bs-border-color, #dee2e6);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, .08);
}

/* Espacio extra al pie mientras la barra está visible, para que no tape la
   última fila de tarjetas ni la paginación. */
body.fc-con-barra {
  padding-bottom: 5.5rem;
}

/* La miniatura se puede ampliar: que el cursor lo anuncie. */
.fc-ampliable {
  cursor: zoom-in;
}

/* Iconos de redes sociales del pie. Antes eran <span> sin enlace; ahora son
   <a>, así que necesitan estado de foco visible para navegación por teclado. */
.fc-red-social {
  text-decoration: none;
  opacity: .85;
  transition: opacity .15s ease-in-out, transform .15s ease-in-out;
}
.fc-red-social:hover,
.fc-red-social:focus-visible {
  color: #fff;
  opacity: 1;
  transform: translateY(-2px);
}
.fc-red-social:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- Vista de mosaico (hoja de contactos) del panel de revisión ---
   Rejilla fluida: entran tantas columnas como quepan sin bajar de 150px por
   miniatura, así se adapta sola de un monitor grande a una laptop. */
.fc-mosaico {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .5rem;
}

.fc-mosaico-item {
  position: relative;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: .375rem;
  overflow: hidden;
  background: #fff;
}

/* Borde rojo en las que no cumplen: con solo la imagen a la vista, es la
   señal que reemplaza a la lista de motivos de la tarjeta completa. */
.fc-mosaico-item--alerta {
  border-color: var(--bs-danger, #dc3545);
  box-shadow: inset 0 0 0 2px var(--bs-danger, #dc3545);
}

/* Relación fija para que la rejilla no salte según el alto de cada foto. */
.fc-mosaico-img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.fc-mosaico-vacia {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f3f5;
  color: #868e96;
}

/* La casilla va encima de la imagen, con fondo propio para que se vea sobre
   fotos claras u oscuras. */
.fc-mosaico-check {
  position: absolute;
  top: .35rem;
  left: .35rem;
  z-index: 2;
  background-color: rgba(255, 255, 255, .9);
  border-color: rgba(0, 0, 0, .4);
}

.fc-mosaico-alerta {
  position: absolute;
  top: .35rem;
  right: .35rem;
  z-index: 2;
  background: var(--bs-danger, #dc3545);
  color: #fff;
  border-radius: .25rem;
  padding: .1rem .35rem;
  font-size: .7rem;
  font-weight: 600;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: .02em;
}

/* Franja con los motivos concretos del incumplimiento. El borde rojo dice
   "algo falla"; esto dice qué, que era justo lo que el equipo de RRPP no
   podía saber sin abrir cada foto. */
.fc-mosaico-motivos {
  background: var(--bs-danger, #dc3545);
  color: #fff;
  font-size: .7rem;
  font-weight: 600;
  line-height: 1.4;
  padding: .15rem .4rem;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fc-mosaico-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .15rem .4rem;
  font-size: .75rem;
  color: #6c757d;
}

.fc-mosaico-meta {
  border: 0;
  background: none;
  padding: 0;
  color: #6c757d;
  line-height: 1;
}
.fc-mosaico-meta:hover,
.fc-mosaico-meta:focus-visible {
  color: var(--bs-primary, #0d6efd);
}

/* --- Vista de lista --- */
.fc-tabla-thumb {
  width: 64px;
  height: 44px;
  object-fit: cover;
  border-radius: .25rem;
  cursor: zoom-in;
}

/* Aviso de calidad en el mosaico — ámbar, deliberadamente distinto del rojo.
   El rojo significa "incumple las Bases"; esto es solo una señal para el
   revisor (ej. peso bajo para impresión), que las Bases no exigen. */
.fc-mosaico-aviso {
  background: #fff3cd;
  color: #664d03;
  font-size: .7rem;
  font-weight: 600;
  line-height: 1.4;
  padding: .15rem .4rem;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Bases del concurso: contenido enriquecido --- */

/* El admin pega desde Word, pero los colores y tipografías se descartan al
   sanear: el estilo lo pone el sitio para que la página se vea uniforme aunque
   el documento original venga con cualquier formato. */
.fc-bases-content {
  line-height: 1.7;
}
.fc-bases-content h2 {
  font-size: 1.35rem;
  font-weight: 600;
  color: #2c73b5;
  margin-top: 2rem;
  margin-bottom: .75rem;
  padding-bottom: .35rem;
  border-bottom: 2px solid #e9ecef;
}
.fc-bases-content h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: .5rem;
}
.fc-bases-content h2:first-child,
.fc-bases-content h3:first-child { margin-top: 0; }
.fc-bases-content p { margin-bottom: 1rem; }
.fc-bases-content ul,
.fc-bases-content ol { margin-bottom: 1rem; padding-left: 1.5rem; }
.fc-bases-content li { margin-bottom: .35rem; }
.fc-bases-content blockquote {
  border-left: 3px solid #2c73b5;
  padding: .25rem 0 .25rem 1rem;
  margin: 1rem 0;
  color: #495057;
}

/* Las tablas de Word vienen sin estilo utilizable; se les da el del sitio.
   El contenedor con scroll evita que una tabla ancha rompa el diseño en
   celulares. */
.fc-bases-content table {
  width: 100%;
  margin-bottom: 1.25rem;
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
}
.fc-bases-content th,
.fc-bases-content td {
  border: 1px solid #dee2e6;
  padding: .5rem .75rem;
  vertical-align: top;
}
.fc-bases-content thead th,
.fc-bases-content tr:first-child th {
  background: #f1f5f9;
  font-weight: 600;
  text-align: left;
}
.fc-bases-content tbody tr:nth-child(even) { background: #fafbfc; }

/* --- Editor de las Bases en el panel de administración --- */
.fc-editor-barra {
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-bottom: 0;
  border-radius: .375rem .375rem 0 0;
  padding: .4rem;
  background: #f8f9fa;
  flex-wrap: wrap;
}
.fc-editor {
  min-height: 22rem;
  max-height: 40rem;
  overflow-y: auto;
  border-radius: 0 0 .375rem .375rem;
  background: #fff;
}
.fc-editor:focus {
  outline: 0;
  box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .15);
}
/* Mismo aspecto que tendrá publicado, para editar viendo el resultado. */
.fc-editor h2 { font-size: 1.3rem; color: #2c73b5; margin-top: 1.25rem; }
.fc-editor h3 { font-size: 1.05rem; margin-top: 1rem; }
.fc-editor table { width: 100%; border-collapse: collapse; margin: .75rem 0; }
.fc-editor th, .fc-editor td { border: 1px solid #dee2e6; padding: .35rem .5rem; }
.fc-editor th { background: #f1f5f9; }

/* --- Cumplimiento de las Bases en el panel de revisión ---
   Verde cuando cumple, rojo apagado cuando no. El rojo de Bootstrap
   (table-danger) resultaba demasiado saturado: con muchas filas marcadas la
   pantalla se volvía agresiva y el texto rojo sobre fondo rosa fuerte costaba
   de leer. Estos tonos mantienen la señal sin gritar. */
/* El verde pesa más que el rojo a propósito: en la revisión se está buscando
   las fotos aptas, no descartando las malas. La que cumple debe saltar a la
   vista; la que no, basta con que se distinga sin competir por la atención. */
.fc-fila-cumple > td {
  background-color: #dcf1e4;
  border-top-color: #b7ddc6;
}
.fc-fila-cumple > td:first-child {
  box-shadow: inset 4px 0 0 #2f7a4d;
}
/* El verde de Bootstrap (#198754) da 3.83:1 sobre este fondo y el tono del
   marco (#2f7a4d) 4.42:1 — ambos por debajo del mínimo accesible de 4.5:1.
   Se oscurece solo el texto, que es lo que hay que leer; el marco y las
   insignias conservan el verde más vivo porque son superficie, no tipografía. */
.fc-fila-cumple td .text-success {
  color: #27673f;
  font-weight: 600;
  font-size: .95rem;
}

/* Casi neutro: se lee que algo falla, pero no domina la pantalla cuando hay
   muchas filas marcadas. */
.fc-fila-incumple > td {
  background-color: #fbf7f7;
}

/* Texto de los motivos: rojo oscurecido para que contraste bien sobre el fondo
   claro de la fila. El .text-danger de Bootstrap es muy brillante encima del
   rosa y se lee peor. */
.fc-incumple-texto {
  color: #9a5a5e;
}

/* Insignias de las tarjetas, en la misma familia de tonos. */
.fc-badge-incumple {
  background-color: #9a5a5e;
  color: #fff;
  font-weight: 500;
}
.fc-badge-cumple {
  background-color: #2f7a4d;
  color: #fff;
  font-size: .8rem;
  padding: .4rem .6rem;
}

/* En el mosaico pasa lo mismo: el azulejo apto lleva un marco verde grueso que
   lo hace destacar entre decenas de miniaturas; el que no cumple solo un borde
   tenue, porque su franja de motivos ya informa lo necesario. */
.fc-mosaico-item--ok {
  border-color: #2f7a4d;
  box-shadow: inset 0 0 0 3px #2f7a4d;
}
.fc-mosaico-item--ok::after {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  top: .35rem;
  right: .35rem;
  z-index: 2;
  background: #2f7a4d;
  color: #fff;
  border-radius: 50%;
  width: 1.35rem;
  height: 1.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
}

.fc-mosaico-item--alerta {
  border-color: #d8c3c5;
  box-shadow: inset 0 0 0 1px #d8c3c5;
}
.fc-mosaico-alerta,
.fc-mosaico-motivos {
  background: #9a5a5e;
}

/* Tarjeta apta: marco verde para que resalte en la cuadrícula. */
.fc-tarjeta-cumple {
  border-color: #2f7a4d;
  border-width: 2px;
}

/* ==========================================================================
   Pulido de la página de jurados y de los informes
   --------------------------------------------------------------------------
   Todo lo de abajo usa los tokens de marca de :root — sin colores sueltos,
   para que el día que cambie la paleta institucional cambie también esto.
   ========================================================================== */

/* --- Tarjetas de categoría (pantalla inicial del jurado) ------------------
   Antes era una lista de texto donde el avance ("3/12 evaluadas") era un
   badge pequeño al final de la fila. El jurado entra aquí cada vez que
   retoma el trabajo, así que lo que necesita ver primero es cuánto le falta
   en cada categoría, no el nombre. De ahí la barra de progreso. */
/* Se listan los dos nombres a propósito: la vista del jurado usa
   .fc-jurado-cat-grid y esta regla solo declaraba .fc-cat-grid, así que la
   cuadrícula no se aplicaba y las tarjetas salían pegadas una debajo de otra
   (reportado en CU-JUR-002 como "muy pegado uno del otro"). El espacio se
   amplía de 1.25rem a 1.75rem. */
.fc-cat-grid,
.fc-jurado-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.75rem;
}
.fc-jurado-cat {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.25rem;
  background: var(--fc-surface);
  border: 1px solid var(--fc-line);
  border-radius: var(--fc-radius);
  box-shadow: var(--fc-shadow);
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.fc-jurado-cat:hover,
.fc-jurado-cat:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--fc-shadow-lift);
  border-color: var(--fc-celeste);
  color: inherit;
}
.fc-jurado-cat:focus-visible { outline: 3px solid var(--fc-celeste); outline-offset: 2px; }
.fc-jurado-cat-titulo {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--fc-ink);
  margin: 0;
  line-height: 1.3;
}
.fc-jurado-cat-cifra {
  font-size: 0.875rem;
  color: var(--fc-ink-soft);
}
.fc-jurado-cat-cifra strong { color: var(--fc-azul); font-size: 1.05rem; }
.fc-jurado-cat-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fc-azul);
}
.fc-jurado-cat--completa { border-left: 4px solid var(--fc-success); }

/* Barra de progreso: 3px de alto, sin texto encima — el número va aparte. */
.fc-progress {
  height: 8px;
  border-radius: 999px;
  background: var(--fc-bg-light);
  overflow: hidden;
}
.fc-progress-bar {
  height: 100%;
  border-radius: 999px;
  background: var(--fc-celeste);
  transition: width 0.3s ease;
}
.fc-progress-bar--done { background: var(--fc-success); }

/* --- Podio de resultados -------------------------------------------------
   El 1°, 2° y 3° lugar salían como tres filas más de una tabla, idénticas a
   la cuarta. Se destacan porque son la salida real del concurso. */
.fc-podio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.fc-podio-item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.25rem;
  border-radius: var(--fc-radius);
  background: var(--fc-bg-light);
  border: 1px solid var(--fc-line);
  border-top: 4px solid var(--fc-gris);
}
/* Oro, plata y bronce. El color NO es el único indicador: cada tarjeta
   lleva además el número en la medalla y el rótulo escrito ("1er lugar"),
   para que se distinga sin depender de la vista del color. El resto de la
   categoría queda en la tabla, sin color, como se pidió en BUG-JURADO-001. */
/* Tonos oscurecidos hasta pasar el contraste AA (4.5:1) sobre blanco, tanto
   para el rótulo del lugar como para el número en blanco dentro de la
   medalla: oro 4.97:1, plata 5.09:1, bronce 5.31:1. El dorado habitual
   (#d4a017) se queda en 2.3:1 y no era legible. */
.fc-podio-item--1 { border-top-color: #8f6a00; --fc-medalla: #8f6a00; }
.fc-podio-item--2 { border-top-color: #63707a; --fc-medalla: #63707a; }
.fc-podio-item--3 { border-top-color: #8f6230; --fc-medalla: #8f6230; }
.fc-podio-medalla {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--fc-medalla, var(--fc-gris));
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 0.15rem;
}
.fc-podio-lugar {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fc-medalla, var(--fc-ink-faint));
}
.fc-podio-titulo { font-weight: 700; color: var(--fc-ink); line-height: 1.3; }
.fc-podio-autor { font-size: 0.875rem; color: var(--fc-ink-soft); }
.fc-podio-puntaje {
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--fc-azul);
}
.fc-podio-puntaje span { font-size: 0.8125rem; font-weight: 500; color: var(--fc-ink-faint); }

/* --- Encabezado de sección con acción al lado --------------------------- */
.fc-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.fc-section-head h2 { margin: 0; }

/* --- Formularios largos por secciones ------------------------------------
   El registro pide 7 bloques de datos (RF-17) y los encabezados eran texto
   suelto: al desplazarse no se distinguía dónde terminaba un bloque y
   empezaba el siguiente. Se numeran y se separan con CSS en lugar de
   reestructurar el HTML, que ya está correcto y validado.

   La numeración es automática: agregar o quitar una sección no obliga a
   renumerar nada a mano. */
.fc-form-secciones { counter-reset: fc-seccion; }
.fc-form-secciones > h2 {
  counter-increment: fc-seccion;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2.5rem;
  margin-bottom: 1.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--fc-line);
  color: var(--fc-azul);
}
.fc-form-secciones > h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.fc-form-secciones > h2::before {
  content: counter(fc-seccion);
  flex: 0 0 auto;
  width: 1.85rem;
  height: 1.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--fc-celeste);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
}

/* Los enlaces del menú no deben partirse en dos líneas cuando el ancho
   aprieta: antes se veía "Revisión / de fotos" en dos renglones y el último
   enlace quedaba cortado contra el borde. */
.fc-navbar .navbar-nav .nav-link { white-space: nowrap; }
.fc-navbar .dropdown-menu {
  border: 0;
  border-radius: var(--fc-radius);
  box-shadow: var(--fc-shadow-lift);
}
.fc-navbar .dropdown-item { padding: 0.5rem 1rem; }
.fc-navbar .dropdown-item:active { background: var(--fc-azul); }

/* ==========================================================================
   Componente de carga de fotografía
   --------------------------------------------------------------------------
   Antes el campo de archivo era un <input type="file"> suelto y el usuario no
   veía nada de lo que había elegido. Esto da una zona grande y fácil de tocar,
   la ficha del archivo con su verificación, y el progreso real de la subida.
   ========================================================================== */

.fc-dropzone {
  text-align: center;
  padding: 2rem 1.25rem;
  border: 2px dashed var(--fc-gris);
  border-radius: var(--fc-radius);
  background: var(--fc-bg-light);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.fc-dropzone--activa { border-color: var(--fc-celeste); background: #eaf7fe; }
.fc-dropzone-icono { font-size: 2rem; color: var(--fc-azul); margin-bottom: 0.5rem; }
.fc-dropzone-titulo { font-size: 1.05rem; font-weight: 700; color: var(--fc-ink); margin: 0 0 0.35rem; }
.fc-dropzone-ayuda { font-size: 0.9rem; color: var(--fc-ink-soft); margin: 0 0 1rem; }
.fc-dropzone-boton { cursor: pointer; }

/* El input real se oculta a la vista pero NO para los lectores de pantalla ni
   para el teclado: la etiqueta grande es quien lo activa. Un display:none
   dejaría el campo fuera del recorrido con Tab. */
.fc-input-archivo {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
.fc-input-archivo:focus-visible + .invalid-feedback,
.fc-input-archivo:focus-visible ~ * { outline: none; }
.fc-dropzone:focus-within { border-color: var(--fc-celeste); box-shadow: 0 0 0 3px rgba(0, 174, 237, 0.25); }

/* Ficha del archivo elegido */
.fc-archivo {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-top: 1rem;
  padding: 1rem;
  background: var(--fc-surface);
  border: 1px solid var(--fc-line);
  border-radius: var(--fc-radius);
  box-shadow: var(--fc-shadow);
}
.fc-preview {
  flex: 0 0 96px;
  width: 96px; height: 96px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--fc-bg-light);
  display: flex; align-items: center; justify-content: center;
}
.fc-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fc-preview-raw { font-size: 0.8rem; font-weight: 700; color: var(--fc-ink-faint); letter-spacing: 0.06em; }
.fc-archivo-cuerpo { flex: 1 1 auto; min-width: 0; }
.fc-archivo-datos {
  font-size: 0.9rem; font-weight: 600; color: var(--fc-ink);
  margin: 0 0 0.5rem; word-break: break-word;
}

/* Verificaciones. El icono nunca va solo: siempre acompaña a un texto que
   explica qué pasa, para no depender del color ni del símbolo. */
.fc-checks { list-style: none; margin: 0; padding: 0; font-size: 0.875rem; }
.fc-checks li { display: flex; gap: 0.5rem; align-items: flex-start; margin-bottom: 0.25rem; }
.fc-checks li span { font-weight: 700; flex: 0 0 auto; }
.fc-check-ok { color: #1c7a4f; }
.fc-check-aviso { color: #8a5a00; }
.fc-check-error { color: #b3241f; }

/* Requisitos: visibles, no en letra chica al pie */
.fc-requisitos {
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  background: var(--fc-bg-light);
  border-radius: var(--fc-radius);
  font-size: 0.9rem;
  color: var(--fc-ink-soft);
}
.fc-requisitos-titulo { font-weight: 700; color: var(--fc-ink); margin: 0 0 0.5rem; }
.fc-requisitos ul { margin: 0; padding-left: 1.1rem; }
.fc-requisitos li { margin-bottom: 0.3rem; }

/* Progreso de la subida */
.fc-progreso {
  margin: 1.25rem 0;
  padding: 1rem 1.25rem;
  background: var(--fc-surface);
  border: 1px solid var(--fc-line);
  border-radius: var(--fc-radius);
  box-shadow: var(--fc-shadow);
}
.fc-progreso .fc-progress { height: 12px; }
.fc-progreso-detalle { font-size: 0.875rem; color: var(--fc-ink-soft); margin: 0.5rem 0 0; }
.fc-progreso-nota { font-size: 0.8rem; color: var(--fc-ink-faint); margin: 0.25rem 0 0; }

/* --- Responsive: pantallas estrechas de verdad (320–400px) --------------- */
@media (max-width: 400px) {
  .fc-archivo { flex-direction: column; }
  .fc-preview { flex: 0 0 auto; width: 100%; height: 160px; }
  .fc-dropzone { padding: 1.5rem 0.9rem; }
  .fc-dropzone-boton { width: 100%; }
  .fc-requisitos { padding: 0.9rem 1rem; }
  /* Las tablas del panel no caben: se desplazan en su contenedor en vez de
     empujar la página entera y provocar scroll horizontal del sitio. */
  .table-responsive { -webkit-overflow-scrolling: touch; }
}

/* --- iPhone con notch: que la barra fija y el pie no queden bajo el corte -- */
@supports (padding: max(0px)) {
  .fc-navbar > .container { padding-left: max(0.75rem, env(safe-area-inset-left));
                            padding-right: max(0.75rem, env(safe-area-inset-right)); }
  body { padding-bottom: env(safe-area-inset-bottom); }
}

/* --- Confirmación tras subir una fotografía -----------------------------
   Antes solo quedaba un mensaje verde que se perdía al recargar. Esto le da
   a la persona una referencia concreta que puede anotar o fotografiar. */
.fc-confirmacion {
  border: 1px solid var(--fc-line);
  border-left: 4px solid var(--fc-success);
  border-radius: var(--fc-radius);
  background: var(--fc-surface);
  box-shadow: var(--fc-shadow);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}
.fc-confirmacion-titulo {
  font-size: 1.05rem; font-weight: 700; color: #1c7a4f;
  margin: 0 0 0.75rem; display: flex; align-items: center; gap: 0.5rem;
}
.fc-confirmacion-datos {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 1rem;
  margin: 0 0 0.75rem;
  font-size: 0.9375rem;
}
.fc-confirmacion-datos dt { color: var(--fc-ink-soft); }
.fc-confirmacion-datos dd { margin: 0; color: var(--fc-ink); }
.fc-confirmacion-datos dd strong { font-size: 1.05rem; color: var(--fc-azul); letter-spacing: 0.02em; }
.fc-confirmacion-nota { font-size: 0.875rem; color: var(--fc-ink-soft); margin: 0; }

@media (max-width: 480px) {
  .fc-confirmacion-datos { grid-template-columns: 1fr; gap: 0.1rem; }
  .fc-confirmacion-datos dd { margin-bottom: 0.5rem; }
}

/* --- Formulario de inscripción por pasos --------------------------------- */
/* SUSTITUIDA más abajo por el recorrido conectado (ver "Indicador de pasos").
   Se conserva porque otras pantallas podrían usar .fc-pasos-nav. */
.fc-pasos-nav { margin-bottom: 1.5rem; }
.fc-pasos-titulo {
  font-size: 1.05rem; font-weight: 700; color: var(--fc-azul); margin: 0 0 0.75rem;
}
.fc-pasos-lista {
  list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin: 0; padding: 0; counter-reset: none;
}
.fc-pasos-lista li {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.75rem 0.4rem 0.4rem;
  border-radius: 999px;
  background: var(--fc-bg-light);
  color: var(--fc-ink-soft);
  font-size: 0.8125rem;
}
.fc-paso-num {
  width: 1.5rem; height: 1.5rem; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--fc-gris); color: #fff;
  font-size: 0.75rem; font-weight: 700;
}
.fc-pasos-lista .fc-paso--actual { background: #e8f4fb; color: var(--fc-azul); font-weight: 700; }
.fc-pasos-lista .fc-paso--actual .fc-paso-num { background: var(--fc-azul); }
.fc-pasos-lista .fc-paso--hecho .fc-paso-num { background: var(--fc-success); }

.fc-pasos-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;                 /* aire real entre los dos botones */
  justify-content: space-between;
  align-items: stretch;
  margin-top: 1.5rem;
}
/* "Atrás" ocupa lo justo; la acción principal —Continuar o Registrarme— se
   lleva el resto del ancho, para que quede claro cuál es el camino adelante. */
.fc-pasos-botones .btn {
  flex: 1 1 auto;
  min-height: 46px;
  padding-inline: 1.25rem;
}
.fc-pasos-botones #fc-atras { flex: 0 1 8rem; }
.fc-pasos-botones .btn[hidden] { display: none; }

/* En pantallas estrechas el nombre de cada paso no cabe: se deja solo el
   número, y el paso actual se identifica por el texto "Paso 2 de 4" de arriba,
   que además lee el lector de pantalla. */
@media (max-width: 575.98px) {
  .fc-pasos-lista .fc-paso-nombre { display: none; }
  .fc-pasos-lista li { padding: 0.35rem; }
  .fc-pasos-lista { gap: 0.35rem; }
}

/* ==========================================================================
   Identidad de color por categoría
   --------------------------------------------------------------------------
   El sistema se percibía plano porque todo era azul institucional sobre gris.
   Esto le da color, pero con una función: cada categoría del concurso tiene
   el suyo y se reconoce igual en la portada, en el panel de revisión y en la
   pantalla del jurado. Se aplica por el slug de la categoría, igual que ya se
   hacía con los iconos.
   ========================================================================== */

.fc-cat--investigacion-cientifica { --fc-cat: var(--fc-cat-investigacion); }
.fc-cat--fotografia-microscopica  { --fc-cat: var(--fc-cat-microscopica); }
.fc-cat--ciencia-sociedad         { --fc-cat: var(--fc-cat-sociedad); }
.fc-cat--medio-ambiente           { --fc-cat: var(--fc-cat-ambiente); }
/* Si mañana se agrega una categoría nueva sin color propio, hereda el azul
   de marca en vez de quedarse sin estilo. */
[class*="fc-cat--"] { --fc-cat: var(--fc-azul); }
.fc-cat--investigacion-cientifica { --fc-cat: var(--fc-cat-investigacion); }
.fc-cat--fotografia-microscopica  { --fc-cat: var(--fc-cat-microscopica); }
.fc-cat--ciencia-sociedad         { --fc-cat: var(--fc-cat-sociedad); }
.fc-cat--medio-ambiente           { --fc-cat: var(--fc-cat-ambiente); }

/* Portada: barra superior de color + icono en su color */
.fc-cat-card[class*="fc-cat--"] { border-top: 4px solid var(--fc-cat); }
.fc-cat-card[class*="fc-cat--"]:hover { border-color: var(--fc-line); border-top-color: var(--fc-cat); }
.fc-cat-card[class*="fc-cat--"] .fc-cat-icon {
  background: color-mix(in srgb, var(--fc-cat) 12%, #ffffff);
  color: var(--fc-cat);
}
/* color-mix no existe en navegadores antiguos: si falla, el icono conserva
   el estilo que ya tenía y no se rompe nada. */

/* Pantalla del jurado */
.fc-jurado-cat[class*="fc-cat--"] { border-left: 4px solid var(--fc-cat); }
.fc-jurado-cat[class*="fc-cat--"] .fc-jurado-cat-titulo { color: var(--fc-cat); }
.fc-jurado-cat[class*="fc-cat--"] .fc-progress-bar { background: var(--fc-cat); }

/* Distintivo reutilizable (panel de revisión, informes) */
.fc-cat-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.8125rem; font-weight: 600;
  color: var(--fc-cat, var(--fc-azul));
  background: color-mix(in srgb, var(--fc-cat, var(--fc-azul)) 10%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--fc-cat, var(--fc-azul)) 30%, #ffffff);
}
.fc-cat-chip::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--fc-cat, var(--fc-azul)); flex: 0 0 auto;
}

/* ==========================================================================
   Portada con más presencia
   --------------------------------------------------------------------------
   El encabezado era un rectángulo gris claro con texto oscuro: correcto pero
   sin carácter, y es lo primero que ve quien abre el enlace del concurso.
   Ahora usa los dos azules de marca en degradado, con un punto de luz celeste
   y un patrón de puntos muy tenue que evoca el grano fotográfico.

   No se inventan colores nuevos: son los mismos tokens de :root. El texto
   pasa a blanco, que sobre el azul de marca da 4.86:1 y sobre el azul oscuro
   7.67:1 — ambos cumplen AA.

   Estas reglas van al final del archivo a propósito: reemplazan a las de
   .fc-hero de más arriba sin borrarlas, para no perder el estilo anterior por
   si se quiere volver.
   ========================================================================== */

.fc-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--fc-azul-dark) 0%, var(--fc-azul) 55%, #2a90d6 100%);
  border-bottom: 0;
  padding: 4.5rem 0 5rem;
}
/* Punto de luz + grano. pointer-events:none para que no estorbe a los botones. */
.fc-hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 75% 10%, rgba(0, 174, 237, 0.45), transparent 60%),
    radial-gradient(circle at 15% 90%, rgba(255, 255, 255, 0.12), transparent 45%);
  pointer-events: none;
}
.fc-hero::after {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.5;
  pointer-events: none;
}
.fc-hero > .container { position: relative; z-index: 3; }

.fc-hero h1 { color: #ffffff; font-size: clamp(30px, 5vw, 46px); letter-spacing: -0.01em; }
/* Blanco puro, no 92%: con el 92% el subtítulo quedaba en 4,38:1 sobre el
   azul de marca, por debajo del 4,5:1 que exige WCAG AA para 19 px. Era un
   fallo anterior al fondo fotográfico. */
.fc-hero p.lead { color: #ffffff; font-size: 19px; }
.fc-hero .eyebrow {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.45);
}

/* Botones sobre fondo azul: el contorno azul original era invisible ahí. */
.fc-hero .btn-outline-primary {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.7);
  background: transparent;
}
.fc-hero .btn-outline-primary:hover,
.fc-hero .btn-outline-primary:focus-visible {
  background: #ffffff;
  color: var(--fc-azul);
  border-color: #ffffff;
}
.fc-hero .btn:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }

@media (max-width: 575.98px) {
  .fc-hero { padding: 3rem 0 3.5rem; }
  .fc-hero::after { background-size: 18px 18px; }
}

/* Filtros de categoría del panel de revisión: el color va en el punto y en el
   borde, no en el fondo, para no pelearse con el estado activo de Bootstrap
   ni bajar el contraste del texto. */
.fc-cat-btn[class*="fc-cat--"] {
  border-color: color-mix(in srgb, var(--fc-cat) 45%, #ffffff);
  color: var(--fc-cat);
}
.fc-cat-btn[class*="fc-cat--"]:hover,
.fc-cat-btn[class*="fc-cat--"]:focus-visible {
  background: color-mix(in srgb, var(--fc-cat) 10%, #ffffff);
  border-color: var(--fc-cat);
  color: var(--fc-cat);
}
.fc-cat-btn[class*="fc-cat--"]::before,
.fc-cat-btn--activa[class*="fc-cat--"]::before {
  content: ""; display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  margin-right: 0.45rem; vertical-align: middle;
  background: var(--fc-cat);
}
.fc-cat-btn--activa[class*="fc-cat--"] {
  background: var(--fc-cat);
  border-color: var(--fc-cat);
}
.fc-cat-btn--activa[class*="fc-cat--"]::before { background: #ffffff; }

/* Plazo de inscripción en la portada */
.fc-plazo {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin: 1.75rem auto 0;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #ffffff;
  font-size: 0.9375rem;
}
.fc-plazo strong { font-weight: 700; }
@media (max-width: 575.98px) {
  .fc-plazo { font-size: 0.875rem; padding: 0.55rem 0.9rem; }
}

/* ==========================================================================
   Tarjetas de métricas (paneles de entrada)
   --------------------------------------------------------------------------
   Responden de un vistazo "¿cuánto me falta?" en la pantalla de entrada de
   cada rol. Las que llevan enlace van a la lista ya filtrada, para que el
   número no sea solo informativo sino el camino a la tarea.
   ========================================================================== */
.fc-metricas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
}
.fc-metrica {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 1.15rem 1.25rem;
  background: var(--fc-surface);
  border: 1px solid var(--fc-line);
  border-left: 4px solid var(--fc-gris);
  border-radius: var(--fc-radius);
  box-shadow: var(--fc-shadow);
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
a.fc-metrica:hover,
a.fc-metrica:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--fc-shadow-lift);
  color: inherit;
}
a.fc-metrica:focus-visible { outline: 3px solid var(--fc-celeste); outline-offset: 2px; }

.fc-metrica-valor { font-size: 2rem; font-weight: 700; line-height: 1.1; color: var(--fc-ink); }
.fc-metrica-etiqueta { font-size: 0.875rem; color: var(--fc-ink-soft); }
.fc-metrica-nota { font-size: 0.8125rem; color: #b3241f; margin-top: 0.25rem; }

/* El color del borde indica el tipo de dato, pero la etiqueta siempre lo dice
   con palabras: el color no es el único indicador. */
.fc-metrica--alerta { border-left-color: #b35700; }
.fc-metrica--alerta .fc-metrica-valor { color: #b35700; }
.fc-metrica--ok     { border-left-color: var(--fc-success); }
.fc-metrica--ok .fc-metrica-valor { color: #1c7a4f; }
.fc-metrica--error  { border-left-color: var(--fc-danger); }
.fc-metrica--error .fc-metrica-valor { color: #b3241f; }
.fc-metrica--neutra { border-left-color: var(--fc-azul); }
.fc-metrica--neutra .fc-metrica-valor { color: var(--fc-azul); }

@media (max-width: 400px) {
  .fc-metricas { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .fc-metrica { padding: 0.9rem 1rem; }
  .fc-metrica-valor { font-size: 1.6rem; }
}

/* ==========================================================================
   Estado "cargando" de los botones
   --------------------------------------------------------------------------
   Faltaba en el sistema: los botones tenían hover, focus, active y disabled,
   pero ninguna forma estándar de decir "estoy trabajando". Cada pantalla lo
   resolvía cambiando el texto a mano.

   El texto no se sustituye por un icono a secas: se conserva y se le antepone
   el indicador, para que un lector de pantalla siga anunciando qué acción está
   en curso. aria-busy="true" en el botón completa el mensaje.
   ========================================================================== */
.btn[aria-busy="true"],
.fc-btn-cargando {
  position: relative;
  pointer-events: none;
  opacity: 0.85;
}
.btn[aria-busy="true"]::before,
.fc-btn-cargando::before {
  content: "";
  display: inline-block;
  width: 0.9em; height: 0.9em;
  margin-right: 0.5em;
  vertical-align: -0.1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: fc-girar 0.7s linear infinite;
}
@keyframes fc-girar { to { transform: rotate(360deg); } }

/* Sin animación para quien la haya desactivado en su sistema: el indicador
   sigue visible, simplemente no gira. */
@media (prefers-reduced-motion: reduce) {
  .btn[aria-busy="true"]::before,
  .fc-btn-cargando::before { animation: none; border-right-color: currentColor; opacity: 0.6; }
}

/* Los avisos del sistema usan ya los tokens semánticos, no colores sueltos. */
.fc-check-ok    { color: var(--fc-success-fuerte); }
.fc-check-aviso { color: var(--fc-warning-fuerte); }
.fc-check-error { color: var(--fc-error-fuerte); }
.fc-metrica-nota { color: var(--fc-error-fuerte); }
.fc-confirmacion-titulo { color: var(--fc-success-fuerte); }

/* ==========================================================================
   Pantalla de resultados: indicador de proceso
   --------------------------------------------------------------------------
   El equipo reportó que no entendía para qué servía esta pantalla. El motivo
   de fondo era que mostraba tablas y avisos sueltos sin decir en qué punto
   del concurso estaba ni qué faltaba para tener ganadores. Esta lista lo
   responde antes que nada.
   ========================================================================== */
.fc-proceso {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.75rem;
  margin: 0 0 1.5rem;
  padding: 0;
  counter-reset: none;
}
.fc-paso-proc {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.9rem 1rem;
  background: var(--fc-bg-light);
  border: 1px solid var(--fc-line);
  border-radius: var(--fc-radius);
  color: var(--fc-ink-faint);
}
.fc-paso-proc i { font-size: 1.05rem; margin-top: 0.1rem; flex: 0 0 auto; }
.fc-paso-proc strong { display: block; font-size: 0.9375rem; color: var(--fc-ink-soft); }
.fc-paso-proc span { font-size: 0.8125rem; }

/* El estado no se distingue solo por color: cambia el icono (círculo vacío /
   punto / marca de verificación) y el texto describe la situación. */
.fc-paso-proc--hecho { background: var(--fc-success-suave); border-color: transparent; color: var(--fc-success-fuerte); }
.fc-paso-proc--hecho strong { color: var(--fc-success-fuerte); }
.fc-paso-proc--actual { background: #e8f4fb; border-color: var(--fc-celeste); color: var(--fc-azul); }
.fc-paso-proc--actual strong { color: var(--fc-azul); }

/* Acciones principales: siempre visibles, aunque estén deshabilitadas, con la
   explicación debajo. Antes desaparecían y el texto hablaba de un botón que no
   estaba en pantalla. */
.fc-acciones-resultados {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  padding: 1rem 1.25rem;
  background: var(--fc-surface);
  border: 1px solid var(--fc-line);
  border-radius: var(--fc-radius);
  box-shadow: var(--fc-shadow);
}
.fc-acciones-resultados .btn.disabled,
.fc-acciones-resultados .btn:disabled { opacity: 0.55; }

@media (max-width: 575.98px) {
  .fc-acciones-resultados { flex-direction: column; align-items: stretch; }
  .fc-acciones-resultados .btn { width: 100%; }
}

/* Nota bajo el puntaje del podio: explica de dónde sale el puesto cuando lo
   decidió un desempate. */
.fc-podio-nota {
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--fc-ink-faint);
  margin-top: 0.35rem;
}

/* --- Elección de premio único (jurado) --------------------------------- */
.fc-eleccion {
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  background: var(--fc-surface);
  border: 1px solid var(--fc-line);
  border-left: 4px solid var(--fc-azul);
  border-radius: var(--fc-radius);
  box-shadow: var(--fc-shadow);
}
.fc-opcion-premio { display: block; cursor: pointer; height: 100%; }
.fc-opcion-premio input { position: absolute; opacity: 0; width: 0; height: 0; }
.fc-opcion-cuerpo {
  display: flex; gap: 0.85rem; align-items: flex-start; height: 100%;
  padding: 0.9rem;
  border: 2px solid var(--fc-line);
  border-radius: var(--fc-radius);
  background: var(--fc-bg-light);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.fc-opcion-premio:hover .fc-opcion-cuerpo { border-color: var(--fc-celeste); }
/* El seleccionado no se distingue solo por color: cambia el borde y se marca
   con el texto del lugar en negrita y el fondo blanco. */
.fc-opcion-premio input:checked + .fc-opcion-cuerpo {
  border-color: var(--fc-azul);
  background: var(--fc-surface);
  box-shadow: var(--fc-shadow);
}
.fc-opcion-premio input:focus-visible + .fc-opcion-cuerpo {
  outline: 3px solid var(--fc-celeste); outline-offset: 2px;
}
.fc-opcion-cuerpo img { width: 74px; height: 74px; object-fit: cover; border-radius: 6px; flex: 0 0 auto; }
.fc-opcion-cuerpo > span { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.fc-opcion-lugar { color: var(--fc-azul); font-size: 0.95rem; }
.fc-opcion-foto { font-size: 0.875rem; color: var(--fc-ink); word-break: break-word; }
.fc-opcion-puntaje { font-size: 0.8125rem; color: var(--fc-ink-soft); }

/* --- Aviso de evaluación no disponible (jurado) ------------------------ */
.fc-aviso-evaluacion {
  padding: 2.5rem 2rem;
  text-align: center;
  background: var(--fc-surface);
  border: 1px solid var(--fc-line);
  border-radius: var(--fc-radius);
  box-shadow: var(--fc-shadow);
}
.fc-aviso-evaluacion > i {
  font-size: 2.5rem;
  color: var(--fc-azul);
  margin-bottom: 1rem;
  display: block;
}
.fc-aviso-evaluacion h1 { margin-bottom: 0.75rem; }
.fc-aviso-evaluacion p { max-width: 46ch; margin-left: auto; margin-right: auto; }

/* --- Historial del participante por edición ---------------------------- */
.fc-historial-edicion {
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  background: var(--fc-surface);
  border: 1px solid var(--fc-line);
  border-radius: var(--fc-radius);
  box-shadow: var(--fc-shadow);
}

/* --- Aviso de configuración pendiente ---------------------------------- */
/* Deliberadamente NO usa los colores de alerta/error: comunica un paso que
   falta, no algo roto. Azul institucional sobre fondo claro. */
.fc-aviso-config {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  background: var(--fc-bg-light);
  border: 1px solid var(--fc-line);
  border-left: 4px solid var(--fc-azul);
  border-radius: var(--fc-radius);
}
.fc-aviso-config-icono {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--fc-azul);
  color: #fff;
  font-size: 1.05rem;
}
.fc-aviso-config-cuerpo { min-width: 0; }
.fc-aviso-config-titulo {
  margin-bottom: .35rem;
  font-weight: 600;
  color: var(--fc-azul);
}
@media (max-width: 575.98px) {
  .fc-aviso-config { flex-direction: column; padding: 1rem; }
}

/* --- Justificación de cambio de puntaje (jurado) ----------------------- */
.fc-motivo-cambio {
  padding: 0.9rem 1rem;
  background: var(--fc-bg-light);
  border: 1px solid var(--fc-line);
  border-left: 3px solid var(--fc-celeste);
  border-radius: var(--fc-radius);
}
.fc-historial-puntaje {
  padding: 0.85rem 1rem;
  background: var(--fc-surface);
  border: 1px dashed var(--fc-line);
  border-radius: var(--fc-radius);
  color: var(--fc-ink-soft);
}

/* Historial de cambios de calificación en la pantalla de resultados. Va en
   <details> porque es material de respaldo: importa cuando hace falta
   justificar un resultado, no en la lectura diaria de la pantalla. */
.fc-detalle-cambios {
  padding: 0.9rem 1.1rem;
  background: var(--fc-surface);
  border: 1px solid var(--fc-line);
  border-radius: var(--fc-radius);
}
.fc-detalle-cambios > summary { cursor: pointer; }
.fc-detalle-cambios > summary:focus-visible {
  outline: 3px solid var(--fc-celeste);
  outline-offset: 2px;
}

/* Aviso de "este puesto lo decidió el desempate", en el podio del jurado.
   Sin él, quien reevaluaba no tenía forma de saber si su trabajo se aplicó. */
.fc-podio-desempate {
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px dashed var(--fc-line);
  font-size: 0.8125rem;
  color: var(--fc-ink-soft);
}

/* --- Sección de descargas --------------------------------------------- */
.fc-descarga-bloque {
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  background: var(--fc-surface);
  border: 1px solid var(--fc-line);
  border-radius: var(--fc-radius);
  box-shadow: var(--fc-shadow);
}

/* --- Cupos por categoría en "Mis fotos" -------------------------------- */
/* Eran unas etiquetas grises que pasaban desapercibidas y no se podían
   pulsar. Ahora son el punto de partida de la pantalla: dicen cuánto llevas
   en cada categoría y llevan directo a subir ahí. */
.fc-cupos {
  padding: 1.25rem 1.5rem;
  background: var(--fc-surface);
  border: 1px solid var(--fc-line);
  border-radius: var(--fc-radius);
  box-shadow: var(--fc-shadow);
}
.fc-cupos-cabecera {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}
.fc-cupos-total { min-width: 9rem; }
.fc-cupos-total-cifra {
  display: block;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--fc-azul);
  margin-bottom: 0.35rem;
}
.fc-cupos-total-cifra span {
  font-size: 1rem;
  font-weight: 500;
  color: var(--fc-ink-soft);
}
.fc-cupos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
}

.fc-cupo {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem 1.1rem;
  background: var(--fc-bg-light);
  border: 1px solid var(--fc-line);
  border-left: 4px solid var(--fc-cat, var(--fc-gris));
  border-radius: var(--fc-radius);
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
/* Solo las que llevan a algún sitio reaccionan al puntero: si una tarjeta
   completa se levantara igual, parecería pulsable y no lo es. */
a.fc-cupo:hover,
a.fc-cupo:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--fc-shadow-lift);
  border-color: var(--fc-celeste);
}
a.fc-cupo:focus-visible { outline: 3px solid var(--fc-celeste); outline-offset: 2px; }

.fc-cupo-nombre { font-weight: 700; line-height: 1.25; color: var(--fc-ink); }

.fc-cupo-puntos { display: flex; gap: 0.3rem; }
.fc-cupo-punto {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  border: 2px solid var(--fc-cat, var(--fc-gris));
  background: transparent;
}
.fc-cupo-punto--usado { background: var(--fc-cat, var(--fc-gris)); }

.fc-cupo-cifra { font-size: 0.875rem; color: var(--fc-ink-soft); }

.fc-cupo-pie {
  margin-top: auto;
  padding-top: 0.4rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fc-azul);
}
.fc-cupo--completa { opacity: 0.85; }
.fc-cupo--completa .fc-cupo-pie { color: var(--fc-success); }

@media (max-width: 575.98px) {
  .fc-cupos { padding: 1rem; }
  .fc-cupos-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; }
}

/* --- Formulario de inscripción: presentación --------------------------- */
/* El formulario eran campos sueltos sobre fondo blanco, sin jerarquía: no se
   distinguía dónde empezaba cada bloque ni qué era obligatorio. */

/* La tarjeta es el formulario completo: campos Y botones.
   Antes cada paso era una tarjeta y el botón quedaba flotando fuera, sin
   relación visual con el contenido al que pertenece. */
.fc-form-secciones {
  padding: 1.75rem;
  background: var(--fc-surface);
  border: 1px solid var(--fc-line);
  border-radius: var(--fc-radius);
  box-shadow: var(--fc-shadow);
}
.fc-form-secciones .fc-paso { margin-bottom: 0; }

/* Encabezado de cada bloque, con barra de acento a la izquierda. */
.fc-form-secciones h2 {
  position: relative;
  margin-top: 1.75rem;
  margin-bottom: 1rem;
  padding-left: 0.85rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--fc-azul);
}
.fc-form-secciones .fc-paso > h2:first-child { margin-top: 0; }
.fc-form-secciones h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.15em;
  bottom: 0.15em;
  width: 4px;
  border-radius: 2px;
  background: var(--fc-azul);
}

.fc-form-secciones .form-label {
  font-weight: 600;
  font-size: 0.9375rem;
  margin-bottom: 0.3rem;
}

/* Asterisco de campo obligatorio. Lo añade registro-validacion.js. */
.fc-obligatorio { color: #9a3b3b; font-weight: 700; }

/* Estado de los campos. El color no va solo: el inválido lleva su mensaje
   debajo y el válido, el visto propio de Bootstrap. */
.fc-form-secciones .form-control,
.fc-form-secciones .form-select {
  padding: 0.6rem 0.75rem;
  border-color: #c7ced6;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.fc-form-secciones .form-control:focus,
.fc-form-secciones .form-select:focus {
  border-color: var(--fc-celeste);
  box-shadow: 0 0 0 0.2rem rgba(28, 117, 188, 0.18);
}
.fc-form-secciones .form-control.is-valid,
.fc-form-secciones .form-select.is-valid { border-color: #2f7a4d; }
.fc-form-secciones .form-control.is-invalid,
.fc-form-secciones .form-select.is-invalid { border-color: #9a3b3b; }
.fc-form-secciones .invalid-feedback { color: #9a3b3b; font-size: 0.8125rem; }

.fc-form-secciones .form-text { font-size: 0.8125rem; }

/* Botonera del asistente: separada del contenido y pegada abajo en móvil. */
.fc-form-secciones .fc-pasos-botones { gap: 0.75rem; }

@media (max-width: 575.98px) {
  .fc-form-secciones .fc-paso { padding: 1.1rem; }
  .fc-form-secciones h2 { font-size: 1rem; }
}

/* --- Inscripción desde teléfono y tablet ------------------------------- */
/* El formulario se llena mayoritariamente desde el móvil. Lo que sigue
   resuelve los tres problemas concretos de esa pantalla: el zoom automático
   de iOS, los objetivos táctiles chicos y el botón de continuar fuera de
   alcance del pulgar. */

@media (max-width: 767.98px) {
  /* 16px exactos: por debajo de eso Safari en iPhone hace zoom solo al tocar
     el campo, y deja el formulario descuadrado y a medio salir de la pantalla. */
  .fc-form-secciones .form-control,
  .fc-form-secciones .form-select,
  .fc-form-secciones textarea {
    font-size: 16px;
    min-height: 48px;          /* objetivo táctil cómodo */
  }
  .fc-form-secciones textarea { min-height: 7rem; }

  .fc-form-secciones .btn { min-height: 48px; }

}

/* Tablet: caben dos columnas, pero los campos siguen necesitando altura
   cómoda para el dedo. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .fc-form-secciones .form-control,
  .fc-form-secciones .form-select { min-height: 46px; }
}


/* El botón de mostrar contraseña: misma altura que el campo y área tocable
   suficiente. Antes quedaba desalineado y apretado. */
.fc-form-secciones .input-group .btn {
  border-color: #c7ced6;
  min-width: 3rem;
}
.fc-form-secciones .input-group .btn:hover { background: var(--fc-bg-light); }

/* Cuando un campo tiene error, su texto de ayuda se oculta: mostrar la ayuda
   y el error a la vez amontona dos mensajes que dicen cosas distintas. */
.fc-campo-con-error .form-text { display: none; }

/* --- Indicador de pasos: recorrido, no cuatro etiquetas sueltas -------- */
/* Eran cuatro píldoras del mismo tamaño, sin relación entre sí: no se leía
   como un recorrido con principio y fin, ni se veía cuánto faltaba. */
.fc-pasos-nav {
  margin-bottom: 1.75rem;
  padding-bottom: 0.25rem;
}
.fc-pasos-lista {
  list-style: none;
  display: flex;
  margin: 0 0 0.85rem;
  padding: 0;
  gap: 0;
}
.fc-pasos-lista li {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  padding: 0;
  background: none;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--fc-ink-faint);
  line-height: 1.25;
}
/* La línea que une un paso con el anterior. Es lo que convierte cuatro
   etiquetas en un recorrido. */
.fc-pasos-lista li::before {
  content: '';
  position: absolute;
  top: 0.95rem;
  right: 50%;
  left: -50%;
  height: 3px;
  background: var(--fc-line);
  z-index: 0;
}
.fc-pasos-lista li:first-child::before { display: none; }
.fc-pasos-lista .fc-paso--hecho::before,
.fc-pasos-lista .fc-paso--actual::before { background: var(--fc-azul); }

.fc-paso-num {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--fc-surface);
  border: 3px solid var(--fc-line);
  color: var(--fc-ink-faint);
  font-weight: 700;
  font-size: 0.875rem;
}
.fc-pasos-lista .fc-paso--actual { color: var(--fc-azul-dark); font-weight: 700; }  /* --fc-azul daba 4.34:1 sobre la tarjeta; el oscuro cumple AA */
.fc-pasos-lista .fc-paso--actual .fc-paso-num {
  background: var(--fc-azul);
  border-color: var(--fc-azul);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(28, 117, 188, 0.15);
}
.fc-pasos-lista .fc-paso--hecho { color: var(--fc-ink-soft); }
.fc-pasos-lista .fc-paso--hecho .fc-paso-num {
  background: var(--fc-success);
  border-color: var(--fc-success);
  color: #fff;
}

.fc-pasos-titulo {
  margin: 0;
  font-size: 0.875rem;
  color: var(--fc-ink-soft);
  text-align: center;
}

/* La botonera, dentro de la tarjeta y separada por una línea. */
.fc-form-secciones .fc-pasos-botones {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--fc-line);
}

/* En pantalla estrecha el nombre de cada paso no cabe: se deja el número y el
   nombre del paso actual queda en la línea de abajo, que además lee el lector
   de pantalla. */
@media (max-width: 575.98px) {
  .fc-pasos-lista .fc-paso-nombre { display: none; }
  .fc-pasos-titulo { font-weight: 600; color: var(--fc-azul); }
  .fc-form-secciones { padding: 1.1rem; }
}

/* --- Botonera del asistente en móvil ----------------------------------- */
/* Va al final del archivo a propósito: tiene que ganarle a la regla general
   de .fc-pasos-botones de más arriba, que le pone margen y borde normales. */
@media (max-width: 767.98px) {
  /* Mismo relleno que la tarjeta en todo el rango móvil, para que los
     márgenes negativos de la botonera calcen exactamente con el borde. */
  .fc-form-secciones { padding: 1.1rem; }

  /* Fija abajo: con siete bloques de campos, "Continuar" quedaba a varias
     pantallas de distancia del pulgar. */
  .fc-form-secciones .fc-pasos-botones {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 1.5rem -1.1rem -1.1rem;
    padding: 0.75rem 1.1rem;
    border-top: 1px solid var(--fc-line);
    border-radius: 0 0 var(--fc-radius) var(--fc-radius);
    background: var(--fc-surface);
    box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.06);
  }
  /* "Atrás" ocupa lo justo; "Continuar" se lleva el resto del ancho. */
  .fc-form-secciones .fc-pasos-botones .btn { flex: 1 1 auto; }
  .fc-form-secciones .fc-pasos-botones #fc-atras { flex: 0 0 6.5rem; }
}

/* Campo desactivado por una regla del formulario (no por falta de permisos):
   se atenúa y muestra el cursor de "no disponible", con su explicación al
   lado. Sin esto parecería que el formulario está roto. */
.fc-form-secciones .fc-campo-inactivo,
.fc-form-secciones select:disabled,
.fc-form-secciones input:disabled {
  background-color: var(--fc-bg-light);
  color: var(--fc-ink-faint);
  cursor: not-allowed;
  opacity: 1;
}

/* Casillas de aceptación de términos: más aire entre una y otra, y área
   tocable holgada. Son texto legal que hay que leer, no una lista compacta. */
.fc-form-secciones .form-check {
  padding-left: 2rem;
  margin-bottom: 1rem;
}
.fc-form-secciones .form-check-input {
  width: 1.2rem;
  height: 1.2rem;
  margin-left: -2rem;
  margin-top: 0.15rem;
}
.fc-form-secciones .form-check-label {
  line-height: 1.5;
  cursor: pointer;
}
/* La etiqueta no se tiñe de verde aunque la casilla esté marcada: es una
   cláusula legal, no un mensaje de éxito. */
.fc-form-secciones .form-check-input.is-valid ~ .form-check-label,
.fc-form-secciones .form-check-input:valid ~ .form-check-label {
  color: inherit;
}

/* --- Ventana de progreso de descarga ----------------------------------- */
.fc-descarga-reloj { margin-bottom: 1rem; }
.fc-descarga-tiempo {
  display: block;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--fc-azul);
  font-variant-numeric: tabular-nums;   /* el número no "salta" al cambiar */
}
.fc-descarga-etiqueta {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fc-ink-faint);
}
.fc-descarga-barra { height: 0.5rem; }
/* Cuando la descarga ya arrancó, la barra deja de animarse y se pone verde:
   el estado cambió y tiene que notarse sin leer. */
.fc-descarga--lista .progress-bar {
  animation: none;
  background-color: var(--fc-success);
}

/* Cifras reales de la descarga: transferido, velocidad y tiempo restante. */
.fc-descarga-reloj { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; }
.fc-descarga-tiempo--reloj { font-size: 1.25rem; color: var(--fc-ink-soft); }
.fc-descarga-cifras {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 1rem;
  margin-top: 0.6rem;
  font-size: 0.875rem;
  color: var(--fc-ink-soft);
  font-variant-numeric: tabular-nums;
}

/* Documento que sobrevivió a un intento fallido de inscripción.
   Verde institucional sobre fondo claro: contraste 7.21:1 con #0f5132
   sobre #d1e7dd, muy por encima del 4.5:1 que exige WCAG AA. */
.fc-adjunto-ok {
  background: #d1e7dd;
  border: 1px solid #a3cfbb;
  border-radius: .375rem;
  color: #0f5132;
  padding: .5rem .75rem;
  font-size: .9375rem;
}
.fc-adjunto-ok i { margin-right: .35rem; }


/* ==========================================================================
   Fondo del hero: las tres fotografías, una al lado de otra
   ==========================================================================
   Por qué en tira y no una sola a todo el ancho:

   El hero mide unos 4,16:1 y las fotografías son 3:2. Una sola imagen
   estirada a todo el ancho perdía el 64% por recorte — quedaba una franja
   central irreconocible. Puestas de tres en tres, cada celda queda en 1,39:1,
   muy cerca del 1,5:1 de las fotos: el recorte baja al 7,5% y además se
   llena el ancho completo. Las proporciones salen a favor.

   Orden de capas, de atrás hacia adelante:
     0 — .fc-hero-slider   las tres fotografías
     1 — velo oscuro       garantiza la legibilidad del texto
     1 — .fc-hero::before  punto de luz
     2 — .fc-hero::after   grano
     3 — el contenido

   Si las imágenes no cargan, el degradado de .fc-hero sigue siendo el fondo
   real y el hero se ve como siempre. Es una mejora, no una dependencia.
   ========================================================================== */

.fc-hero-slider {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  display: flex;
  gap: 3px;   /* separación mínima: se leen como tres fotografías, no como una */

  /* Los extremos se funden con el azul para que la tira no termine en corte
     recto contra el borde de la pantalla. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
}

.fc-hero::before { z-index: 1; }
.fc-hero::after  { z-index: 2; }

/* Cada celda contiene las TRES fotografías superpuestas y las va mostrando
   por turnos. Como cada celda empieza por una distinta, en todo momento se
   ven tres imágenes diferentes y parecen rotar de posición. */
.fc-hero-celda {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
}

.fc-hero-foto {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  /* Cambio SECO, sin cruce, y además sincronizado en las tres celdas.
     21 s de ciclo = 7 s por turno.

     POR QUÉ seco: con 3 fotografías en 3 posiciones, rotar es intercambiar.
     Si hay cruce, la celda que suelta la rana y la que la recibe la enseñan
     a la vez durante medio segundo — y se veía la misma imagen dos veces.
     No es un ajuste mal puesto: es inevitable con cruce, porque no hay una
     cuarta fotografía libre que ocupe el hueco.

     El corte en seco no se nota porque ocurre justo cuando la tira entera
     está invisible (ver .fc-hero-slider más abajo). */
  /* SIN relleno "backwards" a propósito: ese relleno aplica el fotograma 0%
     antes de que arranque la animación, y aquí el 0% es opacity:1 — con él,
     las tres fotografías se veían a la vez antes de su turno. Sin relleno
     vale el opacity:0 de la regla, que es lo correcto. */
  animation: fcHeroTurno 21s steps(1, end) infinite;
  animation-delay: calc(var(--turno, 0) * 7s);
}

@keyframes fcHeroTurno {
  0%        { opacity: 1; }
  33.3333%  { opacity: 0; }
  100%      { opacity: 0; }
}

/* La tira se atenúa a cero en cada cambio de turno y vuelve. Es el truco que
   hace invisible el corte: las tres fotografías se sustituyen mientras no se
   ve ninguna, así que nunca llega a verse la misma dos veces.
   El ciclo de 7 s encaja exactamente con el cambio de turno de arriba. */
.fc-hero-slider { animation: fcHeroRelevo 7s ease-in-out infinite; }

@keyframes fcHeroRelevo {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Sin movimiento para quien lo pidió en su sistema: cada celda se queda en
   su primera fotografía. Se siguen viendo las tres, simplemente no rotan. */
@media (prefers-reduced-motion: reduce) {
  .fc-hero-slider { animation: none; opacity: 1; }
  .fc-hero-foto { animation: none; opacity: 0; }
  .fc-hero-foto[style*="--turno: 0"] { opacity: 1; }
}

/* Versión baja del encabezado, para el formulario de registro: el mismo
   fondo, sin robarle sitio a los campos. */
.fc-hero--banner {
  /* La altura NO es decorativa: manda cuánto se ve de cada fotografía.
     Con 137 px (el alto que daba solo el relleno) cada celda quedaba en
     3,15:1 y se veía el 48% de la imagen — una tira irreconocible. Con
     230 px la celda baja a 1,88:1 y se ve el 80%. Medido, no estimado. */
  min-height: 230px;
  display: flex;
  align-items: center;
  padding: 1.75rem 0;
  margin-bottom: 2rem;
  border-radius: 10px;
  overflow: hidden;   /* para que las fotos respeten las esquinas */
}
.fc-hero--banner > .container { width: 100%; }

/* En pantallas pequeñas el banner se reduce: ahí compite con el formulario,
   que es a lo que viene la persona. */
@media (max-width: 575.98px) {
  .fc-hero--banner { min-height: 150px; margin-bottom: 1.5rem; }
}
.fc-hero--banner h1 {
  font-size: clamp(24px, 3.5vw, 34px);
  text-align: center;
  margin: 0;
}
.fc-hero-banner-sub {
  margin: 0.35rem 0 0;
  text-align: center;
  color: #ffffff;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}

/* Velo oscuro sobre la tira.
   #0a2d4b al 65% es el velo MÁS CLARO con el que el texto blanco sigue
   alcanzando 4,5:1 sobre el píxel más claro de estas fotografías (medido:
   4,69 / 4,90 / 4,81). Por debajo el título deja de ser legible; por encima,
   las fotos se apagan sin necesidad. */
.fc-hero-slider::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 45, 75, 0.65);
  z-index: 1;
}

/* Crédito a quienes tomaron las fotografías. Blanco puro: con el velo llega
   a 4,69:1 en el peor caso, por encima del 4,5:1 de WCAG AA. */
.fc-hero-credito {
  position: relative;
  z-index: 3;
  margin: 2.5rem 0 0;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: #ffffff;
}

/* En móvil tres columnas dejarían cada foto en ~130 px: irreconocibles. Se
   muestra una sola y entera (contain), que es lo que se pidió: que no se
   pierda la imagen. */
@media (max-width: 767.98px) {
  .fc-hero-slider { gap: 0; }
  .fc-hero-celda { display: none; }
  .fc-hero-celda:first-child { display: block; }
  .fc-hero-foto { background-size: contain; }
}

/* ==========================================================================
   Bases del concurso
   --------------------------------------------------------------------------
   El documento son 22.000 caracteres. Leerlo de corrido en una sola columna
   es la diferencia entre consultarlo y abandonarlo, así que la página se
   organiza en índice fijo + texto, y el texto se limita a un ancho de lectura
   cómodo en vez de ocupar toda la pantalla.
   ========================================================================== */

.fc-bases-layout {
  display: grid;
  grid-template-columns: minmax(230px, 280px) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}

/* --- Índice --- */
.fc-bases-indice {
  position: sticky;
  top: 90px;   /* la barra superior es fija: sin esto el índice queda debajo */
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  font-size: 14px;
}
.fc-bases-indice summary {
  font-weight: 700;
  color: var(--fc-ink);
  cursor: pointer;
  padding: .5rem 0;
  list-style: none;
}
.fc-bases-indice summary::-webkit-details-marker { display: none; }
.fc-bases-indice ol {
  list-style: none;
  margin: .5rem 0 0;
  padding: 0;
  border-left: 2px solid var(--fc-line);
}
.fc-bases-indice li { margin: 0; }
.fc-bases-indice a {
  display: block;
  padding: .4rem .75rem;
  color: var(--fc-ink-soft);
  text-decoration: none;
  border-left: 2px solid transparent;
  margin-left: -2px;
  line-height: 1.35;
}
.fc-bases-indice a:hover,
.fc-bases-indice a:focus-visible {
  color: var(--fc-azul-dark);
  border-left-color: var(--fc-azul);
  background: rgba(28, 117, 188, 0.06);
}
.fc-bases-indice-n3 a { padding-left: 1.5rem; font-size: 13px; }
.fc-bases-indice-n4 a { padding-left: 2.25rem; font-size: 13px; }

/* --- Texto --- */
.fc-bases-content {
  max-width: 72ch;   /* más de ~75 caracteres por línea cansa la vista */
}
/* Al saltar desde el índice, el encabezado no debe quedar bajo la barra fija. */
.fc-bases-content :is(h2, h3, h4) { scroll-margin-top: 90px; }

/* --- Tablas: 9 en este documento, y en móvil no caben --- */
.fc-bases-content table {
  border: 1px solid var(--fc-line);
  border-radius: 8px;
}
.fc-bases-content thead tr,
.fc-bases-content tr:first-child { background: var(--fc-bg-light); }
.fc-bases-content tr:first-child td,
.fc-bases-content th { font-weight: 700; }
.fc-bases-content tbody tr:nth-child(even) { background: rgba(0, 0, 0, 0.02); }
.fc-bases-content td,
.fc-bases-content th { padding: .6rem .75rem; vertical-align: top; }

.fc-bases-pie {
  margin: 3rem 0 1rem;
  text-align: center;
}

@media (max-width: 991.98px) {
  .fc-bases-layout { grid-template-columns: 1fr; gap: 1.5rem; }
  .fc-bases-indice {
    position: static;
    max-height: none;
    border: 1px solid var(--fc-line);
    border-radius: 8px;
    padding: .5rem 1rem;
    background: var(--fc-bg-light);
  }
  /* Plegado en móvil: abierto ocuparía la primera pantalla entera y el
     documento quedaría escondido debajo. */
  .fc-bases-indice summary::after { content: " ▾"; }
  .fc-bases-content { max-width: none; }
}

/* Imprimir: las bases se imprimen y se adjuntan a expedientes. Fuera el
   índice, los enlaces y lo que no sea el documento. */
@media print {
  .fc-hero--banner, .fc-bases-indice, .fc-bases-pie,
  .navbar, footer { display: none !important; }
  .fc-bases-layout { display: block; }
  .fc-bases-content { max-width: none; font-size: 11pt; }
  .fc-bases-content :is(h2, h3, h4) { break-after: avoid; }
  .fc-bases-content table, .fc-bases-content tr { break-inside: avoid; }
}

/* ==========================================================================
   Reportería (admin / RRPP)
   ========================================================================== */
.fc-report-card { transition: box-shadow .2s, transform .2s; color: inherit; }
.fc-report-card:hover,
.fc-report-card:focus-visible { box-shadow: 0 6px 18px rgba(0,0,0,.08); transform: translateY(-2px); }

/* Barra simple para distribuciones. El relleno usa el azul de marca, que
   sobre el carril claro supera el 3:1 que pide WCAG para elementos gráficos. */
.fc-barra { background: var(--fc-bg-light); border-radius: 999px; height: 8px; overflow: hidden; }
.fc-barra > span { display: block; height: 100%; background: var(--fc-azul); border-radius: 999px; }

/* ==========================================================================
   Inicio: la FOTO es el hero, se aprecia COMPLETA en cualquier pantalla
   --------------------------------------------------------------------------
   width:100% + height:auto => la imagen nunca se recorta ni se deforma; el
   alto del hero lo marca la propia foto. El texto va encima, centrado, con un
   velo oscuro para que se lea sobre la imagen (clara en la parte del amanecer).
   ========================================================================== */
.fc-hero--home {
  position: relative;
  overflow: hidden;
  padding: 4.5rem 0;
  /* Altura controlada y responsive: ni gigante ni diminuta. clamp() la ajusta
     entre un mínimo cómodo en móvil y un tope en pantallas grandes, y 62vh la
     hace proporcional a la altura de la ventana. */
  min-height: clamp(420px, 62vh, 680px);
  display: flex;
  align-items: center;
}
.fc-hero--home .fc-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;          /* llena el hero (altura controlada) sin deformar */
  object-position: center 42%;/* conserva las tortugas y algo del amanecer */
  z-index: 0;
}
/* Velo de legibilidad sobre la foto */
.fc-hero--home::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(8,28,48,0.60) 0%, rgba(8,28,48,0.56) 50%, rgba(8,28,48,0.66) 100%);
}
.fc-hero--home::after { display: none; }   /* sin grano sobre la foto */
/* El texto: en flujo normal, centrado y a lo ancho (no apiñado) */
.fc-hero--home > .container { position: relative; z-index: 3; }
.fc-hero--home .fc-hero-credito { color: rgba(255, 255, 255, 0.9); }
/* El subtítulo se extiende cómodo pero sin líneas kilométricas. */
.fc-hero--home p.lead { max-width: 44ch; margin-left: auto; margin-right: auto; }

@media (max-width: 575.98px) {
  .fc-hero--home { min-height: clamp(380px, 70vh, 560px); padding: 3rem 0; }
}

/* Hero del registro: mismo estilo que el inicio (fc-hero--home) pero más bajo,
   porque esta página es un formulario, y con margen antes de los campos. */
.fc-hero.fc-hero--registro {
  min-height: clamp(280px, 42vh, 440px);
  margin-bottom: 2rem;
}

/* ============================================================
   Visor modal de documentos adjuntos (ficha del participante).
   <dialog> nativo; markup en participante_detalle.php, lógica en
   visor-documentos.js. Muestra el PDF/imagen dentro de la misma
   página, sin descargarlo.
   ============================================================ */
.fc-visor {
  width: min(1100px, 94vw);
  height: min(90vh, 900px);
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: var(--fc-radius, 8px);
  background: var(--fc-surface);
  color: var(--fc-ink);
  box-shadow: 0 20px 60px rgba(16, 24, 40, .3);
}
.fc-visor::backdrop { background: rgba(16, 24, 40, .55); }

.fc-visor__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--fc-line, #e3e3e3);
  background: var(--fc-bg-light);
  border-radius: var(--fc-radius, 8px) var(--fc-radius, 8px) 0 0;
}
.fc-visor__acciones { flex: none; }

.fc-visor__cuerpo {
  height: calc(100% - 7.5rem);
  background: #f1f3f6;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
}
.fc-visor__marco { width: 100%; height: 100%; border: 0; display: block; }
.fc-visor__imagen { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }

.fc-visor__pie {
  padding: .6rem 1rem;
  border-top: 1px solid var(--fc-line, #e3e3e3);
  border-radius: 0 0 var(--fc-radius, 8px) var(--fc-radius, 8px);
}

@media (max-width: 820px) {
  .fc-visor { width: 100vw; height: 100vh; border-radius: 0; }
  .fc-visor__barra, .fc-visor__pie { border-radius: 0; }
}

/* Miniatura de foto subida, clicable para ampliar en el visor modal. */
.fc-foto-ampliar {
  display: block;
  width: 100%;
  cursor: zoom-in;
  overflow: hidden;
  border-radius: var(--fc-radius, 8px) var(--fc-radius, 8px) 0 0;
}
.fc-foto-ampliar img { transition: transform .15s ease; }
.fc-foto-ampliar:hover img,
.fc-foto-ampliar:focus-visible img { transform: scale(1.03); }