/* responsive-fix.css — OdontoNic v1.8.5 */
/* Fix real aplicado al componente Tabs de ui.jsx. */

html,
body,
#root {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

input,
select,
textarea,
button {
  max-width: 100%;
}

main,
section,
aside,
article,
.page-pad,
.r-wrap,
.r-actions,
.r-stack,
.r-full-phone {
  min-width: 0;
  max-width: 100%;
}

.r-wrap > *,
.r-actions > *,
.r-stack > *,
.r-full-phone > * {
  min-width: 0;
}

.mono,
.tnum,
td,
th,
p,
span,
div {
  overflow-wrap: anywhere;
}

/* Tabs: scroll horizontal propio y scrollbar visible */
.r-scroll.om-tab-scroll,
.om-tab-scroll,
.patient-tabs-scroll {
  display: flex !important;
  flex-wrap: nowrap !important;
  max-width: 100% !important;
  width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin !important;
  scrollbar-color: color-mix(in oklab, var(--accent), transparent 25%) transparent !important;
  padding-bottom: 7px !important;
}

.r-scroll.om-tab-scroll::-webkit-scrollbar,
.om-tab-scroll::-webkit-scrollbar,
.patient-tabs-scroll::-webkit-scrollbar {
  height: 8px !important;
  display: block !important;
}

.r-scroll.om-tab-scroll::-webkit-scrollbar-track,
.om-tab-scroll::-webkit-scrollbar-track,
.patient-tabs-scroll::-webkit-scrollbar-track {
  background: color-mix(in oklab, var(--surface-2), transparent 10%) !important;
  border-radius: 999px !important;
}

.r-scroll.om-tab-scroll::-webkit-scrollbar-thumb,
.om-tab-scroll::-webkit-scrollbar-thumb,
.patient-tabs-scroll::-webkit-scrollbar-thumb {
  background: var(--accent) !important;
  border-radius: 999px !important;
}

.r-scroll.om-tab-scroll > *,
.om-tab-scroll > *,
.patient-tabs-scroll > *,
.r-scroll.om-tab-scroll button,
.om-tab-scroll button,
.patient-tabs-scroll button {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* Tablas/listas anchas: scroll interno */
.om-scroll-x,
.table-wrap,
.data-wrap,
.report-table,
.caja-table {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.om-scroll-x table,
.table-wrap table,
.data-wrap table,
.report-table table,
.caja-table table {
  min-width: 680px;
}

.card,
.Card,
[class*="card"],
[class*="Card"] {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 1180px) {
  .page-pad {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

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

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

@media (max-width: 860px) {
  .page-pad {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .r-stack {
    display: flex !important;
    flex-direction: column !important;
  }

  .r-actions {
    width: 100%;
  }

  .r-actions > button,
  .r-actions > a {
    flex: 1 1 150px;
  }
}

@media (max-width: 560px) {
  .page-pad {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .r-hero {
    font-size: clamp(30px, 10vw, 42px) !important;
  }

  .r-full-phone {
    width: 100% !important;
  }

  .r-scroll.om-tab-scroll button,
  .om-tab-scroll button,
  .patient-tabs-scroll button {
    font-size: 13px !important;
  }
}