/* Presentación de las tarjetas existentes. Referencia visual: Docentes ProActivos. */
#dpca_account_access {
    --dpca-gold: #ffba08;
    --dpca-ivory: #fff8eb;
    --dpca-ink: #151614;
    position: relative;
    isolation: isolate;
    padding: clamp(20px, 4vw, 36px);
    border: 1px solid rgba(255, 186, 8, .26);
    border-radius: 24px;
    background: radial-gradient(ellipse at 100% 0, rgba(255, 186, 8, .12), transparent 50%), #0d0f0e;
    color: #fffdf8;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif !important;
    box-shadow: 0 18px 42px rgba(13, 15, 14, .12);
}
#dpca_account_access *,
#dpca_account_access *::before,
#dpca_account_access *::after { box-sizing: border-box; }
#dpca_account_access::after {
    content: "";
    position: absolute;
    top: 14px;
    right: 24px;
    width: 66px;
    height: 100px;
    background: url('../images/proactibot-mascot.png') center / contain no-repeat;
    pointer-events: none;
}
#dpca_account_access > h3 {
    text-align: center;
    margin: 0 0 24px;
    color: #fffdf8 !important;
    font-family: "Anton", Impact, "Arial Narrow", sans-serif;
    font-size: clamp(24px, 3.2vw, 34px);
    font-weight: 400;
    letter-spacing: .025em;
    line-height: 1.16;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}
#dpca_account_access > h3:first-child { min-height: 74px; padding-right: 78px; }
#dpca_account_access > div + h3 { margin-top: 32px; }
#dpca_account_access > div {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 20px !important;
}
#dpca_account_access > div > div {
    flex: 1 1 320px;
    max-width: 420px;
    min-width: 0;
    padding: 24px !important;
    border: 1px solid rgba(255, 186, 8, .65) !important;
    border-radius: 16px !important;
    background: var(--dpca-ivory) !important;
    box-shadow: 0 5px 0 #9b6300, 0 14px 28px rgba(0, 0, 0, .18) !important;
    opacity: 1 !important;
}
#dpca_account_access h4 {
    margin-bottom: 24px !important;
    color: var(--dpca-ink) !important;
    font-family: inherit;
    font-size: 1.125rem !important;
    font-weight: 800 !important;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
#dpca_account_access a,
#dpca_account_access > div > div > span {
    min-height: 48px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 14px 16px !important;
    border-radius: 10px !important;
    font-size: .82rem;
    font-weight: 800 !important;
    line-height: 1.4;
    letter-spacing: .025em;
    text-align: center;
    overflow-wrap: anywhere;
}
#dpca_account_access a {
    background: linear-gradient(180deg, #ffd158, var(--dpca-gold)) !important;
    color: var(--dpca-ink) !important;
    box-shadow: 0 3px 0 #ad6f00;
    text-decoration: none !important;
}
#dpca_account_access a:hover { filter: brightness(1.06); }
#dpca_account_access a:focus-visible { outline: 3px solid #151614; outline-offset: 4px; }
#dpca_account_access > div > div:has(> span) {
    border-color: #45443c !important;
    background: #1c1e1b !important;
    box-shadow: none !important;
}
#dpca_account_access > div > div:has(> span) h4 { color: #fff8eb !important; }
#dpca_account_access > div > div > span {
    background: #34362f !important;
    color: #eee8da !important;
    box-shadow: none;
}
@media (max-width: 480px) {
    #dpca_account_access { padding: 20px 16px; border-radius: 18px; }
    #dpca_account_access::after { right: 14px; width: 52px; height: 80px; }
    #dpca_account_access > h3:first-child { padding-right: 64px; min-height: 68px; }
    #dpca_account_access > div > div { padding: 20px !important; }
}
@media (forced-colors: active) {
    #dpca_account_access, #dpca_account_access > div > div { border: 1px solid CanvasText !important; }
    #dpca_account_access a { border: 1px solid LinkText; }
    #dpca_account_access::after { display: none; }
}

/* Compatibilidad visual aprobada en el clon: tarjetas, navegacion y acceso. */
/* DPCA: vista visual en clon, 2026-09-14. Sólo presentación. */
body.woocommerce-account .woocommerce-MyAccount-content:has(#dpca_account_access) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-width: 0 !important;
  margin-top: 0 !important;
}
body.woocommerce-account #dpca_account_access {
  padding: clamp(20px, 4vw, 36px) !important;
}
body.woocommerce-account #dpca_account_access > h3 {
  margin: 0 0 24px !important;
  font-weight: 400 !important;
  line-height: 1.16 !important;
  text-align: center !important;
}
body.woocommerce-account #dpca_account_access > div + h3 {
  margin-top: 32px !important;
}
@media (max-width: 480px) {
  body.woocommerce-account #dpca_account_access { padding: 20px 16px !important; }
}

/* DPCA: vista previa de menu e inicio de sesion, 2026-09-14. */
body.woocommerce-account .woocommerce-MyAccount-navigation ul {
  background: #0d0f0e !important;
  border: 1px solid rgba(255,186,8,.26) !important;
  border-radius: 16px !important;
  padding: 8px !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.18) !important;
}
body.woocommerce-account .woocommerce-MyAccount-navigation ul li {
  border: 0 !important;
  background: transparent !important;
}
body.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  min-height: 46px;
  padding: 12px 18px !important;
  border-radius: 10px !important;
  color: #fff8eb !important;
  background: transparent !important;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  white-space: normal !important;
}
body.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
  background: #262820 !important;
  color: #ffd158 !important;
}
body.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
  background: linear-gradient(180deg,#ffd158,#ffba08) !important;
  color: #151614 !important;
  box-shadow: 0 3px 0 #ad6f00 !important;
}
body.woocommerce-account form.woocommerce-form-login {
  box-sizing: border-box;
  width: 100%;
  max-width: 480px !important;
  padding: clamp(24px,5vw,40px) !important;
  border: 1px solid rgba(255,186,8,.26) !important;
  border-radius: 24px !important;
  background: radial-gradient(ellipse at 100% 0,rgba(255,186,8,.12),transparent 50%),#0d0f0e !important;
  color: #fff8eb !important;
  font-family: "Inter",system-ui,-apple-system,"Segoe UI",sans-serif !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.18) !important;
}
body.woocommerce-account form.woocommerce-form-login label {
  color: #fff8eb !important;
  font-weight: 600;
}
body.woocommerce-account form.woocommerce-form-login .input-text {
  background: #fff8eb !important;
  color: #151614 !important;
  border: 1px solid rgba(255,186,8,.65) !important;
  border-radius: 10px !important;
  min-height: 48px;
  box-sizing: border-box;
}
body.woocommerce-account form.woocommerce-form-login .woocommerce-button[name="login"] {
  background: linear-gradient(180deg,#ffd158,#ffba08) !important;
  color: #151614 !important;
  border-radius: 10px !important;
  min-height: 48px;
  font-weight: 800 !important;
  box-shadow: 0 3px 0 #ad6f00 !important;
}
body.woocommerce-account form.woocommerce-form-login .lost_password a {
  color: #ffd158 !important;
}
body.woocommerce-account .woocommerce-MyAccount-navigation a:focus-visible,
body.woocommerce-account form.woocommerce-form-login input:focus-visible,
body.woocommerce-account form.woocommerce-form-login button:focus-visible,
body.woocommerce-account form.woocommerce-form-login a:focus-visible {
  outline: 3px solid #ffba08 !important;
  outline-offset: 4px;
}

/* DPCA: etiquetas del menu sin cortes; las opciones se acomodan por filas. */
body.woocommerce-account .woocommerce-MyAccount-navigation ul li {
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
}
body.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  width: auto !important;
  white-space: nowrap !important;
}

/* DPCA: titulo del login en su flujo y controles legibles. */
body.woocommerce-account .woocommerce > h2:has(+ form.woocommerce-form-login) {
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  transform: none !important;
  z-index: auto !important;
  width: 100% !important;
  max-width: 480px !important;
  margin: 0 auto 24px !important;
  padding: 0 !important;
  color: #fff8eb !important;
  font-family: "Anton", Impact, "Arial Narrow", sans-serif !important;
  font-size: clamp(28px,4vw,36px) !important;
  font-weight: 400 !important;
  line-height: 1.16 !important;
  letter-spacing: .025em !important;
  text-align: center !important;
}
body.woocommerce-account form.woocommerce-form-login {
  margin: 0 auto !important;
}
body.woocommerce-account form.woocommerce-form-login .show-password-input,
body.woocommerce-account form.woocommerce-form-login .show-password-input::before {
  color: #151614 !important;
}
body.woocommerce-account form.woocommerce-form-login .input-text:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #fff8eb inset !important;
  -webkit-text-fill-color: #151614 !important;
}


/* DPCA: vista previa de recuperar contrasena en clon, 2026-09-14. */
body.woocommerce-account form.woocommerce-ResetPassword {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 480px !important;
    margin: 0 auto !important;
    padding: clamp(24px, 4vw, 40px) !important;
    border: 1px solid rgba(255, 186, 8, .26) !important;
    border-radius: 24px !important;
    background: radial-gradient(ellipse at top right, rgba(255, 186, 8, .08), transparent 65%), #0d0f0e !important;
    color: #fff8eb !important;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .25) !important;
}
body.woocommerce-account form.woocommerce-ResetPassword p {
    color: #fff8eb !important;
    line-height: 1.7 !important;
}
body.woocommerce-account form.woocommerce-ResetPassword .form-row {
    float: none !important;
    width: 100% !important;
    margin: 0 0 20px !important;
}
body.woocommerce-account form.woocommerce-ResetPassword .form-row:last-child {
    margin-bottom: 0 !important;
}
body.woocommerce-account form.woocommerce-ResetPassword label {
    color: #fff8eb !important;
    font-weight: 600 !important;
}
body.woocommerce-account form.woocommerce-ResetPassword .input-text {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 48px !important;
    padding: 12px 14px !important;
    background: #fff8eb !important;
    color: #0d0f0e !important;
    border: 1px solid rgba(255, 186, 8, .65) !important;
    border-radius: 10px !important;
}
body.woocommerce-account form.woocommerce-ResetPassword button[type="submit"] {
    width: 100% !important;
    min-height: 48px !important;
    padding: 14px 18px !important;
    background: linear-gradient(135deg, #ffd158, #ffba08) !important;
    color: #0d0f0e !important;
    border-radius: 10px !important;
    font-weight: 800 !important;
    white-space: normal !important;
    box-shadow: 0 3px 0 #9c7000 !important;
}
body.woocommerce-account form.woocommerce-ResetPassword :is(input, button):focus-visible {
    outline: 3px solid #ffba08 !important;
    outline-offset: 3px !important;
}
/* Fin DPCA: vista previa de recuperar contrasena. */

/* DPCA: vista previa de tipografia sutil, 2026-09-14. */
body.woocommerce-account #dpca_account_access > h3,
body.woocommerce-account .woocommerce > h2:has(+ form.woocommerce-form-login) {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif !important;
    font-weight: 600 !important;
    font-size: clamp(22px, 2.5vw, 28px) !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
}
body.woocommerce-account #dpca_account_access h4,
body.woocommerce-account #dpca_account_access a,
body.woocommerce-account form.woocommerce-form-login button[name="login"],
body.woocommerce-account form.woocommerce-ResetPassword button[type="submit"] {
    font-weight: 600 !important;
}
body.woocommerce-account .woocommerce-MyAccount-navigation a,
body.woocommerce-account form.woocommerce-ResetPassword label,
body.woocommerce-account form.woocommerce-form-login label {
    font-weight: 500 !important;
}
body.woocommerce-account form.woocommerce-ResetPassword {
    display: grid !important;
    grid-template-columns: clamp(24px, 4vw, 40px) minmax(0, 1fr) clamp(24px, 4vw, 40px);
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    isolation: isolate;
}
body.woocommerce-account form.woocommerce-ResetPassword::before {
    content: "";
    grid-column: 1 / -1;
    grid-row: 2 / 5;
    z-index: -1;
    border: 1px solid rgba(255, 186, 8, .26);
    border-radius: 24px;
    background: radial-gradient(ellipse at top right, rgba(255, 186, 8, .08), transparent 65%), #0d0f0e;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .25);
    pointer-events: none;
}
body.woocommerce-account form.woocommerce-ResetPassword > p:first-child {
    grid-column: 1 / -1;
    grid-row: 1;
    margin: 0 0 24px !important;
    font-weight: 400 !important;
}
body.woocommerce-account form.woocommerce-ResetPassword > p.form-row-first {
    grid-column: 2;
    grid-row: 2;
    padding-top: 32px !important;
}
body.woocommerce-account form.woocommerce-ResetPassword > p.form-row-last {
    grid-column: 2;
    grid-row: 3;
}
body.woocommerce-account form.woocommerce-ResetPassword > .clear {
    display: none;
}
body.woocommerce-account form.woocommerce-ResetPassword > p.form-row:not(.form-row-first):not(.form-row-last) {
    grid-column: 2;
    grid-row: 4;
    margin-bottom: 0 !important;
    padding-bottom: 32px !important;
}
/* Fin DPCA: vista previa de tipografia sutil. */

/* DPCA: ajuste de grosor solicitado por Nacho, 2026-09-14. */
body.woocommerce-account #dpca_account_access > h3,
body.woocommerce-account .woocommerce > h2:has(+ form.woocommerce-form-login),
body.woocommerce-account #dpca_account_access a,
body.woocommerce-account form.woocommerce-form-login button[name="login"],
body.woocommerce-account form.woocommerce-ResetPassword button[type="submit"] {
    font-weight: 700 !important;
}
/* Fin DPCA: ajuste de grosor. */


/* DPCA: titulo principal centrado, 2026-09-14. */
body.woocommerce-account #dpca_account_access > h3:first-child {
    text-align: center !important;
    padding-left: 78px;
}
@media (max-width: 480px) {
    body.woocommerce-account #dpca_account_access > h3:first-child { padding-left: 64px; }
}
/* Fin DPCA: titulo principal centrado. */

/* DPCA: titulos de tarjetas centrados, 2026-09-14. */
body.woocommerce-account #dpca_account_access h4 { text-align: center !important; }
/* Fin DPCA: titulos de tarjetas centrados. */

/* Contacto de renovación solicitado por el usuario; conserva el estado del acceso. */
#dpca_account_access > div > div:has(> a.dpca_renewal_contact) {
    display: flex !important;
    flex-direction: column;
    align-self: stretch;
}
#dpca_account_access > div > div:has(> a.dpca_renewal_contact) > span {
    margin-top: auto !important;
}
#dpca_account_access a.dpca_renewal_contact {
    margin-top: 12px !important;
    max-width: 100%;
    white-space: normal !important;
}
#dpca_account_access a.dpca_renewal_contact:focus-visible {
    outline-color: #ffba08;
}
