/* =========================================================
   Retoques visuales globales (cargado en main.hbs y trf-main.hbs)
   ========================================================= */


/* =========================================================
   TABLAS ANCHAS: se desplazan dentro de su contenedor y no rompen la página
   ========================================================= */

/* El contenedor directo de una tabla (si solo tiene la tabla) pasa a tener scroll horizontal.
   Sin esto, en pantallas angostas la tabla tapaba lo de al lado o quedaba cortada
   (body tiene overflow-x: hidden en eurosystem-home.css). Los desplegables "⋮" de las filas
   no se recortan: eurosystem-ui.js los posiciona "fixed". */
:is(div, section):has(> table):not(:has(> :not(table, .dt-processing, script, style, br))) {
    max-width: 100%;

    overflow-x: auto;
}

/* Envoltorio que agrega eurosystem-ui.js a las tablas que comparten contenedor */
.es-tabla-scroll {
    max-width: 100%;

    overflow-x: auto;
}

/* Scroll horizontal fino y prolijo */
:is(div, section):has(> table) {
    scrollbar-width: thin;
    scrollbar-color: #c3ccd6 transparent;
}

/* Imágenes y gráficos nunca más anchos que su columna */
main img,
.container img,
canvas {
    max-width: 100%;
}


/* =========================================================
   CELULARES: formularios y márgenes
   ========================================================= */

@media (max-width: 575.98px) {

    /* Muchos formularios usan col-1 / col-2 sin punto de quiebre: en un celular miden
       30-65px y las etiquetas y botones se salen. Si tienen campos, pasan a media fila. */
    .row > :is(.col-1, .col-2):has(label, input, select, textarea, button, .btn, .form-check),
    .row > :is(.col-3, .col-4):has(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
        flex: 0 0 auto;
        width: 50%;
    }

}

@media (max-width: 767.98px) {

    /* Los márgenes/rellenos laterales grandes (48px por lado) empujaban el contenido afuera */
    .mx-5, .ms-5 { margin-left: 1rem !important; }
    .mx-5, .me-5 { margin-right: 1rem !important; }
    .px-5, .ps-5 { padding-left: 1rem !important; }
    .px-5, .pe-5 { padding-right: 1rem !important; }

}

/* Etiquetas largas: bajan de renglón dentro de su columna en vez de salirse */
label {
    max-width: 100%;

    overflow-wrap: break-word;
}


/* =========================================================
   FILA SUPERIOR DE DATATABLES ("Mostrar N registros" / "Buscar")
   ========================================================= */

/* El texto y el control quedan en la misma línea y, si no entran, bajan juntos
   (antes "Buscar:" quedaba arriba y el campo se salía de la columna) */
div.dt-container div.dt-length,
div.dt-container div.dt-search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

div.dt-container div.dt-search {
    justify-content: flex-end;
}

/* DataTables les pone white-space: nowrap y en tablet no entraban en su columna */
div.dt-container div.dt-length label,
div.dt-container div.dt-search label {
    margin: 0;

    white-space: normal;
}

div.dt-container div.dt-search input {
    min-width: 0;
    max-width: 100%;
    margin-left: 0;
}

@media (max-width: 767.98px) {

    div.dt-container div.dt-length,
    div.dt-container div.dt-search {
        justify-content: center;
    }

}


/* =========================================================
   PAGINACIÓN (DataTables y .pagination de Bootstrap)
   ========================================================= */

.pagination {
    gap: 4px;

    flex-wrap: wrap;
}

.pagination .page-item .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 36px;
    height: 36px;
    padding: 0 11px;

    background: #ffffff;
    color: #344054;

    border: 1px solid #e4e7ec;
    border-radius: 9px;

    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);

    font-size: 14px;
    font-weight: 500;
    line-height: 1;

    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

/* sin el margen negativo de Bootstrap: los botones van separados */
.pagination .page-item:not(:first-child) .page-link {
    margin-left: 0;
}

.pagination .page-item .page-link:hover {
    background: #f0f6fb;
    color: #145a8d;

    border-color: #c5d9e8;
}

.pagination .page-item .page-link:focus {
    box-shadow: 0 0 0 3px rgba(20, 90, 141, 0.18);
}

.pagination .page-item.active .page-link {
    background: #145a8d;
    color: #ffffff;

    border-color: #145a8d;

    box-shadow: 0 3px 8px rgba(20, 90, 141, 0.28);

    font-weight: 600;
}

.pagination .page-item.disabled .page-link {
    background: #f9fafb;
    color: #c0c7d0;

    border-color: #eef0f3;

    box-shadow: none;
}

/* "…" entre números */
.pagination .page-item .page-link.ellipsis {
    min-width: 22px;
    padding: 0 2px;

    background: transparent;
    color: #98a2b3;

    border-color: transparent;

    box-shadow: none;

    pointer-events: none;
}

.pagination .page-link i {
    font-size: 13px;
}


/* Fila de "Mostrando registros..." + paginación */

div.dt-container div.dt-info {
    padding-top: 0;

    color: #667085;

    font-size: 13.5px;
}

div.dt-container .dt-layout-row:last-child,
div.dt-container > .row:last-child {
    align-items: center;

    margin-top: 10px;
}

div.dt-container div.dt-paging ul.pagination {
    margin: 4px 0;
}

/* Menú del usuario de la barra (nav.hbs). Estaba en eurosystem-login.css, que el layout de Tráfico
   (trf-main.hbs) no carga: ahí el nombre se veía subrayado y sin el formato de la barra. */
/* ========================================================= */
/* NAVBAR */
/* ========================================================= */

.user-menu {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 0.8rem;
  text-decoration: none;
}

.user-menu > i:first-child {
  font-size: 1.1rem;
}

.user-arrow {
  margin-left: 3px;
  font-size: 0.65rem;
  opacity: 0.65;
}

/* Celulares y tablets chicas: barra en una sola línea (menú a la izquierda, usuario a la derecha).
   Antes los dos bloques ocupaban el 100% y el usuario bajaba a una segunda fila */
@media (max-width: 768px) {
  #menu.navbar {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 8px;
    padding-left: 0;
    padding-right: 0;
  }

  #menu > .container-fluid {
    width: auto;
    flex: 0 1 auto;
    min-width: 0;
    margin-left: 0; /* Bootstrap pone margin auto y el botón del menú quedaba corrido al centro */
    margin-right: 0;
  }

  #menu > #options {
    margin-left: auto;
    margin-right: 12px;
    flex-wrap: nowrap;
    align-items: center;
  }

  #menu #options .dropdown {
    min-width: 0;
  }

  #menu .user-menu {
    min-width: 0;
  }

  #menu .user-menu span {
    max-width: 44vw;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}