/* =====================================================
   ui-cuentas.css — rediseño por zonas (creada vacía el 2026-10-13)
   Cuentas (templates/accounts/, Inicio de comprador y proveedor, Mi perfil, ajustes, empresas compradoras).

   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.
   ===================================================== */

/* ─────────────────────────────────────────────────────
   Páginas de la cuenta del proveedor (2026-10-13):
   Mensajes, un mensaje y Mi membresía
   (templates/suppliers/cuenta/, suppliers/cuenta_proveedor.py).
   ───────────────────────────────────────────────────── */
/* Ancho de lectura, alineado a la izquierda con las migas (no centrado). */
.cu-page > * { max-width: 980px; }
.cu-page .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.cu-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 20px; margin-bottom: 20px; }
.cu-title { margin: 0 0 4px; font-size: var(--fs-3xl); font-weight: var(--fw-bold); line-height: 1.2; color: var(--text-heading); }
.cu-sub { max-width: 640px; margin: 0; font-size: var(--fs-md); line-height: 1.55; color: var(--text-muted); }
.cu-eyebrow { margin: 0; font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .6px; text-transform: uppercase; color: var(--text-muted); }
.cu-avatar {
  display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: var(--radius-md);
  background: var(--primary-50); border: 1px solid var(--primary-100); color: var(--primary-700);
  font-size: var(--fs-sm); font-weight: var(--fw-bold);
}
.cu-chev { flex-shrink: 0; align-self: center; color: var(--text-muted); }

/* Bandeja: una fila por mensaje, toda la fila es el enlace. */
.cu-inbox { display: flex; flex-direction: column; gap: 10px; margin: 0 0 20px; padding: 0; list-style: none; }
.cu-inbox-item {
  display: flex; gap: 14px; padding: 16px 18px; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--card-border); box-shadow: var(--shadow-sm);
  color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s;
}
.cu-inbox-item:hover { border-color: var(--primary-300); box-shadow: var(--shadow-md); color: inherit; }
.cu-inbox-body { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.cu-inbox-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cu-inbox-quien { min-width: 0; overflow: hidden; font-size: var(--fs-base); color: var(--text-strong); text-overflow: ellipsis; white-space: nowrap; }
.cu-inbox-fecha { flex-shrink: 0; font-size: var(--fs-sm); color: var(--text-muted); }
.cu-inbox-asunto { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--primary-700); overflow-wrap: anywhere; }
.cu-inbox-texto { font-size: var(--fs-sm); line-height: 1.5; color: var(--text-muted); overflow-wrap: anywhere; }
.cu-inbox-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

.cu-empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 20px;
  border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--surface); text-align: center;
}
.cu-empty-ico {
  display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 4px;
  border-radius: 50%; background: var(--primary-50); color: var(--primary-600); font-size: var(--fs-3xl);
}
.cu-empty h2 { margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--text-strong); }
.cu-empty p { max-width: 460px; margin: 0 0 8px; font-size: var(--fs-md); color: var(--text-muted); }

/* Un mensaje. */
.cu-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.cu-nav-pasos { display: flex; gap: 4px; }
.cu-msg { padding: 24px 28px; }
.cu-msg-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px 20px; padding-bottom: 18px; border-bottom: 1px solid var(--card-border); }
.cu-msg-titulo { flex: 1 1 320px; min-width: 0; }
.cu-msg-titulo h1 { margin: 6px 0 4px; font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: 1.3; color: var(--text-strong); overflow-wrap: anywhere; }
.cu-msg-titulo time { font-size: var(--fs-sm); color: var(--text-muted); }
.cu-msg-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.cu-msg-de { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 24px; margin: 18px 0 0; }
.cu-msg-de > div { min-width: 0; }
.cu-msg-de-quien { display: flex; align-items: center; gap: 12px; grid-column: 1 / -1; }
.cu-msg-de dt { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: .4px; text-transform: uppercase; color: var(--text-muted); }
.cu-msg-de dd { margin: 2px 0 0; font-size: var(--fs-md); color: var(--text-default); overflow-wrap: anywhere; }
.cu-msg-de-quien dd { margin: 0; font-size: var(--fs-base); }
.cu-msg-de-quien strong { color: var(--text-strong); }
.cu-msg-texto { margin: 20px 0 0; padding: 18px 20px; border-radius: var(--radius-md); background: var(--gray-bg); font-size: var(--fs-base); line-height: 1.65; color: var(--text-paragraph); overflow-wrap: anywhere; }
.cu-msg-adjuntos { margin-top: 20px; }
.cu-msg-adjuntos h2 { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--text-strong); }
.cu-msg-adjuntos ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cu-msg-adjuntos a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; max-width: 100%; padding: 6px 14px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--primary-700); text-decoration: none;
}
.cu-msg-adjuntos a span { overflow-wrap: anywhere; }
.cu-msg-adjuntos a:hover { border-color: var(--primary-300); background: var(--primary-50); }
.cu-msg-nota { display: flex; align-items: flex-start; gap: 8px; margin: 20px 0 0; font-size: var(--fs-sm); color: var(--text-muted); }
.cu-msg-nota .bi { margin-top: 2px; }

/* Mi membresía: plan arriba a todo el ancho, beneficios y pedido abajo. */
.cu-memb { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 20px; align-items: start; }
.cu-memb-plan { grid-column: 1 / -1; padding: 22px 24px; }
.cu-memb-plan.is-verificado { border-color: var(--success-border); }
.cu-memb-plan-top { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.cu-memb-plan-top > div { flex: 1; min-width: 0; }
.cu-memb-plan h2 { margin: 2px 0 0; font-size: var(--fs-2xl); font-weight: var(--fw-bold); color: var(--text-strong); }
.cu-memb-ico {
  display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; flex-shrink: 0;
  border-radius: var(--radius-lg); background: var(--neutral-bg); color: var(--neutral-fg); font-size: var(--fs-4xl);
}
.cu-memb-plan.is-verificado .cu-memb-ico { background: var(--success-bg); color: var(--success-fg); }
.cu-memb-fechas { display: flex; flex-wrap: wrap; gap: 12px 40px; margin: 18px 0 0; }
.cu-memb-fechas dt { font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: .4px; text-transform: uppercase; color: var(--text-muted); }
.cu-memb-fechas dd { margin: 2px 0 0; font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--text-strong); }
.cu-memb-estado { margin: 16px 0 0; padding: 10px 14px; border-radius: var(--radius-md); border: 1px solid; font-size: var(--fs-md); font-weight: var(--fw-medium); }
.cu-memb-estado.is-warn { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-fg); }
.cu-memb-estado.is-danger { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-fg); }
.cu-memb-texto { margin: 14px 0 0; font-size: var(--fs-md); line-height: 1.6; color: var(--text-default); }
.cu-memb-beneficios, .cu-memb-form { padding: 22px 24px; }
.cu-memb-beneficios h2, .cu-memb-form h2 { margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--text-strong); }
.cu-memb-form form { margin-top: 16px; }
.cu-beneficios { display: flex; flex-direction: column; gap: 14px; margin: 16px 0 0; padding: 0; list-style: none; }
.cu-beneficios li { display: flex; align-items: flex-start; gap: 12px; font-size: var(--fs-md); line-height: 1.5; color: var(--text-muted); }
.cu-beneficios li > span:nth-child(2) { flex: 1; min-width: 0; }
.cu-beneficios strong { display: block; font-size: var(--fs-base); color: var(--text-strong); }
.cu-beneficio-ico {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0;
  border-radius: var(--radius-md); background: var(--primary-50); color: var(--primary-600); font-size: var(--fs-xl);
}

@media (max-width: 768px) {
  .cu-title { font-size: var(--fs-2xl); }
  .cu-memb { grid-template-columns: minmax(0, 1fr); }
  .cu-msg { padding: 18px 16px; }
  .cu-msg-acciones { width: 100%; }
  .cu-msg-acciones .btn { flex: 1 1 auto; }
  .cu-inbox-item { padding: 14px; gap: 12px; }
  .cu-avatar { width: 40px; height: 40px; }
  .cu-memb-plan, .cu-memb-beneficios, .cu-memb-form { padding: 18px 16px; }
  .cu-memb-form .btn { width: 100%; }
}

/* ─────────────────────────────────────────────────────
   Inicio del proveedor y del comprador (suppliers/inicio.py), sobre las
   piezas .dash- de styles.css (2026-10-13).
   ───────────────────────────────────────────────────── */
/* Cabecera del proveedor: sus datos en tres cuadros (ficha, membresía,
   convocatorias) en lugar del total del directorio. */
.cu-dash-datos { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.cu-dash-datos > li { display: flex; }
.cu-dash-dato {
  display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 150px; padding: 10px 14px;
  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.cu-dash-dato:hover { background: rgba(6, 20, 40, .34); border-color: rgba(255, 255, 255, .32); color: #fff; }
.cu-dash-dato-lbl { font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: .5px; text-transform: uppercase; color: var(--primary-200); }
.cu-dash-dato-val { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-base); font-weight: var(--fw-bold); }
.cu-dash-dato-sub { font-size: var(--fs-xs); color: rgba(255, 255, 255, .85); }
.cu-dash-dato-sub.is-alerta { font-weight: var(--fw-bold); color: var(--warning-border); }

/* Aviso a todo el ancho entre la cabecera y las tarjetas. */
.cu-aviso {
  display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 12px 16px;
  border: 1px solid; border-radius: var(--radius-lg); font-size: var(--fs-md);
}
.cu-aviso > .bi { flex-shrink: 0; font-size: var(--fs-2xl); }
.cu-aviso p { flex: 1; min-width: 0; margin: 0; line-height: 1.5; }
.cu-aviso .btn { flex-shrink: 0; }
.cu-aviso.is-warn { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-fg); }
.cu-aviso.is-danger { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-fg); }
.cu-aviso strong { color: inherit; }

/* «Tu ficha» primero mientras le falte algo (el grid respeta order). */
.dash-card.is-primero { order: -1; }
/* Lo que falta es un enlace a su ventana de edición. */
.cu-checklist a {
  display: inline-flex; align-items: center; gap: 7px; min-height: 28px; color: var(--primary-700);
  font-weight: var(--fw-semibold); text-decoration: none;
}
.cu-checklist a:hover { text-decoration: underline; }
.cu-checklist a .bi { color: var(--primary-400); }
.dash-note.cu-dash-rechazo { background: var(--danger-bg); color: var(--danger-fg); }

@media (max-width: 768px) {
  .cu-dash-datos { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .cu-dash-dato { min-width: 0; width: 100%; }
  .cu-aviso { flex-wrap: wrap; }
  .cu-aviso .btn { width: 100%; min-height: 40px; }
  .cu-checklist a { min-height: 40px; }
}

/* Inicio del comprador: «Mis convocatorias» ancha junto a «Mis mensajes»;
   debajo, proveedores nuevos y búsquedas a medias. Seis columnas para
   poder repartir 4 + 2 y 3 + 3. */
.dash-cards.cu-dash-comprador { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.cu-dash-comprador > .dash-card { grid-column: span 3; }
.cu-dash-comprador > .cu-dash-conv { grid-column: span 4; }
.cu-dash-comprador > .cu-dash-conv + .dash-card { grid-column: span 2; }
.cu-conv-item { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; }
.cu-conv-titulo { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cu-conv-datos { display: flex; flex-shrink: 0; align-items: center; gap: 14px; font-size: var(--fs-sm); color: var(--text-muted); }
.cu-conv-dato { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.cu-conv-dato.is-pronto { font-weight: var(--fw-bold); color: var(--warning-fg); }
.cu-conv-dato.is-con { font-weight: var(--fw-semibold); color: var(--success-fg); }
@media (max-width: 1199.98px) {
  .dash-cards.cu-dash-comprador { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cu-dash-comprador > .dash-card,
  .cu-dash-comprador > .cu-dash-conv + .dash-card { grid-column: span 1; }
  .cu-dash-comprador > .cu-dash-conv { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
  .dash-cards.cu-dash-comprador { grid-template-columns: minmax(0, 1fr); }
  .cu-conv-item { flex-direction: column; align-items: stretch; }
  .cu-conv-datos { justify-content: flex-start; flex-wrap: wrap; gap: 6px 14px; }
  .cu-conv-datos .dash-chev { display: none; }
}

/* «Mis mensajes» del comprador (mis_cotizaciones.html): el apartado
   «De mis convocatorias», arriba de los mensajes directos (2026-10-13). */
.cu-conv-msjs { margin-bottom: 16px; padding: 18px 20px; }
.cu-conv-msjs-head { display: flex; align-items: center; gap: 8px; }
.cu-conv-msjs-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text-strong); }
.cu-conv-msjs-head h2 .bi { color: var(--success-fg); }
.cu-conv-msjs-sub { margin: 4px 0 12px; font-size: var(--fs-sm); color: var(--text-muted); }
.cu-conv-msjs-lista { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.cu-conv-msjs-lista li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-top: 1px solid var(--card-border); }
.cu-conv-msjs-lista li:first-child { border-top: 0; }
.cu-conv-msjs-ico {
  display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: var(--radius-md); background: var(--primary-50); color: var(--primary-600);
}
.cu-conv-msjs-body { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.cu-conv-msjs-detalle { font-size: var(--fs-md); color: var(--text-default); overflow-wrap: anywhere; }
.cu-conv-msjs-body a { font-size: var(--fs-sm); font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.cu-conv-msjs-lista time { flex-shrink: 0; font-size: var(--fs-sm); color: var(--text-muted); white-space: nowrap; }
.cu-conv-msjs-mas summary { display: inline-flex; align-items: center; min-height: 40px; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--primary-700); cursor: pointer; }
.cu-conv-msjs-mas > .cu-conv-msjs-lista li:first-child { border-top: 1px solid var(--card-border); }
@media (max-width: 575.98px) {
  .cu-conv-msjs { padding: 16px; }
  .cu-conv-msjs-lista li { flex-wrap: wrap; }
  .cu-conv-msjs-lista time { width: 100%; padding-left: 44px; }
}
.cu-seccion-titulo { display: flex; align-items: center; gap: 8px; margin: 22px 0 12px; font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text-strong); }
.cu-seccion-titulo .icon { width: 18px; height: 18px; color: var(--primary-600); }

/* ─────────────────────────────────────────────────────
   Ficha propia (2026-10-13): estado arriba, «Cambios en revisión» e
   índice «Editar ficha» (templates/suppliers/_ficha_estado_propio.html,
   _ficha_indice.html). Lo de los popups y lápices sigue en profile.css.
   ───────────────────────────────────────────────────── */
.cu-ficha-estado {
  margin-bottom: 16px; padding: 14px 18px; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--card-border); box-shadow: var(--shadow-sm);
}
.cu-ficha-estado-top { display: flex; align-items: flex-start; gap: 12px; }
.cu-ficha-estado-top .tag { flex-shrink: 0; margin-top: 1px; }
.cu-ficha-estado-top p { margin: 0; font-size: var(--fs-md); line-height: 1.55; color: var(--text-default); }
.cu-revision { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--card-border); }
.cu-revision-titulo { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--text-strong); }
.cu-revision-titulo > .bi { color: var(--warning-fg); }
.cu-revision-titulo.is-rechazo { margin-top: 16px; }
.cu-revision-titulo.is-rechazo > .bi { color: var(--danger-fg); }
.cu-revision-cuando { font-size: var(--fs-sm); font-weight: var(--fw-regular); color: var(--text-muted); }
.cu-revision-sub { margin: 2px 0 8px; font-size: var(--fs-sm); color: var(--text-muted); }
.cu-revision-lista { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.cu-revision-lista li {
  display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--radius-md);
  background: var(--warning-bg); border: 1px solid var(--warning-border);
}
.cu-revision-lista li.is-rechazo { background: var(--danger-bg); border-color: var(--danger-border); }
.cu-revision-ico {
  display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: var(--radius-sm); background: var(--surface); color: var(--warning-fg);
}
.is-rechazo .cu-revision-ico { color: var(--danger-fg); }
.cu-revision-que { display: flex; flex: 1; flex-direction: column; min-width: 0; font-size: var(--fs-md); color: var(--text-strong); }
.cu-revision-que > span { font-size: var(--fs-sm); color: var(--text-default); overflow-wrap: anywhere; }
.cu-revision-acciones { display: flex; flex-shrink: 0; align-items: center; gap: 4px; }
.cu-revision-acciones form { margin: 0; }
.cu-revision-acciones .btn { display: inline-flex; align-items: center; gap: 6px; }

/* Botón flotante «Editar ficha»: abajo a la derecha (el «Volver arriba»
   sube para no taparlo); en celular, centrado abajo. */
.cu-indice-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 1040;
  display: inline-flex; align-items: center; gap: 8px; height: var(--btn-h-lg); padding: 0 20px;
  border: 0; border-radius: var(--radius-pill); background: var(--btn-primary-bg); color: #fff;
  font-size: var(--fs-base); font-weight: var(--fw-bold); box-shadow: var(--shadow-lg); cursor: pointer;
}
.cu-indice-fab:hover { background: var(--btn-primary-bg-hover); }
.cu-indice-fab .bi { font-size: var(--fs-lg); }
body:has(.cu-indice-fab) .pp-to-top { bottom: 88px; }
body:has(.cu-indice-fab):has(.chatbot-widget) .pp-to-top { bottom: 168px; }
body:has(.cu-indice-fab):has(.chatbot-widget) .cu-indice-fab { bottom: 104px; }

/* El índice: panel a la derecha (en celular, desde abajo). */
.cu-indice.offcanvas { --bs-offcanvas-width: 400px; }
.cu-indice .offcanvas-header { align-items: flex-start; border-bottom: 1px solid var(--card-border); }
.cu-indice .offcanvas-title { margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--text-strong); }
.cu-indice-sub { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--text-muted); }
.cu-indice-grupo + .cu-indice-grupo { margin-top: 18px; }
.cu-indice-grupo h3 { margin: 0 0 6px; font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .6px; text-transform: uppercase; color: var(--text-muted); }
.cu-indice-grupo ul { margin: 0; padding: 0; list-style: none; }
.cu-indice-item {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 6px 8px;
  border: 0; border-radius: var(--radius-md); background: transparent; text-align: left; cursor: pointer;
}
.cu-indice-item:hover { background: var(--primary-50); }
.cu-indice-nombre { flex: 1; min-width: 0; font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--text-strong); }
.cu-indice-verbo { display: inline-flex; align-items: center; gap: 2px; min-width: 86px; justify-content: flex-end; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--primary-700); }

@media (max-width: 767.98px) {
  .cu-ficha-estado { padding: 12px 14px; }
  .cu-ficha-estado-top { flex-direction: column; gap: 8px; }
  /* En celular, Editar y Retirar quedan como íconos de 40px a la derecha
     (su nombre sigue para lectores de pantalla): con texto, cada cambio
     ocupaba dos filas y el panel empujaba la ficha varias pantallas. */
  .cu-revision-lista li { gap: 8px; padding: 6px 6px 6px 8px; }
  .cu-revision-ico { display: none; }
  .cu-revision-acciones .btn { width: 40px; min-height: 40px; padding: 0; justify-content: center; font-size: 0; }
  .cu-revision-acciones .btn .bi { font-size: var(--fs-lg); }
  .cu-indice-fab { left: 50%; right: auto; bottom: 16px; transform: translateX(-50%); }
  body:has(.cu-indice-fab) .pp-to-top { bottom: 80px; }
  /* Panel inferior: el mismo offcanvas, anclado abajo. */
  .cu-indice.offcanvas.offcanvas-end {
    top: auto; left: 0; right: 0; bottom: 0; width: 100%; height: auto; max-height: 82vh;
    border-left: 0; border-top: 1px solid var(--card-border); border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    transform: translateY(100%);
  }
  .cu-indice.offcanvas.offcanvas-end.showing,
  .cu-indice.offcanvas.offcanvas-end.show:not(.hiding) { transform: none; }
  .cu-indice-verbo { min-width: 0; }
}