/*
 * Responsive CSS para pantallas rectangulares pequeñas
 * Optimizado para resoluciones como 1280x551 y similares
 * Autor: Sistema Geonet Labs
 */

/* Media query para pantallas rectangulares pequeñas (ancho > alto) */
@media screen and (max-width: 1366px) and (max-height: 768px) and (orientation: landscape) {
  /* === NAVEGACIÓN === */
  .navbar,
  nav {
    padding: 0.25rem 0.5rem !important;
    min-height: 3rem !important;
  }

  .navbar-brand {
    font-size: 1rem !important;
    padding: 0.25rem 0 !important;
  }

  /* Botones del menú */
  .nav-link {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.8rem !important;
  }

  /* Dropdown del usuario */
  .dropdown-toggle {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.8rem !important;
  }

  /* === ICONOS === */
  .icon,
  i[class*='ri-'],
  i[class*='fa-'],
  .material-icons,
  svg {
    font-size: 1rem !important;
    width: 1rem !important;
    height: 1rem !important;
  }

  /* Iconos en botones */
  .btn i,
  .btn svg {
    font-size: 0.875rem !important;
    width: 0.875rem !important;
    height: 0.875rem !important;
  }

  /* === TIPOGRAFÍA === */
  h1 {
    font-size: 1.5rem !important;
  }
  h2 {
    font-size: 1.3rem !important;
  }
  h3 {
    font-size: 1.1rem !important;
  }
  h4 {
    font-size: 1rem !important;
  }
  h5 {
    font-size: 0.9rem !important;
  }
  h6 {
    font-size: 0.8rem !important;
  }

  body,
  .body-text,
  p,
  span {
    font-size: 0.8rem !important;
    line-height: 1.3 !important;
  }

  /* === MÁRGENES Y ESPACIADO === */
  .container,
  .container-fluid {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  /* Reducir márgenes generales */
  .m-1 {
    margin: 0.125rem !important;
  }
  .m-2 {
    margin: 0.25rem !important;
  }
  .m-3 {
    margin: 0.375rem !important;
  }
  .m-4 {
    margin: 0.5rem !important;
  }
  .m-5 {
    margin: 0.75rem !important;
  }

  .p-1 {
    padding: 0.125rem !important;
  }
  .p-2 {
    padding: 0.25rem !important;
  }
  .p-3 {
    padding: 0.375rem !important;
  }
  .p-4 {
    padding: 0.5rem !important;
  }
  .p-5 {
    padding: 0.75rem !important;
  }

  /* === BOTONES === */
  .btn {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.8rem !important;
    line-height: 1.2 !important;
  }

  .btn-lg {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.9rem !important;
  }

  .btn-sm {
    padding: 0.125rem 0.375rem !important;
    font-size: 0.7rem !important;
  }

  /* === CARDS === */
  .card {
    margin-bottom: 0.5rem !important;
  }

  .card-header {
    padding: 0.5rem 0.75rem !important;
  }

  .card-body {
    padding: 0.75rem !important;
  }

  .card-title {
    font-size: 1rem !important;
    margin-bottom: 0.25rem !important;
  }

  /* === FORMULARIOS === */
  .form-control {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.8rem !important;
    line-height: 1.3 !important;
  }

  .form-label {
    font-size: 0.8rem !important;
    margin-bottom: 0.25rem !important;
  }

  .input-group-text {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.8rem !important;
  }

  /* === TABLAS === */
  .table {
    font-size: 0.75rem !important;
  }

  .table th,
  .table td {
    padding: 0.25rem 0.5rem !important;
    vertical-align: middle !important;
  }

  .table-responsive {
    font-size: 0.7rem !important;
  }

  /* === MODALES === */
  .modal-dialog {
    margin: 0.5rem !important;
    max-width: calc(100vw - 1rem) !important;
  }

  .modal-header {
    padding: 0.5rem 0.75rem !important;
  }

  .modal-body {
    padding: 0.75rem !important;
  }

  .modal-title {
    font-size: 1rem !important;
  }

  /* === SIDEBAR === */
  .sidebar,
  .offcanvas {
    width: 200px !important;
  }

  .sidebar .nav-link {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.8rem !important;
  }

  /* === BREADCRUMBS === */
  .breadcrumb {
    padding: 0.25rem 0 !important;
    margin-bottom: 0.5rem !important;
    font-size: 0.75rem !important;
  }

  /* === ALERTAS === */
  .alert {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.8rem !important;
    margin-bottom: 0.5rem !important;
  }

  /* === CONTENT WRAPPER === */
  .content-wrapper,
  .main-content {
    padding: 0.5rem !important;
  }

  /* === HEADER ESPECÍFICO === */
  .page-header {
    padding: 0.5rem 0 !important;
    margin-bottom: 0.5rem !important;
  }

  .page-title {
    font-size: 1.2rem !important;
    margin-bottom: 0.25rem !important;
  }

  /* === AJUSTES ESPECÍFICOS PARA GEONET === */

  /* Logo ajustado */
  .logo img {
    max-height: 2rem !important;
  }

  /* Menú de usuario compacto */
  .user-menu .dropdown-menu {
    min-width: 150px !important;
    font-size: 0.8rem !important;
  }

  /* Toolbar de acciones */
  .toolbar {
    padding: 0.25rem 0 !important;
  }

  .toolbar .btn-group .btn {
    padding: 0.125rem 0.375rem !important;
    font-size: 0.75rem !important;
  }

  /* === GRID SYSTEM AJUSTADO === */
  .row {
    margin-left: -0.25rem !important;
    margin-right: -0.25rem !important;
  }

  .col,
  [class*='col-'] {
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
  }

  /* === SCROLL PERSONALIZADO PARA ESPACIOS PEQUEÑOS === */
  ::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
  }

  ::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
  }

  ::-webkit-scrollbar-thumb {
    background: #c1c1c1 !important;
    border-radius: 3px !important;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8 !important;
  }
}

/* Media query más específica para pantallas muy pequeñas como 1280x551 */
@media screen and (max-width: 1280px) and (max-height: 600px) {
  .layout-menu-collapsed:not(.layout-menu-hover):not(.layout-menu-offcanvas):not(.layout-menu-fixed-offcanvas)
    .layout-menu
    .menu-vertical,
  .layout-menu-collapsed:not(.layout-menu-hover):not(.layout-menu-offcanvas):not(.layout-menu-fixed-offcanvas)
    .layout-menu.menu-vertical {
    width: 2.375rem;
  }

  .layout-menu-fixed.layout-menu-collapsed .layout-page {
    padding-left: 30px;
  }

  .menu-icon::before {
    font-size: 14px;
  }

  .layout-menu-collapsed:not(.layout-menu-hover):not(.layout-menu-offcanvas):not(.layout-menu-fixed-offcanvas)
    .layout-menu
    .menu-vertical
    .menu-inner
    > .menu-item,
  .layout-menu-collapsed:not(.layout-menu-hover):not(.layout-menu-offcanvas):not(.layout-menu-fixed-offcanvas)
    .layout-menu.menu-vertical
    .menu-inner
    > .menu-item {
    width: 2.375rem;
    margin-left: -10px !important;
  }
  .menu-vertical .menu-inner .menu-item {
    margin: 0.05rem 0 0;
  }
  /* Compactación extrema para pantallas muy pequeñas */
  .navbar {
    min-height: 2.5rem !important;
    padding: 0.125rem 0.25rem !important;
  }

  .card-body {
    padding: 0.5rem !important;
  }

  .btn {
    padding: 0.125rem 0.375rem !important;
    font-size: 0.75rem !important;
  }

  body,
  .body-text,
  p,
  span {
    font-size: 0.75rem !important;
    line-height: 1.2 !important;
  }

  .table {
    font-size: 0.7rem !important;
  }

  .table th,
  .table td {
    padding: 0.125rem 0.375rem !important;
  }

  /* Ocultar elementos no esenciales en pantallas muy pequeñas */
  .d-hide-small-screen {
    display: none !important;
  }

  /* Iconos aún más pequeños */
  .icon,
  i[class*='ri-'],
  i[class*='fa-'],
  svg {
    font-size: 0.875rem !important;
    width: 15px !important;
    height: 1.875rem !important;
  }
  .layout-navbar {
    height: 3rem;
  }

  .avatar {
    width: 30px;
    height: 30px;
  }

  .layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page {
    padding-top: 35px !important;
  }

  .menu-link {
    align-items: self-start;
  }

  .menu-vertical .menu-item .menu-link {
    font-size: 12px !important;
  }
}

/* Clase helper para ocultar elementos en pantallas pequeñas */
@media screen and (max-width: 1366px) and (max-height: 768px) {
  .hide-on-small-screen {
    display: none !important;
  }

  .compact-on-small-screen {
    padding: 0.25rem !important;
    margin: 0.25rem !important;
  }

  .menu-vertical .menu-item .menu-link {
    min-height: 30px;
  }
}