/* =============================================================================
   DRS MOTORS · DEMOS — BASE COMÚN (app del celular y CRM)
   Alias de la escala de la marca, reinicio de estilos, iconos, menús flotantes
   y el aviso de la demo. Todo color sale de drs.tokens.css por su nombre de rol;
   los roles que agregan las demos (acc-txt, acc-graf, sel-*) viven en tema.css.
============================================================================= */

:root{
  --u: 1px;
  --fs-6 : calc(var(--t-6)   * var(--u));
  --fs-7_5: calc(var(--t-7_5) * var(--u));
  --fs-9 : calc(var(--t-9)  * var(--u));
  --fs-11: calc(var(--t-11) * var(--u));
  --fs-13: calc(var(--t-13) * var(--u));
  --fs-16: calc(var(--t-16) * var(--u));
  --fs-20: calc(var(--t-20) * var(--u));
  --fs-26: calc(var(--t-26) * var(--u));
  --fs-34: calc(var(--t-34) * var(--u));
  --fs-44: calc(var(--t-44) * var(--u));
  --fs-56: calc(var(--t-56) * var(--u));
  --fs-76: calc(var(--t-76) * var(--u));
  --sp-2 : calc(var(--e-2)   * var(--u));
  --sp-4 : calc(var(--e-4)   * var(--u));
  --sp-7 : calc(var(--e-7_5) * var(--u));
  --sp-15: calc(var(--e-15)  * var(--u));
  --sp-24: calc(var(--e-24)  * var(--u));
  --sp-38: calc(var(--e-38)  * var(--u));
  --sp-60: calc(var(--e-60)  * var(--u));
  --tel-w: 393px;
  --tel-h: 852px;
  --k: 1;                               /* escala del iPhone en computador; la fija arranque.js */
  --ease: cubic-bezier(.2,.8,.2,1);
  --ease-sale: cubic-bezier(.6,0,.8,.2);
  --rejilla: color-mix(in srgb, var(--linea) 55%, transparent);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  background:var(--sup-1);
  color:var(--txt-2);
  font-family:var(--f-body);
  font-size:var(--fs-16);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:transparent;
  overflow:hidden;
}
h1,h2,h3,h4,p,dl,dd,figure{margin:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;border-radius:var(--radio);text-align:inherit;touch-action:manipulation}
input,textarea,select{font:inherit;color:inherit;border-radius:var(--radio)}
/* iOS acerca la página al enfocar un campo con letra de menos de 16 px: en el celular y en
   pantallas táctiles ningún campo baja de 16. Los que ya son más grandes (placas en Bebas)
   ganan por especificidad y no se achican. */
@media (max-width: 759px), (pointer: coarse){
  input,textarea,select{font-size:var(--fs-16)}
}
a{color:var(--acc-txt)}
:focus-visible{outline:2px solid var(--acc-txt);outline-offset:2px}
/* Foco puesto por código en un contenedor o un título (hojas, pantallas): no es un control */
.pantalla:focus,.hoja:focus,.hoja :is(h1,h2,h3):focus{outline:none}
.ico{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:calc(var(--trazo-medio) * 1px);stroke-linecap:var(--cap);stroke-linejoin:var(--join);flex:none;display:block}
.ico.s16{width:16px;height:16px}
.ico.s20{width:20px;height:20px}
.ico.s32{width:32px;height:32px}
.oculto{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:1ms!important;animation-iteration-count:1!important;animation-delay:0s!important;
    transition-duration:1ms!important;transition-delay:0s!important;scroll-behavior:auto!important;
  }
}

/* ---------------- área de toque de 44 × 44 sin cambiar el dibujo ----------------
   El control conserva su tamaño visible; un ::after transparente, centrado, amplía el área
   que recibe el toque: cada lado se corre min(0, 50 % − 22 px), así que un control que ya
   mide 44 o más no crece. Solo botones y enlaces (un <span> con la misma clase no se amplía:
   taparía lo que tiene al lado) y solo clases cuyo ::after está libre; .inter usa ::before.
   :where() no suma especificidad: si el control ya tiene su propia posición, se respeta.
   Los que se apilan sin espacio entre ellos (menú de avisos, zoom del mapa) miden 44 de verdad. */
:where(button, a[href]):where(.enlace,.avatar,.placa,.pts,.ficha,.cab-atras,.cab-btn,.cab-logo,.hoja-cerrar,.btn-chico,
  .exp-chip,.exp-btn,.res-hora,.res-dia,.ctl,.menu-item,.pl-item,.pv-hora),
:where(:where(.seg,.exp-zoom,.tema-sel,.pv-seg,.pv-dias) > button){position:relative}
:where(button, a[href]):where(.enlace,.avatar,.placa,.pts,.ficha,.cab-atras,.cab-btn,.cab-logo,.hoja-cerrar,.btn-chico,
  .exp-chip,.exp-btn,.res-hora,.res-dia,.ctl,.menu-item,.pl-item,.pv-hora)::after,
:where(:where(.seg,.exp-zoom,.tema-sel,.pv-seg,.pv-dias) > button)::after,
:where(button.inter)::before{content:"";position:absolute;inset:min(0px, calc(50% - 22px))}

/* Lockups: el tema muestra la pieza aprobada que toca (oscura sobre noche, clara sobre documento) */
.logo-dual{display:block;width:100%;height:100%}
.logo-dual svg{display:block;width:100%;height:100%}
.logo-dual .solo-doc{display:none}
[data-modo="documento"] .logo-dual .solo-noche{display:none}
[data-modo="documento"] .logo-dual .solo-doc{display:block}
[data-modo="documento"] [data-modo="noche"] .logo-dual .solo-noche{display:block}
[data-modo="documento"] [data-modo="noche"] .logo-dual .solo-doc{display:none}

/* ---------------- controles del presentador (fuera de la app) ---------------- */
.ctl{
  display:flex;align-items:center;gap:7px;padding:8px 11px;min-height:34px;
  border:1px solid var(--ctl-borde);background:var(--ctl-fondo);
  font:600 var(--fs-9)/1 var(--f-label);letter-spacing:.16em;text-transform:uppercase;color:var(--txt-1);
}
.ctl .ico{width:14px;height:14px}
.ctl[aria-pressed="true"]{color:var(--txt-1);border-color:var(--acc-graf)}
@media (hover:hover){ .ctl:hover{color:var(--txt-1);border-color:var(--txt-1)} }

/* Selector de tema: tres opciones en línea */
.tema-sel{display:inline-grid;grid-auto-flow:column;border:1px solid var(--ctl-borde);background:var(--ctl-fondo)}
.tema-sel button{
  display:flex;align-items:center;gap:6px;padding:8px 10px;min-height:34px;
  font:600 var(--fs-9)/1 var(--f-label);letter-spacing:.14em;text-transform:uppercase;color:var(--txt-2);
}
.tema-sel button + button{border-left:1px solid var(--ctl-borde)}
.tema-sel button .ico{width:14px;height:14px}
.tema-sel button[aria-pressed="true"]{background:var(--sel-fondo);color:var(--sel-txt)}

/* ---------------- menús flotantes (notificaciones, modelo de negocio) ---------------- */
.menu-avisos{
  position:fixed;top:64px;right:24px;z-index:60;width:min(380px, calc(100vw - 32px));max-height:calc(100dvh - 90px);overflow:auto;
  padding:14px 16px 16px;background:var(--sup-2);border:1px solid var(--n-4);box-shadow:0 30px 70px -20px var(--sombra);
  opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .18s var(--ease), transform .18s var(--ease);
  scrollbar-width:thin;
}
.menu-avisos.ver{opacity:1;transform:none;pointer-events:auto}
.menu-cab{display:flex;justify-content:space-between;gap:12px;margin-bottom:12px}
.menu-fila{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px;border:1px solid var(--panel-borde);background:var(--panel);margin-bottom:14px}
.menu-grupo{margin-bottom:12px}
.menu-grupo .cap{margin-bottom:6px}
.menu-item{display:grid;grid-template-columns:18px 1fr auto;gap:10px;align-items:center;width:100%;min-height:44px;padding:9px 8px;border-bottom:1px solid var(--linea);font-size:var(--fs-13);color:var(--txt-1);text-align:left}
.menu-item .ico{width:18px;height:18px;color:var(--acc-graf)}
.menu-item .chip{height:18px;font-size:var(--fs-9)}
@media (hover:hover){ .menu-item:hover{background:var(--sup-3)} }
.menu-modelo{right:auto;left:50%;top:84px;width:min(560px, calc(100vw - 32px));transform:translate(-50%, -8px)}
.menu-modelo.ver{transform:translate(-50%, 0)}

/* Modelo de negocio (lo usan la app, el lanzador y el CRM) */
.modelo-tabla{border-top:1px solid var(--linea)}
.modelo-fila{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;padding:11px 0;border-bottom:1px solid var(--linea)}
.modelo-fila b{display:block;font-weight:600}
.modelo-fila .t11{display:block;margin-top:2px}
.modelo-fases{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.modelo-fases li{display:flex;flex-direction:column;gap:6px;padding:10px;border:1px solid var(--panel-borde);background:var(--panel)}
.modelo-fases b.d{color:var(--acc-txt)}
.modelo-fases .t11{display:block;margin-top:2px}
@media (min-width: 560px){ .modelo-fases{grid-template-columns:repeat(4,minmax(0,1fr))} }

/* ---------------- aviso de la demo (lo que dice la demo, no la app) ---------------- */
.aviso-escenario{
  position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));z-index:80;
  transform:translate(-50%, 16px);opacity:0;pointer-events:none;
  display:flex;align-items:center;gap:12px;
  max-width:min(620px, calc(100vw - 32px));
  padding:12px 16px;background:var(--sup-3);border:1px solid var(--n-4);
  font-size:var(--fs-13);color:var(--txt-2);
  transition:opacity .2s var(--ease), transform .2s var(--ease);
}
.aviso-escenario.ver{opacity:1;transform:translate(-50%,0)}
.aviso-escenario b{
  font:600 var(--fs-9)/1.2 var(--f-label);letter-spacing:.22em;text-transform:uppercase;color:var(--acc-txt);white-space:nowrap;
}