/*
 * ODONTOTIP · Capa responsive global 2026
 * Objetivos:
 * - Escritorio compacto 1366x768 sin sacrificar legibilidad.
 * - Escalado fluido en Full HD / 2K / 4K.
 * - Formularios móviles >=16px para evitar el auto-zoom de Safari/iOS.
 */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html,
body {
  max-width: 100%;
}

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

/* Evita que grids/flex hijos fuercen desbordes horizontales. */
.app-shell,
.main-panel,
.main-shell,
.page-content,
.content-grid,
.card,
[class*="grid"] {
  min-width: 0;
}

/*
 * Escritorio compacto: 1366x768 y portátiles similares.
 * Se reduce espacio decorativo, no el tamaño funcional de los controles.
 */
@media (min-width: 861px) and (max-width: 1440px),
       (min-width: 861px) and (max-height: 820px) {
  :root {
    --sidebar: 248px;
    --radius: 18px;
    --radius-sm: 12px;
  }

  .app-shell > .sidebar {
    padding: 12px 10px !important;
    gap: 10px !important;
  }

  .app-shell > .main-panel {
    padding: 10px 16px 24px !important;
  }

  .topbar.topbar-premium,
  .topbar {
    margin-bottom: 14px !important;
  }

  .content-grid,
  .dashboard-page,
  .grid-2,
  .grid-3,
  .grid-4,
  .grid-auto {
    gap: 14px !important;
  }

  .card {
    padding: 16px;
  }

  .section-head {
    margin-bottom: 12px;
  }

  .data-table th,
  .data-table td {
    padding-top: 11px;
    padding-bottom: 11px;
  }
}

/* Altas resoluciones: el contenido crece, pero no se estira indefinidamente. */
@media (min-width: 1800px) {
  .app-shell > .main-panel {
    padding-left: max(28px, calc((100vw - var(--sidebar, 286px) - 1800px) / 2)) !important;
    padding-right: max(28px, calc((100vw - var(--sidebar, 286px) - 1800px) / 2)) !important;
    padding-bottom: 40px !important;
  }

  .content-grid,
  .dashboard-page {
    gap: 22px !important;
  }
}

/*
 * Móvil: Safari/iOS hace zoom automático al enfocar inputs menores de 16px.
 * Se preserva el zoom manual del usuario por accesibilidad.
 */
@media (max-width: 860px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]),
  select,
  textarea,
  [contenteditable="true"] {
    font-size: 16px !important;
  }

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

  .data-table-wrap,
  .table-responsive,
  [class*="table-wrap"] {
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }
}

/* Superadmin: mismo criterio de densidad y alta resolución. */
@media (min-width: 721px) and (max-width: 1440px),
       (min-width: 721px) and (max-height: 820px) {
  .main-shell .page-content {
    padding: 16px !important;
  }
}

@media (min-width: 1800px) {
  .main-shell .page-content {
    padding-left: max(28px, calc((100vw - 260px - 1800px) / 2)) !important;
    padding-right: max(28px, calc((100vw - 260px - 1800px) / 2)) !important;
  }
}

/* Modales en portátiles de poca altura: siempre deben caber dentro del viewport. */
@media (min-width: 861px) and (max-height: 820px) {
  .modal-backdrop,
  .modal__backdrop,
  [class$="-modal-backdrop"] {
    padding: 12px !important;
  }

  .modal,
  .modal-card,
  .modal-dialog,
  .modal__panel,
  .modal-shell {
    max-height: calc(100dvh - 24px) !important;
  }
}

/* Evita que un modal genérico sobresalga del ancho útil en móvil. */
@media (max-width: 860px) {
  .modal,
  .modal-card,
  .modal-dialog,
  .modal__panel,
  .modal-shell {
    max-width: 100% !important;
    box-sizing: border-box;
  }
}

/* ======================================================================
 * ODONTOTIP · FASE 5 RESPONSIVE / VISUAL
 * Capa no destructiva. No altera lógica ni estructura de datos.
 * ====================================================================== */

/* Base: cualquier hijo de flex/grid debe poder encogerse sin romper ancho. */
.main-panel > *,
.topbar > *,
.section-head > *,
.table-toolbar > *,
.form-grid > *,
.form-grid-3 > *,
.hc-shell > *,
.hc-content > *,
.calendar-page-pro > *,
.caja-page > *,
.rx-page > *,
.ord-page > *,
.subscription-page > * {
  min-width: 0;
}

/* Texto largo (correo, nombres, observaciones) no debe empujar tarjetas. */
.card,
.modal,
.hc-modal-card,
.calendar-cita-modal,
.calendar-evento-modal,
.rx-modal-dialog,
.ord-modal-dialog,
.orto-modal-dialog,
.pt-modal-card,
.subscription-payment-dialog,
.subscription-renewal-dialog {
  overflow-wrap: anywhere;
}

/* Tablas: conservar columnas y permitir desplazamiento horizontal controlado. */
.data-table-wrap,
.table-responsive,
.caja-table-wrap,
.subscription-table-wrap,
.consent-page .data-table-wrap,
[class*="table-wrap"] {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

.data-table,
.caja-table,
.subscription-table {
  max-width: none;
}

/* Evita que controles y acciones rompan tarjetas en anchos intermedios. */
.actions,
.form-actions,
.topbar-actions,
.pt-hero-actions,
.ord-record-actions,
.rx-record-actions,
.calendar-toolbar-actions {
  flex-wrap: wrap;
}

/* ----------------------------------------------------------------------
 * 1366x768 / portátiles compactos
 * ---------------------------------------------------------------------- */
@media (min-width: 861px) and (max-width: 1440px),
       (min-width: 861px) and (max-height: 820px) {
  :root {
    --sidebar: 248px;
  }

  .main-panel {
    padding: 10px 16px 24px !important;
  }

  .topbar.topbar-premium {
    top: 8px !important;
    min-height: 64px !important;
    margin-bottom: 12px !important;
    padding: 9px 12px !important;
    border-radius: 20px !important;
    gap: 12px !important;
  }

  .topbar-left {
    gap: 10px !important;
  }

  .topbar h1 {
    font-size: clamp(22px, 1.8vw, 26px) !important;
  }

  .page-kicker {
    font-size: 9px !important;
  }

  .icon-button {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 14px !important;
  }

  .user-pill,
  .btn-logout {
    min-height: 40px !important;
  }

  .avatar {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
  }

  .dashboard-page,
  .content-grid,
  .caja-page,
  .rx-page,
  .ord-page,
  .subscription-page {
    gap: 12px !important;
  }

  .card {
    padding: 14px;
    border-radius: 18px;
  }

  .section-head {
    margin-bottom: 10px;
  }

  .section-head h2,
  .section-head h3 {
    margin-top: 0;
  }

  .btn,
  button:not(.icon-button):not(.modal-close):not(.hc-modal-close) {
    min-height: 38px;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]),
  select,
  textarea {
    min-height: 40px;
  }

  textarea {
    min-height: 76px;
  }

  .data-table th,
  .data-table td,
  .caja-table th,
  .caja-table td,
  .subscription-table th,
  .subscription-table td {
    padding-top: 9px;
    padding-bottom: 9px;
  }
}

/* 1366x768 exacto y equipos de altura muy similar: más espacio útil vertical. */
@media (min-width: 1200px) and (max-width: 1440px) and (max-height: 800px) {
  .topbar.topbar-premium {
    min-height: 60px !important;
    margin-bottom: 10px !important;
  }

  .main-panel {
    padding-bottom: 18px !important;
  }

  .card {
    padding-top: 13px;
    padding-bottom: 13px;
  }
}

/* ----------------------------------------------------------------------
 * Modales: siempre accesibles en 1366x768 y pantallas de poca altura
 * ---------------------------------------------------------------------- */
.modal,
.hc-modal-card,
.calendar-cita-modal,
.calendar-evento-modal,
.rx-modal-dialog,
.ord-modal-dialog,
.orto-modal-dialog,
.pt-modal-card,
.pt-evolution-modal-card,
.pt-accept-modal-card,
.subscription-payment-dialog,
.subscription-renewal-dialog,
.caja-modal,
.consent-modal,
.consent-modal-small,
.vt-modal-card {
  max-width: calc(100vw - 24px);
  box-sizing: border-box;
}

@media (min-width: 721px) and (max-height: 820px) {
  .modal-backdrop,
  .hc-modal-fallback,
  .calendar-cita-backdrop,
  .calendar-evento-backdrop,
  .rx-modal-backdrop,
  .ord-modal-backdrop,
  .orto-modal,
  .pt-modal,
  .subscription-payment-modal,
  .subscription-renewal-modal,
  .vt-modal-backdrop {
    padding: 10px !important;
  }

  .modal,
  .hc-modal-card,
  .calendar-cita-modal,
  .calendar-evento-modal,
  .rx-modal-dialog,
  .ord-modal-dialog,
  .orto-modal-dialog,
  .pt-modal-card,
  .pt-evolution-modal-card,
  .pt-accept-modal-card,
  .subscription-payment-dialog,
  .subscription-renewal-dialog,
  .caja-modal,
  .consent-modal,
  .consent-modal-small,
  .vt-modal-card {
    max-height: calc(100dvh - 20px) !important;
  }

  /* Modales que ya usan layout interno flex/grid: mantener header/acciones y
     desplazar únicamente el contenido cuando corresponda. */
  .calendar-cita-body,
  .calendar-evento-body,
  .rx-modal-dialog .rx-form,
  .rx-modal-dialog .rx-preview-wrap,
  .ord-editor-grid,
  .ord-form,
  .ord-preview-wrap,
  .orto-modal-body,
  .subscription-payment-body {
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  .calendar-cita-modal-head,
  .calendar-evento-modal-head,
  .hc-modal-head,
  .rx-modal-dialog .rx-editor-head,
  .ord-modal-head,
  .orto-modal-head {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  .calendar-cita-body,
  .calendar-evento-body,
  .hc-modal-form,
  .rx-modal-dialog .rx-form,
  .ord-form,
  .orto-modal-body,
  .pt-form {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
}

/* ----------------------------------------------------------------------
 * Alta resolución / Full HD, 2K y 4K
 * ---------------------------------------------------------------------- */
@media (min-width: 1600px) {
  .main-panel {
    padding-top: 18px !important;
    padding-bottom: 36px !important;
  }

  .topbar.topbar-premium {
    max-width: 1800px;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Las páginas principales comparten el mismo ancho visual que el header. */
  .main-panel > .dashboard-page,
  .main-panel > .content-grid,
  .main-panel > .calendar-page-pro,
  .main-panel > .caja-page,
  .main-panel > .rx-page,
  .main-panel > .ord-page,
  .main-panel > .subscription-page,
  .main-panel > .hc-shell,
  .main-panel > main {
    max-width: 1800px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ----------------------------------------------------------------------
 * Tablet / móvil
 * ---------------------------------------------------------------------- */
@media (max-width: 860px) {
  html,
  body {
    width: 100%;
    overflow-x: clip;
  }

  .main-panel {
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
  }

  .topbar.topbar-premium {
    width: 100%;
    min-width: 0;
    margin-bottom: 12px !important;
  }

  .topbar-title-block {
    overflow: hidden;
  }

  .topbar h1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .user-text,
  .btn-logout {
    display: none !important;
  }

  /* iOS: 16px evita auto-zoom al enfocar. No se desactiva zoom manual. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]),
  select,
  textarea,
  [contenteditable="true"] {
    font-size: 16px !important;
    line-height: 1.35 !important;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]),
  select {
    min-height: 44px;
  }

  textarea {
    min-height: 88px;
  }

  .btn,
  button,
  [role="button"] {
    min-height: 44px;
  }

  /* Botones iconográficos conservan proporción, pero mantienen área táctil. */
  .icon-button,
  .modal-close,
  .hc-modal-close,
  .rx-icon-close,
  .orto-modal-close,
  .vt-modal-close {
    min-width: 42px;
    min-height: 42px;
  }

  .card,
  .calendar-page-card,
  .caja-card,
  .subscription-card {
    max-width: 100%;
  }

  .section-head,
  .table-toolbar {
    gap: 10px;
  }

  .section-head .actions,
  .table-toolbar .actions,
  .form-actions {
    width: 100%;
  }

  .section-head .actions > .btn,
  .table-toolbar .actions > .btn {
    flex: 1 1 auto;
  }

  /* Modales en teléfono: ancho completo útil, scroll natural y safe areas. */
  .modal-backdrop,
  .hc-modal-fallback,
  .calendar-cita-backdrop,
  .calendar-evento-backdrop,
  .rx-modal-backdrop,
  .ord-modal-backdrop,
  .pt-modal,
  .subscription-payment-modal,
  .subscription-renewal-modal,
  .vt-modal-backdrop {
    padding-left: 8px !important;
    padding-right: 8px !important;
    padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
  }

  .modal,
  .hc-modal-card,
  .calendar-cita-modal,
  .calendar-evento-modal,
  .rx-modal-dialog,
  .pt-modal-card,
  .pt-evolution-modal-card,
  .pt-accept-modal-card,
  .subscription-payment-dialog,
  .subscription-renewal-dialog,
  .caja-modal,
  .consent-modal,
  .consent-modal-small,
  .vt-modal-card {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 16px) !important;
    border-radius: 18px !important;
  }

  .modal,
  .hc-modal-card,
  .pt-modal-card,
  .pt-evolution-modal-card,
  .pt-accept-modal-card,
  .subscription-renewal-dialog,
  .caja-modal,
  .consent-modal,
  .consent-modal-small,
  .vt-modal-card {
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Ordenes ya tiene experiencia fullscreen propia y no debe ser sobreescrita. */
  .ord-modal-dialog {
    max-width: 100% !important;
  }

  .data-table-wrap,
  .table-responsive,
  .caja-table-wrap,
  .subscription-table-wrap,
  [class*="table-wrap"] {
    border-radius: 14px;
  }

  /* Celdas no deben forzar saltos absurdos; el wrapper permite scroll. */
  .data-table th,
  .data-table td,
  .caja-table th,
  .caja-table td,
  .subscription-table th,
  .subscription-table td {
    white-space: nowrap;
  }

  .data-table td.wrap,
  .data-table td.is-wrap,
  .caja-table td.wrap,
  .subscription-table td.wrap {
    white-space: normal;
  }
}

@media (max-width: 560px) {
  .main-panel {
    padding-left: 9px !important;
    padding-right: 9px !important;
  }

  .topbar.topbar-premium {
    border-radius: 18px !important;
    padding-left: 9px !important;
    padding-right: 9px !important;
  }

  .topbar h1 {
    font-size: 19px !important;
  }

  .card {
    padding: 13px;
    border-radius: 17px;
  }

  .modal-head,
  .hc-modal-head,
  .calendar-cita-modal-head,
  .calendar-evento-modal-head {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .modal,
  .hc-modal-form,
  .calendar-cita-body,
  .calendar-evento-body {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* Pantallas extremadamente estrechas: impedir desborde por botones largos. */
@media (max-width: 390px) {
  .btn,
  button,
  .ord-action,
  .rx-action {
    max-width: 100%;
  }

  .topbar-actions {
    gap: 4px !important;
  }
}

/* Garantía final iOS: supera reglas de componentes con selector de clase. */
@media (max-width: 860px) {
  input[class]:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]),
  select[class],
  textarea[class],
  [contenteditable="true"][class] {
    font-size: 16px !important;
  }
}