/* ============================================================
   DANGOFE OS · ENCABEZADO ÚNICO DE MÓDULO (prefijo mcab-) · v2 · 2026-10-16 · chat de Diseño
   v2 (Karla eligió A · Barra y pidió «cambia los emojis, que sean más acordes»): botones .mcab-btn con íconos de línea.
   Karla (foto 89.png): al abrir el Taller sale «Taller» en la barra y debajo la tarjeta «Taller de inversores»
   con un párrafo largo: «unifiquemos los nombres… que no me aparezca como varias veces… no es que lo quites,
   pero que lo mejores». Aquí el nombre del módulo sale UNA sola vez, con una línea corta y sus botones
   (en el Taller: actualizar, Cobros, Configuración del taller y «Ver cómo funciona»).
   Lo pinta modulo-cabecera.js (DangofeOS.cabecera.poner). Sin sombras; claro y Noche por [data-theme='dark'].
   Tres versiones (body.has-mcab-A|B|C):
     A · Barra    · todo en la barra de arriba: ícono, nombre, línea corta y botones
     B · Tarjeta  · la barra queda limpia; una tarjeta de cristal arriba del módulo con el nombre y los botones
     C · Banda    · una banda de lado a lado bajo la barra, con el nombre grande y los botones a la derecha
   ============================================================ */
:root { --mcab-az: 3, 38, 155; --mcab-cel: 59, 130, 246; --mcab-tinta: var(--text-primary, #0b1540); --mcab-tenue: var(--text-secondary, #4a5680); --mcab-borde: var(--glass-border, rgba(3, 38, 155, .12)); --mcab-vidrio: var(--glass-bg-strong, rgba(255, 255, 255, .72)); --mcab-vidrio2: var(--glass-bg-input, rgba(255, 255, 255, .85)); --mcab-tile: rgba(59, 130, 246, .13); --mcab-azul: #0b3dd6; }
[data-theme='dark'] { --mcab-tile: rgba(59, 130, 246, .24); --mcab-azul: #8db0ff; }

/* cuando hay cabecera puesta, el módulo no repite su encabezado */
body.has-mcab .tal-wrap.tp > header.tal-head, body.has-mcab [data-mcab-ocultar] { display: none !important; }
body.has-mcab-B .topbar__title, body.has-mcab-C .topbar__title { display: none; }

/* ---------- piezas comunes ---------- */
.mcab { display: flex; align-items: center; gap: 12px; min-width: 0; font-family: var(--font-family-ui, 'Plus Jakarta Sans', system-ui, sans-serif); color: var(--mcab-tinta); }
.mcab__tile { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--mcab-tile); color: var(--mcab-azul); }
.mcab__tile svg { width: 19px; height: 19px; }
.mcab__t { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; }
.mcab__nom { margin: 0; font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 8px; }
.mcab__linea { margin: 0; font-size: .8rem; color: var(--mcab-tenue); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcab__miga { font-size: .72rem; color: var(--mcab-tenue); opacity: .8; }
.mcab__acc { flex: none; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.mcab__acc > * { margin: 0 !important; }
/* el botón «Ver cómo funciona»: discreto, siempre en el mismo sitio (el último de la fila) */
.mcab-ayuda { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 7px 13px; border-radius: 999px; border: 1px solid rgba(var(--mcab-az), .22); background: rgba(var(--mcab-cel), .1); color: var(--mcab-azul); font: inherit; font-weight: 700; font-size: .84rem; cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.mcab-ayuda svg { width: 15px; height: 15px; flex: none; }
.mcab-ayuda:hover { background: rgba(var(--mcab-cel), .16); }
.mcab-ayuda:active { transform: scale(.98); }
.mcab-ayuda:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(var(--mcab-cel), .35); }
.mcab-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #dc2626; color: #fff; font-size: 11px; font-weight: 800; }
/* los botones de la fila (lista de acciones): píldora con ícono de línea; el primario en azul */
.mcab-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--mcab-borde); background: var(--mcab-vidrio2); color: var(--mcab-tinta); font: inherit; font-weight: 700; font-size: .84rem; line-height: 1.2; cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.mcab-btn svg { width: 16px; height: 16px; flex: none; color: var(--mcab-azul); }
.mcab-btn:hover { border-color: rgba(var(--mcab-cel), .4); }
.mcab-btn:active { transform: scale(.98); }
.mcab-btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(var(--mcab-cel), .35); }
.mcab-btn[disabled] { opacity: .45; cursor: default; }
.mcab-btn--pri { color: #fff; border-color: transparent; background: linear-gradient(135deg, #0b3dd6, #3b82f6); }
.mcab-btn--pri svg { color: #fff; }
.mcab-btn .mcab-badge { margin-left: 1px; }
/* botón redondo pequeño (actualizar) dentro de la cabecera */
.mcab-ico { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--mcab-borde); background: var(--mcab-vidrio2); color: var(--mcab-tenue); display: inline-grid; place-items: center; padding: 0; cursor: pointer; font: inherit; }
.mcab-ico svg { width: 15px; height: 15px; }
.mcab-ico:hover { color: var(--mcab-azul); }

/* ---------- A · Barra ---------- */
.mcab--A { flex: 1 1 auto; }
.mcab--A .mcab__tile { width: 36px; height: 36px; border-radius: 11px; }
.mcab--A .mcab__nom { font-size: var(--fs-xl, 1.5rem); font-weight: 700; letter-spacing: .005em; }
.has-dark-bg .mcab--A .mcab__nom, .has-dark-bg .mcab--A .mcab__linea { color: #fff; }
.has-dark-bg .mcab--A .mcab__linea { opacity: .85; }
.mcab--A .mcab__acc .tal-btn, .mcab--A .mcab__acc .btn { min-height: 36px; padding: 6px 12px; font-size: .84rem; }
.mcab--A .mcab__acc .tal-btn svg, .mcab--A .mcab__acc .btn svg { width: 16px; height: 16px; }
/* la barra necesita poder partirse en dos filas cuando no cabe */
body.has-mcab-A .topbar { flex-wrap: wrap; row-gap: 8px; }
body.has-mcab-A .topbar > .topbar__actions:first-child { flex: 1 1 520px; min-width: 0; }

/* ---------- B · Tarjeta ---------- */
.mcab--B { padding: 12px 16px; margin: 0 0 12px; border-radius: 18px; border: 1px solid var(--mcab-borde); background: var(--mcab-vidrio); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); }
[data-theme='dark'] .mcab--B { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.mcab--B .mcab__tile { width: 44px; height: 44px; border-radius: 13px; }
.mcab--B .mcab__nom { font-size: 1.2rem; }

/* ---------- C · Banda ---------- */
.mcab--C { padding: 10px 24px 14px; margin: -4px 0 12px; border-bottom: 1px solid var(--mcab-borde); background: linear-gradient(180deg, rgba(var(--mcab-cel), .06), rgba(var(--mcab-cel), 0)); }
.mcab--C .mcab__tile { width: 48px; height: 48px; border-radius: 14px; }
.mcab--C .mcab__tile svg { width: 22px; height: 22px; }
.mcab--C .mcab__nom { font-size: 1.6rem; letter-spacing: -.02em; white-space: normal; }
.mcab--C .mcab__linea { font-size: .88rem; white-space: normal; }
.mcab--C .mcab__nom::after { content: ''; display: inline-block; width: 28px; height: 3px; border-radius: 999px; background: var(--mcab-azul); margin-left: 4px; opacity: .55; }

/* ---------- iPad y teléfono ---------- */
@media (max-width: 1000px) {
  .mcab--A .mcab__linea { display: none; }
}
@media (max-width: 760px) {
  .mcab { gap: 10px; }
  .mcab__acc { width: 100%; justify-content: flex-start; }
  .mcab--A { flex-wrap: wrap; }
  .mcab--A .mcab__nom { font-size: 1.15rem; }
  /* el botón del menú (☰) se queda arriba, junto al ícono del módulo, aunque la cabecera ocupe dos filas */
  body.has-mcab-A .topbar > .topbar__actions:first-child { align-items: flex-start; }
  body.has-mcab-A .topbar > .topbar__actions:first-child > .topbar__menu-btn { margin-top: -2px; }
  .mcab--B, .mcab--C { flex-wrap: wrap; }
  .mcab--B { padding: 12px; }
  .mcab--C { padding: 8px 16px 12px; }
  .mcab--C .mcab__nom { font-size: 1.3rem; }
  .mcab__acc .tal-btn, .mcab__acc .btn, .mcab__acc .mcab-btn, .mcab-ayuda { flex: 1 1 auto; justify-content: center; }
  .mcab__acc .mcab-ico { flex: 0 0 auto; }
}

/* ---------- v3 · cabecera de SECCIÓN (lo de adentro de un módulo) · 2026-10-16 ----------
   La pinta NS.cabecera.seccionHTML(); mismo idioma que la barra: ícono de línea, nombre una vez, buscador y botones.
   Tres versiones (.mcab-sec--A|B|C):
     A · Fila      · todo en una fila: ícono + nombre, el buscador al centro y los botones a la derecha
     B · Dos filas · nombre y botones arriba; el buscador a lo ancho debajo
     C · Banda     · una banda suave con el nombre grande y su raya azul; buscador y botones debajo */
.mcab-sec { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 12px; color: var(--mcab-tinta); font-family: var(--font-family-ui, 'Plus Jakarta Sans', system-ui, sans-serif); }
.mcab-sec *, .mcab-sec *::before, .mcab-sec *::after { box-sizing: border-box; }
.mcab-sec__t { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 220px; }
.mcab-sec__ico { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--mcab-tile); color: var(--mcab-azul); }
.mcab-sec__ico svg { width: 18px; height: 18px; }
.mcab-sec__tt { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mcab-sec__nom { margin: 0; font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 8px; }
.mcab-sec__n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--mcab-vidrio2); border: 1px solid var(--mcab-borde); font-size: 11.5px; font-weight: 800; color: var(--mcab-tenue); }
.mcab-sec__linea { margin: 0; font-size: .78rem; color: var(--mcab-tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcab-sec__buscar { display: flex; align-items: center; gap: 8px; min-height: 38px; flex: 1 1 260px; max-width: 560px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--mcab-borde); background: var(--mcab-vidrio2); color: var(--mcab-tenue); min-width: 0; }
.mcab-sec__buscar svg { width: 15px; height: 15px; flex: none; }
.mcab-sec__buscar input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; outline: 0; color: var(--mcab-tinta); font: inherit; font-size: .88rem; }
.mcab-sec__buscar input::placeholder { color: var(--mcab-tenue); opacity: .8; }
.mcab-sec__buscar:focus-within { border-color: rgba(var(--mcab-cel), .55); }
.mcab-sec__acc { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; flex: 0 1 auto; }
.mcab-sec__acc > * { margin: 0 !important; }
/* B · Dos filas */
.mcab-sec--B .mcab-sec__buscar { flex: 1 1 100%; order: 3; }
/* C · Banda */
.mcab-sec--C { padding: 12px 16px; border-radius: 16px; background: linear-gradient(180deg, rgba(var(--mcab-cel), .09), rgba(var(--mcab-cel), .03)); border: 1px solid rgba(var(--mcab-cel), .14); }
.mcab-sec--C .mcab-sec__ico { width: 40px; height: 40px; border-radius: 12px; }
.mcab-sec--C .mcab-sec__nom { font-size: 1.2rem; }
.mcab-sec--C .mcab-sec__nom::after { content: ''; display: inline-block; width: 22px; height: 3px; border-radius: 999px; background: var(--mcab-azul); margin-left: 2px; opacity: .6; }
.mcab-sec--C .mcab-sec__buscar { flex: 1 1 100%; order: 3; max-width: none; background: rgba(255, 255, 255, .7); }
[data-theme='dark'] .mcab-sec--C .mcab-sec__buscar { background: rgba(255, 255, 255, .07); }
@media (max-width: 760px) {
  .mcab-sec__t { flex: 1 1 100%; }
  .mcab-sec__buscar { flex: 1 1 100%; max-width: none; order: 2; }
  .mcab-sec__acc { flex: 1 1 100%; margin-left: 0; order: 3; }
  .mcab-sec__acc { justify-content: flex-start; }
  .mcab-sec__acc .mcab-btn { flex: 1 1 auto; }
  .mcab-sec__nom, .mcab-sec__linea { white-space: normal; }
  .mcab-sec--C { padding: 12px; }
}

/* ---------- v6 (2026-10-20) · plegable, dato y alerta en la cabecera de sección (Caja del taller, Compras) ---------- */
.mcab-sec__tog { appearance: none; border: 0; background: none; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mcab-sec__tog:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(var(--mcab-cel), .35); border-radius: 12px; }
.mcab-sec__chev { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--mcab-tile); color: var(--mcab-azul); margin-left: 2px; transition: transform .3s; }
.mcab-sec__chev svg { width: 16px; height: 16px; }
.mcab-sec__tog[aria-expanded='true'] .mcab-sec__chev { transform: rotate(180deg); }
.mcab-sec__alerta { appearance: none; align-self: center; min-width: 0; min-height: 0; line-height: 1.2; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; border: 1px solid rgba(194, 117, 0, .35); background: rgba(194, 117, 0, .14); color: #9a5b00; font: inherit; font-size: 11.5px; font-weight: 800; white-space: nowrap; cursor: pointer; }
.mcab-sec__alerta svg { width: 12px; height: 12px; }
[data-theme='dark'] .mcab-sec__alerta { color: #fcd34d; }
.mcab-sec__dato { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; line-height: 1.1; white-space: nowrap; margin-left: auto; }
.mcab-sec__dato small { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mcab-tenue); }
.mcab-sec__dato b { font-size: 1.05rem; font-weight: 800; color: var(--mcab-tinta); }
.mcab-sec__dato + .mcab-sec__acc { margin-left: 0; }
.mcab-sec__dato + .mcab-sec__buscar + .mcab-sec__acc { margin-left: 0; }
@media (max-width: 760px) {
  .mcab-sec__dato { margin-left: auto; align-items: flex-end; }
  .mcab-sec__t.mcab-sec__tog { flex: 1 1 auto; }
  .mcab-sec__t.mcab-sec__tog + .mcab-sec__dato { flex: 0 0 auto; }
}