/* 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); }
/* Barra del flujo de procesos (parciales/flujo_procesos.html) */
/* Tres columnas: anterior (ancho fijo) · módulos · siguiente (ancho fijo). Así la lista del
   centro mide lo mismo en todas las pantallas y no cambia de línea al pasar de un módulo a otro. */
.flujo-procesos { display: grid; grid-template-columns: 10rem 1fr 10rem; align-items: center; gap: .5rem; }
.flujo-procesos .flujo-lista { display: flex; flex-wrap: wrap; justify-content: center; gap: .15rem; }
@media (max-width: 991.98px) {
  /* Celular y tableta: solo anterior y siguiente, a lo ancho. */
  .flujo-procesos { grid-template-columns: 1fr 1fr; }
  .flujo-procesos .flujo-lista { display: none; }
}
.flujo-procesos .etapa-flujo {
  display: inline-flex; align-items: center; gap: .25rem; padding: .3rem .5rem; border-radius: 999px;
  font-size: .82rem; color: #3d4b50; text-decoration: none; white-space: nowrap; border: 1px solid transparent;
}
.flujo-procesos .etapa-flujo:hover { background: #eef4f5; color: var(--bt-primario); }
.flujo-procesos .etapa-flujo.actual { background: var(--bt-primario); color: #fff; }  /* sin negrita: no cambia el ancho */
/* Barra de etapas de la orden (parciales/etapas_orden.html) */
.etapas-orden .etapa {
  display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem;
  border: 1px solid #d5dee0; border-radius: 999px; font-size: .875rem; color: #3d4b50;
  text-decoration: none; background: #fff; white-space: nowrap;
}
.etapas-orden a.etapa:hover { border-color: var(--bt-primario); color: var(--bt-primario); }
.etapas-orden .etapa .numero {
  display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: #e8eef0; font-size: .75rem; font-weight: 600;
}
.etapas-orden .etapa.hecha { color: #1f6b3a; border-color: #b9dcc4; background: #f1f9f3; }
.etapas-orden .etapa.en-curso { border-color: var(--bt-primario); color: var(--bt-primario); font-weight: 600; }
.etapas-orden .etapa.en-curso .numero { background: var(--bt-primario); color: #fff; }
.etapas-orden .etapa.abierta { box-shadow: 0 0 0 2px var(--bt-primario) inset; }
.etapas-orden .etapa.sin-enlace { color: #9aa7ab; background: #f6f8f9; border-style: dashed; }
@media (max-width: 575.98px) {
  .etapas-orden .etapa { padding: .2rem .5rem; font-size: .8rem; }
  .etapas-orden .btn { width: 100%; }
}
.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; }
/* Citas de la agenda: hora, paciente y producto; las ya atendidas, tenues y tachadas (como la beta). */
.fc .cita { padding: 2px 3px; overflow: hidden; line-height: 1.15; color: #fff; }
.fc .cita-hora { font-size: .7rem; font-weight: 700; }
.fc .cita-paciente { font-size: .75rem; font-weight: 600; white-space: normal; }
.fc .cita-producto { font-size: .7rem; font-style: italic; white-space: normal; }
.fc .cita-atendida { opacity: .6; }
.fc .cita-atendida .cita-paciente { text-decoration: line-through; }
.fc-list .cita { color: #333; }
/* Horario libre clickeable (lleva al ingreso con esa fecha y hora). */
#calendario[data-agendar] .fc-timegrid-slot-lane:hover { background: #e9f4f5; cursor: pointer; }
#calendario[data-agendar] .fc-daygrid-day:hover { background: #f3f8f9; 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; }
.cita-consulta { background: #198754; border-color: #198754; }
.cita-encuesta { 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%; }

.ayuda-campo { color: #6c8a90; font-size: .85em; line-height: 1; text-decoration: none; vertical-align: baseline; }
.ayuda-campo:hover, .ayuda-campo:focus { color: var(--bt-primario); }
.tabla-reporte { max-height: 65vh; overflow: auto; }
.tabla-reporte thead th { position: sticky; top: 0; z-index: 1; }
.columnas-reporte { max-height: 60vh; overflow-y: auto; }
.columnas-reporte summary { cursor: pointer; padding: .15rem .25rem; }

/* Ambiente de pruebas (BIOTRACE_AMBIENTE=pruebas) */
.franja-pruebas { background: repeating-linear-gradient(45deg, #f0ad00, #f0ad00 12px, #e09d00 12px, #e09d00 24px);
  color: #1d1d1d; font-weight: 700; text-align: center; font-size: .85rem; padding: .3rem .5rem; letter-spacing: .03em; }