/* Esconde el marker default del <details> */
  .picker > summary::-webkit-details-marker { display: none; }
  .picker > summary { list-style: none; }
  .picker > summary::marker { content: ''; }

  /* Lift: el contenedor entero se "levanta" sutil al abrir */
  .picker {
    transition: box-shadow 280ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .picker[open] {
    box-shadow: 0 12px 32px -8px rgba(28, 36, 60, 0.12),
                0 4px 12px -4px rgba(28, 36, 60, 0.08);
  }

  /* Trigger: bg blanco cerrado, cream-100 abierto (diferencia visual con items) */
  .picker > summary {
    background: #ffffff;
    transition: background-color 240ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .picker[open] > summary {
    background: #F8F4EC; /* cream-100 */
  }

  /* Chevron rota 180° + cambia color navy-400 → gold-600 al abrir.
     Cuando está cerrado, hover sobre summary lo agranda sutil (afordancia pre-click). */
  .picker .picker-chevron {
    color: #94A3B8; /* navy-400 */
    transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
                color 240ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .picker:not([open]) > summary:hover .picker-chevron {
    transform: scale(1.08);
  }
  .picker[open] .picker-chevron {
    transform: rotate(180deg);
    color: #8B6A0A; /* gold-600 */
  }

  /* Panel: fade + slide desde arriba al abrir */
  .picker[open] .picker-panel {
    animation: picker-panel-in 320ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  @keyframes picker-panel-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Items: stagger entrance vertical (filas que aterrizan), 55ms entre cada uno */
  .picker[open] .picker-panel li {
    animation: picker-item-in 380ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
  }
  .picker[open] .picker-panel li:nth-child(1) { animation-delay: 60ms; }
  .picker[open] .picker-panel li:nth-child(2) { animation-delay: 115ms; }
  .picker[open] .picker-panel li:nth-child(3) { animation-delay: 170ms; }
  .picker[open] .picker-panel li:nth-child(4) { animation-delay: 225ms; }
  .picker[open] .picker-panel li:nth-child(5) { animation-delay: 280ms; }
  .picker[open] .picker-panel li:nth-child(6) { animation-delay: 335ms; }
  .picker[open] .picker-panel li:nth-child(7) { animation-delay: 390ms; }
  .picker[open] .picker-panel li:nth-child(8) { animation-delay: 445ms; }
  @keyframes picker-item-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Hover: barra gold lateral aparece desde la izquierda */
  .picker .picker-item { position: relative; }
  .picker .picker-item::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 0;
    background: #C79A20; /* gold-400 */
    transition: width 240ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .picker .picker-item:hover::before,
  .picker .picker-item:focus-visible::before {
    width: 3px;
  }

  /* Hover enriquecido: texto desliza 4px + chevron gold aparece desde la derecha */
  .picker .picker-item-text {
    transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .picker .picker-item-arrow {
    opacity: 0;
    transform: translateX(-4px);
    color: #8B6A0A; /* gold-600 */
    transition: opacity 240ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .picker .picker-item:hover .picker-item-text,
  .picker .picker-item:focus-visible .picker-item-text {
    transform: translateX(4px);
  }
  .picker .picker-item:hover .picker-item-arrow,
  .picker .picker-item:focus-visible .picker-item-arrow {
    opacity: 1;
    transform: translateX(0);
  }

  /* Focus accesible (no se ve el outline default feo) */
  .picker > summary:focus-visible {
    outline: 2px solid #C79A20;
    outline-offset: 3px;
    border-radius: 1.25rem;
  }
  .picker .picker-item:focus-visible {
    outline: none;
    background: #F8F4EC; /* cream-100 */
  }

  /* Reduced motion: respeta preferencia de accesibilidad */
  @media (prefers-reduced-motion: reduce) {
    .picker,
    .picker > summary,
    .picker .picker-chevron,
    .picker .picker-item::before,
    .picker .picker-item-text,
    .picker .picker-item-arrow { transition: none; }
    .picker[open] .picker-panel,
    .picker[open] .picker-panel li { animation: none; }
    .picker .picker-item-arrow { opacity: 1; transform: none; }
  }