/* =========================================================
   UPCT - Custom overrides for Apereo CAS (CLEAN v2)
   Loaded AFTER cas.css
   Notes:
   - Keeps existing functionality (light/dark/mobile/providers/success/warn/autofill)
   - Removes true duplicates and consolidates repeated blocks
   ========================================================= */

/* =========================================================
   1) Theme variables + typography
   ========================================================= */
:root{
  /* CAS theme colors */
  --cas-theme-primary: #1E3A8A;
  --cas-theme-primary-light: #2563eb;

  /* Material surface (used for translucent card) */
  --mdc-theme-surface-r: 255;
  --mdc-theme-surface-g: 255;
  --mdc-theme-surface-b: 255;
  --mdc-theme-surface: rgb(var(--mdc-theme-surface-r), var(--mdc-theme-surface-g), var(--mdc-theme-surface-b));

  /* MDC typography */
  --mdc-protected-button-label-text-size: 0.78rem;
  --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: 0.78rem;

  /* Dark palette */
  --upct-card-bg: rgba(17,24,39,.78);
  --upct-card-border: rgba(255,255,255,.10);
  --upct-text: #e5e7eb;
  --upct-text-muted: rgba(229,231,235,.70);
  --upct-link: #60a5fa;

  --upct-line: rgba(229,231,235,.55);
  --upct-line-focus: #93c5fd;
  --upct-line-error: #f87171;

  /* Button colors */
  --upct-btn-primary: #1e3a8a;
  --upct-btn-primary-hover: #2563eb;
  --upct-btn-secondary: #6b7280;
  --upct-btn-secondary-hover: #9ca3af;
  --upct-btn-text: #ffffff;

  /* Actions (? / ENG) */
  --upct-action-fg: #0f172a;
  --upct-action-hover: #e5e7eb;

  /* Brand (checkbox) */
  --cas-brand-blue: #243c84;
}

/* =========================================================
   2) Light-mode base layout
   ========================================================= */
/*body{
  background-image: url(../images/fondo.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}*/
body.bg-des {
  background-image: url(/cas/images/fondo_des-9123040923a66102b5733a20648fffc7.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

body.bg-pro {
  background-image: url(/cas/images/fondo_pro-dacc1660805b8a45fcc0dacaf9fb26e8.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
a{ text-decoration: none; }
a:hover{ text-decoration: underline; }

.login-section{ padding: 1rem 2rem; }
.close{ font-weight: 600; }

/* Footer: keep only text colors from theme */
.cas-footer{ background-color: transparent; }

/* Login card translucency (LIGHT) */
.mdc-card{
  background: rgba(226, 232, 240, .82) !important;
  border: 1px solid rgba(30, 58, 138, .10) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Rounded inputs & buttons */
.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-radius: 5px;
}
.mdc-button--outline:not(:disabled, .reveal-password){ border-radius: 5px; }
.mdc-button--raised:not(:disabled, .reveal-password){
  border-radius: 4px;
  margin-left: 2px;
}

/* Service UI banner (yellow) */
#serviceui{
  --tw-bg-opacity: .70;
  background-color: rgba(251,191,36,var(--tw-bg-opacity));
  border-radius: 6px;
  margin-top: .2rem;
}

/* =========================================================
   3) Utility helpers used by templates (Tailwind-like)
   Keep: safe, used in markup
   ========================================================= */
.max-w-md{ max-width: 28rem; }
.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; }
.bg-blue-400  { --tw-bg-opacity: .90; background-color: rgba(96,165,250,var(--tw-bg-opacity)); border-radius: 10px; }
.bg-red-400   { --tw-bg-opacity: .90; background-color: rgba(248,113,113,var(--tw-bg-opacity)); border-radius: 10px; }
.bg-green-400 { --tw-bg-opacity: .90; background-color: rgba(52,211,153,var(--tw-bg-opacity)); border-radius: 10px; }

.w-full{ width: 100%; }
.text-white{ --tw-text-opacity:1; color:rgba(255,255,255,var(--tw-text-opacity)); }
.devenv{ display:block !important; font-size: .85rem !important; text-align:center !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; }

img, video{ max-width: 100%; height: auto; }
audio, canvas, embed, iframe, img, object, svg, video{ display:block; vertical-align: middle; }
img{ border-style:none; }

.flex{ display:flex; }
.items-center{ align-items:center; }
.justify-center{ justify-content:center; }
.flex-nowrapv7{ flex-wrap:nowrap; }
.flex-rowv7{ flex-direction:row; }

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)); }

/* Containers (keep login card width consistent) */
@media (min-width: 992px){
  .container, .container-lg, .container-md, .container-sm, .container-xl{ max-width: 550px; }
}
@media (min-width: 1400px){
  .container-xxl{ max-width: 1024px; }
  .container, .container-lg, .container-md, .container-sm, .container-xl{ max-width: 550px; }
}
@media (min-width: 640px){ .container{ max-width: 550px; } }
@media (min-width: 768px){ .container{ max-width: 550px; } }
@media (min-width: 1024px){ .container{ max-width: 550px; } }
@media (min-width: 1280px){ .container{ max-width: 550px; } }
@media (min-width: 1536px){ .container{ max-width: 550px; } }
.container-xxl{ width: fit-content; }

/* =========================================================
   4) Dark-mode helper classes used in markup
   ========================================================= */
@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\: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)); }

  .dark\:hidden{ display:none; }
  .dark\:block{ display:block; }
  .dark\:logo-white{ filter: brightness(20); }

  .dark\:divide-gray-400>:not([hidden])~:not([hidden]){ --tw-divide-opacity:1; border-color:rgba(156,163,175,var(--tw-divide-opacity)); }
}

/* Typography base */
.mdc-typography{ font-size: 1rem; }
small{ font-size: 90%; }
html{ line-height: 1.45; }

.my-4v7{ margin-top: 1rem !important; margin-bottom: 1rem !important; }
.my-2{ margin-top: 0 !important; margin-bottom: 0 !important; }

/* =========================================================
   5) Login providers: Cl@ve + MareNostrum
   ========================================================= */
#loginProviders ul.list-unstyled.d-flex{
  display:flex !important;
  flex-direction: row !important;
  justify-content:center;
  flex-wrap:wrap;
  gap: .1rem;
  padding: 0;
  margin: 0;
}
#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;
}

/* Force 2 providers on same row even if HTML has flex-column */
#loginProviders ul.list-unstyled.d-flex.flex-column{
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: .75rem !important;
}
#loginProviders ul.list-unstyled.d-flex.flex-column > li.login-provider-item{
  flex: 1 1 0 !important;
  max-width: 240px;
}
#loginProviders ul.list-unstyled.d-flex.flex-column > li.login-provider-item form{
  width: 100% !important;
}

/* Base for custom provider buttons */
#AzurePRE,
#ClavePRE,
#MareNostrumTestSir2{
  all: unset;
  display:flex;
  flex-direction: row !important;
  align-items:center;
  justify-content:center;
  background-color: rgba(255,255,255,.75);
  backdrop-filter: blur(4px);
  border: 1px solid transparent;
  padding: .5rem;
  border-radius: .25rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.10);
  cursor:pointer;
  width: 200px;
  min-height: 100px;
  max-width: 100%;
  text-align:center;
  transition: background-color .2s ease, border-color .2s ease;
  box-sizing: border-box;
}
#AzurePRE:hover,
#ClavePRE:hover,
#MareNostrumTestSir2:hover{
  background-color: #d1d5db;
}

/* Hide default CAS text inside provider buttons */
#AzurePRE .mdc-button__label,
#ClavePRE .mdc-button__label,
#MareNostrumTestSir2 .mdc-button__label{ display:none !important; }


/* AzurePRE icon + label */
#AzurePRE::before{
  content:'';
  display:block;
  background-image:url('/cas/images/azure-ab67b300b0217d7568a9b2c20f065c87.svg');
  background-size:70%;
  background-repeat:no-repeat;
  background-position:center;
  width:100%;
  height:48px;
}
#AzurePRE::after{
  content:'Acceso con Azure';
  font-size:.9rem;
  color:inherit;
  text-align:center;
}

/* Cl@ve icon + label */
#ClavePRE::before{
  content:'';
  display:block;
  background-image:url('/cas/images/clave-0365058cbd57a612ff826f0638dd04e3.svg');
  background-size:70%;
  background-repeat:no-repeat;
  background-position:center;
  width:100%;
  height:48px;
}
#ClavePRE::after{
  content:'Acceso con Cl@ve';
  font-size:.9rem;
  color:inherit;
  text-align:center;
}

/* MareNostrum icon + label */
#MareNostrumTestSir2::before{
  content:'';
  display:block;
  background-image:url('/cas/images/cmn-20398ec35adbe948a176ae8962ae2960.svg');
  background-size:70%;
  background-repeat:no-repeat;
  background-position:center;
  width:100%;
  height:48px;
}
#MareNostrumTestSir2::after{
  content:'PDI, PAS y ALU de la UM';
  font-size:.9rem;
  color:inherit;
  text-align:center;
}

/* Provider label text in black (as requested) */
.login-provider-item .mdc-button__label,
.login-provider-item button{
  color:#000000 !important;
}
.login-provider-item img{ filter:none; }

/* =========================================================
   6) Submit bar: ? + ENG izquierda | botones derecha
   ========================================================= */
#login-form-controls{ display:block !important; }

.upct-actions{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: .5rem;
  width:100%;
}
.upct-left{
  display:inline-flex;
  align-items:center;
  gap: .5rem;
}
.upct-buttons{
  display:inline-flex;
  align-items:center;
  gap: .5rem;
}

/* Neutralize any global MDC hover rules */
.mdc-button:hover{ background-color: inherit !important; }

/* Buttons styling */
#login-form-controls button.mdc-button--raised{
  border-radius: 4px !important;
  box-shadow: none !important;
  transition: background-color .2s ease;
}
#login-form-controls button[name="submitBtn"].mdc-button--raised{
  background-color: var(--upct-btn-primary) !important;
  color: var(--upct-btn-text) !important;
}
#login-form-controls button[name="submitBtn"].mdc-button--raised:hover{
  background-color: var(--upct-btn-primary-hover) !important;
}
#login-form-controls button[name="clearBtn"].mdc-button--raised{
  background-color: var(--upct-btn-secondary) !important;
  color: var(--upct-btn-text) !important;
}
#login-form-controls button[name="clearBtn"].mdc-button--raised:hover{
  background-color: var(--upct-btn-secondary-hover) !important;
}

/* ? and ENG look */
.upct-help,
.upct-eng{
  color: var(--upct-action-fg) !important;
  text-decoration: none !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  font-weight: 600 !important;
  background: transparent !important;
  line-height: 1 !important;
  transition: background-color .15s ease, color .15s ease !important;
}
.upct-help:hover,
.upct-eng:hover{
  background-color: var(--upct-action-hover) !important;
  color: var(--upct-action-fg) !important;
}
.upct-help .mdi{ font-size: 20px !important; }

@media (prefers-color-scheme: dark){
  :root{
    --upct-action-fg: #e5e7eb;
    --upct-action-hover: rgba(229,231,235,.18);
  }
}

/* Password “eye” button */
#passwordSection .reveal-password{
  background-color: var(--upct-btn-primary) !important;
  border-color: var(--upct-btn-primary) !important;
  color: #ffffff !important;
  border-radius: 4px !important;
  transition: background-color .2s ease;
}
#passwordSection .reveal-password:hover{
  background-color: var(--upct-btn-primary-hover) !important;
  border-color: var(--upct-btn-primary-hover) !important;
}
#passwordSection .reveal-password .mdi{ color:#fff !important; }

/* =========================================================
   7) Dark mode (main): card + texts + inputs line-style
   ========================================================= */
@media (prefers-color-scheme: dark){

  body.login{ color: var(--upct-text); }

  /* Main card */
  .mdc-card{
    background: var(--upct-card-bg) !important;
    border: 1px solid var(--upct-card-border) !important;
    border-radius: 6px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.35) !important;
    backdrop-filter: blur(6px);
    overflow: hidden !important;
    outline: none !important;
  }

  /* Separators */
  .divide-black>:not([hidden])~:not([hidden]){
    border-color: rgba(255,255,255,.20) !important;
  }

  /* Text */
  h1,h2,h3,h4,h5,
  .mdc-typography{ color: var(--upct-text) !important; }

  /* Links */
  a{ color: var(--upct-link) !important; }
  a:hover{ color: #93c5fd !important; }

  /* Inputs: transparent background + ONLY bottom line */
  .mdc-text-field{ background: transparent !important; }

  .mdc-text-field--outlined,
  .mdc-notched-outline{ width: 100% !important; }

  .mdc-text-field--outlined .mdc-notched-outline__leading,
  .mdc-text-field--outlined .mdc-notched-outline__trailing{
    border: 0 !important;
    width: 0 !important;
  }

  .mdc-text-field--outlined .mdc-notched-outline__notch{
    border: 0 !important;
    border-bottom: 2px solid var(--upct-line) !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 8px !important;
  }

  .mdc-text-field__input{
    background: transparent !important;
    color: var(--upct-text) !important;
    caret-color: var(--upct-line-focus) !important;
    padding-top: 18px !important;
    padding-bottom: 8px !important;
  }

  .mdc-floating-label{ color: var(--upct-text-muted) !important; }

  .mdc-text-field--focused,
  .mdc-text-field--focused:before,
  .mdc-text-field--focused:after{
    box-shadow:none !important;
    outline:none !important;
    filter:none !important;
  }
  .mdc-text-field--focused .mdc-notched-outline__notch{
    border-bottom: 2px solid var(--upct-line-focus) !important;
  }

  .mdc-text-field--invalid .mdc-notched-outline__notch{
    border-bottom: 2px solid var(--upct-line) !important;
  }
  .mdc-text-field--invalid .mdc-floating-label,
  .mdc-text-field--invalid .mdc-floating-label--float-above{
    color: var(--upct-text-muted) !important;
  }
  .mdc-text-field-helper-text,
  .invalid-feedback .mdc-text-field-helper-text{
    color: var(--upct-line-error) !important;
    font-size: .78rem;
  }

  .mdc-floating-label--float-above{
    transform: translateY(-24px) scale(.75) !important;
    background: rgba(17,24,39,.78) !important;
    padding: 0 6px !important;
    border-radius: 4px;
  }

  .mdc-text-field-helper-line{ margin-top: 6px !important; }
  .mdc-text-field-helper-text{ display:block !important; margin-top: 4px !important; }

  /* Buttons (dark) */
  .mdc-button--raised:not(:disabled){
    background: var(--upct-btn-primary) !important;
    border-radius: 4px !important;
  }
  .mdc-button--raised:not(:disabled):hover{
    background: var(--upct-btn-primary-hover) !important;
  }

  button[name="clearBtn"].mdc-button--raised{
    background: rgba(229,231,235,.18) !important;
  }
  button[name="clearBtn"].mdc-button--raised:hover{
    background: rgba(229,231,235,.28) !important;
  }

  /* Checkbox */
  input[type="checkbox"]{ accent-color: var(--upct-line-focus); }

  /* Footer */
  .sidebar-content p{ color: rgba(229,231,235,.75) !important; }

  /* Provider buttons in dark */
  #AzurePRE,
  #ClavePRE,
  #MareNostrumTestSir2{
    background-color: #111827 !important;
    border-color: rgba(255,255,255,.35) !important;
    box-shadow: none !important;
    color: #9ca3af;
  }
  #AzurePRE:hover,
  #ClavePRE:hover,
  #MareNostrumTestSir2:hover{
    background-color: #374151 !important;
  }
  #AzurePRE::before{ background-image:url('/cas/images/azure_w-b287c96ed525864b2d3bfa4651c0d7f7.svg'); }
  #ClavePRE::before{ background-image:url('/cas/images/clave_w-ef4a52e50a5e82fe2b1b3e87910643bc.svg'); }
  #MareNostrumTestSir2::before{ background-image:url('/cas/images/cmn_w-1a32954f65bf0d0f55e7e274a4604021.svg'); }
}

/* =========================================================
   8) Card width + divider behavior
   ========================================================= */
#content > .mdc-card,
#content > div > .mdc-card,
#loginForm .mdc-card{
  max-width: 480px !important;
  width: 100% !important;
}
#loginForm .login-section{
  max-width: 480px !important;
  width: 100% !important;
}

/* Divider: no line in light; subtle line in dark */
.divide-y-2 > :not([hidden]) ~ :not([hidden]){ border-top: 0 !important; }
@media (prefers-color-scheme: dark){
  .divide-y-2 > :not([hidden]) ~ :not([hidden]){
    border-top: 1px solid rgba(255,255,255,.12) !important;
  }
}
/* Re-enable ONLY the top divider under header in LIGHT mode (login controls area) */
@media (prefers-color-scheme: light){
  #login-form-controls .divide-y-2.divide-black > :not([hidden]) ~ :not([hidden]){
    border-top: 2px solid rgba(15,23,42,.28) !important;
  }
}

/* Remove wrapper artifacts */
#main-content,
#content,
.mdc-drawer-app-content,
.container-lg,
.mdc-card-content,
.mdc-card,
.login-section,
.card-body,
.form-wrapper{
  box-shadow: none !important;
  outline: 0 !important;
}
#main-content::before,
#main-content::after,
#content::before,
#content::after,
.mdc-drawer-app-content::before,
.mdc-drawer-app-content::after,
.mdc-card::before,
.mdc-card::after{
  content: none !important;
  display: none !important;
}

/* =========================================================
   9) Header logos divider + sizing
   ========================================================= */
.login-header::after,
.header-logos::after{
  content:"";
  display:block;
  height:1px;
  margin-top:10px;
  background:rgba(0,0,0,.35);
}
@media (prefers-color-scheme: dark){
  .login-header::after,
  .header-logos::after{
    background:rgba(255,255,255,.22);
  }
}
.login-header img,
.header-logos img{ max-height:50px !important; }
@media (max-width:576px){
  .login-header img,
  .header-logos img{ max-height:42px !important; }
}

/* =========================================================
   10) WARN checkbox spacing + label size
   ========================================================= */
/* Hide spacer section between password and warn */
#passwordSection + section.cas-field.form-group.my-3{
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
#passwordSection.cas-field.form-group,
#passwordSection.cas-field.form-group.my-3{
  margin-bottom: .25rem !important;
}
#passwordSection .mdc-text-field-helper-line{
  margin-top: .2rem !important;
  margin-bottom: 0 !important;
}

.cas-field.form-check{
  padding-left: 0 !important;
  margin-top: .2rem !important;
  margin-bottom: .2rem !important;
}
.cas-field.form-check .mdc-form-field{
  display: inline-flex;
  align-items: center;
  gap: .1rem;
  cursor: pointer;
}
.cas-field.form-check p{
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Brand blue checkbox */
.cas-field.form-check .mdc-checkbox__native-control:enabled:checked ~ .mdc-checkbox__background{
  background-color: var(--cas-brand-blue) !important;
  border-color: var(--cas-brand-blue) !important;
}
.cas-field.form-check .mdc-checkbox__background{
  width: 18px;
  height: 18px;
  border: 2px solid var(--cas-brand-blue) !important;
}
.cas-field.form-check .mdc-checkbox{ margin: 0 !important; }
.cas-field.form-check .mdc-checkbox__native-control{ cursor: pointer; }
.cas-field.form-check .mdc-checkbox__ripple{ pointer-events: none; }

.cas-field.form-check .form-check-label{
  font-size: .9rem !important;
  line-height: 1.2;
  margin: 0 !important;
  cursor: pointer;
  color: #2b2b2b !important;
}

/* Dark label visibility (broad selectors) */
html.dark .cas-field.form-check .form-check-label,
html[data-theme="dark"] .cas-field.form-check .form-check-label,
body.dark .cas-field.form-check .form-check-label,
body.dark-mode .cas-field.form-check .form-check-label,
body[data-theme="dark"] .cas-field.form-check .form-check-label,
.mdc-theme--dark .cas-field.form-check .form-check-label,
.dark .cas-field.form-check .form-check-label{
  color: #ffffff !important;
}
@media (prefers-color-scheme: dark){
  body.login .cas-field.form-check .form-check-label{ color:#ffffff !important; }
}

/* =========================================================
   11) Autofill (final consolidated version)
   Transparent background + readable text in dark mode
   ========================================================= */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus{
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  box-shadow: 0 0 0 1000px transparent inset !important;
  background-color: transparent !important;
  -webkit-text-fill-color: inherit !important;
  caret-color: inherit !important;
  transition: background-color 99999s ease-in-out 0s !important;
}
@media (prefers-color-scheme: dark){
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  textarea:-webkit-autofill,
  textarea:-webkit-autofill:hover,
  textarea:-webkit-autofill:focus,
  select:-webkit-autofill,
  select:-webkit-autofill:hover,
  select:-webkit-autofill:focus{
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #ffffff !important;
  }
}
html.dark input:-webkit-autofill,
html.dark input:-webkit-autofill:hover,
html.dark input:-webkit-autofill:focus,
.dark input:-webkit-autofill,
.dark input:-webkit-autofill:hover,
.dark input:-webkit-autofill:focus,
.mdc-theme--dark input:-webkit-autofill,
.mdc-theme--dark input:-webkit-autofill:hover,
.mdc-theme--dark input:-webkit-autofill:focus{
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff !important;
}

/* =========================================================
   12) Success view (casGenericSuccessView)
   Consolidated (removes repeated definitions)
   ========================================================= */
.upct-success-wrapper{ display:flex; justify-content:center; }

.upct-success-card{
  width:100%;
  max-width:720px;
  border-radius:10px;
  padding:28px 32px;
  background: rgba(193, 203, 225, 0.92);
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.upct-success-logos{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:26px;
  margin-bottom:12px;
}
.upct-success-logo{ height:56px; width:auto; }

.upct-success-divider{
  border:0;
  height:2px;
  background: rgba(0,0,0,.75);
  margin: 8px 0 16px;
}
.upct-success-brand{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}
.upct-success-brand-icon{ width:26px; height:26px; }
.upct-success-brand-title{
  margin:0;
  font-size:1.25rem;
  font-weight:500;
  color:#2b6ea9;
}
.upct-success-title{
  margin: 6px 0 18px;
  font-size: 1.9rem;
  font-weight: 600;
  color:#000;
}

/* Green success message box */
.success-main{ font-weight:700 !important; }

.upct-success-msg{
  background:#2fd18f !important;
  border:0 !important;
  border-radius:6px;
  padding:16px 18px;
  margin-top:12px;
}
.upct-success-msg p{
  color:#0b1b12 !important;
  margin:0;
  line-height:1.35;
}
.upct-success-msg p + p{ margin-top:8px; }

.upct-success-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:22px;
}
.upct-success-logout{
  border-radius:6px;
  padding:10px 18px;
}

/* Success view dark mode */
@media (prefers-color-scheme: dark){
  .upct-success-card{ background: rgba(28, 41, 68, 0.90); }
  .upct-success-divider{ background: rgba(255,255,255,.75); }
  .upct-success-title{ color:#fff; }
  .upct-success-brand-title{ color:#8fc6ff; }
}

/* Success view mobile */
@media (max-width: 576px){
  .upct-success-card{
    background:#ffffff;
    padding:18px 18px;
    border-radius:10px;
  }
  .upct-success-logo{ height:46px; }
  .upct-success-title{ font-size:1.55rem; }
  .upct-success-actions{ justify-content:center; }
}

/* =========================================================
   13) PAU header logos + divider (consolidated)
   ========================================================= */
.pau-header{ width:100%; }
.pau-logos{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  width:100%;
  flex-wrap:wrap;
}
.pau-logos img{
  max-width:100%;
  height:auto;
  display:block;
}
.pau-logo-upct,
.pau-logo-eut{ max-height:56px; width:auto; }

.pau-title{
  display:flex;
  align-items:center;
  gap:12px;
}
.pau-logo-pau{ max-height:34px; width:auto; display:block; }

.pau-divider{
  border:0;
  height:2px;
  background:#6f7f97;
  width:98%;
  margin:12px auto 18px;
}

/* Logo swap light/dark (single consolidated block) */
.light-only{ display:inline-block !important; }
.dark-only{ display:none !important; }

html.dark .light-only,
body.dark .light-only,
.dark .light-only,
body.darkmode .light-only,
html.darkmode .light-only{ display:none !important; }

html.dark .dark-only,
body.dark .dark-only,
.dark .dark-only,
body.darkmode .dark-only,
html.darkmode .dark-only{ display:inline-block !important; }

@media (prefers-color-scheme: dark){
  .light-only{ display:none !important; }
  .dark-only{ display:inline-block !important; }
}

/* =========================================================
   14) Logout button + primary links
   ========================================================= */
.logout-button{
  background-color:#213f96 !important;
  border-color:#213f96 !important;
  color:#ffffff !important;
}
.logout-button:hover{
  background-color:#2f4fb3 !important;
  border-color:#2f4fb3 !important;
  color:#ffffff !important;
  text-decoration:none !important;
}
.logout-button:hover .mdc-button__label{ text-decoration:none !important; }

a.btn-primary,
a.btn-primary:hover,
a.btn-primary:focus,
a.btn-primary:active{
  color:#ffffff !important;
  text-decoration:none !important;
}
.mdc-button.btn-primary{ color:#ffffff !important; }
.mdc-button.btn-primary:hover{
  color:#ffffff !important;
  text-decoration:none !important;
}

/* =========================================================
   15) Mobile adjustments (consolidated)
   ========================================================= */
@media (max-width: 576px){

  :root{
    --mdc-protected-button-label-text-size: 0.74rem;
    --mdc-typography-button-font-size: 0.74rem;
  }

  /* Tight top spacing (all modes) */
  .mdc-top-app-bar--fixed-adjust,
  .mdc-drawer-app-content,
  #main-content,
  #content,
  body.login{
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  .login-section{ padding-top: .4rem !important; }

  /* Providers smaller */
  #AzurePRE,
  #ClavePRE,
  #MareNostrumTestSir2{
    width: 175px !important;
    min-height: 101px;
    margin-top: 0 !important;
  }

  /* Reduce card offset */
  .mdc-card{ margin-top: 0 !important; }

  /* On very small screens remove background image */
  body{ background-image: none !important; }

  /* Logos smaller */
  .pau-logo-upct,
  .pau-logo-eut{ max-height: 42px; }
  .pau-logo-pau{ max-height: 28px; }
}

/* Mobile light: clean white background + card white */
@media (max-width:576px) and (prefers-color-scheme: light){
  body,
  body.login{
    background: #ffffff !important;
    background-image: none !important;
  }
  .mdc-card{
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,.08) !important;
    backdrop-filter: none !important;
  }
  #AzurePRE,
  #ClavePRE,
  #MareNostrumTestSir2{
    border: 1px solid #9ca3af !important;
    background-color: rgba(255,255,255,.75) !important;
  }
}

/* Mobile dark: clean background + providers hover/active */
@media (max-width:576px) and (prefers-color-scheme: dark){
  body.login{
    background: #0b1220 !important;
    background-image: none !important;
    padding-top:0 !important;
  }
  .mdc-card{
    background: rgba(17,24,39,.92) !important;
    box-shadow: none !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 16px !important;
  }
  #AzurePRE,
  #ClavePRE,
  #MareNostrumTestSir2{
    border: 1px solid rgba(255,255,255,.45) !important;
    background-color: rgba(10, 18, 33, .55) !important;
  }
  #AzurePRE:hover,
  #AzurePRE:active,
  #AzurePRE:focus-visible,
  #ClavePRE:hover,
  #ClavePRE:active,
  #ClavePRE:focus-visible,
  #MareNostrumTestSir2:hover,
  #MareNostrumTestSir2:active,
  #MareNostrumTestSir2:focus-visible{
    background-color: #3b4657 !important;
  }

  /* Compact action buttons */
  .upct-buttons button.mdc-button{
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 10px !important;
    font-size: .82rem !important;
    line-height: 34px !important;
  }

  /* Password field: prevent eye overflow */
  .mdc-text-field{ overflow: hidden !important; }
  .btn-reveal,
  .reveal-password,
  .mdc-text-field__icon,
  .mdc-text-field__icon--trailing{
    height: 40px !important;
    width: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
  }
  .mdi{ font-size: 18px !important; }
  .mdc-icon-button .mdi,
  .mdc-button .mdi{ font-size: 18px !important; }
}

/* Fix: providers */
#loginProviders #AzurePRE,
#loginProviders #ClavePRE,
#loginProviders #MareNostrumTestSir2,
#loginProviders #AzurePRE::after,
#loginProviders #ClavePRE::after,
#loginProviders #MareNostrumTestSir2::after{
  color:#0f172a !important;
}

@media (prefers-color-scheme: dark){
  #loginProviders #AzurePRE,
  #loginProviders #ClavePRE,
  #loginProviders #MareNostrumTestSir2,
  #loginProviders #AzurePRE::after,
  #loginProviders #ClavePRE::after,
  #loginProviders #MareNostrumTestSir2::after{
    color:#e5e7eb !important;
  }
}

/* Mantener cabecera UPCT alineada con la tarjeta */
.upct-global-header{
  width: 90%;
  max-width: 520px;     /* ajusta a tu card (480-560 suele ir bien) */
  margin: 0 auto 12px;  /* centrado + separación con la tarjeta */
  padding: 0 12px;      /* aire en móvil */
}
/* === FORZAR VISIBILIDAD CABECERA UPCT (DEBUG) === */
.upct-global-header,
.pau-header{
  position: relative !important;
  z-index: 9999 !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  -webkit-filter: none !important;
  mix-blend-mode: normal !important;
}

/* Dale “caja” para verla sí o sí */
.pau-header{
  background: rgba(255,255,255,.25) !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
}

/* Alineación con tu tarjeta (en tu captura el main mide ~550px) */
.upct-global-header{
  max-width: 550px !important;
  width: 100% !important;
  margin: 0 auto 12px auto !important;
  padding: 0 12px !important;
}

/* Asegura que las imágenes se vean */
/*.pau-header img{
  display: inline-block !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
}*/

/* Reglas claras para dark-only / light-only */
.dark-only{ display: none !important; }
.light-only{ display: inline-block !important; }
body.dark .dark-only{ display: inline-block !important; }
body.dark .light-only{ display: none !important; }

/* ===== UPCT HEADER: tamaño estable SIEMPRE ===== */
.upct-global-header{
  width: 100%;
  max-width: 550px;     /* igual que tu container */
  margin: 0 auto 12px;
  padding: 0 12px;
}

.upct-global-header .pau-header{
  background: rgba(255,255,255,.25);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 10px;
  padding: 10px 12px;
}

/* CLAVE: limitar tamaño de CUALQUIER img dentro de la cabecera */
.upct-global-header .pau-logos{
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 18px;
  flex-wrap: wrap;
}

.upct-global-header .pau-logos img{
  width: auto !important;
  height: auto !important;
  max-height: 56px !important;   /* <-- esto arregla “se van de madre” */
  max-width: 100% !important;
  display: inline-block !important;
}

.upct-global-header .pau-title img{
  width: auto !important;
  height: auto !important;
  max-height: 34px !important;
  display: inline-block !important;
}

@media (max-width:576px){
  .upct-global-header .pau-logos img{ max-height: 42px !important; }
  .upct-global-header .pau-title img{ max-height: 28px !important; }
}

/* Cabecera superior con el mismo azul claro que la tarjeta */
.upct-global-header .pau-header{
  background: rgba(207, 219, 235, .92) !important;   /* azul claro */
  border: 1px solid rgba(255,255,255,.65) !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.18) !important;  /* parecido a “card” */
}
.upct-global-header .pau-header{
  background: rgba(207, 219, 235, .95) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.12) !important;
}

/* =========================================================
   Modo claro / oscuro: mostrar SOLO el logo correcto
   (si el <body> o <html> tiene clase "dark", se activa oscuro)
   ========================================================= */

/* Por defecto (modo claro) */
.dark-only { display: none !important; }
.light-only { display: inline-block !important; }

/* Modo oscuro */
html.dark .dark-only,
body.dark .dark-only {
  display: inline-block !important;
}
html.dark .light-only,
body.dark .light-only {
  display: none !important;
}

/* ===== FIX: light-only / dark-only en cabecera UPCT ===== */

/* No fuerces display para todos los img del header */
.pau-header img{
  max-width: 100%;
  height: auto;
  opacity: 1;
  visibility: visible;
  filter: none;
}

/* Light por defecto */
.pau-header img.dark-only{ display: none !important; }
.pau-header img.light-only{ display: inline-block !important; }

/* Si el navegador está en modo oscuro */
@media (prefers-color-scheme: dark){
  .pau-header img.dark-only{ display: inline-block !important; }
  .pau-header img.light-only{ display: none !important; }
}

/* Si CAS fuerza modo oscuro añadiendo clase al body */
body.dark .pau-header img.dark-only{ display: inline-block !important; }
body.dark .pau-header img.light-only{ display: none !important; }

/* Fondo azul claro como la cabecera de abajo */
.upct-global-header .pau-header{
  background: rgba(210, 222, 238, 0.92) !important;
  border: 1px solid rgba(255,255,255,0.55) !important;
  border-radius: 12px !important;
  padding: 16px 18px !important;
  box-sizing: border-box !important;
}

/* =========================================================
   UPCT Global Header (outside form) – match in-form header
   ========================================================= */

/* Keep header constrained to the same width as the login card */
.upct-global-header{
  width:100%;
  max-width:560px; /* similar to the login card width */
  margin:0 auto 1rem;
}

/* Card look like the in-form block */
.upct-global-header .pau-header{
  background: rgba(200, 220, 240, 0.85);
  border: 1px solid rgba(255,255,255,0.35);
  box-shadow: 0 8px 18px rgba(0,0,0,0.20);
  border-radius: 12px;
  padding: 18px 22px;
}

/* Make the logo row compact and aligned */
.upct-global-header .pau-logos{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 20px;
}

.upct-global-header .pau-logos img{
  height:64px;
  width:auto;
  max-width: 48%;
  object-fit:contain;
}

/* Divider spacing like the in-form header */
.upct-global-header .pau-divider{
  margin: 14px 0;
  border-color: rgba(0,0,0,0.35);
}

/* PAU title row */
.upct-global-header .pau-title{
  display:flex;
  align-items:center;
  justify-content:flex-start;
}

.upct-global-header .pau-title img{
  height:44px;
  width:auto;
}

/* Development warning inside the global header */
.upct-global-header .devenv{
  display:block; /* override "hidden" */
  margin-top: 14px;
  margin-bottom: 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: #f2c037; /* yellow like your screenshot */
  color:#000;
  font-size: 14px;
}

/* Light/Dark logo switching – default to light (no dark mode class present) */
.upct-global-header img.dark-only{ display:none; }
.upct-global-header img.light-only{ display:inline-block; }

/* If you ever enable dark mode with a class on <body>, swap automatically */
body.dark .upct-global-header img.dark-only,
html.dark .upct-global-header img.dark-only{ display:inline-block; }
body.dark .upct-global-header img.light-only,
html.dark .upct-global-header img.light-only{ display:none; }

.upct-global-header{
    max-width: 550px;
    margin: 0 auto 20px auto;
}

/* =========================================================
   FIX FINAL: cabecera superior = mismo ancho + sin hueco
   ========================================================= */

/* 1) Misma “caja”/ancho que la tarjeta (y la cabecera de abajo) */
.upct-global-header{
  width: 100% !important;
  max-width: 550px !important;     /* <- aquí va el max-width */
  margin: 0 auto 0 auto !important;/* <- quita el hueco con la de abajo */
  padding: 0 12px !important;
}

/* 2) Si quieres que quede exactamente con el mismo borde/padding */
.upct-global-header .pau-header{
  box-sizing: border-box !important;
}

/* 3) Quita márgenes de la cabecera “de dentro” del formulario,
      para que arranque pegada (como en tu cabecera inferior) */
#login-form-controls .mb-4v7.mt-4v7{
  margin-top: 0 !important;
}

/* (Opcional) si aún ves 1-2px de hueco, fuerza el contenedor del login */
#content{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Cabecera superior: sin efecto "tarjeta encima" */
.upct-global-header,
.upct-global-header .pau-header{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Quita redondeos extra si los tuviera */
.upct-global-header .pau-header{
  border-radius: 0 !important;
}

/* Evita que parezca superpuesta */
.upct-global-header{
  position: static !important;
  z-index: auto !important;
  margin-bottom: 0 !important;
}

/* =========================================================
   CABECERA SUPERIOR: mismo ancho y encaje que la tarjeta
   ========================================================= */

/* 1) La tarjeta (contenido CAS) fija el ancho real (en tu captura: 480px) */
#content > .mdc-card,
#content > .card.mdc-card{
  width: 100%;
  max-width: 480px;
}

/* 2) La cabecera superior usa EXACTAMENTE el mismo ancho */
.upct-global-header{
  width: 100%;
  max-width: 480px;
  margin: 0 auto;      /* centrada */
  padding: 0;
}

/* 3) Quita el “hueco” entre cabecera y tarjeta */
.upct-global-header{ margin-bottom: 0 !important; }
#content{ margin-top: 0 !important; }

/* 4) Ojo: <main class="container-lg py-4"> mete padding arriba/abajo.
      Si quieres que no “separe” nada visualmente: */
#main-content{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 5) IMPORTANTÍSIMO: evita efecto “montado encima”
      (si antes pusiste position/z-index en la cabecera, esto lo neutraliza) */
.upct-global-header,
.pau-header{
  position: static !important;
  z-index: auto !important;
}

/* 6) Si quieres que la caja superior NO parezca “otra caja encima”,
      quítale sombra propia (la sombra que debe mandar es la del diseño general).
      Si quieres sombra, deja solo UNA (no dos). */
.pau-header{
  box-shadow: none !important;  /* <-- ponlo a 'none' para que no se vea apilado */
}


/********************SANDRA ********/
/* Centrar logos cabecera */
.upct-global-header .pau-logos{
  display: flex;
  justify-content: center;   /* centrado horizontal */
  align-items: center;
  gap: 28px;                 /* más separación */
  width: 100%;
}
/* Logos UPCT y EUT más grandes */
.upct-global-header .pau-logos img{
  max-height: 72px !important;
  width: auto;
}
.upct-global-header .pau-title{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
}

/* Logos superiores más pequeños */
.upct-global-header .pau-logos img{
  max-height: 48px !important;
  width: auto;
}
/* PAU alineado a la izquierda */
.upct-global-header .pau-title{
  display: flex;
  justify-content: flex-start !important;
  align-items: center;
  gap: 10px;
}
/* Logo PAU */
.upct-global-header .pau-title img{
  max-height: 38px !important;
  width: auto;
}

/* Más espacio arriba antes de los logos */
.upct-global-header{
  margin-top: 12px !important;
}
/* Reducir espacio entre advertencia y título */
#serviceui{
  margin-bottom: 6px !important;
}

h3, h2, h1{
  margin-top: 4px !important;
}
#serviceui{
  margin-bottom: 2px !important;
}

h3, h2, h1{
  margin-top: 2px !important;
}

/* Banner advertencia (devenv): quitar márgenes y hacerlo más compacto */
.devenv{
  margin-top: 6px !important;
  margin-bottom: 4px !important;
  padding: 6px 12px !important;
}

/* Si las utilidades siguen ganando, machácalas SOLO cuando sea .devenv */
.devenv.mb-4v7{ margin-bottom: 4px !important; }
.devenv.mt-4v7{ margin-top: 6px !important; }

/* Quitar margen superior del título “Iniciar sesión …” */
#loginForm h1,
#loginForm h2,
#loginForm h3{
  margin-top: 0 !important;
}

/* Quitar espacio entre advertencia y título */
#login-form-controls .mb-4v7{
  margin-bottom: 0 !important;
}

#login-form-controls .mt-4v7{
  margin-top: 0 !important;
}

/* Reducir padding de la sección del login */
.login-section{
  padding-top: 0.4rem !important;
}

/* Quitar margen del título */
#loginForm h1,
#loginForm h2,
#loginForm h3{
  margin-top: 0 !important;
}

/* MISMO ancho que producción */
#content > .mdc-card,
#content > div > .mdc-card,
#loginForm .mdc-card{
  max-width: 500px !important;
  width: 100% !important;
}

.upct-global-header{
  max-width: 500px !important;
}

/* ===== FORZAR ANCHO PRODUCCIÓN (card + wrappers) ===== */

/* 1) El contenedor bootstrap no puede superar producción */
#main-content .container,
#main-content .container-sm,
#main-content .container-md,
#main-content .container-lg,
#main-content .container-xl,
#main-content .container-xxl{
  max-width: 500px !important;   /* ajusta: 448/450 según tu prod */
  width: 100% !important;
}

/* 2) Evita el fit-content que ensancha en algunos casos */
.container-xxl{
  width: 100% !important;
}

/* 3) La tarjeta CAS (lo visible) también limitada */
#content > .mdc-card,
#content > div > .mdc-card,
#loginForm .mdc-card{
  max-width: 500px !important;
  width: 100% !important;
}

/* 4) (Opcional) cabecera superior igual de ancha */
.upct-global-header{
  max-width: 500 !important;
  width: 100% !important;
}

/* ===== FORZAR ANCHO PRODUCCIÓN: wrapper real (upct-shell) ===== */
.upct-shell.upct-card.mdc-card{
  width: 100% !important;
  max-width: 500px !important;   /* pon aquí el ancho exacto de PROD */
  flex: 0 0 auto !important;     /* evita que flex-grow la ensanche */
}

/* Por si el grow viene por clase Bootstrap */
.upct-shell.upct-card.mdc-card.flex-grow-1{
  flex-grow: 0 !important;
}

/* Asegura que el contenedor la centre sin estirar */
#content{
  justify-content: center !important;
  align-items: flex-start !important;
}

/* Línea bajo los logos: ancho completo */
.upct-global-header .pau-divider{
  width: 100% !important;
  margin: 12px 0 18px 0 !important;
}


/* Evitar línea vertical al fijar ancho */
.upct-shell.upct-card.mdc-card{
  max-width: 500px !important;   /* tu ancho */
  width: 100% !important;
  flex: 0 0 auto !important;
  overflow: hidden !important;   /* corta sombras/bordes internos */
  box-shadow: none !important;   /* por si el wrapper pinta sombra */
  border: 0 !important;          /* por si el wrapper pinta borde */
}

/* La sombra/borde solo en la tarjeta real (si quieres) */
#loginForm .mdc-card{
  box-shadow: 0 10px 30px rgba(0,0,0,.18) !important;
  border: 0 !important;
}

/* Asegura centrado real del contenedor */
#content{
  justify-content: center !important;
}

/* Sombra completa de la tarjeta */
.upct-shell.upct-card.mdc-card{
  box-shadow: 0 12px 28px rgba(0,0,0,0.25) !important;
  border-radius: 11px !important;
}

/* =========================================
   Logout/Success: la card interior NO blanca
   ========================================= */

/* modo normal */
.upct-shell #content > .mdc-card.card{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* móvil claro: pisa la regla global .mdc-card { background:#fff } */
@media (max-width:576px) and (prefers-color-scheme: light){
  .upct-shell #content > .mdc-card.card{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}
.upct-shell #content > .mdc-card.card{
  background: inherit !important;
}

/* =========================================
   Logout success: mensaje verde sin tocar HTML
   ========================================= */

/* Caja verde aplicada al bloque del mensaje */
#logoutBody #logoutMessage,
#logoutBody p.banner-message + p.banner-message{
  background: #37d39a !important;
  color: #0b1b12 !important;
  margin: 0 !important;
  padding-left: 18px;
  padding-right: 18px;
}

/* Primer párrafo: abre la caja */
#logoutBody #logoutMessage{
  padding-top: 16px;
  padding-bottom: 6px;
  border-radius: 6px 6px 0 0;
  font-weight: 700;
}

/* Segundo párrafo: cierra la caja */
#logoutBody p.banner-message + p.banner-message{
  padding-top: 0;
  padding-bottom: 16px;
  border-radius: 0 0 6px 6px;
}

/* Espacio respecto al título */
#logoutBody .banner-heading + #logoutMessage{
  margin-top: 12px !important;
}

/* Quitar centrado si el contenedor lo hereda */
#logoutBody #logoutMessage,
#logoutBody p.banner-message + p.banner-message{
  text-align: left !important;
}

/* Enlaces dentro del mensaje */
#logoutBody #logoutMessage a,
#logoutBody p.banner-message + p.banner-message a{
  color: #0b1b12 !important;
  text-decoration: underline;
}
/* Success/logout: quitar hueco antes del título */
.upct-shell #content.row{
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}

.upct-shell #content > .card{
  margin-top: 0 !important;
  padding-top: 0 !important;   /* pisa p-4 por arriba */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* el body del logout tampoco debe añadir aire arriba */
#logoutBody{
  padding-top: 0 !important;
}

/* título más arriba */
#logoutBody .banner-heading{
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

/* por si el bloque PAU deja hueco debajo */
.upct-global-header{
  margin-bottom: 6px !important;
}
/* Solo botón logout / volver al login */
.logout-button{
    background-color:#253a86 !important;
    border-color:#253a86 !important;
    color:#ffffff !important;
}

.logout-button:hover{
    background-color:#3b64d6 !important;
    border-color:#3b64d6 !important;
    color:#ffffff !important;
    text-decoration:none !important;
}

.logout-button .mdc-button__label{
    color:#ffffff !important;
}

.logout-button:hover .mdc-button__label{
    color:#ffffff !important;
    text-decoration:none !important;
}
/* ============================
   Botón "Ir a la página de acceso"
   ============================ */

.login-button{
    background-color:#253a86 !important;   /* azul institucional */
    border-color:#253a86 !important;
    color:#ffffff !important;
    border-radius:6px;
    padding:10px 18px;
}

/* Hover (azul más claro) */
.login-button:hover{
    background-color:#3b64d6 !important;
    border-color:#3b64d6 !important;
    color:#ffffff !important;
    text-decoration:none !important;
}

/* texto interno */
.login-button .mdc-button__label{
    color:#ffffff !important;
    font-weight:500;
}

/* evitar subrayado en enlaces */
a.login-button:hover{
    text-decoration:none !important;
}

/* =========================================
   Error page (Unauthorized Access)
   Solo para esta pantalla
   ========================================= */

/* La tarjeta interior del error */
.upct-shell #content.mdc-card.card{
  max-width: 520px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 18px 20px 20px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Banner rojo centrado y mejor colocado */
.upct-shell #content .banner.banner-danger{
  max-width: 100% !important;
  margin: 0 auto 16px auto !important;
  padding: 18px 20px !important;
  border-radius: 8px !important;
  background: #f8d7da !important;
  border: 1px solid #dc3545 !important;
  color: #721c24 !important;
  text-align: left !important;
  box-shadow: none !important;
}

/* Título del error */
.upct-shell #content .banner.banner-danger h2{
  margin: 0 0 12px 0 !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  color: #721c24 !important;
}

/* Párrafos del banner */
.upct-shell #content .banner.banner-danger p{
  margin: 0 0 12px 0 !important;
  color: #721c24 !important;
  line-height: 1.4 !important;
  text-align: left !important;
}

.upct-shell #content .banner.banner-danger p:last-of-type{
  margin-bottom: 0 !important;
}

/* Icono de advertencia */
.upct-shell #content .banner.banner-danger .mdi,
.upct-shell #content .banner.banner-danger .fa{
  color: #dc3545 !important;
}

/* Tabla del error */
.upct-shell #content .banner.banner-danger .mdc-data-table,
.upct-shell #content .banner.banner-danger .table-responsive{
  margin-top: 14px !important;
  background: #fff5f5 !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}

.upct-shell #content .banner.banner-danger table{
  margin-bottom: 0 !important;
  font-size: .9rem !important;
}

/* Botones inferiores: centrados y con separación */
.upct-shell #content > .d-flex.mt-2{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 14px !important;
}

.upct-shell #content > .d-flex.mt-2 .mdc-button{
  margin: 0 !important;
}


/* Aviso de caducidad más integrado */
.loginMessageView .mdc-list{
    list-style: none;
    padding: 0;
    margin: 1rem 0 1.25rem 0;
}

.loginMessageView .mdc-list-item{
    display: block;
    background: rgba(242, 201, 76, 0.28);   /* amarillo suave */
    border-left: 5px solid #e0b63f;         /* acento warning */
    border-radius: 8px;
    padding: 14px 18px;
    color: #1f2937;
    font-weight: 400;
    line-height: 1.5;
    box-shadow: none;
}

.loginMessageView .mdc-list-item__text{
    display: block;
    color: #1f2937 !important;
}

.loginMessageView .mdc-list-item a{
    color: #1d4ed8 !important;
    font-weight: 600;
    text-decoration: none;
}

.loginMessageView .mdc-list-item a:hover{
    text-decoration: underline;
}

.loginMessageView .mdc-list-item{
    display: block;
    background: rgba(255, 255, 255, 0.28);
    border-left: 5px solid #e0b63f;
    border-radius: 8px;
    padding: 14px 18px;
    color: #1f2937;
}

/* Aviso de caducidad integrado, sin franja amarilla */
.loginMessageView .mdc-list{
    list-style: none;
    padding: 0;
    margin: 1rem 0 1.25rem 0;
}

.loginMessageView .mdc-list-item{
    display: block !important;
    background: rgba(242, 201, 76, 0.16) !important;
    border-left: 0 !important;                       /* quita la franja */
    border: 0 !important;
    border-radius: 8px !important;
    padding: 14px 18px !important;
    color: #1f2937 !important;
    font-weight: 400;
    line-height: 1.5;
    box-shadow: none !important;
}

/* Quita efectos MDC que a veces dejan bandas o fondos raros */
.loginMessageView .mdc-list-item::before,
.loginMessageView .mdc-list-item::after,
.loginMessageView .mdc-list-item__ripple{
    display: none !important;
    content: none !important;
}

/* Texto */
.loginMessageView .mdc-list-item__text{
    display: block;
    color: #1f2937 !important;
}

/* Enlace */
.loginMessageView .mdc-list-item a{
    color: #1d4ed8 !important;
    font-weight: 600;
    text-decoration: none;
}

.loginMessageView .mdc-list-item a:hover{
    text-decoration: underline;
}

/* Aviso caducidad contraseña integrado */
.loginMessageView .mdc-list{
    list-style: none;
    padding: 0;
    margin: 1rem 0 1.25rem 0;
}

.loginMessageView .mdc-list-item{
    display: block !important;
    background: rgba(30, 64, 175, 0.06) !important; /* azul muy suave */
    border: 1px solid rgba(30, 64, 175, 0.15) !important;
    border-radius: 10px !important;
    padding: 14px 18px !important;
    color: #1f2937 !important;
    line-height: 1.5;
    box-shadow: none !important;
}

/* quitar efectos MDC */
.loginMessageView .mdc-list-item::before,
.loginMessageView .mdc-list-item::after,
.loginMessageView .mdc-list-item__ripple{
    display:none !important;
}

/* texto */
.loginMessageView .mdc-list-item__text{
    color:#1f2937 !important;
}

/* enlace */
.loginMessageView .mdc-list-item a{
    color:#1d4ed8 !important;
    font-weight:600;
    text-decoration:none;
}

.loginMessageView .mdc-list-item a:hover{
    text-decoration:underline;
}

/*button.mdc-button--raised:hover {
  background-color: var(--upct-btn-primary-hover) !important;
}*/


.mdc-button--raised:hover {
  background-color: var(--upct-btn-primary-hover) !important;
}

.login-provider-item .mdc-button--raised:hover {
  background-color: inherit !important;
}

/* Centrado solo de la tarjeta principal UPCT */
.upct-shell {
  max-width: 500px !important;
  margin: 0 auto !important;
}

/* Cabecera al mismo ancho que la tarjeta */
.upct-global-header {
  max-width: 500px !important;
  margin: 12px auto 0 auto !important;
}

/* No tocar el layout interno de todas las pantallas CAS */
#content {
  width: 100% !important;
  display: block !important;
}

/* Solo en login normal, centrar el formulario */
#loginForm,
#fm1 {
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

/* ===== FIX warning password expiry en modo oscuro ===== */
@media (prefers-color-scheme: dark) {
  #content.loginMessageView .mdc-list-item,
  #content.loginMessageView li.mdc-list-item,
  .loginMessageView .mdc-list-item.text-warn {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(96,165,250,0.18) !important;
    color: #e5e7eb !important;
  }

  #content.loginMessageView .mdc-list-item__text,
  #content.loginMessageView li.mdc-list-item .mdc-list-item__text,
  .loginMessageView .mdc-list-item.text-warn .mdc-list-item__text,
  .loginMessageView .mdc-list-item.text-warn span {
    color: #e5e7eb !important;
    opacity: 1 !important;
  }

  #content.loginMessageView .mdc-list-item a,
  .loginMessageView .mdc-list-item.text-warn a {
    color: #60a5fa !important;
  }
}

/* Seguridad extra para evitar iconos de imagen rota */

#applogo:not([src]),
#applogo[src=""] {
  display: none !important;
}
/*
#casAccountProfile .upct-success-msg {
  margin: 2.5rem auto 0 auto;
  padding: 1.5rem 1.75rem;
  max-width: 720px;
  background: #f3fff3;
  border: 1px solid #d6ead6;
  border-radius: 12px;
}

#casAccountProfile h2 {
  margin-top: 0;
  margin-bottom: 1rem;
}

#casAccountProfile p {
  margin-bottom: 1rem;
}

#casAccountProfile p:last-child {
  margin-bottom: 0;
}

#casAccountProfile .upct-success-msg {
  margin: .5rem 1.5rem 1.5rem 1.5rem;
  padding: 1.5rem 1.75rem;
  max-width: 720px;
  background: #ffffff;
  border: 1px solid #e3e3e3;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  font-size: 0.88rem;
}*/

#casAccountProfile .upct-success-msg {
  margin: .5rem 1.5rem 1.5rem 1.5rem;
  padding: .5rem .75rem;
  max-width: 720px;
  background: #2fd18f !important;
  border: 0 !important;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  font-size: 1rem;
}

#casAccountProfile h2 {
  margin-top: 0;
  margin-bottom: 1rem;
}

#casAccountProfile p {
  margin-bottom: 1rem;
}

#casAccountProfile p:last-child {
  margin-bottom: 0;
}

@media (prefers-color-scheme: dark) {
  .upct-success-msg {
    background: #059669 !important;
    color: #ffffff !important;
    border: 0 !important;
  }

  .upct-success-msg h2,
  .upct-success-msg p,
  .upct-success-msg strong,
  .upct-success-msg i {
    color: #ffffff !important;
  }
}

@media (prefers-color-scheme: dark) {
  #casAccountProfile .upct-success-msg {
    background: #059669 !important;
    color: #ffffff !important;
    border: 0 !important;
  }

  #casAccountProfile .upct-success-msg h2,
  #casAccountProfile .upct-success-msg p,
  #casAccountProfile .upct-success-msg strong,
  #casAccountProfile .upct-success-msg i {
    color: #ffffff !important;
  }
}



h1, h2, h3, h4, h5 {
  font-size: 1.1em;
  font-weight: 600;
}

/*.upct-logout-card {
  max-width: 760px;
  border-radius: 16px;
}

.upct-logout-card h2 {
  margin-bottom: 1.25rem;
  font-size: 1rem;
  font-weight: 700;
}

.upct-logout-card p,
.upct-logout-card span {
  font-size: 1rem;
  line-height: 1.6;
}

@media (prefers-color-scheme: dark) {
  .upct-logout-card {
    background: rgba(24, 24, 27, 0.82) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
  }

  .upct-logout-card h2,
  .upct-logout-card p,
  .upct-logout-card span,
  .upct-logout-card strong {
    color: #f3f4f6 !important;
  }

  .upct-logout-card a {
    color: #93c5fd !important;
  }
}*/

/* H2 logout */
/*.upct-logout-card h2 {
  font-weight: 700;
  margin-bottom: 1rem;
}*/

/* modo oscuro */
/*@media (prefers-color-scheme: dark) {
  .upct-logout-card h2 {
    color: #e5e7eb !important;
  }
}
@media (prefers-color-scheme: dark) {
  .upct-logout-card h2 strong {
    color: #ffffff;
    font-weight: 800;
  }
}

.logout-button {
  font-size: 0.88rem !important;
}

.logout-button .mdc-button__label {
  font-size: 0.88rem !important;
}*/

/* Quitar fondo de las tarjetas CAS que usan #content */
/*#content.mdc-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}*/

/* quitar fondo tarjeta CAS */
#content.mdc-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* modo oscuro */
@media (prefers-color-scheme: dark) {

  #content.mdc-card h1,
  #content.mdc-card h2,
  #content.mdc-card h3,
  #content.mdc-card p,
  #content.mdc-card span,
  #content.mdc-card div {
    color: #e5e7eb !important;
  }

}

@media (prefers-color-scheme: dark) {
  #content.mdc-card h2 {
    color: #f3f4f6 !important;
  }
}

/* CAS error - aplicación no autorizada */
#content.banner-danger,
#content.alert-danger {
  background: #f87171 !important;
  border: 0 !important;
  color: #000 !important;
  border-radius: 10px;
}

/* título */
#content.banner-danger h2,
#content.alert-danger h2 {
  font-weight: 600;
  color: #000 !important;
}

/* texto */
#content.banner-danger p,
#content.alert-danger p {
  color: #000 !important;
}

/* regla general */
#content.mdc-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Alerta CAS - aplicación no autorizada */
#content.banner.banner-danger.alert.alert-danger.mdc-card.card {
  background: #f87171 !important;
  border: 1px solid #dc2626 !important;
  border-radius: 10px !important;
  box-shadow: none !important;

  max-width: 420px !important;
  margin: 1rem auto !important;
}

/* título */
#content.banner.banner-danger.alert.alert-danger.mdc-card.card h2 {
  color: #000 !important;
  font-weight: 600;
  margin-bottom: .5rem;
}

/* texto */
#content.banner.banner-danger.alert.alert-danger.mdc-card.card p {
  color: #000 !important;
}

/* MODO OSCURO */
@media (prefers-color-scheme: dark) {

  #content.banner.banner-danger.alert.alert-danger.mdc-card.card {
    background: #dc2626 !important;   /* rojo un poco más oscuro */
    border: 1px solid #7f1d1d !important;
  }

  #content.banner.banner-danger.alert.alert-danger.mdc-card.card h2,
  #content.banner.banner-danger.alert.alert-danger.mdc-card.card p {
    color: #ffffff !important;
  }

}


.upct-actions {
    display: flex;
    align-items: center;
}

.upct-buttons {
    margin-left: auto;
    display: flex;
    gap: 10px;
}

.pau-info-msg {
    padding: 10px 14px;
    /*margin-bottom: 12px;*/
    border-radius: 8px;
    font-size: 0.9rem;
    line-height: 1.4;
	width: calc(100% - 35px);
    margin: 0 auto 12px auto;
}