/* Paginas de cuenta de Mis diplomas: campos y listas del sistema "Casco". */

.form-cuenta { display: grid; gap: .25rem; margin-top: 1rem; }
.form-cuenta label { font-family: var(--display); font-size: 1.25rem; font-weight: 600; color: var(--casco); margin-top: .75rem; }
.form-cuenta label span { font-family: 'Barlow', 'Segoe UI', sans-serif; font-size: 1rem; font-weight: 400; color: var(--texto-2); }
.form-cuenta input:not([type="hidden"]) {
  display: block;
  width: 100%;
  height: 52px;
  padding: 0 12px;
  background: #fff;
  color: var(--texto);
  border: 0;
  border-bottom: 2px solid var(--casco);
  border-radius: 0;
  font-size: 1.125rem;
}
.form-cuenta input::placeholder { color: var(--texto-2); opacity: 1; }
.form-cuenta input:focus-visible { outline: 3px solid #1f6fa8; outline-offset: -3px; }
.form-cuenta .btn { justify-self: start; margin-top: 1.25rem; }
/* Bootstrap quita el contorno de .btn en foco; aqui vuelve el de DESIGN.md. */
.contact-box .btn:focus-visible { outline: 3px solid var(--casco); outline-offset: 3px; box-shadow: none; }
/* Tras enviar, el formulario con el aviso queda a la vista y no debajo de la barra fija. */
.contact-box[id], .sub-cuenta[id] { scroll-margin-top: 7rem; }

.form-en-linea { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: .75rem; margin-top: .25rem; }
.form-en-linea .btn { margin-top: 0; }

.aviso-cuenta { margin: 1rem 0; padding: .75rem 1rem; border: 2px solid var(--casco); background: var(--acero); color: var(--texto); }
.aviso-error { border-color: #a32020; background: #fbecec; color: #6e1414; }

.nota-cuenta { margin: 1rem 0 0; font-size: 1rem; color: var(--texto-2); }
.nota-cuenta a, .contact-box p a { color: var(--casco); text-decoration: underline; }
.sub-cuenta { margin: 2rem 0 0; color: var(--casco); text-transform: uppercase; font-size: 1.5rem; }
.salir-cuenta { margin-top: 1.25rem; }

.lista-diplomas { list-style: none; margin: 1rem 0 0; padding: 0; border-top: 2px solid var(--casco); }
.lista-diplomas li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-bottom: 2px solid var(--acero); }
.lista-diplomas strong { display: block; font-family: var(--display); font-size: 1.3rem; line-height: 1.2; color: var(--casco); overflow-wrap: anywhere; }
.lista-diplomas span { font-size: 1rem; color: var(--texto-2); }
.lista-diplomas .btn { flex: none; }

.datos-cuenta { margin: 1rem 0 0; }
.datos-cuenta dt { font-family: var(--display); font-size: 1.1rem; font-weight: 600; color: var(--texto-2); }
.datos-cuenta dd { margin: 0 0 .6rem; color: var(--texto); overflow-wrap: anywhere; }

@media (max-width: 575.98px) {
  .lista-diplomas li { flex-direction: column; align-items: flex-start; }
  .form-en-linea { grid-template-columns: 1fr; }
  .form-en-linea .btn { justify-self: start; margin-top: .75rem; }
}

/* Formulario "Quiero ingresar" (contacto.php): lista, texto largo, casilla y campo trampa. */
.form-cuenta select, .form-cuenta textarea {
  display: block;
  width: 100%;
  padding: 0 12px;
  background: #fff;
  color: var(--texto);
  border: 0;
  border-bottom: 2px solid var(--casco);
  border-radius: 0;
  font-size: 1.125rem;
}
.form-cuenta select { height: 52px; }
.form-cuenta textarea { min-height: 120px; padding-top: 12px; resize: vertical; }
.form-cuenta select:focus-visible, .form-cuenta textarea:focus-visible { outline: 3px solid #1f6fa8; outline-offset: -3px; }
.form-cuenta .casilla-cuenta { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: .75rem; align-items: start; margin-top: 1rem; font-family: 'Barlow', 'Segoe UI', sans-serif; font-size: 1rem; font-weight: 400; color: var(--texto); line-height: 1.45; }
.form-cuenta .casilla-cuenta input { width: 24px; height: 24px; margin: 0; border-radius: 0; accent-color: var(--casco); }
.campo-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
#quiero-ingresar { scroll-margin-top: 7rem; }
@media (max-width: 575.98px) { .form-cuenta .btn { justify-self: stretch; } }