/*** Mi cuenta ***/

.mi-cuenta-card {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 20px;
    position: relative; /* *** AÑADIDO: Necesario para posicionar el enlace Salir *** */
    box-sizing: border-box;
    overflow: hidden; /* Opcional: Evita que el enlace se salga si los valores son incorrectos */
}

.enarmango-back-link {
    position: absolute;
    top: 15px;        /* Ajusta distancia desde arriba */
    right: 15px;       /* Ajusta distancia desde la derecha */
    font-size: 0.85em; /* Tamaño de letra más pequeño */
    color: #777;       /* Color grisáceo */
    text-decoration: none; /* Sin subrayado */
    padding: 3px 5px;  /* Pequeño padding para área de clic */
    line-height: 1;
    z-index: 5;      /* Por si acaso hay otros elementos */
    transition: color 0.2s ease;
}

.enarmango-back-link:hover,
.enarmango-back-link:focus {
    color: #d32f2f; /* Rojo en hover/focus */
    text-decoration: underline;
    outline: none;
}

.edit-link,
.enarmango-logout-link {
    display: block; /* Para que cada uno ocupe su propia línea */
    margin-top: 10px; /* Espacio por encima del enlace (ajusta según necesites) */
    text-align: left; /* Alineación (o center/right si prefieres) */
    font-size: 0.9em;
    cursor: pointer;
}

/* Estilo específico para Editar cuenta */
.edit-link {
    color: #0073aa; /* Azul WP */
    text-decoration: underline;
}
.edit-link:hover,
.edit-link:focus {
    color: #005075; /* Azul más oscuro */
    text-decoration: none; /* Quitar subrayado en hover */
     outline: none;
}

/* Estilo específico para Cerrar sesión */
.enarmango-logout-link {
    color: #d32f2f; /* Rojo para indicar acción final/peligrosa */
    text-decoration: none; /* Sin subrayado por defecto */
     margin-top: 5px; /* Menos espacio si está justo debajo de editar */
}
.enarmango-logout-link:hover,
.enarmango-logout-link:focus {
    color: #a00; /* Rojo más oscuro */
    text-decoration: underline; /* Añadir subrayado en hover */
     outline: none;
}

.mensaje-borrar-cuenta {
    padding-top: 1rem;
}

  .mi-cuenta-grid {
      display: grid;
      gap: 20px;
      grid-template-columns: 1fr 1fr;
      margin-top: 20px;
  }
  @media (max-width: 768px) {
    .mi-cuenta-grid {
      grid-template-columns: 1fr; /* en mobile, 1 columna */
    }
    
    .enarmango-back-link {
        top: 10px;    /* Ajustar posición en móvil */
        right: 10px;   /* Ajustar posición en móvil */
        font-size: 0.8em;
    }
    
    .edit-link,
    .enarmango-logout-link {
        font-size: 0.85em; /* Un poco más pequeño */
        margin-top: 8px; /* Ajustar espaciado vertical */
    }
    .enarmango-logout-link {
         margin-top: 4px;
    }
  }
  .mi-cuenta-card {
      background-color: #fff;
      border: 1px solid #ccc;
      border-radius: 8px;
      padding: 20px;
  }
  .edit-link {
      color: #0073aa;
      text-decoration: underline;
      cursor: pointer;
  }
  
/* Contenedor general del modal */
.modal {
  display: none; 
  position: fixed;
  z-index: 1000;
  left: 0; 
  top: 0;
  width: 100%; 
  height: 100%;
  overflow: auto; 
  background-color: rgba(0,0,0,0.4);
  animation: fadeInBg 0.3s ease-in-out;
}

/* Caja del contenido del modal */
.modal-content {
  background-color: #fff;
  margin: 5% auto; 
  padding: 20px 30px;
  width: 90%;
  max-width: 500px;
  border-radius: 8px;
  position: relative;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  animation: fadeInModal 0.3s ease-in-out;
}

/* Botón de cierre (X) */
.close {
  color: #aaa;
  float: right;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
}
.close:hover, .close:focus {
  color: #000;
}

/* Título del modal */
.modal-content h3 {
  margin-top: 0;
  margin-bottom: 1rem;
  text-align: center; 
  font-size: 1.25rem;
}

/* Cada <p> dentro del formulario */
#mi-cuenta-form-modal p {
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* label arriba, campo abajo */
}

/* Etiqueta (label) */
#mi-cuenta-form-modal p label {
  font-weight: 600;
  margin-bottom: 5px;
}

/* Inputs y select con ancho completo, bordes redondeados */
#mi-cuenta-form-modal p input[type="text"],
#mi-cuenta-form-modal p input[type="number"],
#mi-cuenta-form-modal p select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.95rem;
  transition: border-color 0.2s;
}
#mi-cuenta-form-modal p input[type="text"]:focus,
#mi-cuenta-form-modal p input[type="number"]:focus,
#mi-cuenta-form-modal p select:focus {
  border-color: #0073aa;
  outline: none;
}

/* Botón "Guardar cambios" */
.enarmango-button {
  background-color: #0073aa;
  color: #fff;
  border: none;
  padding: 10px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.95rem;
  transition: background-color 0.2s;
}
.enarmango-button:hover {
  background-color: #005b85;
}

/* Animaciones suaves */
@keyframes fadeInBg {
  from { background-color: rgba(0,0,0,0); }
  to   { background-color: rgba(0,0,0,0.4); }
}
@keyframes fadeInModal {
  from { transform: translateY(-20px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}