/* OdontoNic v41.28 · Tablet QA / Responsive Pro
   Capa de ajustes para tablets 8"-13". No agrega funcionalidad: mejora tacto,
   modales, agenda, listados y navegación para uso diario en consultorio. */

:root {
  --om-touch-target: 44px;
  --om-tablet-sidebar: 232px;
}

button,
[role="button"],
input,
select,
textarea,
a {
  -webkit-tap-highlight-color: transparent;
}

button,
[role="button"] {
  touch-action: manipulation;
}

/* Zonas táctiles mínimas: evita botones microscópicos en tablet */
button,
.button,
.om-action-tile,
.om-modal-x,
.om-tab-scroll button,
.patient-tabs-scroll button,
.r-scroll.om-tab-scroll button {
  min-height: var(--om-touch-target);
}

input,
select,
textarea {
  min-height: var(--om-touch-target);
}

/* Modales: siempre usables en tablet, con acciones visibles y scroll interno. */
.om-modal-backdrop,
.om-portal-backdrop,
[class*="modal-backdrop"],
[class*="ModalBackdrop"] {
  overscroll-behavior: contain;
}

.om-modal-card,
.om-receta-modal,
.r-full-phone,
[class*="modal-card"],
[class*="ModalCard"] {
  max-width: min(940px, calc(100vw - 32px)) !important;
  max-height: calc(100dvh - 32px) !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.om-modal-actions,
.modal-actions,
[class*="modal-actions"],
[class*="ModalActions"] {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: linear-gradient(180deg, transparent, var(--surface) 22%, var(--surface));
  padding-top: 14px !important;
}

/* Listados y tablas: scroll horizontal controlado, no toda la página convertida en pista de patinaje. */
.om-data-table,
.om-scroll-x,
.table-wrap,
.data-wrap,
.report-table,
.caja-table,
[class*="table"],
[class*="Table"] {
  max-width: 100%;
}

.om-data-table,
.om-scroll-x,
.table-wrap,
.data-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Agenda: la tablet necesita ver controles y grilla sin que todo se escape al margen. */
.agenda-day-scroll,
.r-scroll.agenda-day-scroll,
[class*="agenda-day-scroll"] {
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin;
}

.agenda-day-scroll::-webkit-scrollbar,
.r-scroll.agenda-day-scroll::-webkit-scrollbar {
  height: 8px;
}

.agenda-day-scroll::-webkit-scrollbar-thumb,
.r-scroll.agenda-day-scroll::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--accent), transparent 45%);
  border-radius: 999px;
}

/* Pestañas clínicas en paciente: usables con dedo. */
.om-tab-scroll,
.patient-tabs-scroll,
.r-scroll.om-tab-scroll {
  gap: 8px !important;
  scroll-snap-type: x proximity;
}

.om-tab-scroll > *,
.patient-tabs-scroll > *,
.r-scroll.om-tab-scroll > * {
  scroll-snap-align: start;
}

/* iPad landscape / tablets grandes */
@media (min-width: 861px) and (max-width: 1180px) {
  :root {
    --om-sidebar-width: var(--om-tablet-sidebar) !important;
  }

  .app-sidebar {
    width: var(--om-tablet-sidebar) !important;
    flex-basis: var(--om-tablet-sidebar) !important;
  }

  main {
    margin-left: var(--om-tablet-sidebar) !important;
  }

  .page-pad {
    padding: 26px 22px 42px !important;
  }

  .r-hero,
  h1.serif,
  h1 {
    font-size: clamp(42px, 5.2vw, 68px) !important;
    line-height: .98 !important;
  }

  .om-premium-hero {
    border-radius: 24px;
  }

  .om-quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* KPIs: 2/3 columnas antes que números cortados como ticket mojado. */
  .om-kpi-grid,
  .dashboard-kpis,
  .finance-kpis,
  [class*="kpi-grid"],
  [class*="KpiGrid"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Formularios de dos columnas siguen, pero sin aplastar inputs. */
  .om-form-grid,
  [class*="form-grid"],
  [class*="FormGrid"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* iPad portrait / tablets angostas */
@media (min-width: 700px) and (max-width: 860px) {
  :root {
    --om-sidebar-width: 92px !important;
  }

  .app-sidebar {
    width: 92px !important;
    flex-basis: 92px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  main {
    margin-left: 92px !important;
  }

  .app-sidebar .om-sidebar-section-head,
  .app-sidebar .om-sidebar-section-body-inner,
  .app-sidebar nav a,
  .app-sidebar nav button {
    max-width: 100% !important;
  }

  .app-sidebar .om-sidebar-section-head span:not(.om-sidebar-section-chevron),
  .app-sidebar nav a span:not(:first-child),
  .app-sidebar nav button span:not(:first-child) {
    display: none !important;
  }

  .page-pad {
    padding: 22px 18px 40px !important;
  }

  .r-hero,
  h1.serif,
  h1 {
    font-size: clamp(38px, 7vw, 58px) !important;
    line-height: 1 !important;
  }

  .r-wrap,
  .r-actions {
    flex-wrap: wrap !important;
  }

  .om-quick-grid,
  .om-kpi-grid,
  .dashboard-kpis,
  .finance-kpis,
  [class*="kpi-grid"],
  [class*="KpiGrid"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .om-form-grid,
  [class*="form-grid"],
  [class*="FormGrid"] {
    grid-template-columns: 1fr !important;
  }

  .om-modal-card,
  .om-receta-modal,
  .r-full-phone,
  [class*="modal-card"],
  [class*="ModalCard"] {
    width: calc(100vw - 28px) !important;
    border-radius: 24px !important;
    padding: 20px !important;
  }

  /* Agenda diaria: permitir columnas anchas sin romper el viewport. */
  .agenda-day-scroll > div,
  .r-scroll.agenda-day-scroll > div {
    min-width: 760px !important;
  }
}

/* Tablets chicas o navegador partido: comportamiento cercano a móvil, pero sin romper modales. */
@media (max-width: 699px) {
  .om-modal-card,
  .om-receta-modal,
  .r-full-phone,
  [class*="modal-card"],
  [class*="ModalCard"] {
    width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
    border-radius: 22px !important;
    padding: 18px !important;
  }

  .om-modal-head {
    gap: 10px !important;
  }

  .om-modal-actions,
  .modal-actions,
  [class*="modal-actions"],
  [class*="ModalActions"] {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 10px !important;
  }

  .om-modal-actions button,
  .modal-actions button,
  [class*="modal-actions"] button,
  [class*="ModalActions"] button {
    flex: 1 1 140px;
  }
}

/* Orientación horizontal: agenda prioritaria para consultorio/tablet en escritorio. */
@media (orientation: landscape) and (min-width: 900px) and (max-width: 1180px) {
  .agenda-day-scroll > div,
  .r-scroll.agenda-day-scroll > div {
    min-width: 900px;
  }
}

/* Reduce animaciones para tablets con menos potencia o usuarios sensibles. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}

/* v41.31 Drag Scroll UX */
.om-drag-scroll-ready {
  cursor: grab;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scroll-behavior: auto;
}
.om-drag-scroll-ready.om-drag-scroll-dragging {
  cursor: grabbing !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}
.om-drag-scroll-ready.om-drag-scroll-dragging * {
  cursor: grabbing !important;
}
.om-drag-scroll-ready button,
.om-drag-scroll-ready a,
.om-drag-scroll-ready input,
.om-drag-scroll-ready textarea,
.om-drag-scroll-ready select,
.om-drag-scroll-ready [role="button"],
.om-drag-scroll-ready [draggable="true"],
.om-drag-scroll-ready .om-no-drag-scroll,
.om-drag-scroll-ready canvas {
  cursor: auto;
}
.r-scroll.om-drag-scroll-ready,
.om-scroll-x.om-drag-scroll-ready,
.agenda-day-scroll.om-drag-scroll-ready,
.table-scroll.om-drag-scroll-ready,
.om-data-table-wrap.om-drag-scroll-ready {
  scrollbar-width: thin;
}
@media (hover: hover) and (pointer: fine) {
  .om-drag-scroll-ready:hover {
    box-shadow: inset 0 -1px 0 color-mix(in oklab, var(--accent, #0f766e) 18%, transparent);
  }
}