@charset "UTF-8";
/* CSS Document */


  :root{
    --bg:#eee;          /* fondo cápsula */
    --fg:#999;          /* iconos/texto */
    --muted:#444444;       /* tooltip/etiquetas */
    --accent:#ffffff;      /* resalte */
    --shadow: 0 10px 30px rgba(0,0,0,.25);
    --size: 40px;          /* diámetro botón */
    --gap: 10px;           /* separación entre botones */
    --pad: 5px;           /* padding interno del rail */
    --rail-w: 65px;        /* ancho del rail cerrado */
    --rail-w-open: 180px;  /* ancho cuando muestra etiquetas */
    --radius: 16px;        /* curvatura del rail */
    --tt-gap: 8px;         /* separación etiqueta */
  }

  /* Reset mínimo */


  /* ===== Rail flotante ===== */
  .rail{
	  position: fixed;
	  right: 12px;                 /* margen lateral */
	  top: 50%; 
	  transform: translateY(-50%);
	  width: var(--rail-w);
    background: var(--bg);
    color: #444;
	  text-decoration: none;
    padding: var(--pad);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: flex; flex-direction: column; align-items: stretch;
    gap: var(--gap);
    z-index: 1000;
    transition: width .25s ease, box-shadow .25s ease;
  }
  .rail:hover,
  .rail:focus-within{
    width: var(--rail-w-open);
    box-shadow: 0 14px 40px rgba(0,0,0,.28);
  }

  /* ===== Botón ===== */
  .rail a{
    display: grid;
    grid-template-columns: var(--size) 1fr;
    align-items: center;
    gap: 10px;
    height: var(--size);
    border-radius: calc(var(--size)/2);
    text-decoration: none;
    color: #444;
    padding: 0 8px;
    outline: none;
  }
  .rail a:focus-visible{
    box-shadow: 0 0 0 3px rgba(51,102,153,.35) inset;
  }
  .rail a:hover{
    background: rgba(255,255,255,.06);
	  color: #444;
	  text-decoration: none;
  }

  /* Icono (SVG) */
  .ico{
    width: var(--size);
    height: var(--size);
    display: grid; place-items: center;
    border-radius: 50%;
    background: transparent;
    transition: background .2s ease, transform .15s ease;
  }
  .rail a:hover .ico{ background: rgba(255,255,255,.06); }
  .rail a:active .ico{ transform: scale(.96); }

  /* Etiqueta (solo visible con hover/foco del rail) */
  .label{
    white-space: nowrap;
    font-size: .9rem;
    color: #444;
	  text-decoration: none;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
  }
  .rail:hover .label,
  .rail:focus-within .label{
    opacity: 1; transform: translateX(0);
	  color: #444;
	  text-decoration: none;
	  text-align: left;
  }

  /* Separador */
  .sep{
    height: 1px; background: rgba(255,255,255,.08);
    margin: 2px 4px;
  }

  .rail a[aria-current="page"] .ico svg{
    filter: drop-shadow(0 0 0 rgba(0,0,0,0));
  }

  /* Motion safe */
  @media (prefers-reduced-motion: reduce){
    .rail, .ico, .label{ transition: none !important; }
  }

  /* Ejemplo de contenido para ver el scroll */
  main{ min-height: 200vh; padding: 40px; }