/* =====================================================
   MINDER — redmin.pe — Custom Styles
   ===================================================== */

:root {
  --navy:         #0A2647;
  --navy-dark:    #061428;
  --navy-light:   #0D3575;
  --gold:         #85AAD6;
  --gold-light:   #A8C4E3;
  --gold-pale:    #EAF1F9;
  --gold-ink:     var(--navy-dark);
  /* --gold da ~2.4:1 de contraste sobre blanco (falla WCAG AA para texto,
     que pide 4.5:1) -- se usa igual para íconos/insignias decorativos,
     pero para texto real (links, títulos) hay que usar esta variante más
     oscura. Misma familia de color, legible. */
  --gold-dark:    #3D6EA8;
  --accent-blue:  #6d87b9;
  --gray-bg:      #F7F8FA;
  --card-border:  #E5E7EB;
  --text-title:   #101828;
  --text-body:    #667085;
  --text-dark:    #101828;
  --text-muted:   #667085;
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:    0 4px 12px rgba(0,0,0,0.10);
  --radius-card:  8px;
  --radius-btn:   6px;
}

/* ── Base ── */
html {
  overflow-x: hidden;
}
body {
  background-color: var(--gray-bg);
  color: var(--text-body);
  font-family: 'General Sans', 'Inter', sans-serif;
  font-size: 15px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  max-width: 100vw;
}

/* ── Formularios ──
   El placeholder de Bootstrap usa casi el mismo tono que el texto
   tipeado (rgba negro al 75%); se aclara para que se note que es un
   ejemplo y no algo que el usuario ya escribió. */
.form-control::placeholder,
.form-control::-webkit-input-placeholder,
.form-control::-moz-placeholder {
  color: rgba(16, 24, 40, 0.35);
  opacity: 1;
}
input[type="date"].form-control:required:invalid {
  color: rgba(16, 24, 40, 0.35);
}
/* Los <select> no tienen ::placeholder — mientras siga elegida la
   opción vacía ("Selecciona un rango...") se aclara igual que un
   placeholder, para que no parezca una opción ya seleccionada. */
.form-select:required:invalid {
  color: rgba(16, 24, 40, 0.35);
}
.form-select option {
  color: var(--text-dark);
}

/* Mensajes flash: flotan sobre el contenido, no ocupan espacio en el layout */
.toast-messages-wrap {
  position: fixed;
  top: 88px;
  right: 24px;
  z-index: 1080;
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  pointer-events: none;
}
.toast-message-box {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: 0;
  padding: .85rem 1rem;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 14px 34px rgba(0,0,0,.28);
  pointer-events: auto;
}
.toast-message-icon {
  flex-shrink: 0;
  font-size: 1.05rem;
}
.toast-message-text {
  flex: 1;
  font-size: .9rem;
  font-weight: 500;
}
.toast-message-close {
  flex-shrink: 0;
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--text-title);
  font-weight: 800;
}

/* ── Colors ── */
.text-navy  { color: var(--navy) !important; }
.text-gold  { color: var(--gold) !important; }
/* Para texto real (links, encabezados) en vez de íconos/insignias: ver el
   comentario de --gold-dark arriba. */
.text-gold-dark  { color: var(--gold-dark) !important; }
.text-gold-dark:hover  { color: var(--navy) !important; }
.bg-navy    { background-color: var(--navy) !important; }

/* ── Navbar ── */
.minder-navbar {
  background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 100%);
  border-bottom: 3px solid var(--gold);
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  padding-top: 16px;
  padding-bottom: 16px;
}
.brand-name {
  font-family: 'Inter', sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: .03em;
  color: #fff;
}
.brand-icon {
  font-size: 1.4rem;
  filter: drop-shadow(0 0 4px rgba(109,135,185,.6));
}
.brand-sub {
  font-size: .7rem;
  color: rgba(255,255,255,.45);
  margin-top: 2px;
}
.minder-navbar .nav-link {
  color: rgba(255,255,255,.62);
  font-weight: 600;
  font-size: .92rem;
  padding-bottom: .4rem;
  margin: 0 .35rem;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.minder-navbar .nav-link:hover { color: #fff; }
.minder-navbar .nav-link.active {
  color: #fff;
  border-bottom-color: var(--gold);
}

.navbar-icon-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: rgba(255,255,255,.65);
  font-size: 1.05rem;
  transition: background-color .15s ease, color .15s ease;
}
.navbar-icon-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.dropdown-menu.show {
  animation: dropdown-in .18s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes dropdown-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.navbar-notif-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 50px;
  background: var(--gold);
  color: var(--navy-dark);
  font-size: .65rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--gold-ink);
  font-size: .7rem;
  font-weight: 700;
}
/* Foto de perfil: ocupa el mismo lugar que las iniciales, recortada en círculo. */
.user-avatar-img {
  object-fit: cover;
  padding: 0;
  background: none;
}
.avatar-preview {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-size: 1.9rem;
  font-weight: 700;
  border: 2px solid var(--card-border);
}
.avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-avatar-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* ── Captcha (registro de proveedores) ── */
.captcha-wrap { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.captcha-wrap img.captcha {
  border: 1px solid var(--card-border);
  border-radius: 8px;
  height: 44px;
  cursor: pointer;
}
.captcha-refresh-btn {
  border: 1px solid var(--card-border);
  background: #fff;
  border-radius: 8px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  transition: transform .2s ease, background-color .15s ease;
}
.captcha-refresh-btn:hover { background: var(--gray-bg); }
.captcha-refresh-btn:active { transform: rotate(90deg); }

/* ── Password strength meter ── */
.password-strength-bar {
  height: 5px;
  border-radius: 3px;
  background: var(--gray-bg);
  overflow: hidden;
}
.password-strength-fill {
  height: 100%;
  width: 0%;
  border-radius: 3px;
  transition: width .25s ease, background-color .25s ease;
}
.password-strength-label {
  margin-top: 3px;
  font-weight: 600;
}

/* ── Buttons ── */
.btn { transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .12s ease; }
.btn:active { transform: scale(.97); }

.btn-navy {
  background-color: var(--navy);
  color: #fff;
  border: none;
  border-radius: var(--radius-btn);
}
.btn-navy:hover { background-color: var(--navy-dark); color: #fff; }

.btn-outline-navy {
  color: var(--navy);
  border-color: var(--navy);
  border-radius: var(--radius-btn);
}
.btn-outline-navy:hover { background-color: var(--navy); color: #fff; }

.btn-gold {
  background-color: var(--gold);
  color: var(--gold-ink);
  border: none;
  font-weight: 600;
  border-radius: var(--radius-btn);
}
.btn-gold:hover { background-color: var(--gold-light); color: var(--gold-ink); }

.btn-outline-gold {
  color: var(--gold);
  border-color: var(--gold);
}
.btn-outline-gold:hover { background-color: var(--gold); color: var(--gold-ink); }

/* ── Footer ── */
.minder-footer {
  background: #0A2647;
  border-top: 3px solid var(--gold);
  margin-top: auto;
}

/* Stats bar */
.footer-stats {
  border-bottom: 1px solid rgba(255,255,255,.1);
  padding: 2rem 0;
}
.footer-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.footer-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: .75rem 1rem;
}
.footer-stat-num {
  font-family: 'Inter', sans-serif;
  font-size: 2.2rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  margin-bottom: .4rem;
}
.footer-stat-label {
  font-size: .78rem;
  color: #B0BEC8;
  letter-spacing: .02em;
}

/* Main footer columns */
.footer-main {
  padding: 3rem 0 2rem;
}
.footer-cols {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 2.5rem;
}
.footer-logo {
  height: 36px;
  object-fit: contain;
  display: block;
}
.footer-brand-text {
  font-size: .85rem;
  color: #B0BEC8;
  line-height: 1.65;
  margin: 0;
}
.footer-col-title {
  font-family: 'Inter', sans-serif;
  font-size: .82rem;
  font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 1rem;
}
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-links li { margin-bottom: .5rem; }
.footer-links a {
  font-size: .85rem;
  color: #B0BEC8;
  text-decoration: none;
  transition: color .15s;
}
.footer-links a:hover { color: var(--gold); }

/* Categorías del pie: una fila de píldoras, no una quinta columna, para no
   apretar la grilla de arriba. El título reusa .footer-col-title. */
.footer-categories {
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 1.5rem 0;
}
.footer-categories .footer-col-title { margin-bottom: .75rem; }
.footer-categories-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.footer-categories-list a {
  display: inline-block;
  font-size: .8rem;
  color: #B0BEC8;
  text-decoration: none;
  padding: .3rem .75rem;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  transition: color .15s, border-color .15s;
}
.footer-categories-list a:hover {
  color: var(--gold);
  border-color: var(--gold);
}

/* Bottom bar */
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 1rem 0;
}
.footer-bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  font-size: .78rem;
  color: rgba(176,190,200,.6);
}

/* ── Auth Pages ── */
.auth-wrapper { min-height: calc(100vh - 120px); }
.brand-hero { font-size: 3rem; }
.minder-card {
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  background: #fff;
  opacity: 0;
  animation: minder-card-in .4s cubic-bezier(.2,.8,.2,1) both;
}
.minder-card:nth-of-type(2) { animation-delay: .08s; }
.minder-card:nth-of-type(3) { animation-delay: .16s; }
.minder-card:nth-of-type(4) { animation-delay: .24s; }

@keyframes minder-card-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Directory Hero ── */
.directory-hero {
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: 360px;
  border-bottom: 4px solid var(--gold);
  background: var(--navy-dark);
}
.hero-col { min-width: 0; }
.hero-col-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.hero-col-text {
  position: relative;
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 36px clamp(24px, 5vw, 72px);
}
.hero-content {
  max-width: 560px;
  width: 100%;
}

@media (max-width: 900px) {
  .directory-hero { min-height: 260px; }
  .hero-col-text { flex: 1 1 100%; padding: 26px var(--margin-mobile, 20px); }
  .hero-content { max-width: 100%; }
}

/* Buscaste algo: la búsqueda queda hecha y los resultados van pegados
   abajo, sin la foto grande empujando todo hacia abajo (estilo Google).
   Con transición para que se note el cambio apenas empezás a escribir. */
.directory-hero {
  transition: min-height .45s cubic-bezier(.4,0,.2,1), border-bottom-width .3s ease;
}
.hero-col-image { transition: opacity .35s ease; }
.hero-col-text { transition: padding .4s ease; }
.directory-hero-title,
.directory-hero-sub {
  overflow: hidden;
  transition: opacity .25s ease, max-height .4s ease, margin .4s ease;
  max-height: 80px;
}
.directory-hero.directory-hero-compact {
  min-height: 0;
  border-bottom-width: 2px;
}
.directory-hero.directory-hero-compact .hero-col-image { opacity: 0; pointer-events: none; }
.directory-hero.directory-hero-compact .directory-hero-title,
.directory-hero.directory-hero-compact .directory-hero-sub {
  opacity: 0; max-height: 0; margin: 0; pointer-events: none;
}
.directory-hero.directory-hero-compact .hero-col-text { padding: 22px clamp(16px, 4vw, 40px); }
.directory-hero.directory-hero-compact .hero-search-bar { animation: none; }
@media (min-width: 901px) {
  /* Compacto (ya buscaste algo): la barra queda a la izquierda, como el
     buscador de Google después de buscar, en vez de centrada en toda la
     franja. En mobile se deja centrada y a lo ancho -- ahí no ayuda. */
  .directory-hero.directory-hero-compact .hero-col-text {
    justify-content: flex-start;
    text-align: left;
  }
  .directory-hero.directory-hero-compact .hero-search-wrap {
    max-width: 480px;
  }
}
.directory-hero-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.5rem, 2.5vw, 2.1rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.18;
  letter-spacing: -.02em;
  margin-bottom: .85rem;
}
.directory-hero-sub {
  font-size: 1rem;
  color: rgba(255,255,255,.85);
  line-height: 1.6;
  text-shadow: 0 1px 8px rgba(0,0,0,.6);
}
.hero-search-wrap { max-width: 780px; }

.hero-search-bar {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,.97);
  border-radius: 50px;
  padding: 6px 6px 6px 24px;
  box-shadow: 0 8px 36px rgba(0,0,0,.45), 0 0 0 0 rgba(109,135,185,.35);
  animation: hero-search-entrance .5s ease-out both, hero-search-breathe 3.4s ease-in-out .8s infinite;
}
.hero-search-bar:focus-within {
  animation: hero-search-entrance .5s ease-out both;
  box-shadow: 0 8px 36px rgba(0,0,0,.45), 0 0 0 5px rgba(109,135,185,.5);
}

@keyframes hero-search-entrance {
  from { opacity: 0; transform: translateY(-10px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes hero-search-breathe {
  0%, 100% { box-shadow: 0 8px 36px rgba(0,0,0,.45), 0 0 0 0 rgba(109,135,185,.35); }
  50%      { box-shadow: 0 8px 36px rgba(0,0,0,.45), 0 0 0 7px rgba(109,135,185,0); }
}

.hero-search-icon {
  color: var(--gold);
  font-size: 1.05rem;
  margin-right: .75rem;
  flex-shrink: 0;
  transition: transform .2s ease;
}
.hero-search-bar:focus-within .hero-search-icon { transform: scale(1.15) rotate(-8deg); }

.hero-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  height: 46px;
  font-size: 1rem;
  color: var(--text-title);
}
.hero-search-input::placeholder { color: var(--text-body); }

.hero-search-btn {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--gold);
  color: var(--gold-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  transition: transform .18s ease, background-color .18s ease;
}
.hero-search-btn:hover { background: var(--gold-light); transform: scale(1.08) translateX(1px); }
.hero-search-btn:active { transform: scale(.94); }
.hero-search-btn.is-loading i { animation: search-spin .6s linear infinite; }

@keyframes search-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-search-bar,
  .suggest-item,
  [data-autocomplete-dropdown].active,
  #searchSuggestions.active,
  .featured-categories .category-card {
    animation: none !important;
    opacity: 1 !important;
  }
}

/* ── Featured Categories ── */
.featured-categories {
  background: transparent;
  padding: 20px 0 14px;
  position: relative;
  z-index: 5;
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

.featured-categories .category-card,
.featured-categories .category-card:link,
.featured-categories .category-card:visited {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 20px 12px !important;
  border: 1.5px solid var(--card-border) !important;
  border-radius: var(--radius-card) !important;
  text-decoration: none !important;
  color: var(--text-title) !important;
  background: #ffffff !important;
  transition: all 0.2s ease !important;
  text-align: center !important;
}

.featured-categories .category-card:hover {
  border-color: var(--gold) !important;
  color: var(--gold-ink) !important;
  background: var(--gold-pale) !important;
  box-shadow: 0 4px 12px rgba(133,170,214,0.35) !important;
  transform: translateY(-2px) !important;
}

.featured-categories .category-card:hover i {
  color: var(--gold) !important;
}

.featured-categories .category-card i {
  font-size: 2rem !important;
  line-height: 1 !important;
  color: inherit !important;
}

.featured-categories .category-card span {
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  font-family: 'Inter', sans-serif !important;
  line-height: 1.3 !important;
  color: inherit !important;
}

.ver-todas-link {
  font-size: 0.875rem;
  color: #6d87b9;
  text-decoration: none;
  font-weight: 500;
}

.ver-todas-link:hover {
  text-decoration: underline;
}

/* Enlaces reales a /categoria/<slug>/, debajo de las tarjetas destacadas. */
.featured-categories-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-top: 1rem;
}
.featured-categories-label {
  font-size: .8rem;
  font-weight: 600;
  color: #6B7280;
}
.featured-categories-links a {
  font-size: .82rem;
  font-weight: 500;
  color: var(--navy);
  text-decoration: none;
  background: var(--gold-pale);
  border: 1px solid var(--gold-light);
  border-radius: 999px;
  padding: .28rem .8rem;
  transition: background .15s, color .15s;
}
.featured-categories-links a:hover {
  background: var(--navy);
  color: #fff;
}

@media (max-width: 768px) {
  .categories-grid {
    display: flex;
    overflow-x: auto;
    grid-template-columns: none;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .categories-grid .category-card {
    min-width: 150px;
    scroll-snap-align: start;
  }
}

/* ── Filter Bar (directorio) ── */
.filter-bar {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  padding: .85rem 1.25rem;
}
.filter-bar .form-label {
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .72rem !important;
}
.filter-bar .form-label i { color: var(--gold); }
.filter-bar .form-select {
  border-color: var(--card-border);
  color: var(--text-title);
  font-weight: 500;
}
.filter-bar .form-select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 .2rem rgba(109,135,185,.2);
}
.filter-bar .form-check-input { border-color: var(--card-border); }
.filter-bar .form-check-input:checked {
  background-color: var(--navy);
  border-color: var(--navy);
}
.filter-bar .form-check-input:focus { box-shadow: 0 0 0 .2rem rgba(109,135,185,.2); }
.filter-bar .form-check-label i { color: var(--gold) !important; }
.filter-bar .btn-outline-secondary {
  color: var(--navy);
  border-color: var(--card-border);
}
.filter-bar .btn-outline-secondary:hover {
  background: var(--navy);
  border-color: var(--navy);
}

.results-toolbar { border-top: 1px solid var(--card-border); padding-top: .85rem; margin-top: .25rem; }
.results-toolbar .fw-semibold { color: var(--navy); font-size: 1.05rem; }
.results-toolbar .form-select {
  border-color: var(--card-border);
  color: var(--text-title);
  font-weight: 500;
}
.results-toolbar .form-select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 .2rem rgba(109,135,185,.2);
}

/* ── Filter Sidebar ── */
.filter-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.filter-card-header {
  background: var(--navy);
  color: #fff;
  padding: .6rem 1rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.filter-card-body {
  padding: .5rem;
}
.filter-item {
  display: flex;
  align-items: center;
  padding: .45rem .75rem;
  border-radius: 6px;
  font-size: .82rem;
  color: var(--text-body);
  text-decoration: none;
  transition: background .15s, color .15s;
}
.filter-item:hover { background: var(--gray-bg); color: var(--navy); }
.filter-item.active { background: var(--navy); color: #fff; font-weight: 600; }

/* ── Badges y pills (compartidos con la ficha de detalle, detail.html) ──
   El resto de estilos de tarjeta vivía acá duplicado y sin usar: el markup
   real de la tarjeta (directory.html) usa las reglas .supplier-card* de
   más abajo, bajo "Suppliers Grid". Estas tres clases sí siguen en pie
   porque las usa detail.html para las insignias y categorías grandes. */
.badge-standard {
  display: inline-flex;
  align-items: center;
  background: var(--gold);
  color: var(--gold-ink);
  border: 1px solid var(--gold-light);
  border-radius: 20px;
  padding: 2px 8px;
  font-size: .68rem;
  font-weight: 600;
  white-space: nowrap;
}
.badge-standard-lg {
  display: inline-flex;
  align-items: center;
  background: var(--gold);
  color: var(--gold-ink);
  border: 1px solid var(--gold-light);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: .8rem;
  font-weight: 600;
}
.cat-pill-lg {
  display: inline-flex;
  align-items: center;
  background: var(--gray-bg);
  color: var(--text-body);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: .8rem;
  font-weight: 500;
  border: 1px solid var(--card-border);
}

/* ── Empty State ── */
.empty-state .empty-icon { font-size: 3rem; opacity: .3; }

/* ── Detail Page ── */
.detail-header-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  border-top: 4px solid var(--navy);
}
.detail-header-card.header-standard {
  border-top: 4px solid var(--gold);
  background: #fff;
}
.detail-header-body { padding: 1.5rem; }

.detail-destacado-toggle {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  margin: 0;
}
.detail-destacado-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--card-border);
  background: #fff;
  color: #B0BEC8;
  font-size: 1.1rem;
  transition: transform .15s ease, color .15s ease, background .15s ease, border-color .15s ease;
}
.detail-destacado-btn:hover {
  transform: scale(1.08);
  color: #f5a623;
  border-color: #fde8b8;
  background: #fffaf0;
}
.detail-destacado-btn.is-active {
  color: #f5a623;
  background: #fffaf0;
  border-color: #fde8b8;
}

/* Search bar on detail page */
.detail-search-bar {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  padding: .55rem 1rem;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  box-shadow: var(--shadow-sm);
}
.detail-search-bar input {
  border: none;
  outline: none;
  flex: 1;
  font-size: .9rem;
  background: transparent;
}

/* Etiquetas / tags */
.etiquetas-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .65rem;
  border-radius: 20px;
  background: var(--gold);
  border: 1px solid var(--gold-light);
  color: var(--gold-ink);
  font-size: .75rem;
  font-weight: 600;
}

/* ── Edición inline en el panel (rubros, experiencias) ── */
.panel-inline-edit > summary {
  cursor: pointer;
  font-size: .8rem;
  font-weight: 600;
  color: var(--accent-blue);
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.panel-inline-edit > summary::-webkit-details-marker { display: none; }
.panel-inline-edit > summary::before {
  content: "\203A";
  display: inline-block;
  transition: transform .15s ease;
  font-size: 1rem;
  line-height: 1;
}
.panel-inline-edit[open] > summary::before { transform: rotate(90deg); }
.panel-inline-edit > summary:hover { text-decoration: underline; }
.panel-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: .2rem .8rem;
}
.panel-cat-grid ul { list-style: none; padding: 0; margin: 0; display: contents; }
.panel-cat-grid li { margin: 0; }
.panel-cat-grid label {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  color: var(--text-dark);
  cursor: pointer;
  padding: .15rem 0;
}

/* ── Clientes mineros declarados por la empresa (ficha) ── */
.client-chip {
  display: inline-flex;
  align-items: center;
  padding: .3rem .8rem;
  border-radius: 20px;
  background: var(--gold-pale);
  border: 1px solid var(--gold-light);
  color: var(--navy);
  font-size: .8rem;
  font-weight: 600;
}
/* Variante para las fichas que declararon el detalle del trabajo en varias
   líneas, en vez de solo los nombres de los clientes. */
.client-lines {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.client-line {
  padding: .5rem .85rem;
  border-left: 3px solid var(--gold-light);
  background: var(--gray-bg);
  border-radius: 0 6px 6px 0;
  font-size: .85rem;
  color: var(--text-body);
  line-height: 1.5;
}

/* Secondary contact cards */
.contact-card-secondary {
  background: #f8fafc;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  padding: 1rem;
  text-align: center;
  margin-bottom: .75rem;
}
.contact-avatar-sm {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto .5rem;
}

.detail-logo-wrap {
  width: 230px;
  padding: 16px;
  border-radius: var(--radius-card);
  border: 1px solid var(--card-border);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
}
.detail-logo {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}
.detail-logo-placeholder {
  width: 100%;
  height: 130px;
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  font-weight: 800;
  border-radius: calc(var(--radius-card) - 2px);
  letter-spacing: .04em;
}

.detail-section-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.supplier-attachment-thumb {
  display: block;
  width: 96px;
  height: 96px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--card-border);
  flex-shrink: 0;
}
.supplier-attachment-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .2s ease;
}
.supplier-attachment-thumb:hover img { transform: scale(1.06); }
.detail-section-title {
  padding: .8rem 1.25rem;
  background: var(--gray-bg);
  border-bottom: 1px solid var(--card-border);
  font-weight: 700;
  font-size: .88rem;
  color: var(--navy);
  display: flex;
  align-items: center;
}
.detail-section-body { padding: 1.25rem; }

/* Operational data */
.op-data-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem;
  background: var(--gray-bg);
  border-radius: 8px;
  height: 100%;
}
.op-data-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  /* Sin el recuadro navy: el ícono acompaña al dato, no compite con él. */
  background: transparent;
  color: var(--navy);
  opacity: .45;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
}
.op-data-item > div:not(.op-data-icon) { min-width: 0; }
.op-data-label { font-size: .72rem; color: var(--text-body); }
.op-data-value { font-weight: 600; font-size: .9rem; color: var(--text-title); overflow-wrap: break-word; word-break: break-all; }

/* Experience timeline */
.experience-item { padding: 1rem 1.25rem; }
.experience-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: .5rem;
}
.experience-company { font-weight: 700; color: var(--navy); font-size: .9rem; }
.experience-service { font-size: .82rem; color: var(--text-body); margin-top: 2px; }
.experience-desc { font-size: .8rem; color: var(--text-body); margin-bottom: .5rem; }
.year-badge {
  display: inline-block;
  background: var(--navy);
  color: #fff;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
}
.experience-docs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: .5rem; }
.docs-label { font-size: .75rem; color: var(--text-body); display: block; margin-bottom: 4px; }
.doc-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: .72rem;
  font-weight: 600;
  border: 1px solid;
}
.doc-OC { background:#fef9c3; color:#854d0e; border-color:#fef08a; }
.doc-OS { background:#dcfce7; color:#166534; border-color:#bbf7d0; }
.doc-CS { background:#ede9fe; color:#5b21b6; border-color:#ddd6fe; }
.doc-GR { background:#fce7f3; color:#9d174d; border-color:#fbcfe8; }
.doc-desc { font-weight: 400; opacity: .85; }

/* ── Convocatorias (feed tipo red social en "Mi Perfil") ── */
.announcements-feed {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.announcement-post {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow .18s ease, transform .18s ease;
}
.announcement-post:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.announcement-post-head {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .9rem 1.1rem .7rem;
}
.announcement-post-avatar {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1rem;
  font-family: 'Inter', sans-serif;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--gold-light);
}
.announcement-post-meta { min-width: 0; line-height: 1.3; }
.announcement-post-name {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-weight: 700;
  font-size: .92rem;
  color: var(--navy);
  font-family: 'Inter', sans-serif;
}
.announcement-post-verified {
  color: var(--gold);
  font-size: .8rem;
}
.announcement-post-time {
  font-size: .75rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: .3rem;
}
.announcement-post-body { padding: 0 1.1rem; }
.announcement-post-title {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  color: var(--text-title);
  margin-bottom: .25rem;
}
.announcement-post-text {
  font-size: .9rem;
  color: var(--text-body);
  line-height: 1.55;
  word-break: break-word;
  margin-bottom: .9rem;
}
.announcement-post-media {
  width: 100%;
  max-height: 420px;
  overflow: hidden;
  background: var(--gray-bg);
  border-top: 1px solid var(--card-border);
  border-bottom: 1px solid var(--card-border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.announcement-post-media img {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: cover;
}
.announcement-post-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  padding: .85rem 1.1rem;
}
.announcement-post-action {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem 1rem;
  border-radius: 50px;
  background: var(--gold-pale);
  color: var(--navy);
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .15s ease;
}
.announcement-post-action:hover { background: var(--gold-light); color: var(--navy-dark); }
.announcement-post-action-whatsapp { background: #25D366; color: #fff; }
.announcement-post-action-whatsapp:hover { background: #1ebe57; color: #fff; }

/* ── Contact Card ── */
.contact-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  border-top: 4px solid var(--navy);
}
.contact-card-header {
  padding: .8rem 1.25rem;
  font-weight: 700;
  font-size: .85rem;
  color: var(--navy);
  background: var(--gray-bg);
  border-bottom: 1px solid var(--card-border);
  display: flex;
  align-items: center;
}
.contact-card-body {
  padding: 1.25rem;
  text-align: center;
}
.contact-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0 auto;
}
.contact-name { font-size: 1rem; font-weight: 700; color: var(--navy); margin-bottom: .2rem; }
.contact-position { font-size: .82rem; color: var(--text-body); margin-bottom: 1rem; }
/* "Actualizado al dd/mm/aaaa": senal de frescura del contacto. Va en tono
   apagado a proposito -- es metadato, no compite con el nombre ni el cargo. */
.contact-updated {
  font-size: .72rem;
  color: var(--text-muted);
  margin-bottom: 0;
  letter-spacing: .01em;
}
.contact-updated-sm { font-size: .68rem; margin-top: .1rem; }

/* Acciones de contacto: un boton por canal, con el dato adentro.
   Reemplaza al par .contact-details/.contact-link, que repetia correo y
   telefono como texto arriba de los mismos botones. */
.contact-actions {
  display: grid;
  gap: .5rem;
  margin-top: 1rem;
  text-align: left;
}
.contact-action {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem .85rem;
  border-radius: 8px;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background .15s, border-color .15s;
  /* Sin esto un correo largo estira la tarjeta en vez de cortarse. */
  min-width: 0;
}
.contact-action i { font-size: 1rem; flex-shrink: 0; }
.contact-action-text { display: flex; flex-direction: column; min-width: 0; }
.contact-action-label { font-size: .84rem; font-weight: 600; line-height: 1.3; }
.contact-action-value {
  font-size: .78rem;
  line-height: 1.35;
  /* Los correos corporativos no traen espacios donde cortar. */
  overflow-wrap: anywhere;
}
.contact-action-primary { background: var(--navy); color: #fff; }
.contact-action-primary:hover { background: var(--navy-light); color: #fff; }
.contact-action-primary i { color: var(--gold); }
.contact-action-primary .contact-action-value { color: rgba(255, 255, 255, .72); }
.contact-action-secondary { background: #fff; border-color: var(--navy); color: var(--navy); }
.contact-action-secondary:hover { background: var(--gray-bg); color: var(--navy); }
.contact-action-secondary i { color: var(--navy); }
.contact-action-secondary .contact-action-value { color: var(--text-body); }
.contact-action-wa { background: #1DAA61; color: #fff; }
.contact-action-wa:hover { background: #178a4f; color: #fff; }
.contact-action-wa i { color: #fff; }
.contact-action-wa .contact-action-value { color: rgba(255, 255, 255, .78); }

/* Quick facts */
.quick-facts { padding: 1rem 1.25rem 0; border-top: 1px solid var(--card-border); }
.quick-fact {
  display: flex;
  justify-content: space-between;
  padding: .4rem 0;
  border-bottom: 1px solid #f1f5f9;
  font-size: .8rem;
}
.quick-fact:last-child { border-bottom: none; }
.qf-label { color: var(--text-body); }
.qf-value { font-weight: 600; color: var(--text-title); }

/* ── Admin Panel ── */
.stat-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-top: 4px solid;
  transition: transform .15s, box-shadow .15s;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.stat-total     { border-top-color: var(--navy); }
.stat-published { border-top-color: #16a34a; }
.stat-pending   { border-top-color: #d97706; }
.stat-review    { border-top-color: #ea580c; }
.stat-buyers    { border-top-color: #7c3aed; }
.stat-standard  { border-top-color: var(--gold); }
.stat-verified  { border-top-color: #0891b2; }
.stat-validated { border-top-color: #0369a1; }
.stat-destacados      { border-top-color: #f5a623; }
.stat-buyers-rejected { border-top-color: #dc2626; }
.stat-changes         { border-top-color: #4f46e5; }
.stat-attachments     { border-top-color: #0d9488; }
.stat-certifications { border-top-color: #b45309; }
.stat-reclamaciones { border-top-color: #dc2626; }

.stat-icon { font-size: 1.5rem; margin-bottom: .4rem; opacity: .65; }
.stat-value { font-size: 2rem; font-weight: 800; color: var(--navy); line-height: 1; margin-bottom: .3rem; }
.stat-label { font-size: .75rem; color: var(--text-body); font-weight: 500; }

.panel-table-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.panel-table-header {
  padding: .85rem 1.25rem;
  background: var(--gray-bg);
  border-bottom: 1px solid var(--card-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
}

.panel-quick-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  text-decoration: none;
  color: var(--text-body);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.panel-quick-link:hover {
  border-color: var(--gold);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  color: var(--navy);
}

/* ── Analíticas de Búsqueda ── */
.filter-pills { display: flex; gap: .35rem; flex-wrap: wrap; }
.filter-pill {
  padding: .3rem .75rem;
  border-radius: 999px;
  border: 1px solid var(--card-border);
  background: #fff;
  color: var(--text-body);
  font-size: .8rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
.filter-pill:hover { border-color: var(--gold); color: var(--navy); }
.filter-pill.active { background: var(--navy); border-color: var(--navy); color: #fff; }

.mini-stat {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  padding: .85rem 1rem;
  text-align: center;
}
.mini-stat-value { font-size: 1.15rem; font-weight: 700; color: var(--navy); line-height: 1.3; }
.mini-stat-label { font-size: .72rem; color: var(--text-body); font-weight: 500; margin-top: .15rem; }

.chart-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.chart-canvas-wrap { position: relative; height: 280px; padding: 1rem 1.25rem; }

/* ── Módulo de Actividad ── */
/* Pestañas entre Resumen / Compradores / Proveedores. El panel no tiene
   sidebar, así que sin esto habría que volver al navbar para saltar entre
   secciones hermanas. */
.activity-tabs {
  display: flex;
  gap: .35rem;
  border-bottom: 1px solid var(--card-border);
  flex-wrap: wrap;
}
.activity-tab {
  padding: .5rem .9rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-body);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s ease, border-color .15s ease;
}
.activity-tab:hover { color: var(--navy); }
.activity-tab.active { color: var(--navy); border-bottom-color: var(--gold); }

/* Línea de tiempo de un comprador. Los eventos son de tipos distintos
   (sesión, búsqueda, ficha, consulta) y el color del ícono es lo que
   permite barrerla de un vistazo sin leer cada renglón. */
.activity-event {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--card-border);
}
.activity-event:last-child { border-bottom: none; }
.activity-event-icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
  background: var(--gray-bg);
  color: var(--text-body);
}
.activity-event-sesion .activity-event-icon { background: #e8eef7; color: #0A2647; }
.activity-event-busqueda .activity-event-icon { background: #e0f2fe; color: #0891b2; }
.activity-event-vista .activity-event-icon { background: #ede9fe; color: #7c3aed; }
.activity-event-consulta .activity-event-icon { background: #dcfce7; color: #15803d; }
.activity-event-body { flex: 1; min-width: 0; }
.activity-event-text { font-size: .83rem; color: var(--text-title); }
.activity-event-text a { color: var(--navy); }
.activity-event-detail {
  font-size: .74rem;
  color: var(--text-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.activity-event-date {
  font-size: .72rem;
  color: var(--text-body);
  white-space: nowrap;
}

/* ── Pagination ── */
.page-link {
  color: var(--navy);
  border-color: var(--card-border);
  min-width: 32px;
  text-align: center;
  border-radius: 4px !important;
  margin: 0 2px;
}
.page-item.active .page-link {
  background-color: var(--navy);
  border-color: var(--navy);
  /* Bug preexistente: sin esto el número de página activo heredaba el
     mismo color que su propio fondo y quedaba invisible. */
  color: #fff;
}
.page-link:hover { color: var(--navy-dark); background-color: var(--gray-bg); }

/* ── Suppliers Grid (directory cards view) ── */
.suppliers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}

.supplier-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 0.5px solid var(--card-border);
  border-radius: 12px;
  color: var(--text-title);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  overflow: hidden;
}

i.supplier-card-star {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
}
.supplier-card-star {
  font-size: 1.05rem;
  color: #C1C9D2;
  text-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.supplier-card-star.is-active {
  color: #f5a623;
}

/* Version clicable (solo staff): el <button> vive dentro de un <form>
   que ocupa la misma esquina; el boton en si no lleva position:absolute
   propio para no pelear con el del form. */
.supplier-card-star-toggle {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  margin: 0;
}
button.supplier-card-star {
  display: inline-flex;
  background: none;
  border: none;
  padding: 0;
  line-height: 1;
  cursor: pointer;
  transition: transform .15s ease, color .15s ease;
}
button.supplier-card-star:hover {
  transform: scale(1.15);
  color: #f5a623;
}

.supplier-card:hover {
  border-color: #6d87b9;
  box-shadow: 0 8px 24px rgba(109,135,185,0.15);
  transform: translateY(-3px);
}

/* La entrada escalonada de las tarjetas la maneja ahora el sistema
   [data-reveal] (ver 'Scroll reveal' al final del archivo). */

.supplier-card.destacado {
  border: 1.5px solid #6d87b9;
}

.supplier-card-link {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-decoration: none;
  color: inherit;
}
.supplier-card-link:hover { color: inherit; text-decoration: none; }

.supplier-card-logo {
  width: 100%;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: #ffffff;
  border-bottom: 0.5px solid var(--card-border);
}

.supplier-card-logo img {
  max-width: 100%;
  max-height: 80px;
  object-fit: contain;
}

.supplier-card-initials {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-card);
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: 700;
  font-family: 'Lato', sans-serif;
}

.supplier-card-badges {
  display: flex;
  gap: 6px;
  padding: 10px 12px 0;
  min-height: 28px;
  flex-wrap: wrap;
}

.supplier-card-info {
  padding: 10px 12px;
  flex: 1;
}

.supplier-card-name {
  font-size: 0.9rem;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  color: var(--text-title);
  margin-bottom: 6px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}

.supplier-card-desc {
  font-size: 0.78rem;
  color: var(--text-body);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 4.5em;
}

.supplier-card-meta {
  padding: 0 12px 10px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.supplier-card-meta span {
  font-size: 0.78rem;
  color: var(--text-body);
  display: flex;
  align-items: center;
  gap: 4px;
}

.supplier-card-meta i {
  color: #6d87b9;
}

/* En cuadrícula los dos grupos (.meta-col) son transparentes al layout:
   todo fluye como una sola lista con wrap, igual que antes de agruparlos
   (necesario para la vista lista, ver más abajo). */
.meta-col { display: contents; }

.supplier-card-footer {
  padding: 10px 12px;
  border-top: 0.5px solid var(--card-border);
  display: flex;
  gap: 8px;
}

/* Cuando el proveedor no cargó ni teléfono ni WhatsApp: en vez de dejar el
   pie de la tarjeta con espacio vacío al lado de "Contactar", se explica
   por qué faltan esos dos botones. */
.btn-card-empty-hint {
  flex: 1;
  display: flex;
  align-items: center;
  font-size: 0.72rem;
  color: var(--text-muted, #6b7280);
  font-style: italic;
}

.btn-card {
  flex: 1;
  text-align: center;
  font-size: 0.76rem;
  font-weight: 600;
  font-family: 'Lato', sans-serif;
  padding: 6px 8px;
  border-radius: 6px;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
/* Fila de acciones de la tarjeta: llamar / WhatsApp / contactar.
   El de llamar es solo icono y no se estira -- es la accion mas
   secundaria de las tres y no merece un tercio del ancho. */
.btn-card-phone {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  color: var(--navy);
  border: 1px solid var(--card-border);
  background: #fff;
  cursor: pointer;
}
.btn-card-phone:hover { background: var(--gray-bg); color: var(--navy); }

/* En cuadrícula el botón de llamar es un cuadrado de solo ícono (ver
   comentario arriba): la etiqueta "Llamar" queda oculta para no repetir el
   texto en un botón que ya se explica solo por el ícono del teléfono. */
.btn-card-label { display: none; }

/* Verde de WhatsApp: es color de marca, no de la paleta de MINDER, y se
   usa solo aca justamente para que se reconozca de un vistazo. */
.btn-card-wa {
  color: #fff;
  border: 1px solid #1DAA61;
  background: #1DAA61;
}
.btn-card-wa:hover { background: #178a4f; border-color: #178a4f; color: #fff; }

button.btn-card { cursor: pointer; font-family: 'Lato', sans-serif; }
.btn-card-contact { background: var(--navy); color: #fff; border: 1px solid var(--navy); }
.btn-card-contact:hover { background: var(--navy-light); border-color: var(--navy-light); color: #fff; }

/* ── Modal de consulta ── */
.contact-modal { border: 0; border-radius: 14px; }
.contact-modal .modal-header { border-bottom: 1px solid var(--card-border); padding: 1rem 1.25rem; }
.contact-modal .modal-title { font-size: 1rem; font-weight: 700; color: var(--navy); line-height: 1.35; }
.contact-modal .modal-body { padding: 1.25rem; }
.contact-modal .modal-footer { border-top: 1px solid var(--card-border); padding: .85rem 1.25rem; }
.contact-modal-from {
  font-size: .78rem;
  color: var(--text-muted);
  background: var(--gray-bg);
  border-radius: 8px;
  padding: .5rem .7rem;
  margin-bottom: 1rem;
}

@media (max-width: 1200px) {
  .suppliers-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .suppliers-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .suppliers-grid { grid-template-columns: 1fr; }
}

/* ── Toggle de vista (cuadrícula / lista, tipo explorador de Windows) ── */
.view-toggle { display: flex; align-items: center; }
.view-toggle-btn {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-body);
  cursor: pointer;
  font-size: .9rem;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.view-toggle-btn:hover { background: var(--gray-bg); border-color: #6d87b9; }
.view-toggle-btn i { display: inline-block; transition: transform .18s ease; }
.view-toggle-btn:active i { transform: scale(.75); }
.suppliers-grid { transition: opacity .15s ease; }
.view-toggle-btn.active {
  background: var(--gold-pale);
  border-color: var(--gold);
  color: var(--navy);
}

/* Vista en lista: cada proveedor se vuelve una fila compacta */
.suppliers-grid.list-view {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.suppliers-grid.list-view .supplier-card { flex-direction: row; align-items: stretch; }
.suppliers-grid.list-view .supplier-card-link { flex-direction: row; align-items: center; gap: 4px; }
.suppliers-grid.list-view .supplier-card-logo {
  width: 128px; height: 96px; min-width: 128px;
  padding: 10px; border-bottom: none; border-right: 0.5px solid var(--card-border);
}
/* `object-fit: contain` (nunca recorta el logo) necesita ancho de sobra
   para que uno bien ancho, tipo banner (ej. ABSISA, 1480x799px), no se
   vea diminuto -- por eso el recuadro es más ancho que alto, como en la
   grilla, en vez de un cuadrado perfecto que lo dejaría chico. */
.suppliers-grid.list-view .supplier-card-logo img { max-height: 76px; }
.suppliers-grid.list-view .supplier-card-initials { width: 76px; height: 76px; font-size: 1.15rem; }
.suppliers-grid.list-view .supplier-card-badges {
  flex-direction: column; padding: 0 0 0 12px; min-height: auto; justify-content: center;
}
.suppliers-grid.list-view .supplier-card-info { padding: 8px 12px; flex: 1.3; min-width: 0; }
.suppliers-grid.list-view .supplier-card-name { -webkit-line-clamp: 1; min-height: auto; margin-bottom: 2px; }
/* La descripción corta (máx. 200 caracteres) se veía cortada a una sola
   línea acá -- se saca el clamp para que se lea completa, la fila crece
   con el contenido (el resto de las columnas usa align-items: stretch/
   center, así que se acomodan solas a la fila más alta). */
.suppliers-grid.list-view .supplier-card-desc { display: block; overflow: visible; min-height: auto; }
/* La meta (región, fecha, RUC, clientes, trabajadores) era una sola columna
   angosta apretada contra el borde -- se veía chica al lado del nombre y la
   descripción. En dos columnas usa el ancho de forma pareja, más parecido a
   como cada dato tenía su propia columna en la tabla del directorio anterior.
   Son dos flex-columnas independientes (no un grid de celdas fijas): cada
   una mide su altura por su propio contenido, así que si a un proveedor le
   falta "Clientes" la columna derecha se achica y se centra en vez de dejar
   una celda vacía colgando. */
.suppliers-grid.list-view .supplier-card-meta {
  flex: 1.7; display: flex; align-items: center;
  padding: 10px 16px; border-left: 0.5px solid var(--card-border); gap: 20px;
}
.suppliers-grid.list-view .meta-col {
  display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0;
}
.suppliers-grid.list-view .meta-col + .meta-col {
  padding-left: 20px; border-left: 0.5px solid var(--card-border);
}
.suppliers-grid.list-view .supplier-card-meta span {
  font-size: 0.85rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.suppliers-grid.list-view .supplier-card-footer {
  flex-direction: column; justify-content: center;
  border-top: none; border-left: 0.5px solid var(--card-border); width: 140px;
}
/* Acá el botón de llamar ocupa el mismo ancho que WhatsApp/Contactar (la
   columna es angosta y fija, no una fila que se reparte en tres), así que
   quedarse solo con el ícono se ve como una caja vacía. Se muestra la
   etiqueta para que las tres acciones se vean como un mismo conjunto. */
.suppliers-grid.list-view .btn-card-label { display: inline; margin-left: 6px; }
/* En esta vista la esquina derecha la ocupan los botones Contactar/Ver
   Perfil -- la estrella se pasa a la izquierda, sobre el logo, para no
   pisarlos. */
.suppliers-grid.list-view .supplier-card-star,
.suppliers-grid.list-view .supplier-card-star-toggle {
  left: 4px;
  right: auto;
  top: 4px;
}

@media (max-width: 600px) {
  .suppliers-grid.list-view .supplier-card { flex-direction: column; }
  .suppliers-grid.list-view .supplier-card-link { flex-direction: column; align-items: stretch; }
  .suppliers-grid.list-view .supplier-card-logo { width: 100%; border-right: none; border-bottom: 0.5px solid var(--card-border); }
  .suppliers-grid.list-view .supplier-card-meta { border-left: none; border-top: 0.5px solid var(--card-border); }
  .suppliers-grid.list-view .supplier-card-footer { border-left: none; border-top: 0.5px solid var(--card-border); width: 100%; }
}

.badge-destacado {
  display: inline-flex;
  align-items: center;
  background: #f5a623;
  color: #fff;
  border: 1px solid #dd9515;
  border-radius: 20px;
  padding: 2px 8px;
  font-size: .7rem;
  font-weight: 700;
}

/* ── Inter en títulos de sección y componente ── */
.detail-section-title,
.contact-card-header,
.filter-card-header,
.panel-table-header,
.supplier-card-name,
.supplier-name,
.contact-name,
.experience-company {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .contact-card { position: static !important; }
  .detail-logo-wrap { width: 160px; }
  .footer-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-cols {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .footer-bottom-inner { flex-direction: column; text-align: center; }
}

/* ── Search Autocomplete Dropdown ── */
[data-autocomplete-dropdown],
#searchSuggestions,
.mining-suggest-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: 0 12px 32px rgba(0,0,0,0.16);
  max-height: 480px;
  overflow-y: auto;
  z-index: 1050;
  width: fit-content;
  min-width: 320px;
  max-width: 100%;
}
[data-autocomplete-dropdown].active,
#searchSuggestions.active,
.mining-suggest-dropdown.active {
  display: block;
  animation: suggest-dropdown-in .18s ease-out;
}

@keyframes suggest-dropdown-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.suggest-section-label {
  padding: .5rem 1.25rem .3rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gold);
  border-top: 1px solid var(--card-border);
}
[data-autocomplete-dropdown] .suggest-section-label:first-child,
#searchSuggestions .suggest-section-label:first-child {
  border-top: none;
}

.suggest-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .5rem 1.25rem;
  font-size: .85rem;
  color: var(--text-body);
  text-decoration: none;
  cursor: pointer;
  border-left: 3px solid transparent;
  opacity: 0;
  animation: suggest-item-in .22s ease-out forwards;
  transition: background .15s ease, color .15s ease, border-color .15s ease, padding-left .15s ease;
}
.suggest-item:nth-child(1) { animation-delay: .01s; }
.suggest-item:nth-child(2) { animation-delay: .03s; }
.suggest-item:nth-child(3) { animation-delay: .05s; }
.suggest-item:nth-child(4) { animation-delay: .07s; }
.suggest-item:nth-child(5) { animation-delay: .09s; }
.suggest-item:nth-child(6) { animation-delay: .11s; }
.suggest-item:nth-child(n+7) { animation-delay: .12s; }

@keyframes suggest-item-in {
  from { opacity: 0; transform: translateX(-4px); }
  to   { opacity: 1; transform: translateX(0); }
}

.suggest-item:hover,
.suggest-item.is-active {
  background: var(--gold-pale);
  color: var(--navy);
  border-left-color: var(--gold);
  padding-left: 1.45rem;
}
.suggest-item strong { color: var(--navy); font-weight: 700; }

.suggest-icon {
  font-size: .85rem;
  color: var(--text-body);
  flex-shrink: 0;
  width: 16px;
  text-align: center;
  transition: transform .15s ease;
}
.suggest-item:hover .suggest-icon { transform: scale(1.12); }
.suggest-item-category .suggest-icon { color: var(--gold); }
.suggest-item-supplier .suggest-icon { color: var(--navy); }
.suggest-item-popular .suggest-icon { color: var(--gold); }
.suggest-item-spelling .suggest-icon { color: var(--navy); }
.suggest-item-spelling { border-bottom: 1px solid rgba(0, 0, 0, .06); }

/* ── Chatbot asistente (compradores/admin) ── */
.chatbot-widget {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1055;
}

.chatbot-bubble {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: none;
  background: var(--navy-dark);
  padding: 0;
  box-shadow: 0 6px 20px rgba(6,20,40,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.chatbot-bubble:hover { transform: scale(1.06); box-shadow: 0 8px 24px rgba(6,20,40,.45); }
.chatbot-bubble:active { transform: scale(.94); }
.chatbot-bubble img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
.chatbot-bubble.active img { transform: scale(.88) rotate(-8deg); }

.chatbot-panel {
  display: flex;
  flex-direction: column;
  position: absolute;
  right: 0;
  bottom: 88px;
  width: min(420px, calc(100vw - 40px));
  height: min(600px, calc(100vh - 120px));
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
  overflow: hidden;
  transform-origin: bottom right;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(14px) scale(.96);
  transition: opacity .22s ease, transform .25s cubic-bezier(.2,.8,.2,1), visibility .22s;
}
.chatbot-panel.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.chatbot-panel-header {
  background: linear-gradient(135deg, var(--navy-dark), var(--navy));
  color: #fff;
  padding: .8rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  flex-shrink: 0;
}
.chatbot-header-info {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-width: 0;
}
.chatbot-header-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(255,255,255,.15);
}
.chatbot-header-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}
.chatbot-header-title {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 1.02rem;
}
.chatbot-header-sub {
  font-size: .78rem;
  color: rgba(255,255,255,.65);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chatbot-panel-close {
  background: none;
  border: none;
  color: rgba(255,255,255,.75);
  font-size: .9rem;
  cursor: pointer;
  flex-shrink: 0;
}
.chatbot-panel-close:hover { color: #fff; }

.chatbot-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  background: linear-gradient(180deg, var(--gold-pale) 0%, var(--gray-bg) 140px);
}

.chatbot-message-row {
  display: flex;
  align-items: flex-end;
  gap: .4rem;
  max-width: 90%;
  animation: chatbot-msg-in .25s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes chatbot-msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.chatbot-message-row-assistant { align-self: flex-start; }
.chatbot-message-row-user { align-self: flex-end; }
.chatbot-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  margin-bottom: 2px;
}

.chatbot-message {
  padding: .7rem .95rem;
  border-radius: 16px;
  font-family: 'Lato', 'Inter', sans-serif;
  font-size: .95rem;
  line-height: 1.5;
  text-align: center;
  white-space: pre-wrap;
  min-width: 0;
}
.chatbot-message-user {
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
  color: #fff;
  border-bottom-right-radius: 4px;
}
.chatbot-message-assistant {
  background: #fff;
  color: var(--text-title);
  box-shadow: 0 1px 4px rgba(10,38,71,.08);
  border-bottom-left-radius: 4px;
}
.chatbot-message-row.chatbot-typing .chatbot-message { opacity: .6; font-style: italic; }

.chatbot-suppliers {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  align-self: stretch;
  animation: chatbot-msg-in .3s cubic-bezier(.2,.8,.2,1) both;
}
.chatbot-supplier-card {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: .7rem .9rem;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.chatbot-supplier-card:hover { border-color: var(--gold); transform: translateX(2px); }
.chatbot-supplier-card strong { color: var(--navy); font-size: .94rem; }
.chatbot-supplier-card span { color: var(--text-muted); font-size: .82rem; }
.chatbot-supplier-desc {
  line-height: 1.4;
  margin-top: .15rem;
}
.chatbot-supplier-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .35rem;
}
.chatbot-supplier-tag {
  background: var(--gold-pale);
  color: var(--navy);
  border-radius: 999px;
  padding: .18rem .6rem;
  font-size: .76rem;
  font-weight: 500;
}

.chatbot-panel-footer {
  display: flex;
  gap: .5rem;
  padding: .75rem;
  border-top: 1px solid var(--card-border);
  flex-shrink: 0;
  background: #fff;
}
.chatbot-panel-footer input {
  flex: 1;
  border: 1px solid var(--card-border);
  border-radius: 20px;
  padding: .6rem 1.1rem;
  font-size: .95rem;
  outline: none;
}
.chatbot-panel-footer input:focus { border-color: var(--gold); }
.chatbot-panel-footer button {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: var(--navy);
  color: #fff;
  flex-shrink: 0;
  cursor: pointer;
  font-size: 1rem;
}
.chatbot-panel-footer button:hover { background: var(--navy-dark); }

@media (max-width: 480px) {
  .chatbot-widget { right: 12px; bottom: 12px; }
  .chatbot-panel { right: -8px; }
}

/* ═══════════════════════════════════════════════════════════════════
   MOVIMIENTO — transiciones de página, scroll reveal y reduced motion
   ═══════════════════════════════════════════════════════════════════ */

/* ── Transiciones entre páginas (View Transitions API) ──
   Suaviza la recarga completa que hacen los filtros del directorio y la
   paginación. Los navegadores que no la soportan simplemente navegan
   como siempre: no hay nada que romper ni polyfill que cargar. */
@view-transition { navigation: auto; }

/* La navbar y el footer se nombran para que el navegador los reconozca
   como el mismo elemento en ambas páginas y queden quietos mientras el
   contenido cambia. Sin esto parpadean junto con el resto. */
.minder-navbar { view-transition-name: minder-navbar; }
.minder-footer { view-transition-name: minder-footer; }

::view-transition-old(root) {
  animation: vt-page-out .16s cubic-bezier(.4,0,1,1) both;
}
::view-transition-new(root) {
  animation: vt-page-in .26s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes vt-page-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-6px); }
}
@keyframes vt-page-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Scroll reveal ──
   Las tarjetas aparecen cuando entran en pantalla, no todas de golpe al
   cargar (antes las de abajo del fold gastaban su animación sin que
   nadie las viera). El escalonado lo calcula main.js según el orden en
   que entran, así funciona con cualquier cantidad de resultados.

   El estado oculto cuelga de .reveal-ready, una clase que main.js pone
   en <html>: sin JS, o con reduced motion, el contenido se ve siempre. */
[data-reveal] {
  transition: opacity .45s cubic-bezier(.2,.8,.2,1),
              transform .45s cubic-bezier(.2,.8,.2,1);
}
.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
}
.reveal-ready [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* ── Menos movimiento ──
   Para quien lo pide a nivel sistema: nada de animaciones, sin excepción.
   El movimiento le puede provocar mareo real, así que esto va al final
   del archivo para ganarle en cascada a cualquier regla de arriba. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ── Libro de Reclamaciones (distintivo del pie y cabecera del formulario) ── */
.libro-reclamaciones-link {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .45rem .8rem .45rem .5rem;
  border: 1px solid rgba(255,255,255,.25); border-radius: .5rem;
  color: #fff; text-decoration: none; line-height: 1.1;
  transition: background .15s, border-color .15s;
}
.libro-reclamaciones-link:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.5); color: #fff; }
.libro-reclamaciones-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; border-radius: .4rem;
  background: #fff; color: #0A2647; font-size: 1.35rem;
}
.libro-reclamaciones-texto { display: flex; flex-direction: column; font-size: .78rem; letter-spacing: .02em; }
.libro-reclamaciones-texto small { font-size: .66rem; opacity: .75; text-transform: uppercase; letter-spacing: .08em; }
.intro-block .libro-reclamaciones-badge { width: 3.2rem; height: 3.2rem; font-size: 1.8rem; background: #0A2647; color: #fff; }