/*
 * Tema Fulcronet — azul marino sobre Bootstrap 5.3.
 *
 * Bootstrap se sirve minificado desde static/vendor/ y no se recompila (no hay
 * Node ni build step). El color se cambia sobrescribiendo las variables CSS que
 * Bootstrap ya expone, no editando su archivo.
 */

:root {
  --fn-marino: #102c50;
  --fn-marino-oscuro: #0a1e38;
  --fn-marino-hover: #0c2140;
  --fn-marino-activo: #091a33;
  --fn-marino-claro: #1c4680;
  --fn-marino-rgb: 16, 44, 80;
  /* Altura fija de la barra superior: la usa .fn-sidebar para saber cuanto
     bajar en escritorio, donde ambas conviven a la vez. */
  --fn-topbar-alto: 56px;

  --bs-primary: var(--fn-marino);
  --bs-primary-rgb: var(--fn-marino-rgb);
  --bs-link-color: var(--fn-marino-claro);
  --bs-link-color-rgb: 28, 70, 128;
  --bs-link-hover-color: var(--fn-marino);
  --bs-link-hover-color-rgb: var(--fn-marino-rgb);
}

.bg-primary {
  background-color: var(--fn-marino) !important;
}

.text-primary {
  color: var(--fn-marino) !important;
}

.text-bg-primary {
  background-color: var(--fn-marino) !important;
  color: #fff !important;
}

.btn-primary {
  --bs-btn-bg: var(--fn-marino);
  --bs-btn-border-color: var(--fn-marino);
  --bs-btn-hover-bg: var(--fn-marino-hover);
  --bs-btn-hover-border-color: var(--fn-marino-hover);
  --bs-btn-active-bg: var(--fn-marino-activo);
  --bs-btn-active-border-color: var(--fn-marino-activo);
  --bs-btn-disabled-bg: var(--fn-marino);
  --bs-btn-disabled-border-color: var(--fn-marino);
  --bs-btn-focus-shadow-rgb: var(--fn-marino-rgb);
}

.btn-outline-primary {
  --bs-btn-color: var(--fn-marino);
  --bs-btn-border-color: var(--fn-marino);
  --bs-btn-hover-bg: var(--fn-marino);
  --bs-btn-hover-border-color: var(--fn-marino);
  --bs-btn-active-bg: var(--fn-marino-activo);
  --bs-btn-active-border-color: var(--fn-marino-activo);
  --bs-btn-focus-shadow-rgb: var(--fn-marino-rgb);
}

.btn-link {
  --bs-btn-color: var(--fn-marino-claro);
  --bs-btn-hover-color: var(--fn-marino);
}

/* El fondo activo de .nav-pills viene compilado como #0d6efd en Bootstrap
 * 5.3 y no lee --bs-primary, asi que hay que sobrescribir su propia variable. */
.nav-pills {
  --bs-nav-pills-link-active-bg: var(--fn-marino);
  --bs-nav-link-color: var(--fn-marino);
  --bs-nav-link-hover-color: var(--fn-marino-hover);
}

/* El foco azul brillante de Bootstrap desentona con el marino. */
.form-control:focus,
.form-select:focus {
  border-color: var(--fn-marino-claro);
  box-shadow: 0 0 0 0.25rem rgba(var(--fn-marino-rgb), 0.2);
}

.form-check-input:checked {
  background-color: var(--fn-marino);
  border-color: var(--fn-marino);
}

.form-check-input:focus {
  border-color: var(--fn-marino-claro);
  box-shadow: 0 0 0 0.25rem rgba(var(--fn-marino-rgb), 0.2);
}

.page-link {
  --bs-pagination-color: var(--fn-marino-claro);
  --bs-pagination-hover-color: var(--fn-marino);
  --bs-pagination-active-bg: var(--fn-marino);
  --bs-pagination-active-border-color: var(--fn-marino);
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(var(--fn-marino-rgb), 0.2);
}

/* Etiquetas de rol: marino claro en vez del gris de .text-bg-secondary. */
.fn-badge-rol {
  background-color: rgba(var(--fn-marino-rgb), 0.1);
  color: var(--fn-marino);
  border: 1px solid rgba(var(--fn-marino-rgb), 0.2);
}

/* ── Barra lateral ─────────────────────────────────────────────────────
 * Debajo de lg es un offcanvas que abre con el boton del encabezado.
 * Desde lg queda fija a la izquierda. Lo resuelve Bootstrap con la clase
 * .offcanvas-lg; aqui solo va el aspecto.
 */

/* .fn-marco envuelve la barra superior y .fn-app (que a su vez tiene la
 * barra lateral y el contenido); el alto minimo de pantalla completa vive
 * aqui arriba y no en .fn-app, que ahora es el hijo que crece con flex. */
.fn-marco {
  min-height: 100vh;
}

.fn-sidebar {
  background: linear-gradient(180deg, var(--fn-marino) 0%, var(--fn-marino-oscuro) 100%);
  color: rgba(255, 255, 255, 0.85);
}

/* min-width:0 en toda la cadena de items flex: sin esto una tabla ancha
 * estira el contenido y desborda la pagina en vez de scrollear dentro de su
 * propio .table-responsive. */
.fn-contenido,
.fn-contenido > main,
.fn-ancho {
  min-width: 0;
}

.fn-ancho {
  max-width: 1200px;
  margin-inline: auto;
}

@media (min-width: 992px) {
  .fn-sidebar {
    width: 260px;
    flex-shrink: 0;
    position: sticky;
    /* La barra superior ahora cruza todo el ancho por encima de la barra
     * lateral (position: sticky, top: 0 en .fn-topbar). Si .fn-sidebar
     * tambien empezara en top:0 y midiera 100vh, sus primeros
     * --fn-topbar-alto px quedarian tapados por la barra superior y el
     * bloque de usuario del pie se saldria por abajo de la pantalla sin
     * forma de alcanzarlo (el mismo bug que documentan los comentarios de
     * mas abajo, pero causado esta vez por la barra superior nueva). Por
     * eso la barra lateral empieza justo debajo de la barra superior y
     * resta esa misma altura de su alto total.
     */
    top: var(--fn-topbar-alto);
    height: calc(100vh - var(--fn-topbar-alto));
    overflow: hidden;
  }

  /* Desde lg, Bootstrap deja el cuerpo del offcanvas en flex-grow:0 con
   * overflow visible. Sin esto el menu no llena la barra y, cuando crece mas
   * que la pantalla, se derrama por debajo: el bloque de usuario queda fuera
   * de la barra fija y no hay forma de alcanzarlo al scrollear. */
  .fn-sidebar > .offcanvas-body {
    flex-grow: 1;
    min-height: 0;
    overflow-y: hidden;
  }

  /* min-height:0 para que el item flex pueda encogerse por debajo de su
   * contenido; sin eso el overflow-auto no llega a scrollear nunca. */
  .fn-sidebar .fn-nav {
    min-height: 0;
  }
}

.fn-marca {
  color: #fff;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.fn-seccion {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.fn-enlace {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.85rem;
  border-radius: 0.5rem;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
}

.fn-enlace:hover,
.fn-enlace:focus {
  background-color: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.fn-enlace.activo {
  background-color: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-weight: 600;
}

.fn-enlace svg {
  flex-shrink: 0;
  opacity: 0.85;
}

.fn-usuario {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.fn-usuario .dropdown-toggle {
  color: #fff;
  text-decoration: none;
}

.fn-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fn-topbar {
  background: var(--fn-marino);
  color: #fff;
  /* Sticky y por encima de la barra lateral: el offcanvas de Bootstrap usa
   * z-index 1045, asi que 1030 (el que trae .navbar-fixed de Bootstrap) la
   * deja debajo del menu movil sin taparlo al abrirse. */
  position: sticky;
  top: 0;
  z-index: 1030;
  min-height: var(--fn-topbar-alto);
}

/* ── Selector de proyecto (barra superior) ────────────────────────────
 * El color base del boton sale de la clase de Bootstrap btn-outline-light
 * (texto y borde blancos), no de una regla de aca: fulcronet.css se sirve
 * sin manifest en dev y el navegador puede quedarse con una copia vieja en
 * cache, mientras que bootstrap.min.css no cambia. Aca solo van retoques.
 */
.fn-selector-proyecto {
  min-width: 0;
}

.fn-selector-proyecto-boton {
  max-width: 320px;
}

.fn-selector-proyecto-boton:disabled {
  color: rgba(255, 255, 255, 0.6);
  border-color: rgba(255, 255, 255, 0.15);
}

/* max-height + overflow-auto para que una lista larga de proyectos
 * scrollee dentro del menu en vez de desbordar la pantalla, sobre todo en
 * celular donde la altura disponible es chica. */
.fn-selector-proyecto-menu {
  max-height: 60vh;
  overflow-y: auto;
}

/* ── Toma de instrumento ──────────────────────────────────────────────
 * Alternativas dibujadas como botones grandes tipo "tarjeta seleccionable"
 * en vez de radios chicos, pensadas para tocar con el pulgar en celular.
 * El input real (opcion.tag, lo dibuja el widget de Django) se deja en el
 * DOM pero visualmente reducido a un punto; el label es el boton clicable.
 */

.fn-badge-orden {
  background-color: rgba(var(--fn-marino-rgb), 0.1);
  color: var(--fn-marino);
  font-weight: 600;
}

.fn-opciones {
  max-width: 640px;
}

.fn-opcion-alternativa {
  position: relative;
}

.fn-opcion-alternativa input[type="radio"] {
  position: absolute;
  top: 1.1rem;
  left: 1rem;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  z-index: 1;
}

.fn-opcion-label {
  display: block;
  width: 100%;
  min-height: 3rem;
  margin: 0;
  padding: 0.75rem 1rem 0.75rem 2.75rem;
  border: 1.5px solid var(--bs-border-color);
  border-radius: 0.65rem;
  background-color: var(--bs-body-bg);
  font-size: 1rem;
  line-height: 1.35;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.fn-opcion-alternativa input[type="radio"]:checked + .fn-opcion-label {
  border-color: var(--fn-marino);
  background-color: rgba(var(--fn-marino-rgb), 0.08);
  font-weight: 600;
}

.fn-opcion-alternativa input[type="radio"]:focus-visible + .fn-opcion-label {
  border-color: var(--fn-marino-claro);
  box-shadow: 0 0 0 0.25rem rgba(var(--fn-marino-rgb), 0.2);
}

.fn-opcion-alternativa input[type="radio"]:hover + .fn-opcion-label {
  border-color: var(--fn-marino-claro);
}

/* Barra de acciones pegada al fondo en pantallas chicas, para no tener que
 * subir de nuevo tras responder un instrumento largo. Desde md se comporta
 * como un bloque normal para no estorbar en escritorio. */
.fn-instrumento-form {
  padding-bottom: 5rem;
}

.fn-instrumento-acciones {
  position: sticky;
  bottom: 0;
  background-color: var(--bs-body-bg);
  padding: 0.75rem 0;
  margin-inline: -0.01px;
  border-top: 1px solid var(--bs-border-color);
}

@media (min-width: 768px) {
  .fn-instrumento-form {
    padding-bottom: 0;
  }

  .fn-instrumento-acciones {
    position: static;
    border-top: 0;
    padding: 0;
  }
}

/* ── Firma del candidato ──────────────────────────────────────────────
 * touch-action:none es imprescindible: sin eso, en tablet el dedo hace
 * scroll de la pagina en vez de dibujar sobre el canvas. La altura fija
 * viene de aqui a proposito, porque el JS lee offsetWidth/offsetHeight
 * para escalar el canvas por devicePixelRatio.
 */
.fn-firma-marco {
  touch-action: none;
  overflow: hidden;
  background-color: #fff;
}

.fn-firma-canvas {
  display: block;
  width: 100%;
  height: 180px;
  cursor: crosshair;
}

.fn-firma-miniatura img {
  max-width: 220px;
  height: auto;
}

/* ── Imagen adjunta a una pregunta ────────────────────────────────────
 * El tope de altura evita que una figura escaneada en alta resolucion
 * empuje las alternativas fuera de la pantalla en un telefono. */
.fn-pregunta-imagen img {
  max-height: 420px;
  width: auto;
}

/* ── Tarjetas de proyecto (home) ──────────────────────────────────────
 * Toda la tarjeta es clicable via .stretched-link sobre el titulo; este
 * bloque solo agrega el feedback visual de hover/foco que Bootstrap no
 * trae de fabrica para .card. */
.fn-tarjeta-proyecto {
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fn-tarjeta-proyecto:hover {
  border-color: var(--fn-marino-claro);
  box-shadow: 0 0.5rem 1rem rgba(var(--fn-marino-rgb), 0.12);
}

.fn-tarjeta-proyecto-enlace:focus-visible {
  outline: 0.2rem solid var(--fn-marino-claro);
  outline-offset: 0.2rem;
  border-radius: 0.2rem;
}

/* Pantallas sin sesion (login, recuperar clave): sin barra lateral. */
.fn-publico {
  flex: 1 1 auto;
  background:
    radial-gradient(circle at top, rgba(var(--fn-marino-rgb), 0.12), transparent 60%),
    var(--bs-tertiary-bg);
}

/* ── Aviso de proyecto activo (dentro de la vista) ───────────────────
 * Franja compacta de una sola linea que recuerda de que proyecto son los
 * datos que se estan mirando, sin empujar el contenido hacia abajo. Con
 * proyecto elegido usa el borde marino de la marca, sobrio, como
 * indicador de contexto; sin proyecto (alcance "todos") baja el
 * contraste a proposito para que se note que no hay filtro puesto. */
.fn-aviso-proyecto {
  padding: 0.35rem 0.75rem;
  border-left: 3px solid var(--fn-marino-claro);
  background-color: rgba(var(--fn-marino-rgb), 0.06);
  color: var(--fn-marino);
  border-radius: 0.25rem;
}

.fn-aviso-proyecto-todos {
  border-left-color: var(--bs-secondary-color);
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-secondary-color);
}

/* ── Datos de actividades (visualizar respuestas) ─────────────────────
 * Un fieldset por actividad, separados por una linea fina. El legend
 * sobrescribe el tamano grande que le da el reboot de Bootstrap (incluida
 * su version para xl, que esta regla tambien gana por especificidad). */
.fn-actividades fieldset + fieldset {
  border-top: 1px solid var(--bs-border-color);
  padding-top: 1.5rem;
  margin-top: 1.5rem;
}

.fn-actividades legend {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.fn-actividades .form-label {
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
}

/* crispy envuelve cada campo en un div.mb-3; dentro de la grilla g-3 ese
 * margen se suma al gutter y duplica el espacio entre filas. */
.fn-actividades .row > [class*="col"] > .mb-3 {
  margin-bottom: 0;
}