/* ============================================================================
   Efectos de movimiento de la app. Se carga DESPUES de styles.css y shadcn.css; para
   sacar cualquiera de estos efectos alcanza con quitar el <link> de index.html (cada
   uno tiene su modulo JS, que sigue funcionando sin estos estilos pero se veria roto).

     Accordion .... shadcn/ui    (js/accordion.js)    desplegables hacia abajo
     Glide select . React Bits   (js/glideSelect.js)  todos los <select>
     Swipe Row .... React Bits   (js/swipeRow.js)     archivar solicitudes deslizando
     Toast ........ shadcn/ui    (js/toast.js)        aviso con "Deshacer"
   ============================================================================ */

:root {
  --fx-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --gs-hl: var(--sc-accent, #f5f5f5);
  --gs-surface: var(--bg);
}
html[data-theme="dark"] {
  --gs-hl: rgba(255, 255, 255, 0.1);
  --gs-surface: #1f1f1f;
}

/* ---------------------------------------------------------------------------
   Accordion (shadcn/ui): el titulo se subraya al pasar el mouse, la flecha da media
   vuelta y el panel crece/se pliega (la animacion del alto la hace accordion.js).
   --------------------------------------------------------------------------- */
@media (hover: hover) {
  .dash-collapse-btn:hover > span,
  .sol-details-summary:hover > span,
  .fm-more > summary:hover > span {
    text-decoration: underline;
    text-underline-offset: 4px;
  }
}
.dash-collapse-btn svg,
.sol-details-arrow,
.fm-more-arrow { transition: transform 0.2s ease-out; }

/* "Ver detalles": la flecha sigue el estado logico (.is-open), no el atributo `open`, que
   queda puesto hasta que termina la animacion de cierre. */
.sol-details-toggle[open] .sol-details-arrow { transform: none; }
.sol-details-toggle.is-open .sol-details-arrow { transform: rotate(180deg); }

/* "Más detalles" (agregar turno): ahora con flecha, igual que los otros dos. */
.fm-more > summary {
  display: flex; align-items: center; gap: 6px; list-style: none;
}
.fm-more > summary::-webkit-details-marker { display: none; }
.fm-more-arrow { width: 14px; height: 14px; color: var(--ink-45); flex-shrink: 0; }
.fm-more.is-open .fm-more-arrow { transform: rotate(180deg); }

/* ---------------------------------------------------------------------------
   Glide select (React Bits): el <select> original queda oculto y en su lugar hay un boton
   con el mismo aspecto (copia sus clases: .field, .fm-field...) que abre este menu.
   --------------------------------------------------------------------------- */
.gs-native { display: none !important; }

.gs-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  text-align: left; cursor: pointer; line-height: 1.35;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.gs-trigger:disabled { cursor: not-allowed; }
.gs-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-chevron {
  display: inline-flex; flex-shrink: 0; color: var(--sc-muted-fg, var(--ink-45));
  transition: transform 0.2s var(--fx-ease);
}
.gs-trigger[aria-expanded="true"] .gs-chevron { transform: rotate(180deg); }
/* Abierto, se ve como un campo con foco (anillo de shadcn). */
.gs-trigger[aria-expanded="true"] {
  border-color: var(--sc-ring-solid, var(--ink-45));
  box-shadow: 0 0 0 3px var(--sc-ring, rgba(0, 0, 0, 0.15));
}
/* El texto nuevo entra con un desenfoque breve al elegir otra opcion. */
.gs-trigger[data-swap] .gs-label { animation: gs-swap 160ms ease; }
@keyframes gs-swap { from { opacity: 0.6; filter: blur(2px); } }

.gs-menu {
  position: fixed; z-index: 1200; box-sizing: border-box;
  display: flex; flex-direction: column;
  max-width: min(92vw, 28rem);
  padding: 4px;
  border-radius: calc(var(--sc-radius, 8px) + 2px);
  background: var(--gs-surface);
  color: var(--ink);
  border: 1px solid var(--sc-border, var(--ink-15));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.08);
  opacity: 0; transform: scale(0.95);
  transition: opacity 180ms var(--fx-ease), transform 180ms var(--fx-ease);
}
.gs-menu[data-state="open"] { opacity: 1; transform: none; }
.gs-menu[data-state="closed"] { transition-duration: 120ms; pointer-events: none; }

.gs-list {
  position: relative; display: grid; gap: 1px; flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  touch-action: none; scrollbar-width: thin;
}
.gs-list[data-scroll="1"] { touch-action: pan-y; }

/* La pastilla que se desliza de opcion en opcion. */
.gs-pill {
  position: absolute; top: 0; left: 0; right: 0; height: 36px;
  border-radius: var(--sc-radius, 8px);
  background: var(--gs-hl);
  opacity: 0; pointer-events: none;
  transition: transform 220ms var(--fx-ease), opacity 150ms ease;
}
.gs-option {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 8px 0 10px;
  border-radius: var(--sc-radius, 8px);
  font-size: 14px; cursor: pointer;
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.gs-option[aria-selected="true"] { background: color-mix(in srgb, var(--gs-hl) 60%, transparent); }
.gs-list[data-live] .gs-option[aria-selected="true"] { background: transparent; }
.gs-option[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.gs-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.gs-check { display: inline-flex; flex-shrink: 0; visibility: hidden; }
.gs-option[aria-selected="true"] .gs-check { visibility: visible; }

/* ---------------------------------------------------------------------------
   Swipe Row (React Bits): la fila se desliza hacia la izquierda y deja ver la accion.
   Capas: clip (recorta y redondea) > rail (la accion, atras) > surface (la tarjeta, adelante).
   --------------------------------------------------------------------------- */
.swipe-row {
  --sr-a: 88px;
  --sr-r: calc(var(--sc-radius, 8px) + 2px);
  --sr-action: var(--sc-primary, #171717);
  --sr-on-action: var(--sc-primary-fg, #fafafa);
  --sr-collapse: 200ms;
  position: relative; overflow: hidden;
  transition: height var(--sr-collapse) var(--fx-ease), margin-bottom var(--sr-collapse) var(--fx-ease), opacity var(--sr-collapse) var(--fx-ease);
}
/* Plegada: el alto se va a 0 y se descuenta el espacio (gap) de la lista para que no
   quede un hueco. */
.swipe-row[data-phase="collapsing"] { height: 0 !important; margin-bottom: -8px !important; opacity: 0; }

.swipe-row__clip { position: relative; border-radius: var(--sr-r); overflow: hidden; background: var(--bg); }
.swipe-row__rail { position: absolute; inset: 0; background: var(--sr-action); will-change: transform; }
.swipe-row__block {
  position: absolute; top: 0; left: calc(100% - var(--sr-a));
  width: 100%; height: 100%;
  background: var(--sr-action); will-change: transform;
}
.swipe-row__action {
  position: absolute; top: 0; left: 0;
  display: grid; place-items: center;
  width: var(--sr-a); height: 100%; margin: 0; padding: 0;
  border: 0; background: transparent; color: var(--sr-on-action);
  font: inherit; cursor: pointer; outline: none;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  will-change: transform;
}
.swipe-row__glyph {
  display: grid; justify-items: center; gap: 4px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.01em; line-height: 1;
  transition: transform 160ms var(--fx-ease);
}
.swipe-row__action:active .swipe-row__glyph { transform: scale(0.97); }
.swipe-row__icon { display: inline-flex; }

.swipe-row__surface {
  position: relative; z-index: 1;
  background: var(--bg);
  touch-action: pan-y;            /* el scroll vertical sigue siendo del navegador */
  -webkit-touch-callout: none;
  will-change: transform;
}
/* Todos los hijos declaran lo mismo: no depende de como cada navegador herede touch-action. */
.swipe-row__surface * { touch-action: pan-y; }
.swipe-row[data-dragging] .swipe-row__surface,
.swipe-row[data-dragging] .swipe-row__surface * { user-select: none; -webkit-user-select: none; }
@media (pointer: coarse) {
  .swipe-row__surface { user-select: none; -webkit-user-select: none; }
}

/* Boton invisible para usar la fila con teclado (aparece al enfocarlo). */
.swipe-row__toggle {
  position: absolute; top: 50%; right: 12px;
  width: 1px; height: 1px; margin: 0; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%);
  background: transparent; color: var(--ink); font: inherit; outline: none;
}
.swipe-row__toggle:focus-visible {
  width: auto; height: 24px; padding: 0 10px; border-radius: 12px;
  overflow: visible; clip-path: none; white-space: nowrap; font-size: 12px;
  background: color-mix(in srgb, var(--ink) 12%, transparent);
  transform: translateY(-50%); box-shadow: none;
}
.swipe-row__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* La tarjeta ocupa toda la fila y ya no necesita su propio margen. */
.swipe-row .sol-card { margin: 0; }

/* ---------------------------------------------------------------------------
   Toast (aviso con "Deshacer")
   --------------------------------------------------------------------------- */
.toast {
  position: fixed; left: 50%; z-index: 1300;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 84px);
  display: flex; align-items: center; gap: 14px;
  max-width: min(92vw, 420px);
  padding: 10px 14px;
  border-radius: calc(var(--sc-radius, 8px) + 2px);
  background: var(--sc-primary, #171717); color: var(--sc-primary-fg, #fafafa);
  font-size: 13px; font-weight: 500;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  opacity: 0; transform: translate(-50%, 12px);
  transition: opacity 200ms var(--fx-ease), transform 200ms var(--fx-ease);
}
.toast[data-state="open"] { opacity: 1; transform: translate(-50%, 0); }
.toast[data-state="closing"] { opacity: 0; transform: translate(-50%, 8px); }
@media (min-width: 900px) { .toast { bottom: 28px; } }
.toast-action {
  flex-shrink: 0; background: none; border: none; padding: 2px 0; cursor: pointer;
  font: inherit; font-weight: 700; color: inherit; text-decoration: underline; text-underline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   Ficha de una solicitud en mobile: sube desde abajo hasta ocupar la pantalla ("slide up") y
   baja al cerrarla (la clase sheet-leave la pone closeDetail en solicitudes.js). El fondo
   oscuro de la hoja se desvanece aparte, asi se ve la lista por detras mientras sube.
   --------------------------------------------------------------------------- */
@keyframes solSlideUp { from { transform: translateY(100%); } to { transform: none; } }
@keyframes solSlideDown { from { transform: none; } to { transform: translateY(100%); } }
@keyframes solBackdropOut { to { opacity: 0; } }
@media (max-width: 699px) {
  #solDetailSheet.sheet-enter > .trn-sheet-inner { animation: solSlideUp 340ms cubic-bezier(0.22, 1, 0.36, 1) both; }
  #solDetailSheet.sheet-leave { animation: solBackdropOut 240ms ease-in both; pointer-events: none; }
  #solDetailSheet.sheet-leave > .trn-sheet-inner { animation: solSlideDown 240ms cubic-bezier(0.4, 0, 1, 1) both; }
}

/* ---------------------------------------------------------------------------
   Movimiento reducido: sin pop, sin deslizar, solo desvanecer.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .gs-menu { transform: none !important; transition: opacity 180ms ease; }
  .gs-menu[data-state="closed"] { transition-duration: 120ms; }
  .gs-pill { transition: opacity 150ms ease; }
  .gs-chevron, .dash-collapse-btn svg, .sol-details-arrow, .fm-more-arrow { transition: none; }
  .gs-trigger[data-swap] .gs-label { animation: none; }
  .swipe-row__glyph { transition: none; }
  .swipe-row__action:active .swipe-row__glyph { transform: none; }
  .toast { transform: translate(-50%, 0); transition: opacity 200ms ease; }
  #solDetailSheet.sheet-enter > .trn-sheet-inner,
  #solDetailSheet.sheet-leave,
  #solDetailSheet.sheet-leave > .trn-sheet-inner { animation: none; }
}