/* Fondo personalizado del menú lateral izquierdo - GARIS */
.skin-blue .main-sidebar,
.skin-blue .left-side {
    background: linear-gradient(180deg, #8B0000 0%, #A52A2A 50%, #B22222 100%) !important; /* colores corporativos GARIS */
}

/* Texto de los enlaces del menú */
.skin-blue .sidebar a {
    color: #ffffff !important;
}

/* Fondo y texto cuando un elemento está activo o en hover - GARIS */
.skin-blue .sidebar-menu > li:hover > a,
.skin-blue .sidebar-menu > li.active > a,
.skin-blue .sidebar-menu > li > a:hover {
    background: linear-gradient(90deg, #A52A2A 0%, #B22222 100%) !important; /* color hover GARIS */
    color: #ffffff !important;
    box-shadow: inset 3px 0 0 #FFD700; /* línea amarilla de acento */
}

/* Estilo de encabezados como 'Operaciones' */
.skin-blue .sidebar-menu .header {
    color: #e0a800 !important;
    background-color: transparent;
    font-weight: bold;
}

/* Íconos blancos */
.skin-blue .sidebar-menu i {
    color: #ffffff !important;
}

/* Fondo general del contenido */
.content-wrapper {
    background-color: #f4f6f9;
}

/* ============================
   Diseño de tarjetas modernas
   ============================ */
.card-dashboard,
.box {
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border: none;
    padding: 20px;
    background: white;
    margin-bottom: 20px;
}

.card-header,
.box-header.with-border h3 {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 15px;
}

/* Gráficos */
.box-body .chart canvas,
.chart canvas {
    width: 100% !important;
    height: auto !important;
    max-height: 300px;
    display: block;
    max-width: 100% !important;
}

/* Evita que se desborde el row */
.row {
    margin-right: 0;
    margin-left: 0;
}

/* Asegura que el contenido no se desborde horizontalmente */
.content {
    overflow-x: hidden;
}

/* Transición y desplazamiento del contenido al contraer menú */
.content-wrapper,
.right-side,
.main-footer {
    margin-left: 230px;
    transition: margin-left 0.3s ease-in-out;
}

.sidebar-collapse .content-wrapper,
.sidebar-collapse .right-side,
.sidebar-collapse .main-footer {
    margin-left: 50px !important;
}

/* Tarjetas pequeñas de resumen */
.summary-card {
    border-radius: 10px;
    padding: 15px;
    color: white;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    margin-bottom: 20px;
}

.summary-card.blue {
    background: linear-gradient(45deg, #4eaaff, #007bff);
}

.summary-card.green {
    background: linear-gradient(45deg, #00b894, #00c853);
}

.summary-card.orange {
    background: linear-gradient(45deg, #ffb300, #ff6f00);
}

.summary-card.red {
    background: linear-gradient(45deg, #f44336, #d32f2f);
}

.summary-card i {
    font-size: 28px;
    opacity: 0.7;
}

/* ================== ESTILOS PARA IMPRESIÓN DE DESPACHOS ================== */
@media print {
  @page {
    margin: 5mm;
  }

  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  body * {
    visibility: hidden;
  }

  #areaImpresionDespachos, 
  #areaImpresionDespachos * {
    visibility: visible;
  }

    #areaImpresionDespachos {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      font-family: Arial, sans-serif;
      font-size: 9pt; /* antes: 11px */
    }


  .pagina {
    page-break-after: always;
    margin: 0;
    padding: 0;
  }

  .encabezado {
    display: flex;
    border: 1px solid #000;
    margin-bottom: 8px;
    width: 100%;
  }

  .encabezado .logo {
    width: 30%;
    border-right: 1px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
  }

  .encabezado .logo img {
    height: 50px;
  }


  .encabezado .logo img {
    height: 50px;
    max-height: 50px;
    max-width: 100%;
    display: block;
    visibility: visible !important; /* 👈 Asegura visibilidad en impresión */
  }

  .encabezado .titulo-central {
    width: 40%;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    border-right: 1px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .encabezado .info {
    width: 30%;
    font-size: 10px;
    padding: 6px;
    line-height: 1.3;
  }

  .tabla-despachos {
    width: 100%;
    border-collapse: collapse !important;  /* 👈 Elimina espacios entre celdas */
    border-spacing: 0 !important;          /* 👈 Asegura que no haya separación */
    table-layout: auto;                   /* 👈 Uniformidad en el tamaño */
    
  }

.tabla-despachos th,
.tabla-despachos td {
  border: 1px solid #000;
  padding: 3px 4px;
  font-size: 7pt;
  white-space: normal;       /* <-- Permite salto de línea */
  overflow: visible;         /* <-- Quita el corte */
  text-overflow: initial;    /* <-- Quita los puntos suspensivos */
}

  .tabla-despachos th {
    background-color: #003c61 !important;
    color: white !important;
    font-weight: bold;
  }
  .tabla-despachos {
  border: 1px solid #000; /* 👉 define un borde uniforme para toda la tabla */
}

  .tabla-despachos .grupo-titulo {
    background-color: #003c61 !important;
    color: white !important;
  }

  .tabla-despachos .subgrupo {
    background-color: #1d6d96 !important;
    color: white !important;
  }
}
/* ACORDEÓN para Bootstrap 3 */
  .panel-minimal {
    border: 1px solid #d0d7de;
    border-radius: 4px;
    margin-bottom: 10px;
    overflow: hidden;
  }

  .panel-minimal .panel-heading {
    background-color: #f7f9fa;
    padding: 10px 15px;
    cursor: pointer;
    position: relative;
    font-weight: 600;
    color: #333;
  }

  .panel-minimal .panel-heading:hover {
    background-color: #e4ebf1;
  }

  .panel-minimal .panel-heading a {
    display: block;
    text-decoration: none;
    color: inherit;
  }

  .panel-minimal .panel-heading a:after {
    content: "▼";
    position: absolute;
    right: 15px;
    top: 10px;
    transition: transform 0.2s ease-in-out;
  }

  .panel-minimal .panel-heading a.collapsed:after {
    transform: rotate(-90deg);
  }

  .panel-minimal .panel-body {
    background: #fff;
    padding: 15px;
  }

   .modal-dialog {
    width: 95% !important;
    max-width: none;
  }

  .modal-body {
  max-height: none;
  overflow-y: visible;
  }


  .table-responsive {
    overflow-x: auto;
    margin-bottom: 20px;
  }

  .table th, .table td {
    white-space: nowrap;
    vertical-align: middle;
    text-align: center;
  }

  .table th.text-left, .table td.text-left {
    text-align: left;
  }

  .table thead th {
    font-size: 13px;
  }

  textarea {
    resize: none;
  }

  /* ACORDEÓN para Bootstrap 3 */
  .panel-minimal {
    border: 1px solid #d0d7de;
    border-radius: 4px;
    margin-bottom: 10px;
    overflow: hidden;
  }

  .panel-minimal .panel-heading {
    background-color: #f7f9fa;
    padding: 10px 15px;
    cursor: pointer;
    position: relative;
    font-weight: 600;
    color: #333;
  }

  .panel-minimal .panel-heading:hover {
    background-color: #e4ebf1;
  }

  .panel-minimal .panel-heading a {
    display: block;
    text-decoration: none;
    color: inherit;
  }

  .panel-minimal .panel-heading a:after {
    content: "▼";
    position: absolute;
    right: 15px;
    top: 10px;
    transition: transform 0.2s ease-in-out;
  }

  .panel-minimal .panel-heading a.collapsed:after {
    transform: rotate(-90deg);
  }

  .panel-minimal .panel-body {
    background: #fff;
    padding: 15px;
  }

  /* === SIOP: Fix AdminLTE mobile header/sidebar === */
@media (max-width: 767px){
  /* La navbar NO debe ir corrida 230px en móvil */
  .main-header .navbar { margin-left: 0 !important; }

  /* El logo no ocupa 230px; dejamos que fluya */
  .main-header .logo { width: 100% !important; float: none !important; }

  /* El contenido tampoco debe ir con margen en móvil */
  .content-wrapper, .main-footer { margin-left: 0 !important; }

  /* Asegura overlay del sidebar por encima del contenido */
  .main-sidebar { z-index: 1051 !important; }
}

/* ==========================================================
   GARIS MVP | CAPA GLOBAL DE CONSISTENCIA VISUAL
   Unifica formularios + tablas + DataTables en todos los módulos
   ========================================================== */
#mainContentGaris{
  --garis-ui-bg: #f4f6fb;
  --garis-ui-card: #ffffff;
  --garis-ui-text: #1f2a37;
  --garis-ui-muted: #6b7280;
  /* Jerarquía formulario: label (primario) vs placeholder (secundario) */
  --garis-ui-label: #374151;
  --garis-ui-placeholder: #9ca3af;
  --garis-ui-border: #e6eaf2;
  --garis-ui-primary: #b21f24;
  --garis-ui-primary-2: #d9480f;
  --garis-ui-shadow: 0 10px 24px rgba(16, 24, 40, .06);
  --garis-ui-shadow-soft: 0 6px 16px rgba(16, 24, 40, .05);
}

/* ---------- Form wrappers ---------- */
#mainContentGaris [class^="filters-"],
#mainContentGaris [class*=" filters-"]{
  gap: 12px;
}

/* ---------- Inputs / selects / textareas (global) ---------- */
#mainContentGaris .form-control,
#mainContentGaris [class^="field-"] input,
#mainContentGaris [class^="field-"] select,
#mainContentGaris [class^="field-"] textarea,
#mainContentGaris [class*=" field-"] input,
#mainContentGaris [class*=" field-"] select,
#mainContentGaris [class*=" field-"] textarea,
#mainContentGaris .modal-content input:not([type="checkbox"]):not([type="radio"]),
#mainContentGaris .modal-content select,
#mainContentGaris .modal-content textarea{
  border: 1px solid var(--garis-ui-border);
  background: rgba(255,255,255,.96);
  color: var(--garis-ui-text);
  border-radius: 12px;
  min-height: 40px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(16,24,40,.02);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

/* Placeholders: tono secundario claro; NO competir con labels */
#mainContentGaris .form-control::placeholder,
#mainContentGaris .form-control::-webkit-input-placeholder,
#mainContentGaris .form-control::-moz-placeholder,
#mainContentGaris .form-control:-ms-input-placeholder,
#mainContentGaris .form-control::-ms-input-placeholder,
#mainContentGaris [class^="field-"] input::placeholder,
#mainContentGaris [class^="field-"] textarea::placeholder,
#mainContentGaris [class*=" field-"] input::placeholder,
#mainContentGaris [class*=" field-"] textarea::placeholder,
#mainContentGaris .modal-content input::placeholder,
#mainContentGaris .modal-content textarea::placeholder,
#mainContentGaris .input::placeholder,
#mainContentGaris .input::-webkit-input-placeholder,
#mainContentGaris .input::-moz-placeholder,
#mainContentGaris .input:-ms-input-placeholder,
#mainContentGaris textarea.input::placeholder{
  color: var(--garis-ui-placeholder);
  opacity: 1;
  font-weight: 400;
}

#mainContentGaris .form-control:focus,
#mainContentGaris [class^="field-"] input:focus,
#mainContentGaris [class^="field-"] select:focus,
#mainContentGaris [class^="field-"] textarea:focus,
#mainContentGaris [class*=" field-"] input:focus,
#mainContentGaris [class*=" field-"] select:focus,
#mainContentGaris [class*=" field-"] textarea:focus,
#mainContentGaris .modal-content input:focus,
#mainContentGaris .modal-content select:focus,
#mainContentGaris .modal-content textarea:focus{
  border-color: rgba(178,31,36,.28);
  box-shadow: 0 0 0 4px rgba(178,31,36,.10);
  outline: none;
}

/* Select2 con misma estética */
#mainContentGaris .select2-container--default .select2-selection--single,
#mainContentGaris .select2-container--default .select2-selection--multiple{
  border: 1px solid var(--garis-ui-border) !important;
  border-radius: 12px !important;
  min-height: 40px !important;
  background: rgba(255,255,255,.96) !important;
}
#mainContentGaris .select2-container--default.select2-container--focus .select2-selection--multiple,
#mainContentGaris .select2-container--default.select2-container--open .select2-selection--single{
  border-color: rgba(178,31,36,.28) !important;
  box-shadow: 0 0 0 4px rgba(178,31,36,.10) !important;
}

/* ---------- Wrappers de tabla ---------- */
#mainContentGaris .table-wrap,
#mainContentGaris [class^="tableWrap-"],
#mainContentGaris [class*=" tableWrap-"],
#mainContentGaris .table-responsive{
  border: 1px solid var(--garis-ui-border);
  border-radius: 14px;
  background: var(--garis-ui-card);
  box-shadow: var(--garis-ui-shadow-soft);
  overflow: hidden;
}

/* ---------- Tablas ---------- */
#mainContentGaris .table,
#mainContentGaris table[class^="table-"],
#mainContentGaris table[class*=" table-"],
#mainContentGaris table.dataTable{
  width: 100% !important;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 0 !important;
}

#mainContentGaris .table > thead > tr > th,
#mainContentGaris table[class^="table-"] thead th,
#mainContentGaris table[class*=" table-"] thead th,
#mainContentGaris table.dataTable thead th{
  background: #f8fafc !important;
  color: #2d3748 !important;
  border-bottom: 1px solid var(--garis-ui-border) !important;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .2px;
  padding: 11px 12px !important;
  text-transform: none;
}

#mainContentGaris .table > tbody > tr > td,
#mainContentGaris table[class^="table-"] tbody td,
#mainContentGaris table[class*=" table-"] tbody td,
#mainContentGaris table.dataTable tbody td{
  border-top: 1px solid #edf1f7 !important;
  color: var(--garis-ui-text);
  font-size: 13px;
  font-weight: 700;
  padding: 10px 12px !important;
  vertical-align: middle;
}

#mainContentGaris .table > tbody > tr:hover > td,
#mainContentGaris table[class^="table-"] tbody tr:hover td,
#mainContentGaris table[class*=" table-"] tbody tr:hover td,
#mainContentGaris table.dataTable tbody tr:hover td{
  background: #fbfdff;
}

/* ---------- DataTables controls ---------- */
#mainContentGaris .dataTables_wrapper{
  padding: 8px 10px 12px;
}

#mainContentGaris .dataTables_wrapper .dataTables_length label,
#mainContentGaris .dataTables_wrapper .dataTables_filter label,
#mainContentGaris .dataTables_wrapper .dataTables_info{
  color: var(--garis-ui-label);
  font-size: 12px;
  font-weight: 600;
}

#mainContentGaris .dataTables_wrapper .dataTables_length select,
#mainContentGaris .dataTables_wrapper .dataTables_filter input{
  border: 1px solid var(--garis-ui-border);
  border-radius: 10px;
  min-height: 34px;
  padding: 6px 10px;
  background: #fff;
  color: var(--garis-ui-text);
  font-size: 12px;
  font-weight: 700;
}

#mainContentGaris .dataTables_wrapper .dataTables_paginate .paginate_button{
  border: 1px solid var(--garis-ui-border) !important;
  background: #fff !important;
  color: var(--garis-ui-text) !important;
  border-radius: 10px !important;
  min-width: 34px;
  height: 34px;
  line-height: 20px;
  margin: 0 2px;
  font-weight: 800;
}

#mainContentGaris .dataTables_wrapper .dataTables_paginate .paginate_button:hover{
  border-color: rgba(178,31,36,.28) !important;
  background: rgba(178,31,36,.06) !important;
  color: var(--garis-ui-primary) !important;
}

#mainContentGaris .dataTables_wrapper .dataTables_paginate .paginate_button.current,
#mainContentGaris .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--garis-ui-primary), var(--garis-ui-primary-2)) !important;
  color: #fff !important;
  box-shadow: var(--garis-ui-shadow);
}

/* ==========================================================
   GARIS MVP | Jerarquía visual labels vs placeholders (global)
   Labels: contraste medio-alto (#374151), peso 600.
   Placeholders: gris claro (#9CA3AF), peso 400 (reglas ::placeholder arriba).
   Especificidad alta para convivir con <style> inline en módulos (proveedores, operadores, etc.).
   ========================================================== */

/* Etiquetas de campo en formularios MVP (evita checklist inspección .bloque label, etc.) */
#mainContentGaris .form-group > label,
#mainContentGaris .form-group label.control-label,
#mainContentGaris .control-label,
#mainContentGaris [class^="field-"] label,
#mainContentGaris [class*=" field-"] label,
#mainContentGaris .filters label,
#mainContentGaris .modal-body label:not(.sr-only),
#mainContentGaris .modal-content label:not(.sr-only),
#mainContentGaris .box-body .form-group label{
  color: var(--garis-ui-label) !important;
  font-weight: 600 !important;
}

/* Bitácora combustible/mantenimiento: modal custom (.modal-garis / .modal-bd), no Bootstrap */
#mainContentGaris .modal-garis label,
#mainContentGaris .modal-bd label,
#mainContentGaris .modal-card label,
#mainContentGaris .form-grid label,
#mainContentGaris .modal-body label:not(.sr-only){
  color: var(--garis-ui-label) !important;
  font-weight: 600 !important;
}

/* KPI: <p class="label"> dentro de tarjetas (no <label>) */
#mainContentGaris .kpiText-operadores .label,
#mainContentGaris .kpiText-proveedores .label,
#mainContentGaris .kpiText-usuarios .label,
#mainContentGaris .kpiText-unidades .label,
#mainContentGaris [class*="kpiText-"] .label{
  color: var(--garis-ui-muted) !important;
  font-weight: 800 !important;
}

/* Select2: texto “vacío” debe verse como placeholder */
#mainContentGaris .select2-container--default .select2-selection--single .select2-selection__placeholder,
#mainContentGaris .select2-container--default .select2-selection--multiple .select2-selection__placeholder{
  color: var(--garis-ui-placeholder) !important;
  font-weight: 400 !important;
}

/* Filtros DataTables: placeholder del buscador */
#mainContentGaris .dataTables_wrapper .dataTables_filter input::placeholder,
#mainContentGaris .dataTables_wrapper .dataTables_filter input::-webkit-input-placeholder{
  color: var(--garis-ui-placeholder);
  font-weight: 400;
}

/* ==========================================================
   GARIS MVP | CAPA DE COMPACTACIÓN RESPONSIVE
   Reduce aire vertical/horizontal en headers, topbars, cards,
   filtros y contenedores.  Scoped a #mainContentGaris.
   NO modifica lógica PHP, JS, ids, names ni funcionalidad.
   ========================================================== */

/* ---- TOPBAR GLOBAL (cabezote.php) ---- */
#mainContentGaris .topbar-garis{ min-height: 0; }
#mainContentGaris .topbar-inner-garis{ padding: 8px 12px; gap: 8px; }
#mainContentGaris .page-title-garis b{ font-size: 13px; }
#mainContentGaris .page-title-garis small{ font-size: 10px; margin-top: 2px; }
#mainContentGaris .crumb-garis{ padding: 4px 8px; font-size: 10px; }
#mainContentGaris .btn-garis{ padding: 6px 10px; font-size: 12px; border-radius: 10px; gap: 5px; }
#mainContentGaris .user-menu-garis img{ width: 28px; height: 28px; }
#mainContentGaris .user-menu-garis span{ font-size: 12px; }

/* ---- CONTAINERS (all module families) ---- */
#mainContentGaris [class^="container-"][class$="-garis"],
#mainContentGaris [class*=" container-"][class$="-garis"],
#mainContentGaris .container-cm,
#mainContentGaris .content-wrapper-garis{
  padding: 8px 12px 14px;
}

/* ---- TOPBAR PER-MODULE ---- */
#mainContentGaris [class^="topbar-"]:not(.topbar-garis):not(.topbar-inner-garis){
  gap: 10px;
  margin-bottom: 10px;
}

/* ---- BRAND DOT / MODULE ICON ---- */
#mainContentGaris [class^="brandDot-"],
#mainContentGaris [class*=" brandDot-"]{
  width: 36px; height: 36px;
  border-radius: 12px;
  font-size: 15px;
}

/* ---- TITLE BLOCKS ---- */
#mainContentGaris [class^="titleBlock-"] h1,
#mainContentGaris [class*=" titleBlock-"] h1{
  font-size: 16px;
}
#mainContentGaris [class^="titleBlock-"] p,
#mainContentGaris [class*=" titleBlock-"] p{
  font-size: 12px; margin-top: 2px;
}

/* ---- SECTION TITLES ---- */
#mainContentGaris [class^="sectionTitle-"] h2,
#mainContentGaris [class*=" sectionTitle-"] h2{
  font-size: 13px;
}
#mainContentGaris [class^="sectionTitle-"] .sub,
#mainContentGaris [class*=" sectionTitle-"] .sub{
  font-size: 11px; margin-top: 2px;
}
#mainContentGaris [class^="sectionTitle-"],
#mainContentGaris [class*=" sectionTitle-"]{
  padding: 2px 4px 8px;
}

/* ---- PILLS ---- */
#mainContentGaris [class^="pill-"],
#mainContentGaris [class*=" pill-"]{
  padding: 5px 8px; font-size: 11px; gap: 5px;
}

/* ---- BUTTONS (module) ---- */
#mainContentGaris [class^="btn-"][class$="-usuarios"],
#mainContentGaris [class^="btn-"][class$="-proveedores"],
#mainContentGaris [class^="btn-"][class$="-operadores"],
#mainContentGaris [class^="btn-"][class$="-unidades"],
#mainContentGaris [class^="btn-"][class$="-inspecciones"],
#mainContentGaris .btn-cm,
#mainContentGaris .btn-modern{
  padding: 7px 10px; font-size: 12px; gap: 6px; border-radius: 10px;
}

/* ---- ACTION BARS ---- */
#mainContentGaris [class^="actions-"],
#mainContentGaris [class*=" actions-"]{
  gap: 8px;
}

/* ---- CARDS ---- */
#mainContentGaris [class^="card-"][class$="-garis"],
#mainContentGaris [class^="card-"][class$="-usuarios"],
#mainContentGaris [class^="card-"][class$="-proveedores"],
#mainContentGaris [class^="card-"][class$="-operadores"],
#mainContentGaris [class^="card-"][class$="-unidades"],
#mainContentGaris [class^="card-"][class$="-inspecciones"]{
  padding: 10px;
  border-radius: 14px;
}
#mainContentGaris .content-wrapper-garis .card{
  padding: 10px;
  border-radius: 14px;
}

/* ---- KPI ROWS ---- */
#mainContentGaris [class^="kpis-"],
#mainContentGaris [class*=" kpis-"]{
  gap: 8px;
  margin: 8px 0 10px;
}
#mainContentGaris [class^="kpi-"]:not([class*="Text"]):not([class*="Icon"]),
#mainContentGaris [class*=" kpi-"]:not([class*="Text"]):not([class*="Icon"]){
  padding: 10px;
  gap: 10px;
  min-height: 56px;
  border-radius: 12px;
}
#mainContentGaris [class^="kpiIcon-"],
#mainContentGaris [class*=" kpiIcon-"]{
  width: 36px; height: 36px;
  border-radius: 10px; font-size: 15px;
}
#mainContentGaris [class^="kpiText-"] .value,
#mainContentGaris [class*=" kpiText-"] .value{
  font-size: 16px;
}
#mainContentGaris [class^="kpiText-"] .label,
#mainContentGaris [class*=" kpiText-"] .label{
  font-size: 11px;
}

/* ---- FILTERS ---- */
#mainContentGaris [class^="filters-"],
#mainContentGaris [class*=" filters-"]{
  gap: 10px;
  padding: 8px 4px 10px;
}
#mainContentGaris [class^="field-"] label{
  margin-bottom: 4px; font-size: 11px;
}
#mainContentGaris [class^="field-"] input,
#mainContentGaris [class^="field-"] select{
  padding: 8px 10px;
}

/* ---- FILTER BUTTON GROUPS ---- */
#mainContentGaris [class^="filterBtns-"],
#mainContentGaris [class*=" filterBtns-"]{
  gap: 6px;
}

/* ---- TABLE WRAPS ---- */
#mainContentGaris [class^="tableWrap-"],
#mainContentGaris [class*=" tableWrap-"],
#mainContentGaris .table-wrap{
  border-radius: 12px;
}

/* ---- BADGES ---- */
#mainContentGaris [class^="badge-"],
#mainContentGaris [class*=" badge-"]{
  padding: 4px 8px; font-size: 11px; gap: 5px;
}

/* ---- ICON BUTTONS (edit/delete/view) ---- */
#mainContentGaris [class^="iconBtn-"],
#mainContentGaris [class*=" iconBtn-"]{
  width: 30px; height: 30px; border-radius: 8px;
}

/* ---- MODALS ---- */

/* -- Body scroll lock: custom overlays (Family A/B) -- */
html:has(#mainContentGaris [class^="modalOverlay-"].open),
body:has(#mainContentGaris [class^="modalOverlay-"].open),
html:has(#mainContentGaris [class*=" modalOverlay-"].open),
body:has(#mainContentGaris [class*=" modalOverlay-"].open){
  overflow: hidden !important;
}
/* -- Body scroll lock: bitacora overlays (Family C) -- */
html:has(#mainContentGaris .modal-garis.open),
body:has(#mainContentGaris .modal-garis.open){
  overflow: hidden !important;
}

/* -- Overlay container (Family A/B + C) -- */
#mainContentGaris [class^="modalOverlay-"],
#mainContentGaris [class*=" modalOverlay-"],
#mainContentGaris .modal-garis{
  padding: 12px;
  overflow: hidden !important;
  overscroll-behavior: contain;
}

/* -- Inner modal shell: flex column + max-height (Family A/B) -- */
#mainContentGaris [class^="modal-"][class$="-usuarios"],
#mainContentGaris [class^="modal-"][class$="-proveedores"],
#mainContentGaris [class^="modal-"][class$="-operadores"],
#mainContentGaris [class^="modal-"][class$="-unidades"],
#mainContentGaris [class^="modal-"][class$="-inspecciones"],
#mainContentGaris [class^="modal-"][class$="-documentos"],
#mainContentGaris [class^="modal-"][class$="-servicios"],
#mainContentGaris [class*=" modal-"][class$="-usuarios"],
#mainContentGaris [class*=" modal-"][class$="-proveedores"],
#mainContentGaris [class*=" modal-"][class$="-operadores"],
#mainContentGaris [class*=" modal-"][class$="-unidades"],
#mainContentGaris [class*=" modal-"][class$="-inspecciones"],
#mainContentGaris [class*=" modal-"][class$="-documentos"],
#mainContentGaris [class*=" modal-"][class$="-servicios"]{
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 24px);
  min-height: 0;
  overflow: hidden !important;
}
/* <form> wraps body+footer; must inherit flex behavior */
#mainContentGaris [class^="modal-"][class$="-usuarios"] > form,
#mainContentGaris [class^="modal-"][class$="-proveedores"] > form,
#mainContentGaris [class^="modal-"][class$="-operadores"] > form,
#mainContentGaris [class^="modal-"][class$="-unidades"] > form,
#mainContentGaris [class^="modal-"][class$="-inspecciones"] > form,
#mainContentGaris [class^="modal-"][class$="-documentos"] > form,
#mainContentGaris [class^="modal-"][class$="-servicios"] > form,
#mainContentGaris [class*=" modal-"][class$="-usuarios"] > form,
#mainContentGaris [class*=" modal-"][class$="-proveedores"] > form,
#mainContentGaris [class*=" modal-"][class$="-operadores"] > form,
#mainContentGaris [class*=" modal-"][class$="-unidades"] > form,
#mainContentGaris [class*=" modal-"][class$="-inspecciones"] > form,
#mainContentGaris [class*=" modal-"][class$="-documentos"] > form,
#mainContentGaris [class*=" modal-"][class$="-servicios"] > form{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* -- Inner modal shell: bitacora .modal-card (Family C) -- */
#mainContentGaris .modal-card{
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 24px);
  min-height: 0;
  overflow: hidden !important;
}
/* <form> inside .modal-bd for bitacora modals */
#mainContentGaris .modal-bd > form{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* -- Modal head (Family A/B) -- */
#mainContentGaris [class^="modalHead-"],
#mainContentGaris [class*=" modalHead-"]{
  padding: 10px 14px;
  flex: 0 0 auto;
}
#mainContentGaris [class^="modalHead-"] h3,
#mainContentGaris [class*=" modalHead-"] h3{
  font-size: 14px;
}

/* -- Modal head: bitacora .modal-hd (Family C) -- */
#mainContentGaris .modal-hd{
  flex: 0 0 auto;
}

/* -- Modal body (Family A/B) -- */
#mainContentGaris [class^="modalBody-"],
#mainContentGaris [class*=" modalBody-"]{
  padding: 10px 14px 14px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto !important;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* -- Modal body: bitacora .modal-bd (Family C) -- */
#mainContentGaris .modal-bd{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto !important;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* -- Modal foot (Family A/B) -- */
#mainContentGaris [class^="modalFoot-"],
#mainContentGaris [class*=" modalFoot-"]{
  padding: 10px 14px;
  flex: 0 0 auto;
  z-index: 5;
  background: #fff;
}

/* -- Sticky button row inside .modal-bd (Family C: no separate footer) -- */
#mainContentGaris .modal-bd > form > div:last-child,
#mainContentGaris .modal-bd > div:last-child{
  position: sticky;
  bottom: -1px;
  z-index: 5;
  background: #fff;
  border-top: 1px solid rgba(0,0,0,.06);
  padding-top: 10px;
  padding-bottom: 4px;
  margin-top: auto;
}

#mainContentGaris [class^="closeX-"],
#mainContentGaris [class*=" closeX-"]{
  width: 32px; height: 32px; border-radius: 10px;
}
#mainContentGaris [class^="formGrid-"],
#mainContentGaris [class*=" formGrid-"]{
  gap: 8px;
}

/* ---- FORM SECTIONS (proveedores, etc.) ---- */
#mainContentGaris [class^="formSection-"],
#mainContentGaris [class*=" formSection-"]{
  padding: 10px; border-radius: 10px;
}

/* ---- QUICK TILES (bitacoras) ---- */
#mainContentGaris .quick{ gap: 8px; margin-bottom: 10px; }
#mainContentGaris .tile{ padding: 10px; gap: 10px; border-radius: 12px; }
#mainContentGaris .tile .ico{ width: 38px; height: 38px; border-radius: 12px; }

/* ---- CARD HEADERS (bitacoras) ---- */
#mainContentGaris .card-hd{ padding: 12px 12px 0; }
#mainContentGaris .card-bd{ padding: 10px; }
#mainContentGaris .card-hd .tt{ font-size: 14px; }

/* ---- SIDEBAR RULES (bitacoras) ---- */
#mainContentGaris .rule{ padding: 10px; gap: 8px; }

/* ---- FOOTER NOTES ---- */
#mainContentGaris [class^="foot-"],
#mainContentGaris [class*=" foot-"]{
  margin-top: 8px; font-size: 11px;
}

/* ---- MOBILE CARDS ---- */
#mainContentGaris [class*="Card-"][class$="-usuarios"],
#mainContentGaris [class*="Card-"][class$="-unidades"],
#mainContentGaris [class*="Card-"][class$="-operadores"],
#mainContentGaris [class*="Card-"][class$="-proveedores"],
#mainContentGaris [class*="Card-"][class$="-inspecciones"]{
  padding: 10px; border-radius: 12px; gap: 8px; margin-bottom: 8px;
}

/* ---- BOOTSTRAP MODALS (formularios legacy / anexados a body) ---- */
body.modal-open{
  overflow: hidden !important;
}
body .modal.in,
body .modal.show{
  overflow: hidden !important;
}
body .modal.in .modal-dialog,
body .modal.show .modal-dialog{
  max-height: calc(100dvh - 24px);
  margin-top: 12px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
}
body .modal.in .modal-content,
body .modal.show .modal-content{
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 24px);
  min-height: 0;
  overflow: hidden !important;
}
body .modal.in .modal-content > form,
body .modal.show .modal-content > form{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
body .modal.in .modal-header,
body .modal.show .modal-header,
body .modal.in .modal-footer,
body .modal.show .modal-footer{
  flex: 0 0 auto;
}
body .modal.in .modal-body,
body .modal.show .modal-body{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto !important;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
body .modal.in .modal-footer,
body .modal.show .modal-footer{
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

/* ===========================================================
   GARIS | ENCABEZADOS UNIFICADOS (jerarquía UX)
   Cabezote = neutro | Hero módulo = card con acento | Modal = brand
   =========================================================== */
#mainContentGaris{
  --garis-modal-header-bg: linear-gradient(135deg, #b21f24 0%, #d9480f 100%);
  --garis-modal-header-text: #ffffff;
  --garis-modal-header-sub: rgba(255,255,255,.88);
  --garis-hero-bg: #ffffff;
  --garis-hero-border: #e6eaf2;
  --garis-hero-title: #1f2a37;
  --garis-hero-sub: #6b7280;
  --garis-accent: linear-gradient(180deg, #b21f24, #d9480f);
}

/* Hero del módulo: card clara + barra acento GARIS (un solo punto fuerte por página) */
#mainContentGaris [class^="topbar-"]:not(.topbar-garis):not(.topbar-inner-garis),
#mainContentGaris [class*=" topbar-"]:not(.topbar-garis):not(.topbar-inner-garis){
  position: relative !important;
  padding: 14px 16px 14px 20px !important;
  border-radius: 18px !important;
  background: var(--garis-hero-bg) !important;
  border: 1px solid var(--garis-hero-border) !important;
  box-shadow: 0 10px 24px rgba(16,24,40,.06) !important;
  overflow: hidden !important;
}
#mainContentGaris [class^="topbar-"]:not(.topbar-garis):not(.topbar-inner-garis)::before,
#mainContentGaris [class*=" topbar-"]:not(.topbar-garis):not(.topbar-inner-garis)::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--garis-accent);
}

#mainContentGaris [class^="titleBlock-"] h1,
#mainContentGaris [class*=" titleBlock-"] h1,
#mainContentGaris [class^="titleBlock-"] h2,
#mainContentGaris [class*=" titleBlock-"] h2{
  color: var(--garis-hero-title) !important;
}

#mainContentGaris [class^="titleBlock-"] p,
#mainContentGaris [class*=" titleBlock-"] p,
#mainContentGaris [class^="titleBlock-"] .sub,
#mainContentGaris [class*=" titleBlock-"] .sub{
  color: var(--garis-hero-sub) !important;
}

#mainContentGaris [class^="brandDot-"],
#mainContentGaris [class*=" brandDot-"]{
  background: linear-gradient(135deg, #b21f24, #d9480f) !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px rgba(178,31,36,.18) !important;
}

#mainContentGaris [class^="topbar-"]:not(.topbar-garis):not(.topbar-inner-garis) [class^="pill-"],
#mainContentGaris [class^="topbar-"]:not(.topbar-garis):not(.topbar-inner-garis) [class*=" pill-"]{
  border-color: #e6eaf2 !important;
  background: #f8fafc !important;
  color: #6b7280 !important;
}
#mainContentGaris [class^="topbar-"]:not(.topbar-garis):not(.topbar-inner-garis) [class^="pill-"] b,
#mainContentGaris [class^="topbar-"]:not(.topbar-garis):not(.topbar-inner-garis) [class*=" pill-"] b{
  color: #1f2a37 !important;
}

#mainContentGaris [class^="topbar-"]:not(.topbar-garis):not(.topbar-inner-garis) [class^="btn-"]:not(.primary):not(.ghost),
#mainContentGaris [class^="topbar-"]:not(.topbar-garis):not(.topbar-inner-garis) [class*=" btn-"]:not(.primary):not(.ghost){
  border-color: #e6eaf2 !important;
  background: #ffffff !important;
  color: #1f2a37 !important;
  box-shadow: 0 4px 12px rgba(16,24,40,.04) !important;
}
#mainContentGaris [class^="topbar-"]:not(.topbar-garis):not(.topbar-inner-garis) [class^="btn-"].primary,
#mainContentGaris [class^="topbar-"]:not(.topbar-garis):not(.topbar-inner-garis) [class*=" btn-"].primary{
  background: linear-gradient(135deg, #b21f24, #d9480f) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 10px 20px rgba(178,31,36,.18) !important;
}
#mainContentGaris [class^="topbar-"]:not(.topbar-garis):not(.topbar-inner-garis) .field-usuarios label,
#mainContentGaris [class^="topbar-"]:not(.topbar-garis):not(.topbar-inner-garis) [class^="field-"] label{
  color: #6b7280 !important;
}
#mainContentGaris [class^="topbar-"]:not(.topbar-garis):not(.topbar-inner-garis) .field-usuarios select,
#mainContentGaris [class^="topbar-"]:not(.topbar-garis):not(.topbar-inner-garis) [class^="field-"] select{
  background: #ffffff !important;
  border-color: #e6eaf2 !important;
  color: #1f2a37 !important;
}

/* Modales: sí llevan brand completo (contexto temporal, foco claro) */
#mainContentGaris [class^="modalHead-"],
#mainContentGaris [class*=" modalHead-"],
#mainContentGaris .modal-hd,
#mainContentGaris .modal-cm .modal-header{
  background: var(--garis-modal-header-bg) !important;
  border-bottom: 1px solid rgba(255,255,255,.14) !important;
}

#mainContentGaris [class^="modalHead-"] h3,
#mainContentGaris [class*=" modalHead-"] h3,
#mainContentGaris .modal-hd h2,
#mainContentGaris .modal-hd h3,
#mainContentGaris .modal-cm .modal-title{
  color: var(--garis-modal-header-text) !important;
}

#mainContentGaris [class^="modalHead-"] .sub,
#mainContentGaris [class*=" modalHead-"] .sub,
#mainContentGaris .modal-hd .sub,
#mainContentGaris .modal-hd small{
  color: var(--garis-modal-header-sub) !important;
}

#mainContentGaris [class^="closeX-"],
#mainContentGaris [class*=" closeX-"]{
  border-color: rgba(255,255,255,.28) !important;
  background: rgba(255,255,255,.14) !important;
  color: #ffffff !important;
}
#mainContentGaris [class^="closeX-"]:hover,
#mainContentGaris [class*=" closeX-"]:hover{
  background: rgba(255,255,255,.22) !important;
  border-color: rgba(255,255,255,.36) !important;
  color: #ffffff !important;
}

/* Bootstrap modals (legacy + appendTo body) */
body .modal.in .modal-header,
body .modal.show .modal-header,
body .modal .modal-header{
  background: linear-gradient(135deg, #b21f24 0%, #d9480f 100%) !important;
  border-bottom: 1px solid rgba(255,255,255,.14) !important;
}
body .modal.in .modal-title,
body .modal.show .modal-title,
body .modal .modal-title,
body .modal.in .modal-header h4,
body .modal.show .modal-header h4{
  color: #ffffff !important;
  font-weight: 900 !important;
}
body .modal.in .modal-header .close,
body .modal.show .modal-header .close,
body .modal .modal-header .close{
  color: #ffffff !important;
  opacity: .92;
  text-shadow: none;
}
body .modal.in .modal-header .close:hover,
body .modal.show .modal-header .close:hover,
body .modal .modal-header .close:hover{
  opacity: 1;
  color: #ffffff !important;
}

/* ===========================================================
   RESPONSIVE BREAKPOINTS
   =========================================================== */

/* ---- TABLET LANDSCAPE (768–1199) ---- */
@media (max-width: 1199px){
  #mainContentGaris .topbar-inner-garis{ padding: 8px 10px; }
  #mainContentGaris [class^="container-"][class$="-garis"],
  #mainContentGaris [class*=" container-"][class$="-garis"],
  #mainContentGaris .container-cm,
  #mainContentGaris .content-wrapper-garis{
    padding: 8px 10px 12px;
  }
  #mainContentGaris [class^="kpis-"],
  #mainContentGaris [class*=" kpis-"]{
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- TABLET PORTRAIT & SMALL (<=767) ---- */
@media (max-width: 767px){
  #mainContentGaris .topbar-inner-garis{
    padding: 6px 8px; flex-wrap: wrap;
  }
  #mainContentGaris .top-actions-garis{
    width: 100%; justify-content: flex-start; gap: 6px;
  }
  #mainContentGaris .page-title-garis b{ font-size: 12px; }
  #mainContentGaris .page-title-garis small{ font-size: 9px; gap: 4px; }
  #mainContentGaris .crumb-garis{ padding: 3px 6px; font-size: 9px; }

  #mainContentGaris [class^="container-"][class$="-garis"],
  #mainContentGaris [class*=" container-"][class$="-garis"],
  #mainContentGaris .container-cm,
  #mainContentGaris .content-wrapper-garis{
    padding: 6px 8px 10px;
  }
  #mainContentGaris [class^="topbar-"]:not(.topbar-garis):not(.topbar-inner-garis){
    gap: 8px; margin-bottom: 8px;
  }
  #mainContentGaris [class^="titleWrap-"],
  #mainContentGaris [class*=" titleWrap-"]{ flex: 1 1 100%; }
  #mainContentGaris [class^="actions-"],
  #mainContentGaris [class*=" actions-"]{
    width: 100%; justify-content: flex-start;
  }
  #mainContentGaris [class^="brandDot-"],
  #mainContentGaris [class*=" brandDot-"]{
    width: 32px; height: 32px; border-radius: 10px; font-size: 14px;
  }
  #mainContentGaris [class^="titleBlock-"] h1,
  #mainContentGaris [class*=" titleBlock-"] h1{ font-size: 15px; }
  #mainContentGaris [class^="titleBlock-"] p,
  #mainContentGaris [class*=" titleBlock-"] p{ font-size: 11px; }

  #mainContentGaris [class^="kpis-"],
  #mainContentGaris [class*=" kpis-"]{
    grid-template-columns: repeat(2, 1fr); gap: 6px; margin: 6px 0 8px;
  }
  #mainContentGaris [class^="kpi-"]:not([class*="Text"]):not([class*="Icon"]),
  #mainContentGaris [class*=" kpi-"]:not([class*="Text"]):not([class*="Icon"]){
    padding: 8px; min-height: 48px; gap: 8px;
  }
  #mainContentGaris [class^="kpiIcon-"],
  #mainContentGaris [class*=" kpiIcon-"]{
    width: 32px; height: 32px; border-radius: 8px; font-size: 14px;
  }
  #mainContentGaris [class^="kpiText-"] .value,
  #mainContentGaris [class*=" kpiText-"] .value{ font-size: 15px; }

  #mainContentGaris [class^="filters-"],
  #mainContentGaris [class*=" filters-"]{
    grid-template-columns: 1fr !important; gap: 8px; padding: 6px 2px 8px;
  }

  #mainContentGaris [class^="card-"][class*="-garis"],
  #mainContentGaris [class^="card-"][class*="-usuarios"],
  #mainContentGaris [class^="card-"][class*="-proveedores"],
  #mainContentGaris [class^="card-"][class*="-operadores"],
  #mainContentGaris [class^="card-"][class*="-unidades"],
  #mainContentGaris [class^="card-"][class*="-inspecciones"],
  #mainContentGaris [class^="card-"][class*="-inicio"],
  #mainContentGaris .content-wrapper-garis .card{
    padding: 8px; border-radius: 12px;
  }

  #mainContentGaris [class^="sectionTitle-"],
  #mainContentGaris [class*=" sectionTitle-"]{ padding: 2px 2px 6px; }
  #mainContentGaris [class^="sectionTitle-"] h2,
  #mainContentGaris [class*=" sectionTitle-"] h2{ font-size: 13px; }

  #mainContentGaris [class^="btn-"][class*="-usuarios"],
  #mainContentGaris [class^="btn-"][class*="-proveedores"],
  #mainContentGaris [class^="btn-"][class*="-operadores"],
  #mainContentGaris [class^="btn-"][class*="-unidades"],
  #mainContentGaris [class^="btn-"][class*="-inspecciones"],
  #mainContentGaris .btn-cm,
  #mainContentGaris .btn-modern,
  #mainContentGaris .btn-garis{
    padding: 6px 8px; font-size: 11px; gap: 5px; border-radius: 8px;
  }

  #mainContentGaris [class^="pill-"],
  #mainContentGaris [class*=" pill-"]{
    padding: 4px 6px; font-size: 10px;
  }

  /* Bitacora grid becomes single column */
  #mainContentGaris .grid{ grid-template-columns: 1fr !important; gap: 10px; }
  #mainContentGaris .quick{ flex-wrap: wrap; }
  #mainContentGaris .tile{ padding: 8px; gap: 8px; }
  #mainContentGaris .tile .ico{ width: 34px; height: 34px; }

  /* Modals (Family A/B + C) */
  #mainContentGaris [class^="modal-"][class$="-usuarios"],
  #mainContentGaris [class^="modal-"][class$="-proveedores"],
  #mainContentGaris [class^="modal-"][class$="-operadores"],
  #mainContentGaris [class^="modal-"][class$="-unidades"],
  #mainContentGaris [class^="modal-"][class$="-inspecciones"],
  #mainContentGaris .modal-card{
    border-radius: 14px;
    max-height: calc(100dvh - 12px);
  }
  #mainContentGaris [class^="modalHead-"],
  #mainContentGaris [class*=" modalHead-"],
  #mainContentGaris .modal-hd{ padding: 8px 10px; }
  #mainContentGaris [class^="modalHead-"] h3,
  #mainContentGaris [class*=" modalHead-"] h3,
  #mainContentGaris .modal-hd h2{ font-size: 13px; }
  #mainContentGaris [class^="modalBody-"],
  #mainContentGaris [class*=" modalBody-"],
  #mainContentGaris .modal-bd{ padding: 8px 10px 10px; }
  #mainContentGaris [class^="modalFoot-"],
  #mainContentGaris [class*=" modalFoot-"]{
    padding: 8px 10px;
    justify-content: stretch;
  }
  #mainContentGaris [class^="modalFoot-"] button,
  #mainContentGaris [class*=" modalFoot-"] button,
  #mainContentGaris [class^="modalFoot-"] .btn,
  #mainContentGaris [class*=" modalFoot-"] .btn{
    flex: 1 1 120px;
    justify-content: center;
    min-height: 36px;
  }
  #mainContentGaris [class^="formGrid-"],
  #mainContentGaris [class*=" formGrid-"],
  #mainContentGaris .form-grid{
    grid-template-columns: 1fr !important; gap: 6px;
  }

  #mainContentGaris [class^="modalOverlay-"],
  #mainContentGaris [class*=" modalOverlay-"],
  #mainContentGaris .modal-garis{ padding: 6px; }

  body .modal.in .modal-dialog,
  body .modal.show .modal-dialog,
  body .modal.in .modal-content,
  body .modal.show .modal-content{
    max-height: calc(100dvh - 12px);
  }
  body .modal.in .modal-dialog,
  body .modal.show .modal-dialog{
    width: calc(100vw - 12px) !important;
    margin: 6px auto !important;
  }
  body .modal.in .modal-footer,
  body .modal.show .modal-footer{
    padding: 8px 10px;
    justify-content: stretch;
  }
  body .modal.in .modal-footer .btn,
  body .modal.show .modal-footer .btn,
  body .modal.in .modal-footer button,
  body .modal.show .modal-footer button{
    flex: 1 1 120px;
    min-height: 36px;
  }
}

/* ---- SMALL PHONE (<=480) ---- */
@media (max-width: 480px){
  #mainContentGaris [class^="container-"][class$="-garis"],
  #mainContentGaris [class*=" container-"][class$="-garis"],
  #mainContentGaris .container-cm,
  #mainContentGaris .content-wrapper-garis{
    padding: 4px 6px 8px;
  }
  #mainContentGaris .topbar-inner-garis{ padding: 5px 6px; }
  #mainContentGaris [class^="kpis-"],
  #mainContentGaris [class*=" kpis-"]{
    grid-template-columns: 1fr;
  }
  #mainContentGaris [class^="brandDot-"],
  #mainContentGaris [class*=" brandDot-"]{
    width: 28px; height: 28px; border-radius: 8px; font-size: 12px;
  }
  #mainContentGaris [class^="titleBlock-"] h1,
  #mainContentGaris [class*=" titleBlock-"] h1{ font-size: 14px; }
  #mainContentGaris [class^="card-"][class*="-garis"],
  #mainContentGaris [class^="card-"][class*="-usuarios"],
  #mainContentGaris [class^="card-"][class*="-proveedores"],
  #mainContentGaris [class^="card-"][class*="-operadores"],
  #mainContentGaris [class^="card-"][class*="-unidades"],
  #mainContentGaris [class^="card-"][class*="-inspecciones"],
  #mainContentGaris [class^="card-"][class*="-inicio"],
  #mainContentGaris .content-wrapper-garis .card{
    padding: 6px; border-radius: 10px;
  }
  #mainContentGaris .btn-garis{
    padding: 5px 7px; font-size: 10px; border-radius: 8px;
  }
  #mainContentGaris .user-menu-garis span{ font-size: 11px; }
  #mainContentGaris .user-menu-garis img{ width: 24px; height: 24px; }
}

/* ---- SHORT VIEWPORT / PHONE LANDSCAPE (e.g. 932x430, 844x390) ---- */
@media (max-height: 500px){
  #mainContentGaris [class^="modalOverlay-"],
  #mainContentGaris [class*=" modalOverlay-"],
  #mainContentGaris .modal-garis{
    padding: 4px;
    align-items: flex-start;
  }
  #mainContentGaris [class^="modal-"][class$="-usuarios"],
  #mainContentGaris [class^="modal-"][class$="-proveedores"],
  #mainContentGaris [class^="modal-"][class$="-operadores"],
  #mainContentGaris [class^="modal-"][class$="-unidades"],
  #mainContentGaris [class^="modal-"][class$="-inspecciones"],
  #mainContentGaris [class^="modal-"][class$="-documentos"],
  #mainContentGaris [class^="modal-"][class$="-servicios"],
  #mainContentGaris .modal-card{
    max-height: calc(100dvh - 8px);
  }
  /* Header + footer compact */
  #mainContentGaris [class^="modalHead-"],
  #mainContentGaris [class*=" modalHead-"],
  #mainContentGaris .modal-hd,
  #mainContentGaris [class^="modalFoot-"],
  #mainContentGaris [class*=" modalFoot-"]{
    padding: 5px 8px;
  }
  #mainContentGaris [class^="modalHead-"] .sub,
  #mainContentGaris [class*=" modalHead-"] .sub{
    display: none;
  }
  #mainContentGaris [class^="modalHead-"] h3,
  #mainContentGaris [class*=" modalHead-"] h3,
  #mainContentGaris .modal-hd h2{
    font-size: 12px;
  }
  /* Body compact */
  #mainContentGaris [class^="modalBody-"],
  #mainContentGaris [class*=" modalBody-"],
  #mainContentGaris .modal-bd{
    padding: 5px 8px;
  }
  /* Form grid: 2 columns in landscape to use horizontal space */
  #mainContentGaris [class^="formGrid-"],
  #mainContentGaris [class*=" formGrid-"],
  #mainContentGaris .form-grid{
    grid-template-columns: 1fr 1fr !important;
    gap: 5px;
  }
  /* Sticky button bar in bitacora modals: tighter */
  #mainContentGaris .modal-bd > form > div:last-child{
    padding-top: 6px;
    padding-bottom: 0;
  }
  /* Buttons compact in landscape */
  #mainContentGaris [class^="modalFoot-"] button,
  #mainContentGaris [class*=" modalFoot-"] button,
  #mainContentGaris [class^="modalFoot-"] .btn,
  #mainContentGaris [class*=" modalFoot-"] .btn,
  #mainContentGaris .modal-bd .btn-modern{
    padding: 5px 8px;
    font-size: 11px;
    min-height: 30px;
  }

  /* Bootstrap modals in landscape */
  body .modal.in .modal-dialog,
  body .modal.show .modal-dialog,
  body .modal.in .modal-content,
  body .modal.show .modal-content{
    max-height: calc(100dvh - 8px);
  }
  body .modal.in .modal-dialog,
  body .modal.show .modal-dialog{
    margin: 4px auto !important;
  }
  body .modal.in .modal-header,
  body .modal.show .modal-header,
  body .modal.in .modal-footer,
  body .modal.show .modal-footer{
    padding: 5px 8px;
  }
  body .modal.in .modal-body,
  body .modal.show .modal-body{
    padding: 5px 8px;
  }
  body .modal.in .modal-footer .btn,
  body .modal.show .modal-footer .btn{
    padding: 5px 8px;
    font-size: 11px;
    min-height: 30px;
  }
}