/* ===========================
   PALETA Y BASE GLOBAL
   =========================== */
:root{
  --bg:#0f0f10;
  --bg-soft:#161618;
  --text:#eee;
  --muted:#b9b9b9;

    /* Acento naranjo unificado (basado en #f39000) */
  --gold:#f39000;
  --gold-soft:#ffc36b; /* variante clara del naranjo */
  --gold-soft-2:#ffe2b8; /* mini variante extra (highlight) */
  --gold-2:#c56f00;   /* variante oscura del naranjo */
}

*{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;
}

a{ color:inherit; text-decoration:none; }

.container{
  width:100%;
  max-width:1500px;
  padding:0 30px;
  margin:0 auto;
}

/* ===========================
   HEADER / NAV
   =========================== */
.tr-header{
  background: linear-gradient(180deg, rgba(0,0,0,.70), rgba(0,0,0,.55));
  backdrop-filter: blur(6px);
  position:sticky;
  top:0;
  z-index:10;
  border-bottom:1px solid #1f1f25;
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
}

.tr-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-height:56px;
}

.brand-logo{
  height:36px;
  width:auto;
  display:block;
  object-fit:contain;
}
@media (max-width:520px){
  .brand-logo{ height:30px; }
}

.tr-header .brand{
  font-weight:800;
  font-size:20px;
  padding:14px 0;
  display:inline-block;
  letter-spacing:.2px;
}
.tr-header .brand:hover{ filter:brightness(1.03); }
.tr-header .accent{ color:var(--gold); }

/* NAV principal */
.nav{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:nowrap;
}

.nav a,
.nav .dropdown{
  position:relative;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid transparent;
  display:inline-flex;
  gap:8px;
  align-items:center;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

.nav svg{
  width:18px;
  height:18px;
  flex:0 0 18px;
  opacity:.9;
}

.nav a:hover,
.nav .dropdown:hover{
  background:#151518;
  transform:translateY(-1px);
  box-shadow:0 8px 22px rgba(0,0,0,.28);
  border-color:#242428;
}

/* Subrayado dorado animado */
.nav a::after,
.nav .dropdown > .dd-trigger::after{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:6px;
  height:2px;
  border-radius:2px;
  opacity:0;
  transform:translateY(4px);
  background:linear-gradient(90deg, var(--gold), var(--gold-soft) 60%, var(--gold));
  transition:opacity .18s ease, transform .18s ease;
}

.nav a:hover::after,
.nav .dropdown:hover > .dd-trigger::after,
.nav a.is-active::after{
  opacity:1;
  transform:translateY(0);
}

/* Activo fijo */
.nav a.is-active{
  border-color: rgba(255,212,1,.28);
  background: radial-gradient(120% 100% at 0% 0%, rgba(255,212,1,.10), transparent 56%);
  box-shadow: inset 0 0 0 1px rgba(255,212,1,.15);
}

/* Dropdown: trigger (tap-friendly iOS) */
.dropdown{ position:relative; }

.dd-trigger{
  position:relative;
  background:transparent;
  border:0;
  color:inherit;
  font:inherit;
  cursor:pointer;
  padding:10px 14px;
  border-radius:12px;

  -webkit-user-select:none;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

/* Dropdown menu: oculto por defecto + animación */
.dropdown-menu{
  position:absolute;
  top:100%;
  left:0;
  background: linear-gradient(180deg,#141416,#101012);
  padding:8px;
  border:1px solid #222;
  border-radius:12px;
  min-width:220px;
  box-shadow:0 18px 40px rgba(0,0,0,.45),
             0 0 0 1px rgba(255,212,1,.10) inset;
  outline:1px solid rgba(255,212,1,.12);
  z-index:20;

  opacity:0;
  pointer-events:none;
  transform:translateY(6px);
  transition:opacity .15s ease, transform .15s ease;
}

.dropdown-menu::before{
  content:"";
  position:absolute;
  left:8px;
  right:8px;
  top:-1px;
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg, transparent,
                             var(--gold) 35%,
                             var(--gold-soft),
                             var(--gold) 65%,
                             transparent);
  opacity:.65;
}

/* Estado abierto por JS (mobile + desktop) */
.dropdown.open .dropdown-menu{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}

/* Hover solo en dispositivos con hover real (evita iOS “pegajoso”) */
@media (hover:hover) and (pointer:fine){
  .dropdown:hover .dropdown-menu{
    opacity:1;
    pointer-events:auto;
    transform:translateY(0);
  }
}

.dropdown-menu a{
  display:flex;
  gap:8px;
  align-items:center;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid transparent;
}

.dropdown-menu a:hover{
  background:#19191c;
  border-color:#242428;
}

.dropdown-menu.long{
  max-height:260px;
  overflow:auto;
}

/* Botón moderar “premium” */
.nav a.nav-admin{
  border-color: rgba(255,212,1,.25);
  background: radial-gradient(120% 100% at 0% 0%, rgba(255,212,1,.10), transparent 56%);
}
.nav a.nav-admin:hover{
  border-color: rgba(255,212,1,.45);
  box-shadow: 0 10px 26px rgba(255,212,1,.18),
              0 12px 30px rgba(0,0,0,.45);
}

/* Badge moderación (unificado, sin duplicados) */
.nav-moderation{ position:relative; }
.nav-moderation .nav-label{ display:inline-flex; align-items:center; gap:4px; }

.mod-badge{
  margin-left:6px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:16px;
  padding:1px 6px;
  border-radius:999px;
  background:#e02424;
  color:#fff;
  font-size:11px;
  font-weight:600;
  line-height:1.4;
}

.nav-moderation.has-pending::after{
  content:'';
  position:absolute;
  top:6px;
  right:6px;
  width:8px;
  height:8px;
  border-radius:999px;
  background:#ff3b3b;
  box-shadow: 0 0 0 3px rgba(255,59,59,.25);
}

/* NAV responsive */
@media (max-width:880px){
  .tr-header .container{ flex-wrap:wrap; row-gap:10px; }
  .nav{ width:100%; justify-content:flex-start; flex-wrap:wrap; gap:10px 14px; }
}

@media (max-width:640px){
  .nav a, .nav .dd-trigger{
    padding:12px 14px;
    border-radius:12px;
  }

  .nav{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    flex-wrap:nowrap;
    gap:10px;
  }
  .nav::-webkit-scrollbar{ display:none; }
}

/* ===========================
   TIPOGRAFÍA & UTILIDADES
   =========================== */
.muted{ color:var(--muted); }

.brand-gradient{
  background: linear-gradient(90deg, var(--gold), var(--gold-soft) 60%, var(--gold));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.prose{
  font-size:1.08rem;
  line-height:1.9;
  letter-spacing:.2px;
}
.prose p{ margin:0 0 1rem; color:var(--text); }
.prose p.lead{ color:var(--muted); font-size:1.12rem; margin-bottom:1.1rem; }
.prose strong{ color:#fff; }
.prose em{
  color:#d7d7d7;
  font-style:normal;
  text-decoration:underline dotted #444 1px;
  text-underline-offset:3px;
}

.divider{
  height:1px;
  background:linear-gradient(90deg,
    transparent,
    var(--gold) 30%,
    var(--gold-soft),
    var(--gold) 70%,
    transparent);
  opacity:.4;
  margin:16px 0 18px;
  border-radius:1px;
}

/* ===========================
   BOTONES / ALERTAS
   =========================== */
.btn{
  padding:10px 14px;
  border-radius:12px;
  border:1px solid transparent;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease, background .18s ease, border-color .18s ease;
}

.btn-gold{
  background:linear-gradient(90deg,var(--gold),var(--gold-soft) 60%,var(--gold));
  color:#222;
  box-shadow:0 8px 24px rgba(255,212,1,.22);
}
.btn-gold:hover{ filter:brightness(1.02); transform:translateY(-1px); }

.btn-dark{
  background:#18181b;
  color:#f5f5f5;
  border:1px solid #2b2b2f;
}
.btn-dark:hover{ background:#1f1f23; transform:translateY(-1px); }

.alert{
  margin:10px 0;
  padding:12px;
  border-radius:12px;
  background:#1e1e22;
}

/* ===========================
   HOME: HERO + BUSCADOR
   =========================== */
.hero{
  width:100%;
  max-width:1200px;
  margin:40px auto 30px auto;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.hero-title{
  width:100%;
  text-align:center;
  font-size:2.9rem;
  font-weight:800;
  margin:0 0 20px;
}

/* Buscador */
.search-wrap{
  width:100%;
  max-width:900px;
  margin:0 auto;
  display:flex;
  justify-content:center;
  gap:12px;
}

.search-input{
  flex:1;
  padding:14px 18px;
  border-radius:12px;
  background:#0f0f11;
  border:1px solid #222;
  color:white;
  font-size:1.1rem;
  outline:none;
  transition:border .18s ease, box-shadow .18s ease, transform .12s ease, background .18s ease;
}

.search-input:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(255,212,1,.25), 0 10px 24px rgba(0,0,0,.35);
  transform:translateY(-1px);
}

.search-btn{
  height:44px;
  padding:0 18px;
  border-radius:12px;
  font-weight:600;
}

.section-title{
  font-size:1.9rem;
  font-weight:700;
  margin-top:32px;
  margin-bottom:24px;
}

/* ===========================
   GRID / CARDS (HOME)
   =========================== */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:24px;
  margin:12px 0 40px;
}

.card{
  background:#121214;
  border:1px solid #1f1f25;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 4px 10px rgba(0,0,0,.25);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.card:hover{
  transform: translateY(-3px);
  box-shadow:0 14px 28px rgba(0,0,0,.35);
}

.person-media img,
.person-media video{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  display:block;
  filter:saturate(1.05);
}

.person-info{
  padding:16px;
  padding-bottom:24px;
}

.person-name{
  margin:0;
  font-size:1.1rem;
  font-weight:700;
}
.person-name .age{ font-weight:500; color:#f0f0f0; }

.person-meta{
  margin:6px 0 0;
  font-size:.92rem;
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  color:#cfcfd4;
}
.person-meta .place{ color:#ddd; }
.person-meta .dot{ opacity:.5; }
.person-meta .price{ color:var(--gold); font-weight:700; }

.card .badges{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:10px;
  margin-bottom:4px;
}

.badge{
  background: rgba(255,214,120,0.18);
  padding:4px 10px;
  border-radius:999px;
  font-size:0.78rem;
  border:1px solid rgba(255,214,120,0.35);
  color:#ffd778;
  white-space:nowrap;
}

/* ===========================
   CHIPS DE FILTROS (HOME)
   =========================== */
.filters-stack{
  width:100%;
  max-width:1200px;
  margin:40px auto 0 auto;
  padding-top:10px;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.chips-row{
  width:100%;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  margin-top:8px;
  margin-bottom:16px;
  text-align:center;
}

.chips-label{
  width:100%;
  text-align:center;
  font-weight:600;
  font-size:.95rem;
  margin-bottom:6px;
  color:#e8e8ea;
}

.chip{
  padding:7px 14px;
  border-radius:999px;
  border:1px solid #2b2b2b;
  background:#141416;
  color:#e1e1e1;
  font-size:.88rem;
  margin-bottom:6px;
  transition: all .18s ease;
}

.chip:hover{
  background:#1c1c1f;
  border-color:#3a3a3d;
  transform:translateY(-2px);
}

.chip.is-active{
  background:linear-gradient(90deg, var(--gold), var(--gold-soft));
  color:#222;
  border-color:var(--gold-2);
  box-shadow:0 0 0 2px rgba(255,212,1,.18), 0 10px 22px rgba(255,212,1,.22);
}

@media (max-width:640px){
  .chips-row{
    overflow-x:auto;
    flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;
    gap:10px;
    padding-bottom:6px;
  }
  .chips-row::-webkit-scrollbar{ display:none; }
  .chip{ white-space:nowrap; }
}

/* ===========================
   PAGINACIÓN
   =========================== */
.pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:16px;
  padding:26px 0;
}

.page-btn{
  padding:8px 16px;
  border-radius:8px;
  background:#111;
  color:#fff;
  border:1px solid #333;
  transition:.2s;
}
.page-btn:hover{
  background:var(--gold);
  color:#000;
  border-color:var(--gold);
}
.page-btn.disabled{ opacity:.35; pointer-events:none; }
.page-info{ color:#ccc; font-size:.95rem; }

/* ===========================
   FOOTER
   =========================== */
.tr-footer{
  border-top:1px solid #1f1f25;
  margin-top:40px;
}
.tr-footer .container{ padding:20px 16px; }

/* ===========================
   FORMULARIOS / TARJETAS
   =========================== */
.tr-card{
  background:#0f0f10;
  border:1px solid rgba(255,212,1,.18);
  border-radius:16px;
  padding:22px;
  box-shadow:0 10px 28px rgba(0,0,0,.35);
}

.tr-form{ display:grid; gap:16px; }

@media (min-width:860px){
  .tr-form.grid-2{ grid-template-columns:1fr 1fr; }
  .tr-form .span-2{ grid-column:span 2; }
}

.tr-label{
  font-size:.88rem;
  color:var(--muted);
  margin-bottom:6px;
  display:inline-block;
}

.tr-input,
.tr-select,
.tr-textarea{
  width:100%;
  background:#111214;
  border:1px solid #2a2a2d;
  color:#f4f4f5;
  border-radius:12px;
  padding:12px 14px;
  outline:none;
  transition:border .15s ease, box-shadow .15s ease, background .15s ease;
}

.tr-textarea{ min-height:120px; resize:vertical; }

.tr-input:focus,
.tr-select:focus,
.tr-textarea:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(255,212,1,.25);
  background:#101012;
}

.tr-input[type=number]{ appearance:textfield; -moz-appearance:textfield; }
.tr-input[type=number]::-webkit-outer-spin-button,
.tr-input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

.input-error{ color:#ff4444; font-size:0.85rem; margin-top:4px; }
.tr-input.error{ border:1px solid #ff4444 !important; }

/* checkboxes en grid */
.checkgrid{
  display:grid;
  gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  list-style:none;
  padding:0;
  margin:0;
}
.checkgrid li{ margin:0; }

.checkgrid input[type=checkbox]{
  appearance:none;
  width:18px;
  height:18px;
  border-radius:6px;
  margin-right:8px;
  border:1px solid #3a3a3e;
  background:#121214;
  vertical-align:middle;
  display:inline-block;
  position:relative;
  top:-1px;
}

.checkgrid input[type=checkbox]:checked{
  background:linear-gradient(90deg,var(--gold),var(--gold-soft));
  border-color:var(--gold);
}

.checkgrid label{ color:#e8e8ea; cursor:pointer; }
.checkgrid label:hover{ color:#fff; }

/* Input file estilo */
.tr-file{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px;
  border:1px dashed #3a3a3e;
  border-radius:12px;
  background:#111214;
  position:relative;
}

.tr-file input[type=file]{
  width:1px;
  height:1px;
  opacity:0;
  position:absolute;
  pointer-events:none;
}

.tr-file .file-name{ color:#cfcfd4; font-size:.95rem; }
.tr-file .file-btn{ white-space:nowrap; }

/* Ocultar ClearableFileInput de Django */
.tr-hide-django-clear .clearable-file-input,
.tr-hide-django-clear .file-upload a,
.tr-hide-django-clear .file-upload span{
  display:none !important;
}

.input-hint{ color:#9aa; font-size:.85rem; margin-top:6px; }

/* Select estilo chip */
.chip-select{
  background:#222;
  color:#fff;
  border:1px solid #444;
  padding:6px 10px;
  border-radius:20px;
  font-size:0.9rem;
  cursor:pointer;
}
.chip-select option{ background:#111; color:#fff; }

/* ===========================
   MODERACIÓN / TABLAS
   =========================== */
.diff-table{
  width:100%;
  border-collapse:collapse;
  margin-top:12px;
}

.diff-table th,
.diff-table td{
  padding:10px 12px;
  border-bottom:1px solid #222;
  vertical-align:top;
}

.diff-table thead th{ color:#bdbdbf; font-weight:700; }
.diff-table th{ width:220px; color:#cfcfd4; font-weight:600; }

.diff-row.changed td{ background: rgba(255,212,1,.06); }
.diff-row.changed td:nth-child(3){ border-left:2px solid var(--gold); }

.status-banner{
  padding:14px 16px;
  border-radius:14px;
  border:1px solid #2b2b2f;
  background:#101012;
  margin:10px 0 16px;
  font-weight:600;
}

.status-approved{ border-color:#2a5f3a; background:rgba(40,140,80,.12); }
.status-pending{ border-color:#6a5a1a; background:rgba(255,212,1,.10); }
.status-rejected{ border-color:#6a2a2a; background:rgba(220,50,50,.10); }

.card-info{ padding:10px; }

/* ===========================
   PERFIL (HERO + CARD)
   =========================== */
.pf-hero{ position:relative; overflow:visible; }

.pf-cover{
  width:100%;
  height:26vh;
  min-height:220px;
  object-fit:cover;
  display:block;
  transition: filter .25s ease, transform .25s ease;
}
.pf-cover:hover{ filter:saturate(1.05) contrast(1.02); }

.pf-cover--placeholder{
  height:26vh;
  min-height:220px;
  background:linear-gradient(180deg,#131316,#0f0f10);
}

.pf-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom,
    rgba(0,0,0,.65) 0%,
    rgba(0,0,0,.25) 45%,
    transparent 70%);
  pointer-events:none;
}

.pf-head{
  position:absolute;
  left:0;
  right:0;
  bottom:-96px;
  display:flex;
  justify-content:flex-start;
  align-items:flex-end;
  gap:26px;
  flex-wrap:nowrap;
  z-index:3;
  pointer-events:none;
}
.pf-head > *{ pointer-events:auto; }

.pf-avatar{
  flex:0 0 auto;
  width:210px;
  height:210px;
  border-radius:999px;
  overflow:hidden;
  border:6px solid rgba(255,212,1,.75);
  background:#111;
  box-shadow:0 10px 30px rgba(0,0,0,.55);
  margin-left:-6px;
  transform:translateY(12px);
  transition: transform .22s ease, box-shadow .22s ease;
}
.pf-avatar:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 26px rgba(0,0,0,.5);
}
.pf-avatar img{ width:100%; height:100%; object-fit:cover; }

/* Glass */
.glass{
  background:rgba(15,15,16,.82);
  border:1px solid rgba(255,212,1,.2);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-radius:16px;
  box-shadow:0 12px 30px rgba(0,0,0,.35);
}

.pf-card{
  flex:1 1 auto;
  padding:20px 24px;
  max-width:900px;
  transition: transform .22s ease, box-shadow .22s ease;
}
.pf-card:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 36px rgba(0,0,0,.4);
}

.pf-name{
  margin:0 0 10px;
  font-size:2.3rem;
  font-weight:800;
  color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.35);
}

.pf-meta{
  font-size:1.1rem;
  display:flex;
  gap:14px;
  align-items:center;
  color:#e9e9ea;
  flex-wrap:wrap;
}

.pf-price{
  color:var(--gold);
  font-weight:800;
  font-size:1.2rem;
}

.pf-contact{
  margin-top:14px;
  font-size:1.05rem;
  line-height:1.6;
  color:#f0f0f0;
}

/* Espacio bajo el hero */
.pf-hero + .container{ margin-top:210px; }

.pf-bio{ margin-top:10px; }
.pf-bio h3,
.pf-gallery h3{
  font-size:1.3rem;
  margin-bottom:12px;
  color:var(--gold);
}
.pf-bio p{
  font-size:1.06rem;
  line-height:1.8;
  color:#ddd;
}

.pf-gallery{ margin-top:10px; }

/* Responsive perfil */
@media (max-width:1024px){
  .pf-avatar{ width:180px; height:180px; transform:translateY(8px); }
  .pf-card{ flex-basis:480px; }
  .pf-name{ font-size:2rem; }
}

@media (max-width:820px){
  .pf-head{
    left:16px;
    right:16px;
    bottom:-86px;
    gap:18px;
    flex-wrap:wrap;
  }
  .pf-avatar{
    width:150px;
    height:150px;
    margin-left:0;
    transform:none;
  }
  .pf-card{ padding:16px 18px; flex-basis:auto; }
  .pf-name{ font-size:1.7rem; }
  .pf-hero + .container{ margin-top:130px; }
}

@media (max-width:640px){
  .pf-hero{ min-height:520px; }
  .pf-head{ padding-top:14px; }

  .pf-avatar{ width:84px; height:84px; }
  .pf-card{ width:100%; max-width:100%; }

  .pf-actions{ flex-direction:column; }
  .pf-actions .btn,
  .pf-actions .chip{
    width:100%;
    justify-content:center;
  }

  .gal-grid{ grid-template-columns:repeat(2, 1fr); }
}

/* ===========================
   GALERÍA & LIGHTBOX
   =========================== */
.gal-item video{ pointer-events:none; }

.gallery-card{
  background:#0f0f10;
  border:1px solid rgba(255,212,1,.35);
  border-radius:16px;
  padding:14px;
  box-shadow:0 10px 28px rgba(0,0,0,.35);
}

.gallery-header{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 8px 10px;
  border-bottom:1px solid #1f1f25;
}
.gallery-header h3{ margin:0; }

.gal-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:14px;
}

.gal-item{
  position:relative;
  display:block;
  border:2px solid rgba(255,212,1,.55);
  border-radius:14px;
  overflow:hidden;
  cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  aspect-ratio:4/5;
}

.gal-item:hover{
  transform:translateY(-2px);
  border-color:rgba(255,212,1,.85);
  box-shadow:0 10px 28px rgba(255,212,1,.12), 0 12px 30px rgba(0,0,0,.45);
}

.gal-item img,
.gal-item video{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  filter:saturate(1.05);
  transition:transform .35s ease;
}

.gal-item:hover img,
.gal-item:hover video{ transform:scale(1.04); }

/* Lightbox */
.lb{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.64);
  backdrop-filter:blur(6px);
  z-index:1500;
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease;
  padding:24px;
}

.lb.is-open{
  opacity:1;
  pointer-events:auto;
}

.lb-stage{
  max-width:min(92vw, 1100px);
  max-height:86vh;
  background:#000;
  border-radius:14px;
  box-shadow:0 16px 40px rgba(0,0,0,.55);
  overflow:hidden;
}

.lb-content img,
.lb-content video{
  display:block;
  max-width:100%;
  max-height:86vh;
  margin:0;
  background:#000;
}

.lb-close{
  position:absolute;
  top:16px;
  right:16px;
  width:40px;
  height:40px;
  line-height:40px;
  border:0;
  border-radius:10px;
  background:rgba(30,30,34,.85);
  color:#fff;
  font-size:26px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 6px 20px rgba(0,0,0,.4);
}
.lb-close:hover{ background:rgba(45,45,50,.92); }

.lb-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border:0;
  border-radius:12px;
  background:rgba(30,30,34,.88);
  color:#fff;
  font-size:28px;
  font-weight:800;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 26px rgba(0,0,0,.5);
}
.lb-prev{ left:14px; }
.lb-next{ right:14px; }
.lb-nav:hover{ background:rgba(45,45,50,.95); }

.lb-content{ animation: lbFade .18s ease; }
@keyframes lbFade{
  from{ opacity:0; transform:scale(.985); }
  to{ opacity:1; transform:scale(1); }
}

/* ===========================
   OTROS / MICRO-INTERACCIONES
   =========================== */
.hover-raise{
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.hover-raise:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

.hover-zoom{
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}
.hover-zoom:hover{ transform: scale(1.015); }

/* Age gate */
.age-gate{ text-align:center; padding:60px 0; }
.age-gate h1{ margin:0 0 10px; }

/* =========================
   Worker Dashboard (premium)
   ========================= */
.wd-wrap{
  max-width:1280px;
  width:100%;
  margin:0 auto;
  padding:0 30px;
}

.wd-subtitle{
  margin:10px 0 8px;
  font-size:.95rem;
  opacity:.9;
}

.wd-gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:22px;
  margin:12px 0 40px;
}
@media (min-width:1280px){
  .wd-gallery-grid{ grid-template-columns:repeat(3, 1fr); }
}

.wd-card{
  background: rgba(10,10,10,0.88);
  border: 1px solid rgba(255,212,1,0.18);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0,0,0,.45);
  transition: transform .18s ease, box-shadow .18s ease;
}
.wd-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0,0,0,.55);
}

.wd-media{
  display:block;
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  max-height:360px;
  background:#000;
}

.wd-card-info{ padding:10px 12px 12px; }

.wd-row{
  display:flex;
  align-items:center;
  gap:10px;
}

.wd-wrap > h1,
.wd-wrap > h2,
.wd-section-head{ max-width:100%; }

.wd-cap{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  flex:1;
  font-size:.92rem;
}

.wd-actions{ margin-top:10px; }

.wd-pill{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  font-size:.82rem;
  line-height:1;
  border:1px solid rgba(255,255,255,0.12);
}
.wd-pill-pending{
  background: rgba(212,175,55,0.12);
  border-color: rgba(212,175,55,0.35);
}
.wd-pill-ok{
  background: rgba(60,200,120,0.12);
  border-color: rgba(60,200,120,0.35);
}

/* Grid "tight" opcional */
.wd-gallery-grid.wd-tight{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 320px));
  gap:18px;
  justify-content:start;
  align-items:start;
  margin:12px 0 40px;
}
.wd-gallery-grid.wd-tight .wd-card{ border-radius:16px; }
.wd-gallery-grid.wd-tight .wd-media{ aspect-ratio:4/5; }
.wd-gallery-grid.wd-tight .wd-card-info{ padding:10px 12px 12px; }
.wd-gallery-grid.wd-tight .wd-actions{ margin-top:10px; }

/* =========================================================
   MOBILE FIX PACK (NO rompe desktop)
   - Navbar: scroll horizontal + dropdown click-friendly + z-index
   - Worker dashboard: 1 columna + full width + sin overflow
   - Profile detail: hero/cover/avatar/card responsivo
   ========================================================= */

/* ---------- NAVBAR / HEADER ---------- */

/* Asegura que el header no “corte” dropdowns */
.tr-header,
.tr-header * {
  -webkit-tap-highlight-color: transparent;
}

.tr-header {
  overflow: visible;
  position: sticky; /* si ya es sticky/fixed, no pasa nada */
  top: 0;
  z-index: 1000;
}

/* Si tu nav tiene blur/glass, que no recorte menús */
.tr-header .container,
.tr-header .nav {
  overflow: visible;
}

/* Dropdown siempre por encima */
.nav .dropdown,
.nav .dropdown-menu {
  position: relative;
  z-index: 2000;
}

.nav .dropdown-menu {
  display: none;          /* se abre por clase .open (JS abajo) */
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  background: rgba(10,10,10,.95);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 12px 35px rgba(0,0,0,.45);
}

.nav .dropdown.open > .dropdown-menu {
  display: block;
}

/* Evita “selección de texto” en iOS al intentar abrir dropdown */
.nav .dropdown > a,
.nav .dropdown > button,
.nav .dropdown > .brand-compact {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* ---------- MOBILE NAV LAYOUT ---------- */
@media (max-width: 820px) {

  /* La nav en móvil: que no intente encajar todo a la fuerza */
  .tr-header .nav {
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }

  .tr-header .nav::-webkit-scrollbar { height: 0; }

  /* Links más compactos */
  .tr-header .nav a,
  .tr-header .nav button {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* Dropdown menu en móvil: mejor centrado y sin salirse */
  .nav .dropdown-menu {
    position: absolute;
    left: 0;
    right: auto;
    max-width: calc(100vw - 24px);
  }
}

/* ---------- WORKER DASHBOARD (mobile) ---------- */
@media (max-width: 820px) {
  /* Contenedores típicos */
  .container { padding-left: 14px; padding-right: 14px; }

  /* Cualquier card/form: full width */
  .tr-card, .card, .glass, .gallery-card {
    width: 100%;
    max-width: 100%;
  }

  /* Tu worker form usa grid-2 + span-2 */
  .grid-2 {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .span-2 { grid-column: auto !important; }

  /* Inputs sin ancho fijo */
  .tr-form input,
  .tr-form select,
  .tr-form textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Checkbox/labels: que no se corten */
  .tr-form label {
    display: block;
    line-height: 1.25;
  }

  /* Botones en stack */
  .tr-actions,
  .pf-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .btn, .chip {
    width: 100%;
    justify-content: center;
  }
}

/* ---------- PROFILE DETAIL (mobile) ---------- */
@media (max-width: 820px) {

  /* Hero: altura razonable */
  .pf-hero { overflow: hidden; }
  .pf-cover {
    width: 100%;
    height: 320px;           /* ajustable */
    object-fit: cover;
    display: block;
  }

  /* La cabecera */
  .pf-head {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 14px 14px 18px !important;
  }

  /* Avatar: más pequeño y sin “salirse” */
  .pf-avatar {
    width: 84px !important;
    height: 84px !important;
    border-radius: 999px;
    overflow: hidden;
    border: 3px solid rgba(255,255,255,.15);
  }
  .pf-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Tarjeta del perfil: full width */
  .pf-card {
    width: 100% !important;
    max-width: 100% !important;
  }

  .pf-name {
    font-size: 1.35rem !important;
    line-height: 1.15;
  }

  .pf-meta {
    display: block !important;
    line-height: 1.35;
  }

  /* Galería: 2 columnas en móvil y sin deformar */
  .gal-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .gal-item img,
  .gal-item video {
    width: 100%;
    height: 170px;
    object-fit: cover;
    border-radius: 14px;
    display: block;
  }
}

/* ---------- LIGHTBOX (mobile friendliness) ---------- */
@media (max-width: 820px) {
  .lb .lb-stage { padding: 14px; }
  .lb .lb-content img,
  .lb .lb-content video {
    max-width: 100%;
    max-height: 80vh;
    border-radius: 14px;
  }
}

.tr-progress{
  width:100%;
  height:10px;
  background:#333;
  border-radius:6px;
  overflow:hidden;
  margin-top:4px;
}

.tr-progress__fill{
  height:10px;
  background: linear-gradient(90deg, var(--gold-soft), var(--gold));
}

/* si quieres videos en azul, deja esto */
.tr-progress__fill--video{
  background: linear-gradient(90deg, #76d1ff, #3fa6e0);
}

/* si quieres TODO en naranjo, borra el --video */

/* ======================================================
   FIX MOBILE GLOBAL – TodasReales
   NO afecta desktop
====================================================== */
@media (max-width: 820px){

  /* ---------- RESET OVERFLOW ---------- */
  html, body{
    overflow-x: hidden;
  }

  img, video{
    max-width:100%;
    height:auto;
  }

  /* ==================================================
     NAV BAR MOBILE
  ================================================== */
  .tr-header{
    position: sticky;
    top: 0;
    z-index: 3000;
  }

  .tr-header .nav{
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    justify-content: flex-start;
    overflow: visible;
  }

  .tr-header .nav > a,
  .tr-header .nav > .dropdown{
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .dropdown{
    position: relative;
  }

  .dropdown-menu{
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: min(92vw, 360px);
    max-width: 92vw;
    z-index: 4000;
  }

  /* ==================================================
     PROFILE DETAIL MOBILE
  ================================================== */
  .pf-hero{
    min-height: 320px;
  }

  .pf-cover{
    height: 300px;
    object-fit: cover;
    object-position: center;
  }

  .pf-head{
    padding: 0 12px;
  }

  .pf-card{
    width: 100%;
    max-width: 100%;
  }

  .pf-actions{
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .pf-actions .btn,
  .pf-actions .chip{
    width: 100%;
    justify-content: center;
  }

  .gal-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  /* ==================================================
     WORKER DASHBOARD MOBILE
  ================================================== */
  .tr-card{
    width: 100%;
    max-width: 100%;
  }

  .tr-form p{
    display: block;
    width: 100%;
  }

  .tr-form input,
  .tr-form select,
  .tr-form textarea{
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .tr-form ul{
    padding-left: 0;
    list-style: none;
  }

  .tr-form ul li{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
  }

  .tr-form ul li label{
    flex: 1;
    white-space: normal;
  }

  .tr-form button,
  .tr-form .btn{
    width: 100%;
  }
}

/* EXTRA – móviles muy chicos */
@media (max-width: 420px){
  .gal-grid{
    grid-template-columns: 1fr;
  }

  .dropdown-menu{
    left: 50%;
    transform: translateX(-50%);
  }
}
/* ===========================
   PALETA Y BASE GLOBAL
   =========================== */
:root{
  --bg:#0f0f10;
  --bg-soft:#161618;
  --text:#eee;
  --muted:#b9b9b9;

    /* Acento naranjo unificado (basado en #f39000) */
  --gold:#f39000;
  --gold-soft:#ffc36b; /* variante clara del naranjo */
  --gold-soft-2:#ffe2b8; /* mini variante extra (highlight) */
  --gold-2:#c56f00;   /* variante oscura del naranjo */
}

*{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;
}

a{ color:inherit; text-decoration:none; }

.container{
  width:100%;
  max-width:1500px;
  padding:0 30px;
  margin:0 auto;
}

/* ===========================
   HEADER / NAV
   =========================== */
.tr-header{
  background: linear-gradient(180deg, rgba(0,0,0,.70), rgba(0,0,0,.55));
  backdrop-filter: blur(6px);
  position:sticky;
  top:0;
  z-index:10;
  border-bottom:1px solid #1f1f25;
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
}

.tr-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-height:56px;
}

.brand-logo{
  height:36px;
  width:auto;
  display:block;
  object-fit:contain;
}
@media (max-width:520px){
  .brand-logo{ height:30px; }
}

.tr-header .brand{
  font-weight:800;
  font-size:20px;
  padding:14px 0;
  display:inline-block;
  letter-spacing:.2px;
}
.tr-header .brand:hover{ filter:brightness(1.03); }
.tr-header .accent{ color:var(--gold); }

/* NAV principal */
.nav{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:nowrap;
}

.nav a,
.nav .dropdown{
  position:relative;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid transparent;
  display:inline-flex;
  gap:8px;
  align-items:center;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

.nav svg{
  width:18px;
  height:18px;
  flex:0 0 18px;
  opacity:.9;
}

.nav a:hover,
.nav .dropdown:hover{
  background:#151518;
  transform:translateY(-1px);
  box-shadow:0 8px 22px rgba(0,0,0,.28);
  border-color:#242428;
}

/* Subrayado dorado animado */
.nav a::after,
.nav .dropdown > .dd-trigger::after{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:6px;
  height:2px;
  border-radius:2px;
  opacity:0;
  transform:translateY(4px);
  background:linear-gradient(90deg, var(--gold), var(--gold-soft) 60%, var(--gold));
  transition:opacity .18s ease, transform .18s ease;
}

.nav a:hover::after,
.nav .dropdown:hover > .dd-trigger::after,
.nav a.is-active::after{
  opacity:1;
  transform:translateY(0);
}

/* Activo fijo */
.nav a.is-active{
  border-color: rgba(255,212,1,.28);
  background: radial-gradient(120% 100% at 0% 0%, rgba(255,212,1,.10), transparent 56%);
  box-shadow: inset 0 0 0 1px rgba(255,212,1,.15);
}

/* Dropdown: trigger (tap-friendly iOS) */
.dropdown{ position:relative; }

.dd-trigger{
  position:relative;
  background:transparent;
  border:0;
  color:inherit;
  font:inherit;
  cursor:pointer;
  padding:10px 14px;
  border-radius:12px;

  -webkit-user-select:none;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

/* Dropdown menu: oculto por defecto + animación */
.dropdown-menu{
  position:absolute;
  top:100%;
  left:0;
  background: linear-gradient(180deg,#141416,#101012);
  padding:8px;
  border:1px solid #222;
  border-radius:12px;
  min-width:220px;
  box-shadow:0 18px 40px rgba(0,0,0,.45),
             0 0 0 1px rgba(255,212,1,.10) inset;
  outline:1px solid rgba(255,212,1,.12);
  z-index:20;

  opacity:0;
  pointer-events:none;
  transform:translateY(6px);
  transition:opacity .15s ease, transform .15s ease;
}

.dropdown-menu::before{
  content:"";
  position:absolute;
  left:8px;
  right:8px;
  top:-1px;
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg, transparent,
                             var(--gold) 35%,
                             var(--gold-soft),
                             var(--gold) 65%,
                             transparent);
  opacity:.65;
}

/* Estado abierto por JS (mobile + desktop) */
.dropdown.open .dropdown-menu{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}

/* Hover solo en dispositivos con hover real (evita iOS “pegajoso”) */
@media (hover:hover) and (pointer:fine){
  .dropdown:hover .dropdown-menu{
    opacity:1;
    pointer-events:auto;
    transform:translateY(0);
  }
}

.dropdown-menu a{
  display:flex;
  gap:8px;
  align-items:center;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid transparent;
}

.dropdown-menu a:hover{
  background:#19191c;
  border-color:#242428;
}

.dropdown-menu.long{
  max-height:260px;
  overflow:auto;
}

/* Botón moderar “premium” */
.nav a.nav-admin{
  border-color: rgba(255,212,1,.25);
  background: radial-gradient(120% 100% at 0% 0%, rgba(255,212,1,.10), transparent 56%);
}
.nav a.nav-admin:hover{
  border-color: rgba(255,212,1,.45);
  box-shadow: 0 10px 26px rgba(255,212,1,.18),
              0 12px 30px rgba(0,0,0,.45);
}

/* Badge moderación (unificado, sin duplicados) */
.nav-moderation{ position:relative; }
.nav-moderation .nav-label{ display:inline-flex; align-items:center; gap:4px; }

.mod-badge{
  margin-left:6px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:16px;
  padding:1px 6px;
  border-radius:999px;
  background:#e02424;
  color:#fff;
  font-size:11px;
  font-weight:600;
  line-height:1.4;
}

.nav-moderation.has-pending::after{
  content:'';
  position:absolute;
  top:6px;
  right:6px;
  width:8px;
  height:8px;
  border-radius:999px;
  background:#ff3b3b;
  box-shadow: 0 0 0 3px rgba(255,59,59,.25);
}

/* NAV responsive */
@media (max-width:880px){
  .tr-header .container{ flex-wrap:wrap; row-gap:10px; }
  .nav{ width:100%; justify-content:flex-start; flex-wrap:wrap; gap:10px 14px; }
}

@media (max-width:640px){
  .nav a, .nav .dd-trigger{
    padding:12px 14px;
    border-radius:12px;
  }

  .nav{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    flex-wrap:nowrap;
    gap:10px;
  }
  .nav::-webkit-scrollbar{ display:none; }
}

/* ===========================
   TIPOGRAFÍA & UTILIDADES
   =========================== */
.muted{ color:var(--muted); }

.brand-gradient{
  background: linear-gradient(90deg, var(--gold), var(--gold-soft) 60%, var(--gold));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.prose{
  font-size:1.08rem;
  line-height:1.9;
  letter-spacing:.2px;
}
.prose p{ margin:0 0 1rem; color:var(--text); }
.prose p.lead{ color:var(--muted); font-size:1.12rem; margin-bottom:1.1rem; }
.prose strong{ color:#fff; }
.prose em{
  color:#d7d7d7;
  font-style:normal;
  text-decoration:underline dotted #444 1px;
  text-underline-offset:3px;
}

.divider{
  height:1px;
  background:linear-gradient(90deg,
    transparent,
    var(--gold) 30%,
    var(--gold-soft),
    var(--gold) 70%,
    transparent);
  opacity:.4;
  margin:16px 0 18px;
  border-radius:1px;
}

/* ===========================
   BOTONES / ALERTAS
   =========================== */
.btn{
  padding:10px 14px;
  border-radius:12px;
  border:1px solid transparent;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease, background .18s ease, border-color .18s ease;
}

.btn-gold{
  background:linear-gradient(90deg,var(--gold),var(--gold-soft) 60%,var(--gold));
  color:#222;
  box-shadow:0 8px 24px rgba(255,212,1,.22);
}
.btn-gold:hover{ filter:brightness(1.02); transform:translateY(-1px); }

.btn-dark{
  background:#18181b;
  color:#f5f5f5;
  border:1px solid #2b2b2f;
}
.btn-dark:hover{ background:#1f1f23; transform:translateY(-1px); }

.alert{
  margin:10px 0;
  padding:12px;
  border-radius:12px;
  background:#1e1e22;
}

/* ===========================
   HOME: HERO + BUSCADOR
   =========================== */
.hero{
  width:100%;
  max-width:1200px;
  margin:40px auto 30px auto;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.hero-title{
  width:100%;
  text-align:center;
  font-size:2.9rem;
  font-weight:800;
  margin:0 0 20px;
}

/* Buscador */
.search-wrap{
  width:100%;
  max-width:900px;
  margin:0 auto;
  display:flex;
  justify-content:center;
  gap:12px;
}

.search-input{
  flex:1;
  padding:14px 18px;
  border-radius:12px;
  background:#0f0f11;
  border:1px solid #222;
  color:white;
  font-size:1.1rem;
  outline:none;
  transition:border .18s ease, box-shadow .18s ease, transform .12s ease, background .18s ease;
}

.search-input:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(255,212,1,.25), 0 10px 24px rgba(0,0,0,.35);
  transform:translateY(-1px);
}

.search-btn{
  height:44px;
  padding:0 18px;
  border-radius:12px;
  font-weight:600;
}

.section-title{
  font-size:1.9rem;
  font-weight:700;
  margin-top:32px;
  margin-bottom:24px;
}

/* ===========================
   GRID / CARDS (HOME)
   =========================== */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:24px;
  margin:12px 0 40px;
}

.card{
  background:#121214;
  border:1px solid #1f1f25;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 4px 10px rgba(0,0,0,.25);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.card:hover{
  transform: translateY(-3px);
  box-shadow:0 14px 28px rgba(0,0,0,.35);
}

.person-media img,
.person-media video{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  display:block;
  filter:saturate(1.05);
}

.person-info{
  padding:16px;
  padding-bottom:24px;
}

.person-name{
  margin:0;
  font-size:1.1rem;
  font-weight:700;
}
.person-name .age{ font-weight:500; color:#f0f0f0; }

.person-meta{
  margin:6px 0 0;
  font-size:.92rem;
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  color:#cfcfd4;
}
.person-meta .place{ color:#ddd; }
.person-meta .dot{ opacity:.5; }
.person-meta .price{ color:var(--gold); font-weight:700; }

.card .badges{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:10px;
  margin-bottom:4px;
}

.badge{
  background: rgba(255,214,120,0.18);
  padding:4px 10px;
  border-radius:999px;
  font-size:0.78rem;
  border:1px solid rgba(255,214,120,0.35);
  color:#ffd778;
  white-space:nowrap;
}

/* ===========================
   CHIPS DE FILTROS (HOME)
   =========================== */
.filters-stack{
  width:100%;
  max-width:1200px;
  margin:40px auto 0 auto;
  padding-top:10px;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.chips-row{
  width:100%;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  margin-top:8px;
  margin-bottom:16px;
  text-align:center;
}

.chips-label{
  width:100%;
  text-align:center;
  font-weight:600;
  font-size:.95rem;
  margin-bottom:6px;
  color:#e8e8ea;
}

.chip{
  padding:7px 14px;
  border-radius:999px;
  border:1px solid #2b2b2b;
  background:#141416;
  color:#e1e1e1;
  font-size:.88rem;
  margin-bottom:6px;
  transition: all .18s ease;
}

.chip:hover{
  background:#1c1c1f;
  border-color:#3a3a3d;
  transform:translateY(-2px);
}

.chip.is-active{
  background:linear-gradient(90deg, var(--gold), var(--gold-soft));
  color:#222;
  border-color:var(--gold-2);
  box-shadow:0 0 0 2px rgba(255,212,1,.18), 0 10px 22px rgba(255,212,1,.22);
}

@media (max-width:640px){
  .chips-row{
    overflow-x:auto;
    flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;
    gap:10px;
    padding-bottom:6px;
  }
  .chips-row::-webkit-scrollbar{ display:none; }
  .chip{ white-space:nowrap; }
}

/* ===========================
   PAGINACIÓN
   =========================== */
.pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:16px;
  padding:26px 0;
}

.page-btn{
  padding:8px 16px;
  border-radius:8px;
  background:#111;
  color:#fff;
  border:1px solid #333;
  transition:.2s;
}
.page-btn:hover{
  background:var(--gold);
  color:#000;
  border-color:var(--gold);
}
.page-btn.disabled{ opacity:.35; pointer-events:none; }
.page-info{ color:#ccc; font-size:.95rem; }

/* ===========================
   FOOTER
   =========================== */
.tr-footer{
  border-top:1px solid #1f1f25;
  margin-top:40px;
}
.tr-footer .container{ padding:20px 16px; }

/* ===========================
   FORMULARIOS / TARJETAS
   =========================== */
.tr-card{
  background:#0f0f10;
  border:1px solid rgba(255,212,1,.18);
  border-radius:16px;
  padding:22px;
  box-shadow:0 10px 28px rgba(0,0,0,.35);
}

.tr-form{ display:grid; gap:16px; }

@media (min-width:860px){
  .tr-form.grid-2{ grid-template-columns:1fr 1fr; }
  .tr-form .span-2{ grid-column:span 2; }
}

.tr-label{
  font-size:.88rem;
  color:var(--muted);
  margin-bottom:6px;
  display:inline-block;
}

.tr-input,
.tr-select,
.tr-textarea{
  width:100%;
  background:#111214;
  border:1px solid #2a2a2d;
  color:#f4f4f5;
  border-radius:12px;
  padding:12px 14px;
  outline:none;
  transition:border .15s ease, box-shadow .15s ease, background .15s ease;
}

.tr-textarea{ min-height:120px; resize:vertical; }

.tr-input:focus,
.tr-select:focus,
.tr-textarea:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(255,212,1,.25);
  background:#101012;
}

.tr-input[type=number]{ appearance:textfield; -moz-appearance:textfield; }
.tr-input[type=number]::-webkit-outer-spin-button,
.tr-input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

.input-error{ color:#ff4444; font-size:0.85rem; margin-top:4px; }
.tr-input.error{ border:1px solid #ff4444 !important; }

/* checkboxes en grid */
.checkgrid{
  display:grid;
  gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  list-style:none;
  padding:0;
  margin:0;
}
.checkgrid li{ margin:0; }

.checkgrid input[type=checkbox]{
  appearance:none;
  width:18px;
  height:18px;
  border-radius:6px;
  margin-right:8px;
  border:1px solid #3a3a3e;
  background:#121214;
  vertical-align:middle;
  display:inline-block;
  position:relative;
  top:-1px;
}

.checkgrid input[type=checkbox]:checked{
  background:linear-gradient(90deg,var(--gold),var(--gold-soft));
  border-color:var(--gold);
}

.checkgrid label{ color:#e8e8ea; cursor:pointer; }
.checkgrid label:hover{ color:#fff; }

/* Input file estilo */
.tr-file{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px;
  border:1px dashed #3a3a3e;
  border-radius:12px;
  background:#111214;
  position:relative;
}

.tr-file input[type=file]{
  width:1px;
  height:1px;
  opacity:0;
  position:absolute;
  pointer-events:none;
}

.tr-file .file-name{ color:#cfcfd4; font-size:.95rem; }
.tr-file .file-btn{ white-space:nowrap; }

/* Ocultar ClearableFileInput de Django */
.tr-hide-django-clear .clearable-file-input,
.tr-hide-django-clear .file-upload a,
.tr-hide-django-clear .file-upload span{
  display:none !important;
}

.input-hint{ color:#9aa; font-size:.85rem; margin-top:6px; }

/* Select estilo chip */
.chip-select{
  background:#222;
  color:#fff;
  border:1px solid #444;
  padding:6px 10px;
  border-radius:20px;
  font-size:0.9rem;
  cursor:pointer;
}
.chip-select option{ background:#111; color:#fff; }

/* ===========================
   MODERACIÓN / TABLAS
   =========================== */
.diff-table{
  width:100%;
  border-collapse:collapse;
  margin-top:12px;
}

.diff-table th,
.diff-table td{
  padding:10px 12px;
  border-bottom:1px solid #222;
  vertical-align:top;
}

.diff-table thead th{ color:#bdbdbf; font-weight:700; }
.diff-table th{ width:220px; color:#cfcfd4; font-weight:600; }

.diff-row.changed td{ background: rgba(255,212,1,.06); }
.diff-row.changed td:nth-child(3){ border-left:2px solid var(--gold); }

.status-banner{
  padding:14px 16px;
  border-radius:14px;
  border:1px solid #2b2b2f;
  background:#101012;
  margin:10px 0 16px;
  font-weight:600;
}

.status-approved{ border-color:#2a5f3a; background:rgba(40,140,80,.12); }
.status-pending{ border-color:#6a5a1a; background:rgba(255,212,1,.10); }
.status-rejected{ border-color:#6a2a2a; background:rgba(220,50,50,.10); }

.card-info{ padding:10px; }

/* ===========================
   PERFIL (HERO + CARD)
   =========================== */
.pf-hero{ position:relative; overflow:visible; }

.pf-cover{
  width:100%;
  height:26vh;
  min-height:220px;
  object-fit:cover;
  display:block;
  transition: filter .25s ease, transform .25s ease;
}
.pf-cover:hover{ filter:saturate(1.05) contrast(1.02); }

.pf-cover--placeholder{
  height:26vh;
  min-height:220px;
  background:linear-gradient(180deg,#131316,#0f0f10);
}

.pf-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom,
    rgba(0,0,0,.65) 0%,
    rgba(0,0,0,.25) 45%,
    transparent 70%);
  pointer-events:none;
}

.pf-head{
  position:absolute;
  left:0;
  right:0;
  bottom:-96px;
  display:flex;
  justify-content:flex-start;
  align-items:flex-end;
  gap:26px;
  flex-wrap:nowrap;
  z-index:3;
  pointer-events:none;
}
.pf-head > *{ pointer-events:auto; }

.pf-avatar{
  flex:0 0 auto;
  width:210px;
  height:210px;
  border-radius:999px;
  overflow:hidden;
  border:6px solid rgba(255,212,1,.75);
  background:#111;
  box-shadow:0 10px 30px rgba(0,0,0,.55);
  margin-left:-6px;
  transform:translateY(12px);
  transition: transform .22s ease, box-shadow .22s ease;
}
.pf-avatar:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 26px rgba(0,0,0,.5);
}
.pf-avatar img{ width:100%; height:100%; object-fit:cover; }

/* Glass */
.glass{
  background:rgba(15,15,16,.82);
  border:1px solid rgba(255,212,1,.2);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-radius:16px;
  box-shadow:0 12px 30px rgba(0,0,0,.35);
}

.pf-card{
  flex:1 1 auto;
  padding:20px 24px;
  max-width:900px;
  transition: transform .22s ease, box-shadow .22s ease;
}
.pf-card:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 36px rgba(0,0,0,.4);
}

.pf-name{
  margin:0 0 10px;
  font-size:2.3rem;
  font-weight:800;
  color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.35);
}

.pf-meta{
  font-size:1.1rem;
  display:flex;
  gap:14px;
  align-items:center;
  color:#e9e9ea;
  flex-wrap:wrap;
}

.pf-price{
  color:var(--gold);
  font-weight:800;
  font-size:1.2rem;
}

.pf-contact{
  margin-top:14px;
  font-size:1.05rem;
  line-height:1.6;
  color:#f0f0f0;
}

/* Espacio bajo el hero */
.pf-hero + .container{ margin-top:210px; }

.pf-bio{ margin-top:10px; }
.pf-bio h3,
.pf-gallery h3{
  font-size:1.3rem;
  margin-bottom:12px;
  color:var(--gold);
}
.pf-bio p{
  font-size:1.06rem;
  line-height:1.8;
  color:#ddd;
}

.pf-gallery{ margin-top:10px; }

/* Responsive perfil */
@media (max-width:1024px){
  .pf-avatar{ width:180px; height:180px; transform:translateY(8px); }
  .pf-card{ flex-basis:480px; }
  .pf-name{ font-size:2rem; }
}

@media (max-width:820px){
  .pf-head{
    left:16px;
    right:16px;
    bottom:-86px;
    gap:18px;
    flex-wrap:wrap;
  }
  .pf-avatar{
    width:150px;
    height:150px;
    margin-left:0;
    transform:none;
  }
  .pf-card{ padding:16px 18px; flex-basis:auto; }
  .pf-name{ font-size:1.7rem; }
  .pf-hero + .container{ margin-top:130px; }
}

@media (max-width:640px){
  .pf-hero{ min-height:520px; }
  .pf-head{ padding-top:14px; }

  .pf-avatar{ width:84px; height:84px; }
  .pf-card{ width:100%; max-width:100%; }

  .pf-actions{ flex-direction:column; }
  .pf-actions .btn,
  .pf-actions .chip{
    width:100%;
    justify-content:center;
  }

  .gal-grid{ grid-template-columns:repeat(2, 1fr); }
}

/* ===========================
   GALERÍA & LIGHTBOX
   =========================== */
.gal-item video{ pointer-events:none; }

.gallery-card{
  background:#0f0f10;
  border:1px solid rgba(255,212,1,.35);
  border-radius:16px;
  padding:14px;
  box-shadow:0 10px 28px rgba(0,0,0,.35);
}

.gallery-header{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 8px 10px;
  border-bottom:1px solid #1f1f25;
}
.gallery-header h3{ margin:0; }

.gal-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:14px;
}

.gal-item{
  position:relative;
  display:block;
  border:2px solid rgba(255,212,1,.55);
  border-radius:14px;
  overflow:hidden;
  cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  aspect-ratio:4/5;
}

.gal-item:hover{
  transform:translateY(-2px);
  border-color:rgba(255,212,1,.85);
  box-shadow:0 10px 28px rgba(255,212,1,.12), 0 12px 30px rgba(0,0,0,.45);
}

.gal-item img,
.gal-item video{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  filter:saturate(1.05);
  transition:transform .35s ease;
}

.gal-item:hover img,
.gal-item:hover video{ transform:scale(1.04); }

/* Lightbox */
.lb{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.64);
  backdrop-filter:blur(6px);
  z-index:1500;
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease;
  padding:24px;
}

.lb.is-open{
  opacity:1;
  pointer-events:auto;
}

.lb-stage{
  max-width:min(92vw, 1100px);
  max-height:86vh;
  background:#000;
  border-radius:14px;
  box-shadow:0 16px 40px rgba(0,0,0,.55);
  overflow:hidden;
}

.lb-content img,
.lb-content video{
  display:block;
  max-width:100%;
  max-height:86vh;
  margin:0;
  background:#000;
}

.lb-close{
  position:absolute;
  top:16px;
  right:16px;
  width:40px;
  height:40px;
  line-height:40px;
  border:0;
  border-radius:10px;
  background:rgba(30,30,34,.85);
  color:#fff;
  font-size:26px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 6px 20px rgba(0,0,0,.4);
}
.lb-close:hover{ background:rgba(45,45,50,.92); }

.lb-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border:0;
  border-radius:12px;
  background:rgba(30,30,34,.88);
  color:#fff;
  font-size:28px;
  font-weight:800;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 26px rgba(0,0,0,.5);
}
.lb-prev{ left:14px; }
.lb-next{ right:14px; }
.lb-nav:hover{ background:rgba(45,45,50,.95); }

.lb-content{ animation: lbFade .18s ease; }
@keyframes lbFade{
  from{ opacity:0; transform:scale(.985); }
  to{ opacity:1; transform:scale(1); }
}

/* ===========================
   OTROS / MICRO-INTERACCIONES
   =========================== */
.hover-raise{
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.hover-raise:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

.hover-zoom{
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}
.hover-zoom:hover{ transform: scale(1.015); }

/* Age gate */
.age-gate{ text-align:center; padding:60px 0; }
.age-gate h1{ margin:0 0 10px; }

/* =========================
   Worker Dashboard (premium)
   ========================= */
.wd-wrap{
  max-width:1280px;
  width:100%;
  margin:0 auto;
  padding:0 30px;
}

.wd-subtitle{
  margin:10px 0 8px;
  font-size:.95rem;
  opacity:.9;
}

.wd-gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:22px;
  margin:12px 0 40px;
}
@media (min-width:1280px){
  .wd-gallery-grid{ grid-template-columns:repeat(3, 1fr); }
}

.wd-card{
  background: rgba(10,10,10,0.88);
  border: 1px solid rgba(255,212,1,0.18);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0,0,0,.45);
  transition: transform .18s ease, box-shadow .18s ease;
}
.wd-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0,0,0,.55);
}

.wd-media{
  display:block;
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  max-height:360px;
  background:#000;
}

.wd-card-info{ padding:10px 12px 12px; }

.wd-row{
  display:flex;
  align-items:center;
  gap:10px;
}

.wd-wrap > h1,
.wd-wrap > h2,
.wd-section-head{ max-width:100%; }

.wd-cap{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  flex:1;
  font-size:.92rem;
}

.wd-actions{ margin-top:10px; }

.wd-pill{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  font-size:.82rem;
  line-height:1;
  border:1px solid rgba(255,255,255,0.12);
}
.wd-pill-pending{
  background: rgba(212,175,55,0.12);
  border-color: rgba(212,175,55,0.35);
}
.wd-pill-ok{
  background: rgba(60,200,120,0.12);
  border-color: rgba(60,200,120,0.35);
}

/* Grid "tight" opcional */
.wd-gallery-grid.wd-tight{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 320px));
  gap:18px;
  justify-content:start;
  align-items:start;
  margin:12px 0 40px;
}
.wd-gallery-grid.wd-tight .wd-card{ border-radius:16px; }
.wd-gallery-grid.wd-tight .wd-media{ aspect-ratio:4/5; }
.wd-gallery-grid.wd-tight .wd-card-info{ padding:10px 12px 12px; }
.wd-gallery-grid.wd-tight .wd-actions{ margin-top:10px; }

/* =========================================================
   MOBILE FIX PACK (NO rompe desktop)
   - Navbar: scroll horizontal + dropdown click-friendly + z-index
   - Worker dashboard: 1 columna + full width + sin overflow
   - Profile detail: hero/cover/avatar/card responsivo
   ========================================================= */

/* ---------- NAVBAR / HEADER ---------- */

/* Asegura que el header no “corte” dropdowns */
.tr-header,
.tr-header * {
  -webkit-tap-highlight-color: transparent;
}

.tr-header {
  overflow: visible;
  position: sticky; /* si ya es sticky/fixed, no pasa nada */
  top: 0;
  z-index: 1000;
}

/* Si tu nav tiene blur/glass, que no recorte menús */
.tr-header .container,
.tr-header .nav {
  overflow: visible;
}

/* Dropdown siempre por encima */
.nav .dropdown,
.nav .dropdown-menu {
  position: relative;
  z-index: 2000;
}

.nav .dropdown-menu {
  display: none;          /* se abre por clase .open (JS abajo) */
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  background: rgba(10,10,10,.95);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 12px 35px rgba(0,0,0,.45);
}

.nav .dropdown.open > .dropdown-menu {
  display: block;
}

/* Evita “selección de texto” en iOS al intentar abrir dropdown */
.nav .dropdown > a,
.nav .dropdown > button,
.nav .dropdown > .brand-compact {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* ---------- MOBILE NAV LAYOUT ---------- */
@media (max-width: 820px) {

  /* La nav en móvil: que no intente encajar todo a la fuerza */
  .tr-header .nav {
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }

  .tr-header .nav::-webkit-scrollbar { height: 0; }

  /* Links más compactos */
  .tr-header .nav a,
  .tr-header .nav button {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* Dropdown menu en móvil: mejor centrado y sin salirse */
  .nav .dropdown-menu {
    position: absolute;
    left: 0;
    right: auto;
    max-width: calc(100vw - 24px);
  }
}

/* ---------- WORKER DASHBOARD (mobile) ---------- */
@media (max-width: 820px) {
  /* Contenedores típicos */
  .container { padding-left: 14px; padding-right: 14px; }

  /* Cualquier card/form: full width */
  .tr-card, .card, .glass, .gallery-card {
    width: 100%;
    max-width: 100%;
  }

  /* Tu worker form usa grid-2 + span-2 */
  .grid-2 {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .span-2 { grid-column: auto !important; }

  /* Inputs sin ancho fijo */
  .tr-form input,
  .tr-form select,
  .tr-form textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Checkbox/labels: que no se corten */
  .tr-form label {
    display: block;
    line-height: 1.25;
  }

  /* Botones en stack */
  .tr-actions,
  .pf-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .btn, .chip {
    width: 100%;
    justify-content: center;
  }
}

/* ---------- PROFILE DETAIL (mobile) ---------- */
@media (max-width: 820px) {

  /* Hero: altura razonable */
  .pf-hero { overflow: hidden; }
  .pf-cover {
    width: 100%;
    height: 320px;           /* ajustable */
    object-fit: cover;
    display: block;
  }

  /* La cabecera */
  .pf-head {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 14px 14px 18px !important;
  }

  /* Avatar: más pequeño y sin “salirse” */
  .pf-avatar {
    width: 84px !important;
    height: 84px !important;
    border-radius: 999px;
    overflow: hidden;
    border: 3px solid rgba(255,255,255,.15);
  }
  .pf-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Tarjeta del perfil: full width */
  .pf-card {
    width: 100% !important;
    max-width: 100% !important;
  }

  .pf-name {
    font-size: 1.35rem !important;
    line-height: 1.15;
  }

  .pf-meta {
    display: block !important;
    line-height: 1.35;
  }

  /* Galería: 2 columnas en móvil y sin deformar */
  .gal-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .gal-item img,
  .gal-item video {
    width: 100%;
    height: 170px;
    object-fit: cover;
    border-radius: 14px;
    display: block;
  }
}

/* ---------- LIGHTBOX (mobile friendliness) ---------- */
@media (max-width: 820px) {
  .lb .lb-stage { padding: 14px; }
  .lb .lb-content img,
  .lb .lb-content video {
    max-width: 100%;
    max-height: 80vh;
    border-radius: 14px;
  }
}

.tr-progress{
  width:100%;
  height:10px;
  background:#333;
  border-radius:6px;
  overflow:hidden;
  margin-top:4px;
}

.tr-progress__fill{
  height:10px;
  background: linear-gradient(90deg, var(--gold-soft), var(--gold));
}

/* si quieres videos en azul, deja esto */
.tr-progress__fill--video{
  background: linear-gradient(90deg, #76d1ff, #3fa6e0);
}

/* si quieres TODO en naranjo, borra el --video */

/* ======================================================
   FIX MOBILE GLOBAL – TodasReales
   NO afecta desktop
====================================================== */
@media (max-width: 820px){

  /* ---------- RESET OVERFLOW ---------- */
  html, body{
    overflow-x: hidden;
  }

  img, video{
    max-width:100%;
    height:auto;
  }

  /* ==================================================
     NAV BAR MOBILE
  ================================================== */
  .tr-header{
    position: sticky;
    top: 0;
    z-index: 3000;
  }

  .tr-header .nav{
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    justify-content: flex-start;
    overflow: visible;
  }

  .tr-header .nav > a,
  .tr-header .nav > .dropdown{
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .dropdown{
    position: relative;
  }

  .dropdown-menu{
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: min(92vw, 360px);
    max-width: 92vw;
    z-index: 4000;
  }

  /* ==================================================
     PROFILE DETAIL MOBILE
  ================================================== */
  .pf-hero{
    min-height: 320px;
  }

  .pf-cover{
    height: 300px;
    object-fit: cover;
    object-position: center;
  }

  .pf-head{
    padding: 0 12px;
  }

  .pf-card{
    width: 100%;
    max-width: 100%;
  }

  .pf-actions{
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .pf-actions .btn,
  .pf-actions .chip{
    width: 100%;
    justify-content: center;
  }

  .gal-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  /* ==================================================
     WORKER DASHBOARD MOBILE
  ================================================== */
  .tr-card{
    width: 100%;
    max-width: 100%;
  }

  .tr-form p{
    display: block;
    width: 100%;
  }

  .tr-form input,
  .tr-form select,
  .tr-form textarea{
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .tr-form ul{
    padding-left: 0;
    list-style: none;
  }

  .tr-form ul li{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
  }

  .tr-form ul li label{
    flex: 1;
    white-space: normal;
  }

  .tr-form button,
  .tr-form .btn{
    width: 100%;
  }
}

/* EXTRA – móviles muy chicos */
@media (max-width: 420px){
  .gal-grid{
    grid-template-columns: 1fr;
  }

  .dropdown-menu{
    left: 50%;
    transform: translateX(-50%);
  }
}
/* ==========================================================================
   FIX FINAL DEFINITIVO v4.0 (Nav limpia, Menú centrado, Login, Perfil Up)
   Pega esto al final de main.css reemplazando los fixes anteriores.
   ========================================================================== */

@media (max-width: 820px) {

  /* --- 1. RESET GLOBAL --- */
  html, body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
  }
  .container, .wd-wrap {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  /* --- 2. NAVBAR (Limpieza total del cuadro blanco) --- */
  .tr-header .nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    overflow: visible !important; /* Permite que el menú salga */
  }

  /* Reseteo agresivo para eliminar cuadros blancos */
  .tr-header .nav a,
  .tr-header .nav span,
  .tr-header .nav .dd-trigger {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
  }
  
  /* Ocultar elementos vacíos que puedan causar el cuadro blanco */
  .tr-header .nav a:empty,
  .tr-header .nav span:empty {
      display: none !important;
  }

  /* Estilo SOLO para los botones reales (Regiones/Categorías) */
  .nav .dd-trigger {
    background: rgba(255,255,255,0.08) !important;
    border-radius: 30px !important;
    padding: 8px 14px !important;
    font-size: 0.85rem;
    color: #eee;
    display: flex;
    align-items: center;
  }
  .nav svg { width: 14px; height: 14px; margin-right: 6px; }

  /* --- 3. MENÚ DESPLEGABLE (MODAL CENTRADO - Infalible) --- */
  /* Usamos fixed para centrarlo en la pantalla, ignorando bugs de posición */
  .dropdown-menu {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(0.9) !important; /* Centrado exacto */
    
    width: 90% !important;
    max-width: 320px !important; /* No muy ancho */
    max-height: 70vh;
    
    background: #1a1a1d;
    border: 1px solid var(--gold);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,1);
    z-index: 99999 !important;
    
    padding: 15px 0;
    overflow-y: auto;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
  }
  
  /* Cuando se abre */
  .dropdown.open .dropdown-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1) !important;
  }

  /* Fondo oscuro detrás */
  .dropdown.open::before {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.85);
    z-index: 99990;
    backdrop-filter: blur(3px);
  }

  /* Items del menú */
  .dropdown-menu a {
    display: block;
    padding: 12px 20px;
    font-size: 1.1rem;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    text-align: center;
  }

  /* --- 4. LOGIN FIX (Contraseña visible) --- */
  /* Aseguramos que el contenedor del input sea la referencia */
  .form-group, .tr-form > div {
      position: relative;
  }
  
  /* Espacio dentro del input para el icono */
  #id_password {
    padding-right: 45px !important;
    box-sizing: border-box !important;
  }
  
  /* Posición absoluta del icono del ojo */
  #togglePwd {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    border: none !important;
    z-index: 10;
    padding: 5px;
    height: auto;
  }
  
  /* --- 5. PERFIL DETAIL (Subir más la foto) --- */
  .pf-head {
    position: relative;
    inset: auto;
    /* Aumentamos el margen negativo para subirlo más */
    margin-top: -110px !important; 
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-bottom: 20px;
    z-index: 2; /* Asegurar que quede encima del banner */
  }
  .pf-avatar {
    width: 130px;
    height: 130px;
    margin: 0 auto 10px;
    border: 5px solid var(--bg); /* Borde grueso para separar del banner */
    transform: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  }
  .pf-card {
    width: 100%;
    padding: 20px 15px;
    background: rgba(15,15,18,0.95);
    border-top: none;
    border-radius: 20px;
  }
  .pf-actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .gal-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
}