/* =====================================================
   ABASTEMIN by MINDER — abastemin.pe — Estilos del sitio
   =====================================================

   SISTEMA DE DISEÑO (fase 1 del rediseño, 2026-10-13)
   ---------------------------------------------------
   Todo lo nuevo se arma con estos tokens y componentes; no se escriben
   colores, tamaños, radios ni sombras a mano. Las fases siguientes
   escriben en su propia hoja (cargadas después de esta en base.html):
     ui-panel.css · ui-convocatorias.css · ui-cuentas.css · ui-publico.css

   Tokens (definidos en :root, aquí abajo)
   · Marca: --primary-50 … --primary-950 (escala del azul ABASTEMIN).
       --primary (= 700) es EL azul de botones y enlaces activos;
       --primary-hover (= 800). --accent es el celeste de marca (#85AAD6),
       solo para íconos, rayas y fondos: como texto no llega a 4.5:1.
       Los nombres viejos (--navy*, --gold*, --pp-accent, --co-accent,
       --convl-azul…) quedan como alias de esta escala.
   · Estados: --success / --warning / --danger / --info / --neutral,
       cada uno con -bg (fondo suave), -fg (texto, ≥4.5:1 sobre -bg),
       -border y -solid (relleno con texto blanco).
   · Texto: --text-strong (títulos y datos), --text-default (cuerpo),
       --text-muted (secundario, ≥5.5:1 sobre blanco y sobre --gray-bg).
   · Tipografía: --fs-xs 12 · --fs-sm 13 · --fs-md 14 · --fs-base 15 ·
       --fs-lg 16 · --fs-xl 18 · --fs-2xl 20 · --fs-3xl 24 · --fs-4xl 28 ·
       --fs-5xl 32 (más grande solo en titulares de portada, con clamp).
       Nada visible por debajo de 12px. Pesos: --fw-regular 400,
       --fw-medium 500, --fw-semibold 600, --fw-bold 700 (títulos 700,
       subtítulos 600; 800/900 solo en titulares de portada).
   · Radios: --radius-xs 4 · --radius-sm 6 · --radius-md 10 ·
       --radius-lg 14 · --radius-xl 20 · --radius-pill.
   · Sombras: --shadow-sm (reposo), --shadow-md (hover, menús),
       --shadow-lg (modales, paneles flotantes).
   · Botones: --btn-radius (píldora), --btn-h-sm 34 / --btn-h-md 42 /
       --btn-h-lg 48 (en móvil ninguno baja de 40, salvo en tablas),
       --btn-fs, --btn-fw, --btn-primary-bg / -hover y --btn-secondary-*
       (fg, border, hover-bg, hover-border) para el botón blanco con borde.
   · Foco: --focus-ring (anillo de marca de :focus-visible).

   Componentes globales (sección «Sistema de diseño: componentes»)
   · Botones: .btn-navy (= .btn-primary), .btn-outline-navy
       (= .btn-outline-primary), .btn-ghost, .btn-danger-soft; todos los
       .btn de Bootstrap y las variantes propias (pp-btn, conv-btn, cvd-btn,
       auth-btn…) comparten forma, alto y colores por los tokens de arriba.
       Para algo nuevo: <a class="btn btn-navy">…</a> (o .btn-sm/.btn-lg).
   · Etiqueta de estado: <span class="tag is-ok"><i class="bi bi-check2"></i>
       Aprobado</span>. Variantes: is-ok, is-warn, is-danger, is-info,
       is-neutral (por defecto); .tag-sm para tablas densas; .tag-dot pone
       un punto de color en vez de ícono. Los chips viejos (conv-estado,
       cvd-estado, ficha-estado, segui-chip, dash-pill, conv-chip,
       convl-etiqueta) usan las mismas medidas (--tag-*) y colores.
   · Bootstrap pintado con la marca: .table, .badge, .alert, .modal-content,
       .form-control/.form-select, .nav-tabs/.nav-pills, .pagination,
       .dropdown-menu, .card. Los badges bg-*-subtle salen como .tag.
   · Utilidades: .text-xs/.text-sm/.text-md/.text-base/.text-lg/.text-xl,
       .text-strong, .text-default, .text-soft (= --text-muted),
       .fw-semibold-ui, .measure (ancho de lectura, 70ch), .text-pre
       (respeta saltos de línea), .icon-dot (punto de estado decorativo),
       .field-w-sm/-md/-lg (ancho tope de filtros: 170/260/320px),
       .surface (tarjeta blanca con borde, radio y sombra de la marca). */

/* Alibaba Sans (fuente oficial de Alibaba, gratis para uso comercial),
   servida desde static/fonts: la CDN de Alibaba bloquea el enlace directo
   desde otros dominios. No hay peso 600 ni cursiva: el navegador usa Bold
   para 600 y sintetiza la cursiva.
   font-display: swap (2026-10-13; antes block): con block, si la fuente
   tardaba (red móvil lenta, caché vacía) el texto quedaba invisible hasta
   3 segundos. Con swap se lee al instante con la del sistema y cambia al
   llegar. Para que ese cambio casi nunca se vea, base.html precarga
   Regular y Bold (los pesos de casi todo el texto) y las métricas de la
   fuente de respaldo se parecen. */
@font-face { font-family: 'Alibaba Sans'; src: url("../fonts/alibaba-sans/AlibabaSans-Regular.559293ed8e40.woff2") format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Alibaba Sans'; src: url("../fonts/alibaba-sans/AlibabaSans-Medium.562758f91b19.woff2") format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Alibaba Sans'; src: url("../fonts/alibaba-sans/AlibabaSans-Bold.aec1d85346ed.woff2") format('woff2'); font-weight: 600 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Alibaba Sans'; src: url("../fonts/alibaba-sans/AlibabaSans-Heavy.97deed845e28.woff2") format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Alibaba Sans'; src: url("../fonts/alibaba-sans/AlibabaSans-Black.f4f35015787c.woff2") format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }

:root {
  /* El sitio es solo claro: sin esto, con el sistema en modo oscuro algunos
     navegadores pintan oscuros los controles nativos (selects, barras de
     scroll, autocompletar) sobre fondos blancos. */
  color-scheme: light;
  --font-sans:    'Alibaba Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --bs-body-font-family: var(--font-sans);
  --bs-font-sans-serif: var(--font-sans);

  /* ── Marca: escala del azul ABASTEMIN ──
     900 es el navy de la barra superior; 700 el azul de los botones; 300
     el celeste de marca (antes llamado «gold», que nunca fue dorado). Hasta
     el 2026-10-13 convivían siete azules «principales» casi iguales
     (#0B2D63, #163F85, #1a287a, #113775, #1E3D6F, #01256E…): ahora todos
     salen de aquí. */
  --primary-50:   #EAF1F9;
  --primary-100:  #D6E3F3;
  --primary-200:  #A8C4E3;
  --primary-300:  #85AAD6;
  --primary-400:  #5A82B8;
  --primary-500:  #345D8F;
  --primary-600:  #163F85;
  --primary-700:  #113775;
  --primary-800:  #0B2D63;
  --primary-900:  #0A2647;
  --primary-950:  #061428;
  --primary:        var(--primary-700);
  --primary-hover:  var(--primary-800);
  --primary-rgb:    17, 55, 117;
  --accent:         var(--primary-300);

  /* Nombres anteriores, como alias (siguen usándose en muchas reglas). */
  --navy:         var(--primary-900);
  --navy-dark:    var(--primary-950);
  --navy-light:   var(--primary-800);
  --navy-mid:     var(--primary-600);
  /* Degradado decorativo (avatares, marcas). Los botones ya no lo usan:
     van con --btn-primary-bg, un azul plano. */
  --grad-navy:    linear-gradient(135deg, var(--navy-mid) 0%, var(--navy-light) 100%);
  /* Estrella de "destacado". */
  --star:         #f5a623;
  --gold:         var(--accent);
  --gold-light:   var(--primary-200);
  --gold-pale:    var(--primary-50);
  --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:    var(--primary-500);
  --accent-blue:  #516fa9;

  /* ── Estados ── -fg es el texto (≥4.5:1 sobre -bg y sobre blanco),
     -solid el relleno de un botón o insignia con texto blanco. */
  --success-bg:     #ECFDF3;
  --success-fg:     #067647;
  --success-border: #ABEFC6;
  --success-solid:  #067647;
  --warning-bg:     #FFFAEB;
  --warning-fg:     #B54708;
  --warning-border: #FEDF89;
  --warning-solid:  #F79009;
  --danger-bg:      #FEF3F2;
  --danger-fg:      #B42318;
  --danger-border:  #FECDCA;
  --danger-solid:   #D92D20;
  --info-bg:        #EFF8FF;
  --info-fg:        #175CD3;
  --info-border:    #B2DDFF;
  --info-solid:     #1570EF;
  --neutral-bg:     #F2F4F7;
  --neutral-fg:     #475467;
  --neutral-border: #EAECF0;
  --success: var(--success-fg);
  --warning: var(--warning-fg);
  --danger:  var(--danger-fg);
  --info:    var(--info-fg);

  /* ── Superficies y bordes ── */
  --gray-bg:      #F7F8FA;
  --surface:      #FFFFFF;
  --card-border:  #E5E7EB;
  --border:       var(--card-border);
  --border-strong: #D0D5DD;

  /* ── Texto: tres tonos ──
     --text-muted pasó de #667085 a #5B6578 (2026-10-13): el gris anterior
     quedaba en el límite (4.5:1) sobre el fondo gris del sitio. */
  --text-strong:  #101828;
  --text-default: #344054;
  --text-muted:   #5B6578;
  --text-title:   var(--text-strong);
  --text-dark:    var(--text-strong);
  --text-body:    var(--text-muted);
  /* Paleta tipográfica del sitio: títulos y subtítulos (h1-h6) y párrafos. */
  --text-heading:   var(--primary-800);
  --text-paragraph: #232A3B;
  /* Bootstrap pinta con esta variable los h1-h6 y las clases .h1-.h6. */
  --bs-heading-color: var(--text-heading);

  /* ── Tipografía ── */
  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-md:   14px;
  --fs-base: 15px;
  --fs-lg:   16px;
  --fs-xl:   18px;
  --fs-2xl:  20px;
  --fs-3xl:  24px;
  --fs-4xl:  28px;
  --fs-5xl:  32px;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ── Radios y sombras ── */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-pill: 999px;
  --radius-card: var(--radius-md);
  --radius-btn:  var(--btn-radius);
  --shadow-sm:   0 1px 2px rgba(16, 24, 40, .05), 0 4px 14px rgba(16, 24, 40, .05);
  --shadow-md:   0 2px 4px rgba(16, 24, 40, .04), 0 10px 28px rgba(16, 24, 40, .09);
  --shadow-lg:   0 4px 10px rgba(16, 24, 40, .06), 0 20px 48px rgba(16, 24, 40, .16);

  /* ── Botones ──
     Una sola forma para todo el sitio (2026-10-13): píldora, que ya era la
     de la barra superior, el buscador y Convocatorias. Antes convivían
     radios de 6, 8, 9 y 999px y altos de 40 a 48px. */
  --btn-radius:   var(--radius-pill);
  --btn-h-sm:     34px;
  --btn-h-md:     42px;
  --btn-h-lg:     48px;
  --btn-fs:       var(--fs-md);
  --btn-fs-sm:    var(--fs-sm);
  --btn-fs-lg:    var(--fs-base);
  --btn-fw:       var(--fw-bold);
  --btn-primary-bg:       var(--primary);
  --btn-primary-bg-hover: var(--primary-hover);
  /* Secundario (blanco con borde): el texto va en el azul de la marca. */
  --btn-secondary-fg:           var(--primary-700);
  --btn-secondary-border:       var(--border-strong);
  --btn-secondary-hover-bg:     var(--primary-50);
  --btn-secondary-hover-border: var(--primary-300);

  /* ── Etiquetas de estado (.tag y los chips viejos) ── */
  --tag-h:    24px;
  --tag-px:   10px;
  --tag-fs:   var(--fs-xs);
  --tag-fw:   var(--fw-bold);
  --tag-radius: var(--radius-pill);

  /* ── Foco ── */
  --focus-ring: 0 0 0 3px rgba(var(--primary-rgb), .28);
  --focus-outline: 2px solid var(--primary-400);

  /* ── Bootstrap 5.3 con los colores de la marca ──
     Sin esto btn-primary, bg-success, text-danger, los enlaces o el anillo
     de foco salían con el azul/verde/amarillo de Bootstrap, que no son los
     del sitio. */
  --bs-primary: #113775;            --bs-primary-rgb: 17, 55, 117;
  --bs-success: #067647;            --bs-success-rgb: 6, 118, 71;
  --bs-warning: #F79009;            --bs-warning-rgb: 247, 144, 9;
  --bs-danger:  #D92D20;            --bs-danger-rgb: 217, 45, 32;
  --bs-info:    #1570EF;            --bs-info-rgb: 21, 112, 239;
  --bs-secondary: #5B6578;          --bs-secondary-rgb: 91, 101, 120;
  --bs-primary-text-emphasis: var(--primary-800);
  --bs-primary-bg-subtle:     var(--primary-50);
  --bs-primary-border-subtle: var(--primary-200);
  --bs-success-text-emphasis: var(--success-fg);
  --bs-success-bg-subtle:     var(--success-bg);
  --bs-success-border-subtle: var(--success-border);
  --bs-warning-text-emphasis: var(--warning-fg);
  --bs-warning-bg-subtle:     var(--warning-bg);
  --bs-warning-border-subtle: var(--warning-border);
  --bs-danger-text-emphasis:  var(--danger-fg);
  --bs-danger-bg-subtle:      var(--danger-bg);
  --bs-danger-border-subtle:  var(--danger-border);
  --bs-info-text-emphasis:    var(--info-fg);
  --bs-info-bg-subtle:        var(--info-bg);
  --bs-info-border-subtle:    var(--info-border);
  --bs-secondary-text-emphasis: var(--neutral-fg);
  --bs-secondary-bg-subtle:     var(--neutral-bg);
  --bs-secondary-border-subtle: var(--neutral-border);
  --bs-body-color:      var(--text-default);
  --bs-secondary-color: var(--text-muted);
  --bs-emphasis-color:  var(--text-strong);
  --bs-border-color:    var(--card-border);
  --bs-link-color:      var(--primary-600);
  --bs-link-color-rgb:  22, 63, 133;
  --bs-link-hover-color:     var(--primary-800);
  --bs-link-hover-color-rgb: 11, 45, 99;
  --bs-focus-ring-color: rgba(var(--primary-rgb), .28);
  --bs-border-radius:    var(--radius-md);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-border-radius-xl: var(--radius-xl);
  --bs-border-radius-pill: var(--radius-pill);
}

/* ── Ancho del sitio ──
   El .container de Bootstrap se queda en 1140px (xl) / 1320px (xxl) y en
   monitores anchos deja franjas vacías a los costados. Se estira un poco en
   cada escalón; el navbar y el footer usan el mismo .container, así que
   siguen alineados con el contenido. */
@media (min-width: 1200px) { .container { max-width: 1240px; } }
@media (min-width: 1400px) { .container { max-width: 1400px; } }
@media (min-width: 1700px) { .container { max-width: 1560px; } }

/* ── Base ── */
/* overflow-x: clip y no hidden: `hidden` convierte a html/body en
   contenedor de scroll y anula el position: sticky del navbar; `clip`
   recorta el desborde horizontal igual pero deja al navbar pegado arriba. */
html {
  overflow-x: clip;
  /* Reserva siempre el espacio de la barra de scroll vertical: si no, al
     pasar de una página corta a una larga el contenido (y el logo) se
     corren unos píxeles cuando la barra aparece. */
  scrollbar-gutter: stable;
}
body {
  background-color: var(--gray-bg);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
  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ó. */
/* Una regla por prefijo: juntos en una sola lista, cada navegador
   descartaba la regla entera por no reconocer el prefijo del otro. */
.form-control::placeholder { color: rgba(16, 24, 40, 0.45); opacity: 1; }
.form-control::-webkit-input-placeholder { color: rgba(16, 24, 40, 0.45); }
.form-control::-moz-placeholder { color: rgba(16, 24, 40, 0.45); 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);
}

/* Errores y advertencias del sitio (base.html): fijos arriba del
   contenido, no flotantes. */
.page-alert-wrap { padding-top: 14px; }
.page-alert { display: flex; align-items: center; gap: .65rem; margin: 0; border-radius: var(--radius-md); font-size: var(--fs-base); }
.page-alert > .bi { flex-shrink: 0; font-size: var(--fs-lg); }
.page-alert > span { flex: 1; }

/* Títulos a 700 y subtítulos (h4-h6) a 600, no a 800 (2026-10-13): con
   todo en 800 los títulos competían con los números y botones, y la
   página se veía pesada. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--text-heading);
  font-weight: var(--fw-bold);
}
h4, h5, h6, .h4, .h5, .h6 { font-weight: var(--fw-semibold); }
/* Las utilidades de color de Bootstrap/del sitio en un título (h1 con
   text-navy, subtítulos con text-gold-dark) no le cambian el color. */
:is(h1, h2, h3, h4, h5, h6):is(.text-navy, .text-gold-dark, .text-dark) { color: var(--text-heading) !important; }
p { color: var(--text-paragraph); }

/* Seleccionar y copiar texto dentro de enlaces (tarjetas del directorio,
   listas): sin esto Chrome y Safari arrastran el enlace al sombrear. El
   clic tras seleccionar lo anula main.js. */
a, a img { -webkit-user-drag: none; }
a { user-select: text; -webkit-user-select: text; }

/* =====================================================
   Sistema de diseño: componentes (2026-10-13)
   Van antes de las secciones de cada página para que estas puedan
   ajustarlos con la misma especificidad. Guía de uso al inicio del archivo.
   ===================================================== */

/* ── Foco visible ──
   Un solo anillo de marca para todo lo que se maneja con teclado (antes
   no había regla global y varias piezas lo quitaban con outline: none).
   Solo :focus-visible: al hacer clic con el mouse no aparece. Los campos de
   texto no llevan contorno: su foco es el borde + sombra de :focus, abajo. */
:focus-visible { outline: var(--focus-outline); outline-offset: 2px; }
:is(textarea, select, input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="submit"], [type="button"])):focus-visible { outline: none; }
.btn:focus-visible, .page-link:focus-visible, .nav-link:focus-visible, .dropdown-item:focus-visible {
  outline: var(--focus-outline); outline-offset: 2px; box-shadow: none;
}

/* ── Formularios (Bootstrap) ──
   Borde un tono más firme que el de las tarjetas (con el gris de las
   tarjetas los campos casi no se distinguían del fondo) y el foco con el
   anillo de la marca en vez del celeste de Bootstrap. */
.form-control, .form-select { border-color: var(--border-strong); color: var(--text-strong); }
.form-control:focus, .form-select:focus { border-color: var(--primary-400); box-shadow: var(--focus-ring); }
.form-check-input:focus { border-color: var(--primary-400); box-shadow: var(--focus-ring); }
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.form-switch .form-check-input:focus:not(:checked) {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%235A82B8'/%3e%3c/svg%3e");
}

/* ── Botones (Bootstrap y variantes del sitio) ──
   Todos los .btn salen de los tokens --btn-*: misma píldora, mismos altos
   (el alto sale del padding, así el texto largo puede partirse en dos
   líneas sin desbordar) y la letra en negrita. */
.btn {
  --bs-btn-padding-x: 18px;
  --bs-btn-padding-y: calc((var(--btn-h-md) - var(--btn-fs) * 1.5 - 2px) / 2);
  --bs-btn-font-size: var(--btn-fs);
  --bs-btn-font-weight: var(--btn-fw);
  --bs-btn-border-radius: var(--btn-radius);
  --bs-btn-focus-box-shadow: var(--focus-ring);
}
.btn-sm, .btn-group-sm > .btn {
  --bs-btn-padding-x: 13px;
  --bs-btn-padding-y: calc((var(--btn-h-sm) - var(--btn-fs-sm) * 1.5 - 2px) / 2);
  --bs-btn-font-size: var(--btn-fs-sm);
  --bs-btn-border-radius: var(--btn-radius);
}
.btn-lg, .btn-group-lg > .btn {
  --bs-btn-padding-x: 24px;
  --bs-btn-padding-y: calc((var(--btn-h-lg) - var(--btn-fs-lg) * 1.5 - 2px) / 2);
  --bs-btn-font-size: var(--btn-fs-lg);
  --bs-btn-border-radius: var(--btn-radius);
}
/* Pegado a un campo (buscadores del panel) va con el radio del campo: una
   píldora al lado de un rectángulo redondeado se veía despareja. */
.input-group > .btn { --bs-btn-border-radius: var(--bs-border-radius); }
.input-group-sm > .btn { --bs-btn-border-radius: var(--bs-border-radius-sm); }
.btn-link { --bs-btn-font-weight: var(--fw-semibold); }

/* Principal: azul de la marca, plano. */
.btn-primary, .btn-navy {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--btn-primary-bg);
  --bs-btn-border-color: var(--btn-primary-bg);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--btn-primary-bg-hover);
  --bs-btn-hover-border-color: var(--btn-primary-bg-hover);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--primary-900);
  --bs-btn-active-border-color: var(--primary-900);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--primary-400);
  --bs-btn-disabled-border-color: var(--primary-400);
}
/* Secundario: blanco con borde gris y texto azul; al pasar, celeste suave. */
.btn-outline-primary, .btn-outline-navy, .btn-outline-secondary, .btn-ghost {
  --bs-btn-color: var(--btn-secondary-fg);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: var(--btn-secondary-border);
  --bs-btn-hover-color: var(--primary-800);
  --bs-btn-hover-bg: var(--btn-secondary-hover-bg);
  --bs-btn-hover-border-color: var(--btn-secondary-hover-border);
  --bs-btn-active-color: var(--primary-900);
  --bs-btn-active-bg: var(--primary-100);
  --bs-btn-active-border-color: var(--primary-300);
  --bs-btn-disabled-color: var(--text-muted);
  --bs-btn-disabled-bg: #fff;
  --bs-btn-disabled-border-color: var(--neutral-border);
}
.btn-outline-secondary { --bs-btn-color: var(--text-default); }
/* Terciario: sin borde ni fondo hasta que se pasa por encima. */
.btn-ghost { --bs-btn-bg: transparent; --bs-btn-border-color: transparent; }
.btn-secondary {
  --bs-btn-color: var(--text-default);
  --bs-btn-bg: var(--neutral-bg);
  --bs-btn-border-color: var(--border-strong);
  --bs-btn-hover-color: var(--text-strong);
  --bs-btn-hover-bg: var(--neutral-border);
  --bs-btn-hover-border-color: var(--border-strong);
  --bs-btn-active-color: var(--text-strong);
  --bs-btn-active-bg: #E4E7EC;
  --bs-btn-active-border-color: var(--border-strong);
}
.btn-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--success-solid);
  --bs-btn-border-color: var(--success-solid);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #085D3A;
  --bs-btn-hover-border-color: #085D3A;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #074D31;
  --bs-btn-active-border-color: #074D31;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #47CD89;
  --bs-btn-disabled-border-color: #47CD89;
}
.btn-outline-success {
  --bs-btn-color: var(--success-fg);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: var(--success-border);
  --bs-btn-hover-color: var(--success-fg);
  --bs-btn-hover-bg: var(--success-bg);
  --bs-btn-hover-border-color: #75E0A7;
  --bs-btn-active-color: #085D3A;
  --bs-btn-active-bg: #DCFAE6;
  --bs-btn-active-border-color: #75E0A7;
}
.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--danger-solid);
  --bs-btn-border-color: var(--danger-solid);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--danger-fg);
  --bs-btn-hover-border-color: var(--danger-fg);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #912018;
  --bs-btn-active-border-color: #912018;
}
/* Peligro suave: acciones destructivas que no son la principal (Borrar,
   Rechazar). Antes el hover se llenaba de rojo y asustaba. */
.btn-outline-danger, .btn-danger-soft {
  --bs-btn-color: var(--danger-fg);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: var(--danger-border);
  --bs-btn-hover-color: var(--danger-fg);
  --bs-btn-hover-bg: var(--danger-bg);
  --bs-btn-hover-border-color: #FDA29B;
  --bs-btn-active-color: #912018;
  --bs-btn-active-bg: #FEE4E2;
  --bs-btn-active-border-color: #FDA29B;
  --bs-btn-disabled-color: #F97066;
  --bs-btn-disabled-bg: #fff;
  --bs-btn-disabled-border-color: var(--danger-border);
}
.btn-danger-soft { --bs-btn-bg: var(--danger-bg); }
.btn-warning {
  --bs-btn-color: var(--text-strong);
  --bs-btn-bg: #FDB022;
  --bs-btn-border-color: #FDB022;
  --bs-btn-hover-color: var(--text-strong);
  --bs-btn-hover-bg: var(--warning-solid);
  --bs-btn-hover-border-color: var(--warning-solid);
  --bs-btn-active-color: var(--text-strong);
  --bs-btn-active-bg: #DC6803;
  --bs-btn-active-border-color: #DC6803;
}

/* ── Etiqueta de estado (.tag) ──
   Un solo componente para «Aprobado», «Por revisar», «Rechazado», etc.
   Los chips anteriores (conv-estado, segui-chip, ficha-estado, dash-pill,
   conv-chip, convl-etiqueta, cvd-estado) se quedan con su nombre pero usan
   estas mismas medidas y colores.
     <span class="tag is-ok"><i class="bi bi-check2"></i> Aprobado</span>
     <span class="tag tag-sm tag-dot is-warn">Por revisar</span> */
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: var(--tag-h); padding: 0 var(--tag-px);
  border: 1px solid var(--neutral-border); border-radius: var(--tag-radius);
  background: var(--neutral-bg); color: var(--neutral-fg);
  font-size: var(--tag-fs); font-weight: var(--tag-fw); line-height: 1.2;
  white-space: nowrap; vertical-align: middle; text-decoration: none;
}
.tag > .bi, .tag > .icon { flex-shrink: 0; font-size: 1.05em; line-height: 1; }
.tag > .icon { width: 1.1em; height: 1.1em; }
.tag-sm { --tag-h: 20px; --tag-px: 8px; }
.tag-dot::before { content: ''; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tag.is-ok      { background: var(--success-bg); color: var(--success-fg); border-color: var(--success-border); }
.tag.is-warn    { background: var(--warning-bg); color: var(--warning-fg); border-color: var(--warning-border); }
.tag.is-danger  { background: var(--danger-bg);  color: var(--danger-fg);  border-color: var(--danger-border); }
.tag.is-info    { background: var(--info-bg);    color: var(--info-fg);    border-color: var(--info-border); }
.tag.is-primary { background: var(--primary-50); color: var(--primary-700); border-color: var(--primary-100); }
.tag.is-neutral { background: var(--neutral-bg); color: var(--neutral-fg); border-color: var(--neutral-border); }

/* ── Insignias de Bootstrap (.badge) ──
   Mismo tamaño mínimo, peso y forma que .tag; los colores salen de las
   variables --bs-* mapeadas a la marca en :root. Antes medían .75em del
   texto que las rodea y en letra chica quedaban en 9-10px. */
.badge {
  --bs-badge-font-size: max(.75em, var(--fs-xs));
  --bs-badge-font-weight: var(--fw-bold);
  --bs-badge-padding-x: .7em;
  --bs-badge-padding-y: .38em;
  --bs-badge-border-radius: var(--radius-pill);
}
/* Sobre el ámbar el texto blanco no se lee (2.3:1): va oscuro, como en
   .btn-warning. Cubre «En revisión» del panel, que arma bg-{{ estado }}. */
.badge.bg-warning { color: var(--text-strong); }

/* ── Tablas ──
   Encabezado chico en mayúsculas sobre gris muy claro, filas separadas por
   una línea suave y el hover con un velo azul de la marca: el mismo
   lenguaje que la tabla de participantes de Convocatorias. */
.table {
  --bs-table-color: var(--text-default);
  --bs-table-border-color: var(--neutral-border);
  --bs-table-striped-bg: rgba(16, 24, 40, .025);
  --bs-table-hover-bg: rgba(var(--primary-rgb), .035);
  --bs-table-hover-color: var(--text-strong);
}
.table > thead > tr > th {
  font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .04em;
}
/* Los botones de una fila no se parten en dos líneas («Revisar y
   Aprobar»): la columna de acciones toma el ancho que necesita. */
.table .btn { white-space: nowrap; }
.table-light {
  --bs-table-color: var(--text-muted);
  --bs-table-bg: #F9FAFB;
  --bs-table-border-color: var(--neutral-border);
  --bs-table-striped-bg: #F2F4F7;
  --bs-table-hover-bg: #F2F4F7;
}
/* En tablas densas los botones chicos se quedan en 34px aunque sea móvil. */
.table { --btn-h-sm: 34px; }

/* ── Avisos, modales, menús, tarjetas ── */
.alert {
  --bs-alert-border-radius: var(--radius-md);
  --bs-alert-padding-y: .8rem;
  font-size: var(--fs-md);
}
.alert-light { --bs-alert-color: var(--text-default); --bs-alert-bg: #fff; --bs-alert-border-color: var(--card-border); }
.modal {
  --bs-modal-border-color: transparent;
  --bs-modal-border-radius: var(--radius-lg);
  --bs-modal-header-border-color: var(--neutral-border);
  --bs-modal-footer-border-color: var(--neutral-border);
}
.modal-content { box-shadow: var(--shadow-lg); }
.modal-title { font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--text-heading); }
.dropdown-menu {
  --bs-dropdown-border-color: var(--neutral-border);
  --bs-dropdown-border-radius: var(--radius-md);
  --bs-dropdown-link-color: var(--text-default);
  --bs-dropdown-link-hover-color: var(--text-strong);
  --bs-dropdown-link-hover-bg: var(--primary-50);
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-link-active-bg: var(--primary);
  --bs-dropdown-font-size: var(--fs-md);
  box-shadow: var(--shadow-md);
}
.card {
  --bs-card-border-color: var(--card-border);
  --bs-card-border-radius: var(--radius-md);
  --bs-card-cap-bg: #F9FAFB;
}
.list-group { --bs-list-group-active-bg: var(--primary); --bs-list-group-active-border-color: var(--primary); }
.progress { --bs-progress-bar-bg: var(--primary); }

/* ── Pestañas y píldoras de navegación ──
   Las pestañas del panel (Solicitudes, Usuarios…) salían con el azul
   eléctrico de Bootstrap. */
.nav-pills {
  --bs-nav-pills-border-radius: var(--radius-pill);
  --bs-nav-pills-link-active-bg: var(--primary);
  --bs-nav-pills-link-active-color: #fff;
}
.nav-pills .nav-link { color: var(--text-default); font-weight: var(--fw-semibold); }
.nav-pills .nav-link:not(.active):hover { color: var(--primary-800); background: var(--primary-50); }
.nav-pills .nav-link.active { color: #fff; }
.nav-tabs {
  --bs-nav-tabs-border-color: var(--neutral-border);
  --bs-nav-tabs-link-hover-border-color: transparent transparent var(--neutral-border);
  --bs-nav-tabs-link-active-color: var(--primary-800);
  --bs-nav-tabs-link-active-bg: transparent;
  --bs-nav-tabs-link-active-border-color: transparent transparent var(--primary);
}
.nav-tabs .nav-link { color: var(--text-muted); font-weight: var(--fw-semibold); border-width: 0 0 2px; margin-bottom: -1px; }
.nav-tabs .nav-link:hover { color: var(--primary-800); }
.nav-tabs .nav-link.active { border-bottom-color: var(--primary); }

/* ── Utilidades ──
   Para no escribir style="…" en las plantillas (el panel tenía más de
   cien). Llevan !important como las de Bootstrap. */
.text-xs   { font-size: var(--fs-xs) !important; }
.text-sm   { font-size: var(--fs-sm) !important; }
.text-md   { font-size: var(--fs-md) !important; }
.text-base { font-size: var(--fs-base) !important; }
.text-lg   { font-size: var(--fs-lg) !important; }
.text-xl   { font-size: var(--fs-xl) !important; }
.text-strong  { color: var(--text-strong) !important; }
.text-default { color: var(--text-default) !important; }
.text-soft    { color: var(--text-muted) !important; }
.fw-semibold-ui { font-weight: var(--fw-semibold) !important; }
.measure   { max-width: 70ch; }
.text-pre  { white-space: pre-wrap; }
/* Punto de estado (bi-circle-fill) junto a un texto: es decorativo, el
   estado lo dice el texto de al lado. */
.icon-dot  { font-size: 8px; vertical-align: middle; }
.field-w-sm { max-width: 170px; }
.field-w-md { max-width: 260px; }
.field-w-lg { max-width: 320px; }
.surface {
  background: var(--surface); border: 1px solid var(--card-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}

/* ── Móvil ──
   iPhone acerca la página al enfocar un campo con letra de menos de 16px y
   no la devuelve: en pantallas chicas todos los campos van a 16px. Lleva
   !important porque los buscadores del sitio fijan su tamaño con selectores
   más específicos. Los botones chicos suben a 40px para el dedo (salvo en
   tablas, ver .table arriba). */
@media (max-width: 767.98px) {
  :root { --btn-h-sm: 40px; }
  :is(textarea, select, .form-control, .form-select, input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="submit"], [type="button"], [type="image"], [type="color"])) { font-size: 16px !important; }
}

/* ── 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 {
  /* Misma barra en todo el sitio: navy translúcido con desenfoque, de modo
     que el contenido que pasa por debajo al hacer scroll se insinúe a
     través suyo. Sin foto detrás el tono va más opaco (.82) para que el
     texto blanco conserve contraste sobre páginas claras. */
  background: linear-gradient(135deg, rgba(11, 45, 99, .92) 0%, rgba(10, 38, 71, .92) 100%);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  /* Sin borde inferior: sobre la foto del buscador se veía como una raya
     clara entre la barra y la imagen. La sombra ya la separa del resto. */
  border-bottom: 0;
  box-shadow: 0 2px 12px rgba(10, 38, 71, .18);
  padding-top: 14px;
  padding-bottom: 14px;
}
.navbar-brand {
  flex: 0 0 auto;
  margin-right: 0;
}
.navbar-brand-logo {
  display: block;
  width: auto;
  height: 46px;
  object-fit: contain;
}
/* En el directorio, la búsqueda toma el lugar del antiguo botón de acceso.
   Se mantiene compacta para dejar aire al logo y a las acciones de cuenta. */
.navbar-search {
  flex: 1 1 420px;
  min-width: 240px;
  max-width: 560px;
  margin: 0 clamp(18px, 3vw, 46px);
}
.navbar-search .search-bar {
  height: 44px;
  padding: 0 5px 0 17px;
  gap: 10px;
  border-color: rgba(255,255,255,.38);
  box-shadow: 0 5px 16px rgba(4, 24, 54, .18);
}
.navbar-search .search-bar-input {
  height: 42px;
  font-size: var(--fs-md);
}
.navbar-search .search-bar-btn {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
}
.navbar-search .search-bar-btn .icon { width: 16px; height: 16px; }
.navbar-search [data-autocomplete-dropdown] {
  min-width: min(390px, 80vw);
  text-align: left;
}
/* En escritorio, logo, búsqueda y navegación comparten una sola fila. Los
   enlaces de trabajo (Registro, Panel Admin, etc.) quedan en el bloque de la
   derecha junto a la cuenta, nunca debajo del buscador. */
@media (min-width: 992px) {
  .directory-navbar .container {
    display: grid;
    grid-template-columns: auto minmax(220px, 1fr) auto;
    column-gap: clamp(12px, 1.6vw, 24px);
    align-items: center;
  }
  .directory-navbar .navbar-brand-logo { height: 40px; }
  .directory-navbar .navbar-brand {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }
  .directory-navbar .navbar-search {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    max-width: 680px;
    margin: 0;
    justify-self: center;
  }
  /* En escritorio el buscador va más largo y un poco más alto. La barra no
     crece por eso: el logo con su padding ya ocupa esos 50px. */
  .navbar-search .search-bar { height: 50px; padding: 0 5px 0 20px; }
  .navbar-search .search-bar-input { height: 48px; font-size: var(--fs-base); }
  .navbar-search .search-bar-btn { width: 40px; height: 40px; flex-basis: 40px; }
  .navbar-search .search-bar-btn .icon { width: 18px; height: 18px; }
  .directory-navbar .navbar-right {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-self: end;
    width: max-content;
  }
  .directory-navbar .navbar-collapse {
    display: flex !important;
    align-items: center;
  }
  .directory-navbar .navbar-primary-links {
    flex-direction: row;
    margin: 0 !important;
    align-items: center;
  }
  .directory-navbar .navbar-account-links {
    flex-direction: row;
    margin-left: 8px !important;
  }
  .directory-navbar .navbar-primary-links .nav-link {
    padding-inline: .72rem;
    font-size: var(--fs-sm);
  }
  /* En una sesión de comprador, las columnas laterales pesan lo mismo: el
     buscador queda centrado respecto al viewport aunque logo y cuenta tengan
     anchos distintos. Las acciones propias del comprador siguen a la derecha. */
  .directory-navbar.buyer-navbar .container {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 680px) minmax(0, 1fr);
  }
}
@media (max-width: 1199.98px) and (min-width: 992px) {
  .directory-navbar .navbar-brand-logo { height: 36px; }
  .directory-navbar .navbar-search { max-width: 480px; }
  .directory-navbar .navbar-primary-links .nav-link { padding-inline: .55rem; }
  .directory-navbar.buyer-navbar .container {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 480px) minmax(0, 1fr);
  }
}
@media (max-width: 991.98px) {
  .minder-navbar { padding-block: 10px; }
  /* La grilla hace determinista el encabezado móvil: el logo y el botón de
     opciones siempre comparten la primera fila; búsqueda y menú usan todo
     el ancho debajo, sin depender del wrapping interno de Bootstrap. */
  .minder-navbar .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    column-gap: 10px;
    width: 100%;
  }
  /* Sus hijos se ubican directo en la grilla del encabezado. */
  .minder-navbar .navbar-right { display: contents; }
  .minder-navbar .navbar-brand {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    justify-self: start;
  }
  .navbar-brand-logo {
    width: auto;
    max-width: 100%;
    height: 40px;
  }
  .minder-navbar .navbar-toggler {
    grid-column: 3;
    grid-row: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0;
    border-radius: var(--radius-md);
    background: rgba(255,255,255,.08);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  }
  .minder-navbar .navbar-toggler:focus {
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.38), 0 0 0 3px rgba(133,170,214,.22);
  }
  .navbar-search {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    flex: none;
    min-width: 0;
    max-width: none;
    margin: 9px 0 0;
  }
  .minder-navbar .navbar-collapse {
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
    min-width: 0;
  }
  .minder-navbar .navbar-collapse.show,
  .minder-navbar .navbar-collapse.collapsing {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,.14);
  }
  /* Enlaces de trabajo dentro del ☰: filas a todo el ancho. */
  .minder-navbar .navbar-primary-links {
    width: 100%;
    margin: 0 !important;
    align-items: stretch !important;
    gap: 4px;
  }
  .minder-navbar .navbar-primary-links .nav-item,
  .minder-navbar .navbar-primary-links .nav-link { width: 100%; }
  .minder-navbar .navbar-primary-links .nav-link {
    min-height: 44px;
    justify-content: flex-start;
    margin: 0 !important;
    padding-inline: 14px;
    border-radius: var(--radius-md);
  }
  .minder-navbar .navbar-primary-links .dropdown-menu {
    position: static;
    width: 100%;
    min-width: 0;
    margin-top: 5px !important;
  }
  /* Botones de cuenta: arriba a la derecha, igual que en la PC. */
  .minder-navbar .navbar-account-links {
    grid-column: 2;
    grid-row: 1;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    margin: 0 !important;
  }
  .minder-navbar .navbar-account-links > .nav-item { margin: 0 !important; }
  .minder-navbar .navbar-account-links .navbar-cta,
  .minder-navbar .navbar-account-links .navbar-register {
    height: 38px;
    padding: 0 12px;
    font-size: var(--fs-sm);
    margin: 0 !important;
  }
  .minder-navbar .navbar-account-links .navbar-user-pill {
    padding: 2px !important;
    margin: 0 !important;
  }
  .minder-navbar .navbar-account-links .navbar-user-pill.dropdown-toggle::after { display: none; }
  /* Los menús de cuenta (Registrarse, campanita, avatar) se abren bajo la
     cabecera y a lo ancho de la pantalla: anclados al botón se salían por
     el costado izquierdo en un celular. El .sticky-top es su referencia. */
  .minder-navbar .navbar-account-links .dropdown { position: static; }
  .minder-navbar .navbar-account-links .dropdown-menu {
    position: absolute;
    top: calc(100% - 4px);
    left: 12px;
    right: 12px;
    width: auto;
    min-width: 0 !important;
    margin: 0 !important;
  }
}
/* Celular angosto: los dos botones de visitante siguen con texto, solo sin
   el ícono, y el logo se achica para que todo entre en una fila. */
@media (max-width: 575.98px) {
  .minder-navbar .navbar-guest-links .navbar-cta > .icon,
  .minder-navbar .navbar-account-links .navbar-register > .icon { display: none; }
  .minder-navbar .navbar-account-links .navbar-cta,
  .minder-navbar .navbar-account-links .navbar-register {
    height: 34px;
    padding: 0 10px;
    font-size: var(--fs-sm);
  }
  .minder-navbar .navbar-account-links .navbar-register.dropdown-toggle::after { margin-left: .1rem; }
}
@media (max-width: 480px) {
  .minder-navbar { padding-block: 8px; }
  .minder-navbar .container { column-gap: 8px; }
  .navbar-brand-logo { height: 34px; }
  .minder-navbar .navbar-toggler { width: 40px; height: 40px; }
  .navbar-search { margin-top: 8px; }
  .navbar-search .search-bar { height: 42px; padding: 0 4px 0 13px; gap: 7px; }
  .navbar-search .search-bar-input { height: 40px; font-size: var(--fs-sm); }
  .navbar-search .search-bar-btn { width: 32px; height: 32px; flex-basis: 32px; }
  .navbar-search .search-bar { padding-left: 14px; }
  .navbar-search .search-bar > .icon { display: none; }
  .navbar-search [data-autocomplete-dropdown] {
    left: -14px;
    width: calc(100vw - 24px);
    min-width: 0;
    max-width: calc(100vw - 24px);
  }
}
.brand-name {
  font-family: var(--font-sans);
  font-size: var(--fs-3xl);
  font-weight: 800;
  letter-spacing: .03em;
  color: #fff;
}
.brand-icon {
  font-size: var(--fs-3xl);
  filter: drop-shadow(0 0 4px rgba(81,111,169,.6));
}
.brand-sub {
  font-size: var(--fs-xs);
  color: rgba(255,255,255,.45);
  margin-top: 2px;
}
.minder-navbar .nav-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: rgba(255,255,255,.72);
  font-weight: 600;
  font-size: var(--fs-md);
  letter-spacing: .01em;
  padding: .5rem 1.1rem;
  margin: 0 .15rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
.minder-navbar .nav-link i,
.minder-navbar .nav-link .icon { color: var(--gold); font-size: var(--fs-base); }
.minder-navbar .nav-link:hover { color: #fff; background: rgba(255,255,255,.06); }
/* La página actual usa la misma píldora con borde que "Ingresar", para
   que los enlaces del menú y los botones de la derecha hablen igual. */
.minder-navbar .nav-link.active {
  color: #fff;
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.28);
}

/* "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: var(--radius-pill);
  padding: .5rem 1.1rem;
}

/* "Registrarse" del navbar: la acción principal, en blanco con texto navy
   -- la misma píldora blanca del buscador de la portada --, para que se
   destaque sobre la barra navy (en navy sobre navy se perdía). Abre un
   menú claro con las dos puertas. */
.navbar-register {
  display: inline-flex; align-items: center; gap: 7px;
  padding: .5rem 1.15rem; border-radius: var(--radius-pill);
  background: #fff;
  border: 1px solid #fff;
  color: var(--navy) !important; font-weight: 700; font-size: var(--fs-base); text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
  transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.navbar-register .icon { width: 16px; height: 16px; stroke-width: 2.2; color: var(--navy-mid); }
.navbar-register:hover,
.navbar-register[aria-expanded="true"] {
  background: var(--gold-pale); border-color: var(--gold-pale);
  box-shadow: 0 0 0 3px rgba(133, 170, 214, .35), 0 6px 18px rgba(0, 0, 0, .25);
  transform: translateY(-1px);
}
.navbar-register.dropdown-toggle::after { margin-left: .15rem; opacity: .7; }
.navbar-guest-links { gap: 8px; }
.navbar-register-menu {
  min-width: 300px; padding: 6px; margin-top: 10px !important;
  border: 1px solid var(--card-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.navbar-register-menu .dropdown-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-md);
  white-space: normal; color: var(--text-title);
}
.navbar-register-menu .dropdown-item:hover, .navbar-register-menu .dropdown-item:focus { background: var(--gray-bg); color: var(--text-title); }
.navbar-register-menu .dropdown-item strong { display: block; font-size: var(--fs-md); font-weight: 600; }
.navbar-register-menu .dropdown-item small { display: block; font-size: var(--fs-xs); color: var(--text-body); }
.navbar-register-ico {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--radius-md);
  background: var(--gold-pale); color: var(--navy-light);
  display: inline-flex; align-items: center; justify-content: center;
}
.navbar-register-ico .icon { width: 17px; height: 17px; }

/* Tooltips instantáneos (static/js/tooltips.js): globo navy chico con
   flecha, encima del elemento (o debajo si arriba no hay lugar). */
.minder-tip {
  position: fixed; z-index: 2000; max-width: 260px; padding: 6px 10px;
  border-radius: var(--radius-sm); background: var(--navy); color: #fff;
  font-size: var(--fs-sm); font-weight: 600; line-height: 1.35; letter-spacing: .1px;
  box-shadow: 0 6px 18px rgba(6, 20, 40, .28); pointer-events: none;
  animation: minder-tip-in .08s ease-out both;
}
.minder-tip[hidden] { display: none; }
.minder-tip::after {
  content: ""; position: absolute; left: var(--tip-flecha, 50%); bottom: -5px;
  width: 10px; height: 10px; background: var(--navy); transform: translateX(-50%) rotate(45deg);
  border-radius: 2px;
}
.minder-tip.is-abajo::after { bottom: auto; top: -5px; }
@keyframes minder-tip-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .minder-tip { animation: none; } }

/* Menú de la cuenta (el avatar de la barra): misma tarjeta que el menú de
   "Registrarse", con cabecera de quién está conectado y salida separada. */
.navbar-user-menu {
  min-width: 290px; padding: 6px; margin-top: 10px !important;
  border: 1px solid var(--card-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.navbar-user-menu-head {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px 12px;
  border-bottom: 1px solid var(--gray-bg); margin-bottom: 6px;
}
.navbar-user-menu-head .user-avatar { width: 40px; height: 40px; font-size: var(--fs-md); flex-shrink: 0; }
.navbar-user-menu-who { min-width: 0; }
.navbar-user-menu-who strong { display: block; font-size: var(--fs-md); font-weight: 700; color: var(--text-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.navbar-user-menu-who small { display: block; font-size: var(--fs-xs); color: var(--text-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.navbar-user-menu .dropdown-item {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--radius-md);
  white-space: normal; color: var(--text-title); background: transparent; border: 0; width: 100%; text-align: left;
}
.navbar-user-menu .dropdown-item:hover, .navbar-user-menu .dropdown-item:focus { background: var(--gray-bg); color: var(--text-title); }
.navbar-user-menu .dropdown-item strong { display: block; font-size: var(--fs-md); font-weight: 600; }
.navbar-user-menu .dropdown-item small { display: block; font-size: var(--fs-xs); color: var(--text-body); }
.navbar-user-menu .navbar-register-ico .bi { font-size: var(--fs-lg); line-height: 1; }
.navbar-user-menu .dropdown-divider { margin: 6px 0; border-color: var(--gray-bg); opacity: 1; }
.navbar-user-menu-salir .navbar-register-ico { background: #fdecec; color: var(--danger-fg); }
.navbar-user-menu-salir:hover, .navbar-user-menu-salir:focus { background: #fdecec; }
.navbar-user-menu-salir:hover strong { color: var(--danger-fg); }

/* 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: var(--radius-pill);
  /* Vidrio translúcido, como las pastillas de la banda de los registros. */
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff !important;
  font-weight: 600;
  font-size: var(--fs-md);
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.navbar-cta:hover {
  background: rgba(255,255,255,.14);
  border-color: rgba(168, 196, 227, .6);
  transform: translateY(-1px);
}
.navbar-cta .icon { width: 16px; height: 16px; stroke-width: 2; color: var(--gold); }

/* Solo la inicial o la foto (y la flechita); nombre y correo en el title. */
.navbar-user-pill {
  padding: .3rem .6rem .3rem .3rem !important;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.22);
  margin: 0 !important;
}
.navbar-user-pill:hover {
  background: rgba(255,255,255,.14);
  border-color: rgba(168, 196, 227, .6);
}

.navbar-icon-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  /* Vidrio translúcido con borde claro, igual que "Ingresar" y la
     píldora del usuario: todos los botones de la barra hablan igual. */
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  font-size: var(--fs-lg);
  margin-inline: 3px;
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.navbar-icon-btn:hover,
.navbar-icon-btn[aria-expanded="true"] { background: rgba(255,255,255,.14); border-color: rgba(168, 196, 227, .6); color: #fff; transform: translateY(-1px); }
/* Burbuja con las convocatorias abiertas en el botón de la barra (el mismo
   botón con texto para visitantes y con sesión). .navbar-quote-count es el
   nombre histórico de la burbuja (venía del botón de cotización, retirado). */
.navbar-conv-btn { position: relative; }
/* Mensajes del registro, solo staff (2026-10-19): ícono redondo con su número. */
.navbar-mensajes-btn { position: relative; }
.navbar-conv-count { top: -7px; right: -7px; }
.navbar-icon-btn.navbar-conv-count, .navbar-icon-btn .navbar-conv-count { top: -5px; right: -6px; }
.navbar-quote-count {
  position: absolute; top: -5px; right: -6px;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--star); color: #1f1300; font-size: var(--fs-xs); font-weight: var(--fw-bold); line-height: 1;
  border: 2px solid var(--navy); box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
.navbar-quote-count[hidden] { display: none; }
/* La entrada anima `translate` y no `transform` (2026-10-15): Bootstrap
   (Popper) ubica el menú con un `transform` en línea, y una animación sobre
   `transform` lo pisaba -- el menú dejaba de correrse para entrar en la
   pantalla y en celular se cortaba por un costado (el «Más» de la barra de
   staff). `translate` es otra propiedad y se suma a la de Popper. */
.dropdown-menu.show {
  animation: dropdown-in .18s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes dropdown-in {
  from { opacity: 0; translate: 0 -6px; }
  to   { opacity: 1; translate: 0 0; }
}

.navbar-notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: var(--radius-pill);
  /* Rojo y no dorado: el dorado es el color de marca y se usa en botones y
     acentos por toda la interfaz, así que el badge se confundía con el
     resto. El rojo dice "hay algo nuevo sin leer" y no compite con nada. */
  background: var(--danger-solid);
  color: #fff;
  /* Aro navy: separa el badge del círculo blanco del botón. */
  box-shadow: 0 0 0 2px var(--navy-light);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.buyer-notif-badge { animation: buyer-notif-pulse 1.8s ease-in-out infinite; }
@keyframes buyer-notif-pulse {
  0%, 55%, 100% { transform: scale(1); box-shadow: 0 0 0 2px var(--navy-light), 0 0 0 0 rgba(217, 45, 32, .5); }
  72% { transform: scale(1.08); box-shadow: 0 0 0 2px var(--navy-light), 0 0 0 7px rgba(217, 45, 32, 0); }
}

/* Página de notificaciones del comprador (suppliers/notificaciones.html),
   al estilo del feed de LinkedIn/Facebook: filas con avatar, texto, hora
   relativa y miniatura; las no leídas en celeste con punto azul; al
   tocarlas se despliegan. */
.container.nt-page { max-width: 760px; }
.nt-feed { overflow: hidden; border: 1px solid var(--card-border); border-radius: var(--radius-lg); background: #fff; box-shadow: 0 1px 3px rgba(16, 24, 40, .06); }
.nt-feed-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 6px; }
.nt-feed-head h1 { margin: 0; font-size: var(--fs-3xl); font-weight: var(--fw-bold); color: var(--text-title); }
.nt-feed-count { padding: 3px 10px; border-radius: var(--radius-pill); background: #e7f0ff; color: #0857a5; font-size: var(--fs-sm); font-weight: 700; }
.nt-group { margin: 0; padding: 12px 20px 6px; font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--text-title); }
.nt-list { margin: 0; padding: 0 8px 8px; list-style: none; }
.nt-item { position: relative; border-radius: var(--radius-lg); transition: background .15s; }
.nt-item + .nt-item, .nt-list > li + li .nt-item { margin-top: 2px; }
.nt-item.is-nueva { background: #edf3fd; }
.nt-row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--radius-lg); cursor: pointer; list-style: none; }
.nt-row::-webkit-details-marker { display: none; }
.nt-row:hover { background: rgba(10, 38, 71, .05); }
.nt-row:focus-visible { outline: 2px solid var(--navy-mid); outline-offset: -2px; }
.nt-avatar { position: relative; display: inline-flex; flex-shrink: 0; width: 52px; height: 52px; }
.nt-avatar img { width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 2px 6px rgba(11, 45, 99, .25); }
.nt-avatar-badge { position: absolute; right: -3px; bottom: -3px; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--star); color: #fff; font-size: var(--fs-xs); box-shadow: 0 0 0 2px #fff; }
.nt-body { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.nt-text { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; font-size: var(--fs-base); line-height: 1.4; color: var(--text-paragraph); overflow-wrap: anywhere; }
.nt-text strong { color: var(--text-title); }
.nt-time { font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); }
.nt-item.is-nueva .nt-time { color: #0857a5; }
.nt-thumb { flex-shrink: 0; width: 64px; height: 64px; overflow: hidden; border-radius: var(--radius-md); border: 1px solid var(--card-border); background: var(--gray-bg); }
.nt-thumb img { width: 100%; height: 100%; object-fit: cover; }
.nt-dot { flex-shrink: 0; width: 12px; height: 12px; border-radius: 50%; background: #0857a5; }
.nt-item[open] .nt-thumb { display: none; }
.nt-item[open] .nt-snippet { display: none; }
.nt-detail { padding: 0 12px 14px 76px; }
.nt-visual { overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--card-border); background: var(--gray-bg); }
.nt-visual img { display: block; width: 100%; max-height: 70vh; object-fit: contain; }
.nt-full { margin: 12px 0 0; font-size: var(--fs-base); line-height: 1.6; color: var(--text-paragraph); overflow-wrap: anywhere; }
.nt-visual + .nt-full { margin-top: 12px; }
.nt-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
.nt-date { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-muted); }
.nt-link { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: var(--btn-radius); background: var(--btn-primary-bg); color: #fff; font-size: var(--fs-sm); font-weight: 700; text-decoration: none; }
.nt-link:hover { color: #fff; background: var(--btn-primary-bg-hover); }
.nt-empty { padding: 40px 24px 48px; text-align: center; }
.nt-empty-ico { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--gold-pale); color: var(--navy-mid); font-size: var(--fs-3xl); }
.nt-empty h2 { margin: 14px 0 6px; font-size: var(--fs-xl); font-weight: 700; color: var(--text-title); }
.nt-empty p { margin: 0; font-size: var(--fs-md); color: var(--text-muted); }
@media (max-width: 575.98px) {
  .nt-feed { border-radius: var(--radius-lg); }
  .nt-avatar { width: 44px; height: 44px; }
  .nt-thumb { width: 52px; height: 52px; }
  .nt-detail { padding-left: 12px; }
}
.buyer-notification-thumb {
  width: 76px;
  height: 52px;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--card-border);
  background: var(--gray-bg);
}

@media (prefers-reduced-motion: reduce) {
  .buyer-notif-badge { animation: none; }
}

.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: var(--fs-xs);
  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: var(--font-sans);
  font-size: var(--fs-5xl);
  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: var(--fs-xs);
  font-weight: 700;
  flex-shrink: 0;
}

/* ── Buttons ──
   Colores, forma y alto de .btn-navy / .btn-outline-navy salen de
   «Sistema de diseño: componentes» (arriba). Hasta el 2026-10-13
   .btn-navy era un degradado sin borde, 2px más bajo que los demás. */
.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); }

/* «Gold» es el celeste de la marca: fondo claro con texto navy. */
.btn-gold {
  --bs-btn-color: var(--gold-ink);
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-color: var(--gold-ink);
  --bs-btn-hover-bg: var(--gold-light);
  --bs-btn-hover-border-color: var(--gold-light);
  --bs-btn-active-color: var(--gold-ink);
  --bs-btn-active-bg: var(--gold-light);
  --bs-btn-active-border-color: var(--gold-light);
}
.btn-outline-gold {
  --bs-btn-color: var(--gold-dark);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-color: var(--gold-ink);
  --bs-btn-hover-bg: var(--accent);
  --bs-btn-hover-border-color: var(--accent);
}

/* ── Footer ── */
/* Mismo acabado que la barra superior: degradado azul translúcido con
   desenfoque y borde celeste tenue (sin la franja gruesa de antes). */
.minder-footer {
  background: linear-gradient(135deg, rgba(11, 45, 99, .92) 0%, rgba(10, 38, 71, .92) 100%);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-top: 1px solid rgba(133, 170, 214, .3);
  box-shadow: 0 -2px 12px rgba(10, 38, 71, .18);
  margin-top: auto;
}

/* Stats bar */
.footer-stats {
  padding: 2rem 0 1rem;
}
.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: var(--font-sans);
  font-size: 2.2rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  margin-bottom: .4rem;
}
.footer-stat-label {
  font-size: var(--fs-sm);
  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: 44px;
  width: auto;
  object-fit: contain;
  display: block;
}
.footer-brand-text {
  font-size: var(--fs-md);
  color: #B0BEC8;
  line-height: 1.65;
  margin: 0;
}
.footer-col-title {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  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: var(--fs-md);
  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: var(--fs-sm);
  color: #B0BEC8;
  text-decoration: none;
  padding: .3rem .75rem;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-pill);
  transition: color .15s, border-color .15s;
}
.footer-categories-list a:hover {
  color: var(--gold);
  border-color: var(--gold);
}

/* Bottom bar */
.footer-bottom {
  padding: 1rem 0;
}
.footer-bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  font-size: var(--fs-sm);
  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); }
}

/* ── Inicio de sesión y registros (rediseño) ──
   Mismo lenguaje que la ficha y el directorio: tarjetas blancas con borde
   tenue y radio 10px, títulos Inter con letter-spacing negativo, etiquetas
   en mayúsculas pequeñas y botones navy en degradado (igual que el botón
   del buscador). Los estilos son compartidos por la tarjeta de inicio de
   sesión (includes/_login_gate.html), register_buyer.html y
   suppliers/register.html para que las pantallas se lean como una sola. */

/* Campos: foco navy suave en vez del azul de Bootstrap. */
.teaser-login .form-control,
.teaser-login .form-select,
.reg-page .form-control,
.reg-page .form-select {
  border-color: var(--card-border);
  border-radius: var(--radius-md);
  min-height: 44px;
  padding: .55rem .9rem;
  font-size: var(--fs-base);
  color: var(--text-title);
  transition: border-color .15s, box-shadow .15s;
}
.teaser-login .form-control:focus,
.teaser-login .form-select:focus,
.reg-page .form-control:focus,
.reg-page .form-select:focus {
  border-color: var(--navy-light);
  box-shadow: var(--focus-ring);
}
.reg-page textarea.form-control { min-height: 110px; }
.reg-page .form-control:not(:focus):not(.is-invalid),
.reg-page .form-select:not(:focus):not(.is-invalid) { background-color: #FAFBFD; }
.reg-page .form-control:hover:not(:focus),
.reg-page .form-select:hover:not(:focus) { border-color: #C7D3E3; }
.teaser-login .form-label,
.reg-page .form-label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-title);
  margin-bottom: .35rem;
}
.reg-page .form-label .text-danger { font-weight: 600; }
/* En los desplegables, la opción vacía ("Año...") va en gris como un
   placeholder hasta que se elige algo. */
.reg-page .reg-section-body .form-select:has(option[value=""]:checked) { color: rgba(16, 24, 40, 0.45); }
.reg-page .reg-section-body .form-select option { color: var(--text-title); }
.teaser-login .form-text,
.reg-page .form-text { font-size: var(--fs-sm); color: var(--text-muted); }
.invalid-msg { color: var(--danger-solid); font-size: var(--fs-sm); margin-top: .3rem; font-weight: 500; }
.teaser-login .form-check-input:checked,
.reg-page .form-check-input:checked,
.conv-form .form-check-input:checked { background-color: var(--navy-light); border-color: var(--navy-light); }
.teaser-login .form-check-input:focus,
.reg-page .form-check-input:focus { border-color: var(--navy-light); box-shadow: var(--focus-ring); }

/* Botón principal: degradado navy, mismo acabado que .search-bar-btn. */
.auth-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: var(--btn-h-lg); padding: 0 22px; border: none; border-radius: var(--btn-radius);
  background: var(--btn-primary-bg);
  color: #fff; font-family: var(--font-sans); font-size: var(--fs-base); font-weight: 600;
  letter-spacing: .01em; cursor: pointer; text-decoration: none;
  transition: filter .15s;
}
.auth-btn:hover { color: #fff; background: var(--btn-primary-bg-hover); }
.auth-btn:active { filter: brightness(.95); }
.auth-btn .icon { width: 17px; height: 17px; stroke-width: 2; }
.auth-btn-auto { width: auto; min-width: 220px; }
.auth-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--btn-h-lg); padding: 0 20px; border-radius: var(--btn-radius); background: #fff;
  border: 1px solid var(--btn-secondary-border); color: var(--btn-secondary-fg);
  font-size: var(--fs-base); font-weight: 600; text-decoration: none; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.auth-btn-ghost:hover { border-color: var(--btn-secondary-hover-border); color: var(--primary-800); background: var(--btn-secondary-hover-bg); }
.auth-btn-ghost .icon { width: 16px; height: 16px; }
.auth-btn-sm { height: var(--btn-h-sm); padding: 0 14px; font-size: var(--fs-sm); }
.auth-btn-sm .bi { font-size: var(--fs-md); }

/* ── Login ── */
.auth-shell { width: 100%; max-width: 440px; }
/* Página de inicio de sesión (diseño registro-vs7): una sola tarjeta
   blanca centrada, sin candado ni fondo difuminado, con el formulario, el
   separador y las dos puertas de registro en fila. */
.auth-login-page { display: flex; justify-content: center; padding: 60px 20px; }
.auth-card {
  width: 100%; max-width: 620px; padding: 44px 48px; text-align: center;
  background: #fff; border-radius: var(--radius-lg); box-shadow: 0 10px 25px rgba(0, 0, 0, .05);
}
/* Tipografía de la tarjeta: tres tamaños (24 título, 14 texto y campos,
   13 enlaces y notas) y tres pesos (400, 600 y 700), nada más. */
.auth-card-title { font-size: var(--fs-3xl); font-weight: 700; letter-spacing: -0.3px; margin: 0 0 10px; }
.auth-card-text { font-size: var(--fs-md); font-weight: 400; color: var(--text-muted); margin: 0 0 30px; }
.auth-card-form { max-width: 460px; margin: 0 auto; }
.auth-card-form .teaser-login { gap: 15px; }
.auth-card-form .teaser-login .form-control {
  height: 50px; border-radius: var(--radius-md); padding-left: 45px;
}
.auth-card-form .auth-btn { height: var(--btn-h-lg); font-size: var(--fs-md); font-weight: 600; border-radius: var(--btn-radius); margin-top: 0; }
.auth-card-form .teaser-login-links { justify-content: flex-start; font-size: var(--fs-sm); font-weight: 400; margin-top: 0; }
.auth-card-form .teaser-login-links a { color: var(--navy-light); }
.auth-card .auth-divider { margin: 40px 0 25px; font-size: var(--fs-sm); font-weight: 600; letter-spacing: .5px; }
.auth-card .auth-alt { gap: 15px; margin-bottom: 30px; max-width: 520px; margin-left: auto; margin-right: auto; }
.auth-card .auth-alt-card { padding: 15px; gap: 0; text-align: left; }
.auth-alt-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.auth-card .auth-alt-icon { width: 28px; height: 28px; border-radius: var(--radius-sm); margin-bottom: 0; }
.auth-card .auth-alt-icon .icon { width: 14px; height: 14px; }
.auth-card .auth-alt-title { font-size: var(--fs-md); font-weight: 600; }
.auth-card .auth-alt-text { font-size: var(--fs-sm); font-weight: 400; }
.auth-card .auth-foot { margin-top: 0; font-size: var(--fs-sm); font-weight: 400; }
.auth-card .auth-foot a { font-weight: 600; }
@media (max-width: 576px) {
  .auth-login-page { padding: 24px 12px 40px; }
  .auth-card { padding: 26px 20px; }
  .auth-card-title { font-size: var(--fs-3xl); }
  .auth-card-form .teaser-login-links { justify-content: flex-start; }
}
.auth-input { position: relative; }
.auth-input > .icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--text-muted); pointer-events: none; transition: color .15s;
}
.auth-input:focus-within > .icon { color: var(--navy); }
.auth-input .form-control { padding-left: 42px; }
/* Campo de contraseña sin ícono a la izquierda (el ojo solo): nueva
   contraseña, baja de cuenta y lo que password-toggle.js complete al cargar. */
.auth-input.is-sin-icono .form-control { padding-left: .75rem; }
.auth-input .form-control[type="password"],
.auth-input .form-control[data-password] { padding-right: 44px; }
.auth-eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border: none; border-radius: var(--radius-md); background: transparent;
  color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .15s, color .15s;
}
.auth-eye:hover { background: var(--gray-bg); color: var(--navy); }
.auth-eye .icon { width: 17px; height: 17px; }
.auth-alert {
  display: flex; align-items: flex-start; gap: 10px;
  background: #fff5f5; border: 1px solid #fecaca; color: var(--danger-fg);
  border-radius: var(--radius-md); padding: 10px 12px; font-size: var(--fs-sm); font-weight: 500; margin-bottom: 16px;
}
.auth-alert .icon { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.auth-divider {
  display: flex; align-items: center; gap: 12px; margin: 22px 0 14px;
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .7px; color: var(--text-muted); font-weight: 600;
}
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--card-border); }
.auth-alt { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.auth-alt-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 14px 12px; border-radius: var(--radius-md); text-decoration: none;
  border: 1px solid var(--card-border); background: #fff;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.auth-alt-card:hover { border-color: var(--navy-light); background: var(--gold-pale); }
.auth-alt-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--radius-md); margin-bottom: 6px;
  background: var(--gold-pale); color: var(--gold-dark);
}
.auth-alt-icon .icon { width: 17px; height: 17px; }
.auth-alt-title { font-size: var(--fs-md); font-weight: 600; color: var(--text-title); display: flex; align-items: center; gap: 4px; }
.auth-alt-title .icon { width: 13px; height: 13px; color: var(--text-muted); transition: transform .15s, color .15s; }
.auth-alt-card:hover .auth-alt-title .icon { transform: translateX(2px); color: var(--navy); }
.auth-alt-text { font-size: var(--fs-xs); color: var(--text-body); line-height: 1.45; }
.auth-foot { text-align: center; margin-top: 18px; font-size: var(--fs-sm); color: var(--text-muted); }
.auth-foot a { color: var(--gold-dark); text-decoration: none; font-weight: 500; }
.auth-foot a:hover { color: var(--navy); text-decoration: underline; }
@media (max-width: 480px) {
  .auth-alt { grid-template-columns: 1fr; }
}

/* ── Registros (comprador y proveedor) ──
   Arriba, una banda navy con cerros con el título y los requisitos; debajo, el
   formulario en tarjetas blancas con sombra suave que suben y se montan
   sobre el borde de la banda. */
.reg-hero {
  position: relative; color: #fff;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 220' preserveAspectRatio='none'%3E%3Cpath d='M0 170 L140 110 L260 150 L420 70 L560 140 L700 95 L860 160 L1010 80 L1160 140 L1300 100 L1440 150 L1440 220 L0 220Z' fill='%23ffffff' fill-opacity='.05'/%3E%3Cpath d='M0 200 L180 150 L330 185 L500 125 L650 180 L820 140 L980 190 L1150 130 L1300 175 L1440 150 L1440 220 L0 220Z' fill='%23ffffff' fill-opacity='.06'/%3E%3C/svg%3E") bottom / 100% 55% no-repeat,
    radial-gradient(900px 380px at 15% -10%, rgba(133, 170, 214, .28), transparent 70%),
    radial-gradient(700px 320px at 95% 110%, rgba(22, 63, 133, .55), transparent 70%),
    linear-gradient(135deg, var(--primary-800) 0%, var(--navy) 55%, #061428 100%);
}
.reg-hero-inner {
  max-width: 980px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 40px; align-items: center; padding: 44px 16px 108px;
}
.reg-kicker {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .7px; text-transform: uppercase;
  color: var(--gold-dark); background: var(--gold-pale);
  padding: 5px 11px; border-radius: var(--radius-xl); margin-bottom: 14px;
}
.reg-kicker .icon { width: 13px; height: 13px; }
/* Dentro de la banda navy, el kicker va translúcido. */
.reg-hero .reg-kicker {
  color: #dbe6f5; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
  padding: 5px 12px; margin-bottom: 16px;
}
.reg-hero .reg-kicker .icon { color: var(--gold); }
.reg-title {
  font-family: var(--font-sans); font-size: clamp(26px, 3.2vw, 36px); font-weight: 700;
  letter-spacing: -0.03em; color: #fff; line-height: 1.12; margin: 0 0 12px;
}
.reg-lead { font-size: var(--fs-base); color: #c9d7ea; line-height: 1.65; margin: 0; max-width: 560px; }
/* Enlace dentro del párrafo de la banda navy (www.supplymin.pe en el registro de compradores). */
.reg-lead-link { color: #fff; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.reg-lead-link:hover { color: var(--gold-pale, #fff); }
/* Requisitos: tarjeta translúcida dentro de la banda. */
.reg-reqs {
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius-lg); padding: 22px 24px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.reg-reqs-title {
  font-family: var(--font-sans); font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: .8px; color: #9fb3cf; font-weight: 600; margin: 0 0 14px;
  display: flex; align-items: center; gap: 8px;
}
.reg-reqs-title .icon { color: var(--gold); }
.reg-reqs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.reg-reqs-list li { display: flex; align-items: flex-start; gap: 11px; font-size: var(--fs-md); color: #e2e8f0; line-height: 1.5; }
.reg-reqs-list .reg-tick {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; margin-top: 1px;
  background: rgba(133, 170, 214, .22); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.reg-reqs-list .reg-tick .icon { width: 12px; height: 12px; stroke-width: 2.6; }
@media (max-width: 860px) {
  .reg-hero-inner { grid-template-columns: 1fr; gap: 24px; padding: 30px 16px 92px; }
}
@media (max-width: 576px) {
  .reg-lead { font-size: var(--fs-md); }
  .reg-reqs { padding: 18px; }
}

/* Formulario: sube sobre el borde de la banda. */
.reg-page {
  position: relative; z-index: 2; max-width: 980px; margin-top: -68px;
  font-size: var(--fs-md); color: var(--text-title);
}
.reg-page .breadcrumb { font-size: var(--fs-sm); margin-bottom: 0; }
.reg-page .breadcrumb a { color: var(--text-muted); text-decoration: none; }
.reg-page .breadcrumb a:hover { color: var(--navy); }
.reg-page .breadcrumb-item.active { color: var(--text-title); font-weight: 500; }
/* Sombra común de las tarjetas del registro. */
.reg-section, .reg-consent {
  box-shadow: var(--shadow-md);
}
/* Secciones del formulario: tarjeta con cabecera numerada. */
.reg-section {
  background: #fff; border: 1px solid #E6ECF4; border-radius: var(--radius-lg);
  margin-bottom: 20px;
  /* Sin overflow: hidden: recortaba el autocompletado de "Compañía minera";
     las esquinas de arriba las redondea la cabecera. */
}
.reg-section-header {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 26px; border-bottom: 1px solid #EEF2F7; border-radius: 15px 15px 0 0;
  background: linear-gradient(180deg, #FAFCFF 0%, #fff 100%);
  font-family: var(--font-sans); font-size: var(--fs-lg); font-weight: 700;
  letter-spacing: -0.2px; color: var(--text-title);
}
.reg-section-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--radius-md); flex-shrink: 0;
  background: var(--grad-navy); color: #fff; font-size: var(--fs-md); font-weight: 700;
  box-shadow: 0 4px 10px rgba(11, 45, 99, .25);
}
.reg-section-hint {
  margin-left: auto; font-size: var(--fs-xs); font-weight: 500; color: var(--gold-dark); white-space: nowrap;
  background: var(--gold-pale); padding: 4px 10px; border-radius: var(--radius-pill);
}
.reg-section-body { padding: 24px 26px 26px; }
@media (max-width: 576px) {
  .reg-page { margin-top: -60px; }
  .reg-section { border-radius: var(--radius-lg); }
  .reg-section-header { padding: 14px 16px; font-size: var(--fs-base); }
  .reg-section-body { padding: 18px 16px; }
  .reg-section-hint { display: none; }
}
/* Cabecera de un grupo de campos dentro de una sección. */
.reg-contact-subtitle {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .8px;
  color: var(--text-muted); font-weight: 600; margin-bottom: 12px;
  padding-bottom: 8px; border-bottom: 1px solid var(--gray-bg);
}
.reg-optional { font-weight: 500; color: var(--text-muted); text-transform: none; letter-spacing: 0; }
.reg-extra-contact { position: relative; padding-top: 16px; margin-top: 16px; border-top: 1px dashed var(--card-border); }
.reg-extra-contact-remove {
  position: absolute; top: 12px; right: 0; border: none; background: none;
  color: var(--danger-solid); font-size: var(--fs-sm); font-weight: 600;
  display: inline-flex; align-items: center; gap: .25rem; padding: 0;
}
.reg-extra-contact-remove:hover { text-decoration: underline; }

/* Grilla de rubros */
.reg-categories { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 4px 14px; }
.reg-categories ul { list-style: none; padding: 0; margin: 0; display: contents; }
.reg-categories li { margin: 0; }
.reg-categories label {
  display: flex; align-items: center; gap: 8px; font-size: var(--fs-md); color: var(--text-title);
  cursor: pointer; padding: 6px 8px; border-radius: var(--radius-sm); transition: background .12s;
}
.reg-categories label:hover { background: var(--gray-bg); }
.reg-categories input[type="checkbox"] { flex-shrink: 0; margin: 0; }
.reg-categories input[type="checkbox"]:checked { background-color: var(--navy-light); border-color: var(--navy-light); }

/* Los tres selects de la fecha; el año se lleva más ancho. */
.reg-date-parts { display: flex; gap: 8px; }
.reg-date-parts select { flex: 1 1 0; min-width: 0; }
.reg-date-parts select:last-child { flex: 1.3 1 0; }
.reg-counter { color: var(--text-muted); white-space: nowrap; }
.reg-counter.is-over { color: var(--danger-solid); font-weight: 700; }

/* Consentimiento y envío */
.reg-consent {
  background: #fff; border: 1px solid #E6ECF4; border-radius: var(--radius-lg);
  padding: 18px 26px; margin-bottom: 22px;
}
/* Apartado completo de declaraciones (registro de comprador). */
.reg-consent-title {
  display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
  font-size: var(--fs-base); font-weight: 700; letter-spacing: -0.2px; color: var(--text-title);
}
.reg-consent-title .icon { width: 17px; height: 17px; color: var(--gold-dark); }
.reg-consent .form-check { display: flex; align-items: flex-start; gap: 10px; padding-left: 0; margin-bottom: 8px; }
.reg-consent .form-check:last-child { margin-bottom: 0; }
.reg-consent .form-check-input { flex-shrink: 0; margin: 2px 0 0; width: 17px; height: 17px; }
.reg-consent .form-check { flex-wrap: wrap; }
.reg-consent .form-check-label { flex: 1 1 0; min-width: 0; font-size: var(--fs-sm); color: var(--text-body); line-height: 1.5; }
/* El error de una casilla va debajo de su texto, no al costado. */
.reg-consent .form-check > .text-danger,
.reg-consent .form-check > .invalid-msg { flex: 0 0 100%; padding-left: 27px; margin-top: 0; }
.reg-consent .form-check-label a { color: var(--gold-dark); text-decoration: none; font-weight: 500; }
.reg-consent .form-check-label a:hover { color: var(--navy); text-decoration: underline; }
.reg-submit { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 26px; }
.reg-submit-note { font-size: var(--fs-sm); color: var(--text-muted); text-align: center; }
.reg-submit-note a { color: var(--gold-dark); text-decoration: none; font-weight: 500; }
.reg-submit-note a:hover { color: var(--navy); text-decoration: underline; }

/* Registros de comprador y de proveedor (diseño registro de comprador
   vs3; el de proveedor lo adoptó el 2026-10-02): cabecera reducida al
   mínimo, una sola tarjeta con los bloques separados por una línea,
   etiquetas visibles arriba de cada casilla y botón en píldora. */
.reg-hero--compacto .reg-hero-inner {
  max-width: 896px; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 32px; padding: 30px 16px 96px;
}
.reg-hero--compacto .reg-kicker { margin-bottom: 8px; color: #fff; }
.reg-hero--compacto .reg-title { font-size: clamp(24px, 2.8vw, 30px); margin-bottom: 8px; }
.reg-hero--compacto .reg-lead { font-size: var(--fs-md); line-height: 1.55; }
.reg-hero--compacto .reg-reqs { padding: 16px; }
.reg-hero--compacto .reg-reqs-title { font-size: var(--fs-xs); color: #fff; margin-bottom: 12px; }
.reg-hero--compacto .reg-reqs-title .icon { width: 14px; height: 14px; color: #fff; }
.reg-hero--compacto .reg-reqs-list { gap: 8px; }
.reg-hero--compacto .reg-reqs-list li { font-size: var(--fs-xs); gap: 8px; color: #d1d9e6; }
.reg-hero--compacto .reg-reqs-list .reg-tick { width: 16px; height: 16px; }
.reg-hero--compacto .reg-reqs-list .reg-tick .icon { width: 10px; height: 10px; }
.reg-page--compacta { max-width: 896px; margin-top: -72px; }
.reg-page--compacta .reg-section { margin-bottom: 28px; box-shadow: var(--shadow-lg); }
.reg-page--compacta .reg-section-body { padding: 32px; }
.reg-card-head { border-bottom: 1px solid #EEF2F7; padding-bottom: 16px; margin-bottom: 24px; }
.reg-card-title {
  font-family: var(--font-sans); font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -0.2px;
  color: var(--text-title); margin: 0 0 4px;
}
.reg-card-note { display: flex; align-items: flex-start; gap: 6px; font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5; margin: 0; }
.reg-card-note .icon { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; color: var(--navy-light); }
.reg-block + .reg-block { border-top: 1px solid #EEF2F7; margin-top: 28px; padding-top: 24px; }
/* En una .row las columnas ya traen su margen de arriba (g-3). */
.row.reg-block + .row.reg-block { border-top: 0; padding-top: 0; }
/* La .row tiene márgenes negativos a los lados: la línea va como primer
   elemento, del ancho del contenido, para que no sobresalga. */
.row.reg-block + .row.reg-block::before {
  content: ""; flex: 0 0 auto; width: calc(100% - var(--bs-gutter-x));
  margin: 0 calc(var(--bs-gutter-x) * .5) 8px; padding: 0; border-top: 1px solid #EEF2F7;
}
/* Título de un bloque cuando la tarjeta tiene varios (registro de
   proveedor): sin número, a diferencia del paso a paso que hubo antes. */
.reg-block-title {
  font-family: var(--font-sans); font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.2px;
  color: var(--text-title); margin: 0 0 16px;
}
.reg-block-title:has(+ .reg-block-hint) { margin-bottom: 4px; }
.reg-block-hint { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.6; margin: 0 0 18px; }
/* El hueco del aviso de RENIEC o de SUNAT no ocupa fila mientras está vacío. */
.reg-lookup-slot:not(:has(#reniecBanner:not([hidden]), #sunatBanner:not([hidden]))):not(:has(#turnstileLookup > *)) { display: none; }
/* RUC que ya tiene ficha (registro de proveedor): en lugar del resto del
   formulario queda este aviso con el contacto de MINDER. */
.reg-ruc-registrado {
  display: flex; gap: 14px; align-items: flex-start;
  background: #FFF8EB; border: 1px solid #F5D48A; border-radius: var(--radius-lg);
  padding: 14px 18px; font-size: var(--fs-sm); color: var(--text-default); line-height: 1.6;
}
.reg-ruc-registrado-icon {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; background: #FDE9B8; color: var(--warning-fg);
}
.reg-ruc-registrado-icon .icon { width: 18px; height: 18px; }
.reg-ruc-registrado-body { min-width: 0; flex: 1; }
.reg-ruc-registrado-title { font-weight: 700; color: var(--text-title); margin: 0 0 2px; font-size: var(--fs-md); }
.reg-ruc-registrado-note { font-size: var(--fs-sm); color: var(--text-muted); }
/* Debajo del aviso: proponer un contacto nuevo para esa empresa. */
.reg-contacto-ruc { margin-top: 24px; padding-top: 24px; border-top: 1px solid #EEF2F7; }
.reg-contacto-ruc--listo {
  background: var(--success-bg); border: 1px solid #A6F4C5; border-radius: var(--radius-lg);
  padding: 18px 20px; font-size: var(--fs-md); color: var(--text-default); line-height: 1.6;
}
.reg-contacto-ruc--listo .reg-block-title { color: #027A48; margin-bottom: 6px; }
.reg-page--compacta .form-label { font-size: var(--fs-md); font-weight: 500; }
.reg-page--compacta .form-control,
.reg-page--compacta .form-select { min-height: 46px; padding: .65rem 1rem; font-size: var(--fs-md); }
.reg-page--compacta .form-select { padding-right: 2.25rem; }
.reg-page--compacta .form-text { font-size: var(--fs-xs); }
.reg-page--compacta .reg-consent { padding: 28px 32px; margin-bottom: 28px; box-shadow: var(--shadow-lg); }
.reg-page--compacta .reg-consent-title { font-size: var(--fs-lg); margin-bottom: 16px; }
.reg-page--compacta .reg-consent-title .icon { color: #98A2B3; }
.reg-page--compacta .reg-consent .form-check { margin-bottom: 14px; }
.reg-page--compacta .reg-consent .form-check-label { font-size: var(--fs-md); color: var(--text-title); line-height: 1.6; }
.reg-page--compacta .reg-consent .form-check-label a { color: var(--navy-light); }
.reg-submit--grande { gap: 16px; margin-bottom: 30px; }
.reg-submit--grande .auth-btn {
  height: 60px; padding: 0 48px; border-radius: var(--btn-radius); font-size: var(--fs-xl); font-weight: 700;
  box-shadow: 0 10px 18px -4px rgba(11, 45, 99, .30); transition: filter .15s, transform .2s, box-shadow .2s;
}
.reg-submit--grande .auth-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 22px -4px rgba(11, 45, 99, .38); }
.reg-submit--grande .auth-btn .icon { width: 20px; height: 20px; }
.reg-submit--grande .reg-submit-note { font-size: var(--fs-md); }
.reg-submit--grande .reg-submit-note a { color: var(--navy-light); font-weight: 600; }
@media (max-width: 860px) {
  .reg-hero--compacto .reg-hero-inner { grid-template-columns: 1fr; gap: 20px; padding: 24px 16px 88px; }
}
@media (max-width: 576px) {
  .reg-page--compacta { margin-top: -64px; }
  .reg-page--compacta .reg-section-body { padding: 22px 18px; }
  .reg-page--compacta .reg-consent { padding: 22px 18px; }
  .reg-submit--grande .auth-btn { width: 100%; padding: 0 24px; font-size: var(--fs-lg); height: 56px; }
}

/* Bloque legal: más discreto, como pie de la página. */
.reg-legal {
  background: rgba(255, 255, 255, .6); border: 1px dashed var(--card-border); border-radius: var(--radius-lg);
  padding: 18px 22px; margin: 8px 0 48px;
  font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.7;
}
.reg-legal p { margin: 0 0 10px; }
.reg-legal strong { color: var(--text-title); font-weight: 600; }
.reg-legal ol { padding-left: 18px; margin: 0; }
.reg-legal li { margin-bottom: 6px; }
.reg-legal a { color: var(--gold-dark); text-decoration: underline; }
.reg-legal a:hover { color: var(--navy); }
/* Variante del registro de comprador: letra más chica y borde liso. */
.reg-legal--mini { background: #FAFBFD; border-style: solid; border-radius: var(--radius-lg); padding: 18px 20px; font-size: var(--fs-xs); line-height: 1.6; }
.reg-legal--mini p { margin: 0 0 8px; }
.reg-legal--mini p:last-child { margin-bottom: 0; }

/* "Hay campos por completar o corregir", sobre el botón de enviar. */
.reg-submit-alert {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--danger-fg);
}
.reg-submit-alert[hidden] { display: none; }
.reg-submit-alert .icon { width: 16px; height: 16px; flex-shrink: 0; }

/* Separación entre el navbar y el primer bloque del directorio: evita que la
   primera tarjeta parezca pegada o fusionada con la barra superior. */
.directory-top-gap { height: 18px; }
@media (max-width: 576px) { .directory-top-gap { height: 12px; } }

/* Buscador: una sola pieza, redondeada (píldora), para el directorio y la
   ficha de proveedor. Sombra suave que se acentúa al enfocar. */
.search-bar {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--card-border); border-radius: var(--radius-pill);
  padding: 0 7px 0 22px; height: 56px;
  box-shadow: 0 6px 20px rgba(10, 38, 71, .07), 0 1px 2px rgba(16, 24, 40, .04);
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.search-bar:hover { box-shadow: 0 8px 26px rgba(10, 38, 71, .10), 0 1px 2px rgba(16, 24, 40, .04); }
.search-bar:focus-within {
  border-color: var(--navy);
  box-shadow: 0 8px 26px rgba(10, 38, 71, .12), 0 0 0 4px rgba(10, 38, 71, .07);
}
.search-bar > .icon { color: var(--text-muted); width: 19px; height: 19px; stroke-width: 1.9; transition: color .18s; }
.search-bar:focus-within > .icon { color: var(--navy); }
.search-bar-wrap { position: relative; flex: 1; min-width: 0; }
.search-bar-input {
  width: 100%; border: none; outline: none; background: transparent;
  font-size: var(--fs-base); color: var(--text-title); height: 54px;
}
.search-bar-input::placeholder { color: var(--text-muted); }
.search-bar-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border-radius: 50%; border: none;
  background: var(--btn-primary-bg);
  color: #fff; cursor: pointer;
  box-shadow: 0 4px 12px rgba(11, 45, 99, .30);
  transition: transform .18s, box-shadow .18s, background .18s;
}
.search-bar-btn .icon { width: 19px; height: 19px; stroke-width: 2.2; }
.search-bar-btn:hover { transform: scale(1.06); box-shadow: 0 6px 16px rgba(11, 45, 99, .40); }
.search-bar-btn:active { transform: scale(.95); }
.search-bar-btn.is-loading .icon { animation: search-spin .6s linear infinite; }
@media (max-width: 576px) {
  .search-bar { height: 50px; padding-left: 16px; gap: 8px; }
  .search-bar-input { font-size: var(--fs-md); height: 48px; }
  .search-bar-btn { width: 38px; height: 38px; }
}
@keyframes search-spin { to { transform: rotate(360deg); } }

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

/* ── Aliados Estratégicos: tira de logos con scroll continuo (marquee) ──
   Antes era un Bootstrap Carousel que armaba páginas de 6 logos y las
   pasaba cada 3.5s con un slide de 0.6s: ~2.9s de cada ciclo la tira
   quedaba completamente quieta y después saltaba de golpe, lo que se
   percibía como "lento"/entrecortado en vez de vivo. Este marquee mueve
   la tira todo el tiempo a velocidad constante -- sin pausas ni saltos.
   El movimiento lo hace static/js/logo-marquee.js corriendo el scroll de
   .allies-marquee (no una animación CSS): así en celular también se
   arrastra con el dedo. */
.allies-strip {
  background: linear-gradient(180deg, #F7F9FC 0%, #FFFFFF 100%);
  border-top: 1px solid var(--card-border);
  padding: 22px 0 28px;
  margin-top: 8px;
}
/* Título y bajada en una sola línea, pegados arriba: el protagonismo es
   de los logos. */
.allies-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.allies-title {
  font-family: var(--font-sans); font-size: var(--fs-xl); font-weight: 700;
  letter-spacing: -0.3px; color: var(--text-title); line-height: 1.2;
}
.allies-sub { font-size: var(--fs-sm); color: var(--text-muted); }
.allies-sub::before { content: "·"; margin-right: 10px; color: var(--card-border); }
.allies-marquee {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  scroll-behavior: auto;
  /* Que arrastrar la tira hasta el borde no dispare el "atrás" del
     navegador ni mueva la página de costado. */
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  padding: 6px 0 14px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  /* El scroll lo mueve el script cuadro a cuadro: con esta pista el
     navegador lo compone aparte y no repinta el resto de la página. */
  will-change: scroll-position;
}
.allies-marquee::-webkit-scrollbar { display: none; }
/* En escritorio la tira también se arrastra con el mouse. */
@media (hover: hover) and (pointer: fine) {
  .allies-marquee[data-marquee] { cursor: grab; }
  .allies-marquee[data-marquee] .allies-logo { cursor: inherit; }
}
.allies-marquee.is-dragging { cursor: grabbing; user-select: none; }
.allies-track {
  display: flex;
  align-items: center;
  width: max-content;
}
/* La separación va como margen de cada logo y no como `gap` del track:
   con gap, el ancho de las dos copias juntas es 2N logos + (2N-1) huecos,
   así que -50% no cae exactamente en el borde de la copia 1 y el loop
   daba un saltito en cada vuelta. Con el margen dentro de cada ítem, la
   mitad del track mide exactamente una copia completa. */
.allies-track .allies-logo { margin-right: 16px; }
/* Con pocos logos (ej. recién se marcaron destacados) no hay copia
   duplicada -- ver directory.html -- así que no hay nada que recorrer
   en loop: se centran quietos para no dejar huecos vacíos a los costados. */
.allies-track-static {
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px 0;
}
/* Cada logo va en una "loseta" blanca del mismo tamaño, como las tarjetas
   del resto del sitio; al pasar el mouse se levanta y marca el borde. */
.allies-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 224px;
  height: 116px;
  padding: 16px 22px;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  transition: border-color .2s ease, background .2s ease;
}
.allies-logo:hover,
.allies-logo:focus-visible {
  border-color: var(--navy-light);
  background: #FBFCFE;
  outline-offset: 2px;
}
.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 60px.
     max-width + object-fit mantienen dentro de la loseta a los logos
     muy apaisados. */
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
@media (max-width: 576px) {
  .allies-strip { padding: 18px 0 22px; }
  .allies-title { font-size: var(--fs-lg); }
  .allies-logo { width: 170px; height: 90px; padding: 12px 16px; }
  .allies-track .allies-logo { margin-right: 12px; }
}
/* Empresa sin logo (solo en "empresas nuevas", si con logo no alcanzan):
   iniciales y nombre en la misma loseta. */
.allies-logo:has(.allies-initials) { flex-direction: column; gap: 8px; text-decoration: none; }
.allies-initials {
  width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--gray-bg); color: var(--text-body);
  font-weight: 700; font-size: var(--fs-base); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.allies-name {
  font-size: var(--fs-sm); font-weight: 600; color: var(--text-title); line-height: 1.25; text-align: center;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.allies-strip-first { margin-top: 0; border-top: none; }

/* ── Ruta de navegación de las páginas internas (estilo Alibaba):
   texto chico y gris, separada por ›, la página actual en oscuro y sin
   enlace. En celular queda en una sola línea y se desliza de costado. ── */
.minder-crumbs { padding-top: 14px; }
.minder-crumbs-list {
  display: flex; align-items: center; flex-wrap: nowrap;
  list-style: none; margin: 0; padding: 0;
  font-size: var(--fs-sm); line-height: 1.4; color: var(--text-muted);
  overflow-x: auto; scrollbar-width: none; white-space: nowrap;
}
.minder-crumbs-list::-webkit-scrollbar { display: none; }
.minder-crumbs-item { display: inline-flex; align-items: center; min-width: 0; }
.minder-crumbs-item + .minder-crumbs-item::before {
  content: "›"; margin: 0 8px; color: #98a2b3; font-size: var(--fs-base); line-height: 1;
}
.minder-crumbs-item a { color: var(--text-muted); text-decoration: none; }
.minder-crumbs-item a:hover { color: var(--navy-light); text-decoration: underline; }
.minder-crumbs-item [aria-current="page"] {
  color: var(--text-title); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; max-width: 60vw;
}
/* Con la ruta arriba, la página no necesita su margen superior completo. */
.minder-crumbs + [class*="container"],
.minder-crumbs + div > [class*="container"]:first-child { padding-top: 1rem !important; }

/* ── Portada pública (visitante sin cuenta) ── */
/* ── Vista protegida detrás del aviso de resultados (visitante sin cuenta).
   Es un esqueleto estático: NO contiene información de proveedores. El blur
   es solo decorativo; quitarlo desde DevTools no revela datos. ── */
.directory-teaser { position: relative; margin-bottom: 8px; display: grid; grid-template-columns: minmax(0, 1fr); }
/* Esqueleto y cuadro comparten la misma celda: el contenedor crece al más
   alto de los dos, así el cuadro con el login rápido nunca queda cortado. */
.directory-teaser > .directory-teaser-preview,
.directory-teaser > .directory-teaser-gate { grid-area: 1 / 1; }
.directory-teaser-preview {
  filter: blur(3px);
  pointer-events: none;
  user-select: none;
  opacity: .72;
}
.directory-teaser-placeholder-row { height: 92px; }
.directory-teaser-skeleton {
  display: block;
  height: 11px;
  max-width: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, #E8EDF4 0%, #DCE4EE 52%, #E8EDF4 100%);
}
.directory-teaser-skeleton.is-short { width: 66%; }
.directory-teaser-skeleton-logo {
  width: 104px;
  height: 62px;
  border-radius: var(--radius-md);
}
.directory-teaser-skeleton-name { width: 154px; height: 14px; }
.directory-teaser-skeleton-wide { width: 250px; }
.directory-teaser-skeleton-medium { width: 150px; }
.directory-teaser-skeleton-number { width: 92px; }
.directory-teaser-skeleton-year { width: 54px; }
.directory-teaser-skeleton-region { width: 88px; }
.directory-teaser-skeleton-action { width: 76px; height: 30px; }
.directory-teaser-preview .suppliers-table tbody tr:hover { background: transparent; }
.directory-teaser-preview .suppliers-table-wrap {
  box-shadow: inset 0 0 70px rgba(10, 38, 71, .03);
}
.directory-teaser-gate {
  position: relative;
  align-self: center;
  justify-self: center;
  margin: 20px 0;
  width: min(400px, calc(100% - 2rem));
  z-index: 2;
  text-align: center;
  padding: 28px 26px;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 48px rgba(10, 38, 71, .18);
  background-image: radial-gradient(420px 160px at 50% -40px, rgba(133, 170, 214, .18), transparent 70%);
}
.directory-teaser-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-lg);
  background: var(--gold-pale); color: var(--navy-light);
  margin-bottom: 12px;
}
.directory-teaser-icon .icon { width: 20px; height: 20px; }
.directory-teaser-title {
  font-family: var(--font-sans);
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--text-heading);
  margin: 0 0 6px;
}
.directory-teaser-text {
  font-size: var(--fs-md);
  color: var(--text-paragraph);
  line-height: 1.5;
  margin: 0 0 16px;
}
.directory-teaser-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.directory-teaser-actions .auth-btn-auto { width: 100%; }
/* Login rápido dentro del cuadro. */
.teaser-login { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.teaser-login .form-control { height: 44px; font-size: var(--fs-md); }
.teaser-login .auth-btn { margin-top: 2px; }
.teaser-login-links {
  display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  font-size: var(--fs-sm); font-weight: 500; margin-top: 2px;
}
.teaser-login-links a { color: var(--gold-dark); text-decoration: none; }
.teaser-login-links a:hover { color: var(--navy); text-decoration: underline; }
.directory-teaser-link { font-size: var(--fs-sm); font-weight: 600; color: var(--navy); text-decoration: underline; }
.directory-teaser-link:hover { color: var(--gold-dark); }
@media (max-width: 576px) {
  .teaser-login-links { justify-content: center; }
  .directory-teaser-gate {
    width: calc(100% - 20px);
    padding: 22px 18px;
    border-radius: var(--radius-lg);
  }
  .directory-teaser-title { font-size: var(--fs-lg); }
  .directory-teaser-text { font-size: var(--fs-sm); }
}

/* Carrusel de tarjetas (empresas nuevas) */
/* Banda de cierre: crear cuenta. Tarjeta clara partida en dos: a la
   izquierda qué se desbloquea, a la derecha las dos puertas de registro
   (mismo lenguaje que las tarjetas "Soy proveedor / Soy comprador" del
   login). */
.join-band { padding: 16px 0 44px; }
.join-card {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: center;
  background: #fff; border: 1px solid var(--card-border); border-radius: var(--radius-lg); padding: 36px 40px;
  background-image:
    radial-gradient(640px 320px at 0% 0%, rgba(133, 170, 214, .22), transparent 70%),
    radial-gradient(520px 300px at 100% 100%, rgba(133, 170, 214, .14), transparent 70%);
}
.join-copy .reg-kicker { margin-bottom: 12px; }
.join-title { font-family: var(--font-sans); font-size: var(--fs-4xl); font-weight: 700; letter-spacing: -0.5px; color: var(--text-heading); margin: 0 0 8px; line-height: 1.15; }
.join-text { font-size: var(--fs-base); color: var(--text-paragraph); margin: 0 0 18px; max-width: 520px; line-height: 1.6; }
.join-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.join-list li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-md); color: var(--text-title); line-height: 1.5; }
.join-tick {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; margin-top: 1px;
  background: var(--gold-pale); color: var(--navy-light); display: inline-flex; align-items: center; justify-content: center;
}
.join-tick .icon { width: 12px; height: 12px; stroke-width: 2.4; }
.join-doors { display: flex; flex-direction: column; gap: 10px; }
.join-door {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
  padding: 16px 18px; border-radius: var(--radius-lg); text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--card-border);
  transition: border-color .18s, background .18s;
}
.join-door:hover { border-color: var(--navy-light); background: #FBFCFE; color: inherit; }
.join-door-icon {
  width: 44px; height: 44px; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center;
  background: var(--gold-pale); color: var(--navy-light);
}
.join-door-icon .icon { width: 21px; height: 21px; }
.join-door-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.join-door-title { font-family: var(--font-sans); font-size: var(--fs-base); font-weight: 700; color: var(--text-title); }
.join-door-text { font-size: var(--fs-sm); color: var(--text-body); line-height: 1.45; }
.join-door-cta {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: var(--fs-sm); font-weight: 600; color: var(--navy-light);
}
.join-door-cta .icon { width: 14px; height: 14px; stroke-width: 2.2; transition: transform .18s; }
.join-door:hover .join-door-cta .icon { transform: translateX(3px); }
.join-login { font-size: var(--fs-sm); color: var(--text-muted); text-align: center; margin-top: 2px; }
.join-login a { color: var(--gold-dark); font-weight: 600; text-decoration: none; }
.join-login a:hover { color: var(--navy); text-decoration: underline; }
@media (max-width: 992px) {
  .join-card { grid-template-columns: 1fr; gap: 22px; padding: 26px 22px; }
}
@media (max-width: 576px) {
  .join-title { font-size: var(--fs-3xl); }
  .join-door { grid-template-columns: auto 1fr; }
  .join-door-cta { grid-column: 2; }
}

/* ── Filter Bar (directorio) ──
   Una sola fila de píldoras (ícono + rótulo + select); el selector de
   vista va al extremo derecho.
   Las píldoras con un valor elegido se pintan en azul pálido. */
.filter-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 12px 16px;
}
.filter-bar-compact .filter-field { min-width: 210px; }
.filter-lead {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .7px; text-transform: uppercase; color: var(--text-muted);
  padding-right: 6px; margin-right: 2px; border-right: 1px solid var(--card-border);
  height: 24px;
}
.filter-lead .icon { width: 15px; height: 15px; color: var(--text-body); }
.filter-field {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  height: 40px; padding: 0 12px 0 14px; margin: 0;
  background: #fff; border: 1px solid var(--card-border); border-radius: var(--radius-pill);
  color: var(--text-title); cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.filter-field:hover { border-color: var(--text-muted); }
.filter-field:focus-within { border-color: var(--navy-light); box-shadow: var(--focus-ring); }
.filter-field > .icon { width: 15px; height: 15px; color: var(--text-muted); flex-shrink: 0; }
.filter-field-label { font-size: var(--fs-sm); color: var(--text-muted); font-weight: 500; white-space: nowrap; }
.filter-field select {
  appearance: none; -webkit-appearance: none;
  border: none; outline: none; background: transparent;
  font-family: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--text-title);
  padding: 0 2px; margin: 0; height: 100%; cursor: pointer;
  max-width: 170px; text-overflow: ellipsis;
}
.filter-field-caret { width: 14px; height: 14px; color: var(--text-muted); flex-shrink: 0; stroke-width: 2.2; }
.filter-field.is-active { background: var(--gold-pale); border-color: #B9CFEA; }
.filter-field.is-active > .icon, .filter-field.is-active .filter-field-caret { color: var(--navy-light); }
.filter-field.is-active .filter-field-label { color: var(--gold-dark); }
.filter-field.is-active select { color: var(--navy); }

/* Menú desplegable propio (static/js/filter-dropdown.js): el select
   nativo queda oculto y en su lugar va un botón con el valor + un panel
   con las opciones, en el mismo lenguaje que las tarjetas del sitio. */
.filter-field select.is-enhanced { display: none; }
.filter-field-btn {
  display: inline-flex; align-items: center; height: 100%;
  border: none; background: transparent; padding: 0 2px; margin: 0;
  font-family: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--text-title);
  cursor: pointer; white-space: nowrap; max-width: 190px;
}
.filter-field-value { overflow: hidden; text-overflow: ellipsis; }
.filter-field.is-active .filter-field-btn { color: var(--navy); }
.filter-field.is-open { border-color: var(--navy-light); box-shadow: var(--focus-ring); }
.filter-field.is-open .filter-field-caret { transform: rotate(180deg); }
.filter-field-caret { transition: transform .18s; }
.filter-menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 1050;
  min-width: 240px; max-width: 320px;
  background: #fff; border: 1px solid var(--card-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 6px; display: none;
  cursor: default; text-align: left;
}
.filter-menu.is-right { left: auto; right: 0; }
.filter-field.is-open .filter-menu { display: block; animation: suggest-dropdown-in .16s ease-out; }
.filter-menu-search {
  display: flex; align-items: center; gap: 8px;
  margin: 2px 2px 6px; padding: 0 10px; height: 36px;
  border: 1px solid var(--card-border); border-radius: var(--radius-md); background: var(--gray-bg);
}
.filter-menu-search:focus-within { border-color: var(--navy-light); background: #fff; box-shadow: 0 0 0 3px rgba(11, 45, 99, .08); }
.filter-menu-search input:focus, .filter-menu-search input:focus-visible { outline: none; box-shadow: none; }
.filter-menu-search .icon { width: 14px; height: 14px; color: var(--text-muted); flex-shrink: 0; }
.filter-menu-search input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-family: inherit; font-size: var(--fs-sm); color: var(--text-title);
}
.filter-menu-list { max-height: 300px; overflow-y: auto; padding-right: 2px; }
.filter-menu-list::-webkit-scrollbar { width: 6px; }
.filter-menu-list::-webkit-scrollbar-thumb { background: var(--card-border); border-radius: 3px; }
.filter-menu-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 9px 12px; border: none; border-radius: var(--radius-md); background: transparent;
  font-family: inherit; font-size: var(--fs-md); font-weight: 500; color: var(--text-title);
  text-align: left; cursor: pointer; transition: background .12s, color .12s;
}
.filter-menu-item:hover, .filter-menu-item:focus-visible { background: var(--gray-bg); }
.filter-menu-item-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-menu-check { width: 15px; height: 15px; stroke-width: 2.4; color: var(--navy-light); flex-shrink: 0; opacity: 0; }
.filter-menu-item.is-selected { background: var(--gold-pale); color: var(--navy); font-weight: 600; }
.filter-menu-item.is-selected .filter-menu-check { opacity: 1; }
.filter-menu-empty { padding: 12px; font-size: var(--fs-sm); color: var(--text-muted); text-align: center; }
@media (max-width: 576px) {
  .filter-field-btn { flex: 1; max-width: none; justify-content: flex-start; }
  .filter-menu { left: 0; right: 0; max-width: none; }
}

.filter-clear {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px;
  border: 1px dashed var(--card-border); border-radius: var(--radius-pill); background: #fff;
  color: var(--text-body); font-size: var(--fs-sm); font-weight: 600; text-decoration: none;
  transition: border-color .15s, color .15s;
}
.filter-clear:hover { border-color: var(--danger-solid); color: var(--danger-solid); }
.filter-clear .icon { width: 13px; height: 13px; stroke-width: 2.4; }
/* Sin búsqueda ni filtro activo la barra entera se oculta y la lista sube. */
.filter-bar.is-collapsed { display: none; }
/* Sin filtros activos el botón sigue en su lugar, apagado: desaparecer
   movía de lugar todo lo que tiene al costado, y en celular --donde
   comparte el único renglón con el select-- parecía que faltaba. */
.filter-clear.is-disabled {
  opacity: .45; cursor: default; pointer-events: none;
}
.filter-bar-end { margin-left: auto; }
/* La fila iba justa: los rótulos se ocultan y las píldoras muestran solo
   ícono + valor por debajo de 1400px. */
@media (max-width: 1399px) {
  .filter-field-label { display: none; }
  .filter-field { padding: 0 10px 0 12px; }
}
.filter-bar .alert { border-radius: var(--radius-md); font-size: var(--fs-sm); width: 100%; margin: 0; }
@media (max-width: 1500px) { .filter-lead { display: none; } }
@media (max-width: 992px) {
  .filter-bar-end { margin-left: 0; width: 100%; display: flex; justify-content: flex-end; }
}
/* En celular la barra entra en UN renglón: el select de región y
   "Limpiar" lado a lado.

   Antes cada píldora ocupaba la fila entera y recuperaba su rótulo, con
   el criterio de que "Todas" sin "Categoría" al lado no dice nada. Con
   una sola píldora ese criterio ya no paga lo que cuesta: entre el
   rótulo "Filtrar", el select y el botón Limpiar se iban tres renglones
   de alto antes de mostrar un solo proveedor. El ícono de pin y el
   propio valor del select alcanzan para saber qué es.

   El selector de vista se esconde: en esta pantalla las tres vistas no
   son tres opciones reales -- la tabla no entra de ancho y la lista y
   las tarjetas casi no se distinguen. Queda solo tarjetas.

   La segunda condición es el celular DE COSTADO: girarlo lo lleva a
   667-932px de ancho, así que un corte solo por ancho dejaba volver el
   selector de vista y los filtros en tres renglones apenas rotabas el
   teléfono. Se mira el alto, que de costado le queda en 400px y pico; un
   tablet apaisado pasa de 700px, así que no entra.

   Este bloque es la ÚNICA definición del corte: el JS de directory.html
   no repite la media query, pregunta si el selector de vista quedó
   escondido. Cambiar el ancho acá lo cambia en los dos lados. */
@media (max-width: 576px), (orientation: landscape) and (max-height: 500px) {
  /* Con nowrap, las «Etiquetas para esta búsqueda» y los avisos (que
     también van en la barra) quedaban en el mismo renglón y la estiraban
     fuera de la pantalla (2026-10-08). Ahora sí se parte: el select (base
     0) y Limpiar siguen juntos, y cada aviso va en su renglón. */
  .filter-bar { flex-wrap: wrap; padding: 10px; gap: 8px; border-radius: var(--radius-lg); }
  .filter-bar .alert, .filter-bar .dir-etiquetas { flex: 0 0 100%; min-width: 0; }
  .filter-lead { display: none; }
  /* El select se estira con lo que quede; Limpiar no se deja aplastar. */
  .filter-field,
  .filter-bar-compact .filter-field { flex: 1 1 0; min-width: 0; height: 44px; padding: 0 12px; border-radius: var(--radius-md); }
  .filter-field select { flex: 1; min-width: 0; max-width: none; width: auto !important; }
  .filter-field-label { display: none; }
  .filter-field-btn { min-width: 0; }
  .filter-field-value { flex: 1; min-width: 0; }
    .filter-clear { flex: 0 0 auto; height: 42px; white-space: nowrap; border-radius: var(--radius-md); }
  .filter-bar-end { display: none; }
}

.results-count-bottom { font-size: var(--fs-base); }
.results-count-bottom .fw-semibold { color: var(--navy); font-size: var(--fs-lg); }

/* ── 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: var(--fs-sm);
  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: var(--radius-sm);
  font-size: var(--fs-sm);
  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 (tarjeta del directorio, _supplier_card.html) ── */
.badge-standard {
  display: inline-flex;
  align-items: center;
  background: var(--success-bg);
  color: var(--success-fg);
  border: 1px solid var(--success-border);
  border-radius: var(--tag-radius);
  padding: 3px 10px;
  font-size: var(--tag-fs);
  font-weight: var(--tag-fw);
  white-space: nowrap;
}

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

/* ── Edición inline en el panel (rubros, experiencias) ── */
.panel-inline-edit > summary {
  cursor: pointer;
  font-size: var(--fs-sm);
  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: var(--fs-lg);
  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: var(--fs-sm);
  color: var(--text-dark);
  cursor: pointer;
  padding: .15rem 0;
}

/* ── Clientes mineros declarados por la empresa (ficha) ──
   Los nombres sueltos van como .chip (misma tarjeta de la ficha); esto solo
   cubre la variante en varias líneas, en vez de solo los nombres. */
.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: var(--fs-md);
  color: var(--text-body);
  line-height: 1.5;
}

.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: var(--radius-md);
  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-body { padding: 1.25rem; }

/* Experience timeline */
.year-badge {
  display: inline-block;
  background: var(--navy);
  color: #fff;
  padding: 3px 10px;
  border-radius: var(--radius-xl);
  font-size: var(--fs-sm);
  font-weight: 700;
  white-space: nowrap;
}
.docs-label { font-size: var(--fs-xs); color: var(--text-body); display: block; margin-bottom: 4px; }
.doc-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  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; }

/* ═══════════════════════════════════════════════════════════════════
   Ficha de proveedor (detail.html): medidas en px copiadas del diseño
   original para que se vea idéntico. Tipografía: la del sitio (Alibaba
   Sans).
   ═══════════════════════════════════════════════════════════════════ */
.profile-page { font-size: var(--fs-md); line-height: 1.5; color: var(--text-title); }

.icon {
  width: 15px; height: 15px;
  stroke: currentColor; fill: none; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0; display: inline-block; vertical-align: middle;
}
.icon-sm { width: 13px; height: 13px; stroke-width: 1.8; }
.icon-fill { fill: currentColor; stroke: none; }


.pill {
  font-size: var(--fs-xs); font-weight: 600; padding: 5px 11px; border-radius: var(--radius-xl);
  letter-spacing: 0.6px; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--gold-pale); color: var(--gold-dark);
}

.profile-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; max-width: 100%; }
.profile-actions form { margin: 0; }

/* Quick facts */
.quick-facts { display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; }
.qf-cell { padding: 16px 22px; border-right: 1px solid var(--gray-bg); min-width: 0; }
.qf-cell:last-child { border-right: none; }
.qf-label {
  display: block; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.7px;
  color: var(--text-muted); font-weight: 600; margin-bottom: 6px;
}
.qf-value { font-size: var(--fs-base); font-weight: 600; color: var(--text-title); overflow-wrap: break-word; }
.qf-value a { color: var(--gold-dark); text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.qf-value a:hover { text-decoration: underline; }
.qf-value a .icon { width: 12px; height: 12px; }
@media (max-width: 860px) {
  .quick-facts { grid-template-columns: repeat(2, 1fr); }
  .qf-cell { border-bottom: 1px solid var(--gray-bg); }
  .qf-cell:nth-child(2n) { border-right: none; }
}

/* Grilla 2×2: una tarjeta por cuadrante */
.grid-4 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; align-items: start; }
.grid-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (max-width: 860px) {
  /* Una sola columna: perfil, contacto, trayectoria, videos. */
  .grid-4 { display: flex; flex-direction: column; }
  .grid-col { display: contents; }
  .box-tecnico { order: 1; }
  .box-contacto { order: 2; }
  .box-trayectoria { order: 3; }
  .box-videos { order: 4; }
}
.box { background: #fff; border: 1px solid var(--card-border); border-radius: var(--radius-md); padding: 22px 24px; }

.sub-label {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--text-muted); font-weight: 600; margin-bottom: 12px;
}

.chips { display: flex; flex-wrap: wrap; gap: 12px; }
.chip {
  font-size: var(--fs-md); padding: 3px 19px; border-radius: var(--radius-md);
  background: var(--gray-bg); color: var(--text-title); font-weight: 500; line-height: 1.6;
  text-decoration: none;
}
a.chip:hover { color: var(--navy); }

/* Listas largas se desplazan dentro de su tarjeta en vez de estirar la grilla. */
.scroll-list { max-height: 26rem; overflow-y: auto; padding-right: 6px; }
.scroll-list::-webkit-scrollbar { width: 6px; }
.scroll-list::-webkit-scrollbar-thumb { background: var(--card-border); border-radius: 3px; }

.exp-list { display: flex; flex-direction: column; }
.exp-item {
  padding: 16px 0; border-bottom: 1px solid var(--gray-bg);
  display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: start;
}
.exp-item:first-child { padding-top: 0; }
.exp-item:last-child { border-bottom: none; padding-bottom: 0; }
.exp-title { font-size: var(--fs-base); font-weight: 600; color: var(--text-title); letter-spacing: -0.2px; margin-bottom: 4px; line-height: 1.3; }
.exp-desc { font-size: var(--fs-sm); color: var(--text-body); line-height: 1.55; }
.exp-year {
  font-size: var(--fs-xs); font-weight: var(--fw-bold); background: #e2e8f0; color: var(--text-body);
  padding: 4px 12px; border-radius: var(--radius-sm); letter-spacing: 0.3px; white-space: nowrap;
}

.docs-row { display: flex; flex-wrap: wrap; gap: 10px; }
.doc-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; background: #fff; border: 1px solid var(--card-border); border-radius: var(--radius-md);
  font-size: var(--fs-sm); font-weight: 600; color: var(--text-title); text-decoration: none;
  cursor: pointer; transition: border-color .15s; flex: 1; min-width: 0; white-space: nowrap;
}
.doc-btn:hover { border-color: var(--text-muted); color: var(--text-title); }
.doc-btn .icon { color: var(--text-body); }
.doc-btn .icon.pdf-icon { color: #e5484d; }

/* Información SUNAT en la ficha (ver detail.html). */
.sunat-chip.is-ok   { background: var(--success-bg); color: var(--success-fg); }
.sunat-chip.is-warn { background: var(--warning-bg); color: var(--warning-fg); }
.sunat-chip.is-danger  { background: var(--danger-bg); color: var(--danger-fg); }
.sunat-chip.is-neutral { background: var(--neutral-bg); color: var(--neutral-fg); }
/* Información crediticia (Experian) en la ficha: tira de semáforos
   mensuales y tablas de deuda. */
:root { --exp-ok: #12B76A; --exp-warn: #F79009; --exp-danger: #F04438; --exp-neutral: #98A2B3; }
/* Semáforo actual: una luz grande con el color, el nombre y qué significa. */
.exp-sem {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  border: 1px solid var(--card-border); border-radius: var(--radius-md); background: #fff;
}
.exp-sem-luz { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--exp-neutral); box-shadow: inset 0 -3px 6px rgba(0,0,0,.15), 0 0 0 4px rgba(0,0,0,.05); }
.exp-sem.is-ok .exp-sem-luz      { background: var(--exp-ok); }
.exp-sem.is-warn .exp-sem-luz    { background: var(--exp-warn); }
.exp-sem.is-danger .exp-sem-luz  { background: var(--exp-danger); }
.exp-sem-nombre { font-size: var(--fs-lg); font-weight: 700; color: var(--text-title); line-height: 1.2; }
.exp-sem-desc { font-size: var(--fs-sm); color: var(--text-body); margin-top: 2px; }
.exp-sem-otros { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: var(--fs-sm); color: var(--text-body); }
.exp-sem-otros li { display: flex; align-items: center; gap: 6px; }
.exp-punto { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: var(--exp-neutral); flex: none; }
.exp-punto.is-ok     { background: var(--exp-ok); }
.exp-punto.is-warn   { background: var(--exp-warn); }
.exp-punto.is-danger { background: var(--exp-danger); }
.exp-punto + .exp-punto { margin-left: -4px; }
/* Tira mes a mes: una barra por mes que ocupa todo el ancho. */
.exp-tira-titulo { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .02em; margin: 16px 0 6px; }
.exp-tira { display: flex; gap: 2px; }
.exp-tira-mes { flex: 1; min-width: 6px; height: 26px; border-radius: 3px; background: var(--neutral-bg); }
.exp-tira-mes:first-child { border-radius: 6px 3px 3px 6px; }
.exp-tira-mes:last-child  { border-radius: 3px 6px 6px 3px; }
.exp-tira-mes.is-ok      { background: var(--exp-ok); }
.exp-tira-mes.is-warn    { background: var(--exp-warn); }
.exp-tira-mes.is-danger  { background: var(--exp-danger); }
.exp-tira-mes.is-neutral { background: var(--exp-neutral); }
.exp-tira-ejes { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--text-muted); margin-top: 4px; }
.exp-leyenda { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 4px 18px; font-size: var(--fs-xs); color: var(--text-body); }
.exp-leyenda li { display: flex; align-items: flex-start; gap: 6px; line-height: 1.45; }
.exp-leyenda .exp-punto { margin-top: 3px; }
.exp-tabla { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); color: var(--text-body); }
.exp-tabla th { font-weight: 600; color: var(--text-muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .02em; }
.exp-tabla th, .exp-tabla td { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--card-border); vertical-align: top; text-align: left; }
.exp-tabla tr:last-child td { border-bottom: 0; }
.exp-tabla .exp-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.exp-tabla .exp-num-deuda { color: var(--danger-fg); font-weight: 600; }
.exp-historial summary { cursor: pointer; font-weight: 600; }
/* En la tarjeta el estado va al costado del RUC, en la misma línea (y
   baja a la siguiente si no entra). */
.card-ruc { flex-wrap: wrap; }
.card-sunat { font-size: var(--fs-xs); font-weight: 600; margin-left: 4px; white-space: nowrap; }
.card-sunat.is-ok   { color: var(--success-fg); }
.card-sunat.is-warn { color: var(--warning-fg); }
.card-sunat.is-ok .icon, .card-sunat.is-warn .icon { color: currentColor; }
.sunat-list { list-style: none; padding: 0; margin: 0; font-size: var(--fs-sm); color: var(--text-body); line-height: 1.7; }
.sunat-fuente { font-size: var(--fs-xs); color: var(--text-muted); margin: 14px 0 0; }
.dist-box {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 18px; background: #fff; border: 1px solid var(--card-border); border-radius: var(--radius-md);
  font-size: var(--fs-md); color: var(--text-title); line-height: 1.55; font-weight: 500;
}
.dist-box .icon { color: var(--text-body); width: 16px; height: 16px; margin-top: 3px; }

.certs-line { display: flex; flex-wrap: wrap; gap: 14px; font-size: var(--fs-sm); align-items: center; }
.cert {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-title); font-weight: 600;
  background: transparent; border: none; padding: 0; cursor: pointer; font-size: var(--fs-sm);
}
.cert .icon { color: var(--success-fg); width: 15px; height: 15px; stroke-width: 2.2; }
.cert.is-legacy { cursor: default; }
/* Homologaciones: escudo azul en vez del check verde de una norma. */
.cert.is-homologation .icon { color: var(--navy-light); }

/* Contacto comercial */

/* Cabecera de la tarjeta de contacto: título + "Copiar contactos". */
.box-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }

.contacts-copy-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
  border: 1px solid var(--card-border); border-radius: var(--radius-md); background: #fff;
  color: var(--text-title); font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
  white-space: nowrap; transition: border-color .15s, color .15s, background .15s;
}
.contacts-copy-btn:hover { border-color: var(--text-muted); }
.contacts-copy-btn .icon { width: 14px; height: 14px; }
.contacts-copy-btn.is-copied { border-color: var(--success-fg); color: var(--success-fg); background: var(--success-bg); }
.contact-list { display: flex; flex-direction: column; }
.person-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin-left: auto; flex-shrink: 0; }
/* Ocultar/mostrar (solo staff) */
.contact-visibility-form { margin: 0; }
.contact-visibility-btn {
  display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px;
  border: 1px solid var(--card-border); border-radius: var(--radius-pill); background: #fff;
  color: var(--text-body); font-size: var(--fs-xs); font-weight: 600; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.contact-visibility-btn .icon { width: 13px; height: 13px; }
.contact-visibility-btn:hover { border-color: var(--text-muted); color: var(--text-title); }
.contact-visibility-btn[data-visible="0"] { background: #FFF7ED; border-color: #FED7AA; color: #C2410C; }
.contact-group.is-hidden { opacity: .8; }
.contact-group.is-hidden .person-row .ico { background: #FFF7ED; color: #C2410C; }
.contact-hidden-note {
  display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 4px;
  font-size: var(--fs-xs); font-weight: 600; color: #C2410C;
  background: #FFF7ED; border: 1px solid #FED7AA; border-radius: var(--radius-sm); padding: 3px 8px;
}
.contact-hidden-note .icon { width: 12px; height: 12px; }
.contact-group + .contact-group { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--gray-bg); }
.person-row { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; margin-bottom: 2px; border-bottom: 1px solid var(--gray-bg); }
.person-row .ico {
  width: 30px; height: 30px; background: var(--gray-bg); border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; color: var(--text-body); flex-shrink: 0;
}
.person-info { flex: 1; min-width: 0; }
.person-row .p-name { font-size: var(--fs-md); font-weight: 600; color: var(--text-title); line-height: 1.25; }
.person-row .p-role { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 1px; line-height: 1.25; }
.person-row .p-updated { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 500; white-space: nowrap; flex-shrink: 0; }

.contact-line { display: flex; align-items: center; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--gray-bg); }
.contact-line:last-of-type { border-bottom: none; }
.contact-line .info { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.contact-line .ico {
  width: 24px; height: 24px; background: var(--gray-bg); border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; color: var(--text-body); flex-shrink: 0;
}
.contact-line .ico .icon { width: 13px; height: 13px; }
.contact-line .v {
  flex: 1; min-width: 0; color: var(--gold-dark); text-decoration: none; font-weight: 600;
  font-size: var(--fs-sm); line-height: 1.3; word-break: break-word;
}
.contact-line .v:hover { text-decoration: underline; }

.pill-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--radius-sm); font-size: var(--fs-xs); font-weight: 600;
  text-decoration: none; white-space: nowrap; flex-shrink: 0; border: none; cursor: pointer;
}
.pill-btn .icon { width: 13px; height: 13px; }
.pill-btn.email { background: var(--text-title); color: #fff; }
.pill-btn.email:hover { background: #1e2a3a; color: #fff; }
.pill-btn.wa { background: #25d366; color: #fff; }
.pill-btn.wa:hover { background: #1eb958; color: #fff; }

.outline-btn {
  display: flex; align-items: center; gap: 8px; margin-top: 8px; width: 100%;
  padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid var(--card-border);
  background: var(--success-bg); color: var(--text-title); font-size: var(--fs-sm); font-weight: 600;
  text-decoration: none; cursor: pointer; transition: border-color .15s;
}
.outline-btn:hover { border-color: var(--text-muted); color: var(--text-title); }
.outline-btn .icon { color: var(--text-body); }

.profile-copy-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: var(--radius-sm); background: transparent; border: none;
  cursor: pointer; color: var(--text-muted); flex-shrink: 0; padding: 0; transition: background .15s, color .15s;
}
.profile-copy-btn .icon { width: 12px; height: 12px; }
.profile-copy-btn:hover { background: var(--gray-bg); color: var(--text-body); }
.profile-copy-btn.is-copied { color: var(--success-fg); }

/* Videos institucionales + fotos */
.video-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.video-card { min-width: 0; }
.video-thumb {
  position: relative; display: block; width: 100%; padding: 0; border: none;
  aspect-ratio: 16 / 9; border-radius: var(--radius-md); overflow: hidden; background: var(--text-title); cursor: pointer;
}
/* La imagen va absoluta al contenedor y no con height: 100%: dentro de un
   <button> los porcentajes de alto no se resuelven en todos los motores. */
.video-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.video-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 45%); }
.video-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.92);
  display: flex; align-items: center; justify-content: center; z-index: 2; transition: transform .15s;
}
.video-thumb:hover .video-play { transform: translate(-50%, -50%) scale(1.08); }
.video-play .icon { width: 16px; height: 16px; color: var(--text-title); stroke: none; fill: currentColor; margin-left: 2px; }
.video-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; font-size: var(--fs-xs); font-weight: 500; color: var(--gold-dark); text-decoration: none; }
.video-link:hover { text-decoration: underline; }
.video-link .icon { width: 12px; height: 12px; }

.photo-thumb { display: block; aspect-ratio: 1 / 1; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--card-border); cursor: pointer; transition: opacity .15s; }
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-thumb:hover { opacity: .85; }

@media (max-width: 600px) {
  .docs-row { flex-direction: column; }
  .doc-btn { white-space: normal; }
  .person-row { flex-wrap: wrap; }
  .person-row .p-updated { flex-basis: 100%; margin-left: 40px; margin-top: 2px; }
  .contact-line { flex-direction: column; align-items: stretch; gap: 6px; }
  .pill-btn { margin-left: 32px; width: calc(100% - 32px); }
  .video-grid { grid-template-columns: 1fr; }
}

/* ── 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;
  box-shadow: var(--shadow-sm);
  transition: transform .15s, box-shadow .15s;
  color: inherit;
  text-decoration: none;
}
.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: var(--star); }
.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: var(--fs-3xl); margin-bottom: .4rem; opacity: .65; }
.stat-value { font-size: var(--fs-5xl); font-weight: var(--fw-bold); color: var(--navy); line-height: 1; margin-bottom: .3rem; }
.stat-label { font-size: var(--fs-xs); 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;
  box-shadow: var(--shadow-sm);
}
.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: var(--radius-pill);
  border: 1px solid var(--card-border);
  background: #fff;
  color: var(--text-body);
  font-size: var(--fs-sm);
  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: var(--fs-xl); font-weight: 700; color: var(--navy); line-height: 1.3; }
.mini-stat-label { font-size: var(--fs-xs); 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: var(--fs-sm);
  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: var(--fs-sm);
  background: var(--gray-bg);
  color: var(--text-body);
}
.activity-event-sesion .activity-event-icon { background: #e8eef7; color: var(--navy); }
.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: var(--fs-md); color: var(--text-title); }
.activity-event-text a { color: var(--navy); }
.activity-event-detail {
  font-size: var(--fs-xs);
  color: var(--text-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.activity-event-date {
  font-size: var(--fs-xs);
  color: var(--text-body);
  white-space: nowrap;
}

/* ── Pagination ──
   Pie de resultados del directorio (.results-footer / .pager) y, para las
   demás páginas que siguen usando .pagination de Bootstrap, el mismo
   acabado: botones blancos con borde, el activo relleno en azul. */
.results-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 24px; padding: 14px 20px;
  background: #fff; border: 1px solid var(--card-border); border-radius: var(--radius-md);
}
.results-count { font-size: var(--fs-md); color: var(--text-body); display: flex; align-items: center; gap: 10px; }
.results-count strong { color: var(--text-title); font-weight: 700; }
.results-count-sep { width: 1px; height: 14px; background: var(--card-border); }
.pager { display: flex; align-items: center; gap: 6px; }
.pager-pages { display: flex; align-items: center; gap: 6px; margin: 0 4px; }
.pager-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 38px; height: 38px; padding: 0 12px; border-radius: var(--btn-radius);
  background: #fff; border: 1px solid var(--card-border); color: var(--text-title);
  font-size: var(--fs-md); font-weight: 600; text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: border-color .15s, color .15s, background .15s, box-shadow .15s;
}
.pager-btn:hover { border-color: var(--text-muted); color: var(--text-title); }
.pager-btn.active {
  background: var(--btn-primary-bg);
  border-color: transparent; color: #fff;
}
.pager-btn .icon { width: 15px; height: 15px; stroke-width: 2.2; }
.pager-nav { padding: 0 14px; }
.pager-btn.is-disabled { color: #C4CAD3; pointer-events: none; background: var(--gray-bg); }
.pager-gap { color: var(--text-muted); padding: 0 2px; font-weight: 600; }
@media (max-width: 640px) {
  .results-footer { justify-content: center; text-align: center; padding: 12px; }
  .results-count { justify-content: center; flex-wrap: wrap; gap: 6px 9px; }
  .pager { width: 100%; justify-content: space-between; }
  .pager-pages {
    min-width: 0;
    max-width: calc(100vw - 132px);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .pager-pages::-webkit-scrollbar { display: none; }
  .pager-nav span { display: none; }
  .pager-nav { padding: 0; width: 38px; }
}

/* Bootstrap .pagination (paneles y demás listados) con el mismo acabado. */
.pagination { gap: 6px; }
.page-link {
  color: var(--text-title);
  border: 1px solid var(--card-border);
  min-width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 12px;
  font-size: var(--fs-md); font-weight: 600;
  text-align: center;
  border-radius: var(--btn-radius) !important;
  transition: border-color .15s, color .15s, background .15s;
}
.page-link:hover { color: var(--text-title); background-color: #fff; border-color: var(--text-muted); }
.page-link:focus { box-shadow: var(--focus-ring); }
.page-item.active .page-link {
  background: var(--btn-primary-bg);
  border-color: transparent;
  color: #fff;
}
.page-item.disabled .page-link { color: #C4CAD3; background: var(--gray-bg); }

/* ── Suppliers Grid (directory cards view) ──
   Mismo lenguaje que la ficha: tarjeta blanca con borde fino y radio 10,
   sin sombras; Inter para el nombre; pill, chips e íconos de línea. */
.suppliers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
  transition: opacity .15s ease;
}
.supplier-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  color: var(--text-title);
  transition: border-color .15s ease;
  overflow: hidden;
  font-size: var(--fs-md);
}
.supplier-card:hover { border-color: var(--text-muted); }
/* Verificado (Membresía Estándar vigente): sello con check (sin barra de
   color en el borde: se probó y no quedaba bien). Sin membresía: "Por
   confirmar" gris, chico, que no pese. */
.card-status {
  display: inline-flex; align-items: center; gap: 4px; margin-bottom: 6px;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--radius-xl); line-height: 1.2;
}
.card-status .icon { width: 11px; height: 11px; stroke-width: 2.6; }
.card-status.is-verified { background: #e8f8f2; color: var(--success-fg); }
.card-status.is-pending { background: transparent; color: var(--text-muted); border: 1px dashed var(--card-border); font-weight: 600; }

.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 {
  height: 132px; margin: 16px 16px 0;
  display: flex; align-items: center; justify-content: center;
  padding: 12px 16px; background: #fff;
  border: 1px solid var(--card-border); border-radius: var(--radius-md);
}
.supplier-card-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.supplier-card-initials {
  width: 56px; height: 56px; border-radius: var(--radius-md);
  background: var(--gray-bg); color: var(--text-body);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-xl); font-weight: 700; font-family: var(--font-sans);
}

.supplier-card-info { padding: 14px 16px 10px; flex: 1; }
.supplier-card-name {
  font-family: var(--font-sans); font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -0.2px;
  color: var(--text-heading); 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: var(--fs-sm); color: var(--text-paragraph); line-height: 1.55; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; min-height: 4.5em;
}

.supplier-card-meta { padding: 0 16px 14px; display: flex; gap: 8px 16px; flex-wrap: wrap; }
.supplier-card-meta span { font-size: var(--fs-sm); color: var(--text-body); display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.supplier-card-meta .icon { width: 13px; height: 13px; stroke-width: 1.8; color: var(--text-muted); }
.supplier-card-meta b { color: var(--text-title); font-weight: 600; }
/* En cuadrícula los dos grupos (.meta-col) son transparentes al layout. */
.meta-col { display: contents; }

.supplier-card-footer { padding: 12px 16px; border-top: 1px solid var(--gray-bg); display: flex; gap: 8px; align-items: center; }
/* En cuadrícula los 4 botones no entran en tarjetas angostas: «Seleccionar» se cortaba. */
.suppliers-grid:not(.list-view) .supplier-card-footer { flex-wrap: wrap; }
.btn-card-empty-hint { flex: 1; display: flex; align-items: center; font-size: var(--fs-xs); color: var(--text-muted); font-style: italic; }

.btn-card {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--btn-h-sm); padding: 0 10px; border-radius: var(--btn-radius); border: 1px solid transparent;
  font-size: var(--fs-xs); font-weight: 600; font-family: inherit; text-decoration: none; cursor: pointer;
  white-space: nowrap; transition: background .15s, border-color .15s, color .15s;
}
.btn-card .icon { width: 13px; height: 13px; }
/* Mensaje directo (antes "Llamar"): cuadrado de solo ícono; en la vista
   de lista lleva su texto. Abre el modal de consulta a esa sola empresa. */
.btn-card-phone, .btn-card-msg { flex: 0 0 var(--btn-h-sm); padding: 0; background: #fff; border-color: var(--card-border); color: var(--text-title); }
.btn-card-phone:hover, .btn-card-msg:hover { border-color: var(--navy-light); color: var(--navy); }
.btn-card-label { display: none; }
/* Cotizar lleva siempre su texto: su ícono es un casillero y solo no se entiende. */
.suppliers-grid .btn-card-quote .btn-card-label { display: inline; }
/* «Invitar» (2026-10-08, donde estaba «Seleccionar»): el mismo botón blanco, con su texto. */
.suppliers-grid .btn-card-invitar .btn-card-label { display: inline; }
.btn-card.btn-card-invitar {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: #fff; border: 1.5px solid #C3D3EC; color: var(--text-heading); font-weight: 700;
  box-shadow: 0 1px 2px rgba(1, 37, 110, .06), 0 2px 6px rgba(1, 37, 110, .06); cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .15s, color .15s;
}
.btn-card.btn-card-invitar .bi { font-size: 1.05em; line-height: 1; }
.btn-card.btn-card-invitar:hover { background: #fff; border-color: var(--text-heading); color: var(--text-heading); box-shadow: 0 4px 12px rgba(1, 37, 110, .14); transform: translateY(-1px); }
.btn-card.btn-card-invitar:focus-visible { outline: 2px solid var(--text-heading); outline-offset: 2px; }
.table-quote-cell .btn-card-invitar { width: 100%; white-space: nowrap; }
.pp-guardar-form { display: contents; }
/* «Tu participación»: quién la envió (2026-10-08). */
.conv-part-quien { display: flex; align-items: center; gap: 6px; margin: -4px 0 12px; font-size: var(--fs-md); color: var(--text-muted); }
.conv-part-quien strong { color: var(--text-title); }
/* Verde de WhatsApp: color de marca, solo acá para que se reconozca. */
.btn-card-wa { background: #25d366; color: #fff; }
.btn-card-wa:hover { background: #1eb958; color: #fff; }
.btn-card-contact { background: var(--btn-primary-bg); color: #fff; }
.btn-card-contact:hover { background: var(--btn-primary-bg-hover); color: #fff; }

/* ── Modal de consulta ── */
.contact-modal { border: 0; border-radius: var(--radius-lg); }
.contact-modal .modal-header { border-bottom: 1px solid var(--card-border); padding: 1rem 1.25rem; }
.contact-modal .modal-title { font-size: var(--fs-lg); 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: var(--fs-sm);
  color: var(--text-muted);
  background: var(--gray-bg);
  border-radius: var(--radius-md);
  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, minmax(0, 1fr)); } }
@media (max-width: 576px) {
  .suppliers-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 20px; }
  .supplier-card-logo { height: 116px; margin: 12px 12px 0; }
  .supplier-card-info { padding: 12px 14px 9px; }
  .supplier-card-desc { -webkit-line-clamp: 3; min-height: 0; }
  .supplier-card-meta { padding: 0 14px 12px; }
  .supplier-card-footer { padding: 10px 14px; }
}

/* ── Toggle de vista (cuadrícula / tabla) ── */
/* Selector de vista: control segmentado con un botón por vista
   (Tarjetas / Lista / Tabla), el activo relleno en azul. */
.view-switch {
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--gray-bg); border: 1px solid var(--card-border);
  border-radius: var(--radius-md); padding: 3px;
}
.view-switch-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 12px; border: none; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-body);
  font-size: var(--fs-sm); font-weight: 600; text-decoration: none; cursor: pointer;
  font-family: inherit; white-space: nowrap;
  transition: background .15s, color .15s, box-shadow .15s;
}
.view-switch-btn .icon { width: 15px; height: 15px; }
.view-switch-btn:hover { color: var(--text-title); background: rgba(255,255,255,.7); }
.view-switch-btn.active {
  background: var(--grad-navy);
  color: #fff;
}
.view-switch-btn.active:hover { color: #fff; }
@media (max-width: 576px) {
  .view-switch-btn span { display: none; }
  .view-switch-btn { padding: 0 10px; }
}
.view-toggle { display: flex; align-items: center; gap: 6px; }
.view-toggle-btn {
  background: #fff; border: 1px solid var(--card-border); border-radius: var(--radius-md);
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  color: var(--text-body); cursor: pointer; text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.view-toggle-btn .icon { width: 16px; height: 16px; transition: transform .18s ease; }
.view-toggle-btn:hover { border-color: var(--text-muted); color: var(--text-title); }
.view-toggle-btn:active .icon { transform: scale(.8); }
.view-toggle-btn.active { background: var(--gray-bg); border-color: var(--navy); color: var(--navy); }

/* Vista en lista: cada proveedor es una fila, en todos los tamaños. Abajo
   hay dos ajustes progresivos -- ni bien no entran las dos columnas de
   datos lado a lado (@media max-width:991px) se apilan una sobre otra
   pero la fila sigue siendo fila; recién en celular angosto
   (@media max-width:600px) el logo se achica del todo. Nunca vuelve al
   formato apilado de tarjeta, que es justo lo que la distingue de
   "Tarjetas". */
.suppliers-grid.list-view { display: flex; flex-direction: column; gap: 12px; }
.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: 190px; min-width: 190px; height: 110px; margin: 16px 0 16px 16px; padding: 12px 16px;
}
.suppliers-grid.list-view .supplier-card-info { padding: 16px; 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: var(--fs-base); }
.suppliers-grid.list-view .supplier-card-desc { display: block; overflow: visible; min-height: auto; }
.suppliers-grid.list-view .supplier-card-meta { flex: 1.7; display: flex; align-items: center; padding: 16px 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; border-left: 1px solid var(--gray-bg); }
.suppliers-grid.list-view .supplier-card-footer {
  flex-direction: column; justify-content: center; align-items: stretch;
  border-top: none; border-left: 1px solid var(--gray-bg); width: 160px; gap: 8px; padding: 16px;
}
.suppliers-grid.list-view .btn-card { flex: 0 0 auto; width: 100%; }
.suppliers-grid.list-view .btn-card-phone, .suppliers-grid.list-view .btn-card-msg { width: 100%; }
.suppliers-grid.list-view .btn-card-label { display: inline; }
@media (max-width: 991px) {
  .suppliers-grid.list-view .supplier-card-logo { width: 150px; min-width: 150px; }
  .suppliers-grid.list-view .supplier-card-meta { flex-direction: column; align-items: stretch; padding: 12px 16px; gap: 6px; }
  .suppliers-grid.list-view .meta-col { flex-direction: row; flex-wrap: wrap; gap: 6px 16px; }
  .suppliers-grid.list-view .meta-col + .meta-col { padding-left: 0; border-left: none; }
  .suppliers-grid.list-view .supplier-card-footer { width: 120px; }
}

/* ── 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 {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  /* 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%;
  min-width: 1080px;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  font-size: var(--fs-md);
  color: var(--text-title);
}
/* Cabecera: mismas mayúsculas chicas que los títulos de las tarjetas
   (.box-title / .filter-bar .form-label). */
.suppliers-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: #fff;
  border-bottom: 1px solid var(--card-border);
  padding: 14px 16px;
  text-align: left;
  white-space: nowrap;
  font-family: var(--font-sans);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .7px; text-transform: uppercase;
  color: var(--text-muted);
}
.suppliers-table thead th:first-child { border-top-left-radius: 10px; padding-left: 20px; }
.suppliers-table thead th:last-child { border-top-right-radius: 10px; padding-right: 20px; }
.suppliers-table tbody td {
  padding: 16px;
  border-bottom: 1px solid var(--gray-bg);
  vertical-align: middle;
  color: var(--text-body);
  line-height: 1.5;
}
.suppliers-table tbody td:first-child { padding-left: 20px; }
.suppliers-table tbody td:last-child { padding-right: 20px; }
.suppliers-table tbody tr:last-child td { border-bottom: none; }
.suppliers-table tbody tr { transition: background .12s; }
.suppliers-table tbody tr:hover { background: #F9FAFC; }

/* Logo: misma caja con borde que en las tarjetas, solo que más chica. */
.table-logo-cell { width: 124px; }
.table-logo-wrap {
  display: flex; align-items: center; justify-content: center;
  width: 104px; height: 64px; padding: 6px 10px;
  background: #fff; border: 1px solid var(--card-border); border-radius: var(--radius-md);
  transition: border-color .15s, box-shadow .15s;
}
.table-logo-wrap:hover { border-color: var(--navy-light); }
.table-logo { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.table-logo-initials {
  width: 44px; height: 44px; border-radius: var(--radius-md);
  background: var(--gray-bg); color: var(--text-body); font-weight: 700; font-size: var(--fs-sm);
  display: flex; align-items: center; justify-content: center;
}

.table-name-cell { min-width: 180px; max-width: 250px; }
.table-supplier-name {
  display: block; font-family: var(--font-sans); font-size: var(--fs-md); font-weight: 600;
  color: var(--text-title); text-decoration: none; line-height: 1.35;
}
.table-supplier-name:hover { color: var(--navy-light); }
.table-verified {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 6px;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .5px; text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--radius-xl); background: #e8f8f2; color: var(--success-fg);
}
.table-verified .icon { width: 11px; height: 11px; stroke-width: 2.4; }
.table-pending {
  display: inline-flex; align-items: center; margin-top: 6px;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .5px; text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--radius-xl); color: var(--text-muted); border: 1px dashed var(--card-border);
}

.table-desc-cell { min-width: 220px; max-width: 360px; }
.table-clients-cell { min-width: 170px; max-width: 280px; font-size: var(--fs-sm); }
.table-clamp {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.table-empty { color: #C4CAD3; }
.table-num { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text-title); }
.table-region { white-space: nowrap; color: var(--text-title); font-weight: 500; }
.table-region .icon { color: var(--text-muted); margin-right: 5px; vertical-align: -2px; }
.table-workers { white-space: nowrap; }
.table-action-head { width: 120px; }
.table-view-btn { white-space: nowrap; }
.table-view-btn .icon { width: 14px; height: 14px; transition: transform .15s; }
.table-view-btn:hover .icon { transform: translateX(2px); }

.table-sort-link {
  color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 5px;
  transition: color .15s;
}
.table-sort-link:hover { color: var(--navy-light); }
.table-sort-icons { display: inline-flex; flex-direction: column; gap: 0; }
.table-sort-icons .icon { width: 11px; height: 11px; stroke-width: 2.6; color: #C4CAD3; margin: -2px 0; }
.table-sort-icons .icon.active { color: var(--navy-light); }
/* Hasta ~1500px el contenedor mide 1240px: se aprietan paddings y logo
   para que las nueve columnas entren sin scroll horizontal. */
@media (max-width: 1499px) {
  .suppliers-table { font-size: var(--fs-sm); }
  .suppliers-table thead th { padding: 12px 12px; font-size: var(--fs-xs); }
  .suppliers-table tbody td { padding: 14px 12px; }
  .table-logo-cell { width: 100px; }
  .table-logo-wrap { width: 88px; height: 56px; padding: 5px 8px; }
  .table-desc-cell { min-width: 200px; max-width: 280px; }
  .table-clients-cell { min-width: 150px; max-width: 220px; }
  .table-name-cell { min-width: 160px; max-width: 210px; }
  .table-action-head { width: 100px; }
}

@media (max-width: 900px) {
  .suppliers-table { font-size: var(--fs-sm); }
}

/* Lista en celular: sigue siendo una fila (logo chico a la izquierda,
   nombre a la derecha) -- no vuelve a apilarse como tarjeta, que es
   justamente lo que la distingue de "Tarjetas". La descripción y el
   detalle no entran de costado, así que bajan como su propia franja
   debajo, angosta y de ancho completo. */
@media (max-width: 600px) {
  .suppliers-grid.list-view .supplier-card-link {
    flex-wrap: wrap; align-items: flex-start; gap: 0;
  }
  .suppliers-grid.list-view .supplier-card-logo {
    width: 76px; min-width: 76px; height: 76px; margin: 10px; padding: 6px;
  }
  .suppliers-grid.list-view .supplier-card-info { flex: 1; min-width: 0; padding: 10px 10px 10px 0; }
  .suppliers-grid.list-view .supplier-card-name { font-size: var(--fs-md); }
  .suppliers-grid.list-view .supplier-card-desc { display: none; }
  .suppliers-grid.list-view .supplier-card-meta {
    flex-basis: 100%; flex-direction: column; padding: 0 10px 10px; gap: 6px;
  }
  .suppliers-grid.list-view .meta-col { flex-direction: row; flex-wrap: wrap; gap: 6px 16px; }
  .suppliers-grid.list-view .meta-col + .meta-col { padding-left: 0; border-left: none; }
  .suppliers-grid.list-view .supplier-card-footer {
    flex-direction: row; width: auto; border-left: none; border-top: 1px solid var(--gray-bg);
  }
  .suppliers-grid.list-view .btn-card { flex: 1; width: auto; }
  .suppliers-grid.list-view .btn-card-label { display: none; }
}

.badge-destacado {
  display: inline-flex;
  align-items: center;
  background: var(--star);
  color: #fff;
  border: 1px solid #dd9515;
  border-radius: var(--tag-radius);
  padding: 2px 8px;
  font-size: var(--tag-fs);
  font-weight: 700;
}

/* ── Inter en títulos de sección y componente ── */

.filter-card-header, .panel-table-header, .supplier-name {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
}
/* .supplier-card-name va aparte: 20px / 600 (ver .supplier-card-name arriba). */

/* ── Responsive ── */
@media (max-width: 768px) {

  .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; }
}
@media (max-width: 576px) {
  .footer-stats { padding: 1.35rem 0 .65rem; }
  .footer-stat-item { padding: .65rem .4rem; }
  .footer-stat-num { font-size: var(--fs-4xl); }
  .footer-main { padding: 2rem 0 1.5rem; }
  .footer-cols { gap: 1.35rem; }
  .footer-categories { padding: 1.15rem 0; }
}

/* ── 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%;
}
/* En el popup «Historial» de la ficha (celular) los 320px no entran. */
.mining-suggest-dropdown { min-width: 0; 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); }
}

/* Título de cada grupo (Búsquedas populares, Clasificación por categorías,
   Proveedores): con una línea debajo que lo separa de sus resultados y,
   cuando viene después de otro grupo, aire y otra línea arriba para que
   se note dónde termina un grupo y empieza el siguiente. */
.suggest-section-label {
  margin: 0 .75rem .25rem;
  padding: .55rem .5rem .4rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gold-dark);
  border-bottom: 1px solid var(--card-border);
}
.suggest-item + .suggest-section-label,
.suggest-item-spelling + .suggest-section-label {
  margin-top: .6rem;
  padding-top: .8rem;
  border-top: 1px solid var(--card-border);
}

.suggest-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .3rem 1.25rem;
  font-size: var(--fs-md);
  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: var(--fs-md);
  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); }
/* Etiqueta en el desplegable: a la derecha, cuántas fichas la tienen. */
.suggest-item-tag { justify-content: space-between; }
.suggest-count {
  flex-shrink: 0; font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted);
  background: var(--gray-bg); border-radius: var(--radius-pill); padding: 0 .5rem; line-height: 1.5;
}

/* Etiquetas que nombran lo buscado, arriba del listado del directorio. */
.dir-etiquetas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: var(--fs-sm); }
.dir-etiquetas-titulo { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text-title); margin-right: 2px; }
.dir-etiquetas-titulo .bi { color: var(--gold-dark); }
.dir-etiqueta {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 6px 4px 11px; border-radius: var(--radius-pill);
  background: #fff; border: 1px solid var(--card-border); color: var(--text-title);
  text-decoration: none; font-weight: 500; transition: border-color .15s, background .15s;
}
.dir-etiqueta:hover { border-color: var(--navy-light); background: var(--gold-pale); color: var(--navy); }
.dir-etiqueta span {
  font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted);
  background: var(--gray-bg); border-radius: var(--radius-pill); padding: 0 7px; line-height: 1.6;
}
.dir-etiquetas-nota { flex: 0 0 100%; font-size: var(--fs-xs); color: var(--text-muted); }
.suggest-item-spelling { border-bottom: 1px solid rgba(0, 0, 0, .06); }
/* La separación entre grupos la pone el título siguiente (ver .suggest-section-label). */

/* ── 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: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
}
.chatbot-header-sub {
  font-size: var(--fs-sm);
  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: var(--fs-base);
  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: var(--radius-lg);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  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: var(--radius-md);
  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: var(--fs-base); }
.chatbot-supplier-card span { color: var(--text-muted); font-size: var(--fs-sm); }
.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: var(--radius-pill);
  padding: .18rem .6rem;
  font-size: var(--fs-xs);
  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: var(--radius-xl);
  padding: .6rem 1.1rem;
  font-size: var(--fs-base);
  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-light);
  color: #fff;
  flex-shrink: 0;
  cursor: pointer;
  font-size: var(--fs-lg);
}
.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
   ═══════════════════════════════════════════════════════════════════ */

/* ── 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;
  }
  [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: var(--navy); font-size: var(--fs-3xl);
}
.libro-reclamaciones-texto { display: flex; flex-direction: column; font-size: var(--fs-sm); letter-spacing: .02em; }
.libro-reclamaciones-texto small { font-size: var(--fs-xs); opacity: .75; text-transform: uppercase; letter-spacing: .08em; }
.intro-block .libro-reclamaciones-badge { width: 3.2rem; height: 3.2rem; font-size: var(--fs-4xl); background: var(--navy); color: #fff; }

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

/* Botón «Guardar» de la ficha (.pp-btn.btn-card-quote, el nombre viene del
   antiguo botón «Cotizar», retirado el 2026-10-12): blanco; guardado, se
   rellena en azul con el marcador. El selector doble le gana a los colores
   de .pp-btn. */
.btn-card-quote,
:is(.btn-card, .pp-btn).btn-card-quote {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #fff;
  border: 1.5px solid #C3D3EC;
  color: var(--text-heading);
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(1, 37, 110, .06), 0 2px 6px rgba(1, 37, 110, .06);
  cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .15s, color .15s;
}
:is(.btn-card, .pp-btn).btn-card-quote .bi { font-size: 1.05em; line-height: 1; }
:is(.btn-card, .pp-btn).btn-card-quote:hover:not(:disabled) {
  background: #fff; border-color: var(--text-heading); color: var(--text-heading);
  box-shadow: 0 4px 12px rgba(1, 37, 110, .14); transform: translateY(-1px);
}
:is(.btn-card, .pp-btn).btn-card-quote:focus-visible { outline: 2px solid var(--text-heading); outline-offset: 2px; }
:is(.btn-card, .pp-btn).btn-card-quote.is-selected {
  background: var(--text-heading); border-color: var(--text-heading); color: #fff;
  box-shadow: 0 4px 12px rgba(1, 37, 110, .22);
}
:is(.btn-card, .pp-btn).btn-card-quote.is-selected:hover { background: #083188; border-color: #083188; color: #fff; }
:is(.btn-card, .pp-btn).btn-card-quote:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* En la ficha 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; }

/* 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: var(--radius-pill);
  background: var(--gold);
  color: var(--navy);
  font-size: var(--fs-xs);
  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: var(--radius-sm);
  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: var(--fs-md);
  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: var(--fs-md); margin-top: 2px; }
.quote-selection-meta {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  margin-top: 4px; font-size: var(--fs-sm); color: var(--text-body);
}
.quote-selection-warn { color: var(--warning-fg); }
.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: var(--fs-md);
  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; }
}

/* ── Fotos de la galería de una ficha ("Editar mi perfil" y el panel) ── */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.photo-grid-item {
  position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius-md); overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .1); background: #f3f4f6;
}
.photo-grid-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-grid-item form { margin: 0; }
.photo-grid-status {
  position: absolute; left: 6px; bottom: 6px; font-size: var(--fs-xs); font-weight: 700;
  padding: 2px 6px; border-radius: var(--radius-xs); line-height: 1.3;
}
.photo-grid-delete {
  position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; padding: 0;
  border: none; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--danger-fg);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}
.photo-grid-delete:hover { background: #fff; }

/* ─── Tarjeta de estado (403, 404, ficha bloqueada) ─────────────── */
.status-card {
  text-align: center; padding: 3rem 1.5rem;
  background: #fff; border: 1px solid var(--card-border); border-radius: var(--radius-lg);
  border-top: 4px solid var(--gold);
}
.status-card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 80px; height: 80px; border-radius: 50%;
  background: var(--gold-pale); border: 2px solid var(--gold-light);
}
.status-card-icon .bi { font-size: var(--fs-5xl); color: var(--gold-dark); }
.status-card-title { color: var(--text-heading); font-family: var(--font-sans); }
.status-card-text { font-size: var(--fs-md); max-width: 440px; margin-left: auto; margin-right: auto; line-height: 1.65; }
.status-card-actions { max-width: 280px; margin: 0 auto; }
.status-card-link { color: var(--navy); }

/* ─── Página de categoría ───────────────────────────────────────── */
.category-hero { background: var(--gray-bg); border: 1px solid var(--card-border); }
.category-hero-title { color: var(--text-heading); letter-spacing: -.01em; }
.category-hero-text { color: var(--text-body); line-height: 1.7; }
.category-others { border-top: 1px solid var(--card-border); }
.category-others-title { color: var(--text-title); }
.category-chip { background: var(--gold-pale); color: var(--navy); padding: .5rem .9rem; font-weight: 500; }

/* ─── Páginas legales ───────────────────────────────────────────── */
.legal-content { font-size: var(--fs-base); line-height: 1.7; }
/* Logos y nombres ya difuminados en el servidor (suppliers/difuminado.py). */
.directory-teaser-img-logo { display: block; width: 104px; height: 62px; border-radius: var(--radius-md); object-fit: cover; }
.directory-teaser-img-nombre { display: block; width: 180px; max-width: 100%; height: 22px; opacity: .85; }

/* ─── Zona de adjuntos del mensaje directo (_contact_modal.html). Los
   nombres quote-* vienen del pop-up de cotización, retirado. ─── */

.quote-drop {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 18px 14px; border: 2px dashed var(--card-border); border-radius: var(--radius-lg);
  background: var(--gray-bg); text-align: center; cursor: pointer; font-size: var(--fs-md); color: var(--text-body);
  transition: border-color .15s, background .15s;
}
.quote-drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.quote-drop .bi { font-size: var(--fs-4xl); color: #d0342c; }
.quote-drop strong { color: var(--navy); }
.quote-drop small { color: var(--text-muted); font-size: var(--fs-xs); }
.quote-drop:hover, .quote-drop.is-encima { border-color: var(--navy-light); background: var(--gold-pale); }
.quote-drop.is-lleno { opacity: .55; pointer-events: none; }
.quote-files { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.quote-files li {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  border: 1px solid var(--card-border); border-radius: var(--radius-md); font-size: var(--fs-sm);
}
.quote-files li .bi-file-earmark-pdf { color: #d0342c; font-size: var(--fs-lg); }
.quote-file-nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-title); }
.quote-files small { color: var(--text-muted); white-space: nowrap; }
.quote-files button { border: none; background: transparent; color: var(--text-muted); width: 26px; height: 26px; border-radius: var(--radius-sm); }
.quote-files button:hover { background: #fdecec; color: var(--danger-fg); }
#cotizacionModal .invalid-msg, #contactModal .invalid-msg { color: var(--danger-solid); font-size: var(--fs-sm); margin-top: .3rem; font-weight: 500; }
#cotizacionModal .invalid-msg:empty, #contactModal .invalid-msg:empty { display: none; }
/* Mensaje directo: la misma zona de archivos, pero acepta imágenes además de PDF. */
#contactModal .quote-drop .bi-paperclip { color: var(--navy); }
.quote-files li .bi-file-earmark-image { color: var(--navy); font-size: var(--fs-lg); }
.staff-consulta-archivos { list-style: none; padding: 0; }
.quote-exito { text-align: center; padding: 2rem 1.5rem; }
.quote-exito .bi { font-size: 3rem; color: #12b76a; display: block; margin-bottom: .5rem; }

/* ─── Portada sin cuenta: buscador grande (_hero_buscador.html) ───
   Buscador de 920px con botón azul sólido, sobre un azul entero del mismo
   tono que la barra superior (pedido 2026-10-07; antes un degradado vertical
   que se aclaraba hasta un azul medio, antes blanco liso, antes el azul de
   la marca en diagonal, y antes una foto).
   Todo el bloque queda azul: título, subtítulo y «Búsquedas populares» van
   en blanco; las etiquetas son píldoras blancas opacas. */
.hero-directorio {
  /* Sin overflow: hidden: el desplegable del autocompletado tiene que poder
     salir por debajo del bloque. */
  position: relative; z-index: 5; color: #fff;
  /* El tono con que se VE .minder-navbar: sus dos azules al 92% sobre el
     fondo claro de la página (#1E3D6F y #1D3755). Con los azules puros el
     buscador quedaba más oscuro que la barra. */
  background: linear-gradient(135deg, var(--primary-700) 0%, #1D3755 100%);
}
.hero-directorio-inner { position: relative; z-index: 1; padding: 3rem 1rem 3.5rem; text-align: center; }
.hero-directorio-title {
  font-family: var(--font-sans); font-size: var(--fs-3xl); font-weight: 700;
  letter-spacing: -.02em; margin: 0 0 .5rem; color: #fff;
}
.hero-directorio-sub { font-size: var(--fs-sm); color: #dbe6f5; margin: 0 auto 2rem; max-width: 800px; }

/* Caja de búsqueda (diseño pasado el 2026-10-01): píldora blanca con el botón
   adentro y, alrededor, un borde luminoso que va cambiando de color (ámbar,
   azul, celeste). El halo es un elemento aparte detrás del formulario: el
   desplegable de sugerencias sigue anclado a la píldora. */
.hero-search-wrap { position: relative; max-width: 920px; margin: 0 auto 2rem; }
.hero-search-beam {
  position: absolute; inset: -2px; border-radius: var(--radius-pill); pointer-events: none;
  background: linear-gradient(90deg, rgba(245, 158, 11, .4), rgba(59, 130, 246, .9), rgba(56, 189, 248, .4), rgba(245, 158, 11, .6));
  background-size: 300% 300%; opacity: .75; filter: blur(2px);
  animation: hero-search-beam 4s linear infinite; transition: opacity .3s, filter .3s;
}
.hero-search-wrap:hover .hero-search-beam, .hero-search-wrap:focus-within .hero-search-beam { opacity: 1; filter: blur(3px); }
@keyframes hero-search-beam { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.hero-search {
  display: flex; align-items: center; gap: 6px;
  padding: 8px; border-radius: var(--radius-pill); background: #fff;
  box-shadow: 0 25px 50px -12px rgba(10, 38, 71, .25);
  transition: box-shadow .3s;
}
.hero-search:focus-within { box-shadow: 0 0 25px rgba(59, 130, 246, .35); }
.hero-search-field { position: relative; flex: 1; display: flex; align-items: center; min-width: 0; }
.hero-search-field > .icon {
  position: absolute; left: 22px; width: 22px; height: 22px; color: #94a3b8; pointer-events: none; transition: color .2s;
}
.hero-search:focus-within .hero-search-field > .icon { color: var(--primary-700); }
.hero-search-input {
  width: 100%; height: 56px; padding: 0 1rem 0 58px; border: none; outline: none;
  border-radius: var(--radius-pill); font-size: var(--fs-lg); color: #1e293b; background: transparent;
}
.hero-search-input::placeholder { color: var(--text-muted); }
.hero-search-btn {
  display: inline-flex; align-items: center; gap: .5rem; height: 56px; padding: 0 2rem; border: none;
  /* El mismo azul del navbar y del fondo del buscador (2026-10-07). */
  border-radius: var(--btn-radius); background: var(--primary-700); color: #fff; flex-shrink: 0;
  font-size: var(--fs-lg); font-weight: 600; cursor: pointer; box-shadow: 0 4px 6px -1px rgba(10, 38, 71, .2);
  transition: background-color .2s, transform .2s, box-shadow .2s;
}
.hero-search-btn:hover { background: var(--btn-primary-bg-hover); transform: scale(1.02); box-shadow: 0 10px 15px -3px rgba(10, 38, 71, .25); }
.hero-search-btn:active { transform: scale(.98); }
@media (prefers-reduced-motion: reduce) {
  .hero-search-beam { animation: none; }
  .hero-search-btn:hover, .hero-search-btn:active { transform: none; }
}
.hero-search-btn .icon { width: 17px; height: 17px; }
/* El desplegable del autocompletado, debajo del campo grande. */
.hero-search-field [data-autocomplete-dropdown] { top: calc(100% + 6px); left: 0; right: 0; text-align: left; }

.hero-populares-title { font-size: var(--fs-md); color: #fff; margin: 0 0 1rem; }
/* Del mismo ancho que el buscador (920px): las etiquetas no sobresalen por
   los costados de la barra. */
.hero-populares-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; max-width: 920px; margin: 0 auto; }
.hero-popular {
  display: inline-flex; align-items: center; gap: .4rem; max-width: 300px;
  padding: .35rem .8rem; border-radius: var(--radius-pill); font-size: var(--fs-xs); text-decoration: none;
  color: var(--navy-light); background: #fff; border: 1px solid rgba(11, 45, 99, .14);
  box-shadow: 0 2px 6px rgba(10, 38, 71, .12);
  transition: background .2s, border-color .2s;
}
.hero-popular span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-popular .icon { width: 11px; height: 11px; color: var(--text-muted); flex-shrink: 0; }
.hero-popular-todas { font-weight: var(--fw-semibold); }
.footer-categories-list .footer-categories-todas { font-weight: var(--fw-semibold); }
.hero-popular:hover { background: var(--gold-pale); border-color: var(--gold); color: var(--navy-light); }

@media (max-width: 768px) {
  .hero-directorio-inner { padding: 1.6rem 1rem 2.4rem; }
  /* En celular sigue siendo una píldora; el botón queda solo con la lupa. */
  .hero-search-wrap { margin-bottom: 1.5rem; }
  .hero-search { padding: 5px; }
  /* 16px para que iPhone no acerque la página al tocar el campo; el
     relleno se achica un poco para que el ejemplo siga entrando entero. */
  .hero-search-input { height: 46px; padding-left: 40px; padding-right: 4px; font-size: var(--fs-lg); }
  .hero-search-field > .icon { left: 14px; width: 18px; height: 18px; }
  .hero-search-btn { height: 46px; width: 46px; padding: 0; justify-content: center; font-size: 0; gap: 0; }
  .hero-search-btn .icon { width: 19px; height: 19px; }
}
@media (max-width: 576px) {
  .hero-popular:nth-child(n+6) { display: none; }  /* en celular, solo las 5 primeras */
  /* En celular el buscador va arriba de todo: título y subtítulo empujaban
     el campo a media pantalla y, con el teclado abierto, las sugerencias
     quedaban tapadas. */
  .hero-directorio-title,
  .hero-directorio-sub { display: none; }
  .hero-directorio-inner { padding-top: .6rem; }
}

/* ─── Cuadro de sugerencias de los buscadores (search-autocomplete.js) ───
   Diseño sobrio y del mismo ancho que el buscador donde aparece: se ancla a
   la píldora completa (barra superior o buscador grande de la portada), no
   al campo de texto de adentro, así ocupa exactamente su ancho. */
.navbar-search .search-bar,
.hero-search { position: relative; }
.navbar-search .search-bar-wrap,
.hero-search-field { position: static; }

/* Con el id en el selector: la regla general de más arriba usa
   #searchSuggestions (width: fit-content; min-width: 320px) y le ganaba. */
.navbar-search #searchSuggestions,
.hero-search #searchSuggestions,
.navbar-search [data-autocomplete-dropdown],
.hero-search [data-autocomplete-dropdown] {
  left: 0; right: 0; width: auto; min-width: 0; max-width: none;
  top: calc(100% + 8px);
  text-align: left;
}
.navbar-search [data-autocomplete-dropdown],
.hero-search [data-autocomplete-dropdown],
#searchSuggestions {
  padding: 6px 0;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 40px rgba(10, 38, 71, .16), 0 2px 6px rgba(10, 38, 71, .06);
  max-height: min(460px, 70vh);
  /* La lista puede ser larga: el scroll queda contenido acá y su canal
     conserva un espacio estable para que los textos no salten al aparecer. */
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) transparent;
}

/* Scrollbar del buscador: una guía azul fina que acompaña la paleta del sitio
   y deja aire contra las esquinas redondeadas del cuadro de sugerencias. */
#searchSuggestions::-webkit-scrollbar { width: 11px; }
#searchSuggestions::-webkit-scrollbar-track {
  background: transparent;
  margin-block: 10px;
}
#searchSuggestions::-webkit-scrollbar-thumb {
  min-height: 44px;
  background: var(--gold);
  background-clip: padding-box;
  border: 3px solid transparent;
  border-radius: var(--radius-pill);
}
#searchSuggestions::-webkit-scrollbar-thumb:hover { background-color: var(--gold-dark); }
#searchSuggestions::-webkit-scrollbar-thumb:active { background-color: var(--navy-light); }
#searchSuggestions::-webkit-scrollbar-corner { background: transparent; }
#searchSuggestions.active { animation: suggest-dropdown-in .14s ease-out; }

#searchSuggestions .suggest-section-label {
  padding: 12px 20px 6px;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em;
  color: var(--text-muted);
  border-top: 1px solid var(--gray-bg);
}
#searchSuggestions .suggest-section-label:first-child { border-top: none; padding-top: 8px; }

#searchSuggestions .suggest-item {
  gap: .6rem;
  padding: 9px 20px;
  font-size: var(--fs-md); line-height: 1.35;
  color: var(--text-title);
  border-left: none;
  opacity: 1; animation: none;
  transition: background .12s ease;
}
#searchSuggestions .suggest-item:hover,
#searchSuggestions .suggest-item.is-active {
  background: var(--gray-bg);
  color: var(--text-title);
  padding-left: 20px;
}
#searchSuggestions .suggest-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#searchSuggestions .suggest-item strong { color: var(--navy); font-weight: 700; }
/* Proveedores en mayúscula sostenida (razón social): un poco más chicos. */
#searchSuggestions .suggest-item-supplier { font-size: var(--fs-md); }
#searchSuggestions .suggest-item-spelling { border-bottom: 1px solid var(--gray-bg); color: var(--text-body); }
/* Historial de búsquedas (sin sesión, al tocar la barra vacía): cada una con
   su × para quitarla y "Borrar" para vaciarlo. */
#searchSuggestions .suggest-recent-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#searchSuggestions .suggest-clear { padding: 0; border: 0; background: none; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--gold-dark); }
#searchSuggestions .suggest-clear:hover { text-decoration: underline; }
#searchSuggestions .suggest-recent { display: flex; align-items: center; }
#searchSuggestions .suggest-recent .suggest-item { flex: 1; min-width: 0; }
#searchSuggestions .suggest-item-recent .icon { color: var(--text-muted); }
#searchSuggestions .suggest-remove { flex-shrink: 0; width: 28px; height: 28px; margin-right: 12px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text-muted); font-size: var(--fs-xl); line-height: 1; }
#searchSuggestions .suggest-remove:hover { background: var(--gray-bg); color: var(--text-title); }

/* ── Menú lateral (includes/_sidebar.html, static/js/sidebar.js) ──
   Solo con sesión iniciada. En PC ocupa una columna fija bajo la barra de
   arriba y el body le deja el espacio con padding; la barra lo recupera con
   margen negativo para seguir a todo el ancho, como en Gmail. Contraído
   (html.sb-collapsed) queda en íconos. En celular es un cajón. */
:root {
  --sb-w-open: 244px;
  --sb-w-closed: 72px;
  --sb-w: var(--sb-w-open);
  /* Altura de la barra de arriba en PC; base.html la corrige con la real
     apenas se pinta la barra, y sidebar.js la sigue al cambiar de ancho. */
  --nav-h: 79px;
}
html.sb-collapsed { --sb-w: var(--sb-w-closed); }

.sb-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: var(--fs-3xl);
  transition: background-color .15s ease;
}
.sb-toggle:hover,
.sb-toggle:focus-visible { background: rgba(255,255,255,.12); outline: 2px solid rgba(255,255,255,.75); outline-offset: 2px; }

.minder-sidebar {
  position: fixed;
  left: 0;
  top: var(--nav-h);
  bottom: 0;
  z-index: 1020;
  width: var(--sb-w);
  background: #fff;
  border-right: 1px solid var(--card-border);
  transition: width .2s ease, transform .22s ease;
}
.sb-scroll {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 10px 14px;
  /* Barra de desplazamiento discreta (2026-10-13): la gris de siempre no
     iba con el menú. Fina, sin carril y transparente; aparece suave solo
     con el mouse encima o al navegar con teclado. */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.sb-scroll:hover,
.sb-scroll:focus-within { scrollbar-color: rgba(16, 24, 40, .16) transparent; }
.sb-scroll::-webkit-scrollbar { width: 6px; }
.sb-scroll::-webkit-scrollbar-track { background: transparent; }
.sb-scroll::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
.sb-scroll:hover::-webkit-scrollbar-thumb,
.sb-scroll:focus-within::-webkit-scrollbar-thumb { background: rgba(16, 24, 40, .16); }
.sb-list { list-style: none; margin: 0; padding: 0; }
.sb-list > li { margin-bottom: 2px; }
.sb-bottom { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--card-border); }
.sb-group { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--card-border); }

.sb-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 42px;
  padding: 0 14px 0 15px;
  border: 0;
  border-radius: var(--radius-xl);
  background: transparent;
  color: var(--text-title);
  font-size: var(--fs-md);
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}
.sb-link > .bi:first-child { flex: 0 0 20px; font-size: var(--fs-xl); text-align: center; color: var(--navy-light); }
/* Ícono de línea del sitio (sprite _line_icons.html), del mismo tamaño que los .bi. */
.sb-link > .sb-icon:first-child { flex: 0 0 20px; width: 20px; height: 20px; stroke-width: 1.6; color: var(--navy-light); }
.sb-link:hover { background: var(--gray-bg); color: var(--navy); }
.sb-link:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: -2px; }
.sb-link.active { background: var(--gold-pale); color: var(--navy); font-weight: 700; }
.sb-link:disabled { opacity: .5; cursor: default; background: transparent; }
.sb-text { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; transition: opacity .16s ease .04s; }
.sb-badge {
  flex: 0 0 auto;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  border-radius: var(--radius-md);
  background: var(--navy-mid);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}
.sb-badge-danger { background: var(--danger-solid); }
.sb-caret { font-size: var(--fs-xs); color: var(--text-muted); transition: transform .2s ease, opacity .16s ease .04s; }
.sb-group-toggle[aria-expanded="true"] .sb-caret { transform: rotate(180deg); }
.sb-sub .sb-link { min-height: 36px; font-size: var(--fs-md); }
.sb-sub .sb-link > .bi:first-child { font-size: var(--fs-lg); }

/* Panel de Pendientes (junto al menú; en celular, centrado bajo la barra). */
.sb-pop {
  position: fixed;
  top: calc(var(--nav-h) + 10px);
  left: calc(var(--sb-w) + 10px);
  z-index: 1050;
  width: 380px;
  max-height: calc(100vh - var(--nav-h) - 20px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px rgba(4, 24, 54, .22);
  animation: sb-pop-in .16s ease-out;
}
.sb-pop[hidden] { display: none; }
@keyframes sb-pop-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.sb-pop-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 12px 12px 18px;
  border-bottom: 1px solid var(--card-border);
}
.sb-pop-title { margin: 0; color: var(--text-heading); font-size: var(--fs-lg); font-weight: 700; }
.sb-pop-sub { margin: 2px 0 0; color: var(--text-muted); font-size: var(--fs-sm); }
.sb-pop-close {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
}
.sb-pop-close:hover { background: var(--gray-bg); color: var(--text-title); }
.sb-pop-list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; }
.sb-pop-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 10px 12px;
  border-radius: var(--radius-lg);
  color: var(--text-title);
  text-decoration: none;
  transition: background-color .15s ease;
}
.sb-pop-item:hover,
.sb-pop-item:focus-visible { background: var(--gray-bg); color: var(--navy); }
.sb-pop-ico {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--gold-pale);
  color: var(--navy-light);
  font-size: var(--fs-lg);
}
.sb-pop-ico-buyer { background: var(--success-bg); color: var(--success-fg); }
.sb-pop-ico-reclamacion { background: var(--danger-bg); color: var(--danger-fg); }
.sb-pop-ico-attachment,
.sb-pop-ico-certification { background: var(--warning-bg); color: var(--warning-fg); }
.sb-pop-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.sb-pop-body strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-md); font-weight: 600; }
.sb-pop-body small { margin-top: 2px; color: var(--text-muted); font-size: var(--fs-xs); }
.sb-pop-arrow { flex: 0 0 auto; color: #c0c7d2; font-size: var(--fs-sm); }
.sb-pop-empty { padding: 28px 20px; text-align: center; color: var(--text-muted); }
.sb-pop-empty .sb-pop-ico { margin: 0 auto 10px; background: var(--success-bg); color: var(--success-fg); }
.sb-pop-empty p { margin: 0; font-size: var(--fs-md); }
.sb-pop-foot { padding: 10px 18px 14px; border-top: 1px solid var(--card-border); }
.sb-pop-foot a { display: inline-flex; align-items: center; gap: 6px; color: var(--gold-dark); font-size: var(--fs-md); font-weight: 600; text-decoration: none; }
.sb-pop-foot a:hover { color: var(--navy); }
@media (min-width: 992px) and (max-width: 1279.98px) {
  .sb-pop { left: calc(var(--sb-w-closed) + 10px); }
}
@media (max-width: 991.98px) {
  .sb-pop { left: 12px; right: 12px; width: auto; max-width: 440px; margin-inline: auto; }
}

.sb-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: rgba(6, 20, 40, .45);
}
.sb-backdrop[hidden] { display: none; }

@media (min-width: 992px) {
  body.has-sidebar { padding-left: var(--sb-w); transition: padding-left .2s ease; }
  /* La barra de arriba ocupa todo el ancho y el ☰ queda sobre los íconos. */
  body.has-sidebar .minder-navbar { margin-left: calc(-1 * var(--sb-w)); transition: margin-left .2s ease; }
  body.has-sidebar .minder-navbar > .container,
  body.has-sidebar .directory-navbar.buyer-navbar > .container {
    max-width: none;
    padding-left: 14px;
    padding-right: 24px;
    grid-template-columns: auto auto minmax(220px, 1fr) auto;
  }
  body.has-sidebar .sb-toggle { grid-column: 1; grid-row: 1; margin-right: 6px; }
  body.has-sidebar .directory-navbar .navbar-brand { grid-column: 2; }
  body.has-sidebar .directory-navbar .navbar-search { grid-column: 3; }
  body.has-sidebar .directory-navbar .navbar-right { grid-column: 4; }
}

/* Contraído: solo íconos. En pantallas anchas lo decide la persona con el ☰
   (html.sb-collapsed); entre 992 y 1279px, con el menú abierto las tarjetas
   quedaban muy apretadas, así que ahí va siempre en íconos y el ☰ lo abre
   por encima del contenido.
   Sin saltos al plegar/desplegar: los íconos NO se mueven (con el padding de
   siempre ya quedan en el centro de la columna de 72px) y los textos se
   desvanecen en vez de desaparecer de golpe; el ancho del menú los recorta.
   Antes se centraban con justify-content y, mientras el ancho se animaba,
   saltaban ~50px a la derecha y volvían. */
@media (min-width: 1280px) {
  html.sb-collapsed .minder-sidebar .sb-text,
  html.sb-collapsed .minder-sidebar .sb-caret { opacity: 0; transition-delay: 0s; }
  html.sb-collapsed .minder-sidebar .sb-sub { display: none; }
  html.sb-collapsed .minder-sidebar .sb-badge {
    position: absolute; top: 3px; left: 30px;
    min-width: 17px; height: 17px; padding: 0 4px; font-size: var(--fs-xs); line-height: 17px;
  }
}
@media (min-width: 992px) and (max-width: 1279.98px) {
  :root, html.sb-collapsed { --sb-w: var(--sb-w-closed); }
  html.sb-open .minder-sidebar { width: var(--sb-w-open); z-index: 1045; box-shadow: 0 0 30px rgba(6, 20, 40, .25); }
  html:not(.sb-open) .minder-sidebar .sb-text,
  html:not(.sb-open) .minder-sidebar .sb-caret { opacity: 0; transition-delay: 0s; }
  html:not(.sb-open) .minder-sidebar .sb-sub { display: none; }
  html:not(.sb-open) .minder-sidebar .sb-badge {
    position: absolute; top: 3px; left: 30px;
    min-width: 17px; height: 17px; padding: 0 4px; font-size: var(--fs-xs); line-height: 17px;
  }
}

@media (max-width: 991.98px) {
  .minder-sidebar {
    top: 0;
    z-index: 1045;
    width: min(290px, 85vw);
    transform: translateX(-100%);
    box-shadow: 0 0 30px rgba(6, 20, 40, .25);
  }
  html.sb-open .minder-sidebar { transform: none; }
  html.sb-open body { overflow: hidden; }
  /* ☰ a la derecha, donde estaba el menú de siempre en celular. */
  .minder-navbar .sb-toggle { grid-column: 3; grid-row: 1; width: 44px; height: 44px; border-radius: var(--radius-md);
    background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); font-size: var(--fs-3xl); }
}
@media (max-width: 480px) {
  .minder-navbar .sb-toggle { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .minder-sidebar, body.has-sidebar, body.has-sidebar .minder-navbar { transition: none; }
}

/* ── Convocatorias (templates/suppliers/convocatorias/) ── */
.conv-page { padding-top: 26px; padding-bottom: 48px; max-width: 900px; }
.conv-page-narrow { max-width: 820px; }
.conv-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.conv-page-title { margin: 0 0 4px; color: var(--text-heading); font-size: var(--fs-4xl); font-weight: 700; }
.conv-page-sub { margin: 0; color: var(--text-paragraph); font-size: var(--fs-base); max-width: 560px; }
.conv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--btn-radius); padding: 9px 20px; font-size: var(--fs-md); font-weight: 600; }
.conv-btn-lg { padding: 12px 28px; font-size: var(--fs-base); }
.conv-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; color: var(--text-muted); font-size: var(--fs-md); font-weight: 600; text-decoration: none; }
.conv-back:hover { color: var(--navy); }

.conv-list { display: flex; flex-direction: column; gap: 14px; }
/* «Todas las convocatorias abiertas» bajo las del comprador (2026-10-07). */
.conv-otras { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--card-border); }
.conv-otras-head { align-items: flex-start; }
.conv-otras .conv-page-title { font-size: var(--fs-2xl); }
.conv-card,
.conv-panel {
  display: block;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  color: inherit;
  text-decoration: none;
}
.conv-panel + .conv-panel { margin-top: 16px; }
.conv-card { transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.conv-card:hover { border-color: var(--gold); box-shadow: 0 10px 28px rgba(10, 38, 71, .09); color: inherit; transform: translateY(-1px); }
.conv-card.is-closed { background: #fbfcfd; }
.conv-card-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.conv-avatar {
  flex: 0 0 40px; width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: var(--radius-lg); background: var(--grad-navy); color: #fff; font-weight: var(--fw-bold); font-size: var(--fs-lg);
}
.conv-author { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; color: var(--text-title); font-size: var(--fs-md); font-weight: 700; line-height: 1.3; }
.conv-author small { color: var(--text-muted); font-size: var(--fs-sm); font-weight: 500; }
.conv-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  padding: 3px var(--tag-px); border-radius: var(--tag-radius); background: var(--neutral-bg); color: var(--neutral-fg); font-size: var(--tag-fs); font-weight: var(--tag-fw);
}
.conv-chip.is-open { background: var(--success-bg); color: var(--success-fg); }
.conv-chip.is-done { background: var(--gold-pale); color: var(--navy-light); }
.conv-card-title { margin: 0 0 6px; color: var(--text-heading); font-size: var(--fs-xl); font-weight: var(--fw-bold); }
.conv-facts { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 8px; color: var(--text-muted); font-size: var(--fs-sm); font-weight: 600; }
.conv-facts span { display: inline-flex; align-items: center; gap: 6px; }
.conv-facts .is-past { color: var(--danger-fg); }
.conv-title + .conv-facts { margin-bottom: 14px; }
.conv-card-text { margin: 0; color: var(--text-body); font-size: var(--fs-md); line-height: 1.55; }
.conv-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--neutral-bg); }
.conv-meta { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: var(--fs-sm); font-weight: 600; }
.conv-card-cta { display: inline-flex; align-items: center; gap: 6px; color: var(--gold-dark); font-size: var(--fs-md); font-weight: 700; }

.conv-title { margin: 4px 0 10px; color: var(--text-heading); font-size: var(--fs-3xl); font-weight: var(--fw-bold); }
.conv-text { color: var(--text-body); font-size: var(--fs-base); line-height: 1.65; }
.conv-text p:last-child { margin-bottom: 0; }
.conv-media { margin-top: 16px; overflow: hidden; border-radius: var(--radius-lg); background: var(--gray-bg); }
.conv-media img { display: block; width: 100%; max-height: 520px; object-fit: contain; }
.conv-contact { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.conv-contact-oculto { display: flex; align-items: center; gap: 6px; margin: 16px 0 0; font-size: var(--fs-sm); color: var(--text-muted); }
.conv-contact a {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px;
  border: 1px solid var(--card-border); border-radius: var(--radius-pill); background: #fff;
  color: var(--navy); font-size: var(--fs-md); font-weight: 600; text-decoration: none;
}
.conv-contact a:hover { border-color: var(--gold); background: var(--gold-pale); }
.conv-contact a.is-whatsapp { border-color: #b7ebc6; color: var(--success-fg); }
.conv-contact a.is-whatsapp:hover { background: var(--success-bg); border-color: #25D366; }
.conv-contact-sm a { padding: 5px 12px; font-size: var(--fs-sm); }
.conv-owner-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--neutral-bg); }
.conv-owner-actions form { margin: 0; }
.conv-owner-actions .btn-light { background: var(--gray-bg); border-color: var(--card-border); color: var(--text-title); }

.conv-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.conv-section-head small { color: var(--text-muted); font-size: var(--fs-sm); }
.conv-section-title { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--text-heading); font-size: var(--fs-xl); font-weight: var(--fw-bold); }
.conv-count { display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 8px; border-radius: var(--radius-md); background: var(--gold-pale); color: var(--navy-light); font-size: var(--fs-sm); }
.conv-cta { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.conv-cta p { margin: 4px 0 0; color: var(--text-muted); font-size: var(--fs-md); }
.conv-closed-note { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--text-muted); font-size: var(--fs-md); }

.conv-form { display: flex; flex-wrap: wrap; gap: 0 16px; margin-top: 12px; }
.conv-form-part { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--neutral-bg); }
.conv-field { flex: 1 1 100%; margin-bottom: 14px; }
.conv-field.is-half { flex: 1 1 calc(50% - 8px); min-width: 220px; }
.conv-field .form-label { color: var(--text-title); font-size: var(--fs-md); font-weight: 600; }
/* Cuentas de la empresa cliente (staff): una casilla por cuenta, como los
   cuadros de check de Bootstrap (la casilla a la izquierda, el texto al lado). */
.conv-cuentas { min-width: 0; margin: 0 0 14px; padding: 0; border: 0; }
.conv-cuentas legend { float: none; width: auto; margin-bottom: 6px; }
.conv-cuenta { margin-bottom: 4px; }
/* Interruptor «Recibir un correo…» de cada cuenta que sigue la convocatoria. */
.conv-avisos { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; font-size: var(--fs-md); }
.conv-avisos .form-check-label { color: var(--text-title); cursor: pointer; }
.conv-avisos .form-check-label span { color: var(--text-muted); overflow-wrap: anywhere; }
.conv-cuenta .form-check-label { color: var(--text-title); font-size: var(--fs-md); cursor: pointer; }
.conv-cuenta .form-check-label span { color: var(--text-muted); }
.conv-form-actions { flex: 1 1 100%; display: flex; justify-content: flex-end; }
/* Cuadros de check del formulario de convocatoria (2026-10-07). */
.conv-usar-correo { margin-top: 8px; font-size: var(--fs-sm); }
.conv-usar-correo .form-check-label { color: var(--text-title); cursor: pointer; }
.conv-usar-correo .form-check-label span { color: var(--text-muted); overflow-wrap: anywhere; }
.conv-field .form-control[readonly] { background: #F5F7FA; color: var(--text-muted); }
.conv-aviso-correo {
  margin: 0; padding: 12px 14px 12px 42px; border: 1px solid var(--card-border); border-radius: var(--radius-md); background: #F8FAFC;
}
.conv-aviso-correo .form-check-input { margin-left: -28px; cursor: pointer; }
.conv-aviso-correo .form-check-label { color: var(--text-title); font-size: var(--fs-md); font-weight: 600; cursor: pointer; }
.conv-aviso-correo .form-check-label .bi { color: var(--navy-light); margin-right: 6px; }

.conv-files { list-style: none; margin: 12px 0 14px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.conv-files li { display: flex; align-items: center; gap: 6px; }
.conv-files li > a {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border: 1px solid var(--card-border); border-radius: var(--radius-md);
  color: var(--text-title); font-size: var(--fs-md); font-weight: 600; text-decoration: none;
}
.conv-files li > a:hover { border-color: var(--gold); background: var(--gold-pale); }
.conv-files li > a .bi { color: var(--navy-light); font-size: var(--fs-lg); }
.conv-files small { margin-left: auto; color: var(--text-muted); font-weight: 500; white-space: nowrap; }
.conv-files form { margin: 0; }
.conv-docs { margin: 16px 0 0; }
.conv-file-del { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--text-muted); }
.conv-file-del:hover { background: var(--danger-bg); color: var(--danger-fg); }

.conv-part { padding: 16px 0; border-top: 1px solid var(--neutral-bg); }
.conv-part:first-of-type { border-top: 0; padding-top: 4px; }
.conv-part-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.conv-part-head small { color: var(--text-muted); font-size: var(--fs-sm); white-space: nowrap; }
.conv-part-name { color: var(--navy); font-size: var(--fs-base); font-weight: var(--fw-bold); text-decoration: none; }
.conv-part-name .bi { font-size: var(--fs-xs); opacity: .6; }
.conv-part-name:hover { color: var(--gold-dark); }

.conv-empty { padding: 40px 20px; text-align: center; background: #fff; border: 1px dashed var(--card-border); border-radius: var(--radius-lg); color: var(--text-muted); }
.conv-empty-sm { padding: 24px 16px; border: 0; }
.conv-empty p { margin: 0 0 14px; }
.conv-empty-ico { display: inline-grid; place-items: center; width: 48px; height: 48px; margin-bottom: 10px; border-radius: var(--radius-lg); background: var(--gold-pale); color: var(--navy-light); font-size: var(--fs-2xl); }

/* Cliente asignado (convocatoria gestionada por MINDER por encargo de un comprador) */
.conv-btn-sm { padding: 6px 14px; font-size: var(--fs-sm); }
.conv-chip.is-client { background: var(--info-bg); color: var(--info-fg); margin-left: 8px; }
.conv-client { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; padding: 10px 14px; border-radius: var(--radius-lg); background: var(--info-bg); color: var(--info-fg); font-size: var(--fs-md); line-height: 1.5; }
.conv-client .bi { flex: 0 0 auto; margin-top: 2px; }

/* Etapa de una postulación */
.conv-estado { display: inline-flex; align-items: center; padding: 3px var(--tag-px); border-radius: var(--tag-radius); background: var(--neutral-bg); color: var(--neutral-fg); font-size: var(--tag-fs); font-weight: var(--tag-fw); white-space: nowrap; }
.conv-estado.is-pend, .conv-chip.is-pend { background: #F4F3FF; color: #5925DC; }
.conv-chip.is-pend { margin-left: 8px; }
.conv-estado.is-eval { background: var(--warning-bg); color: var(--warning-fg); }
.conv-estado.is-pre { background: var(--info-bg); color: var(--info-fg); }
.conv-estado.is-ok { background: var(--success-bg); color: var(--success-fg); }
.conv-estado.is-no { background: var(--danger-bg); color: var(--danger-fg); }

/* «Avances» de la convocatoria (detalle.html; hasta el 2026-10-08 en el
   panel de seguimiento): la línea de tiempo del proceso. */
.seg-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.seg-ev { position: relative; display: flex; gap: 12px; padding: 0 0 16px 0; }
.seg-ev::before { content: ''; position: absolute; left: 15px; top: 32px; bottom: 0; width: 2px; background: var(--neutral-bg); }
.seg-ev:last-child::before { display: none; }
.seg-ev-ico { flex: 0 0 32px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--neutral-bg); color: var(--neutral-fg); font-size: var(--fs-base); }
.seg-ev.is-postulacion .seg-ev-ico, .seg-ev.is-creada .seg-ev-ico { background: var(--gold-pale); color: var(--navy-light); }
.seg-ev.is-estado .seg-ev-ico { background: var(--info-bg); color: var(--info-fg); }
.seg-ev.is-nota .seg-ev-ico { background: var(--warning-bg); color: var(--warning-fg); }
.seg-ev.is-cliente .seg-ev-ico { background: var(--success-bg); color: var(--success-fg); }
.seg-ev-tipo { color: var(--text-title); font-size: var(--fs-sm); font-weight: 700; }
.seg-ev-detalle { color: var(--text-body); font-size: var(--fs-sm); line-height: 1.45; overflow-wrap: anywhere; }
.seg-ev-fecha { display: block; margin-top: 2px; color: var(--text-muted); font-size: var(--fs-xs); }

@media (max-width: 576px) {
  .conv-page { padding-top: 16px; }
  .conv-card, .conv-panel { padding: 16px; border-radius: var(--radius-lg); }
  .conv-page-head .conv-btn, .conv-cta .conv-btn { width: 100%; }
  .conv-title { font-size: var(--fs-2xl); }
  .conv-form-actions .conv-btn { width: 100%; }
  .conv-section-head .conv-btn-sm { width: auto; }
}

/* ── Banda «Buscamos proveedores» de la portada (_banda_portada.html) ──
   Diseño «Destacada + tarjetas» del HTML «Abastemin Inicio» (2026-10-08),
   en Alibaba Sans como todo el sitio. Fondo azul (el mismo del navbar),
   cifras en una tira, pestañas, una destacada blanca con el anillo de lo
   que queda del plazo y a la derecha el resto en filas blancas. El
   amarillo es el acento del diseño (registrarse, barrita y puntos). ── */
.cvb {
  --cvb-navy: var(--primary-700); --cvb-ink: var(--text-strong); --cvb-muted: var(--text-muted); --cvb-soft: #c3cbdb;
  --cvb-amarillo: #f5b800; --cvb-rojo: #c62a2f; --cvb-verde: var(--success-fg);
  margin-top: 8px; padding: 56px 0 64px; background: var(--cvb-navy); color: #fff;
  font-family: var(--font-sans);
}
.cvb [hidden] { display: none !important; }
.cvb-inner { display: flex; flex-direction: column; gap: 28px; }
.cvb-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.cvb-copy { display: flex; flex-direction: column; gap: 12px; max-width: 620px; min-width: 0; }
.cvb-pill {
  align-self: flex-start; display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px;
  border-radius: var(--radius-pill); background: rgba(255, 255, 255, .12);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.cvb-dot { width: 8px; height: 8px; border-radius: 50%; background: #e5484d; animation: cvb-pulso 1.6s ease-in-out infinite; }
@keyframes cvb-pulso { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.cvb-title { margin: 0; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.06; font-weight: 800; letter-spacing: -.035em; color: #fff; text-wrap: balance; }
.cvb-sub { margin: 0; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.45; font-weight: 600; color: var(--cvb-soft); text-wrap: pretty; }

.cvb-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.cvb-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: var(--radius-lg); background: rgba(255, 255, 255, .08); }
.cvb-tab {
  display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 8px 0 16px; border: 0; border-radius: var(--radius-md);
  background: transparent; color: #fff; font: inherit; font-size: var(--fs-md); font-weight: 700; cursor: pointer; transition: background .2s;
}
.cvb-tab span {
  min-width: 24px; height: 24px; padding: 0 7px; border-radius: var(--radius-pill); display: grid; place-items: center;
  background: rgba(255, 255, 255, .14); color: #fff; font-size: var(--fs-xs); font-weight: var(--fw-bold);
}
.cvb-tab:hover { background: rgba(255, 255, 255, .08); }
.cvb-tab.is-on { background: #fff; color: var(--cvb-navy); }
.cvb-tab.is-on span { background: var(--cvb-navy); }
.cvb-tab:focus-visible, .cvb-btn:focus-visible, .cvb-flecha:focus-visible, .cvb-punto:focus-visible { outline: 2px solid var(--cvb-amarillo); outline-offset: 2px; }
.cvb-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.cvb-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px; height: var(--btn-h-md); padding: 0 18px; border-radius: var(--btn-radius);
  font-size: var(--fs-md); font-weight: 700; text-decoration: none; transition: background .2s;
}
.cvb-btn .bi { font-size: var(--fs-xl); line-height: 1; }
.cvb-btn.is-borde { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); color: #fff; }
.cvb-btn.is-borde:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.cvb-btn.is-amarillo { gap: 8px; padding: 0 20px; background: var(--cvb-amarillo); color: #1a1300; font-weight: var(--fw-bold); }
.cvb-btn.is-amarillo:hover { background: #ffc935; color: #1a1300; }

.cvb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 16px; align-items: stretch; }
.cvb-feat { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cvb-card {
  flex: 1; display: flex; flex-direction: column; gap: 22px; padding: 28px; border-radius: var(--radius-lg);
  background: #fff; color: var(--cvb-ink); text-decoration: none; box-shadow: 0 20px 48px rgba(0, 0, 0, .28);
  transition: transform .25s; animation: cvb-entra .35s ease-out both;
}
.cvb-card:hover { color: var(--cvb-ink); transform: translateY(-3px); }
@keyframes cvb-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cvb-card-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cvb-card-tags { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cvb-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.cvb-badge {
  display: flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--radius-sm); background: var(--cvb-navy); color: #fff;
  font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase;
}
.cvb-badge.is-pronto { background: var(--cvb-rojo); }
.cvb-nueva { padding: 4px 9px; border-radius: var(--radius-sm); background: #e6f6ec; color: var(--cvb-verde); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.cvb-autor { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--fs-md); font-weight: 600; color: var(--cvb-muted); }
.cvb-autor-ini { flex: none; width: 20px; height: 20px; border-radius: var(--radius-sm); background: var(--cvb-navy); color: #fff; display: grid; place-items: center; font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.cvb-ring {
  flex: none; width: 116px; height: 116px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--cvb-c) var(--cvb-p), #eaedf2 0);
}
.cvb-ring-in { width: 96px; height: 96px; border-radius: 50%; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.cvb-ring-num { font-size: 40px; line-height: 1; font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--cvb-c); }
.cvb-ring-num.is-texto { font-size: var(--fs-4xl); letter-spacing: -.02em; }
.cvb-ring-unit { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cvb-muted); }
.cvb-card-title { margin: 0; font-size: clamp(20px, 1.8vw, 24px); line-height: 1.3; font-weight: var(--fw-bold); letter-spacing: -.02em; color: inherit; text-wrap: pretty; }
.cvb-card-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 18px; box-shadow: inset 0 1px 0 #eaedf2; }
.cvb-card-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--fs-md); font-weight: 500; color: var(--cvb-muted); }
.cvb-card-meta span, .cvb-fila-meta span { display: flex; align-items: center; gap: 4px; }
.cvb-card-meta .bi { font-size: var(--fs-base); color: var(--cvb-navy); }
.cvb-card-cta { display: flex; align-items: center; gap: 6px; height: var(--btn-h-md); padding: 0 20px; border-radius: var(--btn-radius); background: var(--cvb-navy); color: #fff; font-size: var(--fs-md); font-weight: 700; }

/* Bajo la destacada: la barrita de 5 s, la posición, los puntos y las flechas. */
.cvb-nav { display: flex; align-items: center; gap: 14px; }
.cvb-nav-barra { flex: 1; height: 3px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .15); overflow: hidden; }
.cvb-nav-barra i { display: block; width: 0; height: 100%; border-radius: var(--radius-pill); background: var(--cvb-amarillo); }
.cvb-nav-barra i.is-corriendo { animation: cvb-barra 5s linear forwards; }
.cvb-feat.is-pausa .cvb-nav-barra i { animation-play-state: paused; }
@keyframes cvb-barra { from { width: 0; } to { width: 100%; } }
.cvb-nav-pos { font-size: var(--fs-sm); font-weight: 700; color: var(--cvb-soft); font-variant-numeric: tabular-nums; }
.cvb-puntos { display: flex; align-items: center; gap: 6px; }
.cvb-punto { width: 8px; height: 8px; padding: 0; border: 0; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .3); cursor: pointer; transition: width .25s, background .25s; }
.cvb-punto.is-on { width: 22px; background: var(--cvb-amarillo); }
.cvb-flechas { display: flex; gap: 6px; }
.cvb-flecha { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .14); color: #fff; font-size: var(--fs-lg); cursor: pointer; transition: background .2s; }
.cvb-flecha:hover { background: rgba(255, 255, 255, .24); }
.cvb-flecha:disabled { background: rgba(255, 255, 255, .05); color: rgba(255, 255, 255, .3); cursor: default; }

.cvb-lista { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cvb-fila {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 16px 12px 12px;
  border-radius: var(--radius-lg); background: #fff; color: var(--cvb-ink); text-decoration: none; box-shadow: 0 6px 20px rgba(0, 0, 0, .18); transition: transform .25s;
}
.cvb-fila:hover { color: var(--cvb-ink); transform: translateX(4px); }
/* La que está en la destacada: con el borde amarillo del acento. */
.cvb-fila[aria-current] { box-shadow: inset 0 0 0 2px var(--cvb-amarillo), 0 6px 20px rgba(0, 0, 0, .18); }
.cvb-fila[aria-current] .cvb-fila-ir { background: var(--cvb-amarillo); color: #1a1300; }
.cvb-dias {
  width: 58px; height: 52px; flex: none; border-radius: var(--radius-lg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: var(--cvb-navy); color: #fff; font-size: var(--fs-2xl); line-height: 1; font-weight: var(--fw-bold);
}
.cvb-dias.is-pronto { background: var(--cvb-rojo); }
.cvb-dias small { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; opacity: .85; }
.cvb-fila-txt { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.cvb-fila-titulo { font-size: var(--fs-base); line-height: 1.35; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cvb-fila-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: var(--fs-sm); font-weight: 500; color: var(--cvb-muted); }
.cvb-fila-meta .bi { font-size: var(--fs-md); }
.cvb-fila-meta .cvb-nueva { padding: 2px 7px; border-radius: var(--radius-sm); font-size: var(--fs-xs); }
.cvb-fila-ir { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #f1f3f7; color: var(--cvb-navy); font-size: var(--fs-xl); }
.cvb-vacio { flex: 1; display: grid; place-items: center; padding: 24px; border-radius: var(--radius-lg); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); font-size: var(--fs-md); font-weight: 500; color: var(--cvb-soft); text-align: center; }
.cvb-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 2px 0; }
.cvb-pager-rango { font-size: var(--fs-sm); font-weight: 600; color: var(--cvb-soft); }

@media (prefers-reduced-motion: reduce) {
  .cvb-dot, .cvb-card { animation: none; }
  .cvb-card:hover, .cvb-fila:hover { transform: none; }
}
@media (max-width: 640px) {
  .cvb { padding: 36px 0 40px; }
  .cvb-inner { gap: 22px; }
  .cvb-tabs { width: 100%; }
  .cvb-tab { flex: 1; justify-content: center; padding: 0 6px 0 10px; font-size: var(--fs-sm); }
  .cvb-ctas { width: 100%; }
  .cvb-btn { flex: 1; padding: 0 14px; }
  .cvb-card { padding: 20px; gap: 18px; }
  .cvb-ring { width: 92px; height: 92px; }
  .cvb-ring-in { width: 76px; height: 76px; }
  .cvb-ring-num { font-size: var(--fs-5xl); }
  .cvb-ring-num.is-texto { font-size: var(--fs-3xl); }
  .cvb-card-cta { width: 100%; justify-content: center; }
  .cvb-nav { gap: 10px; }
  .cvb-nav-pos { display: none; }
  /* En celular el título de la fila va en dos líneas: en una no se entendía. */
  .cvb-fila-titulo { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}

/* ── Seguimiento de correos de cotización (Mis cotizaciones y panel) ── */
.segui-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 10px; }
.segui-kpi {
  display: flex; flex-direction: column; gap: 2px; padding: 14px 16px;
  background: #fff; border: 1px solid var(--card-border); border-radius: var(--radius-lg);
}
.segui-kpi-lbl { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; }
.segui-kpi-val { font-size: var(--fs-4xl); font-weight: var(--fw-bold); color: var(--text-title); line-height: 1.15; }
.segui-kpi-sub { font-size: var(--fs-sm); color: var(--text-muted); }
.segui-kpi.is-abierto .segui-kpi-lbl .bi { color: var(--navy-light); }
.segui-kpi.is-clic .segui-kpi-lbl .bi, .segui-kpi.is-clic .segui-kpi-val { color: var(--success-fg); }
.segui-kpi.is-rebote .segui-kpi-lbl .bi { color: var(--danger-fg); }
.segui-nota { display: flex; gap: 6px; align-items: flex-start; font-size: var(--fs-sm); color: var(--text-muted); margin: 0 0 20px; }
.segui-sol { background: #fff; border: 1px solid var(--card-border); border-radius: var(--radius-lg); padding: 16px 18px; margin-bottom: 12px; }
.segui-sol-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.segui-sol-fecha { font-size: var(--fs-sm); font-weight: 700; color: var(--text-muted); }
.segui-sol-msg { font-size: var(--fs-md); color: var(--text-body); margin-top: 2px; }
.segui-sol-adj { flex-shrink: 0; font-size: var(--fs-sm); color: var(--text-muted); }
.segui-envios { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--neutral-bg); }
.segui-envios li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding: 9px 0; border-bottom: 1px solid var(--neutral-bg); }
.segui-envios li:last-child { border-bottom: 0; }
.segui-prov { font-weight: 700; font-size: var(--fs-md); color: var(--text-title); }
.segui-estado { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 8px; }
.segui-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px var(--tag-px); border-radius: var(--tag-radius); font-size: var(--tag-fs); font-weight: var(--tag-fw); line-height: 1.5; background: var(--neutral-bg); color: var(--neutral-fg); white-space: nowrap; }
.segui-chip .bi { font-size: var(--fs-xs); }
.segui-chip.is-clic { background: var(--success-bg); color: var(--success-fg); }
.segui-chip.is-abierto { background: var(--gold-pale); color: var(--navy-light); }
.segui-chip.is-rebotado { background: var(--danger-bg); color: var(--danger-fg); }
.segui-chip.is-no_enviado { background: var(--warning-bg); color: var(--warning-fg); }
.segui-when { font-size: var(--fs-xs); color: var(--text-muted); }
.segui-historial { margin-top: 8px; font-size: var(--fs-sm); }
.segui-historial summary { cursor: pointer; color: var(--gold-dark); font-weight: 600; }
.segui-historial ul { list-style: none; margin: 6px 0 0; padding: 0 0 0 4px; }
.segui-historial li { padding: 2px 0; }
.segui-historial li.is-robot { opacity: .6; }
@media (max-width: 767.98px) {
  .segui-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .segui-kpi-val { font-size: var(--fs-3xl); }
  .segui-estado { justify-content: flex-start; }
}

/* ── Mis mensajes (templates/suppliers/mis_cotizaciones.html; el staff ve la
   misma página por empresa desde el panel).
   Mismo lenguaje que la ficha del proveedor (profile.css): cajas blancas con
   borde fino y radio de 10px, títulos de sección en versalitas, botones de
   40px y una sola familia (Alibaba Sans) en tres pesos: 400, 500 y 700. Sin
   degradados, sin pesos 800/900 y sin glifos que la fuente no tenga (las
   flechas de ordenar son SVG). Las piezas comunes llevan prefijo co-; lo
   propio de la página, cz-. (La página Cotizar, qz-, se retiró el 2026-10-12.)
   Colores de estado validados con el validador de dataviz: clic verde,
   abierto azul, sin correo ámbar, rebote rojo; "sin abrir" es el fondo vacío
   de la barra. Siempre con su nombre al lado: nunca el color solo. El embudo
   usa una rampa ordinal de un solo azul. ── */
.cz {
  --co-ink: var(--text-strong); --co-soft: var(--neutral-fg); --co-mute: var(--text-muted);
  --co-line: #e8ecf1; --co-line-soft: #f2f5f8; --co-bg-soft: #f8fafb;
  --co-accent: var(--primary-700); --co-accent-hover: var(--primary-800);
  --co-blue: var(--primary-600); --co-blue-soft: var(--primary-50);
  --co-green: var(--success-fg); --co-red: var(--danger-fg); --co-red-soft: var(--danger-bg); --co-amber: var(--warning-fg);
  --co-radius: var(--radius-md);
  --cz-clic: #079455; --cz-abierto: #2a78d6; --cz-no_enviado: #eda100; --cz-rebotado: #e34948; --cz-vacio: #eef1f5;
  --cz-f1: #86b6ef; --cz-f2: #3987e5; --cz-f3: #256abf; --cz-f4: #104281;
  max-width: 1180px; color: var(--co-ink); font-size: var(--fs-md); line-height: 1.5;
}

/* Cabecera de página: título, bajada y acciones a la derecha. */
.co-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 20px; margin-bottom: 18px; }
.co-title { margin: 0 0 4px; font-size: var(--fs-3xl); font-weight: 700; line-height: 1.2; color: var(--text-heading); }
.co-sub { margin: 0; max-width: 640px; font-size: var(--fs-md); color: var(--co-soft); }
.co-head-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Botones: los mismos de la ficha (.pp-btn). */
.co-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--btn-h-md); padding: 0 18px; border: 1px solid transparent; border-radius: var(--btn-radius); font: inherit; font-size: var(--fs-md); font-weight: 700; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.co-btn .bi { font-size: var(--fs-base); line-height: 1; }
.co-btn-primary { background: var(--btn-primary-bg); border-color: var(--btn-primary-bg); color: #fff; }
.co-btn-primary:hover { background: var(--btn-primary-bg-hover); border-color: var(--btn-primary-bg-hover); color: #fff; }
.co-btn-outline { background: #fff; border-color: var(--btn-secondary-border); color: var(--btn-secondary-fg); }
.co-btn-outline:hover { border-color: var(--btn-secondary-hover-border); background: var(--btn-secondary-hover-bg); color: var(--primary-800); }
.co-btn-sm { height: var(--btn-h-sm); padding: 0 14px; font-size: var(--fs-sm); }
.co-link { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; font: inherit; font-size: var(--fs-sm); font-weight: 700; color: var(--co-blue); text-decoration: none; cursor: pointer; }
.co-link:hover { color: var(--co-blue); text-decoration: underline; }
.co-link .bi { font-size: var(--fs-sm); }

/* Cajas y títulos de sección: los mismos de la ficha (.pp-box). */
.co-card { background: #fff; border: 1px solid var(--co-line); border-radius: var(--co-radius); padding: 20px 24px; }
.co-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 14px; }
.co-card-head h2 { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--text-heading); }
.co-card-head h2 .bi { font-size: var(--fs-md); color: var(--co-soft); }
.co-card-note { font-size: var(--fs-sm); color: var(--co-mute); }
.co-note { display: flex; gap: 6px; margin: 14px 0 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--co-mute); }
.co-note .bi { flex-shrink: 0; margin-top: 2px; }
/* Selector tipo pestañas (período, vistas): el mismo toggle Fotos/Video de la ficha. */
.co-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-md); background: #f3f4f6; }
.co-seg a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: 700; line-height: 1.3; color: #6b7280; text-decoration: none; transition: color .15s, background .15s; }
.co-seg a:hover { color: var(--co-ink); }
.co-seg a.is-active { background: #fff; color: var(--co-ink); box-shadow: var(--shadow-sm); }
/* Vacíos: el grande (página sin nada) y el chico (una caja sin datos). */
.co-empty { text-align: center; padding: 40px 24px; }
.co-empty-ico { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--co-blue-soft); color: var(--co-blue); font-size: var(--fs-2xl); }
.co-empty h2 { margin: 12px 0 6px; font-size: var(--fs-xl); font-weight: 700; color: var(--text-heading); }
.co-empty p { max-width: 460px; margin: 0 auto 16px; font-size: var(--fs-md); color: var(--co-soft); }
.co-empty-mini { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--co-line-soft); border-radius: var(--radius-md); background: var(--co-bg-soft); font-size: var(--fs-sm); color: var(--co-soft); }
.co-empty-mini .bi { font-size: var(--fs-xl); color: var(--co-blue); }
.co-empty-mini p { margin: 0; }

/* ── Mis mensajes: seguimiento ── */
.cz-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.cz-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.cz-kpi { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; background: #fff; border: 1px solid var(--co-line); border-radius: var(--co-radius); }
.cz-kpi-lbl { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--co-mute); }
.cz-kpi-val { font-size: var(--fs-4xl); font-weight: 700; line-height: 1.15; color: var(--co-ink); font-variant-numeric: tabular-nums; }
.cz-kpi-val small { margin-left: 1px; font-size: var(--fs-md); font-weight: 500; color: var(--co-mute); }
.cz-kpi-sub { font-size: var(--fs-sm); color: var(--co-mute); }
.cz-kpi.is-hero .cz-kpi-lbl, .cz-kpi.is-hero .cz-kpi-val { color: var(--cz-clic); }
.cz-kpi.is-alerta .cz-kpi-val { color: var(--co-red); }

.cz-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
.cz-funnel { display: flex; flex-direction: column; gap: 12px; list-style: none; margin: 0; padding: 0; }
.cz-funnel-row { display: grid; grid-template-columns: 128px minmax(0, 1fr) 78px; align-items: center; gap: 12px; }
.cz-funnel-lbl { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-sm); font-weight: 500; color: var(--co-ink); }
.cz-funnel-lbl .bi { color: var(--co-mute); }
.cz-funnel-track { height: 18px; border-radius: var(--radius-xs); background: var(--cz-vacio); overflow: hidden; }
.cz-funnel-bar { display: block; height: 100%; min-width: 2px; border-radius: var(--radius-xs); transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.cz-funnel-bar.is-paso1 { background: var(--cz-f1); }
.cz-funnel-bar.is-paso2 { background: var(--cz-f2); }
.cz-funnel-bar.is-paso3 { background: var(--cz-f3); }
.cz-funnel-bar.is-paso4 { background: var(--cz-f4); }
.cz-funnel-val { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; font-variant-numeric: tabular-nums; }
.cz-funnel-val strong { font-size: var(--fs-md); font-weight: 700; color: var(--co-ink); }
.cz-funnel-val span { font-size: var(--fs-sm); color: var(--co-mute); }
.cz-rank { list-style: none; margin: 0; padding: 0; }
.cz-rank li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--co-line-soft); }
.cz-rank li:first-child { border-top: 0; padding-top: 0; }
.cz-rank-pos { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--radius-sm); background: var(--co-blue-soft); font-size: var(--fs-xs); font-weight: 700; color: var(--co-blue); }
.cz-rank li:first-child .cz-rank-pos { background: var(--co-accent); color: #fff; }
.cz-rank-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cz-rank-name { font-size: var(--fs-md); font-weight: 700; color: var(--co-ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cz-rank-name:hover { color: var(--co-blue); }
.cz-rank-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: var(--fs-sm); color: var(--co-mute); }
.cz-meter { display: block; height: 4px; border-radius: var(--radius-xs); background: var(--cz-vacio); overflow: hidden; }
.cz-meter span { display: block; height: 100%; border-radius: var(--radius-xs); background: var(--cz-f2); }
.cz-rank-pct { font-size: var(--fs-md); font-weight: 700; color: var(--co-ink); font-variant-numeric: tabular-nums; }
.cz-dot { display: inline-block; flex-shrink: 0; width: 9px; height: 9px; border-radius: 3px; }
.cz-dot.is-clic { background: var(--cz-clic); }
.cz-dot.is-abierto { background: var(--cz-abierto); }
.cz-dot.is-no_enviado { background: var(--cz-no_enviado); }
.cz-dot.is-rebotado { background: var(--cz-rebotado); }
.cz-dot.is-vacio { background: var(--cz-vacio); box-shadow: inset 0 0 0 1px #d5dce6; }
.cz-txt-clic { color: var(--cz-clic); }

/* Una solicitud: encabezado en versalitas (número, fecha, proveedores), el
   mensaje, la barra de estados con su leyenda y un envío por línea. */
/* Tarjeta de cada solicitud (rediseño 2026-09-29): cabecera con número,
   fecha y estado general; título "Requerimiento: ..."; proveedores con
   iniciales; pie con cuándo salió y el botón de estadísticas. Toda la
   tarjeta es clicable (despliega las estadísticas), por eso el hover. */
.cz-sol { margin-bottom: 16px; padding: 20px; border-radius: var(--radius-lg); box-shadow: 0 1px 3px rgba(15, 23, 32, .05); cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; }
.cz-sol:hover { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(15, 23, 32, .1); background-color: #eaf1fb; }
.cz-sol.is-open { cursor: default; transform: none; background-color: #fff; }
@media (prefers-reduced-motion: reduce) { .cz-sol, .cz-sol:hover { transition: none; transform: none; } }
.cz-sol-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 12px; }
.cz-sol-top { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--co-mute); }
.cz-sol-top a { color: var(--co-blue); text-decoration: none; }
.cz-sol-top a:hover { text-decoration: underline; }
.cz-sep { font-weight: 400; color: #d1d5db; }
.cz-sol-estado { flex-shrink: 0; padding: 4px 10px; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .5px; text-transform: uppercase; white-space: nowrap; background: var(--co-line-soft); color: var(--co-soft); }
.cz-sol-estado.is-clic { background: var(--success-bg); color: var(--success-fg); }
.cz-sol-estado.is-abierto, .cz-sol-estado.is-sin_seguimiento { background: #dbeafe; color: #1d4ed8; }
.cz-sol-estado.is-enviado, .cz-sol-estado.is-no_enviado { background: #fef3c7; color: #b45309; }
.cz-sol-estado.is-rebotado { background: var(--danger-bg); color: var(--danger-fg); }
.cz-sol-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 6px; font-size: var(--fs-lg); font-weight: 600; line-height: 1.4; color: var(--co-ink); overflow-wrap: anywhere; }
.cz-sol-pdf { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius-xs); background: #f1f5f9; font-size: var(--fs-xs); font-weight: 500; color: var(--co-mute); }
.cz-sol-msg { margin: 0 0 12px; font-size: var(--fs-md); line-height: 1.5; color: var(--co-mute); overflow-wrap: anywhere; }
.cz-sol-archivos { list-style: none; margin: -4px 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: var(--fs-sm); }
.cz-sol-archivos li { display: inline-flex; align-items: center; gap: 5px; min-width: 0; overflow-wrap: anywhere; }
.cz-sol-archivos .bi { color: #c0392b; }
.cz-sol-archivos span { color: var(--co-mute); }
.cz-stack { display: flex; gap: 2px; height: 8px; border-radius: var(--radius-xs); background: var(--cz-vacio); overflow: hidden; }
.cz-stack-seg { display: block; height: 100%; }
.cz-stack-seg.is-clic { background: var(--cz-clic); }
.cz-stack-seg.is-abierto { background: var(--cz-abierto); }
.cz-stack-seg.is-no_enviado { background: var(--cz-no_enviado); }
.cz-stack-seg.is-rebotado { background: var(--cz-rebotado); }
.cz-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 6px; font-size: var(--fs-sm); color: var(--co-mute); }
.cz-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.cz-legend strong { font-weight: 700; color: var(--co-ink); }
.cz-envios { list-style: none; margin: 4px 0 0; padding: 0; border-top: 1px solid var(--co-line); }
.cz-envios li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 0; }
.cz-envios li + li { border-top: 1px solid var(--co-line-soft); }
.cz-envio-prov { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cz-avatar { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #e0e7ff; color: #1a3175; font-size: var(--fs-md); font-weight: 700; }
.cz-envio-datos { display: flex; flex-direction: column; min-width: 0; }
.cz-prov { font-size: var(--fs-md); font-weight: 700; color: #1a3175; text-decoration: none; overflow-wrap: anywhere; }
.cz-prov:hover { color: var(--co-blue); text-decoration: underline; }
.cz-prov-contacto { font-size: var(--fs-sm); color: var(--co-mute); }
.cz-envio-estado { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 8px; margin-left: auto; text-align: right; }
.cz-sol-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; margin-top: 4px; padding-top: 16px; border-top: 1px dashed var(--co-line); }
.cz-sol-enviado { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 500; color: var(--co-mute); }
.cz-sol-toggle { background: transparent; }
.cz-sol-toggle:hover { background: #fff; }
.cz-sol-toggle .cz-sol-stats-cerrar, .cz-sol-toggle[aria-expanded="true"] .cz-sol-stats-abrir { display: none; }
.cz-sol-toggle[aria-expanded="true"] .cz-sol-stats-cerrar { display: inline; }
.cz-sol-flecha { margin-left: 2px; font-size: var(--fs-sm); transition: transform .2s; }
.cz-sol-toggle[aria-expanded="true"] .cz-sol-flecha { transform: rotate(180deg); }
/* "Ver estadísticas": la tabla de cada solicitud, plegada. */
.cz-sol-stats { margin-top: 14px; cursor: auto; }
.cz-sol-stats .cz-table-wrap { border: 1px solid var(--co-line); border-radius: var(--radius-md); }
.cz-sol-stats .cz-table th, .cz-sol-stats .cz-table td { padding-left: 12px; padding-right: 12px; }
.cz-sol-stats .co-note { margin-top: 10px; }
@media (max-width: 575.98px) {
  .cz-sol { padding: 16px; }
  .cz-sol-head { align-items: flex-start; }
  .cz-envio-estado { justify-content: flex-start; margin-left: 48px; text-align: left; }
}
.cz-resp { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; }
.cz-resp.is-si { color: var(--cz-clic); }
.cz-resp.is-no { font-weight: 500; color: var(--co-mute); }
/* Staff: proveedores que no respondieron, con sus datos para llamarlos. */
.cz-sinresp { margin-bottom: 16px; }
.cz-wa { margin-left: 8px; color: #1a9e4b; }
.cz-wa:hover { color: var(--success-fg); }

/* Tablas (informe, sin respuesta, estadísticas por proveedor). */
.cz-table-card { padding: 0; overflow: hidden; }
.cz-table-card > .co-card-head { padding: 18px 24px 0; }
.cz-table-card > .co-empty-mini { margin: 0 24px 20px; }
.cz-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--co-line); background: var(--co-bg-soft); }
.cz-filtros .form-select { width: auto; min-width: 190px; height: 34px; padding-top: 0; padding-bottom: 0; font-size: var(--fs-sm); border-color: var(--co-line); border-radius: var(--radius-md); }
.cz-search { display: flex; flex: 1 1 220px; align-items: center; gap: 8px; max-width: 320px; height: 34px; padding: 0 12px; border: 1px solid var(--co-line); border-radius: var(--radius-md); background: #fff; color: var(--co-mute); }
.cz-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: var(--fs-sm); color: var(--co-ink); }
.cz-filtros-total { margin-left: auto; font-size: var(--fs-sm); color: var(--co-mute); }
.cz-table-wrap { overflow-x: auto; }
.cz-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); }
.cz-table th { position: sticky; top: 0; z-index: 1; padding: 10px 14px; border-bottom: 1px solid var(--co-line); background: var(--co-bg-soft); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .5px; text-transform: uppercase; text-align: left; white-space: nowrap; color: var(--co-mute); cursor: pointer; user-select: none; }
/* Flecha de orden en SVG (Alibaba Sans no trae ↕ y caía a otra fuente). */
.cz-table th::after { content: ""; display: inline-block; width: 10px; height: 10px; margin-left: 5px; vertical-align: -1px; background: currentColor; opacity: .4; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5 11.5 6h-7zM8 14.5 11.5 10h-7z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5 11.5 6h-7zM8 14.5 11.5 10h-7z'/%3E%3C/svg%3E") center / contain no-repeat; }
.cz-table th[aria-sort="ascending"]::after { opacity: 1; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3l4.5 6h-9z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3l4.5 6h-9z'/%3E%3C/svg%3E"); }
.cz-table th[aria-sort="descending"]::after { opacity: 1; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 13l4.5-6h-9z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 13l4.5-6h-9z'/%3E%3C/svg%3E"); }
.cz-table th.is-num { text-align: right; }
.cz-table td { padding: 11px 14px; border-bottom: 1px solid var(--co-line-soft); color: var(--co-ink); white-space: nowrap; vertical-align: middle; }
.cz-table tbody tr:last-child td { border-bottom: 0; }
.cz-table tbody tr:hover td { background: var(--co-bg-soft); }
.cz-table td a { color: var(--co-ink); }
.cz-table td a:hover { color: var(--co-blue); }
.cz-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.cz-cell-main { display: block; font-weight: 700; color: var(--co-ink); text-decoration: none; }
.cz-cell-sub { display: block; font-size: var(--fs-xs); color: var(--co-mute); }

@media (max-width: 991.98px) {
  .cz-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cz-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
  .co-title { font-size: var(--fs-2xl); }
  .co-card { padding: 16px; }
  .co-head-actions .co-btn { flex: 1 1 auto; }
  .co-seg { display: flex; overflow-x: auto; }
  .cz-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cz-kpi.is-hero { grid-column: 1 / -1; }
  .cz-kpi-val { font-size: var(--fs-3xl); }
  .cz-funnel-row { grid-template-columns: 96px minmax(0, 1fr) 64px; gap: 8px; }
  .cz-envio-estado { justify-content: flex-start; }
  .cz-filtros-total { margin-left: 0; }
  .cz-table-card > .co-card-head { padding: 16px 16px 0; }
  .cz-table-card > .co-empty-mini { margin: 0 16px 16px; }
}

/* ══════════════════════════════════════════════════════════════════════
   Inicio (dashboard con sesión, suppliers/inicio.py). Cabecera azul con
   cuadrícula y brillo, cuatro números en vidrio y tres tarjetas blancas
   abajo. Mismos azules y blanco del sitio.
   ══════════════════════════════════════════════════════════════════════ */
.dash { --dash-ink: var(--text-title); --dash-mute: var(--text-muted); --dash-line: var(--card-border); }
.dash-hero {
  position: relative; overflow: hidden; border-radius: var(--radius-xl); padding: 20px 24px 18px;
  /* Azul más vivo que el navbar (que es navy), para que el bloque no se
     funda con la barra de arriba. */
  background: radial-gradient(600px circle at 0% 0%, rgba(168, 196, 227, .30), transparent 60%),
              radial-gradient(500px circle at 100% 20%, rgba(45, 124, 224, .45), transparent 65%),
              linear-gradient(135deg, #0f3672 0%, var(--navy-mid) 50%, #285ca9 100%);
  color: #fff; box-shadow: 0 18px 50px -20px rgba(15, 54, 114, .55);
}
.dash-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-size: 36px 36px;
  background-image: linear-gradient(to right, rgba(255, 255, 255, .05) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(255, 255, 255, .05) 1px, transparent 1px);
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 30%, transparent 100%);
}
.dash-hero > * { position: relative; }
.dash-hero-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; }
.dash-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 4px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gold-light); }
.dash-title { margin: 0; font-size: clamp(20px, 2.2vw, 26px); font-weight: var(--fw-bold); line-height: 1.2; letter-spacing: -.3px; color: #fff; }
.dash-title-hl { display: inline; background: linear-gradient(90deg, #dbeafe, var(--gold-light) 50%, #fff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dash-sub { max-width: 720px; margin: 4px 0 0; font-size: var(--fs-md); line-height: 1.5; color: rgba(255, 255, 255, .88); }
.dash-cta { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 20px; border-radius: var(--radius-lg); background: #fff; color: var(--navy); font-size: var(--fs-md); font-weight: var(--fw-bold); text-decoration: none; white-space: nowrap; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); transition: transform .15s, box-shadow .15s; }
.dash-cta:hover { color: var(--navy); transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0, 0, 0, .3); }
.dash-cta::after { content: ''; position: absolute; top: -50%; left: -70%; width: 40%; height: 200%; transform: rotate(25deg); background: linear-gradient(60deg, transparent 20%, rgba(133, 170, 214, .45) 50%, transparent 80%); animation: dash-sweep 4.5s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes dash-sweep { 0% { left: -70%; } 30%, 100% { left: 160%; } }
.dash-hero-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; }
/* Bloque del directorio: logos apilados + total. */
.dash-dir { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border-radius: var(--radius-lg); background: rgba(6, 20, 40, .22); border: 1px solid rgba(255, 255, 255, .16); color: #fff; text-decoration: none; transition: background .2s, border-color .2s; }
a.dash-dir:hover { color: #fff; background: rgba(6, 20, 40, .32); border-color: rgba(168, 196, 227, .5); }
.dash-dir-logos { display: flex; flex-shrink: 0; }
.dash-dir-logo { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-left: -9px; padding: 3px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--primary-600), 0 2px 6px rgba(6, 20, 40, .35); overflow: hidden; }
.dash-dir-logo:first-child { margin-left: 0; }
.dash-dir-logo img { width: 100%; height: 100%; object-fit: contain; }
.dash-dir-logo.is-icono { color: var(--navy-mid); font-size: var(--fs-xl); }
.dash-dir-txt { display: grid; grid-template-columns: auto; line-height: 1.15; }
.dash-dir-num { font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: -.4px; }
.dash-dir-lbl { font-size: var(--fs-xs); font-weight: 600; color: rgba(255, 255, 255, .85); }
.dash-dir-nuevos { display: inline-flex; align-items: center; gap: 3px; margin-top: 3px; font-size: var(--fs-xs); font-weight: 700; color: #a7f3d0; }

.dash-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 18px; }
.dash-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 22px; border-radius: var(--radius-xl); background: #fff; border: 1px solid var(--dash-line); box-shadow: 0 1px 3px rgba(16, 24, 40, .05); transition: border-color .25s, box-shadow .25s, transform .2s; }
.dash-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s; background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%), rgba(133, 170, 214, .12), transparent 45%); }
.dash-card:hover::before { opacity: 1; }
.dash-card:hover { border-color: var(--gold-light); box-shadow: 0 14px 30px -12px rgba(10, 38, 71, .25); transform: translateY(-3px); }
.dash-card > * { position: relative; }
.dash-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.dash-card-head > div { flex: 1; min-width: 0; }
.dash-card-head h2 { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--navy); }
.dash-card-head p { margin: 1px 0 0; font-size: var(--fs-xs); color: var(--dash-mute); }
.dash-card-ico { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--radius-md); background: var(--gold-pale); border: 1px solid #d3e2f3; color: var(--navy-mid); font-size: var(--fs-xl); }
.dash-card-ico.is-green { background: var(--success-bg); border-color: #c6f0d8; color: var(--success-fg); }
.dash-pill { flex-shrink: 0; padding: 3px var(--tag-px); border-radius: var(--tag-radius); background: var(--success-bg); border: 1px solid var(--success-border); color: var(--success-fg); font-size: var(--tag-fs); font-weight: var(--tag-fw); white-space: nowrap; }
.dash-pill.is-amber { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-fg); }
.dash-list { display: flex; flex: 1; flex-direction: column; gap: 10px; }
.dash-item { display: block; padding: 12px 14px; border-radius: var(--radius-lg); background: var(--gray-bg); border: 1px solid #eef1f5; color: inherit; text-decoration: none; transition: border-color .15s, background .15s; }
a.dash-item:hover { border-color: #cfdcec; background: var(--gold-pale); color: inherit; }
.dash-item-inline { display: flex; align-items: center; gap: 11px; }
.dash-item-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dash-item-body { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.dash-item-title { min-width: 0; overflow: hidden; font-size: var(--fs-md); font-weight: 700; color: var(--dash-ink); text-overflow: ellipsis; white-space: nowrap; }
.dash-item-sub { overflow: hidden; font-size: var(--fs-xs); color: var(--dash-mute); text-overflow: ellipsis; white-space: nowrap; }
.dash-item-meta { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; font-size: var(--fs-xs); color: var(--dash-mute); }
.dash-item-date { flex-shrink: 0; font-size: var(--fs-xs); color: var(--dash-mute); }
.dash-run { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; color: var(--gold-dark); white-space: nowrap; }
.dash-chev { flex-shrink: 0; color: #98a2b3; }
.dash-avatar { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius-md); background: var(--grad-navy); color: #fff; font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.dash-tag { flex-shrink: 0; padding: 2px var(--tag-px); border-radius: var(--tag-radius); background: var(--neutral-bg); color: var(--neutral-fg); font-size: var(--tag-fs); font-weight: 700; white-space: nowrap; }
.dash-tag.is-clic { background: var(--success-bg); color: var(--success-fg); }
.dash-tag.is-abierto, .dash-tag.is-sin_seguimiento { background: #dbeafe; color: #1d4ed8; }
.dash-tag.is-enviado, .dash-tag.is-no_enviado { background: #fef3c7; color: #b45309; }
.dash-tag.is-rebotado { background: var(--danger-bg); color: var(--danger-fg); }
.dash-empty { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 150px; padding: 16px; border: 1px dashed var(--dash-line); border-radius: var(--radius-lg); font-size: var(--fs-sm); text-align: center; color: var(--dash-mute); }
.dash-empty .bi { font-size: var(--fs-3xl); color: var(--gold); }
.dash-progress { height: 8px; margin: -4px 0 14px; border-radius: var(--radius-pill); background: #eef1f5; overflow: hidden; }
.dash-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--navy-mid), var(--gold)); }
.dash-checklist { display: grid; flex: 1; grid-template-columns: 1fr 1fr; gap: 8px 12px; align-content: start; margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); color: var(--dash-mute); }
.dash-checklist li { display: flex; align-items: center; gap: 7px; }
.dash-checklist .bi { color: #c0c8d4; }
.dash-checklist li.is-listo { color: var(--dash-ink); }
.dash-checklist li.is-listo .bi { color: #12b76a; }
.dash-note { display: flex; align-items: center; gap: 6px; margin: 14px 0 0; padding: 8px 10px; border-radius: var(--radius-md); background: #fff7e6; color: var(--warning-fg); font-size: var(--fs-sm); font-weight: 600; }
.dash-card-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; padding: 11px 16px; border-radius: var(--btn-radius); border: 1px solid var(--dash-line); background: #fff; color: var(--navy); font-size: var(--fs-sm); font-weight: var(--fw-bold); text-decoration: none; transition: border-color .15s, background .15s, color .15s; }
.dash-card-btn:hover { border-color: var(--gold); background: var(--gold-pale); color: var(--navy); }
.dash-card-btn.is-accent { border-color: transparent; background: var(--btn-primary-bg); color: #fff; }
.dash-card-btn.is-accent:hover { color: #fff; background: var(--btn-primary-bg-hover); }

@media (max-width: 1199.98px) {
  .dash-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .dash-hero { padding: 22px 18px 18px; border-radius: var(--radius-lg); }
  .dash-cards { grid-template-columns: minmax(0, 1fr); }
  .dash-cta { width: 100%; justify-content: center; }
  .dash-hero-actions { width: 100%; justify-content: stretch; }
  .dash-dir { width: 100%; }
}
@media (max-width: 419.98px) {
  .dash-checklist { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .dash-cta::after { animation: none; }
  .dash-card, .dash-cta { transition: none; }
  .dash-card:hover, .dash-cta:hover { transform: none; }
}

/* ── Convocatoria sin sesión (publica.html, rediseño del 2026-10-05) ──
   Estructura del diseño "Convocatoria Detalle" con la fuente, los íconos y
   la paleta del sitio. */
.cvd-page { padding-top: 24px; padding-bottom: 64px; display: flex; flex-direction: column; gap: 24px; }
.cvd-migas { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: var(--fs-md); font-weight: 600; color: var(--text-muted); }
.cvd-migas a { color: var(--text-muted); text-decoration: none; }
.cvd-migas a:hover { color: var(--navy); }
.cvd-migas .bi { font-size: var(--fs-xs); }
.cvd-migas span { color: var(--text-title); }
.cvd-layout { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.cvd-main { flex: 3 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.cvd-side { flex: 1 1 320px; min-width: 0; max-width: 100%; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 96px; }
.cvd-card { background: #fff; border-radius: var(--radius-lg); padding: 28px 32px; box-shadow: var(--shadow-sm); }
.cvd-head { display: flex; flex-direction: column; gap: 16px; }
.cvd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cvd-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: var(--tag-radius); font-size: var(--tag-fs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.cvd-chip.is-nueva { background: var(--success-bg); color: var(--success-fg); }
.cvd-chip.is-plazo { background: var(--warning-bg); color: var(--warning-fg); }
.cvd-title { margin: 0; font-size: clamp(22px, 3vw, 30px); font-weight: var(--fw-bold); line-height: 1.22; letter-spacing: -.02em; color: var(--text-heading); text-wrap: pretty; }
.cvd-head-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; }
.cvd-ir-participar { flex: none; }
.cvd-participa { scroll-margin-top: 110px; }
@media (max-width: 640px) { .cvd-ir-participar { width: 100%; } }
.cvd-facts { display: flex; flex-wrap: wrap; gap: 8px 26px; font-size: var(--fs-md); font-weight: 500; color: var(--text-muted); }
.cvd-facts span { display: inline-flex; align-items: center; gap: 6px; }
.cvd-facts .bi { color: var(--navy-mid); font-size: var(--fs-lg); }
.cvd-h2 { margin: 0 0 14px; font-size: var(--fs-2xl); font-weight: var(--fw-bold); color: var(--text-title); }
.cvd-texto { font-size: var(--fs-base); line-height: 1.7; color: var(--text-paragraph); overflow-wrap: anywhere; }
/* "Participa en esta convocatoria": título (no botón) y el recuadro del RUC
   siempre a la vista, en escritorio y en celular (2026-10-05). */
.cvd-participa { margin: 26px 0 0; padding-top: 22px; border-top: 1px solid var(--neutral-border); }
.cvd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--btn-h-lg); padding: 0 24px;
  border: 0; border-radius: var(--btn-radius); background: var(--btn-primary-bg); color: #fff; font: inherit; font-size: var(--fs-base); font-weight: 700;
  text-decoration: none; cursor: pointer; transition: background .2s;
}
.cvd-btn:hover { background: var(--btn-primary-bg-hover); color: #fff; }
.cvd-btn.is-linea { background: #fff; color: var(--btn-secondary-fg); box-shadow: inset 0 0 0 1px var(--btn-secondary-border); }
.cvd-btn.is-linea:hover { background: var(--btn-secondary-hover-bg); color: var(--primary-800); box-shadow: inset 0 0 0 1px var(--btn-secondary-hover-border); }
.cvd-btn.is-sm { height: var(--btn-h-md); padding: 0 18px; font-size: var(--fs-md); }
.cvd-btn.is-texto { background: transparent; color: var(--navy); }
.cvd-btn.is-texto:hover { background: var(--gold-pale); color: var(--navy); }
.cvd-postular { margin-top: 14px; padding: 24px; border-radius: var(--radius-lg); background: var(--gray-bg); display: flex; flex-direction: column; gap: 16px; }
.cvd-fila > div { display: flex; flex-direction: column; gap: 3px; }
.cvd-fila-titulo { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text-title); }
.cvd-fila-texto { font-size: var(--fs-md); line-height: 1.45; color: var(--text-muted); }
.cvd-fila { display: flex; align-items: center; gap: 12px; }
.cvd-fila > div { flex: 1; min-width: 0; }
.cvd-ico { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-pale); color: var(--navy); font-size: var(--fs-2xl); }
.cvd-ico.is-ok { background: var(--success-bg); color: var(--success-fg); }
.cvd-ico.is-alerta { background: var(--warning-bg); color: var(--warning-fg); }
.cvd-ruc { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.cvd-ruc .cvd-campo { flex: 1 1 260px; }
.cvd-ruc .cvd-btn { margin-top: 25px; }
.cvd-ruc input { font-size: var(--fs-lg); font-weight: 600; letter-spacing: .08em; font-variant-numeric: tabular-nums; text-transform: uppercase; }
.cvd-campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cvd-label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-default); }
.cvd-req { color: var(--danger-solid); }
.cvd-opcional { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-muted); }
.cvd-campo .form-control { min-height: 48px; padding: 0 16px; border: 0; border-radius: var(--radius-md); background: #fff; box-shadow: inset 0 0 0 1.5px var(--border-strong); font-size: var(--fs-base); }
.cvd-campo textarea.form-control { padding: 14px 16px; line-height: 1.55; }
.cvd-campo .form-control:focus { box-shadow: inset 0 0 0 1.5px var(--navy), 0 0 0 3px rgba(10, 38, 71, .12); }
.cvd-ayuda { font-size: var(--fs-sm); color: var(--text-muted); }
.cvd-error { font-size: var(--fs-sm); font-weight: 600; color: var(--danger-solid); }
.cvd-error-general { padding: 10px 14px; border-radius: var(--radius-md); background: var(--danger-bg); color: var(--danger-fg); font-size: var(--fs-md); font-weight: 600; }
.cvd-aviso { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 20px; border-radius: var(--radius-md); background: #fff; box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.cvd-aviso.is-alerta { box-shadow: inset 0 0 0 1.5px #FEC84B; }
.cvd-aviso-txt { flex: 1 1 260px; display: flex; flex-direction: column; gap: 3px; }
.cvd-acciones-sm { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cvd-acciones-sm form { margin: 0; }
.cvd-cambiar { flex: none; font-size: var(--fs-sm); font-weight: 700; color: var(--navy); text-decoration: none; }
.cvd-cambiar:hover { text-decoration: underline; color: var(--navy); }
.cvd-empresa { display: flex; flex-direction: column; gap: 16px; padding: 20px; border-radius: var(--radius-md); background: #fff; box-shadow: inset 0 0 0 1.5px #17B26A; }
.cvd-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 1px; margin: 0; border-radius: var(--radius-md); overflow: hidden; background: var(--neutral-border); }
.cvd-datos > div { background: #F9FAFB; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.cvd-datos dt { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.cvd-datos dd { margin: 0; font-size: var(--fs-base); font-weight: 700; color: var(--text-title); overflow-wrap: anywhere; }
.cvd-num { font-variant-numeric: tabular-nums; }
.cvd-estado { display: inline-flex; align-items: center; gap: 6px; color: var(--warning-fg); }
.cvd-estado::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.cvd-estado.is-ok { color: var(--success-fg); }
.cvd-nota { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--radius-md); background: var(--warning-bg); color: #7A2E0E; font-size: var(--fs-md); line-height: 1.45; }
.cvd-nota > .bi { font-size: var(--fs-xl); color: var(--warning-fg); }
.cvd-nota > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.cvd-form { display: flex; flex-direction: column; gap: 18px; }
.cvd-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 14px; }
.cvd-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px; }
.cvd-archivos { position: relative; display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: var(--radius-md); background: #fff; box-shadow: inset 0 0 0 1.5px var(--border-strong); cursor: pointer; margin: 0; }
.cvd-archivos:hover, .cvd-archivos:focus-within { box-shadow: inset 0 0 0 1.5px var(--navy); }
.cvd-archivos input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.cvd-archivos-ico { flex: none; width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--gold-pale); color: var(--navy); display: grid; place-items: center; font-size: var(--fs-2xl); }
.cvd-archivos-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cvd-archivos-txt strong { font-size: var(--fs-md); color: var(--text-title); overflow-wrap: anywhere; }
.cvd-archivos-txt small { font-size: var(--fs-sm); line-height: 1.45; color: var(--text-muted); }
.cvd-archivos-btn { flex: none; height: var(--btn-h-sm); padding: 0 16px; border-radius: var(--btn-radius); background: var(--btn-primary-bg); color: #fff; display: grid; place-items: center; font-size: var(--fs-sm); font-weight: 700; }
.cvd-check { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-md); color: var(--text-paragraph); margin: 0; }
.cvd-check .form-check-input { flex: none; margin-top: 2px; }
.cvd-form-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.cvd-pie-nota { flex: 1 1 260px; font-size: var(--fs-sm); color: var(--text-muted); }
/* La nota de términos va suelta en el formulario (columna): ahí el flex-basis
   de 260px se volvía alto y dejaba un hueco en blanco debajo. */
.cvd-form > .cvd-pie-nota { flex: none; margin: 0; }
.cvd-seguir { padding: 16px 18px; border-radius: var(--radius-md); background: #fff; box-shadow: inset 0 0 0 1px var(--neutral-border); }
.cvd-seguir p { margin: 0 0 12px; font-weight: 600; color: var(--text-title); }
/* Columna derecha: cierre y banners. */
.cvd-cierre { background: var(--navy); color: #fff; border-radius: var(--radius-lg); padding: 26px; display: flex; flex-direction: column; gap: 18px; box-shadow: 0 12px 32px rgba(10, 38, 71, .22); }
.cvd-cierre-label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-light); }
.cvd-cuenta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cvd-cuenta > div { padding: 14px 0; border-radius: var(--radius-md); background: rgba(255, 255, 255, .08); text-align: center; }
.cvd-cuenta strong { display: block; font-size: var(--fs-5xl); font-weight: var(--fw-bold); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.cvd-cuenta span { display: block; margin-top: 6px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-light); }
.cvd-plazo { display: flex; flex-direction: column; gap: 8px; }
.cvd-plazo-barra { height: 6px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .14); overflow: hidden; }
.cvd-plazo-barra i { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--star); }
.cvd-plazo-fechas { display: flex; justify-content: space-between; font-size: var(--fs-sm); font-weight: 600; color: var(--gold-light); }
.cvd-plazo-fechas .is-cierre { color: #fff; }
.cvd-cierre-sin { margin: -8px 0 0; font-size: var(--fs-md); color: var(--gold-light); }
.cvd-banner { display: block; aspect-ratio: 1 / 1; border-radius: var(--radius-lg); overflow: hidden; background: var(--gray-bg); box-shadow: var(--shadow-sm); }
.cvd-banner img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Otras convocatorias abiertas. */
.cvd-otras { display: flex; flex-direction: column; gap: 18px; margin-top: 16px; }
.cvd-otras-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.cvd-otras-head h2 { margin: 0; font-size: var(--fs-3xl); font-weight: var(--fw-bold); letter-spacing: -.02em; color: var(--text-heading); }
.cvd-otras-head a { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-md); font-weight: 700; color: var(--navy); text-decoration: none; white-space: nowrap; }
.cvd-otras-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.cvd-otra { display: flex; flex-direction: column; gap: 14px; padding: 22px 24px; background: #fff; border-radius: var(--radius-lg); color: var(--text-title); text-decoration: none; box-shadow: var(--shadow-sm); transition: box-shadow .25s, transform .25s; }
.cvd-otra:hover { color: var(--text-title); transform: translateY(-2px); box-shadow: 0 2px 4px rgba(16, 24, 40, .05), 0 16px 40px rgba(16, 24, 40, .1); }
.cvd-otra-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cvd-plazo-chip { padding: 5px 10px; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; }
.cvd-plazo-chip.is-rojo { background: var(--danger-bg); color: var(--danger-fg); }
.cvd-plazo-chip.is-ambar { background: var(--warning-bg); color: var(--warning-fg); }
.cvd-plazo-chip.is-verde { background: var(--success-bg); color: var(--success-fg); }
.cvd-otra-region { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); text-align: right; }
.cvd-otra-titulo { font-size: var(--fs-lg); font-weight: 700; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cvd-otra-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--neutral-border); font-size: var(--fs-sm); font-weight: 700; color: var(--navy); }
.cvd-otra-pie > span:first-child { font-weight: 500; color: var(--text-muted); }
.cvd-otra-cta { display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 991.98px) { .cvd-side { position: static; } }
@media (max-width: 640px) {
  .cvd-page { padding-top: 16px; }
  .cvd-card { padding: 20px 16px; }
  .cvd-postular { padding: 16px; margin-left: -4px; margin-right: -4px; }
  .cvd-form-pie .cvd-btn, .cvd-ruc .cvd-btn { width: 100%; }
  .cvd-ruc .cvd-btn { margin-top: 0; }
  .cvd-archivos { flex-wrap: wrap; }
  .cvd-archivos-btn { width: 100%; }
}
/* Mientras se resuelve un paso de "Postular" por detrás (convocatoria-publica.js). */
.cvd-postular.is-cargando { opacity: .55; pointer-events: none; transition: opacity .15s; }
/* "Ver más" de textos largos (ver-mas.js): recortado a ~14 líneas con un
   degradé; --ver-mas-fondo es el color de la tarjeta donde va. */
.ver-mas { position: relative; max-height: 360px; overflow: hidden; scroll-margin-top: 110px; }
.ver-mas.is-abierto { max-height: none; }
.ver-mas.is-recortado:not(.is-abierto)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 80px;
  background: linear-gradient(rgba(255, 255, 255, 0), var(--ver-mas-fondo, #fff));
}
.ver-mas-btn {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 0; border: 0; background: none;
  color: var(--navy); font: inherit; font-size: var(--fs-md); font-weight: 700; cursor: pointer;
}
.ver-mas-btn:hover { text-decoration: underline; }
.ver-mas-btn .bi { transition: transform .2s; }
.ver-mas-btn[aria-expanded="true"] .bi { transform: rotate(180deg); }

/* ── Proveedores guardados (saved_list.html, rediseño del 2026-10-05) ──
   Estructura del diseño "Proveedores Guardados" con la fuente, íconos y
   colores del sitio. */
.gd-page { padding-top: 20px; padding-bottom: 64px; display: flex; flex-direction: column; gap: 22px; }
.gd-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.gd-title { margin: 0; font-size: clamp(24px, 3vw, 32px); font-weight: var(--fw-bold); letter-spacing: -.02em; color: var(--text-heading); }
.gd-sub { margin: 4px 0 0; font-size: var(--fs-base); color: var(--text-muted); }
.gd-buscar { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: var(--radius-pill); background: #fff; box-shadow: 0 0 0 1px #E4E7EC; min-width: 280px; }
.gd-buscar:focus-within { box-shadow: 0 0 0 2px var(--navy); }
.gd-buscar .bi { color: var(--text-muted); }
.gd-buscar input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: var(--fs-md); }
.gd-card { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.gd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--btn-h-md); padding: 0 22px;
  border: 0; border-radius: var(--btn-radius); background: var(--btn-primary-bg); color: #fff; font: inherit; font-size: var(--fs-base); font-weight: 700;
  text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .2s;
}
.gd-btn:hover { background: var(--btn-primary-bg-hover); color: #fff; }
.gd-btn.is-sm { height: var(--btn-h-sm); padding: 0 16px; font-size: var(--fs-md); }
.gd-btn.is-suave { background: var(--gold-pale); color: var(--navy); }
.gd-btn.is-suave:hover { background: var(--navy); color: #fff; }
.gd-btn.is-peligro { background: #fff; color: var(--danger-fg); box-shadow: inset 0 0 0 1.5px var(--danger-border); }
.gd-btn.is-peligro:hover { background: var(--danger-bg); color: var(--danger-fg); }
/* Sin guardados. */
.gd-vacio { padding: 44px 32px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.gd-vacio h2 { margin: 0; font-size: var(--fs-3xl); font-weight: var(--fw-bold); color: var(--text-title); }
.gd-vacio > p { margin: 0; max-width: 520px; font-size: var(--fs-base); line-height: 1.55; color: var(--text-muted); }
.gd-vacio-ico { width: 72px; height: 72px; border-radius: 50%; background: var(--gold-pale); color: var(--navy); display: grid; place-items: center; font-size: var(--fs-5xl); }
.gd-vacio-ico.is-sm { width: 56px; height: 56px; font-size: var(--fs-3xl); }
.gd-pasos { width: 100%; max-width: 820px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; margin: 14px 0 6px; text-align: left; }
.gd-paso { display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: var(--radius-md); background: var(--gray-bg); font-size: var(--fs-md); line-height: 1.5; color: var(--text-muted); }
.gd-paso strong { font-size: var(--fs-base); color: var(--text-title); }
.gd-paso-top { display: flex; align-items: center; gap: 10px; color: var(--navy); font-size: var(--fs-2xl); }
.gd-paso-n { width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.gd-sugeridos h3 { margin: 0 0 12px; font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--text-title); }
.gd-sugeridos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.gd-sugerido { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; }
.gd-sugerido form { margin: 0; flex: none; }
.gd-sugerido-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-decoration: none; }
.gd-sugerido-txt strong { font-size: var(--fs-md); color: var(--text-title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gd-sugerido-txt span { font-size: var(--fs-sm); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gd-logo { width: 44px; height: 44px; flex: none; border-radius: var(--radius-md); background: var(--gold-pale); color: var(--navy); display: grid; place-items: center; font-size: var(--fs-md); font-weight: var(--fw-bold); text-decoration: none; overflow: hidden; }
.gd-logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
/* Grupos + tabla. */
.gd-layout { display: flex; gap: 22px; align-items: flex-start; }
.gd-grupos { flex: 0 0 250px; min-width: 0; position: sticky; top: 96px; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.gd-grupos-label { padding: 8px 10px 6px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.gd-grupos-lista { display: flex; flex-direction: column; gap: 2px; }
.gd-grupo { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border-radius: var(--radius-md); color: var(--text-default); font-size: var(--fs-md); font-weight: 600; text-decoration: none; transition: background .15s; }
.gd-grupo:hover { background: var(--gray-bg); color: var(--navy); }
.gd-grupo.is-activo { background: var(--gold-pale); color: var(--navy); }
.gd-punto { width: 10px; height: 10px; flex: none; border-radius: 3px; }
.gd-grupo-nombre { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gd-grupo-n { font-size: var(--fs-xs); font-weight: 700; opacity: .7; }
.gd-nuevo summary { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 10px; margin-top: 4px; border-radius: var(--radius-md); color: var(--navy); font-size: var(--fs-md); font-weight: 700; cursor: pointer; list-style: none; }
.gd-nuevo summary::-webkit-details-marker { display: none; }
.gd-nuevo summary:hover { background: var(--gold-pale); }
.gd-nuevo-form { display: flex; gap: 6px; padding: 6px 4px 0; }
.gd-nuevo-form input { flex: 1; min-width: 0; height: 38px; padding: 0 12px; border: 0; border-radius: var(--radius-md); outline: 0; font: inherit; font-size: var(--fs-md); box-shadow: inset 0 0 0 1.5px var(--navy); }
.gd-nuevo-form button { width: 38px; height: 38px; flex: none; border: 0; border-radius: var(--radius-md); background: var(--navy); color: #fff; cursor: pointer; }
.gd-tabla { flex: 1 1 0; min-width: 0; overflow: visible; }
.gd-tabla-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--neutral-border); }
.gd-tabla-titulo { display: flex; align-items: center; gap: 12px; min-width: 0; }
.gd-tabla-titulo strong { font-size: var(--fs-lg); color: var(--text-title); overflow-wrap: anywhere; }
.gd-tabla-n { font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.gd-check { width: 20px; height: 20px; flex: none; margin: 0; accent-color: var(--navy); cursor: pointer; }
.gd-limpiar { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 600; color: var(--navy); text-decoration: none; }
.gd-grupo-menu { position: relative; }
.gd-grupo-menu summary { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--text-muted); cursor: pointer; list-style: none; }
.gd-grupo-menu summary::-webkit-details-marker { display: none; }
.gd-grupo-menu summary:hover, .gd-grupo-menu[open] summary { background: var(--gray-bg); color: var(--navy); }
.gd-grupo-menu-caja { position: absolute; z-index: 20; top: 38px; left: 0; width: min(300px, 80vw); padding: 14px; border-radius: var(--radius-lg); background: #fff; box-shadow: 0 12px 32px rgba(16, 24, 40, .16), 0 0 0 1px var(--neutral-border); display: flex; flex-direction: column; gap: 12px; }
.gd-grupo-menu-caja form { margin: 0; }
.gd-renombrar label { display: block; margin-bottom: 6px; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-default); }
.gd-renombrar div { display: flex; gap: 6px; }
.gd-renombrar input { flex: 1; min-width: 0; height: 38px; padding: 0 12px; border: 0; border-radius: var(--radius-md); font: inherit; font-size: var(--fs-md); box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.gd-borrar { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: var(--danger-fg); font: inherit; font-size: var(--fs-md); font-weight: 700; cursor: pointer; }
.gd-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 20px; background: #F5F8FC; border-bottom: 1px solid var(--neutral-border); }
.gd-acciones.con-js:not(.is-visible) { display: none; }
.gd-acciones-n { font-size: var(--fs-sm); font-weight: 700; color: var(--text-default); margin-right: auto; }
.gd-acciones.con-js .gd-acciones-n { display: inline; }
.gd-acciones:not(.con-js) .gd-acciones-n { display: none; }
.gd-acciones-grupo { display: inline-flex; gap: 6px; }
.gd-acciones-grupo select { height: 38px; max-width: 200px; padding: 0 10px; border: 0; border-radius: var(--radius-md); font: inherit; font-size: var(--fs-md); box-shadow: inset 0 0 0 1.5px var(--border-strong); background: #fff; }
.gd-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 16px 20px; border-bottom: 1px solid var(--neutral-bg); transition: background .15s, opacity .2s; }
.gd-fila:last-of-type { border-bottom: 0; }
.gd-fila.is-marcada { background: #F5F8FC; }
.gd-fila.is-saliendo { opacity: .4; pointer-events: none; }
.gd-fila-info { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.gd-fila-nombre { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; font-size: var(--fs-base); font-weight: 700; color: var(--text-title); text-decoration: none; }
.gd-fila-nombre span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gd-fila-nombre:hover { color: var(--navy); }
.gd-fila-nombre .bi { flex: none; color: var(--navy-mid); font-size: var(--fs-base); }
.gd-fila-meta { font-size: var(--fs-sm); color: var(--text-muted); }
.gd-nota { font-size: var(--fs-sm); }
.gd-nota summary { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; color: #7A2E0E; cursor: pointer; list-style: none; }
.gd-nota summary::-webkit-details-marker { display: none; }
.gd-nota summary .bi { color: var(--warning-fg); }
.gd-nota[data-vacia] summary { color: var(--text-muted); }
.gd-nota[data-vacia] summary .bi { color: var(--text-muted); }
.gd-nota summary:hover { text-decoration: underline; }
.gd-nota-form { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.gd-nota-form input { flex: 1 1 220px; min-width: 0; height: 38px; padding: 0 12px; border: 0; border-radius: var(--radius-md); font: inherit; font-size: var(--fs-md); box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.gd-fila-grupos { flex: 0 1 200px; display: flex; flex-wrap: wrap; gap: 6px; }
.gd-etiqueta { padding: 3px 8px; border-radius: var(--radius-sm); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; color: var(--gd-color); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gd-color) 30%, transparent); }
.gd-fila-acciones { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.gd-fila-acciones form { margin: 0; }
.gd-icono { width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--text-default); display: grid; place-items: center; font-size: var(--fs-xl); cursor: pointer; text-decoration: none; }
.gd-icono:hover { background: var(--gold-pale); color: var(--navy); }
.gd-icono.is-wa:hover { background: var(--success-bg); color: var(--success-fg); }
.gd-icono.is-quitar:hover { background: var(--danger-bg); color: var(--danger-fg); }
.gd-sin-filas { padding: 52px 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.gd-sin-filas[hidden] { display: none; }
.gd-sin-filas strong { font-size: var(--fs-xl); color: var(--text-title); }
.gd-sin-filas > span:not(.gd-vacio-ico) { max-width: 380px; font-size: var(--fs-md); color: var(--text-muted); }
.gd-toast { position: fixed; left: 50%; bottom: 28px; z-index: 1080; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; padding: 10px 10px 10px 20px; border-radius: var(--radius-md); background: var(--text-title); color: #fff; font-size: var(--fs-md); box-shadow: 0 12px 32px rgba(0, 0, 0, .28); max-width: calc(100vw - 32px); }
.gd-toast[hidden] { display: none; }
.gd-toast button { height: 34px; padding: 0 14px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--star); font: inherit; font-weight: 700; cursor: pointer; }
.gd-toast button[hidden] { display: none; }
@media (max-width: 860px) {
  .gd-layout { flex-direction: column; align-items: stretch; }
  .gd-grupos { position: static; flex: none; }
  /* En celular los grupos van en una tira que se desliza de costado. */
  .gd-grupos-lista { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; }
  .gd-grupo { flex: none; box-shadow: inset 0 0 0 1px var(--neutral-border); }
  .gd-grupo-nombre { max-width: 180px; }
}
@media (max-width: 640px) {
  .gd-buscar { min-width: 0; width: 100%; }
  .gd-fila { padding: 14px 16px; }
  .gd-fila-acciones { width: 100%; justify-content: flex-end; margin-left: 0; }
  .gd-acciones-grupo { width: 100%; }
  .gd-acciones-grupo select { flex: 1; max-width: none; }
}

.part-modal .modal-title { font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--text-heading); }
.part-modal .modal-body { display: flex; flex-direction: column; gap: 22px; padding: 20px 24px 26px; }
.part-aviso { display: flex; gap: 8px; margin: 12px 0 0; padding: 10px 12px; border-radius: var(--radius-md); background: #F4F3FF; color: #3E1C96; font-size: var(--fs-md); }
.part-vacio { margin: 0; font-size: var(--fs-md); color: var(--text-muted); }

/* Marcador de guardar en las tarjetas y filas del directorio
   (_saved_toggle_button.html, 2026-10-05): cuadrado de solo ícono, como
   "Mensaje", para no confundirse con "Seleccionar" (cotización). */
.btn-card-save-form { display: contents; }
.btn-card-save { flex: 0 0 var(--btn-h-sm); padding: 0; background: #fff; border-color: var(--card-border); color: var(--text-title); font-size: var(--fs-base); }
.btn-card-save:hover { border-color: var(--navy-light); color: var(--navy); }
.btn-card-save.is-active { border-color: var(--navy); background: var(--gold-pale); color: var(--navy); }
.table-action-cell { white-space: nowrap; }
.table-action-cell .btn-card-save { display: inline-flex; width: var(--btn-h-sm); vertical-align: middle; margin-right: 6px; }

/* ── Página de una convocatoria para quien la sigue (detalle.html) ── */
.cvp-page { max-width: 1180px; }
.cvp-punto { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: currentColor; vertical-align: middle; }
.cvp-fact-link { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; }
.cvp-fact-link:hover { color: var(--navy); text-decoration: underline; }
.cvp { margin-top: 22px; display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 100px; }
.cvp-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.cvp-head-titulo { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.cvp-head-titulo h2 { margin: 0; font-size: var(--fs-3xl); font-weight: var(--fw-bold); color: var(--text-heading); }
.cvp-n { min-width: 28px; height: 28px; padding: 0 9px; border-radius: var(--radius-pill); background: var(--navy); color: #fff; display: grid; place-items: center; font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.cvp-modal .modal-title { font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--text-heading); }
.cvp-destinos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.cvp-destino { padding: 4px 10px; border-radius: var(--radius-pill); background: var(--gold-pale); color: var(--navy); font-size: var(--fs-sm); font-weight: 700; }
.cvp-label { display: block; margin-bottom: 6px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-default); }
.cvp-modal textarea, .cvp-modal .cvp-input { width: 100%; padding: 12px 14px; border: 0; border-radius: var(--radius-md); font: inherit; font-size: var(--fs-base); line-height: 1.55; box-shadow: inset 0 0 0 1.5px var(--border-strong); resize: vertical; }
.cvp-modal textarea:focus, .cvp-modal .cvp-input:focus { outline: 0; box-shadow: inset 0 0 0 2px var(--navy); }
/* El asunto del correo, arriba del mensaje (2026-10-08). */
.cvp-modal .cvp-input { display: block; margin-bottom: 14px; padding: 10px 14px; }
/* Asunto de invitación: «[Convocatoria Minera]» fijo delante del texto editable. */
.cvp-modal .cvp-asunto { display: flex; align-items: stretch; margin-bottom: 14px; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.cvp-modal .cvp-asunto:focus-within { box-shadow: inset 0 0 0 2px var(--navy); }
.cvp-modal .cvp-asunto-fijo { display: flex; align-items: center; padding: 0 4px 0 14px; color: var(--navy); font-size: var(--fs-base); font-weight: 700; white-space: nowrap; }
/* Fondo transparente: el borde es la sombra interior del contenedor y el fondo blanco del campo lo tapaba (2026-10-13). */
.cvp-modal .cvp-asunto .cvp-input { flex: 1 1 auto; min-width: 0; margin-bottom: 0; padding-left: 4px; background: transparent; box-shadow: none; }
.cvp-modal .cvp-asunto .cvp-input:focus { box-shadow: none; }
.cvp-nota { display: flex; gap: 6px; margin: 10px 0 0; font-size: var(--fs-sm); color: var(--text-muted); }
.cvp-btn { display: inline-flex; align-items: center; gap: 6px; height: var(--btn-h-md); padding: 0 20px; border: 0; border-radius: var(--btn-radius); background: var(--btn-primary-bg); color: #fff; font: inherit; font-size: var(--fs-md); font-weight: 700; cursor: pointer; }
.cvp-btn.is-linea { background: #fff; color: var(--btn-secondary-fg); box-shadow: inset 0 0 0 1px var(--btn-secondary-border); }

/* ── Tabla de participantes (detalle.html + _cvt_fila.html) ──
   Diseño «Convocatoria Participantes (compacto)», 2026-10-08 (antes,
   tarjetas grandes): una fila por empresa con su perfil, la etapa (lista
   de color), la nota desplegable y las acciones en íconos. Ancha va todo en
   un renglón; más angosta que 1000 px (container query), el perfil, la
   etapa y las acciones bajan debajo de la empresa. */
.cvt {
  --cvt-azul: var(--primary-700); --cvt-tinta: var(--text-strong); --cvt-gris: var(--text-muted); --cvt-gris2: var(--text-muted); --cvt-linea: #eaedf2;
  container-type: inline-size; background: #fff; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.cvt [hidden] { display: none !important; }
.cvt-filtros { display: flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: var(--radius-pill); background: #fff; box-shadow: 0 0 0 1px #e6eaf0; }
.cvt-filtro {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 6px 0 14px; border: 0; border-radius: var(--radius-pill);
  background: transparent; color: #3a4458; font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; transition: background .2s;
}
.cvt-filtro span { min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--radius-pill); display: grid; place-items: center; background: #f1f3f7; font-size: var(--fs-xs); font-weight: 700; }
.cvt-filtro:hover { background: #f4f6f9; }
.cvt-filtro.is-on { background: var(--primary-700); color: #fff; }
.cvt-filtro.is-on span { background: rgba(255, 255, 255, .2); }
.cvt-filtro.is-papelera { color: #c62a2f; }
.cvt-filtro.is-papelera.is-on { background: #c62a2f; color: #fff; }
.cvt-filtro .bi { font-size: var(--fs-md); }

.cvt-check { width: 24px; height: 24px; flex: none; padding: 0; border: 0; background: transparent; color: var(--cvt-azul); display: grid; place-items: center; font-size: var(--fs-xl); cursor: pointer; }
.cvt-check .bi-square { color: #a0a9b8; }
.cvt-check:disabled { opacity: .4; cursor: default; }
.cvt-cab {
  display: flex; align-items: center; gap: 14px; padding: 10px 16px; background: #f8f9fb; box-shadow: inset 0 -1px 0 var(--cvt-linea);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cvt-gris2);
}
.cvt-col-emp { flex: 1; }
.cvt-col-perfil, .cvt-perfil { flex: 0 0 250px; }
.cvt-col-etapa, .cvt-etapa { flex: 0 0 160px; }
.cvt-col-acc, .cvt-acc { flex: 0 0 172px; }
.cvt-col-acc { text-align: right; }
.cvt-selbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 8px 12px 8px 16px; background: var(--cvt-azul); color: #fff; }
.cvt-selbar .cvt-check { color: #fff; }
.cvt-selbar-n { font-size: var(--fs-md); font-weight: 700; }
.cvt-selbar-limpiar { height: 32px; padding: 0 12px; border: 0; border-radius: var(--radius-pill); background: transparent; color: #c3cbdb; font: inherit; font-size: var(--fs-sm); font-weight: 700; cursor: pointer; }
.cvt-selbar-limpiar:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.cvt-selbar-esp { flex: 1; }
.cvt-selbar-btn { display: inline-flex; align-items: center; gap: 6px; height: var(--btn-h-sm); padding: 0 14px; border: 0; border-radius: var(--btn-radius); background: rgba(255, 255, 255, .12); color: #fff; font: inherit; font-size: var(--fs-sm); font-weight: 700; cursor: pointer; }
.cvt-selbar-btn:hover { background: rgba(255, 255, 255, .2); }
.cvt-selbar-btn.is-blanco { padding: 0 18px; background: #fff; color: var(--cvt-azul); font-size: var(--fs-md); }
.cvt-selbar-btn.is-blanco:hover { background: #f5b800; color: #1a1300; }

.cvt-fila { scroll-margin-top: 110px; box-shadow: inset 0 -1px 0 #f1f3f7; transition: background .15s; }
.cvt-fila.is-marcada { background: #f3f6fb; box-shadow: inset 3px 0 0 var(--cvt-azul), inset 0 -1px 0 #f1f3f7; }
.cvt-fila:target { background: #fffbeb; }
.cvt-fila-in { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.cvt-emp { flex: 1 1 0; min-width: 280px; display: flex; align-items: center; gap: 12px; }
.cvt-logo { width: 44px; height: 44px; flex: none; padding: 0; border: 0; border-radius: var(--radius-md); background: #e7ebf2; color: var(--cvt-azul); display: grid; place-items: center; overflow: hidden; font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-bold); cursor: pointer; }
.cvt-logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.cvt-emp-txt { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cvt-emp-nombre { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cvt-nombre { flex: 0 1 auto; min-width: 60px; padding: 0; border: 0; background: none; text-align: left; font: inherit; font-size: var(--fs-base); font-weight: var(--fw-bold); line-height: 1.3; color: var(--cvt-tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.cvt-nombre:hover { color: var(--cvt-azul); text-decoration: underline; }
.cvt-ver { flex: none; padding: 2px 7px; border-radius: var(--radius-sm); color: var(--text-muted); box-shadow: inset 0 0 0 1px #d5dbe5; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.cvt-ver.is-si { background: #e7ebf2; color: var(--primary-700); box-shadow: none; }
.cvt-actividad { font-size: var(--fs-sm); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cvt-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; font-size: var(--fs-xs); color: var(--text-muted); }
.cvt-meta > span { display: inline-flex; align-items: center; gap: 3px; }
.cvt-leer { display: inline-flex; align-items: center; gap: 2px; padding: 0; border: 0; background: none; color: var(--primary-700); font: inherit; font-size: var(--fs-xs); font-weight: 700; cursor: pointer; }
.cvt-leer .bi { transition: transform .2s; }
.cvt-leer[aria-expanded="true"] .bi { transform: rotate(180deg); }
.cvt-perfil { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; min-width: 0; font-size: var(--fs-sm); font-weight: 600; line-height: 1.35; color: #3a4458; }
.cvt-perfil > span { display: flex; align-items: center; gap: 5px; min-width: 0; }
.cvt-perfil .bi { flex: none; color: var(--text-muted); font-size: var(--fs-sm); }
.cvt-trunc { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* La etapa: lista con el color de cada etapa; en la papelera, solo la etiqueta. */
.cvt-etapa-sel, .cvt-etapa-chip { background-color: #f1f3f7; color: #3a4458; }
.cvt-etapa-sel {
  width: 100%; height: 34px; padding: 0 28px 0 12px; border: 0; border-radius: var(--radius-pill); outline: 0; font: inherit; font-size: var(--fs-sm); font-weight: 700; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235b667a' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.cvt-etapa-sel:focus-visible { box-shadow: 0 0 0 2px var(--primary-700); }
.cvt-etapa-chip { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: 700; }
.cvt-etapa-sel.is-pend, .cvt-etapa-chip.is-pend { background-color: #f1edfb; color: #5b3fa8; }
.cvt-etapa-sel.is-eval, .cvt-etapa-chip.is-eval { background-color: #fdf3d6; color: #8a5a00; }
.cvt-etapa-sel.is-pre, .cvt-etapa-chip.is-pre { background-color: #e7ebf2; color: var(--primary-700); }
.cvt-etapa-sel.is-ok, .cvt-etapa-chip.is-ok { background-color: #e6f6ec; color: var(--success-fg); }
.cvt-etapa-sel.is-no, .cvt-etapa-chip.is-no { background-color: #fde8e8; color: #c62a2f; }
.cvt-fila:not([data-papelera]) .cvt-etapa .cvt-etapa-chip,
.cvt-fila[data-papelera] .cvt-etapa-sel { display: none; }

.cvt-acc { display: flex; justify-content: flex-end; gap: 2px; }
.cvt-form-icono { margin: 0; display: contents; }
.cvt-icono { width: 36px; height: 36px; flex: none; padding: 0; border: 0; border-radius: var(--radius-md); display: grid; place-items: center; background: transparent; color: #3a4458; font-size: var(--fs-xl); cursor: pointer; transition: background .15s, color .15s; }
.cvt-icono:hover { background: #e7ebf2; color: var(--primary-700); }
.cvt-icono.is-nota:hover, .cvt-icono.is-con-nota { background: #fdf3d6; color: #8a5a00; }
.cvt-icono.is-aprobar { color: var(--success-fg); }
.cvt-icono.is-aprobar:hover { background: #e6f6ec; color: var(--success-fg); }
.cvt-icono.is-borrar:hover { background: #fde8e8; color: #c62a2f; }
.cvt-icono.is-restaurar:hover { background: #e6f6ec; color: var(--success-fg); }
.cvt-icono.is-hueco { visibility: hidden; }
/* Ya aprobada (llegó sin sesión): un check fijo donde estaba el botón. */
.cvt-icono.is-aprobada { color: var(--success-fg); cursor: default; }
.cvt-icono.is-aprobada:hover { background: transparent; }
/* Aviso con «Aprobar las N» sobre la tabla de participantes (staff). */
.cvt-aprobar-todas { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; padding: 10px 14px; border: 1px solid var(--warning-border); border-radius: var(--radius-lg); background: var(--warning-bg); color: #93370D; font-size: var(--fs-md); }
.cvt-aprobar-todas .bi { margin-right: 6px; }
.cvt-fila[data-papelera] [data-cvt-descartar], .cvt-fila:not([data-papelera]) [data-cvt-restaurar],
.cvt-fila[data-papelera] [data-cvt-marcar], .cvt-fila[data-papelera] .is-nota, .cvt-fila[data-papelera] .cvt-guardar { display: none; }
.cvt-fila[data-papelera] .cvt-nota-campo { pointer-events: none; background: #f8f9fb; }

.cvt-nota-vista { display: flex; align-items: center; gap: 8px; margin: -6px 16px 12px 54px; padding: 6px 10px; border-radius: var(--radius-sm); background: #fdf3d6; color: #5c3d00; font-size: var(--fs-sm); }
.cvt-nota-vista .bi { flex: none; color: #8a5a00; }
.cvt-nota-vista span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cvt-mas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px 24px; padding: 16px 16px 18px 54px; background: #f8f9fb; box-shadow: inset 0 1px 0 var(--cvt-linea); }
.cvt-mas-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cvt-rotulo { margin: 0; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.cvt-rotulo small { font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0; text-transform: none; }
.cvt-mensaje { margin: 0; font-size: var(--fs-md); line-height: 1.6; color: #3a4458; overflow-wrap: anywhere; }
.cvt-clientes { font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); }
.cvt-link { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; color: var(--primary-700); font: inherit; font-size: var(--fs-sm); font-weight: 700; cursor: pointer; }
.cvt-link:hover { text-decoration: underline; }
.cvt-eval { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.cvt-nota-campo { width: 100%; padding: 10px 12px; border: 0; border-radius: var(--radius-md); outline: 0; resize: vertical; font: inherit; font-size: var(--fs-md); line-height: 1.5; color: var(--cvt-tinta); background: #fff; box-shadow: inset 0 0 0 1.5px #d5dbe5; }
.cvt-nota-campo:focus { box-shadow: inset 0 0 0 2px var(--primary-700); }
.cvt-eval-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; }
.cvt-eval-pie small { margin-right: auto; font-size: var(--fs-xs); color: var(--text-muted); }
.cvt-guardar { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 0; border-radius: var(--radius-pill); background: var(--primary-700); color: #fff; font: inherit; font-size: var(--fs-sm); font-weight: 700; cursor: pointer; }
.cvt-guardar:hover { background: #162a4d; }
.cvt-vacio { margin: 0; padding: 40px; text-align: center; font-size: var(--fs-md); color: var(--text-muted); }
.cvt-papelera-nota { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }

/* Angosta: la empresa arriba; el perfil, la etapa y las acciones debajo. */
@container (max-width: 999px) {
  .cvt-cab > span { display: none; }
  .cvt-cab::after { content: 'Participantes'; }
  .cvt-fila-in { flex-wrap: wrap; gap: 12px 14px; }
  .cvt-emp { flex: 1 1 calc(100% - 40px); min-width: 0; }
  .cvt-perfil { flex: 1 1 260px; margin-left: 38px; }
  .cvt-etapa { flex: 0 0 160px; }
  .cvt-acc { flex: 0 0 auto; margin-left: auto; }
}
@container (max-width: 520px) {
  .cvt-perfil { flex-basis: 100%; grid-template-columns: 1fr; }
  .cvt-etapa { flex: 1 1 150px; margin-left: 38px; }
  .cvt-mas { padding-left: 16px; }
  .cvt-nota-vista { margin-left: 16px; }
}

/* La ventana de una postulación (_part_detalle.html): la empresa arriba,
   sus datos en una franja, la postulación, los documentos y el contacto. */
.pd-cab { display: flex; align-items: flex-start; gap: 16px; }
.pd-logo { width: 88px; height: 66px; flex: none; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px #e6eaf0; display: grid; place-items: center; overflow: hidden; color: var(--primary-700); font-size: var(--fs-xl); font-weight: var(--fw-bold); }
.pd-logo img { width: 100%; height: 100%; object-fit: contain; }
.pd-cab-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.pd-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.pd-chips .cvt-etapa-chip { height: 22px; padding: 0 9px; font-size: var(--fs-xs); }
.pd-cuando { font-size: var(--fs-xs); color: var(--text-muted); }
.pd-actividad { font-size: var(--fs-md); color: var(--text-muted); }
.pd-ruc { font-size: var(--fs-sm); color: var(--text-muted); }
.pd-ruc a { color: var(--primary-700); font-weight: 700; text-decoration: none; }
.pd-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; margin: 0; border-radius: var(--radius-md); overflow: hidden; background: #eaedf2; }
.pd-datos > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 14px; background: #f8f9fb; }
.pd-datos dt { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.pd-datos dd { margin: 0; font-size: var(--fs-md); font-weight: 700; line-height: 1.35; color: var(--text-strong); overflow-wrap: anywhere; }
.pd-sec h3 { margin: 0 0 8px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.pd-texto { font-size: var(--fs-base); line-height: 1.65; color: #3a4458; overflow-wrap: anywhere; }
/* Comentario del proveedor solo para el staff (2026-10-20). */
.pd-solo-staff { padding: 8px 10px; border-radius: 8px; background: #fff7e6; border: 1px dashed #e8c37a; }
.pd-solo-staff h3 { color: #8a5a00; }
.pd-texto p:last-child { margin-bottom: 0; }
.pd-docs { display: flex; flex-direction: column; gap: 8px; }
.pd-doc { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px #e6eaf0; color: var(--text-strong); text-decoration: none; }
.pd-doc:hover { background: #f8f9fb; color: var(--text-strong); }
.pd-doc-tipo { width: 36px; height: 36px; flex: none; border-radius: var(--radius-md); background: #fde8e8; color: #c62a2f; display: grid; place-items: center; font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.pd-doc-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pd-doc-txt strong { font-size: var(--fs-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-doc-txt small { font-size: var(--fs-xs); color: var(--text-muted); }
.pd-doc .bi { color: var(--primary-700); font-size: var(--fs-xl); }
.pd-contacto { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.pd-contacto-item { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px 14px; border-radius: var(--radius-md); background: #f8f9fb; color: var(--text-strong); font-size: var(--fs-md); font-weight: 600; text-decoration: none; }
a.pd-contacto-item:hover { background: #eef1f6; color: var(--text-strong); }
.pd-contacto-item .bi { flex: none; color: var(--primary-700); font-size: var(--fs-xl); }
.pd-contacto-item > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pd-contacto-item small { font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted); }
.pd-aporte { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px #e6eaf0; }
.pd-aporte + .pd-aporte { margin-top: 10px; }
.pd-aporte.is-por-revisar { box-shadow: inset 0 0 0 1px #f5d48a; background: #fffbf0; }
.pd-aporte-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--fs-md); color: var(--text-strong); }
.pd-aporte .part-aviso { margin: 0; }
.pd-aporte-acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.pd-acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin: 0 -24px -26px; padding: 16px 24px; box-shadow: inset 0 1px 0 #eaedf2; }
.pd-btn { display: inline-flex; align-items: center; gap: 6px; height: var(--btn-h-md); padding: 0 20px; border: 0; border-radius: var(--btn-radius); background: var(--btn-primary-bg); color: #fff; font: inherit; font-size: var(--fs-md); font-weight: 700; text-decoration: none; cursor: pointer; }
.pd-btn:hover { background: var(--btn-primary-bg-hover); color: #fff; }
.pd-btn.is-wa { background: #25b660; }
.pd-btn.is-wa:hover { background: #1f9e53; }
.pd-btn.is-linea { background: #fff; color: var(--btn-secondary-fg); box-shadow: inset 0 0 0 1px var(--btn-secondary-border); }
.pd-btn.is-linea:hover, .pd-btn.is-linea.is-on { background: var(--btn-secondary-hover-bg); color: var(--primary-800); box-shadow: inset 0 0 0 1px var(--btn-secondary-hover-border); }

/* Aviso de abajo de la tabla (nota guardada, descartada con «Deshacer»...). */
.cvt-toast { position: fixed; left: 50%; bottom: 24px; z-index: 1060; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 24px); padding: 12px 14px 12px 20px; border-radius: var(--radius-md); background: var(--text-strong); color: #fff; font-size: var(--fs-md); box-shadow: 0 12px 32px rgba(0, 0, 0, .28); }
.cvt-toast[hidden] { display: none; }
.cvt-toast .bi { flex: none; color: #5fd38a; font-size: var(--fs-xl); }
.cvt-toast.is-error .bi { color: #ff8a8e; }
.cvt-toast button { height: 32px; padding: 0 12px; border: 0; border-radius: var(--radius-sm); background: transparent; color: #f5b800; font: inherit; font-weight: 700; cursor: pointer; }
.cvt-toast button:hover { background: rgba(255, 255, 255, .1); }

/* Editar / Cerrar / Borrar de la convocatoria: píldoras con borde. */
.conv-owner-actions .conv-btn { height: var(--btn-h-md); padding: 0 16px; border: 0; border-radius: var(--btn-radius); background: #fff; box-shadow: inset 0 0 0 1px var(--btn-secondary-border); color: var(--btn-secondary-fg); font-size: var(--fs-sm); font-weight: 700; }
.conv-owner-actions .conv-btn:hover { background: var(--btn-secondary-hover-bg); box-shadow: inset 0 0 0 1px var(--btn-secondary-hover-border); }
.conv-owner-actions .conv-btn.text-danger { box-shadow: inset 0 0 0 1px var(--danger-border); color: var(--danger-fg) !important; }
.conv-owner-actions .conv-btn.text-danger:hover { background: var(--danger-bg); }
/* Las mismas acciones arriba, en la cabecera (2026-10-12): compactas. */
.conv-owner-actions.is-arriba { margin: 0 0 0 auto; padding: 0; border: 0; gap: 6px; }
.conv-owner-actions.is-arriba .conv-btn { display: inline-flex; align-items: center; gap: 6px; height: var(--btn-h-sm); padding: 0 12px; font-size: var(--fs-sm); }
@media (max-width: 640px) { .conv-owner-actions.is-arriba .conv-btn-txt { display: none; } }
.conv-chip.is-oculta, .convl-etiqueta.is-oculta { background: var(--neutral-bg); color: var(--neutral-fg); }

/* «Avances» plegado, debajo de los participantes. */
.cvp-avances { margin-top: 16px; }
.cvp-avances > summary { display: flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text-heading); }
.cvp-avances > summary::-webkit-details-marker { display: none; }
.cvp-avances-flecha { margin-left: auto; transition: transform .2s; }
.cvp-avances[open] .cvp-avances-flecha { transform: rotate(180deg); }
.cvp-avances[open] > summary { margin-bottom: 16px; }

/* Papelera de postulaciones (papelera.html, solo staff, 2026-10-05). */
.pap-page { max-width: 960px; }
.pap-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; margin: 8px 0 18px; }
.pap-head form { margin: 0; }
.pap-titulo { display: flex; align-items: center; gap: 10px; margin: 0; font-size: var(--fs-4xl); font-weight: var(--fw-bold); color: var(--text-heading); }
.pap-sub { margin: 4px 0 0; max-width: 620px; font-size: var(--fs-md); color: var(--text-muted); }
.pap-item { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-bottom: 12px; padding: 18px 20px; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.pap-info { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pap-nombre { align-self: flex-start; padding: 0; border: 0; background: none; text-align: left; font: inherit; font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text-title); cursor: pointer; }
.pap-nombre:hover { color: var(--navy); text-decoration: underline; }
.pap-meta { font-size: var(--fs-sm); color: var(--text-muted); }
.pap-msg { margin: 2px 0 0; font-size: var(--fs-md); color: var(--text-paragraph); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.pap-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.pap-acciones form { margin: 0; }
.pap-btn { display: inline-flex; align-items: center; gap: 6px; height: var(--btn-h-sm); padding: 0 14px; border: 0; border-radius: var(--btn-radius); background: var(--btn-primary-bg); color: #fff; font: inherit; font-size: var(--fs-sm); font-weight: 700; cursor: pointer; white-space: nowrap; }
.pap-btn:hover { background: var(--btn-primary-bg-hover); color: #fff; }
.pap-btn.is-linea { background: #fff; color: var(--btn-secondary-fg); box-shadow: inset 0 0 0 1px var(--btn-secondary-border); }
.pap-btn.is-linea:hover { background: var(--gold-pale); color: var(--navy); }
.pap-btn.is-peligro { background: #fff; color: var(--danger-fg); box-shadow: inset 0 0 0 1px var(--danger-border); }
.pap-btn.is-peligro:hover { background: var(--danger-bg); color: var(--danger-fg); }

/* Papelera sin recargar (papelera.js). */
.pap-saliendo { opacity: .4; pointer-events: none; transition: opacity .2s; }
.pap-toast { position: fixed; left: 50%; bottom: 28px; z-index: 1085; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; padding: 10px 10px 10px 20px; border-radius: var(--radius-md); background: var(--text-title); color: #fff; font-size: var(--fs-md); box-shadow: 0 12px 32px rgba(0, 0, 0, .28); max-width: calc(100vw - 32px); }
.pap-toast[hidden] { display: none; }
.pap-toast button { height: 34px; padding: 0 14px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--star); font: inherit; font-weight: 700; cursor: pointer; }
.pap-toast button[hidden] { display: none; }
.conv-empty[hidden] { display: none; }
/* Descripción de la convocatoria (con y sin sesión): "Ver más" a las 5
   líneas (pedido 2026-10-05), con un degradé corto para que se lean. */
.conv-text.ver-mas { max-height: calc(5 * 1.65em); }
.cvd-texto.ver-mas { max-height: calc(5 * 1.7em); }
/* Abierta, sin tope: las dos de arriba le ganaban a .ver-mas.is-abierto y
   «Ver más» no desplegaba (2026-10-08, el mismo error de la ficha). */
.conv-text.ver-mas.is-abierto, .cvd-texto.ver-mas.is-abierto { max-height: none; }
.conv-text.ver-mas p { margin-bottom: 0; }
.conv-text.ver-mas.is-recortado:not(.is-abierto)::after,
.cvd-texto.ver-mas.is-recortado:not(.is-abierto)::after { height: 1.6em; }
.conv-text.ver-mas.is-abierto p { margin-bottom: 1rem; }
/* Abierto, sin tope: va después de las reglas de 5 líneas, que tienen la
   misma especificidad que .ver-mas.is-abierto y le ganaban (el "Ver más"
   no desplegaba nada, 2026-10-06). */
.conv-text.ver-mas.is-abierto, .cvd-texto.ver-mas.is-abierto { max-height: none; }

/* Registro de proveedores: "Validar RUC" junto al campo (2026-10-06). */
.reg-ruc-fila { display: flex; gap: 8px; }
.reg-ruc-fila .form-control { flex: 1; min-width: 0; font-size: 1.05rem; letter-spacing: .03em; }
.reg-ruc-validar { flex: none; white-space: nowrap; }

/* ── Documentos legales (legales/): títulos y formato del editor visual ── */
.legal-content h2 { font-size: var(--fs-lg); font-weight: 600; margin: 1.5rem 0 .5rem; }
.legal-content h3 { font-size: var(--fs-base); font-weight: 600; margin: 1.25rem 0 .4rem; }
.legal-content .la-centro { text-align: center; }
.legal-content .la-derecha { text-align: right; }
.legal-content .la-justificado { text-align: justify; hyphens: auto; }
.legal-content .la-chico { font-size: .85em; }
.legal-content .la-grande { font-size: 1.15em; }
.legal-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px; border: 1px solid var(--bs-border-color); border-bottom: 0; border-radius: .5rem .5rem 0 0; background: var(--bs-tertiary-bg); position: sticky; top: 0; z-index: 2; }
.legal-barra[hidden] { display: none; }
.legal-barra select { width: auto; }
.legal-barra button { border: 1px solid transparent; background: transparent; border-radius: .375rem; min-width: 34px; height: 32px; padding: 0 6px; color: var(--bs-body-color); position: relative; }
.legal-barra button:hover { background: var(--bs-secondary-bg); }
.legal-barra button.active { background: var(--bs-primary-bg-subtle); border-color: var(--bs-primary-border-subtle); }
.legal-barra-sep { width: 1px; height: 22px; background: var(--bs-border-color); margin: 0 4px; }
.legal-barra-mini { position: absolute; right: 2px; bottom: 0; font-size: .7em; }
.legal-editable { min-height: 480px; max-height: 75vh; overflow-y: auto; padding: 1rem 1.25rem; border: 1px solid var(--bs-border-color); border-radius: 0 0 .5rem .5rem; background: var(--bs-body-bg); }
.legal-editable:focus { outline: 2px solid var(--bs-primary-border-subtle); outline-offset: -2px; }
/* El texto de una convocatoria (convocatorias/form.html, 2026-10-27): más bajo que un documento legal. */
.legal-editable.is-corto { min-height: 220px; max-height: 60vh; padding: .75rem 1rem; }
.legal-content ul, .legal-content ol { padding-left: 1.4rem; }
/* Visor de archivos (static/js/visor-archivo.js): la foto, el logo o el PDF
   en pantalla completa sobre la página, también encima de un modal. */
.visor-archivo { position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; background: rgba(10, 18, 30, .92); pointer-events: auto; }
.visor-archivo:focus { outline: none; }
.visor-archivo-barra { display: flex; align-items: center; gap: 8px; padding: 10px 14px; color: #fff; flex-wrap: wrap; }
.visor-archivo-titulo { flex: 1 1 200px; min-width: 0; font-size: var(--fs-md); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visor-archivo-accion, .visor-archivo-cerrar { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid rgba(255,255,255,.3); border-radius: var(--radius-pill); background: transparent; color: #fff !important; font-size: var(--fs-sm); text-decoration: none; }
.visor-archivo-accion:hover, .visor-archivo-cerrar:hover { background: rgba(255,255,255,.12); }
.visor-archivo-cerrar { width: 34px; padding: 0; justify-content: center; }
.visor-archivo-cerrar span:empty { display: none; }
.visor-archivo-cuerpo { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 16px 16px; }
.visor-archivo-cuerpo img { max-width: 100%; max-height: 100%; object-fit: contain; background: #fff; border-radius: var(--radius-sm); box-shadow: 0 10px 40px rgba(0,0,0,.4); }
.visor-archivo-cuerpo iframe { width: min(1000px, 100%); height: 100%; border: 0; border-radius: var(--radius-sm); background: #fff; }
.visor-archivo-aviso { margin: 0; max-width: 420px; padding: 18px 20px; border-radius: var(--radius-md); background: #fff; color: var(--bs-body-color); font-size: var(--fs-md); text-align: center; }
@media (max-width: 575.98px) {
  .visor-archivo-accion span { display: none; }
  .visor-archivo-accion { width: 34px; padding: 0; justify-content: center; }
}
/* Editor del «Acerca de» de la ficha (static/js/editor-texto.js): la misma
   barra, con un área más baja que entra en el popup. */
.editor-texto-area { position: relative; min-height: 220px; max-height: 55vh; overflow-y: auto; padding: .65rem .8rem; border: 1px solid var(--bs-border-color); border-radius: 0 0 .5rem .5rem; background: var(--bs-body-bg); font-size: var(--fs-md); line-height: 1.6; }
.editor-texto-area:focus { outline: 2px solid var(--bs-primary-border-subtle); outline-offset: -2px; }
.editor-texto-area p { margin: 0; }
.editor-texto-area ul, .editor-texto-area ol { margin: .25em 0; padding-left: 1.4em; }
.editor-texto-area.is-vacio::before { content: attr(data-placeholder); position: absolute; left: .8rem; right: .8rem; top: .65rem; color: var(--bs-secondary-color); pointer-events: none; }
.legal-editable h2[id]::after { content: " #" attr(id); font-size: .75em; font-weight: 400; color: var(--bs-secondary-color); }

/* Mensaje que el proveedor dejó para MINDER al registrarse (barra de staff). */
.staff-mensaje { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0 0; padding: 10px 14px; border: 1px solid #f0d58a; border-radius: var(--radius-md); background: #fff8e1; font-size: var(--fs-md); color: #5c4400; }
.staff-mensaje > .bi { font-size: var(--fs-xl); line-height: 1.2; }
.staff-mensaje-nota { font-size: var(--fs-xs); opacity: .8; }

/* ── Panel → Comunicados a compradores (editor con vista previa) ── */
.cm-alcance { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--radius-pill); background: var(--gold-pale); color: var(--navy); font-size: var(--fs-sm); font-weight: 700; }
.cm-plantillas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cm-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--card-border); border-radius: var(--radius-pill); background: #fff; color: var(--navy); font-size: var(--fs-sm); font-weight: 600; }
.cm-chip:hover { border-color: var(--navy-mid); background: #f4f7fc; }
.cm-contador { font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.cm-contador.is-cerca { color: var(--warning-fg); }
.cm-contador.is-pasado { color: var(--danger-fg); font-weight: 700; }
.cm-consejos { border: 1px solid var(--card-border); border-radius: var(--radius-md); padding: 10px 14px; background: #fafbfd; font-size: var(--fs-sm); }
.cm-consejos summary { cursor: pointer; font-weight: 600; color: var(--navy); display: flex; align-items: center; gap: 6px; }
.cm-consejos ul { margin: 10px 0 2px; padding-left: 1.1rem; display: grid; gap: 4px; color: var(--text-paragraph); }
.cm-preview-wrap { position: sticky; top: calc(var(--nav-h, 74px) + 16px); }
.cm-preview-wrap .nt-row { cursor: default; }
.cm-preview-wrap .nt-full { white-space: pre-line; }
.cm-preview-wrap .nt-text .cm-vacio { color: var(--text-muted); font-weight: 600; }
.cm-preview-wrap .nt-visual img { display: block; width: 100%; height: auto; }
.cm-lista { display: grid; gap: 10px; }
.cm-item { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border: 1px solid var(--card-border); border-radius: var(--radius-lg); background: #fff; }
.cm-item-img { flex-shrink: 0; width: 84px; height: 64px; border-radius: var(--radius-md); overflow: hidden; background: var(--gray-bg); display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: var(--fs-3xl); }
.cm-item-img img { width: 100%; height: 100%; object-fit: cover; }
.cm-item-body { flex: 1; min-width: 0; }
.cm-item-body h3 { margin: 0 0 4px; font-size: var(--fs-base); font-weight: 700; color: var(--text-title); overflow-wrap: anywhere; }
.cm-item-body p { margin: 0 0 6px; font-size: var(--fs-sm); color: var(--text-paragraph); overflow-wrap: anywhere; }
.cm-item-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--fs-sm); color: var(--text-muted); }
.cm-item-meta span, .cm-item-meta a { display: inline-flex; align-items: center; gap: 4px; }
.cm-vistos { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: var(--fs-xs); color: var(--text-muted); }
.cm-vistos-barra { flex: 0 0 140px; height: 6px; border-radius: var(--radius-pill); background: var(--gray-bg); overflow: hidden; }
.cm-vistos-barra span { display: block; height: 100%; background: var(--navy-mid); }
.cm-item-acciones { display: flex; gap: 6px; flex-shrink: 0; }
.cm-item-acciones form { margin: 0; }
@media (max-width: 1199px) { .cm-preview-wrap { position: static; } }
@media (max-width: 575px) {
  .cm-item { flex-wrap: wrap; }
  .cm-item-acciones { width: 100%; justify-content: flex-end; }
  .cm-vistos-barra { flex-basis: 90px; }
}

/* ── Invitados de una convocatoria (_invitados.html, suppliers/invitaciones.py, 2026-10-08) ── */
.inv { margin-top: 22px; scroll-margin-top: 100px; }
.inv-head { align-items: center; flex-wrap: wrap; }
.inv-head .cvp-n { min-width: 24px; height: 24px; font-size: var(--fs-xs); }
.inv-sub { margin: 0 0 12px; font-size: var(--fs-md); color: var(--text-muted); }
.inv-lista { list-style: none; margin: 0; padding: 0; border: 1px solid var(--card-border); border-radius: var(--radius-md); }
.inv-item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 14px; }
.inv-item + .inv-item { border-top: 1px solid var(--card-border); }
.inv-quien { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; }
.inv-quien strong { font-size: var(--fs-md); color: var(--text-heading); overflow-wrap: anywhere; }
.inv-quien small { font-size: var(--fs-sm); color: var(--text-muted); overflow-wrap: anywhere; }
.inv-cuando { font-size: var(--fs-sm); color: var(--text-muted); }
/* Persona por persona dentro de una invitación (2026-10-27). */
.inv-personas { flex-basis: 100%; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: var(--fs-xs); color: var(--text-muted); }
.inv-persona { display: inline-flex; align-items: center; gap: 4px; overflow-wrap: anywhere; }
.inv-persona.is-pre, .inv-persona.is-eval { color: var(--success-fg); }
.inv-persona.is-no { color: var(--danger-fg); }
/* Recordar / Volver a invitar (2026-10-08). */
.inv-head-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.inv-accion { display: inline-flex; align-items: center; gap: 5px; height: 30px; margin-left: auto; padding: 0 12px; border: 0; border-radius: var(--radius-pill); background: var(--gold-pale); color: var(--navy); font: inherit; font-size: var(--fs-sm); font-weight: 700; cursor: pointer; white-space: nowrap; }
.inv-accion:hover { background: #DCE8F5; }
.inv-bloque { margin: 0 0 18px; padding: 0; border: 0; min-width: 0; }
.inv-ayuda { margin: 0 0 10px; font-size: var(--fs-sm); color: var(--text-muted); }
.inv-opcional { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-muted); }
.inv-buscador { position: relative; }
.inv-buscador .bi { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); }
.inv-buscador .form-control { padding-left: 34px; }
.inv-resultados { list-style: none; margin: 6px 0 0; padding: 0; border: 1px solid var(--card-border); border-radius: var(--radius-md); max-height: 260px; overflow-y: auto; }
.inv-resultados[hidden] { display: none; }
.inv-resultados li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; }
.inv-resultados li + li { border-top: 1px solid var(--card-border); }
.inv-res-nombre { min-width: 0; font-size: var(--fs-md); font-weight: 600; overflow-wrap: anywhere; }
.inv-res-nombre small { display: block; font-weight: 400; color: var(--text-muted); }
.inv-res-btn { flex-shrink: 0; height: var(--btn-h-sm); padding: 0 14px; border: 0; border-radius: var(--btn-radius); background: var(--btn-primary-bg); color: #fff; font: inherit; font-size: var(--fs-sm); font-weight: 700; cursor: pointer; }
.inv-res-btn:disabled { background: var(--neutral-bg); color: var(--text-muted); cursor: default; }
.inv-res-vacio { font-size: var(--fs-sm); color: var(--text-muted); }
.inv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.inv-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 4px 4px 4px 12px; border-radius: var(--radius-pill); background: var(--gold-pale); color: var(--navy); font-size: var(--fs-sm); font-weight: 700; }
.inv-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-chip button { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.inv-chip button:hover { background: rgba(10, 38, 71, .1); }
/* «Invitar por correo»: los correos como fichas dentro del recuadro (2026-10-08). */
.inv-correos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 46px; padding: 6px 8px; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1.5px var(--border-strong); cursor: text; }
.inv-correos:focus-within { box-shadow: inset 0 0 0 2px var(--navy); }
.inv-correos input { flex: 1 1 200px; min-width: 0; height: 32px; padding: 0 6px; border: 0; outline: 0; background: transparent; font: inherit; font-size: var(--fs-base); }
.inv-correo-error { margin: 6px 0 0; font-size: var(--fs-sm); color: var(--danger-fg); }
.inv-correo-error:empty { display: none; }
.inv-contador { margin-right: auto; font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); }
.inv-contador.is-alerta { color: var(--danger-fg); }
.cvd-invitacion { margin-top: 14px; box-shadow: inset 0 0 0 1.5px #A6F4C5; }

/* Mis solicitudes: la solicitud en curso, arriba (un solo acceso en el menú, 2026-10-08). */

/* ── Lista de convocatorias (rediseño del 2026-10-08, lista.html y _fila_lista.html) ──
   Franja azul con los números, y encima, una tarjeta con pestañas, buscador
   y filas; a la derecha los banners del staff si hay. */
.convl-hero, .convl-wrap { --convl-azul: var(--primary-700); --convl-rojo: #C62A2F; --convl-linea: #EAEDF2; }
.convl-hero { background: var(--navy); color: #fff; padding: 30px 0 96px; }
.convl-hero-in { max-width: 1180px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 24px; }
.convl-hero-txt { min-width: 0; flex: 1 1 520px; }
.convl-migas { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; font-size: var(--fs-sm); font-weight: 600; color: #C3CBDB; }
.convl-migas a { color: #C3CBDB; text-decoration: none; }
.convl-migas a:hover { color: #fff; }
.convl-migas .bi { font-size: var(--fs-xs); }
.convl-hero h1 { margin: 0 0 10px; color: #fff; font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }
.convl-hero p { margin: 0; max-width: 640px; color: #C3CBDB; font-size: var(--fs-base); line-height: 1.55; }
.convl-hero p strong { color: #fff; }
.convl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.convl-chip { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .1); font-size: var(--fs-sm); font-weight: 700; }
.convl-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #5FD38A; }
.convl-dot.is-rojo { background: #FF8A8E; }
.convl-publicar { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: var(--radius-pill); background: #fff; color: var(--navy); font-size: var(--fs-md); font-weight: 700; text-decoration: none; white-space: nowrap; }
.convl-publicar:hover { background: var(--gold-pale); color: var(--navy); }
/* Comprador: «Mis convocatorias» | «Otras convocatorias», a un clic (2026-10-08). */
.convl-vistas { display: flex; gap: 2px; padding: 4px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .1); }
.convl-vista { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 6px 0 16px; border-radius: var(--radius-pill); color: #fff; font-size: var(--fs-md); font-weight: 700; text-decoration: none; white-space: nowrap; transition: background .2s; }
.convl-vista span { min-width: 24px; height: 24px; padding: 0 7px; border-radius: var(--radius-pill); display: grid; place-items: center; background: rgba(255, 255, 255, .18); color: #fff; font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.convl-vista:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.convl-vista.is-activa { background: #fff; color: var(--navy); }
.convl-vista.is-activa span { background: var(--navy); color: #fff; }
.convl-nueva { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; text-decoration: none; }
.convl-nueva .bi { font-size: var(--fs-xl); }
.convl-nueva:hover { color: #fff; }

.convl-wrap { max-width: 1180px; margin-top: -64px; padding-bottom: 32px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; position: relative; }
.convl-card { flex: 1 1 560px; min-width: 0; background: #fff; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }

/* Pestañas: se reparten el ancho; en celular se deslizan de costado. */
.convl-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(max-content, 1fr); overflow-x: auto; scrollbar-width: none; box-shadow: inset 0 -1px 0 var(--convl-linea); }
.convl-tabs::-webkit-scrollbar { display: none; }
.convl-tab { display: flex; align-items: center; gap: 10px; padding: 16px 20px; background: #F8F9FB; color: var(--text-muted); font-size: var(--fs-md); font-weight: 700; white-space: nowrap; text-decoration: none; transition: background .15s, color .15s; }
.convl-tab:hover { background: #fff; color: var(--navy); }
.convl-tab.is-activa { background: #fff; color: var(--navy); box-shadow: inset 0 -3px 0 var(--navy); }
.convl-tab-n { flex: none; min-width: 28px; height: 28px; padding: 0 8px; border-radius: var(--radius-pill); display: grid; place-items: center; background: #E6EAF0; color: var(--text-muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.convl-tab.is-activa .convl-tab-n { background: var(--navy); color: #fff; }

.convl-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 16px 24px; box-shadow: inset 0 -1px 0 var(--convl-linea); }
.convl-buscar { flex: 1 1 220px; min-width: 0; display: flex; align-items: center; gap: 8px; height: 44px; margin: 0; padding: 0 14px; border-radius: var(--radius-pill); background: #F4F6F9; color: var(--text-muted); font-size: var(--fs-xl); cursor: text; }
.convl-buscar:focus-within { background: #fff; box-shadow: 0 0 0 2px var(--navy); }
.convl-buscar input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: var(--fs-base); color: var(--text-title); }
.convl-region {
  flex: 0 1 190px; min-width: 0; height: 44px; padding: 0 36px 0 16px; border: 0; border-radius: var(--radius-pill); outline: 0; cursor: pointer;
  background: #F4F6F9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235b667a' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 16px center;
  appearance: none; -webkit-appearance: none; font: inherit; font-size: var(--fs-md); font-weight: 600; color: var(--text-title);
}
.convl-region:focus-visible { box-shadow: 0 0 0 2px var(--navy); }
.convl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--btn-h-md); padding: 0 20px; border: 0; border-radius: var(--btn-radius); background: var(--convl-azul); color: #fff; font: inherit; font-size: var(--fs-md); font-weight: 700; cursor: pointer; text-decoration: none; }
.convl-btn:hover { background: var(--btn-primary-bg-hover); color: #fff; }
.convl-limpiar { font-size: var(--fs-md); font-weight: 600; color: var(--text-muted); }
.convl-limpiar:hover { color: var(--navy); }

/* Filas */
.convl-lista { display: flex; flex-direction: column; }
.convl-fila { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 22px 28px; box-shadow: inset 0 -1px 0 var(--convl-linea); color: var(--text-title); text-decoration: none; transition: background .15s; }
.convl-fila:last-child { box-shadow: none; }
.convl-fila:hover { background: #F8F9FB; color: var(--text-title); }
.convl-plazo { width: 84px; height: 84px; padding: 0 4px; border-radius: var(--radius-md); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: var(--convl-azul); color: #fff; text-align: center; }
.convl-plazo small { font-size: var(--fs-xs); font-weight: 700; line-height: 1.1; letter-spacing: .02em; text-transform: uppercase; opacity: .85; } /* 12px (nada visible por debajo, 2026-10-13): con menos espaciado entra en el cuadro. */
.convl-plazo strong { font-size: var(--fs-4xl); font-weight: var(--fw-bold); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.convl-plazo strong.is-texto { font-size: var(--fs-xl); letter-spacing: 0; }
.convl-plazo strong .bi { font-size: var(--fs-3xl); }
.convl-fila.is-pronto .convl-plazo { background: var(--convl-rojo); }
.convl-fila.is-sin-fecha .convl-plazo { background: #EEF2F7; color: var(--convl-azul); }
.convl-fila.is-fin .convl-plazo { background: var(--neutral-bg); color: var(--text-muted); }
.convl-cuerpo { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.convl-autor { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.convl-avatar { flex: none; width: 22px; height: 22px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--convl-azul); color: #fff; font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.convl-autor-nombre { min-width: 0; font-size: var(--fs-sm); font-weight: 700; color: #3A4458; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.convl-etiqueta { padding: 3px var(--tag-px); border-radius: var(--tag-radius); background: var(--neutral-bg); color: var(--neutral-fg); font-size: var(--tag-fs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.convl-etiqueta.is-nueva { background: var(--success-bg); color: var(--success-fg); }
.convl-titulo { margin: 0; font-size: var(--fs-lg); font-weight: 700; line-height: 1.4; letter-spacing: -.01em; color: var(--text-title); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.convl-datos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: var(--fs-sm); font-weight: 500; color: var(--text-muted); }
.convl-datos > span:not(.conv-chip) { display: inline-flex; align-items: center; gap: 5px; }
.convl-datos .bi { color: var(--convl-azul); }
.convl-datos .conv-chip .bi { color: inherit; }
.convl-barra { display: block; max-width: 360px; height: 4px; border-radius: var(--radius-pill); background: var(--convl-linea); overflow: hidden; }
.convl-barra i { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--convl-azul); }
.convl-fila.is-pronto .convl-barra i { background: var(--convl-rojo); }
.convl-cta { display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 18px; border-radius: var(--radius-pill); background: var(--convl-azul); color: #fff; font-size: var(--fs-md); font-weight: 700; white-space: nowrap; transition: background .15s; }
.convl-fila:hover .convl-cta { background: var(--navy); }
.convl-fila.is-fin .convl-cta { background: #fff; color: var(--convl-azul); box-shadow: inset 0 0 0 1.5px var(--convl-azul); }
.convl-vacia { border: 0; border-radius: 0; }

/* Otras mineras (comprador) */
/* Los banners del staff (.convl-banners) pasaron a ui-convocatorias.css (2026-10-13). */
@media (max-width: 767.98px) {
  .convl-hero { padding: 22px 0 84px; }
  .convl-publicar { width: 100%; justify-content: center; }
  .convl-vistas { width: 100%; }
  .convl-vista { flex: 1; justify-content: center; padding: 0 6px 0 10px; font-size: var(--fs-sm); }
  .convl-nueva { width: 100%; justify-content: center; margin-left: 0; }
  .convl-filtros { padding: 14px 16px; }
  .convl-region { flex: 1 1 100%; }
  .convl-buscar { flex-basis: 100%; }
  .convl-btn { flex: 1 1 100%; }
  .convl-fila { grid-template-columns: 76px minmax(0, 1fr); align-items: start; gap: 14px; padding: 18px 16px; }
  .convl-plazo { width: 76px; height: 76px; }
  .convl-plazo strong { font-size: var(--fs-3xl); }
  .convl-cta { grid-column: 2; justify-self: start; height: 36px; padding: 0 14px; font-size: var(--fs-sm); }
}

/* ── Cuenta de auditor (accounts/auditoria.py): aviso de solo lectura ── */
.auditor-banner-wrap { margin-top: 14px; }
.auditor-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: var(--radius-md);
  background: #fff7e6; border: 1px solid #f1c27d; color: #6b4a00; font-size: var(--fs-base);
}
.auditor-banner i { font-size: var(--fs-xl); flex: 0 0 auto; }
.is-auditor form[data-auditor-bloqueado] button[disabled],
.is-auditor form[data-auditor-bloqueado] input[type="submit"][disabled] { cursor: not-allowed; opacity: .45; }

/* Ejemplo de llenado de la postulación (2026-10-19), debajo del cuadro. */
.postular-ejemplo { margin-top: 8px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--primary-50, #eef4fb); border: 1px dashed var(--primary-200, #bcd3ee); display: grid; gap: 6px; font-size: var(--fs-sm); line-height: 1.5; color: var(--text-paragraph, #3a4458); }
.postular-ejemplo p { margin: 0; }
.postular-ejemplo-guia .bi { margin-right: 6px; color: var(--primary-700, #1d4f8a); }
.postular-ejemplo-texto { font-style: italic; }
.postular-ejemplo-texto span { font-style: normal; font-weight: 700; color: var(--text-strong, #1d2433); }

/* Filas de experiencia de la postulación (_experiencias_postulacion.html),
   con y sin sesión. Reemplazan al texto libre (2026-10-20). */
.pexp-guia { margin: 0 0 10px; padding: 10px 14px; border-radius: var(--radius-md); background: var(--primary-50, #eef4fb); border: 1px dashed var(--primary-200, #bcd3ee); font-size: var(--fs-sm); line-height: 1.5; color: var(--text-paragraph, #3a4458); }
.pexp-guia .bi { margin-right: 6px; color: var(--primary-700, #1d4f8a); }
.pexp-filas { display: flex; flex-direction: column; gap: 12px; }
.pexp-fila { position: relative; padding: 12px 14px 14px; border: 1px solid var(--card-border); border-radius: var(--radius-md); background: #fff; }
.pexp-fila.has-error { border-color: var(--danger-solid, #d92d20); }
.pexp-fila-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.pexp-num { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.pexp-quitar, .pexp-agregar { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 0; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
.pexp-quitar { color: var(--danger-solid, #d92d20); }
.pexp-agregar { margin-top: 12px; color: var(--navy, #0A2647); }
.pexp-agregar:hover, .pexp-quitar:hover { text-decoration: underline; }
.pexp-campos { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 10px 12px; }
.pexp-campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pexp-campo.is-servicio { grid-column: 1 / -1; }
.pexp-label { font-size: var(--fs-xs); font-weight: 600; color: var(--text-body); }
.pexp-opcional { font-weight: 400; color: var(--text-muted); }
.pexp-nota { margin: 8px 0 0; font-size: var(--fs-xs); color: var(--text-muted); }
.cvd-campo.pexp .form-control, .cvd-campo.pexp .form-select { min-height: 44px; }
.cvd-campo.pexp .form-select { padding: 0 36px 0 16px; border: 0; border-radius: var(--radius-md); background-color: #fff; box-shadow: inset 0 0 0 1.5px var(--border-strong); font-size: var(--fs-base); }
.cvd-campo.pexp .form-select:focus { box-shadow: inset 0 0 0 1.5px var(--navy), 0 0 0 3px rgba(10, 38, 71, .12); }
@media (max-width: 575.98px) { .pexp-campos { grid-template-columns: minmax(0, 1fr); } }
/* Lo que ven el proveedor (detalle.html) y el comprador (_part_detalle.html). */
.conv-exp, .pd-exp { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.conv-exp li, .pd-exp li { display: flex; align-items: flex-start; gap: 8px; line-height: 1.5; }
.conv-exp .bi, .pd-exp .bi { color: var(--success-fg, #067647); margin-top: 2px; }
.conv-exp-anio, .pd-exp-anio { color: var(--text-muted); }