/* ============================================================
   app.css — Identidad visual CRM Destiny Odontología
   Mobile-first sobre Bootstrap 5.
   Concepto: "consultorio nocturno" — azul petróleo profundo
   (la noche, el turno del doctor) + turquesa clínico como acento.
   ============================================================ */

:root {
  --destiny-oscuro:   #0c2431;  /* azul petróleo: sidebar, login, barra */
  --destiny-oscuro-2: #123244;  /* hover / relieve sobre el oscuro */
  --destiny-primario: #1899a8;  /* turquesa clínico: botones, links, activo */
  --destiny-primario-2:#127c89; /* hover del primario */
  --destiny-acento:   #5fd0dd;  /* turquesa claro: detalles sobre fondo oscuro */
  --destiny-fondo:    #f4f7f8;  /* fondo general de contenido */
  --sidebar-ancho:    250px;
  --barra-alto:       56px;
}

/* ---------- Base ---------- */
body.app-body {
  background: var(--destiny-fondo);
  min-height: 100vh;
}

.marca-acento { color: var(--destiny-acento); }
.text-destiny { color: var(--destiny-primario); }

/* Botón principal de la marca */
.btn-destiny {
  background: var(--destiny-primario);
  border-color: var(--destiny-primario);
  color: #fff;
}
.btn-destiny:hover, .btn-destiny:focus {
  background: var(--destiny-primario-2);
  border-color: var(--destiny-primario-2);
  color: #fff;
}

/* ---------- Login ---------- */
.login-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(24,153,168,.25), transparent 60%),
    var(--destiny-oscuro);
}
.login-caja { width: 100%; max-width: 400px; }
.login-logo {
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 18px;
  background: var(--destiny-primario);
  color: #fff; font-size: 1.9rem;
  box-shadow: 0 8px 24px rgba(24,153,168,.35);
}
.login-sub     { color: rgba(255,255,255,.55); font-size: .9rem; }
.login-version { color: rgba(255,255,255,.35); font-size: .8rem; }

/* ---------- Barra superior (móvil) ---------- */
.barra-superior {
  background: var(--destiny-oscuro);
  height: var(--barra-alto);
}
.btn-barra { color: #fff; padding: .25rem .5rem; }
.btn-barra:hover { color: var(--destiny-acento); }

/* ---------- Sidebar ---------- */
/* !important necesario: Bootstrap aplica background transparent !important
   al offcanvas-lg cuando se expande en desktop (>=992px). */
.sidebar {
  background: linear-gradient(180deg, var(--destiny-oscuro) 0%, #0a1d28 100%) !important;
  width: var(--sidebar-ancho);
}
.sidebar-marca {
  height: var(--barra-alto);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.sidebar-link {
  color: rgba(255,255,255,.92);
  border-radius: .5rem;
  padding: .7rem .9rem;
  margin-bottom: .2rem;
  display: flex;
  align-items: center;
  border-left: 3px solid transparent;
  font-size: .95rem;
}
.sidebar-link .bi {
  color: var(--destiny-acento);
  opacity: .8;
  width: 1.4rem;
}
.sidebar-link:hover {
  color: #fff;
  background: var(--destiny-oscuro-2);
}
.sidebar-link.activo {
  color: #fff;
  background: var(--destiny-primario);
  border-left-color: var(--destiny-acento);
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(24,153,168,.35);
}
.sidebar-link.activo .bi { color: #fff; opacity: 1; }
.sidebar-pie {
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}

/* ---------- Contenido ---------- */
.contenido {
  padding: calc(var(--barra-alto) + 1rem) 1rem 5rem; /* deja aire para el pulgar */
}

/* Desktop >=992px: sidebar fija a la izquierda, sin barra superior */
@media (min-width: 992px) {
  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
  }
  .contenido {
    margin-left: var(--sidebar-ancho);
    padding: 1.5rem 2rem 3rem;
  }
}

/* ---------- Bottom sheet (selector de hallazgo del odontograma) ----------
   Se aplica al modal de Bootstrap: <div class="modal modal-bottom-sheet"> */
@media (max-width: 991.98px) {
  .modal-bottom-sheet .modal-dialog {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    margin: 0;
    max-width: none;
  }
  .modal-bottom-sheet .modal-content {
    border-radius: 1.25rem 1.25rem 0 0;
    border: 0;
  }
  .modal-bottom-sheet.fade .modal-dialog {
    transform: translateY(100%);
    transition: transform .25s ease-out;
  }
  .modal-bottom-sheet.show .modal-dialog { transform: translateY(0); }
}

/* ---------- Detalles táctiles ---------- */
/* Objetivos táctiles cómodos en listas de acciones */
.btn-tactil { min-height: 44px; }

/* Tarjetas de módulo con sombra suave uniforme */
.card { border: 0; box-shadow: 0 1px 4px rgba(12,36,49,.08); }

/* ---------- Módulo Pacientes ---------- */
.avatar-inicial {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(24,153,168,.12);
  color: var(--destiny-primario);
  font-weight: 700; font-size: .9rem;
  flex-shrink: 0;
}
.nota-clinica { border-bottom: 1px dashed #dee2e6; }
.nota-clinica:last-child { border-bottom: 0; margin-bottom: 0 !important; padding-bottom: 0 !important; }

/* ---------- Placeholder en construcción ---------- */
.construccion-icono {
  width: 84px; height: 84px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 24px;
  background: rgba(24,153,168,.12);
  color: var(--destiny-primario);
  font-size: 2.4rem;
}

/* ---------- Odontograma ---------- */
.odontograma-contenedor { overflow-x: auto; -webkit-overflow-scrolling: touch; }
#svgOdontograma { width: 100%; min-width: 640px; height: auto; display: block; }
.odo-superficie {
  stroke: #6c757d; stroke-width: 1;
  cursor: pointer;
  transition: fill-opacity .12s;
}
.odo-superficie:hover { fill-opacity: .6; }
.odo-numero {
  font: 600 11px system-ui, sans-serif;
  fill: #495057;
  text-anchor: middle;
  user-select: none;
}
.odo-simbolo { pointer-events: none; }
.odo-simbolo-texto {
  font: 700 13px system-ui, sans-serif;
  text-anchor: middle;
  pointer-events: none;
}
.cuadro-leyenda {
  display: inline-block; width: 14px; height: 14px;
  border-radius: 3px; vertical-align: -2px; margin-right: 4px;
}
.leyenda-rojo { background: #dc3545; }
.leyenda-azul { background: #0d6efd; }

/* ---------- Bottom sheet de hallazgos ---------- */
.bs-grid-tipos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .5rem;
}
@media (min-width: 576px) { .bs-grid-tipos { grid-template-columns: repeat(3, 1fr); } }
.bs-tipo { min-height: 42px; white-space: normal; line-height: 1.15; }
.bs-tipo.activo {
  background: var(--destiny-primario) !important;
  border-color: var(--destiny-primario) !important;
  color: #fff !important;
}
.bs-estado.activo.btn-outline-danger  { background: #dc3545; color: #fff; }
.bs-estado.activo.btn-outline-primary { background: #0d6efd; color: #fff; }

/* Selector de superficies: cruz de 5 botones grandes para el dedo */
.bs-selector-superficies {
  display: grid;
  grid-template-areas: ". arr ." "izq cen der" ". aba .";
  grid-template-columns: 64px 64px 64px;
  grid-template-rows: 52px 52px 52px;
  gap: 4px;
  width: max-content;
}
.bs-sup {
  border: 2px solid #ced4da;
  border-radius: .6rem;
  background: #fff;
  font-weight: 700;
  color: #495057;
  font-size: 1rem;
}
.bs-sup-arriba { grid-area: arr; }
.bs-sup-abajo  { grid-area: aba; }
.bs-sup-izq    { grid-area: izq; }
.bs-sup-der    { grid-area: der; }
.bs-sup-centro { grid-area: cen; }
.bs-sup.activo {
  background: var(--destiny-primario);
  border-color: var(--destiny-primario);
  color: #fff;
}
.bs-existente {
  background: #f8f9fa;
  border-radius: .5rem;
  padding: .35rem .6rem;
}
.punto-estado {
  width: 10px; height: 10px; border-radius: 50%;
  display: inline-block; flex-shrink: 0;
}

/* ---------- Figura NTS del diente (bottom sheet) ---------- */
.bs-raiz {
  fill: #f8f9fa;
  stroke: #6c757d;
  stroke-width: 1.5;
}
.bs-zona {
  stroke: #495057;
  stroke-width: 1.5;
  cursor: pointer;
}
.bs-zona-letra {
  font: 700 15px system-ui, sans-serif;
  text-anchor: middle;
  cursor: pointer;
  user-select: none;
}

/* Recuadros de siglas (gráfico principal, 5.12/5.16 NTS) */
.odo-recuadro {
  fill: #ffffff;
  stroke: #6c757d;
  stroke-width: 1;
  cursor: pointer;
}
.odo-sigla {
  font: 700 11px system-ui, sans-serif;
  text-anchor: middle;
  pointer-events: none;
}

/* Raíces del gráfico principal (lámina NTS completa) */
.odo-raiz {
  fill: #ffffff;
  stroke: #6c757d;
  stroke-width: 1;
  cursor: pointer;
}

/* ---------- Agenda ---------- */
.franja-hora { width: 74px; font-weight: 600; font-size: .9rem; flex-shrink: 0; }
.franja-libre { border-left: 3px dashed #ced4da !important; }
.franja-libre:hover { background: rgba(24,153,168,.06); }
.fab-nueva {
  position: fixed; right: 1rem; bottom: 1.25rem;
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(12,36,49,.35);
  z-index: 1030;
}

/* Pills del módulo seguimiento */
.nav-pills .nav-link.bg-destiny-nav { background: var(--destiny-primario); }