/* «Accede»: el action-morph de Arc (Pro), su CSS module traducido. Tokens de Arc con sus valores. */
.am-root{position:fixed;z-index:100060;width:0;height:0;color:#15130f;font-family:var(--font-body,'DM Sans',system-ui,sans-serif);
  font-size:14px;letter-spacing:-.01em;line-height:1.4}
.am-root[hidden]{display:none}
.am-shape{position:absolute;right:0;top:0;overflow:clip;background:var(--am-fondo,#15130f);color:var(--am-tinta,#fff);
  box-shadow:0 1px 2px rgba(0,0,0,.08);transform-origin:100% 0;
  transition:background-color .2s cubic-bezier(.2,.9,.2,1),color .2s,box-shadow .4s cubic-bezier(.2,.9,.2,1)}
.am-shape::after{content:"";position:absolute;inset:0;border:1px solid transparent;border-radius:inherit;pointer-events:none;transition:border-color .2s}
.am-root[data-view="menu"] .am-shape{background:#fff;color:#15130f;box-shadow:0 2px 4px rgba(0,0,0,.04),0 18px 48px rgba(0,0,0,.16)}
.am-root[data-view="menu"] .am-shape::after{border-color:rgba(0,0,0,.08)}
/* La cara cuelga de la esquina con su tamaño natural: mide lo mismo a mitad de muelle. */
/* Cara del botón: el mismo contenido que el botón real; vuelve al plegarse. */
.am-fab{position:absolute;right:0;top:0;height:100%;display:flex;align-items:center;justify-content:center;gap:7px;
  padding:0 16px;white-space:nowrap;font-weight:500;opacity:1;transform:none;filter:none;
  transition:opacity .16s cubic-bezier(.22,1,.36,1) .08s,transform .3s cubic-bezier(.22,1,.36,1),filter .16s}
.am-root[data-tono="claro"] .am-fab{padding:0;width:100%}
.am-root[data-view="menu"] .am-fab{opacity:0;transform:scale(.92);filter:blur(4px);transition-duration:.12s;transition-delay:0s}
.am-face{position:absolute;right:0;top:0;box-sizing:border-box;display:grid;gap:2px;padding:6px;width:min(17.5rem,calc(100vw - 2rem));
  transform-origin:100% 0;opacity:0;pointer-events:none;transition:opacity .12s cubic-bezier(.4,0,.2,1)}
.am-root[data-view="menu"] .am-face{opacity:1;pointer-events:auto}
/* Soporte es un icono claro (no la píldora negra): su forma parte blanca. */
/* Plegado, la forma tiene el fondo del botón: en el de soporte, transparente; nada de un círculo blanco que se queda. */
.am-root[data-tono="claro"]:not([data-view="menu"]) .am-shape{box-shadow:none}
.am-face.am-entra{animation:am-cara .26s cubic-bezier(.22,1,.36,1) both .05s}
.am-face.am-entra .am-row{animation:am-fila .36s cubic-bezier(.22,1,.36,1) both}
.am-face.am-entra .am-row:nth-child(1){animation-delay:.06s}
.am-face.am-entra .am-item:nth-of-type(1){animation-delay:.1s}.am-face.am-entra .am-item:nth-of-type(2){animation-delay:.14s}
.am-face.am-entra .am-item:nth-of-type(3){animation-delay:.18s}.am-face.am-entra .am-item:nth-of-type(4){animation-delay:.22s}
@keyframes am-cara{from{opacity:0;transform:scale(.9);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
@keyframes am-fila{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.am-header{display:flex;min-height:36px;align-items:center;gap:4px;padding-left:10px}
.am-title{min-width:0;flex:1;margin:0;font-size:14px;font-weight:500;color:#15130f}
.am-iconButton{display:grid;width:32px;height:32px;flex:none;place-items:center;padding:0;border:0;border-radius:999px;background:transparent;color:#6b675f;cursor:pointer}
.am-iconButton:hover{background:rgba(21,19,15,.07);color:#15130f}
.am-menu{position:relative;display:grid;gap:2px}
.am-highlight{position:absolute;top:0;right:0;left:0;border-radius:18px;background:rgba(21,19,15,.065);pointer-events:none;opacity:0}
.am-item{position:relative;display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:18px;color:inherit;text-decoration:none!important;outline:none}
/* Arc: aquí el foco lo marca el brillo que se desliza (.am-highlight; ilumina() en accede-morph.js
   responde también a :focus, no solo a hover), no un anillo. foco-visible.css pinta un anillo
   universal con !important (WCAG en el resto del sitio): para ganarle dentro de este menú hace
   falta igualar el !important, pero con más especificidad para no tocar nada fuera de .am-root. */
.am-root :focus-visible{outline:none!important;box-shadow:none!important}
.am-itemIcon{display:grid;width:20px;height:20px;flex:none;place-items:center;color:#86817a;transition:color .14s}
.am-itemIcon svg{width:18px;height:18px}
/* Los iconos de Iconly, del mismo tamaño y tono que en los paneles de Servicios/Empresa/Clientes. */
.am-itemIcon>[data-lot],.csv-mn__linkIcon>[data-lot]{width:20px;height:20px}
.am-itemIcon>[data-lot] svg{width:100%!important;height:100%!important}
/* aiden.es pone una raya debajo de los enlaces de sus listas: aquí no va. */
.am-root .am-item{border:0!important;box-shadow:none!important}
.am-item:hover .am-itemIcon,.am-item:focus .am-itemIcon{color:#15130f}
.am-itemText{display:grid;min-width:0;flex:1;gap:1px}
.am-itemLabel{font-weight:500;color:#15130f;display:flex;align-items:center;flex-wrap:wrap;gap:0 4px}
.am-itemDescription{color:#6b675f;font-size:12px}
.am-chip{display:inline-flex;align-items:center;height:18px;padding:0 7px;margin-left:4px;border-radius:999px;background:rgba(19,150,126,.12);color:#0E7561;font-size:11px;font-weight:500;vertical-align:1px}
@media (prefers-reduced-motion:reduce){.am-face.am-entra,.am-face.am-entra .am-row{animation:none}}
/* Accede del pie del menú (móvil): la forma cuelga de la esquina de ABAJO a la derecha y crece hacia arriba. */
.am-root[data-arriba] .am-shape{top:auto;bottom:0;transform-origin:100% 100%}
.am-root[data-arriba] .am-fab{top:auto;bottom:0}
.am-root[data-arriba] .am-face{top:auto;bottom:0;transform-origin:100% 100%}