/* =====================================================
   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 ──
   Navy sólido de siempre en TODO el sitio -- es "sticky-top" en todas las
   páginas, y ese mismo tono semitransparente que se ve bien encima de la
   foto oscura del hero del directorio se lava a gris apenas hay una
   página blanca detrás (formularios, panel, Convocatorias, etc.). */
.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;
}
/* Solo el directorio (única página con foto grande atrás del navbar,
   ver body_class en directory.html) pasa a transparente + blur, para que
   esa imagen se vea a través suyo como pidió la referencia. */
body.has-hero-navbar .minder-navbar {
  background: rgba(6, 20, 40, .55);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(133, 170, 214, .25);
  box-shadow: none;
  padding-top: 14px;
  padding-bottom: 14px;
}
.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,.7);
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: .01em;
  padding: .45rem .9rem;
  margin: 0 .15rem;
  border-radius: 50px;
  transition: color .15s ease, background-color .15s ease;
}
.minder-navbar .nav-link:hover { color: #fff; background: rgba(255,255,255,.09); }
.minder-navbar .nav-link.active {
  color: #fff;
  background: rgba(255,255,255,.14);
}

/* "Registrarse" (btn-gold) al mismo alto/redondez que "Ingresar"
   (.navbar-cta) -- afuera del navbar btn-gold sigue con su radio chico
   de siempre, esto solo aplica acá. */
.minder-navbar .btn-gold {
  border-radius: 50px;
  padding: .5rem 1.1rem;
}

/* Mismo lenguaje que los íconos del hero (círculo, borde tenue, dorado):
   así el "Ingresar" del navbar y las tarjetas de abajo se leen como parte
   del mismo sistema, en vez de un componente de Bootstrap sin retocar. */
.navbar-cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1.1rem;
  border-radius: 50px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.28);
  color: #fff !important;
  font-weight: 600;
  font-size: .88rem;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.navbar-cta:hover {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.45);
  transform: translateY(-1px);
}
.navbar-cta i { color: var(--gold); font-size: .95rem; }

.navbar-user-pill {
  padding: .3rem .8rem .3rem .3rem !important;
  border-radius: 50px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.2);
  margin: 0 !important;
}
.navbar-user-pill:hover {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.4);
}

.navbar-icon-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.65);
  font-size: 1.05rem;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.navbar-icon-btn:hover { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.4); }
.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;
}

/* ── 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: 320px;
  border-bottom: 4px solid var(--gold);
  background: var(--navy-dark);
  /* El navbar ahora es transparente (con blur) para poder ver la foto de
     acá abajo a través suyo -- pero sigue "sticky-top" en TODAS las
     páginas, no flota encima de esta franja por su cuenta. Este margen
     negativo hace que la franja empiece más arriba, detrás del navbar
     (87px medidos: 14px+14px de padding + 48px del logo + el borde),
     así la imagen se extiende debajo suyo. El padding-top de
     .hero-col-text de más abajo compensa esos mismos 87px para que el
     título quede exactamente donde estaba antes, no tapado. */
  margin-top: -87px;
}
.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%;
  /* align-items: stretch (no "center") para que .hero-content ocupe toda
     la altura de la franja: así el margin-top/bottom auto del buscador,
     más abajo, tiene espacio real para repartir. Con "center" el bloque
     entero (título + subtítulo + buscador) se centraba como una unidad y
     el buscador -- al ser el último -- quedaba visualmente más abajo del
     centro real de la franja. */
  display: flex;
  align-items: stretch;
  justify-content: center;
  text-align: center;
  padding: 36px clamp(20px, 3vw, 48px);
  padding-top: calc(36px + 87px);
}
.hero-content {
  /* Antes 560px: el buscador (.hero-search-wrap, más abajo) está pensado
     para un ancho mayor, pero quedaba recortado por este contenedor sin
     llegar nunca a su ancho real -- se veía más corto de lo que el propio
     CSS de la barra buscaba. */
  max-width: 1400px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#searchForm {
  width: 100%;
  /* Pegado al subtítulo (con aire, no encimado) en vez de centrado en todo
     el alto del hero -- con margin auto quedaba flotando muy abajo, lejos
     del título y subtítulo que lo explican. */
  margin-top: 1.1rem;
}

@media (max-width: 900px) {
  .directory-hero { min-height: 230px; }
  .hero-col-text {
    flex: 1 1 100%;
    padding: 26px var(--margin-mobile, 20px);
    padding-top: calc(26px + 87px);
  }
  .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);
  padding-top: calc(22px + 87px);
}
.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-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);
}
/* margin: 0 auto -- #searchForm ocupa todo el ancho de .hero-content (ver
   más arriba), así que sin esto la barra, al ser más angosta que su
   contenedor, quedaba pegada a la izquierda en vez de centrada. */
.hero-search-wrap { max-width: 700px; width: 100%; margin: 0 auto; }
/* Ya buscaste algo: acá sí puede ocupar todo el ancho -- no compite con el
   título/subtítulo (colapsados) como en el estado inicial de arriba. */
.directory-hero.directory-hero-compact .hero-search-wrap { max-width: 1400px; }

.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 {
    animation: none !important;
    opacity: 1 !important;
  }
}

/* ── Aliados Estratégicos: tira de logos, autorrotante (Bootstrap Carousel) ── */
.allies-strip {
  background: #F7F8FA;
  border-bottom: 1px solid #E5E7EB;
  padding: 34px 0;
}
.allies-row {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-wrap: wrap;
  gap: 20px 32px;
  min-height: 76px;
}
.allies-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 68px;
  transition: transform .2s ease;
}
.allies-logo:hover { transform: scale(1.05); }
.allies-logo img {
  /* height:100% (no max-height): todos los logos deben llenar el mismo
     alto de caja sin importar su resolución de origen -- con max-height
     un archivo chico (ej. un logo bajado a 140x60px) se quedaba en su
     tamaño real, mucho más chico que uno que sí llegaba a los 68px.
     max-width 150 (antes 190): con 6 logos por página + gaps, 190
     hacía que la fila superara el ancho del .container en breakpoints
     lg/xl y el último logo del grupo (ej. ITAW) se cayera a una
     segunda línea -- 150 deja margen para que los 6 siempre quepan
     en una sola fila. */
  height: 100%;
  width: auto;
  max-width: 150px;
  object-fit: contain;
}
#aliadosCarousel .carousel-control-prev,
#aliadosCarousel .carousel-control-next {
  width: 36px;
  opacity: 1;
}
.allies-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #E5E7EB;
  color: var(--navy-dark, #0A2647);
  box-shadow: 0 2px 6px rgba(16,24,40,.08);
}
.allies-indicators {
  position: static;
  margin: 10px 0 0;
}
.allies-indicators [data-bs-target] {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #C7D6E8;
  opacity: 1;
  border: none;
}
.allies-indicators [data-bs-target].active { background-color: var(--gold); }

/* ── 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-count-bottom { font-size: .95rem; }
.results-count-bottom .fw-semibold { color: var(--navy); font-size: 1.05rem; }

/* ── 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: #ECFDF3;
  color: #067647;
  border: 1px solid #ABEFC6;
  border-radius: 20px;
  padding: 3px 10px;
  font-size: .72rem;
  font-weight: 700;
  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); }

/* Copiar teléfono: al lado de "Llamar" porque un tel: link no sirve en
   desktop y en mobile dispara la marcación en vez de dejar copiar el
   número (útil para pasarlo por WhatsApp/correo a otra persona). */
.contact-action-group { display: flex; align-items: stretch; gap: .5rem; }
.contact-action-group .contact-action { flex: 1 1 auto; min-width: 0; }
.contact-copy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.6rem;
  border: 1px solid var(--navy);
  border-radius: 8px;
  background: #fff;
  color: var(--navy);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.contact-copy-btn:hover { background: var(--gray-bg); }
.contact-copy-btn.is-copied { background: var(--navy); color: #fff; }
.contact-copy-btn-sm {
  width: 1.6rem;
  height: 1.6rem;
  border-color: transparent;
  color: var(--text-body);
  font-size: .7rem;
}
.contact-copy-btn-sm:hover { background: var(--gray-bg); border-color: var(--card-border); }
.contact-copy-btn-sm.is-copied { background: var(--navy); color: #fff; }

/* 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: none;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.04);
  color: var(--text-title);
  transition: 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.3rem;
  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 {
  box-shadow: 0 8px 24px rgba(16,24,40,.12);
  transform: translateY(-3px);
}

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

/* Antes llevaba un borde de color propio; la estrella ya alcanza para
   marcar un destacado y un borde aparte competía con la sombra pareja
   del resto de las tarjetas. */

.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: 14px;
  background: #E4E7EC;
  color: #475467;
  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; gap: 6px; }
.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;
  text-decoration: none;  /* el toggle de tabla es un <a>, no un <button> */
  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, cada fila su propia
   tarjeta flotante (sombra pareja, sin líneas divisorias internas -- el
   espaciado solo alcanza para separar región/RUC/etc. de los botones). */
.suppliers-grid.list-view {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.suppliers-grid.list-view .supplier-card { flex-direction: row; align-items: stretch; }
/* align-items: stretch (no "center"): así el recuadro del logo ocupa
   todo el alto real de la fila -- que varía según cuánto ocupe la
   descripción -- en vez de quedar con un alto fijo y aire de sobra
   arriba/abajo cuando la fila crece. */
.suppliers-grid.list-view .supplier-card-link { flex-direction: row; align-items: stretch; gap: 4px; }
.suppliers-grid.list-view .supplier-card-logo {
  width: 150px; height: auto; min-width: 150px;
  padding: 18px; border-bottom: none; border-right: none;
}
/* `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: 100px; }
.suppliers-grid.list-view .supplier-card-initials { width: 110px; height: 110px; font-size: 1.4rem; border-radius: 16px; }
.suppliers-grid.list-view .supplier-card-badges {
  flex-direction: column; padding: 0 0 0 14px; min-height: auto; justify-content: center;
}
.suppliers-grid.list-view .supplier-card-info { padding: 14px; flex: 1.3; min-width: 0; }
.suppliers-grid.list-view .supplier-card-name {
  -webkit-line-clamp: 1; min-height: auto; margin-bottom: 4px;
  font-size: 1.05rem;
}
/* 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;
  font-size: 0.85rem;
}
/* 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: 14px 20px; gap: 24px;
}
.suppliers-grid.list-view .meta-col {
  display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0;
}
.suppliers-grid.list-view .meta-col + .meta-col {
  padding-left: 24px;
}
.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; align-items: flex-start;
  border-top: none; width: 150px; gap: 12px; padding: 14px 18px;
}
/* Llamar y Contactar quedan como texto+ícono (ninguna caja/borde propios,
   como el resto del texto de la fila) -- el único botón "de verdad" es
   WhatsApp, así se nota cuál es la acción que MINDER quiere empujar.
   flex: 0 (no auto-stretch): antes .btn-card {flex:1} repartía el alto
   de esta columna en tres partes iguales; acá cada uno mide lo justo. */
.suppliers-grid.list-view .btn-card {
  flex: 0 0 auto; width: auto; padding: 0; border-radius: 0;
}
.suppliers-grid.list-view .btn-card-phone,
.suppliers-grid.list-view .btn-card-contact {
  border: none; background: none; min-width: 0; color: var(--navy);
}
.suppliers-grid.list-view .btn-card-phone:hover,
.suppliers-grid.list-view .btn-card-contact:hover {
  background: none; text-decoration: underline;
}
.suppliers-grid.list-view .btn-card-contact { font-weight: 700; }
.suppliers-grid.list-view .btn-card-wa {
  border-radius: 50px; padding: 8px 18px;
}
/* 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: 10px;
  right: auto;
  top: 10px;
}

/* ── Vista tabla (admin-style, con encabezados ordenables) ──
   Mismo lenguaje que las tarjetas de la vista lista: sombra pareja en vez
   de un borde marcado, esquinas redondeadas, recuadro de iniciales gris
   plano. Las filas alternan blanco/gris clarito (antes solo lo hacía --de
   pura casualidad-- el fondo dorado de "destacado" cuando la mitad de una
   página resultaba estar destacada: no era un zebrado real, y con TODA la
   página destacada (o ninguna) el efecto directamente desaparecía). La
   estrella junto al nombre ya alcanza para marcar un destacado, así que
   se saca el fondo dorado de la fila entera -- competía con el zebrado. */
.suppliers-table-wrap {
  border: 1px solid var(--card-border);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.04);
  /* overflow-x auto y no hidden: son nueve columnas, y styles.css carga
     despues de Bootstrap, asi que un `hidden` aca le gana al overflow-x del
     .table-responsive del mismo div y deja la tabla recortada en movil. */
  overflow-x: auto;
}
.suppliers-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 0.88rem;
}
.suppliers-table thead th {
  background: #F7F9FC;
  border-bottom: 1px solid var(--card-border);
  padding: 12px 14px;
  text-align: left;
  white-space: nowrap;
  font-weight: 700;
  color: var(--text-title);
}
/* El wrap usa overflow-x: auto (no hidden, ver arriba) para no recortar
   la tabla en mobile -- así que sus esquinas redondeadas no alcanzan a
   la tabla de adentro solas; se redondea la fila del header a mano para
   que se note igual. */
.suppliers-table thead th:first-child { border-top-left-radius: 16px; }
.suppliers-table thead th:last-child { border-top-right-radius: 16px; }
.suppliers-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid #EEF1F5;
  vertical-align: middle;
  color: var(--text-body);
}
.suppliers-table tbody tr:nth-child(even) { background: #F7F9FC; }
.suppliers-table tbody tr:hover { background: #EEF2F8; }
.table-logo-cell { width: 56px; }
.table-desc-cell { min-width: 260px; max-width: 360px; }
.table-clients-cell { min-width: 180px; max-width: 260px; font-size: .82rem; }
.table-logo {
  width: 44px; height: 44px; object-fit: contain;
  border: 1px solid var(--card-border); border-radius: 10px; background: #fff;
}
.table-logo-initials {
  width: 44px; height: 44px; border-radius: 10px;
  background: #E4E7EC; color: #475467; font-weight: 700; font-size: .85rem;
  display: flex; align-items: center; justify-content: center;
}
.table-supplier-name {
  color: var(--text-title); font-weight: 600; text-decoration: none;
}
.table-supplier-name:hover { color: var(--gold-dark); text-decoration: underline; }
.table-star { color: #f5a623; margin-right: 4px; }
.table-sort-link {
  color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px;
}
.table-sort-link:hover { color: var(--gold-dark); }
.table-sort-icons {
  display: inline-flex; flex-direction: column; line-height: .55; font-size: .55rem;
}
.table-sort-icons i { color: #C4CAD3; }
.table-sort-icons i.active { color: var(--navy); }

@media (max-width: 900px) {
  .suppliers-table { font-size: 0.82rem; }
}

@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; }

/* ── Cotización grupal ───────────────────────────────────────────────── */

/* Boton "Cotizar" del pie de la tarjeta. Vive dentro de un <form> propio
   (necesita POST con CSRF), asi que el form tiene que estirarse igual que
   los demas botones o la fila queda despareja. */
.quote-toggle-form { display: contents; }

.btn-card-quote {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: #fff;
  border: 1px solid var(--navy);
  color: var(--navy);
  cursor: pointer;
}
.btn-card-quote:hover:not(:disabled) { background: var(--gold-pale); }
.btn-card-quote.is-selected {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.btn-card-quote.is-selected:hover { background: var(--gold-dark); border-color: var(--gold-dark); }
.btn-card-quote:disabled { opacity: .45; cursor: not-allowed; }

/* En la ficha y en la tabla el boton usa clases de Bootstrap, no btn-card:
   ahi el <span> del texto no debe heredar el tamano chico de la tarjeta. */
.btn .btn-card-label { font-size: inherit; }
.table-quote-cell .quote-toggle-form { display: block; }
.table-quote-cell .btn-card-quote { width: 100%; white-space: nowrap; }

/* Contador del navbar. El [hidden] necesita !important propio porque
   display:inline-flex le gana al display:none que trae el atributo. */
.nav-quote-badge[hidden] { display: none; }
.nav-quote-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 2px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--navy);
  font-size: .7rem;
  font-weight: 700;
  line-height: 1;
}

/* Pagina /cotizacion/ */
.quote-page { max-width: 860px; }

.quote-selection-list { display: flex; flex-direction: column; gap: 10px; }
.quote-selection-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
}
.quote-selection-logo { flex: 0 0 auto; }
.quote-selection-logo img,
.quote-selection-initials {
  width: 44px; height: 44px;
  border-radius: 6px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--card-border);
}
.quote-selection-initials {
  display: flex; align-items: center; justify-content: center;
  background: var(--navy); color: #fff; font-weight: 700; font-size: .85rem;
  border-color: var(--navy);
}
.quote-selection-info { flex: 1 1 auto; min-width: 0; }
.quote-selection-name {
  color: var(--text-title); font-weight: 600; text-decoration: none;
}
.quote-selection-name:hover { color: var(--gold-dark); text-decoration: underline; }
.quote-selection-desc { color: var(--text-body); font-size: .84rem; margin-top: 2px; }
.quote-selection-meta {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  margin-top: 4px; font-size: .78rem; color: var(--text-body);
}
.quote-selection-warn { color: #B54708; }
.quote-selection-remove { flex: 0 0 auto; }

.quote-form-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  padding: 20px;
}
.quote-form-from {
  font-size: .84rem;
  color: var(--text-body);
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--card-border);
}

@media (max-width: 576px) {
  .quote-selection-item { flex-wrap: wrap; }
  .quote-selection-info { flex-basis: 100%; order: 3; }
}