/* Zefir Web (portal r55): la app de las teles en un navegador, con ratón, teclado o dedo.
   Va después de styles.css (la de ordenador); aquí solo lo propio de la web y del móvil. */
body.zweb { -webkit-tap-highlight-color: transparent; }
.zweb .page { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.zweb .browser { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); padding-bottom: max(8px, env(safe-area-inset-bottom)); }
.zweb .topbar .settings { margin-left: auto; }
.zweb .topbar .search { flex: 0 1 300px; }

/* Como app en el iPhone y el iPad (barra de estado transparente), la página empieza debajo de la hora y la batería:
   se deja ese hueco en todos los tamaños, no solo en el móvil (en el iPad la barra de arriba quedaba sin poder tocarse). */
.zweb .browser { padding-top: max(10px, env(safe-area-inset-top)); }
.zweb .home { padding-top: max(1.2em, env(safe-area-inset-top)); }
.zweb #p-exit { top: max(18px, calc(env(safe-area-inset-top) + 6px)); right: max(22px, env(safe-area-inset-right)); }
.zweb #p-panel { padding-top: max(16px, env(safe-area-inset-top)); padding-left: max(16px, env(safe-area-inset-left)); }
.zweb #modal { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); box-sizing: border-box; }

/* iPhone: Safari no dejó empezar el vídeo solo */
#p-tap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5; font-size: 20px; padding: 14px 28px; min-height: 56px; border-radius: 30px; }

/* Entrada: email y contraseña, crear la cuenta con el código, contraseña olvidada (portal r59) */
.login { width: 100%; max-width: 340px; display: flex; flex-direction: column; align-items: stretch; margin-top: 18px; }
.login .code { text-align: center; font-size: 26px; letter-spacing: 3px; font-family: ui-monospace, "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace; font-weight: 700; text-transform: uppercase; }
.login .text + .text { margin-top: 10px; }
.login .btn-row { margin-top: 14px; }
.links { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 14px; }
.link { background: none; border: 0; color: var(--accent); font: inherit; font-size: 15px; text-decoration: underline; cursor: pointer; padding: 6px 8px; min-height: 36px; }
.link:focus-visible { outline: 2px solid var(--accent); border-radius: 6px; }
.login .btn { width: 100%; }
.msg.bad { color: #ffc9cb; }
.help.small { font-size: 13px; margin-top: 16px; }

/* r62: la dirección principal no contesta: se ofrece la de reserva */
#w-backup { position: fixed; left: 50%; top: max(12px, env(safe-area-inset-top)); transform: translateX(-50%); z-index: 50; max-width: calc(100vw - 32px); background: #3a2a14; color: #ffe2b8; border: 1px solid var(--accent); border-radius: 10px; padding: 12px 16px; font-size: 15px; text-align: center; }
#w-backup a { color: var(--accent); font-weight: 700; }

/* Pantallas táctiles: sin ratón encima, los «⋯» de cada fila y ficha siempre a la vista. */
@media (hover: none) {
  .row .more, .tile .more { visibility: visible; }
  .row:hover, .tile:hover, .cat:hover, .tab:hover, .btn:hover { background: inherit; }
  .btn:hover { background: #323743; }
  .row.sel:hover, .tile.sel:hover { background: var(--active); }
  #p-seek { height: 32px; }
}

/* Móvil y ventanas estrechas */
@media (max-width: 760px) {
  body.zweb { font-size: 14px; }
  .zweb .browser { padding-top: max(8px, env(safe-area-inset-top)); }
  .zweb .topbar { flex-wrap: wrap; gap: 8px; }
  .zweb .topbar .logo.wordmark { width: 84px; height: 21px; }
  .zweb .topbar .chip { order: 1; }
  .zweb .topbar .settings { order: 2; margin-left: auto; }
  .zweb .tabs { order: 3; flex: 1 0 100%; overflow-x: auto; scrollbar-width: none; }
  .zweb .tabs::-webkit-scrollbar { display: none; }
  .zweb .sections { margin-left: 0; }
  .zweb .tab { height: 36px; padding: 0 12px; font-size: 14px; }
  .zweb .topbar .search { order: 4; flex: 1 0 100%; height: 38px; }
  .zweb .body { flex-direction: column; gap: 8px; margin-top: 8px; }
  .zweb .cats { width: auto; max-width: none; min-width: 0; flex: none; display: flex; overflow-x: auto; overflow-y: hidden; padding: 4px; scrollbar-width: none; }
  .zweb .cats::-webkit-scrollbar { display: none; }
  .zweb .cat { flex: none; max-width: 70vw; padding: 8px 12px; }
  .zweb .right-head { padding: 0 4px 4px; font-size: 14px; }
  .zweb .row img { width: 48px; height: 32px; }
  .zweb .row .num { min-width: 34px; }
  .zweb .row .name { font-size: 15px; margin-left: 8px; }

  /* Inicio: los tres círculos tienen que caber en 360 px. */
  .zweb .home { font-size: 11px; overflow-y: auto; justify-content: flex-start; padding-top: max(2em, env(safe-area-inset-top)); }
  .zweb .home-circle { width: 8.5em; height: 8.5em; }
  .zweb .home-row .btn { font-size: 13px; }

  .zweb .dialog { padding: 18px 16px; max-height: calc(100% - 24px); overflow-y: auto; }
  .zweb .menu { max-width: calc(100vw - 16px); }

  /* Reproductor */
  .zweb #p-overlay { padding: 40px max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
  .zweb #p-title { font-size: 18px; }
  .zweb #p-subtitle { font-size: 13px; }
  .zweb .p-bar { gap: 8px; font-size: 12px; }
  .zweb .p-bar span { min-width: 42px; }
  .zweb .p-buttons { gap: 6px; }
  .zweb .p-buttons .btn { min-height: 38px; padding: 0 10px; font-size: 13px; }
  .zweb .p-buttons .spacer { display: none; }
  .zweb .p-buttons input[type=range] { display: none; }
  .zweb #p-exit { top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); font-size: 13px; padding: 0 12px; min-height: 36px; }
  .zweb #p-panel { width: 100%; max-width: none; border-radius: 0; padding: 12px; }
  .zweb #p-panel .plist { width: 42%; }
  .zweb #p-message { max-width: 92%; font-size: 15px; }
  .zweb #toast { max-width: 92%; }
}

/* 5.2.17: ficha de película en el móvil: carátula pequeña y sinopsis debajo */
@media (max-width: 760px) {
  .zweb .details .d-poster { width: 96px; height: 144px; margin-right: 14px; }
  .zweb .d-plot { -webkit-line-clamp: 12; }
  .zweb .series-info .d-poster { width: 48px; height: 72px; margin-right: 12px; }
  .zweb .details-dialog .btn-row { flex-wrap: wrap; }
}