/* ============================================================
   De Fiar Zapatoca — hoja base
   Identidad propia (ya no hereda el navy institucional del portal
   CIDERT — CIDERT queda como respaldo, no como marca). Paleta de
   pueblo: tapia, teja, monte, café, latón. Ver notas de marca al
   final del archivo.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Karla:wght@400;500;600;700&display=swap');

:root {
  /* Paleta con nombre propio */
  --tapia:       #F1E8D8;  /* pared encalada — fondo */
  --tapia-2:     #F8F2E6;  /* variante clara — tarjetas */
  --surface-white: #FFFFFF; /* inputs, tablas, cajas de auth */
  --teja:        #A8452F;  /* teja de barro — marca / CTA */
  --teja-dk:     #833619;  /* teja oscurecida — hover */
  --musgo:       #3F5C3E;  /* verde monte — acento secundario */
  --cafe:        #2B2016;  /* tinta café tostado — texto, fondo oscuro */
  --oro:         #B8903A;  /* latón envejecido — sello, detalles (decorativo, no usar en texto) */
  --piedra:      #DED0B8;  /* piedra — bordes, divisores */
  --mut:         #8A7A63;  /* texto apagado — solo texto grande/iconos, ~3:1 sobre tapia */
  --mut-strong:  #6E5F46;  /* texto secundario de tamaño normal — 4.5:1 sobre tapia */
  --ink-on-inverse: #FBF8F2; /* texto sobre superficies oscuras (cafe) */

  /* Alias retrocompatibles (usados en vistas admin ya construidas) */
  --azul:     var(--teja);
  --azul-700: var(--teja-dk);
  --azul-900: var(--cafe);
  --verde:    var(--musgo);
  --tierra:   var(--oro);
  --paper:    var(--tapia);
  --paper-2:  var(--tapia-2);
  --ink:      var(--cafe);
  --line:     var(--piedra);

  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-pill: 999px;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Textura de tapia (pared encalada) — ruido sutil generado en CSS, sin
     imagen externa. Tinta en tono --cafe a muy baja opacidad: se nota como
     "material", no como decoración. Como variable para poder reusarla
     exacta en cualquier superficie que deba sentirse "del mismo material"
     que el fondo de la página (ver .header-ridge). */
  --textura-tapia: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.168 0 0 0 0 0.125 0 0 0 0 0.086 0 0 0 0.16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  background-color: var(--tapia);
  background-image: var(--textura-tapia);
  color: var(--ink);
  line-height: 1.55;
}

/* Scrollbar acorde a la paleta, en vez del gris/azul por defecto del
   sistema. Va en `html` explícito, no en el selector universal: Chrome solo
   aplica el theming del scrollbar de documento (no el de un contenedor con
   overflow propio) de forma confiable así — con `::-webkit-scrollbar` a
   secas el thumb se quedaba con el gris nativo. #admin-nav tiene su propia
   variante oscura, ver más abajo (el fondo ahí es --cafe, no --tapia). */
html { scrollbar-width: thin; scrollbar-color: var(--mut) var(--tapia); }
html::-webkit-scrollbar { width: 14px; height: 14px; }
html::-webkit-scrollbar-track { background: var(--tapia); }
html::-webkit-scrollbar-thumb { background: var(--mut); border-radius: var(--radius-pill); border: 3px solid var(--tapia); }
html::-webkit-scrollbar-thumb:hover { background: var(--teja); }

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; }

a { color: var(--teja); text-decoration: none; }
a:hover { color: var(--teja-dk); }

.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ── Header ── */
#site-header {
  background: var(--cafe);
  color: var(--ink-on-inverse);
  padding: 18px 0 36px;
  position: relative;
  overflow: hidden;
}
#site-header .container { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; }
/* Remate de montañas — corta la línea recta del header contra el cielo de
   la página, en vez de un borde plano. Un div recortado con clip-path, con
   el mismo color Y textura exactos del fondo de la página (--textura-tapia)
   — así se lee como una ventana hacia la página, no como una forma nueva
   de otro color pegada encima (antes era un SVG con fill plano: sin la
   textura de grano, se veía más claro/blanco que el resto del fondo). */
.header-ridge {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  width: 100%;
  height: 32px;
  background-color: var(--tapia);
  background-image: var(--textura-tapia);
  clip-path: polygon(
    0% 32px, 0% 17.6px, 6.667% 3.2px, 13.333% 20.8px, 20% 8px, 26.667% 24px,
    33.333% 1.6px, 40% 19.2px, 46.667% 11.2px, 53.333% 25.6px, 60% 4.8px, 66.667% 20.8px,
    73.333% 12.8px, 80% 27.2px, 86.667% 6.4px, 93.333% 19.2px, 100% 9.6px, 100% 32px
  );
}
#site-header .brand { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--ink-on-inverse); letter-spacing: -.01em; }
#site-header .brand span { color: var(--oro); }
#site-header .brand small { display: block; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 13px; color: var(--oro); letter-spacing: .005em; margin-top: -2px; }
#site-header .header-link {
  color: rgba(255,255,255,.85);
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 4px;
}
#site-header .header-link:hover { color: var(--oro); }

/* ── Footer ── */
/* Fondo piedra (el mismo tono que ya se usa para bordes en todo el sitio) —
   distinto del --tapia de la página pero de la misma familia cálida, así
   marca su propia zona sin saltar a la vista. Las rocas del ->footer-ridge
   son ese mismo --piedra "emergiendo" hacia arriba, como el remate de
   montañas del header pero redondeado, no puntiagudo. */
#site-footer {
  position: relative;
  background: var(--piedra);
  padding: 28px 0 24px;
  color: var(--mut-strong);
  font-size: 13px;
  text-align: center;
  margin-top: 56px;
}
.footer-ridge {
  position: absolute;
  left: 0; right: 0; top: -34px;
  width: 100%;
  height: 36px;
  display: block;
}
/* Azul institucional real de CIDERT (no el teja de esta marca) — para que se
   note que es otra entidad, el respaldo, no De Fiar mismo. El ícono es un
   escudo genérico simple, no el logo real de CIDERT (no tenemos ese
   archivo en este proyecto) — solo un ancla visual mínima. */
#site-footer .cidert-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  vertical-align: bottom;
  color: #0F3557;
  font-weight: 700;
}
#site-footer .cidert-link:hover { color: #0c2941; }
/* Isotipo real de CIDERT — paleta institucional real (portal.cidert.org):
   --azul/--azul-2 (navy) y --tierra (dorado). Tamaño y line-height fijos
   para que se alinee con el texto — sin esto el SVG toma su viewBox
   completo (100x100) y "flota" con espacio de sobra alrededor. */
#site-footer .cidert-link svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  display: block;
  --c1: #0F3557;
  --c2: #13456F;
  --c3: #B89A5D;
}

/* ── Componentes ── */
.card {
  background: var(--tapia-2);
  border: 1px solid var(--piedra);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.card-body { padding: 20px; }

.btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 14px;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--font-body);
}
.btn-primary { background: var(--teja); color: var(--ink-on-inverse); }
.btn-primary:hover { background: var(--teja-dk); color: var(--ink-on-inverse); }
.btn-outline { background: transparent; border-color: var(--piedra); color: var(--ink); }
.btn-outline:hover { border-color: var(--teja); color: var(--teja); }

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--mut-strong);
}
.empty-state h3 { color: var(--ink); margin: 12px 0 6px; }

.form-group { margin-bottom: 16px; }
.form-label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.form-control {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--piedra);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: var(--font-body);
  background: var(--surface-white);
  color: var(--ink);
}
.form-control:focus { outline: none; border-color: var(--teja); }
.form-control.is-invalid { border-color: #b3261e; }
.invalid-feedback { color: #b3261e; font-size: 12px; margin-top: 4px; }
textarea.form-control { resize: vertical; min-height: 90px; }
select.form-control { cursor: pointer; }

/* ── Modal (<dialog> nativo, ver public/assets/js/modal.js) ── */
dialog.modal {
  border: none;
  border-radius: var(--radius-md);
  padding: 24px;
  max-width: 420px;
  width: calc(100% - 40px);
  background: var(--surface-white);
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
}
dialog.modal::backdrop { background: rgba(27,20,14,.55); }
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.modal-header h2 { font-size: 17px; margin: 0; }
.modal-close { all: unset; cursor: pointer; font-size: 22px; line-height: 1; color: var(--mut-strong); padding: 2px 6px; }
.modal-close:hover { color: var(--ink); }

.btn-sm { padding: 6px 14px; font-size: 13px; }
.btn-danger { background: #b3261e; color: var(--ink-on-inverse); }
.btn-danger:hover { background: #8f1e17; color: var(--ink-on-inverse); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Alerts ── */
.alert {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 16px; border-radius: var(--radius-sm);
  font-size: 13.5px; margin-bottom: 16px;
}
.alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.alert-success { background: #eef3ea; color: #2f4a2c; border: 1px solid #c7d8bd; }
.alert-error   { background: #fbeeec; color: #7a2318; border: 1px solid #ecc6bd; }

/* ── Badges ── */
.badge { display: inline-block; padding: 2px 10px; border-radius: var(--radius-pill); font-size: 11.5px; font-weight: 600; }
.badge-active    { background: #e3ecdd; color: #2f4a2c; }
.badge-pending   { background: #f3e6c4; color: #6b4f14; }
.badge-suspended { background: #ece5d8; color: #756758; }

/* ── Tabla ── */
.table-wrap { overflow-x: auto; border: 1px solid var(--piedra); border-radius: var(--radius-md); background: var(--surface-white); }
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th, .table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--piedra); }
.table th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--mut-strong); font-weight: 700; background: var(--tapia-2); }
.table tr:last-child td { border-bottom: none; }

/* ── Grid de tarjetas del directorio ── */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.vendor-card { display: block; background: var(--tapia-2); border: 1px solid var(--piedra); border-radius: var(--radius-md); overflow: hidden; color: inherit; transition: transform .15s ease, border-color .15s ease; }
.vendor-card:hover { border-color: var(--teja); transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) {
  .vendor-card { transition: none; }
  .vendor-card:hover { transform: none; }
}
.cover { height: 120px; background: var(--piedra) center/cover no-repeat; position: relative; }
.vendor-card .cover { height: 150px; }

/* Portada del perfil público — proporción 2:1 en vez de una altura fija,
   para que no se recorte tanto en pantallas anchas (antes: 200px de alto
   sobre hasta ~1080px de ancho, más de 5:1 — casi una franja). */
.vendedor-portada { aspect-ratio: 4 / 1; background: var(--piedra) center/cover no-repeat; }

/* Sitio web / redes sociales en el perfil público — llamativos, cerca del
   nombre, no enterrados como texto plano junto a los botones. */
.enlaces-externos { display: flex; flex-wrap: wrap; gap: 8px; }
.enlace-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--piedra); border-radius: var(--radius-pill);
  padding: 7px 14px 7px 10px; font-size: 13px; font-weight: 600;
  color: var(--cafe); background: var(--tapia-2);
  transition: border-color .15s ease, color .15s ease, transform .15s ease;
}
.enlace-chip:hover { border-color: var(--teja); color: var(--teja); transform: translateY(-1px); }
.enlace-chip svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.cover.is-empty { display: flex; align-items: center; justify-content: center; background: var(--tapia-2); }
.cover.is-empty svg { width: 30px; height: 30px; stroke: var(--piedra); fill: none; stroke-width: 1.6; }
.vendor-card .body { padding: 14px; }
.vendor-card .name { font-family: var(--font-display); font-weight: 600; font-size: 16px; margin-bottom: 2px; color: var(--ink); }
.vendor-card .meta { font-size: 12px; color: var(--mut-strong); }
.tag { display: inline-block; font-size: 11px; font-weight: 600; color: var(--teja); background: rgba(168,69,47,.09); padding: 2px 8px; border-radius: var(--radius-pill); margin-bottom: 8px; margin-right: 4px; }
.tag-mut { color: var(--mut-strong); background: rgba(138,122,99,.12); }

/* ── Calificación (anillo + detalle en popover, ver components/calificacion-badges.php) ── */
.calificacion-trigger { all: unset; cursor: pointer; display: block; border-radius: 50%; }
.calificacion-trigger:focus-visible { outline: 2px solid var(--teja); outline-offset: 2px; }
.calificacion-popover {
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(4px) scale(.96);
  background: var(--tapia-2); border: 1px solid var(--piedra); border-radius: var(--radius-sm);
  padding: 8px 12px; box-shadow: 0 8px 20px rgba(0,0,0,.14);
  font-size: 12px; font-weight: 700; white-space: nowrap; z-index: 20;
  opacity: 0; pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}
.calificacion-popover div { padding: 1px 0; }
.calificacion-popover.is-open { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .calificacion-popover { transition: none; } }

/* ── Página /pautar (apoyar la red / patrocinio) ── */
.patrocinio-header { margin-bottom: 32px; }
.patrocinio-h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 4vw, 38px); max-width: 18ch; margin: 0 0 14px; color: var(--cafe); }
.patrocinio-header .lead { font-size: 16px; color: var(--mut-strong); max-width: 58ch; margin: 0; line-height: 1.6; }

.patrocinio-preview-grid { display: grid; grid-template-columns: 280px 1fr; gap: 24px; align-items: start; }
.patrocinio-preview-grid .vendor-card { max-width: 280px; }
.destacado-badge {
  position: absolute; top: 10px; right: 10px;
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--oro); color: var(--cafe);
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  padding: 4px 9px; border-radius: var(--radius-pill);
}
.destacado-badge svg { width: 11px; height: 11px; fill: var(--cafe); }

/* Sellos de confianza — el color viene de cada insignia (currentColor),
   nunca fijo como Destacado, porque varían por insignia. */
.insignia-row { display: flex; flex-wrap: wrap; gap: 6px; }
.insignia-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: color-mix(in srgb, currentColor 14%, var(--surface-white));
  border-radius: var(--radius-pill);
  cursor: default;
}
.insignia-chip svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.insignia-chip-sm { width: 22px; height: 22px; justify-content: center; }
.insignia-chip-sm svg { width: 12px; height: 12px; }
.insignia-chip-md { padding: 5px 11px 5px 8px; font-size: 12px; font-weight: 600; }
.insignia-chip-md svg { width: 14px; height: 14px; }

.patrocinio-nota { font-size: 13px; color: var(--mut-strong); }
.patrocinio-nota strong { color: var(--cafe); }
.patrocinio-nota ul { padding-left: 18px; margin: 10px 0 0; }
.patrocinio-nota li { margin-bottom: 8px; }

.patrocinio-audiencia { margin: 36px 0; padding-top: 32px; border-top: 1px solid var(--piedra); }
.patrocinio-audiencia:first-of-type { border-top: none; padding-top: 0; }
.patrocinio-audiencia-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.patrocinio-num { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--oro); }
.patrocinio-audiencia-head h3 { font-family: var(--font-display); font-size: 18px; font-weight: 600; margin: 0; color: var(--cafe); }
.patrocinio-desc { font-size: 13.5px; color: var(--mut-strong); margin: 0 0 20px; max-width: 62ch; }

.patrocinio-plan { background: var(--surface-white); border: 1px solid var(--oro); box-shadow: 0 0 0 1px var(--oro) inset; border-radius: var(--radius-md); padding: 26px 24px; max-width: 380px; }
.patrocinio-plan .plan-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--oro); margin-bottom: 6px; }
.patrocinio-plan h3 { font-family: var(--font-display); font-size: 19px; font-weight: 600; margin: 0 0 4px; }
.patrocinio-plan .precio { font-family: var(--font-display); font-size: 28px; font-weight: 600; color: var(--cafe); margin: 12px 0 2px; }
.patrocinio-plan .precio small { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--mut-strong); }
.patrocinio-plan .precio-nota { font-size: 12px; color: var(--mut-strong); margin-bottom: 16px; }
.patrocinio-plan ul { list-style: none; margin: 0; padding: 0; }
.patrocinio-plan li { display: flex; gap: 9px; font-size: 13.5px; padding: 7px 0; border-top: 1px solid var(--piedra); }
.patrocinio-plan li:first-child { border-top: none; }
.patrocinio-plan li svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; fill: none; stroke: var(--musgo); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.patrocinio-aliados-mock { background: var(--cafe); border-radius: var(--radius-md); padding: 22px 24px; margin-bottom: 16px; }
.patrocinio-etiqueta { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-on-inverse-muted); margin-bottom: 14px; }
.patrocinio-aliados-strip { display: flex; flex-wrap: wrap; gap: 12px; }
.patrocinio-aliado-logo { display: flex; align-items: center; gap: 7px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-sm); padding: 9px 14px; font-size: 12.5px; font-weight: 700; color: var(--ink-on-inverse); }
.patrocinio-aliado-logo svg { width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke: var(--oro); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.patrocinio-rango { background: var(--tapia-2); border: 1px solid var(--piedra); border-radius: var(--radius-md); padding: 18px 20px; }
.patrocinio-rango .cifra { font-family: var(--font-display); font-size: 21px; font-weight: 600; color: var(--cafe); }
.patrocinio-rango .cifra small { font-family: var(--font-body); font-size: 12.5px; font-weight: 600; color: var(--mut-strong); }
.patrocinio-rango p { font-size: 12.5px; color: var(--mut-strong); margin: 6px 0 0; }

.patrocinio-institucional-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.patrocinio-institucional-card { background: var(--tapia-2); border: 1px solid var(--piedra); border-radius: var(--radius-md); padding: 20px; }
.patrocinio-institucional-card .valor-icon { width: 26px; height: 26px; color: var(--musgo); }
.patrocinio-institucional-card .valor-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.patrocinio-institucional-card h4 { font-family: var(--font-display); font-size: 15.5px; font-weight: 600; margin: 10px 0 4px; }
.patrocinio-institucional-card p { font-size: 12.5px; color: var(--mut-strong); margin: 0; }

.patrocinio-contacto-dato { display: inline-flex; align-items: center; background: var(--tapia-2); color: var(--cafe); font-size: 13.5px; font-weight: 700; padding: 10px 18px; border-radius: var(--radius-pill); user-select: all; flex-shrink: 0; }

@media (max-width: 640px) {
  .patrocinio-preview-grid, .patrocinio-institucional-grid { grid-template-columns: 1fr; }
}

/* ── Auth (login) ── */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--tapia); }
.auth-box { width: 100%; max-width: 380px; background: var(--surface-white); border: 1px solid var(--piedra); border-radius: var(--radius-md); padding: 32px; }
.auth-box h1 { font-size: 22px; margin: 0 0 4px; }
.auth-box p { color: var(--mut-strong); font-size: 13px; margin: 0 0 24px; }

/* ── Admin layout ── */
/* align-items:flex-start evita que el nav se estire a la altura completa
   del contenido (el default de flex) — sin eso, position:sticky en el nav
   no tiene efecto porque ya ocupa toda esa altura de entrada. */
#admin-shell { display: flex; min-height: 100vh; align-items: flex-start; }
/* El nav es chico — no debe scrollear con el contenido, queda fijo en la
   ventana; overflow-y:auto es solo por si en una ventana muy baja el propio
   nav no cabe completo. */
#admin-nav { width: 220px; flex-shrink: 0; height: 100vh; position: sticky; top: 0; overflow-y: auto; background: var(--cafe); color: var(--ink-on-inverse); padding: 20px 0; display: flex; flex-direction: column; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) var(--cafe); }
#admin-nav::-webkit-scrollbar-track { background: var(--cafe); }
#admin-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-color: var(--cafe); }
#admin-nav::-webkit-scrollbar-thumb:hover { background: var(--oro); }
#admin-nav .brand { padding: 0 20px 20px; border-bottom: 1px solid rgba(255,255,255,.12); margin-bottom: 12px; }
#admin-nav .brand .marca { display: block; font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.15; }
#admin-nav .brand .marca .oro { color: var(--oro); }
#admin-nav .brand .subtitulo { display: block; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-top: 2px; }
#admin-nav a { display: flex; align-items: center; gap: 10px; padding: 10px 20px; color: rgba(255,255,255,.75); font-size: 13.5px; }
#admin-nav a:hover, #admin-nav a.active { background: rgba(255,255,255,.08); color: var(--ink-on-inverse); }
#admin-nav .nav-icon { width: 17px; height: 17px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
#admin-nav .nav-section { padding: 14px 20px 4px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: rgba(255,255,255,.4); }
#admin-nav .impulsado { margin-top: auto; padding: 14px 20px 0; border-top: 1px solid rgba(255,255,255,.1); font-size: 11.5px; color: rgba(255,255,255,.45); display: flex; align-items: center; gap: 6px; }
#admin-nav .impulsado svg { width: 13px; height: 13px; flex-shrink: 0; --c1: var(--oro); --c2: rgba(255,255,255,.55); --c3: var(--oro); }
/* Sobrescribe #admin-nav a (display:flex + padding de los links del menú) — este link va inline, dentro del texto "Impulsado por". */
#admin-nav .impulsado a { display: inline-flex; align-items: center; gap: 6px; padding: 0; color: rgba(255,255,255,.65); font-weight: 700; }
#admin-nav .impulsado a:hover { color: var(--oro); background: none; }
#admin-main { flex: 1; padding: 28px 32px; min-width: 0; }
.page-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.page-header h1 { font-size: 20px; margin: 0; }

/* ============================================================
   Hero — landing pública ("De Fiar Zapatoca")
   ============================================================ */

.hero {
  position: relative;
  padding: 56px 0 44px;
  margin-bottom: 0;
  overflow: visible;
}

/* Ramita — línea de transición entre secciones. Un gesto botánico discreto
   (dos hojas y un tallo, repetido), no un patrón geométrico de "borde de
   Word" — el gris/verde apagado hace que se note solo de cerca. */
/* Camino de piedra — bloques rectangulares de ancho/alto/posición distintos,
   dibujados una sola vez (no es un tile que se repite: por eso no se ve
   dos veces igual), esquinas muy redondeadas para que la línea se sienta
   curva, color piedra suave para que apenas se note. */
.franja-piedras {
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 22'%3E%3Cg fill='%23DED0B8' fill-opacity='0.65'%3E%3Crect x='0' y='6' width='70' height='12' rx='6'/%3E%3Crect x='76' y='3' width='55' height='14' rx='7'/%3E%3Crect x='137' y='7' width='85' height='11' rx='5.5'/%3E%3Crect x='228' y='2' width='60' height='15' rx='7'/%3E%3Crect x='294' y='6' width='95' height='12' rx='6'/%3E%3Crect x='395' y='4' width='50' height='13' rx='6.5'/%3E%3Crect x='451' y='8' width='75' height='10' rx='5'/%3E%3Crect x='532' y='3' width='65' height='15' rx='7'/%3E%3Crect x='603' y='6' width='90' height='12' rx='6'/%3E%3Crect x='699' y='2' width='55' height='14' rx='7'/%3E%3Crect x='760' y='7' width='80' height='11' rx='5.5'/%3E%3Crect x='846' y='4' width='65' height='13' rx='6.5'/%3E%3Crect x='917' y='6' width='95' height='12' rx='6'/%3E%3Crect x='1018' y='3' width='60' height='14' rx='7'/%3E%3Crect x='1084' y='7' width='75' height='10' rx='5'/%3E%3Crect x='1165' y='5' width='35' height='12' rx='6'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin-bottom: 40px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  gap: 40px;
  align-items: center;
}
.hero-eyebrow {
  font-size: 14px;
  color: var(--musgo);
  font-weight: 600;
  margin-bottom: 10px;
}
.hero h1 {
  font-size: clamp(32px, 4.4vw, 52px);
  margin: 0 0 18px;
  color: var(--cafe);
  max-width: 14ch;
}
.hero p.lead {
  font-size: 17px;
  color: var(--ink);
  max-width: 52ch;
  margin: 0 0 22px;
  line-height: 1.6;
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
/* Línea discreta que reemplaza los dos botones del selector una vez que la
   cookie df_intencion ya quedó guardada — ver visitante.js. */
.hero-cambiar a { font-size: 14px; font-weight: 600; color: var(--teja); text-decoration: none; border-bottom: 1px solid transparent; }
.hero-cambiar a:hover { border-bottom-color: var(--teja); }

/* El sello — el único momento de atrevimiento visual de la página, y el
   único momento animado: se estampa una vez al cargar, como un sello real. */
.sello-wrap { display: flex; flex-direction: column; align-items: center; }
.sello {
  width: 208px;
  height: 208px;
  transform: rotate(-7deg);
  filter: drop-shadow(0 6px 14px rgba(43,32,22,.18));
  animation: sello-estampar .6s cubic-bezier(.22,.85,.3,1.1) both;
}
/* Viñeta bajo el sello — ilustración a una tinta con fondo blanco de la IA;
   mix-blend-mode:multiply hace que el blanco se funda con la textura de
   tapia detrás y solo quede visible el trazo café, sin recorte de fondo. */
.sello-vinieta {
  width: 445px;
  max-width: 95vw;
  height: auto;
  margin-top: -8px;
  mix-blend-mode: multiply;
  opacity: .85;
  animation: vinieta-aparecer .7s ease .35s both;
}
@keyframes vinieta-aparecer {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: .85; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .sello-vinieta { animation: none; }
}
@keyframes sello-estampar {
  0%   { transform: rotate(-7deg) scale(1.35); opacity: 0; }
  55%  { transform: rotate(-7deg) scale(.94); opacity: 1; }
  100% { transform: rotate(-7deg) scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .sello { animation: none; }
}
.sello .ring { fill: none; stroke: var(--oro); }
.sello .ring-2 { stroke: var(--teja); }
.sello text {
  font-family: var(--font-display);
  fill: var(--oro);
  text-anchor: middle;
}
.sello .sello-sub { fill: var(--teja); }

/* ============================================================
   "Zapatoca, en lo que se ve" — mosaico de inspiración fotográfica.
   Bloques de color de marca + ícono, nunca fotos de banco de imágenes:
   así se les muestra a los vendedores qué clase de foto vale la pena
   subir, y de paso la landing deja de sentirse vacía antes de que haya
   fotos reales cargadas.
   ============================================================ */
.escenas { margin: 0 0 40px; }
.escenas-head { max-width: 620px; margin-bottom: 18px; }
.escenas-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.escena {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  color: var(--cafe);
}
.escena svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.escena .titulo { font-family: var(--font-display); font-weight: 600; font-size: 14.5px; }
.escena p { font-size: 11.5px; margin: 0; opacity: .75; line-height: 1.4; }
/* Tonos rebajados (mezclados hacia --tapia) — el color de marca queda como
   acento de fondo, no como bloque saturado compitiendo con el sello. */
.escena-teja  { background: #CD9784; }
.escena-musgo { background: #98A28B; }
.escena-oro   { background: #D5BC89; }
.escena-cafe  { background: #8E8477; }

/* Valores — cuentas claras, no pasos numerados */
.valores {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-bottom: 1px solid var(--piedra);
  margin: 0 0 36px;
}
.valor {
  padding: 22px 24px;
  border-left: 1px solid var(--piedra);
}
.valor:first-child { border-left: none; }
.valor .valor-icon { width: 26px; height: 26px; color: var(--teja); margin-bottom: 10px; }
.valor .valor-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.valor h3 { font-size: 17px; margin: 0 0 6px; color: var(--teja); }
.valor p { font-size: 13.5px; color: var(--ink); margin: 0; line-height: 1.55; }

/* CTA de vendedores */
.cta-vendedor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  background: var(--cafe);
  color: var(--ink-on-inverse);
  border-radius: var(--radius-md);
  padding: 28px 32px;
  margin-bottom: 40px;
}
.cta-vendedor h2 { font-size: 22px; margin: 0 0 6px; color: var(--ink-on-inverse); }
.cta-vendedor p { margin: 0; color: rgba(255,255,255,.7); font-size: 14px; max-width: 44ch; }
.cta-vendedor .btn-primary { background: var(--oro); color: var(--cafe); flex-shrink: 0; }
.cta-vendedor .btn-primary:hover { background: #cba24a; }

/* CTA de patrocinio — tono más discreto que .cta-vendedor a propósito: es
   una invitación secundaria, no la acción principal de la página. */
.cta-pautar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  background: var(--tapia-2);
  border: 1px solid var(--piedra);
  border-radius: var(--radius-md);
  padding: 24px 28px;
  margin-bottom: 40px;
}
.cta-pautar h2 { font-size: 18px; margin: 0 0 6px; color: var(--cafe); }
.cta-pautar p { margin: 0; color: var(--mut-strong); font-size: 13.5px; max-width: 48ch; }
.cta-pautar .btn-outline { flex-shrink: 0; }

.section-title { font-size: 22px; margin: 0 0 4px; color: var(--cafe); }
.section-sub { color: var(--mut-strong); margin: 0 0 20px; font-size: 14px; }

/* Banner de patrocinadores — separado a propósito del gremio de
   vendedores (nunca dentro de .directorio-panel), rota entre los
   activos, siempre con la etiqueta "Publicidad" visible. */
.patrocinador-banner {
  position: relative;
  border: 1px solid var(--piedra);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 20px;
  line-height: 0;
}
.patrocinador-banner img { width: 100%; height: auto; display: block; }
.patrocinador-etiqueta {
  position: absolute; top: 8px; left: 8px;
  background: rgba(43, 32, 22, .72); color: var(--ink-on-inverse, #fff);
  font-size: 10px; font-weight: 600; letter-spacing: .03em;
  padding: 3px 8px; border-radius: var(--radius-pill);
}

/* ============================================================
   Directorio — el foco principal del sitio: panel propio, más peso
   tipográfico y una franja de marca arriba, para que se note que es
   el centro de la página y no una sección más.
   ============================================================ */
.directorio-panel {
  /* Sin textura de fondo a propósito — esta es la sección que importa, nada
     debe competir visualmente con las tarjetas de los vendedores. */
  background-color: var(--tapia-2);
  border: 1px solid var(--piedra);
  border-radius: var(--radius-md);
  padding: 36px 0 32px;
  margin-bottom: 48px;
  position: relative;
  overflow: hidden;
}
.directorio-panel > * { padding-left: 32px; padding-right: 32px; }
.directorio-panel > .directorio-telar { padding-left: 0; padding-right: 0; }
.directorio-eyebrow { font-size: 13px; font-weight: 600; color: var(--musgo); margin-bottom: 6px; }
.directorio-panel .section-title { font-size: 28px; }
.directorio-count { font-size: 13px; color: var(--mut-strong); margin: -12px 0 0; }

/* Greca inspirada en un tejido Guane real (rombo con motivo de sol
   concéntrico, alternado con franjas de rayas verticales, enmarcado por
   líneas horizontales) — no un patrón geométrico inventado. Una sola tinta,
   trazo grueso y forma grande para que no se vea borrosa al repetirse (el
   intento anterior, más fino y más pequeño, generaba ruido visual). Marca
   dónde termina la introducción del panel y empiezan las tarjetas. */
.directorio-telar {
  height: 22px;
  margin: 22px 0 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 22'%3E%3Cg fill='none' stroke='%232B2016' stroke-width='1.3' opacity='0.35'%3E%3Cpath d='M0,3 L60,3'/%3E%3Cpath d='M0,19 L60,19'/%3E%3Cpath d='M4,11 L15,3 L26,11 L15,19 Z'/%3E%3Cpath d='M38,3 L38,19 M44,3 L44,19 M50,3 L50,19 M56,3 L56,19'/%3E%3C/g%3E%3Ccircle cx='15' cy='11' r='3' fill='%23A8452F' opacity='0.4'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 60px 22px;
}

/* Filtros y búsqueda — funcionales, conectados a Vendedor::publicList() */
.directorio-filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 18px; }
.filtro-pill {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--piedra);
  background: var(--surface-white);
  color: var(--cafe);
  font-size: 13px;
  font-weight: 600;
}
.filtro-pill:hover { border-color: var(--teja); color: var(--teja); }
.filtro-pill.active { background: var(--teja); border-color: var(--teja); color: var(--ink-on-inverse); }
.directorio-buscar { margin-left: auto; }
.directorio-buscar input {
  border: 1px solid var(--piedra);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-size: 13px;
  font-family: var(--font-body);
  background: var(--surface-white);
  color: var(--ink);
  min-width: 200px;
}
.directorio-buscar input:focus { outline: none; border-color: var(--teja); }

/* ============================================================
   "¿Y si eres comprador?" — visión, no función construida todavía.
   Mismo lenguaje visual que .valores/.card, marcado como próximamente.
   ============================================================ */
.compradores { margin: 16px 0 48px; }
.compradores-head { max-width: 620px; margin-bottom: 28px; }
.compradores-badge {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .02em;
  color: var(--cafe); background: var(--oro); padding: 3px 10px; border-radius: var(--radius-pill);
  margin-bottom: 10px;
}
.compradores-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.compradores-card { background: var(--tapia-2); border: 1px solid var(--piedra); border-radius: var(--radius-md); padding: 22px; }
.compradores-card .icon { width: 28px; height: 28px; color: var(--musgo); margin-bottom: 12px; }
.compradores-card .icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.compradores-card h3 { font-size: 16px; margin: 0 0 6px; color: var(--cafe); }
.compradores-card p { font-size: 13.5px; color: var(--mut-strong); margin: 0; line-height: 1.55; }
.compradores-suscribe {
  margin-top: 28px;
  padding: 22px 24px;
  background: var(--tapia-2);
  border: 1px solid var(--piedra);
  border-left: 4px solid var(--teja);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.compradores-suscribe h3 { font-size: 16px; margin: 0 0 4px; color: var(--cafe); }
.compradores-suscribe p { margin: 0; color: var(--mut-strong); font-size: 13.5px; max-width: 42ch; }
.compradores-suscribe .btn { flex-shrink: 0; }
@media (max-width: 760px) {
  .compradores-suscribe { flex-direction: column; align-items: flex-start; }
}

/* ── Revelado al hacer scroll — progressive enhancement, ver reveal.js ── */
.reveal { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; }
.reveal.pre-reveal { opacity: 0; transform: translateY(18px); }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.pre-reveal { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 760px) {
  .hero-grid { grid-template-columns: 1fr; }
  .sello-wrap { order: -1; }
  .sello { width: 140px; height: 140px; }
  .sello-vinieta { width: 320px; }
  .valores { grid-template-columns: 1fr; }
  .valor { border-left: none; border-top: 1px solid var(--piedra); }
  .valor:first-child { border-top: none; }
  .cta-vendedor { flex-direction: column; align-items: flex-start; }
  .cta-pautar { flex-direction: column; align-items: flex-start; }
  .compradores-grid { grid-template-columns: 1fr; }
  .escenas-grid { grid-template-columns: repeat(2, 1fr); }
  .directorio-panel { padding: 24px 0 20px; }
  .directorio-panel > * { padding-left: 18px; padding-right: 18px; }
  .directorio-panel > .directorio-telar { padding-left: 0; padding-right: 0; }
  .directorio-panel .section-title { font-size: 22px; }
  .directorio-buscar { margin-left: 0; width: 100%; }
  .directorio-buscar input { width: 100%; }
}

/* ============================================================
   Notas de marca
   - "De Fiar" es la marca reusable; "Zapatoca" el alcance
     territorial actual (facilita expandir a otro municipio después
     sin rehacer el wordmark).
   - Lema: "Zapatoca compra Zapatoca".
   - CIDERT es el respaldo institucional, mencionado en el footer,
     nunca como marca principal.
   ============================================================ */