/* 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;
  }
}


/* v41.6 visual polish: tabs, KPI cards and modal recipes */
.r-scroll.om-tab-scroll,
.om-tab-scroll,
.patient-tabs-scroll {
  scrollbar-width: thin !important;
  scrollbar-color: color-mix(in oklab, var(--accent), transparent 55%) transparent !important;
  padding-bottom: 4px !important;
}
.r-scroll.om-tab-scroll::-webkit-scrollbar,
.om-tab-scroll::-webkit-scrollbar,
.patient-tabs-scroll::-webkit-scrollbar { height: 5px !important; }
.r-scroll.om-tab-scroll::-webkit-scrollbar-thumb,
.om-tab-scroll::-webkit-scrollbar-thumb,
.patient-tabs-scroll::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--accent), transparent 48%) !important;
}
.om-premium-card,
.om-card,
[class*="Card"] { overflow: visible; }
.om-kpi-value,
.mono.tnum {
  overflow-wrap: normal !important;
  word-break: normal !important;
}
.om-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: grid;
  place-items: center;
  padding: 24px;
  background: color-mix(in oklab, var(--ink), transparent 72%);
  backdrop-filter: blur(10px);
}
.om-modal-card {
  width: min(920px, 100%);
  max-height: min(88vh, 860px);
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: 0 30px 90px rgba(15, 23, 42, .22);
  padding: 24px;
}
.om-modal-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 16px;
}
.om-modal-x {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--ink-2);
  font: inherit;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.om-receta-templates {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.om-receta-templates button {
  border: 0;
  cursor: pointer;
  border-radius: 999px;
  padding: 8px 13px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-family: inherit;
  font-size: 12.5px;
}
.om-receta-templates button:hover { background: var(--accent-soft); color: var(--accent); }
.om-receta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}
.om-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}
@media (max-width: 760px) {
  .om-modal-backdrop { padding: 12px; place-items: end center; }
  .om-modal-card { width: 100%; max-height: 92vh; border-radius: 22px 22px 0 0; padding: 18px; }
  .om-receta-grid { grid-template-columns: 1fr; }
}


/* v41.7 navegación: top automático y flechas/scrollbars más visibles */
.r-scroll.om-tab-scroll,
.om-tab-scroll,
.patient-tabs-scroll {
  scrollbar-width: auto !important;
  padding-bottom: 8px !important;
}
.r-scroll.om-tab-scroll::-webkit-scrollbar,
.om-tab-scroll::-webkit-scrollbar,
.patient-tabs-scroll::-webkit-scrollbar {
  height: 10px !important;
}
.r-scroll.om-tab-scroll::-webkit-scrollbar-button:single-button,
.om-tab-scroll::-webkit-scrollbar-button:single-button,
.patient-tabs-scroll::-webkit-scrollbar-button:single-button {
  display: block !important;
  width: 18px !important;
  height: 10px !important;
  background-color: transparent !important;
}
.r-scroll.om-tab-scroll::-webkit-scrollbar-button:single-button:horizontal:decrement,
.om-tab-scroll::-webkit-scrollbar-button:single-button:horizontal:decrement,
.patient-tabs-scroll::-webkit-scrollbar-button:single-button:horizontal:decrement {
  background: linear-gradient(135deg, transparent 45%, var(--accent) 46% 58%, transparent 59%) center / 12px 12px no-repeat !important;
}
.r-scroll.om-tab-scroll::-webkit-scrollbar-button:single-button:horizontal:increment,
.om-tab-scroll::-webkit-scrollbar-button:single-button:horizontal:increment,
.patient-tabs-scroll::-webkit-scrollbar-button:single-button:horizontal:increment {
  background: linear-gradient(315deg, transparent 45%, var(--accent) 46% 58%, transparent 59%) center / 12px 12px no-repeat !important;
}
.r-scroll.om-tab-scroll::-webkit-scrollbar-thumb,
.om-tab-scroll::-webkit-scrollbar-thumb,
.patient-tabs-scroll::-webkit-scrollbar-thumb {
  min-width: 46px !important;
  background: color-mix(in oklab, var(--accent), transparent 22%) !important;
}
.om-sidebar-section-chevron {
  font-size: 22px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
}
.sidebar-collapse-btn span,
button[aria-label="Contraer menú"] span,
button[aria-label="Expandir menú"] span {
  font-size: 22px !important;
  font-weight: 800 !important;
}