/* static/app/perfil/perfil.css */

/* =========================
   TOPBAR · TABS CUENTA
========================= */

.tabs{
    display:flex;
    gap:18px;
}

.tabs a{
    text-decoration:none;
    color:#375e65;
    font-size:14px;
    padding:6px 12px;
    border-radius:6px;
    font-weight:500;
    transition:all 0.15s ease;
}

.tabs a:hover{
    background:#f2efe9;
}

.tabs a.activo{
    background:#ded8cc;
    color:#375e65;
}

/* =========================
   VISTA PERFIL
========================= */

.perfil-page{
    max-width:980px;
    margin:0 auto;
    padding:18px 0 32px 0;
}

.perfil-header{
    margin-bottom:28px;
}

.perfil-header h1{
    margin:0 0 8px 0;

    font-family:"Raleway", sans-serif;
    font-size:16px;
    font-weight:600;
    letter-spacing:0.8px;

    color:#375e65;
}

.perfil-header p{
    margin:0;

    font-family:"Inter", sans-serif;
    font-size:13px;
    color:#8a8375;
}

/* =========================
   BODY
========================= */

.perfil-body{
    display:flex;
    flex-direction:column;
    gap:18px;
}

/* =========================
   BLOQUE BASE
========================= */

.bloque{
    display:flex;
    flex-direction:column;
    gap:16px;

    padding:20px 22px;

    border:1px solid #d0c8bb;
    border-radius:18px;

    background:#f6f3ed;
    box-shadow:0 1px 2px rgba(0,0,0,0.03);
}

/* =========================
   HEADER BLOQUE
========================= */

.bloque-header{
    margin-bottom:4px;
}

.bloque-header h2{
    margin:0;

    font-family:"Raleway", sans-serif;
    font-size:15px;
    font-weight:400;
    letter-spacing:1px;

    color:#375e65;
}

/* =========================
   BODY BLOQUE
========================= */

.bloque-body{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.bloque-info{
    margin:0;

    font-family:"Inter", sans-serif;
    font-size:13px;
    line-height:1.55;
    color:#8a8375;
}

/* =========================
   CAMPOS
========================= */

.campo-label{
    font-family:"Inter", sans-serif;
    font-size:13px;
    font-weight:500;
    line-height:1.6;
    letter-spacing:0.15px;
    color:#4d4763;

    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

.campo-select{
    width:100%;
    max-width:440px;

    padding:10px 12px;

    border:1px solid #d0c8bb;
    border-radius:10px;

    background:#ffffff;

    font-family:"Inter", sans-serif;
    font-size:13px;
    color:#2c3c3d;

    cursor:pointer;
    transition:all 0.15s ease;
}

.campo-select:hover{
    border-color:#375e65;
}

.campo-select:focus{
    outline:none;
    border-color:#375e65;
    box-shadow:0 0 0 1px rgba(55,94,101,0.25);
}

/* =========================
   DATOS CUENTA
========================= */

.dato-linea{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.dato-label{
    font-family:"Inter", sans-serif;
    font-size:13px;
    font-weight:500;
    line-height:1.6;
    letter-spacing:0.15px;
    color:#4d4763;

    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

.dato-valor{
    font-family:"Inter", sans-serif;
    font-size:13px;
    line-height:1.6;
    color:#2c3c3d;
}

/* "lastrespecas@gmail.com" */
.dato-valor{
    font-family:"Inter", sans-serif;
    font-size:13px;
    line-height:1.6;

    color:#375e65; /* 👈 verde PQIA */

    font-weight:500; /* 👈 opcional pero recomendable */
}

/* =========================
   ACTIONS
========================= */

.bloque-actions{
    display:flex;
    align-items:center;
    gap:16px;
    margin-top:8px;
}

/* =========================
   BOTONES SISTEMA
========================= */

.btn-secundario{
    background:#cfc7b8;
    color:#2c3c3d;

    border:1px solid #d0c8bb;

    padding:8px 14px;
    min-width:180px;

    border-radius:10px;

    font-family:"Inter", sans-serif;
    font-size:13px;
    font-weight:500;
    letter-spacing:0.3px;

    cursor:pointer;
    transition:all 0.15s ease;
}

.btn-secundario:hover{
    background:#dcd6ca;
}

.btn-secundario:active{
    transform:scale(0.98);
}

.btn-peligro{
    background:#92180b;
    color:white;
    border:none;

    padding:8px 14px;
    min-width:180px;

    border-radius:10px;

    font-family:"Inter", sans-serif;
    font-size:13px;
    font-weight:500;
    letter-spacing:0.3px;

    cursor:pointer;
    transition:all 0.15s ease;
}

.btn-peligro:hover{
    background:#7a1409;
}

.btn-peligro:active{
    transform:scale(0.98);
}

/* =========================
   BLOQUE ACCIONES FINALES
========================= */

.bloque-acciones-peligro{
    padding-top:18px;
    padding-bottom:18px;
    margin-top:8px;
}

.acciones-finales{
    justify-content:center;
    gap:18px;
    margin-top:0;
}

/* =========================
   ESTADO OK
========================= */

.btn-ok{
    background:#375e65 !important;
    border-color:#375e65 !important;
    color:#ffffff !important;
}

/* =========================
   SCROLL PERFIL
========================= */

.view-container{
    height:100%;
    overflow-y:auto;
}

.view-container::-webkit-scrollbar{
    width:6px;
}

.view-container::-webkit-scrollbar-thumb{
    background:#c8c1b4;
    border-radius:4px;
    min-height:40px;

    box-shadow:
        inset 0 0 0 0 transparent,
        inset 0 8px 0 0 transparent,
        inset 0 10px 0 0 rgba(120,110,95,0.25),
        inset 0 12px 0 0 transparent;
}

.view-container::-webkit-scrollbar-thumb:hover{
    background:#a89f8d;
}

.view-container::-webkit-scrollbar-track{
    background:transparent;
}

/* =========================
   MODAL CONFIRMACIÓN
========================= */

.modal-confirmacion{
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    z-index:9999;
}

.modal-confirmacion.activo{
    display:flex;
}

.modal-confirmacion-overlay{
    position:absolute;
    inset:0;
    background:rgba(44, 60, 61, 0.34);
    backdrop-filter:blur(2px);
}

.modal-confirmacion-box{
    position:relative;
    width:min(440px, calc(100% - 32px));
    background:#f6f3ed;
    border:1px solid #d0c8bb;
    border-radius:18px;
    box-shadow:0 12px 32px rgba(0,0,0,0.16);
    padding:22px 22px 20px;
}

.modal-confirmacion-header{
    margin-bottom:12px;
}

.modal-confirmacion-header h3{
    margin:0;
    font-family:"Raleway", sans-serif;
    font-size:16px;
    font-weight:600;
    letter-spacing:0.5px;
    color:#375e65;
}

.modal-confirmacion-body{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-bottom:18px;
}

.modal-confirmacion-body p{
    margin:0;
    font-family:"Inter", sans-serif;
    font-size:13px;
    line-height:1.6;
    color:#2c3c3d;
}

.modal-confirmacion-actions{
    display:flex;
    justify-content:flex-end;
    gap:12px;
}

.modal-confirmacion-actions .btn-secundario,
.modal-confirmacion-actions .btn-peligro{
    min-width:150px;
}

/* 🔥 AGRUPAR LABEL + VALOR */

.dato-linea{
    display:flex;
    flex-direction:column;
    gap:2px; /* 🔥 clave: antes hay más espacio */
}

.dato-label{
    font-size:12px;
    color:#7a8686;
}

.dato-valor{
    font-size:14px;
    color:#375e65;
    font-weight:500;
}


/* USUARIO DEBAJO DEL MENÚ*/
.user-email{
    font-size:12px;
    color:#e7e3da;
    opacity:0.85;
    display:block;
    margin-top:6px;
    word-break: break-word;
}

.user{
    border-top:1px solid rgba(255,255,255,0.1);
    padding-top:10px;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width:900px){

    .perfil-page{
        max-width:100%;
        padding:16px 0 28px 0;
    }

    .bloque{
        padding:18px;
        border-radius:16px;
    }
}

@media (max-width:640px){

    .bloque-actions,
    .acciones-finales,
    .modal-confirmacion-actions{
        flex-direction:column;
        align-items:stretch;
    }

    .btn-secundario,
    .btn-peligro{
        width:100%;
        min-width:0;
    }

    .campo-select{
        max-width:100%;
    }

    .modal-confirmacion-box{
        padding:18px;
        border-radius:16px;
    }
}