/* ===============================
   CONTENEDOR GENERAL
================================ */
.tm-profile {
    background:#000;
    color:#fff;
    padding:30px;
}

/* ===============================
   HEADER PERFIL
================================ */
.tm-name {
    color:#fff;
    font-size:26px;
    margin-bottom:6px;
}

.tm-team {
    color:#ff7a00;
    font-weight:bold;
    font-size:14px;
}

/* ===============================
   TARJETA PRINCIPAL
================================ */
.tm-card {
    margin-top:25px;
    display:grid;
    grid-template-columns:240px 1fr;
    gap:30px;
    background:#0e0e0e;
    padding:25px;
    border-radius:14px;
    border:1px solid #1a1a1a;
}

/* ===============================
   AVATAR
================================ */
.tm-avatar {
    text-align:center;
}

.tm-avatar-circle {
    width:180px;
    height:180px;
    margin:0 auto;
    border-radius:50%;
    overflow:hidden;
    border:3px solid #ff7a00;
    background:#222;
    box-shadow:0 0 0 3px rgba(255,122,0,0.15);
    position:relative;
}

/* IMPORTANTE: transform para "crop visual" */
.tm-avatar-circle img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    cursor:default;
    user-select:none;
    transform-origin:center center;
}

.tm-avatar-btn {
    display:inline-block;
    margin-top:12px;
    color:#ff7a00;
    text-decoration:none;
    font-size:14px;
    font-weight:600;
}

.tm-avatar-btn:hover { text-decoration:underline; }

/* ===============================
   EDITOR FOTO (modo photo=1)
================================ */
.tm-photo-editor {
    margin-top:10px;
}

.tm-editor-frame {
    width:180px;
    height:180px;
    margin:0 auto 12px;
    border-radius:50%;
    overflow:hidden;
    border:3px solid #ff7a00;
    background:#111;
    box-shadow:0 0 0 3px rgba(255,122,0,0.15);
    position:relative;
}

.tm-editor-frame img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    cursor:grab;
    user-select:none;
    touch-action:none;
    transform-origin:center center;
}

.tm-editor-tools {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin:10px 0 12px;
    flex-wrap:wrap;
}

.tm-editor-tools button {
    background:#111;
    border:1px solid #333;
    color:#ff7a00;
    padding:8px 12px;
    border-radius:6px;
    font-size:14px;
    cursor:pointer;
    font-weight:700;
}

.tm-editor-tools button:hover {
    background:#ff7a00;
    color:#000;
}

.tm-editor-tools input[type="range"] {
    width:180px;
    accent-color:#ff7a00;
}

/* ===============================
   INFO
================================ */
.tm-info {
    display:flex;
    flex-direction:column;
    gap:10px;
}

.tm-row {
    background:#111;
    padding:12px 14px;
    border-radius:6px;
    border:1px solid #222;
    font-size:14px;
}

.tm-row strong { color:#fff; }

/* ===============================
   FORMULARIOS
================================ */
.tm-form label,
.tm-photo-form label {
    display:block;
    margin-top:12px;
    font-size:13px;
    color:#aaa;
}

.tm-form input,
.tm-photo-form input[type="email"],
.tm-photo-form input[type="text"],
.tm-photo-form input[type="file"] {
    width:100%;
    padding:11px 12px;
    background:#000;
    border:1px solid #333;
    color:#fff;
    border-radius:6px;
    margin-top:6px;
    font-size:14px;
}

.tm-photo-form input[type="file"] {
    background:#0b0b0b;
    cursor:pointer;
}

.tm-form input:focus,
.tm-photo-form input:focus {
    outline:none;
    border-color:#ff7a00;
}

/* ===============================
   BOTONES
================================ */
.tm-btn {
    margin-top:18px;
    background:#ff7a00;
    color:#000;
    padding:12px 16px;
    border-radius:6px;
    font-weight:bold;
    border:none;
    cursor:pointer;
    font-size:14px;
    transition:all .2s ease;
}

.tm-btn:hover { background:#ffa042; }

/* ===============================
   MENSAJES
================================ */
.tm-success {
    background:#123c1f;
    color:#4dff8a;
    padding:12px;
    border-radius:6px;
    margin-bottom:15px;
    border:1px solid #1d5a33;
    font-size:14px;
}

.tm-error {
    background:#3b1212;
    color:#ff7a7a;
    padding:12px;
    border-radius:6px;
    margin-bottom:15px;
    border:1px solid #5a1f1f;
    font-size:14px;
}

/* ===============================
   RESPONSIVE
================================ */
@media (max-width: 768px) {

    .tm-profile { padding:20px 15px; }

    /* Pedido: nombre y team centrados en mobile */
    .tm-name, .tm-team {
        text-align:center;
        display:block;
    }

    .tm-card {
        grid-template-columns:1fr;
        gap:25px;
        text-align:center;
    }

    .tm-info { text-align:left; }

    .tm-avatar-circle,
    .tm-editor-frame {
        width:150px;
        height:150px;
    }

    .tm-editor-tools input[type="range"] {
        width:200px;
        max-width:90%;
    }

    .tm-btn { width:100%; }
}