/* =========================================================
USER EDITOR — GLOBAL LAYOUT
Contenedor principal de la página
========================================================= */

.ue-container{
width:100%;
max-width:1240px;
min-width:0;
box-sizing:border-box;
margin:auto;
padding:36px 24px 48px;
font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}


/* =========================================================
PAGE HEADER
Título principal y subtítulo
========================================================= */

.ue-header{
display:flex;
justify-content:space-between;
align-items:flex-end;
gap:20px;
margin-bottom:40px;
flex-wrap:wrap;
}

.ue-title{
font-size:30px;
font-weight:800;
letter-spacing:-0.02em;
color:var(--color-text-primary);
}

.ue-subtitle{
color:var(--color-text-muted);
font-size:15px;
margin-top:4px;
}

.ue-copy-muted{
color:var(--color-text-muted);
font-size:14px;
line-height:1.6;
}


/* =========================================================
GRID LAYOUT
Distribución de columnas del editor
========================================================= */

.ue-grid{
display:grid;
grid-template-columns:minmax(0, 1.7fr) minmax(18rem, 0.92fr);
gap:36px;
}

.ue-left{
display:flex;
flex-direction:column;
gap:24px;
}

.ue-right{
display:flex;
flex-direction:column;
gap:24px;
}

.ue-grid-span-full{
grid-column:1 / -1;
display:flex;
flex-direction:column;
gap:24px;
min-width:0;
}


/* =========================================================
CARDS
Contenedores visuales de cada sección
========================================================= */

.ue-card{
background:var(--color-surface);
border:1px solid var(--color-border);
border-radius:14px;
padding:32px;
box-shadow:0 3px 10px rgba(0,0,0,0.04);
transition:all .25s ease;
}

.ue-card:hover{
box-shadow:0 10px 28px rgba(0,0,0,0.06);
transform:translateY(-2px);
}

.ue-card--compact{
height:fit-content;
}

.ue-card-title{
font-size:18px;
font-weight:700;
margin-bottom:18px;
display:flex;
align-items:center;
gap:8px;
color:var(--color-text-primary);
}

.ue-card-body{
margin-top:6px;
}

.ue-role-tooltip{
position:fixed;
z-index:120;
max-width:320px;
padding:10px 12px;
border-radius:12px;
border:1px solid var(--color-border);
background:var(--color-surface);
color:var(--color-text-primary);
box-shadow:0 12px 30px rgba(15, 23, 42, 0.16);
font-size:13px;
line-height:1.5;
pointer-events:none;
opacity:0;
transform:translateY(4px);
transition:opacity .16s ease, transform .16s ease;
}

.ue-role-tooltip.is-visible{
opacity:1;
transform:translateY(0);
}

.ue-roles{
max-height:24rem;
overflow:auto;
scrollbar-width:none;
-ms-overflow-style:none;
}

.ue-roles::-webkit-scrollbar{
width:0;
height:0;
display:none;
}


/* =========================================================
FORM GRID
Estructura de columnas del formulario
========================================================= */

.ue-form-grid{
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:28px;
}

.ue-col-span{
grid-column:span 2;
}

.ue-full{
grid-column:span 2;
}

.ue-form-group{
display:flex;
flex-direction:column;
gap:6px;
position:relative;
}


/* =========================================================
FORM LABELS
Texto descriptivo de los campos
========================================================= */

.ue-form-grid label{
font-size:13px;
font-weight:600;
color:var(--color-text-secondary);
letter-spacing:.01em;
transition:.2s;
}

/* Cambio de color cuando el campo tiene foco */

.ue-form-group:focus-within label{
color:var(--color-primary);
}


/* =========================================================
INPUT FIELDS
Campos de texto del formulario
========================================================= */

.ue-input{
width:100%;
height:46px;
padding:0 14px;
border-radius:10px;
border:1px solid var(--color-border);
background:var(--color-surface-muted-active);
font-size:14px;
color:var(--color-text-primary);
transition:all .18s ease;
}

/* Hover */

.ue-input:hover{
border-color:var(--color-border-strong);
background:var(--color-surface);
}

/* Focus moderno */

.ue-input:focus{
outline:none;
border-color:var(--color-primary);
box-shadow:
0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent),
0 2px 6px rgba(0,0,0,0.05);
background:var(--color-surface);
}

/* Placeholder */

.ue-input::placeholder{
color:var(--color-text-muted);
font-weight:400;
letter-spacing:.01em;
opacity:1;
}

.ue-input-color{
padding:6px;
height:52px;
cursor:pointer;
}

.ue-input-color::-webkit-color-swatch-wrapper{
padding:0;
}

.ue-input-color::-webkit-color-swatch{
border:none;
border-radius:8px;
}

select.ue-input,
.ue-input:is(select) {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
color-scheme: light;
}

select.ue-input option,
select.ue-input optgroup,
.ue-input:is(select) option,
.ue-input:is(select) optgroup {
background: var(--color-surface);
color: var(--color-text-primary);
}

select.ue-input:disabled option,
.ue-input:is(select):disabled option {
color: var(--color-text-muted);
}

/* Input activo */

.ue-input:not(:placeholder-shown){
background:var(--color-surface);
}


/* =========================================================
INPUT CON ICONOS (opcional para el futuro)
========================================================= */

.ue-input-icon{
position:relative;
}

.ue-input-icon input{
padding-left:40px;
}

.ue-input-icon svg{
position:absolute;
left:12px;
top:50%;
transform:translateY(-50%);
width:16px;
height:16px;
color:var(--color-text-muted);
}


/* =========================================================
BUTTONS
Botones principales y secundarios
========================================================= */

.ue-btn-primary{
background:var(--color-primary);
color:var(--color-text-white);
border:none;
padding:12px 22px;
border-radius:10px;
font-weight:600;
font-size:14px;
cursor:pointer;
transition:.2s;
box-shadow:0 2px 6px color-mix(in srgb, var(--color-primary) 25%, transparent);
}

.ue-btn-primary:hover{
background:var(--color-primary-hover);
transform:translateY(-1px);
box-shadow:0 4px 10px color-mix(in srgb, var(--color-primary) 35%, transparent);
}

.ue-btn-primary:active{
transform:translateY(0);
box-shadow:0 2px 6px color-mix(in srgb, var(--color-primary) 25%, transparent);
}

.ue-btn-secondary{
background:var(--color-surface-subtle-active);
border:none;
padding:10px 16px;
border-radius:8px;
font-weight:600;
cursor:pointer;
font-size:14px;
transition:.2s;
color:var(--color-text-primary);
}

.ue-btn-secondary:hover{
background:var(--color-surface-muted-active);
}

.ue-btn-danger{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:38px;
padding:10px 16px;
border-radius:10px;
border:1px solid color-mix(in srgb, #b91c1c 40%, var(--color-border));
background:color-mix(in srgb, #b91c1c 12%, var(--color-surface));
color:#991b1b;
font-size:13px;
font-weight:700;
line-height:1;
cursor:pointer;
transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
box-shadow:0 1px 2px rgba(15, 23, 42, 0.06);
}

.ue-btn-danger:hover{
background:color-mix(in srgb, #b91c1c 18%, var(--color-surface));
border-color:color-mix(in srgb, #b91c1c 55%, var(--color-border));
transform:translateY(-1px);
box-shadow:0 8px 18px rgba(185, 28, 28, 0.12);
}

.ue-btn-danger:active{
transform:translateY(0);
box-shadow:0 2px 8px rgba(185, 28, 28, 0.12);
}

.ue-btn-danger:disabled{
opacity:.6;
cursor:not-allowed;
transform:none;
box-shadow:none;
}

.ue-btn-tertiary,
.ue-edit-btn{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:38px;
padding:10px 16px;
border-radius:10px;
border:1px solid var(--color-border-light);
border:1px solid var(--color-border);
background:var(--color-surface);
color:var(--color-text-primary);
font-size:13px;
font-weight:700;
line-height:1;
cursor:pointer;
transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
box-shadow:0 1px 2px rgba(15, 23, 42, 0.06);
}

.ue-btn-tertiary:hover,
.ue-edit-btn:hover{
background:var(--color-surface-subtle-active);
border-color:var(--color-border-strong);
transform:translateY(-1px);
box-shadow:0 8px 18px rgba(15, 23, 42, 0.08);
}

.ue-btn-tertiary:active,
.ue-edit-btn:active{
transform:translateY(0);
box-shadow:0 2px 8px rgba(15, 23, 42, 0.08);
}

.ue-btn-tertiary:disabled,
.ue-edit-btn:disabled{
opacity:.6;
cursor:not-allowed;
transform:none;
box-shadow:none;
}


/* =========================================================
ACCOUNT STATUS
Caja informativa de estado de cuenta
========================================================= */

.ue-status{
display:flex;
justify-content:space-between;
align-items:center;
padding:14px 16px;
background:color-mix(in srgb, var(--color-primary) 10%, transparent);
border:1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
border-radius:10px;
}

.ue-status-title{
font-weight:700;
}

.ue-status-desc{
font-size:12px;
color:var(--color-text-muted);
}


/* =========================================================
DIVIDERS
Separadores visuales
========================================================= */

.ue-divider{
height:1px;
background:var(--color-border);
margin:20px 0;
}


/* =========================================================
META INFORMATION
Información secundaria del usuario
========================================================= */

.ue-meta{
display:flex;
flex-direction:column;
gap:12px;
}

.ue-meta-row{
display:flex;
justify-content:space-between;
font-size:14px;
}

.ue-meta-row span:first-child{
color:var(--color-text-muted);
}

.ue-meta-row span:last-child{
font-weight:600;
color:var(--color-text-primary);
}

.ue-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding:0.35rem 0.75rem;
border-radius:999px;
font-size:0.75rem;
font-weight:700;
background:color-mix(in srgb, var(--color-surface-subtle-active) 92%, transparent);
color:var(--color-text-secondary);
border:1px solid color-mix(in srgb, var(--color-border) 90%, transparent);
}

.ue-token-sections{
display:grid;
grid-template-columns:repeat(4, minmax(0, 1fr));
gap:24px;
align-items:start;
}

.ue-token-section{
padding:22px;
border:1px solid color-mix(in srgb, var(--color-border) 84%, transparent);
border-radius:12px;
background:color-mix(in srgb, var(--color-surface-muted-active) 72%, transparent);
}

.ue-token-section-header{
margin-bottom:14px;
}

.ue-token-section-title{
margin:0;
font-size:14px;
font-weight:700;
color:var(--color-text-primary);
}

.ue-token-section-description{
margin:6px 0 0;
font-size:12px;
line-height:1.5;
color:var(--color-text-muted);
}

.ue-token-grid{
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:18px 20px;
align-items:start;
}

.ue-token-item{
display:flex;
flex-direction:column;
gap:8px;
}

.ue-token-label{
font-size:13px;
font-weight:600;
color:var(--color-text-secondary);
}

.ue-summary-list{
display:flex;
flex-direction:column;
gap:12px;
}

.ue-summary-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
}

.ue-summary-label{
font-size:14px;
color:var(--color-text-muted);
}

.ue-summary-value{
font-size:14px;
font-weight:700;
color:var(--color-text-primary);
}


/* =========================================================
TOGGLE SWITCH
Interruptor visual tipo ON/OFF
========================================================= */

.ue-switch{
position:relative;
display:inline-block;
width:54px;
height:28px;
}

.ue-switch input{
opacity:0;
width:0;
height:0;
}

.ue-switch span{
position:absolute;
cursor:pointer;
top:0;
left:0;
right:0;
bottom:0;
background:var(--color-border-strong);
border-radius:30px;
transition:.3s;
}

.ue-switch span:before{
position:absolute;
content:"";
height:22px;
width:22px;
left:3px;
bottom:3px;
background:white;
border-radius:50%;
transition:.3s;
box-shadow:0 2px 4px rgba(0,0,0,0.2);
}

.ue-switch input:checked + span{
background:var(--color-primary);
}

.ue-switch input:checked + span:before{
transform:translateX(26px);
}


/* =========================================================
PROFILE AVATAR
Avatar del usuario y botón de subida
========================================================= */

.ue-avatar-wrapper{
position:relative;
width:260px;
margin:auto;
}

.ue-avatar{
width:260px;
height:260px;
border-radius:50%;
background:linear-gradient(145deg, var(--color-surface-muted-active), var(--color-surface-subtle-active));
display:flex;
align-items:center;
justify-content:center;
font-size:88px;
border:4px solid color-mix(in srgb, var(--color-primary) 15%, transparent);
overflow:hidden;
box-shadow:0 4px 12px rgba(0,0,0,0.08);
color:var(--color-text-primary);
}

.ue-avatar-img{
width:100%;
height:100%;
object-fit:cover;
}

.ue-avatar-upload{
position:absolute;
bottom:12px;
right:12px;
background:var(--color-primary);
width:52px;
height:52px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
color:var(--color-text-white);
font-size:22px;
cursor:pointer;
box-shadow:0 3px 8px rgba(0,0,0,0.2);
transition:.2s;
}

.ue-avatar-upload:hover{
transform:scale(1.12);
box-shadow:0 6px 14px rgba(0,0,0,0.25);
}

.ue-avatar-upload input{
display:none;
}

.ue-avatar-text{
text-align:center;
margin-top:14px;
font-size:12px;
color:var(--color-text-muted);
}

.ue-center{
text-align:center;
}

/* =========================================================
REUSABLE SCROLL HELPERS
Scroll funcional pero invisible, reutilizable en otros layouts.
========================================================= */

.ue-scroll-hidden{
scrollbar-width:none;
-ms-overflow-style:none;
}

.ue-scroll-hidden::-webkit-scrollbar{
width:0;
height:0;
display:none;
}

.ue-min-h-0{
min-height:0;
}

/* =========================================================
USER LIST PANEL
========================================================= */

#ue-left-list > div {
background: var(--color-surface);
border-color: var(--color-border);
}

#ue-left-list .font-medium,
#ue-left-list .text-sm {
color: var(--color-list-item-text);
}

#ue-left-list .text-xs,
#ue-left-list .text-slate-400,
#ue-left-list .text-slate-500 {
color: var(--color-list-item-text-muted) !important;
}

#ue-left-list .border-t,
#ue-left-list .border-b,
#ue-left-list .border-gray-100 {
border-color: var(--color-border) !important;
}

#ue-left-list .bg-gray-50\/50 {
background: color-mix(in srgb, var(--color-surface-subtle-active) 60%, transparent) !important;
}

#ue-user-list .ue-user-row,
#ue-user-list .spod-interactive-item {
background: var(--spod-item-bg);
}

#ue-user-list .ue-user-row:hover,
#ue-user-list .spod-interactive-item:hover {
background: var(--spod-item-bg-hover);
}

#ue-user-list .spod-interactive-item--selected {
background: var(--spod-item-bg-selected);
}

#ue-left-list {
min-width:0;
}

#ue-left-list .config-user-list-panel {
min-width:0;
}

.ue-user-row > .flex-1{
min-width:0;
}

.ue-user-row > .flex-1:hover .font-medium{
color:var(--color-primary);
}

.ue-user-row .font-medium{
transition:color .18s ease;
}

@media (max-width: 980px){
.ue-grid{
grid-template-columns:1fr;
}

.ue-form-grid{
grid-template-columns:1fr;
}

.ue-grid-span-full{
grid-column:auto;
}

.ue-token-sections{
grid-template-columns:1fr;
}

.ue-token-grid{
grid-template-columns:1fr;
}
}