/* ─── MEXICA Elenco — matches site palette ─── */
:root {
  --obsidiana:#050110;
  --noche:#0B0420;
  --noche-alta:#150836;
  --hueso:#EDE6D6;
  --hueso-mute:#A79FB4;
  --violeta:#AF55E6;
  --violeta-hondo:#4A0F7A;
  --violeta-brasa:#7B23C4;
  --azul:#1598F5;
  --cian:#2DCDFB;
  --amarillo:#FCFC0C;
  --linea:rgba(175,85,230,.24);
  --linea-fuerte:rgba(175,85,230,.5);
  --caps:'Cinzel',Georgia,'Times New Roman',serif;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --maxw:1100px;
  --gutter:clamp(22px,5.2vw,92px);
}

*,*::before,*::after{box-sizing:border-box}

.mxe-wrap{
  min-height:100vh;
  background:var(--obsidiana);
  color:var(--hueso);
  font-family:var(--sans);
  padding:120px var(--gutter) 80px;
}
.mxe-inner{
  max-width:var(--maxw);
  margin:0 auto;
}

/* ─── Typography ─── */
.mxe-title{
  font-family:var(--caps);
  font-size:clamp(28px,5vw,48px);
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--hueso);
  margin:0 0 12px;
  text-align:center;
}
.mxe-subtitle{
  font-family:var(--serif);
  font-size:clamp(16px,2.2vw,22px);
  font-weight:300;
  font-style:italic;
  color:var(--hueso-mute);
  text-align:center;
  margin:0 0 48px;
}
.mxe-section-title{
  font-family:var(--caps);
  font-size:clamp(18px,3vw,28px);
  font-weight:500;
  letter-spacing:.06em;
  color:var(--violeta);
  margin:0 0 24px;
}

/* ─── Auth bar ─── */
.mxe-auth{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:16px;
  margin-bottom:32px;
  flex-wrap:wrap;
}

/* ─── Buttons ─── */
.mxe-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--caps);
  font-size:13px;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-decoration:none;
  padding:10px 24px;
  border-radius:4px;
  border:1px solid var(--violeta);
  color:var(--hueso);
  background:transparent;
  cursor:pointer;
  transition:all .25s ease;
}
.mxe-btn:hover{
  background:var(--violeta-hondo);
  border-color:var(--violeta-brasa);
}
.mxe-btn--solid{
  background:var(--violeta-brasa);
  border-color:var(--violeta-brasa);
}
.mxe-btn--solid:hover{
  background:var(--violeta);
}
.mxe-btn--small{
  font-size:11px;
  padding:6px 14px;
}
.mxe-btn--danger{
  border-color:#c0392b;
  color:#e74c3c;
}
.mxe-btn--danger:hover{
  background:#c0392b;
  color:#fff;
}

/* ─── Profile grid (listing) ─── */
.mxe-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:24px;
}
.mxe-card{
  background:var(--noche);
  border:1px solid var(--linea);
  border-radius:12px;
  overflow:hidden;
  transition:transform .3s ease,border-color .3s ease;
  text-decoration:none;
  color:var(--hueso);
}
.mxe-card:hover{
  transform:translateY(-4px);
  border-color:var(--violeta);
}
.mxe-card__img{
  width:100%;
  aspect-ratio:1;
  object-fit:cover;
  background:var(--noche-alta);
}
.mxe-card__body{
  padding:16px 20px 20px;
}
.mxe-card__personaje{
  font-family:var(--caps);
  font-size:16px;
  font-weight:600;
  letter-spacing:.06em;
  color:var(--violeta);
  margin:0 0 4px;
}
.mxe-card__nombre{
  font-family:var(--serif);
  font-size:15px;
  font-weight:300;
  color:var(--hueso-mute);
  margin:0;
}
.mxe-card__ciudad{
  font-size:12px;
  color:var(--hueso-mute);
  margin:6px 0 0;
  opacity:.7;
}

/* ─── No-photo placeholder ─── */
.mxe-placeholder{
  width:100%;
  aspect-ratio:1;
  background:var(--noche-alta);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--hueso-mute);
  font-size:48px;
  opacity:.3;
}

/* ─── Public profile ─── */
.mxe-profile{
  display:grid;
  grid-template-columns:320px 1fr;
  gap:48px;
  align-items:start;
}
@media(max-width:768px){
  .mxe-profile{grid-template-columns:1fr;gap:32px}
}
.mxe-profile__foto{
  width:100%;
  aspect-ratio:1;
  object-fit:cover;
  border-radius:12px;
  border:2px solid var(--linea);
}
.mxe-profile__placeholder{
  width:100%;
  aspect-ratio:1;
  border-radius:12px;
  background:var(--noche-alta);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--hueso-mute);
  font-size:80px;
  opacity:.3;
}
.mxe-profile__personaje{
  font-family:var(--caps);
  font-size:clamp(24px,4vw,36px);
  font-weight:600;
  letter-spacing:.06em;
  color:var(--violeta);
  margin:0 0 4px;
}
.mxe-profile__nombre{
  font-family:var(--serif);
  font-size:clamp(18px,2.5vw,24px);
  font-weight:300;
  font-style:italic;
  color:var(--hueso);
  margin:0 0 24px;
}
.mxe-profile__meta{
  list-style:none;
  padding:0;
  margin:0 0 24px;
}
.mxe-profile__meta li{
  padding:10px 0;
  border-bottom:1px solid var(--linea);
  font-size:14px;
  display:flex;
  gap:12px;
}
.mxe-profile__meta li span:first-child{
  color:var(--hueso-mute);
  min-width:90px;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-family:var(--caps);
}
.mxe-profile__cv{
  margin:24px 0;
}

/* ─── Gallery ─── */
.mxe-gallery{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:12px;
  margin-top:24px;
}
.mxe-gallery img{
  width:100%;
  aspect-ratio:1;
  object-fit:cover;
  border-radius:8px;
  border:1px solid var(--linea);
  transition:border-color .2s;
}
.mxe-gallery img:hover{
  border-color:var(--violeta);
}

/* ─── Forms ─── */
.mxe-form{
  max-width:600px;
  margin:0 auto;
}
.mxe-field{
  margin-bottom:20px;
}
.mxe-label{
  display:block;
  font-family:var(--caps);
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--hueso-mute);
  margin-bottom:6px;
}
.mxe-input{
  width:100%;
  padding:12px 16px;
  background:var(--noche);
  border:1px solid var(--linea);
  border-radius:6px;
  color:var(--hueso);
  font-family:var(--sans);
  font-size:15px;
  transition:border-color .2s;
}
.mxe-input:focus{
  outline:none;
  border-color:var(--violeta);
}
.mxe-input::placeholder{
  color:var(--hueso-mute);
  opacity:.5;
}
input[type="file"].mxe-input{
  padding:10px;
  font-size:13px;
}
input[type="file"].mxe-input::file-selector-button{
  font-family:var(--caps);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:6px 14px;
  border-radius:4px;
  border:1px solid var(--violeta);
  background:var(--violeta-hondo);
  color:var(--hueso);
  cursor:pointer;
  margin-right:12px;
}

/* ─── Flash messages ─── */
.mxe-flash{
  padding:14px 20px;
  border-radius:6px;
  margin-bottom:24px;
  font-size:14px;
}
.mxe-flash--ok{
  background:rgba(46,204,113,.12);
  border:1px solid rgba(46,204,113,.4);
  color:#2ecc71;
}
.mxe-flash--error{
  background:rgba(231,76,60,.12);
  border:1px solid rgba(231,76,60,.4);
  color:#e74c3c;
}

/* ─── Current gallery in edit mode ─── */
.mxe-gallery-edit{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:10px;
  margin-bottom:12px;
}
.mxe-gallery-edit__item{
  position:relative;
}
.mxe-gallery-edit__item img{
  width:100%;
  aspect-ratio:1;
  object-fit:cover;
  border-radius:6px;
  border:1px solid var(--linea);
}
.mxe-gallery-edit__remove{
  position:absolute;
  top:6px;
  right:6px;
  width:24px;height:24px;
  border-radius:50%;
  background:rgba(231,76,60,.9);
  color:#fff;
  border:none;
  cursor:pointer;
  font-size:14px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ─── Divider ─── */
.mxe-divider{
  height:1px;
  background:var(--linea);
  margin:40px 0;
  border:none;
}

/* ─── Auth pages ─── */
.mxe-auth-box{
  max-width:420px;
  margin:0 auto;
  background:var(--noche);
  border:1px solid var(--linea);
  border-radius:12px;
  padding:40px 36px;
}
.mxe-auth-box .mxe-title{
  font-size:24px;
  margin-bottom:8px;
}
.mxe-auth-box .mxe-subtitle{
  margin-bottom:32px;
}
.mxe-auth-links{
  text-align:center;
  margin-top:20px;
  font-size:14px;
}
.mxe-auth-links a{
  color:var(--violeta);
  text-decoration:none;
}
.mxe-auth-links a:hover{
  color:var(--cian);
}

/* ─── Back link ─── */
.mxe-back{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--hueso-mute);
  text-decoration:none;
  font-size:13px;
  font-family:var(--caps);
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:32px;
  transition:color .2s;
}
.mxe-back:hover{color:var(--violeta)}

/* ─── Preview foto ─── */
.mxe-foto-preview{
  width:160px;
  height:160px;
  object-fit:cover;
  border-radius:8px;
  border:1px solid var(--linea);
  margin-bottom:12px;
}

/* ─── Lightbox ─── */
.mxe-lightbox{
  display:none;
  position:fixed;
  inset:0;
  z-index:9999;
  background:rgba(5,1,16,.92);
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.mxe-lightbox.is-open{display:flex}
.mxe-lightbox img{
  max-width:90vw;
  max-height:90vh;
  object-fit:contain;
  border-radius:8px;
}