/* ==========================================================================
   EIREN · Capa móvil — pantallas propias (vertical y horizontal)
   Complementa a mobile.css (shell vertical ya existente) con:
   1. El shell en horizontal: la barra inferior pasa a riel izquierdo.
   2. La conmutación escritorio ⇄ .m-root de cada pestaña (ver mobile/m-core.js).
   3. Los componentes de las pantallas móviles propias.
   Todo lo que no es shell va con prefijo m- para no chocar con styles.css.
   ========================================================================== */

.m-root { display: none; }
#m-layer { position: relative; z-index: 900; }

/* ── 1. Shell horizontal (teléfono tumbado) ─────────────────────────────── */
@media (orientation: landscape) and (max-height: 480px) and (max-width: 1000px) {
  body {
    --mobile-header-h: 0px;
    --m-rail-w: calc(58px + env(safe-area-inset-left));
  }

  #app { height: 100dvh; }

  header { height: 0; padding: 0; border: none; }
  .glass-header { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: none; }
  .logo-container, .user-profile { display: none; }

  .nav-tabs {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 200;
    width: var(--m-rail-w);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 4px;
    padding: calc(8px + env(safe-area-inset-top)) 6px calc(8px + env(safe-area-inset-bottom)) calc(6px + env(safe-area-inset-left));
    background: var(--bg-glass);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: none;
    border-right: 1px solid var(--border-color);
    border-radius: 0;
    overflow: hidden;
  }

  .nav-tab {
    flex: 0 0 40px;
    min-height: 40px;
    padding: 0;
    justify-content: center;
    align-items: center;
    font-size: 0;
    border-radius: 11px;
    overflow: hidden;
  }

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

  .eiren-mobile-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto auto 0;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1.5px solid var(--accent-cyan);
    border-radius: 50%;
    background: var(--bg-input);
    overflow: hidden;
    flex: none;
  }

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

  .eiren-mobile-menu {
    display: none;
    position: fixed;
    left: calc(var(--m-rail-w) + 8px);
    bottom: 8px;
    z-index: 250;
    width: 220px;
    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.6rem 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.5rem 0.75rem; border: none; background: transparent; color: var(--text-primary); font-family: var(--font-sans); font-size: 0.8rem; 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; }

  main {
    flex: none;
    height: 100dvh;
    width: calc(100% - var(--m-rail-w));
    margin: 0 0 0 var(--m-rail-w);
    padding: calc(6px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) 6px 10px;
  }

  /* Modales heredados: a pantalla completa también tumbado. */
  .modal-overlay { padding: 0; align-items: stretch; }
  .modal-overlay .modal-content { max-width: 100%; width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; }

  .busca-fab-wrap { right: calc(14px + env(safe-area-inset-right)); bottom: 12px; }
  .busca-fab { width: 46px; height: 46px; }
}

@keyframes m-tab-fade { from { opacity: 0; } to { opacity: 1; } }

/* ── 2. Conmutación escritorio ⇄ pantalla móvil ─────────────────────────── */
@media (max-width: 480px), (orientation: landscape) and (max-height: 480px) and (max-width: 1000px) {
  .tab-content.m-has > :not(.m-root) { display: none !important; }
  /* La entrada de pestaña de styles.css (fadeIn) anima transform: mientras dura,
     los botones flotantes (position: fixed) de dentro se colocan respecto a la
     pestaña y no a la pantalla, y al terminar saltan a su sitio (Candidatos del
     Parte, marcapasos del Censo). En móvil la entrada es sólo un fundido. */
  .tab-content.active { animation-name: m-tab-fade; }
  .tab-content.m-has.active > .m-root {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
    min-height: 0;
    min-width: 0;
  }
}

/* ── 3. Componentes ─────────────────────────────────────────────────────── */
.m-ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Barra superior de módulo */
.m-bar { display: flex; align-items: center; gap: 8px; flex: none; min-width: 0; }
.m-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.m-title b { font-family: var(--font-heading); font-weight: 800; font-size: 0.98rem; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.m-title small { font-size: 0.7rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-ico { position: relative; width: 42px; height: 42px; flex: none; 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; padding: 0; cursor: pointer; }
.m-ico.fab { background: var(--accent-gradient); border-color: transparent; color: #fff; box-shadow: var(--shadow-glow); }
/* Volver: más estrecha que un botón normal (es una flecha, no una acción) y
   apagada en vez de escondida cuando no hay a dónde volver. */
.m-ico.m-back { width: 34px; border-color: transparent; background: transparent; color: var(--text-secondary); margin-left: -4px; }
.m-ico.m-back.is-off { opacity: 0.3; }
.m-drop-anchor { position: fixed; background: var(--bg-secondary); border-color: var(--border-highlight); color: var(--accent-cyan); }
.m-badge { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--tone-warning, #f59e0b); color: #0f172a; font-size: 0.6rem; font-weight: 800; display: flex; align-items: center; justify-content: center; }

/* Zonas con scroll propio */
.m-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 8px; padding-bottom: 76px; }
.m-scroll > * { flex: none; }

/* Pastillas */
.m-chips { display: flex; gap: 6px; flex: none; overflow-x: auto; scrollbar-width: none; padding-bottom: 1px; }
.m-chips::-webkit-scrollbar { display: none; }
.m-chip { flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: 0.74rem; font-weight: 700; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--border-color); background: var(--bg-input); color: var(--text-secondary); white-space: nowrap; cursor: pointer; font-family: var(--font-sans); }
.m-chip .m-ic { width: 14px; height: 14px; }
.m-chip > .icon-inline { width: 14px; height: 14px; flex: none; }
.m-chip.on { background: color-mix(in srgb, var(--accent-cyan) 18%, transparent); border-color: var(--border-highlight); color: var(--text-primary); }
.m-chip.count { border-style: dashed; color: var(--text-muted); cursor: default; }
.m-chip.warn { color: #f59e0b; border-color: color-mix(in srgb, #f59e0b 40%, transparent); }
.m-chip-n { margin-left: 5px; font-size: 0.64rem; font-weight: 800; padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--accent-cyan) 22%, transparent); color: var(--accent-cyan); }
.m-chip.on .m-chip-n { background: var(--accent-cyan); color: #fff; }

/* Etiquetas */
.m-tag { --t: var(--accent-cyan); display: inline-flex; align-items: center; gap: 3px; font-size: 0.64rem; font-weight: 800; padding: 2px 7px; border-radius: 999px; letter-spacing: 0.02em; white-space: nowrap; border: 1px solid color-mix(in srgb, var(--t) 40%, transparent); background: color-mix(in srgb, var(--t) 15%, transparent); color: color-mix(in srgb, var(--t) 70%, var(--text-primary)); }
.m-tag.d { --t: #ef4444; }
.m-tag.w { --t: #f59e0b; }
.m-tag.s { --t: #10b981; }
.m-tag.i { --t: #38bdf8; }
.m-tag.n { --t: #64748b; }
.m-tag.v { --t: #a855f7; }

/* Tarjeta (mismo lenguaje que .patient-card-mobile del Censo) */
.m-card { position: relative; background: var(--bg-card); border: 1px solid var(--border-color); border-left: 3px solid var(--tone, var(--accent-cyan)); border-radius: var(--radius-md); padding: 10px 11px; min-width: 0; }
.m-card.flat { border-left-width: 1px; }
.m-card.sel { border-color: var(--border-highlight); background: var(--bg-card-hover); }
.m-card .r1 { display: flex; align-items: center; gap: 7px; min-width: 0; }
.m-card .nm { flex: 1; min-width: 0; font-weight: 800; font-size: 0.92rem; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-card .ag { flex: none; font-size: 0.76rem; font-weight: 700; color: var(--text-secondary); white-space: nowrap; }
.m-card .r2 { display: flex; align-items: center; gap: 7px; margin-top: 3px; min-width: 0; }
.m-card .dg { flex: 1; min-width: 0; font-size: 0.8rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-card .lc { flex: none; font-size: 0.74rem; font-weight: 700; color: var(--text-muted); white-space: nowrap; }
.m-card .r3 { display: flex; align-items: center; gap: 4px; margin-top: 7px; flex-wrap: wrap; }
.m-more { flex: none; width: 30px; height: 30px; margin: -4px -6px -4px 0; border: 0; background: none; color: var(--text-secondary); display: flex; align-items: center; justify-content: center; border-radius: 8px; cursor: pointer; }

/* Acciones de la tarjeta (overlay del …, igual que en Censo) */
.m-acts { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: 5px; margin-top: 8px; }
.m-act { height: 34px; border-radius: 9px; border: 1px solid var(--border-color); background: var(--bg-input); color: var(--text-primary); display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 0.72rem; font-weight: 700; font-family: var(--font-sans); cursor: pointer; padding: 0 4px; white-space: nowrap; overflow: hidden; }
.m-act .m-ic { width: 14px; height: 14px; color: var(--accent-cyan); }
.m-act.d { color: #ef4444; }
.m-act.d .m-ic { color: #ef4444; }
.m-act.pri { background: var(--accent-gradient); border-color: transparent; color: #fff; }
.m-act.pri .m-ic { color: #fff; }

/* El «⋯» de una tarjeta abre abajo la misma lista que el menú de escritorio */
.m-menu { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 6px; }
.m-menu-it { display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 12px; border: 0; background: none; border-radius: 12px; color: var(--text-primary); font-family: var(--font-sans); font-size: 0.88rem; font-weight: 700; text-align: left; cursor: pointer; }
.m-menu-it > .m-ic { width: 18px; height: 18px; flex: none; color: var(--accent-cyan); }
.m-menu-it > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.m-menu-it small { font-size: 0.72rem; font-weight: 600; color: var(--text-muted); }
.m-menu-it.on { background: color-mix(in srgb, var(--accent-cyan) 14%, transparent); }
.m-menu-it.d, .m-menu-it.d > .m-ic { color: #ef4444; }
.m-menu-it:active { background: var(--bg-card-hover); }
.m-menu-sep { border: 0; border-top: 1px solid var(--border-color); margin: 5px 8px; }
.m-menu-note { margin: 2px 12px 6px; font-size: 0.74rem; color: var(--text-muted); }

/* El día de quirófano que ya tiene una entrada de la cola */
.m-sched { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 6px; border-radius: 999px; font-size: 0.7rem; font-weight: 800; color: var(--accent-cyan); background: color-mix(in srgb, var(--accent-cyan) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent-cyan) 35%, transparent); }
.m-sched .m-ic { width: 12px; height: 12px; }
/* Tarjeta con sus botones desplegados */
.m-card.on { border-color: var(--border-highlight); background: var(--bg-card-hover); }

/* Secciones / acordeón */
.m-sec { display: flex; align-items: center; gap: 6px; font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); padding: 6px 2px 0; flex: none; }
.m-sec::after { content: ''; flex: 1; height: 1px; background: var(--border-color); }
.m-sec .n { order: 3; color: var(--text-muted); }
.m-acc { border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-card); overflow: hidden; }
.m-acc-h { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 11px; font-size: 0.86rem; font-weight: 700; color: var(--text-primary); background: none; border: 0; font-family: var(--font-sans); cursor: pointer; text-align: left; }
.m-acc-h .m-ic { width: 16px; height: 16px; color: var(--accent-cyan); transition: transform 0.18s ease; }
.m-acc-h .n { margin-left: auto; font-size: 0.68rem; font-weight: 800; color: var(--text-muted); background: var(--bg-input); border-radius: 999px; padding: 1px 8px; }
.m-acc.open > .m-acc-h > .m-ic:first-child { transform: rotate(90deg); }
.m-acc-b { padding: 0 9px 9px; display: flex; flex-direction: column; gap: 7px; }
.m-acc .m-acc { background: var(--bg-input); }

/* Navegación de semana/mes y tira de días */
.m-weeknav { display: flex; align-items: center; justify-content: space-between; gap: 6px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 999px; padding: 4px; flex: none; }
.m-weeknav b { font-size: 0.8rem; font-weight: 700; display: flex; align-items: center; gap: 6px; color: var(--text-primary); }
.m-weeknav button { background: none; border: 0; color: var(--text-secondary); display: flex; padding: 5px 9px; border-radius: 999px; cursor: pointer; }
.m-days { display: flex; gap: 5px; flex: none; }
.m-day { flex: 1; border: 1px solid var(--border-color); background: var(--bg-input); border-radius: 12px; padding: 5px 2px 6px; text-align: center; color: var(--text-secondary); cursor: pointer; font-family: var(--font-sans); }
.m-day span { display: block; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.m-day b { display: block; font-size: 1rem; font-weight: 800; color: var(--text-primary); line-height: 1.25; }
.m-day i { display: block; font-style: normal; font-size: 0.6rem; font-weight: 700; color: var(--accent-cyan); min-height: 0.8em; }
.m-day.on { background: var(--accent-gradient); border-color: transparent; }
.m-day.on b, .m-day.on i, .m-day.on span { color: #fff; }
.m-day.today:not(.on) { border-color: var(--border-highlight); }

/* Estado vacío y avisos */
.m-empty { text-align: center; padding: 28px 12px; color: var(--text-muted); font-size: 0.84rem; }
.m-note { display: flex; align-items: center; gap: 6px; font-size: 0.7rem; font-weight: 600; color: var(--text-muted); background: var(--bg-input); border: 1px dashed var(--border-color); border-radius: 999px; padding: 5px 10px; align-self: center; }
.m-note .m-ic { width: 13px; height: 13px; }
.m-desk { display: inline-flex; align-items: center; gap: 4px; font-size: 0.62rem; font-weight: 800; color: var(--text-muted); border: 1px dashed var(--border-color); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.m-desk .m-ic { width: 11px; height: 11px; }

/* Formularios rápidos: una sola rejilla, cajas de 40px */
.m-frm { display: flex; flex-direction: column; gap: 7px; }
.m-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.m-g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.m-in { position: relative; display: flex; flex-direction: column; justify-content: center; height: 44px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 11px; padding: 0 11px; min-width: 0; }
.m-in:focus-within { border-color: var(--border-highlight); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-cyan) 18%, transparent); }
.m-in > span { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-in input, .m-in select, .m-in textarea { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text-primary); font-family: var(--font-sans); font-size: 16px; font-weight: 600; padding: 0; line-height: 1.3; -webkit-appearance: none; appearance: none; }
.m-in select { cursor: pointer; }
.m-in.tall { height: auto; padding: 7px 11px; }
.m-in textarea { resize: none; min-height: 3.2em; }
.m-tile { height: 44px; border-radius: 11px; border: 1px solid var(--border-color); background: var(--bg-input); display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 0.76rem; font-weight: 700; color: var(--text-secondary); font-family: var(--font-sans); cursor: pointer; padding: 0 4px; min-width: 0; }
.m-tile .m-ic { width: 15px; height: 15px; color: var(--c, var(--text-muted)); }
.m-tile.on { border-color: var(--c, var(--border-highlight)); background: color-mix(in srgb, var(--c, var(--accent-cyan)) 18%, transparent); color: var(--text-primary); }
.m-foot { flex: none; display: flex; gap: 7px; padding-top: 8px; border-top: 1px solid var(--border-color); }
.m-btn { flex: 1; min-height: 46px; border: 0; border-radius: 12px; background: var(--accent-gradient); color: #fff; font-family: var(--font-sans); font-size: 0.88rem; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer; box-shadow: var(--shadow-glow); padding: 0 14px; }
.m-btn .m-ic { width: 17px; height: 17px; }
.m-btn.ghost { flex: 0 0 auto; background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-primary); box-shadow: none; }
.m-btn:disabled { opacity: 0.55; cursor: default; }
.m-error { font-size: 0.78rem; color: #fca5a5; background: rgba(239, 68, 68, 0.14); border: 1px solid rgba(239, 68, 68, 0.4); border-radius: 10px; padding: 8px 10px; }

/* Maestro / detalle (horizontal) */
.m-md { display: grid; grid-template-columns: minmax(220px, 38%) 1fr; gap: 10px; flex: 1; min-height: 0; }
.m-md > * { min-height: 0; min-width: 0; }
.m-md-list { overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding-bottom: 60px; }
.m-md-list > * { flex: none; }
.m-panel { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 10px 11px; min-width: 0; }
.m-panel > h4 { margin: 0 0 8px; font-family: var(--font-heading); font-size: 0.84rem; font-weight: 700; display: flex; align-items: center; gap: 6px; color: var(--text-primary); }
.m-h-ic { width: 24px; height: 24px; border-radius: 7px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); }
.m-h-ic .m-ic { width: 15px; height: 15px; }
.m-panel > h4 .cnt { font-size: 0.64rem; font-weight: 800; background: color-mix(in srgb, var(--accent-cyan) 20%, transparent); color: var(--accent-cyan); border-radius: 999px; padding: 1px 7px; }
.m-det { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.m-facts { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 6px; }
.m-fact { background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 9px; padding: 5px 8px; min-width: 0; }
.m-fact span { display: block; font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-fact b { display: block; font-size: 0.8rem; font-weight: 700; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; }

/* Rejilla semanal (Parte y Cuadrante en horizontal) */
.m-wk { display: grid; grid-template-columns: 70px repeat(var(--days, 5), minmax(0, 1fr)); gap: 3px; }
.m-wk .hd { font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); text-align: center; padding-bottom: 2px; position: sticky; top: 0; background: var(--bg-primary); z-index: 1; }
.m-wk .hd.today { color: var(--accent-cyan); }
.m-wk .rh { font-size: 0.66rem; font-weight: 700; color: var(--text-secondary); display: flex; align-items: center; padding-right: 3px; line-height: 1.2; overflow: hidden; }
.m-wk .cl { background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 8px; min-height: 44px; padding: 3px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.m-wk .cl.today { border-color: var(--border-highlight); background: color-mix(in srgb, var(--accent-cyan) 8%, var(--bg-input)); }
.m-wk .cl.free { border-style: dashed; background: none; }
.m-mc { border-radius: 6px; border-left: 3px solid var(--tone, var(--accent-cyan)); background: var(--bg-card); padding: 3px 5px; font-size: 0.62rem; line-height: 1.25; min-width: 0; cursor: pointer; }
.m-mc b { display: block; font-weight: 800; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-mc span { color: var(--text-muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
/* Cirugía suspendida en el Parte: se queda en su sitio, en rojo y sin acciones. */
.m-card.m-card--susp { border: 1.5px solid rgba(220, 68, 60, 0.85); border-left: 4px solid #d8413a; background: rgba(220, 68, 60, 0.09); }
.m-susp-tag { flex: 1; align-self: flex-start; display: inline-flex; justify-content: center; padding: 3px 8px; border-radius: 6px; background: #d8413a; color: #fff; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.m-card--susp .r1 + .r1 { margin-top: 5px; }
.m-susp-reason { margin-top: 4px; font-size: 0.76rem; font-weight: 700; color: #d8413a; }

/* Personas (avatar + nombre) */
.m-av { display: inline-flex; align-items: center; gap: 5px; font-size: 0.7rem; font-weight: 700; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 999px; padding: 2px 9px 2px 3px; color: var(--text-secondary); white-space: nowrap; max-width: 100%; overflow: hidden; }
.m-av i { width: 20px; height: 20px; border-radius: 50%; background: var(--c, var(--accent-gradient)); color: #fff; font-style: normal; font-size: 0.56rem; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none; }
.m-av.xs { font-size: 0.6rem; padding: 1px 6px 1px 2px; gap: 3px; }
.m-av.xs i { width: 15px; height: 15px; font-size: 0.46rem; }
.m-av.empty { border-style: dashed; color: var(--text-muted); padding: 2px 9px; cursor: pointer; }

/* Menú en columna */
.m-scrim { position: fixed; inset: 0; background: rgba(2, 6, 15, 0.55); animation: m-fade 0.16s ease; }
.m-drop { position: fixed; inset: 0; z-index: 910; }
.m-drop-guide { position: fixed; width: 2px; border-radius: 2px; background: linear-gradient(to bottom, var(--border-highlight), transparent); }
.m-drop-item { position: fixed; display: flex; align-items: center; gap: 9px; background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--font-sans); animation: m-drop-in 0.22s cubic-bezier(.2, .8, .3, 1.15) both; }
.m-drop-item.right { flex-direction: row-reverse; }
.m-drop-ic { position: relative; width: 44px; height: 44px; border-radius: 13px; background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--tone, var(--accent-cyan)); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); flex: none; }
.m-drop-ic .m-ic, .m-drop-ic img { width: 20px; height: 20px; }
.m-drop-ic b { position: absolute; top: -5px; right: -5px; background: #f59e0b; color: #0f172a; font-size: 0.6rem; font-weight: 800; border-radius: 999px; padding: 1px 5px; }
.m-drop-lbl { font-size: 0.82rem; font-weight: 700; color: var(--text-primary); background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 999px; padding: 7px 12px; box-shadow: var(--shadow-md); white-space: nowrap; }
.m-drop-lbl small { font-weight: 600; color: var(--text-muted); margin-left: 5px; }
.m-drop-item.on .m-drop-ic, .m-drop-item.on .m-drop-lbl { border-color: var(--border-highlight); }
.m-drop-item.on .m-drop-ic { background: color-mix(in srgb, var(--accent-cyan) 18%, var(--bg-secondary)); }
@keyframes m-drop-in { from { opacity: 0; transform: translateY(-10px) scale(0.92); } to { opacity: 1; transform: none; } }
@keyframes m-fade { from { opacity: 0; } to { opacity: 1; } }

/* Hoja inferior */
.m-sheet-wrap { position: fixed; inset: 0; z-index: 915; }
.m-sheet { position: fixed; left: 0; right: 0; bottom: 0; max-height: 92dvh; display: flex; flex-direction: column; background: var(--bg-secondary); border: 1px solid var(--border-color); border-bottom: 0; border-radius: 20px 20px 0 0; box-shadow: 0 -14px 34px rgba(0, 0, 0, 0.45); padding: 6px 14px calc(12px + env(safe-area-inset-bottom)); animation: m-sheet-in 0.24s cubic-bezier(.2, .8, .3, 1) both; }
.m-sheet-wrap.tall .m-sheet { height: 92dvh; }
/* El asa es toda la franja, no la barrita: con 5 px de alto no había forma
   de acertarle, y en una hoja alta era la única salida a mano. */
.m-sheet-grab { display: block; width: 100%; border: 0; background: transparent; padding: 7px 0 9px; margin: 0; flex: none; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; }
.m-sheet-grab i { display: block; width: 42px; height: 5px; border-radius: 999px; background: var(--border-color); margin: 0 auto; }
.m-sheet-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
@keyframes m-sheet-in { from { transform: translateY(40%); opacity: 0.4; } to { transform: none; opacity: 1; } }
@media (orientation: landscape) and (max-height: 480px) and (max-width: 1000px) {
  .m-sheet { left: auto; top: 0; width: min(560px, 68vw); max-height: none; border-radius: 18px 0 0 18px; border: 1px solid var(--border-color); border-right: 0; padding: calc(8px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 10px 12px; animation-name: m-sheet-side; }
  .m-sheet-wrap.tall .m-sheet { height: auto; }
  .m-sheet-grab { display: none; }
  @keyframes m-sheet-side { from { transform: translateX(30%); opacity: 0.4; } to { transform: none; opacity: 1; } }
}

/* Aviso breve */
.m-toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); z-index: 950; background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border-highlight); border-radius: 999px; padding: 9px 16px; font-size: 0.82rem; font-weight: 700; box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; white-space: nowrap; }
.m-toast.show { opacity: 1; transform: translate(-50%, 0); }
.m-toast[data-tone="error"] { border-color: rgba(239, 68, 68, 0.6); color: #fca5a5; }

/* Horizontal: más densidad */
@media (orientation: landscape) and (max-height: 480px) and (max-width: 1000px) {
  .m-bar { gap: 7px; }
  .m-ico { width: 36px; height: 36px; border-radius: 11px; }
  .m-title { flex-direction: row; align-items: baseline; gap: 8px; }
  .m-title b { font-size: 0.9rem; }
  .m-scroll { padding-bottom: 60px; }
  .m-card { padding: 7px 9px; }
  .m-card .nm { font-size: 0.82rem; }
  .m-card .dg { font-size: 0.72rem; }
  .m-in { height: 40px; }
  .m-tile { height: 40px; }
  .m-btn { min-height: 38px; font-size: 0.78rem; }
}

/* ── Aviso al busca ─────────────────────────────────────────────────────── */
.m-busca-head { display: flex; align-items: center; gap: 9px; flex: none; }
.m-busca-glyph { width: 38px; height: 38px; border-radius: 12px; background: color-mix(in srgb, var(--accent-cyan) 16%, transparent); color: var(--accent-cyan); display: flex; align-items: center; justify-content: center; flex: none; }
.m-busca-pill { flex: none; display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-sans); font-size: 0.74rem; font-weight: 700; color: var(--text-secondary); background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 999px; padding: 6px 7px 6px 11px; cursor: pointer; }
.m-busca-pill i { font-style: normal; font-size: 0.64rem; font-weight: 800; background: #fca5a5; color: #450a0a; border-radius: 999px; padding: 0 6px; }
.m-busca-pill .m-ic { width: 13px; height: 13px; color: var(--text-muted); }
.m-busca-main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.m-busca-new, .m-busca-side { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.m-busca-side { display: none; flex-direction: column; gap: 8px; }
.m-busca-side h4 { display: none; }
.m-busca-pending { display: flex; flex-direction: column; gap: 8px; }
.m-sheet-wrap[data-view="pend"] .m-busca-new, .m-sheet-wrap[data-view="pend"] .m-busca-foot { display: none; }
.m-sheet-wrap[data-view="pend"] .m-busca-side { display: flex; }
.m-busca-when { display: flex; align-items: center; gap: 7px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 11px; padding: 9px 11px; }
.m-busca-when .m-ic { width: 16px; height: 16px; color: var(--accent-cyan); }
.m-busca-when b { font-size: 0.86rem; font-weight: 700; color: var(--text-primary); }
.m-busca-when span { font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-link { margin-left: auto; background: none; border: 0; color: var(--accent-cyan); font-family: var(--font-sans); font-size: 0.78rem; font-weight: 700; padding: 2px 0 2px 8px; cursor: pointer; flex: none; }
.m-busca-cols { display: flex; flex-direction: column; gap: 7px; }
.m-busca-notes-toggle { border: 1px solid var(--border-color); border-radius: 11px; background: var(--bg-card); }
.m-busca-form [hidden], .m-busca-notes-toggle[hidden] { display: none !important; }

@media (orientation: landscape) and (max-height: 480px) and (max-width: 1000px) {
  .m-busca-wrap .m-sheet { width: calc(100vw - var(--m-rail-w) - 24px); }
  .m-busca-pill { display: none; }
  .m-busca-main { flex-direction: row; gap: 10px; }
  .m-busca-side { display: flex; flex: 0 0 250px; border-left: 1px solid var(--border-color); padding-left: 10px; }
  .m-busca-side h4 { display: flex; align-items: center; gap: 6px; margin: 0; font-family: var(--font-heading); font-size: 0.84rem; color: var(--text-primary); }
  .m-busca-side h4 .cnt { font-size: 0.64rem; font-weight: 800; background: #fca5a5; color: #450a0a; border-radius: 999px; padding: 0 6px; }
  .m-busca-side .m-card .m-acts { grid-template-columns: 1fr 1fr 34px; }
  .m-busca-side .m-act { height: 28px; font-size: 0.64rem; }
  .m-busca-side .m-act.d { font-size: 0; }
  .m-busca-cols { flex-direction: row; gap: 10px; }
  .m-busca-cols > .m-frm { flex: 1; min-width: 0; }
  .m-sheet-wrap[data-view="pend"] .m-busca-new, .m-sheet-wrap[data-view="pend"] .m-busca-foot { display: flex; }
  .m-busca-new { display: block; }
  .m-busca-foot { justify-content: flex-end; }
  .m-busca-foot .m-btn { flex: 0 0 auto; }
}
.m-busca-top { display: flex; flex-direction: column; gap: 7px; }
@media (orientation: landscape) and (max-height: 480px) and (max-width: 1000px) {
  .m-busca-top { display: grid; grid-template-columns: 1fr 1.3fr; gap: 10px; align-items: end; }
  .m-busca-top .m-sec { display: none; }
  .m-busca-top .m-busca-when { height: 40px; padding: 0 11px; }
  .m-busca-cols .m-sec { padding-top: 2px; }
  .m-busca-notes-toggle { padding: 9px 11px; font-size: 0.8rem; }
  .m-busca-notes-toggle .n { display: none; }
  .m-busca-form { gap: 6px; }
}

/* ── Lista de Espera ────────────────────────────────────────────────────── */
.m-list { display: flex; flex-direction: column; gap: 8px; }
.m-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: start; }
.m-grid2 > .m-chips { grid-column: 1 / -1; }
.m-card-sub { font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.m-ses-num { flex: none; font-family: var(--font-heading); font-weight: 800; font-size: 0.86rem; color: var(--accent-cyan); }
.m-chips.wrap { flex-wrap: wrap; overflow: visible; }
/* `flex: 1` aquí crecía A LO ALTO cuando el buscador cuelga de una columna
   (la raíz de una vista, el cuerpo de una hoja): la píldora de radio 999 px
   se convertía en un círculo enorme que se comía media pantalla. Crece sólo
   donde de verdad hay una fila que repartir. */
.m-search { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; background: var(--bg-input); border: 1px solid var(--border-highlight); border-radius: 999px; padding: 3px 4px 3px 11px; }
.m-search-ic { display: flex; color: var(--text-muted); }
.m-search-ic .m-ic { width: 15px; height: 15px; }
.m-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text-primary); font-family: var(--font-sans); font-size: 16px; padding: 4px 0; }
.m-search button { border: 0; background: none; color: var(--text-muted); display: flex; padding: 5px; border-radius: 999px; cursor: pointer; }
.m-search button .m-ic { width: 15px; height: 15px; }
.m-chips .m-search, .m-bar .m-search, .m-bar-tools .m-search { flex: 1 1 auto; }
.m-bar-tools { display: flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0; }
.m-det-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.m-det-head b { font-family: var(--font-heading); font-size: 1rem; font-weight: 800; color: var(--text-primary); }
.m-det-head span { font-size: 0.78rem; font-weight: 700; color: var(--text-secondary); }
.m-det-head .m-tag { margin-left: auto; }
.m-det-alerts { display: flex; flex-wrap: wrap; gap: 4px; }
.m-det-notes { display: flex; flex-direction: column; gap: 4px; }
.m-det-notes p { margin: 0; font-size: 0.74rem; line-height: 1.45; color: var(--text-secondary); background: var(--bg-input); border-radius: 8px; padding: 6px 8px; }
.m-det-rows { display: flex; flex-direction: column; gap: 4px; }
.m-det-rows > div { display: flex; align-items: center; gap: 6px; font-size: 0.74rem; min-width: 0; }
.m-det-rows b { font-weight: 700; color: var(--text-primary); white-space: nowrap; }
.m-det-rows span { flex: 1; min-width: 0; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-det-foot { margin-top: auto; }
.m-miller { display: grid; grid-template-columns: 160px 180px 1fr; flex: 1; min-height: 0; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-card); overflow: hidden; }
.m-miller > div { border-right: 1px solid var(--border-color); padding: 4px 6px 8px; display: flex; flex-direction: column; gap: 3px; overflow-y: auto; min-width: 0; }
.m-miller > div:last-child { border-right: 0; }
.m-miller-list { gap: 6px !important; padding-bottom: 60px !important; }
.m-miller-list .m-acts { margin-top: 5px; }
.m-miller-list .m-act { height: 28px; font-size: 0.64rem; }
.m-mrow { display: flex; align-items: center; gap: 6px; width: 100%; padding: 8px 8px; border-radius: 8px; border: 0; background: none; font-family: var(--font-sans); font-size: 0.76rem; font-weight: 700; color: var(--text-secondary); cursor: pointer; text-align: left; }
.m-mrow .n { margin-left: auto; font-size: 0.66rem; font-weight: 800; color: var(--text-muted); }
.m-mrow .m-ic { width: 13px; height: 13px; color: var(--text-muted); }
.m-mrow.on { background: color-mix(in srgb, var(--accent-cyan) 16%, transparent); color: var(--text-primary); }
.m-mrow.on .n, .m-mrow.on .m-ic { color: var(--accent-cyan); }
.m-qpos { width: 21px; height: 21px; border-radius: 7px; background: var(--bg-input); border: 1px solid var(--border-color); display: flex; align-items: center; justify-content: center; font-size: 0.66rem; font-weight: 800; color: var(--text-secondary); flex: none; }
@media (orientation: landscape) and (max-height: 480px) and (max-width: 1000px) {
  .m-root[data-m-tab="espera"] .m-bar .m-title { flex: 1 1 auto; }
  .m-bar-tools .m-chip { padding: 5px 9px; }
  .m-bar-tools .m-search { min-width: 220px; }
}
@media (orientation: landscape) and (max-height: 480px) and (max-width: 1000px) {
  /* Que el botón flotante del busca no tape las acciones del pie de la ficha. */
  .m-det-foot { padding-right: 56px; }
}

/* ── Pantalla completa (carpeta clínica, sesión de trabajo) ─────────────── */
/* Recomposición forzada tras girar (ver relayoutOverlays en m-core.js). */
.m-relayout, .m-relayout * { animation: none !important; transition: none !important; }
.m-screen { position: fixed; z-index: 903; top: 0; left: 0; right: 0; bottom: var(--mobile-nav-h, 0px); display: flex; flex-direction: column; gap: 8px; padding: calc(8px + env(safe-area-inset-top)) 12px 8px; background: var(--bg-primary); animation: m-screen-in 0.2s ease both; }
@keyframes m-screen-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (orientation: landscape) and (max-height: 480px) and (max-width: 1000px) {
  .m-screen { left: var(--m-rail-w); bottom: 0; padding: calc(6px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) 6px 10px; }
}
.m-screen .m-scroll { padding-bottom: 20px; }

/* El documento tal cual saldrá en papel, dentro de la app */
.m-doc { flex: 1; min-height: 0; border-radius: var(--radius-md); overflow: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border-color); background: #fff; }
.m-doc-pad { width: 100%; }
.m-doc iframe { width: 100%; height: 100%; border: 0; background: #fff; transform-origin: top left; }
.m-center { display: flex; justify-content: center; padding-top: 6px; }
.m-wide { width: 100%; flex: none; }
.m-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }

/* ── Carpeta clínica ────────────────────────────────────────────────────── */
.m-phdr { display: flex; align-items: center; gap: 9px; flex: none; min-width: 0; }
.m-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--accent-gradient); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 800; font-size: 0.84rem; flex: none; }
.m-phdr-tags { display: flex; gap: 5px; flex-wrap: wrap; flex: none; }
.m-ctabs { display: flex; gap: 5px; flex: none; }
.m-ctab { height: 40px; min-width: 40px; border-radius: 11px; border: 1px solid var(--border-color); background: var(--bg-input); color: var(--text-muted); display: flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--font-sans); font-size: 0.76rem; font-weight: 700; padding: 0 10px; cursor: pointer; }
.m-ctab .m-ic { width: 17px; height: 17px; }
.m-ctab span { display: none; }
.m-ctab.on { flex: 1; background: color-mix(in srgb, var(--accent-cyan) 18%, transparent); border-color: var(--border-highlight); color: var(--text-primary); }
.m-ctab.on span { display: inline; }
.m-ctab.on .m-ic { color: var(--accent-cyan); }
.m-ctab-list { display: flex; flex-direction: column; gap: 3px; }
.m-ctab-list button { display: flex; align-items: center; gap: 8px; padding: 8px 9px; border: 0; background: none; border-radius: 9px; font-family: var(--font-sans); font-size: 0.78rem; font-weight: 700; color: var(--text-secondary); cursor: pointer; text-align: left; }
.m-ctab-list button .m-ic { width: 15px; height: 15px; color: var(--text-muted); }
.m-ctab-list button small { margin-left: auto; font-size: 0.66rem; color: var(--text-muted); }
.m-ctab-list button.on { background: color-mix(in srgb, var(--accent-cyan) 16%, transparent); color: var(--text-primary); }
.m-ctab-list button.on .m-ic { color: var(--accent-cyan); }
.m-fdot { flex: none; display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-sans); font-size: 0.7rem; font-weight: 700; color: var(--text-secondary); border: 1px solid var(--border-color); background: var(--bg-input); border-radius: 999px; padding: 5px 10px; cursor: pointer; white-space: nowrap; }
.m-fdot i { width: 8px; height: 8px; border-radius: 50%; display: block; }
.m-fdot.off { opacity: 0.4; }
.m-tlv { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 4px 0 0 20px; }
.m-tlv::before { content: ''; position: absolute; left: 5px; top: 8px; bottom: 6px; width: 2px; background: var(--border-color); }
.m-tlv .e { position: relative; min-width: 0; }
.m-tlv .e::before { content: ''; position: absolute; left: -20px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px var(--bg-primary); }
.m-tlv .e small { display: block; font-size: 0.66rem; font-weight: 700; color: var(--text-muted); }
.m-tlv .e b { display: block; font-size: 0.86rem; font-weight: 700; color: var(--text-primary); margin-top: 1px; }
.m-tlv .e span { display: block; font-size: 0.78rem; line-height: 1.45; color: var(--text-secondary); margin-top: 2px; white-space: pre-line; }
.m-draft { display: flex; align-items: center; gap: 9px; border: 1px dashed color-mix(in srgb, #818cf8 55%, transparent); background: color-mix(in srgb, #818cf8 10%, transparent); border-radius: 11px; padding: 8px 10px; }
.m-draft > .m-ic { color: #818cf8; }
.m-draft > div { flex: 1; min-width: 0; }
.m-draft b { display: block; font-size: 0.78rem; color: var(--text-primary); }
.m-draft span { display: block; font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-fact.wide { grid-column: 1 / -1; }
.m-fact b { white-space: normal; }
.m-fact-btn { width: 100%; display: flex; flex-direction: column; align-items: flex-start; position: relative; font-family: var(--font-sans); text-align: left; cursor: pointer; border-color: var(--border-highlight); padding: 7px 10px; }
.m-fact-btn:disabled { border-color: var(--border-color); cursor: default; }
.m-fact-btn .m-ic { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--accent-cyan); width: 16px; height: 16px; }
.m-note-text { margin: 6px 0 0; font-size: 0.82rem; line-height: 1.5; color: var(--text-secondary); white-space: pre-line; }
.m-warn-text { margin: 8px 0 0; font-size: 0.76rem; color: #fca5a5; }
.m-docs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.m-doc { display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 11px; overflow: hidden; text-decoration: none; color: inherit; padding: 0; font-family: var(--font-sans); text-align: left; cursor: pointer; }
.m-doc.sel { border-color: var(--border-highlight); }
.m-doc-th { position: relative; height: 78px; background: var(--bg-input); display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--border-color); overflow: hidden; }
.m-doc-th::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--c); z-index: 1; }
.m-doc-th img { width: 100%; height: 100%; object-fit: cover; }
.m-doc-th em { position: absolute; right: 5px; bottom: 5px; font-style: normal; font-size: 0.56rem; font-weight: 800; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 4px; padding: 0 4px; color: var(--text-muted); }
.m-pg { width: 44px; height: 56px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 3px; padding: 6px 5px; display: flex; flex-direction: column; gap: 4px; }
.m-pg i { display: block; height: 2px; border-radius: 1px; background: var(--border-color); }
.m-doc-meta { padding: 6px 8px 8px; min-width: 0; }
.m-doc-meta b { display: block; font-size: 0.74rem; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-doc-meta span { display: block; font-size: 0.64rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-pick { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 58px; border-radius: 13px; border: 1.5px dashed var(--border-highlight); background: color-mix(in srgb, var(--accent-cyan) 8%, transparent); color: var(--text-primary); font-family: var(--font-sans); font-size: 0.86rem; font-weight: 700; cursor: pointer; padding: 0 12px; }
.m-pick .m-ic { color: var(--accent-cyan); }
.m-pick.done { border-style: solid; }
.m-pick span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-upload-cats .m-tile { font-size: 0.72rem; }
.m-note-in { flex: 1; min-height: 140px; }
.m-note-in textarea { height: 100%; min-height: 120px; }
.m-carpeta-land { display: grid; grid-template-columns: 210px 1fr; gap: 10px; flex: 1; min-height: 0; }
.m-carpeta-side { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.m-carpeta-side .m-avatar { width: 32px; height: 32px; font-size: 0.7rem; }
.m-carpeta-side .m-phdr .m-ico { width: 32px; height: 32px; }
.m-carpeta-side .m-title { flex-direction: column; align-items: flex-start; gap: 0; }
.m-carpeta-side .m-title b { font-size: 0.82rem; }
.m-carpeta-side .m-title small { white-space: normal; }
.m-carpeta-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; }
.m-docs-land .m-docs { grid-template-columns: 1fr; }
.m-docs-land .m-doc { flex-direction: row; align-items: center; }
.m-docs-land .m-doc-th { width: 54px; height: 44px; flex: none; border-bottom: 0; border-right: 1px solid var(--border-color); }
.m-docs-land .m-pg { width: 22px; height: 28px; padding: 3px; gap: 2px; }
.m-preview { flex: 1; min-height: 0; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 9px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.m-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.m-preview iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.m-preview-meta { display: flex; align-items: center; gap: 10px; flex: none; }
.m-preview-meta > div { flex: 1; min-width: 0; }
.m-preview-meta b { display: block; font-size: 0.8rem; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-preview-meta span { display: block; font-size: 0.66rem; color: var(--text-muted); }
.m-preview-meta .m-btn { flex: none; min-height: 34px; text-decoration: none; font-size: 0.74rem; }
.m-det .m-empty { margin: auto; }

/* Títulos largos en la carpeta (procedimientos): hasta dos líneas. */
.m-carpeta .m-card .nm { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.m-carpeta-side .m-title b { white-space: normal; }

/* ── Sesiones médico-quirúrgicas ────────────────────────────────────────── */
.m-ses-tipos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.m-ses-tipo { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 11px; border-radius: 13px; border: 1px solid var(--border-color); background: var(--bg-input); color: var(--text-secondary); font-family: var(--font-sans); cursor: pointer; text-align: left; }
.m-ses-tipo img, .m-ses-tipo .m-ic { width: 22px; height: 22px; color: var(--accent-cyan); }
.m-ses-tipo b { font-size: 0.86rem; font-weight: 800; color: var(--text-primary); }
.m-ses-tipo small { font-size: 0.66rem; color: var(--text-muted); }
.m-ses-tipo.on { border-color: var(--border-highlight); background: color-mix(in srgb, var(--accent-cyan) 14%, transparent); box-shadow: var(--shadow-glow); }
.m-optlist { display: flex; flex-direction: column; gap: 3px; }
.m-opt { display: flex; align-items: center; gap: 9px; width: 100%; padding: 10px 10px; border: 0; background: none; border-radius: 10px; font-family: var(--font-sans); font-size: 0.84rem; font-weight: 600; color: var(--text-secondary); cursor: pointer; text-align: left; }
.m-opt i { width: 16px; height: 16px; border: 2px solid var(--border-color); flex: none; }
.m-opt i.rd { border-radius: 50%; }
.m-opt i.cb { border-radius: 4px; }
.m-opt.on { background: color-mix(in srgb, var(--accent-cyan) 14%, transparent); color: var(--text-primary); }
.m-opt.on i.rd { border-color: var(--accent-cyan); background: radial-gradient(circle, var(--accent-cyan) 0 35%, transparent 40%); }
.m-opt.on i.cb { border-color: var(--accent-cyan); background: var(--accent-cyan); }
.m-cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; flex: 1; min-height: 0; }
.m-cols2 > * { min-height: 0; overflow-y: auto; }
.m-confirm { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border: 1px solid rgba(239, 68, 68, 0.45); background: rgba(239, 68, 68, 0.12); border-radius: 12px; padding: 8px 10px; font-size: 0.78rem; color: var(--text-primary); flex: none; }
.m-confirm > .m-ic { color: #f87171; }
.m-confirm span { flex: 1; min-width: 160px; }
.m-confirm .m-act { flex: none; padding: 0 12px; }
.m-confirm.soft { border-color: rgba(245, 158, 11, 0.4); background: rgba(245, 158, 11, 0.12); }
.m-confirm.soft > .m-ic { color: #f59e0b; }
.m-conseq { font-size: 0.8rem; font-weight: 600; color: var(--text-primary); padding: 4px 2px 0 6px; }
.m-report { flex: 1; min-height: 0; }
.m-report textarea { flex: 1; height: 100%; min-height: 200px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; line-height: 1.55; }
.m-final .m-report textarea { min-height: 0; }
.m-hint { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; font-size: 0.72rem; color: var(--text-muted); }
.m-hint .m-ic { width: 14px; height: 14px; color: #10b981; }
.m-more-toggle { border: 1px solid var(--border-color); border-radius: 11px; background: var(--bg-card); }
.m-ses-form { padding-bottom: 10px; }
@media (orientation: landscape) and (max-height: 480px) and (max-width: 1000px) {
  .m-ses-tipos { grid-template-columns: repeat(4, 1fr); flex: none; }
  .m-ses-tipo { padding: 7px 9px; flex-direction: row; align-items: center; flex-wrap: wrap; column-gap: 7px; }
  .m-ses-tipo small { width: 100%; }
  .m-ses-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: start; padding-bottom: 50px; }
  .m-ses-editbar .m-btn { flex: none; }
  .m-ses-form-land { max-width: 900px; width: 100%; align-self: center; padding-bottom: 24px; }
}

/* ── Parte Quirúrgico ───────────────────────────────────────────────────── */
.m-sec .m-ic { width: 13px; height: 13px; color: var(--accent-cyan); }
.m-slot { width: 100%; min-height: 40px; border: 1px dashed var(--border-color); border-radius: var(--radius-md); background: none; color: var(--text-muted); font-family: var(--font-sans); font-size: 0.76rem; font-weight: 700; cursor: pointer; }
.m-slot.ro { display: flex; align-items: center; justify-content: center; cursor: default; }
.m-float-pill { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--mobile-nav-h, 56px) + 14px); z-index: 150; display: flex; align-items: center; gap: 7px; border: 0; border-radius: 999px; padding: 11px 18px; background: var(--accent-gradient); color: #fff; font-family: var(--font-sans); font-size: 0.84rem; font-weight: 800; box-shadow: var(--shadow-glow), var(--shadow-lg); cursor: pointer; white-space: nowrap; }
.m-float-pill .m-ic { width: 16px; height: 16px; }
.m-count { font-size: 0.66rem; font-weight: 800; color: var(--text-muted); background: var(--bg-input); border-radius: 999px; padding: 1px 7px; vertical-align: 2px; font-family: var(--font-sans); }
.m-cand-plan { display: flex; flex-direction: column; gap: 7px; margin: -2px 0 4px; padding: 8px; border: 1px solid var(--border-highlight); border-top: 0; border-radius: 0 0 var(--radius-md) var(--radius-md); background: color-mix(in srgb, var(--accent-cyan) 6%, var(--bg-card)); }
.m-cand-list .m-card.sel { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
/* ── Programar fecha de quirófano ──────────────────────────────────────────
   Pantalla propia: el nombre del paciente es el título (el modal de escritorio
   gastaba dos líneas en decir «Programar cirugía · Paciente: …»). */
.m-prog .m-in { height: auto; padding: 5px 11px 7px; }
.m-prog-now { flex: none; display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 12px; border: 1px solid color-mix(in srgb, #10b981 45%, transparent); background: color-mix(in srgb, #10b981 12%, transparent); font-size: 0.76rem; color: var(--text-primary); }
.m-prog-now > .m-ic { width: 16px; height: 16px; color: #10b981; flex: none; }
.m-prog-now > span { flex: 1; min-width: 0; }
.m-prog-now b { color: #10b981; }
.m-prog-fields { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 8px; }
.m-prog-fields .m-chips { margin-top: 2px; }
.m-prog-fields .m-chip { flex: 1; justify-content: center; }
.m-prog-fields .m-chip { padding: 4px 10px; }
.m-day.mine { border-color: #10b981; }
.m-day.mine i { color: #10b981; }
.m-wk .cl.mine { border-color: #10b981; background: color-mix(in srgb, #10b981 12%, transparent); }
.m-prog-mark { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 0.64rem; font-weight: 800; color: #10b981; }
.m-prog-mark .m-ic { width: 13px; height: 13px; }
.m-prog-free { display: block; text-align: center; font-size: 0.62rem; font-weight: 700; color: var(--text-muted); }
.m-prog-free.off { color: #ef4444; }
.m-prog-strip { left: 10px; right: 10px; max-width: none; border-radius: 14px; padding: 6px 10px; gap: 10px; }
.m-prog-strip .m-prog-fields { flex: 1; min-width: 0; }
.m-prog-strip .m-in { height: auto; padding: 3px 9px 5px; }

/* ── Parte por horario ─────────────────────────────────────────────────────
   Vertical: los quirófanos son columnas de ancho fijo y se pasa de una a otra
   deslizando el dedo (no se aprietan tres para que no se lea ninguno); las
   horas bajan por el lado, fijas. Horizontal: como en escritorio, una fila por
   quirófano y las horas en el eje largo. */
.m-tl { flex: 1; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-card); }
.m-tlgrid { display: grid; grid-template-columns: 44px repeat(var(--ors, 3), 156px); grid-template-rows: auto var(--h, 600px); min-width: 100%; }
.m-tlhead { position: sticky; top: 0; z-index: 3; background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); border-left: 1px solid var(--border-color); padding: 6px 8px; display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.m-tlhead b { font-size: 0.74rem; font-weight: 800; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-tlhead i { margin-left: auto; font-style: normal; font-size: 0.66rem; font-weight: 800; color: var(--text-muted); }
.m-tlhead.corner { left: 0; z-index: 4; border-left: 0; }
.m-tlhead.off b { color: #ef4444; }
/* El borde superior transparente da aire arriba sin mover los bloques: para
   una capa absoluta el origen es la caja de relleno, que empieza tras él. */
.m-tlhours { position: sticky; left: 0; z-index: 2; background: var(--bg-card); border-right: 1px solid var(--border-color); border-top: 10px solid transparent; }
.m-tlhours i { position: absolute; left: 0; width: 44px; margin-top: -6px; font-style: normal; font-size: 0.62rem; font-weight: 800; color: var(--text-muted); text-align: center; }
.m-tlcol { position: relative; border-left: 1px solid var(--border-color); border-top: 10px solid transparent; background-image: repeating-linear-gradient(to bottom, var(--border-color) 0 1px, transparent 1px 69px); }
.m-tlcol.off { background-color: rgba(239, 68, 68, 0.06); }
.m-tlcol-off { position: absolute; top: 10px; left: 0; right: 0; text-align: center; font-size: 0.64rem; font-weight: 800; color: #ef4444; }
.m-tlblk { position: absolute; left: 4px; right: 4px; overflow: hidden; border-radius: 7px; border: 1px solid var(--border-color); border-left: 3px solid var(--tone, var(--accent-cyan)); background: color-mix(in srgb, var(--tone, var(--accent-cyan)) 14%, var(--bg-card)); padding: 3px 6px; cursor: pointer; }
.m-tlblk b { display: block; font-size: 0.66rem; font-weight: 800; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-tlblk span { display: block; font-size: 0.62rem; color: var(--text-secondary); line-height: 1.2; overflow: hidden; }
.m-tlblk i { display: block; font-style: normal; font-size: 0.6rem; font-weight: 700; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-tlblk.done { border-style: solid; opacity: 0.75; }
.m-tlblk.carry { cursor: default; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--tone) 12%, var(--bg-card)) 0 7px, var(--bg-card) 7px 14px); }
.m-tlblk-carry { display: block; font-style: normal; font-size: 0.56rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.m-tlh { flex: 1; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-card); }
.m-tlhgrid { display: flex; flex-direction: column; min-width: min-content; }
.m-tlhrow, .m-tlhruler { display: flex; align-items: stretch; border-bottom: 1px solid var(--border-color); }
.m-tlhrow { min-height: 62px; }
.m-tlhrow .rh, .m-tlhruler .rh { position: sticky; left: 0; z-index: 3; flex: none; width: 82px; display: flex; align-items: center; padding: 0 8px; font-size: 0.68rem; font-weight: 800; color: var(--text-secondary); background: var(--bg-secondary); border-right: 1px solid var(--border-color); }
.m-tlhruler { position: sticky; top: 0; z-index: 4; height: 22px; background: var(--bg-secondary); }
.m-tlhrow .trk, .m-tlhruler .trk { position: relative; flex: none; background-image: repeating-linear-gradient(to right, var(--border-color) 0 1px, transparent 1px 66px); }
.m-tlhrow .trk.off { background-color: rgba(239, 68, 68, 0.06); }
.m-tlhruler .trk { background: none; }
.m-tlhruler i { position: absolute; top: 4px; margin-left: 3px; text-align: left; font-style: normal; font-size: 0.6rem; font-weight: 800; color: var(--text-muted); }
.m-tlh .m-tlblk { left: auto; right: auto; top: 4px; bottom: 4px; }
.m-tlh .m-tlcol-off { top: 50%; margin-top: -8px; }
.m-tlnohora { flex: none; }

/* Horizontal: semana a todo el ancho; candidatos en panel desplegable encima. */
.m-parte-land { position: relative; display: flex; flex-direction: column; flex: 1; min-height: 0; }
.m-parte-land > .m-scroll { flex: 1; padding-bottom: 14px; overflow-x: auto; }
/* Los siete días no caben legibles en 844 px: cada uno se queda con su ancho
   y el fin de semana se ve deslizando el dedo, en vez de siete columnas
   enanas donde no se lee ni el nombre. */
.m-parte-land .m-wk { flex: 1 0 auto; min-width: max(100%, calc(76px + var(--days, 5) * 136px)); grid-template-columns: 76px repeat(var(--days, 5), minmax(132px, 1fr)); grid-auto-rows: minmax(58px, 1fr); grid-template-rows: auto; gap: 4px; }
.m-parte-land .m-wk .cl { min-height: 0; }
.m-parte-land .m-mc { font-size: 0.68rem; padding: 4px 6px; }
.m-cand-toggle { gap: 6px; }
.m-cand-toggle b { font-size: 0.66rem; font-weight: 800; background: color-mix(in srgb, var(--accent-cyan) 22%, transparent); color: var(--accent-cyan); border-radius: 999px; padding: 0 6px; }
.m-cand-toggle.on b { background: var(--accent-cyan); color: #fff; }
.m-cand-drawer { position: absolute; z-index: 6; top: 0; right: 0; bottom: 0; width: min(290px, 44%); box-shadow: -14px 0 30px rgba(0, 0, 0, 0.45); border-color: var(--border-highlight); animation: m-cand-in 0.18s ease both; }
.m-cand-drawer > h4 { display: flex; align-items: center; gap: 6px; }
.m-cand-drawer > h4 .m-ico { margin-left: auto; width: 30px; height: 30px; }
.m-cand-scrim { position: absolute; z-index: 5; inset: 0; background: rgba(2, 6, 23, 0.35); border-radius: var(--radius-md); }
@keyframes m-cand-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.m-parte-strip { position: absolute; z-index: 4; left: 80px; bottom: 10px; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 150px); padding: 6px 6px 6px 12px; border-radius: 999px; background: var(--bg-secondary); border: 1px solid var(--border-highlight); box-shadow: var(--shadow-glow), var(--shadow-lg); font-size: 0.74rem; color: var(--text-primary); white-space: nowrap; }
.m-parte-strip > .m-ic { width: 15px; height: 15px; color: var(--accent-cyan); flex: none; }
.m-parte-strip > span { overflow: hidden; text-overflow: ellipsis; }
.m-parte-strip .m-act { height: 28px; flex: none; padding: 0 12px; }
.m-parte-strip .m-ico { width: 28px; height: 28px; flex: none; }
.m-cand-col { display: flex; flex-direction: column; gap: 6px; min-height: 0; padding: 8px; }
.m-cand-col > h4 { margin: 0; }
.m-cand-col .m-scroll { padding-bottom: 60px; gap: 6px; }
.m-cand-col .m-card { padding: 6px 8px; cursor: pointer; }
/* Quirófano no disponible ese día (Configurar Quirófano → Solo ciertos días) */
.m-unavail { display: flex; align-items: center; justify-content: center; gap: 5px; color: #ef4444; font-weight: 800; }
.m-unavail .room-unavailable-x { width: 16px; height: 16px; }
.m-slot.ro.m-unavail { border-color: rgba(239, 68, 68, 0.45); background: repeating-linear-gradient(135deg, rgba(239, 68, 68, 0.13) 0 8px, rgba(239, 68, 68, 0.07) 8px 16px); }
.m-wk .cl.closed { border-color: rgba(239, 68, 68, 0.35); background: repeating-linear-gradient(135deg, rgba(239, 68, 68, 0.13) 0 8px, rgba(239, 68, 68, 0.07) 8px 16px); }
.m-wk .cl.target { border-color: var(--border-highlight); border-style: dashed; background: color-mix(in srgb, var(--accent-cyan) 8%, transparent); cursor: pointer; }
.m-ghost-slot { border: 1px dashed var(--border-highlight); border-radius: 6px; font-size: 0.6rem; font-weight: 800; color: var(--accent-cyan); text-align: center; padding: 3px 0; }
@media (orientation: landscape) and (max-height: 480px) and (max-width: 1000px) {
  .m-float-pill { display: none; }
  .m-bar .m-weeknav { flex: none; padding: 2px; }
  .m-bar .m-weeknav b { font-size: 0.72rem; }
}

/* ── Cuadrante ──────────────────────────────────────────────────────────── */
.m-mcal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; flex: none; }
.m-mcal .dow { font-size: 0.62rem; font-weight: 800; color: var(--text-muted); text-align: center; padding-bottom: 2px; }
.m-mcal .d { height: 48px; border-radius: 10px; background: var(--bg-input); border: 1px solid var(--border-color); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 5px 0 0; font-family: var(--font-sans); font-size: 0.74rem; font-weight: 700; color: var(--text-secondary); position: relative; cursor: pointer; }
.m-mcal .d.out { opacity: 0.3; }
.m-mcal .d.we { background: color-mix(in srgb, #f59e0b 9%, var(--bg-input)); }
.m-mcal .d.hol { background: color-mix(in srgb, #ef4444 13%, var(--bg-input)); }
.m-mcal .d.wk { border-color: color-mix(in srgb, var(--accent-cyan) 35%, var(--border-color)); }
.m-mcal .d.today { outline: 2px solid var(--accent-cyan); outline-offset: -2px; color: var(--text-primary); }
.m-mcal .d.pick { background: var(--accent-gradient); color: #fff; border-color: transparent; box-shadow: var(--shadow-glow); }
.m-mcal .d.pick .m-mk i { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85); }
.m-mcal.sm { gap: 3px; }
.m-mcal.sm .d { height: 30px; gap: 2px; padding-top: 3px; font-size: 0.6rem; border-radius: 7px; }
.m-mcal.sm .m-mk i { width: 10px; height: 2.5px; }
.m-mk { display: flex; flex-direction: column; gap: 2px; align-items: center; }
.m-mk i { display: block; width: 16px; height: 3px; border-radius: 2px; }
.m-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; flex: none; }
.m-legend span { display: inline-flex; align-items: center; gap: 5px; font-size: 0.66rem; font-weight: 700; color: var(--text-muted); }
.m-legend i { width: 12px; height: 4px; border-radius: 2px; display: block; }
.m-legend i.mine { outline: 2px solid var(--accent-cyan); outline-offset: 1px; height: 6px; background: transparent; }
.m-monthbar { display: flex; align-items: center; gap: 7px; width: 100%; border: 0; background: none; padding: 2px; font-family: var(--font-sans); font-size: 0.84rem; font-weight: 700; color: var(--text-primary); cursor: pointer; flex: none; text-transform: capitalize; }
.m-monthbar .m-ic { width: 16px; height: 16px; color: var(--text-muted); }
.m-monthbar .m-ic:first-child { color: var(--accent-cyan); }
.m-monthbar i { margin-left: auto; width: 38px; height: 5px; border-radius: 999px; background: var(--border-color); }
.m-wkstrip { display: flex; gap: 3px; flex: none; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 13px; padding: 5px 3px; }
.m-wkstrip .d { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 3px 0 5px; border-radius: 9px; border: 0; background: none; font-family: var(--font-sans); cursor: pointer; min-width: 0; }
.m-wkstrip .d span { font-size: 0.58rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; }
.m-wkstrip .d b { font-size: 0.92rem; font-weight: 800; line-height: 1; color: var(--text-primary); }
.m-wkstrip .d .m-mk { flex-direction: row; min-height: 3px; }
.m-wkstrip .d .m-mk i { width: 7px; }
.m-wkstrip .d.pick { background: var(--accent-gradient); }
.m-wkstrip .d.pick b, .m-wkstrip .d.pick span { color: #fff; }
.m-wkstrip .d.pick .m-mk i { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85); }
.m-wkstrip .d.hol b { color: #f87171; }
.m-wkstrip .nav { flex: 0 0 22px; border: 0; background: none; color: var(--text-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.m-wkstrip .nav .m-ic { width: 15px; height: 15px; }
.m-agenda-day { font-size: 0.74rem; font-weight: 800; color: var(--text-secondary); padding: 8px 2px 0; display: flex; align-items: center; gap: 6px; text-transform: capitalize; }
.m-agenda-day.pick { color: var(--accent-cyan); }
.m-agenda-day.pick::after { content: ''; flex: 1; height: 1px; background: var(--border-highlight); }
.m-agenda-empty { border-style: dashed; background: none; color: var(--text-muted); font-size: 0.78rem; font-weight: 700; text-align: center; padding: 10px; }
.m-weeknav.sm { padding: 2px; }
.m-weeknav.sm b { font-size: 0.72rem; }
.m-weeknav b { text-transform: capitalize; }
.m-locrow { display: flex; align-items: flex-start; gap: 8px; padding: 9px 10px; border: 1px solid var(--border-color); border-left: 3px solid var(--tone, var(--accent-cyan)); border-radius: var(--radius-md); background: var(--bg-card); }
.m-locrow.warn { border-color: rgba(245, 158, 11, 0.5); }
.m-locrow .lh { flex: 0 0 96px; font-size: 0.8rem; font-weight: 700; color: var(--text-primary); line-height: 1.25; padding-top: 2px; }
.m-locrow .lh small { display: block; font-size: 0.64rem; font-weight: 600; color: var(--text-muted); }
.m-locrow .ppl { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.m-muted { font-size: 0.74rem; color: var(--text-muted); padding-top: 3px; }
.m-loc-chip { display: inline-flex; align-items: center; font-size: 0.7rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--tone) 45%, transparent); background: color-mix(in srgb, var(--tone) 16%, transparent); color: var(--text-primary); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.m-loc-chip.xs { font-size: 0.58rem; padding: 1px 6px; }
.m-unplaced { display: flex; align-items: center; gap: 9px; border: 1px solid rgba(245, 158, 11, 0.45); background: rgba(245, 158, 11, 0.12); border-radius: 12px; padding: 9px 11px; }
.m-unplaced > .m-ic { color: #f59e0b; }
.m-unplaced b { display: block; font-size: 0.82rem; color: var(--text-primary); }
.m-unplaced span { display: block; font-size: 0.72rem; color: var(--text-muted); }
.m-gini { min-width: 22px; height: 16px; padding: 0 3px; border-radius: 5px; background: color-mix(in srgb, var(--c) 35%, transparent); color: var(--text-primary); font-size: 0.56rem; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.m-gini.empty { background: none; }
.m-gini.mine { outline: 2px solid var(--accent-cyan); outline-offset: 1px; }
.m-gini.aus { border-radius: 999px; min-width: 18px; }
.m-guard-land { display: grid; grid-template-columns: 1fr 230px; gap: 10px; flex: 1; min-height: 0; }
.m-guard-month { display: flex; flex-direction: column; gap: 6px; min-height: 0; overflow-y: auto; padding-bottom: 50px; }
.m-guard-month .m-mcal .d { height: 34px; flex-direction: row; justify-content: center; gap: 5px; padding: 0; }
.m-guard-side { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; padding-bottom: 60px; }
.m-guard-item { width: 100%; text-align: left; font-family: var(--font-sans); cursor: pointer; }
.m-personal-land { display: grid; grid-template-columns: 196px 18px 1fr; gap: 0 6px; flex: 1; min-height: 0; }
.m-personal-month { display: flex; flex-direction: column; gap: 5px; min-height: 0; overflow-y: auto; }
.m-hours { display: flex; flex-direction: column; justify-content: space-between; padding: 20px 0 4px; font-size: 0.56rem; font-weight: 700; color: var(--text-muted); text-align: right; }
.m-wk7 { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; min-height: 0; }
.m-wk7col { display: flex; flex-direction: column; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 9px; padding: 3px; min-height: 0; overflow: hidden; }
.m-wk7col .hd { font-size: 0.58rem; font-weight: 800; text-transform: uppercase; color: var(--text-muted); text-align: center; padding: 1px 0 3px; }
.m-wk7col.pick { border-color: var(--border-highlight); background: color-mix(in srgb, var(--accent-cyan) 9%, var(--bg-input)); }
.m-wk7col.pick .hd { color: var(--accent-cyan); }
.m-wk7col.hol { background: color-mix(in srgb, #ef4444 10%, var(--bg-input)); }
.m-wk7col .body { position: relative; flex: 1; background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(28.57% - 1px), var(--border-color) calc(28.57% - 1px), var(--border-color) 28.57%); }
.m-wk7col .m-mc { position: absolute; left: 1px; right: 1px; background: color-mix(in srgb, var(--tone) 22%, var(--bg-card)); overflow: hidden; }
.m-wk7col .m-mc b { white-space: normal; font-size: 0.56rem; }
.m-mc.dashed { background: none; border: 1px dashed var(--border-color); border-left: 2px dashed var(--tone); }
.m-tl-axis, .m-tl-row { display: grid; grid-template-columns: 90px 1fr; gap: 6px; align-items: center; }
.m-tl-axis .ticks { position: relative; height: 16px; }
.m-tl-axis .ticks span { position: absolute; transform: translateX(-50%); font-size: 0.58rem; font-weight: 700; color: var(--text-muted); }
.m-tl-row .nm { font-size: 0.72rem; font-weight: 700; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-tl-row .band { position: relative; height: 26px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 7px; overflow: hidden; }
.m-tl-row .blk { position: absolute; top: 3px; bottom: 3px; border-radius: 5px; background: color-mix(in srgb, var(--tone) 32%, var(--bg-card)); border-left: 3px solid var(--tone); font-size: 0.56rem; font-weight: 700; color: var(--text-primary); padding: 0 4px; display: flex; align-items: center; white-space: nowrap; overflow: hidden; }
.m-wk .cl .m-av.xs { max-width: 100%; }
.m-swap-host { flex: 1; min-height: 0; overflow-y: auto; }
.m-swap-host .gd-swap-wrap { position: static; }
.m-swap-host .gd-swap-btn, .m-swap-host .gd-swap-backdrop { display: none !important; }
.m-swap-host .gd-swap { position: static !important; transform: none !important; width: 100% !important; max-width: none !important; max-height: none !important; box-shadow: none; }

/* ── Histórico & Stats ──────────────────────────────────────────────────── */
.m-epi { display: flex; height: 28px; border-radius: 8px; overflow: hidden; gap: 2px; flex: none; }
.m-epi > div { background: var(--c); display: flex; align-items: center; justify-content: center; font-size: 0.62rem; font-weight: 800; color: #0f172a; white-space: nowrap; overflow: hidden; min-width: 6px; }
.m-epi-lbl { display: flex; justify-content: space-between; gap: 6px; font-size: 0.6rem; font-weight: 700; color: var(--text-muted); flex: none; }
.m-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; flex: none; }
.m-kpis.row { grid-template-columns: repeat(4, 1fr); }
.m-kpi { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 9px 11px; min-width: 0; }
.m-kpi span { display: block; font-size: 0.62rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-kpi b { display: block; font-family: var(--font-heading); font-size: 1.35rem; font-weight: 800; line-height: 1.25; color: var(--text-primary); }
.m-kpi i { font-style: normal; font-size: 0.66rem; font-weight: 600; color: var(--text-muted); }
.m-bars { display: flex; align-items: flex-end; gap: 4px; height: 110px; padding-top: 14px; }
.m-bars button { flex: 1; min-width: 0; border: 0; border-radius: 5px 5px 2px 2px; background: var(--accent-gradient); opacity: 0.8; position: relative; cursor: pointer; padding: 0; }
.m-bars button.on { opacity: 1; box-shadow: 0 0 0 2px var(--accent-cyan); }
.m-bars button em { position: absolute; top: -14px; left: 0; right: 0; text-align: center; font-style: normal; font-size: 0.56rem; font-weight: 800; color: var(--text-muted); }
.m-bars-lbl { display: flex; gap: 4px; margin-top: 4px; }
.m-bars-lbl span { flex: 1; min-width: 0; text-align: center; font-size: 0.54rem; font-weight: 700; color: var(--text-muted); overflow: hidden; }
.m-hbar { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.m-hbar > div { display: flex; gap: 8px; font-size: 0.76rem; }
.m-hbar span { flex: 1; min-width: 0; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-hbar b { color: var(--text-primary); font-weight: 800; }
.m-hbar i { display: block; height: 5px; border-radius: 3px; background: var(--accent-gradient); }
.m-panel > h4 .m-link { margin-left: auto; font-size: 0.7rem; }
@media (orientation: landscape) and (max-height: 480px) and (max-width: 1000px) {
  .m-kpi { padding: 6px 9px; }
  .m-kpi b { font-size: 1.05rem; }
  .m-bars { height: 120px; }
  .m-root[data-m-tab="historico"] .m-cols2 > * { overflow: visible; }
}

/* ── Inicio ─────────────────────────────────────────────────────────────── */
.m-today-chips { gap: 7px; }
/* El chip dice dónde estás hoy: en una sola línea («Quirófano 1 · 08:00 · 3
   casos») se salía de la pantalla, así que el texto baja a dos renglones y se
   recorta si aun así no cabe. */
.m-today-chip { flex: 0 1 auto; max-width: 78%; display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 9px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--tone) 35%, transparent); background: color-mix(in srgb, var(--tone) 14%, transparent); color: var(--text-primary); font-family: var(--font-sans); cursor: pointer; text-align: left; }
.m-today-chip .m-ic { width: 16px; height: 16px; flex: none; color: var(--tone); }
.m-today-chip > span { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.m-today-chip b { font-size: 0.75rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-today-chip small { font-size: 0.64rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* «Hoy en el servicio» y «Lo tuyo» */
.m-tel { flex: none; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 999px; color: var(--accent-cyan); background: color-mix(in srgb, var(--accent-cyan) 12%, transparent); }
.m-tel .m-ic { width: 15px; height: 15px; }
.m-team-row.out { opacity: 0.7; }
button.m-nx { width: 100%; border: 0; border-top: 1px solid var(--border-color); background: none; cursor: pointer; font-family: var(--font-sans); text-align: left; }
.m-panel .m-adm-sub { padding: 9px 2px 1px; }
.m-nx { display: flex; align-items: center; gap: 9px; padding: 8px 2px; border-top: 1px solid var(--border-color); }
.m-panel > h4 + .m-nx { border-top: 0; }
.m-nx-ic { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: none; color: var(--tone); background: color-mix(in srgb, var(--tone) 15%, transparent); }
.m-nx-ic .m-ic { width: 16px; height: 16px; }
.m-nx-tx { flex: 1; min-width: 0; display: block; background: none; border: 0; padding: 0; text-align: left; font-family: var(--font-sans); cursor: pointer; color: inherit; }
.m-nx-tx b { display: block; font-size: 0.82rem; font-weight: 700; color: var(--text-primary); line-height: 1.3; }
.m-nx-tx span { display: block; font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-nx-act { flex: none; font-family: var(--font-sans); font-size: 0.72rem; font-weight: 700; color: var(--accent-cyan); border: 1px solid var(--border-highlight); background: transparent; border-radius: 999px; padding: 5px 11px; cursor: pointer; }
.m-nx-x { flex: none; width: 28px; height: 28px; border: 0; background: none; color: var(--text-muted); display: flex; align-items: center; justify-content: center; border-radius: 8px; cursor: pointer; }
.m-nx-x .m-ic { width: 14px; height: 14px; }
.m-nx.child { padding-left: 41px; }
.m-avatar.sm { width: 34px; height: 34px; font-size: 0.72rem; }
.m-ho-top { display: flex; align-items: center; gap: 9px; }
.m-ho-top b { display: block; font-size: 0.86rem; color: var(--text-primary); }
.m-ho-top small { display: block; font-size: 0.7rem; color: var(--text-muted); }
.m-ho-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.m-ho-metrics div { background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 9px; padding: 6px 4px; text-align: center; }
.m-ho-metrics div.alert { border-color: rgba(239, 68, 68, 0.5); }
.m-ho-metrics b { display: block; font-family: var(--font-heading); font-size: 1.05rem; color: var(--text-primary); }
.m-ho-metrics small { display: block; font-size: 0.6rem; color: var(--text-muted); }
.m-ho-quiet { margin: 0; font-size: 0.76rem; color: var(--text-secondary); line-height: 1.4; }
.m-ho-lines { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.m-ho-lines span { font-size: 0.74rem; color: var(--text-secondary); padding-left: 10px; border-left: 2px solid #10b981; line-height: 1.4; }
.m-ho-lines span.warn { border-left-color: #f59e0b; }
.m-ho-lines span.danger { border-left-color: #ef4444; }
.m-team-row { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; border-top: 1px solid var(--border-color); }
.m-panel > h4 + .m-team-row { border-top: 0; }
.m-team-row .lh { flex: 0 0 96px; font-size: 0.76rem; font-weight: 700; color: var(--tone); padding-top: 2px; }
/* «Hoy en el servicio»: una cabecera por colectivo de guardia. */
.m-oc-grupo { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gc); }
.m-oc-grupo svg { width: 13px; height: 13px; flex: none; }
.m-oc-grupo + .m-team-row { border-top: 0; }
.m-team-row .ppl { flex: 1; display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.m-team-row .ppl > small { flex-basis: 100%; font-size: 0.7rem; color: var(--text-muted); }
.m-panel > h4 > .m-link { margin-left: auto; }
.m-dayband { position: relative; height: 46px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 11px; flex: none; overflow: hidden; }
.m-dayband .hr { position: absolute; top: 0; bottom: 0; border-left: 1px dashed var(--border-color); font-size: 0.56rem; font-weight: 700; color: var(--text-muted); padding: 2px 0 0 3px; }
.m-dayband .blk { position: absolute; top: 15px; height: 25px; border-radius: 7px; background: color-mix(in srgb, var(--tone) 30%, var(--bg-card)); border-left: 3px solid var(--tone); font-size: 0.66rem; font-weight: 700; color: var(--text-primary); padding: 0 7px; display: flex; align-items: center; white-space: nowrap; overflow: hidden; }
.m-dayband .now { position: absolute; top: 0; bottom: 0; width: 2px; background: #ef4444; }
.m-dayband-empty { position: absolute; left: 0; right: 0; top: 17px; text-align: center; font-size: 0.7rem; color: var(--text-muted); }
.m-cols3 { display: grid; grid-template-columns: 1.15fr 1fr 0.95fr; gap: 9px; flex: 1; min-height: 0; }
.m-cols3 > div { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-bottom: 60px; }
.m-cols3 > div > * { flex: none; }

/* ── Censo en horizontal (tablero) ──────────────────────────────────────── */
.m-board { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(150px, 1fr)); gap: 7px; flex: 1; min-height: 0; overflow-x: auto; }
/* Separa las vistas del Censo de los centros (Red y centros) en la barra horizontal. */
.m-chips-sep { width: 1px; align-self: stretch; margin: 4px 2px; background: var(--border-color); flex: none; }
.m-bcol { display: flex; flex-direction: column; gap: 6px; min-height: 0; min-width: 0; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 12px; padding: 6px; }
.m-bcol h6 { margin: 0; display: flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-size: 0.74rem; font-weight: 800; color: var(--text-primary); padding: 2px 3px; }
.m-bcol h6 i { width: 9px; height: 9px; border-radius: 50%; display: block; flex: none; }
.m-bcol h6 small { margin-left: auto; font-size: 0.68rem; color: var(--text-muted); }
.m-bcol.target { border: 2px dashed var(--border-highlight); background: color-mix(in srgb, var(--accent-cyan) 9%, var(--bg-input)); cursor: pointer; }
.m-bcol-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; padding-bottom: 56px; }
.m-bcol-list > * { flex: none; }
.m-bempty { text-align: center; padding: 12px 0; }
.m-board-card { padding: 6px 8px; cursor: pointer; }
.m-board-card .nm { font-size: 0.76rem; }
.m-board-card .dg { font-size: 0.66rem; }
.m-board-card .ag, .m-board-card .lc { font-size: 0.62rem; }
.m-board-card .m-act { height: 28px; font-size: 0.64rem; }
.m-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-items: start; }

/* ── Administración ─────────────────────────────────────────────────────── */
.m-admin .m-search { flex: none; }
.m-adm-list { padding: 0; overflow: hidden; }
.m-adm-row { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-top: 1px solid var(--border-color); min-width: 0; cursor: pointer; }
.m-adm-row:first-child { border-top: 0; }
.m-adm-row.static { cursor: default; }
.m-adm-row.sel { background: color-mix(in srgb, var(--accent-cyan) 12%, transparent); }
.m-adm-rt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.m-adm-rt b { font-size: 0.86rem; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-adm-rt b em { font-style: normal; font-size: 0.62rem; font-weight: 800; color: var(--accent-cyan); margin-left: 3px; }
.m-adm-rt > span { font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-adm-si { width: 32px; height: 32px; border-radius: 9px; flex: none; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent-cyan) 14%, transparent); color: var(--accent-cyan); }
.m-adm-si .m-ic { width: 17px; height: 17px; }
.m-adm-chev { display: flex; color: var(--text-muted); flex: none; }
.m-adm-chev .m-ic { width: 16px; height: 16px; }
.m-adm-av { --s: 32px; width: var(--s); height: var(--s); border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--c) 22%, transparent); color: var(--c); font-family: var(--font-heading); font-weight: 800; font-size: calc(var(--s) * 0.36); }
.m-adm-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--c); flex: none; }
.m-adm-dot.big { width: 18px; height: 18px; }
.m-adm-count { display: inline-flex; align-items: center; gap: 3px; font-size: 0.72rem; font-weight: 800; color: var(--text-secondary); flex: none; }
.m-adm-count .m-ic { width: 12px; height: 12px; }
.m-adm-sub { display: flex; align-items: baseline; gap: 6px; font-size: 0.64rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); padding: 8px 3px 0; }
.m-adm-sub > span { margin-left: auto; font-weight: 700; letter-spacing: 0; text-transform: none; }
.m-panel > .m-adm-sub { padding: 9px 11px 5px; }
.m-adm-row.off { opacity: 0.55; }
.m-adm-add { margin: 8px 9px 9px; }

/* Permisos de un rol: se dan y se quitan aquí mismo, y el pie dice cuántos
   cambios van y a cuánta gente afectan antes de guardarlos todos de una vez. */
.m-perm-list { display: flex; flex-direction: column; gap: 3px; }
.m-perm { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 8px; border: 0; background: none; border-radius: 9px; text-align: left; font-family: var(--font-sans); cursor: pointer; }
.m-perm-box { flex: none; width: 21px; height: 21px; border-radius: 7px; border: 1px solid var(--border-color); background: var(--bg-input); display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
.m-perm-box .m-ic { width: 13px; height: 13px; }
.m-perm.on .m-perm-box { background: var(--accent-gradient); border-color: transparent; color: #fff; }
.m-perm-txt { flex: 1; min-width: 0; font-size: 0.78rem; font-weight: 600; color: var(--text-primary); }
.m-perm.on .m-perm-txt { font-weight: 700; }
.m-perm-txt i { display: inline-block; margin-left: 6px; font-style: normal; font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: #f59e0b; }
.m-perm.dirty { background: color-mix(in srgb, var(--accent-cyan) 10%, transparent); }
.m-perm-foot { position: sticky; bottom: 0; display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 9px 10px; border-radius: 12px; border: 1px solid var(--border-color); background: var(--bg-secondary); font-size: 0.72rem; color: var(--text-muted); }
.m-perm-foot.on { border-color: var(--border-highlight); color: var(--text-primary); }
.m-perm-foot > span { flex: 1; min-width: 0; }
.m-adm-qa { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.m-adm-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.m-adm-head .m-title { flex: 1; min-width: 0; }
.m-adm-head .m-adm-x { flex: none; margin-left: 2px; }
.m-adm-block { display: flex; flex-direction: column; gap: 6px; }
.m-panel.m-adm-block { padding: 10px 11px; }
.m-adm-block h5 { margin: 4px 0 0; display: flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); }
.m-panel.m-adm-block h5 { margin-top: 0; }
.m-adm-block h5 small { margin-left: auto; font-size: 0.66rem; color: var(--text-muted); }
.m-adm-block p { margin: 0; font-size: 0.8rem; color: var(--text-primary); line-height: 1.4; }
.m-adm-btns { display: flex; gap: 7px; }
.m-btn.ghost.danger { color: #ef4444; border-color: rgba(239, 68, 68, 0.45); flex: 1; }
.m-chip.danger { background: #ef4444; border-color: #ef4444; color: #fff; }
.m-chip:disabled { opacity: 0.55; }
.m-adm-confirm { display: inline-flex; align-items: center; gap: 5px; flex: none; font-size: 0.72rem; font-weight: 700; color: var(--text-primary); }
.m-adm-confirm .m-chip { padding: 4px 10px; }
.m-adm-confirm.wide { display: flex; flex-wrap: wrap; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 11px; padding: 8px 10px; }
.m-adm-confirm.wide > span { flex: 1 1 100%; font-size: 0.78rem; }
.m-adm-confirm.wide .m-chip { flex: 1; justify-content: center; }
.m-adm-row .m-chip { padding: 4px 10px; font-size: 0.7rem; }
.m-adm-row .m-chip .m-ic { width: 12px; height: 12px; }
.m-adm-note { font-size: 0.76rem !important; font-weight: 600; }
.m-adm-note.ok { color: #10b981 !important; }
.m-adm-note.error { color: #ef4444 !important; }
.m-adm-qr { display: flex; flex-direction: column; align-items: center; gap: 7px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 12px; padding: 12px; text-align: center; }
.m-adm-qr-code { width: 190px; max-width: 100%; background: #fff; border-radius: 10px; padding: 8px; }
.m-adm-qr-code svg { display: block; width: 100%; height: auto; }
.m-adm-qr p { font-size: 0.74rem !important; color: var(--text-secondary) !important; }
.m-adm-qr code { display: block; max-width: 100%; font-size: 0.64rem; color: var(--text-muted); word-break: break-all; }
.m-adm-qr .m-btn { width: 100%; flex: none; min-height: 38px; }
.m-adm-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.m-adm-kpi { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 11px; padding: 7px 9px; min-width: 0; }
.m-adm-kpi span { display: block; font-size: 0.56rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-adm-kpi b { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 800; color: var(--text-primary); }
.m-adm-perms { display: flex; flex-direction: column; gap: 3px; }
.m-adm-perms span { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--text-primary); }
.m-adm-perms .m-ic { width: 13px; height: 13px; color: #10b981; flex: none; }
.m-adm-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 0; border-top: 1px solid var(--border-color); font-size: 0.8rem; color: var(--text-primary); min-width: 0; }
.m-adm-block h5 + .m-adm-line { border-top: 0; }
.m-adm-line > span:not(.m-tag) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.m-adm-line > span.txt { display: block; }
.m-adm-line small { font-size: 0.68rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-adm-line > small { flex: none; }
.m-adm-festrow { display: grid; grid-template-columns: 26px 34px 1fr auto; align-items: baseline; gap: 6px; padding: 4px 0; border-top: 1px solid var(--border-color); }
.m-adm-block h5 + .m-adm-festrow { border-top: 0; }
.m-adm-festrow b { font-family: var(--font-heading); font-size: 1rem; font-weight: 800; color: var(--text-primary); text-align: right; }
.m-adm-festrow span { font-size: 0.68rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; }
.m-adm-festrow em { font-style: normal; font-size: 0.8rem; color: var(--text-primary); min-width: 0; }
.m-adm-festrow small { font-size: 0.62rem; color: var(--text-muted); }
.m-adm-festrow.past { opacity: 0.5; }
/* La ficha de un rol lista todos sus permisos y no cabe en la hoja: sin
   esto el final quedaba fuera, sin forma de llegar hasta él. */
.m-adm-sheet .m-sheet-body { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; overscroll-behavior: contain; }
.m-adm-land { display: grid; grid-template-columns: 196px 1fr; gap: 10px; flex: 1; min-height: 0; }
.m-adm-side { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.m-adm-main { display: flex; flex-direction: column; gap: 7px; min-height: 0; min-width: 0; }
.m-adm-main .m-bar .m-search { max-width: 250px; }
.m-adm-md { grid-template-columns: 1fr minmax(250px, 44%); }
.m-adm-md.solo { grid-template-columns: 1fr; }
.m-adm-md .m-md-list > .m-panel { flex: none; }
.m-adm-md .m-det { gap: 10px; padding-bottom: 20px; }
.m-adm-md .m-adm-qr-code { width: 150px; }
.m-adm-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 8px; }
.m-adm-cols > .m-empty, .m-adm-cols > .m-note, .m-adm-cols > .m-adm-kpis, .m-adm-cols > .m-adm-list { grid-column: 1 / -1; }
.m-adm-cols > .m-adm-fest { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: start; }
.m-adm-fest { display: flex; flex-direction: column; gap: 8px; }
.m-adm-side .m-title, .m-adm-head .m-title { flex-direction: column !important; align-items: stretch !important; gap: 0 !important; }
.m-adm-head .m-title b { white-space: normal; }
.m-adm-md .m-facts { --cols: 2; }
.m-adm-md:not(.solo) .m-adm-row .m-adm-rt > span { display: none; }
.m-adm-side .m-title b { font-size: 0.86rem; }
.m-adm-form { display: flex; flex-direction: column; gap: 8px; }
.m-adm-roles { display: flex; flex-wrap: wrap; gap: 6px; }
.m-adm-roles .m-chip { gap: 6px; }
.m-adm-roles .m-adm-dot { width: 9px; height: 9px; }
.m-adm-form .m-note { align-self: flex-start; }
.m-adm-md .m-adm-form .m-g2 { grid-template-columns: 1fr; }

/* ── Nuevo paciente (m-ingreso.js) ──────────────────────────────────────── */
/* Quién es el paciente, una vez resuelto, deja de ocupar pantalla: se queda
   arriba fijo con las alergias y el estado a la vista, y el resto desplaza. */
/* Los resultados de la búsqueda son botones: sin esto el navegador centra su
   contenido y la tarjeta deja de leerse como las demás. */
.m-ingreso .m-scroll > button.m-card:not(.m-ing-nuevo) { display: block; width: 100%; text-align: left; font-family: var(--font-sans); cursor: pointer; }
.m-ingreso .m-ing-quien { display: flex; align-items: center; gap: 9px; flex: none; padding-bottom: 8px; border-bottom: 1px solid var(--border-color); }
.m-ingreso .m-ing-quien .m-av { padding: 2px; }
.m-ingreso .m-ing-quien-tx { flex: 1; min-width: 0; }
.m-ingreso .m-ing-quien-tx b { display: block; font-family: var(--font-heading); font-size: 0.92rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-ingreso .m-ing-quien-tx span { display: block; font-size: 0.72rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* «No está: crear paciente nuevo» y «Añadir otra cirugía»: una tarjeta que no
   es un paciente, sino una salida. Se distingue con el borde discontinuo. */
.m-ingreso .m-ing-nuevo { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; border: 1px dashed var(--border-highlight); border-left-width: 1px; background: none; color: var(--accent-cyan); font-family: var(--font-sans); font-size: 0.82rem; font-weight: 800; cursor: pointer; }
.m-ingreso .m-ing-nuevo .m-ic { width: 15px; height: 15px; }
/* El bloque del dispositivo lleva el color de marcapasos, como en la cola. */
.m-ingreso .m-ing-dev { border-left: 3px solid var(--cola-mp, #f59e0b); padding-left: 7px; border-radius: 3px; }
.m-ingreso .m-ing-resumen { flex: none; margin-top: 6px; border-style: solid; border-color: color-mix(in srgb, var(--accent-cyan) 35%, transparent); background: color-mix(in srgb, var(--accent-cyan) 12%, transparent); color: var(--text-primary); border-radius: 10px; }
.m-ingreso .m-ing-resumen .m-ic { color: var(--accent-cyan); }
.m-ingreso .m-panel > h4 .cnt { font-size: 0.6rem; }

/* ── Teclado abierto (html.m-kb, m-core.js) ─────────────────────────────── */
/* La pantalla u hoja ocupa sólo el hueco visible sobre el teclado y se
   desplaza entera; nada se aplasta y el pie con el botón de guardar queda
   pegado abajo. Fuera se ocultan la barra inferior y los botones flotantes. */
html.m-kb .nav-tabs, html.m-kb .busca-fab-wrap, html.m-kb .m-float-pill { visibility: hidden; }
html.m-kb .m-screen { top: var(--m-vvt, 0px); bottom: auto; height: var(--m-vvh, 100dvh); overflow-y: auto; overscroll-behavior: contain; padding-top: 6px; }
html.m-kb .m-sheet-wrap .m-sheet { top: var(--m-vvt, 0px); bottom: auto; height: var(--m-vvh, 100dvh) !important; max-height: none; border-radius: 0; overflow-y: auto; overscroll-behavior: contain; padding-top: 8px; }
html.m-kb .m-sheet-grab { display: none; }
html.m-kb .m-screen > *, html.m-kb .m-sheet-body, html.m-kb .m-sheet-body > *,
html.m-kb .m-screen .m-scroll, html.m-kb .m-sheet .m-scroll,
html.m-kb .m-screen .m-md, html.m-kb .m-screen .m-md > *, html.m-kb .m-screen .m-cols2 > * { flex: none !important; min-height: auto !important; max-height: none !important; overflow: visible !important; }
html.m-kb .m-screen .m-scroll, html.m-kb .m-sheet .m-scroll { padding-bottom: 8px; }
html.m-kb .m-screen .m-foot { position: sticky; bottom: -8px; z-index: 3; background: var(--bg-primary); padding-bottom: 8px; margin-top: auto; }
html.m-kb .m-sheet .m-foot { position: sticky; bottom: -12px; z-index: 3; background: var(--bg-secondary); padding-bottom: 12px; }
/* Horizontal: con el teclado sólo queda a la vista la columna donde se escribe. */
html.m-kb .m-screen .m-md:has(.m-det:focus-within) { grid-template-columns: 1fr; }
html.m-kb .m-screen .m-md:has(.m-det:focus-within) > .m-md-list { display: none; }
html.m-kb .m-screen .m-md:has(.m-md-list:focus-within) { grid-template-columns: 1fr; }
html.m-kb .m-screen .m-md:has(.m-md-list:focus-within) > .m-det { display: none; }
/* Barra con Cancelar/Guardar siempre visible arriba mientras se escribe. */
html.m-kb .m-screen > .m-ses-editbar { position: sticky; top: -6px; z-index: 4; background: var(--bg-primary); padding: 6px 0 4px; margin-top: -6px; }
@media (orientation: landscape) and (max-height: 480px) and (max-width: 1000px) {
  html.m-kb .m-screen .m-title small { display: none; }
  html.m-kb .m-screen .m-sec { padding-top: 2px; }
}

/* ==========================================================================
   LA COLA GENERAL: RESUMEN Y FILTRO
   --------------------------------------------------------------------------
   La misma cabecera que en escritorio (cuántos hay, cuántos aprietan, cuántos
   tienen fecha, cuántos se han pasado de plazo y la mediana) y la hoja del
   filtro de tipos y categorías.
   ========================================================================== */
.m-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 7px 10px; margin-bottom: 2px; border: 1px solid var(--border-color); border-radius: 11px; background: var(--bg-secondary); font-size: 0.72rem; font-weight: 600; color: var(--text-muted); }
.m-sum span { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.m-sum b { font-family: var(--font-heading); font-size: 0.86rem; font-weight: 800; color: var(--text-primary); }
.m-sum .warn, .m-sum .warn b { color: #ef4444; }
/* La cabecera de una cola propia traída a la general, con su color. */
.m-sec.tone { color: var(--c, var(--text-muted)); }
.m-sec.tone::after { background: color-mix(in srgb, var(--c, var(--border-color)) 40%, transparent); }
.m-fil { display: flex; flex-direction: column; gap: 6px; }
.m-fil .m-sec { padding-top: 2px; }
.m-fil .m-chip .m-dot { margin-right: 1px; }
.m-fil .m-perm { border: 1px solid var(--border-color); background: var(--bg-input); }
.m-fil .m-perm.on { border-color: var(--border-highlight); }
.m-fil .m-perm-txt i { font-style: normal; color: var(--text-muted); letter-spacing: 0; }

/* ==========================================================================
   PANEL DE ADMINISTRACIÓN: EL PANEL ENTERO EN EL TELÉFONO
   --------------------------------------------------------------------------
   Las trece secciones de escritorio, con sus pestañas. Lo que allí son tablas
   de seis columnas aquí son filas de dos renglones, tarjetas y píldoras.
   ========================================================================== */
/* Un aviso de los que esperan una decisión (Inicio y Sesiones). */
.m-adm-live { display: flex; flex-direction: column; gap: 6px; margin-bottom: 7px; }
.m-adm-live .r1 { display: flex; align-items: center; gap: 8px; }
.m-adm-live .m-adm-si { width: 28px; height: 28px; border-radius: 8px; background: color-mix(in srgb, var(--tone) 16%, transparent); color: var(--tone); }
.m-adm-live .m-adm-si .m-ic { width: 15px; height: 15px; }
.m-adm-live .nm { font-family: var(--font-heading); font-size: 0.86rem; font-weight: 800; color: var(--text-primary); }
.m-adm-live p { margin: 0; font-size: 0.75rem; line-height: 1.45; color: var(--text-secondary); }
.m-adm-live .m-acts { margin-top: 2px; }

/* Cifra que lleva a su pantalla. */
.m-adm-kpi.go { cursor: pointer; border-color: var(--border-highlight); }

/* Fila de dos renglones: arriba quién, abajo cuándo y su botón. */
.m-adm-row.col { flex-direction: column; align-items: stretch; gap: 5px; cursor: default; }
.m-adm-row.col .m-adm-rowtop { display: flex; align-items: center; gap: 9px; min-width: 0; }
.m-adm-row.col .m-adm-rowsub { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.m-adm-row.col .m-adm-rowsub small { flex: 1; min-width: 0; font-size: 0.7rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; }
.m-adm-row.col .m-adm-rowsub small.bad { color: #ef4444; }
.m-adm-row.col .m-chip { flex: none; padding: 4px 10px; font-size: 0.7rem; }
.m-adm-row.bad { border-left: 3px solid #ef4444; }

/* El número que aprieta, en la lista de secciones y en la columna. */
.m-adm-badge { flex: none; min-width: 19px; text-align: center; font-size: 0.66rem; font-weight: 800; padding: 1px 6px; border-radius: 999px; background: #ef4444; color: #fff; }
.m-ctab-group { display: block; font-size: 0.58rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); padding: 9px 9px 3px; }

/* Paginador de la auditoría y de las sesiones. */
.m-adm-pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 2px 2px; font-size: 0.72rem; color: var(--text-muted); }
.m-adm-pager .m-chip { padding: 5px 10px; }
.m-adm-pager span { font-weight: 700; }

/* Píldora con un desplegable dentro (persona, módulo). */
.m-chip-sel { position: relative; gap: 4px; }
.m-chip-sel select { border: 0; background: none; color: inherit; font-family: var(--font-sans); font-size: 0.74rem; font-weight: 700; max-width: 140px; }

/* Tarjetas del cuadrante: color, código y a cuánta gente afectan. */
.m-adm-set { display: flex; flex-direction: column; gap: 5px; }
.m-adm-set.off { opacity: 0.6; }
.m-adm-set .r1 { display: flex; align-items: center; gap: 8px; }
.m-adm-set .r1 .nm { flex: 1; min-width: 0; font-family: var(--font-heading); font-size: 0.88rem; font-weight: 800; color: var(--text-primary); }
.m-adm-set .r2 { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.m-adm-set .r2 .dg { flex: 1; min-width: 0; font-size: 0.76rem; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; }
.m-adm-set .r2 .lc { font-size: 0.68rem; font-weight: 700; color: var(--text-muted); }
.m-adm-set .r3 { display: flex; flex-wrap: wrap; gap: 4px; }

/* Los tres canales de una notificación, en línea. */
.m-adm-chs { display: flex; gap: 4px; flex: none; }
.m-adm-chs .m-chip { padding: 3px 8px; font-size: 0.66rem; }
/* Un rol y sus tres canales, en dos renglones: en el teléfono no caben en uno. */
.m-adm-notif { display: flex; flex-direction: column; gap: 5px; padding: 8px 0; border-top: 1px solid var(--border-color); }
.m-adm-notif:first-of-type { border-top: 0; }
.m-adm-notif > b { font-size: 0.78rem; font-weight: 700; color: var(--text-primary); }

/* ── Asignar casa comercial (hoja del Parte) ─────────────────────────────────
   Crece con el contenido hasta el alto de la hoja; a partir de ahí solo se
   desplaza la parte central y el botón principal se queda abajo. Colores de
   los tokens del tema: el mismo aviso en amarillo fijo no se leía en claro. */
.m-vca-host { display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 0; }
.m-vca { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 8px; padding-bottom: 4px; }
.m-vca > * { flex: none; }
.m-vca-lbl { margin: 6px 0 0; font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); }
.m-vca-lbl span { text-transform: none; letter-spacing: 0; font-weight: 600; }
.m-vca-hint { margin: 0; font-size: 0.74rem; color: var(--text-muted); }
.m-vca-days { gap: 6px; }
.m-vca-day { flex: none; display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 68px; padding: 6px 8px; border-radius: 12px; border: 1px solid var(--border-color); background: var(--bg-input); color: var(--text-secondary); font-family: var(--font-sans); cursor: pointer; }
.m-vca-day span { font-size: 0.64rem; color: var(--text-muted); }
.m-vca-day b { font-family: var(--font-heading); font-size: 0.9rem; color: var(--text-primary); }
.m-vca-day i { font-style: normal; font-size: 0.6rem; font-weight: 800; }
.m-vca-day i.f-mp_dai { color: var(--status-info-text); }
.m-vca-day i.f-tavi { color: var(--status-stable-text); }
.m-vca-day i.f-tevar { color: var(--status-warning-text); }
.m-vca-day.on { background: var(--status-info-bg); border-color: var(--accent-cyan); box-shadow: 0 0 0 1px var(--accent-cyan) inset; }
.m-vca-last { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 10px; background: var(--bg-input); font-size: 0.74rem; color: var(--text-secondary); }
.m-vca-last .m-ic { width: 15px; height: 15px; }
.m-vca-last b { color: var(--text-primary); }
.m-vca-list { display: flex; flex-direction: column; border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; }
.m-vca-row { display: flex; align-items: center; gap: 9px; min-height: 48px; padding: 0 12px; border: 0; border-top: 1px solid var(--border-color); background: transparent; color: var(--text-primary); font-family: var(--font-sans); font-size: 0.86rem; text-align: left; cursor: pointer; }
.m-vca-row:first-child { border-top: 0; }
.m-vca-row.on { background: var(--status-info-bg); }
.m-vca-row .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.m-vca-row .nm { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-vca-row .nm em { font-style: normal; font-size: 0.6rem; font-weight: 800; padding: 1px 6px; margin-left: 4px; border-radius: 999px; border: 1px solid var(--border-color); color: var(--text-secondary); vertical-align: 1px; }
.m-vca-row .pc { flex: none; font-size: 0.7rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.m-vca-row .ok { width: 17px; height: 17px; color: var(--accent-cyan); }
.m-vca-warn { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 12px; background: var(--status-warning-bg); border: 1px solid var(--status-warning-border); font-size: 0.76rem; color: var(--text-primary); }
.m-vca-warn > b { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; color: var(--status-warning-text); }
.m-vca-warn > b .m-ic { width: 15px; height: 15px; }
.m-vca-warn .ln { display: flex; justify-content: space-between; gap: 8px; }
.m-vca-warn .ln i { font-style: normal; color: var(--text-secondary); white-space: nowrap; }
.m-vca-warn label { display: flex; align-items: center; gap: 8px; min-height: 36px; margin-top: 4px; font-weight: 700; }
.m-vca-warn input { width: 18px; height: 18px; accent-color: var(--status-warning-text); }
.m-vca-done { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; border-radius: 12px; background: var(--status-stable-bg); border: 1px solid var(--status-stable-border); color: var(--status-stable-text); }
.m-vca-done > .m-ic { margin-top: 1px; }
.m-vca-done b { display: block; font-size: 0.86rem; }
.m-vca-done span { display: block; font-size: 0.74rem; color: var(--text-secondary); }
.m-vca-done.quiet { background: transparent; border-color: var(--border-color); }
.m-vca-mail { display: flex; flex-direction: column; gap: 3px; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--border-color); font-size: 0.76rem; color: var(--text-secondary); }
.m-vca-mail > b { display: flex; align-items: center; gap: 7px; margin-bottom: 2px; font-size: 0.84rem; color: var(--text-primary); }
.m-vca-mail > b .m-ic { width: 16px; height: 16px; }
.m-vca-mail > span { overflow-wrap: anywhere; }
.m-vca-mail summary { margin-top: 4px; font-weight: 700; cursor: pointer; }
.m-vca-mail-body { margin-top: 6px; padding: 8px 10px; border-radius: 8px; background: var(--bg-input); line-height: 1.5; }
.m-vca-foot { flex-direction: column; gap: 6px; }
.m-vca-actions { display: flex; gap: 7px; }
.m-vca-err { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 0.74rem; color: var(--status-critical-text); }
.m-vca-err .m-ic { width: 15px; height: 15px; }
/* Parte: quién no está disponible ese día (Ausencias del Cuadrante) */
.m-unavail {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 10px; padding: 8px 10px;
  border-radius: 10px; border: 1px solid rgba(239, 68, 68, 0.35); background: rgba(239, 68, 68, 0.08);
  font-size: 12px; color: var(--text-primary);
}
.m-unavail b { width: 100%; font-size: 11px; color: #ef4444; text-transform: uppercase; letter-spacing: 0.04em; }
.m-unavail span { font-weight: 600; }
.m-unavail i { font-style: normal; font-weight: 500; color: var(--text-muted); }

/* Parte y Programar con varios centros (Red y centros): la cabecera de cada
   centro, el horario del quirófano junto a su nombre y la fila de centro de
   la semana en horizontal. */
.m-parte-center { display: flex; align-items: center; gap: 6px; margin: 10px 2px 2px; font-size: 0.72rem; font-weight: 800; color: var(--accent-cyan); }
.m-parte-center svg { width: 14px; height: 14px; }
.m-parte-centros { padding: 4px 12px 0; }
.m-wk .rg { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; padding: 6px 4px 2px; font-size: 0.68rem; font-weight: 800; color: var(--accent-cyan); }
.m-wk .rg svg { width: 13px; height: 13px; }

/* Hojas de campos del panel en el teléfono (m-admin.js::fieldSheet): las
   piezas de los editores (.mc-head · .mc-body · .ed-foot) a lo ancho. */
.m-edsheet { display: flex; flex-direction: column; margin: -4px -2px 0; }
.m-edsheet .mc-head { padding: 0.9rem 3rem 0.9rem 0.9rem; gap: 0.7rem; border-radius: var(--radius-md) var(--radius-md) 0 0; }
.m-edsheet .mc-body { padding: 0.9rem 0.9rem 0.4rem; display: flex; flex-direction: column; gap: 0.7rem; }
.m-edsheet .mc-foot { padding: 0.7rem 0.9rem calc(0.7rem + env(safe-area-inset-bottom)); background: none; }
.m-edsheet .ed-foot-actions, .m-edsheet .ed-foot-actions .btn-primary { width: 100%; justify-content: center; }
.m-edsheet .m-af-seg { display: flex; width: 100%; }
.m-edsheet .m-af-seg label { flex: 1; justify-content: center; text-align: center; }

/* ==========================================================================
   EL BUSCADOR DE DIAGNÓSTICO E INTERVENCIÓN, EN MÓVIL
   core/buscador-catalogo.js abre una hoja casi a pantalla completa: un
   desplegable colgando del campo no cabe con el teclado abierto.
   ========================================================================== */
.bc-m-tit { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 6px; }
.bc-m-tit b { font-size: 1rem; }
.bc-m-busca {
  display: flex; align-items: center; gap: 8px; height: 46px; background: var(--bg-input);
  border: 1px solid var(--accent-cyan); border-radius: 12px; padding: 0 12px; flex: none;
}
.bc-m-busca input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text-primary); font: inherit; font-size: 16px; }
.bc-m-lista { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.bc-m-lista .bc-fila { padding: 11px 10px; border-radius: 10px; }
.bc-m-lista .bc-fila .nm { font-size: 15px; }
.bc-m-acciones { display: flex; gap: 8px; margin-top: 12px; }
/* El campo que abre la hoja: es un botón, pero se lee como un campo. */
.m-in.bc-m-campo { text-align: left; cursor: pointer; width: 100%; font: inherit; color: inherit; }
.m-in.bc-m-campo b { font-size: 16px; font-weight: 600; color: var(--text-primary); display: block; line-height: 1.3; }
.m-in.bc-m-campo b.vacio { color: var(--text-muted); font-weight: 500; }
/* Alto libre (el texto puede ocupar dos líneas) y el código como pastilla a
   la derecha: con el alto fijo de .m-in, etiqueta, texto y código no cabían
   y se montaban unos sobre otros. */
.m-in.bc-m-campo { height: auto; min-height: 50px; padding: 7px 11px 8px; gap: 1px; }
.m-in.bc-m-campo:has(.cod) { padding-right: 76px; }
.m-in.bc-m-campo b { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.m-in.bc-m-campo .cod {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%); max-width: 60px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.72rem; font-weight: 700; color: var(--accent-cyan);
  border: 1px solid var(--border-highlight); border-radius: 6px; padding: 2px 6px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; text-transform: none; letter-spacing: 0;
}

/* ==========================================================================
   Parte v2 · fase 7 (docs/plan-parte-v2.md): la semana por filas y la hoja
   de edición de una cirugía. Clases mpv-*, del boceto var/boceto-parte-v2.
   ========================================================================== */
.mpv-scroll { gap: 6px; }
.mpv-dayhead {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 7px 8px; margin-top: 4px; border-radius: 9px;
  background: var(--bg-secondary); border: 1px solid var(--border-color);
}
.mpv-dayhead b { display: inline-flex; align-items: center; gap: 5px; font: 800 0.86rem var(--font-heading); text-transform: capitalize; }
.mpv-dayhead b .m-ic { width: 14px; height: 14px; color: var(--accent-cyan); }
.mpv-dayhead.today { border-color: var(--border-highlight); box-shadow: inset 3px 0 0 var(--accent-cyan); }
.mpv-hoy { font-size: 0.56rem; font-weight: 800; text-transform: uppercase; color: #06222b; background: var(--accent-cyan); border-radius: 5px; padding: 1px 5px; }
.mpv-n { font-size: 0.7rem; color: var(--text-muted); font-weight: 600; }
.mpv-off { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-left: auto; color: #ef4444; }
.mpv-off .m-ic { width: 13px; height: 13px; }
.mpv-off i { font-style: normal; font-size: 0.64rem; font-weight: 700; color: var(--text-primary); border-radius: 999px; padding: 1px 7px; border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 14%, transparent); }

.mpv-room { display: flex; flex-direction: column; gap: 5px; }
.mpv-rh { display: flex; align-items: center; gap: 5px; font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); padding: 2px 2px 0; }
.mpv-rh .m-ic { width: 12px; height: 12px; }
.mpv-rh small { font-size: 0.62rem; color: var(--text-secondary); border: 1px solid var(--border-color); border-radius: 999px; padding: 0 6px; }
.mpv-rh.today { color: var(--accent-cyan); }
.mpv-room.off { flex-direction: row; align-items: center; justify-content: space-between; }
.mpv-closed { font-size: 0.66rem; font-weight: 700; color: #ef4444; border: 1px dashed rgba(239, 68, 68, 0.5); border-radius: 7px; padding: 3px 8px; background: repeating-linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0 6px, transparent 6px 12px); }
.mpv-cards { display: flex; flex-direction: column; gap: 6px; }
.mpv-slot { padding: 6px !important; font-size: 0.72rem !important; }

/* Tarjeta larga. */
.mpv-card { padding: 9px 10px; }
.mpv-time { flex: none; display: inline-flex; align-items: baseline; gap: 4px; font: 800 0.82rem var(--font-heading); font-variant-numeric: tabular-nums; color: var(--tone); }
.mpv-time small { font: 600 0.62rem var(--font-sans); color: var(--text-muted); }
.mpv-car { font-size: 0.6rem; color: #fff; background: #f59e0b; border-radius: 4px; padding: 0 4px; }
.mpv-proc { margin-top: 4px !important; }
.mpv-proc .m-ic { width: 13px; height: 13px; flex: none; color: var(--accent-cyan); }
.mpv-proc .dg { color: var(--text-primary) !important; font-weight: 600; }
.mpv-team { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.mpv-mem { display: inline-flex; align-items: center; gap: 4px; font-size: 0.68rem; font-weight: 600; color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 999px; padding: 1px 8px 1px 2px; background: var(--bg-input); }
.mpv-mem b { font-size: 0.56rem; font-weight: 800; color: var(--rc); padding-left: 5px; }
.mpv-mem i { font-style: normal; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; font-size: 0.5rem; font-weight: 800; background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--c); }
.mpv-mem.me { border-color: var(--c); background: color-mix(in srgb, var(--c) 16%, var(--bg-input)); }
.mpv-noteam { display: inline-flex; align-items: center; gap: 4px; font-size: 0.68rem; font-weight: 700; color: #f59e0b; }
.mpv-noteam .m-ic { width: 12px; height: 12px; }
.mpv-away { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 0.68rem; font-weight: 700; color: #ef4444; }
.mpv-away .m-ic { width: 13px; height: 13px; }
.mpv-card.away { border-color: rgba(239, 68, 68, 0.7); }
/* Tus cirugías. */
.mpv-card.mine { border-left: 4px solid var(--me) !important; background: color-mix(in srgb, var(--me) 7%, var(--bg-card)); }
.mpv-tu { flex: none; font-size: 0.58rem; font-weight: 800; color: var(--me); border: 1px solid var(--me); border-radius: 5px; padding: 0 5px; }

/* Horizontal: el quirófano a la izquierda y sus tarjetas en fila. */
.mpv-land .mpv-room { flex-direction: row; align-items: stretch; gap: 8px; }
.mpv-land .mpv-rh { width: 86px; flex: none; flex-direction: column; align-items: flex-start; justify-content: center; padding: 0; line-height: 1.2; }
.mpv-land .mpv-cards { flex: 1; min-width: 0; flex-direction: row; overflow-x: auto; }
.mpv-land .mpv-card { flex: 0 0 300px; }
.mpv-land .mpv-slot { flex: 0 0 64px; display: grid; place-items: center; }
.mpv-land .mpv-room.off { justify-content: flex-start; }
.mpv-land .mpv-dayhead { padding: 5px 8px; }
.mpv-daychips { display: flex; gap: 4px; overflow-x: auto; }
.mpv-daychips .m-chip { flex: none; }
.mpv-land .mpv-rh { flex-direction: row; flex-wrap: wrap; align-items: center; align-content: center; }
.mpv-land .mpv-cards { scrollbar-width: none; }
.mpv-land .mpv-cards::-webkit-scrollbar { display: none; }
.mpv-land .mpv-card { flex-basis: 280px; }
.mpv-v .mpv-slot { min-height: 0 !important; height: 30px; }

/* ── Hoja de la cirugía, opción B (edición) ───────────────────────────── */
.mpv-tabs { flex: none; }
.mpv-tabs .m-ctab { flex: 1; font-size: 0.72rem; padding: 0 6px; }
.mpv-tabs .m-ctab.on { color: var(--accent-cyan); border-color: var(--border-highlight); background: color-mix(in srgb, var(--accent-cyan) 14%, var(--bg-input)); }
.mpv-sheet-scroll { padding-bottom: 8px !important; gap: 8px; }
.mpv-lbl { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin: 2px 2px -3px; }
.mpv-segrow .m-chip { flex: 1; justify-content: center; }
.mpv-code { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 0.7rem; font-weight: 700; color: var(--accent-cyan); border: 1px solid var(--border-highlight); border-radius: 6px; padding: 2px 6px; }
.mpv-step { display: flex; align-items: stretch; height: 44px; border: 1px solid var(--border-color); border-radius: 11px; background: var(--bg-input); overflow: hidden; }
.mpv-step button { width: 48px; border: 0; background: none; color: var(--accent-cyan); font: 700 1.3rem var(--font-sans); }
.mpv-step b { flex: 1; display: flex; align-items: center; justify-content: center; gap: 3px; font-size: 1rem; border-left: 1px solid var(--border-color); border-right: 1px solid var(--border-color); }
.mpv-step b small { font-size: 0.7rem; color: var(--text-muted); font-weight: 600; }
.mpv-end { font-size: 0.74rem; color: var(--text-secondary); margin: 0 2px; }
.mpv-end b { color: var(--text-primary); }
.mpv-saved { flex: none; display: flex; align-items: center; gap: 6px; font-size: 0.72rem; color: #34d399; padding: 2px 2px 0; }
.mpv-saved .m-ic { width: 14px; height: 14px; }
.mpv-saved span { flex: 1; }
.mpv-saved button { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; color: var(--text-secondary); font: 700 0.72rem var(--font-sans); }
.mpv-saved button .m-ic { color: var(--text-secondary); }
.mpv-role { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 10px; border: 1px solid var(--border-color); border-radius: 11px; background: var(--bg-input); }
.mpv-role > b { width: 48px; flex: none; font-size: 0.66rem; font-weight: 800; color: var(--rc); }
.mpv-role .mpv-mem { flex: 1; min-width: 0; border: 0; background: none; font-size: 0.84rem; padding: 0; }
.mpv-role .mpv-mem i { width: 24px; height: 24px; font-size: 0.6rem; }
.mpv-empty { flex: 1; font-size: 0.8rem; color: var(--text-muted); font-style: italic; }
.mpv-mini { display: flex; gap: 2px; }
.mpv-mini i { width: 9px; height: 12px; border-radius: 2px; }
.mpv-mini i.f { background: color-mix(in srgb, var(--accent-cyan) 35%, transparent); }
.mpv-mini i.b { background: repeating-linear-gradient(135deg, rgba(148, 163, 184, 0.6) 0 2px, transparent 2px 4px); outline: 1px solid rgba(148, 163, 184, 0.45); outline-offset: -1px; }
.m-g2 .mpv-lbl { margin-top: 0; margin-bottom: 3px; }
.mpv-mat { display: flex; flex-direction: column; gap: 7px; border: 1px solid var(--border-color); border-radius: 12px; padding: 9px 10px; }
.mpv-mat-h { display: flex; align-items: center; gap: 6px; }
.mpv-mat-h .m-ic { width: 15px; height: 15px; color: var(--accent-cyan); }
.mpv-mat-h b { flex: 1; font-size: 0.8rem; }
.mpv-mat-ok { height: 40px; }
.mpv-auto-lbl { font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent-cyan); margin: 0 2px -3px; }
.m-in.mpv-auto { border-color: color-mix(in srgb, var(--accent-cyan) 40%, var(--border-color)); background: color-mix(in srgb, var(--accent-cyan) 7%, var(--bg-input)); }
.m-in.mpv-auto > span { color: var(--accent-cyan); }

/* Añadido al pasarlo a la app. */
.mpv-car.e { background: #ef4444; }
.mpv-slot.target { border-color: var(--accent-cyan) !important; color: var(--accent-cyan) !important; background: color-mix(in srgb, var(--accent-cyan) 10%, transparent) !important; }
button.mpv-role { width: 100%; font: inherit; color: var(--text-primary); text-align: left; cursor: pointer; }
.mpv-role > .m-ic { width: 16px; height: 16px; flex: none; color: var(--text-muted); }
.mpv-role.open { border-color: var(--border-highlight); }
.mpv-role.away { border-color: rgba(239, 68, 68, 0.7); }
.mpv-pick { display: flex; flex-direction: column; gap: 3px; margin: -2px 0 4px; padding: 4px; border: 1px solid var(--border-color); border-top: 0; border-radius: 0 0 11px 11px; max-height: 280px; overflow: auto; }
.mpv-person { display: flex; align-items: center; gap: 9px; min-height: 42px; width: 100%; padding: 0 8px; border: 0; border-radius: 9px; background: none; color: var(--text-primary); font: 600 0.82rem var(--font-sans); text-align: left; }
.mpv-person .mpv-pn { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mpv-person .user-avatar-circle { flex: none; font-weight: 800; }
.mpv-person small { font-size: 0.66rem; color: #ef4444; font-weight: 700; }
.mpv-person[disabled] { opacity: 0.45; }
.mpv-person.on { background: color-mix(in srgb, var(--accent-cyan) 14%, transparent); }
.mpv-person.rm { color: #ef4444; }
.mpv-person .m-ic { width: 16px; height: 16px; }
.mpv-foot { display: flex; flex-direction: column; gap: 6px; }
.mpv-saved.quiet { color: var(--text-muted); }
.mpv-saved.warn { color: #f59e0b; }
.mpv-saved span b { color: inherit; }
.mpv-mat-ok.ok { color: #10b981; border-color: rgba(16, 185, 129, 0.45); }
.m-in.mpv-auto.ro b { display: block; font-size: 0.86rem; font-weight: 600; padding: 2px 0 4px; }
.mpv-days { margin: 0 -2px; }
.mpv-what { display: flex; flex-direction: column; gap: 8px; }
.mpv-what .pt-e-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.mpv-what .pt-e-chips:empty { display: none; }
/* La hoja de la cirugía: cabecera, pestañas y pie quietos; sólo el contenido
   se desplaza. Sin esto, en horizontal (hoja lateral y baja) los campos se
   aplastaban unos contra otros y el pie quedaba fuera. */
.mpv-host { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.mpv-host > * { flex: none; }
.mpv-host > .mpv-sheet-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding-bottom: 8px; }
.mpv-sheet-scroll > * { flex: none; }
.mpv-host > .m-bar { padding: 0; min-height: 0; }
.mpv-sheet-scroll.ro { gap: 10px; }

/* Selección de varios días con el recuadro (Guardias / Ausencias) */
.m-mcal[data-mdrag] .d { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.m-mcal .d.sel { outline: 2px solid var(--accent-cyan); outline-offset: -2px; background: color-mix(in srgb, var(--accent-cyan) 22%, var(--bg-input)); color: var(--text-primary); }
.m-day-dragging, .m-day-dragging * { -webkit-user-select: none !important; user-select: none !important; }
/* Mi calendario: elegir los días de una ausencia */
.m-pedir { position: sticky; bottom: 8px; z-index: 2; display: flex; align-items: center; gap: 8px; margin: 2px 0 0; padding: 10px 12px; border-radius: 14px; background: var(--bg-card); border: 1px solid var(--accent-cyan); box-shadow: 0 8px 24px rgba(0, 0, 0, .3); }
.m-pedir span { flex: 1; font-size: 0.78rem; line-height: 1.35; color: var(--text-secondary); }
.m-pedir span b { color: var(--text-primary); }
.m-pedir button { appearance: none; border: 0; border-radius: 10px; padding: 9px 12px; font: 800 0.8rem var(--font-body); cursor: pointer; }
.m-pedir .no { background: none; color: var(--text-muted); padding: 9px 4px; }
.m-pedir .si { background: var(--accent-cyan); color: #04202a; }
.m-pedir .si:disabled { opacity: .4; cursor: default; }
.m-seld-day { font-size: 0.7rem; font-weight: 800; color: var(--text-muted); text-transform: capitalize; margin: 10px 2px 4px; }
.m-seled-host .gd-editor { position: static !important; width: auto !important; box-shadow: none; border: 0; padding: 0 2px; max-height: none; }
.m-seled-host .gd-editor::before, .m-seled-host .gd-editor::after { display: none; }

/* Hoja de la cirugía en horizontal: más ancha, cabecera y pestañas en una
   sola franja y el pie en una fila, para que quepa en 390 px de alto. */
@media (orientation: landscape) and (max-height: 480px) and (max-width: 1000px) {
  .m-sheet-wrap:has(.mpv-host) .m-sheet { width: min(640px, 78vw); }
  .mpv-host { gap: 6px; }
  .mpv-host .mpv-tabs .m-ctab { min-height: 34px; height: 34px; }
  .mpv-host .m-in.tall textarea { min-height: 44px; }
  .mpv-host .mpv-foot { gap: 4px; }
  .mpv-host .mpv-foot .m-acts { margin-top: 0; }
  /* Semana en horizontal: el nombre del quirófano en su columna, sin partir el icono */
  .mpv-land .mpv-rh { flex-wrap: nowrap; align-items: center; gap: 4px; width: 96px; }
  .mpv-land .mpv-rh small { margin-left: auto; }
}
/* ── La carpeta clínica en el móvil: cirugías, hoja, escáner, consentimientos
   y documentos (mobile/m-cirugia.js, mobile/m-carpeta.js). Prefijo .hc-m-. */
.hc-m-h-ic { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; color: var(--accent-cyan); background: color-mix(in srgb, var(--accent-cyan) 16%, transparent); }
.hc-m-h-ic .m-ic { width: 14px; height: 14px; }
.hc-m-sub { margin-left: auto; font-family: var(--font-sans); font-size: 0.66rem; font-weight: 600; color: var(--text-muted); }
/* Horas: una fila por momento, el siguiente resaltado y «Ahora» a un toque */
.hc-m-horas { display: grid; gap: 6px; }
.hc-m-hora { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 8px 6px 12px; border-radius: 12px; border: 1px solid var(--border-color); background: var(--bg-input); }
.hc-m-hora.next { border-color: var(--border-highlight); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-cyan) 16%, transparent); }
.hc-m-hora-t { flex: 1; min-width: 0; display: grid; }
.hc-m-hora-t > span { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.hc-m-hora-t label { position: relative; justify-self: start; }
.hc-m-hora-t b { font-family: var(--font-heading); font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.hc-m-hora:not(.hecha) .hc-m-hora-t b { color: var(--text-muted); }
.hc-m-hora-t input { position: absolute; inset: 0; opacity: 0; width: 100%; }
.hc-m-hora .m-act { height: 42px; min-width: 96px; font-size: 0.8rem; }
.hc-m-ok { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #10b981; }
.hc-m-ok .m-ic { width: 16px; height: 16px; }
/* Implantes */
.hc-m-ims { display: grid; gap: 6px; margin-bottom: 2px; }
.hc-m-im { display: flex; align-items: center; gap: 8px; padding: 8px 6px 8px 11px; border-radius: 12px; border: 1px solid var(--border-color); background: var(--bg-input); }
.hc-m-im.nuevo { border-color: color-mix(in srgb, #10b981 55%, transparent); background: color-mix(in srgb, #10b981 8%, var(--bg-input)); }
.hc-m-im > div { flex: 1; min-width: 0; display: grid; }
.hc-m-im b { font-size: 0.82rem; color: var(--text-primary); }
.hc-m-im span { font-size: 0.78rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-m-im small { font-size: 0.68rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.hc-m-x { width: 34px; height: 34px; border-color: transparent; background: transparent; color: var(--text-muted); }
.m-act.hc-m-big { height: 46px; font-size: 0.82rem; }
/* Resto de la hoja: filas que llevan a cada parte */
.hc-m-fila { display: flex; align-items: center; gap: 8px; padding: 9px 2px; border-top: 1px solid var(--border-color); font-size: 0.8rem; }
.hc-m-fila:first-of-type { border-top: 0; }
.hc-m-fila span { color: var(--text-muted); flex: none; }
.hc-m-fila b { flex: 1; min-width: 0; text-align: right; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Horizontal: horas y implantes lado a lado */
.hc-m-cols { display: grid !important; grid-template-columns: 1fr 1fr; align-content: start; }
/* Escáner: la cámara a pantalla completa y la ficha leída desde abajo */
.hc-m-cam { position: relative; display: flex; flex-direction: column; height: 100%; }
.hc-m-cam .m-bar { position: relative; z-index: 2; }
.hc-m-cam .m-title b, .hc-m-cam .m-title small, .hc-m-cam .m-back { color: #fff; }
.hc-m-visor { position: relative; align-self: center; width: 230px; height: 230px; margin-top: 60px; border-radius: 18px; background: radial-gradient(circle at 50% 45%, #2a3446 0%, #0d131e 70%); }
.hc-m-visor > i { position: absolute; width: 34px; height: 34px; border: 3px solid #22d3ee; }
.hc-m-visor > i:nth-child(1) { top: -2px; left: -2px; border-right: 0; border-bottom: 0; border-top-left-radius: 16px; }
.hc-m-visor > i:nth-child(2) { top: -2px; right: -2px; border-left: 0; border-bottom: 0; border-top-right-radius: 16px; }
.hc-m-visor > i:nth-child(3) { bottom: -2px; left: -2px; border-right: 0; border-top: 0; border-bottom-left-radius: 16px; }
.hc-m-visor > i:nth-child(4) { bottom: -2px; right: -2px; border-left: 0; border-top: 0; border-bottom-right-radius: 16px; }
.hc-m-linea { position: absolute; left: 14px; right: 14px; top: 50%; height: 2px; background: #22d3ee; box-shadow: 0 0 12px #22d3ee; animation: hc-m-barrido 1.8s ease-in-out infinite alternate; }
@keyframes hc-m-barrido { from { top: 22%; } to { top: 78%; } }
.hc-m-cam-hint { text-align: center; margin: 18px 28px 0; font-size: 0.8rem; color: rgba(255, 255, 255, 0.75); }
.hc-m-sheet { position: absolute; left: 0; right: 0; bottom: 64px; z-index: 3; padding: 14px 12px 12px; border-radius: 18px 18px 0 0; background: var(--bg-card-solid, var(--bg-card)); border-top: 1px solid var(--border-color); box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.45); display: grid; gap: 10px; }
.hc-m-sheet-h { display: flex; gap: 10px; align-items: flex-start; }
.hc-m-sheet-h > .m-ic { width: 28px; height: 28px; padding: 5px; border-radius: 50%; color: #fff; background: #10b981; box-sizing: border-box; }
.hc-m-sheet-h div { display: grid; }
.hc-m-sheet-h b { font-size: 0.9rem; color: var(--text-primary); }
.hc-m-sheet-h span { font-size: 0.72rem; color: var(--text-muted); }
.hc-m-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
/* ── La carpeta entera ─────────────────────────────────────────────────── */
.hc-m-sub .m-ic { width: 12px; height: 12px; color: #10b981; margin-right: 3px; vertical-align: -2px; }
.hc-m-lbl { margin: 10px 0 5px; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.hc-m-g2 .m-in, .m-panel > .m-in { margin-bottom: 6px; }
.hc-m-ro b { font-size: 16px; font-weight: 600; color: var(--text-primary); }
.hc-m-cell { min-width: 0; height: 40px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--bg-input); color: var(--text-primary); font: 600 15px var(--font-sans); padding: 0 10px; }
.hc-m-add { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 12px; border-radius: 10px; border: 1px dashed var(--border-color); background: transparent; color: var(--text-secondary); font: 700 0.74rem var(--font-sans); margin: 2px 0 4px; }
.hc-m-add .m-ic { width: 14px; height: 14px; color: var(--accent-cyan); }
/* Cirugías */
button.m-card.hc-m-cir { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.hc-m-hoja-l { display: flex; align-items: center; gap: 5px; margin-top: 7px; font-size: 0.74rem; font-weight: 700; }
.hc-m-hoja-l .m-ic { width: 14px; height: 14px; }
.hc-m-hoja-l.ok { color: #10b981; }
.hc-m-hoja-l.warn { color: #f59e0b; }
.hc-m-datos { margin: 2px 0 6px; font-size: 0.76rem; color: var(--text-secondary); }
.hc-m-dx { padding: 6px 0; border-top: 1px solid var(--border-color); }
.hc-m-dx:first-of-type { border-top: 0; padding-top: 0; }
.hc-m-dx.ro b { font-size: 0.88rem; color: var(--text-primary); }
.hc-m-rolt { display: block; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: #a5b4fc; }
.hc-m-eq { display: flex; align-items: center; gap: 9px; padding: 5px 0; }
.hc-m-eq > div { flex: 1; min-width: 0; display: grid; }
.hc-m-eq b { font-size: 0.84rem; color: var(--text-primary); }
.hc-m-eq span { font-size: 0.7rem; color: var(--text-muted); }
.hc-m-eq .m-avatar { width: 30px; height: 30px; font-size: 0.7rem; }
.hc-m-aviso, .hc-m-editbar { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--accent-cyan) 40%, transparent); background: color-mix(in srgb, var(--accent-cyan) 9%, var(--bg-card)); font-size: 0.76rem; color: var(--text-secondary); }
.hc-m-aviso > div, .hc-m-editbar > span { flex: 1; min-width: 0; display: grid; }
.hc-m-aviso b, .hc-m-editbar b { color: var(--text-primary); }
.hc-m-aviso > .m-ic, .hc-m-editbar > .m-ic { color: var(--accent-cyan); }
.hc-m-aviso .m-act, .hc-m-editbar .m-act { flex: none; width: auto; padding: 0 12px; }
.hc-m-editbar { display: flex; }
.hc-m-editbar > span { display: block; }
.hc-m-cambio { display: grid; padding: 6px 0; border-top: 1px solid var(--border-color); font-size: 0.76rem; }
.hc-m-cambio:first-of-type { border-top: 0; }
.hc-m-cambio small { color: var(--text-muted); font-size: 0.66rem; }
.hc-m-cambio b { color: var(--text-primary); }
.hc-m-cambio span { color: var(--text-secondary); }
/* Hoja: pie con lo que falta; firmada, se lee */
.hc-m-pie { align-items: center; }
.hc-m-pie .m-btn { flex: 1.4; }
.hc-m-falta, .hc-m-lista { display: flex; align-items: center; gap: 5px; font-size: 0.74rem; font-weight: 700; }
.hc-m-falta { color: #f59e0b; }
.hc-m-lista { color: #10b981; }
.hc-m-falta .m-ic, .hc-m-lista .m-ic { width: 15px; height: 15px; }
.hc-m-firmada .m-in, .hc-m-firmada .m-chips, .hc-m-firmada .m-acts, .hc-m-firmada .hc-m-add { pointer-events: none; }
.hc-m-firmada .m-in { background: transparent; border-color: transparent; padding-left: 0; }
.hc-m-firmada .m-acts, .hc-m-firmada .hc-m-add, .hc-m-firmada .hc-m-x, .hc-m-firmada .m-chip:not(.on) { display: none; }
/* Horizontal: paneles en dos columnas */
.m-scroll.hc-m-cols { grid-template-columns: 1fr 1fr; gap: 8px; }
.m-scroll.hc-m-cols > .m-hint, .m-scroll.hc-m-cols > .m-chips, .m-scroll.hc-m-cols > .hc-m-aviso, .m-scroll.hc-m-cols > .hc-m-editbar, .m-scroll.hc-m-cols > .hc-m-datos, .m-scroll.hc-m-cols > .hc-m-g2 { grid-column: 1 / -1; }
.m-screen.hc-m-oscuro { background: #05080f; }
/* Anamnesis y alta en el móvil */
.hc-m-dtop { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.hc-m-dsecs { display: grid; gap: 8px; }
.hc-m-fuente { margin-left: auto; font-family: var(--font-sans); font-size: 0.62rem; font-weight: 700; color: var(--accent-cyan); }
.hc-m-autos { display: grid; gap: 4px; padding: 7px 9px; margin-bottom: 6px; border-radius: 10px; border-left: 3px solid var(--accent-cyan); background: color-mix(in srgb, var(--accent-cyan) 6%, var(--bg-input)); }
.hc-m-autos > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 0.8rem; }
.hc-m-autos b { color: var(--text-primary); font-weight: 600; }
.hc-m-autos span { color: var(--text-secondary); font-size: 0.74rem; }
.hc-m-eq.vacio .m-avatar { background: transparent; border: 1px dashed var(--border-highlight); color: var(--text-muted); }
.hc-m-eq.vacio b { color: var(--text-muted); font-style: italic; font-weight: 500; }
/* Consentimientos de la cirugía pendiente */
.hc-m-ci { display: grid; gap: 8px; margin-top: 8px; }
.hc-m-ci-h { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; }
.hc-m-ci-h .m-ic { width: 15px; height: 15px; color: var(--accent-cyan); }
.hc-m-ci-h span { margin-left: auto; font-size: 0.68rem; font-weight: 700; color: #f59e0b; }
.hc-m-ci-h span.ok { color: #10b981; }
.hc-m-ci-row { display: grid; gap: 7px; padding: 9px 10px; border: 1px solid var(--border-color); border-radius: 11px; background: var(--bg-input); }
.hc-m-ci-t { display: grid; gap: 2px; justify-items: start; }
.hc-m-ci-t > b { font-size: 0.8rem; }
.hc-m-ci-t small { font-size: 0.68rem; color: var(--text-muted); }
.hc-m-ci-acts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hc-m-ci-acts .m-act { padding: 0 10px; }
.hc-m-ci-st { display: inline-flex; align-items: center; gap: 4px; margin-right: auto; font-size: 0.7rem; font-weight: 700; color: var(--text-muted); }
.hc-m-ci-st .m-ic { width: 13px; height: 13px; }
.hc-m-ci-st.ok { color: #10b981; }
.hc-m-ci-st.warn { color: #f59e0b; }
.hc-m-visor { overflow: hidden; }
.hc-m-visor video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 18px; }
.hc-m-visor > i, .hc-m-linea { z-index: 1; }
.hc-m-cam-mano { align-self: center; width: auto; margin-top: 16px; padding: 0 18px; }
.hc-m-lienzo { width: 100%; aspect-ratio: 60 / 26; border-radius: 12px; border: 1px solid var(--border-color); background: #fff; touch-action: none; }
.hc-m-informe { min-height: 60vh; }
.hc-m-informe iframe { width: 100%; height: 100%; min-height: 60vh; border: 0; background: #fff; }
.hc-m-eq select.hc-m-cell { width: 100%; }
button.hc-m-dx.hc-m-toca { display: block; width: 100%; text-align: left; font: inherit; color: inherit; background: transparent; border: 0; border-radius: 0; cursor: pointer; }
.hc-m-dx { position: relative; }
.hc-m-dx > .hc-m-x { position: absolute; right: -6px; top: 2px; }
.hc-m-ficha span { font-size: 0.76rem; color: var(--text-secondary); }
.hc-m-dcod { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; padding: 7px 4px 7px 10px; margin-bottom: 5px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--bg-input); font-size: 0.82rem; }
.hc-m-dcod b { color: var(--text-primary); font-weight: 650; }
.hc-m-dcod small { flex-basis: 100%; font-size: 0.68rem; color: var(--text-muted); }
.hc-m-dcod .hc-m-x { margin-left: auto; width: 30px; height: 30px; }
.hc-m-dmed { display: grid; gap: 4px; padding: 6px 0; border-top: 1px solid var(--border-color); font-size: 0.82rem; }
.hc-m-dmed:first-of-type { border-top: 0; }
.hc-m-dmed b { color: var(--text-primary); font-weight: 600; }
.hc-m-dmed.off b, .hc-m-dmed.off input { color: var(--text-muted); text-decoration: line-through; }
.hc-m-row { display: grid; gap: 5px; align-items: center; margin-bottom: 5px; }
.hc-m-row.c1 { grid-template-columns: 1fr 34px; }
.hc-m-row.c2 { grid-template-columns: 1fr 1fr 34px; }
.hc-m-danger .m-chip.on { color: #ef4444; border-color: color-mix(in srgb, #ef4444 50%, transparent); }
.hc-m-atb { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--border-color); }
.hc-m-atb:first-of-type { border-top: 0; }
.hc-m-atb > div { flex: 1; min-width: 0; display: grid; }
.hc-m-atb b { font-size: 0.86rem; color: var(--text-primary); }
.hc-m-atb span { font-size: 0.72rem; color: var(--text-muted); }
.hc-m-atb .m-act { flex: none; width: auto; padding: 0 12px; }
.hc-m-atb.off b { color: var(--text-muted); text-decoration: line-through; }
.hc-m-atb-nuevo { display: grid; gap: 6px; padding: 8px 0; border-top: 1px solid var(--border-color); }
.hc-m-sub.err { color: #f87171; }
.hc-m-im small.hc-m-buscando { color: var(--accent-cyan); }
.hc-m-im small.hc-m-pend { color: #f59e0b; }
button.m-tag.mpv-hoja { font-family: inherit; cursor: pointer; }