/* ═══════════════════════════════════════════════════════════════════════════
   widgets.css — Bloques que las guías insertan dentro del contenido
   Consulado de El Salvador

   Cada widget traía su propio <style> con la paleta escrita a mano. Siete
   copias del azul de marca: cambiarlo obligaba a acordarse de siete ficheros,
   y en la práctica alguno se quedaba atrás. Aquí viven todos y usan los tokens
   del sistema.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── widget-como-llegar.php ─────────────────────────────────────────────── */
.widget-transporte-sv { margin: 2rem 0; }
.transporte-sv-list { list-style:none; padding:0; margin:1rem 0; }
.transporte-sv-list li { display:flex; align-items:flex-start; gap:10px; padding:10px 0; border-bottom:1px solid #f0f0f0; font-size:14px; line-height:1.6; }
.transporte-sv-list li:last-child { border-bottom:none; }
.transporte-sv-list span { font-size:18px; flex-shrink:0; margin-top:2px; }


/* ── widget-comunidad-salvadorena.php ─────────────────────────────────────────────── */
.widget-comunidad-sv { background:#eef3fb; border-radius:10px; padding:18px 20px; margin:2rem 0; }
.widget-comunidad-sv h2 { margin-top:0; }
.widget-comunidad-sv p { font-size:14px; line-height:1.7; }
.comunidad-sv-list { margin:.6rem 0 0; padding-left:1.3rem; }
.comunidad-sv-list li { font-size:14px; margin-bottom:5px; }


/* ── widget-consulado-cercano.php ─────────────────────────────────────────────── */
.widget-cercano-sv { background: linear-gradient(135deg,#eef3fb 0%,#e3ecfb 100%); border:2px solid var(--ec-brand); border-radius:12px; padding:24px; margin:2rem 0; }
.cercano-badge { display:inline-block; background:var(--ec-brand); color:#fff; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; padding:4px 12px; border-radius:20px; margin-bottom:12px; }
.widget-cercano-sv h2 { color:var(--ec-brand); margin:.2rem 0 .6rem; font-size:clamp(18px,2.5vw,22px); }
.cercano-intro { font-size:14px; line-height:1.6; color:#333; margin:0 0 16px; }
.cercano-card { background:#fff; border-radius:8px; padding:18px 20px; box-shadow:0 2px 8px rgba(0,71,169,.1); }
.cercano-list { list-style:none; padding:0; margin:0 0 16px; }
.cercano-list li { display:flex; gap:10px; align-items:flex-start; padding:7px 0; border-bottom:1px solid #f0f0f0; font-size:14px; line-height:1.5; }
.cercano-list li:last-child { border-bottom:none; }
.cercano-list a { color:var(--ec-brand); text-decoration:none; }
.cercano-list a:hover { text-decoration:underline; }
.cercano-actions { display:flex; gap:10px; flex-wrap:wrap; }
.wc-btn-primary { display:inline-block; background:var(--ec-brand); color:#fff !important; padding:11px 20px; border-radius:8px; font-size:14px; font-weight:600; text-decoration:none !important; transition:background .2s; }
.wc-btn-primary:hover { background:#003a8c; }
.wc-btn-secondary { display:inline-block; background:#FFCD00; color:var(--ec-brand) !important; padding:11px 20px; border-radius:8px; font-size:14px; font-weight:600; text-decoration:none !important; transition:background .2s; }
.wc-btn-secondary:hover { background:#f0c000; }


/* ── widget-emergencia-consular.php ─────────────────────────────────────────────── */
.widget-emergencia-sv { display:flex; gap:16px; align-items:flex-start; background:#fff7f7; border:1px solid #f3c4c4; border-left:5px solid #c0392b; border-radius:10px; padding:18px 20px; margin:2rem 0; }
.emergencia-sv__icon { font-size:26px; }
.emergencia-sv__body h2 { margin:0 0 6px; font-size:18px; }
.emergencia-sv__body p { font-size:14px; line-height:1.6; margin:0 0 12px; }


/* ── widget-requisitos-dui.php ─────────────────────────────────────────────── */
.widget-dui-sv { margin: 2rem 0; }
.dui-list { padding-left: 1.4rem; margin: .8rem 0 1.2rem; }
.dui-list li { margin-bottom: 7px; font-size: 14px; line-height: 1.6; }
.dui-cta { margin-top: 1rem; }


/* ── widget-requisitos-pasaporte.php ─────────────────────────────────────────────── */
.widget-pasaporte-sv { margin: 2rem 0; }
.pas-list { padding-left: 1.4rem; margin: .8rem 0 1.2rem; }
.pas-list li { margin-bottom: 7px; font-size: 14px; line-height: 1.6; }
.pas-tabla { overflow-x: auto; margin: .8rem 0; }
.pas-tabla table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pas-tabla th { background: var(--ec-brand); color: #fff; padding: 10px 14px; text-align: left; }
.pas-tabla td { padding: 9px 14px; border-bottom: 1px solid #eee; }
.pas-tabla tr:nth-child(even) td { background: #eef3fb; }
.pas-cta { margin-top: 1rem; }


/* ── widget-tramites-consulares.php ─────────────────────────────────────────────── */
.widget-tramites-sv { margin: 2rem 0; }
.tramites-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 1rem; }
.tramite-card { display: flex; flex-direction: column; gap: 2px; padding: 14px; border: 1px solid var(--ec-line); border-radius: 10px; text-decoration: none; color: var(--ec-ink); transition: box-shadow .2s, border-color .2s; }
.tramite-card:hover { border-color: var(--ec-brand); box-shadow: 0 3px 10px rgba(0,71,169,.12); }
.tramite-card span { display: inline-flex; color: var(--ec-brand); margin-bottom: 4px; }
.tramite-card span .sv-ico { width: 24px; height: 24px; }
/* Los iconos que acompañan a un texto heredan su color; los que encabezan un
   bloque llevan el de marca, que es lo que los separa del texto corrido. */
.widget .sv-ico { flex: 0 0 auto; vertical-align: -.15em; }
.widget li .sv-ico, .widget p .sv-ico { color: var(--ec-muted); margin-right: 2px; }
.tramite-card strong { font-size: 15px; color: var(--ec-brand); }
.tramite-card small { font-size: 12px; color: var(--ec-muted); }