:root {
    --green-main: #149c68; /* verde principal */
    --green-light: #76c7a2; /* verde claro degradado */
    --bg-soft: #e6f3ef; /* fondo suave verde-menta */
    --cta-accent: #2ecc71; /* verde acento (botones) */
    --danger: #dc3545; /* rojo para cerrar sesión */
    --text-muted: #555555;
}

body {
    background: linear-gradient(135deg, #e6f3ef, #76c7a2);
    font-family: 'Arial', sans-serif;
    color: #333;
    overflow-x: hidden;
    margin: 0;
    padding: 0px;
    animation: fadeIn 1s ease-out;
}

/* Fondo de perfil */
.user-card {
    background: var(--bg-soft);
    border-radius: 12px;
    transition: transform 0.3s, box-shadow 0.3s;
    border: 1px solid #d4ede4;
}

    .user-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    }

/* Hero en verde */
.hero-profile {
    background: linear-gradient(135deg, var(--green-main), var(--green-light));
    color: #fff;
    border-radius: 12px 12px 0 0;
}

/* Avatar */
.avatar {
    border: 3px solid #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Botones */
.btn-success {
    background-color: #149c68;
    border: none;
}

    .btn-success:hover {
        background-color: #2ecc71;
    }

.btn-outline-danger {
    border: 2px solid var(--danger);
    color: var(--danger);
}

    .btn-outline-danger:hover {
        background-color: var(--danger);
        color: #fff;
    }

.file-upload-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

.file-upload-label {
    background-color: #fff;
    color: #000;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

    .file-upload-label:hover {
        background-color: #149c68;
    }

.file-upload-input {
    display: none;
}

.file-upload-status {
    font-style: italic;
    color: #888;
    font-size: 14px;
}

/* Labels y campos */
.form-label {
    color: var(--green-main);
    font-weight: 600;
}

.form-control {
    border-radius: 8px;
    border: 1px solid #ccc;
}

    .form-control:focus {
        border-color: var(--green-main);
        box-shadow: 0 0 0 0.2rem rgba(20, 156, 104, 0.25);
    }