/* Transfer · hoja de estilo. Móvil primero (iPhone), crece a escritorio. */

:root {
  --fondo:          #0A0D14;
  --fondo-alto:     #0E1220;
  --superficie:     #141A29;
  --superficie-2:   #1B2234;
  --borde:          #252E44;
  --borde-vivo:     #35406080;
  --texto:          #E9EDF7;
  --texto-medio:    #A3AEC6;
  --texto-tenue:    #6C7793;
  --acento:         #17B0A6;
  --acento-2:       #1189B0;
  --ok:             #2FD47B;
  --alerta:         #FFB020;
  --malo:           #FF6B6B;

  --r-chico:  10px;
  --r:        16px;
  --r-grande: 22px;

  --sombra:   0 10px 30px -12px rgba(0,0,0,.7);
  --rapido:   140ms cubic-bezier(.2,.8,.3,1);
  --suave:    260ms cubic-bezier(.16,1,.3,1);

  --ancho: 720px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(90rem 50rem at 15% -10%, #0B4A5A44, transparent 60%),
    radial-gradient(70rem 45rem at 110% 0%, #12A8A033, transparent 55%);
  pointer-events: none;
  z-index: 0;
}

h1, h2, h3 { margin: 0; letter-spacing: -.02em; font-weight: 650; }
button, input { font: inherit; color: inherit; }

/* ---------------------------------------------------------------- entrada */

.pantalla-entrada {
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
}

.entrada {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 380px;
  text-align: center;
}

.entrada__marca {
  border-radius: 22px;
  box-shadow: 0 18px 44px -18px #17B0A699;
}

.entrada__titulo { margin-top: 18px; font-size: 30px; }

.entrada__pie {
  margin: 4px 0 30px;
  color: var(--texto-tenue);
  font-size: 15px;
}

.entrada__forma { display: grid; gap: 14px; text-align: left; }

/* ---------------------------------------------------------------- campos */

.campo { display: grid; gap: 7px; }

.campo__etiqueta {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.campo__dato {
  width: 100%;
  padding: 13px 15px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-chico);
  outline: none;
  transition: border-color var(--rapido), box-shadow var(--rapido);
}

.campo__dato:focus {
  border-color: var(--acento);
  box-shadow: 0 0 0 3px #17B0A633;
}

/* ---------------------------------------------------------------- botones */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: var(--r-chico);
  cursor: pointer;
  font-weight: 600;
  transition: transform var(--rapido), background var(--rapido), border-color var(--rapido);
  -webkit-tap-highlight-color: transparent;
}

.boton:hover:not(:disabled) { background: #222B40; border-color: #33405C; }
.boton:active:not(:disabled) { transform: scale(.975); }
.boton:disabled { opacity: .45; cursor: not-allowed; }

.boton--primario {
  background: linear-gradient(135deg, var(--acento), var(--acento-2));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 10px 26px -12px #17B0A6CC;
}

.boton--primario:hover:not(:disabled) { filter: brightness(1.08); background: linear-gradient(135deg, var(--acento), var(--acento-2)); }
.boton--ancho { width: 100%; padding: 14px; }
.boton--chico { padding: 8px 12px; font-size: 14px; }
.boton--fantasma { background: transparent; border-color: transparent; color: var(--texto-medio); }
.boton--fantasma:hover:not(:disabled) { background: #ffffff0f; border-color: transparent; }

/* ---------------------------------------------------------------- avisos */

.aviso {
  margin: 0 0 16px;
  padding: 11px 14px;
  border-radius: var(--r-chico);
  font-size: 14.5px;
  border: 1px solid transparent;
}

.aviso--malo  { background: #FF6B6B1A; border-color: #FF6B6B44; color: #FFB4B4; }
.aviso--bueno { background: #2FD47B1A; border-color: #2FD47B44; color: #9BE9C2; }
.aviso--ojo   { background: #FFB0201A; border-color: #FFB02044; color: #FFD79A; }

/* ---------------------------------------------------------------- armazón */

.barra {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: calc(10px + env(safe-area-inset-top)) 18px 10px;
  background: #0A0D14D9;
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--borde);
}

.barra__marca { border-radius: 9px; }
.barra__titulo { font-size: 17px; font-weight: 650; }
.barra__cola { margin-left: auto; display: flex; align-items: center; gap: 6px; }

.lienzo {
  position: relative;
  z-index: 1;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 20px 18px calc(30px + env(safe-area-inset-bottom));
}

.bloque { margin-bottom: 26px; }

.bloque__titulo {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-bottom: 11px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.bloque__nota { font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--texto-tenue); }

/* ---------------------------------------------------------------- equipos */

.equipos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.equipo {
  position: relative;
  display: grid;
  gap: 2px;
  padding: 14px 14px 13px;
  background: linear-gradient(160deg, var(--superficie), var(--fondo-alto));
  border: 1px solid var(--borde);
  border-radius: var(--r);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--rapido), transform var(--rapido), background var(--rapido);
  -webkit-tap-highlight-color: transparent;
}

.equipo::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--tono, var(--acento));
  opacity: .55;
  transition: opacity var(--rapido), width var(--rapido);
}

.equipo:active { transform: scale(.985); }

.equipo[aria-pressed="true"] {
  border-color: var(--tono);
  background: linear-gradient(160deg, color-mix(in srgb, var(--tono) 14%, var(--superficie)), var(--fondo-alto));
}

.equipo[aria-pressed="true"]::before { opacity: 1; width: 4px; }

.equipo__nombre {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 16px;
  font-weight: 650;
}

.equipo__punto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tono);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tono) 22%, transparent);
  flex: none;
}

.equipo__detalle { font-size: 12px; color: var(--texto-tenue); line-height: 1.3; }
.equipo__libre  { margin-top: 5px; font-size: 12px; font-weight: 600; color: var(--texto-medio); }
.equipo__libre--poco { color: var(--alerta); }
.equipo__libre--nada { color: var(--malo); }

/* ---------------------------------------------------------------- carpeta */

.carpeta {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 13px 14px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r);
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

.carpeta:active { transform: scale(.99); }
.carpeta__icono { flex: none; opacity: .75; }
.carpeta__texto { min-width: 0; flex: 1; }
.carpeta__rotulo { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-tenue); }

.carpeta__ruta {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  font-size: 13.5px;
  color: var(--texto);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.carpeta__flecha { flex: none; color: var(--texto-tenue); }

/* ---------------------------------------------------------------- soltar */

.soltar {
  display: grid;
  place-items: center;
  gap: 12px;
  padding: 30px 20px;
  background:
    linear-gradient(160deg, #161D2E, #0E1220);
  border: 1.5px dashed var(--borde-vivo);
  border-radius: var(--r-grande);
  text-align: center;
  transition: border-color var(--suave), background var(--suave), transform var(--suave);
}

.soltar--encima {
  border-color: var(--acento);
  background: linear-gradient(160deg, #123340, #0E1C26);
  transform: scale(1.01);
}

.soltar__titulo { font-size: 17px; font-weight: 650; }
.soltar__pie { font-size: 13px; color: var(--texto-tenue); max-width: 34ch; }
.soltar__aro {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(140deg, #17B0A62E, #1189B02E);
  border: 1px solid #17B0A644;
}

/* ---------------------------------------------------------------- envíos */

.envios { display: grid; gap: 10px; }

.envio {
  display: grid;
  gap: 9px;
  padding: 13px 14px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r);
}

.envio__fila { display: flex; align-items: center; gap: 10px; }

.envio__nombre {
  flex: 1;
  min-width: 0;
  font-size: 14.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.envio__destino {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 650;
  background: color-mix(in srgb, var(--tono) 16%, transparent);
  color: color-mix(in srgb, var(--tono) 72%, white);
  border: 1px solid color-mix(in srgb, var(--tono) 34%, transparent);
}

.envio__pie {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--texto-tenue);
}

.envio__pie strong { color: var(--texto-medio); font-weight: 600; }
.envio__espacio { margin-left: auto; }

.barra-progreso {
  position: relative;
  height: 7px;
  background: #0C1120;
  border: 1px solid #1E263A;
  border-radius: 999px;
  overflow: hidden;
}

.barra-progreso__lleno {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--acento), var(--acento-2));
  transition: width 400ms cubic-bezier(.16,1,.3,1);
}

.barra-progreso__lleno--entrega { background: linear-gradient(90deg, #2FD47B, #22B8FF); }

.barra-progreso--viva .barra-progreso__lleno::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, #ffffff40, transparent);
  animation: destello 1.5s linear infinite;
}

@keyframes destello { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

.etiqueta-estado {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 650;
}

.etiqueta-estado::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.es-subiendo   { color: var(--acento); }
.es-en_cola    { color: var(--texto-medio); }
.es-entregando { color: #22B8FF; }
.es-entregado  { color: var(--ok); }
.es-error      { color: var(--malo); }
.es-cancelado  { color: var(--texto-tenue); }
.es-esperando  { color: var(--alerta); }

.vacio {
  padding: 26px 18px;
  text-align: center;
  color: var(--texto-tenue);
  font-size: 14px;
  border: 1px dashed var(--borde);
  border-radius: var(--r);
}

/* ---------------------------------------------------------------- hoja */

.velo {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: #04060Bcc;
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--suave);
}

.velo--abierto { opacity: 1; pointer-events: auto; }

.hoja {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 41;
  max-height: 82svh;
  display: flex;
  flex-direction: column;
  background: var(--fondo-alto);
  border-top: 1px solid var(--borde);
  border-radius: var(--r-grande) var(--r-grande) 0 0;
  transform: translateY(101%);
  transition: transform var(--suave);
  box-shadow: var(--sombra);
}

.hoja--abierta { transform: translateY(0); }

.hoja__asa {
  width: 38px;
  height: 4px;
  margin: 9px auto 3px;
  border-radius: 999px;
  background: #35405C;
  flex: none;
}

.hoja__cabeza {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px 12px;
  border-bottom: 1px solid var(--borde);
  flex: none;
}

.hoja__titulo { font-size: 16px; font-weight: 650; flex: 1; }
.hoja__cuerpo { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 18px; flex: 1; }
.hoja__pie {
  display: flex;
  gap: 9px;
  padding: 12px 18px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--borde);
  flex: none;
}

.migas {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 18px 10px;
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--texto-tenue);
  overflow-x: auto;
  white-space: nowrap;
}

.atajos { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; }

.atajo {
  padding: 6px 11px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.atajo:active { transform: scale(.97); }

.lista-carpetas { display: grid; gap: 4px; }

.carpeta-fila {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-chico);
  cursor: pointer;
  text-align: left;
  font-size: 15px;
  -webkit-tap-highlight-color: transparent;
}

.carpeta-fila:hover { background: var(--superficie); border-color: var(--borde); }
.carpeta-fila:active { transform: scale(.99); }
.carpeta-fila__icono { flex: none; color: var(--acento); opacity: .85; }
.carpeta-fila__nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cargando {
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 34px 0;
  color: var(--texto-tenue);
  font-size: 14px;
}

.giro {
  width: 22px;
  height: 22px;
  border: 2px solid #ffffff22;
  border-top-color: var(--acento);
  border-radius: 50%;
  animation: girar .8s linear infinite;
}

@keyframes girar { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- retomar */

.retomar {
  display: grid;
  gap: 10px;
  padding: 14px;
  margin-bottom: 20px;
  background: linear-gradient(150deg, #2A2410, #14182A);
  border: 1px solid #FFB02055;
  border-radius: var(--r);
}

.retomar__titulo { font-size: 14.5px; font-weight: 650; color: #FFD79A; }
.retomar__detalle { font-size: 13px; color: var(--texto-medio); }

/* ---------------------------------------------------------------- escritorio */

@media (min-width: 640px) {
  .equipos { grid-template-columns: repeat(4, 1fr); }
  .lienzo { padding: 28px 24px 60px; }
  .soltar { padding: 46px 30px; }
  .hoja {
    left: 50%;
    right: auto;
    bottom: auto;
    top: 50%;
    width: min(560px, 92vw);
    max-height: 78vh;
    border-radius: var(--r-grande);
    border: 1px solid var(--borde);
    transform: translate(-50%, -46%) scale(.96);
    opacity: 0;
    transition: transform var(--suave), opacity var(--suave);
  }
  .hoja--abierta { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  .hoja__asa { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* El atributo hidden gana siempre: sin esto, los display de arriba lo tapan. */
[hidden] { display: none !important; }