/* TRADA — corrección responsive de acceso y favoritos (2026-10-28)
   Cargada después del tema y de los ajustes previos para evitar conflictos.
*/

/* Acceso: centrado flexible sin desbordar incluso con teclado o pantalla baja. */
.auth-body.auth-body-login {
    width: 100%;
    min-width: 0;
    min-height: 100vh;
    min-height: 100dvh;
    height: auto;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(14px, 4vh, 32px) 16px;
    overflow-x: clip;
    overflow-y: auto;
}
.auth-body-login .auth-login-shell,
.auth-body-login .auth-layout.auth-layout-single,
.auth-body-login .auth-card.auth-card-modern,
.auth-body-login .auth-form,
.auth-body-login .auth-input-wrap,
.auth-body-login .auth-input-wrap input { min-width: 0; max-width: 100%; box-sizing: border-box; }
.auth-body-login .auth-login-shell { width: min(440px, 100%); margin: 0 auto; flex: 0 1 auto; }
.auth-body-login .auth-layout.auth-layout-single { width: 100%; min-height: 0; margin: 0; }
.auth-body-login .auth-card.auth-card-modern { width: 100%; }
.auth-body-login .auth-form label { min-width: 0; max-width: 100%; }
.auth-body-login .auth-input-wrap input { width: 100%; }
.auth-body-login .auth-login-footer { max-width: 100%; overflow-wrap: anywhere; }

/* Sin halo azul en los inputs. El borde gris marca el foco sin cubrir el contenido. */
.auth-body-login .auth-input-wrap:focus-within,
.auth-body-login .auth-input-wrap input:focus,
.auth-body-login .auth-input-wrap input:focus-visible,
.auth-body-login .auth-form .search-field:focus-within {
    outline: 0 !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    filter: none !important;
}
.auth-body-login .auth-input-wrap input:focus,
.auth-body-login .auth-input-wrap input:focus-visible {
    border-color: #8d9bab !important;
    background-color: #fff !important;
}
.auth-body-login .password-visibility-button:focus-visible {
    outline: 2px solid #9ca3af !important;
    outline-offset: 1px !important;
    box-shadow: none !important;
}
.auth-body-login .remember-access-control input:focus-visible + .remember-checkbox {
    box-shadow: none !important;
    outline: 2px solid #94a3b8;
    outline-offset: 2px;
}
.auth-body-login .remember-access-control > span:last-child { min-width: 0; overflow-wrap: anywhere; }

/* Secciones de filtros y tarjetas: no pueden exceder el ancho disponible. */
.client-board-directory,
.client-board-directory .client-boards-toolbar,
.client-board-directory .clients-toolbar-actions,
.client-board-directory .client-board-filters,
.client-board-directory .search-field,
.client-board-directory .select-control,
.client-board-directory .trada-favorite-filter {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}
.client-board-directory .client-board-filters .search-field input,
.client-board-directory .client-board-filters .select-control select {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    text-overflow: ellipsis;
}
.client-board-directory .trada-favorite-filter { cursor: pointer; }
.client-board-directory .trada-favorite-filter input { width: 17px; height: 17px; min-width: 17px; flex: none; margin: 0; }

@media (max-width: 900px) {
    .client-board-directory .client-boards-toolbar { flex-direction: column; align-items: stretch; gap: 14px; }
    .client-board-directory .client-board-filters { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-items: stretch; }
    .client-board-directory .client-board-filters > .search-field,
    .client-board-directory .client-board-filters > .select-control,
    .client-board-directory .client-board-filters > .trada-favorite-filter { width: 100%; min-width: 0; max-width: 100%; margin: 0; }
    .client-board-directory .client-board-filters > .search-field,
    .client-board-directory .client-board-filters > .select-control { min-height: 44px; }
    .client-board-directory .trada-favorite-filter {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        min-height: 44px;
        padding: 10px 12px;
        white-space: normal;
        border: 1px solid #dce3ed;
        border-radius: 8px;
        background: #fff;
        color: #334155;
        font-weight: 570;
        line-height: 1.4;
    }
    .client-board-directory .trada-favorite-filter:focus-within { outline: 2px solid #94a3b8; outline-offset: 1px; }
}

@media (max-width: 680px) {
    .auth-body.auth-body-login { padding: 18px 12px; }
    .auth-body-login .auth-login-shell { gap: 14px; width: min(440px, 100%); }
    .auth-body-login .auth-layout.auth-layout-single { border-radius: 14px; }
    .auth-body-login .auth-card.auth-card-modern { padding: clamp(20px, 5vw, 30px); }
    .auth-body-login .auth-login-brand { margin-bottom: 23px; }
    .auth-body-login .auth-card-heading { margin-bottom: 23px; }
    .auth-body-login .auth-form label > span:first-child { max-width: 100%; }
    .auth-body-login .auth-input-wrap input { font-size: 16px; }

    .client-board-directory .modern-table-wrap { overflow: visible; max-width: 100%; }
    .client-board-directory .client-boards-table { min-width: 0 !important; max-width: 100%; }
    .client-board-directory .client-boards-table tbody { min-width: 0; max-width: 100%; }
    .client-board-directory .client-boards-table .client-board-row {
        position: relative;
        min-width: 0;
        max-width: 100%;
        padding: 16px;
        overflow: visible;
    }
    /* Acción de favorito fijada arriba a la derecha, sin cubrir el nombre. */
    .client-board-directory .client-board-row .client-board-name-cell {
        padding-left: 0 !important;
        padding-right: 47px !important;
        min-height: 37px;
    }
    .client-board-directory .client-board-row .client-board-action-cell { position: static !important; min-width: 0; }
    .client-board-directory .client-board-row .trada-favorite-button {
        position: absolute !important;
        top: 13px;
        left: auto;
        right: 13px;
        bottom: auto;
        z-index: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        margin: 0 !important;
        padding: 0;
        font-size: 22px;
        line-height: 1;
        border: 1px solid #d6e5f8;
        border-radius: 9px;
        background: #eff6ff;
        color: #1854ab;
    }
    .client-board-directory .client-board-row .trada-favorite-button[data-current-favorite="1"] {
        background: #dbeafe;
        border-color: #b5d3ff;
        color: #1049a3;
    }
    .client-board-directory .client-board-row .trada-favorite-button:focus-visible {
        outline: 2px solid #94a3b8;
        outline-offset: 2px;
        box-shadow: none;
    }
    .client-board-directory .client-board-row .client-board-action-cell .button {
        width: 100%;
        max-width: 100%;
        margin: 0;
    }
}

@media (min-width: 530px) and (max-width: 900px) {
    /* Buscador y favoritos usan fila completa; selectores pueden ir en dos columnas. */
    .client-board-directory .client-board-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .client-board-directory .client-board-filters > .search-field,
    .client-board-directory .client-board-filters > .trada-favorite-filter { grid-column: 1 / -1; }
}

@media (max-width: 350px) {
    .auth-body.auth-body-login { padding: 12px 8px; }
    .auth-body-login .auth-card.auth-card-modern { padding: 20px 15px; }
    .auth-body-login .auth-login-brand { margin-bottom: 18px; }
    .auth-body-login .auth-login-footer { font-size: 10px; }
    .client-board-directory .client-boards-table .client-board-row { padding: 12px; }
    .client-board-directory .client-board-row .trada-favorite-button { left: auto; right: 11px; top: 11px; }
}
/* El checkbox visualmente oculto de “Recordar acceso” heredaba width:100%,
   generando scroll horizontal aun estando con opacity:0. */
.auth-body-login .remember-access-control { position: relative; min-width: 0; }
.auth-body-login .remember-access-control > input[type="checkbox"] {
    position: absolute !important;
    inset: 0 auto auto 0 !important;
    width: 1px !important;
    min-width: 0 !important;
    max-width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 0;
    overflow: hidden;
    clip-path: inset(50%);
}

/* Tablet: la tabla ancha se transforma en tarjetas para evitar botones cortados. */
@media (min-width: 681px) and (max-width: 900px) {
    .client-board-directory .modern-table-wrap {
        overflow: visible;
        padding: 0 14px 14px;
        border: 0;
        background: transparent;
    }
    .client-board-directory .client-boards-table {
        display: block;
        min-width: 0 !important;
        width: 100%;
        max-width: 100%;
        background: transparent;
    }
    .client-board-directory .client-boards-table thead { display: none; }
    .client-board-directory .client-boards-table tbody {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
        gap: 12px;
        width: 100%;
        min-width: 0;
    }
    .client-board-directory .client-boards-table .client-board-row {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        width: 100%;
        min-width: 0;
        padding: 16px;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 13px;
    }
    .client-board-directory .client-boards-table .client-board-row > td {
        display: block;
        width: 100%;
        min-width: 0;
        padding: 0;
        border: 0;
        text-align: left;
    }
    .client-board-directory .client-board-row .client-board-name-cell {
        padding-left: 0 !important;
        padding-right: 48px !important;
        min-height: 38px;
    }
    .client-board-directory .client-board-entity { min-width: 0; }
    .client-board-directory .client-board-entity .board-table-avatar { display: none; }
    .client-board-directory .client-board-description-cell .board-description-cell {
        max-width: none;
        font-size: 13px;
        line-height: 1.5;
        overflow-wrap: anywhere;
    }
    .client-board-directory .client-board-row .client-board-action-cell { position: static !important; margin-top: auto; }
    .client-board-directory .client-board-row .trada-favorite-button {
        position: absolute !important;
        top: 15px;
        left: auto;
        right: 15px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        padding: 0;
        margin: 0 !important;
        font-size: 22px;
        line-height: 1;
        border: 1px solid #d6e5f8;
        background: #eff6ff;
        color: #1854ab;
        border-radius: 9px;
    }
    .client-board-directory .client-board-row .trada-favorite-button[data-current-favorite="1"] {
        background: #dbeafe;
        border-color: #b5d3ff;
    }
    .client-board-directory .client-board-action-cell .button {
        width: 100%;
        max-width: 100%;
        justify-content: center;
        white-space: normal;
    }
    .client-board-directory .client-board-empty-row { display: block; }
    .client-board-directory .client-board-empty-row td { display: block; }
}