/* ====================================
   LOGIN
   ==================================== */

/* Centrar tarjeta en la pantalla */
.accounts-auth-wrapper {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}

/* Tarjeta compacta */
.accounts-auth-card {
    width: 100%;
    max-width: 380px;
    background-color: #ffffff;
    border-radius: 18px;
    padding: 24px 22px 20px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.18);
}

/* Formulario */
.accounts-auth-form .form-label {
    font-size: 0.9rem;
    font-weight: 500;
}

/* Campos redondeados */
.accounts-input {
    border-radius: 999px;
    background-color: #f9fafb;
    border: 1px solid #d1d5db;
    padding: 10px 14px;
    font-size: 0.95rem;
}

.accounts-input:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.18rem rgba(13, 110, 253, 0.25);
}

/* Botón principal */
.accounts-btn-primary {
    border-radius: 999px;
    padding: 10px 0;
    font-weight: 600;
    background: linear-gradient(135deg, #0d6efd, #0b4ab8);
    border: none;
    color: #fff;
}

.accounts-btn-primary:hover {
    background: linear-gradient(135deg, #0b4ab8, #073a92);
}

/* Toggle ver contraseña */
.accounts-toggle-password {
    font-size: 0.8rem;
}

/* ====================================
   PANEL GENERAL
   ==================================== */

.accounts-panel {
    /* un poco más de aire en la página de cuentas */
    padding-top: 1rem;
    padding-bottom: 2rem;
}

.accounts-panel-header {
    border-bottom: 1px solid rgba(0,0,0,0.05);
    padding-bottom: 0.75rem;
}

.accounts-panel-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 2px rgba(13,110,253,0.35);
}

.accounts-panel-card {
    border-radius: 12px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.accounts-panel-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1.2rem rgba(0,0,0,0.08);
}

.accounts-card-icon {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

/* Tarjeta "disabled" */
.accounts-card-disabled {
    opacity: 0.75;
}

/* Responsive panel */
@media (max-width: 767.98px) {
    .accounts-panel-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
}

/* ====================================
   PERFIL DE USUARIO
   ==================================== */

/* para que el contenido no se vaya tan ancho */
.accounts-profile-page {
    max-width: 1080px;
}

/* Secciones del formulario de perfil */
.accounts-profile-section {
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    background-color: #ffffff;
}

/* Título de sección */
.accounts-section-title {
    letter-spacing: 0.06em;
    font-weight: 600;
    font-size: 0.78rem;
}

/* Avatares tamaños */
.accounts-panel-avatar-lg {
    width: 64px;
    height: 64px;
}

.accounts-panel-avatar-md {
    width: 88px;
    height: 88px;
}

/* Wrapper para el avatar de la tarjeta derecha */
.accounts-avatar-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    border-radius: 999px;
    background: radial-gradient(circle at 0 0, rgba(13, 110, 253, 0.20), transparent 55%);
}

/* Inputs generales del perfil */
.accounts-profile-form .form-control,
.accounts-profile-form .form-select,
.accounts-profile-form textarea {
    font-size: 0.95rem;
}

/* Textarea más alto para observaciones */
.accounts-profile-form textarea {
    min-height: 120px;
}

/* Espaciado entre secciones en mobile */
@media (max-width: 767.98px) {
    .accounts-profile-page .accounts-panel-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
}