/* Pereira Ayuda — tema oscuro premium: negro profundo, esmeralda y oro. */
:root{
  --bg:#08090b;
  --bg-glow:rgba(25,195,156,.10);
  --surface:#0f1216;
  --surface-2:#161a20;
  --surface-3:#1c2128;
  --border:#232830;
  --border-bright:#2f3742;
  --text:#eef2f4;
  --text-dim:#c3ccd2;
  --muted:#8a97a1;

  --primary:#19c39c;                  /* esmeralda: acción principal */
  --primary-bright:#3ee0b8;           /* texto/acentos sobre negro */
  --primary-deep:#0e8f72;
  --primary-soft:rgba(25,195,156,.12);
  --primary-line:rgba(25,195,156,.34);
  --primary-glow:0 0 0 1px rgba(25,195,156,.22), 0 8px 24px rgba(25,195,156,.18);

  --gold:#d9b46a;                     /* acento premium: cifras y detalles */
  --gold-bright:#eccb8c;
  --gold-soft:rgba(217,180,106,.12);
  --gold-line:rgba(217,180,106,.32);

  --green:#3ddc91;
  --green-soft:rgba(61,220,145,.12);
  --green-line:rgba(61,220,145,.30);

  --amber:#f0b357;
  --amber-soft:rgba(240,179,87,.12);
  --amber-line:rgba(240,179,87,.30);

  --blue:#5aa7e8;
  --blue-soft:rgba(90,167,232,.12);
  --blue-line:rgba(90,167,232,.30);

  --danger:#f27a7a;
  --danger-soft:rgba(242,122,122,.12);
  --danger-line:rgba(242,122,122,.34);

  --shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 12px 32px rgba(0,0,0,.45);
  --radius:14px;
}

*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0;padding:0;
  min-height:100vh;
  background:
    radial-gradient(1100px 520px at 50% -240px, var(--bg-glow), transparent 62%),
    radial-gradient(900px 500px at 100% 100%, rgba(217,180,106,.05), transparent 60%),
    var(--bg);
  background-attachment:fixed;
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
.container{max-width:760px;margin:0 auto;padding:16px 16px 96px}

header.top{display:flex;align-items:center;gap:13px;padding:20px 0 10px}
header.top .logo{
  width:46px;height:46px;border-radius:15px;flex:none;
  background:linear-gradient(155deg,#26e2b4,var(--primary-deep));
  display:grid;place-items:center;font-size:23px;
  box-shadow:0 0 0 1px rgba(62,224,184,.25), 0 10px 26px rgba(25,195,156,.30);
}
header.top h1{
  font-size:21px;margin:0;line-height:1.15;letter-spacing:-.02em;font-weight:700;
  background:linear-gradient(92deg,#ffffff 20%,var(--primary-bright));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--text);
}
header.top p{margin:4px 0 0;font-size:13px;color:var(--muted)}

.card{
  background:linear-gradient(180deg,var(--surface),#0c0f13);
  border:1px solid var(--border);border-radius:var(--radius);
  padding:16px;box-shadow:var(--shadow);
}
.how-btn{
  margin-left:auto;flex:none;background:var(--surface-2);color:var(--text-dim);
  border:1px solid var(--border-bright);border-radius:999px;padding:8px 13px;
  font-size:12px;font-weight:600;
}
.how-btn:hover{color:var(--primary-bright);border-color:var(--primary-line)}

.modal-overlay{position:fixed;inset:0;z-index:50;background:rgba(3,4,6,.78);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:grid;place-items:center;padding:16px}
.modal{width:100%;max-width:440px;max-height:85vh;overflow-y:auto;box-shadow:0 30px 70px rgba(0,0,0,.7)}
.modal h2{margin:0 0 14px;font-size:18px;letter-spacing:-.01em}
.intro-item{display:flex;gap:11px;margin-bottom:14px}
.intro-item .intro-emoji{font-size:20px;flex:none;line-height:1.3}
.intro-item p{margin:0;font-size:14px;line-height:1.55;color:var(--text-dim)}
.intro-item strong{color:var(--text)}

.section-title{text-transform:uppercase;letter-spacing:.1em;margin:26px 4px 10px;font-weight:700;color:var(--muted)}
.section-title,label{font-size:12px}
label{display:block;margin:0 0 6px;color:var(--muted);font-size:13px}

button,input,select,textarea{font:inherit}
input,select,textarea{
  width:100%;background:var(--surface-2);border:1px solid var(--border-bright);
  border-radius:10px;color:var(--text);padding:12px;outline:none;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
input::placeholder,textarea::placeholder{color:#6c7883}
input:focus,select:focus,textarea:focus{border-color:var(--primary);background:var(--surface-3);box-shadow:0 0 0 3px var(--primary-soft)}
textarea{min-height:70px;resize:vertical}
.field{margin-bottom:12px}
.row{display:grid;grid-template-columns:1fr 1fr;grid-gap:12px;gap:12px}
@media (max-width:480px){.row{grid-template-columns:1fr}}

.type-picker{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:8px;gap:8px}
.type-option{
  padding:12px;border-radius:10px;border:1px solid var(--border);
  background:var(--surface-2);text-align:center;cursor:pointer;color:var(--text-dim);
  -webkit-user-select:none;-moz-user-select:none;user-select:none;font-size:14px;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.type-option:hover{border-color:var(--border-bright);color:var(--text)}
.type-option.active{border-color:var(--primary);background:var(--primary-soft);color:var(--primary-bright);font-weight:600}

button{cursor:pointer;border:none;border-radius:10px;padding:12px 14px;font-weight:600;transition:filter .15s ease,box-shadow .15s ease,border-color .15s ease}
button:hover:not(:disabled){filter:brightness(1.08)}
button:disabled{opacity:.4;cursor:not-allowed}
.btn-primary{
  background:linear-gradient(180deg,#25dcae,var(--primary));
  color:#04231c;width:100%;box-shadow:var(--primary-glow);
}
.btn-secondary{background:var(--surface-2);color:var(--text);border:1px solid var(--border-bright)}
.btn-secondary:hover{border-color:var(--primary-line);color:var(--primary-bright)}
.btn-green{background:linear-gradient(180deg,#4ee79f,#2bbd77);color:#03210f}
.btn-wa{
  background:linear-gradient(180deg,#2ee06f,#1fbc59);color:#04220f;text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;
  font-weight:600;box-shadow:0 6px 18px rgba(37,211,102,.20);
}

.list{display:flex;flex-direction:column;gap:12px}
.request{
  background:linear-gradient(180deg,var(--surface),#0c0f13);
  border:1px solid var(--border);border-left:3px solid var(--primary);
  border-radius:12px;padding:15px;box-shadow:var(--shadow);
  transition:border-color .15s ease,transform .15s ease;
}
.request:hover{border-color:var(--border-bright)}
.request.claimed{border-left-color:var(--amber)}
.request-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:9px}
.badge{
  font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;
  background:var(--primary-soft);color:var(--primary-bright);
  border:1px solid var(--primary-line);
  text-transform:uppercase;letter-spacing:.06em;
}
.badge.claimed{background:var(--amber-soft);color:var(--amber);border-color:var(--amber-line)}
.time{font-size:12px;color:var(--muted);margin-left:auto}
.request p.desc{margin:0 0 9px;font-size:16px;line-height:1.55;white-space:pre-wrap;color:var(--text)}
.meta{font-size:14px;color:var(--muted);margin:3px 0}
.meta strong{color:var(--text);font-weight:600}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}

.claimed-note{background:var(--amber-soft);border:1px solid var(--amber-line);border-radius:10px;font-size:13px;color:var(--amber)}
.claimed-note,.done-note{margin-top:10px;padding:10px 12px}
.claimed-note strong,.done-note strong{color:var(--text)}
.done-note{background:var(--green-soft);border:1px solid var(--green-line);border-radius:10px;font-size:14px;color:var(--green)}

.vol{margin-top:11px;padding:11px 13px;background:var(--blue-soft);border:1px solid var(--blue-line);border-radius:10px}
.vol-head{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:14px;margin-bottom:9px;color:var(--text-dim)}
.vol-head strong{color:var(--blue);font-size:17px}
.vol-full{font-size:12px;font-weight:700;color:var(--green)}
.vol-bar{height:8px;background:#0b0e12;border:1px solid var(--border);border-radius:999px;overflow:hidden}
.vol-bar-fill{height:100%;background:linear-gradient(90deg,var(--blue),var(--primary-bright));border-radius:999px;transition:width .4s ease}
.vol-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.vol-chip{font-size:13px;padding:5px 11px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border-bright);text-decoration:none;color:var(--text-dim)}
.vol-chip:hover{border-color:var(--primary-line);color:var(--primary-bright)}

.request.resolved .desc{text-decoration:line-through;-webkit-text-decoration-color:rgba(238,242,244,.28);text-decoration-color:rgba(238,242,244,.28);color:var(--muted)}
.request.missing{border-left-color:var(--amber)}

.person-main{display:flex;gap:13px;align-items:flex-start}
.person-photo{width:92px;height:92px;object-fit:cover;flex:none}
.person-photo,.person-photo-preview{border-radius:10px;border:1px solid var(--border-bright)}
.person-photo-preview{display:block;margin-top:10px;max-width:140px}
.person-name{font-size:18px;font-weight:700;margin:0 0 6px;letter-spacing:-.01em}

.tips{margin-top:11px;padding:11px 13px;background:#0b0e12;border:1px solid var(--border);border-radius:10px}
.tips-title{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:7px}
.tip{display:flex;flex-direction:column;gap:2px;padding:7px 0;border-top:1px solid var(--border)}
.tip:first-of-type{border-top:none}
.tip-info{font-size:14px;color:var(--text-dim)}
.tip-contact{font-size:13px;color:var(--green);text-decoration:none}

.person-link{
  display:block;margin:0 0 12px;padding:15px;
  background:linear-gradient(180deg,rgba(217,180,106,.12),rgba(217,180,106,.05));
  border:1px solid var(--gold-line);border-radius:12px;text-decoration:none;
  color:var(--gold-bright);font-weight:600;text-align:center;letter-spacing:.01em;
}
.person-link:hover{border-color:var(--gold);box-shadow:0 8px 24px rgba(217,180,106,.12)}

.empty{text-align:center;color:var(--muted);padding:44px 16px;line-height:1.7}
.error{background:var(--danger-soft);border:1px solid var(--danger-line);color:var(--danger);padding:10px 12px;border-radius:10px;font-size:14px;margin-bottom:12px}

.filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 4px 14px}
.chip{font-size:13px;padding:7px 13px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--muted);cursor:pointer;transition:border-color .15s ease,color .15s ease,background .15s ease}
.chip:hover{border-color:var(--border-bright);color:var(--text-dim)}
.chip.active{border-color:var(--primary);color:var(--primary-bright);background:var(--primary-soft);font-weight:600}
.live{margin-left:auto;font-size:12px;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,to{opacity:1}50%{opacity:.2}}

.kind-switch{display:grid;grid-template-columns:1fr 1fr;grid-gap:9px;gap:9px;margin:10px 0 15px}
.kind-btn{
  padding:15px 10px;border-radius:12px;border:1px solid var(--border);
  background:linear-gradient(180deg,var(--surface),#0c0f13);color:var(--muted);
  font-weight:700;font-size:15px;box-shadow:var(--shadow);
}
.kind-btn:hover{border-color:var(--border-bright);color:var(--text-dim)}
.kind-btn.active{border-color:var(--primary);background:var(--primary-soft);color:var(--primary-bright);box-shadow:var(--primary-glow)}
.kind-btn.active.offer{border-color:var(--green);background:var(--green-soft);color:var(--green);box-shadow:0 0 0 1px rgba(61,220,145,.22), 0 8px 24px rgba(61,220,145,.16)}

.toggle-form{width:100%;margin-bottom:8px}
.load-more{width:100%;margin-top:12px}

.admin-summary{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:9px;gap:9px;margin:12px 0 4px}
.stat{
  background:linear-gradient(180deg,var(--surface),#0c0f13);border:1px solid var(--border);
  border-radius:12px;padding:14px 8px;text-align:center;display:flex;flex-direction:column;gap:3px;
  box-shadow:var(--shadow);
}
.stat-num{font-size:26px;font-weight:700;line-height:1;color:var(--gold-bright);letter-spacing:-.02em}
.stat-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}

.request.open{border-left-color:var(--primary)}
.request.resolved{border-left-color:var(--green);opacity:.9}
.badge.open{background:var(--primary-soft);color:var(--primary-bright);border-color:var(--primary-line)}
.badge.kind-offer,.badge.resolved{background:var(--green-soft);color:var(--green);border-color:var(--green-line)}
.badge.kind-need{background:var(--blue-soft);color:var(--blue);border-color:var(--blue-line)}

.track{margin-top:11px;border-top:1px solid var(--border);padding-top:11px;display:flex;flex-direction:column;gap:6px}
.track-row{display:grid;grid-template-columns:110px 1fr;grid-gap:10px;gap:10px;font-size:14px}
.track-label{color:var(--muted);font-size:13px}
.track-val{color:var(--text-dim)}
.admin-actions{margin-top:11px;display:flex;justify-content:flex-end}
.btn-del{background:transparent;border:1px solid var(--danger-line);color:var(--danger);padding:7px 13px;font-size:13px;font-weight:600}
.btn-del:hover{background:var(--danger-soft)}

.footnote{margin:32px 4px 0;font-size:12px;color:#6c7883;text-align:center;line-height:1.7}

/* Tarjetas de ejemplo: fijas al final de la lista, para que el tablero nunca
   se vea vacío. Se ven igual que una publicación completada real; no llevan
   datos de contacto ni botones, así que no hay nada que tocar en vano. */
.examples{margin-top:12px}

/* Créditos */
.credits{margin:40px auto 0;max-width:440px;text-align:center}
.credits-note{margin:0 0 22px;font-size:12px;color:#6c7883;line-height:1.7}
.credits-rule{
  width:64px;height:1px;margin:0 auto 20px;
  background:linear-gradient(90deg,transparent,var(--gold-line),transparent);
}
.credits-brand{
  margin:0;font-size:16px;font-weight:700;letter-spacing:.01em;
  background:linear-gradient(92deg,#ffffff 25%,var(--primary-bright));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--text);
}
.credits-by{margin:7px 0 0;font-size:13px;color:var(--muted)}
.credits-by .sig{
  color:var(--gold-bright);font-weight:600;letter-spacing:.05em;
  /* la firma usa caracteres poco comunes: pila de fuentes amplia para que no salgan cuadros */
  font-family:"Segoe UI Symbol","Apple Symbols","Noto Sans Symbols 2","Noto Sans","DejaVu Sans",system-ui,sans-serif;
}
.credits-original{margin:16px 0 0;font-size:12px;color:#6c7883;letter-spacing:.02em}
.credits-original a{color:var(--muted);text-decoration:none;border-bottom:1px dotted var(--border-bright);padding-bottom:1px}
.credits-original a:hover{color:var(--primary-bright);border-bottom-color:var(--primary-line)}

@media (max-width:480px){
  .track-row{grid-template-columns:1fr;gap:0}
  .admin-summary{grid-template-columns:repeat(2,1fr)}
}