/* =====================================================
   ui-convocatorias.css — rediseño por zonas (creada vacía el 2026-10-13)
   Convocatorias (templates/suppliers/convocatorias/): lista, detalle, postulación, participantes e invitados.

   Se carga en base.html justo después de styles.css (y antes de las hojas
   propias de cada página), así que a igual especificidad gana sobre
   styles.css. Reglas:
   · Usa solo los tokens y componentes documentados al inicio de
     styles.css (--primary-*, --fs-*, --radius-*, --shadow-*, .tag, .btn…).
     Si falta un token, se agrega allá, no aquí.
   · No redefinas componentes globales (.btn, .tag, .table…): ajusta la
     pieza propia de esta zona con su prefijo.

   Prefijos de la fase 2 (2026-10-13):
     cvx-  ventana de confirmación propia (conv-ui.js)
     cvq-  convocatoria de quien la sigue: cabecera, resumen, acciones,
           pestañas, «Detalles y ajustes»; y las barras fijas del celular
     cvs-  la etapa del proveedor con su línea de pasos
     plazo / plazo-caja  el plazo único (templatetags/plazo.py)
     cvf-  formulario de publicar con vista previa
   ===================================================== */

/* ── Ventana de confirmación propia (conv-ui.js) ──
   Reemplaza al confirm() del navegador en convocatorias. */
.cvx-confirmar .modal-dialog { max-width: 440px; }
.cvx-confirmar .modal-body { padding: 28px 28px 8px; text-align: center; }
.cvx-confirmar-ico { display: inline-grid; place-items: center; width: 48px; height: 48px; margin-bottom: 12px; border-radius: 50%; background: var(--primary-50); color: var(--primary-700); font-size: var(--fs-2xl); }
.cvx-confirmar.is-peligro .cvx-confirmar-ico { background: var(--danger-bg); color: var(--danger-fg); }
.cvx-confirmar-titulo { margin: 0 0 8px; font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--text-strong); text-wrap: balance; }
.cvx-confirmar-texto { margin: 0; font-size: var(--fs-md); line-height: 1.55; color: var(--text-default); }
.cvx-confirmar .modal-footer { justify-content: center; gap: 8px; padding: 16px 28px 24px; border-top: 0; }
.cvx-confirmar .modal-footer .btn { flex: 1 1 0; min-width: 0; }

/* ── Convocatoria para quien la sigue (_seg_pagina.html) ── */
.cvq { padding-bottom: 48px; }

/* «Siguiente paso» tras publicar. */
.cvq-siguiente { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-bottom: 16px; padding: 18px 52px 18px 20px; border: 1px solid var(--success-border); border-radius: var(--radius-lg); background: var(--success-bg); }
.cvq-siguiente-ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface); color: var(--success-fg); font-size: var(--fs-2xl); }
.cvq-siguiente-txt { flex: 1 1 320px; min-width: 0; }
.cvq-siguiente-txt h2 { margin: 0 0 4px; font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text-strong); }
.cvq-siguiente-txt p { margin: 0; font-size: var(--fs-md); color: var(--text-default); }
.cvq-siguiente-acc { display: flex; flex-wrap: wrap; gap: 8px; }
.cvq-siguiente-cerrar { position: absolute; top: 14px; right: 14px; }

/* Cabecera: quién firma, plazo, título, resumen y acciones. */
.cvq-cab { padding: 22px 24px 18px; background: var(--surface); border: 1px solid var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.cvq-cab-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.cvq-cab-top .conv-author { flex: 1 1 220px; }
.cvq-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cvq-cab .conv-title { margin: 14px 0 10px; font-size: var(--fs-3xl); line-height: 1.25; text-wrap: balance; }
.cvq-resumen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; margin: 0; font-size: var(--fs-md); color: var(--text-muted); }
.cvq-resumen-dato { display: inline-flex; align-items: center; gap: 5px; padding: 4px 0; color: var(--text-muted); text-decoration: none; }
.cvq-resumen-dato + .cvq-resumen-dato::before { content: '·'; margin: 0 10px; color: var(--border-strong); }
.cvq-resumen-dato strong { color: var(--text-strong); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
a.cvq-resumen-dato:hover { color: var(--primary-700); }
a.cvq-resumen-dato:hover strong { color: var(--primary-700); text-decoration: underline; }
.cvq-resumen-dato .tag { margin-left: 4px; }
.cvq-recordar { display: inline-flex; align-items: center; gap: 6px; height: var(--btn-h-sm); margin-left: 14px; padding: 0 14px; border: 0; border-radius: var(--radius-pill); background: var(--warning-bg); color: var(--warning-fg); box-shadow: inset 0 0 0 1px var(--warning-border); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-bold); cursor: pointer; }
.cvq-recordar:hover { box-shadow: inset 0 0 0 1.5px var(--warning-solid); }

.cvq-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--neutral-border); }
.cvq-acciones form { margin: 0; }
.cvq-accion { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.cvq-mas { width: var(--btn-h-md); padding: 0; font-size: var(--fs-xl); }
.cvq-menu { min-width: 260px; padding: 6px; }
.cvq-menu form { margin: 0; }
.cvq-menu .dropdown-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); font-size: var(--fs-md); font-weight: var(--fw-medium); white-space: normal; }
.cvq-menu .dropdown-item .bi { flex: none; margin-top: 1px; font-size: var(--fs-lg); }
.cvq-menu .dropdown-item small { display: block; font-size: var(--fs-xs); font-weight: var(--fw-regular); color: var(--text-muted); }
.cvq-menu .dropdown-item.is-peligro { color: var(--danger-fg); }
.cvq-menu .dropdown-item.is-peligro:hover, .cvq-menu .dropdown-item.is-peligro:focus { background: var(--danger-bg); color: var(--danger-fg); }

/* Pestañas: pegadas bajo la barra de arriba al bajar. Sin JS no hacen falta
   (se ven todas las secciones), pero sirven de índice. */
.cvq-tabs { position: sticky; top: var(--nav-h, 79px); z-index: 20; margin: 10px -8px 16px; padding: 8px 8px 0; background: var(--gray-bg); }
.cvq-tabs-in { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 0 8px; background: var(--surface); border: 1px solid var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.cvq-tabs-in::-webkit-scrollbar { display: none; }
.cvq-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 16px; color: var(--text-muted); font-size: var(--fs-md); font-weight: var(--fw-bold); white-space: nowrap; text-decoration: none; box-shadow: inset 0 -3px 0 transparent; transition: color .15s, box-shadow .15s; }
.cvq-tab:hover { color: var(--primary-700); }
.cvq-tab.is-activa { color: var(--primary-700); box-shadow: inset 0 -3px 0 var(--primary-700); }
.cvq-tab-n { min-width: 24px; height: 22px; padding: 0 7px; border-radius: var(--radius-pill); display: grid; place-items: center; background: var(--neutral-bg); color: var(--text-muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.cvq-tab.is-activa .cvq-tab-n { background: var(--primary-700); color: #fff; }
.cvq-panel { scroll-margin-top: calc(var(--nav-h, 79px) + 80px); }
.cvq-panel[hidden] { display: none !important; }
/* Sin JS las secciones van seguidas: un poco de aire entre ellas. */
.cvq:not(.cvq-js) .cvq-panel + .cvq-panel { margin-top: 22px; }
.cvq .cvp { margin-top: 0; gap: 0; }
.cvq .inv { margin-top: 0; }
.cvq-avances .conv-section-title { margin-bottom: 18px; }

/* Detalles y ajustes */
.cvq-detalles { display: flex; flex-direction: column; gap: 16px; }
.cvq-detalles .conv-panel + .conv-panel { margin-top: 0; }
.cvq-detalles .conv-section-title { margin-bottom: 14px; }
.cvq-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; margin: 0 0 18px; border-radius: var(--radius-md); overflow: hidden; background: var(--neutral-border); }
.cvq-datos > div { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px; background: var(--gray-bg); }
.cvq-datos dt { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.cvq-datos dd { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text-strong); }
.cvq-subtitulo { margin: 22px 0 8px; font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--text-strong); }
.cvq-subtitulo small { font-weight: var(--fw-regular); color: var(--text-muted); }
.cvq-subtitulo + .conv-contact, .cvq-subtitulo + .conv-docs { margin-top: 0; }
.cvq-ajustes .conv-client { margin-bottom: 6px; }
.cvq-ajuste { margin: 0; padding: 14px 0; }
.cvq-ajuste + .cvq-ajuste { border-top: 1px solid var(--neutral-border); }
.cvq-ajuste .form-check-label { color: var(--text-strong); font-size: var(--fs-base); font-weight: var(--fw-semibold); cursor: pointer; }
.cvq-ajuste .form-check-input { cursor: pointer; }
.cvq-ajuste-ayuda { margin: 4px 0 0 2.5em; font-size: var(--fs-sm); color: var(--text-muted); overflow-wrap: anywhere; }
/* Quién la gestiona y «Pasar la convocatoria» (2026-10-19) */
.cvq-gestores-lista { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0 0 10px; padding: 0; list-style: none; }
.cvq-gestores-lista li { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cvq-gestor { display: flex; flex-direction: column; font-weight: var(--fw-semibold); color: var(--text-strong); overflow-wrap: anywhere; }
.cvq-gestor small { font-weight: var(--fw-regular); font-size: var(--fs-sm); color: var(--text-muted); }
.cvq-gestores-ayuda { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }
.cvq-pasar { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--neutral-border); }
.cvq-pasar summary { display: inline-flex; align-items: center; gap: 8px; color: var(--primary-700); font-weight: var(--fw-semibold); cursor: pointer; }
.cvq-pasar-form { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; max-width: 420px; margin-top: 12px; }
.cvq-pasar-form .form-label, .cvq-pasar-form .form-text { margin: 0; }

/* ── Postulantes (participantes.js) ── */
.cvq .cvt-filtros { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; margin-bottom: 12px; align-self: flex-start; }
.cvq .cvt-filtros::-webkit-scrollbar { display: none; }
.cvt-filtro { flex: none; white-space: nowrap; }
.cvt-filtro[hidden] { display: none; }
.cvq .cvt-aprobar-todas { margin-bottom: 12px; }
/* La fila se toca para abrir la postulación. */
.cvt-fila-in[data-cvt-tocar] { cursor: pointer; }
.cvt-fila-in[data-cvt-tocar]:hover { background: var(--gray-bg); }
.cvt-fila.is-marcada .cvt-fila-in:hover, .cvt-fila.is-nueva .cvt-fila-in:hover, .cvt-fila.is-en-panel .cvt-fila-in:hover { background: transparent; }
.cvt-logo { cursor: inherit; }
/* Nuevas desde la visita anterior; la abierta en el panel. */
.cvt-fila.is-nueva { background: var(--success-bg); box-shadow: inset 3px 0 0 var(--success-solid), inset 0 -1px 0 var(--neutral-bg); }
.cvt-fila.is-en-panel { background: var(--primary-50); box-shadow: inset 3px 0 0 var(--primary-700), inset 0 -1px 0 var(--neutral-bg); }
.cvt-nueva { flex: none; }
.cvt-escribiste { color: var(--primary-700); font-weight: var(--fw-semibold); }

/* Panel lateral de una postulación: a la derecha; en el celular, pantalla completa. */
.cvt-panel { --bs-offcanvas-width: 600px; }
.cvt-panel .offcanvas-header { gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--neutral-border); }
.cvt-panel-titulo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cvt-panel-pos { min-height: 1em; font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.cvt-panel .offcanvas-title { font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cvt-panel-nav { display: flex; align-items: center; gap: 2px; }
.cvt-panel-nav .cvt-icono:disabled { opacity: .35; cursor: default; background: transparent; }
.cvt-panel-nav .btn-close { margin-left: 8px; }
.cvt-panel .offcanvas-body { display: flex; flex-direction: column; gap: 20px; padding: 20px 20px 0; }
/* Sin esto, en la columna flexible los bloques con overflow (la franja de datos) se achicaban a cero. */
.cvt-panel .offcanvas-body > * { flex-shrink: 0; }
.cvt-panel .pd-acciones { position: sticky; bottom: 0; margin: auto -20px 0; padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); background: var(--surface); box-shadow: inset 0 1px 0 var(--neutral-border); }
.pd-eval { padding: 16px; border-radius: var(--radius-md); background: var(--gray-bg); box-shadow: inset 0 0 0 1px var(--neutral-border); }
.pd-eval-etapa { display: grid; grid-template-columns: auto minmax(0, 240px); align-items: center; justify-content: start; gap: 8px 12px; margin-bottom: 14px; }
.pd-eval-etapa label, .pd-eval-label { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-strong); }
.pd-eval-etapa small { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-muted); }
.pd-eval-label { display: block; margin-bottom: 6px; }
.pd-eval-label small { font-weight: var(--fw-regular); color: var(--text-muted); }
.pd-eval .cvt-eval-pie { margin-top: 8px; }
.pd-eval .cvt-etapa-sel:disabled { cursor: default; opacity: .7; }

/* ── El proveedor: su etapa con la línea de pasos (detalle.html) ── */
.cvs-etapa { margin: 0 0 16px; padding: 16px; border: 1px solid var(--neutral-border); border-radius: var(--radius-md); background: var(--gray-bg); }
.cvs-etapa-txt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 16px; font-size: var(--fs-md); color: var(--text-default); }
.cvs-pasos { list-style: none; display: flex; margin: 0; padding: 0; }
.cvs-paso { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
/* La raya que une cada paso con el anterior. */
.cvs-paso + .cvs-paso::before { content: ''; position: absolute; top: 13px; right: 50%; width: 100%; height: 2px; background: var(--border-strong); }
.cvs-paso.is-hecho + .cvs-paso::before { background: var(--primary-700); }
.cvs-paso-punto { position: relative; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 2px var(--border-strong); color: var(--text-muted); font-size: var(--fs-sm); }
.cvs-paso.is-hecho .cvs-paso-punto { background: var(--primary-700); box-shadow: none; color: #fff; }
.cvs-paso.is-actual .cvs-paso-punto { box-shadow: inset 0 0 0 2px var(--primary-700), 0 0 0 4px var(--primary-100); color: var(--primary-700); }
.cvs-paso.is-actual .cvs-paso-punto .bi-circle-fill { font-size: var(--fs-xs); transform: scale(.8); }
.cvs-paso-nombre { font-size: var(--fs-xs); font-weight: var(--fw-semibold); line-height: 1.25; color: var(--text-muted); }
.cvs-paso.is-hecho .cvs-paso-nombre, .cvs-paso.is-actual .cvs-paso-nombre { color: var(--text-strong); }
.cvs-paso.is-actual .cvs-paso-nombre { font-weight: var(--fw-bold); }
/* No seleccionada: tono neutro, sin rojo (2026-10-13). Seleccionada: verde. */
.cvs-etapa.is-no_seleccionada .cvs-paso.is-actual .cvs-paso-punto { box-shadow: inset 0 0 0 2px var(--neutral-fg), 0 0 0 4px var(--neutral-bg); color: var(--neutral-fg); }
.cvs-etapa.is-no_seleccionada .cvs-paso.is-hecho + .cvs-paso::before { background: var(--border-strong); }
.cvs-etapa.is-seleccionada { border-color: var(--success-border); background: var(--success-bg); }
.cvs-etapa.is-seleccionada .cvs-paso.is-actual .cvs-paso-punto { background: var(--success-solid); box-shadow: 0 0 0 4px var(--success-border); color: #fff; }
.conv-part-quien { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: var(--fs-sm); color: var(--text-muted); }

/* Barra fija del proveedor en el celular: el plazo y «Participar». */
.cvq-barra-prov { display: none; }

/* ── El plazo (templatetags/plazo.py): la etiqueta usa .tag; la caja de la
   lista toma el mismo color: rojo ≤3 días, ámbar ≤7, azul con más, gris
   sin fecha o terminada. ── */
.tag.plazo { font-variant-numeric: tabular-nums; }
.convl-plazo.plazo-caja.is-rojo { background: var(--danger-solid); color: #fff; }
.convl-plazo.plazo-caja.is-ambar { background: var(--warning-bg); color: var(--warning-fg); box-shadow: inset 0 0 0 1.5px var(--warning-border); }
.convl-plazo.plazo-caja.is-azul { background: var(--primary-700); color: #fff; }
.convl-plazo.plazo-caja.is-gris { background: var(--neutral-bg); color: var(--text-muted); }
.plazo-caja strong.is-texto { font-size: var(--fs-lg); }

/* ── Formulario de publicar (form.html): tres bloques y la vista previa ── */
.cvf-page { max-width: 1180px; }
.cvf-cab { margin-bottom: 18px; }
.cvf-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: start; gap: 24px; }
.cvf-form { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cvf-bloque { display: flex; flex-wrap: wrap; gap: 0 16px; min-width: 0; margin: 0; padding: 20px 22px 8px; border: 1px solid var(--card-border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.cvf-bloque-titulo { float: none; display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 14px; font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text-strong); }
.cvf-paso { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--primary-50); color: var(--primary-700); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.cvf-atajos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cvf-atajos[hidden] { display: none; }
.cvf-atajo { height: var(--btn-h-sm); padding: 0 14px; border: 0; border-radius: var(--radius-pill); background: var(--primary-50); color: var(--primary-700); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-bold); cursor: pointer; }
.cvf-atajo:hover { background: var(--primary-100); }
.cvf-atajo.is-on { background: var(--primary-700); color: #fff; }
.cvf-nota { flex: 1 1 100%; display: flex; align-items: center; gap: 6px; margin: -4px 0 14px; font-size: var(--fs-sm); color: var(--text-muted); }
.cvf-invitar { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--info-border); border-radius: var(--radius-lg); background: var(--info-bg); color: var(--info-fg); font-size: var(--fs-md); }
.cvf-invitar > .bi { flex: none; font-size: var(--fs-2xl); line-height: 1; }
.cvf-invitar > div { flex: 1 1 260px; display: flex; flex-direction: column; gap: 2px; }
.cvf-invitar strong { color: var(--text-strong); }
.cvf-acciones { display: flex; justify-content: flex-end; gap: 8px; }
.cvf-acciones .btn { display: inline-flex; align-items: center; gap: 8px; }

.cvf-previa { position: sticky; top: calc(var(--nav-h, 79px) + 16px); }
.cvf-previa[hidden] { display: none; }
.cvf-previa-rotulo { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.cvf-previa-tarjeta { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px; border: 1px solid var(--card-border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-md); }
.cvf-previa-autor { display: flex; align-items: center; gap: 10px; width: 100%; }
.cvf-previa-autor .conv-avatar { flex-basis: 34px; width: 34px; height: 34px; font-size: var(--fs-md); }
.cvf-previa-titulo { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-bold); line-height: 1.35; color: var(--text-strong); overflow-wrap: anywhere; }
.cvf-previa-region, .cvf-previa-docs { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-muted); }
.cvf-previa-region[hidden], .cvf-previa-docs[hidden] { display: none; }
.cvf-previa-texto { margin: 0; font-size: var(--fs-md); line-height: 1.55; color: var(--text-default); white-space: pre-line; overflow-wrap: anywhere; }
.cvf-previa-cta { display: inline-flex; align-items: center; gap: 6px; height: var(--btn-h-sm); padding: 0 16px; border-radius: var(--btn-radius); background: var(--btn-primary-bg); color: #fff; font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.cvf-previa-pie { margin: 10px 2px 0; font-size: var(--fs-xs); color: var(--text-muted); }
@media (max-width: 991.98px) {
  /* En pantallas chicas la vista previa va después de los bloques y antes
     de «Publicar»: el form se «disuelve» en la grilla para ordenarlos. */
  .cvf-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .cvf-form { display: contents; }
  .cvf-previa { position: static; order: 1; }
  .cvf-acciones { order: 2; }
}
@media (max-width: 575.98px) {
  .cvf-bloque { padding: 16px 16px 4px; }
  .cvf-acciones .btn { flex: 1 1 0; justify-content: center; }
}

/* ── Páginas públicas (publica.html, _banda_portada.html) ── */
/* El recuadro de días de la banda: ámbar si cierra en la semana (rojo ya lo trae). */
.cvb-dias.is-semana { background: var(--warning-bg); color: var(--warning-fg); box-shadow: inset 0 0 0 1.5px var(--warning-border); }
.cvb-card-meta .tag.plazo .bi { color: inherit; font-size: 1.05em; }
.cvd-otra-autor { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* «Ver más» no pliega si lo oculto son unas pocas líneas (ver-mas.js). */
.conv-text.ver-mas.is-entero, .cvd-texto.ver-mas.is-entero { max-height: none; }
.cvq-siguiente-acc .btn { display: inline-flex; align-items: center; gap: 8px; }
.cvd-barra { transition: transform .2s ease; }
@media (max-width: 767.98px) {
  .cvd-barra.is-escondida { transform: translateY(110%); }
}

/* ── Lista (lista.html): los banners del staff (traídos de styles.css el
   2026-10-13). Al costado y acompañan al bajar; en pantallas chicas,
   debajo de la lista, uno al lado del otro. Sin banners no hay columna. ── */
.convl-banners { flex: 0 1 320px; min-width: 260px; display: flex; flex-direction: column; gap: 16px; position: sticky; top: calc(var(--nav-h, 79px) + 16px); }
.convl-banner { display: block; aspect-ratio: 1 / 1; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-md); }
.convl-banner img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 991.98px) {
  .convl-banners { position: static; flex: 1 1 100%; flex-direction: row; }
  .convl-banner { flex: 1 1 0; min-width: 0; }
}
/* La fila con postulantes nuevos, y el recuadro del plazo con su color. */
.convl-fila.is-con-nuevos { box-shadow: inset 3px 0 0 var(--success-solid), inset 0 -1px 0 var(--convl-linea); }
.convl-autor .tag { flex: none; }
.convl-fila.is-pronto .convl-barra i { background: var(--danger-solid); }

@media (max-width: 767.98px) {
  .cvq-cab { padding: 16px; }
  .cvq-cab .conv-title { font-size: var(--fs-2xl); }
  .cvq-recordar { margin: 4px 0 0; }
  /* La barra de acciones queda fija abajo; Editar y Cerrar, solo con ícono. */
  .cvq-con-barra { padding-bottom: 96px; }
  .cvq-acciones {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1035; flex-wrap: nowrap; gap: 8px; margin: 0;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--card-border);
    background: var(--surface); box-shadow: var(--shadow-lg);
  }
  .cvq-acciones .cvq-accion { height: 46px; }
  .cvq-acciones .cvq-accion:not(.is-principal) { width: 46px; padding: 0; }
  .cvq-acciones .cvq-accion.is-principal { flex: 1 1 auto; }
  .cvq-acciones .cvq-accion-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cvq-acciones > form, .cvq-acciones > .dropdown, .cvq-acciones > a { flex: none; }
  body.cvt-seleccionando .cvq-acciones { display: none; }
  .cvq-tabs { margin: 10px -12px 12px; padding: 6px 12px 0; }
  .cvq-tab { min-height: 48px; padding: 0 12px; }
  .cvt-toast { bottom: calc(84px + env(safe-area-inset-bottom)); }

  /* Barra de seleccionadas fija abajo. La contención de .cvt (container
     query) dejaba un position: fixed dentro de la tabla, así que en el
     celular .cvt deja de ser contenedor y aquí van sus reglas de angosta. */
  .cvq .cvt { container-type: normal; }
  .cvq .cvt-cab > span { display: none; }
  .cvq .cvt-cab::after { content: 'Postulantes'; }
  .cvq .cvt-fila-in { flex-wrap: wrap; gap: 12px 14px; }
  .cvq .cvt-emp { flex: 1 1 calc(100% - 40px); min-width: 0; }
  .cvq .cvt-perfil { flex: 1 1 100%; margin-left: 38px; grid-template-columns: 1fr; }
  .cvq .cvt-etapa { flex: 1 1 150px; margin-left: 38px; }
  .cvq .cvt-acc { flex: 0 0 auto; margin-left: auto; }
  .cvq .cvt-nota-vista { margin-left: 16px; }
  .cvq .cvt-selbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1036; gap: 8px 10px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); box-shadow: var(--shadow-lg);
  }
  .cvq .cvt-selbar-esp { display: none; }
  .cvq .cvt-selbar-btn { height: 42px; }
  .cvq .cvt-selbar-btn.is-blanco { flex: 1 1 auto; justify-content: center; }
  body.cvt-seleccionando .cvq { padding-bottom: 150px; }

  .cvt-panel { --bs-offcanvas-width: 100vw; }
  .cvt-panel .offcanvas-header { padding: 12px 12px 12px 16px; }
  .cvt-panel .offcanvas-body { padding: 16px 16px 0; }
  .cvt-panel .pd-acciones { margin: auto -16px 0; padding-left: 16px; padding-right: 16px; }
  .cvt-panel .pd-btn { flex: 1 1 auto; justify-content: center; }
  .pd-eval-etapa { grid-template-columns: 1fr; }

  /* Proveedor. La línea de pasos va vertical: en 390px los nombres
     («Preseleccionada», «Seleccionada») se encimaban. */
  .cvs-pasos { flex-direction: column; gap: 12px; }
  .cvs-paso { flex-direction: row; gap: 10px; text-align: left; }
  .cvs-paso + .cvs-paso::before { top: -12px; left: 13px; right: auto; width: 2px; height: 12px; }
  .cvs-paso-nombre { font-size: var(--fs-sm); }
  .conv-page-narrow .conv-card-top { flex-wrap: wrap; }
  .conv-page-narrow .conv-card-top .conv-author { flex-basis: calc(100% - 52px); }
  .conv-page-narrow .conv-card-top > .tag { margin-left: 52px; }
  #participar .conv-section-head { flex-direction: column; align-items: flex-start; gap: 2px; }
  .cvq-con-barra-prov { padding-bottom: 96px; }
  .cvq-barra-prov {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1035; display: flex; align-items: center; gap: 10px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--card-border);
    background: var(--surface); box-shadow: var(--shadow-lg);
  }
  .cvq-barra-prov-plazo { flex: 1 1 auto; min-width: 0; }
  .cvq-barra-prov-plazo .tag { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .cvq-barra-prov .btn { flex: none; height: 46px; display: inline-flex; align-items: center; gap: 6px; }
}

/* ── Anuncio «Oportunidad» (2026-10-27): solo el staff lo prende; se ve con
   otro color en la lista, la ficha, la página pública y la portada. ──── */
.tag.is-oportunidad, .convl-etiqueta.is-oportunidad, .cvd-chip.is-oportunidad, .cvb-badge.is-oportunidad {
  background: var(--warning-solid); color: #fff; border-color: var(--warning-solid);
}
.convl-fila.is-oportunidad { background: var(--warning-bg); box-shadow: inset 4px 0 0 var(--warning-solid), inset 0 -1px 0 var(--convl-linea); }
.convl-fila.is-oportunidad:hover { background: #FFF3D1; }
.conv-panel.is-oportunidad, .cvq-cab.is-oportunidad, .cvd-head.is-oportunidad, .cvf-previa-tarjeta.is-oportunidad {
  background: var(--warning-bg); border: 2px solid var(--warning-solid); position: relative;
}
.conv-oportunidad { position: absolute; top: -13px; left: 20px; }
.cvq-cab.is-oportunidad { padding: 22px 20px 16px; border-radius: var(--radius-lg); margin-bottom: 12px; }
.conv-panel.is-oportunidad .conv-card-top, .cvq-cab.is-oportunidad .cvq-cab-top { margin-top: 4px; }
.cvd-chip.is-oportunidad .bi, .convl-etiqueta.is-oportunidad .bi, .tag.is-oportunidad .bi { font-size: .85em; }
.cvb-card.is-oportunidad { outline: 2px solid var(--warning-solid); outline-offset: -2px; }
.cvf-oportunidad { padding: 12px 14px; border: 1px dashed var(--warning-border); border-radius: var(--radius-md); background: #fff; }
.cvf-oportunidad.is-activa { background: var(--warning-bg); border-style: solid; border-color: var(--warning-solid); }
.cvf-oportunidad .form-check-label { font-weight: var(--fw-semibold); color: var(--text-strong); }
.cvf-oportunidad .form-check-label .bi { color: var(--warning-solid); margin-right: 6px; }
.cvf-previa-oportunidad { align-self: flex-start; margin-bottom: 10px; }