/* ==========================================================================
   Construmarket Theme - login.css
   Restyles the GLPI login screen to match the corporate mockup:
     - centered GLPI wordmark + subtitle above the card
     - split card: form (left, white) / corporate brand panel (right, navy)
     - form fields with inline icons, gold submit button, "or" divider for
       external (SSO) providers
     - trust row (shield + Secure / Reliable / Available) and the GLPI
       copyright line below the card
   Built at runtime by public/js/corporate.js::restructureLoginShell() out of:
     - GLPI's own login form, untouched, simply re-parented into
       .cm-login-shell__form (icons/toggles are additive wrappers)
     - the .cm-login-brand / .cm-login-trust fragments echoed by the
       display_login hook (src/ThemeManager.php)
   GLPI's own login <form> and its authentication logic are never touched:
   this file only styles the shell and neutralizes the original card chrome
   now redundant inside it. Relies on generic, stable Tabler layout classes
   (.page-center, .card, .form-control...) so it degrades gracefully if a
   future core release renames them.

   Sizing strategy: every padding/margin/font-size/dimension below is a
   clamp(min, Nvh, max). min is the smallest comfortable size (guarantees no
   scroll on a short ~650px-tall viewport); max is a deliberately modest
   ceiling reached only on very tall viewports (~1400px+), not the original
   "full mockup" size - an earlier version let every value reach its
   generous max by ~1050px, which added up to MORE total height than a
   large-but-ordinary window actually has (reported live: still scrolled at
   1907x1145) even though the same value, in isolation, looked good. Every
   number here is the previous safe pass scaled up a uniform +5% (min, vh
   growth rate, and max together) per explicit request for a slightly
   bigger, still-safe result - if this still needs to grow, scale all three
   numbers in a clamp() together, not just the max, or the safety margin
   this was tuned for is lost. vh (not vw) drives growth because viewport
   HEIGHT is what forces scrolling; the card's own max-width already caps
   how wide it gets independently.
   ========================================================================== */

body.login-page,
.page.page-center,
.page-anonymous {
    background: var(--cm-gray-bg) !important;
    padding: clamp(.53rem, 1.21vh, 1.208rem) 1rem;
}

/* GLPI's own centering relies on its child `.flex-fill` growing to fill
   available height (Bootstrap's flex:1 1 auto) before its own
   justify-content-center can center US inside it - but .page-anonymous
   itself is a plain block sized to its content (confirmed live: 882px tall
   in a 1000px viewport), not the full viewport, so .flex-fill had nothing
   to grow INTO and just sat at its own content height. Visually that
   showed up as the login card sitting near the TOP with a large uneven gap
   below it instead of being centered. Making .page-anonymous itself a
   full-height flex container is what lets its child actually grow to fill
   the screen, so centering (and therefore symmetric top/bottom space)
   actually happens. */
.page-anonymous {
    display: flex !important;
    min-height: 100vh !important;
}

/* GLPI's own login wrapper (`.page-anonymous > .flex-fill.py-4.mt-4`)
   vertically centers its content and adds its own top/bottom spacing on
   top of everything below - tightened proportionally so it doesn't eat
   into the budget on short screens but still breathes a little on tall
   ones. */
.page-anonymous .py-4 {
    padding-top: clamp(.53rem, 1.21vh, 1.093rem) !important;
    padding-bottom: clamp(.53rem, 1.21vh, 1.093rem) !important;
}

.page-anonymous .mt-4 {
    margin-top: clamp(.26rem, 0.59vh, 0.724rem) !important;
}

/* Faint dot columns on the page edges, as in the mockup. */
@media (min-width: 1400px) {
    .page.page-center {
        background-image:
            radial-gradient(rgba(13, 45, 98, .12) 1.5px, transparent 1.5px),
            radial-gradient(rgba(13, 45, 98, .12) 1.5px, transparent 1.5px) !important;
        background-size: 22px 22px, 22px 22px !important;
        background-position: left -6px top, right -6px top !important;
        background-repeat: repeat-y, repeat-y !important;
    }
}

.cm-login-i18n {
    display: none !important;
}

/* -- Language switch (ES/EN) --
   position:fixed on purpose: this sits in the DOM wherever the
   display_login hook happens to echo it (inside the brand column), but
   the whole point is that it must NEVER participate in the flex/clamp
   height math the rest of this file works so hard to keep under the
   viewport - a fixed corner badge can't ever be the thing that
   reintroduces the vertical scrollbar. public/js/corporate.js physically
   re-parents this node to a direct child of <body> for the same reason:
   left inside .cm-login-shell (which gets a transform for its hover
   "lift"), position:fixed would resolve against that transformed
   ancestor instead of the viewport - GLPI's own transform on a plain
   .card is a well-known footgun here, not a login.css bug.

   Built as an actual sliding-track switch (not just two independently
   colored links): a single ::before thumb slides between slots via
   --cm-lang-index/--cm-lang-count (set inline by
   ThemeManager::renderLoginLanguageSwitcher()), same visual language as
   a native iOS/Android segmented control. */
.cm-login-lang {
    position: fixed;
    top: clamp(.75rem, 1.8vh, 1.25rem);
    right: clamp(.75rem, 1.8vw, 1.5rem);
    z-index: 20;
    isolation: isolate; /* own stacking context, for the ::before thumb below */
    display: inline-flex;
    align-items: center;
    padding: 3px;
    background: color-mix(in srgb, var(--cm-primary-dark, #003A70) 92%, black 8%);
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(15, 34, 58, .28), inset 0 1px 1px rgba(255, 255, 255, .08);
}

.cm-login-lang::before {
    content: "";
    position: absolute;
    inset: 3px;
    width: calc((100% - 6px) / var(--cm-lang-count, 2));
    border-radius: 999px;
    background: linear-gradient(135deg, var(--cm-accent, #FDBB11), var(--cm-gold-deep, #E0A100));
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
    transform: translateX(calc(var(--cm-lang-index, 0) * 100%));
    transition: transform .24s cubic-bezier(.4, 0, .2, 1);
    z-index: 0;
}

.cm-login-lang__opt {
    position: relative;
    z-index: 1;
    display: inline-block;
    min-width: 2.3rem;
    padding: .34rem .55rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-align: center;
    line-height: 1.3;
    color: rgba(255, 255, 255, .68);
    text-decoration: none;
    transition: color .2s ease;
}

.cm-login-lang__opt:hover {
    color: #fff;
}

.cm-login-lang__opt--active,
.cm-login-lang__opt--active:hover {
    color: var(--cm-ink, #102A4D);
}

/* -- GLPI wordmark header above the card (built by corporate.js) -- */

.cm-login-header {
    position: relative;
    z-index: 3;
    text-align: center;
    margin: 0 auto clamp(.26rem, 0.59vh, 0.909rem);
}

/* GLPI's own logo node is re-parented here; whatever form it takes
   (background span or <img>), give it a consistent size.
   GLPI core (.page-anonymous .glpi-logo in css/includes/_base.scss) hard-
   codes width:200px + height:110px on this exact element - same
   specificity as this rule, so only properties we actually redeclare
   override it. This block used to redeclare height only, leaving core's
   width:200px untouched: the box kept shrinking vertically via the height
   clamp while staying 200px wide regardless, stretching the logo
   horizontally (visibly squashed in practice, reported as "se ve
   desproporcionado" / looks low-res since a warped raster image reads as
   blurry even though the source file itself - 250x138 PNG - has plenty of
   resolution at the sizes this renders at). width:auto + aspect-ratio
   (the PNG's own natural 250:138 ratio, not the 200:110 approximation
   core's own box uses) makes the browser derive width from height itself,
   so it can never diverge from the image's real proportions again,
   whatever the height clamp is tuned to later. */
.cm-login-header .glpi-logo,
.cm-login-header img {
    display: inline-block;
    height: clamp(27px, 3.86vh, 48.3px);
    width: auto;
    aspect-ratio: 250 / 138;
    max-width: 220px;
    margin: 0 auto;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.cm-login-header__subtitle {
    margin: clamp(.21rem, 0.48vh, 0.483rem) 0 0;
    font-size: clamp(.86rem, 1.97vh, 1.115rem);
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--cm-ink);
}

/* -- Split card shell --
   Verified live (GLPI 11.0.8): the shell is NOT a synthetic wrapper - it IS
   GLPI's own `.card.main-content-card`, and .cm-login-shell__form/__brand
   ARE its own `.col-md-5` / `.col-auto` columns (restructureLoginShell()
   in corporate.js only tags the 4 real elements involved, nothing is moved
   or recreated). So the split has to happen by overriding Bootstrap's own
   row/col flex sizing in place, not by building a new grid from scratch. */

.cm-login-container {
    max-width: min(1210px, 96vw) !important;
}

.cm-login-shell {
    position: relative;
    z-index: 3;
    border: none !important;
    border-radius: 23px !important;
    overflow: hidden;
    box-shadow: var(--cm-shadow-lg, 0 24px 70px rgba(0, 22, 56, .2)) !important;
    background: var(--cm-white);
    animation: cmFadeCard .5s .1s ease both;
}

/* corporate.css' generic top gradient stripe on every .card - redundant
   here, the brand panel already carries the color. */
.cm-login-shell::before {
    content: none !important;
}

/* GLPI's own (empty) card-header, sibling of card-body inside the same
   .card - would otherwise show as a blank bordered bar above the split. */
.cm-login-shell > .card-header {
    display: none !important;
}

.cm-login-shell .card-body {
    padding: 0 !important;
}

@keyframes cmFadeCard {
    from { opacity: 0; transform: translateY(18px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* The row wrapping both columns (GLPI's `.row.justify-content-center`) -
   force it to stay side by side and drop Bootstrap's gutter margin, which
   would otherwise bleed past the shell's rounded corners. */
.cm-login-shell__row {
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    margin: 0 !important;
}

.cm-login-shell__form {
    flex: 0 0 44% !important;
    max-width: 44% !important;
    width: 44% !important;
    padding: clamp(.79rem, 1.81vh, 1.817rem) clamp(1.31rem, 1.68vw, 1.84rem) !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cm-login-shell__form .card-header {
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

/* -- Welcome heading (built by corporate.js) -- */

.cm-login-welcome {
    text-align: center;
    margin-bottom: clamp(.53rem, 1.21vh, 1.208rem);
}

.cm-login-welcome__title {
    font-size: clamp(1.47rem, 3.36vh, 1.932rem);
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--cm-ink);
    margin: 0 0 clamp(.16rem, 0.37vh, 0.368rem);
    padding: 0;
}

/* Cancel corporate.css' generic heading accent bar inside the card. */
.cm-login-welcome__title::after {
    content: none;
}

.cm-login-welcome__subtitle {
    font-size: clamp(.89rem, 2.03vh, 1.184rem);
    color: color-mix(in srgb, var(--cm-ink) 55%, transparent);
    margin: 0;
}

/* Mobile-only accent under the signin line (see .cm-login-welcome__accent
   in the @media block) and the "Cobertura regional" row's chevron (see
   .cm-login-brand__coverage-chevron) - both created unconditionally by
   corporate.js/ThemeManager.php and hidden here so desktop is unaffected. */
.cm-login-welcome__accent,
.cm-login-brand__coverage-chevron {
    display: none;
}

/* Hide GLPI's own card heading, replaced by .cm-login-welcome. */
.cm-login-shell__form .cm-core-login-title {
    display: none !important;
}

/* Tighten Bootstrap's own field spacing (.mb-2/.mb-3/.mb-4 between the
   username/password/auth-source/remember-me rows) proportionally, so the
   whole card fits a short screen without scrolling but isn't needlessly
   cramped on a tall one. */
.cm-login-shell__form .mb-2 { margin-bottom: clamp(.32rem, 0.73vh, 0.54rem) !important; }
.cm-login-shell__form .mb-3 { margin-bottom: clamp(.42rem, 0.96vh, 0.724rem) !important; }
.cm-login-shell__form .mb-4 { margin-bottom: clamp(.53rem, 1.21vh, 0.966rem) !important; }

/* -- Form fields -- */

.cm-login-shell__form .form-label,
.cm-login-shell__form label {
    font-size: clamp(.86rem, 1.97vh, 1.093rem);
    font-weight: 600;
    color: var(--cm-ink);
}

.cm-login-shell__form .form-control,
.cm-login-shell__form .form-select {
    height: clamp(42px, 6vh, 57.5px);
    border-radius: 10px;
    border: 1px solid #D7DEE9;
    font-size: .95rem;
    color: var(--cm-text);
    background-color: var(--cm-white);
    box-shadow: none;
}

.cm-login-shell__form .form-control::placeholder {
    color: #9AA7BC;
}

.cm-login-shell__form .form-control:focus,
.cm-login-shell__form .form-select:focus {
    border-color: var(--cm-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cm-primary) 15%, transparent);
}

/* Icon-in-input wrapper (built by corporate.js around GLPI's own inputs). */
.cm-input-icon {
    position: relative;
}

.cm-input-icon > .cm-input-icon__i {
    position: absolute;
    left: .95rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.05rem;
    color: #9AA7BC;
    pointer-events: none;
    z-index: 4;
}

.cm-input-icon > .form-control,
.cm-input-icon > .form-select {
    padding-left: 2.6rem;
}

/* select2 widget standing in for the auth-source <select> (hidden by
   select2 itself - see wrapWithIcon() in corporate.js). */
.cm-input-icon--select2 > .select2 {
    width: 100% !important;
}

.cm-input-icon--select2 .select2-selection {
    height: clamp(42px, 6vh, 57.5px) !important;
    border-radius: 10px !important;
    border: 1px solid #D7DEE9 !important;
    padding-left: 2.6rem;
    display: flex;
    align-items: center;
}

.cm-input-icon--select2 .select2-selection__rendered {
    padding-left: 0 !important;
}

.cm-input-icon--select2 .select2-selection__arrow {
    height: clamp(40px, 5.71vh, 55.2px) !important;
}

/* Password visibility toggle (additive button, never submits). */
.cm-input-icon > .cm-eye {
    position: absolute;
    right: .5rem;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    padding: .35rem;
    font-size: 1.05rem;
    line-height: 1;
    color: #9AA7BC;
    cursor: pointer;
    z-index: 4;
}

.cm-input-icon > .cm-eye:hover {
    color: var(--cm-primary);
}

.cm-input-icon > input[type="password"],
.cm-input-icon > .cm-eye ~ .form-control {
    padding-right: 2.6rem;
}

/* GLPI's own "show password" adornment, if any, is replaced by .cm-eye. */
.cm-login-shell__form .input-group-text {
    display: none !important;
}

/* Remember me checkbox, gold as in the mockup. */
.cm-login-shell__form .form-check-input {
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 6px;
    border-color: #C9D3E2;
    accent-color: var(--cm-accent);
}

.cm-login-shell__form .form-check-input:checked {
    background-color: var(--cm-accent);
    border-color: var(--cm-accent);
}

.cm-login-shell__form .form-check-input:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cm-accent) 25%, transparent);
}

.cm-login-shell__form .form-check-label {
    font-weight: 500;
}

/* Gold submit button with navy text. */
.cm-login-shell__form .btn-primary,
.cm-login-shell__form button[type="submit"] {
    width: 100%;
    height: clamp(44px, 6.29vh, 57.5px);
    border-radius: 10px;
    border: none;
    background: var(--cm-accent) !important;
    color: var(--cm-ink) !important;
    font-size: .95rem;
    font-weight: 700;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--cm-accent) 35%, transparent);
    transition: filter .15s ease, transform .15s ease;
}

.cm-login-shell__form .btn-primary:hover,
.cm-login-shell__form button[type="submit"]:hover {
    filter: brightness(.96);
    transform: translateY(-1px);
}

/* -- "or" divider + external (SSO) providers (arranged by corporate.js) -- */

.cm-login-divider {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin: clamp(.63rem, 1.44vh, 1.093rem) 0;
    color: #9AA7BC;
    font-size: .85rem;
}

.cm-login-divider::before,
.cm-login-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #E2E8F2;
}

.cm-login-sso {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.cm-login-sso .btn,
.cm-login-sso a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    width: 100%;
    height: clamp(44px, 6.29vh, 57.5px);
    border-radius: 10px;
    border: 1px solid #D7DEE9;
    background: var(--cm-white) !important;
    color: var(--cm-ink) !important;
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.cm-login-sso .btn:hover,
.cm-login-sso a:hover {
    border-color: var(--cm-primary);
    box-shadow: 0 4px 14px rgba(13, 45, 98, .08);
}

.cm-login-sso img,
.cm-login-sso svg,
.cm-login-sso i {
    font-size: 1.1rem;
    height: 20px;
    width: auto;
}

/* Microsoft's 4-color square mark, built from plain <i> tags (see
   addProviderIcon() in corporate.js) - no external logo asset needed. */
.cm-login-sso .cm-ms-icon {
    display: inline-grid;
    flex: none;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    width: 18px;
    height: 18px;
    gap: 2px;
}

.cm-login-sso .cm-ms-icon i {
    display: block;
    width: 100%;
    height: 100%;
}

.cm-login-sso .cm-ms-icon i:nth-child(1) { background: #F25022; }
.cm-login-sso .cm-ms-icon i:nth-child(2) { background: #7FBA00; }
.cm-login-sso .cm-ms-icon i:nth-child(3) { background: #00A4EF; }
.cm-login-sso .cm-ms-icon i:nth-child(4) { background: #FFB900; }

/* -- Brand panel -- */

.cm-login-shell__brand {
    position: relative;
    flex: 0 0 56% !important;
    max-width: 56% !important;
    width: 56% !important;
    padding: clamp(.79rem, 1.81vh, 1.817rem) clamp(1.31rem, 1.68vw, 1.84rem) !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--cm-white);
    background:
        radial-gradient(circle at 85% 8%, color-mix(in srgb, var(--cm-accent) 14%, transparent) 0%, transparent 45%),
        radial-gradient(circle at 8% 92%, color-mix(in srgb, var(--cm-primary) 35%, transparent) 0%, transparent 45%),
        linear-gradient(165deg, var(--cm-ink) 0%, var(--cm-primary-dark) 55%, var(--cm-primary) 100%);
    overflow: hidden;
}

/* Faint dot grid standing in for a world map, no image asset required. */
.cm-login-shell__brand::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .18) 1px, transparent 1px);
    background-size: 16px 16px;
    opacity: .5;
    pointer-events: none;
}

.cm-login-shell__brand > * {
    position: relative;
    z-index: 1;
}

/* logo.png (the real Construmarket mark, 606x575 - not perfectly square)
   is shown alone here, no baked-in wordmark/countries text next to it -
   that's what .cm-login-brand__title/coverage below already provide. */
.cm-login-brand__logo {
    height: clamp(61px, 8.71vh, 87.4px);
    width: clamp(61px, 8.71vh, 87.4px);
    /* object-fit (not just width/height) is what keeps the real photo
       from squishing ~5% into the forced-square box above - the source
       isn't perfectly 1:1, and a raster photo shows that kind of
       distortion far more than the old flat SVG mark did. */
    object-fit: contain;
    border-radius: var(--cm-radius-md, 14px);
    margin-bottom: clamp(.63rem, 1.44vh, 1.093rem);
    filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .35));
}

.cm-login-brand__title {
    font-size: clamp(1.47rem, 3.36vh, 1.99rem);
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -.01em;
    margin-bottom: clamp(.42rem, 0.96vh, 0.724rem);
    padding-bottom: 0;
    color: var(--cm-white);
}

/* Cancel corporate.css's generic h1 accent-bar here - this panel has its
   own centered pill accent (.cm-login-brand__accent) instead. */
.cm-login-brand__title::after {
    content: none;
}

.cm-login-brand__accent {
    display: block;
    width: 50px;
    height: 4px;
    border-radius: var(--cm-radius-pill, 999px);
    background: var(--cm-accent);
    margin: 0 auto clamp(.63rem, 1.44vh, 0.966rem);
}

.cm-login-brand__subtitle {
    font-size: clamp(1rem, 2.29vh, 1.3rem);
    font-weight: 700;
    color: rgba(255, 255, 255, .96);
    margin-bottom: clamp(.21rem, 0.48vh, 0.425rem);
}

.cm-login-brand__tagline {
    font-size: clamp(.86rem, 1.97vh, 1.15rem);
    color: rgba(255, 255, 255, .72);
    margin-bottom: clamp(1.05rem, 2.4vh, 1.69rem);
}

/* Service tiles: gold line icons separated by thin vertical rules. */
.cm-login-brand__services {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    width: 100%;
    padding: 0;
    margin: 0 0 clamp(1.05rem, 2.4vh, 1.69rem);
}

.cm-login-brand__services li {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(.37rem, 0.85vh, 0.724rem);
    padding: clamp(.11rem, 0.25vh, 0.299rem) clamp(.53rem, 1.68vw, .63rem);
    font-size: clamp(.74rem, 1.69vh, 0.943rem);
    font-weight: 600;
    line-height: 1.25;
    color: rgba(255, 255, 255, .92);
}

.cm-login-brand__services li + li {
    border-left: 1px solid rgba(255, 255, 255, .18);
}

.cm-login-brand__service-icon {
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 0;
    color: var(--cm-accent);
    font-size: clamp(1.37rem, 3.13vh, 2.058rem);
}

.cm-login-brand__coverage {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    padding: clamp(.63rem, 1.44vh, 1.208rem) clamp(.95rem, 2.52vw, 1.31rem);
    border-radius: var(--cm-radius-md, 14px);
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 8px 20px rgba(0, 10, 30, .18);
    text-align: left;
}

/* Solid light badge (icon reads dark-on-light) instead of a barely-visible
   translucent circle - the contrast is what makes it read as a badge. */
.cm-login-brand__coverage-icon {
    flex: none;
    width: clamp(34px, 4.86vh, 48.3px);
    height: clamp(34px, 4.86vh, 48.3px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--cm-white);
    color: var(--cm-primary-dark);
    font-size: clamp(1.05rem, 2.4vh, 1.391rem);
    box-shadow: 0 4px 10px rgba(0, 10, 30, .25);
}

.cm-login-brand__coverage strong {
    display: block;
    font-size: .92rem;
    font-weight: 700;
    margin-bottom: .2rem;
}

.cm-login-brand__coverage-list {
    font-size: .84rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, .8);
}

/* -- Trust row + copyright, below the shell -- */

.cm-login-trust {
    position: relative;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    width: 100%;
    max-width: 1150px;
    margin: clamp(.32rem, 0.73vh, 0.724rem) auto 0;
    color: color-mix(in srgb, var(--cm-ink) 55%, transparent);
    font-size: clamp(.82rem, 1.87vh, 1.035rem);
}

.cm-login-trust > i {
    font-size: 1rem;
    color: color-mix(in srgb, var(--cm-ink) 55%, transparent);
}

.cm-login-trust__item {
    display: inline-flex;
    align-items: center;
}

.cm-login-trust__item + .cm-login-trust__item::before {
    content: "\00B7";
    margin-right: .55rem;
    font-weight: 700;
}

.cm-login-copyright,
.cm-login-copyright a {
    position: relative;
    z-index: 3;
    display: block;
    text-align: center;
    margin: clamp(.21rem, 0.48vh, 0.368rem) auto 0;
    font-size: clamp(.76rem, 1.74vh, 0.966rem);
    color: color-mix(in srgb, var(--cm-ink) 45%, transparent) !important;
    text-decoration: none;
}

/* -- Responsive (narrow / mobile) --
   Matches the phone mockup: two independent stacked cards (navy brand card,
   then white form card) instead of one split card, the "Bienvenido" title
   dropped in favor of a bold underlined signin line (the brand card above
   already welcomes the visitor by name), and the service tiles /
   "Cobertura regional" row moved OUT of the navy card onto the plain page
   background - corporate.js::layoutBrandExtrasForViewport() does the
   re-parenting this relies on; scroll here is normal/expected, so sizes
   below are fixed and comfortable rather than the clamp()s used above for
   the no-scroll desktop split view. */

@media (max-width: 900px) {
    .cm-login-container {
        max-width: 480px !important;
    }

    /* .cm-login-shell stops being "the card" - it becomes a plain stack
       that holds two independent cards (form + brand), each with their
       own chrome, below. */
    .cm-login-shell {
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        overflow: visible !important;
    }

    .cm-login-shell .card-body {
        overflow: visible;
    }

    .cm-login-shell__row {
        flex-wrap: wrap !important;
        row-gap: 1rem;
    }

    .cm-login-shell__form,
    .cm-login-shell__brand {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        border-radius: 20px !important;
        box-shadow: 0 16px 36px rgba(0, 22, 56, .16);
    }

    .cm-login-shell__form {
        padding: 2rem 1.5rem !important;
        background: var(--cm-white);
    }

    .cm-login-shell__brand {
        order: -1;
        padding: 2.25rem 1.5rem !important;
    }

    .cm-login-brand__logo {
        height: 92px;
        width: 92px;
    }

    /* Signin line replaces the "Bienvenido" title (hidden below) as the
       form card's own heading: bold, dark, underlined - like the brand
       card's title/accent above it. */
    .cm-login-welcome {
        margin-bottom: 1.4rem;
    }

    .cm-login-welcome__title {
        display: none;
    }

    .cm-login-welcome__subtitle {
        font-size: 1.35rem;
        font-weight: 800;
        line-height: 1.25;
        letter-spacing: -.01em;
        color: var(--cm-ink);
    }

    .cm-login-welcome__accent {
        display: block;
        width: 56px;
        height: 4px;
        border-radius: var(--cm-radius-pill, 999px);
        background: var(--cm-accent);
        margin: .65rem auto 0;
    }

    /* Service tiles: re-parented by corporate.js to sit directly on the
       page background between the two cards - navy outline icons instead
       of the gold-on-navy desktop treatment, no divider rules (the mockup
       just spaces them evenly). */
    .cm-login-brand__services {
        max-width: 480px;
        margin: 0 auto 1rem !important;
        padding: 0 .5rem;
    }

    .cm-login-brand__services li {
        color: var(--cm-ink);
    }

    .cm-login-brand__services li + li {
        border-left: none;
    }

    .cm-login-brand__service-icon {
        color: var(--cm-primary-dark);
    }

    /* "Cobertura regional": re-parented alongside the tiles above, restyled
       as a tappable-looking white row (chevron shown via the base rule
       override below) instead of the desktop badge inside the navy panel. */
    .cm-login-brand__coverage {
        max-width: 480px;
        margin: 0 auto .75rem !important;
        background: var(--cm-white);
        border: 1px solid rgba(15, 34, 58, .08);
        box-shadow: var(--cm-shadow-sm, 0 4px 12px rgba(15, 34, 58, .08));
    }

    .cm-login-brand__coverage-icon {
        background: var(--cm-primary-light, #E3F2FF);
        color: var(--cm-primary-dark);
        box-shadow: none;
    }

    .cm-login-brand__coverage strong {
        color: var(--cm-ink);
    }

    .cm-login-brand__coverage-list {
        color: color-mix(in srgb, var(--cm-ink) 60%, transparent);
    }

    .cm-login-brand__coverage-chevron {
        display: block;
        margin-left: auto;
        font-size: 1.1rem;
        color: color-mix(in srgb, var(--cm-ink) 40%, transparent);
    }
}