/* BioTrace: ajustes sobre Bootstrap 5 */
:root {
  --bt-primario: #0b6e75;
  --bt-primario-oscuro: #08545a;
  --bs-primary: #0b6e75;
  --bs-primary-rgb: 11, 110, 117;
  --bs-link-color: #0b6e75;
  --bs-link-color-rgb: 11, 110, 117;
  --bs-link-hover-color: #08545a;
  --bs-link-hover-color-rgb: 8, 84, 90;
}

body { background: #f4f7f8; }

.btn-primary {
  --bs-btn-bg: var(--bt-primario);
  --bs-btn-border-color: var(--bt-primario);
  --bs-btn-hover-bg: var(--bt-primario-oscuro);
  --bs-btn-hover-border-color: var(--bt-primario-oscuro);
  --bs-btn-active-bg: var(--bt-primario-oscuro);
  --bs-btn-active-border-color: var(--bt-primario-oscuro);
  --bs-btn-disabled-bg: var(--bt-primario);
  --bs-btn-disabled-border-color: var(--bt-primario);
}
.btn-outline-primary {
  --bs-btn-color: var(--bt-primario);
  --bs-btn-border-color: var(--bt-primario);
  --bs-btn-hover-bg: var(--bt-primario);
  --bs-btn-hover-border-color: var(--bt-primario);
  --bs-btn-active-bg: var(--bt-primario);
  --bs-btn-active-border-color: var(--bt-primario);
}
.text-bg-primary { background-color: var(--bt-primario) !important; }
.nav-tabs .nav-link.active { color: var(--bt-primario); }

.barra-principal { background: var(--bt-primario); }
.barra-principal .dropdown-menu { font-size: .95rem; }

/* Marca: doble hélice, BIOTRACE y «by Cellus» (usa los colores de donde se ponga) */
/* El texto va centrado a media altura de la hélice; «by Cellus» sobre la línea de base de BIOTRACE. */
.marca { display: inline-flex; align-items: center; gap: .4rem; line-height: 1; }
.marca-logo { display: inline-flex; }
.marca-texto { display: inline-flex; align-items: baseline; gap: .4rem; }
.marca-helice { width: 1.9rem; height: 1.9rem; }
.marca-acceso .marca-helice { width: 2.8rem; height: 2.8rem; }
.marca-nombre { font-size: 1.25rem; font-weight: 600; }
.marca-by { font-size: .8rem; font-weight: 700; letter-spacing: .04em; opacity: .75; }
/* En la barra, BIOTRACE (más grande) queda sobre la misma línea de base que el menú. */
.barra-principal .navbar-brand .marca { position: relative; top: .19rem; }
.marca-acceso .marca-nombre { font-size: 1.75rem; }
.marca-acceso .marca-by { font-size: 1rem; }

.codigo { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em; }

/* Inicio */
.tarjeta-modulo {
  display: flex; gap: .9rem; align-items: center; height: 100%;
  padding: .9rem 1rem; border-radius: .6rem; background: #fff;
  border: 1px solid #e1e8ea; color: inherit; text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
}
.tarjeta-modulo:hover { border-color: var(--bt-primario); box-shadow: 0 2px 8px rgba(11, 110, 117, .12); }
.tarjeta-modulo > i { font-size: 1.6rem; color: var(--bt-primario); }

.tarjeta-resumen {
  display: flex; flex-direction: column; gap: .1rem; height: 100%;
  padding: .75rem 1rem; border-radius: .6rem; background: #fff;
  border: 1px solid #e1e8ea; color: inherit; text-decoration: none;
}
.tarjeta-resumen .numero { font-size: 1.6rem; font-weight: 600; line-height: 1.2; }
.tarjeta-resumen .numero small { font-size: .9rem; font-weight: 400; color: #6c7a80; }
.tarjeta-resumen span:last-child { font-size: .85rem; color: #5b6b71; }
.tarjeta-resumen.alerta { border-left: 4px solid #f0ad00; }
.tarjeta-resumen.ok { border-left: 4px solid #198754; }

/* Acceso */
.pantalla-acceso { background: linear-gradient(160deg, #e7f2f3 0%, #f4f7f8 60%); min-height: 100vh; }
.codigo-verificacion { letter-spacing: .5em; font-weight: 600; }

/* Tablas y listas */
.fila-enlace { cursor: pointer; }
.datos dt { font-weight: 500; color: #5b6b71; }
.datos dd { margin-bottom: .35rem; }
.detalle-control { white-space: pre-wrap; font-family: inherit; }
.encabezado-orden { border-left: 4px solid var(--bt-primario); }
.historial { max-height: 22rem; overflow-y: auto; }

/* Formularios */
.opciones > div { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; }
/* Django repite la clase del widget en el contenedor de las opciones: se anula el
   estilo de «botón» de Bootstrap en ese contenedor para que no lo encoja a 1em. */
.opciones > div.form-check-input {
  width: auto; height: auto; margin: 0; float: none; border: 0; border-radius: 0;
  background: none; appearance: none; -webkit-appearance: none; box-shadow: none;
}
.opciones label { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; }
.opciones label .form-check-input { margin-top: 0; }
.opciones.is-invalid { border-left: 3px solid var(--bs-danger); padding-left: .5rem; }
.boton-ahora { white-space: nowrap; }
/* Listas con buscador: «---------» no queda pegado delante de lo que se escribe. */
.ts-wrapper.focus .opcion-vacia { display: none; }

.pregunta-womac { padding-top: .6rem; padding-bottom: .6rem; }
.opciones-escala { display: flex; flex-wrap: wrap; gap: .35rem; }
.opcion-escala {
  display: inline-flex; align-items: center; gap: .35rem; cursor: pointer;
  border: 1px solid #d5dfe2; border-radius: .4rem; padding: .25rem .6rem; background: #fff;
}
.opcion-escala:has(input:checked) { border-color: var(--bt-primario); background: #e3f1f2; }
.opcion-escala input { margin: 0; }
.opciones-escala.eva .opcion-escala { min-width: 3rem; justify-content: center; }

/* Firma */
.lienzo-firma {
  width: 100%; height: 200px; border: 1px dashed #9fb3b8; border-radius: .4rem;
  background: #fff; touch-action: none; cursor: crosshair;
}
.firma-guardada { max-height: 200px; }

/* Check de infiltración */
.paso {
  display: inline-flex; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--bt-primario); color: #fff; align-items: center; justify-content: center;
  font-size: .9rem; margin-right: .3rem;
}
.resultado-check { border-radius: .8rem; padding: 1.5rem; color: #fff; text-align: center; }
.resultado-check.ok { background: #198754; }
.resultado-check.bloqueo { background: #c82333; animation: parpadeo 1s ease-in-out 3; }
.resultado-check .titulo { font-size: 1.8rem; font-weight: 700; }
.resultado-check .detalle { font-size: 1.1rem; margin-top: .5rem; }
@keyframes parpadeo { 50% { filter: brightness(1.25); } }

/* Calendario */
#calendario { background: #fff; padding: .75rem; border-radius: .6rem; border: 1px solid #e1e8ea; }
.fc .fc-event { cursor: pointer; }
.evento-agendada { background: #6c757d; border-color: #6c757d; }
.evento-en_toma, .evento-en_transporte { background: #0dcaf0; border-color: #0dcaf0; }
.evento-en_laboratorio { background: var(--bt-primario); border-color: var(--bt-primario); }
.evento-por_liberar { background: #f0ad00; border-color: #f0ad00; }
.evento-liberada, .evento-entregada { background: #198754; border-color: #198754; }
.evento-aplicada { background: #343a40; border-color: #343a40; }
.evento-rechazada { background: #dc3545; border-color: #dc3545; }

@media print {
  body { background: #fff; }
  .card { border: 1px solid #ccc; break-inside: avoid; }
}

/* Llamada de seguimiento: texto que lee quien llama */
.guion-llamada { font-style: italic; color: var(--bs-secondary-color); margin-bottom: .5rem; }

/* Encuesta de seguimiento: tipo y preguntas de gravedad de la llamada */
.opciones-tipo { display: flex; flex-wrap: wrap; gap: .35rem; }
.pregunta-grave { border: 1px solid var(--bs-danger-border-subtle); border-left: 3px solid var(--bs-danger); border-radius: .375rem; padding: .5rem .75rem; height: 100%; }