/* MADRE SELVA · claridad visual de BASE, PRO y PREMIUM (18/10/2026).
   Solo presentación: jerarquía de títulos, color por experiencia con detalles dorados, separación, alertas por prioridad,
   estados vacíos discretos y reloj operativo. No aplica a MS EJECUTIVO (data-ms-xp="direccion") ni al login.
   Contraste verificado (WCAG): títulos 6,2–10,3:1 y subtítulos 5,8–10,7:1 en claro y oscuro. */

/* ── Tokens por experiencia (claro por defecto; oscuro con data-theme="dark") ─────────────────────────────── */
html[data-ms-xp="base"]{--ux-h2:#0B6A4C;--ux-sub:#3D6A5B;--ux-sep:rgba(11,106,76,.18);--ux-tint:rgba(11,106,76,.05)}
html[data-ms-xp="base"][data-theme="dark"]{--ux-h2:#5FD4A8;--ux-sub:#9FCDB9;--ux-sep:rgba(95,212,168,.20);--ux-tint:rgba(95,212,168,.06)}
html[data-ms-xp="pro"]{--ux-h2:#1C4592;--ux-sub:#465C84;--ux-sep:rgba(28,69,146,.18);--ux-tint:rgba(28,69,146,.05)}
html[data-ms-xp="pro"][data-theme="dark"]{--ux-h2:#8EB8FF;--ux-sub:#AEC2E4;--ux-sep:rgba(142,184,255,.20);--ux-tint:rgba(142,184,255,.06)}
html[data-ms-xp="premium"]{--ux-h2:#7E1A33;--ux-sub:#7A4651;--ux-sep:rgba(126,26,51,.18);--ux-tint:rgba(126,26,51,.05)}
html[data-ms-xp="premium"][data-theme="dark"]{--ux-h2:#F29BB0;--ux-sub:#DDB3BC;--ux-sep:rgba(242,155,176,.20);--ux-tint:rgba(242,155,176,.06)}
:is(html[data-ms-xp="base"],html[data-ms-xp="pro"],html[data-ms-xp="premium"]){
  --ux-gold:#B8913F;--ux-gold-text:#8A6A2B;--ux-ink:#17202F;
  --ux-crit:#B42331;--ux-crit-bg:rgba(180,35,49,.07);--ux-warn:#9A6212;--ux-warn-bg:rgba(183,121,31,.08);--ux-info:#55657C;--ux-info-bg:rgba(85,101,124,.05)}
:is(html[data-ms-xp="base"],html[data-ms-xp="pro"],html[data-ms-xp="premium"])[data-theme="dark"]{
  --ux-gold:#D4B075;--ux-gold-text:#D4B075;--ux-ink:#F4EEE4;
  --ux-crit:#FF7A82;--ux-crit-bg:rgba(255,122,130,.10);--ux-warn:#F2B654;--ux-warn-bg:rgba(242,182,84,.09);--ux-info:#A3AFC0;--ux-info-bg:rgba(163,175,192,.05)}

/* ── Nivel 1 · título de pantalla: dónde estoy ─────────────────────────────────────────────────────────── */
:is(html[data-ms-xp="base"],html[data-ms-xp="pro"],html[data-ms-xp="premium"]) .ms-main .page-head{
  position:relative;padding-bottom:14px;margin-bottom:22px;border-bottom:1px solid var(--ux-sep)}
:is(html[data-ms-xp="base"],html[data-ms-xp="pro"],html[data-ms-xp="premium"]) .ms-main .page-head::after{
  content:"";position:absolute;left:0;bottom:-1px;width:56px;height:2px;border-radius:2px;background:var(--ux-gold)}
:is(html[data-ms-xp="base"],html[data-ms-xp="pro"],html[data-ms-xp="premium"]) .ms-main .page-head h1{overflow-wrap:anywhere}
:is(html[data-ms-xp="base"],html[data-ms-xp="pro"],html[data-ms-xp="premium"]) .ms-main .page-head .eyebrow{color:var(--ux-gold-text)!important;letter-spacing:.14em}
:is(html[data-ms-xp="base"],html[data-ms-xp="pro"],html[data-ms-xp="premium"]) .ms-main .page-head p{color:var(--ux-sub)}

/* ── Nivel 2 · título de sección: color del plan, peso y separación ────────────────────────────────────── */
:is(html[data-ms-xp="base"],html[data-ms-xp="pro"],html[data-ms-xp="premium"]) .ms-main :is(.section-title h2,.ms-sec-head h2,.home-panel-head h2,.card-head h3,.pm-h3,.ms-detect-brand h2){
  color:var(--ux-h2)!important;font-weight:700;letter-spacing:-.005em}
/* Secciones sueltas: barra dorada de identidad antes del título. */
:is(html[data-ms-xp="base"],html[data-ms-xp="pro"],html[data-ms-xp="premium"]) .ms-main :is(.section-title h2,.ms-sec-head h2)::before{
  content:"";display:inline-block;width:4px;height:.9em;margin-right:10px;border-radius:2px;background:var(--ux-gold);vertical-align:-.08em}
:is(html[data-ms-xp="base"],html[data-ms-xp="pro"],html[data-ms-xp="premium"]) .ms-main :is(.section-title,.ms-sec-head){margin-top:30px}

/* ── Nivel 3 · subtítulo: tono secundario del plan, sin competir con el título ─────────────────────────── */
:is(html[data-ms-xp="base"],html[data-ms-xp="pro"],html[data-ms-xp="premium"]) .ms-main :is(.section-title p,.ms-sec-head p,.ms-sec-head span,.card-head p,.home-panel-head p,.ms-detect-brand p){
  color:var(--ux-sub)!important}

/* ── Navegación: pestaña activa inequívoca ──────────────────────────────────────────────────────────── */
:is(html[data-ms-xp="base"],html[data-ms-xp="pro"],html[data-ms-xp="premium"]) .side-nav a:is(.active,[aria-current="page"]){
  box-shadow:inset 3px 0 0 var(--ux-gold);font-weight:700}

/* ── Alertas de «Hoy»: crítica > importante > informativa (texto + borde + fondo, no solo color) ─────── */
:is(html[data-ms-xp="base"],html[data-ms-xp="pro"],html[data-ms-xp="premium"]) .sig.k-alert{
  border-left:4px solid var(--ux-crit)!important;background-image:linear-gradient(var(--ux-crit-bg),var(--ux-crit-bg))!important;order:-2}
:is(html[data-ms-xp="base"],html[data-ms-xp="pro"],html[data-ms-xp="premium"]) .sig.k-tip{
  border-left:4px solid var(--ux-warn)!important;background-image:linear-gradient(var(--ux-warn-bg),var(--ux-warn-bg))!important;order:-1}
:is(html[data-ms-xp="base"],html[data-ms-xp="pro"],html[data-ms-xp="premium"]) .sig.k-data{
  border-left:2px solid var(--ux-info)!important;background-image:linear-gradient(var(--ux-info-bg),var(--ux-info-bg))!important}

/* ── Salón (Mesas, Cocina y barra, Encargado) ───────────────────────────────────────────────────────── */
/* Barra: título | reloj | estado de sincronización (el estado pasa a segundo plano). */
:is(html[data-ms-xp="base"],html[data-ms-xp="pro"],html[data-ms-xp="premium"]) .salon .toolbar{align-items:center!important;row-gap:8px}
:is(html[data-ms-xp="base"],html[data-ms-xp="pro"],html[data-ms-xp="premium"]) .salon .toolbar > strong{font-size:1.1rem;color:var(--ux-h2)}
:is(html[data-ms-xp="base"],html[data-ms-xp="pro"],html[data-ms-xp="premium"]) .salon .toolbar .sync{
  font-size:12.5px;opacity:.85;padding:3px 10px;border:1px solid var(--ux-sep);border-radius:999px;white-space:nowrap}
/* Alertas del salón: con avisos, destacadas y arriba (el script las ubica bajo la barra); sin avisos, discretas. */
:is(html[data-ms-xp="base"],html[data-ms-xp="pro"],html[data-ms-xp="premium"]) .salon [data-salon-alerts]:has(.salon-alerts){
  border-left:4px solid var(--ux-warn)}
:is(html[data-ms-xp="base"],html[data-ms-xp="pro"],html[data-ms-xp="premium"]) .salon [data-salon-alerts]:has([data-level="critical"]){
  border-left-color:var(--ux-crit);background-image:linear-gradient(var(--ux-crit-bg),var(--ux-crit-bg))}
:is(html[data-ms-xp="base"],html[data-ms-xp="pro"],html[data-ms-xp="premium"]) .salon .salon-alerts li[data-level="critical"] .tag{
  background:var(--ux-crit);color:#fff}
:is(html[data-ms-xp="base"],html[data-ms-xp="pro"],html[data-ms-xp="premium"]) .salon .salon-alerts li[data-level="late"] .tag{
  background:var(--ux-warn-bg);color:var(--ux-warn);border:1px solid var(--ux-warn)}
:is(html[data-ms-xp="base"],html[data-ms-xp="pro"],html[data-ms-xp="premium"]) .salon [data-salon-alerts]:not(:has(.salon-alerts)){
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:8px 14px!important;margin:10px 0!important;background:transparent!important;border-style:dashed!important}
:is(html[data-ms-xp="base"],html[data-ms-xp="pro"],html[data-ms-xp="premium"]) .salon [data-salon-alerts]:not(:has(.salon-alerts)) :is(h3,p){
  margin:0;font-size:13px;font-weight:600;opacity:.75}

/* ── Reloj operativo (uno por pantalla; hora del negocio) ───────────────────────────────────────────── */
.ms-op-clock{display:inline-flex;flex-direction:column;align-items:flex-end;line-height:1;margin-left:auto;padding:4px 12px;
  border-left:2px solid var(--ux-gold,#B8913F);font-variant-numeric:tabular-nums;color:var(--ux-ink,inherit)}
.ms-op-clock b{font-size:clamp(1.8rem,3.6vw,2.35rem);font-weight:700;letter-spacing:.02em}
.ms-op-clock small{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;opacity:.78;margin-top:4px}
.ms-main .page-head.ms-has-clock{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ms-main .page-head.ms-has-clock > :not(.ms-op-clock){flex:1 1 0%;min-width:min(100%,360px)}
@media (max-width:560px){
  .salon > header.toolbar .ms-op-clock{order:3;flex-basis:100%;flex-direction:row;align-items:baseline;justify-content:flex-start;gap:10px;margin-left:0;border-left:0;border-top:1px solid var(--ux-sep,rgba(0,0,0,.1));padding:8px 0 0}
  .ms-main .page-head .ms-op-clock{flex-direction:row;align-items:baseline;gap:10px;margin-left:0}
}

/* ── Asistentes: exterior de la experiencia activa; avatares originales intactos ────────────────────── */
:is(html[data-ms-xp="base"],html[data-ms-xp="pro"],html[data-ms-xp="premium"]) .ms-topzone .as-btn:is(.as-selva,.as-pro){
  background:var(--nl-top,#14503F)!important;border:1px solid var(--nl-gold,#D4B074)!important;color:#fff!important;
  box-shadow:0 2px 5px rgba(0,0,0,.12)!important}
:is(html[data-ms-xp="base"],html[data-ms-xp="pro"],html[data-ms-xp="premium"]) .ms-topzone .as-btn:is(.as-selva,.as-pro):is(:hover,.is-active){
  background:var(--nl-2,#0F3D32)!important;border-color:var(--nl-gold-2,#E8CF9C)!important;box-shadow:0 2px 5px rgba(0,0,0,.16)!important}
:is(html[data-ms-xp="base"],html[data-ms-xp="pro"],html[data-ms-xp="premium"]) .ms-topzone .as-btn:is(.as-selva,.as-pro):focus-visible{
  outline:2px solid var(--nl-gold-2,#E8CF9C)!important;outline-offset:3px}
:is(html[data-ms-xp="base"],html[data-ms-xp="pro"],html[data-ms-xp="premium"]) .as-btn:is(.as-selva,.as-pro) .as-name{color:#fff!important}


/* ── Cobertura 20/10 · títulos/subtítulos de módulos actuales. Identidad Work original. */
:is(html[data-ms-xp="base"],html[data-ms-xp="pro"],html[data-ms-xp="premium"]) .ms-main :is(section.card > h2,section.salon > h2){
  color:var(--ux-h2)!important}
:is(html[data-ms-xp="base"],html[data-ms-xp="pro"],html[data-ms-xp="premium"]) .ms-main :is(section.card > h2 + p,section.salon > h2 + p){
  color:var(--ux-sub)!important}
/* Gana sobre el antetítulo azul del estilo inyectado en runtime (#ms-xp-style). */
:is(html[data-ms-xp="base"],html[data-ms-xp="pro"],html[data-ms-xp="premium"])[data-theme] body .ms-main .page-head .eyebrow{
  color:var(--ux-gold-text)!important}