/* Root / Reset */


:root {
    --mdc-text-button-label-text-color: #f7f7f7;
    --mdc-shape-small: 4px;
    --mdc-theme-error: #d93d33;
    /*--cas-theme-primary: #044561;*/
	--cas-theme-primary: #1E3A8A;
    --cas-theme-primary-bg: rgba(21, 62, 80, 0.2);
    --cas-theme-button-bg: #26418f;
    /*--cas-theme-primary-light: #006d85;*/
	--cas-theme-primary-light: rgb(37, 99, 235); /*#2563eb*/
    --cas-theme-secondary: #018077;
    --cas-theme-success: #74C163;
    --cas-theme-danger: #d01c31;
    --cas-theme-danger-bg: #f8d7da;
    --cas-theme-warning: #e6a210;
    --cas-theme-border-light: 1px solid rgba(0, 0, 0, .2);
    --mdc-theme-primary: var(--cas-theme-primary, #153e50);
	/*--mdc-theme-on-primary: var(--cas-theme-primary, #153e50);*/
	--mdc-theme-surface-r: 235;
	--mdc-theme-surface-g: 227;
	--mdc-theme-surface-b: 209;
	--mdc-theme-surface: rgb(var(--mdc-theme-surface-r), var(--mdc-theme-surface-g), var(--mdc-theme-surface-b));
	/*--mdc-theme-surface-on-dark: #ffffff;
	--mdc-theme-text-primary-on-dark: #ffffff;
    --mdc-theme-text-secondary-on-dark: #b3b3b3;
    --mdc-theme-text-hint-on-dark: #8a8a8a;
    --mdc-theme-text-disabled-on-dark: #8a8a8a;
    --mdc-theme-text-icon-on-dark: #ffffff;*/
	--mdc-protected-button-label-text-size: 0.85rem;
	--mdc-protected-button-label-text-font: inherit;
	--mdc-protected-button-label-text-weight: 400;
	--mdc-typography-button-font-weight: 400;
	--mdc-typography-button-font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
	--mdc-typography-font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
	--mdc-typography-body2-font-size: 0.70rem;
	--mdc-typography-subtitle1-font-size: 0.90rem;
	/*--mdc-typography-button-font-size: 1.8rem;*/
}

body {
    display: flex;
    height: 100vh;
    margin: 0;
    padding: 0;
    flex-direction: column;
    justify-content: space-between;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    background: #EFEFEF;
	background-image: url(/cas/images/fondo_des-7f5200b9277cdf44f7938abcff5ac2f7.jpg);											
    background-repeat: no-repeat;
    background-size: cover;			
}

a {
    color: #153e50;
    color: var(--cas-theme-primary, #153e50);
	text-decoration: none; 			/* SANDRA */
}

a:visited, a:active {
	color: #006d85;
    color: var(--cas-theme-primary-light);
}	

a:hover {
    color: #006d85;
    color: var(--cas-theme-primary-light);
	text-decoration: underline; /* SANDRA */
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
}

aside, section, main {
    display: block;
}

/* Material */

.mdc-drawer {
    top: 56px;
}

.mdc-drawer-app-content {
    flex: auto;
    overflow: auto;
    position: relative;
}

.main-content {
    display: flex;
}

.mdc-top-app-bar {
    z-index: 7;
}

div#content {
    box-shadow:1px 1px 3px #888;
}
/* widgets */

.notifications-count {
    position: absolute;
    top: 8px;
    right: 4px;
    background-color: var(--mdc-theme-error, #b00020);
    color: #fff;
    border-radius: 50%;
    padding: 1px 3px;
    font: 11px Verdana;
}

.cas-brand {
    height: 48px;
    width: auto;
}

header>nav .cas-brand path.cls-1 {
    fill: white;
}

header>nav .cas-brand .cas-logo {
    height: 100%;
}

.caps-warn {
    display: none;
}

.caps-on DIV SPAN {
    display: block;
}

.caps-on span:before {
    vertical-align: sub;
    content: "\F0027";
    font-size: 24px;
    font: normal normal normal 24px/1 "Material Design Icons";
}

.login-section {
    border-right: 1px solid rgba(0, 0, 0, .2);
    border-right: var(--cas-theme-border-light, 1px solid rgba(0, 0, 0, .2));
    /*padding: 2rem 2.5rem;*/
	/*padding: 1.5rem 2rem;*/
	padding: 1rem 2rem;
    flex: 1 1 auto;
    /* IE flex fix */
}

.login-section:last-child {
    border: none;
}

@media screen and (max-width: 767.99px) {
    .login-section {
        border-right: none;
        border-bottom: 1px solid rgba(0, 0, 0, .2);
        border-bottom: var(--cas-theme-border-light, 1px solid rgba(0, 0, 0, .2));
        max-width: none;
        padding: 0 1.5rem;
    }
}

.noborder {
    border: 0 none;
}

.close {
    font-size: 1.5rem;
    /*font-weight: 700;*/
	font-weight: 600;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    text-transform: none;
    text-decoration: none;
}

button.close {
    background-color: transparent;
    border: 0;
    -webkit-appearance: none;
}

.banner {
    border: 1px solid rgba(0, 0, 0, .2);
    border: var(--cas-theme-border-light, 1px solid rgba(0, 0, 0, .2));
    position: relative;
    padding-left: 10px;
    box-shadow:1px 1px 3px #888;
    border-radius:.5em;
    padding-top: .5em;
    padding-bottom: .5em;
}

.banner>span {
    vertical-align: top;
}

.banner .banner-message {
    margin: 0.375rem 0;
}

.banner .banner-heading:first-child {
    margin-top: 0;
}

.banner .banner-message:first-child {
    margin-top: 0;
}

.banner .banner-message:last-child {
    margin-bottom: 0;
}

.banner-primary {
    border-color: #153e50;
    border-color: var(--cas-theme-primary, #153e50);
}

.banner-primary .mdi {
    color: #153e50;
    color: var(--cas-theme-primary, #153e50);
}

.banner-danger h1:before,
.banner-danger h2:before,
.banner-danger h3:before,
.banner-danger h4:before,
.banner-danger h5:before {
    content: "\F0027";
    font-size: 24px;
    font: normal normal normal 24px/1 "Material Design Icons";
}

.banner-danger {
    border-color: #b00020;
    border-color: var(--cas-theme-danger, #b00020);
    color: var(--cas-theme-danger, #58151c);
    background-color: var(--cas-theme-danger-bg, #f8d7da);
}

.banner-danger .mdi {
    color: #b00020;
    color: var(--cas-theme-danger, #b00020);
}

.banner-warning {
    border-color: #e6a210;
    border-color: var(--cas-theme-warning, #e6a210);
    color: #e6a210;
    color: var(--cas-theme-warning, #e6a210);
}

.banner-warning .mdi {
    color: #e6a210;
    color: var(--cas-theme-warning, #e6a210);
}

.banner-success h1:before,
.banner-success h2:before,
.banner-success h3:before,
.banner-success h4:before,
.banner-success h5:before {
    content: "\F012D";
    font-size: 24px;
    font: normal normal normal 24px/1 "Material Design Icons";
}

.banner-success {
    border-color: var(--cas-theme-success);
    color: var(--cas-theme-primary, #153e50);
    background-color: #adf096;
}

.banner-dismissible {
    padding-right: 4rem;
}

.banner-dismissible .close {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.05rem 0.05rem;
    color: inherit;
}

.login-provider-item {
    list-style: none;
}

.login-provider-item .mdc-button .mdi {
    margin-right: 0.375rem;
}

@media screen and (max-width: 767.99px) {
    .logout-banner {
        width: 100%;
    }
}

.cas-footer {
    /*background-color: var(--mdc-theme-primary, #6200ee);*/
    color: whitesmoke;
}

.cas-footer a {
    color: deepskyblue;
}

.cas-footer>* {
    margin-right: 0.25rem;
    display: inline-block;
}

.cas-footer>*:last-child {
    margin: 0;
}

.cas-notification-dialog .mdc-dialog__content>.cas-notification-message:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, .2);
    border-bottom: var(--cas-theme-border-light, 1px solid rgba(0, 0, 0, .2));
}

.mdc-dialog__title::before {
    display: none;
}

.mdi {
    content: "";
}

.mdi:before {
    font-size: 24px;
}

/* custom components */

.custom-select {
    display: inline-block;
    min-width: 80%;
    height: 56px;
    padding: .375rem 1.75rem .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.87);
    vertical-align: middle;
    background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    -webkit-appearance: none;
}

/* utilities */

.bg-primary {
    background-color: rgba(21, 62, 80, 0.2);
    background-color: var(--cas-theme-primary-bg, rgba(21, 62, 80, 0.2));
}

.border-bottom {
    border-color: #153e50;
    border-bottom: 1px solid var(--cas-theme-primary, #153e50);
}

.strong {
    font-weight: bold;
}

.text-warning {
    color: #e6a210;
    color: var(--cas-theme-warning, #e6a210);
}

.text-danger {
    color: #b00020;
    color: var(--cas-theme-danger, #b00020);
}

.text-secondary {
    color: var(--cas-theme-secondary);
}
.text-success {
    color: var(--cas-theme-success);
}

.progress-bar-danger .mdc-linear-progress__bar-inner {
    border-color: #b00020;
    border-color: var(--cas-theme-danger, #b00020);
}

.progress-bar-warning .mdc-linear-progress__bar-inner {
    border-color: #e6a210;
    border-color: var(--cas-theme-warning, #e6a210);
}

.progress-bar-success .mdc-linear-progress__bar-inner {
    border-color: var(--cas-theme-success);
}

.word-break-all {
    word-break: break-all;
}

.mdc-text-field {
    width: 100%;
}

.mdc-text-field>.mdc-text-field__input, .mdc-text-field:not(.mdc-text-field--disabled):not(.mdc-text-field--outlined):not(.mdc-text-field--textarea)>.mdc-text-field__input {
    border-color: #153e50;
    border: 1px solid var(--cas-theme-primary, #153e50);
    /*border-radius: 4px;*/
	border-radius: 5px 5px 5px 5px;
}

.mdc-input-group .mdc-input-group-field .mdc-notched-outline__trailing {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.mdc-input-group .mdc-input-group-append {
    order: 2;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.mdc-input-group .mdc-input-group-prepend, .mdc-input-group .mdc-input-group-append {
    height: 56px;
}

.mdc-input-group .mdc-input-group-prepend {
    order: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.mdc-input-group .mdc-input-group-field.mdc-input-group-field-prepend .mdc-text-field>.mdc-text-field__input {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.mdc-input-group .mdc-input-group-field.mdc-input-group-field-append .mdc-text-field>.mdc-text-field__input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.text-danger, .mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__icon.text-danger, .mdc-text-field:not(.mdc-text-field--disabled)+.mdc-text-field-helper-line .mdc-text-field-helper-text.text-danger {
    color: #b00020;
    color: var(--cas-theme-danger);
}

.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label {
    color: #153e50;
    color: var(--cas-theme-primary, #153e50);
}

.mdc-button--outline:not(:disabled, .reveal-password) {
    background-color: var(--cas-theme-secondary, #018077);
    /*border-radius: 12px 4px;*/
	border-radius: 5px 5px 5px 5px;
}

.mdc-button--raised:not(:disabled, .reveal-password) {
    margin-right: 4px;
    /*border-radius: 12px 4px;*/
	/*border-radius: 5px 5px 5px 5px;*/
	border-radius: .25rem;
    background-color: var(--cas-theme-primary, #153E50);
	/*background-color: var(--cas-theme-primary-light, #2563eb);*/
	margin-left: 2px;
}

.list-unstyled {
    padding-left: 0;
    list-style: none;
}

.text-center {
    text-align: center;
}

.pad-0 {
    padding-right: 0;
    padding-left: 0;
}

.w-66 {
    width: 66%;
}

.w-33 {
    width: 33%;
}

.w-25 {
    width: 25%;
}

.w-50 {
    width: 50%;
}

.w-75 {
    width: 75%;
}

.w-100 {
    width: 100%;
}

.w-auto {
    width: auto;
}

.h-25 {
    height: 25%;
}

.h-50 {
    height: 50%;
}

.h-75 {
    height: 75%;
}

.h-100 {
    height: 100%;
}

.h-auto {
    height: auto;
}

.mw-100 {
    max-width: 100% !important;
}

.mh-100 {
    max-height: 100%;
}

.min-vw-100 {
    min-width: 100vw;
}

.min-vh-100 {
    min-height: 100vh;
}

.vw-100 {
    width: 100vw;
}

.vh-100 {
    height: 100vh;
}

.mw-50 {
    max-width: 50%;
}

.mw-25 {
    max-width: 25%;
}

.border-rounded {
    border-color: #153e50;
    border: 1px solid var(--cas-theme-primary, #153e50);
    border-radius: 4px;
}

.border-bottom {
    border-color: #153e50;
    border-bottom: 1px solid var(--cas-theme-primary, #153e50);
}

@media all and (min-width: 768px) {
    .w-md-50 {
        width: 50%;
    }
    .w-md-66 {
        width: 66%;
    }
}

@media all and (min-width: 992px) {
    .w-lg-50 {
        width: 50%;
    }
    .w-lg-66 {
        width: 66%;
    }
}

@media all and (max-width: 767.99px) {
    .w-md-50 {
        width: 100%;
    }
    .w-md-66 {
        width: 100%;
    }
}

@media all and (max-width: 991.99px) {
    .w-lg-50 {
        width: 100%;
    }
    .w-lg-66 {
        width: 100%;
    }
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

*, ::after, ::before {
    box-sizing: border-box;
}

.text-justify {
    text-align: justify;
}

#duo_iframe {
    width: 100%;
    min-width: 304px;
    height: 330px;
    border: none;
    padding: 0;
    margin: 0;
}

.dataTables_wrapper {
    margin-left: 5px;
    margin-top: 5px;
    margin-right: 5px;
}

#serviceui {
    /*background-color: #17a3b844;*/
	--tw-bg-opacity: .70;
	background-color: rgba(251,191,36,var(--tw-bg-opacity));
	/*background-color: rgba(56,130,176,var(--tw-bg-opacity));*/
    border-radius: 6px 6px 6px 6px;
	align: center;
	margin-top: .2rem;
}

#heroimg {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* IE flex fix */

#main-content {
    margin-right: 10px;
    margin-left: 10px;
}

/* oddly, the auto right and left margins caused the login form to not be centered in IE */

@media all and (min-width: 768px) {
    .login-section {
        flex: 1 1 500px;
        /* according to flexbugs, flex-basis should be explicitly set for IE */
        /* https://github.com/philipwalton/flexbugs#flexbug-4 */
    }
}

/* flex-basis: auto works in IE with the column view,
     but a specific value needs to be set for row view
   */

/* fix for not showing password reveal icon on MSEdge and MSIE */
.pwd::-ms-reveal,
.pwd::-ms-clear {
    display: none;
}

@media (min-width: 1400px) {
    .container-xxl 2
        max-width: 90%;
    }
	/*.container-lg {
        max-width: 28%;
	}*/
}
/* SANDRA */
.max-w-md {
    max-width: 28rem;
}
.mdc-card {
	--tw-bg-opacity:0.90; 
	/*background-color: rgba( var(--mdc-theme-surface-r, 235), var(--mdc-theme-surface-g, 227), var(--mdc-theme-surface-b, 209),var(--tw-bg-opacity,0.90));*/
	background-color: rgba( var(--mdc-theme-surface-r, 255), var(--mdc-theme-surface-g, 255), var(--mdc-theme-surface-b, 255),var(--tw-bg-opacity,0.90));
}		   
.p-3v7 {
  padding: .60rem;
}
.rounded {
  border-radius: .25rem;
}																																			  
.bg-yellow-400 {
  --tw-bg-opacity: .90;
  background-color: rgba(251,191,36,var(--tw-bg-opacity));
  border-radius: 10px 10px 10px 10px;
}  
.bg-blue-400 {
  --tw-bg-opacity: .90;
  background-color: rgba(96,165,250,var(--tw-bg-opacity));
  border-radius: 10px 10px 10px 10px;
}
.bg-red-400 {
  --tw-bg-opacity: .90;
  background-color: rgba(248,113,113,var(--tw-bg-opacity));
  border-radius: 10px 10px 10px 10px;
}
.bg-green-400{
  --tw-bg-opacity: .90;
  background-color:rgba(52,211,153,var(--tw-bg-opacity));
  border-radius: 10px 10px 10px 10px;
}
.w-full {
  width: 100%;
}
.text-white {
  --tw-text-opacity:1;
  color:rgba(255,255,255,var(--tw-text-opacity))
} 
.devenv {
  display: block !important;
}
.hidden {
  display:none
}
.w-64v7 {
  width: 16rem;
}
.w-20v7 {
  width: 8rem;
}
.w-32v7 {
  width: 12rem;
}
.w-10v7 {
  width: 2rem;
}
.mr-6v7 {
  margin-right: 1.5rem;
}
.mr-3v7 {
  margin-right: .75rem;
}
.mb-2v7 {
  margin-bottom: .1rem;
}
.mb-4v7 {
  margin-bottom: .6rem;
}		
.mt-5v7 {
  margin-top: .5rem;
}		
.mt-4v7 {
  margin-top: .4rem;
}		
.mt-3v7 {
  margin-top: .75rem;
}
.h-12 {
  height: 3rem;
}
.ml-auto {
  margin-left: auto;
}
.centrado {
    align: center !important;
}
img, video {
  max-width: 100%;
  height: auto;
}
audio, canvas, embed, iframe, img, object, svg, video {
  display: block;
  vertical-align: middle;
}
img {
  border-style: none;
}
.justify-center {
  justify-content: center;
}
.flex-nowrapv7 {
  flex-wrap: nowrap;
}
.flex-rowv7 {
  flex-direction: row;
}
.flex {
  display: flex;
}
h1,
h2,
h3,
h4,
h5{
    font-size: 1.2em;
	font-weight: 600;
}
p {
    font-size: 0.9em;
}

.text-left {
    text-align: left;
}
.divide-y-2>:not([hidden])~:not([hidden]) {
  --tw-divide-y-reverse:0;
  border-top-width:calc(2px*(1 - var(--tw-divide-y-reverse)));
  border-bottom-width:calc(2px*var(--tw-divide-y-reverse))
}

.divide-black>:not([hidden])~:not([hidden]) {
  --tw-divide-opacity:1;
  border-color:rgba(0,0,0,var(--tw-divide-opacity))
}
.items-center {
  align-items: center;
}

@media (min-width: 1400px) {
  .container-xxl {
	max-width: 1024px;
  }
}

@media (min-width: 1400px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl {
    /*max-width: 1024px;*/
	max-width: 550px;
  }
}
@media (min-width: 1200px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl {
    /*max-width: 840px;*/
	max-width: 550px;
  }
}

@media (min-width: 992px) {
  /*.container, .container-lg, .container-md, .container-sm {*/
  .container, .container-lg, .container-md, .container-sm, .container-xl {
    /*max-width: 960px;*/
	max-width: 550px;
  }
}

@media (min-width:640px) {
  .container {
    /*max-width:640px*/
	max-width: 550px;
  }
}
@media (min-width:768px) {
  .container {
    /*max-width:768px*/
	max-width: 550px;
  }
}
@media (min-width:1024px) {
  .container {
    /*max-width:1024px*/
	max-width: 550px;
  }
}
@media (min-width:1280px) {
  .container {
    /*max-width:1280px*/
	max-width: 550px;
  }
}
@media (min-width:1536px) {
  .container {
    /*max-width:1536px*/
	max-width: 550px;
  }
}

/*.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
  width: fit-content;
}*/
.container-xxl {
	/*max-width: 550px;*/
	width: fit-content;
}
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl {
  max-width: 550px;
  /*width: fit-content;*/
}

@media (prefers-color-scheme:dark) {
  .dark\:bg-gray-900 {
    --tw-bg-opacity:1;
    background-color:rgba(17,24,39,var(--tw-bg-opacity))
  }
  .dark\:bg-red-600 {
    --tw-bg-opacity:1;
    background-color:rgba(220,38,38,var(--tw-bg-opacity))
  }
  .dark\:bg-yellow-600 {
    --tw-bg-opacity:1;
    background-color:rgba(217,119,6,var(--tw-bg-opacity))
  }
  .dark\:bg-green-600 {
    --tw-bg-opacity:1;
    background-color:rgba(5,150,105,var(--tw-bg-opacity))
  }
  .dark\:bg-blue-600 {
    --tw-bg-opacity:1;
    background-color:rgba(37,99,235,var(--tw-bg-opacity))
  }
  .dark\:hover\:bg-gray-700:hover {
    --tw-bg-opacity:1;
    background-color:rgba(55,65,81,var(--tw-bg-opacity))
  }
  .dark\:mdc-card {
    --tw-bg-opacity:0.75; 
    background-color:rgba(17,24,39,var(--tw-bg-opacity))
  }
  /*.dark\:hover\:mdc-card:hover {
    --tw-bg-opacity:0.90; 
    background-color:rgba(0,0,0,var(--tw-bg-opacity))
  }*/
}
@media (prefers-color-scheme:dark) {
  .dark\:text-white {
    --tw-text-opacity:1;
    color:rgba(255,255,255,var(--tw-text-opacity))
  }
  .dark\:text-gray-400 {
    --tw-text-opacity:1;
    color:rgba(156,163,175,var(--tw-text-opacity))
  }
  .dark\:text-blue-400 {
    --tw-text-opacity:1;
    color:rgba(96,165,250,var(--tw-text-opacity))
  }
}
@media (prefers-color-scheme: dark) {
    .dark\:hidden {
        display: none;
    }

    .dark\:block {
        display: block;
    }

    .dark\:logo-white {
        filter: brightness(20);
    }
}
@media (prefers-color-scheme:dark) {
  .dark\:divide-gray-400>:not([hidden])~:not([hidden]) {
    --tw-divide-opacity:1;
    border-color:rgba(156,163,175,var(--tw-divide-opacity))
  }
}

/* Cuando el navegador rellena los campos de entrada, pone colores por defecto. Voy a cambiarlo al tema de fondo para que no se note mucho la diferencia */
input:-webkit-autofill {
	--tw-bg-opacity: .85; 
    -webkit-box-shadow: 0 0 0 1000px rgba(var(--mdc-theme-surface-r), var(--mdc-theme-surface-g), var(--mdc-theme-surface-b),var(--tw-bg-opacity,0.90)) inset !important;
    -webkit-text-fill-color: black !important;
} /* Firefox */

input:-moz-autofill {
	--tw-bg-opacity: .85; 
    box-shadow: 0 0 0 1000px rgba(var(--mdc-theme-surface-r), var(--mdc-theme-surface-g), var(--mdc-theme-surface-b),var(--tw-bg-opacity,0.90)) inset !important;
    -moz-text-fill-color: black !important;
}

input:-ms-autofill {
	--tw-bg-opacity: .85; 
    box-shadow: 0 0 0 1000px rgba(var(--mdc-theme-surface-r), var(--mdc-theme-surface-g), var(--mdc-theme-surface-b),var(--tw-bg-opacity,0.90)) inset !important;
    -ms-text-fill-color: black !important;
}

.mdc-button:hover {
  background-color: var(--cas-theme-primary-light, #2563eb);
}
.mdc-typography {
	font-size: 1rem;
}

small {
  font-size: 90%;
}
html {
  line-height: 1.45;
}

.my-4v7 {
  margin-top: 1.0rem !important;
  margin-bottom: 1.0rem !important;
}
.my-2 {
  margin-top: 0rem !important;
  margin-bottom: 0rem !important;
}
/* === Forzar la lista a comportarse como fila (no columna) === */
#loginProviders ul.list-unstyled.d-flex {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.1rem;
    padding: 0;
    /*margin-top: 0.2rem;*/
	margin: 0;
}

/* === Asegurar que cada <li> actúe como contenedor centrado === */
#loginProviders ul.list-unstyled.d-flex li.login-provider-item {
    display: flex !important;
	flex-direction: row !important;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0;
}

/* === Estilo base para botones personalizados (ClavePRE y MareNostrum) === */
#ClavePRE, 
#MareNostrumTestSir2 {
    all: unset;
    display: flex;
	flex-direction: row !important;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(4px);
	border-width: 0px; 
	border-color: #9ca3af;
    padding: 0.5rem;
    margin-top: 1rem;
	border-radius: 0.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    width: 200px;
	height: auto;
	min-height: 100px;
    max-width: 100%;
    text-align: center;
    transition: background-color 0.3s ease;
	box-sizing: border-box;
}

/* === Hover === */
#ClavePRE:hover, 
#MareNostrumTestSir2:hover
{
    background-color: #d1d5db; /* gray-300 */
}
/* === Modo oscuro === */
@media (prefers-color-scheme: dark) {
    #ClavePRE,
	#MareNostrumTestSir2
	{
        background-color: #1f2937; /* gray-900 */
        color: #9ca3af;
    }
    #ClavePRE:hover,
	#MareNostrumTestSir2:hover
	{
        background-color: #374151; /* gray-700 */
    }
}

/* === Oculta el texto generado por CAS === */
#ClavePRE .mdc-button__label, 
#MareNostrumTestSir2 .mdc-button__label
{
    display: none !important;
}

/* === Imagen y texto para ClavePRE === */
#ClavePRE::before 
{
    content: '';
    display: block;
    background-image: url('/cas/themes/upctcas7/images/clave-0365058cbd57a612ff826f0638dd04e3.svg');
	background-size: 70%; 
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 48px;
	margin-bottom: 0rem;
}
@media (prefers-color-scheme: dark) {
    #ClavePRE::before {
        background-image: url('/cas/themes/upctcas7/images/clave_w-ef4a52e50a5e82fe2b1b3e87910643bc.svg');
    }
}

#ClavePRE::after {
    content: 'Acceso con Cl@ve';
    font-size: 0.9rem;
    color: inherit;
    text-align: center;
}
/* === Imagen y texto para MareNostrumTestSir2 === */
#MareNostrumTestSir2::before {
    content: '';
    display: block;
    background-image: url('/cas/themes/upctcas7/images/cmn-20398ec35adbe948a176ae8962ae2960.svg');
	background-size: 70%; 
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 48px;
	margin-bottom: 0rem;
}
@media (prefers-color-scheme: dark) {
    #MareNostrumTestSir2::before {
        background-image: url('/cas/themes/upctcas7/images/cmn_w-1a32954f65bf0d0f55e7e274a4604021.svg');
    }
}
#MareNostrumTestSir2::after {
    content: 'PDI, PAS y ALU de la UM';
    font-size: 0.9rem;
    color: inherit;
    text-align: center;
}

@media (max-width: 768px) {
  
	/* Forzar la lista a comportarse como fila (no columna) */
	#loginProviders ul.list-unstyled.d-flex {
		display: flex !important;
		flex-direction: row !important;
		justify-content: center;
		flex-wrap: wrap;
		gap: 0.1rem;
		padding: 2px !important;
		margin: 0;
	}

	/* Asegurar que cada <li> actúe como contenedor centrado */
	#loginProviders ul.list-unstyled.d-flex li.login-provider-item {
		display: flex !important;
		flex-direction: row !important;
		justify-content: center;
		align-items: center;
		padding: 0 !important;
		margin: 0;
	}
    .login-section {
        padding: 0.8rem 1rem;
    }
	.loginProviders {
		padding: 0rem;
	}
	#login-form-controls button.mdc-button--raised {
		padding: 2px;
	}
	#ClavePRE,
    #MareNostrumTestSir2 {
		width: 140px !important;
        min-height: 111px;
    }
}