/* Native OAuth link inside the DATPOL academy login card. */
.external-logins__button-list{list-style:none!important;padding:0!important;margin:12px 0 0!important;display:grid!important;gap:8px!important;width:100%!important}
.external-logins__button-list>li{margin:0!important;padding:0!important;min-width:0!important}
#app a.external-logins__button{box-sizing:border-box!important;display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;min-height:48px!important;padding:12px 16px!important;border:1px solid #344553!important;border-radius:10px!important;background:#344553!important;color:#fff!important;font:600 14px/1.35 system-ui,sans-serif!important;text-align:center!important;text-decoration:none!important;white-space:normal!important;overflow-wrap:normal!important;box-shadow:none!important}
#app a.external-logins__button:hover{background:#243440!important;border-color:#243440!important}
#app a.external-logins__button:focus-visible{outline:3px solid #7198ab!important;outline-offset:3px!important}
/* Compact alternatives, with one sign-in method visible at a time. */
#app .login-section[data-datpol-login] .datpol-login-choice{display:grid;grid-template-columns:1fr 1.25fr 1.1fr;gap:4px;padding:4px;margin:22px 28px 0;border:1px solid #dce4e9;border-radius:10px;background:#f3f6f8}
#app .login-section[data-datpol-login] .datpol-login-choice :is(button,a){box-sizing:border-box;display:flex;align-items:center;justify-content:center;min-width:0;min-height:40px;margin:0;padding:7px 5px;border:1px solid transparent;border-radius:7px;background:transparent;color:#455764;font:600 12px/1.3 system-ui,sans-serif;text-align:center;text-decoration:none;cursor:pointer;box-shadow:none}
#app .login-section[data-datpol-login] .datpol-login-choice button[aria-pressed=true]{background:#344553;color:#fff;border-color:#344553}
#app .login-section[data-datpol-login] .datpol-login-choice :is(button,a):focus-visible{outline:2px solid #344553;outline-offset:2px}
#app .login-section[data-datpol-login] :is(form.login-section__form,.external-logins)[hidden]{display:none!important}
#app .login-section[data-datpol-login] .external-logins{padding:20px 28px 28px;margin:0;border:0}
#app .login-section[data-datpol-login] .external-logins__divider,#app .login-section[data-datpol-login] form .login-section__buttons>a[href="/registration"]{display:none!important}
#app .login-section[data-datpol-login] .datpol-sso-note{margin:0 0 16px;color:#536674;font:400 13px/1.6 system-ui,sans-serif;text-align:center}
@media(max-width:420px){#app .login-section[data-datpol-login] .datpol-login-choice{margin:18px 20px 0}#app .login-section[data-datpol-login] .external-logins{padding:18px 20px 24px}}
/* Final card proportions: one padding layer and a quiet heading. */
#app .login-section[data-datpol-login]{border-radius:16px!important;border-color:#dde4e9!important;box-shadow:0 10px 32px #203a4a0a!important}
#app .login-section[data-datpol-login] h2.login-section__title{background:#fff!important;color:#253744!important;font:700 24px/1.25 system-ui,sans-serif!important;padding:24px 28px 0!important;margin:-28px -28px 20px!important;border:0!important;box-shadow:none!important;text-shadow:none!important}
#app .login-section[data-datpol-login] h2.login-section__title::before{color:#617581!important;font:600 10px/1.4 system-ui,sans-serif!important;letter-spacing:.08em!important;margin-bottom:10px!important}
#app .login-section[data-datpol-login] h2.login-section__title::after{display:none!important}
#app .login-section[data-datpol-login] .datpol-login-choice{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:3px!important;margin:0!important;padding:3px!important;border-color:#dfe6eb!important;background:#f3f5f7!important;border-radius:9px!important}
#app .login-section[data-datpol-login] .datpol-login-choice :is(button,a){min-height:36px!important;padding:7px 3px!important;font-size:12px!important;white-space:nowrap!important;border-radius:6px!important}
#app .login-section[data-datpol-login] .external-logins{display:block!important;margin:18px 0 0!important;padding:0!important}
#app .login-section[data-datpol-login] .external-logins__button-list{margin:0!important;gap:0!important}
#app .login-section[data-datpol-login] .datpol-sso-note{margin:0 0 14px!important;text-align:left!important;color:#5b6d79!important;font-size:13px!important;line-height:1.5!important}
#app .login-section[data-datpol-login] .login-section__form{margin-top:20px!important}
#app .login-section[data-datpol-login] .external-logins[hidden]{display:none!important}
@media(max-width:420px){#app .login-section[data-datpol-login] h2.login-section__title{padding-top:22px!important;font-size:23px!important}}
/* Homepage authentication lives in the existing top menu. */
body.page-home #app .login-section[data-datpol-in-header=true]{display:none!important}
body.page-home #app [data-datpol-home-login=header]{grid-template-columns:minmax(0,1fr)!important}
#app .datpol-header-login-item{list-style:none;white-space:nowrap}
#app .datpol-header-login-item>a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:12px 14px;color:inherit;font:600 14px/1.35 system-ui,sans-serif;text-decoration:none;border-radius:7px}
#app .datpol-header-login-item>a:hover{background:#f0f4f6}
#app .datpol-header-login-item>a:focus-visible{outline:2px solid #344553;outline-offset:-2px}
@media(max-width:600px){#app .datpol-header-login-item>a{justify-content:flex-start;padding:12px 16px}}
#app [role=menubar]:has(>[data-datpol-header-login])>li :is(.p-menubar-item-link,.p-menubar-item-label){color:#253744!important;font-size:16px!important}
/* One header entry; two sign-in methods and a separate registration link. */
#app .login-section[data-datpol-login] .datpol-login-choice{grid-template-columns:repeat(2,minmax(0,1fr))!important}
#app .login-section[data-datpol-login]>a.datpol-register-link{display:block!important;margin:20px 0 0!important;padding:16px 0 0!important;border-top:1px solid #e2e8ed;color:#455b6b;font:600 13px/1.5 system-ui,sans-serif;text-align:center;text-decoration:none}
#app .login-section[data-datpol-login]>a.datpol-register-link:hover{text-decoration:underline}
#app .login-section[data-datpol-login]>a.datpol-register-link:focus-visible{outline:2px solid #344553;outline-offset:3px}
/* Header sign-in opens a native, keyboard-accessible modal choice. */
html body dialog.datpol-login-dialog{box-sizing:border-box!important;width:min(360px,calc(100vw - 32px))!important;max-width:calc(100vw - 32px)!important;max-height:calc(100dvh - 32px)!important;overflow:auto!important;padding:24px!important;margin:auto!important;border:1px solid #dce4e9!important;border-radius:16px!important;background:#fff!important;color:#253744!important;box-shadow:0 20px 70px #10233333!important;font:14px/1.5 system-ui,sans-serif!important}
html body dialog.datpol-login-dialog::backdrop{background:#10233377;backdrop-filter:blur(2px)}
html body dialog.datpol-login-dialog .datpol-login-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 8px;padding:0}
html body dialog.datpol-login-dialog h2{margin:0!important;padding:0!important;color:#253744!important;font:700 21px/1.3 system-ui,sans-serif!important}
html body dialog.datpol-login-dialog p{margin:0 0 20px!important;color:#5b6d79!important;font:400 14px/1.5 system-ui,sans-serif!important}
html body dialog.datpol-login-dialog button[data-login-close]{display:grid;place-items:center;min-width:34px;min-height:34px;margin:0;padding:0;border:1px solid #dce4e9;border-radius:8px;background:#fff;color:#455b6b;font:400 24px/1 system-ui,sans-serif;cursor:pointer;box-shadow:none}
html body dialog.datpol-login-dialog a.datpol-login-action{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;min-height:46px;margin:10px 0 0;padding:11px 14px;border:1px solid #344553;border-radius:9px;background:#344553;color:#fff;font:600 14px/1.4 system-ui,sans-serif;text-decoration:none;text-align:center}
html body dialog.datpol-login-dialog a.datpol-login-password{background:#fff;color:#344553;border-color:#cbd6dd}
html body dialog.datpol-login-dialog a.datpol-login-action:hover{filter:brightness(.95)}
html body dialog.datpol-login-dialog :is(a,button):focus-visible{outline:2px solid #344553;outline-offset:3px}
/* The original Chamilo form is rendered in a same-origin sandboxed frame. */
html body dialog.datpol-login-dialog [hidden]{display:none!important}
html body dialog.datpol-login-dialog :is(a,button).datpol-login-action{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;min-height:46px;margin:10px 0 0;padding:11px 14px;border:1px solid #344553;border-radius:9px;background:#344553;color:#fff;font:600 14px/1.4 system-ui,sans-serif;text-decoration:none;text-align:center;cursor:pointer}
html body dialog.datpol-login-dialog button.datpol-login-password{background:#fff;color:#344553;border-color:#cbd6dd}
html body dialog.datpol-login-dialog button.datpol-login-back{display:block;margin:0 0 18px;padding:5px 0;border:0;background:transparent;color:#455b6b;font:600 13px/1.4 system-ui,sans-serif;cursor:pointer;text-align:left;min-height:32px}
html body dialog.datpol-login-dialog iframe.datpol-login-native-frame{display:block;width:100%;height:340px;min-height:280px;max-width:100%;border:0;background:#fff;color-scheme:light}
html body dialog.datpol-login-dialog [data-login-loading]{font-size:13px!important;margin:8px 0!important}