/* Neurosalud - Talleres directory.
   Shares tokens with professionals.css / resources.css (both load before
   this file). Card language matches the "Nosotros" icon-badge treatment:
   circular tinted badge, icon zoomed past its own baked-in light disc. */

.nst{
  --nst-ink:var(--ns-text,#173F66);
  --nst-deep:var(--ns-primary-deep,#0B3D91);
  --nst-blue:var(--ns-primary,#1764C0);
  --nst-muted:var(--ns-muted,#667F96);
  --nst-line:var(--ns-line,#D9E8F2);
  --nst-sans:var(--ns-sans,"Poppins",system-ui,sans-serif);
  --nst-serif:"Lora",Georgia,serif;
  max-width:1240px;
  margin:0 auto;
  padding:0 24px 60px;
}

/* ==================== Search ==================== */

.nst-search{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  justify-content:center;
  max-width:420px; margin:0 auto 34px;
  background:#fff; border:1px solid var(--nst-line); border-radius:999px;
  padding:6px 8px 6px 18px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
/* The pill itself carries the focus feedback so the shape stays a clean
   oval; the input's own native focus ring (a rectangle, on <input
   type="search"> in Chrome/Safari/Edge) is fully suppressed below instead
   of trying to coexist with it. */
.nst-search:focus-within{
  border-color:var(--nst-blue);
  box-shadow:0 0 0 3px rgba(23,100,192,.14);
}
.nst-search__wrap{
  flex:1; display:flex; align-items:center; gap:8px; min-width:0;
}
.nst-i{ width:16px; height:16px; flex-shrink:0; color:var(--nst-blue); }
.nst-search__input{
  flex:1; min-width:0; background:transparent !important;
  font-family:var(--nst-sans); font-size:14px; color:var(--nst-ink);
  padding:10px 0 !important;
  /* Blocksy applies a default 1px border + 3px border-radius + transparent
     focus outline to every input on the site via a higher-specificity
     input:is([type=...]) rule, which otherwise shows through as a small
     rectangle nested inside our pill - same root cause as the dropdown
     background fight above, same fix: !important, deliberately. */
  border:0 !important; outline:0 !important; box-shadow:none !important;
  border-radius:0 !important;
  -webkit-appearance:none; appearance:none;
}
.nst-search__input:focus{ outline:0 !important; box-shadow:none !important; border:0 !important; }
/* Chrome/Safari draw extra native chrome (a magnifier/clear icon and a
   focus glow) inside <input type="search"> that appearance:none doesn't
   always reach - strip those decorations explicitly. */
.nst-search__input::-webkit-search-decoration,
.nst-search__input::-webkit-search-cancel-button,
.nst-search__input::-webkit-search-results-button,
.nst-search__input::-webkit-search-results-decoration{
  -webkit-appearance:none;
  appearance:none;
}
.nst-search__input::placeholder{ color:var(--nst-muted); }
.nst-search__clear{
  display:flex; align-items:center; gap:6px; flex-shrink:0;
  font-family:var(--nst-sans); font-size:12.5px; color:var(--nst-muted);
  background:var(--ns-surface,#F5F6F8); border-radius:999px; padding:8px 14px;
  text-decoration:none; border:1px solid var(--nst-line);
}
.nst-search__clear .nst-i{ color:var(--nst-muted); width:13px; height:13px; }
.nst-search__clear:hover{ color:var(--nst-ink); }

/* ==================== Grid & card ==================== */

.nst-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
.nst-cell{ display:flex; }

.nst-card{
  width:100%;
  background:#fff; border:1px solid var(--nst-line); border-radius:20px;
  box-shadow:0 12px 30px rgba(23,63,102,.06);
  padding:26px;
  transition:transform .3s ease, box-shadow .3s ease;
}
.nst-card:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 38px rgba(23,63,102,.10);
}

/* Circular icon badge, matching the fixed-up values/panels treatment on
   Nosotros: the 09-icono-talleres.jpg source has the same small, centred,
   ~20%x33%-fill dark glyph sitting inside a light baked-in disc, so we zoom
   in past that disc rather than showing it doubled against our own badge. */
.nst-card__icon{
  width:56px; height:56px; margin:0 0 18px;
  border-radius:50%; overflow:hidden;
  border:1px solid var(--nst-line);
  background:rgba(23,100,192,.10);
  display:flex; align-items:center; justify-content:center;
  transition:transform .3s ease, box-shadow .3s ease;
}
.nst-card:hover .nst-card__icon{
  transform:scale(1.05);
  box-shadow:0 10px 22px rgba(23,63,102,.12);
}
.nst-card__icon img{
  width:32px; height:32px; object-fit:contain;
  mix-blend-mode:multiply;
  transform:scale(1.96);
}

.nst-card__title{
  font-family:var(--nst-serif); font-weight:500; font-size:19px;
  color:var(--nst-deep); margin:0 0 8px; line-height:1.3;
}
.nst-card__desc{
  font-family:var(--nst-sans); font-size:13.5px; line-height:1.55;
  color:var(--nst-ink); margin:0 0 14px;
}
.nst-card__instructor{
  font-family:var(--nst-sans); font-size:13px; color:var(--nst-muted);
  margin:0;
}

.nst-card__pdf{
  margin:14px 0 0; padding-top:14px; border-top:1px dashed var(--nst-line);
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.nst-card__pdfaction{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--nst-sans); font-size:13px; font-weight:500;
  border:0; background:none; padding:0; cursor:pointer;
  text-decoration:none;
}
.nst-card__pdfaction .nst-i{ width:15px; height:15px; flex-shrink:0; }
.nst-card__pdfaction--view{ color:var(--nst-blue); }
.nst-card__pdfaction--view:hover{ text-decoration:underline; }
.nst-card__pdfaction--download{ color:var(--nst-muted); }
.nst-card__pdfaction--download:hover{ color:var(--nst-ink); text-decoration:underline; }

/* ==================== PDF preview modal ==================== */

.nst-modal{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.nst-modal[hidden]{ display:none; }
.nst-modal__overlay{
  position:absolute; inset:0;
  background:rgba(11,61,145,.55);
}
.nst-modal__panel{
  position:relative; z-index:1;
  background:#fff; border-radius:16px;
  width:min(920px,100%); height:min(85vh,900px);
  box-shadow:0 30px 80px rgba(11,61,145,.35);
  overflow:hidden;
}
.nst-modal__close{
  position:absolute; top:12px; right:12px; z-index:2;
  width:38px; height:38px; border-radius:50%;
  background:#fff; border:1px solid var(--nst-line);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--nst-deep);
  box-shadow:0 6px 16px rgba(23,63,102,.14);
}
.nst-modal__close .nst-i{ width:16px; height:16px; }
.nst-modal__close:hover{ background:var(--ns-surface,#F5F6F8); }
.nst-modal__frame{ border:0; width:100%; height:100%; display:block; }

@media (max-width:600px){
  .nst-modal{ padding:0; }
  .nst-modal__panel{ width:100%; height:100%; border-radius:0; }
}

/* ==================== Empty state ==================== */

.nst-empty{
  text-align:center; padding:50px 20px;
  border:1px dashed var(--nst-line); border-radius:16px;
}
.nst-empty__title{
  font-family:var(--nst-serif); font-size:18px; color:var(--nst-deep); margin:0 0 6px;
}
.nst-empty__text{
  font-family:var(--nst-sans); font-size:13.5px; color:var(--nst-muted); margin:0;
}

/* ==================== Responsive ==================== */

@media (max-width:900px){
  .nst-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:600px){
  .nst-grid{ grid-template-columns:1fr; }
  .nst-search{ padding:6px 6px 6px 16px; }
}

@media (prefers-reduced-motion:reduce){
  .nst-card,
  .nst-card__icon{ transition:none; }
  .nst-card:hover{ transform:none; }
  .nst-card:hover .nst-card__icon{ transform:none; box-shadow:none; }
}