/* SIDEBAR — rail de iconos que se expande en overlay al pasar el ratón.
     El contenido NO se reflowea: el rail ocupa siempre --sidebar-w y el panel
     crece por encima con sombra, así el portal nunca "salta". */
  .sidebar-zone{position:fixed;left:0;top:0;height:100vh;width:var(--sidebar-w);z-index:500;}
  .sidebar{
    position:fixed;left:0;top:0;height:100vh;width:var(--sidebar-w);
    background:linear-gradient(180deg,#121216,#0b0b0e);
    border-right:1px solid var(--border);
    padding:22px 10px 16px;
    transition:width .14s cubic-bezier(.3,1,.4,1), box-shadow .14s ease, padding .14s ease;
    display:flex;flex-direction:column;
    overflow-x:hidden;overflow-y:auto;
    /* Sin barra de desplazamiento a la vista: la nativa (pista blanca, flechas y
       pulgar gris) desentonaba y comía 15 px del rail. Sigue deslizándose con la
       rueda, con el dedo y con las flechas del teclado. overscroll contain evita
       que, al llegar al final, el gesto arrastre la página de detrás. */
    scrollbar-width:none;-ms-overflow-style:none;
    overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  }
  .sidebar::-webkit-scrollbar{display:none;width:0;height:0;}
  /* Los bloques no se encogen: si no caben en pantallas bajas, el menú se
     desplaza. Sin esto el pie (overflow:hidden) se aplastaba y quedaba cortado
     sin forma de llegar a Exportar / Cuenta y sincronía. */
  .sidebar>*{flex-shrink:0;}
  .sidebar-zone:hover .sidebar,
  .sidebar-zone.open .sidebar{
    width:var(--sidebar-open-w);
    box-shadow:14px 0 40px rgba(0,0,0,.55);
    padding-left:14px;padding-right:14px;
  }

  /* Marca: colapsada queda solo el hexágono, centrado como los iconos. */
  .sb-brand{display:flex;align-items:center;gap:10px;padding:2px 4px 20px;transition:padding .14s ease;}
  .sb-brand svg{flex:none;}
  .sb-brand-text{
    font-family:var(--font-stat);font-weight:800;font-size:16px;letter-spacing:3px;color:var(--text);
    opacity:0;transition:opacity .12s ease;white-space:nowrap;
  }
  .sidebar-zone:hover .sb-brand,
  .sidebar-zone.open .sb-brand{padding-left:8px;}
  .sidebar-zone:hover .sb-brand-text,
  .sidebar-zone.open .sb-brand-text{opacity:1;}

  .sidebar-title{
    font-size:10.5px;font-weight:700;color:var(--dim2);letter-spacing:2.5px;
    margin:4px 0 12px;padding-left:10px;white-space:nowrap;
    opacity:0;transition:opacity .12s ease;
  }
  .sidebar-zone:hover .sidebar-title,
  .sidebar-zone.open .sidebar-title{opacity:1;}

  /* Grupos del menú: el título solo se lee desplegado; plegado queda una línea
     fina. Alto fijo, así los iconos no se mueven al abrir/cerrar. */
  .sidebar-title{display:none;}
  .sidebar-group{position:relative;height:30px;display:flex;align-items:flex-end;padding:0 10px 5px;margin-top:6px;white-space:nowrap;}
  .sidebar-group:first-child{margin-top:0;}
  .sidebar-group span{font-size:10px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--dim2);
    opacity:0;transition:opacity .12s ease;}
  .sidebar-group:before{content:'';position:absolute;left:12px;right:12px;bottom:12px;height:1px;background:var(--border);
    transition:opacity .12s ease;}
  .sidebar-group:first-child:before{display:none;}
  .sidebar-zone:hover .sidebar-group span,
  .sidebar-zone.open .sidebar-group span{opacity:1;}
  .sidebar-zone:hover .sidebar-group:before,
  .sidebar-zone.open .sidebar-group:before{opacity:0;}

  .sidebar-item{
    position:relative;
    display:flex;align-items:center;gap:13px;width:100%;background:none;border:none;color:var(--dim);
    font-family:inherit;font-size:13.5px;font-weight:600;padding:11px 10px;border-radius:11px;cursor:pointer;
    transition:.18s;text-align:left;margin-bottom:2px;white-space:nowrap;
  }
  .sidebar-item:hover{background:rgba(255,255,255,.045);color:var(--text);}
  /* Reordenar (pulsación larga): el menú levantado destaca, el resto se apaga. */
  .sidebar-item{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
  #sidebarNav.nav-reordering{touch-action:none;}
  #sidebarNav.nav-reordering .sidebar-item{opacity:.55;}
  #sidebarNav .sidebar-item.nav-dragging{opacity:1;background:rgba(255,255,255,.09);color:var(--text);
    transform:scale(1.04);box-shadow:0 6px 18px rgba(0,0,0,.45);cursor:grabbing;z-index:2;}
  /* Activo: el icono se tiñe de rojo y el texto sube a blanco. La barra lateral
     marca la posición sin necesidad de teñir toda la fila. */
  .sidebar-item.active{background:rgba(255,59,59,.10);color:var(--text);}
  .sidebar-item.active .sidebar-icon{opacity:1;color:var(--red);}
  .sidebar-item.active .sidebar-icon svg{filter:drop-shadow(0 0 5px rgba(255,59,59,.55));}
  .sidebar-item.active:before{
    content:'';position:absolute;left:-10px;top:50%;transform:translateY(-50%);
    width:3px;height:20px;border-radius:0 3px 3px 0;background:var(--red);
    box-shadow:0 0 9px rgba(255,59,59,.75);
  }
  .sidebar-zone:hover .sidebar-item.active:before,
  .sidebar-zone.open .sidebar-item.active:before{left:-14px;}

  .sidebar-label{opacity:0;transition:opacity .12s ease;}
  .sidebar-zone:hover .sidebar-label,
  .sidebar-zone.open .sidebar-label{opacity:1;}

  /* Tooltip: resuelve la ambigüedad del icono suelto sin esperar a la expansión. */
  .sidebar-tip{
    position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%) translateX(-4px);
    background:var(--card2);border:1px solid var(--border);color:var(--text);
    font-size:12px;font-weight:600;padding:6px 10px;border-radius:8px;white-space:nowrap;
    box-shadow:0 6px 20px rgba(0,0,0,.5);
    opacity:0;pointer-events:none;transition:opacity .12s ease, transform .12s ease;z-index:10;
  }
  .sidebar-item:hover .sidebar-tip{opacity:1;transform:translateY(-50%) translateX(0);}
  /* Con el panel abierto la etiqueta ya se lee: el tooltip sobra. */
  .sidebar-zone:hover .sidebar-tip,
  .sidebar-zone.open .sidebar-tip{display:none;}

  /* Iconos de trazo: heredan el color del estado, no lo llevan propio.
     El icono es además el ancla del badge. */
  .sidebar-icon{
    position:relative;width:22px;height:22px;flex:none;
    display:flex;align-items:center;justify-content:center;
    color:var(--dim);opacity:.75;transition:.18s;
  }
  .sidebar-item:hover .sidebar-icon{opacity:1;}
  .sidebar-icon svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}

  .sidebar-badge{
    position:absolute;top:-5px;right:-6px;
    background:var(--red);color:#fff;font-family:var(--font-stat);
    font-size:9.5px;font-weight:700;min-width:15px;height:15px;border-radius:8px;
    display:flex;align-items:center;justify-content:center;padding:0 3px;
    border:2px solid #101014;box-shadow:0 0 7px rgba(255,59,59,.7);
  }
  .sidebar-dot{
    position:absolute;top:-2px;right:-3px;
    width:8px;height:8px;border-radius:50%;background:var(--gold);
    border:2px solid #101014;box-shadow:0 0 7px rgba(255,207,77,.8);animation:pulseGlow 1.6s infinite;
  }

  /* Móvil: 230px fijos se comerían la pantalla, así que ahí sigue entrando y
     saliendo por hover/toque. */
  @media(max-width:900px){
    .sidebar-zone{width:14px;}
    .sidebar{transform:translateX(-100%);width:var(--sidebar-open-w);box-shadow:14px 0 40px rgba(0,0,0,.55);transition:transform .25s cubic-bezier(.3,1,.4,1);}
    .sidebar-zone.open .sidebar{transform:translateX(0);}
  }

  /* CYCLE WIDGET */
  .cycle-widget{display:flex;align-items:center;gap:10px;}
  .cycle-widget svg{filter:drop-shadow(0 0 4px rgba(255,59,59,.35));}
  .cycle-widget svg.near-end{filter:drop-shadow(0 0 11px rgba(255,207,77,.75));animation:pulseGlow 1.1s infinite;}
  .cycle-label{font-size:12px;font-weight:700;color:var(--text);}
  .cycle-label b{color:var(--gold);font-size:13px;}
  .cycle-sub{font-size:9.5px;color:var(--dim2);text-transform:uppercase;letter-spacing:.4px;margin-top:1px;}
  .identity-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;}
  .mini-cycle{display:flex;align-items:center;gap:6px;}
  .mini-cycle svg{filter:drop-shadow(0 0 4px rgba(52,211,153,.45));}
  .mini-cycle-label{font-size:11px;font-weight:800;color:var(--green);}

  /* FABS */
  .fab-area{position:fixed;bottom:22px;right:22px;display:flex;align-items:center;gap:12px;z-index:200;}
  .fab-create-wrap{position:relative;}
  .create-menu{position:absolute;bottom:64px;right:0;display:flex;flex-direction:column;align-items:flex-end;gap:8px;}
  .create-menu button{
    opacity:0;transform:translateY(8px) scale(.95);pointer-events:none;transition:.25s;
    background:var(--card2);border:1px solid var(--border);color:var(--text);font-size:12.5px;font-weight:600;
    padding:9px 16px;border-radius:20px;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.4);white-space:nowrap;
  }
  .create-menu.open button{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}
  .create-menu button:hover{border-color:var(--gold);color:var(--gold);}
  .fab{
    width:56px;height:56px;border-radius:50%;border:none;cursor:pointer;font-size:24px;
    display:flex;align-items:center;justify-content:center;color:#fff;
    box-shadow:0 6px 20px rgba(255,59,59,.4);transition:.2s;
  }
  .fab-create{background:linear-gradient(135deg,var(--red),#b71f1f);}
  .fab-create:hover{transform:scale(1.07);}
  .fab-flow{background:linear-gradient(135deg,var(--gold),#c98f00);box-shadow:0 6px 20px rgba(255,207,77,.4);}
  .fab-flow:hover{transform:scale(1.07);}

  /* Pie: filas de ajuste compactas + botones fantasma, sin cajas ni emojis.
     Colapsado no cabe y sus etiquetas se cortarían, así que solo aparece con el
     panel abierto. */
  .sidebar-footer{
    margin-top:auto;border-top:1px solid var(--border);padding-top:12px;
    display:flex;flex-direction:column;gap:8px;
    opacity:0;pointer-events:none;max-height:0;overflow:hidden;transition:opacity .12s ease;
  }
  .sidebar-zone:hover .sidebar-footer,
  .sidebar-zone.open .sidebar-footer{opacity:1;pointer-events:auto;max-height:none;}
  .sb-foot-row{
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    font-size:11px;color:var(--dim);padding:0 10px;
  }
  .sb-foot-row label,.sb-foot-row span{letter-spacing:.4px;}
  .sb-foot-row select{
    background:var(--card2);border:1px solid var(--border);color:var(--text);
    font-size:10.5px;font-family:inherit;font-weight:600;border-radius:8px;padding:4px 6px;cursor:pointer;
  }
  .sb-foot-row select:focus{outline:none;border-color:var(--gold);}
  .sound-toggle-row{cursor:pointer;}
  .sb-ghost-btn{
    display:flex;align-items:center;gap:10px;width:100%;background:none;border:none;
    color:var(--dim2);font-family:inherit;font-size:12px;font-weight:600;
    padding:8px 10px;border-radius:9px;cursor:pointer;transition:.15s;text-align:left;
  }
  .sb-ghost-btn:hover{color:var(--text);background:rgba(255,255,255,.04);}
  .sb-ghost-btn .ic{width:18px;height:18px;flex:none;display:flex;align-items:center;justify-content:center;}
  .sb-ghost-btn .ic svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}

  /* TE ESPERA (Portal) — digest de bucles abiertos, cada uno un atajo. */
  .open-loops-banner{border-color:rgba(124,155,255,.35);background:linear-gradient(180deg,rgba(124,155,255,.08),var(--card));}
  .open-loops-banner.calm{border-color:rgba(52,211,153,.25);background:linear-gradient(180deg,rgba(52,211,153,.05),var(--card));}
  .open-loop-list{display:flex;flex-direction:column;gap:6px;}
  .open-loop-line{
    display:flex;align-items:center;gap:10px;width:100%;
    margin:0;padding:9px 12px;border-radius:12px;cursor:pointer;text-align:left;
    background:rgba(255,255,255,.03);border:1px solid transparent;
    color:var(--text);font-family:inherit;font-size:12.5px;font-weight:600;
    transition:.16s;
  }
  .open-loop-line:hover{background:rgba(124,155,255,.1);border-color:rgba(124,155,255,.35);}
  .open-loop-line:active{transform:scale(.995);}
  /* «Recuerda tu porqué»: el aviso fijo hacia Motivación, en dorado. */
  .open-loop-line.gold{
    background:linear-gradient(90deg,rgba(255,207,77,.16),rgba(255,207,77,.05));
    border-color:rgba(255,207,77,.45);color:#ffd96b;
  }
  .open-loop-line.gold:hover{background:linear-gradient(90deg,rgba(255,207,77,.24),rgba(255,207,77,.09));border-color:var(--gold);}
  .open-loop-line.gold .oll-arrow{color:var(--gold);}
  .open-loop-line.gold:hover .oll-arrow{color:#ffe08a;}
  .oll-icon{font-size:15px;flex:none;line-height:1;}
  .oll-text{flex:1;min-width:0;}
  .oll-arrow{flex:none;color:var(--dim2);font-size:13px;transition:.16s;}
  .open-loop-line:hover .oll-arrow{color:#7c9bff;transform:translateX(3px);}
  /* Estado sin bucles: informativo, no clicable. */
  p.open-loop-line.quiet{
    background:none;border:none;padding:0;color:var(--green);cursor:default;
  }
  /* Redención: nombra lo que sigue en juego, sin miedo ni cuenta atrás. */
  .open-loop-redemption{
    margin:10px 0 0;padding:9px 12px;border-radius:12px;
    background:rgba(52,211,153,.08);border:1px solid rgba(52,211,153,.28);
    font-size:12px;line-height:1.45;color:#7fe3c0;font-weight:600;
  }

  /* Destello al saltar a una tarjeta desde "Te espera". */
  @keyframes focusFlash{
    0%  {box-shadow:0 0 0 0 rgba(124,155,255,.55);}
    30% {box-shadow:0 0 0 4px rgba(124,155,255,.35);}
    100%{box-shadow:0 0 0 0 rgba(124,155,255,0);}
  }
  .focus-flash{animation:focusFlash 1.1s ease-out;}
  @media(prefers-reduced-motion:reduce){.focus-flash{animation:none;}}