/* Identidad visual de Eos.
 *
 * Aquí viven los tokens de marca y la piel de los nodos que esta App declara
 * por ID. La geometría y el comportamiento pertenecen al contrato de cada Part
 * en Holo: si algo no se puede expresar con estos tokens, se corrige la Part,
 * no se fuerza desde aquí. La piel reconoce cada pieza por su tipo, su
 * presentación, su tono o su ID, nunca por el texto que enseña: ese texto
 * cambia con el idioma.
 *
 * Holo escribe en línea el tamaño, la fila y la posición de cada pieza. Donde
 * la colocación que se busca no se puede declarar en el Node, la piel la
 * ajusta con la variable de Holo de esa propiedad (`--holo-part-inline-size`,
 * `--holo-part-grid-row`…), que sólo afecta a la pieza que la declara. Una
 * regla que debe imponerse a otra de esta hoja lleva `:not(#eos-priority)`,
 * que eleva su especificidad. Cada selector parte de `:scope`, la raíz de la
 * App, como exige Holo.
 *
 * Los valores provienen del render vivo del Eos legacy, medido el 2026-09-21.
 */

/* El tema del Host declara sus tokens dos veces: en la raíz y dentro de cada
   región renderizada. La identidad de la App cubre los mismos dos alcances, o
   la región volvería al valor del tema. */
:scope,
:scope[data-holo-theme],
:scope[data-holo-theme] :where([data-holo-render]) {
  /* Base azul conservada por Crystal Blue y Glossy. Crystal claro ajusta
     estos tokens al final de la piel. */
  --holo-panel: rgba(244, 248, 254, 0.84);
  --holo-panel-raised: rgba(255, 255, 255, 0.82);
  --holo-surface: rgba(238, 245, 255, 0.52);
  --holo-card-bg: rgba(250, 252, 255, 0.9);
  --holo-window-backdrop: blur(28px) saturate(1.35);

  /* Tinta sobre el material. Dentro del fondo de la mesa manda el
     contraste que publica su lienzo: sin esa pista, una región recompuesta
     aparte pintaba en negro los nombres de los iconos. */
  --holo-fg: var(--holo-contrast-fg, #2e2922);
  --holo-card-fg: #243044;
  --holo-muted: var(--holo-contrast-muted, #6b6152);
  --holo-border: rgba(128, 111, 90, 0.24);

  /* El azul del escritorio manda en selección, foco y acentos. */
  --holo-accent: #2f7ab8;
  --holo-action: #2f7ab8;

  /* La barra deja ver el cristal; la ventana activa añade un reflejo. */
  --holo-surface-raised: rgba(255, 255, 255, 0.32);
  --holo-accent-surface: rgba(255, 255, 255, 0.48);

  /* Una consola del legacy es oscura: el tema claro reserva para código un
     gris que aquí no corresponde. */
  --holo-code-bg: #1b1f22;
  --holo-code-fg: rgba(255, 255, 255, 0.86);

  /* Cerrar lleva el rojo del legacy ya en reposo. */
  --holo-window-close: #df343e;
  --eos-muted: #585f6b;
  /* Tinta añil: el texto de Eos es azul profundo, no negro; su variante
     atenuada acompaña a las secundarias. */
  --eos-ink: #2a3478;
  --eos-ink-muted: #6b72a0;
  --eos-glass-edge: rgba(255, 255, 255, 0.75);
  --eos-opaque: #eef1f6;

  /* Un solo juego de materiales: cristales, curvas y elevaciones que
     comparten ventanas, menús, paneles y barras. */
  --eos-glass: blur(22px) saturate(1.08);
  --eos-glass-soft: blur(14px) saturate(1.2);
  --eos-glass-vivid: blur(18px) saturate(1.6);
  --eos-glass-strong: blur(30px) saturate(1.8);
  --eos-radius-pill: 99rem;
  --eos-shadow-soft: 0 1px 3px rgba(46, 41, 34, 0.2);
  --eos-shadow-lift: 0 4px 14px rgba(46, 41, 34, 0.22);
  --eos-shadow-float: 0 0.6rem 2rem rgba(10, 30, 60, 0.22);

  --holo-radius: 1rem;
}

/* La tinta de una ventana pertenece a su material, no al fondo de escritorio.
   Las regiones que Holo recompone también conservan ese mismo alcance. */
:scope [data-holo-type="Layout.Window"],
:scope [data-holo-type="Layout.Window"] :where([data-holo-render]),
:scope [data-holo-part-id="Desktop.Start"] [data-holo-role="Surface"],
:scope [data-holo-type="Layout.Context"] > [data-holo-role="Surface"] {
  --holo-fg: var(--holo-card-fg);
  --holo-table-fg: var(--holo-card-fg);
  --holo-navigation-fg: var(--holo-card-fg);
  --holo-brand-ink: var(--holo-card-fg);
  --holo-muted: var(--eos-muted);
  --holo-contrast-fg: var(--holo-card-fg);
  --holo-contrast-muted: var(--eos-muted);
  color: var(--holo-fg);
}

:scope [data-holo-type="Layout.Window"]:not([data-holo-presentation="Floating"]) > [data-holo-role="Main"] {
  background: var(--holo-panel);
}

:scope [data-holo-type="Layout.Window"][data-holo-presentation="Floating"] [data-holo-type="Visual.Embed"] {
  background: transparent;
}

:scope [data-holo-type="Layout.Window"] > [data-holo-role="Titlebar"] {
  color: var(--holo-card-fg);
}

:scope [data-holo-type="Layout.Window"][data-holo-role="Window"]:not([data-holo-presentation="Floating"]):not([data-holo-presentation="Circular"]) [data-holo-window-control="Close"] {
  background: var(--holo-window-close);
  color: white;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

:scope [data-holo-type="Layout.Window"][data-holo-role="Window"]:not([data-holo-presentation="Floating"]):not([data-holo-presentation="Circular"]) [data-holo-window-control="Close"]:hover {
  background: color-mix(in srgb, var(--holo-window-close) 86%, black);
}

:scope [data-holo-type="Layout.Window"] [data-holo-window-control]:focus-visible {
  outline: 2px solid var(--holo-accent);
  outline-offset: 2px;
}

:scope:is(:not([data-eos-theme]), [data-eos-theme="Blue"], [data-eos-theme="Glossy"]) [data-holo-type="Layout.Window"]:not([data-holo-presentation="Floating"]) {
  border-color: var(--eos-glass-edge);
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.32), transparent 42%, rgba(188, 214, 255, 0.12));
  box-shadow: 0 1.8rem 5rem rgba(20, 40, 68, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 1px 0 0 rgba(255, 255, 255, 0.45);
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :scope [data-holo-type="Layout.Window"]:not([data-holo-presentation="Floating"]):not(#eos-priority),
  :scope [data-holo-part-id="Desktop.Start"] [data-holo-role="Surface"]:not(#eos-priority),
  :scope [data-holo-type="Layout.Context"] > [data-holo-role="Surface"]:not(#eos-priority) {
    background: var(--eos-opaque);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
}

@supports not (backdrop-filter: blur(1px)) {
  :scope [data-holo-type="Layout.Window"]:not([data-holo-presentation="Floating"]) { background: var(--eos-opaque); }
}

/* El arranque sólo muestra un aro, conservando el texto para accesibilidad. */
:scope [data-holo-bootstrap] [data-holo-role="Spinner"] {
  font-size: 0;
  gap: 0;
}

:scope [data-holo-bootstrap] [data-holo-role="Spinner"] > span:not([data-holo-role="Mark"]) {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

:scope [data-holo-bootstrap] [data-holo-role="Mark"] {
  inline-size: 2.8rem;
  block-size: 2.8rem;
  border: 2px solid color-mix(in srgb, var(--holo-accent) 16%, transparent);
  border-block-start-color: var(--holo-accent);
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  animation: holo-spinner 900ms linear infinite;
}


@media (prefers-reduced-motion: reduce) {
  :scope [data-holo-bootstrap] [data-holo-role="Mark"] { animation: none; }
}

/* La barra de tareas del escritorio: cristal azul sobre el fondo, como en el
   legacy. Es la piel de un nodo propio, identificado por el ID que declara
   esta App. */
:scope [data-holo-part-id="Desktop.Bar"] {
  background-color: transparent;
  /* Único token que la barra expone a un tema: el resto de temas cambian
     `--holo-*` y esta pieza los hereda sola porque usa cristal+color de fondo
     genéricos en el resto de su CSS. */
  background-image: var(
    --eos-bar-gradient,
    linear-gradient(rgba(114, 190, 232, 0.38), rgba(58, 133, 198, 0.52))
  );
  -webkit-backdrop-filter: var(--eos-glass);
  backdrop-filter: var(--eos-glass);
  border: 0;
  border-radius: 0;
  box-shadow:
    0 -12px 34px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.98);
  /* La barra arranca en su esquina: el botón de inicio no lleva margen
     propio, y los huecos entre ventanas son sólo el filo que las separa
     (`Desktop.Taskbar.Windows` fija su propio `gap: 0`). */
  padding: 0;
  gap: 0;
}

/* Sobre ese cristal, el texto de la barra se lee en claro y sin negrita. El
   menú de inicio cuelga de la barra pero es un panel claro con su propia
   tinta: sin la excepción, sus opciones salían en blanco y no se leían sobre
   un fondo claro. */
:scope [data-holo-part-id="Desktop.Bar"] [data-holo-role="Text"]:not([data-holo-part-id="Desktop.Start"] *),
:scope [data-holo-part-id="Desktop.Bar"] [data-holo-role="Title"]:not([data-holo-part-id="Desktop.Start"] *) {
  color: rgba(255, 255, 255, 0.98);
  font-weight: 400;
}

:scope [data-holo-part-id="Desktop.Bar"] [data-holo-role="Icon"]:not([data-holo-part-id="Desktop.Start"] *) {
  color: rgba(255, 255, 255, 0.92);
}

/* Portador invisible del tema y del sonido del perfil. Holo compone el
   documento; Web.js lee estos valores al aplicar los efectos de Eos. */
:scope [data-holo-part-id="Desktop.Theme"]:not(#eos-priority),
:scope [data-holo-part-id="Desktop.Voice"]:not(#eos-priority),
:scope [data-holo-part-id="Desktop.Glow"]:not(#eos-priority),
:scope [data-holo-part-id="Desktop.Avatar"]:not(#eos-priority),
:scope [data-holo-part-id="Desktop.Cues"]:not(#eos-priority),
:scope [data-holo-part-id="Desktop.Scope"]:not(#eos-priority) {
  /* El portador sigue en el DOM para Web.js, pero no ocupa una fila invisible
     que desplace 21px el lienzo y bloquee el borde superior. */
  display: none;
}

:scope [data-eos-guest-notice] {
  padding: 1.6rem;
}

:scope [data-eos-guest-notice] p { margin: 0 0 1rem; }
:scope [data-eos-guest-notice] button {
  padding: 0.6rem 1rem;
  margin-inline-end: 0.8rem;
  border: 1px solid rgba(80, 90, 105, 0.25);
  border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.5);
  color: inherit;
  font: inherit;
  cursor: pointer;
}


/* La mesa ya está pintada cuando sus accesos aparecen como un solo grupo.
   El atributo se fija una vez por carga en Web.js y no cambia al abrir ventanas. */
:scope [data-holo-part-id="Desktop.Icons"] {
  opacity: 0;
  transition: opacity 180ms ease-out;
}

:scope[data-eos-intro="Ready"] [data-holo-part-id="Desktop.Icons"] {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  :scope [data-holo-part-id="Desktop.Icons"] {
    transition: none;
  }
}

/* Estilos de la mesa. Future, Neon y Minimal ajustan los tokens base mediante
   `[data-eos-theme]`; Blue y Glossy conservan la base azul. Crystal claro se
   aplica al final por ausencia del atributo. Ajustes guarda la preferencia y
   Web.js proyecta su valor en la raíz. La barra lee --eos-bar-gradient. */

/* Future: cristal frío de nave, azul eléctrico sobre gris muy oscuro, cantos
   más rectos que Crystal (un SO "de dentro de diez años", no un panel cálido
   de sobremesa). */
:scope[data-eos-theme="Future"],
:scope[data-eos-theme="Future"] :where([data-holo-render]) {
  --holo-panel: rgba(20, 26, 34, 0.86);
  --holo-panel-raised: rgba(26, 34, 44, 0.9);
  --holo-surface: rgba(18, 24, 32, 0.82);
  --holo-card-bg: rgba(18, 24, 32, 0.82);
  --holo-window-backdrop: blur(26px) saturate(1.3);
  --holo-fg: var(--holo-contrast-fg, rgba(224, 240, 255, 0.96));
  --holo-card-fg: rgba(224, 240, 255, 0.96);
  --holo-muted: var(--holo-contrast-muted, rgba(160, 190, 214, 0.7));
  --holo-border: rgba(96, 200, 255, 0.28);
  --holo-accent: #34d3ff;
  --holo-action: #34d3ff;
  --holo-surface-raised: rgba(28, 38, 50, 0.92);
  --holo-accent-surface: rgba(24, 46, 58, 0.92);
  --holo-code-bg: #04080c;
  --holo-code-fg: rgba(150, 235, 255, 0.9);
  --holo-window-close: #ef3548;
  --holo-radius: 0.8rem;
  --eos-muted: #b3c7dc;
  --eos-glass-edge: rgba(138, 211, 255, 0.3);
  --eos-opaque: #141d29;
  --eos-bar-gradient: linear-gradient(
    rgba(10, 22, 34, 0.7),
    rgba(6, 14, 22, 0.85)
  );
}

/* Neon: fondo casi negro, magenta y cian a tope de saturación, bordes que
   parecen tubo de neón encendido. El tema "de fiesta". */
:scope[data-eos-theme="Neon"],
:scope[data-eos-theme="Neon"] :where([data-holo-render]) {
  --holo-panel: rgba(16, 8, 24, 0.88);
  --holo-panel-raised: rgba(24, 12, 34, 0.92);
  --holo-surface: rgba(14, 6, 20, 0.85);
  --holo-card-bg: rgba(14, 6, 20, 0.85);
  --holo-window-backdrop: blur(20px) saturate(1.6);
  --holo-fg: var(--holo-contrast-fg, rgba(255, 236, 250, 0.96));
  --holo-card-fg: rgba(255, 236, 250, 0.96);
  --holo-muted: var(--holo-contrast-muted, rgba(220, 170, 230, 0.72));
  --holo-border: rgba(255, 70, 210, 0.4);
  --holo-accent: #ff2ee6;
  --holo-action: #33f6ff;
  --holo-surface-raised: rgba(30, 14, 42, 0.94);
  --holo-accent-surface: rgba(42, 12, 46, 0.94);
  --holo-code-bg: #0a0410;
  --holo-code-fg: rgba(120, 255, 240, 0.92);
  --holo-window-close: #f03256;
  --holo-radius: 1.4rem;
  --eos-muted: #d6b9e0;
  --eos-glass-edge: rgba(245, 158, 231, 0.35);
  --eos-opaque: #1a1026;
  --eos-bar-gradient: linear-gradient(
    rgba(255, 46, 230, 0.32),
    rgba(51, 246, 255, 0.32)
  );
}

/* Minimal: casi sin color, casi sin sombra, casi sin radio. Un gris tinta
   sobre blanco y un solo acento apagado; lo que sobra en Crystal (cristal,
   calidez, brillo) aquí se quita, no se sustituye por otra decoración. */
:scope[data-eos-theme="Minimal"],
:scope[data-eos-theme="Minimal"] :where([data-holo-render]) {
  --holo-panel: rgba(255, 255, 255, 0.98);
  --holo-panel-raised: rgba(250, 250, 250, 0.98);
  --holo-surface: rgba(255, 255, 255, 0.97);
  --holo-card-bg: rgba(255, 255, 255, 0.97);
  --holo-window-backdrop: none;
  --holo-fg: var(--holo-contrast-fg, #1c1c1c);
  --holo-card-fg: #1c1c1c;
  --holo-muted: var(--holo-contrast-muted, #6b6b6b);
  --holo-border: rgba(0, 0, 0, 0.14);
  --holo-accent: #2b2b2b;
  --holo-action: #2b2b2b;
  --holo-surface-raised: rgba(244, 244, 244, 0.98);
  --holo-accent-surface: rgba(238, 238, 238, 0.98);
  --holo-code-bg: #f2f2f2;
  --holo-code-fg: #1c1c1c;
  --holo-window-close: #d72d3d;
  --holo-radius: 0.25rem;
  --eos-muted: #5e5e5e;
  --eos-glass-edge: rgba(0, 0, 0, 0.14);
  --eos-opaque: #ffffff;
  --eos-bar-gradient: rgba(255, 255, 255, 0.92);
}

/* Los nombres de los iconos de la mesa llevan una sombra azulada, como en el
   legacy, pero más firme: la del legacy no bastaba sobre la arena de Beach ni
   sobre un fondo claro, donde el blanco desaparecía. Un filo corto y oscuro
   perfila cada letra y un halo suave la separa del fondo; sobre un fondo
   oscuro apenas se nota. */
:scope [data-holo-part-id="Desktop.Icons"] [data-holo-role="Title"] {
  text-shadow:
    0 1px 1px rgba(8, 20, 36, 0.85),
    0 0 2px rgba(8, 20, 36, 0.7),
    0 0 7px rgba(8, 20, 36, 0.45);
}

/* Cada ventana abierta es un botón de una línea: el título se lee entero
   cuando cabe y, si no, se recorta con puntos suspensivos en vez de partirse
   en dos. Los botones van pegados, como el de inicio: sólo los separa un filo
   claro. */
:scope [data-holo-control-id="Desktop.Taskbar.Windows"] {
  gap: 0;
}

:scope [data-holo-control-id="Desktop.Taskbar.Windows"] > [data-holo-role="Item"] {
  max-inline-size: 22rem;
  border: 0;
  border-inline-end: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 0;
}

:scope [data-holo-control-id="Desktop.Taskbar.Windows"] > [data-holo-role="Item"] [data-holo-role="Main"] {
  min-inline-size: 0;
}

:scope [data-holo-control-id="Desktop.Taskbar.Windows"] > [data-holo-role="Item"] [data-holo-role="Title"] {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* La ventana activa en la barra se ilumina, no se recuadra. La marca es la
   del compositor (`Selected`): la barra alterna, así que el enlace que más se
   parece a la dirección —el que el cliente marca como actual— no siempre es
   el de la ventana activa, y ése no se ilumina. */
:scope [data-holo-control-id="Desktop.Taskbar.Windows"] > [data-holo-role="Item"][aria-current="true"]:not([data-holo-item-selected="true"]) {
  background: none;
  box-shadow: none;
  border-inline-end-color: rgba(255, 255, 255, 0.18);
}

:scope [data-holo-control-id="Desktop.Taskbar.Windows"] > [data-holo-role="Item"][data-holo-item-selected="true"] {
  background-image: linear-gradient(
    rgba(182, 226, 255, 0.64),
    rgba(104, 173, 223, 0.46)
  );
}

/* Menú de inicio: el de la cuenta, como en el legacy, no un lanzador. Un
   panel de cristal claro apoyado en la barra, con el retrato y el nombre
   arriba, los programas que ofrece, la sesión y, al pie, salir. Todas las
   filas miden y se leen igual. El Host decide dónde cabe el panel y lo fija en
   línea; la App declara cuánto ocupa su contenido. */
:scope [data-holo-part-id="Desktop.Start"] [data-holo-role="Surface"] {
  inline-size: 31.5rem;
  max-inline-size: 31.5rem;
  padding: 0.8rem;
  border: 1px solid var(--eos-glass-edge);
  border-radius: 1.4rem;
  background-color: transparent;
  background-image: linear-gradient(
    var(--holo-panel-raised),
    var(--holo-panel)
  );
  -webkit-backdrop-filter: var(--eos-glass);
  backdrop-filter: var(--eos-glass);
  box-shadow: 0 1.2rem 3.4rem rgba(20, 40, 64, 0.24);
}

/* El menú contextual (clic derecho sobre la mesa, un icono o una ventana de
   la barra) es el mismo cristal claro que el menú de inicio, más estrecho:
   filas compactas sin marco que se tiñen al pasar y, lo que borra, en rojo. */
:scope [data-holo-type="Layout.Context"] > [data-holo-role="Surface"] {
  min-inline-size: 21rem;
  max-inline-size: 28rem;
  padding: 0.5rem;
  border: 1px solid var(--eos-glass-edge);
  border-radius: 1.1rem;
  background-color: transparent;
  background-image: linear-gradient(
    var(--holo-panel-raised),
    var(--holo-panel)
  );
  -webkit-backdrop-filter: var(--eos-glass);
  backdrop-filter: var(--eos-glass);
  box-shadow: 0 1.2rem 3.4rem rgba(20, 40, 64, 0.26),
    0 0.2rem 0.6rem rgba(20, 40, 64, 0.1);
}

:scope [data-holo-type="Layout.Context"] [data-holo-type="Collection.List"][data-holo-presentation="Menu"] {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.1rem;
  padding: 0;
  border: 0;
  background: transparent;
}

:scope [data-holo-type="Layout.Context"] [data-holo-presentation="Menu"] > [data-holo-role="Item"] {
  min-block-size: 3.2rem;
  margin: 0;
  padding: 0 1rem;
  gap: 1rem;
  border: 0;
  border-radius: 0.7rem;
  background: transparent;
  box-shadow: none;
  color: var(--holo-fg);
  font-size: 1.4rem;
  text-decoration: none;
}

:scope [data-holo-type="Layout.Context"] [data-holo-presentation="Menu"] > [data-holo-role="Item"]:is(:hover, :focus-visible) {
  background: rgba(40, 120, 189, 0.12);
  outline: 0;
}

:scope [data-holo-type="Layout.Context"] [data-holo-presentation="Menu"] > [data-holo-role="Item"] > [data-holo-role="Icon"] {
  inline-size: 2rem;
  block-size: 2rem;
  color: var(--holo-muted);
  font-size: 1.8rem;
}

:scope [data-holo-type="Layout.Context"] [data-holo-presentation="Menu"] > [data-holo-role="Item"]:is([data-holo-list-row-id$=":Trash"], [data-holo-list-row-id$=":Close"]),
:scope [data-holo-type="Layout.Context"] [data-holo-presentation="Menu"] > [data-holo-role="Item"]:is([data-holo-list-row-id$=":Trash"], [data-holo-list-row-id$=":Close"]) > [data-holo-role="Icon"] {
  color: #b42318;
}

/* Se cierra como un menú: fuera, con Escape o con el botón de inicio. */
:scope [data-holo-part-id="Desktop.Start"] [data-holo-role="Surface"] > [data-holo-role="Close"] {
  display: none;
}

/* La cuenta encabeza el panel: retrato redondo, nombre y perfil, y una raya
   fina debajo. */
:scope [data-holo-part-id="Desktop.Start.Identity"] {
  min-block-size: 0;
  padding: 0.6rem 0.8rem 1.1rem;
  border-block-end: 1px solid var(--holo-border);
  border-radius: 0;
  background: transparent;
}

:scope [data-holo-part-id="Desktop.Start.Identity"] > [data-holo-role="Item"] {
  min-block-size: 6rem;
  padding: 0.6rem 0.8rem;
  gap: 1.2rem;
}

:scope [data-holo-part-id="Desktop.Start.Identity"] [data-holo-role="Icon"] img {
  inline-size: 100%;
  block-size: 100%;
  border-radius: inherit;
  object-fit: cover;
}

:scope [data-holo-part-id="Desktop.Start.Identity"] [data-holo-role="Description"] {
  color: var(--holo-muted);
  font-size: 1.2rem;
}

/* El perfil se ve también en Guest, aunque exista otra sesión autenticada. */
:scope [data-holo-part-id="Desktop.Start"] [data-holo-part-id="Desktop.Start.Identity"] small[data-holo-role="Text"] {
  display: block;
  color: var(--holo-muted);
  font-size: 1.2rem;
}

/* Una sola escala de separación y controles para el explorador. */
:scope [data-holo-part-id="Desktop.Files.Toolbar"] {
  padding: 0.8rem;
  border-block-end: 1px solid var(--holo-border);
  background: var(--holo-panel);
}
:scope [data-holo-part-id="Desktop.Files.Toolbar"]:not(#eos-priority) {
  gap: 0.8rem;
  --holo-part-gap: 0.8rem;
}

:scope [data-holo-part-id="Desktop.Files.Toolbar"] [data-holo-type="Navigation.Action.Bar"] {
  gap: 0.4rem;
  padding: 0;
  border: 0;
  background: transparent;
}

:scope [data-holo-part-id="Desktop.Files.Toolbar"] :is(button, [data-holo-role="Item"]) {
  min-block-size: 3.2rem;
  border-radius: 0.7rem;
  box-shadow: none;
}

:scope [data-holo-part-id="Desktop.Files.Path"] {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.4rem;
  min-inline-size: 0;
  padding: 0.4rem;
  border: 1px solid var(--holo-border);
  border-radius: 0.8rem;
  background: var(--holo-surface);
  overflow: visible;
}

:scope [data-holo-part-id="Desktop.Files.Path"] > [data-holo-role="Item"] {
  max-inline-size: 100%;
  padding: 0 0.7rem;
  margin: 0;
  border: 0;
  background: transparent;
}
:scope [data-holo-part-id="Desktop.Files.Path"] > [data-holo-role="Item"]:not(#eos-priority) {
  flex: 0 0 auto;
  --holo-part-flex: 0 0 auto;
  inline-size: max-content;
  --holo-part-inline-size: max-content;
  --holo-part-width: max-content;
  min-inline-size: 0;
  --holo-part-min-inline-size: 0;
  --holo-part-min-width: 0;
}

:scope [data-holo-part-id="Desktop.Files.Path"] > [data-eos-crumb-hidden] {
  display: none;
}

:scope [data-eos-crumb-menu] {
  position: relative;
  flex: none;
  order: -1;
}

:scope [data-eos-crumb-menu] summary {
  display: grid;
  place-items: center;
  inline-size: 3.2rem;
  block-size: 3.2rem;
  border-radius: 0.6rem;
  color: var(--holo-muted);
  list-style: none;
  cursor: pointer;
}

:scope [data-eos-crumb-menu] summary::-webkit-details-marker { display: none; }
:scope [data-eos-crumb-menu] summary:hover { background: color-mix(in srgb, var(--holo-accent) 10%, transparent); }

:scope [data-eos-crumb-menu] > div {
  position: absolute;
  z-index: 10;
  inset-block-start: calc(100% + 0.6rem);
  inset-inline-start: 0;
  display: grid;
  min-inline-size: 18rem;
  max-inline-size: 32rem;
  padding: 0.5rem;
  border: 1px solid var(--holo-border);
  border-radius: 0.9rem;
  background: var(--holo-panel);
  box-shadow: 0 0.8rem 2.4rem rgba(20, 40, 64, 0.18);
}

:scope [data-eos-crumb-menu] > div > button {
  padding: 0.6rem 1rem;
  border: 0;
  background: transparent;
  color: var(--holo-fg);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

:scope [data-eos-crumb-menu] > div > button:hover { background: color-mix(in srgb, var(--holo-accent) 10%, transparent); }

/* Holo fija en línea el tamaño del glifo a su contenido; el retrato lo pisa. */
:scope [data-holo-part-id="Desktop.Start.Identity"] [data-holo-role="Icon"] {
  display: inline-grid;
  place-items: center;
  flex: none;
  border: 1px solid rgba(40, 120, 189, 0.18);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #f6fbff, #cfe3f6);
  color: #2878bd;
  font-size: 2.4rem;
}
:scope [data-holo-part-id="Desktop.Start.Identity"] [data-holo-role="Icon"]:not(#eos-priority) {
  inline-size: 4.4rem;
  --holo-part-inline-size: 4.4rem;
  --holo-part-width: 4.4rem;
  block-size: 4.4rem;
  --holo-part-block-size: 4.4rem;
  --holo-part-height: 4.4rem;
}

:scope [data-holo-part-id="Desktop.Start.Identity.Name"] {
  color: var(--holo-fg);
  font-size: 1.5rem;
  font-weight: 600;
}

:scope [data-holo-part-id="Desktop.Start.Identity.Detail"] {
  color: var(--holo-muted);
  font-size: 1.25rem;
}

/* Programas, sesión, perfiles y salir son listas de filas, una por línea. La
   sesión abre grupo con una raya y salir va en su propio pie. */
:scope [data-holo-part-id="Desktop.Start"] [data-holo-type="Collection.List"][data-holo-presentation="Menu"] {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.1rem;
  padding: 0;
  border: 0;
  background: transparent;
}

:scope [data-holo-part-id="Desktop.Start"] [data-holo-type="Collection.List"][data-holo-control-id="Desktop.Start.Panel"] {
  padding-block: 0.5rem;
}

:scope [data-holo-part-id="Desktop.Start"] [data-holo-type="Collection.List"][data-holo-control-id="Desktop.Start.Session"] {
  padding-block-start: 0.5rem;
  border-block-start: 1px solid var(--holo-border);
}

:scope [data-holo-part-id="Desktop.Start"] [data-holo-type="Collection.List"][data-holo-control-id="Desktop.Start.Profiles"] {
  padding-block-end: 0;
}

:scope [data-holo-part-id="Desktop.Start"] [data-holo-type="Collection.List"][data-holo-control-id="Desktop.Start.Leave"] {
  padding-block-start: 0.5rem;
  border-block-start: 1px solid var(--holo-border);
}

:scope [data-holo-part-id="Desktop.Start"] [data-holo-presentation="Menu"] > [data-holo-role="Item"] {
  min-block-size: 4.2rem;
  margin: 0;
  padding: 0.9rem 1.1rem;
  gap: 1.2rem;
  border: 0;
  border-radius: 0.8rem;
  background: transparent;
  box-shadow: none;
  color: var(--holo-fg);
}

:scope [data-holo-part-id="Desktop.Start"] [data-holo-presentation="Menu"] > [data-holo-role="Item"]:is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--holo-accent) 10%, transparent);
  outline: 0;
}


:scope [data-holo-part-id="Desktop.Start"] [data-holo-presentation="Menu"] > [data-holo-role="Item"] > [data-holo-role="Icon"] {
  inline-size: 2.2rem;
  block-size: 2.2rem;
  color: var(--holo-muted);
  font-size: 2rem;
}


/* Cada fila cabe en una línea y todas con la misma letra. Lleva los tres
   atributos porque la presentación de menú declara su propio recorte en
   varias líneas. */
:scope [data-holo-part-id="Desktop.Start"] [data-holo-type="Collection.List"][data-holo-presentation="Menu"] [data-holo-role="Title"] {
  display: block;
  overflow: hidden;
  color: var(--holo-fg);
  font-size: 1.45rem;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-line-clamp: 1;
}

:scope [data-holo-part-id="Desktop.Start"]:has([data-holo-part-id="Desktop.Start.Visit"]) [data-holo-part-id="Desktop.Start.Identity"] [data-holo-role="Title"] {
  color: var(--holo-muted);
}

/* Ruta de la ventana de carpeta: migas sobre una banda clara, con el tramo
   actual destacado, como en el legacy. */
:scope [data-holo-type="Layout.Window"] [data-holo-type="Collection.List"][data-holo-presentation="Bar"] {
  min-block-size: 2.8rem;
  padding: 0.35rem 0.5rem;
  border-block-end: 1px solid rgba(128, 111, 90, 0.18);
  background: var(--holo-panel);
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Collection.List"][data-holo-presentation="Bar"] > [data-holo-role="Item"] {
  min-block-size: 2.6rem;
  padding: 0 0.9rem;
  border-radius: 0.4rem;
  color: var(--holo-fg);
  font-size: 1.18rem;
}

/* Una miga o una pestaña es una sola etiqueta: partirla en dos líneas la hace
   parecer dos. Si no cabe, se recorta con puntos suspensivos. */
:scope [data-holo-type="Layout.Window"] [data-holo-type="Collection.List"][data-holo-presentation="Bar"] > [data-holo-role="Item"] [data-holo-role="Title"] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* El tramo actual lo declara el compositor: en una carpeta es el último de la
   ruta, en Ajustes la pestaña abierta y en un documento la página. */
:scope [data-holo-type="Layout.Window"] [data-holo-type="Collection.List"][data-holo-presentation="Bar"] > [data-holo-role="Item"][aria-current="true"] {
  background: color-mix(in srgb, var(--holo-accent) 14%, var(--holo-card-bg));
  color: var(--holo-accent);
  font-weight: 700;
}

/* Pestañas de un programa (`Tab-*`, en Ajustes): un control segmentado
   centrado bajo la barra de título, como el conmutador de la calculadora. La
   lista es el carril, claro y a la medida de sus pestañas; la abierta es una
   píldora blanca en relieve con el azul de la mesa y las demás, gris pizarra
   con una raya fina entre ellas. Una raya separa el control del contenido.
   Las pestañas de archivo del Editor, que se cierran («Tab-Close»), no. */
:scope [data-holo-type="Layout.Window"] [data-holo-type="Collection.List"][data-holo-presentation="Bar"]:has(> [data-holo-control-id^="Tab-"]):not(:has(> [data-holo-control-id="Tab-Close"])) {
  min-block-size: 0;
  padding: 0.35rem;
  gap: 0;
  border: 1px solid var(--holo-border);
  border-radius: 1.2rem;
  background: color-mix(in srgb, var(--holo-card-bg) 75%, transparent);
  box-shadow: inset 0 1px 2px rgba(60, 48, 34, 0.06);
}
:scope [data-holo-type="Layout.Window"] [data-holo-type="Collection.List"][data-holo-presentation="Bar"]:has(> [data-holo-control-id^="Tab-"]):not(:has(> [data-holo-control-id="Tab-Close"])):not(#eos-priority) {
  inline-size: fit-content;
  --holo-part-inline-size: fit-content;
  --holo-part-width: fit-content;
  max-inline-size: calc(100% - 3.2rem);
  --holo-part-max-inline-size: calc(100% - 3.2rem);
  --holo-part-max-width: calc(100% - 3.2rem);
  margin: 1.2rem auto 1.1rem;
  contain: none;
  --holo-part-contain: none;
  clip-path: none;
  --holo-part-clip-path: none;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Collection.List"][data-holo-presentation="Bar"]:has(> [data-holo-control-id^="Tab-"]):not(:has(> [data-holo-control-id="Tab-Close"])) > [data-holo-role="Item"] {
  position: relative;
  flex: 0 1 auto;
  justify-content: center;
  inline-size: 14.5rem;
  min-inline-size: 10.5rem;
  min-block-size: 3.6rem;
  padding: 0 1.6rem;
  gap: 0.8rem;
  border: 0;
  border-radius: 0.9rem;
  background: transparent;
  box-shadow: none;
  color: var(--holo-muted);
  font-size: 1.4rem;
  font-weight: 500;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Collection.List"][data-holo-presentation="Bar"]:has(> [data-holo-control-id^="Tab-"]):not(:has(> [data-holo-control-id="Tab-Close"])) > [data-holo-role="Item"] [data-holo-role="Icon"] {
  color: inherit;
  font-size: 1.6rem;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Collection.List"][data-holo-presentation="Bar"]:has(> [data-holo-control-id^="Tab-"]):not(:has(> [data-holo-control-id="Tab-Close"])) > [data-holo-role="Item"]:not([aria-current="true"]):is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--holo-accent) 9%, transparent);
  color: var(--holo-fg);
  outline: 0;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Collection.List"][data-holo-presentation="Bar"]:has(> [data-holo-control-id^="Tab-"]):not(:has(> [data-holo-control-id="Tab-Close"])) > [data-holo-role="Item"][aria-current="true"] {
  background: var(--holo-panel-raised);
  box-shadow: 0 1px 3px rgba(40, 32, 22, 0.16),
    0 0 0 1px rgba(110, 98, 82, 0.08);
  color: var(--holo-accent);
  font-weight: 600;
}

/* La raya entre dos pestañas cerradas; junto a la abierta sobra. */
/* Ajustes conserva sus siete secciones legibles en una sola fila. */
:scope [data-holo-type="Layout.Window"] [data-holo-type="Collection.List"][data-holo-presentation="Bar"]:has(> [data-holo-control-id="Tab-Startup"]) {
  overflow-x: auto;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Collection.List"][data-holo-presentation="Bar"]:has(> [data-holo-control-id="Tab-Startup"]) > [data-holo-role="Item"]:not(#eos-priority) {
  inline-size: auto;
  --holo-part-inline-size: auto;
  --holo-part-width: auto;
  min-inline-size: 0;
  --holo-part-min-inline-size: 0;
  --holo-part-min-width: 0;
  max-inline-size: none;
  --holo-part-max-inline-size: none;
  --holo-part-max-width: none;
  padding-inline: 0.8rem;
  gap: 0.6rem;
  --holo-part-gap: 0.6rem;
  font-size: 1.2rem;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Collection.List"][data-holo-presentation="Bar"]:has(> [data-holo-control-id^="Tab-"]):not(:has(> [data-holo-control-id="Tab-Close"])) > [data-holo-role="Item"]:not([aria-current="true"]) + [data-holo-role="Item"]:not([aria-current="true"])::before {
  content: "";
  position: absolute;
  inset-block: 0.9rem;
  inset-inline-start: 0;
  border-inline-start: 1px solid var(--holo-border);
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Collection.List"][data-holo-presentation="Bar"]:has(> [data-holo-control-id^="Tab-"]):not(:has(> [data-holo-control-id="Tab-Close"])) + * {
  padding-block-start: 1.6rem;
  border-block-start: 1px solid var(--holo-border);
}

/* Carpeta, como el explorador del legacy: una sola barra con atrás y adelante,
   la ruta en una píldora que empieza por la casa y, a la derecha, crear y
   traer. La barra se reconoce por los botones `Folder.*` del compositor. */
:scope [data-holo-role="Stack"]:has(> [data-holo-type="Navigation.Action.Bar"] > [data-holo-control-id^="Folder."]) {
  padding: 0.5rem 0.8rem;
  border-block-end: 1px solid rgba(93, 105, 120, 0.17);
  background: var(--holo-panel);
}

:scope [data-holo-role="Stack"]:has(> [data-holo-type="Navigation.Action.Bar"] > [data-holo-control-id^="Folder."]) > [data-holo-type="Navigation.Action.Bar"] {
  gap: 0.3rem;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

:scope [data-holo-role="Stack"]:has(> [data-holo-type="Navigation.Action.Bar"] > [data-holo-control-id^="Folder."]) > [data-holo-type="Navigation.Action.Bar"] > * {
  --holo-control-square-size: 2.65rem;
  border: 1px solid rgba(85, 108, 130, 0.16);
  border-radius: 0.45rem;
  background: var(--holo-panel-raised);
  color: var(--holo-fg);
}

:scope [data-holo-role="Stack"]:has(> [data-holo-type="Navigation.Action.Bar"] > [data-holo-control-id^="Folder."]) > [data-holo-type="Navigation.Action.Bar"] > *:hover:not(:disabled) {
  background: var(--holo-panel-raised);
}

:scope [data-holo-role="Stack"]:has(> [data-holo-type="Navigation.Action.Bar"] > [data-holo-control-id^="Folder."]) > [data-holo-type="Navigation.Action.Bar"] > *:disabled {
  opacity: 0.38;
  cursor: default;
}

/* La ruta es una píldora: cada tramo un segmento y el actual, resaltado. */
:scope [data-holo-role="Stack"]:has(> [data-holo-type="Navigation.Action.Bar"] > [data-holo-control-id^="Folder."]) > [data-holo-type="Collection.List"][data-holo-presentation="Bar"] {
  gap: 0;
  min-block-size: 2.65rem;
  padding: 0;
  overflow-x: auto;
  border: 1px solid rgba(72, 94, 118, 0.14);
  border-radius: 0.45rem;
  background: var(--holo-panel-raised);
}

:scope [data-holo-role="Stack"]:has(> [data-holo-type="Navigation.Action.Bar"] > [data-holo-control-id^="Folder."]) > [data-holo-type="Collection.List"][data-holo-presentation="Bar"] > [data-holo-role="Item"] {
  flex: none;
  min-block-size: 2.65rem;
  padding: 0 0.9rem;
  border-radius: 0;
  border-inline-end: 1px solid rgba(75, 101, 128, 0.12);
  background: var(--holo-panel-raised);
  color: var(--holo-fg);
  font-size: 1.2rem;
}

:scope [data-holo-role="Stack"]:has(> [data-holo-type="Navigation.Action.Bar"] > [data-holo-control-id^="Folder."]) > [data-holo-type="Collection.List"][data-holo-presentation="Bar"] > [data-holo-role="Item"][aria-current="true"] {
  background: color-mix(in srgb, var(--holo-accent) 14%, var(--holo-panel-raised));
  box-shadow: inset 0 1px 3px rgba(36, 61, 89, 0.16);
  color: var(--holo-accent);
  font-weight: 700;
}

/* Una carpeta reparte sus elementos en filas según el ancho de su ventana,
   como un explorador de archivos: al redimensionar se recolocan solos y nunca
   se montan. El tablero de Holo pide un sitio por elemento para poder
   arrastrarlo; aquí ese sitio se ignora. Lo que no cabe abajo se alcanza con
   la rueda. */
:scope [data-holo-type="Layout.Window"] [data-holo-type="Collection.List"][data-holo-presentation="Board"] {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0.6rem;
  box-sizing: border-box;
  padding: 1.6rem;
  overflow-x: hidden;
  overflow-y: auto;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Collection.List"][data-holo-presentation="Board"] > [data-holo-role="Item"] {
  flex: 0 0 9.6rem;
  box-sizing: border-box;
  block-size: 10.4rem;
  align-content: start;
}
:scope [data-holo-type="Layout.Window"] [data-holo-type="Collection.List"][data-holo-presentation="Board"] > [data-holo-role="Item"]:not(#eos-priority) {
  position: relative;
  --holo-part-position: relative;
  inset: auto;
  --holo-part-inset: auto;
  --holo-part-inset-block-start: auto;
  --holo-part-inset-inline-start: auto;
  --holo-part-inset-block-end: auto;
  --holo-part-inset-inline-end: auto;
  translate: none;
  --holo-part-translate: none;
}

/* Arrastrar y soltar. La copia que sigue al puntero no gira ni lleva caja,
   venga de la mesa o de una ventana: el icono viaja tal cual y sólo el
   original queda atenuado en su sitio (Martín, 9-10: sin «boxado»). */
:scope body > [data-holo-type="Collection.List"][data-holo-presentation="Board"][aria-hidden="true"] > [data-holo-role="Item"] {
  rotate: none;
  scale: 1;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  opacity: 0.92;
}

/* Lo que se lleva se ve cogido: su icono proyecta una sombra suave bajo el
   puntero (Martín, 8-10: un efecto mejor al arrastrar). */
:scope body > [data-holo-type="Collection.List"][data-holo-presentation="Board"][aria-hidden="true"] > [data-holo-role="Item"] :is([data-holo-role="Image"], [data-holo-role="Icon"]) {
  filter: drop-shadow(0 .8rem 1.1rem rgba(18, 28, 48, .32));
}


/* Qué recibe lo que se arrastra se ve mientras dura el gesto. La clase de lo
   agarrado y lo que acepta cada carpeta viajan en su `Facet` (`Kind.*`,
   `Accepts.*`, de la tabla `Drop` de la mesa); Holo List marca receptivo
   (`data-holo-drop-accept`) el item o el tablero que lo aceptaría y lo pinta
   sutil (Martín, 9-10: sin «+» ni recuadro); Eos sólo pone su azul. Lo que no
   lo acepta no cambia. La mesa no se tiñe: es la superficie por defecto. */
:scope [data-holo-type="Layout.Window"] [data-holo-presentation="Board"][data-holo-drop-accept="true"]:not(#eos-priority) {
  background: rgba(64, 156, 255, 0.12);
}

/* El nombre de la copia se lee también encima de una ventana clara. */
:scope body > [data-holo-type="Collection.List"][data-holo-presentation="Board"][aria-hidden="true"] [data-holo-role="Title"]:not(#eos-priority) {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7), 0 0 1px rgba(0, 0, 0, 0.9);
}

/* Lo receptivo usa el azul de Eos; la copia se aclara y encoge un poco su
   dibujo (estilo de Holo List). */
:scope [data-holo-drop-accept="true"] {
  --holo-accent: rgb(64, 156, 255);
}

:scope body[data-holo-drag-accept="true"] > [data-holo-type="Collection.List"][data-holo-presentation="Board"][aria-hidden="true"] > [data-holo-role="Item"]:not(#eos-priority) {
  opacity: .75;
}

:scope body[data-holo-drag-accept="true"] > [data-holo-type="Collection.List"][data-holo-presentation="Board"][aria-hidden="true"] > [data-holo-role="Item"] > *:not(#eos-priority) {
  scale: .9;
}

/* Dentro de la carpeta los nombres van en la tinta de la ventana: la sombra
   de los de la mesa sólo hace falta sobre el fondo de escritorio. */
:scope [data-holo-type="Layout.Window"] [data-holo-type="Collection.List"][data-holo-presentation="Board"] [data-holo-role="Title"] {
  color: var(--holo-fg);
  text-shadow: none;
}

/* Pantalla completa es un botón más de la barra: el mismo cristal, un filo
   claro que lo separa de las ventanas y el dibujo en blanco. La barra de
   acciones trae su panel crema y su botón con borde; aquí no corresponden. */
:scope [data-holo-part-id="Desktop.Screen"] {
  /* Un control cuadrado mide lo que dice este token: aquí, el alto de la
     barra, para que todo el tramo responda al puntero. */
  --holo-control-square-size: 4.8rem;
  padding: 0;
  border-inline-start: 1px solid rgba(255, 255, 255, 0.18);
  background: transparent;
  box-shadow: none;
}

:scope [data-holo-part-id="Desktop.Screen"] [data-holo-role="Button"] {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(255, 255, 255, 0.92);
}

:scope [data-holo-part-id="Desktop.Screen"] [data-holo-role="Button"]:hover,
:scope [data-holo-part-id="Desktop.Clock.Panel"] > [data-holo-type="Control.Trigger"]:is(:hover, [aria-expanded="true"]),
:scope [data-holo-control-id="Desktop.Taskbar.Windows"] > [data-holo-role="Item"]:not([data-holo-item-selected="true"]):hover {
  background: rgba(255, 255, 255, 0.14);
}

/* La hora abre su panel desde un botón del alto de la barra, recto como
   pantalla completa y Aura, para que los tres compartan el mismo hover. */
:scope [data-holo-part-id="Desktop.Clock.Panel"] > [data-holo-type="Control.Trigger"] {
  border-radius: 0;
}

/* La hora cierra la barra por la derecha, como en el legacy. */
:scope [data-holo-part-id="Desktop.Clock"] {
  display: flex;
  align-items: center;
  align-self: center;
  margin-inline-start: auto;
  padding-inline: 1.2rem;
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.25rem;
  white-space: nowrap;
}

/* Transiciones: una sola duración y una sola curva para toda la mesa, y las
   entradas son animaciones CSS de creación (lo que Holo pinta de nuevo entra;
   lo que ya estaba no se mueve). Nunca se anima la opacidad de una pantalla
   completa: taparía la mesa mientras Holo recompone. */
:scope {
  --eos-time: 220ms;
  --eos-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}


:scope [data-holo-part-id="User.Chooser"] > *,
:scope [data-holo-part-id="Desktop.Lock.Panel"] > * {
  --holo-enter-y: 1.2rem;
  --holo-enter-scale: 0.985;
  animation: holo-enter calc(var(--eos-time) * 1.6) var(--eos-ease) 60ms both;
}

@media (prefers-reduced-motion: reduce) {
  :scope [data-holo-part-id="User.Chooser"] > *,
  :scope [data-holo-part-id="Desktop.Lock.Panel"] > * {
    animation: none;
  }
}

/* Las pantallas de acceso son un escenario, no una página. `Web.js` (Fit_Stage)
   mide lo que ocupa su contenido a 1rem = 10px y fija la raíz con la que cabe,
   sea cual sea el alto o el ancho del viewport: todo lo que está en `rem`
   escala en línea recta. Esta regla es sólo el valor de partida antes de que
   `Web.js` mida. Holo mide en una raíz fija de 10 px; estas dos superficies son
   la excepción declarada, porque no alojan ventanas ni geometría en píxeles. */
:scope:has([data-holo-part-id="User.Panel"], [data-holo-part-id="Desktop.Lock"]) {
  font-size: clamp(5px, min(calc(100vh / 76), calc(100vw / 86)), 14px);
}
/* El acceso no se mide en el navegador (ver Web.js): su raíz sale sólo del
   viewport, con la escala con la que su vista más alta (la ficha de una
   persona) ocupa la pantalla sin sobrar ni faltar. */
:scope:has([data-holo-part-id="User.Panel"]) {
  font-size: clamp(5px, min(calc(100vh / 54), calc(100vw / 100)), 18px);
}
/* La entrada con cuenta mide más de alto que el selector: el reloj y la
   tarjeta entera caben desde un portátil pequeño hasta un monitor grande. */
:scope:has([data-holo-part-id="Access.Page"]) {
  font-size: clamp(5px, min(calc(100vh / 72), calc(100vw / 90)), 15px);
}
/* El alta pide cinco campos: la misma tarjeta, a una escala que también cabe. */
:scope:has([data-holo-part-id="Access.Join"]) {
  font-size: clamp(5px, min(calc(100vh / 98), calc(100vw / 90)), 15px);
}

/* La mesa cerrada es la misma puerta que el acceso: sobre el fondo y sin
   panel, el retrato redondo con el nombre, la contraseña y el cambio de cuenta. */
:scope [data-holo-part-id="Desktop.Lock"] {
  align-content: start;
  overflow-y: auto;
}

:scope [data-holo-part-id="Desktop.Lock.Panel"] {
  place-self: center;
  padding: 0;
  color: #ffffff;
  text-align: center;
}
:scope [data-holo-part-id="Desktop.Lock.Panel"]:not(#eos-priority) {
  inline-size: 52rem;
  --holo-part-inline-size: 52rem;
  --holo-part-width: 52rem;
}

:scope [data-holo-part-id="Desktop.Lock.Header"] {
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
}

:scope [data-holo-part-id="Desktop.Lock.Header"] > [data-holo-role="Main"] {
  display: grid;
  justify-items: center;
  gap: 1.4rem;
  inline-size: 100%;
}

:scope [data-holo-part-id="Desktop.Lock.Header"] > [data-holo-role="Main"] > [data-holo-role="Main"] {
  display: grid;
  justify-items: center;
}

:scope [data-holo-part-id="Desktop.Lock.Header"] > [data-holo-role="Main"] > [data-holo-role="Icon"] {
  display: grid;
  place-items: center;
  inline-size: 11rem;
  block-size: 11rem;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, rgba(255, 255, 255, 0.92), rgba(222, 236, 250, 0.72));
  -webkit-backdrop-filter: var(--eos-glass-soft);
  backdrop-filter: var(--eos-glass-soft);
  box-shadow: var(--eos-shadow-float);
  color: #2878bd;
  font-size: 4.4rem;
}

:scope [data-holo-part-id="Desktop.Lock.Header"] > [data-holo-role="Main"] > [data-holo-role="Icon"] :is([data-holo-role="IconVisual"], [data-holo-role="Icon"]) {
  inline-size: auto;
  block-size: auto;
  font-size: 4.4rem;
}

:scope [data-holo-part-id="User.Portrait"],
:scope [data-holo-part-id="Desktop.Lock.Portrait"] {
  display: block;
  margin-inline: auto;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0.6rem 2rem rgba(10, 30, 60, 0.24);
}
:scope [data-holo-part-id="User.Portrait"]:not(#eos-priority),
:scope [data-holo-part-id="Desktop.Lock.Portrait"]:not(#eos-priority) {
  inline-size: 11rem;
  --holo-part-inline-size: 11rem;
  --holo-part-width: 11rem;
  block-size: 11rem;
  --holo-part-block-size: 11rem;
  --holo-part-height: 11rem;
}

:scope [data-holo-part-id="Desktop.Lock.Panel"]:has([data-holo-part-id="Desktop.Lock.Portrait"]) [data-holo-part-id="Desktop.Lock.Header"] > [data-holo-role="Main"] > [data-holo-role="Icon"] {
  display: none;
}

:scope [data-holo-part-id="Desktop.Lock.Header"] [data-holo-role="Title"] {
  color: #ffffff;
  font-size: 2.8rem;
  font-weight: 400;
  text-shadow: 0 0.1rem 0.8rem rgba(10, 30, 60, 0.45);
}

:scope [data-holo-part-id="Desktop.Lock.Header"] small[data-holo-role="Text"] {
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.5rem;
  text-shadow: 0 0.1rem 0.6rem rgba(10, 30, 60, 0.45);
}

/* Cambiar de cuenta usa el mismo cristal y tinta que los controles de acceso. */
:scope [data-holo-part-id="Desktop.Lock.Others"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  min-block-size: 4rem;
  padding: 0.9rem 1.4rem;
  border-radius: var(--eos-radius-pill);
  margin-block-start: 2rem;
  justify-self: center;
  font-size: 1.4rem;
  font-weight: 400;
}

:scope [data-holo-part-id="Desktop.Lock.Others"]:focus-visible {
  outline: 2px solid white;
  outline-offset: 2px;
}

/* La contraseña, en el acceso y en la mesa cerrada, como en la puerta de un
   Mac: un campo redondeado de cristal con la flecha de entrar al lado, sin
   etiqueta a la vista ni banda de acciones. El campo conserva su nombre para
   quien lo lee en voz alta, y un error se dice debajo, en blanco. */
:scope :is([data-holo-part-id="User.Enter"], [data-holo-part-id="Desktop.Lock.Enter"]) {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.8rem;
  justify-self: center;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
:scope :is([data-holo-part-id="User.Enter"], [data-holo-part-id="Desktop.Lock.Enter"]):not(#eos-priority) {
  display: grid;
  --holo-part-display: grid;
  inline-size: min(38rem, 100%);
  --holo-part-inline-size: min(38rem, 100%);
  --holo-part-width: min(38rem, 100%);
}

:scope :is([data-holo-part-id="User.Enter"], [data-holo-part-id="Desktop.Lock.Enter"]) > [data-holo-role="Stack"] {
  grid-row: 1;
  grid-column: 1;
  padding: 0;
}

:scope :is([data-holo-part-id="User.Enter"], [data-holo-part-id="Desktop.Lock.Enter"]) > [data-holo-role="Toolbar"] {
  grid-row: 1;
  grid-column: 2;
  min-block-size: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

:scope :is([data-holo-part-id="User.Enter"], [data-holo-part-id="Desktop.Lock.Enter"]) > :not([data-holo-role="Stack"], [data-holo-role="Toolbar"]) {
  grid-column: 1 / -1;
}

:scope :is([data-holo-part-id="User.Enter"], [data-holo-part-id="Desktop.Lock.Enter"]) [data-holo-field="Password"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.6rem;
}

:scope :is([data-holo-part-id="User.Enter"], [data-holo-part-id="Desktop.Lock.Enter"]) [data-holo-field="Password"] > [data-holo-role="Label"] {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

:scope :is([data-holo-part-id="User.Enter"], [data-holo-part-id="Desktop.Lock.Enter"]) [data-holo-field="Password"] > [data-holo-role="Input"] {
  display: flex;
  align-items: center;
  min-block-size: 4.4rem;
  padding: 0 0.6rem 0 2rem;
  border-radius: var(--eos-radius-pill);
}

:scope :is([data-holo-part-id="User.Enter"], [data-holo-part-id="Desktop.Lock.Enter"]) [data-holo-field="Password"] input {
  flex: 1;
  min-inline-size: 0;
  min-block-size: 0;
  block-size: 4.2rem;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #ffffff;
  font-size: 1.7rem;
  outline: 0;
}

:scope :is([data-holo-part-id="User.Enter"], [data-holo-part-id="Desktop.Lock.Enter"]) [data-holo-field="Password"] input::placeholder {
  color: rgba(255, 255, 255, 0.82);
}

:scope :is([data-holo-part-id="User.Enter"], [data-holo-part-id="Desktop.Lock.Enter"]) [data-holo-field="Password"] > [data-holo-role="Input"] > button {
  display: grid;
  place-items: center;
  inline-size: 3.2rem;
  min-block-size: 3.2rem;
  block-size: 3.2rem;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(255, 255, 255, 0.9);
}

:scope :is([data-holo-part-id="User.Enter"], [data-holo-part-id="Desktop.Lock.Enter"]) [data-holo-password="Toggle"] > span:not([hidden]),
:scope :is([data-holo-part-id="User.Enter"], [data-holo-part-id="Desktop.Lock.Enter"]) [data-holo-password="Toggle"] :is([data-holo-role="Icon"], [data-holo-role="IconVisual"]) {
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  font-size: 1.8rem;
  line-height: 1;
}

:scope :is([data-holo-part-id="User.Enter"], [data-holo-part-id="Desktop.Lock.Enter"]) [data-holo-field="Password"] > [data-holo-role="Error"] {
  color: #ffffff;
  font-size: 1.3rem;
  text-align: center;
  text-shadow: 0 1px 2px rgba(10, 30, 60, 0.6);
}

/* El aviso de una contraseña mala va debajo del campo, en blanco sobre el
   fondo, no en una caja con letra roja que no se lee sobre el bosque. */
:scope :is([data-holo-part-id="User.Enter"], [data-holo-part-id="Desktop.Lock.Enter"]) > [data-holo-form-summary] {
  display: grid;
  justify-items: center;
  gap: 0.2rem;
  grid-row: 2;
  padding: 0;
  outline: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #ffffff;
  font-size: 1.3rem;
  text-align: center;
  text-shadow: 0 1px 2px rgba(10, 30, 60, 0.6);
}

:scope :is([data-holo-part-id="User.Enter"], [data-holo-part-id="Desktop.Lock.Enter"]) > [data-holo-form-summary] * {
  color: inherit;
}

:scope :is([data-holo-part-id="User.Enter"], [data-holo-part-id="Desktop.Lock.Enter"]) > [data-holo-form-summary] :is(p, ul) {
  margin: 0;
  padding: 0;
  list-style: none;
}

:scope :is([data-holo-part-id="User.Enter"], [data-holo-part-id="Desktop.Lock.Enter"]) [data-holo-field="Password"] > [data-holo-role="Input"],
:scope :is([data-holo-part-id="User.Enter"], [data-holo-part-id="Desktop.Lock.Enter"]) [data-holo-control-id="Submit"],
:scope [data-holo-part-id="Desktop.Lock.Others"] {
  border: 1px solid rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: var(--eos-glass-soft);
  backdrop-filter: var(--eos-glass-soft);
  box-shadow: 0 0.4rem 1.4rem rgba(10, 30, 60, 0.18);
  color: #ffffff;
}

:scope :is([data-holo-part-id="User.Enter"], [data-holo-part-id="Desktop.Lock.Enter"]) [data-holo-control-id="Submit"] {
  display: grid;
  place-items: center;
  inline-size: 4.6rem;
  min-inline-size: 0;
  block-size: 4.6rem;
  padding: 0;
  border-radius: 50%;
  line-height: 1;
}

:scope :is([data-holo-part-id="User.Enter"], [data-holo-part-id="Desktop.Lock.Enter"]) [data-holo-control-id="Submit"]:is(:hover, :focus-visible),
:scope [data-holo-part-id="Desktop.Lock.Others"]:is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.42);
}

:scope :is([data-holo-part-id="User.Enter"], [data-holo-part-id="Desktop.Lock.Enter"]) [data-holo-control-id="Submit"] > [data-holo-role="Text"] {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

:scope :is([data-holo-part-id="User.Enter"], [data-holo-part-id="Desktop.Lock.Enter"]) [data-holo-control-id="Submit"] [data-holo-role="Icon"] {
  display: grid;
  place-items: center;
  inline-size: 2.2rem;
  block-size: 2.2rem;
  color: #ffffff;
  font-size: 2.2rem;
  line-height: 1;
}

:scope :is([data-holo-part-id="User.Enter"], [data-holo-part-id="Desktop.Lock.Enter"]) [data-holo-control-id="Submit"] [data-holo-role="IconVisual"] {
  display: grid;
  place-items: center;
  font-size: 2.2rem;
  line-height: 1;
}

/* Acceso: la hora ocupa una región estable y el selector cabe entero en un
   panel separado, incluso cuando el reloj se recompone tras su refresco. */
:scope [data-holo-part-id="User.Panel"] {
  place-self: center;
  padding: 0;
  color: #ffffff;
  text-align: center;
}
:scope [data-holo-part-id="User.Panel"]:not(#eos-priority) {
  inline-size: 76rem;
  --holo-part-inline-size: 76rem;
  --holo-part-width: 76rem;
  max-inline-size: 76rem;
  --holo-part-max-inline-size: 76rem;
  --holo-part-max-width: 76rem;
}

/* La hora no se mueve de un paso a otro: el panel cuelga de arriba en vez de
   centrarse, porque cada paso mide distinto y, centrado, la hora bajaba al
   elegir cuenta hasta dejar la fecha sobre la nieve del fondo. */
:scope [data-holo-part-id="User.Route"]:not(#eos-priority) {
  align-content: start;
  --holo-part-align-content: start;
}

/* Sin caja: lo que hay que leer va directo sobre el fondo, y un velo azul que
   sube desde abajo le da el contraste. Es una sombra interior, no otra capa. */
:scope [data-holo-part-id="User.Route"] {
  background: radial-gradient(
    ellipse 62% 58% at 50% 64%,
    rgba(10, 28, 58, 0.62),
    rgba(10, 28, 58, 0.32) 55%,
    rgba(10, 28, 58, 0) 100%
  );
  box-shadow: inset 0 -46rem 26rem -18rem rgba(10, 28, 58, 0.4);
}

:scope [data-holo-part-id="Desktop.Lock"] {
  box-shadow: inset 0 -46rem 26rem -18rem rgba(10, 28, 58, 0.4);
}

/* El velo de la puerta es una capa detrás de todo el contenido de la mesa
   cerrada: las piezas de Holo recortan lo que se sale de su caja, así que no
   puede colgar del panel. */
:scope [data-holo-part-id="Desktop.Lock"] {
  isolation: isolate;
}

:scope [data-holo-part-id="Desktop.Lock"]::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 46% 42% at 50% 64%,
    rgba(10, 28, 58, 0.6),
    rgba(10, 28, 58, 0.3) 55%,
    rgba(10, 28, 58, 0) 100%
  );
}

/* Refresh de Clock puede insertar un portador entre Route y Panel. */
:scope [data-holo-part-id="User.Route"] [data-holo-part-id="User.Panel"] {
  margin-block-start: 2.4rem;
}

:scope [data-holo-part-id="User.Time"] {
  align-content: start;
  min-block-size: 10.6rem;
  margin-block-end: 1.2rem;
}

:scope [data-holo-part-id="User.Chooser"] {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* En la mesa cerrada la hora y la fecha van en su propio hueco, para que el
   refresco de la hora no recomponga la contraseña. El selector descendiente
   conserva el margen cuando Holo inserta el portador del reloj. */
:scope [data-holo-part-id="Desktop.Lock"] [data-holo-part-id="Desktop.Lock.Time"] {
  margin-block-start: 4rem;
}

/* Descendiente, no hijo directo: la región del reloj es "Silent" (se
   refresca sola cada 15s) y Holo envuelve su contenido en un <main> extra al
   refrescar que no está en el primer render. Con `>` el estilo se perdía
   pasados los primeros 15s (bug real, visto en el banco): el hueco pasaba de
   80px blanco a 14px por defecto en cuanto llegaba el primer refresco. */
:scope [data-holo-part-id="User.Panel"] [data-holo-part-id="User.Clock"],
:scope [data-holo-part-id="Desktop.Lock.Time"] [data-holo-part-id="Desktop.Lock.Clock"] {
  padding: 0;
  color: #ffffff;
  font-size: 9.6rem;
  font-variant-numeric: tabular-nums;
  font-weight: 200;
  letter-spacing: -0.02em;
  line-height: 1;
  text-align: center;
  text-shadow: 0 0.2rem 1.6rem rgba(10, 30, 60, 0.28);
}

:scope [data-holo-part-id="User.Panel"] [data-holo-part-id="User.Clock"] {
  display: grid;
  place-items: center;
  block-size: 8.4rem;
  margin: 0;
  font-size: 7.2rem;
}

:scope [data-holo-part-id="User.Panel"] [data-holo-part-id="User.Date"],
:scope [data-holo-part-id="Desktop.Lock.Time"] [data-holo-part-id="Desktop.Lock.Date"] {
  padding: 0 0 5rem;
  color: rgba(255, 255, 255, 0.96);
  font-size: 2.4rem;
  font-weight: 300;
  text-align: center;
  text-shadow:
    0 1px 2px rgba(10, 30, 60, 0.45),
    0 0.1rem 1rem rgba(10, 30, 60, 0.35);
}

:scope [data-holo-part-id="User.Panel"] [data-holo-part-id="User.Date"] {
  margin: 0;
  padding: 0;
  font-size: 1.9rem;
}

:scope [data-holo-part-id="User.Header"] {
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
}

:scope [data-holo-part-id="User.Header"] [data-holo-role="Icon"] {
  display: none;
}

:scope [data-holo-part-id="User.Header"] > [data-holo-role="Main"],
:scope [data-holo-part-id="User.Header"] > [data-holo-role="Main"] > [data-holo-role="Main"] {
  display: grid;
  justify-content: center;
  justify-items: center;
  inline-size: 100%;
}

:scope [data-holo-part-id="User.Header"] [data-holo-role="Title"] {
  color: #ffffff;
  font-size: 2.8rem;
  font-weight: 400;
  text-shadow: 0 0.1rem 0.8rem rgba(10, 30, 60, 0.45);
}

:scope [data-holo-part-id="User.Header"] small[data-holo-role="Text"] {
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.5rem;
  text-shadow: 0 0.1rem 0.6rem rgba(10, 30, 60, 0.45);
}

/* Entrar con la cuenta (User/Access): la hora arriba y, debajo, una tarjeta
   de cristal con el nombre de la cara, sus campos en píldora con su icono
   dentro, la acción en azul a todo el ancho y los enlaces de texto. Es la
   misma puerta que el selector de cuentas: mismo fondo, velo y reloj. */
:scope [data-holo-part-id="Access.Page"] {
  place-self: center;
  margin-block-start: 2.4rem;
  padding: 0 0 3rem;
  color: #ffffff;
  text-align: center;
}
:scope [data-holo-part-id="Access.Page"]:not(#eos-priority) {
  inline-size: 76rem;
  --holo-part-inline-size: 76rem;
  --holo-part-width: 76rem;
  max-inline-size: 100%;
  --holo-part-max-inline-size: 100%;
  --holo-part-max-width: 100%;
}

:scope [data-holo-part-id="Access.Page"] [data-holo-part-id="Access.Clock"] {
  display: grid;
  place-items: center;
  block-size: 8.4rem;
  margin: 0;
  padding: 0;
  color: #ffffff;
  font-size: 7.2rem;
  font-variant-numeric: tabular-nums;
  font-weight: 200;
  letter-spacing: -0.02em;
  line-height: 1;
  text-shadow: 0 0.2rem 1.6rem rgba(10, 30, 60, 0.28);
}

:scope [data-holo-part-id="Access.Page"] [data-holo-part-id="Access.Date"] {
  margin: 0;
  padding: 0;
  color: rgba(255, 255, 255, 0.96);
  font-size: 1.9rem;
  font-weight: 300;
  text-align: center;
  text-shadow: 0 1px 2px rgba(10, 30, 60, 0.45), 0 0.1rem 1rem rgba(10, 30, 60, 0.35);
}

:scope [data-holo-part-id="Access.Card"] {
  justify-self: center;
  gap: 1.4rem;
  padding: 3.2rem 4rem 2.8rem;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 2.8rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.12));
  -webkit-backdrop-filter: var(--eos-glass);
  backdrop-filter: var(--eos-glass);
  box-shadow: 0 1.6rem 4.8rem rgba(10, 30, 60, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
:scope [data-holo-part-id="Access.Card"]:not(#eos-priority) {
  inline-size: min(48rem, 100%);
  --holo-part-inline-size: min(48rem, 100%);
  --holo-part-width: min(48rem, 100%);
  max-inline-size: 100%;
  --holo-part-max-inline-size: 100%;
  --holo-part-max-width: 100%;
}

:scope [data-holo-part-id="Access.Card"] > * {
  --holo-enter-y: 1.2rem;
  --holo-enter-scale: 0.985;
  animation: holo-enter calc(var(--eos-time) * 1.6) var(--eos-ease) 60ms both;
}

@media (prefers-reduced-motion: reduce) {
  :scope [data-holo-part-id="Access.Card"] > * {
    animation: none;
  }
}

/* Cabecera: un orbe de cristal con el amanecer de Eos, el título y la pista. */
:scope [data-holo-part-id="Access.Header"] {
  justify-content: center;
  padding: 0 0 0.6rem;
  border: 0;
  background: transparent;
  text-align: center;
}

:scope [data-holo-part-id="Access.Header"] > [data-holo-role="Main"] {
  display: grid;
  justify-items: center;
  gap: 1.4rem;
  inline-size: 100%;
}

:scope [data-holo-part-id="Access.Header"] > [data-holo-role="Main"] > [data-holo-role="Main"] {
  display: grid;
  justify-items: center;
  gap: 0.6rem;
}

:scope [data-holo-part-id="Access.Header"] > [data-holo-role="Main"] > [data-holo-role="Icon"] {
  display: grid;
  place-items: center;
  inline-size: 7.2rem;
  block-size: 7.2rem;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #ffffff, rgba(196, 226, 255, 0.92) 48%, rgba(96, 166, 255, 0.85));
  box-shadow: 0 0.6rem 2rem rgba(40, 120, 220, 0.35), inset 0 -0.4rem 1rem rgba(40, 110, 220, 0.25);
  color: #1f6fd1;
}

:scope [data-holo-part-id="Access.Header"] > [data-holo-role="Main"] > [data-holo-role="Icon"] :is([data-holo-role="IconVisual"], [data-holo-role="Icon"]) {
  inline-size: auto;
  block-size: auto;
  font-size: 3.4rem;
}

:scope [data-holo-part-id="Access.Header"] [data-holo-role="Title"] {
  color: #ffffff;
  font-size: 2.8rem;
  font-weight: 500;
  line-height: 1.2;
  text-shadow: 0 0.1rem 0.8rem rgba(10, 30, 60, 0.4);
}

:scope [data-holo-part-id="Access.Header"] small[data-holo-role="Text"] {
  max-inline-size: 36rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.5rem;
  line-height: 1.45;
  text-shadow: 0 0.1rem 0.6rem rgba(10, 30, 60, 0.4);
}

/* Formularios: sin caja ni banda de acciones; cada campo es una píldora de
   cristal con su icono dentro. La etiqueta sigue ahí para quien la oye. */
:scope :is([data-holo-part-id="Access.Login"], [data-holo-part-id="Access.Recover"], [data-holo-part-id="Access.Reset"], [data-holo-part-id="Access.Join"], [data-holo-part-id="Access.Verify"], [data-holo-part-id="Access.Claim"]) {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

:scope :is([data-holo-part-id="Access.Login"], [data-holo-part-id="Access.Recover"], [data-holo-part-id="Access.Reset"], [data-holo-part-id="Access.Join"], [data-holo-part-id="Access.Verify"], [data-holo-part-id="Access.Claim"]) > [data-holo-role="Stack"] {
  display: grid;
  gap: 1.2rem;
  padding: 0;
}

:scope :is([data-holo-part-id="Access.Login"], [data-holo-part-id="Access.Recover"], [data-holo-part-id="Access.Reset"], [data-holo-part-id="Access.Join"], [data-holo-part-id="Access.Verify"], [data-holo-part-id="Access.Claim"]) [data-holo-role="Field"]:not(#eos-priority) {
  position: relative;
  display: block;
  inline-size: 100%;
  max-inline-size: none;
  margin: 0;
  padding: 0;
  border: 0;
}

:scope :is([data-holo-part-id="Access.Login"], [data-holo-part-id="Access.Recover"], [data-holo-part-id="Access.Reset"], [data-holo-part-id="Access.Join"], [data-holo-part-id="Access.Verify"], [data-holo-part-id="Access.Claim"]) [data-holo-role="Field"] > :not([data-holo-role="Label"]):not(#eos-priority) {
  grid-column: 1 / -1;
}

:scope :is([data-holo-part-id="Access.Login"], [data-holo-part-id="Access.Recover"], [data-holo-part-id="Access.Reset"], [data-holo-part-id="Access.Join"], [data-holo-part-id="Access.Verify"], [data-holo-part-id="Access.Claim"]) [data-holo-role="Field"] > [data-holo-role="Error"]:not([hidden]) {
  display: block;
  margin-block-start: 0.6rem;
}

:scope :is([data-holo-part-id="Access.Login"], [data-holo-part-id="Access.Recover"], [data-holo-part-id="Access.Reset"], [data-holo-part-id="Access.Join"], [data-holo-part-id="Access.Verify"], [data-holo-part-id="Access.Claim"]) [data-holo-role="Field"] > [data-holo-role="Label"] {
  position: absolute;
  z-index: 1;
  inset-block-start: 0;
  inset-inline-start: 1.8rem;
  display: flex;
  align-items: center;
  block-size: 5rem;
  pointer-events: none;
  color: rgba(255, 255, 255, 0.92);
}

:scope :is([data-holo-part-id="Access.Login"], [data-holo-part-id="Access.Recover"], [data-holo-part-id="Access.Reset"], [data-holo-part-id="Access.Join"], [data-holo-part-id="Access.Verify"], [data-holo-part-id="Access.Claim"]) [data-holo-role="Field"] > [data-holo-role="Label"] :is([data-holo-role="Text"], [data-holo-role="Required"]) {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

:scope :is([data-holo-part-id="Access.Login"], [data-holo-part-id="Access.Recover"], [data-holo-part-id="Access.Reset"], [data-holo-part-id="Access.Join"], [data-holo-part-id="Access.Verify"], [data-holo-part-id="Access.Claim"]) [data-holo-role="Field"] > [data-holo-role="Label"] [data-holo-role="Icon"] {
  font-size: 2rem;
  line-height: 1;
}

:scope :is([data-holo-part-id="Access.Login"], [data-holo-part-id="Access.Recover"], [data-holo-part-id="Access.Reset"], [data-holo-part-id="Access.Join"], [data-holo-part-id="Access.Verify"], [data-holo-part-id="Access.Claim"]) [data-holo-role="Field"] > [data-holo-role="Input"] {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  inline-size: 100%;
  min-block-size: 5rem;
  block-size: 5rem;
  padding: 0 1.8rem 0 5rem;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: var(--eos-radius-pill);
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-size: 1.6rem;
  text-align: start;
  outline: 0;
  transition: background var(--eos-time) var(--eos-ease), border-color var(--eos-time) var(--eos-ease);
}

:scope :is([data-holo-part-id="Access.Login"], [data-holo-part-id="Access.Recover"], [data-holo-part-id="Access.Reset"], [data-holo-part-id="Access.Join"], [data-holo-part-id="Access.Verify"], [data-holo-part-id="Access.Claim"]) [data-holo-role="Field"] > [data-holo-role="Input"]:is(:focus, :focus-within) {
  border-color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.24);
}

:scope :is([data-holo-part-id="Access.Login"], [data-holo-part-id="Access.Recover"], [data-holo-part-id="Access.Reset"], [data-holo-part-id="Access.Join"], [data-holo-part-id="Access.Verify"], [data-holo-part-id="Access.Claim"]) [data-holo-control="Password"] {
  padding-inline-end: 0.8rem;
}

:scope :is([data-holo-part-id="Access.Login"], [data-holo-part-id="Access.Recover"], [data-holo-part-id="Access.Reset"], [data-holo-part-id="Access.Join"], [data-holo-part-id="Access.Verify"], [data-holo-part-id="Access.Claim"]) [data-holo-control="Password"] input {
  flex: 1;
  min-inline-size: 0;
  block-size: 4.6rem;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #ffffff;
  font-size: 1.6rem;
  outline: 0;
}

:scope :is([data-holo-part-id="Access.Login"], [data-holo-part-id="Access.Recover"], [data-holo-part-id="Access.Reset"], [data-holo-part-id="Access.Join"], [data-holo-part-id="Access.Verify"], [data-holo-part-id="Access.Claim"]) input::placeholder {
  color: rgba(255, 255, 255, 0.78);
}

:scope :is([data-holo-part-id="Access.Login"], [data-holo-part-id="Access.Recover"], [data-holo-part-id="Access.Reset"], [data-holo-part-id="Access.Join"], [data-holo-part-id="Access.Verify"], [data-holo-part-id="Access.Claim"]) [data-holo-password="Toggle"] {
  display: grid;
  place-items: center;
  inline-size: 3.6rem;
  min-block-size: 3.6rem;
  block-size: 3.6rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: rgba(255, 255, 255, 0.92);
  font-size: 2rem;
}

:scope :is([data-holo-part-id="Access.Login"], [data-holo-part-id="Access.Recover"], [data-holo-part-id="Access.Reset"], [data-holo-part-id="Access.Join"], [data-holo-part-id="Access.Verify"], [data-holo-part-id="Access.Claim"]) [data-holo-password="Toggle"]:is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.16);
}

/* Un error se lee debajo, en blanco sobre el cristal, sin caja roja. */
:scope :is([data-holo-part-id="Access.Login"], [data-holo-part-id="Access.Recover"], [data-holo-part-id="Access.Reset"], [data-holo-part-id="Access.Join"], [data-holo-part-id="Access.Verify"], [data-holo-part-id="Access.Claim"]) :is([data-holo-role="Field"] > [data-holo-role="Error"], [data-holo-form-summary]) {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #ffffff;
  font-size: 1.4rem;
  text-align: center;
  text-shadow: 0 1px 2px rgba(10, 30, 60, 0.6);
}

:scope :is([data-holo-part-id="Access.Login"], [data-holo-part-id="Access.Recover"], [data-holo-part-id="Access.Reset"], [data-holo-part-id="Access.Join"], [data-holo-part-id="Access.Verify"], [data-holo-part-id="Access.Claim"]) [data-holo-form-summary] *:not(#eos-priority) {
  margin: 0;
  padding: 0;
  color: inherit;
  list-style: none;
  text-align: center;
}

/* El motivo de un rechazo va entre los campos y la acción, centrado. */
:scope :is([data-holo-part-id="Access.Login"], [data-holo-part-id="Access.Recover"], [data-holo-part-id="Access.Reset"], [data-holo-part-id="Access.Join"], [data-holo-part-id="Access.Verify"], [data-holo-part-id="Access.Claim"]) > [data-holo-form-summary]:not(#eos-priority) {
  order: 1;
  justify-items: center;
  margin: 0;
  text-align: center;
}

:scope :is([data-holo-part-id="Access.Login"], [data-holo-part-id="Access.Recover"], [data-holo-part-id="Access.Reset"], [data-holo-part-id="Access.Join"], [data-holo-part-id="Access.Verify"], [data-holo-part-id="Access.Claim"]) > [data-holo-role="Toolbar"]:not(#eos-priority) {
  order: 2;
}

/* El rótulo genérico del resumen sobra: se ve sólo el motivo. Quien usa un
   lector de pantalla lo sigue oyendo. */
:scope :is([data-holo-part-id="Access.Login"], [data-holo-part-id="Access.Recover"], [data-holo-part-id="Access.Reset"], [data-holo-part-id="Access.Join"], [data-holo-part-id="Access.Verify"], [data-holo-part-id="Access.Claim"]) > [data-holo-form-summary] > p:first-child:not(:only-child) {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

:scope :is([data-holo-part-id="Access.Login"], [data-holo-part-id="Access.Recover"], [data-holo-part-id="Access.Reset"], [data-holo-part-id="Access.Join"], [data-holo-part-id="Access.Verify"], [data-holo-part-id="Access.Claim"]) > [data-holo-role="Toolbar"]:not(#eos-priority) {
  display: grid;
  justify-content: stretch;
  min-block-size: 0;
  margin: 0.4rem 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

:scope :is([data-holo-part-id="Access.Login"], [data-holo-part-id="Access.Recover"], [data-holo-part-id="Access.Reset"], [data-holo-part-id="Access.Join"], [data-holo-part-id="Access.Verify"], [data-holo-part-id="Access.Claim"]) [data-holo-control-id="Submit"]:not(#eos-priority) {
  justify-self: stretch;
  max-inline-size: none;
}

:scope :is([data-holo-part-id="Access.Login"], [data-holo-part-id="Access.Recover"], [data-holo-part-id="Access.Reset"], [data-holo-part-id="Access.Join"], [data-holo-part-id="Access.Verify"], [data-holo-part-id="Access.Claim"]) [data-holo-control-id="Submit"] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  inline-size: 100%;
  min-block-size: 5.2rem;
  padding: 0 2rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--eos-radius-pill);
  background: linear-gradient(180deg, #5fb0ff, #2f86f0);
  box-shadow: 0 0.6rem 1.8rem rgba(30, 110, 230, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  color: #ffffff;
  font-size: 1.7rem;
  font-weight: 600;
}

:scope :is([data-holo-part-id="Access.Login"], [data-holo-part-id="Access.Recover"], [data-holo-part-id="Access.Reset"], [data-holo-part-id="Access.Join"], [data-holo-part-id="Access.Verify"], [data-holo-part-id="Access.Claim"]) [data-holo-control-id="Submit"]:is(:hover, :focus-visible) {
  background: linear-gradient(180deg, #74bcff, #3b90f5);
}

:scope :is([data-holo-part-id="Access.Login"], [data-holo-part-id="Access.Recover"], [data-holo-part-id="Access.Reset"], [data-holo-part-id="Access.Join"], [data-holo-part-id="Access.Verify"], [data-holo-part-id="Access.Claim"]) [data-holo-control-id="Submit"]:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* La flecha de la acción sobra: el texto ya dice qué hace. */
:scope :is([data-holo-part-id="Access.Login"], [data-holo-part-id="Access.Recover"], [data-holo-part-id="Access.Reset"], [data-holo-part-id="Access.Join"], [data-holo-part-id="Access.Verify"], [data-holo-part-id="Access.Claim"]) [data-holo-control-id="Submit"] > [data-holo-role="Icon"] {
  display: none;
}

/* Los enlaces son texto azul claro sobre el cristal; al pasar el ratón sólo
   cambian de color. */
:scope :is([data-holo-part-id="Access.Forgot"], [data-holo-part-id="Access.Invite"], [data-holo-part-id="Access.Back"], [data-holo-part-id="Access.People"], [data-holo-part-id="User.Sign"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  gap: 0.6rem;
  min-block-size: 3.6rem;
  padding: 0.4rem 1.2rem;
  border: 0;
  border-radius: var(--eos-radius-pill);
  background: transparent;
  box-shadow: none;
  color: #a9d6ff;
  font-size: 1.5rem;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(10, 30, 60, 0.45);
}

:scope :is([data-holo-part-id="Access.Forgot"], [data-holo-part-id="Access.Invite"], [data-holo-part-id="Access.Back"], [data-holo-part-id="Access.People"], [data-holo-part-id="User.Sign"]) * {
  color: inherit;
}

:scope :is([data-holo-part-id="Access.Forgot"], [data-holo-part-id="Access.Invite"], [data-holo-part-id="Access.Back"], [data-holo-part-id="Access.People"], [data-holo-part-id="User.Sign"]):is(:hover, :focus-visible) {
  background: transparent;
  color: #ffffff;
}

:scope :is([data-holo-part-id="Access.Forgot"], [data-holo-part-id="Access.Invite"], [data-holo-part-id="Access.Back"], [data-holo-part-id="Access.People"], [data-holo-part-id="User.Sign"]):focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

:scope [data-holo-part-id="Access.Rule"] {
  block-size: 0;
  margin: 0.2rem 0;
  border: 0;
  border-block-start: 1px solid rgba(255, 255, 255, 0.3);
  background: transparent;
}

/* Buscar personas queda fuera de la tarjeta, discreto. */
:scope [data-holo-part-id="Access.People"] {
  color: rgba(255, 255, 255, 0.86);
  font-weight: 400;
}

/* Las cuentas se eligen de un vistazo: en fila, no en columna. */
:scope [data-holo-part-id="User.Panel"] [data-holo-type="Collection.List"][data-holo-presentation="IconGrid"] {
  grid-template-columns: repeat(auto-fit, 14rem);
  justify-content: center;
  gap: 1.6rem 3rem;
  padding: 1.6rem 0 0;
}

:scope [data-holo-part-id="User.Panel"] [data-holo-type="Collection.List"][data-holo-presentation="IconGrid"] > [data-holo-role="Item"] {
  display: grid;
  justify-items: center;
  gap: 1rem;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  transition: filter var(--eos-time) var(--eos-ease);
}

:scope [data-holo-part-id="User.Panel"] [data-holo-type="Collection.List"][data-holo-presentation="IconGrid"] > [data-holo-role="Item"]:hover {
  background: transparent;
}

:scope [data-holo-part-id="User.Accounts"] > [data-holo-role="Item"]:is(:hover, :focus-visible) > [data-holo-role="Icon"] {
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.55), 0 0 2.4rem rgba(140, 205, 255, 0.5);
}

:scope [data-holo-part-id="User.Panel"] [data-holo-type="Collection.List"][data-holo-presentation="IconGrid"] > [data-holo-role="Item"] > [data-holo-role="Icon"] {
  display: grid;
  place-items: center;
  inline-size: 11rem;
  block-size: 11rem;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, rgba(255, 255, 255, 0.92), rgba(222, 236, 250, 0.72));
  -webkit-backdrop-filter: var(--eos-glass-soft);
  backdrop-filter: var(--eos-glass-soft);
  box-shadow: var(--eos-shadow-float);
  color: #2878bd;
  font-size: 4rem;
}

:scope [data-holo-part-id="User.Panel"] [data-holo-type="Collection.List"][data-holo-presentation="IconGrid"] > [data-holo-role="Item"] > [data-holo-role="Icon"] :is([data-holo-role="IconVisual"], [data-holo-role="Icon"]) {
  inline-size: auto;
  block-size: auto;
  font-size: 4rem;
}

/* El portador de la imagen mide 0 por defecto en la rejilla de iconos: sin
   llenar el círculo, el retrato del porcentaje mide 0 y la cuenta se ve vacía. */
:scope [data-holo-part-id="User.Accounts"] > [data-holo-role="Item"] > [data-holo-role="Icon"] :is([data-holo-role="IconVisual"], [data-holo-role="Image"]) {
  border-radius: 50%;
  object-fit: cover;
}
:scope [data-holo-part-id="User.Accounts"] > [data-holo-role="Item"] > [data-holo-role="Icon"] :is([data-holo-role="IconVisual"], [data-holo-role="Image"]):not(#eos-priority) {
  inline-size: 100%;
  --holo-part-inline-size: 100%;
  --holo-part-width: 100%;
  block-size: 100%;
  --holo-part-block-size: 100%;
  --holo-part-height: 100%;
}

:scope :is([data-holo-part-id="User.Profiles"], [data-holo-part-id="User.Owned"]) {
  justify-content: center;
}
:scope :is([data-holo-part-id="User.Profiles"], [data-holo-part-id="User.Owned"]):not(#eos-priority) {
  grid-template-columns: repeat(auto-fit, minmax(16rem, 24rem));
  --holo-part-grid-template-columns: repeat(auto-fit, minmax(16rem, 24rem));
  gap: 4.4rem;
  --holo-part-gap: 4.4rem;
}

:scope :is([data-holo-part-id="User.Profiles"], [data-holo-part-id="User.Owned"]) > [data-holo-role="Item"] {
  align-content: start;
  gap: 1rem;
  border-radius: 0;
  transition:
    filter var(--eos-time) var(--eos-ease),
    border-color var(--eos-time) var(--eos-ease),
    background-color var(--eos-time) var(--eos-ease),
    box-shadow var(--eos-time) var(--eos-ease);
}
:scope :is([data-holo-part-id="User.Profiles"], [data-holo-part-id="User.Owned"]) > [data-holo-role="Item"]:not(#eos-priority) {
  padding: 0;
  border: 0;
  background: transparent;
}

/* Elegir se ve como iluminar, no como levantar: más saturación y más luz, sin
   mover nada de sitio. Lo mismo para el foco de teclado y lo elegido. */
:scope :is([data-holo-part-id="User.Profiles"], [data-holo-part-id="User.Owned"]) > [data-holo-role="Item"]:is(:hover, :focus-visible, [aria-current="true"]),
:scope [data-holo-part-id="User.Accounts"] > [data-holo-role="Item"]:is(:hover, :focus-visible, [aria-current="true"]) {
  filter: saturate(1.55) brightness(1.1);
}

/* La regla general de la rejilla de iconos pone su sombra con más
   especificidad; el aro de elegir tiene que ganarle. */
:scope :is([data-holo-part-id="User.Profiles"], [data-holo-part-id="User.Owned"]) > [data-holo-role="Item"]:is(:hover, :focus-visible, [aria-current="true"]) > [data-holo-role="Icon"]:not(#eos-priority) {
  box-shadow: 0 0 0 0.3rem rgba(64, 156, 255, 0.95), 0 0 2.8rem rgba(110, 190, 255, 0.45);
}

/* La vista previa del escritorio conserva su proporción 5:3 para que ningún
   icono quede recortado. */
:scope :is([data-holo-part-id="User.Profiles"], [data-holo-part-id="User.Owned"]) > [data-holo-role="Item"] > [data-holo-role="Icon"] {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 0.8rem 2.4rem rgba(10, 30, 60, 0.28);
  transition: box-shadow var(--eos-time) var(--eos-ease);
}
:scope :is([data-holo-part-id="User.Profiles"], [data-holo-part-id="User.Owned"]) > [data-holo-role="Item"] > [data-holo-role="Icon"]:not(#eos-priority) {
  inline-size: 100%;
  --holo-part-inline-size: 100%;
  --holo-part-width: 100%;
  block-size: auto;
  --holo-part-block-size: auto;
  --holo-part-height: auto;
  border-radius: 1.2rem;
  background: rgba(255, 255, 255, 0.16);
}

:scope :is([data-holo-part-id="User.Profiles"], [data-holo-part-id="User.Owned"]) > [data-holo-role="Item"] > [data-holo-role="Icon"] :is([data-holo-role="IconVisual"], [data-holo-role="Image"]) {
  display: block;
}
:scope :is([data-holo-part-id="User.Profiles"], [data-holo-part-id="User.Owned"]) > [data-holo-role="Item"] > [data-holo-role="Icon"] :is([data-holo-role="IconVisual"], [data-holo-role="Image"]):not(#eos-priority) {
  inline-size: 100%;
  --holo-part-inline-size: 100%;
  --holo-part-width: 100%;
  block-size: auto;
  --holo-part-block-size: auto;
  --holo-part-height: auto;
}

/* La imagen es la vista previa a escala de la mesa: manda su proporción y no
   la de una caja fija, así que sale del posicionamiento absoluto de la rejilla
   y da al círculo su alto. */
:scope :is([data-holo-part-id="User.Profiles"], [data-holo-part-id="User.Owned"]) > [data-holo-role="Item"] > [data-holo-role="Icon"] [data-holo-role="Image"] {
  object-fit: cover;
}
:scope :is([data-holo-part-id="User.Profiles"], [data-holo-part-id="User.Owned"]) > [data-holo-role="Item"] > [data-holo-role="Icon"] [data-holo-role="Image"]:not(#eos-priority) {
  position: static;
  --holo-part-position: static;
}

/* Un perfil protegido no enseña su mesa, pero ocupa el mismo sitio que una
   vista previa: el candado se centra en un cristal de su misma proporción. */
:scope :is([data-holo-part-id="User.Profiles"], [data-holo-part-id="User.Owned"]) > [data-holo-role="Item"] > [data-holo-role="Icon"]:not(:has([data-holo-role="Image"])) {
  place-items: center;
  aspect-ratio: 2 / 1;
  -webkit-backdrop-filter: var(--eos-glass-soft);
  backdrop-filter: var(--eos-glass-soft);
  color: rgba(255, 255, 255, 0.92);
}
:scope :is([data-holo-part-id="User.Profiles"], [data-holo-part-id="User.Owned"]) > [data-holo-role="Item"] > [data-holo-role="Icon"]:not(:has([data-holo-role="Image"])):not(#eos-priority) {
  display: grid;
  --holo-part-display: grid;
  background: rgba(255, 255, 255, 0.18);
}
:scope :is([data-holo-part-id="User.Profiles"], [data-holo-part-id="User.Owned"]) > [data-holo-role="Item"] > [data-holo-role="Icon"]:not(:has([data-holo-role="Image"])) [data-holo-role="IconVisual"] {
  display: grid;
  place-items: center;
  font-size: 4.8rem;
}
:scope :is([data-holo-part-id="User.Profiles"], [data-holo-part-id="User.Owned"]) > [data-holo-role="Item"] > [data-holo-role="Icon"]:not(:has([data-holo-role="Image"])) [data-holo-role="IconVisual"]:not(#eos-priority) {
  inline-size: auto;
  --holo-part-inline-size: auto;
  --holo-part-width: auto;
  block-size: auto;
  --holo-part-block-size: auto;
  --holo-part-height: auto;
}
:scope :is([data-holo-part-id="User.Profiles"], [data-holo-part-id="User.Owned"]) > [data-holo-role="Item"] > [data-holo-role="Icon"]:not(:has([data-holo-role="Image"])) [data-holo-icon] {
  text-shadow: 0 .2rem 1.2rem rgba(10, 30, 60, .35);
}
:scope :is([data-holo-part-id="User.Profiles"], [data-holo-part-id="User.Owned"]) > [data-holo-role="Item"] > [data-holo-role="Icon"]:not(:has([data-holo-role="Image"])) [data-holo-icon]:not(#eos-priority) {
  font-size: 4.8rem;
  color: rgba(255, 255, 255, 0.92);
}

:scope :is([data-holo-part-id="User.Profiles"], [data-holo-part-id="User.Owned"]) > [data-holo-role="Item"] [data-holo-role="Text"] {
  color: #ffffff;
  font-size: 2rem;
  text-shadow: 0 0.1rem 0.8rem rgba(10, 30, 60, 0.55);
}

:scope [data-holo-part-id="User.Panel"] [data-holo-type="Collection.List"][data-holo-presentation="IconGrid"] > [data-holo-role="Item"] [data-holo-role="Title"] {
  color: #ffffff;
  font-size: 2rem;
  font-weight: 400;
  text-shadow: 0 0.1rem 0.8rem rgba(10, 30, 60, 0.55);
}

/* Tras elegir cuenta, volver a «¿Quién eres?» es la única píldora de esta
   vista (ya no comparte protagonismo con el portfolio, retirado): un poco más
   grande y con más aire que antes, como el «Cancelar» de la puerta de un Mac. */
/* Volver vive fijo arriba a la izquierda, como la flecha de un perfil: no
   compite por el alto de la ficha y siempre está a mano. */
:scope [data-holo-part-id="User.Back"] {
  z-index: 3;
  justify-content: start;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
:scope [data-holo-part-id="User.Back"]:not(#eos-priority) {
  position: fixed;
  --holo-part-position: fixed;
  inset: 1.6rem auto auto 1.6rem;
  --holo-part-inset: 1.6rem auto auto 1.6rem;
  --holo-part-inset-block-start: 1.6rem auto auto 1.6rem;
  --holo-part-inset-inline-start: 1.6rem auto auto 1.6rem;
  --holo-part-inset-block-end: 1.6rem auto auto 1.6rem;
  --holo-part-inset-inline-end: 1.6rem auto auto 1.6rem;
  inline-size: auto;
  --holo-part-inline-size: auto;
  --holo-part-width: auto;
  block-size: auto;
  --holo-part-block-size: auto;
  --holo-part-height: auto;
}

:scope [data-holo-part-id="User.Back"] > [data-holo-role="Item"] {
  gap: 0.9rem;
  min-block-size: 4rem;
  padding: 0 1.6rem;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: var(--eos-radius-pill);
  background: rgba(240, 246, 255, .22);
  -webkit-backdrop-filter: var(--eos-glass-vivid);
  backdrop-filter: var(--eos-glass-vivid);
  box-shadow: none;
  color: rgba(255, 255, 255, 0.9);
  transition: background-color var(--eos-time) var(--eos-ease), color var(--eos-time) var(--eos-ease);
}

:scope [data-holo-part-id="User.Back"] > [data-holo-role="Item"]:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

:scope [data-holo-part-id="User.Back"] > [data-holo-role="Item"] [data-holo-role="Title"] {
  color: #ffffff;
  font-size: 1.45rem;
}

:scope [data-holo-part-id="User.Back"] > [data-holo-role="Item"] [data-holo-role="Icon"] {
  color: #ffffff;
}

/* El acceso al menú es la marca del sistema en la esquina: un cuadro del alto
   de la barra, más claro que ella, con el logo dentro. */
:scope [data-holo-part-id="Desktop.Start"] > [data-holo-type="Control.Trigger"] {
  box-sizing: border-box;
  inline-size: 4.8rem;
  min-inline-size: 4.8rem;
  block-size: 4.8rem;
  padding: 0;
  border: 0;
  border-inline-end: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 0;
  background-color: transparent;
  background-image: var(--eos-bar-gradient, linear-gradient(rgba(114, 190, 232, 0.38), rgba(58, 133, 198, 0.52)));
}

:scope [data-holo-part-id="Desktop.Start"] > [data-holo-type="Control.Trigger"] [data-holo-role="Text"] {
  display: none;
}

:scope [data-holo-part-id="Desktop.Start"] > [data-holo-type="Control.Trigger"] [data-holo-role="Icon"] {
  inline-size: 3rem;
  block-size: 3rem;
}

:scope [data-holo-part-id="Desktop.Start"] > [data-holo-type="Control.Trigger"] [data-holo-role="Icon"] :is([data-holo-role="IconVisual"], img) {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

/* Terminal. La consola de Holo se presenta como conversación: cada línea es
   una tarjeta con su cabecera. Una terminal es lo contrario — líneas seguidas
   sobre fondo oscuro—, así que aquí se retira ese vestido.

   Holo reparte la Consola en dos filas de rejilla (`1fr auto`): la lista se
   queda con todo el hueco disponible aunque su texto no lo llene, y el campo
   de escritura cae siempre al borde inferior de la ventana. En una terminal
   real el cursor va pegado a la última línea, no anclado abajo con un hueco
   en medio: aquí se cambia a una columna flexible donde la lista sólo ocupa
   lo que su contenido pide (y no más) hasta que se queda sin sitio; a partir
   de ahí es ella la que se desplaza, con el campo siempre a la vista. */
:scope [data-holo-type="Layout.Window"] [data-holo-type="Control.Console"] {
  display: flex;
  flex-direction: column;
  padding: 0.6rem 0.8rem;
  background: #10171f;
  color: #cfe3f5;
  font-family: ui-monospace, "DejaVu Sans Mono", monospace;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Control.Console"] [data-holo-role="List"] {
  flex: 0 1 auto;
  gap: 0;
  min-block-size: 0;
  padding: 0;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Control.Console"] [data-holo-role="Item"] {
  min-block-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* El autor de cada línea no aporta nada: quien escribe ya está en el prompt. */
:scope [data-holo-type="Layout.Window"] [data-holo-type="Control.Console"] [data-holo-role="Header"],
:scope [data-holo-type="Layout.Window"] [data-holo-type="Control.Console"] [data-holo-role="Author"],
:scope [data-holo-type="Layout.Window"] [data-holo-type="Control.Console"] [data-holo-role="Timestamp"],
:scope [data-holo-type="Layout.Window"] [data-holo-type="Control.Console"] [data-holo-role="Duration"] {
  display: none;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Control.Console"] [data-holo-role="Item"] * {
  color: #cfe3f5;
  font-family: ui-monospace, "DejaVu Sans Mono", monospace;
  font-size: 1.24rem;
  line-height: 1.5;
}

/* El campo de escritura comparte superficie con la salida, sin marco propio,
   pegado a la última línea (no al borde inferior de la ventana). */
:scope [data-holo-type="Layout.Window"] [data-holo-type="Control.Console"] [data-holo-role="Field"] {
  flex: 0 0 auto;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  min-block-size: 0;
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Control.Console"] [data-holo-role="Field"]:has(> [data-holo-role="Prefix"]) {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Control.Console"] [data-holo-role="Prefix"],
:scope [data-holo-type="Layout.Window"] [data-holo-type="Control.Console"] [data-holo-role="Prefix"] [data-holo-role="Text"] {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #7fd4a0;
  font-family: ui-monospace, "DejaVu Sans Mono", monospace;
  font-size: 1.24rem;
  font-weight: 400;
  line-height: 1.5;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Control.Console"] [data-holo-role="Prefix"] {
  align-self: baseline;
  min-inline-size: 0;
  min-block-size: 0;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Control.Console"] [data-holo-role="Input"] {
  border: 0;
  background: transparent;
  color: #e8f3ff;
  font-family: ui-monospace, "DejaVu Sans Mono", monospace;
  font-size: 1.24rem;
  line-height: 1.5;
  min-block-size: 0;
  padding: 0;
}

/* Editor. El Code.app del legacy es una superficie oscura de código: aquí se
   viste igual, sobre la Part de edición que Holo ya publica. El Editor abre su
   ventana como consola (`Presentation: Console` en su Data); una nota de
   texto que se edita en su ventana no es código: queda fuera. */
:scope [data-holo-type="Layout.Window"][data-holo-presentation="Console"] [data-holo-type="Control.Editor"]:not([data-holo-format="Markdown"]),
:scope [data-holo-type="Layout.Window"][data-holo-presentation="Console"] [data-holo-type="Control.Editor"]:not([data-holo-format="Markdown"]) textarea {
  background: #10171f;
  color: #dbe7f3;
  font-family: ui-monospace, "DejaVu Sans Mono", monospace;
  font-size: 1.26rem;
  line-height: 1.6;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Control.Editor"] textarea {
  padding: 0.8rem 1rem;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Control.Editor"] textarea::placeholder {
  color: rgba(219, 231, 243, 0.42);
}

/* El cuerpo de una ventana de consola (Editor sin archivo, por ejemplo) es
   oscuro como su barra: el panel claro de cristal sobre el fondo oscuro de la
   ventana quedaba gris turbio. Su aviso de «nada que abrir» va en claro. */
:scope [data-holo-type="Layout.Window"][data-holo-role="Window"][data-holo-presentation="Console"] > [data-holo-role="Main"]:not(#eos-priority) {
  background: #10171f;
  color: #dbe7f3;
  --holo-fg: #dbe7f3;
  --holo-muted: rgba(219, 231, 243, 0.62);
  --holo-card-fg: #dbe7f3;
}

/* El título de la ventana, como en el legacy: 1,52rem en negrita con la tinta
   cálida. La base de Holo (0,875rem) cuenta con una raíz de 16 px; con los
   10 px de Eos el título quedaba en 8,75 px. */
:scope [data-holo-type="Layout.Window"] > [data-holo-role="Titlebar"] > [data-holo-role="Title"] {
  color: var(--holo-fg);
  font-size: 1.52rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* El icono del título llena la barra (Martín: poco margen arriba y abajo),
   sin pasar del alto de los botones de la ventana. Una ventana flotante (Aura,
   emulador) no enseña título: Holo lo oculta y esta regla no debe revivirlo. */
:scope [data-holo-type="Layout.Window"]:not([data-holo-presentation="Floating"]) > [data-holo-role="Titlebar"] > [data-holo-role="Title"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
}

:scope [data-holo-type="Layout.Window"] > [data-holo-role="Titlebar"] > [data-holo-role="Title"] :is([data-holo-role="Icon"], img):not(#eos-priority) {
  inline-size: 2rem;
  block-size: 2rem;
  font-size: 2rem;
  line-height: 1;
}

/* Una ventana de consola lleva la barra oscura de las ventanas de código del
   legacy: crema sobre un cuerpo negro parecía la barra de otra ventana. Lleva
   el rol además del tipo para ganar a la barra activa de Holo, que se carga
   después. */
:scope [data-holo-type="Layout.Window"][data-holo-role="Window"][data-holo-presentation="Console"] > [data-holo-role="Titlebar"] {
  border-block-end-color: rgba(255, 255, 255, 0.06);
  background: linear-gradient(rgba(41, 45, 46, 0.94), rgba(27, 31, 34, 0.92));
}

:scope [data-holo-type="Layout.Window"][data-holo-role="Window"][data-holo-presentation="Console"] > [data-holo-role="Titlebar"] > :is([data-holo-role="Title"], [data-holo-role="Icon"]),
:scope [data-holo-type="Layout.Window"][data-holo-role="Window"][data-holo-presentation="Console"] > [data-holo-role="Titlebar"] > [data-holo-role="Controls"] :is(button, [data-holo-role="Icon"]) {
  color: rgba(255, 255, 255, 0.82);
}

/* Dentro de una ventana ninguna pieza lleva ID: la ventana se repite por cada
   una abierta y un ID se duplicaría, con lo que la mesa entera no carga. La
   piel reconoce cada programa por lo que su compositor pone dentro: las
   pestañas `Writer-*` del Redactor y las opciones `Wallpaper-*`, `Language-*`,
   `Portrait-*` y `Sound-*` de Ajustes. La Calculadora viste su propia página
   (`App/Calculator/.About/Media/Window`). */

/* Redactor. Arriba, la barra de formato con «Escribir | Leer» a la derecha;
   debajo, el esquema del documento a la izquierda y la hoja, clara y con
   letra de lectura, que se desplaza sola. El pie dice dónde vive el archivo
   y cuánto ocupa. La ventana se reconoce por sus pestañas «Writer-». */
:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"]:has(> [data-holo-type="Collection.List"] > [data-holo-control-id^="Writer-"]) {
  position: relative;
}

/* Las pestañas son el mismo control segmentado de Ajustes, compacto y sentado
   en la fila de la barra. Holo fija en línea el sitio de cada pieza: aquí se
   saca de su fila, y sin fila su sitio se mide desde el canto de la ventana y
   no desde su celda. */
:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"] > [data-holo-type="Collection.List"]:has(> [data-holo-control-id^="Writer-"]) {
  z-index: 3;
  display: flex;
  gap: 0;
  padding: 0.3rem;
  border: 1px solid var(--holo-border);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--holo-card-bg) 75%, transparent);
  box-shadow: inset 0 1px 2px rgba(60, 48, 34, 0.06);
}
:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"] > [data-holo-type="Collection.List"]:has(> [data-holo-control-id^="Writer-"]):not(#eos-priority) {
  grid-row: auto;
  --holo-part-grid-row-start: auto;
  position: absolute;
  --holo-part-position: absolute;
  inset: 0.8rem 1.2rem auto auto;
  --holo-part-inset: 0.8rem 1.2rem auto auto;
  --holo-part-inset-block-start: 0.8rem 1.2rem auto auto;
  --holo-part-inset-inline-start: 0.8rem 1.2rem auto auto;
  --holo-part-inset-block-end: 0.8rem 1.2rem auto auto;
  --holo-part-inset-inline-end: 0.8rem 1.2rem auto auto;
  inline-size: auto;
  --holo-part-inline-size: auto;
  --holo-part-width: auto;
  block-size: auto;
  --holo-part-block-size: auto;
  --holo-part-height: auto;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Collection.List"]:has(> [data-holo-control-id^="Writer-"]) > [data-holo-role="Item"] {
  min-inline-size: 0;
  min-block-size: 2.8rem;
  padding: 0 1.5rem;
  border: 0;
  border-radius: 0.75rem;
  background: transparent;
  box-shadow: none;
  color: var(--holo-muted);
  font-size: 1.35rem;
  font-weight: 500;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Collection.List"]:has(> [data-holo-control-id^="Writer-"]) > [data-holo-role="Item"]:not([aria-current="true"]):is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--holo-accent) 9%, transparent);
  color: var(--holo-fg);
  outline: 0;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Collection.List"]:has(> [data-holo-control-id^="Writer-"]) > [data-holo-role="Item"][aria-current="true"] {
  background: var(--holo-panel-raised);
  box-shadow: 0 1px 3px rgba(40, 32, 22, 0.16),
    0 0 0 1px rgba(110, 98, 82, 0.08);
  color: var(--holo-accent);
  font-weight: 600;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Collection.List"]:has(> [data-holo-control-id^="Writer-"]) > [data-holo-role="Item"] > [data-holo-role="Icon"] {
  display: none;
}

/* Leer no tiene barra: la fila queda igual de alta para que la hoja no salte
   al cambiar de pestaña. */
:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"]:has(> [data-holo-type="Collection.List"] > [data-holo-control-id^="Writer-"]):not(:has(> [data-holo-type="Control.Editor"])) {
  padding-block-start: 5.2rem;
  background: linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.55)) top / 100% 5.2rem no-repeat;
}

/* La barra de formato. */
:scope [data-holo-type="Layout.Window"] [data-holo-type="Control.Editor"][data-holo-format="Markdown"] {
  background: transparent;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Control.Editor"][data-holo-format="Markdown"] > [data-holo-role="Toolbar"] {
  flex-wrap: nowrap;
  gap: 0.8rem;
  font-family: var(--holo-font-family, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  min-block-size: 5.2rem;
  padding: 0.9rem 20rem 0.9rem 1.2rem;
  border-block-end: 1px solid rgba(128, 111, 90, 0.16);
  background: var(--holo-panel);
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Control.Editor"] [data-holo-editor-style] {
  flex: 0 0 auto;
  inline-size: auto;
  min-inline-size: 13rem;
  min-block-size: 3.4rem;
  padding: 0 1rem;
  border: 1px solid rgba(110, 98, 82, 0.22);
  border-radius: 0.8rem;
  background: var(--holo-panel-raised);
  color: var(--holo-fg);
  font-size: 1.35rem;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Control.Editor"] [data-holo-role="Toolbar"] > [data-holo-role="Group"] {
  gap: 0.3rem;
  padding-inline-start: 0.8rem;
  border-inline-start: 1px solid rgba(128, 111, 90, 0.2);
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Control.Editor"] [data-holo-editor-command] {
  inline-size: 3.4rem;
  block-size: 3.4rem;
  border-radius: 0.7rem;
  color: var(--holo-fg);
  font-size: 1.9rem;
}

/* La fuente de iconos sólo trae el trazo fino; en la barra se engrosa un poco
   para que se lea como la de un procesador de textos. */
:scope [data-holo-type="Layout.Window"] [data-holo-type="Control.Editor"] [data-holo-editor-command] [data-holo-role="Icon"] {
  font-size: 1.9rem;
  -webkit-text-stroke: 0.35px currentColor;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Control.Editor"] [data-holo-editor-command]:hover {
  background: rgba(47, 122, 184, 0.1);
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Control.Editor"] [data-holo-editor-command][aria-pressed="true"] {
  background: color-mix(in srgb, var(--holo-accent) 14%, var(--holo-panel-raised));
  color: var(--holo-accent);
}

/* El esquema: una columna clara con los títulos del documento; el apartado
   donde está el cursor, en azul. */
:scope [data-holo-type="Layout.Window"] [data-holo-type="Control.Editor"] [data-holo-role="Outline"] {
  overflow-x: hidden;
  padding: 1.6rem 0.8rem;
  font-family: var(--holo-font-family, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  border-inline-end: 1px solid rgba(128, 111, 90, 0.14);
  background: var(--holo-panel);
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Control.Editor"] [data-holo-role="Outline"] > strong {
  display: block;
  padding-inline: 0.8rem;
  color: var(--holo-muted);
  font-size: 1.35rem;
  font-weight: 650;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Control.Editor"] [data-holo-outline] {
  /* Icono y título en dos columnas: un título largo («Martín Martínez
     Marín») sigue en otra línea en vez de cortarse, y el icono queda arriba
     a la izquierda. */
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  column-gap: 0.8rem;
  align-items: start;
  white-space: normal;
  overflow-wrap: anywhere;
  padding: 0.7rem 0.8rem;
  border-radius: 0.7rem;
  color: var(--holo-fg);
  font-size: 1.35rem;
}

/* El icono de cada título lo pone Holo según su nivel. */
:scope [data-holo-type="Layout.Window"] [data-holo-type="Control.Editor"] [data-holo-outline] > [data-holo-role="Icon"] {
  font-size: 1.5rem;
  line-height: 1.35;
  opacity: 0.7;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Control.Editor"] [data-holo-outline]:hover {
  background: rgba(47, 122, 184, 0.08);
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Control.Editor"] [data-holo-outline][aria-current="true"] {
  background: color-mix(in srgb, var(--holo-accent) 14%, var(--holo-panel-raised));
  color: var(--holo-accent);
}

/* La hoja. */
:scope [data-holo-type="Layout.Window"] [data-holo-type="Control.Editor"][data-holo-format="Markdown"] [data-holo-role="Page"] {
  margin: 1.8rem 2.2rem;
  padding: 3.4rem 4.4rem;
  border: 1px solid rgba(128, 111, 90, 0.18);
  border-radius: 0.8rem;
  background: var(--holo-panel-raised);
  box-shadow: 0 1px 2px rgba(46, 41, 34, 0.06), 0 10px 28px rgba(46, 41, 34, 0.08);
  color: var(--holo-fg);
  /* La tipografía de Eos también en la hoja (Martín): Open Sans Light para el
     texto y Ginora Sans para sus títulos, en vez de la serifa de papel. */
  font-family: var(--holo-font-family);
  font-weight: 300;
  font-size: 1.6rem;
  line-height: 1.7;
  caret-color: var(--holo-accent);
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Control.Editor"] [data-holo-role="Page"] :is(h1, h2, h3):not(#eos-priority) {
  font-family: var(--eos-font-display);
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Control.Editor"] [data-holo-role="Page"] h1 {
  font-size: 2.1em;
  font-weight: 700;
  letter-spacing: -0.01em;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Control.Editor"] [data-holo-role="Page"] h2 {
  font-size: 1.55em;
  font-weight: 700;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Control.Editor"] [data-holo-role="Page"] h3 {
  font-size: 1.2em;
  font-weight: 700;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Control.Editor"] [data-holo-role="Page"] :is(ul, ol) {
  padding-inline-start: 1.6em;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Control.Editor"] [data-holo-role="Page"] li {
  margin-block: 0.25em;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Control.Editor"] [data-holo-role="Page"] table {
  border: 1px solid rgba(110, 98, 82, 0.22);
  border-radius: 0.6rem;
  font-family: var(--holo-font-family, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  font-size: 0.9em;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Control.Editor"] [data-holo-role="Page"] :is(th, td) {
  padding: 0.6em 1em;
  border-color: rgba(110, 98, 82, 0.2);
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Control.Editor"] [data-holo-role="Page"] th {
  background: var(--holo-panel);
  font-weight: 700;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Control.Editor"] [data-holo-role="Page"] blockquote {
  border-inline-start-color: #9cc6ec;
  color: var(--holo-muted);
  font-style: italic;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Control.Editor"] [data-holo-role="Page"] a {
  color: var(--holo-accent);
}

/* El pie: dónde vive el documento, a la izquierda, y lo que ocupa, a la
   derecha, en una fila apagada sobre una banda apenas distinta del cuerpo. Es
   un pie declarado por su superficie; el tono apagado también existe en otras vistas. */
:scope [data-holo-surface="Desktop.Document.Footer"] {
  min-block-size: 3rem;
  padding: 0.5rem 1.8rem;
  border-block-start: 1px solid var(--holo-border);
  background: var(--holo-panel);
}

:scope [data-holo-surface="Desktop.Document.Footer"] > [data-holo-type="Content.Text"] {
  overflow: hidden;
  padding: 0;
  color: var(--holo-muted);
  font-size: 1.15rem;
  line-height: 2rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:scope [data-holo-surface="Desktop.Document.Footer"] > [data-holo-type="Content.Text"]:last-child {
  text-align: end;
}

/* Leer muestra la misma hoja que Escribir, para que el documento no cambie de
   papel al pasar de una pestaña a otra; cualquier visor de documentos usa esa
   misma hoja. Holo fija en línea el ancho, el alto y
   el recorte del artículo, que es quien se desplaza; por eso la hoja no es su
   caja sino su fondo: centrada, del mismo ancho máximo que en Escribir, con su
   filo de un píxel, y pegada al texto para desplazarse con él. El relleno
   pone el texto dentro de la hoja con los márgenes de página. */
:scope [data-holo-type="Layout.Window"] [data-holo-type="Content.Markdown"][data-holo-presentation="Document"] {
  --writer-sheet: min(72rem, 100% - 4.8rem);
  padding-block: 5rem 4.4rem;
  padding-inline: calc((100% - var(--writer-sheet)) / 2 + 4.4rem);
  background:
    linear-gradient(var(--holo-panel-raised), var(--holo-panel-raised)) center 1.8rem / var(--writer-sheet)
      calc(100% - 3rem) no-repeat local,
    linear-gradient(rgba(128, 111, 90, 0.18), rgba(128, 111, 90, 0.18))
      center calc(1.8rem - 1px) / calc(var(--writer-sheet) + 2px)
      calc(100% - 3rem + 2px) no-repeat local;
  color: var(--holo-fg);
  font-family: Georgia, "Liberation Serif", "DejaVu Serif", serif;
  font-size: 1.6rem;
}

/* Leer un documento tiene la misma letra que escribirlo: los títulos, las
   listas y las tablas miden lo mismo en la hoja del editor y en la de lectura. */
:scope [data-holo-type="Layout.Window"] [data-holo-type="Content.Markdown"][data-holo-presentation="Document"] h1 {
  margin: 0 0 0.4em;
  font-size: 2.1em;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Content.Markdown"][data-holo-presentation="Document"] h2 {
  margin: 1.2em 0 0.4em;
  padding: 0;
  border: 0;
  font-size: 1.55em;
  font-weight: 700;
  line-height: 1.25;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Content.Markdown"][data-holo-presentation="Document"] h2::after {
  display: none;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Content.Markdown"][data-holo-presentation="Document"] h3 {
  margin: 1em 0 0.3em;
  font-size: 1.2em;
  font-weight: 700;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Content.Markdown"][data-holo-presentation="Document"] :is(p, li) {
  font-size: 1em;
  line-height: 1.7;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Content.Markdown"][data-holo-presentation="Document"] table {
  font-family: var(--holo-font-family, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  font-size: 0.9em;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Content.Markdown"][data-holo-presentation="Document"] th {
  background: var(--holo-panel);
  color: var(--holo-fg);
  font-size: 1em;
  font-weight: 700;
}

/* El texto plano se lee sobre la misma hoja que un documento, con sus saltos
   de línea tal cual. */
:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"] > [data-holo-type="Content.Text"][data-holo-presentation="Preformatted"] {
  --viewer-sheet: min(72rem, 100% - 4.8rem);
  overflow: auto;
  padding-block: 5rem 4.4rem;
  padding-inline: calc((100% - var(--viewer-sheet)) / 2 + 4.4rem);
  background:
    linear-gradient(var(--holo-panel-raised), var(--holo-panel-raised)) center 1.8rem / var(--viewer-sheet)
      calc(100% - 3rem) no-repeat local,
    linear-gradient(rgba(128, 111, 90, 0.18), rgba(128, 111, 90, 0.18))
      center calc(1.8rem - 1px) / calc(var(--viewer-sheet) + 2px)
      calc(100% - 3rem + 2px) no-repeat local;
  color: var(--holo-fg);
  font-family: Georgia, "Liberation Serif", "DejaVu Serif", serif;
  font-size: 1.5rem;
  line-height: 1.7;
  white-space: pre-wrap;
}

/* Editar una nota de texto ocurre sobre la misma hoja en la que se lee: el
   campo ocupa la hoja, con su letra y sus márgenes. Es el campo de texto
   plano de cualquier ventana que no sea la consola del Editor. El rótulo sólo
   nombra el campo para quien no ve. */
:scope [data-holo-type="Layout.Window"]:not([data-holo-presentation="Console"]) [data-holo-type="Control.Editor"]:not([data-holo-format="Markdown"]):has(> textarea) {
  --viewer-sheet: min(72rem, 100% - 4.8rem);
  display: flex;
  padding-block: 1.8rem 1.2rem;
  background: transparent;
}

:scope [data-holo-type="Layout.Window"]:not([data-holo-presentation="Console"]) [data-holo-type="Control.Editor"]:not([data-holo-format="Markdown"]):has(> textarea) > [data-holo-role="Label"] {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

:scope [data-holo-type="Layout.Window"]:not([data-holo-presentation="Console"]) [data-holo-type="Control.Editor"]:not([data-holo-format="Markdown"]) > textarea {
  flex: 1 1 auto;
  inline-size: var(--viewer-sheet);
  margin-inline: auto;
  padding: 3.2rem 4.4rem;
  border: 1px solid rgba(128, 111, 90, 0.18);
  border-radius: 0.2rem;
  background: var(--holo-panel-raised);
  color: var(--holo-fg);
  font-family: Georgia, "Liberation Serif", "DejaVu Serif", serif;
  font-size: 1.5rem;
  line-height: 1.7;
  resize: none;
}

:scope [data-holo-type="Layout.Window"]:not([data-holo-presentation="Console"]) [data-holo-type="Control.Editor"]:not([data-holo-format="Markdown"]) > textarea::placeholder {
  color: rgba(46, 41, 34, 0.4);
}

/* La barra de un visor: qué archivo es, apagado a la izquierda, y lo que se
   puede hacer con él a la derecha, como botones claros. Es el único bloque
   de ventana que junta un texto y, tras él, una franja. */
:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"]:has(> [data-holo-type="Content.Text"] + [data-holo-type="Collection.List"][data-holo-presentation="Bar"]) {
  padding: 0.7rem 1.2rem 0.7rem 1.8rem;
  border-block-end: 1px solid rgba(128, 111, 90, 0.16);
  background: var(--holo-panel);
}

:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"] > [data-holo-type="Content.Text"]:has(+ [data-holo-type="Collection.List"][data-holo-presentation="Bar"]) {
  padding: 0;
  color: var(--holo-muted);
  font-size: 1.3rem;
}

:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"]:has(> [data-holo-type="Content.Text"] + [data-holo-type="Collection.List"][data-holo-presentation="Bar"]) > [data-holo-type="Collection.List"] {
  padding: 0;
  border: 0;
  background: transparent;
}

:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"]:has(> [data-holo-type="Content.Text"] + [data-holo-type="Collection.List"][data-holo-presentation="Bar"]) > [data-holo-type="Collection.List"] > [data-holo-role="Item"] {
  min-block-size: 3.2rem;
  padding: 0 1.3rem;
  gap: 0.6rem;
  border: 1px solid rgba(110, 98, 82, 0.22);
  border-radius: 0.8rem;
  background: var(--holo-panel-raised);
  box-shadow: 0 1px 2px rgba(46, 41, 34, 0.06);
  color: var(--holo-fg);
  font-size: 1.3rem;
  font-weight: 550;
}

:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"]:has(> [data-holo-type="Content.Text"] + [data-holo-type="Collection.List"][data-holo-presentation="Bar"]) > [data-holo-type="Collection.List"] > [data-holo-role="Item"]:hover {
  border-color: rgba(47, 122, 184, 0.45);
  background: #f5faff;
}

/* Una rejilla vacía explica por qué, en el centro de la ventana: un icono
   grande en su círculo, un título y una línea apagada. */
:scope [data-holo-type="Layout.Window"] [data-holo-type="Collection.List"]:has(> [data-holo-role="Empty"]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Collection.List"] > [data-holo-role="Empty"] {
  display: grid;
  place-items: center;
  grid-column: 1 / -1;
  inline-size: 100%;
  min-block-size: 24rem;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Collection.List"] > [data-holo-role="Empty"] :is([data-holo-role="Title"], [data-holo-role="Text"]) {
  display: block;
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
  -webkit-line-clamp: unset;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Collection.List"] > [data-holo-role="Empty"] > [data-holo-role="State"] {
  display: grid;
  justify-items: center;
  gap: 0.8rem;
  max-inline-size: 44rem;
  padding: 2rem;
  text-align: center;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Collection.List"] > [data-holo-role="Empty"] [data-holo-role="Icon"] {
  display: grid;
  place-items: center;
  inline-size: 15rem;
  block-size: 15rem;
  margin-block-end: 1.2rem;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #eef6fd, #dcebf8);
  color: #6f9cc7;
  font-size: 7rem;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Collection.List"] > [data-holo-role="Empty"] [data-holo-role="Title"] {
  color: var(--holo-fg);
  font-size: 2rem;
  font-weight: 650;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Collection.List"] > [data-holo-role="Empty"] small[data-holo-role="Text"] {
  color: var(--holo-muted);
  font-size: 1.4rem;
}

/* En una ventana oscura, de código o de consola, el mismo aviso va en claro
   y con la letra de la ventana, no con la del código. */
:scope [data-holo-type="Layout.Window"][data-holo-presentation="Console"] [data-holo-type="Collection.List"] > [data-holo-role="Empty"] {
  font-family: var(--holo-font-family, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

:scope [data-holo-type="Layout.Window"][data-holo-presentation="Console"] [data-holo-type="Collection.List"] > [data-holo-role="Empty"] [data-holo-role="Icon"] {
  background: radial-gradient(circle at 40% 35%, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
  color: #9cc6ec;
}

:scope [data-holo-type="Layout.Window"][data-holo-presentation="Console"] [data-holo-type="Collection.List"] > [data-holo-role="Empty"] [data-holo-role="Title"] {
  color: #e8eef5;
  font-family: inherit;
}

:scope [data-holo-type="Layout.Window"][data-holo-presentation="Console"] [data-holo-type="Collection.List"] > [data-holo-role="Empty"] small[data-holo-role="Text"] {
  color: rgba(232, 238, 245, 0.62);
  font-family: inherit;
}

/* El menú de un elemento, como un menú de macOS: arriba de qué elemento es,
   luego el campo para renombrarlo y una columna de filas con su icono;
   tirar a la papelera va aparte, en rojo. La ventana se reconoce por su fila
   Renombrar. Layout.Stack fija en línea la fila de cada pieza por el orden de
   la plantilla; aquí el orden es otro y sólo se puede imponer por encima. */
:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"]:has(> [data-holo-type="Collection.List"] > [data-holo-control-id="Rename"]) {
  gap: 0;
  padding: 0.8rem 0.8rem 1rem;
}

:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"]:has(> [data-holo-type="Collection.List"] > [data-holo-control-id="Rename"]) > [data-holo-type="Content.Header"] {
  padding: 0.4rem 0.6rem 0.9rem;
  border: 0;
  background: transparent;
}
:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"]:has(> [data-holo-type="Collection.List"] > [data-holo-control-id="Rename"]) > [data-holo-type="Content.Header"]:not(#eos-priority) {
  grid-row: 1;
  --holo-part-grid-row-start: 1;
}

:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"]:has(> [data-holo-type="Collection.List"] > [data-holo-control-id="Rename"]) > [data-holo-type="Content.Header"] > [data-holo-role="Main"] {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0;
  border: 0;
}

:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"]:has(> [data-holo-type="Collection.List"] > [data-holo-control-id="Rename"]) > [data-holo-type="Content.Header"] > [data-holo-role="Main"] > [data-holo-role="Icon"] {
  color: #3d8fd8;
  font-size: 3.4rem;
}

:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"]:has(> [data-holo-type="Collection.List"] > [data-holo-control-id="Rename"]) > [data-holo-type="Content.Header"] > [data-holo-role="Main"] > [data-holo-role="Main"] {
  display: grid;
  gap: 0.1rem;
}

:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"]:has(> [data-holo-type="Collection.List"] > [data-holo-control-id="Rename"]) > [data-holo-type="Content.Header"] [data-holo-role="Title"] {
  color: var(--holo-fg);
  font-size: 1.5rem;
  font-weight: 650;
}

:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"]:has(> [data-holo-type="Collection.List"] > [data-holo-control-id="Rename"]) > [data-holo-type="Content.Header"] small[data-holo-role="Text"] {
  color: var(--holo-muted);
  font-size: 1.2rem;
}

:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"]:has(> [data-holo-type="Collection.List"] > [data-holo-control-id="Rename"]) > [data-holo-type="Control.Search"] {
  padding: 0 0.4rem 0.8rem;
}
:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"]:has(> [data-holo-type="Collection.List"] > [data-holo-control-id="Rename"]) > [data-holo-type="Control.Search"]:not(#eos-priority) {
  grid-row: 2;
  --holo-part-grid-row-start: 2;
}

:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"]:has(> [data-holo-type="Collection.List"] > [data-holo-control-id="Rename"]) > [data-holo-type="Control.Search"] [data-holo-role="Input"] {
  min-block-size: 3.4rem;
  padding: 0 1rem;
  border: 1px solid var(--holo-border);
  border-radius: 0.7rem;
  background: var(--holo-panel-raised);
  font-size: 1.35rem;
}

/* Abrir, Renombrar y Tirar son filas de una misma columna: el mismo alto, su
   icono a la izquierda y el azul de la mesa al pasar por encima. */
:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"]:has(> [data-holo-type="Collection.List"] > [data-holo-control-id="Rename"]) > [data-holo-type="Collection.List"] {
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.1rem;
  padding: 0;
  border: 0;
  background: transparent;
}

:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"]:has(> [data-holo-type="Collection.List"] > [data-holo-control-id="Rename"]) > [data-holo-type="Collection.List"]:not(:has(> [data-holo-control-id="Rename"])):not(#eos-priority) {
  grid-row: 3;
  --holo-part-grid-row-start: 3;
}

:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"]:has(> [data-holo-type="Collection.List"] > [data-holo-control-id="Rename"]) > [data-holo-type="Collection.List"]:has(> [data-holo-control-id="Rename"]) {
  align-content: start;
}
:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"]:has(> [data-holo-type="Collection.List"] > [data-holo-control-id="Rename"]) > [data-holo-type="Collection.List"]:has(> [data-holo-control-id="Rename"]):not(#eos-priority) {
  grid-row: 4;
  --holo-part-grid-row-start: 4;
}

:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"]:has(> [data-holo-type="Collection.List"] > [data-holo-control-id="Rename"]) > [data-holo-type="Collection.List"] > [data-holo-role="Item"] {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  inline-size: 100%;
  min-block-size: 3.6rem;
  margin: 0;
  padding: 0 1rem;
  border: 0;
  border-radius: 0.7rem;
  background: transparent;
  box-shadow: none;
  color: var(--holo-fg);
  font-size: 1.4rem;
  text-align: start;
  white-space: nowrap;
}

:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"]:has(> [data-holo-type="Collection.List"] > [data-holo-control-id="Rename"]) > [data-holo-type="Collection.List"] > [data-holo-role="Item"]:hover {
  background: rgba(105, 170, 224, 0.18);
}

:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"]:has(> [data-holo-type="Collection.List"] > [data-holo-control-id="Rename"]) > [data-holo-type="Collection.List"] > [data-holo-role="Item"] > [data-holo-role="Icon"] {
  display: grid;
  place-items: center;
  inline-size: 2.2rem;
  min-inline-size: 2.2rem;
  block-size: auto;
  font-size: 1.8rem;
  line-height: 1;
}

:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"]:has(> [data-holo-type="Collection.List"] > [data-holo-control-id="Rename"]) > [data-holo-type="Collection.List"] > [data-holo-role="Item"] > [data-holo-role="Icon"] > * {
  inline-size: 1.9rem;
  block-size: 1.9rem;
  font-size: 1.9rem;
}

/* El glifo de Abrir viene de una rejilla de iconos grandes: en la fila mide lo
   mismo que los demás. */
:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"]:has(> [data-holo-type="Collection.List"] > [data-holo-control-id="Rename"]) > [data-holo-type="Collection.List"] > [data-holo-role="Item"] [data-holo-role="Icon"] [data-holo-role="Icon"] {
  inline-size: 1.9rem;
  block-size: 1.9rem;
  font-size: 1.9rem;
  line-height: 1;
}

:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"]:has(> [data-holo-type="Collection.List"] > [data-holo-control-id="Rename"]) > [data-holo-type="Collection.List"] > [data-holo-role="Item"] [data-holo-role="Title"] {
  font-size: 1.4rem;
  font-weight: 500;
}

:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"]:has(> [data-holo-type="Collection.List"] > [data-holo-control-id="Rename"]) > [data-holo-type="Collection.List"] > [data-holo-control-id="Trash"] {
  margin-block-start: 0.5rem;
  border-block-start: 1px solid rgba(128, 111, 90, 0.18);
  border-radius: 0 0 0.7rem 0.7rem;
  color: #c2413b;
}

/* Un programa que abre archivos, abierto sin ninguno, ofrece los de la mesa
   como tarjetas; el Redactor, también una para empezar uno nuevo. Se reconoce
   por sus tarjetas «Choose-». */
:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"]:has([data-holo-control-id^="Choose-"]) > [data-holo-type="Content.Header"] {
  padding: 2.6rem 3rem 0.6rem;
  border: 0;
  background: transparent;
}

:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"]:has([data-holo-control-id^="Choose-"]) > [data-holo-type="Content.Header"] [data-holo-role="Title"] {
  color: var(--holo-fg);
  font-size: 2.8rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}

:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"]:has([data-holo-control-id^="Choose-"]) > [data-holo-type="Content.Header"] small[data-holo-role="Text"] {
  margin-block-start: 0.4rem;
  color: var(--holo-muted);
  font-size: 1.45rem;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Collection.List"]:has(> [data-holo-control-id^="Choose-"]) {
  grid-template-columns: repeat(auto-fill, 19rem);
  grid-auto-rows: 23rem;
  gap: 2rem;
  align-content: start;
  padding: 1.8rem 3rem;
  /* Con más archivos de los que caben, las tarjetas se desplazan. */
  overflow-y: auto;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Collection.List"]:has(> [data-holo-control-id^="Choose-"]) > [data-holo-role="Item"] {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  gap: 1rem;
  padding: 1.8rem 1.4rem 1.6rem;
  border: 1px solid var(--holo-border);
  border-radius: 1.2rem;
  background: var(--holo-panel-raised);
  box-shadow: 0 1px 2px rgba(46, 41, 34, 0.05), 0 8px 22px rgba(46, 41, 34, 0.08);
  color: var(--holo-fg);
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Collection.List"]:has(> [data-holo-control-id^="Choose-"]) > [data-holo-role="Item"]:hover {
  border-color: rgba(47, 122, 184, 0.4);
  box-shadow: 0 1px 2px rgba(46, 41, 34, 0.05), 0 10px 26px rgba(47, 122, 184, 0.16);
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Collection.List"]:has(> [data-holo-control-id^="Choose-"]) > [data-holo-role="Item"] > [data-holo-role="Icon"] {
  align-self: center;
  inline-size: 10rem;
  block-size: 10rem;
  font-size: 7rem;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Collection.List"]:has(> [data-holo-control-id^="Choose-"]) > [data-holo-role="Item"] [data-holo-role="Main"] {
  display: grid;
  justify-items: center;
  gap: 0.3rem;
  text-align: center;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Collection.List"]:has(> [data-holo-control-id^="Choose-"]) > [data-holo-role="Item"] [data-holo-role="Title"] {
  color: var(--holo-fg);
  font-size: 1.5rem;
  font-weight: 600;
  text-shadow: none;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Collection.List"]:has(> [data-holo-control-id^="Choose-"]) > [data-holo-role="Item"] small[data-holo-role="Text"] {
  color: var(--holo-muted);
  font-size: 1.25rem;
}

/* La tarjeta de empezar uno nuevo es un hueco punteado con su más azul. */
:scope [data-holo-type="Layout.Window"] [data-holo-type="Collection.List"]:has(> [data-holo-control-id^="Choose-"]) > [data-holo-control-id="Choose-New"] {
  border: 2px dashed rgba(47, 122, 184, 0.35);
  background: rgba(255, 255, 255, 0.7);
  box-shadow: none;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Collection.List"]:has(> [data-holo-control-id^="Choose-"]) > [data-holo-control-id="Choose-New"] > [data-holo-role="Icon"] {
  display: grid;
  place-items: center;
  inline-size: 9rem;
  block-size: 9rem;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #eef6fd, #d9eaf8);
  color: #2f7ab8;
  font-size: 4.4rem;
}

/* Ajustes, y también Stack. Cada pestaña abre con el nombre de lo que muestra
   y una línea que lo explica; es el comienzo del cuerpo, no una cabecera con
   raya. Los elementos de Stack son las entradas de `Apps/` del Home. */
:scope [data-holo-role="Stack"]:has(> [data-holo-type="Collection.List"] > :is([data-holo-control-id^="Wallpaper-"], [data-holo-control-id^="Style-"], [data-holo-control-id^="Language-"], [data-holo-control-id^="Portrait-"], [data-holo-control-id^="Sound-"], [data-holo-control-id^="Apps/"])) > [data-holo-type="Content.Header"] {
  min-block-size: 0;
  padding: 1.8rem 2.4rem 0.2rem;
  border-block-end: 0;
}

:scope [data-holo-role="Stack"]:has(> [data-holo-type="Collection.List"] > :is([data-holo-control-id^="Wallpaper-"], [data-holo-control-id^="Style-"], [data-holo-control-id^="Language-"], [data-holo-control-id^="Portrait-"], [data-holo-control-id^="Sound-"], [data-holo-control-id^="Apps/"])) > [data-holo-type="Content.Header"] [data-holo-role="Title"] {
  color: var(--holo-fg);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.2;
}

:scope [data-holo-role="Stack"]:has(> [data-holo-type="Collection.List"] > :is([data-holo-control-id^="Wallpaper-"], [data-holo-control-id^="Style-"], [data-holo-control-id^="Language-"], [data-holo-control-id^="Portrait-"], [data-holo-control-id^="Sound-"], [data-holo-control-id^="Apps/"])) > [data-holo-type="Content.Header"] [data-holo-role="Text"] {
  color: var(--holo-muted);
  font-size: 1.3rem;
  line-height: 1.4;
}

/* Las opciones de Ajustes se reparten en tres columnas que llenan el ancho. */
:scope [data-holo-type="Collection.List"][data-holo-presentation="IconGrid"]:has(> :is([data-holo-control-id^="Wallpaper-"], [data-holo-control-id^="Style-"], [data-holo-control-id^="Language-"], [data-holo-control-id^="Sound-"])) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.6rem 1.8rem;
  padding: 1.4rem 2.4rem 2rem;
}

:scope [data-holo-type="Collection.List"][data-holo-presentation="IconGrid"]:has(> [data-holo-control-id^="Style-"]) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

:scope [data-holo-type="Collection.List"][data-holo-presentation="IconGrid"] > [data-holo-control-id^="Style-"] {
  position: relative;
  gap: 0.7rem;
  padding: 0;
  border: 0;
  background: transparent;
}

:scope [data-holo-type="Collection.List"][data-holo-presentation="IconGrid"] > [data-holo-control-id^="Style-"] [data-holo-role="Icon"] {
  position: relative;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 5 / 2;
  overflow: hidden;
  border-radius: 1rem;
  box-shadow: 0 1px 3px rgba(22, 26, 42, 0.24);
  transition: box-shadow 140ms ease, transform 140ms ease;
}

:scope [data-holo-type="Collection.List"][data-holo-presentation="IconGrid"] > [data-holo-control-id^="Style-"] [data-holo-role="IconVisual"],
:scope [data-holo-type="Collection.List"][data-holo-presentation="IconGrid"] > [data-holo-control-id^="Style-"] [data-holo-role="Icon"] img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

:scope [data-holo-type="Collection.List"][data-holo-presentation="IconGrid"] > [data-holo-control-id^="Style-"] [data-holo-role="Icon"]::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  block-size: 48%;
  background: linear-gradient(transparent, rgba(7, 11, 24, 0.7));
  pointer-events: none;
}

:scope [data-holo-type="Collection.List"][data-holo-presentation="IconGrid"] > [data-holo-control-id^="Style-"]:hover [data-holo-role="Icon"] {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--holo-accent) 35%, transparent);
}

:scope [data-holo-type="Collection.List"][data-holo-presentation="IconGrid"] > [data-holo-control-id^="Style-"][aria-current="true"] [data-holo-role="Icon"] {
  box-shadow: 0 0 0 2px var(--holo-accent), 0 0 0 5px rgba(47, 122, 184, 0.2);
}

:scope [data-holo-type="Collection.List"][data-holo-presentation="IconGrid"] > [data-holo-control-id^="Style-"] [data-holo-role="Title"] {
  font-size: 1.3rem;
  font-weight: 600;
}

/* Un fondo se elige viéndolo: la miniatura es una tarjeta apaisada grande y
   el nombre va debajo. */
:scope [data-holo-type="Collection.List"][data-holo-presentation="IconGrid"] > [data-holo-control-id^="Wallpaper-"] {
  position: relative;
  gap: 0.7rem;
  padding: 0;
  border: 0;
  background: transparent;
}

:scope [data-holo-type="Collection.List"][data-holo-presentation="IconGrid"] > [data-holo-control-id^="Wallpaper-"] [data-holo-role="Icon"] {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 1rem;
  box-shadow: var(--eos-shadow-soft);
  transition: box-shadow 140ms ease, transform 140ms ease;
}

:scope [data-holo-type="Collection.List"][data-holo-presentation="IconGrid"] > [data-holo-control-id^="Wallpaper-"] [data-holo-role="IconVisual"] {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

:scope [data-holo-type="Collection.List"][data-holo-presentation="IconGrid"] > [data-holo-control-id^="Wallpaper-"] [data-holo-role="Icon"] img {
  object-fit: cover;
}

:scope [data-holo-type="Collection.List"][data-holo-presentation="IconGrid"] > [data-holo-control-id^="Wallpaper-"]:hover [data-holo-role="Icon"] {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--holo-accent) 35%, transparent);
}

:scope [data-holo-type="Collection.List"][data-holo-presentation="IconGrid"] > [data-holo-control-id^="Wallpaper-"] [data-holo-role="Title"] {
  font-size: 1.3rem;
  font-weight: 500;
}

/* El fondo en uso lleva un anillo azul y una marca en su esquina, no una caja
   alrededor de la tarjeta. */
:scope [data-holo-type="Collection.List"][data-holo-presentation="IconGrid"] > [data-holo-control-id^="Wallpaper-"][aria-current="true"] [data-holo-role="Icon"] {
  box-shadow:
    0 0 0 2px var(--holo-accent),
    0 0 0 5px rgba(47, 122, 184, 0.2);
}

:scope [data-holo-type="Collection.List"][data-holo-presentation="IconGrid"] > [data-holo-control-id^="Wallpaper-"][aria-current="true"] [data-holo-role="Title"] {
  font-weight: 700;
}

:scope [data-holo-type="Collection.List"][data-holo-presentation="IconGrid"] > :is([data-holo-control-id^="Wallpaper-"], [data-holo-control-id^="Style-"], [data-holo-control-id^="Language-"], [data-holo-control-id^="Portrait-"], [data-holo-control-id^="Sound-"])[aria-current="true"]::after {
  content: "\e182";
  position: absolute;
  inset-block-start: 0.8rem;
  inset-inline-end: 0.8rem;
  inline-size: 2.2rem;
  block-size: 2.2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--holo-accent);
  color: #fff;
  font: 1.4rem/1 "Phosphor-Light";
  -webkit-text-stroke: 0.06em currentColor;
  box-shadow: 0 1px 4px rgba(20, 52, 78, 0.35);
}

/* Un idioma se elige como un fondo: cada opción es una tarjeta clara y la
   que está en uso lleva el mismo anillo y la misma marca, no la caja gris de
   una selección cualquiera. La imagen de la cuenta y el sonido se eligen
   con la misma tarjeta. */
:scope [data-holo-type="Collection.List"][data-holo-presentation="IconGrid"] > :is([data-holo-control-id^="Language-"], [data-holo-control-id^="Portrait-"], [data-holo-control-id^="Sound-"]) {
  position: relative;
  gap: 0.8rem;
  padding: 1.8rem 1rem 1.6rem;
  border: 0;
  border-radius: 1rem;
  background: var(--holo-panel-raised);
  box-shadow: var(--eos-shadow-soft);
  transition: box-shadow 140ms ease, transform 140ms ease;
}

:scope [data-holo-type="Collection.List"][data-holo-presentation="IconGrid"] > :is([data-holo-control-id^="Language-"], [data-holo-control-id^="Portrait-"], [data-holo-control-id^="Sound-"]):hover {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--holo-accent) 35%, transparent);
}

:scope [data-holo-type="Collection.List"][data-holo-presentation="IconGrid"] > :is([data-holo-control-id^="Language-"], [data-holo-control-id^="Portrait-"], [data-holo-control-id^="Sound-"]) [data-holo-role="Title"] {
  font-size: 1.3rem;
  font-weight: 500;
}

:scope [data-holo-type="Collection.List"][data-holo-presentation="IconGrid"] > :is([data-holo-control-id^="Language-"], [data-holo-control-id^="Portrait-"], [data-holo-control-id^="Sound-"])[aria-current="true"] {
  background: var(--holo-panel-raised);
  box-shadow:
    0 0 0 2px var(--holo-accent),
    0 0 0 5px rgba(47, 122, 184, 0.2);
}

:scope [data-holo-type="Collection.List"][data-holo-presentation="IconGrid"] > :is([data-holo-control-id^="Language-"], [data-holo-control-id^="Portrait-"], [data-holo-control-id^="Sound-"])[aria-current="true"] [data-holo-role="Title"] {
  font-weight: 700;
}

/* Cuenta. «Nombre visible» cabe en una fila, con Guardar al lado y sin la
   banda de acciones de un formulario largo; las imágenes de la cuenta son
   retratos redondos, cinco por fila, como el de la cabecera del menú. El
   formulario se reconoce por su nombre sin correo: Contacto lleva ambos. */
:scope [data-holo-type="Layout.Window"] [data-holo-type="Control.Form"]:has([data-holo-field="Name"]):not(:has([data-holo-field="Mail"])) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.2rem;
  padding: 0.4rem 2.4rem 0.6rem;
  border: 0;
  background: transparent;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Control.Form"]:has([data-holo-field="Name"]):not(:has([data-holo-field="Mail"])) > [data-holo-role="Stack"] {
  grid-column: 1;
  padding: 0;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Control.Form"]:has([data-holo-field="Name"]):not(:has([data-holo-field="Mail"])) > [data-holo-role="Toolbar"] {
  grid-column: 2;
  padding: 0;
  border: 0;
  background: transparent;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Control.Form"]:has([data-holo-field="Name"]):not(:has([data-holo-field="Mail"])) > :not([data-holo-role="Stack"], [data-holo-role="Toolbar"]) {
  grid-column: 1 / -1;
}

/* Con un solo campo, la marca de obligatorio sobra (el campo ya lo dice a
   quien lo lee en voz alta) y, sin ella, «Nombre visible» cabe en una línea en
   vez de partirse con el asterisco suelto entre la etiqueta y el campo. */
:scope [data-holo-type="Layout.Window"] [data-holo-type="Control.Form"]:has([data-holo-field="Name"]):not(:has([data-holo-field="Mail"])) [data-holo-role="Required"] {
  display: none;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Control.Form"]:has([data-holo-field="Name"]):not(:has([data-holo-field="Mail"])) [data-holo-field="Name"] > [data-holo-role="Label"] {
  white-space: nowrap;
}

:scope [data-holo-type="Collection.List"][data-holo-presentation="IconGrid"]:has(> [data-holo-control-id^="Portrait-"]) {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.2rem;
  padding: 1rem 2.4rem 2rem;
}

:scope [data-holo-type="Collection.List"][data-holo-presentation="IconGrid"] > [data-holo-control-id^="Portrait-"] {
  padding: 1.4rem 0.6rem 1.2rem;
}

:scope [data-holo-type="Collection.List"][data-holo-presentation="IconGrid"] > [data-holo-control-id^="Portrait-"] [data-holo-role="Icon"] {
  inline-size: 5.6rem;
  block-size: 5.6rem;
  border-radius: 50%;
  background-image: linear-gradient(
    rgba(255, 255, 255, 0.38),
    rgba(200, 229, 252, 0.5)
  );
  color: #2878bd;
  font-size: 2.8rem;
}

/* Navegador, como en el legacy: una barra cálida con atrás, adelante,
   recargar e inicio en botones redondeados, la dirección en una píldora y la
   web debajo sobre blanco. La barra se reconoce por los botones `Browser-*`
   que pone el compositor. */
:scope [data-holo-role="Stack"]:has(> [data-holo-type="Navigation.Action.Bar"] > [data-holo-control-id^="Browser-"]) {
  padding: 0.58rem 1rem 0.58rem 1.1rem;
  border-block-end: 1px solid rgba(121, 104, 82, 0.18);
  background: linear-gradient(var(--holo-panel-raised), var(--holo-panel));
}

:scope [data-holo-type="Navigation.Action.Bar"]:has(> [data-holo-control-id^="Browser-"]) {
  gap: 0.35rem;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

:scope [data-holo-type="Navigation.Action.Bar"] > [data-holo-control-id^="Browser-"] {
  --holo-control-square-size: 2.8rem;
  border: 1px solid rgba(87, 103, 118, 0.16);
  border-radius: 0.6rem;
  background: color-mix(in srgb, var(--holo-accent) 9%, transparent);
  color: var(--holo-fg);
}

:scope [data-holo-type="Navigation.Action.Bar"] > [data-holo-control-id^="Browser-"]:hover:not(:disabled) {
  background: var(--holo-panel-raised);
}

:scope [data-holo-type="Navigation.Action.Bar"] > [data-holo-control-id^="Browser-"]:active:not(:disabled) {
  background: color-mix(in srgb, var(--holo-accent) 14%, var(--holo-panel-raised));
}

:scope [data-holo-type="Navigation.Action.Bar"] > [data-holo-control-id^="Browser-"]:disabled {
  opacity: 0.38;
  cursor: default;
}

/* La dirección es una píldora de una línea. Su etiqueta sigue ahí para quien
   no ve la pantalla, pero no ocupa sitio. */
:scope [data-holo-role="Stack"]:has(> [data-holo-type="Navigation.Action.Bar"] > [data-holo-control-id^="Browser-"]) > [data-holo-type="Control.Form"] {
  gap: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

:scope [data-holo-role="Stack"]:has(> [data-holo-type="Navigation.Action.Bar"] > [data-holo-control-id^="Browser-"]) > [data-holo-type="Control.Form"] > [data-holo-role="Stack"] {
  grid-template-columns: minmax(0, 1fr);
  justify-content: stretch;
  gap: 0;
  padding: 0;
}

:scope [data-holo-role="Stack"]:has(> [data-holo-type="Navigation.Action.Bar"] > [data-holo-control-id^="Browser-"]) > [data-holo-type="Control.Form"] [data-holo-role="Field"] {
  grid-template-columns: minmax(0, 1fr);
  max-inline-size: none;
  gap: 0;
  margin: 0;
  padding: 0;
}

:scope [data-holo-role="Stack"]:has(> [data-holo-type="Navigation.Action.Bar"] > [data-holo-control-id^="Browser-"]) > [data-holo-type="Control.Form"] [data-holo-role="Label"] {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

:scope [data-holo-role="Stack"]:has(> [data-holo-type="Navigation.Action.Bar"] > [data-holo-control-id^="Browser-"]) > [data-holo-type="Control.Form"] [data-holo-role="Field"] > :not([data-holo-role="Label"]) {
  grid-column: 1;
}

/* Con la etiqueta oculta, su aviso de campo obligatorio aparecía flotando
   sobre la barra: una dirección vacía no se envía y basta. */
:scope [data-holo-role="Stack"]:has(> [data-holo-type="Navigation.Action.Bar"] > [data-holo-control-id^="Browser-"]) > [data-holo-type="Control.Form"] [data-holo-role="TooltipBubble"] {
  display: none;
}

:scope [data-holo-role="Stack"]:has(> [data-holo-type="Navigation.Action.Bar"] > [data-holo-control-id^="Browser-"]) > [data-holo-type="Control.Form"] input {
  box-sizing: border-box;
  inline-size: 100%;
  block-size: 2.8rem;
  min-block-size: 2.8rem;
  padding: 0 1.2rem;
  border: 1px solid var(--holo-border);
  border-radius: var(--eos-radius-pill);
  background: var(--holo-panel-raised);
  color: var(--holo-fg);
  font-size: 1.26rem;
}

/* Una web o un juego se cargan sobre blanco con el anillo del legacy, no con
   una palabra. */
:scope [data-holo-type="Layout.Window"]:not([data-holo-presentation="Floating"]) [data-holo-type="Visual.Embed"][data-holo-external-navigation="true"] {
  background: var(--holo-panel-raised);
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Visual.Embed"][data-holo-external-navigation="true"] [data-holo-role="EmbedLoading"] {
  box-sizing: border-box;
  inline-size: 3.2rem;
  block-size: 3.2rem;
  overflow: hidden;
  border: 3px solid rgba(42, 101, 160, 0.18);
  border-block-start-color: rgba(42, 101, 160, 0.78);
  border-radius: var(--eos-radius-pill);
  color: transparent;
  font-size: 0;
  animation: holo-spinner 0.72s linear infinite;
}


@media (prefers-reduced-motion: reduce) {
  :scope [data-holo-type="Layout.Window"] [data-holo-type="Visual.Embed"][data-holo-external-navigation="true"] [data-holo-role="EmbedLoading"] {
    animation: none;
  }
}

/* Un campo de nombre es de escritura, no de búsqueda: la lupa que trae la
   Part sobra aquí. Se separa del canto de la ventana como el resto de su
   contenido. */
:scope [data-holo-type="Layout.Window"] [data-holo-type="Control.Search"][data-holo-presentation="Compact"] [data-holo-role="SearchIcon"] {
  display: none;
}

/* Contacto. La ventana se reconoce por el campo Message de su formulario;
   no necesita un aviso vacío como marca de estilo. */
:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"]:has(> [data-holo-type="Control.Form"] [data-holo-field="Message"]) {
  position: relative;
  padding: 2rem 2.4rem 1.8rem;
  row-gap: 0;
}

:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"]:has(> [data-holo-type="Control.Form"] [data-holo-field="Message"]) > [data-holo-type="Content.Header"] {
  padding: 0;
  border: 0;
  background: transparent;
}

:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"]:has(> [data-holo-type="Control.Form"] [data-holo-field="Message"]) > [data-holo-type="Content.Header"] > [data-holo-role="Main"] {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: 0;
  border: 0;
}

:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"]:has(> [data-holo-type="Control.Form"] [data-holo-field="Message"]) > [data-holo-type="Content.Header"] > [data-holo-role="Main"] > [data-holo-role="Main"] {
  display: grid;
  gap: 0.3rem;
}

:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"]:has(> [data-holo-type="Control.Form"] [data-holo-field="Message"]) > [data-holo-type="Content.Header"] > [data-holo-role="Main"] > [data-holo-role="Icon"] {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  inline-size: 5.6rem;
  block-size: 5.6rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #eaf4fd, #d5e8f8);
  color: #2f7ab8;
  font-size: 2.6rem;
}

:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"]:has(> [data-holo-type="Control.Form"] [data-holo-field="Message"]) > [data-holo-type="Content.Header"] > [data-holo-role="Main"] > [data-holo-role="Icon"] :is([data-holo-role="IconVisual"], [data-holo-role="Icon"]) {
  inline-size: auto;
  block-size: auto;
  font-size: 3.2rem;
  line-height: 1;
  /* La fuente sólo trae el trazo fino: a este tamaño se engrosa un poco. */
  -webkit-text-stroke: 0.6px currentColor;
}

:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"]:has(> [data-holo-type="Control.Form"] [data-holo-field="Message"]) > [data-holo-type="Content.Header"] [data-holo-role="Title"] {
  display: block;
  color: var(--holo-fg);
  font-size: 2.1rem;
  font-weight: 650;
  line-height: 1.2;
}

:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"]:has(> [data-holo-type="Control.Form"] [data-holo-field="Message"]) > [data-holo-type="Content.Header"] small[data-holo-role="Text"] {
  display: block;
  margin-block-start: 0.4rem;
  color: var(--holo-muted);
  font-size: 1.35rem;
}

/* El formulario no lleva marco propio: los campos se reparten el ancho, con
   el nombre encima de cada caja, y el mensaje baja hasta el pie. */
:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"]:has(> [data-holo-type="Control.Form"] [data-holo-field="Message"]) > [data-holo-type="Control.Form"] {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) max-content;
  gap: 0;
  padding: 0;
  background: transparent;
  font-family: var(--holo-font-family, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"]:has(> [data-holo-type="Control.Form"] [data-holo-field="Message"]) > [data-holo-type="Control.Form"] > [data-holo-role="Stack"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto minmax(0, 1fr);
  justify-content: stretch;
  gap: 1.6rem;
  padding: 2rem 0 0;
  overflow: hidden;
  scrollbar-gutter: auto;
}

:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"]:has(> [data-holo-type="Control.Form"] [data-holo-field="Message"]) > [data-holo-type="Control.Form"] [data-holo-role="Field"] {
  grid-column: auto;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.7rem;
  max-inline-size: none;
  padding: 0;
}

:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"]:has(> [data-holo-type="Control.Form"] [data-holo-field="Message"]) > [data-holo-type="Control.Form"] [data-holo-role="Field"][data-holo-field="Message"] {
  grid-column: 1 / -1;
}

:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"]:has(> [data-holo-type="Control.Form"] [data-holo-field="Message"]) > [data-holo-type="Control.Form"] [data-holo-role="Field"] > * {
  grid-column: 1;
}

:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"]:has(> [data-holo-type="Control.Form"] [data-holo-field="Message"]) > [data-holo-type="Control.Form"] [data-holo-role="Field"] > [data-holo-role="Label"] {
  padding: 0;
  color: var(--holo-fg);
  font-size: 1.3rem;
  font-weight: 600;
}

/* Tres campos de texto no necesitan icono por campo, ni la marca de
   obligatorio (Enviar ya explica qué falta), ni el botón de vaciar. */
:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"]:has(> [data-holo-type="Control.Form"] [data-holo-field="Message"]) > [data-holo-type="Control.Form"] [data-holo-role="Field"] > [data-holo-role="Label"] [data-holo-role="Icon"],
:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"]:has(> [data-holo-type="Control.Form"] [data-holo-field="Message"]) > [data-holo-type="Control.Form"] [data-holo-role="Required"],
:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"]:has(> [data-holo-type="Control.Form"] [data-holo-field="Message"]) > [data-holo-type="Control.Form"] [data-holo-field-actions] {
  display: none;
}

/* Sin el botón de vaciar, la caja ocupa también su columna. */
:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"]:has(> [data-holo-type="Control.Form"] [data-holo-field="Message"]) > [data-holo-type="Control.Form"] [data-holo-field-editor] {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"]:has(> [data-holo-type="Control.Form"] [data-holo-field="Message"]) > [data-holo-type="Control.Form"] :is(input, textarea)[data-holo-role="Input"] {
  box-sizing: border-box;
  inline-size: 100%;
  min-block-size: 4.2rem;
  padding: 0.9rem 1.3rem;
  border: 1px solid var(--holo-border);
  border-radius: 0.9rem;
  background: var(--holo-panel-raised);
  box-shadow: inset 0 1px 2px rgba(46, 41, 34, 0.04);
  color: var(--holo-fg);
  font-family: inherit;
  font-size: 1.45rem;
}

:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"]:has(> [data-holo-type="Control.Form"] [data-holo-field="Message"]) > [data-holo-type="Control.Form"] textarea[data-holo-role="Input"] {
  block-size: 100%;
  min-block-size: 10rem;
  field-sizing: fixed;
  line-height: 1.5;
  resize: none;
}

:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"]:has(> [data-holo-type="Control.Form"] [data-holo-field="Message"]) > [data-holo-type="Control.Form"] :is(input, textarea)[data-holo-role="Input"]::placeholder {
  color: var(--holo-muted);
  font-family: inherit;
}

:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"]:has(> [data-holo-type="Control.Form"] [data-holo-field="Message"]) > [data-holo-type="Control.Form"] :is(input, textarea)[data-holo-role="Input"]:focus-visible {
  border-color: var(--holo-accent);
  outline: 3px solid rgba(47, 122, 184, 0.18);
  outline-offset: 0;
}

/* El pie: Enviar a la derecha como botón principal, sin la franja del
   formulario; el aviso se sienta a su izquierda, apagado. */
:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"]:has(> [data-holo-type="Control.Form"] [data-holo-field="Message"]) > [data-holo-type="Control.Form"] > [data-holo-role="Toolbar"] {
  justify-content: flex-end;
  padding: 1.6rem 0 0;
  border: 0;
  background: transparent;
}

:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"]:has(> [data-holo-type="Control.Form"] [data-holo-field="Message"]) > [data-holo-type="Control.Form"] > [data-holo-role="Toolbar"] > [data-holo-role="Button"][data-holo-presentation="Primary"] {
  gap: 1.2rem;
  min-block-size: 4.8rem;
  padding: 0.4rem 0.7rem 0.4rem 2rem;
  border: 1px solid rgba(25, 91, 148, 0.32);
  border-radius: 1.2rem;
  background: linear-gradient(135deg, #347fbc, #145b98);
  box-shadow: 0 0.3rem 0.8rem rgba(22, 64, 104, 0.16), 0 0.8rem 2rem rgba(47, 122, 184, 0.2);
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 650;
  transition: background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"]:has(> [data-holo-type="Control.Form"] [data-holo-field="Message"]) > [data-holo-type="Control.Form"] > [data-holo-role="Toolbar"] > [data-holo-role="Button"][data-holo-presentation="Primary"]:hover {
  background: linear-gradient(135deg, #4093d0, #176cae);
}

:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"]:has(> [data-holo-type="Control.Form"] [data-holo-field="Message"]) > [data-holo-type="Control.Form"] > [data-holo-role="Toolbar"] > [data-holo-role="Button"][data-holo-presentation="Primary"]:focus-visible {
  outline: 3px solid rgba(48, 132, 201, 0.42);
  outline-offset: 3px;
}

:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"]:has(> [data-holo-type="Control.Form"] [data-holo-field="Message"]) > [data-holo-type="Control.Form"] > [data-holo-role="Toolbar"] > [data-holo-role="Button"] > [data-holo-role="Icon"] {
  inline-size: auto;
  block-size: auto;
  color: inherit;
  font-size: 1.8rem;
}

:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"]:has(> [data-holo-type="Control.Form"] [data-holo-field="Message"]) > [data-holo-type="Control.Form"] > [data-holo-role="Toolbar"] > [data-holo-role="Button"][data-holo-presentation="Primary"] > [data-holo-role="Icon"] {
  display: grid;
  place-items: center;
  inline-size: 3.4rem;
  block-size: 3.4rem;
  border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.17);
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Control.Search"][data-holo-presentation="Compact"] {
  padding: 0.4rem 1.8rem;
}

/* Un aviso o una ayuda de la ventana es un párrafo apagado con su margen, no
   texto pegado al canto. El pie, el aviso del contacto y la hoja tienen su
   propia regla. */
:scope [data-holo-type="Layout.Window"] [data-holo-role="Stack"] > [data-holo-type="Content.Text"]:not([data-holo-tone], [data-holo-presentation="Preformatted"]) {
  padding: 1rem 1.8rem;
  color: var(--holo-muted);
  font-size: 1.3rem;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Control.Search"][data-holo-presentation="Compact"] [data-holo-role="Input"] {
  min-block-size: 2.4rem;
}

/* Lo que una ventana puede hacer va en una barra corrida, no en una lista de
   filas: son órdenes cortas y el contenido manda. */
:scope [data-holo-type="Layout.Window"] [data-holo-type="Collection.List"][data-holo-presentation="Menu"]:not([data-holo-surface]) {
  grid-auto-flow: column;
  grid-template-columns: none;
  justify-content: start;
  gap: 0.3rem;
  padding: 0.3rem 0.5rem;
  border-block-end: 1px solid rgba(128, 111, 90, 0.18);
  background: var(--holo-panel);
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Collection.List"][data-holo-presentation="Menu"]:not([data-holo-surface]) > [data-holo-role="Item"] {
  min-block-size: 2.6rem;
  margin: 0;
  padding: 0 0.8rem;
  gap: 0.5rem;
  border: 1px solid transparent;
  border-radius: 0.4rem;
  background: transparent;
  box-shadow: none;
  color: var(--holo-fg);
  font-size: 1.16rem;
  white-space: nowrap;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Collection.List"][data-holo-presentation="Menu"]:not([data-holo-surface]) > [data-holo-role="Item"]:hover {
  background: rgba(105, 170, 224, 0.16);
}

/* Las listas de sesión y de salida no se anuncian como bloque aparte dentro
   del menú. */
:scope [data-holo-part-id="Desktop.Start.Session"],
:scope [data-holo-part-id="Desktop.Start.Leave"] {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}


/* Portfolio: la página pública de una cuenta. Una columna de lectura con la
   foto del sistema como cabecera, las fichas de proyecto en su carril y la
   biografía debajo. Aquí un rem son 10 px: la raíz la fija el tema. */
:scope [data-holo-part-id="Portfolio.Page"] > [data-holo-role="PageInner"] {
  box-sizing: border-box;
  max-inline-size: 96rem;
  padding: clamp(1.6rem, 3vw, 4rem);
  gap: 2.2rem;
}

:scope [data-holo-part-id="Portfolio.Links"] {
  justify-content: flex-end;
  block-size: 3.6rem;
}

:scope [data-holo-part-id="Portfolio.Links"] > [data-holo-role="Item"] {
  min-inline-size: 0;
  max-inline-size: none;
  padding: 0 1.4rem;
  border: 1px solid var(--holo-border);
  border-radius: var(--eos-radius-pill);
  background: var(--holo-panel);
  color: var(--holo-card-fg);
}

:scope [data-holo-part-id="Portfolio.Links"] :is([data-holo-role="Title"], [data-holo-role="Icon"]) {
  color: var(--holo-card-fg);
  text-shadow: none;
}

:scope [data-holo-part-id="Portfolio.Links"] [data-holo-role="Title"] {
  font-size: 1.4rem;
}

:scope [data-holo-part-id="Portfolio.Header"] {
  justify-items: start;
  gap: 1rem;
}

/* La foto encabeza sin ocupar la pantalla: se recorta a una franja. */
:scope [data-holo-part-id="Portfolio.Header"] > [data-holo-role="Hero"] {
  block-size: clamp(16rem, 30vh, 32rem);
  border-radius: var(--holo-radius);
}

:scope [data-holo-part-id="Portfolio.Header"] > [data-holo-role="Hero"] > [data-holo-role="HeroImage"] {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center 40%;
}

:scope [data-holo-part-id="Portfolio.Header"] > [data-holo-role="Hero"] > [data-holo-role="Kicker"] {
  inset: auto auto 1.6rem 1.6rem;
  transform: none;
  padding: 0.5rem 1.3rem;
  border-radius: var(--eos-radius-pill);
  background: rgba(255, 255, 255, 0.74);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #25384a;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

:scope [data-holo-part-id="Portfolio.Header"] > [data-holo-role="Title"] {
  margin-block-start: 0.6rem;
  font-size: clamp(2.8rem, 4vw, 4.2rem);
  line-height: 1.15;
}

:scope [data-holo-part-id="Portfolio.Header"] > [data-holo-role="Description"] {
  max-inline-size: 62ch;
  color: var(--holo-muted);
  font-size: 1.75rem;
  line-height: 1.5;
}

:scope [data-holo-part-id="Portfolio.Header"] > [data-holo-role="Rail"] {
  margin-block-start: 1rem;
}

/* Cada proyecto es un enlace con su logo, su nombre y adónde lleva. */
:scope [data-holo-part-id="Portfolio.Header"] [data-holo-type="Content.Card"] {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0.9rem;
  box-sizing: border-box;
  inline-size: 17rem;
  padding: 1.6rem 1.4rem 1.4rem;
  border: 1px solid var(--holo-border);
  border-radius: var(--holo-radius);
  background: var(--holo-card-bg);
  color: var(--holo-card-fg);
  text-align: center;
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

:scope [data-holo-part-id="Portfolio.Header"] [data-holo-type="Content.Card"]:hover,
:scope [data-holo-part-id="Portfolio.Header"] [data-holo-type="Content.Card"]:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--holo-accent) 35%, transparent);
}

:scope [data-holo-part-id="Portfolio.Header"] [data-holo-type="Content.Card"] > [data-holo-role="Heading"] {
  font-size: 1.6rem;
}

:scope [data-holo-part-id="Portfolio.Header"] [data-holo-type="Content.Card"] [data-holo-type="Visual.Image"] {
  inline-size: 8.6rem;
  block-size: 8.6rem;
}

:scope [data-holo-part-id="Portfolio.Header"] [data-holo-type="Content.Card"] [data-holo-type="Content.Text"] {
  color: var(--holo-card-fg);
  font-size: 1.35rem;
  line-height: 1.45;
  white-space: normal;
  text-shadow: none;
  overflow-wrap: anywhere;
}

/* La biografía se lee como texto corrido, no como un documento en ventana. */
:scope [data-holo-part-id="Portfolio.Biography"] {
  max-inline-size: 72ch;
  font-size: 1.65rem;
  line-height: 1.65;
}

:scope [data-holo-part-id="Portfolio.Biography"] h2 {
  margin-block: 2.6rem 0.8rem;
  font-size: 2rem;
}

/* La ficha de la cuenta es una tarjeta de presentación sobre el mismo cristal
   de la ventana: retrato con halo, nombre, una frase y el perfil abierto. */
:scope [data-holo-type="Layout.Window"]:has([data-holo-part-id="Desktop.Profile.Card"]) > [data-holo-role="Main"] {
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(120, 180, 255, .18), transparent 62%),
    color-mix(in srgb, var(--holo-panel) 70%, transparent);
}
:scope [data-holo-part-id="Desktop.Profile.Card"] {
  padding: 2.4rem 3.2rem 2rem;
  text-align: center;
  align-content: center;
}
:scope [data-holo-part-id="Desktop.Profile.Portrait"] {
  margin-inline: auto;
  border: .3rem solid rgba(255, 255, 255, .85);
  border-radius: 50%;
  object-fit: cover;
}
:scope [data-holo-part-id="Desktop.Profile.Name"][data-holo-type] {
  letter-spacing: -.01em;
}
:scope [data-holo-part-id="Desktop.Profile.Name"][data-holo-type]:not(#eos-priority) {
  font-size: 2.2rem;
  font-weight: 650;
  color: var(--holo-card-fg);
}
:scope [data-holo-part-id="Desktop.Profile.Summary"][data-holo-type] {
  max-inline-size: 36ch;
  margin-inline: auto;
  color: var(--eos-muted);
  font-size: 1.4rem;
  line-height: 1.5;
  white-space: normal;
}
:scope [data-holo-part-id="Desktop.Profile.Summary"][data-holo-type]:not(#eos-priority) {
  white-space: pre-line;
}
:scope [data-holo-part-id="Desktop.Profile.About"][data-holo-type] {
  max-inline-size: 34ch;
  margin-inline: auto;
  color: var(--eos-muted);
  font-size: 1.3rem;
  line-height: 1.5;
  white-space: normal;
}
:scope [data-holo-part-id="Desktop.Profile.Detail"][data-holo-type] {
  place-items: center;
  box-sizing: border-box;
  margin-inline: auto;
  padding: 0 1.2rem;
  line-height: 1;
  border: 1px solid var(--holo-border);
  border-radius: var(--eos-radius-pill);
  background: var(--holo-surface);
  color: var(--eos-muted);
  font-size: 1.2rem;
}
:scope [data-holo-part-id="Desktop.Profile.Detail"][data-holo-type]:not(#eos-priority) {
  inline-size: fit-content;
  --holo-part-inline-size: fit-content;
  --holo-part-width: fit-content;
  justify-self: center;
  --holo-part-justify-self: center;
  display: grid;
  --holo-part-display: grid;
}

/* Inicio contiene sólo nombres; todos sus grupos comparten filas y foco. */
:scope [data-holo-part-id="Desktop.Start"] [data-holo-type="Collection.List"] > [data-holo-role="Header"],
:scope [data-holo-part-id="Desktop.Start"] [data-holo-role="Description"] {
  display: none;
}

:scope [data-holo-part-id="Desktop.Start"] [data-holo-presentation="Menu"] > [data-holo-role="Item"]:focus-visible {
  outline: 2px solid var(--holo-accent);
  outline-offset: -2px;
}

/* Todos los mensajes de acción usan el Notice oficial del Host de Holo.
   La piel de Eos conserva su aviso junto a la barra, sin otro renderer. */
:scope [data-holo-notice][data-holo-role="Notice"] {
  --holo-fg: var(--holo-card-fg);
  position: fixed;
  z-index: 2147483600;
  inset: auto 1.6rem 6.4rem auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  inline-size: max-content;
  max-inline-size: min(38rem, calc(100vw - 3.2rem));
  min-block-size: 4.6rem;
  padding: 1.2rem 1.6rem;
  border: 1px solid var(--eos-glass-edge);
  border-radius: 1.2rem;
  background: var(--holo-panel-raised);
  backdrop-filter: var(--holo-window-backdrop);
  -webkit-backdrop-filter: var(--holo-window-backdrop);
  box-shadow: 0 1.2rem 3rem rgba(20, 40, 68, 0.22);
  color: var(--holo-card-fg);
  font-size: 1.3rem;
  line-height: 1.5;
  text-align: start;
}

:scope [data-holo-notice][data-holo-role="Notice"]::before {
  content: "✓";
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 2.4rem;
  block-size: 2.4rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: var(--holo-accent);
  font-size: 1.4rem;
  font-weight: 700;
}

:scope [data-holo-notice="Error"][data-holo-role="Notice"]::before {
  content: "!";
  color: var(--holo-window-close);
}

:scope [data-holo-notice][data-holo-role="Notice"] [data-holo-role="Text"] {
  color: inherit;
  font-size: inherit;
  white-space: normal;
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :scope [data-holo-notice][data-holo-role="Notice"] {
    background: var(--eos-opaque);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Crystal Minimal: identidad de las superficies Apps y Store. La estructura,
   el filtrado y las acciones siguen declarados en sus owners y Parts Holo. */
:scope [data-holo-type="Layout.Window"]:has([data-holo-surface="Desktop.Apps"], [data-holo-surface="Desktop.Store"]) {
  --holo-radius: 1.1rem;
  --holo-list-gap: .75rem;
  container-type: inline-size;
  container-name: eos-app;
}
:scope:is(:not([data-eos-theme]), [data-eos-theme="Blue"], [data-eos-theme="Glossy"]) [data-holo-type="Layout.Window"]:has([data-holo-surface="Desktop.Apps"], [data-holo-surface="Desktop.Store"]) {
  --holo-surface: rgba(241, 246, 254, .68);
  --holo-panel: rgba(249, 251, 255, .88);
  --holo-card-bg: rgba(255, 255, 255, .65);
  --holo-card-fg: var(--eos-ink);
  --eos-muted: var(--eos-ink-muted);
  --holo-border: rgba(143, 163, 199, .2);
  --holo-accent: #076bff;
  --holo-action: #076bff;
  --holo-window-backdrop: blur(28px) saturate(1.12);
  border-color: rgba(255, 255, 255, .92);
  box-shadow: 0 1.3rem 3.4rem rgba(30, 52, 88, .18), inset 0 1px 0 white;
}
:scope [data-holo-surface="Desktop.Apps"], :scope [data-holo-surface="Desktop.Store"] { color: var(--holo-card-fg); }
:scope [data-holo-surface="Desktop.Apps.Title"] [data-holo-role="Title"],
:scope [data-holo-surface="Desktop.Store.Title"] [data-holo-role="Title"],
:scope [data-holo-surface="Desktop.Store.Detail.Title"] [data-holo-role="Title"] { font-size: 3.4rem; letter-spacing: -.035em; font-weight: 600; line-height: 1.15; }
:scope [data-holo-surface="Desktop.Apps.Search"], :scope [data-holo-surface="Desktop.Store.Search"] { border-radius: 1.2rem; background: color-mix(in srgb, var(--holo-card-bg) 75%, transparent); border-color: var(--holo-border); }
:scope [data-holo-surface="Desktop.Apps.Categories"] { background: transparent; padding: 0; border: 0; }
:scope [data-holo-surface="Desktop.Apps.Categories"] [data-holo-role="Item"] { background: transparent; border-radius: 0; border: 0; padding: 1rem 1.5rem; color: var(--eos-muted); }
:scope [data-holo-surface="Desktop.Apps.Categories"] [aria-current="true"],
:scope [data-holo-surface="Desktop.Apps.Categories"] [data-holo-item-selected="true"] { color: var(--holo-accent); background: transparent; border: 0; box-shadow: inset 0 -2px var(--holo-accent); }
:scope [data-holo-surface="Desktop.Apps.Grid"] { background: transparent; padding: .6rem 0; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .8rem 1rem; }
:scope [data-holo-surface="Desktop.Apps.Grid"] [data-holo-role="Icon"] { inline-size: 8.6rem; block-size: 8.6rem; }
:scope [data-holo-surface="Desktop.Apps.Grid"] [data-holo-role="Item"] { min-inline-size: 7.4rem; padding: .4rem; }
:scope [data-holo-surface="Desktop.Apps.Grid"] [data-holo-role="Title"] { margin-top: .6rem; font-size: 1.4rem; }
/* Apps estrecha (móvil): tres iconos por fila en vez de uno, y el carril de
   categorías sin barra de desplazamiento horizontal. */
@container eos-app (max-width: 52rem) {
  :scope [data-holo-surface="Desktop.Apps.Grid"]:not(#eos-priority) { grid-template-columns: repeat(auto-fill, minmax(8.4rem, 1fr)); gap: 1.2rem .6rem; }
  :scope [data-holo-surface="Desktop.Apps.Grid"] [data-holo-role="Icon"]:not(#eos-priority) { inline-size: 6.4rem; block-size: 6.4rem; }
  :scope [data-holo-surface="Desktop.Apps.Grid"] [data-holo-role="Item"]:not(#eos-priority) { min-inline-size: 0; }
  :scope [data-holo-surface="Desktop.Apps.Grid"] [data-holo-role="Title"]:not(#eos-priority) { font-size: 1.2rem; }
  :scope [data-holo-surface="Desktop.Apps.Categories"]:not(#eos-priority) { overflow-x: hidden; }
}

:scope [data-holo-surface="Desktop.Store"]:where(:has(> [data-holo-surface="Desktop.Store.Sidebar"]:not([hidden]))):not(#eos-priority) {
  grid-template-columns: minmax(22rem, 22%) minmax(0, 1fr);
  --holo-part-grid-template-columns: minmax(22rem, 22%) minmax(0, 1fr);
}
:scope [data-holo-surface="Desktop.Store.Sidebar"] { background: color-mix(in srgb, var(--holo-surface) 86%, transparent); border-right: 1px solid var(--holo-border); }
:scope [data-holo-surface="Desktop.Store.Pages"], :scope [data-holo-surface="Desktop.Store.Categories"] { background: transparent; padding: 0; }
:scope [data-holo-surface="Desktop.Store.Pages"] [data-holo-role="Item"], :scope [data-holo-surface="Desktop.Store.Categories"] [data-holo-role="Item"] { padding: .8rem .65rem; border: 0; border-radius: .7rem; background: transparent; }
:scope [data-holo-surface="Desktop.Store.Pages"] [data-holo-item-selected="true"], :scope [data-holo-surface="Desktop.Store.Categories"] [data-holo-item-selected="true"] { background: color-mix(in srgb, var(--holo-accent) 10%, transparent); color: var(--holo-accent); }
:scope [data-holo-surface="Desktop.Store.Category.Label"] { padding: .8rem .5rem 0; border-top: 1px solid var(--holo-border); font-size: 1.2rem; }
:scope [data-holo-surface="Desktop.Store.Feature"] { background: transparent; border: 0; padding: 0; }
:scope [data-holo-surface="Desktop.Store.Feature"] > [data-holo-role="CarouselTrack"] { justify-content: start; scroll-snap-type: x mandatory; }
:scope [data-holo-surface="Desktop.Store.Feature"] > [data-holo-role="CarouselTrack"] > [data-holo-role="Item"] {
  flex: 0 0 100%; grid-template-columns: minmax(0, 1fr); gap: .8rem; padding: 1.6rem 2.8rem;
  /* Cada tarjeta toma los dos colores de su app (`Store.Palette`, sacados de
     su icono); sin paleta, el azul y lila de siempre. */
  background: linear-gradient(115deg,
    color-mix(in srgb, var(--holo-item-palette-from, #bce8f6) 62%, var(--holo-card-bg)),
    color-mix(in srgb, var(--holo-item-palette-to, #dad1ff) 66%, var(--holo-card-bg)));
}
:scope [data-holo-surface="Desktop.Store.Feature"] [data-holo-role="Primary"] { grid-column: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: auto; gap: 1.8rem; padding: 0; background: transparent; border: 0; }
:scope [data-holo-surface="Desktop.Store.Feature"] [data-holo-role="Primary"] > [data-holo-role="Main"] { grid-column: 1; grid-row: 1; gap: .7rem; align-self: center; }
:scope [data-holo-surface="Desktop.Store.Feature"] [data-holo-role="Primary"] > [data-holo-role="Preview"] { grid-column: 2; grid-row: 1; inline-size: 100%; block-size: 18rem; aspect-ratio: auto; background: transparent; }
:scope [data-holo-surface="Desktop.Store.Feature"] [data-holo-role="Primary"] > [data-holo-role="Icon"] { display: none; }
:scope [data-holo-surface="Desktop.Store.Feature"] [data-holo-role="Title"] { font-size: 3rem; line-height: 1.2; letter-spacing: -.03em; }
:scope [data-holo-surface="Desktop.Store.Feature"] [data-holo-role="Subtitle"] { order: -1; color: var(--eos-muted); font-size: 1.2rem; }
:scope [data-holo-surface="Desktop.Store.Feature"] [data-holo-role="Actions"] { grid-column: 1; padding: 0; }
:scope [data-holo-surface="Desktop.Store.Feature"] [data-holo-role="Actions"] button { border: 0; border-radius: 1.6rem; color: var(--holo-accent); background: color-mix(in srgb, var(--holo-accent) 9%, var(--holo-card-bg)); padding: .6rem 1.4rem; }
:scope [data-holo-surface="Desktop.Store.Feature"] > :is([data-holo-role="CarouselPrevious"], [data-holo-role="CarouselNext"]) { inset-block-start: 45%; transform: translateY(-50%); color: var(--holo-card-fg); }
:scope [data-holo-surface="Desktop.Store.List"] { background: transparent; padding: 0; }
:scope [data-holo-surface="Desktop.Store.List"] [data-holo-role="Item"] { background: transparent; border: 0; border-bottom: 1px solid var(--holo-border); border-radius: 0; box-shadow: none; }
:scope [data-holo-surface="Desktop.Store.List"] [data-holo-role="Action"] { border: 0; border-radius: 1.8rem; padding: .6rem 1.2rem; background: color-mix(in srgb, var(--holo-accent) 9%, var(--holo-card-bg)); color: var(--holo-accent); font-size: 1.2rem; }
:scope [data-holo-surface="Desktop.Store.Detail.Icon"] { border-radius: 1rem; align-self: center; }
:scope [data-holo-surface="Desktop.Store.Identity"] { align-items: center; }

:scope [data-holo-surface="Desktop.Store.Detail.Actions"] [data-holo-control-id="Install"] { min-inline-size: 7rem; justify-content: center; border-radius: 1rem; border: 0; padding: .7rem 1.5rem; color: var(--holo-accent); background: color-mix(in srgb, var(--holo-accent) 10%, var(--holo-card-bg)); }
:scope [data-holo-surface="Desktop.Store.Detail.Actions"] [data-holo-control-id="Uninstall"] { background: transparent; border: 0; color: var(--eos-muted); font-size: 1.2rem; }
:scope [data-holo-surface="Desktop.Store.Detail.Hint"] { font-size: 1.2rem; }
:scope [data-holo-surface="Desktop.Store.Preview"] { background: linear-gradient(120deg, #edf5ff, #efedfc); border-radius: 1rem; padding: 0; }
:scope [data-holo-surface="Desktop.Project.Frame"] { min-block-size: 0; }
:scope [data-holo-surface="Desktop.Store.About.Text"] { line-height: 1.6; }
:scope [data-holo-surface="Desktop.Store.Features.List"] { padding: 0; background: transparent; }

@container eos-app (max-width: 68rem) {
  :scope [data-holo-surface="Desktop.Store"] {
  overflow: auto;
}
:scope [data-holo-surface="Desktop.Store"]:not(#eos-priority) {
  grid-template-columns: minmax(0, 1fr);
  --holo-part-grid-template-columns: minmax(0, 1fr);
}
  :scope [data-holo-surface="Desktop.Store.Sidebar"] { border-right: 0; border-bottom: 1px solid var(--holo-border); }
  :scope [data-holo-surface="Desktop.Store.Categories"], :scope [data-holo-surface="Desktop.Store.Pages"] { display: flex; flex-wrap: wrap; }
  :scope [data-holo-surface="Desktop.Store.Viewport"] { min-block-size: 22rem; }
  :scope [data-holo-surface="Desktop.Apps.Header"]:not(#eos-priority), :scope [data-holo-surface="Desktop.Store.Identity"]:not(#eos-priority), :scope [data-holo-surface="Desktop.Store.Information"]:not(#eos-priority) {
  grid-template-columns: minmax(0, 1fr);
  --holo-part-grid-template-columns: minmax(0, 1fr);
}
  :scope [data-holo-surface="Desktop.Apps.Categories"] { overflow-x: auto; }
  :scope [data-holo-surface="Desktop.Store.Detail.Controls"] { justify-items: start; }
  :scope [data-holo-surface="Desktop.Apps.Title"] [data-holo-role="Title"], :scope [data-holo-surface="Desktop.Store.Title"] [data-holo-role="Title"], :scope [data-holo-surface="Desktop.Store.Detail.Title"] [data-holo-role="Title"] { font-size: 2.6rem; }
}

:scope [data-holo-surface="Desktop.Apps.Search"] > input, :scope [data-holo-surface="Desktop.Store.Search"] > input { border-radius: 1.8rem; background: var(--holo-card-bg); border-color: var(--holo-border); color: var(--holo-card-fg); }
:scope [data-holo-surface="Desktop.Store.Detail.Run"][data-holo-type="Navigation.Action.Bar"] > [data-holo-role="Button"] { border-radius: 1.2rem; color: white; background: linear-gradient(#64acff, var(--holo-accent)); border: 1px solid color-mix(in srgb, var(--holo-accent) 65%, white); box-shadow: inset 0 1px 0 #ffffff80; inline-size: 100%; min-block-size: 4.4rem; block-size: auto; font-size: 1.6rem; padding: .8rem 1.4rem; }

/* Estas vistas usan cabeceras de texto, no tarjetas. La colección conserva
   sus títulos accesibles y la barra lateral dispone destinos en vertical. */
:scope :is([data-holo-surface="Desktop.Apps"], [data-holo-surface="Desktop.Store"]) :is([data-holo-type="Content.Header"], [data-holo-type="Content.Text"], [data-holo-type="Navigation.Action.Bar"]) {
  min-block-size: 0; padding: 0; border: 0; background: transparent; box-shadow: none;
}
:scope [data-holo-surface="Desktop.Store.Detail.Icon"] { padding: 0; background: transparent; }
:scope [data-holo-surface="Desktop.Store.Sidebar"] [data-holo-type="Collection.List"] { display: grid; grid-template-columns: minmax(0, 1fr); gap: .3rem; }
:scope [data-holo-surface="Desktop.Store.Sidebar"] [data-holo-type="Collection.List"] > [data-holo-role="Item"] {
  display: flex; align-items: center; gap: 1rem; inline-size: 100%; min-block-size: 3.8rem; color: var(--holo-card-fg); text-align: start;
}
:scope [data-holo-surface="Desktop.Store.Sidebar"] [data-holo-role="Title"] { display: block; font-size: 1.3rem; font-weight: 450; white-space: normal; }
:scope [data-holo-type="Layout.Window"] [data-holo-surface="Desktop.Apps.Categories"][data-holo-type="Collection.List"] > [data-holo-role="Item"][aria-current="true"] {
  background: transparent; color: var(--holo-accent); border: 0; box-shadow: inset 0 -2px var(--holo-accent);
}
:scope [data-holo-surface="Desktop.Store.List"] > [data-holo-role="Item"] { display: flex; align-items: center; gap: .6rem; min-block-size: 8rem; padding: 1rem 0; }
:scope [data-holo-surface="Desktop.Store.List"] [data-holo-role="Primary"] { display: flex; align-items: center; gap: 1rem; flex: 1; min-inline-size: 0; padding: 0; border: 0; background: transparent; }
:scope [data-holo-surface="Desktop.Store.List"] [data-holo-role="Icon"] { flex: 0 0 5.4rem; inline-size: 5.4rem; block-size: 5.4rem; }
:scope [data-holo-surface="Desktop.Store.List"] [data-holo-role="Title"] { font-size: 1.4rem; font-weight: 550; }
:scope [data-holo-surface="Desktop.Store.List"] [data-holo-role="Text"] { color: var(--eos-muted); font-size: 1.2rem; line-height: 1.35; }
:scope [data-holo-surface="Desktop.Store.List"] [data-holo-role="Actions"] { display: flex; flex: none; padding: 0; }
:scope [data-holo-surface="Desktop.Store.Back"] { justify-content: start; }
:scope [data-holo-surface="Desktop.Store.Back"] button { font-size: 1.3rem; }
:scope [data-holo-surface="Desktop.Store.Detail.Summary"], :scope [data-holo-surface="Desktop.Store.Detail.Category"], :scope [data-holo-surface="Desktop.Store.About.Text"] { font-size: 1.3rem; text-align: start; }
:scope [data-holo-surface="Desktop.Store.Features.List"] [data-holo-role="Title"] { font-size: 1.3rem; font-weight: 400; }
@container eos-app (max-width: 68rem) {
  :scope [data-holo-surface="Desktop.Store.Sidebar"] [data-holo-type="Collection.List"] { display: flex; flex-wrap: wrap; }
  :scope [data-holo-surface="Desktop.Store.Sidebar"] [data-holo-type="Collection.List"] > [data-holo-role="Item"] { inline-size: auto; }
}
:scope :is([data-holo-surface="Desktop.Apps"], [data-holo-surface="Desktop.Store"]) [data-holo-type="Layout.Stack"] { background: transparent; border: 0; box-shadow: none; }
:scope [data-holo-surface="Desktop.Apps.Grid"] > [data-holo-role="Item"] { align-self: start; min-block-size: 0; }
:scope [data-holo-surface="Desktop.Store.Sidebar"] [data-holo-type="Collection.List"] { grid-template-columns: minmax(0, 1fr); }
@container eos-app (max-width: 68rem) {
  :scope [data-holo-surface="Desktop.Store"] > *:not(#eos-priority), :scope [data-holo-surface="Desktop.Apps.Header"] > *:not(#eos-priority), :scope [data-holo-surface="Desktop.Store.Identity"] > *:not(#eos-priority), :scope [data-holo-surface="Desktop.Store.Information"] > *:not(#eos-priority) {
  grid-column: 1;
  --holo-part-grid-column-start: 1;
  grid-row: auto;
  --holo-part-grid-row-start: auto;
}
  :scope [data-holo-surface="Desktop.Store"]:not(#eos-priority) {
  grid-template-rows: max-content minmax(0, 1fr);
  --holo-part-grid-template-rows: max-content minmax(0, 1fr);
}
  :scope [data-holo-surface="Desktop.Apps.Header"], :scope [data-holo-surface="Desktop.Store.Identity"], :scope [data-holo-surface="Desktop.Store.Information"] {
  grid-auto-rows: max-content;
  gap: 1rem;
}
:scope [data-holo-surface="Desktop.Apps.Header"]:not(#eos-priority), :scope [data-holo-surface="Desktop.Store.Identity"]:not(#eos-priority), :scope [data-holo-surface="Desktop.Store.Information"]:not(#eos-priority) {
  grid-template-rows: none;
  --holo-part-grid-template-rows: none;
}
}
/* La barra lateral es una lista de destinos. Su eje vertical prevalece sobre
   la colocación portable en columnas de los items del menú. */
:scope [data-holo-surface="Desktop.Store.Sidebar"] [data-holo-type="Collection.List"] { display: flex; flex-direction: column; align-items: stretch; }

/* La app ampliada ocupa la fila disponible incluso en ventanas estrechas. */
:scope [data-holo-surface="Desktop.Store"]:has([data-holo-surface="Desktop.Project.Frame"][data-holo-presentation="Default"]),
:scope [data-holo-role="Window"][data-holo-window-state="Maximized"] [data-holo-surface="Desktop.Store"]:has([data-holo-surface="Desktop.Project.Refused"]) {
  overflow: hidden;
}
:scope [data-holo-surface="Desktop.Store"]:has([data-holo-surface="Desktop.Project.Frame"][data-holo-presentation="Default"]):not(#eos-priority),
:scope [data-holo-role="Window"][data-holo-window-state="Maximized"] [data-holo-surface="Desktop.Store"]:has([data-holo-surface="Desktop.Project.Refused"]):not(#eos-priority) {
  grid-template-columns: minmax(0, 1fr);
  --holo-part-grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  --holo-part-grid-template-rows: minmax(0, 1fr);
}
:scope [data-holo-surface="Desktop.Store.Sidebar"] [data-holo-type="Collection.List"] > [data-holo-role="Item"] { inline-size: 100%; min-inline-size: 0; flex: none; }
:scope [data-holo-surface="Desktop.Store.Sidebar"] [data-holo-role="Main"] { min-inline-size: 0; flex: 1; }
:scope [data-holo-surface="Desktop.Store.Back"] button { min-block-size: 2.8rem; padding: .5rem 0; }
@container eos-app (max-width: 68rem) {
  :scope [data-holo-surface="Desktop.Store.Sidebar"] [data-holo-type="Collection.List"] { flex-direction: row; }
  :scope [data-holo-surface="Desktop.Store.Sidebar"] [data-holo-type="Collection.List"] > [data-holo-role="Item"] { inline-size: auto; }
}

/* Elegir una categoría es una acción de navegación; su estado se expresa con
   el contrato Active de la barra oficial. */
:scope [data-holo-surface="Desktop.Apps.Categories"] { justify-content: start; gap: .8rem; border-bottom: 1px solid var(--holo-border); }
:scope [data-holo-surface="Desktop.Apps.Categories"] [data-holo-role="Button"] { border: 0; border-radius: 0; padding: .8rem 1.2rem; background: transparent; box-shadow: none; color: var(--eos-muted); }
:scope [data-holo-surface="Desktop.Apps.Categories"] [data-holo-active="true"] { color: var(--holo-accent); box-shadow: inset 0 -2px var(--holo-accent); }
:scope :is([data-holo-surface="Desktop.Apps"], [data-holo-surface="Desktop.Store"]) [data-holo-type="Content.Header"] [data-holo-role="Main"] { padding: 0; border: 0; background: transparent; text-align: start; }
:scope :is([data-holo-surface="Desktop.Apps"], [data-holo-surface="Desktop.Store"]) [data-holo-type="Content.Text"] { text-align: start; }
:scope [data-holo-surface="Desktop.Store.Back"]:not(#eos-priority) {
  justify-content: start;
}
:scope [data-holo-surface="Desktop.Store.Back"] button { color: var(--holo-accent); }
:scope [data-holo-surface="Desktop.Apps.Footer"]:not(#eos-priority) {
  background: transparent;
}

/* Los enlaces de categoría comparten la barra Holo, pero forman pestañas
   compactas. El enlace único conserva su tamaño de lectura en otras vistas. */
:scope [data-holo-surface="Desktop.Apps.Categories"][data-holo-type="Navigation.Action.Bar"] { margin-block-start: 0; flex-wrap: nowrap; justify-content: start; }
:scope [data-holo-surface="Desktop.Apps.Categories"][data-holo-type="Navigation.Action.Bar"] > [data-holo-role="Button"] { inline-size: auto; flex: none; padding: .8rem 1.2rem; font-size: 1.3rem; line-height: 1.6rem; text-align: start; }
:scope [data-holo-surface="Desktop.Apps.Categories"] [data-holo-role="Icon"] { display: none; }
:scope [data-holo-surface="Desktop.Apps.Grid"] { overflow-y: auto; align-content: start; min-block-size: 0; }
:scope :is([data-holo-surface="Desktop.Apps"], [data-holo-surface="Desktop.Store"]) [data-holo-type="Content.Header"]:not(#eos-priority) {
  background: transparent;
  border: 0;
  padding: 0;
}
:scope :is([data-holo-surface="Desktop.Apps"], [data-holo-surface="Desktop.Store"]) [data-holo-type="Content.Header"] [data-holo-role="Main"]:not(#eos-priority) {
  background: transparent;
  border: 0;
  padding: 0;
  text-align: start;
}
:scope [data-holo-surface="Desktop.Store.Back"][data-holo-type="Navigation.Action.Bar"] { justify-content: start; margin-block-start: 0; }
:scope [data-holo-surface="Desktop.Store.Back"][data-holo-type="Navigation.Action.Bar"] > [data-holo-role="Button"] { inline-size: auto; justify-content: start; text-align: start; }
:scope [data-holo-surface="Desktop.Store.Detail.Category"]:not(#eos-priority) {
  text-align: start;
}
:scope [data-holo-surface="Desktop.Store.Preview"] { background: linear-gradient(120deg, color-mix(in srgb, var(--holo-accent) 7%, var(--holo-panel)), var(--holo-panel)); }

/* Las fichas de la lista se reparten según el ancho de la propia lista (la
   barra lateral también la estrecha): dos columnas si caben fichas de 30rem,
   una si no. Con dos columnas fijas, a 700 px el nombre quedaba en 0 px. */
:scope [data-holo-surface="Desktop.Store.List"] { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr)); gap: 1rem; }
:scope [data-holo-surface="Desktop.Store.Detail.Info"]:not(#eos-priority), :scope [data-holo-surface="Desktop.Store.Detail.Controls"]:not(#eos-priority), :scope [data-holo-surface="Desktop.Store.About"]:not(#eos-priority), :scope [data-holo-surface="Desktop.Store.Features"]:not(#eos-priority) {
  background: transparent;
  border: 0;
  padding: 0;
}
/* La descripción y las funciones se leen completas, también en la ficha. */
:scope [data-holo-surface="Desktop.Store.About.Text"] {
  overflow: visible;
  text-overflow: clip;
  line-height: 1.6;
}
:scope [data-holo-surface="Desktop.Store.About.Text"]:not(#eos-priority) {
  white-space: normal;
}
:scope [data-holo-surface="Desktop.Store.Features.List"] { display: flex; flex-direction: column; gap: .4rem; background: transparent; --holo-card-bg: transparent; --holo-panel: transparent; }
:scope [data-holo-surface="Desktop.Store.Features.List"][data-holo-type="Collection.List"]:is(:not([data-holo-presentation]), [data-holo-presentation="Menu"]) > [data-holo-role="Item"] { inline-size: 100%; min-inline-size: 0; min-block-size: 0; background: transparent; border: 0; box-shadow: none; padding: .3rem 0; }
:scope [data-holo-surface="Desktop.Store.Features.List"] [data-holo-role="Main"] { min-inline-size: 0; }
:scope [data-holo-surface="Desktop.Store.Features.List"] [data-holo-role="Title"] { max-inline-size: 100%; overflow-wrap: anywhere; }
:scope [data-holo-surface="Desktop.Store"]:has([data-holo-surface="Desktop.Project.Outside"]) [data-holo-surface="Desktop.Store.Features.List"] { flex-direction: row; flex-wrap: wrap; }
:scope [data-holo-surface="Desktop.Store"]:has([data-holo-surface="Desktop.Project.Outside"]) [data-holo-surface="Desktop.Store.Features.List"] > [data-holo-role="Item"] { inline-size: auto; flex: none; min-block-size: 0; border: 1px solid var(--holo-border); border-radius: .8rem; padding: .65rem .8rem; }
:scope [data-holo-surface="Desktop.Store.Features.List"] [data-holo-role="Title"] { white-space: normal; overflow: visible; text-overflow: clip; }
:scope [data-holo-surface="Desktop.Store.Identity.Text"] { min-inline-size: 0; }
:scope [data-holo-surface="Desktop.Store.Detail.Summary"] { font-size: 1.6rem; line-height: 1.5; }
:scope [data-holo-surface="Desktop.Store.About.Text"]:not(#eos-priority) {
  text-align: start;
}
:scope [data-holo-surface="Desktop.Store.Information"] > [data-holo-surface="Desktop.Store.Features"]:not(#eos-priority) {
  border-inline-start: 0;
  padding-inline-start: 0;
}
@container eos-app (max-width: 68rem) {
  :scope [data-holo-surface="Desktop.Store.Information"] > [data-holo-surface="Desktop.Store.Features"]:not(#eos-priority) {
  border-inline-start: 0;
  padding-inline-start: 0;
}
}
:scope [data-holo-surface="Desktop.Store.Features.List"] [data-holo-role="Primary"] { padding: 0; background: transparent; border: 0; }
/* El dominio, una sola vez bajo el nombre: es el enlace mínimo que abre la
   web en una pestaña nueva. */
:scope [data-holo-surface="Desktop.Project.Outside"] { justify-content: start; padding: 0; background: transparent; border: 0; }
:scope [data-holo-surface="Desktop.Project.Outside"] > [data-holo-role="Button"] { inline-size: auto; min-block-size: 0; padding: 0; gap: .4rem; font-size: 1.3rem; color: var(--holo-accent); }

/* Crystal claro. Blue conserva los tokens azules anteriores; Glossy usa ese
   mismo material con su familia de iconos declarada por App. */
:scope:not([data-eos-theme]),
:scope:not([data-eos-theme]) :where([data-holo-render]) {
  --holo-panel: rgba(248, 250, 253, .88);
  --holo-panel-raised: rgba(252, 253, 255, .9);
  --holo-surface: rgba(242, 245, 249, .58);
  --holo-card-bg: rgba(250, 252, 255, .88);
  --holo-card-fg: var(--eos-ink);
  --holo-border: rgba(134, 151, 175, .2);
  --holo-window-backdrop: blur(8px) saturate(1.03);
  --holo-accent: #076bff;
  --holo-action: #076bff;
  --eos-muted: var(--eos-ink-muted);
  --eos-bar-gradient: linear-gradient(rgba(198, 229, 252, .82), rgba(150, 199, 238, .76));
}
/* Las ventanas son de cristal, al estilo de macOS: dejan ver bastante el fondo,
   muy difuminado y algo más saturado (Martín, 9-10: «más transparencia
   debajo»). */
:scope:not([data-eos-theme]) [data-holo-type="Layout.Window"]:not([data-holo-presentation="Floating"]) {
  --holo-panel: rgba(248, 250, 253, .36);
  --holo-surface: rgba(242, 246, 252, .42);
  --holo-window-backdrop: blur(32px) saturate(1.6);
}
:scope:not([data-eos-theme]) [data-holo-type="Layout.Window"]:has([data-holo-surface="Desktop.Apps"], [data-holo-surface="Desktop.Store"]) {
  --holo-panel: rgba(248, 250, 253, .36);
  --holo-surface: rgba(242, 247, 253, .42);
  --holo-card-bg: rgba(255, 255, 255, .64);
  --holo-card-fg: var(--eos-ink);
  --holo-border: rgba(134, 151, 175, .2);
  --eos-muted: var(--eos-ink-muted);
  --holo-accent: #286fd3;
  --holo-action: #286fd3;
  --holo-window-backdrop: blur(32px) saturate(1.6);
}
:scope:not([data-eos-theme]) [data-holo-surface="Desktop.Store.Detail.Run"] > [data-holo-role="Button"] {
  background: var(--holo-action);
  border-color: transparent;
  box-shadow: none;
}
:scope:not([data-eos-theme]) [data-holo-part-id="Desktop.Bar"] {
  color: var(--holo-card-fg);
}
:scope:not([data-eos-theme]) [data-holo-part-id="Desktop.Bar"] :is([data-holo-role="Text"], [data-holo-role="Title"], [data-holo-role="Icon"]):not([data-holo-part-id="Desktop.Start"] *) {
  color: var(--holo-card-fg);
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :scope:not([data-eos-theme]) [data-holo-type="Layout.Window"]:not(#eos-priority) {
    --holo-panel: #f7f9fc;
    --holo-surface: #f2f5f9;
    --holo-card-bg: white;
    --holo-window-backdrop: none;
}
}

:scope [data-holo-surface="Desktop.Store.Feature"] [data-holo-carousel-index][aria-current="true"] { background: var(--holo-accent); opacity: 1; box-shadow: 0 0 0 2px color-mix(in srgb, var(--holo-accent) 18%, transparent); }

/* La mesa fija el orden entre objetos; cada carrier contiene los índices de
   sus hijos. El foco sólo ordena ventanas, nunca eleva un panel sobre ellas.
   Los menús salen por Overlay del Host, fuera de estos contextos. */
:scope [data-holo-part-id="Desktop.Surface"] {
  isolation: isolate;
}

/* Ningún panel ni acceso puede quedar por encima de una ventana: el orden
   se fija con prioridad, por encima de cualquier estilo en línea que un gesto
   o una animación deje en un carrier, y la regla de ventanas reconoce también
   un envoltorio intermedio. */
:scope [data-holo-part-id="Desktop.Surface"] > [data-holo-part-id="Desktop.Icons"],
:scope [data-holo-part-id="Desktop.Surface"] > :has(> [data-holo-type="Layout.Panel"]) {
  isolation: isolate;
}
:scope [data-holo-part-id="Desktop.Surface"] > [data-holo-part-id="Desktop.Icons"]:not(#eos-priority),
:scope [data-holo-part-id="Desktop.Surface"] > :has(> [data-holo-type="Layout.Panel"]):not(#eos-priority) {
  z-index: 0;
}

/* Al revés también: toda capa que no sea fondo (iconos o un panel, de
   cualquier presentación) queda al menos en 1. Una ventana que un instante
   no lleva su Part dentro (al montarse, al animarse o al recomponerse la
   mesa) sigue por encima de los paneles en vez de quedar a merced del orden
   del DOM. */
:scope [data-holo-part-id="Desktop.Surface"] > :not([data-holo-part-id="Desktop.Icons"], :has(> [data-holo-type="Layout.Panel"])) {
  isolation: isolate;
}
:scope [data-holo-part-id="Desktop.Surface"] > :not([data-holo-part-id="Desktop.Icons"], :has(> [data-holo-type="Layout.Panel"])):not(#eos-priority) {
  z-index: 1;
}

:scope [data-holo-part-id="Desktop.Surface"] > :has([data-holo-type="Layout.Window"][data-holo-window-active="true"]):not(#eos-priority) {
  z-index: 2;
}

/* Arrastrar sobre la mesa mueve y elige objetos, no selecciona texto; el
   contenido de una ventana sigue siendo seleccionable. */
:scope [data-holo-part-id="Desktop.Surface"] {
  -webkit-user-select: none;
  user-select: none;
}
:scope [data-holo-part-id="Desktop.Surface"] [data-holo-type="Layout.Window"] > [data-holo-role="Main"] {
  -webkit-user-select: text;
  user-select: text;
}

/* El material pertenece a Eos; su vista previa lee estos mismos colores. */
:scope {
  --eos-panel-fill: rgba(78, 82, 87, .16);
  --eos-panel-border: rgba(255, 255, 255, .12);
}
:scope [data-holo-type="Layout.Panel"][data-holo-presentation="Grid"] {
  background: var(--eos-panel-fill);
  border: 0;
  outline: 1px solid var(--eos-panel-border);
  box-shadow: 0 6px 18px rgba(12, 18, 25, .10);
  backdrop-filter: blur(3px);
  color: rgba(255, 255, 255, .82);
}
/* Al acercarse a un borde para redimensionarlo, y mientras dura el gesto, el
   propio borde del panel se ilumina (Holo dibuja el brillo con este color). */
:scope [data-holo-type="Layout.Panel"][data-holo-presentation="Grid"] {
  --holo-panel-edge: rgba(214, 232, 255, .8);
  transition: box-shadow .18s ease, outline-color .18s ease;
}
:scope [data-holo-type="Layout.Panel"][data-holo-presentation="Grid"]:has(> :is([data-holo-role="Resize"], [data-holo-role="ResizeEdge"]):is(:hover, :focus-visible)),
:scope [data-holo-type="Layout.Panel"][data-holo-presentation="Grid"][data-holo-gesture="true"] {
  outline-color: rgba(255, 255, 255, .55);
  box-shadow: 0 6px 18px rgba(12, 18, 25, .10), 0 0 0 1.5px var(--holo-panel-edge), 0 0 20px rgba(150, 196, 255, .4);
  animation: holo-panel-edge 1.6s ease-in-out .18s infinite alternate;
}
:scope [data-holo-type="Layout.Panel"][data-holo-presentation="Grid"] > [data-holo-role="Navbar"] > [data-holo-type="Layout.Popover"] {
  width: 100%;
}
:scope [data-holo-type="Layout.Panel"][data-holo-presentation="Grid"] > [data-holo-role="Navbar"] [data-holo-type="Control.Trigger"] {
  padding: 0 7px;
  width: 100%;
  justify-content: space-between;
  min-height: 20px;
  gap: 5px;
  border: 0;
  background: transparent;
  box-shadow: none;
}
:scope [data-holo-type="Layout.Panel"][data-holo-presentation="Grid"] > [data-holo-role="Navbar"] [data-holo-type="Content.Text"] {
  font-size: 11px;
  line-height: 16px;
  letter-spacing: .025em;
  padding: 0;
  margin: 0;
  color: inherit;
}
/* Una pista final de la cabecera sólo aparece al acercarse. Un título con
   texto, si es el único, se ve siempre: con la cabecera de un solo texto (sin
   el antiguo desplegable) esta regla escondía el propio título. Un panel sin
   título conserva su cabecera vacía y transparente como antes. */
:scope [data-holo-type="Layout.Panel"][data-holo-presentation="Grid"] > [data-holo-role="Navbar"] [data-holo-type="Content.Text"]:last-child:is(:not(:first-child), :empty) {
  opacity: 0;
}
:scope [data-holo-type="Layout.Panel"][data-holo-presentation="Grid"] > [data-holo-role="Navbar"]:hover [data-holo-type="Content.Text"]:last-child:is(:not(:first-child), :empty),
:scope [data-holo-type="Layout.Panel"][data-holo-presentation="Grid"] > [data-holo-role="Navbar"]:focus-within [data-holo-type="Content.Text"]:last-child:is(:not(:first-child), :empty) { opacity: .85; }
:scope [data-holo-type="Layout.Panel"][data-holo-presentation="Grid"] > [data-holo-role="Navbar"]:has(> [data-holo-type="Content.Text"]:not(:empty)) {
  justify-content: flex-start;
  padding-inline: 7px;
}
:scope [data-holo-type="Layout.Panel"][data-holo-presentation="Grid"][data-holo-panel-rows="1"] > [data-holo-role="Navbar"]:has(> [data-holo-type="Content.Text"]:not(:empty)) {
  padding-inline: 2rem;
}
:scope [data-holo-type="Layout.Panel"][data-holo-presentation="Grid"] > [data-holo-role="Body"] > [data-holo-type="Collection.List"] {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  background: transparent;
  overflow: visible;
}

/* Apps del sistema: misma navegación, icono compacto y estado propio. */
:scope [data-holo-part-id="Desktop.System"] { flex: 0 0 auto; }
:scope [data-holo-part-id="Desktop.System"] [data-holo-list-row-id] { width: 36px; min-width: 36px; padding: 6px; }
:scope [data-holo-part-id="Desktop.System"] img { width: 24px; height: 24px; object-fit: contain; image-rendering: pixelated; }
:scope [data-holo-part-id="Desktop.System"] [data-holo-role="Main"] { display: none; }
:scope [data-holo-part-id="Desktop.System"] [data-holo-list-row-id] { justify-content: center; gap: 0; }
:scope [data-holo-part-id="Desktop.System"] [data-holo-role="Icon"] { flex: 0 0 24px; width: 24px; height: 24px; }
/* Los avisos de Aura son notificaciones sobrias, como las del sistema en
   macOS: un panel claro y translúcido, borde fino, sombra suave y un cierre
   discreto que aparece al pasar por encima. Arriba a la derecha: abajo vive
   Aura. */
:scope [data-eos-guest-notice] {
  position: fixed;
  z-index: 100000;
  inset: 1.2rem 1.2rem auto auto;
  max-inline-size: min(36rem, calc(100vw - 2.4rem));
  border: .5px solid rgba(0, 0, 0, .12);
  border-radius: 1.4rem;
  background: rgba(246, 246, 248, .82);
  -webkit-backdrop-filter: var(--eos-glass-strong);
  backdrop-filter: var(--eos-glass-strong);
  box-shadow: 0 .8rem 2.4rem rgba(0, 0, 0, .14), 0 0 0 .5px rgba(255, 255, 255, .5) inset;
  color: #1d1d1f;
  font: 400 1.3rem/1.4 -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --holo-enter-x: 1.6rem;
  --holo-enter-y: 0;
  animation: holo-enter 320ms cubic-bezier(.2, .8, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
  :scope [data-eos-guest-notice] { animation: none; }
}

/* Ficha de app o proyecto, según el diseño de referencia
   (`.About/Media/Design/Apps/Detail`): icono en un cuadrado brillante, botón
   principal en píldora y la vista previa sobre una banda luminosa. */
:scope [data-holo-surface="Desktop.Store.Detail.Icon"][data-holo-type] {
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, .85);
  object-fit: contain;
}
:scope [data-holo-surface="Desktop.Store.Detail.Icon"][data-holo-type]:not(#eos-priority) {
  padding: 1.4rem;
  border-radius: 2.6rem;
  background: radial-gradient(90% 80% at 30% 20%, rgba(255, 255, 255, .95), transparent 60%),
    linear-gradient(145deg, #f3f0ff, #dfe9ff);
  box-shadow: none;
  clip-path: inset(0 round 2.6rem);
  --holo-part-clip-path: inset(0 round 2.6rem);
}
:scope [data-holo-surface="Desktop.Store.Detail.Run"][data-holo-type="Navigation.Action.Bar"]:not(#eos-priority),
:scope [data-holo-surface="Desktop.Store.Detail.Controls"]:not(#eos-priority) {
  background: transparent;
  border: 0;
  box-shadow: none;
}
:scope [data-holo-surface="Desktop.Store.Detail.Title"] [data-holo-role="Title"] { font-size: 3.6rem; letter-spacing: -.03em; }
:scope [data-holo-surface="Desktop.Store.Detail.Summary"] { font-size: 1.8rem; color: var(--eos-muted); }
:scope [data-holo-surface="Desktop.Store.Detail.Category"] { font-size: 1.4rem; color: var(--eos-muted); opacity: .85; }
:scope [data-holo-type="Layout.Window"] [data-holo-surface="Desktop.Store.Detail.Run"][data-holo-type="Navigation.Action.Bar"] > [data-holo-role="Button"] {
  justify-content: center;
  min-block-size: 4.6rem;
  border-radius: var(--eos-radius-pill);
  color: white;
  font-size: 1.7rem;
  font-weight: 600;
  transition: filter .16s ease, transform .16s ease;
}
:scope [data-holo-type="Layout.Window"] [data-holo-surface="Desktop.Store.Detail.Run"][data-holo-type="Navigation.Action.Bar"] > [data-holo-role="Button"]:not(#eos-priority) {
  border: 1px solid rgba(255, 255, 255, .55);
  background: linear-gradient(180deg, #74b7ff, #2f7cf6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
}
:scope [data-holo-type="Layout.Window"] [data-holo-surface="Desktop.Store.Detail.Run"][data-holo-type="Navigation.Action.Bar"] > [data-holo-role="Button"]:is(:hover, :focus-visible) {
  filter: brightness(1.06);
}
:scope [data-holo-surface="Desktop.Store.Preview.Container"] {
  box-sizing: border-box;
  place-items: center;
  padding: 2.4rem;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 1.8rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}
:scope [data-holo-surface="Desktop.Store.Preview.Container"]:not(#eos-priority) {
  display: grid;
  --holo-part-display: grid;
  grid-template-rows: minmax(0, 1fr);
  --holo-part-grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
  --holo-part-overflow: hidden;
  background: radial-gradient(55% 80% at 8% 12%, rgba(255, 255, 255, .9), transparent 60%),
    radial-gradient(60% 90% at 92% 88%, rgba(170, 160, 255, .55), transparent 65%),
    radial-gradient(50% 70% at 70% 15%, rgba(140, 200, 255, .5), transparent 60%),
    linear-gradient(120deg, #dbe8ff, #e8e1ff 55%, #d9e9ff);
}
:scope [data-holo-surface="Desktop.Store.Preview"][data-holo-type] {
  min-block-size: 0;
  max-block-size: 100%;
  max-inline-size: 100%;
  border-radius: 1.2rem;
  object-fit: contain;
}
:scope [data-holo-surface="Desktop.Store.Preview"][data-holo-type]:not(#eos-priority) {
  block-size: 100%;
  --holo-part-block-size: 100%;
  --holo-part-height: 100%;
  inline-size: auto;
  --holo-part-inline-size: auto;
  --holo-part-width: auto;
  background: transparent;
  clip-path: inset(0 round 1.2rem);
  --holo-part-clip-path: inset(0 round 1.2rem);
}

/* Pantalla de cuentas: la entrada es un buscador de personas con su ficha
   al elegir una. */
:scope [data-holo-part-id="User.Search"] {
  margin-inline: auto;
}
/* El buscador es un botón circular (Control.Search Expand) que se abre en
   un campo de hasta 46 rem al enfocarlo o mientras tiene texto. */
:scope [data-holo-part-id="User.Search"]:not(#eos-priority) {
  justify-self: center;
  --holo-part-justify-self: center;
}
:scope [data-holo-part-id="User.Search"]:is(:focus-within, :has(> input:not(:placeholder-shown))):not(#eos-priority) {
  inline-size: min(46rem, 100%);
  --holo-part-inline-size: min(46rem, 100%);
  --holo-part-width: min(46rem, 100%);
}
:scope [data-holo-part-id="User.Search"] > input {
  block-size: 4.8rem;
  padding-inline: 4.4rem 1.6rem;
  -webkit-backdrop-filter: var(--eos-glass-vivid);
  backdrop-filter: var(--eos-glass-vivid);
  font-size: 1.6rem;
}
:scope [data-holo-part-id="User.Search"] > input:not(#eos-priority) {
  border: 1px solid rgba(255, 255, 255, .6);
  /* Radio igual a media altura: con un radio enorme Chrome recorta el
     desenfoque del fondo como un rectángulo alrededor de la píldora. */
  border-radius: 2.4rem;
  background: rgba(240, 246, 255, .3);
  box-shadow: none;
  color: white;
}
:scope [data-holo-part-id="User.Search"] > input:focus-visible:not(#eos-priority) {
  outline: none;
  border-color: rgba(255, 255, 255, .95);
  background: rgba(240, 246, 255, .4);
}
:scope [data-holo-part-id="User.Search"] > input::placeholder { color: rgba(255, 255, 255, .78); }
/* Plegado el campo no lleva relleno: con 4,8 rem a la izquierda más el borde
   no podía bajar de 71 px, se salía de su pieza de 69 y el círculo salía
   cortado por la derecha. Abierto, el relleno deja sitio a la lupa. */
:scope [data-holo-part-id="User.Search"] > input:not(#eos-priority) { padding-inline: 0; box-sizing: border-box; inline-size: 100%; }
:scope [data-holo-part-id="User.Search"]:is(:focus-within, :has(> input:not(:placeholder-shown))) > input:not(#eos-priority) { padding-inline: 4.8rem 1.6rem; }
/* La lupa es blanca sobre cristal claro y cielo: una sombra oscura suave la
   separa del fondo. */
:scope [data-holo-part-id="User.Search"] [data-holo-role="Icon"]:not(#eos-priority) {
  color: white;
  text-shadow: 0 1px 3px rgba(12, 24, 48, .55);
}
:scope [data-holo-part-id="User.Summary"] {
  text-align: center;
  text-shadow: 0 .1rem .8rem rgba(10, 30, 60, .5);
}
:scope [data-holo-part-id="User.Summary"]:not(#eos-priority) {
  color: rgba(255, 255, 255, .86);
}
:scope [data-holo-part-id="User.Summary"] {
  margin-inline: auto;
  font-size: 1.4rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
:scope [data-holo-part-id="User.Summary"]:not(#eos-priority) {
  inline-size: min(56ch, 100%);
  --holo-part-inline-size: min(56ch, 100%);
  --holo-part-width: min(56ch, 100%);
  justify-self: center;
  --holo-part-justify-self: center;
  white-space: normal;
  /* La descripción entera se lee desplazándose dentro de su caja, sin barra. */
  display: block;
  --holo-part-display: block;
  overflow-y: auto;
  --holo-part-overflow: hidden auto;
  scrollbar-width: none;
  max-block-size: 4.5em;
  --holo-part-max-block-size: 4.5em;
  --holo-part-max-height: 4.5em;
}
/* La ficha de una persona deja sitio a sus perfiles y a la vuelta atrás. */


/* Un lanzador (escritorio, panel o Archivos) no dibuja recuadro al pasar el
   puntero: su icono se ilumina un poco. La elección conserva su marca. */
:scope [data-holo-type="Collection.List"][data-holo-presentation="Board"] > [data-holo-role="Item"]:hover:not([aria-current="true"]) {
  background: transparent;
}

:scope [data-holo-type="Collection.List"][data-holo-presentation="Board"] > [data-holo-role="Item"] [data-holo-role="Icon"] {
  transition: filter var(--eos-time) var(--eos-ease);
}

:scope [data-holo-type="Collection.List"][data-holo-presentation="Board"] > [data-holo-role="Item"]:hover [data-holo-role="Icon"] {
  filter: brightness(1.12) saturate(1.06);
}

/* El menú de inicio nace de la barra: a 1px del borde izquierdo, pegado a
   ella y con las esquinas de abajo rectas. */
:scope [data-holo-part-id="Desktop.Start"] > [data-holo-role="Surface"] {
  translate: 1px 0;
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}

/* La barra y el botón de inicio comparten el mismo cristal azul. Los
   accesos de la derecha (Aura, pantalla completa y hora) no tienen fondo
   propio: todos responden igual al pasar el puntero. */
:scope [data-holo-part-id="Desktop.System"] [data-holo-list-row-id]:is([aria-current="true"], [aria-pressed="true"]) {
  background: transparent;
}

:scope [data-holo-part-id="Desktop.System"] [data-holo-list-row-id]:hover,
:scope [data-holo-part-id="Desktop.Clock"] > [data-holo-type="Control.Trigger"]:hover {
  background: rgba(255, 255, 255, 0.14);
}

/* Menú contextual: texto normal, cada icono azul en su pastilla, aire
   proporcionado y una sombra contenida. */
:scope [data-holo-type="Layout.Context"] > [data-holo-role="Surface"] {
  min-inline-size: 22rem;
  padding: 0.6rem;
  border-radius: 1.2rem;
  box-shadow: 0 0.8rem 2.4rem rgba(20, 40, 64, 0.14), 0 0.1rem 0.3rem rgba(20, 40, 64, 0.06);
}

:scope [data-holo-type="Layout.Context"] [data-holo-presentation="Menu"] {
  gap: 0.2rem;
}

:scope [data-holo-type="Layout.Context"] [data-holo-presentation="Menu"] > [data-holo-role="Item"] {
  min-block-size: 3.8rem;
  padding: 0.5rem 1.4rem 0.5rem 0.6rem;
  gap: 1.1rem;
  border-radius: 0.9rem;
}

:scope [data-holo-type="Layout.Context"] [data-holo-presentation="Menu"] > [data-holo-role="Item"] [data-holo-role="Title"] {
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.01em;
}

:scope [data-holo-type="Layout.Context"] [data-holo-presentation="Menu"] > [data-holo-role="Item"] > [data-holo-role="Icon"] {
  display: grid;
  place-items: center;
  inline-size: 2.8rem;
  block-size: 2.8rem;
  border-radius: 0.8rem;
  background: color-mix(in srgb, var(--holo-accent) 12%, transparent);
  color: var(--holo-accent);
  font-size: 1.7rem;
  transition: background-color var(--eos-time) var(--eos-ease), color var(--eos-time) var(--eos-ease);
}

:scope [data-holo-type="Layout.Context"] [data-holo-presentation="Menu"] > [data-holo-role="Item"]:is(:hover, :focus-visible) > [data-holo-role="Icon"] {
  background: var(--holo-accent);
  color: #ffffff;
}

:scope [data-holo-type="Layout.Context"] [data-holo-presentation="Menu"] > [data-holo-role="Item"]:is([data-holo-list-row-id$=":Trash"], [data-holo-list-row-id$=":Close"]) > [data-holo-role="Icon"] {
  background: rgba(180, 35, 24, 0.1);
}

/* Apps abre a su derecha las aplicaciones instaladas, como el menú de inicio
   de Windows XP. La lista deja salir el submenú y su borde transparente cubre
   el hueco hasta la fila, para que el puntero no lo pierda al cruzar. */
:scope [data-holo-part-id="Desktop.Start.Panel"] {
  --holo-part-contain: none;
  --holo-part-clip-path: none;
  overflow: visible;
}

:scope [data-holo-part-id="Desktop.Start"] :is([data-holo-role="Cascade"], [data-holo-role="Submenu"]) > [data-holo-role="Item"] {
  min-block-size: 4.2rem;
  margin: 0;
  padding: 0.9rem 1.1rem;
  gap: 1.2rem;
  border: 0;
  border-radius: 0.8rem;
  background: transparent;
  box-shadow: none;
  color: var(--holo-fg);
}

:scope [data-holo-part-id="Desktop.Start"] :is([data-holo-role="Cascade"], [data-holo-role="Submenu"]) > [data-holo-role="Item"]:is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--holo-accent) 10%, transparent);
  outline: 0;
}

:scope [data-holo-part-id="Desktop.Start"] :is([data-holo-role="Cascade"], [data-holo-role="Submenu"]) > [data-holo-role="Item"] > [data-holo-role="Icon"] {
  inline-size: 2.2rem;
  block-size: 2.2rem;
  color: var(--holo-muted);
  font-size: 2rem;
}

:scope [data-holo-part-id="Desktop.Start"] [data-holo-role="Submenu"] > [data-holo-role="Item"] > [data-holo-role="Icon"] {
  inline-size: 2.8rem;
  block-size: 2.8rem;
}

:scope [data-holo-part-id="Desktop.Start"] [data-holo-role="Cascade"]:is(:hover, :focus-within) > [data-holo-role="Item"] {
  background: color-mix(in srgb, var(--holo-accent) 10%, transparent);
}

:scope [data-holo-part-id="Desktop.Start"] [data-holo-role="Submenu"] {
  inset-block-start: -0.6rem;
  min-inline-size: 24rem;
  padding: 0.6rem;
  border: 1px solid var(--eos-glass-edge);
  border-inline-start: 1.5rem solid transparent;
  border-radius: 1.4rem;
  /* El borde transparente de la izquierda es el puente para el puntero; el
     radio exterior lo suma en horizontal para que el cristal visible tenga
     también sus esquinas izquierdas redondeadas. */
  border-start-start-radius: 2.9rem 1.4rem;
  border-end-start-radius: 2.9rem 1.4rem;
  background-color: transparent;
  background-image: linear-gradient(var(--holo-panel-raised), var(--holo-panel));
  background-clip: padding-box;
  /* La barra de desplazamiento, fina y sin pista, no cuadra la esquina. */
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--holo-fg) 22%, transparent) transparent;
  -webkit-backdrop-filter: var(--eos-glass);
  backdrop-filter: var(--eos-glass);
  box-shadow: none;
}

:scope [data-holo-part-id="Desktop.Start"] > [data-holo-role="Surface"]:has([data-holo-role="Cascade"]) {
  overflow: visible;
}

/* La hora abre un panel pegado a la barra con la hora grande, la fecha y el
   mes en curso, del mismo cristal que el menú de inicio. */
:scope [data-holo-part-id="Desktop.Clock"] {
  padding-inline: 0;
}

:scope [data-holo-part-id="Desktop.Clock"] > [data-holo-type="Control.Trigger"] {
  block-size: 4.8rem;
  padding-inline: 1.2rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

:scope [data-holo-part-id="Desktop.Clock"] > [data-holo-role="Surface"] {
  inline-size: 30rem;
  padding: 1.8rem 1.6rem 1.4rem;
  border: 1px solid var(--eos-glass-edge);
  border-radius: 1.4rem 1.4rem 0 0;
  background-color: transparent;
  background-image: linear-gradient(var(--holo-panel-raised), var(--holo-panel));
  -webkit-backdrop-filter: var(--eos-glass);
  backdrop-filter: var(--eos-glass);
  box-shadow: 0 -0.4rem 2.4rem rgba(20, 40, 64, 0.14);
  color: var(--holo-card-fg);
  translate: -1px 0;
}

:scope [data-holo-part-id="Desktop.Clock"] > [data-holo-role="Surface"] > [data-holo-role="Close"] {
  display: none;
}

:scope [data-holo-part-id="Desktop.Clock.Hour"] {
  color: var(--holo-card-fg);
  font-size: 4.4rem;
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

:scope [data-holo-part-id="Desktop.Clock.Day"] {
  margin-block: 0.2rem 1.4rem;
  color: var(--eos-muted);
  font-size: 1.4rem;
}

/* Prototipo de barra lateral de las Apps (Ajustes, Apps y Store): una
   columna con desplazamiento, filas con icono y la sección abierta marcada
   con el acento. */
:scope {
  --eos-sidebar-width: 25.4rem;
  --eos-sidebar-bg: color-mix(in srgb, var(--holo-surface) 86%, transparent);
  --eos-sidebar-item: 4.2rem;
  --eos-sidebar-font: 1.45rem;
  --eos-sidebar-icon: 2rem;
  --eos-sidebar-current: color-mix(in srgb, var(--holo-accent) 12%, transparent);
  --eos-sidebar-hover: color-mix(in srgb, var(--holo-accent) 7%, transparent);
}

/* Ajustes: sus secciones van en esa barra lateral en vez de pestañas. La
   barra ocupa el lado izquierdo de toda la ventana y el contenido se aparta. */
:scope [data-holo-type="Layout.Window"] [data-holo-type="Layout.Stack"]:has(> [data-holo-presentation="Bar"] > [data-holo-control-id^="Tab-"]):not(#eos-priority) {
  position: relative;
  --holo-part-position: relative;
  padding-inline-start: var(--eos-sidebar-width);
  row-gap: 0;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Layout.Stack"] > [data-holo-type="Collection.List"][data-holo-presentation="Bar"]:has(> [data-holo-control-id^="Tab-"]):not(:has(> [data-holo-control-id="Tab-Close"])):not(#eos-priority) {
  position: absolute;
  --holo-part-position: absolute;
  inset: 0 auto 0 0;
  --holo-part-inset: 0 auto 0 0;
  display: flex;
  --holo-part-display: flex;
  flex-direction: column;
  --holo-flex-direction: column;
  align-items: stretch;
  --holo-align-items: stretch;
  justify-content: flex-start;
  inline-size: var(--eos-sidebar-width);
  --holo-part-inline-size: var(--eos-sidebar-width);
  --holo-part-width: var(--eos-sidebar-width);
  max-inline-size: none;
  --holo-part-max-inline-size: none;
  --holo-part-max-width: none;
  block-size: auto;
  --holo-part-block-size: auto;
  --holo-part-height: auto;
  margin: 0;
  padding: 1.2rem 0.8rem;
  gap: 0.3rem;
  overflow-x: hidden;
  overflow-y: auto;
  --holo-part-overflow: hidden auto;
  border: 0;
  border-inline-end: 1px solid var(--holo-border);
  border-radius: 0;
  background: var(--eos-sidebar-bg);
  box-shadow: none;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Layout.Stack"] > [data-holo-type="Collection.List"][data-holo-presentation="Bar"]:has(> [data-holo-control-id^="Tab-"]) > [data-holo-role="Item"]:not(#eos-priority) {
  flex: none;
  justify-content: flex-start;
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: none;
  --holo-part-max-inline-size: none;
  --holo-part-max-width: none;
  block-size: auto;
  min-block-size: var(--eos-sidebar-item);
  padding: 0 1.2rem;
  gap: 1rem;
  border-radius: 0.9rem;
  color: var(--holo-card-fg);
  font-size: var(--eos-sidebar-font);
  font-weight: 400;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Layout.Stack"] > [data-holo-type="Collection.List"][data-holo-presentation="Bar"]:has(> [data-holo-control-id^="Tab-"]) > [data-holo-role="Item"]:not(#eos-priority)::before {
  content: none;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Layout.Stack"] > [data-holo-type="Collection.List"][data-holo-presentation="Bar"]:has(> [data-holo-control-id^="Tab-"]) > [data-holo-role="Item"]:not([aria-current="true"]):is(:hover, :focus-visible):not(#eos-priority) {
  background: var(--eos-sidebar-hover);
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Layout.Stack"] > [data-holo-type="Collection.List"][data-holo-presentation="Bar"]:has(> [data-holo-control-id^="Tab-"]) > [data-holo-role="Item"][aria-current="true"]:not(#eos-priority) {
  background: var(--eos-sidebar-current);
  box-shadow: none;
  color: var(--holo-accent);
  font-weight: 600;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Layout.Stack"] > [data-holo-type="Collection.List"][data-holo-presentation="Bar"]:has(> [data-holo-control-id^="Tab-"]) ~ *:not(#eos-priority) {
  padding-inline: 2.4rem;
  border-block-start: 0;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Layout.Stack"] > [data-holo-type="Collection.List"][data-holo-presentation="Bar"]:has(> [data-holo-control-id^="Tab-"]) + *:not(#eos-priority) {
  padding-block-start: 2rem;
}

/* Filas de la barra lateral de Store, con el mismo prototipo que Ajustes. */
/* «Todas» no trae icono propio: lleva el mismo que en Apps. */
:scope [data-holo-surface="Desktop.Store.Categories"] > [data-holo-control-id="All"] > [data-holo-role="Icon"]:not(#eos-priority) {
  display: inline-grid;
  place-items: center;
}

:scope [data-holo-surface="Desktop.Store.Categories"] > [data-holo-control-id="All"] [data-holo-role="IconVisual"]::before {
  content: "\e464";
  font-family: "Phosphor-Light";
  font-size: 1.6rem;
  line-height: 1;
}

:scope [data-holo-surface="Desktop.Store.Sidebar"] [data-holo-type="Collection.List"] > [data-holo-role="Item"]:not(#eos-priority) {
  min-block-size: var(--eos-sidebar-item);
  margin-block: 0;
  border-radius: 0.9rem;
}

:scope [data-holo-surface="Desktop.Store.Sidebar"] [data-holo-type="Collection.List"] > [data-holo-role="Item"]:not([aria-current="true"]):is(:hover, :focus-visible) {
  background: var(--eos-sidebar-hover);
}

:scope [data-holo-surface="Desktop.Store.Sidebar"] [data-holo-type="Collection.List"] > [data-holo-role="Item"][aria-current="true"] {
  background: var(--eos-sidebar-current);
  color: var(--holo-accent);
}

/* Modo móvil: por debajo de 700 px el escritorio se vuelve táctil. Cada
   ventana llena la pantalla, la barra crece y enseña las ventanas sólo con su
   icono, y los paneles no pasan del ancho de la pantalla. */
@media (max-width: 700px) {
  :scope [data-holo-part-id="Desktop.Surface"] {
    --holo-window-fill: Fill;
  }

  :scope [data-holo-part-id="Desktop.Bar"]:not(#eos-priority) {
    block-size: 5.6rem;
    --holo-part-block-size: 5.6rem;
    --holo-part-height: 5.6rem;
  }

  :scope [data-holo-part-id="Desktop.Start"] > [data-holo-type="Control.Trigger"] {
    inline-size: 5.6rem;
    min-inline-size: 5.6rem;
    block-size: 5.6rem;
  }

  :scope [data-holo-part-id="Desktop.Taskbar.Windows"] > [data-holo-role="Item"] {
    justify-content: center;
    inline-size: 5.6rem;
    min-inline-size: 5.6rem;
    padding: 0;
  }

  :scope [data-holo-part-id="Desktop.Taskbar.Windows"] > [data-holo-role="Item"] > [data-holo-role="Main"] {
    display: none;
  }

  :scope [data-holo-part-id="Desktop.Taskbar.Windows"] > [data-holo-role="Item"] [data-holo-role="Icon"] {
    font-size: 2.2rem;
  }

  :scope [data-holo-part-id="Desktop.Screen"] {
    display: none;
  }

  :scope [data-holo-type="Layout.Panel"][data-holo-presentation="Grid"] {
    max-inline-size: calc(100% - 2.4rem);
    --holo-part-max-inline-size: calc(100% - 2.4rem);
    --holo-part-max-width: calc(100% - 2.4rem);
  }

  :scope [data-holo-type="Layout.Panel"][data-holo-presentation="Grid"] > [data-holo-role="Body"] {
    overflow-x: auto;
    scrollbar-width: none;
  }
}

/* Aura: se abre y se cierra desde su icono de la barra. El personaje no
   lleva controles; con los mensajes abiertos, su único botón los cierra y
   ocupa el sitio del cierre de la ventana. */
:scope [data-holo-type="Layout.Window"][data-holo-presentation="Floating"]:has([data-holo-type="Content.Character.Companion"]) [data-holo-window-control="Close"],
:scope [data-holo-type="Content.Character.Companion"][data-holo-companion-collapsed="true"] [data-holo-companion="Toggle"] {
  display: none;
}

:scope [data-holo-type="Content.Character.Companion"][data-holo-companion-collapsed="false"]:not([data-holo-presentation="Page"], [data-holo-presentation="Portrait"]) [data-holo-companion="Toggle"] {
  inset-inline-end: calc(var(--holo-companion-figure) + .8rem);
}

/* Respuestas de Aura como cartas de aventura: a todo el ancho, cada una con
   su icono, separadas de la conversación por un glifo sobre un borde fino.
   Mientras Aura saluda, Holo las esconde (hidden): mostrarlas igualmente las
   ponía antes que el saludo. */
:scope [data-holo-surface="Desktop.Aura"] [data-holo-conversation="Suggestions"]:not([hidden]) {
  display: grid;
  justify-content: stretch;
  gap: .5rem;
  position: relative;
  margin-block-start: .4rem;
  /* Aire a los lados y abajo: las cartas no tocan la barra de desplazamiento
     de la conversación ni el borde del panel. */
  padding: 1.4rem 1.2rem .6rem .4rem;
  background: linear-gradient(to right,
    transparent, color-mix(in srgb, var(--holo-accent) 48%, transparent) 14% calc(50% - 1.3rem),
    transparent calc(50% - 1.3rem) calc(50% + 1.3rem),
    color-mix(in srgb, var(--holo-accent) 48%, transparent) calc(50% + 1.3rem) 86%, transparent) top / 100% 1px no-repeat;
}

/* El glifo del divisor es un carácter de texto, no un icono: no depende de
   que cargue la fuente de iconos completa, que a veces falla y lo dejaba en
   blanco. */
:scope [data-holo-surface="Desktop.Aura"] [data-holo-conversation="Suggestions"]::before {
  content: "\2726";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  translate: -50% -50%;
  font-family: system-ui, sans-serif;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--holo-accent);
}

:scope [data-holo-surface="Desktop.Aura"] [data-holo-conversation="Suggestions"] button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .9rem;
  inline-size: 100%;
  padding: .7rem 1rem .7rem .7rem;
  border: 1px solid color-mix(in srgb, var(--holo-accent) 22%, var(--holo-border));
  border-radius: .9rem;
  background: color-mix(in srgb, var(--holo-panel-raised, white) 70%, transparent);
  color: var(--holo-fg);
  font-size: 1.25rem;
  line-height: 1.35;
  text-align: start;
  transition: background-color .16s ease, border-color .16s ease;
}

:scope [data-holo-surface="Desktop.Aura"] [data-holo-conversation="Suggestions"] button::before {
  content: "\e1c8";
  display: grid;
  place-items: center;
  inline-size: 2.8rem;
  block-size: 2.8rem;
  border-radius: .7rem;
  background: color-mix(in srgb, var(--holo-accent) 12%, transparent);
  color: var(--holo-accent);
  font-family: "Phosphor-Light";
  font-size: 1.6rem;
  line-height: 1;
}

:scope [data-holo-surface="Desktop.Aura"] [data-holo-conversation="Suggestions"] button:nth-child(2)::before {
  content: "\e4c4";
}

:scope [data-holo-surface="Desktop.Aura"] [data-holo-conversation="Suggestions"] button:nth-child(3)::before {
  content: "\e31a";
}

:scope [data-holo-surface="Desktop.Aura"] [data-holo-conversation="Suggestions"] button::after {
  content: "\e13a";
  font-family: "Phosphor-Light";
  font-size: 1.2rem;
  color: var(--holo-muted, currentColor);
  transition: translate .16s ease;
}

:scope [data-holo-surface="Desktop.Aura"] [data-holo-conversation="Suggestions"] button:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--holo-accent) 50%, transparent);
  background: color-mix(in srgb, var(--holo-accent) 10%, var(--holo-panel-raised, white));
}

:scope [data-holo-surface="Desktop.Aura"] [data-holo-conversation="Suggestions"] button:is(:hover, :focus-visible)::after {
  translate: .2rem 0;
}

:scope [data-holo-surface="Desktop.Aura"] [data-holo-conversation="Reading"] {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--holo-accent) 30%, transparent) transparent;
}

/* Ficha compacta: icono, nombre y botón ocupan menos para que la vista previa
   y las tecnologías quepan en la ventana sin desplazarse. */
:scope [data-holo-surface="Desktop.Store.Detail.Icon"][data-holo-type]:not(#eos-priority) {
  inline-size: 8rem;
  block-size: 8rem;
  padding: 1rem;
  border-radius: 2rem;
  clip-path: inset(0 round 2rem);
  --holo-part-inline-size: 8rem;
  --holo-part-width: 8rem;
  --holo-part-block-size: 8rem;
  --holo-part-height: 8rem;
  --holo-part-clip-path: inset(0 round 2rem);
}

:scope [data-holo-surface="Desktop.Store.Detail.Title"] [data-holo-role="Title"]:not(#eos-priority) {
  font-size: 2.8rem;
}

:scope [data-holo-surface="Desktop.Store.Detail.Summary"]:not(#eos-priority) {
  font-size: 1.5rem;
}

:scope [data-holo-surface="Desktop.Store.Identity.Text"]:not(#eos-priority) {
  gap: .3rem;
  --holo-part-gap: .3rem;
}

:scope [data-holo-type="Layout.Window"] [data-holo-surface="Desktop.Store.Detail.Run"][data-holo-type="Navigation.Action.Bar"] > [data-holo-role="Button"]:not(#eos-priority) {
  min-block-size: 3.8rem;
  padding-inline: 2.2rem;
  font-size: 1.5rem;
}

/* Sólo la ficha de un proyecto (la que enlaza su web) usa esta rejilla; los
   programas conservan la suya. */
:scope [data-holo-surface="Desktop.Store"]:has([data-holo-surface="Desktop.Project.Outside"]) [data-holo-surface="Desktop.Store.Identity"]:not(#eos-priority) {
  --holo-part-grid-template-columns: 8rem 1.6rem minmax(0, 3.5fr) 2rem minmax(0, 1.2fr);
}

:scope [data-holo-surface="Desktop.Store"]:has([data-holo-surface="Desktop.Project.Outside"]) [data-holo-surface="Desktop.Store.Identity.Text"]:not(#eos-priority) {
  --holo-part-grid-template-rows: none;
}

/* Ficha de proyecto estrecha (móvil): icono y nombre en una fila y «Abrir» a
   lo ancho debajo. Layout.Stack coloca estos hijos con `grid-column` en
   línea; la colocación se ajusta con sus variables `--holo-part-grid-*`. */
@container eos-app (max-width: 52rem) {
  :scope [data-holo-surface="Desktop.Store"]:has([data-holo-surface="Desktop.Project.Outside"]) [data-holo-surface="Desktop.Store.Identity"]:not(#eos-priority) {
    --holo-part-grid-template-columns: 8rem 1.6rem minmax(0, 1fr);
    --holo-part-grid-template-rows: auto auto;
    row-gap: 1.6rem;
  }

  :scope [data-holo-surface="Desktop.Store"]:has([data-holo-surface="Desktop.Project.Outside"]) [data-holo-surface="Desktop.Store.Detail.Icon"]:not(#eos-priority) {
    inline-size: 8rem;
    block-size: 8rem;
    --holo-part-inline-size: 8rem;
    --holo-part-block-size: 8rem;
    --holo-part-width: 8rem;
    --holo-part-height: 8rem;
  }

  :scope [data-holo-surface="Desktop.Store"]:has([data-holo-surface="Desktop.Project.Outside"]) [data-holo-surface="Desktop.Store.Detail.Controls"]:not(#eos-priority) {
    --holo-part-grid-column: 1 / -1;
    --holo-part-grid-row: 2;
    justify-items: stretch;
  }

  /* La vista previa arriba y «Sobre el proyecto» debajo, a todo el ancho. */
  :scope [data-holo-surface="Desktop.Store"]:has([data-holo-surface="Desktop.Project.Outside"]) [data-holo-surface="Desktop.Store.Summary"]:not(#eos-priority) {
    --holo-part-grid-template-columns: minmax(0, 1fr);
    row-gap: 2.4rem;
  }

  :scope [data-holo-surface="Desktop.Store"]:has([data-holo-surface="Desktop.Project.Outside"]) [data-holo-surface="Desktop.Store.Information"]:not(#eos-priority) {
    --holo-part-grid-column: 1;
    --holo-part-grid-row: 2;
  }
}

/* Un perfil protegido (el del candado) conserva su cristal al pasar el
   puntero: el filtro de brillo haría de la tarjeta la raíz del desenfoque y lo
   borraría. Se ilumina con su aro; los perfiles con vista previa conservan su
   brillo. */
:scope :is([data-holo-part-id="User.Profiles"], [data-holo-part-id="User.Owned"]) > [data-holo-role="Item"]:has(> [data-holo-role="Icon"] [data-holo-icon="Lock"]):is(:hover, :focus-visible, [aria-current="true"]) {
  filter: none;
}

/* «Otra cuenta»: icono y texto centrados en su píldora. */
:scope [data-holo-part-id="User.Back"] > [data-holo-role="Item"]:not(#eos-priority) {
  justify-content: center;
  justify-items: center;
  grid-template-columns: auto auto;
  --holo-part-grid-template-columns: auto auto;
  inline-size: auto;
  --holo-part-inline-size: auto;
  --holo-part-width: auto;
  padding-inline: 1.6rem 2rem;
}

/* Una descripción larga del proyecto se lee desplazándose dentro de su caja. */
:scope [data-holo-surface="Desktop.Store.About.Text"]:not(#eos-priority) {
  max-block-size: 9em;
  --holo-part-max-block-size: 9em;
  --holo-part-max-height: 9em;
  overflow-y: auto;
  --holo-part-overflow: hidden auto;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--holo-accent) 30%, transparent) transparent;
}

/* En una pantalla baja, Holo encoge la ventana para dejar su margen y el alto
   que el servidor calculó para la vista previa ya no cabe. Mientras la ficha
   enseña la vista previa, su caja no pasa del alto que deja la pantalla
   (barra, márgenes, título y cabecera de la ficha), con 22 rem como mínimo. */
:scope [data-holo-surface="Desktop.Store.Preview.Container"]:not(:has([data-holo-type="Visual.Embed"]:not([data-holo-presentation="Preview"]))):not(#eos-priority) {
  /* Lo que queda bajo la cabecera de la ficha, con su icono de 120 px. */
  --holo-part-max-block-size: max(20rem, calc(100dvh - 41.4rem));
  --holo-part-max-height: max(20rem, calc(100dvh - 41.4rem));
}

/* Abierta, la web ocupa toda la ventana: la caja de la vista previa pierde su
   relleno, su fondo y su curva. */
:scope [data-holo-surface="Desktop.Store.Preview.Container"]:has([data-holo-type="Visual.Embed"]:not([data-holo-presentation="Preview"])):not(#eos-priority) {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* Móvil: los lanzadores del escritorio y de los paneles se ordenan solos en
   una rejilla de cuatro columnas, como la pantalla de inicio de un teléfono. */
@media (max-width: 700px) {
  :scope [data-holo-type="Collection.List"][data-holo-presentation="Board"]:not(#eos-priority) {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-content: start;
    justify-items: center;
    row-gap: 1.4rem;
    padding: 1.6rem .6rem;
    box-sizing: border-box;
  }

  :scope [data-holo-type="Collection.List"][data-holo-presentation="Board"] > [data-holo-role="Item"]:not(#eos-priority) {
    position: relative;
    --holo-part-position: relative;
    --holo-part-inset-block-start: auto;
    --holo-part-inset-inline-start: auto;
    inline-size: 100%;
    max-inline-size: 8.8rem;
  }

  :scope [data-holo-type="Layout.Panel"] [data-holo-type="Collection.List"][data-holo-presentation="Board"]:not(#eos-priority) {
    padding: .8rem .4rem;
  }
}

/* Con los mensajes abiertos, la ventana de Aura se redimensiona como cualquier
   otra desde los bordes libres del panel (arriba, izquierda y su esquina); el
   personaje y la barra quedan abajo a la derecha. */
:scope [data-holo-type="Layout.Window"][data-holo-presentation="Floating"]:has([data-holo-type="Content.Character.Companion"][data-holo-companion-collapsed="false"]) > [data-holo-role="ResizeHandle"]:is([data-holo-window-edge="N"], [data-holo-window-edge="W"], [data-holo-window-edge="NW"]) {
  display: block;
}

:scope [data-holo-type="Layout.Window"][data-holo-presentation="Floating"] > [data-holo-window-edge="N"] {
  inset: 1.1rem calc(var(--holo-companion-figure, 19rem) + 1.6rem) auto 2.8rem;
  inline-size: auto;
}

:scope [data-holo-type="Layout.Window"][data-holo-presentation="Floating"] > [data-holo-window-edge="W"] {
  inset: 2.8rem auto 2.8rem 1.1rem;
  block-size: auto;
}

:scope [data-holo-type="Layout.Window"][data-holo-presentation="Floating"] > [data-holo-window-edge="NW"] {
  inset: 1.1rem auto auto 1.1rem;
}

/* A pantalla completa (doble clic en el título de los mensajes) Aura ocupa
   todo el alto: el panel deja su límite de altura. */
:scope [data-holo-type="Layout.Window"][data-holo-window-state="Maximized"] [data-holo-type="Content.Character.Companion"] {
  max-block-size: none;
}

:scope [data-holo-surface="Desktop.Aura"] [data-holo-companion="Editor"] [data-holo-role="Field"]:not(#eos-priority) {
  max-inline-size: none;
  --holo-part-max-inline-size: none;
  --holo-part-max-width: none;
}

:scope [data-holo-surface="Desktop.Aura"] [data-holo-companion="Editor"] > [data-holo-role="Stack"]:not(#eos-priority) {
  grid-template-columns: minmax(0, 1fr);
  --holo-part-grid-template-columns: minmax(0, 1fr);
}

/* Apps y Store: la misma barra lateral que Ajustes. Las dos ventanas son una
   fila de dos columnas; la primera mide lo que el prototipo y lleva su fondo
   y su borde. */
:scope :is([data-holo-surface="Desktop.Apps"], [data-holo-surface="Desktop.Store"]):has(> :is([data-holo-surface="Desktop.Apps.Sidebar"], [data-holo-surface="Desktop.Store.Sidebar"])):not(#eos-priority) {
  /* Holo coloca a sus hijos en la 1.ª y la 3.ª pista (la 2.ª es su hueco):
     con sólo dos pistas el contenido caía en una tercera implícita y dejaba un
     hueco raro a la izquierda (Martín, 9-10). */
  --holo-part-grid-template-columns: var(--eos-sidebar-width) 0 minmax(0, 1fr);
}

:scope :is([data-holo-surface="Desktop.Apps.Sidebar"], [data-holo-surface="Desktop.Store.Sidebar"]):not(#eos-priority) {
  overflow-x: hidden;
  overflow-y: auto;
  --holo-part-overflow: hidden auto;
  border-inline-end: 1px solid var(--holo-border);
  background: var(--eos-sidebar-bg);
}

:scope [data-holo-surface="Desktop.Apps.Sidebar"]:not(#eos-priority) {
  padding: 1.2rem 0.8rem;
}

:scope [data-holo-surface="Desktop.Apps.Categories"]:not(#eos-priority) {
  display: flex;
  --holo-part-display: flex;
  flex-direction: column;
  --holo-flex-direction: column;
  align-items: stretch;
  --holo-align-items: stretch;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
  gap: 0.3rem;
  border: 0;
  background: transparent;
}

:scope [data-holo-surface="Desktop.Apps.Categories"] > [data-holo-role="Button"]:not(#eos-priority) {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  inline-size: 100%;
  min-block-size: var(--eos-sidebar-item);
  padding: 0 1.2rem;
  border: 0;
  border-radius: 0.9rem;
  background: transparent;
  color: var(--holo-card-fg);
  font-size: var(--eos-sidebar-font);
  font-weight: 400;
  text-decoration: none;
  box-shadow: none;
}

:scope [data-holo-surface="Desktop.Apps.Categories"] > [data-holo-role="Button"]::before {
  content: "\e464";
  font-family: "Phosphor-Light";
  font-size: 1.6rem;
  line-height: 1;
}

:scope [data-holo-surface="Desktop.Apps.Categories"] > [data-holo-action-id="Productivity"]::before { content: "\e0ee"; }
:scope [data-holo-surface="Desktop.Apps.Categories"] > [data-holo-action-id="Multimedia"]::before { content: "\e792"; }
:scope [data-holo-surface="Desktop.Apps.Categories"] > [data-holo-action-id="System"]::before { content: "\e270"; }
:scope [data-holo-surface="Desktop.Apps.Categories"] > [data-holo-action-id="Projects"]::before { content: "\e25a"; }
:scope [data-holo-surface="Desktop.Apps.Categories"] > [data-holo-action-id="Development"]::before { content: "\e1bc"; }

:scope [data-holo-surface="Desktop.Apps.Categories"] > [data-holo-role="Button"][aria-pressed="false"]:is(:hover, :focus-visible):not(#eos-priority) {
  background: var(--eos-sidebar-hover);
}

:scope [data-holo-surface="Desktop.Apps.Categories"] > [data-holo-role="Button"][aria-pressed="true"]:not(#eos-priority) {
  background: var(--eos-sidebar-current);
  color: var(--holo-accent);
  font-weight: 600;
}

/* Móvil: la barra de abajo mide lo que pide su fila y las barras laterales de
   Ajustes, Apps y Store se quedan en un carril de iconos. El texto sigue en
   la página para los lectores de pantalla. Al buscar en Store, su carril se
   abre a todo el ancho mientras se escribe. */
@media (max-width: 700px) {
  :scope {
    --eos-sidebar-width: 5.6rem;
  }

  /* Una fila por hijo de Desktop.Live (cinco datos ocultos, la superficie y la
     barra), como la plantilla que declara Holo; sólo cambia el alto de la
     barra. Con menos filas, la superficie caía en una fila de 0 px. */
  :scope [data-holo-part-id="Desktop.Live"]:not(#eos-priority) {
    --holo-part-grid-template-rows: repeat(5, max-content) minmax(0, 1fr) 5.6rem;
  }

  :scope [data-holo-part-id="Desktop.Bar"]:not(#eos-priority) {
    grid-template-rows: 5.6rem;
    --holo-part-grid-template-rows: 5.6rem;
  }

  :scope [data-holo-part-id="Desktop.Bar"] > :is([data-holo-part-id="Desktop.Start"], [data-holo-part-id="Desktop.Screen"], [data-holo-part-id="Desktop.Time"]):not(#eos-priority) {
    block-size: 5.6rem;
    --holo-part-block-size: 5.6rem;
    --holo-part-height: 5.6rem;
  }

  :scope [data-holo-part-id="Desktop.Taskbar.Windows"] > [data-holo-role="Item"]:not(#eos-priority) {
    inline-size: 4.4rem;
    min-inline-size: 4.4rem;
    block-size: 4.4rem;
    margin-block: auto;
    margin-inline-end: .4rem;
    border-radius: 1.2rem;
  }

  :scope :is(
    [data-holo-type="Layout.Stack"] > [data-holo-type="Collection.List"][data-holo-presentation="Bar"]:has(> [data-holo-control-id^="Tab-"]),
    [data-holo-surface="Desktop.Store.Sidebar"] [data-holo-type="Collection.List"],
    [data-holo-surface="Desktop.Apps.Categories"]
  ) > :is([data-holo-role="Item"], [data-holo-role="Button"]):not(#eos-priority) {
    justify-content: center;
    padding: 0;
    gap: 0;
  }

  :scope :is(
    [data-holo-type="Layout.Stack"] > [data-holo-type="Collection.List"][data-holo-presentation="Bar"]:has(> [data-holo-control-id^="Tab-"]),
    [data-holo-surface="Desktop.Store.Sidebar"] [data-holo-type="Collection.List"]
  ) > [data-holo-role="Item"] > [data-holo-role="Main"]:not(#eos-priority),
  :scope [data-holo-surface="Desktop.Store.Category.Label"]:not(#eos-priority) {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  :scope [data-holo-surface="Desktop.Apps.Categories"] > [data-holo-role="Button"]:not(#eos-priority) {
    font-size: 0;
  }

  :scope :is([data-holo-surface="Desktop.Apps.Sidebar"], [data-holo-surface="Desktop.Store.Sidebar"]):not(#eos-priority) {
    padding-inline: .6rem;
  }

  :scope [data-holo-surface="Desktop.Store.Category.Label"]:not(#eos-priority) {
    display: none;
  }

  :scope [data-holo-surface="Desktop.Store.Sidebar"] [data-holo-type="Collection.List"] > [data-holo-role="Item"]:not(#eos-priority) {
    display: flex;
    justify-content: center;
  }

  :scope [data-holo-surface="Desktop.Store.Search"]:not(:focus-within):not(#eos-priority) {
    padding: 0;
    border-color: transparent;
    background: transparent;
  }

  :scope [data-holo-surface="Desktop.Store.Search"]:not(:focus-within) > [data-holo-role="Input"]:not(#eos-priority) {
    inline-size: 0;
    min-inline-size: 0;
    padding: 0;
    opacity: 0;
  }

  :scope [data-holo-surface="Desktop.Store"]:has([data-holo-surface="Desktop.Store.Search"]:focus-within):not(#eos-priority) {
    --holo-part-grid-template-columns: minmax(0, 1fr) 0;
  }
}

/* Apps en una ventana estrecha: el título va encima del buscador. La rejilla
   de la cabecera fija en línea la columna de cada hijo; como columna flexible
   esa colocación no aplica. */
@container eos-app (max-width: 68rem) {
  :scope [data-holo-surface="Desktop.Apps.Header"]:not(#eos-priority) {
    display: flex;
    --holo-part-display: flex;
    flex-direction: column;
    --holo-flex-direction: column;
    align-items: stretch;
    --holo-align-items: stretch;
    gap: 1rem;
  }

  :scope [data-holo-surface="Desktop.Apps.Header"] > *:not(#eos-priority) {
    inline-size: 100%;
    --holo-part-inline-size: 100%;
    --holo-part-width: 100%;
  }
}

/* El menú de inicio sale de la barra de abajo y el submenú de Apps también:
   se ancla al borde inferior del menú (no a su fila) y crece hacia arriba
   hasta el alto disponible. Para eso la lista y la fila no lo contienen: su
   caja de referencia es la superficie del menú, fija sobre la barra. Sólo se
   desplaza en vertical. */
:scope [data-holo-part-id="Desktop.Start.Panel"]:not(#eos-priority) {
  --holo-part-position: static;
}

:scope [data-holo-part-id="Desktop.Start.Panel"] [data-holo-role="Cascade"]:not(#eos-priority) {
  position: static;
}

:scope [data-holo-part-id="Desktop.Start.Panel"] [data-holo-role="Cascade"] > [data-holo-role="Submenu"]:not(#eos-priority) {
  inset-block: auto 0;
  max-block-size: calc(100dvh - 5.8rem);
  overflow: hidden auto;
  overscroll-behavior: contain;
}

/* Store: el carrusel se recorre con sus flechas, sus puntos y el teclado; la
   barra de desplazamiento de la pista sobra, como en el diseño original. */
:scope [data-holo-surface="Desktop.Store"] [data-holo-role="CarouselTrack"]:not(#eos-priority) {
  scrollbar-width: none;
}

/* La acción de la tarjeta destacada es un enlace con flecha en el color del
   acento, como «Ver aplicación →» en el diseño original. */
:scope [data-holo-surface="Desktop.Store"] [data-holo-role="CarouselTrack"] [data-holo-role="Actions"] > [data-holo-role="Action"]:not(#eos-priority) {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--holo-accent);
  font-size: 1.5rem;
  font-weight: 600;
}

:scope [data-holo-surface="Desktop.Store"] [data-holo-role="CarouselTrack"] [data-holo-role="Actions"] > [data-holo-role="Action"] > [data-holo-role="Text"]:not(#eos-priority) {
  color: inherit;
}

:scope [data-holo-surface="Desktop.Store"] [data-holo-role="CarouselTrack"] [data-holo-role="Actions"] > [data-holo-role="Action"]::after {
  content: "\e06c";
  font-family: "Phosphor-Light";
  font-size: 1.5rem;
  line-height: 1;
  transition: translate .16s ease;
  order: 2;
}

:scope [data-holo-surface="Desktop.Store"] [data-holo-role="CarouselTrack"] [data-holo-role="Actions"] > [data-holo-role="Action"]:is(:hover, :focus-visible)::after {
  translate: .3rem 0;
}

/* Store como el diseño original: «Instalar» es una píldora tintada del
   acento (abrir sigue en gris), el título de la tarjeta destacada manda y las
   categorías se separan de las páginas con una línea fina. */
:scope [data-holo-surface="Desktop.Store"] [data-holo-role="Actions"] > [data-holo-role="Action"][data-holo-action-id="Install"]:not([data-holo-role="CarouselTrack"] *):not(#eos-priority) {
  border-color: transparent;
  background: color-mix(in srgb, var(--holo-accent) 12%, transparent);
  color: var(--holo-accent);
  font-weight: 600;
}

:scope [data-holo-surface="Desktop.Store"] [data-holo-role="Actions"] > [data-holo-role="Action"][data-holo-action-id="Install"]:not([data-holo-role="CarouselTrack"] *) > [data-holo-role="Text"]:not(#eos-priority) {
  color: inherit;
}

:scope [data-holo-surface="Desktop.Store"] [data-holo-role="Actions"] > [data-holo-role="Action"][data-holo-action-id="Install"]:not([data-holo-role="CarouselTrack"] *):is(:hover, :focus-visible):not(#eos-priority) {
  background: color-mix(in srgb, var(--holo-accent) 20%, transparent);
}

:scope [data-holo-surface="Desktop.Store"] [data-holo-role="CarouselTrack"] [data-holo-role="Title"]:not(#eos-priority) {
  font-size: 3.6rem;
  line-height: 1.15;
}

:scope [data-holo-surface="Desktop.Store.Category.Label"]:not(#eos-priority) {
  margin-block-start: .6rem;
  padding-block-start: 1.4rem;
  border-block-start: 1px solid var(--holo-border);
}

/* Store como su diseño original (Crystal/Catalog): fondo claro, barra lateral
   gris azulada, título grande, tarjeta destacada sin texto de apoyo y lista
   con filas, iconos y botones de su tamaño. El fondo y la barra son de cristal,
   como el resto de ventanas (Martín, 9-10). */
:scope [data-holo-surface="Desktop.Store"]:not(#eos-priority) {
  background: rgba(251, 252, 254, .58);
}

:scope [data-holo-surface="Desktop.Store.Sidebar"]:not(#eos-priority) {
  padding: 2.5rem 1.3rem;
  gap: 1.2rem;
  --holo-part-gap: 1.2rem;
  background: rgba(238, 241, 246, .55);
  border-inline-end: 1px solid rgba(227, 232, 239, .8);
  /* La barra llega a la esquina de la ventana: redondea con ella. */
  border-end-start-radius: var(--holo-radius, 1.1rem);
}

/* Un solo buscador: el contenedor no dibuja caja; la dibuja el campo. */
:scope [data-holo-surface="Desktop.Store.Search"]:not(#eos-priority) {
  block-size: 4rem;
  min-block-size: 4rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 1.35rem;
}

:scope [data-holo-surface="Desktop.Store.Search"] input:not(#eos-priority) {
  block-size: 100%;
  border: 1px solid #dfe4ec;
  border-radius: 1.2rem;
  background: #fff;
  box-shadow: none;
}

/* Cada fila ocupa el ancho de la barra: la elegida se marca entera, también
   en una ventana estrecha (la lista es flex y encogía a su texto). */
:scope [data-holo-surface="Desktop.Store.Sidebar"] [data-holo-type="Collection.List"]:not(#eos-priority) {
  flex-direction: column;
  align-items: stretch;
}

:scope [data-holo-surface="Desktop.Store.Sidebar"] [data-holo-type="Collection.List"] > [data-holo-role="Item"]:not(#eos-priority) {
  inline-size: 100%;
  min-block-size: var(--eos-sidebar-item);
  padding: 0 1.8rem;
  gap: 2.2rem;
  border-radius: 1rem;
  font-size: var(--eos-sidebar-font);
  font-weight: 400;
}

:scope [data-holo-surface="Desktop.Store.Sidebar"] [data-holo-type="Collection.List"] > [data-holo-role="Item"] :is([data-holo-role="Title"], [data-holo-role="Main"]):not(#eos-priority) {
  font-size: var(--eos-sidebar-font);
  font-weight: 400;
}

:scope [data-holo-surface="Desktop.Store.Sidebar"] [data-holo-type="Collection.List"] > [data-holo-role="Item"] > [data-holo-role="Icon"]:not(#eos-priority) {
  inline-size: var(--eos-sidebar-icon);
  block-size: var(--eos-sidebar-icon);
  font-size: var(--eos-sidebar-icon);
}

:scope [data-holo-surface="Desktop.Store.Category.Label"]:not(#eos-priority) {
  margin-inline: 1rem;
  padding-inline: .4rem;
  font-size: 1.3rem;
}

:scope [data-holo-surface="Desktop.Store.Content"]:not(#eos-priority) {
  padding: 3.2rem 3.2rem 3.6rem 3.6rem;
}

:scope [data-holo-surface="Desktop.Store.Title"] [data-holo-role="Title"]:not(#eos-priority) {
  font-size: 3.6rem;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
}

:scope [data-holo-surface="Desktop.Store"] [data-holo-role="CarouselTrack"] > [data-holo-role="Item"]:not(#eos-priority) {
  min-block-size: 25rem;
  border-radius: 1.8rem;
  padding: 3.4rem 4rem;
}

:scope [data-holo-surface="Desktop.Store"] [data-holo-role="CarouselTrack"] [data-holo-role="Main"] > [data-holo-role="Text"]:not(#eos-priority) {
  display: none;
}

:scope [data-holo-surface="Desktop.Store"] [data-holo-role="CarouselTrack"] [data-holo-role="Title"]:not(#eos-priority) {
  max-inline-size: 26rem;
  font-size: 3.4rem;
  font-weight: 600;
}

:scope [data-holo-surface="Desktop.Store"] [data-holo-role="CarouselTrack"] [data-holo-role="Subtitle"]:not(#eos-priority) {
  font-size: 1.4rem;
  font-weight: 400;
}

:scope [data-holo-surface="Desktop.Store"] [data-holo-role="CarouselTrack"] [data-holo-role="Actions"] > [data-holo-role="Action"]:not(#eos-priority) {
  font-size: 1.5rem;
  font-weight: 500;
}

:scope [data-holo-surface="Desktop.Store.Essentials"] [data-holo-role="Title"]:not(#eos-priority) {
  font-size: 2.2rem;
  font-weight: 600;
}

:scope [data-holo-surface="Desktop.Store.List"]:not(#eos-priority) {
  column-gap: 3.2rem;
  row-gap: 0;
  border-block-start: 1px solid #e6eaf0;
}

:scope [data-holo-surface="Desktop.Store.List"] > [data-holo-role="Item"]:not(#eos-priority) {
  min-block-size: 9rem;
  padding: 0 1.2rem;
  border-block-end: 1px solid #e6eaf0;
}

:scope [data-holo-surface="Desktop.Store.List"] > [data-holo-role="Item"] > [data-holo-role="Primary"] > [data-holo-role="Icon"]:not(#eos-priority) {
  inline-size: 6rem;
  block-size: 6rem;
  border-radius: 1.4rem;
  --holo-part-inline-size: 6rem;
  --holo-part-block-size: 6rem;
  flex: none;
  min-inline-size: 6rem;
  max-inline-size: none;
  --holo-part-max-inline-size: none;
}

:scope [data-holo-surface="Desktop.Store.List"] > [data-holo-role="Item"] > [data-holo-role="Primary"]:not(#eos-priority) {
  gap: 2.2rem;
}

:scope [data-holo-surface="Desktop.Store.List"] > [data-holo-role="Item"] [data-holo-role="Main"] > [data-holo-role="Title"]:not(#eos-priority) {
  font-size: 1.55rem;
  font-weight: 500;
}

:scope [data-holo-surface="Desktop.Store.List"] > [data-holo-role="Item"] [data-holo-role="Main"] > [data-holo-role="Text"]:not(#eos-priority) {
  font-size: 1.35rem;
}

:scope [data-holo-surface="Desktop.Store.List"] [data-holo-role="Actions"] > [data-holo-role="Action"]:not(#eos-priority) {
  min-inline-size: 9rem;
  block-size: 3.6rem;
  padding: 0 1.8rem;
  border: 0;
  border-radius: 1.8rem;
  justify-content: center;
  background: #eceef2;
  color: var(--eos-muted);
  font-size: 1.4rem;
  font-weight: 500;
}

:scope [data-holo-surface="Desktop.Store.List"] [data-holo-role="Actions"] > [data-holo-role="Action"] > [data-holo-role="Text"]:not(#eos-priority) {
  color: inherit;
  font-size: inherit;
}

:scope [data-holo-surface="Desktop.Store.List"] [data-holo-role="Actions"] > [data-holo-role="Action"][data-holo-action-id="Install"]:not(#eos-priority) {
  background: #e3edfb;
  color: var(--holo-accent);
}

:scope [data-holo-surface="Desktop.Store"] [data-holo-role="CarouselTrack"] [data-holo-role="Primary"] > [data-holo-role="Preview"]:not(#eos-priority) {
  inline-size: 56%;
  block-size: 30rem;
  margin-block: -5rem;
}

:scope [data-holo-surface="Desktop.Store"] [data-holo-role="CarouselTrack"] [data-holo-role="Primary"] > [data-holo-role="Preview"] img:not(#eos-priority) {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

:scope [data-holo-surface="Desktop.Store"] [data-holo-role="CarouselTrack"] [data-holo-role="Actions"] > [data-holo-role="Action"] > [data-holo-role="Text"]:not(#eos-priority) {
  font-size: inherit;
}

:scope [data-holo-surface="Desktop.Store.List"] > [data-holo-role="Item"] > [data-holo-role="Primary"] > [data-holo-role="Icon"] :is([data-holo-role="IconVisual"], img):not(#eos-priority) {
  inline-size: 100%;
  block-size: 100%;
  font-size: 2.8rem;
}

/* En una ventana estrecha, Store vuelve a medidas compactas: la tarjeta
   destacada, sus puntos y la lista tienen que caber sin desplazarse fuera. */
@container eos-app (max-width: 68rem) {
  :scope [data-holo-surface="Desktop.Store.Content"]:not(#eos-priority) {
    padding: 1.6rem 1.8rem;
  }

  :scope [data-holo-surface="Desktop.Store.Title"] [data-holo-role="Title"]:not(#eos-priority) {
    font-size: 2.6rem;
  }

  :scope [data-holo-surface="Desktop.Store"] [data-holo-role="CarouselTrack"] > [data-holo-role="Item"]:not(#eos-priority) {
    min-block-size: 0;
    padding: 1.6rem 2.4rem;
  }

  :scope [data-holo-surface="Desktop.Store"] [data-holo-role="CarouselTrack"] [data-holo-role="Title"]:not(#eos-priority) {
    font-size: 2.4rem;
  }

  :scope [data-holo-surface="Desktop.Store"] [data-holo-role="CarouselTrack"] [data-holo-role="Primary"] > [data-holo-role="Preview"]:not(#eos-priority) {
    block-size: 14rem;
    margin-block: 0;
  }

  :scope [data-holo-surface="Desktop.Store.List"] > [data-holo-role="Item"]:not(#eos-priority) {
    min-block-size: 8rem;
  }
}

/* Las filas de la barra lateral de Ajustes y Apps usan la misma letra e
   icono que el prototipo (y que Store). */
:scope [data-holo-type="Layout.Window"] [data-holo-type="Layout.Stack"] > [data-holo-type="Collection.List"][data-holo-presentation="Bar"]:has(> [data-holo-control-id^="Tab-"]) > [data-holo-role="Item"] :is([data-holo-role="Title"], [data-holo-role="Main"]):not(#eos-priority) {
  font-size: var(--eos-sidebar-font);
  font-weight: inherit;
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Layout.Stack"] > [data-holo-type="Collection.List"][data-holo-presentation="Bar"]:has(> [data-holo-control-id^="Tab-"]) > [data-holo-role="Item"] > [data-holo-role="Icon"]:not(#eos-priority) {
  inline-size: var(--eos-sidebar-icon);
  block-size: var(--eos-sidebar-icon);
  font-size: var(--eos-sidebar-icon);
}

:scope [data-holo-type="Layout.Window"] [data-holo-type="Layout.Stack"] > [data-holo-type="Collection.List"][data-holo-presentation="Bar"]:has(> [data-holo-control-id^="Tab-"]) > [data-holo-role="Item"]:not(#eos-priority) {
  gap: 2.2rem;
  padding: 0 1.8rem;
}

:scope [data-holo-surface="Desktop.Apps.Categories"] > [data-holo-role="Button"]:not(#eos-priority) {
  gap: 2.2rem;
  padding: 0 1.8rem;
}

:scope [data-holo-surface="Desktop.Apps.Categories"] > [data-holo-role="Button"]::before {
  font-size: var(--eos-sidebar-icon);
}

/* Panel de la hora: sale de la barra como en Windows o macOS, con la hora
   grande, la fecha y el mes en curso. Se cierra al pulsar fuera. */
:scope [data-holo-part-id="Desktop.Clock.Panel"] [data-holo-role="Surface"]:not(#eos-priority) {
  inline-size: 34rem;
  --holo-part-inline-size: 34rem;
  --holo-part-width: 34rem;
  padding: 2.2rem 2.2rem 1.8rem;
  gap: .4rem;
  /* El mismo cristal que el menú de inicio. */
  border: 1px solid rgba(255, 255, 255, .75);
  border-block-end: 0;
  border-radius: 1.4rem 1.4rem 0 0;
  background: linear-gradient(rgba(252, 253, 255, .9), rgba(248, 250, 253, .88));
  backdrop-filter: blur(22px) saturate(1.08);
  box-shadow: 0 1.2rem 3.4rem rgba(20, 40, 64, .24);
  color: var(--holo-card-fg, var(--eos-ink));
}

:scope [data-holo-part-id="Desktop.Clock.Panel"] [data-holo-role="Surface"] > [data-holo-role="Close"]:not(#eos-priority) {
  display: none;
}

:scope [data-holo-part-id="Desktop.Clock.Time"]:not(#eos-priority) {
  font-size: 4.8rem;
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

:scope [data-holo-part-id="Desktop.Clock.Date"]:not(#eos-priority) {
  margin-block-end: 1.4rem;
  padding: 0;
  color: var(--eos-muted);
  font-size: 1.4rem;
}

:scope [data-holo-part-id="Desktop.Clock.Date"]::first-letter,
:scope [data-holo-part-id="Desktop.Clock.Month"] [data-holo-role="Title"]::first-letter {
  text-transform: uppercase;
}

:scope [data-holo-part-id="Desktop.Clock.Month"]:not(#eos-priority) {
  padding-block-start: 1.4rem;
  border-block-start: 1px solid var(--holo-border);
}

:scope [data-holo-part-id="Desktop.Clock.Month"] [data-holo-role="Title"]:not(#eos-priority) {
  margin-block-end: .8rem;
  font-size: 1.5rem;
  font-weight: 600;
}

:scope [data-holo-part-id="Desktop.Clock.Month"] table:not(#eos-priority) {
  inline-size: 100%;
  border-collapse: collapse;
}

:scope [data-holo-part-id="Desktop.Clock.Month"] th:not(#eos-priority) {
  padding-block: .4rem;
  color: var(--eos-muted);
  font-size: 1.2rem;
  font-weight: 500;
}

:scope [data-holo-part-id="Desktop.Clock.Month"] td:not(#eos-priority) {
  padding: .15rem;
  text-align: center;
}

/* Cada día, un círculo exacto (1:1) con el número centrado y trazo fino. La
   altura mínima de control de Holo no debe estirarlo. */
:scope [data-holo-part-id="Desktop.Clock.Month"] td > button:not(#eos-priority) {
  display: inline-grid;
  place-items: center;
  inline-size: 3.6rem;
  block-size: 3.6rem;
  min-block-size: 0;
  aspect-ratio: 1;
  line-height: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font-size: 1.35rem;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
}

:scope [data-holo-part-id="Desktop.Clock.Month"] td > button:is(:hover, :focus-visible):not(#eos-priority) {
  background: color-mix(in srgb, var(--holo-accent) 12%, transparent);
}

:scope [data-holo-part-id="Desktop.Clock.Month"] td > button[aria-current="date"]:not(#eos-priority) {
  background: var(--holo-accent);
  color: #fff;
  font-weight: 500;
}

:scope [data-holo-part-id="Desktop.Clock.Month"] > [data-holo-role="Navigation"]:not(#eos-priority) {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-block-end: .6rem;
}

:scope [data-holo-part-id="Desktop.Clock.Month"] > [data-holo-role="Navigation"] > [data-holo-role="Title"]:not(#eos-priority) {
  flex: 1;
  order: -1;
  margin: 0;
}

:scope [data-holo-part-id="Desktop.Clock.Month"] [data-holo-calendar-step]:not(#eos-priority) {
  inline-size: 3.2rem;
  block-size: 3.2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--eos-muted);
  font-size: 2rem;
  line-height: 1;
}

:scope [data-holo-part-id="Desktop.Clock.Month"] [data-holo-calendar-step]:is(:hover, :focus-visible):not(#eos-priority) {
  background: color-mix(in srgb, var(--holo-accent) 12%, transparent);
  color: var(--holo-accent);
}

/* Etiquetas de tecnología en pastel (Martín): cada una con el color de su
   tecnología, JavaScript amarillo, HTML naranja, CSS azul… La etiqueta se
   llama como su tecnología (`Tech-<Nombre>`); la que no esté en la paleta
   queda en un gris azulado neutro. */
:scope [data-holo-surface="Desktop.Store.Features.List"] > [data-holo-role="Item"]:not(#eos-priority) {
  border-color: color-mix(in srgb, var(--eos-tech, #e8ecf3), var(--eos-ink) 12%);
  background: var(--eos-tech, #e8ecf3);
  color: var(--eos-ink);
}
:scope [data-holo-surface="Desktop.Store.Features.List"] > [data-holo-list-row-id="Tech-JavaScript"] { --eos-tech: #fff1a8; }
:scope [data-holo-surface="Desktop.Store.Features.List"] > [data-holo-list-row-id="Tech-HTML"] { --eos-tech: #ffd9bd; }
:scope [data-holo-surface="Desktop.Store.Features.List"] > [data-holo-list-row-id="Tech-CSS"] { --eos-tech: #cfe2ff; }
:scope [data-holo-surface="Desktop.Store.Features.List"] > [data-holo-list-row-id="Tech-PHP"] { --eos-tech: #dedcff; }
:scope [data-holo-surface="Desktop.Store.Features.List"] > [data-holo-list-row-id="Tech-Laravel"] { --eos-tech: #ffd3cf; }
:scope [data-holo-surface="Desktop.Store.Features.List"] > [data-holo-list-row-id="Tech-MySQL"] { --eos-tech: #cfe9f1; }
:scope [data-holo-surface="Desktop.Store.Features.List"] > [data-holo-list-row-id="Tech-Vue"] { --eos-tech: #cdf0dc; }
:scope [data-holo-surface="Desktop.Store.Features.List"] > [data-holo-list-row-id="Tech-jQuery"] { --eos-tech: #d6e6fb; }
:scope [data-holo-surface="Desktop.Store.Features.List"] > [data-holo-list-row-id="Tech-Bootstrap"] { --eos-tech: #e6d9ff; }
:scope [data-holo-surface="Desktop.Store.Features.List"] > [data-holo-list-row-id="Tech-Sass"] { --eos-tech: #ffd6e8; }
:scope [data-holo-surface="Desktop.Store.Features.List"] > [data-holo-list-row-id="Tech-Webpack"] { --eos-tech: #d3eefb; }
:scope [data-holo-surface="Desktop.Store.Features.List"] > [data-holo-list-row-id="Tech-LaravelMix"] { --eos-tech: #ffddd2; }
:scope [data-holo-surface="Desktop.Store.Features.List"] > [data-holo-list-row-id="Tech-Axios"] { --eos-tech: #dcdcff; }
:scope [data-holo-surface="Desktop.Store.Features.List"] > [data-holo-list-row-id="Tech-Lodash"] { --eos-tech: #d4e9ff; }
:scope [data-holo-surface="Desktop.Store.Features.List"] > [data-holo-list-row-id="Tech-InterventionImage"] { --eos-tech: #e2f2d8; }
:scope [data-holo-surface="Desktop.Store.Features.List"] > [data-holo-list-row-id="Tech-PHPUnit"] { --eos-tech: #dfe4f6; }
:scope [data-holo-surface="Desktop.Store.Features.List"] > [data-holo-list-row-id="Tech-React"] { --eos-tech: #d2f2fb; }
:scope [data-holo-surface="Desktop.Store.Features.List"] > [data-holo-list-row-id="Tech-Deno"] { --eos-tech: #e4e4e8; }
:scope [data-holo-surface="Desktop.Store.Features.List"] > [data-holo-list-row-id="Tech-Holo"] { --eos-tech: #dfe3ff; }
:scope [data-holo-surface="Desktop.Store.Features.List"] > [data-holo-list-row-id="Tech-Canvas"] { --eos-tech: #ffe4cc; }
:scope [data-holo-surface="Desktop.Store.Features.List"] > [data-holo-list-row-id="Tech-WebAudio"] { --eos-tech: #efd9ff; }
:scope [data-holo-surface="Desktop.Store.Features.List"] > [data-holo-list-row-id="Tech-Howlerjs"] { --eos-tech: #ffdfc2; }
:scope [data-holo-surface="Desktop.Store.Features.List"] > [data-holo-list-row-id="Tech-OpenAI"] { --eos-tech: #d8f1e7; }
:scope [data-holo-surface="Desktop.Store.Features.List"] > [data-holo-list-row-id="Tech-Playwright"] { --eos-tech: #d7f0d4; }
:scope [data-holo-surface="Desktop.Store.Features.List"] > [data-holo-list-row-id="Tech-Solana"] { --eos-tech: #e8d8ff; }
:scope [data-holo-surface="Desktop.Store.Features.List"] > [data-holo-list-row-id="Tech-Solanaweb3js"] { --eos-tech: #e2d8ff; }
:scope [data-holo-surface="Desktop.Store.Features.List"] > [data-holo-list-row-id="Tech-Phantom"] { --eos-tech: #e3dafc; }
:scope [data-holo-surface="Desktop.Store.Features.List"] > [data-holo-list-row-id="Tech-Solflare"] { --eos-tech: #ffe3c4; }
:scope [data-holo-surface="Desktop.Store.Features.List"] > [data-holo-list-row-id="Tech-Metaplex"] { --eos-tech: #f4d8f4; }
:scope [data-holo-surface="Desktop.Store.Features.List"] > [data-holo-list-row-id="Tech-NFTs"] { --eos-tech: #fcdcee; }
:scope [data-holo-surface="Desktop.Store.Features.List"] > [data-holo-list-row-id="Tech-WebSocket"] { --eos-tech: #d8e5f5; }
:scope [data-holo-surface="Desktop.Store.Features.List"] > [data-holo-list-row-id="Tech-WebGL"] { --eos-tech: #ffddd2; }
:scope [data-holo-surface="Desktop.Store.Features.List"] > [data-holo-list-row-id="Tech-ServiceWorker"] { --eos-tech: #dde8f4; }
:scope [data-holo-surface="Desktop.Store.Features.List"] > [data-holo-list-row-id="Tech-Maia"] { --eos-tech: #e0edff; }

/* Ficha de proyecto más contenida: título y encabezados algo menores, y el
   botón principal no se mueve al pasar el puntero (sólo se aclara). */
:scope [data-holo-surface="Desktop.Store.Detail.Title"] [data-holo-role="Title"]:not(#eos-priority):not(#eos-ink) {
  font-size: 2.4rem;
}

:scope :is([data-holo-surface="Desktop.Store.About.Title"], [data-holo-surface="Desktop.Store.Features.Title"]) [data-holo-role="Title"]:not(#eos-priority) {
  font-size: 1.7rem;
}

:scope [data-holo-surface="Desktop.Store.Detail.Run"] [data-holo-role="Button"]:is(:hover, :active, :focus-visible):not(#eos-priority) {
  transform: none;
  translate: none;
}

/* El emulador se cierra con la X de su barra de juego (cierre general, que
   pide a la ventana su propio cierre): la otra X de la ventana sobra. */
:scope [data-holo-type="Layout.Window"][data-holo-presentation="Floating"]:has(iframe[src*="/Emulator/.About/Media/GBA/"]) [data-holo-window-control="Close"]:not(#eos-priority) {
  display: none;
}

/* Lector de documentos: una sola barra sobre la página. Anterior y Siguiente
   son botones redondeados a los lados de la página actual, centrados; la
   descarga se queda a la derecha de esa misma barra. */
:scope [data-holo-role="Stack"]:has(> [data-holo-zoom="true"]) > [data-holo-type="Collection.List"][data-holo-presentation="Bar"]:not(#eos-priority) {
  justify-content: center;
  gap: 1rem;
  min-block-size: 4.6rem;
  padding: 0.7rem 5.6rem;
}

:scope [data-holo-role="Stack"]:has(> [data-holo-zoom="true"]) > [data-holo-type="Collection.List"][data-holo-presentation="Bar"] > :is([data-holo-list-row-id="Previous"], [data-holo-list-row-id="Next"]):not(#eos-priority) {
  justify-content: center;
  gap: 0.6rem;
  min-block-size: 3.2rem;
  padding: 0 1.4rem;
  border: 1px solid #d3d9ee;
  border-radius: 99rem;
  background: linear-gradient(#ffffff, #f3f5fc);
  box-shadow: 0 1px 2px rgba(42, 52, 120, 0.1);
  color: var(--eos-ink);
  font-weight: 600;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

:scope [data-holo-role="Stack"]:has(> [data-holo-zoom="true"]) > [data-holo-type="Collection.List"][data-holo-presentation="Bar"] > [data-holo-list-row-id="Next"]:not(#eos-priority) {
  flex-direction: row-reverse;
}

:scope [data-holo-role="Stack"]:has(> [data-holo-zoom="true"]) > [data-holo-type="Collection.List"][data-holo-presentation="Bar"] > :is([data-holo-list-row-id="Previous"], [data-holo-list-row-id="Next"]):hover:not(:disabled):not(#eos-priority) {
  border-color: #aab6e6;
  background: linear-gradient(#ffffff, #e8ecfb);
  box-shadow: 0 2px 6px rgba(42, 52, 120, 0.14);
}

:scope [data-holo-role="Stack"]:has(> [data-holo-zoom="true"]) > [data-holo-type="Collection.List"][data-holo-presentation="Bar"] > :is([data-holo-list-row-id="Previous"], [data-holo-list-row-id="Next"]):disabled:not(#eos-priority) {
  opacity: 0.45;
  box-shadow: none;
}

:scope [data-holo-role="Stack"]:has(> [data-holo-zoom="true"]) > [data-holo-type="Collection.List"][data-holo-presentation="Bar"] > [data-holo-list-row-id="Current"]:not(#eos-priority):not(#eos-ink) {
  min-inline-size: 11rem;
  justify-content: center;
  background: transparent;
  color: var(--eos-ink-muted);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  cursor: default;
}

:scope [data-holo-role="Stack"]:has(> [data-holo-zoom="true"]) > [data-holo-type="Collection.List"][data-holo-presentation="Bar"] > [data-holo-list-row-id="Current"] [data-holo-role="Icon"]:not(#eos-priority) {
  display: none;
}

/* La descarga no ocupa una fila propia: se coloca al final de la barra,
   centrada en su alto (4,6rem) con su botón de 28px. Su caja de posición es
   su fila de la rejilla, vacía, que empieza justo bajo la barra. */
:scope [data-holo-role="Stack"]:has(> [data-holo-zoom="true"]) > [data-holo-type="Navigation.Action.Bar"]:not(#eos-priority) {
  --holo-part-position: absolute;
  --holo-part-inset: calc(-2.3rem - 14px) 0.9rem auto auto;
  --holo-part-width: auto;
  padding: 0;
  border: 0;
  background: transparent;
}

/* Campo de Aura: radio moderado y un foco limpio. El contorno del foco se
   dibujaba por fuera, separado del borde (doble borde azul) y la conversación,
   que recorta lo que sobresale, lo cortaba por los lados. Ahora el foco es un
   solo anillo pintado hacia dentro. */
:scope [data-holo-surface="Desktop.Aura"] [data-holo-conversation="Editor"] textarea:not(#eos-priority) {
  border-radius: .9rem;
}
:scope [data-holo-surface="Desktop.Aura"] [data-holo-conversation="Editor"] textarea:focus-visible:not(#eos-priority),
:scope [data-holo-surface="Desktop.Aura"] [data-holo-conversation="Editor"] textarea:focus:not(#eos-priority) {
  outline: none;
  border-color: color-mix(in srgb, var(--holo-accent) 70%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--holo-accent) 45%, transparent);
}

/* Pantalla grande de una app flotante (el emulador): la ventana ocupa toda
   la pantalla y la barra de tareas se retira mientras dura (Martín). Las
   filas son las de la mesa (cinco textos invisibles: tema, voz, brillo,
   sonidos y ámbito; la superficie; la barra) con la de la barra a cero. Con
   la plantilla antigua de cuatro filas, la superficie caía en una fila
   implícita de alto cero y la ventana maximizada desaparecía (8-10). */
:scope [data-holo-part-id="Desktop.Live"]:has(> [data-holo-part-id="Desktop.Surface"] [data-holo-presentation="Floating"][data-holo-window-state="Maximized"]):not(#eos-priority) {
  grid-template-rows: repeat(5, max-content) minmax(0, 1fr) 0;
  --holo-part-grid-template-rows: repeat(5, max-content) minmax(0, 1fr) 0;
}

:scope [data-holo-part-id="Desktop.Live"]:has(> [data-holo-part-id="Desktop.Surface"] [data-holo-presentation="Floating"][data-holo-window-state="Maximized"]) > [data-holo-part-id="Desktop.Bar"]:not(#eos-priority) {
  display: none;
  --holo-part-display: none;
}

/* Botones de Eos: un solo lenguaje para toda la mesa (Martín). La acción
   principal es la píldora azul brillante de la ficha de un proyecto; cambia
   sólo su tamaño: pequeño en las filas de una lista, mediano en tarjetas y
   fichas. Todas responden al pasar el puntero y al pulsar. */
:scope {
  --eos-button-primary: linear-gradient(180deg, #74b7ff, #2f7cf6);
  --eos-button-primary-border: rgba(255, 255, 255, .55);
  --eos-button-small: 3.2rem;
  --eos-button-medium: 3.8rem;
  --eos-button-large: 4.6rem;
}

:scope:not([data-eos-theme]) {
  --eos-button-primary: var(--holo-action);
  --eos-button-primary-border: transparent;
}

:scope :is([data-holo-surface="Desktop.Store.List"], [data-holo-surface="Desktop.Store.Feature"]) [data-holo-role="Action"]:not(#eos-priority):not(#eos-button),
:scope [data-holo-surface="Desktop.Store.Detail.Actions"] [data-holo-control-id="Install"]:not(#eos-priority):not(#eos-button),
:scope [data-holo-type="Layout.Window"] [data-holo-surface="Desktop.Store.Detail.Run"][data-holo-type="Navigation.Action.Bar"] > [data-holo-role="Button"]:not(#eos-priority):not(#eos-button),
:scope [data-holo-type="Layout.Window"] [data-holo-type="Control.Form"] [data-holo-role="Button"][type="submit"]:not([data-holo-type="Content.Conversation"] *):not(#eos-priority):not(#eos-button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  box-sizing: border-box;
  min-block-size: var(--eos-button-medium);
  padding-block: 0;
  padding-inline: 2.2rem;
  border: 1px solid var(--eos-button-primary-border);
  border-radius: 999px;
  background: var(--eos-button-primary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 1px 3px rgba(20, 60, 140, .18);
  color: white;
  font-size: 1.5rem;
  font-weight: 600;
  cursor: pointer;
  transition: filter .16s ease, box-shadow .16s ease;
}

:scope [data-holo-surface="Desktop.Store.List"] [data-holo-role="Action"]:not(#eos-priority):not(#eos-button) {
  min-block-size: var(--eos-button-small);
  padding-inline: 1.6rem;
  font-size: 1.3rem;
}

:scope :is([data-holo-surface="Desktop.Store.List"], [data-holo-surface="Desktop.Store.Feature"]) [data-holo-role="Action"]:is(:hover, :focus-visible):not(#eos-priority):not(#eos-button),
:scope [data-holo-surface="Desktop.Store.Detail.Actions"] [data-holo-control-id="Install"]:is(:hover, :focus-visible):not(#eos-priority):not(#eos-button),
:scope [data-holo-type="Layout.Window"] [data-holo-surface="Desktop.Store.Detail.Run"][data-holo-type="Navigation.Action.Bar"] > [data-holo-role="Button"]:is(:hover, :focus-visible):not(#eos-priority):not(#eos-button),
:scope [data-holo-type="Layout.Window"] [data-holo-type="Control.Form"] [data-holo-role="Button"][type="submit"]:not([data-holo-type="Content.Conversation"] *):is(:hover, :focus-visible):not(:disabled):not(#eos-priority):not(#eos-button) {
  filter: brightness(1.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 3px 10px rgba(20, 80, 200, .28);
}

:scope :is([data-holo-surface="Desktop.Store.List"], [data-holo-surface="Desktop.Store.Feature"]) [data-holo-role="Action"]:active:not(#eos-priority):not(#eos-button),
:scope [data-holo-surface="Desktop.Store.Detail.Actions"] [data-holo-control-id="Install"]:active:not(#eos-priority):not(#eos-button),
:scope [data-holo-type="Layout.Window"] [data-holo-surface="Desktop.Store.Detail.Run"][data-holo-type="Navigation.Action.Bar"] > [data-holo-role="Button"]:active:not(#eos-priority):not(#eos-button),
:scope [data-holo-type="Layout.Window"] [data-holo-type="Control.Form"] [data-holo-role="Button"][type="submit"]:not([data-holo-type="Content.Conversation"] *):active:not(:disabled):not(#eos-priority):not(#eos-button) {
  filter: brightness(.95);
  box-shadow: inset 0 2px 4px rgba(10, 40, 110, .25);
}

/* Carrusel de la Store: flechas redondas de verdad (1:1) dentro de la
   tarjeta y los puntos dentro, abajo y centrados. */
:scope [data-holo-surface="Desktop.Store.Feature"] > :is([data-holo-role="CarouselPrevious"], [data-holo-role="CarouselNext"]):not(#eos-priority):not(#eos-button) {
  box-sizing: border-box;
  inline-size: 4rem;
  block-size: 4rem;
  min-inline-size: 4rem;
  min-block-size: 4rem;
  aspect-ratio: 1;
  padding: 0;
  inset-block-start: 50%;
  transform: translateY(-50%);
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 50%;
  background: color-mix(in srgb, white 70%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(30, 60, 120, .14);
  color: var(--holo-accent);
  font-size: 2.2rem;
  line-height: 1;
  transition: background-color .16s ease, box-shadow .16s ease;
}

:scope [data-holo-surface="Desktop.Store.Feature"] > [data-holo-role="CarouselPrevious"]:not(#eos-priority):not(#eos-button) {
  inset-inline-start: 1.4rem;
}

:scope [data-holo-surface="Desktop.Store.Feature"] > [data-holo-role="CarouselNext"]:not(#eos-priority):not(#eos-button) {
  inset-inline-end: 1.4rem;
}

:scope [data-holo-surface="Desktop.Store.Feature"] > :is([data-holo-role="CarouselPrevious"], [data-holo-role="CarouselNext"]):is(:hover, :focus-visible):not(:disabled):not(#eos-priority):not(#eos-button) {
  background: white;
  box-shadow: 0 3px 12px rgba(30, 60, 120, .22);
}

:scope [data-holo-surface="Desktop.Store.Feature"] > [data-holo-role="CarouselPagination"]:not(#eos-priority):not(#eos-button) {
  position: absolute;
  z-index: 1;
  inset-inline: 0;
  inset-block-end: 1.6rem;
  pointer-events: none;
}

:scope [data-holo-surface="Desktop.Store.Feature"] > [data-holo-role="CarouselPagination"] > button:not(#eos-priority):not(#eos-button) {
  pointer-events: auto;
}

:scope [data-holo-surface="Desktop.Store.Feature"] > [data-holo-role="CarouselTrack"] > [data-holo-role="Item"]:not(#eos-priority):not(#eos-button) {
  padding-inline: 7.2rem;
}

/* La tarjeta destacada y la lista se adaptan al ancho de la ventana de la
   Store (`eos-app`), descontada la barra lateral (unos 37rem con los
   rellenos): con una Store estrecha el texto quedaba en 36 px y el título se
   partía en sílabas («Jue ga a tus clá sic os»). Por debajo de 80rem la
   tarjeta es una columna sin la vista previa; por debajo de 74rem las
   flechas bajan junto a los puntos; por debajo de 62rem el botón de cada
   ficha pasa debajo de su nombre. Los títulos se parten por palabras. No se
   usa un contenedor propio: el visor y la tarjeta se dimensionan por su
   contenido y, contenidos, perdían su ancho. */
:scope [data-holo-surface="Desktop.Store.Feature"] [data-holo-role="Title"]:not(#eos-priority):not(#eos-button) {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: manual;
}

@container eos-app (max-width: 80rem) {
  :scope [data-holo-surface="Desktop.Store.Feature"] > [data-holo-role="CarouselTrack"] > [data-holo-role="Item"]:not(#eos-priority):not(#eos-button) {
    padding-inline: 6rem;
  }
  :scope [data-holo-surface="Desktop.Store.Feature"] [data-holo-role="Primary"]:not(#eos-priority):not(#eos-button) {
    grid-template-columns: minmax(0, 1fr);
  }
  :scope [data-holo-surface="Desktop.Store.Feature"] [data-holo-role="Primary"] > [data-holo-role="Preview"]:not(#eos-priority):not(#eos-button) {
    display: none;
  }
  :scope [data-holo-surface="Desktop.Store.Feature"] [data-holo-role="Title"]:not(#eos-priority):not(#eos-button) {
    font-size: 2.4rem;
  }
}

@container eos-app (max-width: 74rem) {
  :scope [data-holo-surface="Desktop.Store.Feature"] > [data-holo-role="CarouselTrack"] > [data-holo-role="Item"]:not(#eos-priority):not(#eos-button) {
    padding: 1.6rem 2rem 6rem;
  }
  :scope [data-holo-surface="Desktop.Store.Feature"] > :is([data-holo-role="CarouselPrevious"], [data-holo-role="CarouselNext"]):not(#eos-priority):not(#eos-button) {
    inset-block: auto 1.8rem;
    transform: none;
    inline-size: 3.2rem;
    block-size: 3.2rem;
    min-inline-size: 3.2rem;
    min-block-size: 3.2rem;
    font-size: 1.8rem;
  }
  :scope [data-holo-surface="Desktop.Store.Feature"] > [data-holo-role="CarouselPagination"]:not(#eos-priority):not(#eos-button) {
    inset-block-end: 3rem;
  }
  :scope [data-holo-surface="Desktop.Store.Feature"] [data-holo-role="Title"]:not(#eos-priority):not(#eos-button) {
    font-size: 2rem;
  }
}

@container eos-app (max-width: 62rem) {
  :scope [data-holo-surface="Desktop.Store.List"] > [data-holo-role="Item"]:not(#eos-priority):not(#eos-button) {
    flex-wrap: wrap;
    row-gap: .6rem;
  }
  :scope [data-holo-surface="Desktop.Store.List"] > [data-holo-role="Item"] > [data-holo-role="Primary"]:not(#eos-priority):not(#eos-button) {
    flex: 1 1 100%;
  }
  :scope [data-holo-surface="Desktop.Store.List"] > [data-holo-role="Item"] > [data-holo-role="Actions"]:not(#eos-priority):not(#eos-button) {
    margin-inline-start: 7.2rem;
  }
}

/* Tipografía como Initori (Martín): Ginora Sans en los títulos grandes y Open
   Sans, sobre todo Light, en el resto. Las dos familias las publica Holo
   (Render/Style/DOM Font.css); aquí sólo se eligen. */
:scope,
:scope[data-holo-theme],
:scope[data-holo-theme] :where([data-holo-render]) {
  --holo-font-family: "Open Sans", "Segoe UI", sans-serif;
  --eos-font-display: "Ginora Sans", "Open Sans", sans-serif;
}

/* Holo repone el peso 400 en la raíz de cada región; Eos lo baja a Light
   para que el texto corrido sea fino, como en Initori. */
:scope:not(#eos-priority),
:scope [data-holo-render]:not(#eos-priority) {
  font-family: var(--holo-font-family);
  font-weight: 300;
}

/* El texto secundario de las listas (subtítulos, descripciones, acciones)
   también en Light; los títulos de fila conservan su peso para jerarquía. */
:scope [data-holo-type="Collection.List"] :is([data-holo-role="Subtitle"], [data-holo-role="Text"]):not(#eos-priority) {
  font-weight: 300;
}

:scope :is([data-holo-type="Content.Header"], [data-holo-presentation="Carousel"]) [data-holo-role="Title"]:not(#eos-priority),
:scope [data-holo-part-id="Desktop.Clock.Time"]:not(#eos-priority) {
  font-family: var(--eos-font-display);
}

/* La hora y la fecha de la barra, con trazo fino. */
:scope [data-holo-part-id="Desktop.Clock"]:not(#eos-priority) {
  font-weight: 300;
  letter-spacing: 0.02em;
}

/* El icono de pantalla completa, en blanco como el resto de la barra. */
:scope [data-holo-part-id="Desktop.Screen"]:not(#eos-priority) [data-holo-role="Button"] [data-holo-role="Icon"] {
  color: rgba(255, 255, 255, 0.95);
}

/* Store: pasar el puntero por una app o por una tarjeta del carrusel da una
   respuesta suave (Martín): el fondo varía un poco y el icono crece algo. */
:scope [data-holo-surface="Desktop.Store.List"] [data-holo-role="Item"]:not(#eos-priority) {
  transition: background-color .35s var(--eos-ease, ease);
}

:scope [data-holo-surface="Desktop.Store.List"] [data-holo-role="Item"]:hover:not(#eos-priority) {
  background-color: color-mix(in srgb, var(--holo-accent) 6%, transparent);
}

:scope [data-holo-surface="Desktop.Store.List"] [data-holo-role="Item"] [data-holo-role="Icon"]:not(#eos-priority),
:scope [data-holo-surface="Desktop.Store.Feature"] [data-holo-role="Preview"]:not(#eos-priority) {
  transition: transform .45s var(--eos-ease, ease);
}


:scope [data-holo-surface="Desktop.Store.Feature"] > [data-holo-role="CarouselTrack"] > [data-holo-role="Item"]:not(#eos-priority) {
  background-size: 160% 160%;
  background-position: 0% 50%;
  transition: background-position .8s var(--eos-ease, ease);
}

:scope [data-holo-surface="Desktop.Store.Feature"] > [data-holo-role="CarouselTrack"] > [data-holo-role="Item"]:hover:not(#eos-priority) {
  background-position: 100% 50%;
}


@media (prefers-reduced-motion: reduce) {
  :scope :is([data-holo-surface="Desktop.Store.List"], [data-holo-surface="Desktop.Store.Feature"]) :is([data-holo-role="Item"], [data-holo-role="Icon"], [data-holo-role="Preview"]):not(#eos-priority) {
    transition: none;
  }
}

/* Brillo de Aura: una Prop de cada estilo (Ajustes › Estilo). Web.js copia la
   elección a la raíz; las variables son las que publica la Part Companion. */
:scope[data-eos-glow="Off"] {
  --holo-companion-glow-strength: 0;
  --holo-companion-glow-hover: 0;
}

:scope[data-eos-glow="Soft"] {
  --holo-companion-glow-strength: .55;
}

:scope[data-eos-glow="Bright"] {
  --holo-companion-glow-filter: brightness(1.5) saturate(1.4) drop-shadow(0 0 .8rem rgba(120, 255, 240, .65));
}

/* Ajustes › Sonido: cada evento en una fila limpia con su icono en una
   pastilla de color, su nombre, su selector y un altavoz redondo para oírlo. */
:scope [data-holo-surface="Desktop.Settings.Events.Row"]:not(#eos-priority) {
  /* Holo intercala una pista por cada hueco: icono, nombre, selector, altavoz. */
  --holo-part-grid-template-columns: 3.4rem 1.2rem minmax(0, 1fr) 1.2rem minmax(12rem, 16rem) 1.2rem 3.6rem;
  min-block-size: 5.2rem;
  padding-block: .5rem;
  border-block-end: 1px solid color-mix(in srgb, var(--holo-border) 70%, transparent);
}

:scope [data-holo-surface="Desktop.Settings.Events.Icon"]:not(#eos-priority) {
  display: grid;
  place-items: center;
  inline-size: 3.4rem;
  block-size: 3.4rem;
  border-radius: 1.1rem;
  background: color-mix(in srgb, var(--holo-accent) 13%, transparent);
  color: var(--holo-accent);
  font-size: 1.8rem;
}

:scope [data-holo-surface="Desktop.Settings.Events.Row"] [data-holo-type="Control.Select"] > [data-holo-select-trigger]:not(#eos-priority) {
  min-inline-size: 15rem;
  min-block-size: 3.6rem;
  padding: .4rem 1rem .4rem 1.2rem;
  justify-content: space-between;
  border-radius: 1rem;
  font-size: 1.35rem;
}

:scope [data-holo-surface="Desktop.Settings.Events.Play"] > [data-holo-role="Item"]:not(#eos-priority) {
  display: grid;
  place-items: center;
  inline-size: 3.6rem;
  min-inline-size: 0;
  max-inline-size: 3.6rem;
  block-size: 3.6rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--holo-accent) 30%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--holo-accent) 10%, var(--holo-panel, #fff));
  color: var(--holo-accent);
  font-size: 1.7rem;
}

:scope [data-holo-surface="Desktop.Settings.Events.Play"] > [data-holo-role="Item"]:hover:not(#eos-priority) {
  background: color-mix(in srgb, var(--holo-accent) 20%, var(--holo-panel, #fff));
}

:scope [data-holo-surface="Desktop.Settings.Events.Play"]:not(#eos-priority) {
  inline-size: auto;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

:scope [data-holo-surface="Desktop.Settings.Events.Play"] [data-holo-role="Icon"][data-holo-icon]:not(#eos-priority) {
  font-size: 1.9rem;
}

:scope [data-holo-surface="Desktop.Settings.Events.Row"] [data-holo-select-trigger] [data-holo-role="Value"]:not(#eos-priority) {
  font-size: 1.35rem;
}

/* El nombre del botón sigue en el árbol accesible, sin ocupar sitio. */
:scope [data-holo-surface="Desktop.Settings.Events.Play"] > [data-holo-role="Item"] > [data-holo-role="Main"]:not(#eos-priority) {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* La biblioteca: cada sonido es una píldora que se pulsa para oírlo; las de
   un tipo saltan de línea en vez de salirse por la derecha. */
:scope [data-holo-surface="Desktop.Settings.Library.Sounds"]:not(#eos-priority) {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  border: 0;
  background: none;
}

:scope [data-holo-surface="Desktop.Settings.Library.Sounds"] > [data-holo-role="Item"]:not(#eos-priority) {
  flex: 0 0 auto;
  min-inline-size: 0;
  min-block-size: 3.4rem;
  padding: .3rem 1.2rem .3rem .9rem;
  border: 1px solid color-mix(in srgb, var(--holo-accent) 22%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--holo-accent) 7%, var(--holo-panel, #fff));
  font-size: 1.3rem;
}

:scope [data-holo-surface="Desktop.Settings.Tune.Label"]:not(#eos-priority) {
  margin-block-start: .8rem;
  color: var(--eos-muted);
  font-size: 1.3rem;
  font-weight: 600;
}

/* El desplegable de un selector, del mismo cristal opaco que los menús: con
   el panel translúcido del tema se leían a la vez las filas de debajo. */
:scope [data-holo-type="Control.Select"] > [data-holo-role="Dropdown"]:not(#eos-priority) {
  border: 1px solid var(--eos-glass-edge, rgba(255, 255, 255, .75));
  border-radius: 1.2rem;
  background: linear-gradient(rgba(252, 253, 255, .97), rgba(246, 249, 253, .96));
  -webkit-backdrop-filter: var(--eos-glass);
  backdrop-filter: var(--eos-glass);
  box-shadow: 0 1rem 2.8rem rgba(20, 40, 64, .2);
}

:scope [data-holo-surface="Desktop.Settings.Events.Name"]:not(#eos-priority) {
  color: var(--holo-fg);
  font-size: 1.45rem;
}

/* La ventana del chat de Aura se redimensiona por los bordes y esquinas del
   panel de mensajes, no por la caja entera que también contiene a Aura
   (Martín, 8-10). Las asas se colocan sobre el panel: la caja tiene su
   relleno (1.6rem) y la columna del personaje (19rem) a la derecha. El
   tamaño se guarda con el mismo evento Resize que las demás ventanas. Holo
   oculta las asas de las ventanas flotantes, y ésta no recibe el puntero
   salvo en ellas. */
:scope [data-holo-type="Layout.Window"][data-holo-presentation="Floating"]:has([data-holo-surface="Desktop.Aura"][data-holo-companion-collapsed="false"]) > [data-holo-role="ResizeHandle"]:not(#eos-priority) {
  --eos-aura-pad: 1.6rem;
  --eos-aura-figure: 19rem;
  --eos-aura-grip: 1rem;
  display: block;
  pointer-events: auto;
}

:scope [data-holo-type="Layout.Window"][data-holo-presentation="Floating"]:has([data-holo-surface="Desktop.Aura"][data-holo-companion-collapsed="false"]) > [data-holo-role="ResizeHandle"]:is([data-holo-window-edge="N"], [data-holo-window-edge="S"]):not(#eos-priority) {
  inset: auto calc(var(--eos-aura-figure) + var(--eos-aura-grip)) auto calc(var(--eos-aura-pad) + var(--eos-aura-grip));
  inline-size: auto;
  block-size: var(--eos-aura-grip);
}

:scope [data-holo-type="Layout.Window"][data-holo-presentation="Floating"]:has([data-holo-surface="Desktop.Aura"][data-holo-companion-collapsed="false"]) > [data-holo-role="ResizeHandle"][data-holo-window-edge="N"]:not(#eos-priority) {
  inset-block-start: calc(var(--eos-aura-pad) - var(--eos-aura-grip) / 2);
}

:scope [data-holo-type="Layout.Window"][data-holo-presentation="Floating"]:has([data-holo-surface="Desktop.Aura"][data-holo-companion-collapsed="false"]) > [data-holo-role="ResizeHandle"][data-holo-window-edge="S"]:not(#eos-priority) {
  inset-block-end: calc(var(--eos-aura-pad) - var(--eos-aura-grip) / 2);
}

:scope [data-holo-type="Layout.Window"][data-holo-presentation="Floating"]:has([data-holo-surface="Desktop.Aura"][data-holo-companion-collapsed="false"]) > [data-holo-role="ResizeHandle"]:is([data-holo-window-edge="W"], [data-holo-window-edge="E"]):not(#eos-priority) {
  inset: calc(var(--eos-aura-pad) + var(--eos-aura-grip)) auto calc(var(--eos-aura-pad) + var(--eos-aura-grip)) auto;
  inline-size: var(--eos-aura-grip);
  block-size: auto;
}

:scope [data-holo-type="Layout.Window"][data-holo-presentation="Floating"]:has([data-holo-surface="Desktop.Aura"][data-holo-companion-collapsed="false"]) > [data-holo-role="ResizeHandle"][data-holo-window-edge="W"]:not(#eos-priority) {
  inset-inline-start: calc(var(--eos-aura-pad) - var(--eos-aura-grip) / 2);
}

:scope [data-holo-type="Layout.Window"][data-holo-presentation="Floating"]:has([data-holo-surface="Desktop.Aura"][data-holo-companion-collapsed="false"]) > [data-holo-role="ResizeHandle"][data-holo-window-edge="E"]:not(#eos-priority) {
  inset-inline-end: calc(var(--eos-aura-figure) - var(--eos-aura-grip) / 2);
}

:scope [data-holo-type="Layout.Window"][data-holo-presentation="Floating"]:has([data-holo-surface="Desktop.Aura"][data-holo-companion-collapsed="false"]) > [data-holo-role="ResizeHandle"]:is([data-holo-window-edge="NW"], [data-holo-window-edge="NE"], [data-holo-window-edge="SW"], [data-holo-window-edge="SE"]):not(#eos-priority) {
  inset: auto;
  inline-size: calc(var(--eos-aura-grip) * 1.4);
  block-size: calc(var(--eos-aura-grip) * 1.4);
}

:scope [data-holo-type="Layout.Window"][data-holo-presentation="Floating"]:has([data-holo-surface="Desktop.Aura"][data-holo-companion-collapsed="false"]) > [data-holo-role="ResizeHandle"]:is([data-holo-window-edge="NW"], [data-holo-window-edge="NE"]):not(#eos-priority) {
  inset-block-start: calc(var(--eos-aura-pad) - var(--eos-aura-grip) * .7);
}

:scope [data-holo-type="Layout.Window"][data-holo-presentation="Floating"]:has([data-holo-surface="Desktop.Aura"][data-holo-companion-collapsed="false"]) > [data-holo-role="ResizeHandle"]:is([data-holo-window-edge="SW"], [data-holo-window-edge="SE"]):not(#eos-priority) {
  inset-block-end: calc(var(--eos-aura-pad) - var(--eos-aura-grip) * .7);
}

:scope [data-holo-type="Layout.Window"][data-holo-presentation="Floating"]:has([data-holo-surface="Desktop.Aura"][data-holo-companion-collapsed="false"]) > [data-holo-role="ResizeHandle"]:is([data-holo-window-edge="NW"], [data-holo-window-edge="SW"]):not(#eos-priority) {
  inset-inline-start: calc(var(--eos-aura-pad) - var(--eos-aura-grip) * .7);
}

:scope [data-holo-type="Layout.Window"][data-holo-presentation="Floating"]:has([data-holo-surface="Desktop.Aura"][data-holo-companion-collapsed="false"]) > [data-holo-role="ResizeHandle"]:is([data-holo-window-edge="NE"], [data-holo-window-edge="SE"]):not(#eos-priority) {
  inset-inline-end: calc(var(--eos-aura-figure) - var(--eos-aura-grip) * .7);
}



/* ------------------------------------------------------------------------
   Store · pulido (Martín, 9-10). Va al final y con más peso que lo anterior.
   - El carrusel no lleva botón: la tarjeta entera abre la ficha. Cada una
     tiene su degradado con los colores de su icono, la imagen respira por
     abajo y las flechas van centradas en vertical, sin sombra.
   - Las filas dicen con un icono si la app está instalada o se puede
     instalar; el detalle es un botón redondo con icono.
   - Las funciones del detalle son tarjetas con su sello.
   ------------------------------------------------------------------------ */
:scope [data-holo-surface="Desktop.Store.Feature"] > [data-holo-role="CarouselTrack"] > [data-holo-role="Item"]:not(#eos-priority):not(#eos-store) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "main preview" "icon preview";
  align-items: center;
  column-gap: 3rem;
  row-gap: 1.4rem;
  padding: 3.6rem 7.6rem 5.6rem;
  min-block-size: 30rem;
  border: 0;
  border-radius: 1.8rem;
  box-shadow: none;
  color: #1e2350;
  /* Un solo degradado ancho con los colores de su icono, un toque frío y
     otro cálido: al pasar por encima se desliza (Hover de la Store). */
  background-image: linear-gradient(120deg,
    color-mix(in srgb, var(--holo-item-palette-from, #c5b3ff) 88%, #7a6bff) 0%,
    color-mix(in srgb, var(--holo-item-palette-to, #8fd3ff) 80%, #ffffff) 35%,
    color-mix(in srgb, var(--holo-item-palette-from, #c5b3ff) 60%, #ffb3e0) 65%,
    color-mix(in srgb, var(--holo-item-palette-to, #8fd3ff) 85%, #6fb7ff) 100%);
  background-size: 220% 220%;
  background-position: 0% 50%;
  transition: background-position .9s cubic-bezier(.2, .8, .2, 1);
}

:scope [data-holo-surface="Desktop.Store.Feature"] > [data-holo-role="CarouselTrack"] > [data-holo-role="Item"]:is(:hover, :focus-visible):not(#eos-priority):not(#eos-store) {
  background-position: 100% 50%;
}

:scope [data-holo-surface="Desktop.Store.Feature"] > [data-holo-role="CarouselTrack"] > [data-holo-role="Item"] > [data-holo-role="Main"]:not(#eos-priority):not(#eos-store) {
  grid-area: main;
  align-self: end;
  gap: .8rem;
}

:scope [data-holo-surface="Desktop.Store.Feature"] > [data-holo-role="CarouselTrack"] > [data-holo-role="Item"] > [data-holo-role="Icon"]:not(#eos-priority):not(#eos-store) {
  display: block;
  grid-area: icon;
  align-self: start;
  inline-size: 4.8rem;
  block-size: 4.8rem;
  filter: drop-shadow(0 .4rem .8rem rgba(30, 20, 80, .18));
}

:scope [data-holo-surface="Desktop.Store.Feature"] > [data-holo-role="CarouselTrack"] > [data-holo-role="Item"] > [data-holo-role="Preview"]:not(#eos-priority):not(#eos-store) {
  grid-area: preview;
  inline-size: 100%;
  block-size: 21rem;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

:scope [data-holo-surface="Desktop.Store.Feature"] > [data-holo-role="CarouselTrack"] > [data-holo-role="Item"] > [data-holo-role="Preview"] :is([data-holo-role="IconVisual"], img):not(#eos-priority):not(#eos-store) {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  background: transparent;
  filter: drop-shadow(0 1.8rem 2.4rem rgba(40, 20, 100, .28));
}

:scope [data-holo-surface="Desktop.Store.Feature"] > [data-holo-role="CarouselTrack"] > [data-holo-role="Item"] [data-holo-role="Subtitle"]:not(#eos-priority):not(#eos-store) {
  color: color-mix(in srgb, #1e2350 65%, transparent);
  font-size: 1.3rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Store estrecha (móvil): la tarjeta destacada apila la imagen sobre el texto.
   En dos columnas el texto quedaba en una franja de ~4 rem y el título se
   partía por sílabas. */
@container eos-app (max-width: 52rem) {
  :scope [data-holo-surface="Desktop.Store.Feature"] > [data-holo-role="CarouselTrack"] > [data-holo-role="Item"]:not(#eos-priority):not(#eos-store) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas: "preview" "main";
    row-gap: 1.2rem;
    padding: 2.4rem 5.6rem 4.4rem;
    min-block-size: 0;
  }

  :scope [data-holo-surface="Desktop.Store.Feature"] > [data-holo-role="CarouselTrack"] > [data-holo-role="Item"] > [data-holo-role="Preview"]:not(#eos-priority):not(#eos-store) {
    block-size: 12rem;
  }

  :scope [data-holo-surface="Desktop.Store.Feature"] > [data-holo-role="CarouselTrack"] > [data-holo-role="Item"] > [data-holo-role="Icon"]:not(#eos-priority):not(#eos-store) {
    display: none;
  }

  :scope [data-holo-surface="Desktop.Store.Feature"] > [data-holo-role="CarouselTrack"] > [data-holo-role="Item"] > [data-holo-role="Main"]:not(#eos-priority):not(#eos-store) {
    align-self: start;
    text-align: center;
    align-items: center;
  }

  :scope [data-holo-surface="Desktop.Store.Feature"] > [data-holo-role="CarouselTrack"] > [data-holo-role="Item"] [data-holo-role="Title"]:not(#eos-priority):not(#eos-store) {
    font-size: 2.4rem;
    overflow-wrap: normal;
  }
}

:scope [data-holo-surface="Desktop.Store.Feature"] > :is([data-holo-role="CarouselPrevious"], [data-holo-role="CarouselNext"]):not(#eos-priority):not(#eos-store) {
  inset-block-start: 50%;
  translate: 0 -50%;
  transform: none;
  display: grid;
  place-items: center;
  box-shadow: none;
  border: 0;
  background: rgba(255, 255, 255, .78);
  color: #2a3478;
}

/* Filas: una marca (instalada) o un botón redondo (instalar), sólo icono. */
:scope [data-holo-surface="Desktop.Store"] [data-holo-surface="Desktop.Store.List"] [data-holo-role="Actions"] > [data-holo-role="Action"]:not(#eos-priority):not(#eos-store) {
  display: grid;
  place-items: center;
  inline-size: 3.8rem;
  block-size: 3.8rem;
  min-inline-size: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  font-size: 1.8rem;
  color: #fff;
  background: linear-gradient(180deg, #5aa6ff, var(--holo-accent));
}

:scope [data-holo-surface="Desktop.Store"] [data-holo-surface="Desktop.Store.List"] [data-holo-role="Actions"] > [data-holo-role="Action"] > [data-holo-role="Text"]:not(#eos-priority):not(#eos-store) {
  display: none;
}

:scope [data-holo-surface="Desktop.Store"] [data-holo-surface="Desktop.Store.List"] [data-holo-role="Actions"] > [data-holo-role="Action"][data-holo-action-id="Installed"]:not(#eos-priority):not(#eos-store) {
  color: #1f9d63;
  background: color-mix(in srgb, #1f9d63 12%, transparent);
  opacity: 1;
  cursor: default;
}

:scope [data-holo-surface="Desktop.Store"] [data-holo-surface="Desktop.Store.List"] [data-holo-role="Actions"] > [data-holo-role="Action"][data-holo-action-id="Install"]:is(:hover, :focus-visible):not(#eos-priority):not(#eos-store) {
  background: linear-gradient(180deg, #6db1ff, #2f7cf0);
}

/* La lista: separación regular, sin hueco lateral. */
:scope [data-holo-surface="Desktop.Store.List"]:not(#eos-priority):not(#eos-store) {
  column-gap: 2rem;
  row-gap: 0;
}

/* Detalle: instalar es un botón redondo con icono; instalada, su marca y el
   de desinstalar, discreto. */
:scope [data-holo-surface="Desktop.Store.Detail.Actions"][data-holo-type="Navigation.Action.Bar"]:not(#eos-priority):not(#eos-store) {
  display: flex;
  gap: .8rem;
  justify-content: end;
}

:scope [data-holo-surface="Desktop.Store.Detail.Actions"][data-holo-type="Navigation.Action.Bar"] > :is([data-holo-role="Button"], button):not(#eos-priority):not(#eos-store) {
  display: grid;
  place-items: center;
  inline-size: 46px;
  block-size: 46px;
  max-inline-size: none;
  max-block-size: none;
  min-inline-size: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  font-size: 22px;
  color: #fff;
  background: linear-gradient(180deg, #5aa6ff, var(--holo-accent));
}

:scope [data-holo-surface="Desktop.Store.Detail.Actions"][data-holo-type="Navigation.Action.Bar"] > [data-holo-control-id="Installed"]:not(#eos-priority):not(#eos-store) {
  color: #1f9d63;
  background: color-mix(in srgb, #1f9d63 12%, transparent);
  opacity: 1;
}

:scope [data-holo-surface="Desktop.Store.Detail.Actions"][data-holo-type="Navigation.Action.Bar"] > [data-holo-control-id="Uninstall"]:not(#eos-priority):not(#eos-store) {
  color: #c2410c;
  background: color-mix(in srgb, #c2410c 10%, transparent);
}

/* Funciones: una lista limpia, cada una con su sello en una placa del acento. */
:scope [data-holo-surface="Desktop.Store.Features.List"]:not(#eos-priority):not(#eos-store) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .7rem;
  block-size: auto;
  max-block-size: none;
  overflow: visible;
}

:scope [data-holo-surface="Desktop.Store.Features.List"] > [data-holo-role="Item"]:not(#eos-priority):not(#eos-store) {
  display: flex;
  align-items: center;
  gap: .8rem;
  inline-size: auto;
  min-block-size: 0;
  padding: .45rem .2rem;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

:scope [data-holo-surface="Desktop.Store.Features.List"] > [data-holo-role="Item"] [data-holo-role="Icon"]:not(#eos-priority):not(#eos-store) {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 2.6rem;
  block-size: 2.6rem;
  border-radius: .8rem;
  color: var(--holo-accent);
  background: color-mix(in srgb, var(--holo-accent) 12%, transparent);
  font-size: 1.5rem;
}

:scope [data-holo-surface="Desktop.Store.Features.List"] > [data-holo-role="Item"] [data-holo-role="Title"]:not(#eos-priority):not(#eos-store) {
  font-size: 1.3rem;
  font-weight: 450;
  color: var(--holo-card-fg, #1e2350);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  min-inline-size: 0;
}

/* El icono de esos botones es sólo el glifo: sin la placa de icono de Holo. */
:scope :is([data-holo-surface="Desktop.Store.List"] [data-holo-role="Actions"] > [data-holo-role="Action"], [data-holo-surface="Desktop.Store.Detail.Actions"] > :is([data-holo-role="Button"], button)) [data-holo-role="Icon"]:not(#eos-priority):not(#eos-store) {
  display: grid;
  place-items: center;
  inline-size: auto;
  block-size: auto;
  min-inline-size: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  font-size: inherit;
}

/* El icono de la ficha (de una app o de un proyecto del portfolio) es
   protagonista: grande y sin placa (Martín, 9-10). */
:scope [data-holo-surface="Desktop.Store.Detail.Icon"][data-holo-type]:not(#eos-priority):not(#eos-store) {
  --holo-part-width: 120px;
  --holo-part-height: 120px;
  --holo-part-inline-size: 120px;
  --holo-part-block-size: 120px;
  inline-size: 120px;
  block-size: 120px;
  max-inline-size: none;
  max-block-size: none;
  padding: 0;
  border-radius: 28px;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(30, 30, 80, .16));
}

:scope [data-holo-surface="Desktop.Store.Identity"]:not(#eos-priority):not(#eos-store) {
  --holo-part-grid-template-columns: 120px 20px minmax(0, 1fr) 20px auto;
  grid-template-columns: 120px 20px minmax(0, 1fr) 20px auto;
}

/* En la ficha de un proyecto las tecnologías son muchas: dos columnas. */
:scope [data-holo-surface="Desktop.Store"]:has([data-holo-surface="Desktop.Project.Outside"]) [data-holo-surface="Desktop.Store.Features.List"]:not(#eos-priority):not(#eos-store) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.2rem;
  row-gap: .2rem;
}

/* La vista previa de un proyecto: el marco llena su caja, cuyo alto declara
   la mesa (Window.Detail.Preview.Project). */
:scope [data-holo-surface="Desktop.Store.Preview.Container"] > [data-holo-surface="Desktop.Project.Frame"][data-holo-presentation="Preview"]:not(#eos-priority):not(#eos-store) {
  align-self: stretch;
  justify-self: stretch;
  --holo-part-height: 100%;
  --holo-part-block-size: 100%;
  --holo-part-max-block-size: none;
  --holo-part-max-height: none;
}

/* Apps (Martín, 9-10): el buscador es una píldora con un solo borde (la
   etiqueta que lo envuelve ya no pinta su propio fondo) y se va con la lista
   al desplazarse: desplaza toda la columna, no sólo la rejilla. */
:scope :is([data-holo-surface="Desktop.Apps.Search"][data-holo-role="Field"], [data-holo-surface="Desktop.Apps.Search"] [data-holo-role="Field"]):not(#eos-priority):not(#eos-store) {
  background: transparent;
  border-radius: 999px;
}
:scope [data-holo-surface="Desktop.Apps.Search"] [data-holo-role="Input"]:not(#eos-priority):not(#eos-store) {
  border-radius: 999px;
}
:scope [data-holo-surface="Desktop.Apps.Main"]:not(#eos-priority):not(#eos-store) {
  overflow-y: auto;
  --holo-part-overflow: hidden auto;
  --holo-part-grid-template-rows: max-content 16px max-content;
  scrollbar-width: thin;
}
:scope [data-holo-surface="Desktop.Apps.Grid"]:not(#eos-priority):not(#eos-store) {
  overflow: visible;
  --holo-part-overflow: visible;
  --holo-part-height: auto;
  --holo-part-block-size: auto;
  --holo-part-max-block-size: none;
}

/* Apps respira (Martín, 9-10): entradas de la barra lateral más altas; el
   margen de la barra y de la columna lo declara su Layout (Inset). */
:scope [data-holo-surface="Desktop.Apps.Categories"]:not(#eos-priority):not(#eos-store) {
  --holo-part-gap: .6rem;
  gap: .6rem;
}
:scope [data-holo-surface="Desktop.Apps.Categories"] > button:not(#eos-priority):not(#eos-store) {
  min-block-size: 4.6rem;
  padding-inline: 1.8rem;
}

/* La ficha de un proyecto se recorre desplazándose: su vista previa no se
   limita al alto de la pantalla; el alto lo declara la mesa. */
:scope [data-holo-surface="Desktop.Store"]:has([data-holo-surface="Desktop.Project.Outside"]) [data-holo-surface="Desktop.Store.Preview.Container"]:not(#eos-priority):not(#eos-store) {
  --holo-part-max-block-size: none;
  --holo-part-max-height: none;
}

/* Abierta, la web de un proyecto llega a los bordes de la ventana: el relleno
   de la ficha dejaba dos bandas blancas a los lados (Martín, 9-10). */
:scope [data-holo-surface="Desktop.Store"]:has([data-holo-surface="Desktop.Project.Frame"][data-holo-presentation="Default"]) [data-holo-surface="Desktop.Store.Content"]:not(#eos-priority):not(#eos-store) {
  padding: 0;
}

/* «Abrir <proyecto>» lleva su cohete y, al pasar por encima, una luz que
   cruza la píldora y el cohete que avanza un poco hacia la derecha; nada se
   eleva ni crece (Martín, 9-10). */
:scope [data-holo-type="Layout.Window"] [data-holo-surface="Desktop.Store.Detail.Run"][data-holo-type="Navigation.Action.Bar"] > [data-holo-role="Button"]:not(#eos-priority):not(#eos-store) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  gap: .9rem;
  padding-inline: 2.4rem 2.8rem;
}
:scope [data-holo-type="Layout.Window"] [data-holo-surface="Desktop.Store.Detail.Run"][data-holo-type="Navigation.Action.Bar"] > [data-holo-role="Button"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .7s cubic-bezier(.2, .8, .2, 1);
  pointer-events: none;
}
:scope [data-holo-type="Layout.Window"] [data-holo-surface="Desktop.Store.Detail.Run"][data-holo-type="Navigation.Action.Bar"] > [data-holo-role="Button"]:is(:hover, :focus-visible)::after {
  transform: translateX(120%);
}
:scope [data-holo-type="Layout.Window"] [data-holo-surface="Desktop.Store.Detail.Run"][data-holo-type="Navigation.Action.Bar"] > [data-holo-role="Button"] [data-holo-role="Icon"] {
  font-size: 1.9rem;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
:scope [data-holo-type="Layout.Window"] [data-holo-surface="Desktop.Store.Detail.Run"][data-holo-type="Navigation.Action.Bar"] > [data-holo-role="Button"]:is(:hover, :focus-visible) [data-holo-role="Icon"] {
  transform: translateX(.3rem);
}
@media (prefers-reduced-motion: reduce) {
  :scope [data-holo-type="Layout.Window"] [data-holo-surface="Desktop.Store.Detail.Run"][data-holo-type="Navigation.Action.Bar"] > [data-holo-role="Button"]::after { transition: none; }
  :scope [data-holo-type="Layout.Window"] [data-holo-surface="Desktop.Store.Detail.Run"][data-holo-type="Navigation.Action.Bar"] > [data-holo-role="Button"] [data-holo-role="Icon"] { transition: none; }
}

/* La descripción de un proyecto se lee entera, con sus dos párrafos
   (Martín, 9-10: «dale una descripción más larga»). */
:scope [data-holo-surface="Desktop.Store"]:has([data-holo-surface="Desktop.Project.Outside"]) [data-holo-surface="Desktop.Store.About.Text"]:not(#eos-priority):not(#eos-store) {
  max-block-size: none;
  --holo-part-max-block-size: none;
  --holo-part-max-height: none;
  overflow: visible;
  --holo-part-overflow: visible;
  white-space: pre-line;
  line-height: 1.6;
}

/* ------------------------------------------------------------------------
   Ficha de proyecto · jerarquía de la referencia ideal (Visual/Evidence/
   Improve, serie Eos/Portfolio/Project rev 2, run 7). La referencia agranda
   título, subtítulo, encabezados, descripción y tecnologías; se toman sus
   tamaños y se conservan los pesos de la tipografía de Martín (títulos en
   Ginora Sans, texto en Open Sans Light). Sólo en ventanas anchas: en el
   móvil manda su propia regla.
   ------------------------------------------------------------------------ */
@container eos-app (min-width: 52rem) {
  :scope [data-holo-surface="Desktop.Store"]:has([data-holo-surface="Desktop.Project.Outside"]) [data-holo-surface="Desktop.Store.Detail.Title"] [data-holo-role="Title"]:not(#eos-priority):not(#eos-store) {
    font-size: 4rem;
    line-height: 1.1;
  }

  :scope [data-holo-surface="Desktop.Store"]:has([data-holo-surface="Desktop.Project.Outside"]) [data-holo-surface="Desktop.Store.Detail.Summary"]:not(#eos-priority):not(#eos-store) {
    font-size: 1.8rem;
  }

  :scope [data-holo-surface="Desktop.Store"]:has([data-holo-surface="Desktop.Project.Outside"]) [data-holo-surface="Desktop.Project.Outside"]:not(#eos-priority):not(#eos-store) {
    font-size: 1.5rem;
  }

  :scope [data-holo-surface="Desktop.Store"]:has([data-holo-surface="Desktop.Project.Outside"]) :is([data-holo-surface="Desktop.Store.About.Title"], [data-holo-surface="Desktop.Store.Features.Title"]):not(#eos-priority):not(#eos-store),
  :scope [data-holo-surface="Desktop.Store"]:has([data-holo-surface="Desktop.Project.Outside"]) :is([data-holo-surface="Desktop.Store.About.Title"], [data-holo-surface="Desktop.Store.Features.Title"]) [data-holo-role="Title"]:not(#eos-priority):not(#eos-store) {
    font-size: 2rem;
  }

  :scope [data-holo-surface="Desktop.Store"]:has([data-holo-surface="Desktop.Project.Outside"]) [data-holo-surface="Desktop.Store.About.Text"]:not(#eos-priority):not(#eos-store) {
    font-size: 1.5rem;
    line-height: 1.55;
  }

  :scope [data-holo-surface="Desktop.Store"]:has([data-holo-surface="Desktop.Project.Outside"]) [data-holo-surface="Desktop.Store.Features.List"] > [data-holo-role="Item"] [data-holo-role="Title"]:not(#eos-priority):not(#eos-store) {
    font-size: 1.5rem;
  }

  :scope [data-holo-surface="Desktop.Store"]:has([data-holo-surface="Desktop.Project.Outside"]) [data-holo-surface="Desktop.Store.Features.List"] > [data-holo-role="Item"] [data-holo-role="Icon"]:not(#eos-priority):not(#eos-store) {
    inline-size: 3.2rem;
    block-size: 3.2rem;
    flex: 0 0 3.2rem;
  }

  :scope [data-holo-type="Layout.Window"] [data-holo-surface="Desktop.Store"]:has([data-holo-surface="Desktop.Project.Outside"]) [data-holo-surface="Desktop.Store.Detail.Run"][data-holo-type="Navigation.Action.Bar"] > [data-holo-role="Button"]:not(#eos-priority):not(#eos-store) {
    min-block-size: 4.6rem;
    padding-inline: 2.8rem;
    font-size: 1.7rem;
  }
}

/* «Para tu escritorio» respira bajo el carrusel (Martín, 9-10: «muy pegado»). */
:scope [data-holo-surface="Desktop.Store.Essentials"]:not(#eos-priority):not(#eos-store) {
  margin-block-start: 2.8rem;
}

/* Toda la ventana es el mismo cristal (Martín, 9-10): la barra lateral y la
   raíz de la Store no añaden otra capa blanca encima; la barra se separa sólo
   con su línea. */
:scope [data-holo-type="Layout.Window"] :is(
  [data-holo-surface="Desktop.Store"],
  [data-holo-surface="Desktop.Store.Sidebar"],
  [data-holo-surface="Desktop.Apps.Sidebar"],
  [data-holo-type="Collection.List"]:has(> [data-holo-control-id^="Tab-"])
):not(#eos-priority):not(#eos-store) {
  background: transparent;
  background-color: transparent;
}

:scope [data-holo-type="Layout.Window"] :is(
  [data-holo-surface="Desktop.Store.Sidebar"],
  [data-holo-surface="Desktop.Apps.Sidebar"],
  [data-holo-type="Collection.List"]:has(> [data-holo-control-id^="Tab-"])
):not(#eos-priority):not(#eos-store) {
  border-inline-end: 1px solid color-mix(in srgb, var(--holo-border) 70%, transparent);
}

/* Campos redondeados (Martín, 9-10: «los inputs en general más redondeaditos
   por los lados»): los de una línea son píldoras y las áreas de texto, suaves. */
:scope :is([data-holo-type="Layout.Window"], [data-holo-part-id="Desktop.Start.Panel"]) input:is([type="text"], [type="search"], [type="email"], [type="password"], [type="url"], [type="tel"], [type="number"], :not([type])):not(#eos-priority):not(#eos-store) {
  border-radius: 999px;
  padding-inline: 1.6rem;
}

:scope [data-holo-type="Layout.Window"] [data-holo-role="Field"] textarea:not([data-holo-role="Input"][hidden]):not(#eos-priority):not(#eos-store) {
  border-radius: 1.6rem;
}

/* Menú de inicio (Martín, 9-10): nace pegado a la barra y al borde izquierdo,
   así que no lleva borde en esos lados (se veía un filo blanco abajo y a la
   izquierda). El submenú de Apps queda pegado al menú (su borde transparente
   sigue siendo el puente del puntero) y deja aire arriba. */
:scope [data-holo-part-id="Desktop.Start"] > [data-holo-role="Surface"]:not(#eos-priority):not(#eos-store) {
  border-block-end: 0;
  border-inline-start: 0;
  border-color: rgba(255, 255, 255, 0.5);
}

:scope [data-holo-part-id="Desktop.Start.Panel"] [data-holo-role="Cascade"] > [data-holo-role="Submenu"]:not(#eos-priority):not(#eos-store) {
  translate: -1.1rem 0;
  max-block-size: calc(100dvh - 11rem);
}

/* Ajustes: un grupo de la barra lateral (Sonido) enseña sus subsecciones
   sangradas bajo él cuando una está abierta; su flecha dice si está abierto. */
:scope [data-holo-type="Layout.Window"] [data-holo-type="Collection.List"]:has(> [data-holo-control-id^="Tab-"]) > [data-holo-list-row-group]:not(#eos-priority):not(#eos-store) {
  margin-inline-start: 1.6rem;
  inline-size: calc(100% - 1.6rem);
  font-size: 0.95em;
}

:scope [data-holo-type="Layout.Window"] [data-holo-control-id^="Tab-Group-"]::after {
  margin-inline-start: auto;
  content: "\e13a";
  font: 1.2rem/1 "Phosphor-Light";
  opacity: 0.6;
}

:scope [data-holo-type="Layout.Window"] [data-holo-control-id^="Tab-Group-"]:has(+ [data-holo-list-row-group])::after {
  content: "\e136";
}

/* Ajustes: un solo margen lateral, el del área desplazable (Martín, 9-10:
   había tres apilados —área, sección y lista—, 68 px por lado). La ventana es
   un contenedor para que barra lateral y filas se adapten a su anchura. */
:scope [data-holo-type="Layout.Window"] > [data-holo-role="Main"]:has(> [data-holo-type="Layout.Stack"] > [data-holo-presentation="Bar"] > [data-holo-control-id^="Tab-"]):not(#eos-priority) {
  container: eos-settings / inline-size;
}

:scope [data-holo-surface^="Desktop.Settings."][data-holo-surface$=".Viewport"] > [data-holo-surface^="Desktop.Settings."]:not(#eos-priority),
:scope [data-holo-surface="Desktop.Settings.Tune.Styles"]:not(#eos-priority) {
  padding-inline: 0;
}

/* Ventana estrecha: la barra lateral sólo con iconos (el nombre sigue en el
   árbol accesible) y cada evento en dos líneas: icono y nombre arriba,
   selector y altavoz debajo. */
@container eos-settings (max-width: 64rem) {
  :scope [data-holo-type="Layout.Window"] [data-holo-type="Layout.Stack"]:has(> [data-holo-presentation="Bar"] > [data-holo-control-id^="Tab-"]):not(#eos-priority) {
    --eos-sidebar-width: 6.2rem;
  }

  :scope [data-holo-type="Layout.Window"] [data-holo-type="Layout.Stack"] > [data-holo-type="Collection.List"][data-holo-presentation="Bar"]:has(> [data-holo-control-id^="Tab-"]) > [data-holo-role="Item"]:not(#eos-priority) {
    justify-content: center;
    padding: 0;
    margin-inline-start: 0;
    inline-size: 100%;
  }

  :scope [data-holo-type="Layout.Window"] [data-holo-type="Layout.Stack"] > [data-holo-type="Collection.List"][data-holo-presentation="Bar"]:has(> [data-holo-control-id^="Tab-"]) > [data-holo-role="Item"] > [data-holo-role="Main"]:not(#eos-priority) {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  :scope [data-holo-type="Layout.Window"] [data-holo-control-id^="Tab-Group-"]:not(#eos-priority)::after {
    content: none;
  }

  :scope [data-holo-type="Layout.Window"] [data-holo-type="Collection.List"]:has(> [data-holo-control-id^="Tab-"]) > [data-holo-list-row-group]:not(#eos-priority):not(#eos-store) {
    margin-inline-start: 0;
    inline-size: 100%;
    font-size: .85em;
  }

  :scope [data-holo-type="Layout.Window"] [data-holo-type="Layout.Stack"] > [data-holo-type="Collection.List"][data-holo-presentation="Bar"]:has(> [data-holo-control-id^="Tab-"]) ~ *:not(#eos-priority) {
    padding-inline: 1.4rem;
  }

  :scope [data-holo-surface="Desktop.Settings.Events.Row"]:not(#eos-priority) {
    --holo-part-grid-template-columns: 3.4rem 1.2rem minmax(0, 1fr) 1.2rem 3.6rem;
    --holo-part-grid-template-rows: auto auto;
    row-gap: .6rem;
    padding-block: .8rem;
  }

  :scope [data-holo-surface="Desktop.Settings.Events.Row"] > [data-holo-surface="Desktop.Settings.Events.Name"]:not(#eos-priority) {
    --holo-part-grid-column: 3 / -1;
    --holo-part-grid-row: 1;
  }

  :scope [data-holo-surface="Desktop.Settings.Events.Row"] > [data-holo-type="Control.Select"]:not(#eos-priority) {
    --holo-part-grid-column: 1 / 4;
    --holo-part-grid-row: 2;
  }

  :scope [data-holo-surface="Desktop.Settings.Events.Row"] > [data-holo-surface="Desktop.Settings.Events.Play"]:not(#eos-priority) {
    --holo-part-grid-column: 5;
    --holo-part-grid-row: 2;
  }

  :scope [data-holo-surface="Desktop.Settings.Events.Row"] > [data-holo-type="Control.Select"]:not(#eos-priority) {
    justify-self: stretch;
    inline-size: auto;
    --holo-part-inline-size: auto;
    --holo-part-width: auto;
  }

  :scope [data-holo-surface="Desktop.Settings.Events.Row"] [data-holo-type="Control.Select"] > [data-holo-select-trigger]:not(#eos-priority) {
    min-inline-size: 0;
    inline-size: 100%;
  }
}

/* El altavoz en el centro de su círculo: la fila de Holo reserva columnas
   para icono y texto, y aquí el texto sólo es accesible. */
:scope [data-holo-surface="Desktop.Settings.Events.Play"] > [data-holo-role="Item"]:not(#eos-priority) {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}

:scope [data-holo-surface="Desktop.Settings.Events.Play"] > [data-holo-role="Item"] > [data-holo-role="Icon"]:not(#eos-priority),
:scope [data-holo-surface="Desktop.Settings.Events.Play"] > [data-holo-role="Item"] > [data-holo-role="Icon"] > [data-holo-role="IconVisual"]:not(#eos-priority) {
  grid-column: 1;
  place-items: center;
  inline-size: 1.9rem;
  block-size: 1.9rem;
  margin: 0;
}

/* El desplegable del sonido de un evento, con la letra del propio selector. */
:scope [data-holo-surface="Desktop.Settings.Events.Row"] [data-holo-type="Control.Select"] > [data-holo-role="Dropdown"]:not(#eos-priority) {
  font-size: 1.4rem;
}

/* Ajustes › Autoarranque: cada aplicación elegida en una fila con su icono
   pequeño y un botón redondo para quitarla; debajo, el selector para añadir. */
:scope [data-holo-surface="Desktop.Settings.Startup.Row"]:not(#eos-priority) {
  min-block-size: 4.8rem;
  padding-block: .5rem;
  border-block-end: 1px solid color-mix(in srgb, var(--holo-border) 70%, transparent);
}

:scope [data-holo-surface="Desktop.Settings.Startup.Icon"]:not(#eos-priority),
:scope [data-holo-surface="Desktop.Settings.Startup.Icon"] img:not(#eos-priority) {
  inline-size: 3.2rem;
  block-size: 3.2rem;
  max-inline-size: 3.2rem;
  --holo-part-inline-size: 3.2rem;
  --holo-part-block-size: 3.2rem;
  --holo-part-width: 3.2rem;
  --holo-part-height: 3.2rem;
  object-fit: contain;
}

/* Sin aplicación elegida todavía, el selector no enseña un icono vacío. */
:scope [data-holo-surface="Desktop.Settings.Startup.Add"] > [data-holo-select-trigger] [data-holo-role="Icon"]:not(#eos-priority) {
  display: none;
}

:scope [data-holo-surface="Desktop.Settings.Startup.Glyph"]:not(#eos-priority) {
  display: grid;
  place-items: center;
  inline-size: 3.2rem;
  block-size: 3.2rem;
  border-radius: 1rem;
  background: color-mix(in srgb, var(--holo-accent) 13%, transparent);
  color: var(--holo-accent);
  font-size: 1.8rem;
}

:scope [data-holo-surface="Desktop.Settings.Startup.Name"]:not(#eos-priority) {
  color: var(--holo-fg);
  font-size: 1.45rem;
}

:scope [data-holo-surface="Desktop.Settings.Startup.Empty"]:not(#eos-priority) {
  color: var(--eos-muted);
  font-size: 1.4rem;
}

:scope [data-holo-surface="Desktop.Settings.Startup.Remove"]:not(#eos-priority) {
  inline-size: auto;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

:scope [data-holo-surface="Desktop.Settings.Startup.Remove"] > [data-holo-role="Item"]:not(#eos-priority) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  inline-size: 3.2rem;
  min-inline-size: 0;
  max-inline-size: 3.2rem;
  block-size: 3.2rem;
  padding: 0;
  border: 1px solid var(--holo-border);
  border-radius: 50%;
  background: color-mix(in srgb, var(--holo-panel, #fff) 70%, transparent);
  color: var(--eos-muted);
  font-size: 1.5rem;
}

:scope [data-holo-surface="Desktop.Settings.Startup.Remove"] > [data-holo-role="Item"]:is(:hover, :focus-visible):not(#eos-priority) {
  border-color: color-mix(in srgb, #d23 40%, transparent);
  color: #c22;
}

:scope [data-holo-surface="Desktop.Settings.Startup.Remove"] > [data-holo-role="Item"] > [data-holo-role="Icon"]:not(#eos-priority),
:scope [data-holo-surface="Desktop.Settings.Startup.Remove"] > [data-holo-role="Item"] > [data-holo-role="Icon"] > [data-holo-role="IconVisual"]:not(#eos-priority) {
  grid-column: 1;
  place-items: center;
  inline-size: 1.6rem;
  block-size: 1.6rem;
  margin: 0;
}

:scope [data-holo-surface="Desktop.Settings.Startup.Remove"] > [data-holo-role="Item"] > [data-holo-role="Main"]:not(#eos-priority) {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

:scope [data-holo-surface="Desktop.Settings.Startup.Add"]:not(#eos-priority) {
  margin-block-start: 1.2rem;
}

:scope [data-holo-surface="Desktop.Settings.Startup.Add"] > [data-holo-select-trigger]:not(#eos-priority) {
  min-inline-size: 22rem;
  min-block-size: 3.6rem;
  padding: .4rem 1rem .4rem 1.2rem;
  justify-content: space-between;
  border-radius: 1rem;
  font-size: 1.35rem;
}

/* Ajustes › Escritorio: el aviso que confirma ordenar los iconos. Un diálogo
   de cristal con su texto y dos botones a la derecha: cancelar, discreto, y
   ordenar, con el acento. */
:scope [data-holo-surface="Desktop.Settings.Confirm"] > [data-holo-role="Dialog"]:not(#eos-priority) {
  inline-size: min(46rem, 100%);
  padding: 2.4rem 2.4rem 2rem;
  border: 1px solid var(--eos-glass-edge, rgba(255, 255, 255, .75));
  border-radius: 1.8rem;
  background: linear-gradient(rgba(252, 253, 255, .97), rgba(246, 249, 253, .95));
  -webkit-backdrop-filter: var(--eos-glass);
  backdrop-filter: var(--eos-glass);
  box-shadow: 0 1.6rem 4rem rgba(20, 40, 64, .24);
}

:scope [data-holo-surface="Desktop.Settings.Confirm"] > [data-holo-role="Dialog"] > [data-holo-role="Close"]:not(#eos-priority) {
  position: absolute;
  inset: 1.2rem 1.2rem auto auto;
}

:scope [data-holo-surface="Desktop.Settings.Confirm"] > [data-holo-role="Dialog"] > [data-holo-role="Main"]:not(#eos-priority) {
  row-gap: 1rem;
}

:scope [data-holo-surface="Desktop.Settings.Confirm.Title"] [data-holo-role="Title"]:not(#eos-priority) {
  padding-inline-end: 3.6rem;
  color: var(--holo-fg);
  font-size: 1.9rem;
  font-weight: 600;
}

:scope [data-holo-surface="Desktop.Settings.Confirm.Text"]:not(#eos-priority) {
  color: var(--eos-muted);
  font-size: 1.4rem;
  line-height: 1.5;
}

:scope [data-holo-surface="Desktop.Settings.Confirm.Choices"]:not(#eos-priority) {
  justify-content: flex-end;
  gap: .8rem;
  margin-block-start: .8rem;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

:scope [data-holo-surface="Desktop.Settings.Confirm.Choices"] > [data-holo-role="Item"]:not(#eos-priority) {
  flex: none;
  inline-size: auto;
  max-inline-size: none;
  min-block-size: 3.8rem;
  padding: 0 1.8rem;
  border: 1px solid var(--holo-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--holo-panel, #fff) 80%, transparent);
  color: var(--holo-fg);
  font-size: 1.4rem;
}

:scope [data-holo-surface="Desktop.Settings.Confirm.Choices"] > [data-holo-role="Item"] [data-holo-role="Main"]:not(#eos-priority) {
  overflow: visible;
  white-space: nowrap;
}

:scope [data-holo-surface="Desktop.Settings.Confirm.Choices"] > [data-holo-list-row-id="Confirm-Arrange"]:not(#eos-priority) {
  border-color: transparent;
  background: var(--holo-accent);
  color: #fff;
}

:scope [data-holo-surface="Desktop.Settings.Confirm.Choices"] > [data-holo-list-row-id="Confirm-Arrange"]:is(:hover, :focus-visible):not(#eos-priority) {
  background: color-mix(in srgb, var(--holo-accent) 86%, #000);
}

/* Portada (Intro): un escenario como la imagen de referencia. La barra de
   cristal con la marca y «Entrar», el titular con sus dos puertas a la
   izquierda, el escritorio real dentro de un portátil a la derecha y tres
   tarjetas de cristal al pie. Todo en `rem`: la raíz escala con el viewport
   para que la escena quepa entera; en estrecho se apila y desplaza. */
:scope:has([data-holo-part-id="Intro.Page"]) {
  font-size: clamp(5px, min(calc(100vh / 90), calc(100vw / 178)), 13px);
}

:scope [data-holo-part-id="Intro.Page"]:not(#eos-priority) {
  box-sizing: border-box;
  inline-size: 100%;
  --holo-part-inline-size: 100%;
  --holo-part-width: 100%;
  block-size: 100%;
  min-block-size: 100%;
  overflow-y: auto;
  align-content: space-between;
  padding: 1.8rem 6rem 2.4rem;
  gap: 3rem;
  color: #0f2547;
  /* Un velo claro sobre el fondo, más denso a la izquierda, donde se lee el
     titular: el mismo amanecer lavado de la referencia sin cambiar de foto. */
  background:
    linear-gradient(90deg, rgba(236, 244, 255, 0.84), rgba(236, 244, 255, 0.58) 36%, rgba(236, 244, 255, 0.08) 64%),
    linear-gradient(180deg, rgba(236, 244, 255, 0.3), transparent 30%, transparent 70%, rgba(236, 244, 255, 0.34));
  text-shadow: none;
}

:scope [data-holo-part-id="Intro.Page"] * {
  text-shadow: none;
}

:scope [data-holo-part-id="Intro.Bar"]:not(#eos-priority) {
  box-sizing: border-box;
  justify-content: space-between;
  block-size: 7.4rem;
  padding: 0 2.6rem 0 4rem;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--eos-radius-pill);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.24));
  -webkit-backdrop-filter: var(--eos-glass);
  backdrop-filter: var(--eos-glass);
  box-shadow: 0 1rem 3rem rgba(20, 60, 120, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

:scope [data-holo-part-id="Intro.Brand"]:not(#eos-priority) {
  inline-size: auto;
  --holo-part-inline-size: auto;
  --holo-part-width: auto;
  margin: 0;
  color: #1d3a6b;
  font-size: 3.6rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1;
}

/* Las tres píldoras de acción: azul para entrar y para la invitación,
   cristal claro para la demo. Al pasar sólo cambia el brillo. */
:scope :is([data-holo-part-id="Intro.Enter"], [data-holo-part-id="Intro.Invite"], [data-holo-part-id="Intro.Demo"]):not(#eos-priority) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  box-sizing: border-box;
  border: 1px solid var(--eos-button-primary-border);
  border-radius: var(--eos-radius-pill);
  background: var(--eos-button-primary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0.6rem 1.8rem rgba(30, 110, 240, 0.32);
  color: #ffffff;
  font-weight: 500;
  cursor: pointer;
  transition: filter 0.16s ease;
}

:scope [data-holo-part-id="Intro.Enter"]:not(#eos-priority) {
  min-block-size: 4.8rem;
  padding: 0 4.4rem;
  font-size: 1.9rem;
}

:scope :is([data-holo-part-id="Intro.Invite"], [data-holo-part-id="Intro.Demo"]):not(#eos-priority) {
  block-size: 6.6rem;
  --holo-part-block-size: 6.6rem;
  --holo-part-height: 6.6rem;
  min-block-size: 6.6rem;
  padding: 0 3.6rem;
  font-size: 2.2rem;
}

:scope [data-holo-part-id="Intro.Demo"]:not(#eos-priority) {
  border-color: rgba(255, 255, 255, 0.8);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.36));
  -webkit-backdrop-filter: var(--eos-glass);
  backdrop-filter: var(--eos-glass);
  box-shadow: 0 0.6rem 1.8rem rgba(20, 60, 120, 0.12);
  color: #1d3a6b;
}

:scope :is([data-holo-part-id="Intro.Enter"], [data-holo-part-id="Intro.Invite"], [data-holo-part-id="Intro.Demo"]):is(:hover, :focus-visible):not(#eos-priority) {
  filter: brightness(1.08);
}

:scope :is([data-holo-part-id="Intro.Invite"], [data-holo-part-id="Intro.Demo"]) [data-holo-role="Icon"] {
  font-size: 2.4rem;
}

:scope [data-holo-part-id="Intro.Demo"] [data-holo-role="Icon"]:not(#eos-priority) {
  display: grid;
  place-items: center;
  inline-size: 3.2rem;
  block-size: 3.2rem;
  border: 1px solid rgba(47, 124, 246, 0.35);
  border-radius: 50%;
  color: #2f7cf6;
  font-size: 1.6rem;
}

:scope [data-holo-part-id="Intro.Hero"]:not(#eos-priority) {
  align-items: center;
  gap: 4rem;
  padding: 3rem 0 0 4rem;
}

:scope [data-holo-part-id="Intro.Copy"]:not(#eos-priority) {
  flex: 0 0 80rem;
  inline-size: 80rem;
  --holo-part-inline-size: 80rem;
  --holo-part-width: 80rem;
  gap: 2.6rem;
}

:scope [data-holo-part-id="Intro.Title"] [data-holo-role="Title"]:not(#eos-priority) {
  margin: 0;
  color: #0f2547;
  font-size: 7.6rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.04;
}

:scope [data-holo-part-id="Intro.Lead"]:not(#eos-priority) {
  max-inline-size: 60rem;
  margin: 0;
  color: rgba(28, 48, 82, 0.74);
  font-size: 2.6rem;
  font-weight: 400;
  line-height: 1.42;
}

:scope [data-holo-part-id="Intro.Actions"]:not(#eos-priority) {
  align-self: flex-start;
  justify-self: start;
  gap: 3rem;
  margin-block-start: 1.4rem;
}

/* El portátil: la captura del escritorio dentro de un marco oscuro con su
   cámara arriba y la base plateada debajo, dibujados con el propio marco. */
:scope [data-holo-part-id="Intro.Shot"]:not(#eos-priority) {
  position: relative;
  flex: 1 1 auto;
  box-sizing: border-box;
  padding: 1.4rem 1.4rem 2rem;
  margin-block-end: 2rem;
  border-radius: 2.6rem 2.6rem 1rem 1rem;
  background: linear-gradient(180deg, #2a2d33, #15171b);
  box-shadow: 0 2.4rem 5rem rgba(10, 30, 60, 0.32), inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

:scope [data-holo-part-id="Intro.Shot"]::before {
  content: "";
  position: absolute;
  inset-block-start: 1.4rem;
  inset-inline-start: 50%;
  inline-size: 9rem;
  block-size: 1.2rem;
  border-radius: 0 0 1rem 1rem;
  background: #15171b;
  transform: translateX(-50%);
}

:scope [data-holo-part-id="Intro.Shot"]::after {
  content: "";
  position: absolute;
  inset-block-start: 100%;
  inset-inline: -6%;
  block-size: 2.4rem;
  border-radius: 0.4rem 0.4rem 2.4rem 2.4rem;
  background: linear-gradient(180deg, #e8ebef, #b9bec6 60%, #8c9199);
  box-shadow: 0 1.6rem 2.4rem rgba(10, 30, 60, 0.28);
}

:scope [data-holo-part-id="Intro.Screen"]:not(#eos-priority) {
  display: block;
  inline-size: 100%;
  block-size: auto;
  margin: 0;
  border-radius: 0.6rem;
}

:scope [data-holo-part-id="Intro.Features"]:not(#eos-priority) {
  gap: 2.4rem;
  margin-block-start: auto;
}

:scope :is([data-holo-part-id="Intro.Desk"], [data-holo-part-id="Intro.Apps"], [data-holo-part-id="Intro.Aura"]):not(#eos-priority) {
  flex: 1 1 0;
  box-sizing: border-box;
  min-block-size: 17.4rem;
  padding: 3.4rem 3.6rem;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 2.4rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.64), rgba(255, 255, 255, 0.42));
  -webkit-backdrop-filter: var(--eos-glass);
  backdrop-filter: var(--eos-glass);
  box-shadow: 0 1.2rem 3rem rgba(20, 60, 120, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

:scope :is([data-holo-part-id="Intro.Desk.Mark"], [data-holo-part-id="Intro.Apps.Mark"], [data-holo-part-id="Intro.Aura.Mark"]):not(#eos-priority) {
  display: grid;
  flex: 0 0 9.6rem;
  place-items: center;
  box-sizing: border-box;
  inline-size: 9.6rem;
  block-size: 9.6rem;
  --holo-part-inline-size: 9.6rem;
  --holo-part-width: 9.6rem;
  --holo-part-block-size: 9.6rem;
  --holo-part-height: 9.6rem;
  max-inline-size: none;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 2.4rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(236, 242, 250, 0.85));
  box-shadow: 0 0.6rem 1.6rem rgba(20, 60, 120, 0.14);
  font-size: 5rem;
}

:scope [data-holo-part-id="Intro.Desk.Mark"] { color: #3b8ff0; }
:scope [data-holo-part-id="Intro.Apps.Mark"] { color: #7d68ee; }

:scope [data-holo-part-id="Intro.Aura.Mark"]:not(#eos-priority) {
  box-sizing: border-box;
  max-inline-size: none;
  padding: 0.8rem;
  object-fit: contain;
  background: linear-gradient(180deg, #e9fbfb, #c5ecef);
}

:scope :is([data-holo-part-id="Intro.Desk.Title"], [data-holo-part-id="Intro.Apps.Title"], [data-holo-part-id="Intro.Aura.Title"]):not(#eos-priority) {
  margin: 0;
  color: #13284a;
  font-size: 2.8rem;
  font-weight: 500;
  line-height: 1.2;
}

:scope :is([data-holo-part-id="Intro.Desk.Text"], [data-holo-part-id="Intro.Apps.Text"], [data-holo-part-id="Intro.Aura.Text"]):not(#eos-priority) {
  margin: 0;
  color: rgba(28, 48, 82, 0.66);
  font-size: 1.9rem;
  line-height: 1.45;
}

:scope :is([data-holo-part-id="Intro.Bar"], [data-holo-part-id="Intro.Hero"], [data-holo-part-id="Intro.Features"]) {
  --holo-enter-y: 1.2rem;
  --holo-enter-scale: 0.985;
  animation: holo-enter calc(var(--eos-time) * 1.6) var(--eos-ease) 60ms both;
}

@media (prefers-reduced-motion: reduce) {
  :scope :is([data-holo-part-id="Intro.Bar"], [data-holo-part-id="Intro.Hero"], [data-holo-part-id="Intro.Features"]) {
    animation: none;
  }
}

/* En estrecho la escena se apila: titular, portátil y tarjetas una debajo
   de otra, a la escala normal y con desplazamiento. */
@media (max-width: 760px) {
  :scope:has([data-holo-part-id="Intro.Page"]) {
    font-size: 6px;
  }

  :scope [data-holo-part-id="Intro.Page"]:not(#eos-priority) {
    padding: 1.8rem 2.4rem 4rem;
  }

  :scope :is([data-holo-part-id="Intro.Hero"], [data-holo-part-id="Intro.Features"]):not(#eos-priority) {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
  }

  :scope [data-holo-part-id="Intro.Copy"]:not(#eos-priority) {
    flex: none;
    inline-size: 100%;
    --holo-part-inline-size: 100%;
    --holo-part-width: 100%;
  }

  :scope [data-holo-part-id="Intro.Actions"]:not(#eos-priority) {
    flex-wrap: wrap;
  }
}

/* La Aura de cada perfil (Bienvenida, `App/Aura/.About/Code/Avatar.js`): el
   filtro lleva la centella al color elegido (tono, saturación y brillo) y
   deja el cuerpo blanco y los trazos negros como están; la altura estira la
   centella desde su ala con `scale`, que se suma a la levitación de Holo sin
   pisarla; los ojos sustituyen sólo la cara de reposo, porque las demás
   expresiones (dormida, confundida) siguen siendo del personaje. Web.js
   copia las variables a la raíz desde `Desktop.Avatar`. */
:scope [data-holo-type="Content.Character.Companion"] :is([data-holo-layer="Centella"], [data-holo-role="CharacterGlow"]) {
  filter: var(--eos-aura-filter, none);
  scale: 1 var(--eos-aura-scale, 1);
  transform-origin: 50% var(--eos-aura-origin, 60%);
}

:scope[data-eos-aura-eyes] [data-holo-type="Content.Character.Companion"] [data-holo-layer="Face"][src$="/Face/Default.png"] {
  content: var(--eos-aura-eyes);
}

/* Bienvenida (App/Welcome): el título del paso centrado y grande y, en su
   propia fila al pie, atrás, seguir, saltar y terminar como píldoras. Los
   fondos y los estilos usan las mismas fichas que Ajustes (`Wallpaper-*`,
   `Style-*`); el primer paso es el editor de Aura en su propia página. */
:scope [data-holo-role="Stack"]:has(> [data-holo-type="Collection.List"] > [data-holo-control-id^="Welcome-"]) > [data-holo-type="Content.Header"] {
  min-block-size: 0;
  padding: 2.4rem 2.4rem 0.4rem;
  border-block-end: 0;
  text-align: center;
}

:scope [data-holo-role="Stack"]:has(> [data-holo-type="Collection.List"] > [data-holo-control-id^="Welcome-"]) > [data-holo-type="Content.Header"] [data-holo-role="Title"] {
  color: var(--holo-fg);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.2;
}

:scope [data-holo-role="Stack"]:has(> [data-holo-type="Collection.List"] > [data-holo-control-id^="Welcome-"]) > [data-holo-type="Content.Header"] [data-holo-role="Text"] {
  color: var(--holo-muted);
  font-size: 1.4rem;
  line-height: 1.4;
}

/* La fila de moverse: empieza en su propia línea, una píldora por casilla. */
:scope [data-holo-type="Collection.List"][data-holo-presentation="IconGrid"] > [data-holo-control-id^="Welcome-"] {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: center;
  justify-content: center;
  gap: 0.8rem;
  min-block-size: 4.4rem;
  margin-block-start: 0.6rem;
  padding: 0 2rem;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: var(--eos-radius-pill);
  background: rgba(255, 255, 255, 0.55);
  color: var(--holo-fg);
}

:scope [data-holo-type="Collection.List"][data-holo-presentation="IconGrid"] > [data-holo-control-id^="Welcome-"]:not([data-holo-control-id="Welcome-Back"] ~ *) {
  grid-column-start: 1;
}

:scope [data-holo-type="Collection.List"][data-holo-presentation="IconGrid"] > :is([data-holo-control-id="Welcome-Next"], [data-holo-control-id="Welcome-Done"]) {
  border-color: var(--eos-button-primary-border);
  background: var(--eos-button-primary);
  color: #ffffff;
}

:scope [data-holo-type="Collection.List"][data-holo-presentation="IconGrid"] > [data-holo-control-id^="Welcome-"]:hover {
  filter: brightness(1.06);
}

:scope [data-holo-type="Collection.List"][data-holo-presentation="IconGrid"] > [data-holo-control-id^="Welcome-"] [data-holo-role="Icon"] {
  display: none;
}

:scope [data-holo-type="Collection.List"][data-holo-presentation="IconGrid"] > [data-holo-control-id^="Welcome-"] [data-holo-role="Title"] {
  font-size: 1.4rem;
  font-weight: 600;
  color: inherit;
}
/* En la bienvenida las fichas de fondo y de estilo son más pequeñas que en
   Ajustes: el paso entero, con su fila de botones, cabe sin desplazarse. */
:scope [data-holo-type="Collection.List"][data-holo-presentation="IconGrid"]:has(> [data-holo-control-id^="Welcome-"]):has(> [data-holo-control-id^="Wallpaper-"]) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.2rem 1.4rem;
  padding: 1rem 3.2rem 1.6rem;
}

:scope [data-holo-type="Collection.List"][data-holo-presentation="IconGrid"]:has(> [data-holo-control-id^="Welcome-"]):has(> [data-holo-control-id^="Style-"]) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem 1.4rem;
  padding: 1rem 3.2rem 1.6rem;
}

:scope [data-holo-type="Collection.List"][data-holo-presentation="IconGrid"]:has(> [data-holo-control-id^="Welcome-"]) > [data-holo-control-id^="Wallpaper-"] [data-holo-role="Icon"] {
  aspect-ratio: 16 / 10;
  block-size: auto;
}

/* Ajustes › Invitaciones: crear y retirar son botones en una fila, no iconos
   de escritorio. Crear es la píldora azul; retirar, cristal con su papelera. */
:scope [data-holo-type="Collection.List"][data-holo-presentation="IconGrid"]:has(> [data-holo-control-id="Invite-Create"]):not(#eos-priority) {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-content: flex-start;
  block-size: auto;
  --holo-part-block-size: auto;
  --holo-part-height: auto;
  min-block-size: 0;
  gap: 1rem;
  padding: 1.6rem 2.4rem 0.8rem;
}

:scope [data-holo-type="Collection.List"][data-holo-presentation="IconGrid"] > [data-holo-control-id^="Invite-"]:not(#eos-priority) {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.8rem;
  inline-size: auto;
  min-block-size: var(--eos-button-medium);
  padding: 0 1.8rem;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: var(--eos-radius-pill);
  background: rgba(255, 255, 255, 0.55);
  color: var(--holo-fg);
}

:scope [data-holo-type="Collection.List"][data-holo-presentation="IconGrid"] > [data-holo-control-id="Invite-Create"]:not(#eos-priority) {
  border-color: var(--eos-button-primary-border);
  background: var(--eos-button-primary);
  color: #ffffff;
}

:scope [data-holo-type="Collection.List"][data-holo-presentation="IconGrid"] > [data-holo-control-id^="Invite-"]:hover {
  filter: brightness(1.06);
}

:scope [data-holo-type="Collection.List"][data-holo-presentation="IconGrid"] > [data-holo-control-id^="Invite-"] [data-holo-role="Icon"]:not(#eos-priority) {
  inline-size: auto;
  block-size: auto;
  font-size: 1.7rem;
  background: transparent;
  box-shadow: none;
  color: inherit;
}

:scope [data-holo-type="Collection.List"][data-holo-presentation="IconGrid"] > [data-holo-control-id^="Invite-"] [data-holo-role="Title"]:not(#eos-priority) {
  font-size: 1.4rem;
  font-weight: 600;
  color: inherit;
  white-space: nowrap;
}