/* Dock de cristal que se guarda solo, e iconos con forma de app.
   Acompaña a okt-movil.js. Se carga el último para poder corregir lo que hace
   falta sin tocar styles.css, que lo comparten todas las pantallas. */

/* ── Unidades y áreas seguras ──────────────────────────────────────────────
   En Safari de iPhone la barra de abajo aparece y desaparece: con 100vh la app
   queda cortada y con 100% se pelea con el teclado. `dvh` sigue a la barra, y
   los `safe-area-inset` mantienen el dock por encima del indicador de inicio. */
:root{
  --okt-sab:env(safe-area-inset-bottom,0px);
  --okt-sat:env(safe-area-inset-top,0px);
  --okt-dock-curva:28%;                 /* aproximación al cuadrado redondo de iOS */
}

/* ── El dock ───────────────────────────────────────────────────────────────
   Cristal de verdad: el desenfoque coge el color de lo que hay detrás en vez de
   pintar un panel opaco encima. La saturación es lo que hace que parezca vidrio
   y no plástico gris. */
.okt-dock{
  transition:transform .26s cubic-bezier(.32,.72,0,1),opacity .2s ease;
  will-change:transform;
  -webkit-backdrop-filter:blur(26px) saturate(180%);
  backdrop-filter:blur(26px) saturate(180%);
  margin-bottom:var(--okt-sab);
}
.okt-dock.okt-dock-oculto{
  transform:translateY(calc(100% + 26px));
  opacity:0;
  pointer-events:none;
}
.okt-sin-animacion .okt-dock{transition:none}

/* Iconos con forma de app: el cuadrado redondo y un degradado suave desde el
   color de cada app, como en la pantalla de inicio del teléfono. */
.okt-dock-ico{
  border-radius:var(--okt-dock-curva);
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--tile,#c9c3b4) 82%,white),
    var(--tile,#c9c3b4));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(0,0,0,.10),
    0 2px 6px rgba(40,38,32,.18);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.okt-dock-ico svg{width:58%;height:58%;display:block}
/* El brillo de arriba, como el cristal de un icono de iOS. */
.okt-dock-ico::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,0) 58%);
}
.okt-dock-item:active .okt-dock-ico{transform:translateY(var(--dock-lift,0px)) scale(.92)}
/* El desplazamiento va en el boton y la escala en el icono: si fueran en el
   mismo sitio, uno pisaria al otro. */
.okt-dock-item{transform:translateX(var(--dock-shift,0px));transition:transform .13s cubic-bezier(.32,.72,0,1)}
/* La zona de pulsar tiene que crecer con el icono. La escala va en el icono de
   dentro, que no recibe pulsaciones, asi que el boton se quedaba en 50 px: veias
   un icono grande del que solo respondia el centro. */
.okt-dock-item::before{content:'';position:absolute;left:50%;bottom:0;
  width:calc(100% * var(--dock-scale,1));height:calc(100% * var(--dock-scale,1));
  transform:translateX(-50%) translateY(var(--dock-lift,0px));}
.okt-sin-animacion .okt-dock-item{transition:none}

/* ── El asa de abajo ───────────────────────────────────────────────────────
   Cinco píxeles que dicen «aquí hay algo». Es el indicador de inicio del
   iPhone: sin él, un dock escondido es un dock perdido. */
.okt-asa{
  position:fixed;left:50%;bottom:max(4px,var(--okt-sab));
  transform:translateX(-50%);
  width:136px;height:22px;               /* zona de toque cómoda… */
  padding:0;border:0;background:transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  z-index:60;
}
.okt-asa>span{                            /* …con una barrita fina dentro */
  display:block;width:104px;height:5px;border-radius:999px;
  background:color-mix(in srgb,var(--ink,#332d30) 42%,transparent);
  transition:background .18s ease,width .18s ease;
}
.okt-asa:hover>span,.okt-asa:focus-visible>span{background:color-mix(in srgb,var(--ink,#332d30) 70%,transparent);width:116px}
.okt-asa:focus-visible{outline:2px solid var(--green,#497b66);outline-offset:3px;border-radius:999px}
/* Con el dock a la vista el asa sobra: se aparta para no tapar los iconos. */
body:not(.okt-dock-fuera) .okt-asa{opacity:0;pointer-events:none}

/* ── En el teléfono ────────────────────────────────────────────────────────
   Aquí es donde se recupera la pantalla. */
@media(max-width:620px){
  /* La ventana ya ocupa todo: el cromo falso de navegador sobra entero. En su
     sitio queda un asa de 22 px con el nombre de la app. */
  .win-bar{
    display:none;
  }
  .win-barra-abierta .win-bar{
    display:grid;
  }
  .win-asa{
    display:flex;align-items:center;justify-content:center;gap:8px;
    width:100%;height:26px;padding:0 12px;
    border:0;border-bottom:1px solid color-mix(in srgb,var(--ink,#332d30) 12%,transparent);
    background:color-mix(in srgb,var(--paper,#faf8ef) 88%,transparent);
    -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
    cursor:pointer;font:600 11px/1 var(--mono,monospace);color:color-mix(in srgb,var(--ink,#332d30) 62%,transparent);
  }
  .win-asa-pildora{width:32px;height:4px;border-radius:999px;background:color-mix(in srgb,var(--ink,#332d30) 26%,transparent);flex:none}
  .win-asa-nombre{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .win-barra-abierta .win-asa-pildora{background:color-mix(in srgb,var(--ink,#332d30) 55%,transparent)}
  /* Los tres puntitos de Mac no se entienden en un teléfono, pero las acciones
     sí hacen falta: cerrar la app y guardarla abajo. Así que se quedan, pero
     como botones de verdad, con sitio para el dedo (44 px es el mínimo para
     acertar sin mirar) y fuera de la vista hasta que abres la barra. */
  .win-bar .lights{display:flex;gap:14px;align-items:center}
  .win-bar .light{width:26px;height:26px;border-radius:50%;position:relative;font-size:15px;line-height:1}
  .win-bar .light::after{content:'';position:absolute;inset:-9px}   /* zona de toque de 44 px */
  .win-bar{height:auto;grid-template-rows:auto;padding:6px 10px 8px}
  .win-history{grid-column:1;grid-row:1}
  .win-external{grid-column:3;grid-row:1}
  .win-address{grid-column:1/-1;grid-row:2}

  /* El dock, más pequeño y pegado al borde: se ve cuando lo pides. */
  .okt-dock{padding:7px 9px 9px;border-radius:22px}
  .okt-dock-track{gap:9px;height:52px}
  .okt-dock-item{flex-basis:48px;width:48px;height:48px;border-radius:14px}
  .okt-dock-ico svg{width:56%;height:56%}
}

/* En una pantalla baja de verdad (teléfono tumbado, ventana pequeña) el asa
   también estorba: se afina. */
/* La pildora de presencia y el asa se pisaban en la esquina de abajo: la
   presencia sube lo justo para dejarle sitio al indicador. */
@media(max-width:620px){
  .oktp{--oktp-bottom:34px}
}

@media(max-height:480px){
  .okt-asa{height:16px}
  .okt-asa>span{width:78px;height:4px}
}

/* ── Temas oscuro y noche ──────────────────────────────────────────────────
   El cristal claro sobre fondo negro se ve como una mancha lechosa: en oscuro
   el panel tiene que ser oscuro y dejar pasar la luz de debajo. */
[data-theme="dark"] .okt-asa>span,[data-theme="night"] .okt-asa>span{background:rgba(240,240,242,.38)}
[data-theme="dark"] .okt-asa:hover>span,[data-theme="night"] .okt-asa:hover>span{background:rgba(240,240,242,.66)}
[data-theme="dark"] .okt-dock-ico::after,[data-theme="night"] .okt-dock-ico::after{background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0) 58%)}
[data-theme="dark"] .win-asa{background:color-mix(in srgb,#0a0a0a 82%,transparent);color:#8a909a;border-bottom-color:#26262a}
[data-theme="night"] .win-asa{background:color-mix(in srgb,#0f0d0b 82%,transparent);color:#9a9084;border-bottom-color:#2b2721}
[data-theme="dark"] .win-asa-pildora{background:#3a3a40}
[data-theme="night"] .win-asa-pildora{background:#3a342c}