/**
 * Cardionet — Responsive / Mobile polish
 * --------------------------------------------------------------------------
 * Capa global de adaptacion a movil. Complementa AdminLTE + skins.
 * IMPORTANTE: reglas de layout agresivas SOLO dentro de @media (max-width: 767px)
 * o menores. No alterar escritorio.
 *
 * Breakpoints:
 *  - 991px  tablet
 *  - 767px  movil (AdminLTE offcanvas)
 *  - 480px  movil compacto
 *  - 360px  pantil muy estrecho
 */

/* ============================================================
   BASE (seguro en todos los anchos)
   ============================================================ */
   html,
   body {
     max-width: 100%;
     overflow-x: hidden;
     -webkit-text-size-adjust: 100%;
   }
   
   img,
   video,
   iframe,
   canvas,
   svg {
     max-width: 100%;
     height: auto;
   }
   
   .table-responsive {
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
   }
   
   .box-body,
   .content-wrapper,
   .content {
     overflow-x: hidden;
   }
   
   textarea,
   input,
   select,
   button {
     max-width: 100%;
   }
   
   /* Controles tactiles: evita zoom iOS solo en movil */
   @media (max-width: 767px) {
     input[type="text"],
     input[type="password"],
     input[type="email"],
     input[type="number"],
     input[type="tel"],
     input[type="search"],
     input[type="date"],
     input[type="datetime-local"],
     input[type="time"],
     select,
     textarea {
       font-size: 16px !important;
     }
   }
   
   /* ============================================================
      TABLET (<= 991px)
      ============================================================ */
   @media (max-width: 991px) {
     .content {
       padding: 10px !important;
     }
   
     .box {
       border-radius: 10px !important;
     }
   
     .small-box {
       margin-bottom: 12px !important;
     }
   
     .main-header #iframe_cronometro {
       display: none !important;
     }
   }
   
   /* ============================================================
      MOVIL (<= 767px) — shell AdminLTE
      ============================================================ */
   @media (max-width: 767px) {
     .main-header .logo {
       width: auto !important;
       min-width: 70px;
       position: relative !important;
       float: left !important;
       height: 50px !important;
       line-height: 50px !important;
       padding: 0 10px !important;
     }
   
     .main-header .logo .logo-lg {
       font-size: 18px !important;
     }
   
     .main-header .navbar {
       margin-left: 0 !important;
       min-height: 50px !important;
     }
   
     .main-header .sidebar-toggle {
       padding: 15px 12px !important;
     }
   
     .navbar-custom-menu > .navbar-nav > li > a {
       padding: 12px 8px !important;
     }
   
     .topbar-campana-compact,
     .topbar-user-name {
       display: none !important;
     }
   
     .topbar-status-compact {
       padding: 4px 8px !important;
       font-size: 11px !important;
     }
   
     .topbar-header-inline {
       gap: 6px !important;
     }
   
     .navbar-custom-menu > .navbar-nav > li > .dropdown-menu {
       right: 0 !important;
       left: auto !important;
       width: min(280px, calc(100vw - 24px)) !important;
       max-width: calc(100vw - 24px) !important;
     }
   
     /* Sidebar offcanvas */
     .main-sidebar,
     .left-side {
       padding-top: 50px !important;
       width: min(300px, 88vw) !important;
       transform: translate(-105%, 0) !important;
       -webkit-transform: translate(-105%, 0) !important;
       box-shadow: none !important;
       z-index: 1030 !important;
     }
   
     .sidebar-open .main-sidebar,
     .sidebar-open .left-side {
       transform: translate(0, 0) !important;
       -webkit-transform: translate(0, 0) !important;
       box-shadow: 12px 0 40px rgba(0, 0, 0, .35) !important;
     }
   
     body.sidebar-open::before {
       content: "";
       position: fixed;
       inset: 0;
       background: rgba(15, 23, 42, .48);
       z-index: 1025;
       -webkit-backdrop-filter: blur(1px);
       backdrop-filter: blur(1px);
     }
   
     .content-wrapper,
     .right-side,
     .main-footer {
       margin-left: 0 !important;
     }
   
     .content {
       padding: 8px !important;
     }
   
     .main-footer {
       padding: 10px 12px !important;
       font-size: 12px !important;
       text-align: center;
     }
   
     .main-footer .pull-right {
       float: none !important;
       display: block;
       margin-top: 4px;
     }
   
     .box {
       margin-bottom: 10px !important;
       border-radius: 12px !important;
     }
   
     .box-header > .box-tools {
       position: static !important;
       margin-top: 8px;
       float: none !important;
     }
   
     .box-header .box-title {
       font-size: 15px !important;
       line-height: 1.3 !important;
       white-space: normal !important;
     }
   
     .form-horizontal .control-label {
       text-align: left !important;
       padding-top: 0 !important;
       margin-bottom: 4px !important;
       font-size: 12px !important;
     }
   
     .form-horizontal .form-group {
       margin-left: 0 !important;
       margin-right: 0 !important;
       margin-bottom: 12px !important;
     }
   
     .form-horizontal .form-group [class*="col-"] {
       width: 100% !important;
       float: none !important;
       padding-left: 0 !important;
       padding-right: 0 !important;
     }
   
     .form-control {
       min-height: 42px;
       border-radius: 10px !important;
     }
   
     textarea.form-control {
       min-height: 88px;
     }
   
     .content .btn,
     .box .btn,
     .modal-body .btn,
     .modal-footer .btn {
       min-height: 42px;
       font-size: 14px;
       border-radius: 10px !important;
     }
   
     .content .btn-block,
     .box .btn-block {
       width: 100%;
     }
   
     /* Toolbar Gestion: iconos fijos (solo movil) */
     .cn-gestion-actions-bar > .btn {
       width: 44px !important;
       height: 44px !important;
       min-width: 44px !important;
       min-height: 44px !important;
       max-width: 44px !important;
       padding: 0 !important;
       margin: 0 !important;
     }
   
     .table {
       font-size: 13px;
     }
   
     /* Sidebar menu: etiquetas legibles (2 lineas) */
     .cn-sidebar-menu > li > a {
       margin: 4px 10px !important;
       padding: 10px 12px !important;
       min-height: 48px !important;
       align-items: flex-start !important;
       transform: none !important;
     }
   
     .cn-sidebar-menu > li > a > i {
       margin-top: 1px !important;
     }
   
     .cn-sidebar-menu > li > a:hover,
     .cn-sidebar-menu > li.active > a {
       transform: none !important;
     }
   
     .cn-sidebar-menu > li > a > span:not(.badge) {
       white-space: normal !important;
       overflow: hidden !important;
       display: -webkit-box !important;
       -webkit-box-orient: vertical !important;
       -webkit-line-clamp: 2 !important;
       line-clamp: 2 !important;
       text-overflow: ellipsis !important;
       overflow-wrap: break-word !important;
       word-break: normal !important;
       font-size: 13px !important;
       line-height: 1.25 !important;
     }
   
     .cn-user-name {
       font-size: 13px !important;
     }
   
     .cn-user-avatar-logo {
       width: 50px !important;
       height: 50px !important;
       flex-basis: 50px !important;
     }
   
     .cn-user-avatar-logo img {
       width: 50px !important;
       height: 50px !important;
     }
   
     /* ============================================================
        GESTION — tabs + KPI compactos (NO apilar 5 filas)
        ============================================================ */
     #dashboard-gestion-root .dashboard-nav-tabs {
       display: flex !important;
       flex-wrap: nowrap !important;
       gap: 6px !important;
       overflow-x: auto !important;
       -webkit-overflow-scrolling: touch;
       padding-bottom: 2px;
     }
   
     #dashboard-gestion-root .btn-folder {
       flex: 1 1 0 !important;
       min-width: 0 !important;
       width: auto !important;
       padding: 8px 10px !important;
       font-size: 13px !important;
       white-space: nowrap !important;
     }
   
     #dashboard-gestion-root .btn-folder .hidden-xs {
       display: inline !important;
     }
   
     /* KPI: rejilla 2 columnas compacta (ahorra altura) */
     #dashboard-gestion-root .dashboard-metrics-row,
     .dashboard-metrics-row,
     #dashboard-gestion-kpi-root {
       display: grid !important;
       grid-template-columns: 1fr 1fr !important;
       gap: 6px !important;
       overflow: visible !important;
       flex-wrap: unset !important;
       margin: 6px 0 8px !important;
     }
   
     #dashboard-gestion-root .dashboard-metric-card,
     .dashboard-metric-card,
     #dashboard-gestion-kpi-root .dashboard-metric-card {
       min-width: 0 !important;
       width: auto !important;
       flex: none !important;
       padding: 6px 8px !important;
       border-radius: 8px !important;
     }
   
     .dashboard-metric-card .metric-value,
     #dashboard-gestion-kpi-root .metric-value {
       font-size: 16px !important;
       line-height: 1.1 !important;
     }
   
     .dashboard-metric-card .metric-label,
     #dashboard-gestion-kpi-root .metric-label {
       white-space: normal !important;
       overflow: hidden !important;
       display: -webkit-box !important;
       -webkit-box-orient: vertical !important;
       -webkit-line-clamp: 2 !important;
       line-clamp: 2 !important;
       text-overflow: ellipsis !important;
       line-height: 1.2 !important;
       font-size: 10px !important;
       margin-top: 1px !important;
     }
   
     /* Si hay 5 KPI, el ultimo ocupa ancho completo pero bajo */
     #dashboard-gestion-kpi-root .dashboard-metric-card:last-child:nth-child(odd) {
       grid-column: 1 / -1;
     }
   
     #dashboard-gestion-root .dashboard-gestion-panel.box {
       border-radius: 12px !important;
     }
   
     #dashboard-gestion-root.cn-gestion-chat-tab {
       --cn-gestion-chat-stack: 260px;
     }
   
     #dashboard-gestion-root.cn-gestion-chat-tab #chat-messages.direct-chat-messages {
       min-height: 180px !important;
     }
   
     .cn-gestion-actions-bar > .btn,
     .cn-gestion-actions-bar > .btn.btn-ia,
     .cn-gestion-actions-bar > .btn.btn-secondary {
       width: 44px !important;
       height: 44px !important;
       min-width: 44px !important;
       min-height: 44px !important;
       max-width: 44px !important;
       margin: 0 !important;
       flex: 0 0 44px !important;
     }
   
     /* Webphone movil: barra al ancho del contenedor (NO afecta escritorio) */
     .cn-gestion-actions-row .webphone-title {
       width: 100%;
       max-width: 100%;
       margin: 0 !important;
       border-radius: 10px !important;
       padding: 8px 12px !important;
       font-size: 12px !important;
     }
   }
   
   /* ============================================================
      MOVIL COMPACTO (<= 480px)
      ============================================================ */
   @media (max-width: 480px) {
     .content-header > h1 {
       font-size: 18px !important;
     }
   
     .main-header .logo .logo-lg {
       font-size: 16px !important;
     }
   
     /* Solo botones de bloque / footer — NO toolbars de iconos */
     .modal-footer .btn,
     .content > .btn.btn-block,
     .box-footer > .btn.btn-block,
     form > .btn[type="submit"]:not(.btn-sm):not(.btn-xs) {
       width: 100%;
       margin-bottom: 6px;
     }
   
     .btn-group-vertical .btn {
       width: 100%;
     }
   
     .btn-send,
     .attachment-menu-btn,
     #emoji-button,
     .btn-circle,
     .btn-social-icon,
     .cn-gestion-actions-bar > .btn {
       width: auto !important;
       min-width: 44px;
     }
   
     .cn-gestion-actions-bar > .btn {
       width: 44px !important;
       height: 44px !important;
     }
   
     .messages-menu .dropdown-menu {
       width: min(320px, calc(100vw - 16px)) !important;
     }
   }
   
   /* ============================================================
      MOVIL MUY ESTRECHO (<= 360px)
      ============================================================ */
   @media (max-width: 360px) {
     body {
       font-size: 13px;
     }
   
     .main-header .logo {
       min-width: 56px;
       padding: 0 6px !important;
     }
   
     .main-header .logo .logo-lg {
       font-size: 15px !important;
     }
   
     .small-box h3 {
       font-size: 20px !important;
     }
   
     #dashboard-gestion-root .btn-folder {
       font-size: 12px !important;
       padding: 7px 6px !important;
     }
   }
   
   /* ============================================================
      UTILIDADES MOVIL
      ============================================================ */
   @media (max-width: 767px) {
     .hidden-xs-mobile {
       display: none !important;
     }
   
     .swal-modal {
       width: calc(100% - 28px) !important;
       margin: 0 auto !important;
     }
   
     .select2-container {
       width: 100% !important;
     }
   
     .datepicker {
       max-width: calc(100vw - 24px);
     }
   }