/* ============================================================
   Panel Trámites — LA CÁSCARA DEL EQUIPO (zip #5 · tanda 1, dirección B · Riel), 1-oct-2026
   Riel verde a la izquierda con marca del grupo, tarjeta del portal (cambiador solo con +1 portal),
   menú y persona abajo; lienzo claro; cabecera del contenido con el título y la búsqueda.
   En el teléfono (≤ 860 px) el riel se vuelve barra de abajo y «Más» lo abre como hoja.
   Medidas y colores literales de `design/handoff/2026-10-01_cascara_tramites_v2/Cascara B - Riel.dc.html`.
   OJO Sin modo oscuro (decidido: se resuelve en el zip #6). OJO Nada de marca aquí: logo, isotipo, nombre y
   lema salen de la configuración del grupo (window.MARCA_GRUPO); este archivo solo pone la forma.
   ============================================================ */
:root { --cs-riel: #304D45; --cs-lienzo: #F7F5EF; --cs-oro: #E2C96F; --cs-borde: #EAE5D9; --cs-gris: #8A8574; --cs-tinta: #27282A; --cs-verde: #3C7E67; }

/* ---------- ARMAZÓN ---------- */
.cs { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; background: var(--cs-lienzo); }
.cs-riel { position: sticky; top: 0; height: 100vh; align-self: start; box-sizing: border-box; background: var(--cs-riel); padding: 18px 12px 14px;
  display: flex; flex-direction: column; gap: 2px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) transparent; }
.cs-agua { position: absolute; left: -70px; bottom: 40px; width: 260px; opacity: 0.05; pointer-events: none; }
.cs-riel > * { position: relative; }
.cs-riel > .cs-agua { position: absolute; }
.cs-col { min-width: 0; }
.cs-main { min-width: 0; padding: 22px 28px 30px; }
.cs-boton { width: 44px; height: 44px; border-radius: 10px; border: 0; background: rgba(255,255,255,0.14); color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; }
.cs-boton:hover { background: rgba(255,255,255,0.22); }
.cs-top, .cs-barra { display: none; }

/* ---------- MARCA ---------- */
.cs-marca { display: flex; align-items: center; gap: 10px; padding: 0 10px 14px; }
.cs-marca__iso { width: 24px; height: 21px; object-fit: contain; flex: none; }
.cs-marca__txt { min-width: 0; }
/* El logo del grupo (logo_url) va en blanco sobre el verde. */
/* barrido 5-oct-2026: alto del logo ~9 % menor (riel y hoja «Más» 10.5 → 9.6; login 14.5 → 13.1; barra móvil 9.5 → 8.8)
   para que la palabra mida lo que en el dibujo (71 px en el riel, 97 en el login, 65 en la barra) */
.cs-marca__logo { display: block; height: 9.6px; width: auto; max-width: 150px; object-fit: contain; object-position: left center; filter: brightness(0) invert(1); }
.cs-marca__sub { margin: 3px 0 0; font-size: 10.5px; color: rgba(255,255,255,0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- TARJETA DEL PORTAL + CAMBIADOR ---------- */
.cs-portal { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18); border-radius: 10px; padding: 9px 12px; margin: 0 0 12px; color: #fff; text-align: left; font: inherit; }
button.cs-portal { cursor: pointer; }
button.cs-portal:hover, .cs-portal.abierto { background: rgba(255,255,255,0.20); border-color: rgba(255,255,255,0.30); }
button.cs-portal:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(226,201,111,0.45); }
.cs-portal > svg:first-child { color: var(--cs-oro); flex: none; }
.cs-portal__t { flex: 1; min-width: 0; }
.cs-portal__t b { display: block; font-size: 14px; font-weight: 800; color: #fff; }
.cs-portal__t span { display: block; font-size: 10.5px; color: rgba(255,255,255,0.6); }
.cs-portal__ir { color: rgba(255,255,255,0.75); flex: none; }
.cs-cambiador { position: fixed; z-index: 80; width: 262px; background: #fff; border: 1px solid #E5E1D6; border-radius: 12px;
  box-shadow: 0 18px 40px rgba(48,77,69,0.18); overflow: hidden; }
.cs-cambiador__t { margin: 0; padding: 11px 14px 8px; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--cs-gris); }
.cs-cambiador__l { display: flex; flex-direction: column; padding: 0 6px 6px; gap: 2px; }
.cs-pt { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; border: 0; background: transparent; width: 100%;
  text-align: left; font: inherit; color: var(--cs-tinta); cursor: pointer; text-decoration: none; min-height: 44px; box-sizing: border-box; }
.cs-pt:hover { background: #F4F1EA; }
.cs-pt > svg:first-child { color: #55605B; flex: none; }
.cs-pt__t { flex: 1; min-width: 0; }
.cs-pt__t b { display: block; font-size: 13px; font-weight: 700; }
.cs-pt__t span { display: block; font-size: 11px; color: var(--cs-gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-pt.on { background: #EDF3F0; cursor: default; }
.cs-pt.on > svg { color: var(--cs-verde); }
.cs-pt.on b { color: var(--cs-riel); }

/* ---------- MENÚ ---------- */
.cs-grupo { margin: 14px 12px 4px; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: rgba(255,255,255,0.5); }
.cs-nav { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 9px 12px; border-radius: 10px; border: 0;
  background: transparent; color: rgba(255,255,255,0.88); font: inherit; font-size: 14px; font-weight: 500; text-align: left; cursor: pointer; }
.cs-nav > svg { color: rgba(255,255,255,0.75); flex: none; }
.cs-nav.sub { padding: 7px 12px; font-size: 13.5px; color: rgba(255,255,255,0.82); }
.cs-nav.sub > svg { color: rgba(255,255,255,0.6); }
.cs-nav:hover { background: rgba(255,255,255,0.07); }
.cs-nav:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(226,201,111,0.45); }
.cs-nav.on { background: rgba(255,255,255,0.14); color: #fff; font-weight: 700; }
.cs-nav.on > svg { color: #fff; }
.cs-nav__n { margin-left: auto; background: var(--cs-oro); color: var(--cs-riel); font-size: 9.5px; font-weight: 800; min-width: 16px; height: 16px;
  border-radius: 999px; display: grid; place-items: center; padding: 0 5px; box-sizing: border-box; }
.cs-nav__n.rojo { background: #E3B4AC; color: #8E3A31; }
/* 23-sep-2026 (GO del dueño): el punto que avisa que falta pegar un radicado LATE. Sigue latiendo en la cáscara
   (el dibujo lo pinta quieto); con `prefers-reduced-motion` deja de latir pero NO desaparece. */
.cs-punto { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--cs-oro); flex: none; animation: csPulso 1.7s ease-out infinite; }
.cs-nav__n + .cs-punto { margin-left: 6px; }
@keyframes csPulso { 0% { box-shadow: 0 0 0 0 rgba(226,201,111,.55); } 70% { box-shadow: 0 0 0 7px rgba(226,201,111,0); } 100% { box-shadow: 0 0 0 0 rgba(226,201,111,0); } }

/* ---------- PERSONA ---------- */
.cs-riel > .cs-persona-caja { position: sticky; bottom: -14px; z-index: 1; background: var(--cs-riel); margin: 0 -12px -14px; padding: 0 12px 14px; }
.cs-persona { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid rgba(255,255,255,0.12); margin-top: 8px; }
.cs-espacio { flex: 1; min-height: 8px; }
.cs-av { width: 32px; height: 32px; border-radius: 10px; background: rgba(255,255,255,0.16); display: grid; place-items: center; font-size: 12px;
  font-weight: 700; color: #fff; flex: none; }
.cs-persona__t { flex: 1; min-width: 0; }
.cs-persona__t b { display: block; font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-persona__t span { display: block; font-size: 10.5px; color: rgba(255,255,255,0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-ajustes { border: 0; background: transparent; color: rgba(255,255,255,0.6); width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; cursor: pointer; flex: none; }
.cs-ajustes:hover, .cs-ajustes[aria-expanded="true"] { background: rgba(255,255,255,0.12); color: #fff; }
.cs-salir { display: flex; align-items: center; gap: 8px; margin: 4px 12px 0; padding: 9px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08); color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; min-height: 40px; }
.cs-salir:hover { background: rgba(255,255,255,0.16); }

/* ---------- CABECERA DEL CONTENIDO ---------- */
.cs-cab { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.cs-cab__t { flex: 1; min-width: 0; }
.cs-cab__t h1 { margin: 0; font-family: var(--font-display); font-size: 26px; font-weight: 800; color: var(--cs-riel); letter-spacing: -0.01em; }
.cs-cab__t p { margin: 3px 0 0; font-size: 13px; color: var(--cs-gris); max-width: 720px; text-wrap: pretty; }
/* zip #5 · tanda 5a: 08 · 11 · 18 (#t08 del dibujo) — subtítulo con su dato en verde y las pestañas a la derecha */
.cs-cab--pant { align-items: center; margin-bottom: 16px; }
.cs-cab--pant .cs-cab__t p { margin-top: 2px; }
.cs-cab--pant .cs-cab__t p b, .cs-cab--pant .cs-cab__t p button { color: var(--cs-riel); font-weight: 700; }
.cs-cab--pant .cs-cab__t p button { border: 0; background: none; padding: 0; font: inherit; cursor: pointer; }
.cs-cab--pant .cs-cab__t p button:hover { text-decoration: underline; }
.cs-cab--pant .cs-seg { flex: none; display: inline-flex; gap: 4px; padding: 4px; background: #fff; border: 1px solid var(--cs-borde); border-radius: 10px; }
.cs-cab--pant .cs-seg button { flex: none; border: 0; background: transparent; border-radius: 7px; padding: 7px 13px; font: inherit;
  font-size: 12.5px; font-weight: 600; color: #55605B; cursor: pointer; white-space: nowrap; min-height: 0; }
.cs-cab--pant .cs-seg button.on { background: var(--cs-riel); color: #fff; font-weight: 700; }
.bk-disparador { flex: 0 1 360px; width: 360px; height: 40px; box-sizing: border-box; display: flex; align-items: center; gap: 9px; padding: 0 12px;
  border-radius: 10px; border: 1px solid var(--cs-borde); background: #fff; color: var(--cs-gris); font: inherit; font-size: 13px; cursor: pointer; min-width: 0; }
.bk-disparador:hover { border-color: #DDD9CC; color: #55605B; }
.bk-disparador:focus-visible { outline: none; box-shadow: var(--ring, 0 0 0 3px rgba(60,126,103,0.25)); }
.bk-disparador span { flex: 1; min-width: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-disparador kbd { flex: none; font: 600 10.5px var(--font-mono, ui-monospace, monospace); color: var(--cs-gris); border: 1px solid #DDD9CC; border-radius: 5px; padding: 1px 6px; background: transparent; }
.cs-franja { margin-bottom: 14px; }

/* ---------- LOGIN (B1) ---------- */
.cs-login { min-height: 100vh; box-sizing: border-box; background: #EFEBE0; display: flex; align-items: center; justify-content: center; padding: 32px 16px; }
.cs-login__c { width: 100%; max-width: 440px; min-height: 640px; box-sizing: border-box; background: #F6F2E9; border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.08); padding: 28px 30px 22px; display: flex; flex-direction: column; gap: 16px; }
.cs-login__marca { background: var(--cs-riel); border-radius: 16px; padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 8px; position: relative; overflow: hidden; }
.cs-login__agua { position: absolute; right: -40px; bottom: -40px; width: 200px; opacity: 0.07; pointer-events: none; }
.cs-login__fila { display: flex; align-items: center; gap: 10px; position: relative; }
.cs-login__iso { width: 30px; height: 26px; object-fit: contain; }
.cs-login__logo { height: 13.1px; width: auto; max-width: 200px; object-fit: contain; filter: brightness(0) invert(1); }
.cs-login__sub { margin: 0; font-size: 12.5px; color: rgba(255,255,255,0.75); position: relative; }
.cs-login__lema { margin: 4px 0 0; font-size: 13px; font-style: italic; font-weight: 700; color: var(--cs-oro); position: relative; }
.cs-login h1 { margin: 0; font-family: var(--font-display); font-size: 19px; font-weight: 800; color: var(--cs-riel); }
.cs-login__intro { margin: 2px 0 0; font-size: 13px; font-weight: 300; color: #55605B; }
.cs-campo { display: flex; flex-direction: column; gap: 6px; }
.cs-campo > span { font-size: 12px; font-weight: 600; color: #55605B; }
.cs-campo__c { height: 44px; box-sizing: border-box; background: #fff; border: 1px solid #DDD9CC; border-radius: 10px; padding: 0 6px 0 14px; display: flex; align-items: center; gap: 6px; }
.cs-campo__c:focus-within { border-color: var(--cs-verde); box-shadow: 0 0 0 3px rgba(60,126,103,0.18); }
.cs-campo__c input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; font-size: 14px; color: var(--cs-tinta); height: 100%; }
.cs-ojo { border: 0; background: transparent; color: var(--cs-gris); width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; cursor: pointer; flex: none; }
.cs-ojo:hover { color: #55605B; }
.cs-entrar { height: 46px; border: 0; border-radius: 10px; background: var(--cs-verde); color: #fff; font: inherit; font-size: 15px; font-weight: 700;
  display: grid; place-items: center; cursor: pointer; }
.cs-entrar:hover:not(:disabled) { background: #336D59; }
.cs-entrar:disabled { opacity: 0.45; cursor: not-allowed; }
.cs-login__err { margin: -4px 0 0; font-size: 13px; color: #8E3A31; text-align: center; }
.cs-olvido { margin: 0; text-align: center; }
.cs-olvido a { font-size: 12.5px; color: var(--cs-verde); font-weight: 600; text-decoration: none; }
.cs-login__pie { display: flex; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 11.5px; color: var(--cs-gris);
  border-top: 1px solid #E5E1D6; padding-top: 12px; }
.cs-login__pie a, .cs-login__pie button { color: inherit; text-decoration: none; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.cs-login__pie a:hover, .cs-login__pie button:hover { text-decoration: underline; text-underline-offset: 3px; }
/* En el login el pie legal ya va dentro de la tarjeta (B1): el de la página se esconde para no repetirlo. */
body.cs-en-login > footer { display: none; }

/* ---------- TELÉFONO (B5, B6) ---------- */
@media (max-width: 860px) {
  .cs { display: block; }
  .cs-riel { display: none; }
  .cs-top { display: flex; position: sticky; top: 0; z-index: 30; background: var(--cs-riel); padding: 14px 16px 12px; align-items: center; gap: 10px; }
  .cs-top .cs-marca__iso { width: 22px; height: 19px; }
  .cs-top__t { flex: 1; min-width: 0; }
  .cs-top__t .cs-marca__logo { height: 8.8px; }
  .cs-top__t span { display: block; margin-top: 3px; font-size: 11px; color: rgba(255,255,255,0.65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cs-main { padding: 16px 16px calc(96px + env(safe-area-inset-bottom)); }
  .cs-cab .bk-disparador { display: none; }
  .cs-cab.sin-titulo { display: none; }
  .cs-cab__t h1 { font-size: 22px; }
  .cs-barra { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: #fff;
    border-top: 1px solid var(--cs-borde); padding: 8px 6px calc(10px + env(safe-area-inset-bottom)); }
  .cs-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 0; min-height: 48px; position: relative;
    border: 0; background: transparent; font: inherit; color: var(--cs-gris); cursor: pointer; }
  .cs-tab b { font-size: 10.5px; font-weight: 600; }
  .cs-tab.on { color: var(--cs-verde); }
  .cs-tab.on b { font-weight: 700; }
  .cs-tab__n { position: absolute; top: 2px; left: calc(50% + 4px); background: #B8860B; color: #fff; font-size: 9px; font-weight: 700; min-width: 15px; height: 15px;
    border-radius: 999px; display: grid; place-items: center; padding: 0 4px; box-sizing: border-box; }
  .cs-tab__p { position: absolute; top: 4px; left: calc(50% + 6px); width: 8px; height: 8px; border-radius: 50%; background: #B8860B; animation: csPulso 1.7s ease-out infinite; }
  body.cs-con-barra > footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important; }
  /* Las tarjetas de las pantallas en el teléfono: la cabecera baja sus botones a otra línea y una tabla ancha se desliza
     DENTRO de su tarjeta, nunca la página entera (criterio de la tanda 1: a 375 px nada se desborda; medido el 1-oct en
     Detenidos, Últimos pagos y Flota y Capacidad). Con `.cs-main` delante para ganarle a los estilos de index.html. */
  .cs-main .a-card__head { flex-wrap: wrap; gap: 10px; }
  .cs-main .a-card__head h2 { white-space: normal; }
  .cs-main .a-card:has(> table.a-table) { overflow-x: auto; }
  .cs-login { padding: 0; align-items: stretch; }
  .cs-login__c { max-width: none; min-height: 100vh; border-radius: 0; box-shadow: none; padding: 24px 16px 18px; }
}

/* ---------- HOJA «MÁS» (B6) ---------- */
.cs-hoja { position: fixed; inset: 0; z-index: 70; background: var(--cs-riel); display: flex; flex-direction: column; overflow: hidden; }
.cs-hoja__agua { position: absolute; right: -90px; top: 120px; width: 300px; opacity: 0.05; pointer-events: none; }
.cs-hoja__cab { padding: 18px 16px 10px; display: flex; align-items: center; gap: 10px; position: relative; }
.cs-hoja__cab .cs-marca { flex: 1; min-width: 0; padding: 0; }
.cs-hoja .cs-portal { margin: 0 16px 10px; width: auto; border-radius: 12px; padding: 12px 14px; }
.cs-hoja .cs-portal__t b { font-size: 15px; }
.cs-hoja .cs-portal__t span { font-size: 11px; }
.cs-hoja__portales { margin: -4px 16px 10px; background: #fff; border-radius: 12px; padding: 6px; position: relative; }
.cs-hoja__l { flex: 1; min-height: 0; padding: 0 10px; display: flex; flex-direction: column; gap: 1px; position: relative; overflow-y: auto; }
.cs-hoja__l .cs-grupo { margin: 10px 12px 4px; }
.cs-hoja__l .cs-nav { gap: 12px; padding: 11px 12px; color: #fff; font-size: 15px; min-height: 44px; }
.cs-hoja__l .cs-nav > svg { color: rgba(255,255,255,0.7); }
.cs-hoja__l .cs-nav.on { background: rgba(255,255,255,0.14); }
.cs-hoja .cs-persona { margin: 0; padding: 14px 16px calc(18px + env(safe-area-inset-bottom)); gap: 12px; }
.cs-hoja .cs-av { width: 40px; height: 40px; border-radius: 12px; font-size: 13px; }
.cs-hoja .cs-persona__t b { font-size: 14px; }
.cs-hoja .cs-persona__t span { font-size: 11.5px; }
.cs-hoja .cs-salir { margin: 0 16px 14px; justify-content: center; min-height: 44px; }
@media (prefers-reduced-motion: reduce) { .cs-punto, .cs-tab__p { animation: none; } }

/* ---------- BARRA VERDE PROPIA (teléfono · zip #5 · tanda 2) · CsBarraPropia ----------
   La ficha del carro, el detalle de «Cerrar el alta» y «Agendar la capacitación» (04, 06 y 07 del dibujo) ponen la
   suya: volver · qué es · su acción. En la web no existe: allí manda la cabecera de la pantalla. */
.cs-propia { display: none; }
@media (max-width: 860px) {
  body.cs-top-propia .cs-top { display: none; }
  .cs-propia { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 30; background: var(--cs-riel); color: #fff;
    margin: -16px -16px 14px; padding: 12px 14px 12px 8px; }
  .cs-propia__volver { width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; }
  .cs-propia__volver:hover { background: rgba(255,255,255,0.12); }
  .cs-propia__t { flex: 1; min-width: 0; }
  .cs-propia__t b { display: block; font-family: var(--font-display); font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cs-propia__t span { display: block; font-size: 11.5px; color: rgba(255,255,255,0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cs-propia__pill { flex: none; background: var(--cs-oro); color: var(--cs-riel); font-size: 11.5px; font-weight: 800; border-radius: 999px; padding: 4px 10px; }
  .cs-propia__acc { flex: none; border: 0; background: transparent; color: var(--cs-oro); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; min-height: 44px; padding: 0 6px; }
}

/* ---------- BLOQUES COMUNES (B4) · admin-bloques.jsx ---------- */
.bq-ficha { display: flex; align-items: center; gap: 14px; background: var(--cs-lienzo); border: 1px solid var(--cs-borde); border-radius: 12px; padding: 12px 16px; }
.bq-ficha__placa { font: 700 15px var(--font-mono, ui-monospace, monospace); background: var(--cs-riel); color: #fff; border-radius: 8px; padding: 6px 12px; flex: none; }
.bq-ficha__t { flex: 1; min-width: 0; }
.bq-ficha__t > b { display: block; font-size: 14.5px; font-weight: 800; color: var(--cs-riel); }
.bq-ficha__t > span { display: block; font-size: 12.5px; color: #6B6455; }
.bq-ficha__av { width: 34px; height: 34px; border-radius: 50%; background: #E7EEEB; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--cs-riel); flex: none; }
.bq-candado { background: #FBEEEC; border: 1px solid #E3B4AC; border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.bq-candado__t { display: flex; gap: 8px; align-items: flex-start; color: #8E3A31; }
.bq-candado__t svg { flex: none; margin-top: 1px; }
.bq-candado__t p { margin: 0; font-size: 13px; text-wrap: pretty; color: inherit; }   /* el rojo del candado (barrido 5-oct): `p` de colors_and_type.css lo pisaba */
.bq-rad { font: 700 12px var(--font-mono, ui-monospace, monospace); background: #EFEBE0; border-radius: 6px; padding: 4px 9px; color: #55605B; white-space: nowrap; }
.bq-runt { display: inline-flex; align-items: center; gap: 5px; background: #fff; border: 1px solid #DDD9CC; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; font-weight: 700; color: var(--cs-riel); white-space: nowrap; }
.bq-runt__p { width: 7px; height: 7px; border-radius: 50%; background: var(--cs-verde); }
.bq-runt.ambar .bq-runt__p { background: #B8860B; }
.bq-runt.rojo .bq-runt__p { background: #B4322A; }
.bq-bita { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 10px 14px; background: var(--cs-lienzo); border-radius: 10px; }
.bq-bita__c, .bq-bita__q { font-size: 12px; color: var(--cs-gris); }
.bq-bita p { margin: 0; font-size: 13px; color: var(--cs-tinta); }
.bq-bita p b { color: var(--cs-riel); }
@media (max-width: 860px) {
  .bq-ficha { flex-wrap: wrap; }
  .bq-bita { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}