/* ============================================================================
   Shell MÓVIL (≤1024): barra superior de contexto + barra inferior de pulgar +
   hoja "Más" a pantalla completa. Rediseño nativo — NO encoge el desktop.
   Todo aquí está oculto en desktop; ≤1024 se esconde el sidebar/topbar de
   escritorio y aparece este shell. La hoja abre por un <button aria-expanded>
   y js/holos-mobile-menu.js (sin depender del circuito Blazor): accesible con
   teclado y lector de pantalla — el checkbox oculto no lo era (P0, A11Y-6).
   Capas por tokens de brand.css; targets táctiles ≥ 44; letra ≥ --holos-font-xs.
   ============================================================================ */

.holos-mshell{display: none;}          /* raíz de piezas móviles: oculto en desktop */

/* Barra superior móvil */
.holos-mtop{
  display: none;position: sticky;top: 0;z-index: var(--holos-z-shell-top);
  align-items: center;gap: .6rem;
  padding: .55rem .8rem;
  background: var(--holos-surface);
  border-bottom: 1px solid var(--holos-border);
}
.holos-mtop-mark{
  width: var(--holos-control-lg);height: var(--holos-control-lg);border-radius: 9px;flex-shrink: 0;border: none;cursor: pointer;
  background: var(--holos-sidebar-active);
  display: grid;place-items: center;color: var(--holos-on-accent);font-weight: 800;font-size: 1rem;
  box-shadow: 0 2px 8px rgba(99,102,241,.35);padding: 0;
}
.holos-mtop-ctx{
  display: flex;flex-direction: column;justify-content: center;min-width: 0;flex: 1;min-height: var(--holos-control-lg);
  border: none;background: none;text-align: left;cursor: pointer;padding: 0;font-family: inherit;
}
.holos-mtop-ctx-label{font-size: var(--holos-font-xs);font-weight: 700;letter-spacing: .07em;text-transform: uppercase;color: var(--holos-muted-2);}
.holos-mtop-ctx-prop{display: inline-flex;align-items: center;gap: .3rem;font-size: .92rem;font-weight: 650;color: var(--holos-text);}
.holos-mtop-ctx-prop span{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.holos-mtop-ctx-prop svg{flex-shrink: 0;color: var(--holos-muted);}

/* Reloj (reusa PropertyClockBadge) — compacto en la barra móvil */
.holos-mtop .property-clock-badge{
  flex-direction: column;align-items: flex-end;gap: 0;flex-shrink: 0;
  background: none;border: none;padding: 0;box-shadow: none;line-height: 1.05;
}
.holos-mtop .property-clock-label{
  font-size: var(--holos-font-xs);color: var(--holos-muted-2);font-weight: 600;letter-spacing: .03em;
  text-transform: uppercase;max-width: 6.5rem;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;order: 2;
}
.holos-mtop .property-clock-date{display: none;}
.holos-mtop .property-clock-time{font-size: .9rem;font-weight: 700;font-variant-numeric: tabular-nums;order: 1;color: var(--holos-text);}

.holos-mtop-avatar{
  width: var(--holos-control-lg);height: var(--holos-control-lg);border-radius: 50%;flex-shrink: 0;border: none;cursor: pointer;padding: 0;
  display: grid;place-items: center;color: var(--holos-on-accent);font-weight: 700;font-size: .76rem;
  background: var(--holos-sidebar-bg);
  box-shadow: 0 0 0 2px var(--holos-surface),0 0 0 4px color-mix(in srgb, var(--holos-brand-cyan) 35%, transparent);
}

/* Barra inferior (zona del pulgar) */
.holos-mbar{
  display: none;position: fixed;bottom: 0;left: 0;right: 0;z-index: var(--holos-z-shell-bottom);
  background: color-mix(in srgb, var(--holos-surface) 94%, transparent);backdrop-filter: blur(12px);
  border-top: 1px solid var(--holos-border);
  padding: .35rem .25rem calc(.35rem + env(safe-area-inset-bottom));
}
.holos-mbar-inner{display: flex;max-width: 520px;margin: 0 auto;}
.holos-mtab{
  flex: 1;display: flex;flex-direction: column;align-items: center;gap: .15rem;
  padding: .35rem .1rem;border: none;background: none;cursor: pointer;border-radius: 12px;
  font-family: inherit;font-size: var(--holos-font-xs);font-weight: 600;color: var(--holos-muted-2);
  text-decoration: none;min-height: 52px;justify-content: center;
}
.holos-mtab svg{width: 23px;height: 23px;stroke-width: 1.9;}
.holos-mtab.active{color: var(--holos-brand-primary);}
.holos-mtab.active svg{stroke-width: 2.2;}

/* Hoja "Más" — pantalla completa */
.holos-msheet-scrim{
  display: none;position: fixed;inset: 0;z-index: var(--holos-z-shell-scrim);background: color-mix(in srgb, var(--holos-shadow-ink) 40%, transparent);
  opacity: 0;visibility: hidden;transition: opacity var(--holos-motion) ease;cursor: pointer;border: none;padding: 0;
}
.holos-msheet{
  display: none;position: fixed;inset: 0;z-index: var(--holos-z-shell-sheet);background: var(--holos-bg);
  flex-direction: column;transform: translateY(100%);visibility: hidden;
  transition: transform var(--holos-motion) cubic-bezier(.4,0,.2,1), visibility 0s linear var(--holos-motion);
}
.holos-msheet.is-open{transform: translateY(0);visibility: visible;transition-delay: 0s;}
.holos-msheet-scrim.is-open{opacity: 1;visibility: visible;}

.holos-msheet-head{display: flex;align-items: center;justify-content: space-between;padding: 1rem .95rem .5rem;flex-shrink: 0;}
.holos-msheet-head h2{margin: 0;font-size: 1.25rem;font-weight: 750;letter-spacing: -.02em;color: var(--holos-text);}
.holos-msheet-close{
  width: var(--holos-control-lg);height: var(--holos-control-lg);border-radius: 50%;border: 1px solid var(--holos-border);
  background: var(--holos-surface);display: grid;place-items: center;cursor: pointer;color: var(--holos-muted);
}
.holos-msheet-body{flex: 1;overflow-y: auto;-webkit-overflow-scrolling: touch;padding: .5rem .95rem calc(1.5rem + env(safe-area-inset-bottom));}

/* Selector de propiedad dentro de la hoja */
.holos-msheet-prop{
  background: var(--holos-surface);border: 1px solid var(--holos-border);
  border-radius: 16px;padding: .85rem;margin-bottom: 1.1rem;box-shadow: var(--holos-shadow-sm);
}
.holos-msheet-prop-label{font-size: var(--holos-font-xs);font-weight: 700;letter-spacing: .07em;text-transform: uppercase;color: var(--holos-muted-2);margin-bottom: .4rem;}
.holos-msheet-prop .property-selector-wrap{width: 100%;}
.holos-msheet-prop .property-selector,
.holos-msheet-prop .property-selector-single-wrap{flex-direction: column;align-items: stretch;gap: .35rem;width: 100%;}
.holos-msheet-prop .property-selector > label,
.holos-msheet-prop .property-selector-single-wrap > span:first-child{display: none;}
.holos-msheet-prop .property-selector select{
  width: 100%;min-height: 46px;border: 1px solid var(--holos-border);border-radius: 11px;
  padding: 0 .7rem;font-family: inherit;font-size: .95rem;font-weight: 600;color: var(--holos-text);
  background: var(--holos-bg);
}
.holos-msheet-prop .property-selector-single{font-size: 1rem;font-weight: 650;color: var(--holos-text);}

.holos-msheet-grid-label{font-size: .7rem;font-weight: 700;letter-spacing: .06em;text-transform: uppercase;color: var(--holos-muted);margin: .2rem .15rem .6rem;}
.holos-mgrid{display: grid;grid-template-columns: repeat(3,1fr);gap: .6rem;}
.holos-mmod{
  background: var(--holos-surface);border: 1px solid var(--holos-border);border-radius: 16px;
  padding: .85rem .4rem;display: flex;flex-direction: column;align-items: center;gap: .5rem;
  text-decoration: none;color: var(--holos-text);box-shadow: var(--holos-shadow-sm);position: relative;min-height: 92px;justify-content: center;
}
.holos-mmod .ic{
  width: 44px;height: 44px;border-radius: 13px;display: grid;place-items: center;
  background: linear-gradient(135deg,var(--holos-brand-primary-soft),var(--holos-brand-primary-soft));border: 1px solid var(--holos-page);color: var(--holos-brand-primary);
}
.holos-mmod .ic svg{width: 23px;height: 23px;stroke-width: 1.9;}
.holos-mmod b{font-size: .72rem;font-weight: 600;text-align: center;line-height: 1.15;}
.holos-mmod.active{border-color: transparent;background: var(--holos-sidebar-active);}
.holos-mmod.active .ic{background: rgba(255,255,255,.18);border-color: transparent;color: var(--holos-on-accent);}
.holos-mmod.active b{color: var(--holos-on-accent);}

/* Cuenta (usuario + idioma + salir) */
.holos-macct{margin-top: 1.4rem;background: var(--holos-surface);border: 1px solid var(--holos-border);border-radius: 16px;box-shadow: var(--holos-shadow-sm);overflow: hidden;}
.holos-macct-user{display: flex;align-items: center;gap: .7rem;padding: .85rem;border-bottom: 1px solid var(--holos-border);}
.holos-macct-user .av{width: 38px;height: 38px;border-radius: 50%;flex-shrink: 0;display: grid;place-items: center;color: var(--holos-on-accent);font-weight: 700;font-size: .78rem;background: var(--holos-sidebar-bg);}
.holos-macct-user .u{min-width: 0;}
.holos-macct-user .u b{font-size: .9rem;display: block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.holos-macct-user .u small{font-size: .74rem;color: var(--holos-muted);}
.holos-macct-row{display: flex;align-items: center;justify-content: space-between;gap: .75rem;padding: .8rem .85rem;}
.holos-macct-row + .holos-macct-row{border-top: 1px solid var(--holos-border);}
.holos-macct-row > span{font-size: .86rem;font-weight: 550;color: var(--holos-text);}
.holos-macct .holos-ui-language-selector,.holos-macct .holos-ui-theme-selector{display: inline-flex;border: 1px solid var(--holos-border);border-radius: 10px;overflow: hidden;}
.holos-macct .holos-ui-language-option,.holos-macct .holos-ui-theme-option{border: none;background: var(--holos-surface);font-family: inherit;font-size: .8rem;font-weight: 600;color: var(--holos-muted);padding: .45rem .7rem;cursor: pointer;}
.holos-macct .holos-ui-language-option.is-active,.holos-macct .holos-ui-theme-option.is-active{background: var(--holos-sidebar-active);color: var(--holos-on-accent);}
.holos-macct .logout-form{margin: 0;}
.holos-macct-logout{color: var(--holos-danger);font-weight: 650;font-size: .86rem;background: none;border: none;font-family: inherit;cursor: pointer;display: inline-flex;align-items: center;gap: .4rem;}

/* ─── Interruptor de responsividad ─── */
@media (max-width:1024px){
  .holos-mshell{display: contents;}
  .holos-mtop{display: flex;}
  .holos-mbar{display: block;}
  .holos-msheet-scrim{display: block;}
  .holos-msheet{display: flex;}

  /* Esconder el shell de escritorio: sidebar + topbar viejos */
  .holos-app > .holos-sidebar{display: none;}
  .holos-app .holos-main > .holos-topbar{display: none;}
  /* Aire para que la barra inferior fija no tape el contenido */
  .holos-app .holos-content{padding-bottom: calc(88px + env(safe-area-inset-bottom));}
}