/* ==========================================================================
   EIREN - Capa responsive para móvil (iPhone, <=480px)
   El shell global y las pestañas (Censo, Espera, Histórico, Usuarios, Parte
   Quirúrgico y Cuadrante Personal, con el acordeón de sidebar y el tap-drag),
   los modales a pantalla completa y la cabecera compacta, los menús en
   abanico y la tarjeta de paciente del Censo.
   Todo el contenido de este archivo es aditivo y va detrás de styles.css:
   nunca debe alterar el layout por encima de 480px (tablet/escritorio).
   ========================================================================== */

/* Fuera del breakpoint: el botón/icono del acordeón del sidebar permanece oculto
   en escritorio/iPad, donde el sidebar de 295px siempre está visible. La <h3>
   de Cuadrante ya era visible antes de este cambio (estilo inline) y sigue
   siéndolo — solo se oculta el nuevo icono de flecha que no existía antes. */
.mobile-sidebar-toggle {
  display: none;
}

.mobile-sidebar-toggle-icon {
  display: none;
}

/* Cabecera compacta + menús en abanico de Censo (móvil). Fuera del
   breakpoint, todo esto permanece invisible/inerte — escritorio e iPad ven
   exactamente el mismo Censo de siempre. */
.censo-mobile-bar {
  display: none;
}

.mobile-fan-scrim {
  display: none;
}

/* Defensa en profundidad: si renderPatientCardMobile llegara a pintarse
   fuera de móvil (p.ej. por una condición de carrera en la detección de
   ancho de viewport en la primera carga), que el botón "..." y su overlay
   de acciones queden inertes en vez de aparecer como una fila de botones
   sueltos sin estilo delante del resto de la tarjeta. */
.pcm-more-btn,
.pcm-overlay {
  display: none;
}

/* Botón EIREN + su menú: solo existen en móvil, sustituyendo a la cabecera
   superior (oculta en el mismo breakpoint, ver más abajo). En escritorio/
   iPad quedan completamente inertes. */
.eiren-mobile-btn,
.eiren-mobile-menu {
  display: none;
}

@media (max-width: 480px) {

  /* Variables en body (no en #app) para que también las vea el
     body::after del aviso de tap-to-place, fuera del árbol de #app. */
  body {
    /* Sin cabecera superior en móvil (ver más abajo) -- todo su contenido
       (logo, nombre/rol, tema, cerrar sesión) se traslada al botón EIREN
       fijo en la barra inferior. */
    --mobile-header-h: 0px;
    --mobile-nav-h: calc(56px + env(safe-area-inset-bottom));
  }

  #app {
    height: 100dvh;
  }

  /* ---- Cabecera superior: oculta por completo en móvil ----
     No se puede poner display:none en <header> sin más: .nav-tabs vive
     dentro de <header> en el HTML y se reposiciona a la barra inferior vía
     position:fixed, pero un ancestro con display:none oculta también a sus
     descendientes fixed (a diferencia de otras restricciones de layout,
     que sí "escapan" con position:fixed). Se ocultan solo el logo y el
     perfil de usuario, y se colapsa el propio <header> a 0 (padding y
     borde incluidos, si no quedaría una tira visible aunque su altura de
     contenido sea 0). */
  header {
    height: var(--mobile-header-h);
    padding: 0;
    border: none;
  }

  .glass-header {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: none;
  }

  .logo-container,
  .user-profile {
    display: none;
  }

  /* ---- Navegación inferior fija (bottom tab bar) ---- */
  .nav-tabs {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    gap: 0;
    background: var(--bg-glass);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: none;
    border-top: 1px solid var(--border-color);
    border-radius: 0;
    padding: 0.25rem 0.2rem calc(0.25rem + env(safe-area-inset-bottom));
    height: var(--mobile-nav-h);
  }

  .nav-tab {
    flex: 1;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0;
    padding: 0.3rem 0.1rem;
    /* Colapsa a cero el texto de la etiqueta (nodo de texto suelto tras el
       <span> del icono); solo el icono recupera tamaño abajo. Las etiquetas
       reales son demasiado largas para 1/6 de 375px — icono-solo es el
       patrón estándar de bottom nav en móvil. El texto sigue en el DOM
       para lectores de pantalla. */
    font-size: 0;
    border-radius: var(--radius-sm);
    min-height: 44px;
    overflow: hidden;
  }

  .nav-tab-icon svg {
    width: 22px;
    height: 22px;
  }

  /* ---- Botón EIREN fijo en la barra inferior ----
     flex:0 0 auto (no flex:1 como .nav-tab): no participa en el reparto de
     espacio entre las pestañas filtradas por rol, siempre el mismo tamaño
     y siempre el último elemento a la derecha de la barra, visible pase lo
     que pase con los permisos del usuario. */
  .eiren-mobile-btn {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0 0.2rem;
    padding: 0;
    border: 1.5px solid var(--accent-cyan);
    border-radius: 50%;
    background: var(--bg-input);
    overflow: hidden;
  }

  .eiren-mobile-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Menú del botón EIREN: nombre/rol arriba, tema y cerrar sesión debajo --
     se abre hacia arriba desde la barra inferior, igual que en el
     prototipo validado con el usuario. */
  .eiren-mobile-menu {
    display: none;
    position: fixed;
    right: 0.6rem;
    bottom: calc(var(--mobile-nav-h) + 0.5rem);
    z-index: 250;
    width: 210px;
    background: var(--bg-card-solid, var(--bg-input));
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    overflow: hidden;
  }

  .eiren-mobile-menu.show {
    display: block;
  }

  .eiren-mobile-menu-user {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--border-color);
  }

  .eiren-mobile-menu-user span:first-child {
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--text-primary);
  }

  .eiren-mobile-menu-user span:last-child {
    font-size: 0.72rem;
    color: var(--text-secondary);
  }

  .eiren-mobile-menu-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 600;
    text-align: left;
  }

  .eiren-mobile-menu-item + .eiren-mobile-menu-item {
    border-top: 1px solid var(--border-color);
  }

  .eiren-mobile-menu-danger {
    color: #ef4444;
  }

  /* ---- Contenedor principal: deja hueco para header y bottom bar ---- */
  main {
    /* flex:none imprescindible: #app es un flex-column y styles.css le da a
       main flex:1, así que crecía hasta el 100dvh completo ignorando este
       height y el último tramo de cada pestaña quedaba debajo de la barra
       inferior (fixed, fuera del flujo). */
    flex: none;
    height: calc(100dvh - var(--mobile-header-h) - var(--mobile-nav-h));
    padding: 0.65rem 0.75rem;
  }

  /* ---- Objetivos táctiles: mínimo 44px recomendado ---- */
  .btn-icon {
    width: 44px;
    height: 44px;
  }

  /* ---- Tablas de datos: scroll horizontal limpio + primera columna fija ---- */
  .data-table {
    min-width: 640px;
  }

  .data-table th:first-child,
  .data-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--bg-card);
  }

  .data-table th:first-child {
    background: var(--bg-input);
  }

  /* ---- Censo: una sola columna cómoda de tarjetas por unidad ---- */
  /* En escritorio esto es un árbol de 3 niveles en cascada de flex/grid
     (.units-grid en CSS Grid, .unit-column flex-column con height:100% +
     max-height:calc(100vh-210px), .unit-patients-list flex:1 +
     overflow-y:auto) pensado para que 3 columnas queden todas a la misma
     altura y cada una scrollee por dentro. En móvil solo hay 1 columna y
     nada necesita scrollear por separado (ya scrollea la página), pero
     intentar heredar ese árbol tocando solo "auto"/"none" puntuales resultó
     frágil de verdad: entre el stretch por defecto de un grid (auto es
     justo la condición que lo activa), que flex-basis:0%+overflow!=visible
     anula el suelo mínimo automático de un flex item, y que un elemento
     dentro de un flex-column PADRE sigue arrastrando resolución de tamaño
     de flex-item aunque su propio overflow sea visible -- el resultado
     dependía de detalles finos del motor de layout (funcionaba en Chrome,
     no en Safari/iOS real, con contenido cortado o cajas que se pisaban).
     La única forma de eliminar esa ambigüedad del todo es no dejar flex ni
     grid en NINGUNO de los 3 niveles: bloque normal de arriba abajo, con
     el espaciado que daban gap/flex sustituido por márgenes (ver abajo). */
  .units-grid {
    display: block !important;
    /* Hueco final para que la última tarjeta pueda subir por encima del FAB
       flotante del busca (a la derecha, 48px a 84px del borde, es decir,
       ~76px por encima de la barra inferior). El de marcapasos ya no existe:
       es la cuarta vista del selector. */
    padding-bottom: 5rem;
  }

  .units-grid > * + * {
    margin-top: 1rem;
  }

  .unit-column {
    /* En escritorio/tablet el relleno se redujo para ganar ancho; en móvil
       se mantiene el original. */
    padding: 0.85rem;
    display: block !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .unit-patients-list {
    display: block !important;
    flex: none !important;
    overflow: visible !important;
    min-height: 0 !important;
  }

  .unit-patients-list > * + * {
    margin-top: 0.6rem;
  }

  /* Los estilos de tap-to-select / tap-to-place se movieron a styles.css
     (sin @media) para que también funcionen en tablet/portátil táctil, no
     solo a <=480px -- el modo lo activa JS solo con pointerType 'touch',
     así que en ratón no tienen efecto. */

  /* ---- Parte Quirúrgico + Cuadrante Personal ---- */

  /* La columna fija de 295px del sidebar pasa a apilarse: sidebar (acordeón
     colapsable) arriba, matriz semanal abajo a ancho completo. */
  .or-planner-layout {
    display: block;
  }

  .or-sidebar {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100%;
    max-height: 3.6rem;
    overflow: hidden;
    margin-bottom: 0.65rem;
    transition: max-height 0.25s ease;
  }

  .or-sidebar.mobile-open {
    max-height: 60vh;
    overflow-y: auto;
  }

  .mobile-sidebar-toggle {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-family: var(--font-sans);
    cursor: pointer;
    min-height: 44px;
    padding: 0.3rem 0.1rem;
  }

  .mobile-sidebar-toggle-icon {
    display: inline-block;
    transition: transform 0.2s ease;
  }

  .or-sidebar.mobile-open .mobile-sidebar-toggle-icon {
    transform: rotate(180deg);
  }

  /* Matrices semanales (Parte y Cuadrante): mantienen su min-width y activan
     scroll horizontal (ya lo hacían), con la primera columna fija para no
     perder de vista el quirófano/localización mientras se desplaza. */
  .weekly-table th.or-header-col,
  .weekly-table td.or-row-label {
    position: sticky;
    left: 0;
    z-index: 2;
  }

  /* ---- Modales a pantalla completa ---- */
  .modal-overlay {
    padding: 0;
    align-items: stretch;
  }

  .modal-overlay .modal-content {
    max-width: 100%;
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }

  .modal-overlay .modal-content {
    padding: 1.1rem;
  }

  /* ---- Censo — cabecera compacta + acciones consolidadas ----
     En escritorio el Censo lleva la barra única de cuatro huecos (buscador,
     selector de vista, herramientas y acciones) y su tira de resumen; en
     móvil no cabe ninguna de las dos, y las sustituye .censo-mobile-bar: un
     icono de vista + título corto + un FAB de ingreso, cada uno con su menú
     en abanico. */
  #tab-censo > .cen-bar-wrap,
  #tab-censo > .cen-summary {
    display: none;
  }

  .censo-mobile-bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.15rem 0.05rem 0.75rem;
  }

  .censo-mobile-icon-btn {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Volver: una flecha, no una acción -- más estrecha y sin marco, igual que
     la de las barras de EirenMobile. */
  .censo-mobile-back {
    width: 34px;
    border-color: transparent;
    background: transparent;
    color: var(--text-secondary);
    margin-left: -4px;
  }

  .censo-mobile-back.is-off {
    opacity: 0.3;
  }

  .censo-mobile-fab {
    background: var(--accent-gradient);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--shadow-glow);
  }

  .censo-mobile-title {
    flex: 1;
    min-width: 0;
    font-weight: 800;
    font-size: 0.98rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ---- Menú en abanico (radial), overlay de viewport completo ---- */
  .mobile-fan-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 500;
    opacity: 0;
    pointer-events: none;
    background: rgba(2, 6, 15, 0);
    transition: opacity 0.18s ease;
  }

  .mobile-fan-scrim.show {
    opacity: 1;
    pointer-events: auto;
    background: rgba(2, 6, 15, 0.55);
  }

  .mobile-fan-opt {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.28rem;
    opacity: 0;
    transform: translate(0, 0) scale(0.3);
    transition: opacity 0.22s cubic-bezier(.2,.8,.3,1.2), transform 0.26s cubic-bezier(.2,.8,.3,1.2);
  }

  .mobile-fan-scrim.show .mobile-fan-opt {
    opacity: 1;
  }

  .mobile-fan-sphere {
    border-radius: 50%;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    color: var(--accent-cyan);
  }

  .mobile-fan-sphere svg {
    width: 60%;
    height: 60%;
  }

  .mobile-fan-label {
    font-size: 0.66rem;
    font-weight: 700;
    color: #f8fafc;
    text-align: center;
    line-height: 1.15;
    max-width: 74px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  }

  /* ---- Tarjeta de paciente independiente (Censo, móvil) ----
     .patient-card-mobile se combina con .patient-card (coloreado real por
     estado clínico ya definido en styles.css: .preop-card/.scheduled-card/
     .uci-card/.urp-card) pero sustituye por completo su contenido y su
     interacción: sin badge de estado, sin botones siempre visibles. */
  .patient-card-mobile {
    position: relative;
    padding: 0.7rem 0.75rem;
    overflow: hidden;
  }

  /* pan-y: un toque normal puede seguir haciendo scroll vertical de la
     lista. Solo cuando se confirma la pulsación larga (ver
     beginMobileCardDrag en app.js) se cambia a "none" para ESE gesto en
     curso, justo antes de que haya habido ningún movimiento -- momento en
     el que iOS todavía no ha decidido que el toque es un scroll. */
  .patient-card-mobile[data-draggable="1"] {
    touch-action: pan-y;
  }

  /* Fila 1: nombre a la izquierda, edad/sexo + "..." a la derecha. */
  .pcm-row1 {
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }

  .pcm-name {
    font-weight: 800;
    font-size: 0.92rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    min-width: 0;
  }

  .patient-card-mobile.preop-card .pcm-name,
  .patient-card-mobile.preop-card .pcm-agesex,
  .patient-card-mobile.preop-card .pcm-loc {
    color: #0f172a;
  }

  .pcm-agesex {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--text-secondary);
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .pcm-more-btn {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin: -0.2rem -0.3rem 0 0;
  }

  .patient-card-mobile.preop-card .pcm-more-btn {
    color: #475569;
  }

  /* Fila 2: diagnóstico a la izquierda (cyan, como en escritorio) + cama/
     habitación a la derecha -- solo el texto, sin icono, para que quepan
     las dos cosas en una sola línea compacta (antes la ubicación tenía su
     propia fila con icono, una línea más de las que hacen falta). */
  .pcm-row2 {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.4rem;
    margin-top: 0.25rem;
  }

  .pcm-diag {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent-cyan);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1 1 auto;
  }

  .patient-card-mobile.preop-card .pcm-diag {
    color: #0284c7;
  }

  /* Fila 3: intervención a la izquierda (morado, como en escritorio),
     etiqueta de tipo (#VALVULAR/#CORONARIO/...) a la derecha. */
  .pcm-row3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.2rem;
  }

  .pcm-proc {
    font-size: 0.72rem;
    font-weight: 700;
    color: #d946ef;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }

  .patient-card-mobile.preop-card .pcm-proc {
    color: #c026d3;
  }

  .pcm-tags {
    display: flex;
    gap: 0.2rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    flex: 0 0 auto;
  }

  .pcm-loc {
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60%;
    flex: 0 0 auto;
  }

  /* Tarjeta atenuada mientras el overlay de acciones está abierto. */
  .patient-card-mobile.pcm-dimmed > .pcm-row1,
  .patient-card-mobile.pcm-dimmed > .pcm-row2,
  .patient-card-mobile.pcm-dimmed > .pcm-row3 {
    opacity: 0.15;
  }

  .pcm-overlay {
    position: absolute;
    inset: 0;
    display: none;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    justify-items: center;
    gap: 0.2rem;
    padding: 0 0.3rem;
    background: rgba(2, 6, 15, 0.55);
    border-radius: inherit;
  }

  .pcm-overlay.show {
    display: grid;
  }

  .pcm-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    border: none;
    background: transparent;
    color: #f8fafc;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 0.2rem;
  }

  .pcm-action-ic {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--accent-cyan);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .pcm-action-danger .pcm-action-ic {
    color: #ef4444;
  }

  /* ---- Arrastre real con pulsación larga ----
     La propia tarjeta se levanta (no un resumen aparte): pasa a
     position:fixed sobre todo lo demás con sombra y una ligera rotación,
     mientras un hueco del mismo alto ocupa su sitio en la lista para que
     el resto no dé un salto. */
  .patient-card-mobile.pcm-dragging {
    z-index: 600;
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.45);
    /* El escalado/rotación "levantada" se aplica desde JS (updateCardTransform
       en app.js), combinado en el mismo transform que el translate3d del
       movimiento -- un transform puesto aquí por CSS quedaría machacado por
       el primer style.transform que escribe JS, perdiendo el efecto. */
    pointer-events: none;
    /* will-change avisa al navegador de antemano para que promocione la
       tarjeta a su propia capa de composición antes de que empiece a
       moverse: sin esto, el primer par de frames de transform pueden
       forzar un repintado en vez de solo recomponer capas ya rasterizadas,
       justo el tipo de coste que hacía notar el arrastre poco fluido. */
    will-change: transform;
    /* CRÍTICO, encontrado tras varias rondas fallidas de optimizar el JS:
       .patient-card (que esta tarjeta también lleva como clase, para
       heredar el color por estado) define transition: var(--transition-fast)
       = "all 0.18s..." -- "all" incluye transform. Sin este !important,
       CADA escritura de style.transform en JS no se aplicaba al instante:
       el navegador la animaba durante 180ms desde el valor anterior, así
       que la tarjeta iba "persiguiendo" al dedo con retraso constante en
       vez de seguirlo -- eso es lo que se percibía como tirones/saltos, no
       un problema de rendimiento del bucle de arrastre en sí. */
    transition: none !important;
    /* Refuerzan que el navegador trate esto como una capa de composición
       aislada e independiente durante el arrastre. */
    contain: layout paint;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  .pcm-drag-placeholder {
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.03);
  }

  body.pcm-drag-active {
    -webkit-user-select: none;
    user-select: none;
  }

  /* .unit-column es .glass-panel (backdrop-filter: blur(12px) en
     styles.css), y la barra inferior también lleva blur(16px) -- con la
     tarjeta arrastrada (position:fixed) pasando por delante de varias de
     estas zonas borrosas superpuestas, el motor tiene que recalcular el
     desenfoque del fondo en cada frame de movimiento. backdrop-filter ya
     causó un problema de posicionamiento distinto en este mismo proyecto
     (ver .glass-header más arriba) y es de las propiedades CSS más caras
     de recomponer en tiempo real en Safari/iOS -- quitarlo mientras dura
     el arrastre es justo lo que le faltaba a los tirones/saltos que se
     seguían viendo tras optimizar el JS. Se recupera solo al soltar, en
     cuanto se quita esta clase del body.*/
  body.pcm-drag-active .unit-column,
  body.pcm-drag-active .nav-tabs {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  body.pcm-drag-active .unit-dropzone,
  body.pcm-drag-active .hospital-dropzone {
    outline: 2px dashed var(--accent-cyan);
    outline-offset: -2px;
  }

  .unit-dropzone.pcm-drop-target,
  .hospital-dropzone.pcm-drop-target {
    outline: 2px solid var(--accent-cyan);
    outline-offset: -2px;
    background: rgba(6, 182, 212, 0.12);
  }
}

/* El código de la ficha del catálogo detrás del texto, en las tarjetas del
   móvil: el texto es lo que se escribió y el código lo que se cuenta. */
.m-cod {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.82em; font-weight: 600;
  color: var(--text-muted); background: var(--bg-secondary); border: 1px solid var(--border-color);
  border-radius: 5px; padding: 0 3px; white-space: nowrap;
}

/* El contador de «Notificar cambios» sobre el avión de papel de la cabecera
   (src/notificar/notificar.js::paintNotifyBadge pone la clase y el número en
   la raíz, que sobrevive a los repintados de la barra). */
.nc-hay-cambios .m-bar [data-click="openNotifyParteModal"],
.nc-sin-notificar .m-bar [data-click="openNotifyParteModal"] { position: relative; }
.nc-hay-cambios .m-bar [data-click="openNotifyParteModal"]::after {
  content: var(--nc-cuenta); position: absolute; top: -2px; right: -2px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: #f59e0b; color: #1f1300; font-size: 0.62rem; font-weight: 800; line-height: 16px;
  text-align: center; box-shadow: 0 0 0 2px var(--bg-primary);
}
.nc-sin-notificar .m-bar [data-click="openNotifyParteModal"]::after {
  content: ''; position: absolute; top: 0; right: 0; width: 9px; height: 9px; border-radius: 50%;
  background: #f59e0b; box-shadow: 0 0 0 2px var(--bg-primary);
}