/* =========================================================
   GENERALES
   ========================================================= */

#content_form {
    margin-bottom: 5px;
}

.open > .dropdown-menu {
    background-color: var(--portalThemeColor4, #ffffff);
}

.open > .dropdown-menu > li > a {
    color: var(--portalThemeOnColor9, #1276CE);
}

.open .dropdown-menu > li > a:hover,
.dropdown-menu > .active > a:hover,
.open .dropdown-menu > .active > a:focus {
    color: var(--portalThemeColor4, #ffffff);
    background-color: var(--portalThemeOnColor9, #1276CE);
    text-decoration: underline;
}

.dropdown-menu > .active > a {
    color: var(--portalThemeColor4, #ffffff);
    background-color: var(--portalThemeOnColor9, #1276CE);
    text-decoration: underline;
}


/* =========================================================
   BOOTSTRAP – CONTAINERS A ANCHO COMPLETO (BASE)
   ========================================================= */

.container,
.container-sm,
.container-md,
.container-lg,
.container-xl {
    max-width: 100% !important;
}


/* =========================================================
   HOME – FULL WIDTH CONTROLADO
   ========================================================= */

.page-home .sectionBlockLayout > .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 40px;
    padding-right: 40px;
}


/* =========================================================
   ENTITY LIST – FULL WIDTH REAL (MÁQUINAS + TICKETS)
   ========================================================= */

/* Romper el container SOLO si contiene entity list */
.row.sectionBlockLayout > .container:has(.entity-grid.entitylist) {
    width: 100vw !important;
    max-width: 100vw !important;

    /* sacar el centrado Bootstrap */
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    /* padding general */
    padding-left: 64px !important;
    padding-right: 64px !important;
}

.row.sectionBlockLayout
  > .container:has(.entity-grid.entitylist) {

    /* sigue siendo full width real */
    width: 100vw !important;
    max-width: 100vw !important;

    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    /* 👇 AQUÍ controlas el “margen” visual */
    padding-left: 64px !important;
    padding-right:64px !important;
}


/* =========================================================
   ENTITY LIST – ESTILO DE ENCABEZADO
   ========================================================= */

.entitylist thead tr {
    background-color: #f3f3f3;
}

.entitylist thead th {
    font-family: "Segoe UI", "Segoe UI Variable", Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #6b6b6b;
    padding: 14px 16px;
    border-bottom: 2px solid #e0e0e0;
    vertical-align: middle;
}

.entitylist thead th a,
.entitylist thead th span {
    color: #6b6b6b !important;
    font-weight: 600;
}

.entitylist thead th .sort-icon,
.entitylist thead th .glyphicon {
    color: #9a9a9a;
}


/* =========================================================
   IFRAME – FULL WIDTH REAL (AISLADO)
   ========================================================= */

/* Romper container solo si hay iframe */
.row.sectionBlockLayout:has(iframe) > .container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 64px !important;
    padding-right: 64px !important;
}

/* Quitar márgenes de la columna */
.row.sectionBlockLayout:has(iframe) .columnBlockLayout {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 64px !important;
    padding-right: 64px !important;
}

/* Iframe full width */
.row.sectionBlockLayout:has(iframe) iframe {
    width: 100% !important;
    max-width: 100% !important;
    border: 0;
    display: block;
}

/* Breadcrumb + título */
.page-heading {
  padding-left: 24px;
  padding-right: 24px;
}

/* Evita que bootstrap meta márgenes raros */
.page-heading > * {
  margin-left: 0;
  margin-right: 0;
}

/* =========================================
   CONTENEDOR PRINCIPAL DEL PORTAL
   ========================================= */

.wrapper-body > .container[role="main"] {
  max-width: 100% !important;
  width: 100% !important;

  /* AQUÍ controlas el margen lateral REAL */
  padding-left: 100px !important;
  padding-right: 100px !important;
}

/* =========================================================
   DETALLE MÁQUINA – AJUSTE POR ESTRUCTURA HTML (ID)
   ========================================================= */

/* 1. Forzamos el contenedor principal dentro de "detalleMaquinaContenedor"
      a ocupar todo el ancho de la ventana */
#detalleMaquinaContenedor > .row.sectionBlockLayout > .container {
    width: 100vw !important;
    max-width: 100vw !important;

    /* El truco matemático para romper el centro de Bootstrap y estirar a los bordes */
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    /* AQUI aplicamos el aire de 64px que necesitas */
    padding-left: 64px !important;
    padding-right: 64px !important;
}

/* 2. Corrección para contenedores anidados (ej. dentro de los Tabs #pp-tabs)
      Como se ve en tu captura, hay otro .container dentro. 
      Le decimos que ocupe el 100% del espacio disponible (que ya definimos arriba)
      y que NO agregue más márgenes ni paddings extraños. */
#detalleMaquinaContenedor .container .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
}

/* 3. Asegurar que las filas internas no desborden */
#detalleMaquinaContenedor .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* =========================================================
   FORZADO DE PADDING 64PX - ESTRUCTURA TABS
   ========================================================= */

/* 1. Ajuste del contenedor principal de los Tabs */
#detalleMaquinaContenedor > .row > .container > .columnBlockLayout {
    padding-left: 64px !important;
    padding-right: 64px !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* 2. Ajuste específico para la Tab de Información (Formulario)
      Anulamos el padding:0 que tiene el HTML inline */
#detalleMaquinaContenedor .row .container .columnBlockLayout [style*="padding:8px 0"],
#detalleMaquinaContenedor .row .container .columnBlockLayout [style*="padding: 8px 0"] {
    padding-left: 0 !important; 
    padding-right: 0 !important;
}

/* 3. Aseguramos que los Tabs (la botonera) también respeten el inicio del padding */
.pp-tabs {
    margin-left: 0;
    margin-right: 0;
}

/* 4. El enlace "Volver a Máquinas" y el Formulario */
.entity-back-link, 
.entity-form, 
.crmEntityFormView {
    padding-left: 0 !important;
}

/* =========================================================
   UNIFICACIÓN DE ALINEACIÓN - TICKETS VS INFORMACIÓN
   ========================================================= */

/* 1. Resetear el margen de 60px que tiene el contenedor de Tickets en el HTML */
#detalleMaquinaContenedor .columnBlockLayout[style*="margin: 60px 0px"],
#detalleMaquinaContenedor .columnBlockLayout[style*="margin:60px 0px"] {
    margin-top: 20px !important; /* Ajustado para que no haya tanto salto visual */
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 2. Forzar que la lista de entidad (tabla de tickets) no tenga márgenes negativos
      que la desplacen fuera del eje de los 64px */
#detalleMaquinaContenedor .entity-grid {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 3. Asegurar que el contenedor de la lista de entidad ocupe el 100% 
      sin paddings adicionales de Bootstrap */
#detalleMaquinaContenedor .view-grid {
    padding: 0 !important;
}

/* 4. Alineación del botón "Crear" y buscador en la pestaña de Tickets */
#detalleMaquinaContenedor .entitylist-search,
#detalleMaquinaContenedor .view-toolbar {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* =========================================================
   EDITAR CASO – EJE AISLADO Y SEGURO
   URL: /editar-caso/
   ========================================================= */

/* 1. Scope EXCLUSIVO: solo páginas que contienen el formulario de caso */
body:has(.crmEntityFormView[data-form-name="Web - Edit Case"])
  .row.sectionBlockLayout {

    padding-left: 100px !important;
    padding-right: 100px !important;

    /* anulamos padding inline de Power Pages */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* 2. Limpieza interna SIN afectar otras páginas */
body:has(.crmEntityFormView[data-form-name="Web - Edit Case"])
  .row.sectionBlockLayout > .container,
body:has(.crmEntityFormView[data-form-name="Web - Edit Case"])
  .columnBlockLayout {

    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 3. El formulario usa todo el ancho disponible */
body:has(.crmEntityFormView[data-form-name="Web - Edit Case"])
  .crmEntityFormView,
body:has(.crmEntityFormView[data-form-name="Web - Edit Case"])
  .entity-form {

    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
}

/* 4. Historial alineado al mismo eje */
body:has(.crmEntityFormView[data-form-name="Web - Edit Case"])
  .notes,
body:has(.crmEntityFormView[data-form-name="Web - Edit Case"])
  .adx-notes-control {

    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* =========================================================
   EDITAR CASO – SEPARACIÓN VERTICAL DEL HEADER
   ========================================================= */

/* Solo para el formulario Edit Case */
body:has(.crmEntityFormView[data-form-name="Web - Edit Case"])
  .row.sectionBlockLayout {

    margin-top: 32px !important; /* separación limpia del menú */
}