/* vistas y tabs */
.view{display:none}
.view.on{display:block}
.tabs{display:flex;gap:5px;border-bottom:1px solid var(--bd);margin-bottom:16px;overflow-x:auto}
.tab{border:0;background:none;padding:9px 13px;font-size:13px;cursor:pointer;color:var(--text2);border-bottom:2px solid transparent;white-space:nowrap}
.tab.on{color:var(--text);font-weight:650;border-bottom-color:var(--blue)}
.pane{display:none}
.pane.on{display:block}

/* odontograma */
.odo-wrap{padding:20px 14px;overflow-x:auto;background:var(--soft)}
.arch{min-width:930px;display:flex;flex-direction:column;gap:26px;align-items:center}
.row-t{display:flex;align-items:flex-end;gap:0}
.quad{display:flex;gap:2px}
.mid{width:2px;align-self:stretch;margin:0 9px;border-left:2px dashed var(--bd)}
.tw{width:60px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:3px 1px;border-radius:7px;cursor:pointer}
.tw:hover{background:var(--surf2)}
.tw.sel{background:var(--blueS);box-shadow:inset 0 0 0 1px var(--blue)}
.tw.lo{flex-direction:column}
.tw.lo .tsvg{transform:rotate(180deg)}
.tsvg{width:52px;height:100px;display:block}
.tsvg .pc{fill:var(--tfill);stroke:var(--tline);stroke-width:1.5;stroke-linejoin:round}
.whl{width:38px;height:38px;display:block;margin: 2px 0;}
.whl .z{fill:var(--tfill);stroke:var(--tline);stroke-width:1;cursor:pointer}
.whl .z:hover{fill:var(--surf2)}
.whl .ring{fill:none;stroke:var(--tline);stroke-width:1.2}
.tnum{font-size:11px;font-weight:700;color:var(--text2);cursor:pointer;padding:1px 4px;border-radius:4px}
.tnum:hover{background:var(--blue);color:#fff}
.tw.t-reparado{background:rgba(0,212,255,0.09)!important;border:1.5px solid rgba(0,212,255,0.6)!important;border-radius:8px;box-shadow:0 0 10px rgba(0,212,255,0.25)}
.tw.t-reparado:hover{background:rgba(0,212,255,0.2)!important;border-color:var(--pri,#00d4ff)!important;box-shadow:0 0 16px rgba(0,212,255,0.5)}
.tw.t-pendiente{background:rgba(251,146,60,0.08)!important;border:1.5px dashed rgba(251,146,60,0.65)!important;border-radius:8px;box-shadow:0 0 10px rgba(251,146,60,0.2)}
.tw.t-pendiente:hover{background:rgba(251,146,60,0.18)!important;border-color:#fb923c!important;box-shadow:0 0 16px rgba(251,146,60,0.4)}
.t-date-pill{font-size:8.5px;font-weight:750;color:#00d4ff;background:rgba(0,212,255,0.22);border:1px solid rgba(0,212,255,0.7);border-radius:5px;padding:1px 3px;margin:2px auto;text-align:center;cursor:pointer;white-space:normal;word-break:break-word;line-height:1.15;letter-spacing:-0.02em;box-shadow:0 2px 5px rgba(0,0,0,0.3);transition:all .15s ease;max-width:52px;display:block}
.t-date-pill:hover{background:#00d4ff;color:#000;transform:scale(1.08)}
.t-date-pill.t-pill-pte{color:#fb923c;background:rgba(251,146,60,0.22);border:1px solid rgba(251,146,60,0.7)}
.t-date-pill.t-pill-pte:hover{background:#fb923c;color:#000}
.tw.t-extraido{background:rgba(255,82,82,0.06)!important;border:1.5px dashed rgba(255,82,82,0.55)!important;border-radius:8px;opacity:0.8}
.tw.t-extraido:hover{opacity:1;border-color:#ff5252!important;background:rgba(255,82,82,0.12)!important}
.t-date-pill.t-pill-ext{color:#ff5252;background:rgba(255,82,82,0.22);border:1px solid rgba(255,82,82,0.7);font-size:8px;line-height:1.15}
.t-date-pill.t-pill-ext:hover{background:#ff5252;color:#fff}





.pal{display:flex;flex-wrap:wrap;gap:5px}
.pb{display:inline-flex;gap:6px;align-items:center;padding:4px 9px;border:1px solid var(--bd);border-radius:20px;background:var(--canvas);cursor:pointer;font-size:11.5px;font-weight:500}
.pb:hover{background:var(--surf2)}
.pb.on{border-color:var(--text);box-shadow:inset 0 0 0 1px var(--text);font-weight:650}
.pb i{width:11px;height:11px;border-radius:3px;border:1px solid var(--bd);flex:0 0 11px}

/* historia */
.hsplit{display:grid;grid-template-columns:290px 1fr;gap:16px;align-items:start}
.vitem{border:1px solid var(--bd);border-radius:9px;padding:10px 12px;margin-bottom:8px;cursor:pointer;background:var(--canvas)}
.vitem:hover{background:var(--soft)}
.vitem.on{border-color:var(--blue);background:var(--blueS)}
.vitem .vd{font-size:11px;font-weight:700;color:var(--blue)}
.vitem .vt{font-size:13px;font-weight:600;margin-top:2px}
.blk{padding:13px 0;border-bottom:1px solid var(--bd)}
.blk:last-child{border-bottom:0}
.bitacora{background:var(--soft);border:1px solid var(--bd);border-left:3px solid var(--blue);border-radius:8px;padding:11px 13px;font-size:12.5px;line-height:1.75;white-space:pre-wrap}
.procs{width:100%;border-collapse:collapse;font-size:12.5px}
.procs th{text-align:left;padding:6px 9px;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text2);border-bottom:1px solid var(--bd);background:var(--soft);white-space:nowrap}
.procs td{padding:7px 9px;border-bottom:1px solid var(--bd)}
.drop{border:1.5px dashed var(--bd);border-radius:10px;padding:20px 14px;text-align:center;font-size:12.5px;color:var(--text2);cursor:pointer;line-height:1.7;background:var(--soft)}
.drop:hover{border-color:var(--blue);color:var(--blue)}
.fchip{display:flex;gap:8px;align-items:center;padding:8px 11px;border:1px solid var(--bd);border-radius:8px;margin-bottom:6px;cursor:pointer;font-size:12.5px}
.fchip:hover{background:var(--soft)}
.fchip .muted{font-size:11px}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:9px;margin-bottom:10px}
.th{border:1px solid var(--bd);border-radius:9px;padding:13px 9px;text-align:center;cursor:pointer;background:var(--soft)}
.th:hover{border-color:var(--blue)}
.th span{font-size:26px;display:block}
.th b{font-size:11px;display:block;margin-top:5px}
.th i{font-size:9.5px;color:var(--text2);font-style:normal;display:block}
.bar{height:7px;border-radius:5px;background:var(--surf2);overflow:hidden}
.bar i{display:block;height:100%;background:var(--blue);border-radius:5px}

/* ==========================================================================
   OPTIMIZACIONES MÓVILES PARA PACIENTES Y ODONTOGRAMA
   ========================================================================== */
.odo-swipe-hint {
  display: none;
  box-sizing: border-box;
  font-size: 11px;
  font-weight: 600;
  color: var(--blue, #00d4ff);
  background: rgba(0, 212, 255, 0.08);
  border: 1px solid rgba(0, 212, 255, 0.25);
  border-radius: 20px;
  padding: 5px 12px;
  margin: 4px 12px 10px !important;
  text-align: center;
  align-items: center;
  justify-content: center;
}

@media(max-width: 900px) {
  .odo-swipe-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
  
  .odo-wrap {
    position: relative;
    border-radius: 8px;
    padding: 10px 4px !important;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
  }

  /* Acciones de cabecera del paciente */
  #pacActionsBar {
    display: flex !important;
    gap: 6px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
    width: 100%;
  }
  #pacActionsBar::-webkit-scrollbar {
    display: none;
  }
  #pacActionsBar .btn {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 6px 11px !important;
    font-size: 12px !important;
  }

  /* Paleta de hallazgos táctil */
  .pal {
    gap: 6px;
  }
  .pb {
    padding: 6px 11px !important;
    font-size: 12px !important;
    min-height: 34px;
  }

  /* Ficha médica */
  .vitem {
    padding: 12px !important;
  }
}

/* ==========================================================================
   AVISO DE GIRO DE PANTALLA Y ADAPTACIÓN TABLET/MÓVIL DEL ODONTOGRAMA
   ========================================================================== */
.odo-rotate-hint {
  display: none;
  box-sizing: border-box;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #00d4ff !important;
  background: rgba(0, 212, 255, 0.16) !important;
  border: 1.5px solid rgba(0, 212, 255, 0.6) !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  margin: 10px 12px !important;
  text-align: center !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: 0 0 16px rgba(0, 212, 255, 0.3) !important;
  user-select: none;
}

/* En teléfonos y dispositivos móviles: mostrar aviso de giro */
@media (max-width: 767px) {
  .odo-rotate-hint {
    display: flex !important;
    animation: pulseRotate 2.5s infinite;
  }
}
@media (max-width: 900px) and (orientation: portrait) {
  .odo-rotate-hint {
    display: flex !important;
    animation: pulseRotate 2.5s infinite;
  }
}
@keyframes pulseRotate {
  0%, 100% { transform: scale(1); opacity: 0.95; }
  50% { transform: scale(1.02); opacity: 1; box-shadow: 0 0 16px rgba(0, 212, 255, 0.45); }
}

/* En tablets de 9" o más (768px a 1200px): Odontodiagrama completo derecho sin recorte */
@media (min-width: 768px) and (max-width: 1200px) {
  .odo-rotate-hint {
    display: none !important;
  }
  .odo-swipe-hint {
    display: none !important;
  }
  .odo-wrap {
    display: flex !important;
    justify-content: center !important;
    padding: 14px 4px !important;
    overflow-x: hidden !important;
  }
  .arch {
    min-width: unset !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 18px !important;
  }
  .quad {
    gap: 1px !important;
  }
  .mid {
    margin: 0 4px !important;
  }
  .tw {
    width: 44px !important;
    padding: 2px 0 !important;
  }
  .tsvg {
    width: 38px !important;
    height: 74px !important;
  }
  .whl {
    width: 32px !important;
    height: 32px !important;
  }
  .tnum {
    font-size: 10px !important;
    padding: 1px 2px !important;
  }
  .t-date-pill {
    max-width: 42px !important;
    font-size: 7.5px !important;
    padding: 1px 2px !important;
  }
}

/* En celulares girados en horizontal (landscape < 900px): Odontograma completo horizontal */
@media (max-width: 900px) and (orientation: landscape) {
  .odo-rotate-hint {
    display: none !important;
  }
  .odo-swipe-hint {
    display: none !important;
  }
  .odo-wrap {
    display: flex !important;
    justify-content: center !important;
    padding: 10px 4px !important;
  }
  .arch {
    min-width: unset !important;
    width: 100% !important;
    gap: 14px !important;
  }
  .quad {
    gap: 1px !important;
  }
  .mid {
    margin: 0 4px !important;
  }
  .tw {
    width: 42px !important;
    padding: 1px 0 !important;
  }
  .tsvg {
    width: 36px !important;
    height: 68px !important;
  }
  .whl {
    width: 30px !important;
    height: 30px !important;
  }
  .tnum {
    font-size: 9.5px !important;
  }
  .t-date-pill {
    max-width: 40px !important;
    font-size: 7px !important;
  }
}