/* =========================================================
   Bolsa Local — muro de carteles
   Tipografía: Fraunces (titulares) + Public Sans (interfaz)
   ========================================================= */

:root{
  --bg:         #14181A;
  --bg-alt:     #1B2022;
  --panel:      #20262A;
  --mat:        #F7F4EC;
  --ink:        #ECE8DD;
  --ink-soft:   #A7A79A;
  --ink-faint:  #6E7370;
  --rule:       #2B3134;
  --gold:       #D8A94C;
  --gold-dark:  #B98B32;
  --teal:       #4FA08C;
  --rust:       #C0603F;
  --white:      #FFFFFF;
  --radius-sm:  4px;
  --radius-md:  8px;
  --maxw:       1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Public Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.brand{ font-family:"Fraunces", Georgia, serif; }
a{ color:inherit; }
button{ font-family:inherit; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 20px; }

/* ---------- Cabecera ---------- */

.masthead{ border-bottom:1px solid var(--rule); }
.masthead-inner{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; padding:34px 0 22px; flex-wrap:wrap;
}
.brand-block{ max-width:560px; }
.eyebrow-date{ font-size:12.5px; color:var(--ink-faint); margin:0 0 6px; }
.brand{ font-size:40px; font-weight:600; margin:0; letter-spacing:-0.01em; color:var(--ink); }
.brand em{ font-style:italic; color:var(--gold); }
.tagline{ margin:8px 0 0; color:var(--ink-soft); font-size:15.5px; max-width:48ch; }

.btn-publish{
  flex-shrink:0; background:var(--gold); color:#241A06; border:none;
  padding:14px 22px; font-size:15px; font-weight:700; border-radius:var(--radius-md);
  cursor:pointer; transition:background .15s ease;
}
.btn-publish:hover{ background:#E8BC63; }
.btn-publish:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }

/* ---------- Barra de búsqueda ---------- */

.searchbar-section{ background:var(--bg-alt); border-bottom:1px solid var(--rule); }
.searchbar{ display:flex; gap:10px; padding:16px 0; flex-wrap:wrap; }
.search-input-group{
  flex:1 1 260px; display:flex; align-items:center; background:var(--panel);
  border:1px solid var(--rule); border-radius:var(--radius-md); padding:0 14px;
}
.search-input-group svg{ flex-shrink:0; color:var(--ink-faint); }
.search-input-group input{
  flex:1; border:none; background:transparent; padding:12px 10px;
  font-size:15px; color:var(--ink); outline:none;
}
.search-input-group input::placeholder{ color:var(--ink-faint); }

select.filter{
  background:var(--panel); border:1px solid var(--rule); border-radius:var(--radius-md);
  padding:0 12px; font-size:14.5px; color:var(--ink); height:46px; cursor:pointer;
}
select.filter:focus-visible{ outline:2px solid var(--teal); }

.status-line{
  padding:12px 0; font-size:13.5px; color:var(--ink-soft);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px;
}
.status-line button{
  background:none; border:none; color:var(--gold); font-weight:600;
  cursor:pointer; font-size:13.5px; padding:0;
}
.status-line button:hover{ text-decoration:underline; }

/* ---------- Muro de carteles ---------- */

main{ padding:28px 0 90px; }

.board{
  column-count:4;
  column-gap:22px;
}
@media (max-width:1100px){ .board{ column-count:3; } }
@media (max-width:760px){ .board{ column-count:2; column-gap:14px; } }
@media (max-width:480px){ .board{ column-count:1; } }

.poster{
  break-inside:avoid;
  margin:0 0 22px;
  background:var(--mat);
  padding:10px 10px 0;
  border-radius:2px;
  box-shadow:0 10px 22px rgba(0,0,0,.35);
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease;
  opacity:0;
  animation:rise .5s ease forwards;
}
.poster:nth-child(6n+1){ transform:rotate(-1.1deg); }
.poster:nth-child(6n+2){ transform:rotate(0.9deg); }
.poster:nth-child(6n+3){ transform:rotate(-0.4deg); }
.poster:nth-child(6n+4){ transform:rotate(1.3deg); }
.poster:nth-child(6n+5){ transform:rotate(-0.8deg); }
.poster:nth-child(6n+6){ transform:rotate(0.5deg); }
.poster:hover{
  transform:rotate(0deg) scale(1.02) translateY(-3px);
  box-shadow:0 16px 30px rgba(0,0,0,.45);
  z-index:2;
  position:relative;
}
@keyframes rise{ to{ opacity:1; } }

.poster img{
  display:block;
  width:100%;
  height:auto;
  border-radius:1px;
}
.poster-caption{
  padding:9px 3px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.poster-title{
  font-size:12.5px;
  font-weight:600;
  color:#2A2620;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.poster-meta{
  font-size:10.5px;
  color:#8A8474;
  white-space:nowrap;
  flex-shrink:0;
}
.poster-cat{
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.01em;
  padding:3px 7px;
  border-radius:20px;
  color:var(--white);
  display:inline-block;
  margin-bottom:6px;
}
.cat-hosteleria{ background:#8A5A3A; }
.cat-comercio{ background:var(--rust); }
.cat-limpieza{ background:#3C6E8F; }
.cat-educacion{ background:#4E7A5C; }
.cat-oficina{ background:#6B5B95; }
.cat-turismo{ background:#2F8F7A; }
.cat-oficios{ background:#B98B32; }
.cat-otros{ background:#5C5F5A; }

/* ---------- Estado vacío ---------- */

.empty-state{ padding:80px 10px; text-align:center; color:var(--ink-soft); }
.empty-state h3{ font-size:22px; color:var(--ink); margin:0 0 8px; font-family:"Fraunces",serif; }
.empty-state p{ margin:0 0 20px; }
.empty-state button{
  background:var(--gold); color:#241A06; border:none; padding:12px 20px;
  border-radius:var(--radius-md); font-weight:700; cursor:pointer;
}
.loading-row{ padding:60px 0; text-align:center; color:var(--ink-faint); font-size:14px; }

/* ---------- Panel "Publicar oferta" ---------- */

.overlay{
  position:fixed; inset:0; background:rgba(10,12,13,.6);
  opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:40;
}
.overlay.open{ opacity:1; pointer-events:auto; }

.panel{
  position:fixed; top:0; right:0; height:100%; width:min(460px, 100%);
  background:var(--bg-alt); box-shadow:-6px 0 24px rgba(0,0,0,.4);
  transform:translateX(100%); transition:transform .28s ease; z-index:41; overflow-y:auto;
}
.panel.open{ transform:translateX(0); }

.panel-header{
  display:flex; justify-content:space-between; align-items:flex-start;
  padding:26px 26px 16px; border-bottom:1px solid var(--rule);
}
.panel-header h2{ margin:0 0 4px; font-size:24px; }
.panel-header p{ margin:0; font-size:13.5px; color:var(--ink-soft); max-width:36ch; }
.panel-close{
  background:none; border:none; cursor:pointer; color:var(--ink-soft);
  font-size:22px; line-height:1; padding:4px;
}

form.job-form{ padding:22px 26px 40px; }

.dropzone{
  border:2px dashed var(--rule);
  border-radius:var(--radius-md);
  padding:28px 16px;
  text-align:center;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
  margin-bottom:20px;
  position:relative;
}
.dropzone.drag{ border-color:var(--gold); background:rgba(216,169,76,.06); }
.dropzone input[type=file]{
  position:absolute; inset:0; opacity:0; cursor:pointer;
}
.dropzone-icon{ color:var(--ink-faint); margin-bottom:8px; }
.dropzone p{ margin:0; font-size:13.5px; color:var(--ink-soft); }
.dropzone .hint{ font-size:12px; color:var(--ink-faint); margin-top:4px; }

.preview-wrap{ display:none; margin-bottom:20px; text-align:center; }
.preview-wrap.show{ display:block; }
.preview-wrap img{
  max-width:100%; max-height:320px; border-radius:var(--radius-sm);
  box-shadow:0 8px 20px rgba(0,0,0,.4);
}
.preview-wrap button{
  display:block; margin:10px auto 0; background:none; border:none;
  color:var(--rust); font-size:13px; cursor:pointer; text-decoration:underline;
}

.field{ margin-bottom:18px; }
.field label{ display:block; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:6px; }
.field .hint{ display:block; font-weight:400; font-size:12px; color:var(--ink-faint); margin-top:4px; }
.field input,
.field select{
  width:100%; border:1px solid var(--rule); background:var(--panel);
  border-radius:var(--radius-sm); padding:11px 12px; font-size:14.5px;
  font-family:inherit; color:var(--ink);
}
.field input:focus-visible,
.field select:focus-visible{ outline:2px solid var(--teal); outline-offset:1px; }

.honeypot{ position:absolute; left:-9999px; }

.form-error{
  background:#3A2119; border:1px solid var(--rust); color:#F3C6B4;
  padding:10px 12px; border-radius:var(--radius-sm); font-size:13.5px;
  margin-bottom:16px; display:none;
}
.form-error.show{ display:block; }

.submit-row{ display:flex; align-items:center; gap:14px; margin-top:6px; }
.btn-submit{
  background:var(--gold); color:#241A06; border:none; padding:13px 22px;
  border-radius:var(--radius-md); font-weight:700; font-size:15px; cursor:pointer;
}
.btn-submit:hover{ background:#E8BC63; }
.btn-submit:disabled{ opacity:.55; cursor:default; }
.submit-note{ font-size:12.5px; color:var(--ink-faint); }

.confirm{ padding:60px 26px; text-align:center; }
.confirm h2{ font-size:24px; margin:0 0 10px; }
.confirm p{ color:var(--ink-soft); margin:0 0 24px; }

/* ---------- Lightbox ---------- */

.lightbox{
  position:fixed; inset:0; background:rgba(6,7,8,.92);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .2s ease;
  z-index:50; padding:40px 20px;
}
.lightbox.open{ opacity:1; pointer-events:auto; }
.lightbox img{
  max-width:100%; max-height:82vh; border-radius:3px;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}
.lightbox-cap{ text-align:center; margin-top:14px; color:var(--ink-soft); font-size:13.5px; }
.lightbox-close{
  position:absolute; top:22px; right:26px; background:none; border:none;
  color:var(--ink); font-size:30px; cursor:pointer; line-height:1;
}

/* ---------- Pie ---------- */

footer{
  border-top:1px solid var(--rule); padding:22px 0 40px;
  font-size:12.5px; color:var(--ink-faint); text-align:center;
}