* {
	margin:0px;
	padding:0px;
}
html, body
{
    height:100%;
    width:100%;
    background-color:#ffffff;
    color:#000000;
    font-weight:normal;
    font-family:"Segoe UI" , "Segoe" , "SegoeUI-Regular-final", Tahoma, Helvetica, Arial, sans-serif;
    min-width:500px;
    -ms-overflow-style:-ms-autohiding-scrollbar;
}

body
{
    font-size:0.9em;
}

#noScript { margin:16px; color:Black; }

:lang(en-GB){quotes:'\2018' '\2019' '\201C' '\201D';}
:lang(zh){font-family:微软雅黑;}

@-ms-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@-webkit-viewport { width: device-width;  }
@viewport { width: device-width; }

/* Theme layout styles */

#fullPage, #brandingWrapper
{
    width:100%;
    height:100%;
    background-color:inherit;
}
#brandingWrapper
{
    background-color:#4488dd;
}
#branding
{       
    /* A background image will be added to the #branding element at run-time once the illustration image is configured in the theme. 
       Recommended image dimensions: 1420x1200 pixels, JPG or PNG, 200 kB average, 500 kB maximum. */
    height:100%;
    margin-right:500px; margin-left:0px;
    background-color:inherit;
    background-repeat: no-repeat;
    background-size:cover;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
}
#contentWrapper
{
    position:relative;
    width:500px;    
    height:100%;
    overflow:auto;
    background-color:#ffffff; /* for IE7 */
    margin-left:-500px; margin-right:0px; 
}
#content
{
    min-height:100%;
    height: auto !important;
    margin:0 auto -55px auto;
    padding:0px 150px 0px 50px;
}
#header
{
    font-size:2em;
    font-weight:lighter;
    font-family:"Segoe UI Light" , "Segoe" , "SegoeUI-Light-final", Tahoma, Helvetica, Arial, sans-serif;
    padding-top: 90px;
    margin-bottom:60px;
    min-height:100px;
    overflow:hidden;
}
#header img
{
    /* Logo image recommended dimension: 60x60 (square) or 350X35 (elongated), 4 kB average, 10 kB maximum. Transparent PNG strongly recommended. */
    width:auto;
    height:auto;
}
#workArea, #header
{
    word-wrap:break-word;
    width:350px;
}
#workArea
{
    margin-bottom:90px;
}
#footerPlaceholder
{
    height:40px;
}
#footer
{
    height:40px;
    padding:10px 50px 0px 50px;
    position:relative;
    color:#666666;
    font-size:0.78em;
}
#footerLinks
{
    float:none;
    padding-top:10px;
}
#copyright {color:#696969;display:none;}
.pageLink { color:#000000; padding-left:16px; }

/* Common content styles */

.clear {clear:both;}
.float { float:left; } 
.floatReverse { float:right; } 
.indent { margin-left:16px; } 
.indentNonCollapsible { padding-left:16px; }
.hidden {display:none;}
.notHidden {display:inherit;}
.error { color:#c85305; }
.actionLink { margin-bottom:8px; display:block; }
a
{
    color:#2672ec;
    text-decoration:none;
    background-color:transparent;
}
ul { list-style-type: disc; }
h1,h2,h3,h4,h5,label { margin-bottom: 8px; }
.submitMargin { margin-top:38px; margin-bottom:30px; }
.topFieldMargin { margin-top:8px; }
.fieldMargin { margin-bottom:8px; }
.groupMargin { margin-bottom:30px; } 
.sectionMargin { margin-bottom:64px; }
.block { display: block; }
.autoWidth { width:auto; }
.fullWidth { width:342px; }
.fullWidthIndent { width:326px; }
input
{
    max-width:100%; 
    font-family:inherit;
    margin-bottom:8px;
}
input[type="radio"], input[type="checkbox"] {
    vertical-align:middle;
    margin-bottom: 0px;
}
span.submit, input[type="submit"]
{
    border:none;
    background-color:rgb(38, 114, 236);
    min-width:80px;
    width:auto;
    height:30px;
    padding:4px 20px 6px 20px;
    border-style:solid;
    border-width:1px;
    transition:background 0s;
    color:rgb(255, 255, 255);
    cursor:pointer;
    margin-bottom:8px;
    
    -ms-user-select:none;
    -moz-transition:background 0s;
    -webkit-transition:background 0s;
    -o-transition:background 0s;
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -khtml-user-select:none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select:none;
}
input[type="submit"]:hover,span.submit:hover
{
    background: rgb(212, 227, 251);
}
input.text{
    height:28px;
    padding:0px 3px 0px 3px ;
    border:solid 1px #BABABA;
}
input.text:focus
{
  border: 1px solid #6B6B6B;
}
select
{
    height:28px;
    min-width:60px;
    max-width:100%; 
    margin-bottom:8px;

    white-space:nowrap;
    overflow:hidden;
    box-shadow:none;
    padding:2px;
    font-family:inherit;
}
h1, .giantText
{
   font-size:2.0em; 
   font-weight:lighter;
}          
h2, .bigText
{
   font-size:1.33em;
   font-weight:lighter;
}
h3, .normalText
{
    font-size:1.0em;
    font-weight:normal;
}
h4, .smallText
{
    font-size:0.9em;
    font-weight:normal;
}
h5, .tinyText
{
    font-size:0.8em;
    font-weight:normal;
}
.hint
{
    color:#999999;
}
.emphasis
{
    font-weight:700;
    color:#2F2F2F;
} 
.smallIcon
{
    height:20px;
    padding-right:12px;
    vertical-align:middle;
}
.largeIcon
{
    height:48px;
    /* width:48px; */
    vertical-align:middle;
}
.largeTextNoWrap
{
    height:48px;
    display:table-cell; /* needed when in float*/
    vertical-align:middle;
    white-space:nowrap;
    font-size:1.2em;
}
.idp
{
    height:48px;
    clear:both;
    padding:8px;
    overflow:hidden;
}
.idp:hover 
{
    background-color:#cccccc;
}
.idpDescription
{
    width:80%;
}

/* Form factor: intermediate height layout. Reduce space of the header. */
@media only screen and (max-height: 820px) {
    #header {
        padding-top: 40px;
        min-height:0px;
        overflow: hidden;
    }

    #workArea
    {
        margin-bottom:60px; 
    }
}

/* Form factor: intermediate height layout. Reduce space of the header. */
@media only screen and (max-height: 500px) {
    #header {
        padding-top: 30px;
        margin-bottom: 30px;
    }
    #workArea{
        margin-bottom:40px; 
    }
}

/* Form factor: intermediate layout (WAB in non-snapped view falls in here) */
@media only screen and (max-width: 600px) {
    html, body {
        min-width: 260px;
    }

    #brandingWrapper {
        display: none;
    }

    #contentWrapper {
        float: none;
        width: 100%;
        margin: 0px auto;
    }

    #content, #footer, #header {
        width: 400px;
        padding-left: 0px;
        padding-right: 0px;
        margin-left: auto;
        margin-right: auto;
    }

    #workArea {
        width: 100%;
    }

    .fullWidth {
        width: 392px;
    }

    .fullWidthIndent {
        width: 376px;
    }
}

@media only screen and (max-width: 450px) {
    body {
        font-size: 0.8em;
    }

    #content, #footer {
        width:auto;
        margin-right:33px;
        margin-left:25px;
    }

    #header {
        width: auto;
    }

    span.submit, input[type="submit"] {
        font-size: 0.9em;
    }

    .fullWidth
    {
        width:100%;
        margin-left:auto;
        margin-right:auto;
    }

    .fullWidthIndent {
        width: 85%;
    }

    .idpDescription
    {
        width:70%;
    }
}

/* Form factor: snapped WAB (for WAB to work in snapped view, the content wrapper width has to be set to 260px) */
@media only screen and (max-width:280px)
{
    #contentWrapper
    {
        width:260px;
    }
    .idpDescription
    {
        max-width:160px;
        min-width:100px;
    }
}
/* ==========================================================================
   Modernización visual (se aplica sobre los estilos base de arriba)
   Estructura, ids y comportamiento responsive de AD FS sin cambios.
   ========================================================================== */

:root {
    --accent: #1b5faa;
    --accent-hover: #164d8a;
    --accent-active: #123f72;
    --text: #1f2933;
    --text-muted: #5b6770;
    --border: #c9d1d9;
    --focus-ring: rgba(27, 95, 170, 0.28);
}

html, body {
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}
body { font-size: 0.95em; line-height: 1.45; }

/* Foto de fondo: ligero velo para que el panel destaque */
#brandingWrapper { background-color: #2b3a4a; }
#branding { position: relative; }
#branding::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.12) 100%);
    pointer-events: none;
}

/* Panel */
#contentWrapper { box-shadow: -8px 0 28px rgba(15, 30, 45, 0.18); }

#header {
    font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    font-weight: 600;
    font-size: 1.6em;
    letter-spacing: -0.01em;
    color: var(--text);
}
#header img { max-width: 100%; }

h1, .giantText { font-weight: 600; letter-spacing: -0.01em; }
h2, .bigText   { font-weight: 600; }

label { font-weight: 600; color: var(--text); display: inline-block; }

/* Campos */
input.text, input[type="text"], input[type="password"], input[type="email"] {
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #fff;
    color: var(--text);
    font-size: 1em;
    box-sizing: border-box;
    transition: border-color .15s ease, box-shadow .15s ease;
}
input.text:hover { border-color: #9aa7b3; }
input.text:focus, input[type="text"]:focus, input[type="password"]:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--focus-ring);
    outline: none;
}
input.fullWidth, input.text.fullWidth { width: 100%; max-width: 100%; }

/* Botón principal */
span.submit, input[type="submit"] {
    display: block;
    width: 100%;
    height: 38px;
    padding: 0 20px;
    line-height: 36px;
    border: 1px solid var(--accent);
    border-radius: 6px;
    background-color: var(--accent);
    color: #fff;
    font-size: 1em;
    font-weight: 600;
    text-align: center;
    box-sizing: border-box;
    transition: background-color .15s ease, box-shadow .15s ease, transform .05s ease;
    -webkit-transition: background-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
input[type="submit"]:hover, span.submit:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}
input[type="submit"]:active, span.submit:active {
    background: var(--accent-active);
    transform: translateY(1px);
}
input[type="submit"]:focus-visible, span.submit:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--focus-ring);
}

/* Enlaces */
a { color: var(--accent); transition: color .15s ease; }
a:hover, a:focus { color: var(--accent-hover); text-decoration: underline; }

/* Errores: legibles y con acento */
.error, #errorText {
    color: #b3261e;
}
#errorText:not(:empty) {
    padding: 8px 12px;
    margin-bottom: 12px;
    background: #fdecea;
    border-left: 3px solid #b3261e;
    border-radius: 4px;
}

/* Texto descriptivo (el de SignInPageDescriptionText) */
#introduction, #loginMessage, #workArea p { color: var(--text-muted); }
#workArea strong, #workArea u { color: var(--text); }

/* Pie */
#footer { color: var(--text-muted); }
.pageLink { color: var(--accent); }

/* Lista de proveedores de identidad */
.idp { border-radius: 6px; transition: background-color .15s ease; }
.idp:hover { background-color: #eef2f6; }

/* Panel algo más ancho y con más aire en escritorio; en móvil se respetan las reglas originales */
@media only screen and (min-width: 601px) {
    #brandingWrapper, #branding { }
    #branding { margin-right: 560px; }
    #contentWrapper { width: 560px; margin-left: -560px; }
    #content { padding: 0 80px 0 80px; }
    #workArea, #header { width: 400px; }
    .fullWidth { width: 100%; }
}

/* Logo centrado, más pequeño y en la parte alta */
#header {
    text-align: center;
    padding-top: 36px;
    margin-bottom: 24px;
    min-height: 0;
}
#header img { display: block; margin: 0 auto; width: 170px; height: auto; max-width: 100%; }

/* Tarjeta de acceso */
#loginArea {
    padding: 28px 28px 14px 28px;
    background: #fff;
    border: 1px solid #e3e8ed;
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(15, 30, 45, 0.08);
    box-sizing: border-box;
    margin-bottom: 28px;
}

/* Título "Iniciar sesión" con barra de acento y frase de contexto */
#loginMessage {
    text-align: center;
    font-size: 1.6em;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--text);
    margin-bottom: 22px;
}
#loginMessage::before {
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    margin: 0 auto 16px auto;
    border-radius: 2px;
    background: #f2b21b;
}
#loginMessage::after {
    content: "Accede con tu cuenta de Comillas";
    display: block;
    margin-top: 8px;
    font-size: 0.55em;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--text-muted);
}

/* Enlaces de recuperación ("Pinche aquí") con aspecto de botón secundario */
#introduction a[href*="miscredenciales"] {
    display: inline-block;
    margin: 2px 0 2px 6px;
    padding: 2px 10px;
    font-size: 0.9em;
    border: 1px solid var(--accent);
    border-radius: 6px;
    background: transparent;
    color: var(--accent);
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
#introduction a[href*="miscredenciales"]:hover,
#introduction a[href*="miscredenciales"]:focus {
    background: var(--accent);
    color: #fff;
    text-decoration: none;
}
#introduction a[href*="miscredenciales"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--focus-ring);
}

/* Enlaces de ayuda ("Guías y Manuales", "Condiciones de uso") como botones neutros */
#introduction a:not([href*="miscredenciales"]) {
    display: inline-block;
    margin: 3px 6px 3px 0;
    padding: 3px 10px;
    font-size: 0.9em;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #f5f7f9;
    color: var(--text);
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
#introduction a:not([href*="miscredenciales"]):hover,
#introduction a:not([href*="miscredenciales"]):focus {
    background: #e6ebf0;
    border-color: #9aa7b3;
    color: var(--text);
    text-decoration: none;
}
#introduction a:not([href*="miscredenciales"]):focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--focus-ring);
}

/* Sin texto de ejemplo dentro de los campos */
#userNameInput::placeholder, #passwordInput::placeholder { color: transparent; opacity: 0; }
#userNameInput::-ms-input-placeholder, #passwordInput::-ms-input-placeholder { color: transparent; }

/* ===== Compactación vertical: que todo entre sin scroll ===== */
#header { padding-top: 10px; margin-bottom: 8px; }
#header img { width: 130px; }
#workArea { margin-bottom: 0; }
#content { min-height: 0 !important; margin-bottom: 0; }
#footerPlaceholder { height: 0; }
#footer { height: 0; padding: 0 50px; }
#footerLinks { padding-top: 0; }

#loginArea { padding: 16px 24px 14px 24px; margin-bottom: 10px; }
#loginMessage { font-size: 1.35em; margin-bottom: 12px; }
#loginMessage::before { width: 36px; height: 3px; margin-bottom: 10px; }
#loginMessage::after { margin-top: 4px; }
#loginArea label { margin-bottom: 4px; }
#loginArea input.text { height: 36px; margin-bottom: 8px; }
#loginArea .submitMargin { margin-top: 14px; margin-bottom: 12px; }
#kmsiArea { margin: 2px 0 0 0; font-size: 0.9em; }
span.submit, input[type="submit"] { height: 36px; line-height: 34px; }

/* Texto de ayuda más pequeño y pegado a la tarjeta */
#introduction { font-size: 0.82em; line-height: 1.3; margin-bottom: 0; }
/* Bloque centrado en el panel, con el texto alineado a la izquierda */
#introduction p { display: table; margin: 0 auto; text-align: left; }
#introduction p > br:first-child { display: none; }
#introduction a[href*="miscredenciales"] { padding: 1px 8px; margin: 1px 0 1px 4px; font-size: 0.95em; }
#introduction a:not([href*="miscredenciales"]) { padding: 2px 8px; margin: 2px 4px 2px 0; font-size: 0.95em; }

/* Pantallas con altura de sobra: logo algo más grande y con más aire */
@media only screen and (min-width: 601px) and (min-height: 760px) {
    #header { padding-top: 28px; margin-bottom: 16px; }
    #header img { width: 165px; }
}

/* ===== Ajustes según la estructura real de AD FS ===== */
/* Etiquetas de los campos (AD FS las trae ocultas): se muestran, ya que el texto de ejemplo está oculto */
#userNameInputLabel.hidden, #passwordInputLabel.hidden { display: block; }

/* Enlace de método alternativo (p. ej. "Autenticación multifactor Azure") */
#authOptions { text-align: center; }
#authOptions .actionLink { display: inline-block; margin: 0 0 4px 0; font-size: 0.9em; }
#authOptionLinks { margin-bottom: 0; }

/* Texto de ayuda dentro de la tarjeta: separado del formulario y sin partir los botones */
#introduction { margin-top: 8px; padding-top: 6px; border-top: 1px solid #e3e8ed; }
#introduction p { display: block; width: max-content; max-width: 100%; margin: 0 auto; text-align: left; }
#introduction a { white-space: nowrap; }
#introduction p > br:first-child { display: none; }

/* Accesibilidad: respeta quien pide menos movimiento */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}