/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
body { margin: 0; }
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { display: block; }
audio, canvas, progress, video { display: inline-block; }
audio:not([controls]) { display: none; height: 0; }
progress { vertical-align: baseline; }
template, [hidden] { display: none; }
a { background-color: transparent; -webkit-text-decoration-skip: objects; }
a:active, a:hover { outline-width: 0; }
abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; }
b, strong { font-weight: inherit; }
b, strong { font-weight: bolder; }
dfn { font-style: italic; }
h1 { font-size: 2em; margin: 0.67em 0; }
mark { background-color: #ff0; color: #000; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
img { border-style: none; }
svg:not(:root) { overflow: hidden; }
code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; }
figure { margin: 1em 40px; }
hr { box-sizing: content-box; height: 0; overflow: visible; }
button, input, select, textarea { font: inherit; margin: 0; }
optgroup { font-weight: bold; }
button, input { overflow: visible; }
button, select { text-transform: none; }
button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }
legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; }
textarea { overflow: auto; }
[type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0; }
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }
[type="search"] { -webkit-appearance: textfield; outline-offset: -2px; }
[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-input-placeholder { color: inherit; opacity: 0.54; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }

/* ═══════════════════════════════════════════════════════
   FUENTES
═══════════════════════════════════════════════════════ */
@import "https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600&family=DM+Sans:wght@300;400;500;600&display=swap";

/* ═══════════════════════════════════════════════════════
   VARIABLES
═══════════════════════════════════════════════════════ */
:root {
  --bg-from:    #0f1923;
  --bg-to:      #1a2d42;
  --surface:    rgba(255, 255, 255, 0.05);
  --surface2:   rgba(255, 255, 255, 0.08);
  --border:     rgba(255, 255, 255, 0.10);
  --border-focus: rgba(180, 210, 255, 0.45);
  --accent:     #4fa3d1;
  --accent2:    #2d7fb8;
  --text:       #e8edf2;
  --muted:      rgba(255,255,255,0.45);
  --gold:       #c9a96e;
  --error:      #f87171;
  --radius:     14px;
  --shadow:     0 32px 80px rgba(0, 0, 0, 0.55);
}

/* ═══════════════════════════════════════════════════════
   GRID — sin tocar (igual que original)
═══════════════════════════════════════════════════════ */
.container {
  width: 1240px; margin: 0 auto; max-width: 100%;
  margin-left: auto; margin-right: auto;
}
.container:after { content: " "; display: block; clear: both; }
.textAlign-center { text-align: center; }
.hide { display: none; }
.grid-1 { max-width: 100%; margin-left: auto; margin-right: auto; }
.grid-1:after { content: " "; display: block; clear: both; }
.grid-1 > .col { width: 100%; float: left; margin-left: 0; margin-right: 0; }
.grid-1 > .col:last-child { margin-right: 0; }
.grid { max-width: 100%; margin-left: auto; margin-right: auto; }
.grid:after { content: " "; display: block; clear: both; }
.grid > .col-1 { width: 6.77966%; float: left; margin-right: 1.69492%; }
.grid > .col-1:last-child { margin-right: 0; }
.grid-2 { max-width: 100%; margin-left: auto; margin-right: auto; }
.grid-2:after { content: " "; display: block; clear: both; }
.grid-2 > .col { width: 49.15254%; float: left; margin-right: 1.69492%; }
.grid-2 > .col:last-child { margin-right: 0; }
.grid > .col-2 { width: 15.25424%; float: left; margin-right: 1.69492%; }
.grid > .col-2:last-child { margin-right: 0; }
.grid-3 { max-width: 100%; margin-left: auto; margin-right: auto; }
.grid-3:after { content: " "; display: block; clear: both; }
.grid-3 > .col { width: 32.20339%; float: left; margin-right: 1.69492%; }
.grid-3 > .col:last-child { margin-right: 0; }
.grid > .col-3 { width: 23.72881%; float: left; margin-right: 1.69492%; }
.grid > .col-3:last-child { margin-right: 0; }
.grid-4 { max-width: 100%; margin-left: auto; margin-right: auto; }
.grid-4:after { content: " "; display: block; clear: both; }
.grid-4 > .col { width: 23.72881%; float: left; margin-right: 1.69492%; }
.grid-4 > .col:last-child { margin-right: 0; }
.grid > .col-4 { width: 32.20339%; float: left; margin-right: 1.69492%; }
.grid > .col-4:last-child { margin-right: 0; }
.grid-5 { max-width: 100%; margin-left: auto; margin-right: auto; }
.grid-5:after { content: " "; display: block; clear: both; }
.grid-5 > .col { width: 18.64407%; float: left; margin-right: 1.69492%; }
.grid-5 > .col:last-child { margin-right: 0; }
.grid > .col-5 { width: 40.67797%; float: left; margin-right: 1.69492%; }
.grid > .col-5:last-child { margin-right: 0; }
.grid-6 { max-width: 100%; margin-left: auto; margin-right: auto; }
.grid-6:after { content: " "; display: block; clear: both; }
.grid-6 > .col { width: 15.25424%; float: left; margin-right: 1.69492%; }
.grid-6 > .col:last-child { margin-right: 0; }
.grid > .col-6 { width: 49.15254%; float: left; margin-right: 1.69492%; }
.grid > .col-6:last-child { margin-right: 0; }
.grid-7 { max-width: 100%; margin-left: auto; margin-right: auto; }
.grid-7:after { content: " "; display: block; clear: both; }
.grid-7 > .col { width: 12.83293%; float: left; margin-right: 1.69492%; }
.grid-7 > .col:last-child { margin-right: 0; }
.grid > .col-7 { width: 57.62712%; float: left; margin-right: 1.69492%; }
.grid > .col-7:last-child { margin-right: 0; }
.grid-8 { max-width: 100%; margin-left: auto; margin-right: auto; }
.grid-8:after { content: " "; display: block; clear: both; }
.grid-8 > .col { width: 11.01695%; float: left; margin-right: 1.69492%; }
.grid-8 > .col:last-child { margin-right: 0; }
.grid > .col-8 { width: 66.10169%; float: left; margin-right: 1.69492%; }
.grid > .col-8:last-child { margin-right: 0; }
.grid-9 { max-width: 100%; margin-left: auto; margin-right: auto; }
.grid-9:after { content: " "; display: block; clear: both; }
.grid-9 > .col { width: 9.60452%; float: left; margin-right: 1.69492%; }
.grid-9 > .col:last-child { margin-right: 0; }
.grid > .col-9 { width: 74.57627%; float: left; margin-right: 1.69492%; }
.grid > .col-9:last-child { margin-right: 0; }
.grid-10 { max-width: 100%; margin-left: auto; margin-right: auto; }
.grid-10:after { content: " "; display: block; clear: both; }
.grid-10 > .col { width: 8.47458%; float: left; margin-right: 1.69492%; }
.grid-10 > .col:last-child { margin-right: 0; }
.grid > .col-10 { width: 83.05085%; float: left; margin-right: 1.69492%; }
.grid > .col-10:last-child { margin-right: 0; }
.grid-11 { max-width: 100%; margin-left: auto; margin-right: auto; }
.grid-11:after { content: " "; display: block; clear: both; }
.grid-11 > .col { width: 7.55008%; float: left; margin-right: 1.69492%; }
.grid-11 > .col:last-child { margin-right: 0; }
.grid > .col-11 { width: 91.52542%; float: left; margin-right: 1.69492%; }
.grid > .col-11:last-child { margin-right: 0; }
.grid-12 { max-width: 100%; margin-left: auto; margin-right: auto; }
.grid-12:after { content: " "; display: block; clear: both; }
.grid-12 > .col { width: 6.77966%; float: left; margin-right: 1.69492%; }
.grid-12 > .col:last-child { margin-right: 0; }
.grid > .col-12 { width: 100%; float: left; margin-left: 0; margin-right: 0; }
.grid > .col-12:last-child { margin-right: 0; }

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

body {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  background: linear-gradient(135deg, var(--bg-from) 0%, var(--bg-to) 100%);
  min-height: 100vh;
  color: var(--text);
}

/* Fondo con patrón sutil */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(79, 163, 209, 0.08) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 20%, rgba(201, 169, 110, 0.06) 0%, transparent 45%),
    radial-gradient(ellipse at 60% 80%, rgba(45, 127, 184, 0.07) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

body.page-sidebar,
body.page-background {
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  overflow: hidden;
}
body.page-sidebar .page,
body.page-background .page {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
body.page-sidebar .content,
body.page-background .content {
  padding: 50px 0;
}
body.page-sidebar .content > h1,
body.page-background .content > h1 {
  color: var(--text);
}
body.page-sidebar .content > p,
body.page-background .content > p {
  font-size: 1.1em;
  line-height: 1.6em;
  color: var(--muted);
}
body.page-sidebar .content > p a,
body.page-background .content > p a {
  color: var(--accent);
  display: inline-block;
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
}
body.page-sidebar:before,
body.page-background:before {
  background: rgba(0, 0, 0, 0.55);
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0 !important;
  position: absolute;
  z-index: 0;
}
body.page-sidebar:before { top: -500px; }
body.page-sidebar .form {
  box-shadow: none;
}
body.page-sidebar .form:after {
  background: rgba(15, 25, 35, 0.97);
  content: "";
  display: block;
  height: 9999px;
  width: 9999px;
  left: 0;
  top: -500px;
  position: absolute;
  z-index: -1;
}

/* ═══════════════════════════════════════════════════════
   TIPOGRAFÍA
═══════════════════════════════════════════════════════ */
h1 {
  font-family: 'Playfair Display', serif;
  font-size: 2.2em;
  font-weight: 600;
  margin: 0 0 36px;
  color: var(--text);
  letter-spacing: 0.5px;
  line-height: 1.2;
}

h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.6em;
  font-weight: 600;
  margin: 0 0 32px;
  color: var(--text);
  letter-spacing: 0.5px;
}

h4 {
  font-family: 'DM Sans', sans-serif;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 0.72em;
  margin-top: 0;
  color: var(--gold);
  opacity: 1;
  font-weight: 500;
}

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 30px 0;
}

/* ═══════════════════════════════════════════════════════
   HEADER
═══════════════════════════════════════════════════════ */
.header {
  height: auto;
  padding: 48px 0 36px;
  background: transparent;
  text-align: center;
  z-index: 1;
  position: relative;
}
.header .logo {
  position: relative;
  z-index: 2;
  filter: brightness(1.1);
}
.header.header-background {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  overflow: hidden;
  display: table;
  width: 100%;
  position: relative;
}
.header.header-background:after {
  background: rgba(15, 25, 35, 0.88);
  position: absolute;
  top: 0; left: 0;
  content: "";
  display: block;
  width: 100%; height: 100%;
}

/* ═══════════════════════════════════════════════════════
   FORM — PIEZA CENTRAL DEL LOGIN
═══════════════════════════════════════════════════════ */
.form {
  border-radius: var(--radius);
  padding: 44px 48px;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--border);
  box-shadow: var(--shadow),
              inset 0 1px 0 rgba(255,255,255,0.07);
  position: relative;
  animation: fadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.form.form-center {
  width: 460px;
  margin: -80px auto 0;
  z-index: 1;
}
.form.form-alpha {
  background: none;
  box-shadow: none;
  border: none;
  backdrop-filter: none;
}
.form.form-alpha h2 { color: var(--text); }

/* ── Línea decorativa superior ── */
.form::before {
  content: '';
  position: absolute;
  top: 0; left: 48px; right: 48px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  border-radius: 1px;
}

/* ── CAMPOS ── */
.form > .control {
  margin-bottom: 22px;
}
.form > .control .label,
.form > .control .input,
.form > .control select {
  display: block;
}

.form > .control .label {
  font-family: 'DM Sans', sans-serif;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 2px;
  font-size: 0.7em;
  color: var(--muted);
  margin-bottom: 8px;
}

.form > .control .input,
.form > .control select,
.form .scFormObjectOdd {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 13px 16px;
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  transition: all 0.25s ease;
  outline: none;
}

.form > .control .input::placeholder,
.form > .control select::placeholder {
  color: rgba(255,255,255,0.25);
}

.form > .control .input:focus,
.form > .control select:focus,
.form .scFormObjectOdd:focus,
.form .scFormObjectOddFocus {
  border-color: var(--border-focus);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 3px rgba(79, 163, 209, 0.15),
              0 2px 8px rgba(0,0,0,0.2);
  outline: none;
}

.form > .control .input.input-outline {
  background: none;
  color: var(--text);
  border-color: rgba(255,255,255,0.2);
}
.form > .control .input.input-outline:focus {
  color: var(--text);
}

/* ── BOTÓN ── */
.form > .submit {
  margin-top: 30px;
  margin-bottom: 16px;
}

.form > .submit .button {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: none;
  border-radius: 10px;
  display: inline-block;
  padding: 14px 20px;
  width: auto;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 6px 24px rgba(45, 127, 184, 0.4),
              0 2px 6px rgba(0,0,0,0.3);
  position: relative;
  overflow: hidden;
}

/* Shimmer en hover */
.form > .submit .button::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transition: left 0.4s ease;
}
.form > .submit .button:hover::after {
  left: 100%;
}

.form > .submit .button.button-block {
  width: 100%;
}

.form > .submit .button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(45, 127, 184, 0.5),
              0 4px 10px rgba(0,0,0,0.3);
  background: linear-gradient(135deg, #5bb8e8 0%, #3a8fcc 100%);
}

.form > .submit .button:active {
  transform: translateY(0);
  box-shadow: 0 4px 14px rgba(45, 127, 184, 0.35);
}

/* ═══════════════════════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════════════════════ */
.sidebar {
  background: rgba(15, 25, 35, 0.97);
  position: relative;
  border-right: 1px solid var(--border);
}
.sidebar:after {
  background: rgba(15, 25, 35, 0.97);
  content: "";
  display: block;
  height: 9999px;
  width: 9999px;
  left: 0;
  position: absolute;
  top: 0;
  z-index: -1;
}
.sidebar .form {
  box-shadow: none;
  border: none;
  background: none;
  backdrop-filter: none;
  margin: 0 auto;
  padding: 80px 50px;
}
.sidebar .form::before { display: none; }

/* ═══════════════════════════════════════════════════════
   CONTAINER-SMALL
═══════════════════════════════════════════════════════ */
.container-small {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
  max-width: 1000px;
  border-radius: var(--radius);
}
.container-small.container-background,
.container-small.container-alpha,
.container-small.container-color {
  overflow: hidden;
}
.container-small.container-background .background,
.container-small.container-alpha .background,
.container-small.container-color .background {
  background-size: cover;
  background-position: center left;
  background-repeat: no-repeat;
  float: left;
  width: 60%;
  height: auto;
  overflow: hidden;
  position: relative;
}
.container-small.container-background .background .content,
.container-small.container-alpha .background .content,
.container-small.container-color .background .content {
  position: relative;
  z-index: 2;
}
.container-small.container-alpha {
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.06);
}
.container-small.container-background .background:after {
  background: rgba(10, 20, 30, 0.6);
  content: "";
  display: block;
  height: 9999px;
  width: 9999px;
  left: 0;
  position: absolute;
  top: 0;
  z-index: 1;
}
.container-small .form {
  float: right;
  width: 40%;
  height: auto;
}
.container-small .content {
  padding-left: 40px !important;
  padding-right: 40px !important;
}
.container-small .form {
  border-radius: 0;
  box-shadow: none;
  border: none;
  background: rgba(15, 25, 35, 0.6);
  backdrop-filter: blur(10px);
}
.container-small .form::before { display: none; }

/* ═══════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════ */
.footer {
  margin-top: 28px;
  font-size: 0.75em;
  color: var(--muted);
  text-align: center;
}

/* ═══════════════════════════════════════════════════════
   LINKS DEL MENÚ
═══════════════════════════════════════════════════════ */
.class-links a {
  text-decoration: none;
  color: var(--accent);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  display: block;
  margin-bottom: 6px;
  transition: color 0.2s, padding-left 0.2s;
}
.class-links a:hover,
.class-links a:active,
.class-links a:focus {
  color: #fff;
  font-weight: 500;
  padding-left: 4px;
  text-decoration: none;
}

/* ═══════════════════════════════════════════════════════
   MENSAJES DE ERROR
═══════════════════════════════════════════════════════ */
#id_error_display_fixed {
  left: 50%;
  transform: translate(-50%, -50%);
  top: 50%;
  padding: 20px 24px;
  background: rgba(20, 32, 46, 0.96);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(248, 113, 113, 0.3);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  color: var(--text);
}
td.scFormErrorMessage {
  padding: 25px 0 5px !important;
  color: var(--error);
  font-size: 13px;
}
td.scFormErrorTitleFont {
  color: rgba(0, 0, 0, 0);
  position: relative;
  top: 8px;
}
td.scFormErrorTitleFont img {
  position: absolute;
  left: 50%;
  margin-left: -15px;
  margin-top: -5px;
}
a.scButton_default {
  position: absolute;
  right: 8px;
  top: 8px;
  font-size: 10px;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 2px 7px;
  text-decoration: none;
  color: var(--muted);
  background: rgba(255,255,255,0.05);
  transition: all 0.2s;
}
a.scButton_default:hover {
  color: var(--text);
  border-color: rgba(255,255,255,0.25);
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
  .container-small.container-background .background,
  .container-small.container-alpha .background,
  .container-small.container-color .background { width: 100%; }
  .container-small .form { width: 100%; }
  body.page-sidebar .page, body.page-background .page { width: 90%; }
  body.page-sidebar, body.page-background { overflow: scroll; width: auto; height: auto; }
  body.page-sidebar.bg-half-img, body.page-background.bg-half-img { overflow: hidden; position: inherit; }
  body.page-sidebar .form.half-size { height: 5000px; width: 118%; }
  body.page-sidebar .form:after { height: auto; width: auto; }
  .container-small { max-width: 100%; }
  body.page-sidebar.page-background.bg-half-img { background-size: 151% !important; }
  body.page-sidebar .page, body.page-background .page { position: relative; top: 0; left: 0; transform: inherit; margin: auto; }
}
@media (max-width: 768px) {
  body.page-sidebar .content, body.page-background .content { padding: 20px 0; }
  .container-small .content { padding-left: 20px !important; padding-right: 20px !important; }
  .form { padding: 32px 28px; }
  body.page-sidebar.bg-half-img, body.page-background.bg-half-img { overflow: inherit; }
  body.bg-half-img .col-4, body.bg-half-img .col-7 { width: 100% !important; height: auto !important; position: relative !important; padding: 0px 5%; }
  body.page-sidebar .form.half-size { width: 100%; height: auto; }
}
@media (max-width: 767px) {
  body.page-sidebar .page, body.page-background .page { position: relative; top: 0; left: 0; transform: inherit; margin: auto; }
  body.page-sidebar, body.page-background { position: absolute; }
  body.page-sidebar.bg-half-img .page, body.page-background.bg-half-img .page { width: 100%; background: rgba(0,0,0,0.5); }
  body.page-sidebar.bg-half-img:before, body.page-background.bg-half-img:before { background: none; }
  .form.form-center { width: 340px; }
}