/* BAIT OS — sitio de bait.cl ambientado como un escritorio. */

:root {
  --f-display: "Bricolage Grotesque", "Geist", system-ui, sans-serif;
  --f-ui: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "Cascadia Mono", monospace;

  --verde: #0B6B5D;
  --verde-luz: #4FD1B8;
  --naranjo: #FF8A4C;

  --barra-h: 52px;
  --r-ventana: 12px;
  --r: 8px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease: cubic-bezier(.4, 0, .2, 1);
}

html[data-tema="oscuro"] {
  color-scheme: dark;
  --fondo-base: #0F1211;
  --ventana: #181C1A;
  --ventana-2: #1E2321;
  --ventana-3: #262C29;
  --titulo: #151917;
  --hover: rgba(238, 239, 234, .07);
  --activo: rgba(79, 209, 184, .14);
  --texto: #EEEFEA;
  --texto-2: #B6BBB5;
  --texto-3: #8C928C;
  --acento: #4FD1B8;
  --acento-tinta: #0F1211;
  --acento-suave: #16312B;
  --chispa: #FF8A4C;
  --vidrio: rgba(24, 28, 26, .78);
  --vidrio-fuerte: rgba(24, 28, 26, .9);
  --sombra-ventana: 0 24px 60px -18px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .06);
  --sombra-pop: 0 18px 44px -14px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .06);
}

html[data-tema="claro"] {
  color-scheme: light;
  --fondo-base: #F5F4EF;
  --ventana: #FFFFFF;
  --ventana-2: #F5F4EF;
  --ventana-3: #ECEAE3;
  --titulo: #F5F4EF;
  --hover: rgba(19, 22, 20, .06);
  --activo: rgba(11, 107, 93, .12);
  --texto: #131614;
  --texto-2: #454B47;
  --texto-3: #6C716C;
  --acento: #0B6B5D;
  --acento-tinta: #FFFFFF;
  --acento-suave: #D5EAE3;
  --chispa: #E4571B;
  --vidrio: rgba(245, 244, 239, .8);
  --vidrio-fuerte: rgba(245, 244, 239, .92);
  --sombra-ventana: 0 24px 60px -20px rgba(19, 22, 20, .35), 0 0 0 1px rgba(19, 22, 20, .08);
  --sombra-pop: 0 18px 44px -16px rgba(19, 22, 20, .3), 0 0 0 1px rgba(19, 22, 20, .08);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: #0F1211;
  color: var(--texto);
  font: 400 14px/1.5 var(--f-ui);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
img { display: block; max-width: 100%; }
a { color: var(--acento); }
svg { display: block; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
::selection { background: var(--acento); color: var(--acento-tinta); }

/* Barras de desplazamiento finas, del color del sistema */
* { scrollbar-width: thin; scrollbar-color: var(--ventana-3) transparent; }

.logo-bait {
  display: inline-block;
  background: currentColor;
  -webkit-mask: url(../img/logo-bait.png) center / contain no-repeat;
  mask: url(../img/logo-bait.png) center / contain no-repeat;
}
.logo-b {
  display: block; width: 22px; height: 22px;
  background: var(--acento);
  -webkit-mask: url(../img/logo-bait.png) left center / auto 100% no-repeat;
  mask: url(../img/logo-bait.png) left center / auto 100% no-repeat;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 16px; border-radius: var(--r);
  background: var(--ventana-3); color: var(--texto);
  font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: background .15s, transform .15s var(--ease-out);
}
.btn:hover { background: var(--hover); }
.btn:active { transform: scale(.97); }
.btn svg { width: 16px; height: 16px; }
.btn-primario { background: var(--acento); color: var(--acento-tinta); }
.btn-primario:hover { background: var(--acento); filter: brightness(1.08); }

/* ───────── Arranque ───────── */
.capa { position: fixed; inset: 0; z-index: 900; }
#arranque {
  background: #000; color: #EEEFEA;
  display: grid; place-items: center; align-content: center; gap: 72px;
  transition: opacity .5s var(--ease);
}
#arranque.fuera { opacity: 0; pointer-events: none; }
.logo-arranque { width: 220px; height: 64px; opacity: 0; animation: aparecer .8s .15s var(--ease-out) forwards; }
.giro { position: relative; width: 36px; height: 36px; opacity: 0; animation: aparecer .4s .7s forwards; }
.giro i {
  position: absolute; inset: 0;
  animation: orbita 2.2s infinite cubic-bezier(.5, .15, .5, .85);
}
.giro i::before {
  content: ""; position: absolute; left: 50%; top: 0;
  width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #EEEFEA;
}
.giro i:nth-child(2) { animation-delay: .12s; }
.giro i:nth-child(3) { animation-delay: .24s; }
.giro i:nth-child(4) { animation-delay: .36s; }
.giro i:nth-child(5) { animation-delay: .48s; }
@keyframes orbita {
  0% { transform: rotate(0); opacity: 1; }
  70% { transform: rotate(540deg); opacity: 1; }
  85%, 100% { transform: rotate(720deg); opacity: 0; }
}
@keyframes aparecer { to { opacity: 1; } }

/* ───────── Bloqueo e ingreso ───────── */
#bloqueo {
  background: #0F1211 url(fondos/clean-bloqueo-oscuro.webp) center / cover;
  color: #EEEFEA; user-select: none; overflow: hidden;
}
#bloqueo::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(10, 12, 11, .0);
  -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0);
  transition: background .5s var(--ease), backdrop-filter .5s var(--ease);
}
#bloqueo.ingresando::before { background: rgba(10, 12, 11, .45); -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px); }
.bloqueo-reloj {
  position: absolute; left: 0; right: 0; top: 11vh; text-align: center;
  transition: transform .55s var(--ease-out), opacity .4s;
}
.bloqueo-reloj time {
  display: block; font: 600 clamp(84px, 13vw, 156px)/1 var(--f-display);
  letter-spacing: -.04em; font-variant-numeric: tabular-nums;
}
.bloqueo-reloj p { margin: 12px 0 0; font: 500 clamp(17px, 1.6vw, 22px)/1.3 var(--f-ui); color: rgba(238, 239, 234, .85); }
.bloqueo-pie {
  position: absolute; left: 0; right: 0; bottom: 7vh; text-align: center;
  transition: opacity .3s;
}
.bloqueo-pie p { margin: 0 0 8px; font: 600 22px/1.2 var(--f-display); letter-spacing: -.01em; }
.bloqueo-pie span { font-size: 13px; color: rgba(238, 239, 234, .6); animation: latido 2.4s infinite var(--ease); }
@keyframes latido { 50% { opacity: .45; } }
#bloqueo.ingresando .bloqueo-reloj { transform: translateY(-40vh); opacity: 0; }
#bloqueo.ingresando .bloqueo-pie { opacity: 0; }

.ingreso {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -40%); opacity: 0; pointer-events: none;
  display: grid; justify-items: center; text-align: center; gap: 6px;
  transition: transform .5s .1s var(--ease-out), opacity .4s .1s;
}
#bloqueo.ingresando .ingreso { transform: translate(-50%, -50%); opacity: 1; pointer-events: auto; }
.avatar {
  width: 176px; height: 176px; border-radius: 50%; margin-bottom: 18px;
  background: #131614; color: #4FD1B8; display: grid; place-items: center;
}
.avatar .logo-bait { width: 112px; height: 34px; }
.ingreso h1, .ingreso-nombre { margin: 0; font: 600 28px/1.2 var(--f-display); }
.ingreso p { margin: 0 0 20px; color: rgba(238, 239, 234, .7); }
.ingreso .btn { min-width: 160px; height: 40px; background: #4FD1B8; color: #0F1211; }
.ingreso small { min-height: 20px; margin-top: 10px; color: rgba(238, 239, 234, .75); font-size: 14px; }

/* ───────── Escritorio ───────── */
#escritorio { position: fixed; inset: 0; overflow: hidden; }
#fondo {
  position: absolute; inset: 0;
  background: var(--fondo-base) center / cover no-repeat;
  animation: entrar-fondo .9s var(--ease-out);
}
@keyframes entrar-fondo { from { opacity: 0; transform: scale(1.04); } }

.iconos {
  position: absolute; left: 0; top: 0; bottom: var(--barra-h);
  margin: 0; padding: 10px 6px; list-style: none;
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(auto-fill, 102px);
  grid-auto-columns: 92px; gap: 4px 2px; align-content: start;
}
.icono {
  display: grid; justify-items: center; align-content: start; gap: 6px;
  width: 88px; padding: 8px 4px 6px; border-radius: 6px;
  color: #fff; text-align: center; cursor: default;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .85), 0 0 1px rgba(0, 0, 0, .9);
}
.icono svg { width: 48px; height: 48px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .3)); transition: transform .2s var(--ease-out); }
.icono span { font-size: 12.5px; line-height: 1.25; overflow-wrap: anywhere; }
.icono:hover { background: rgba(255, 255, 255, .1); }
html[data-tema="claro"] .icono { color: #131614; text-shadow: none; }
html[data-tema="claro"] .icono:hover { background: rgba(19, 22, 20, .07); }
html[data-tema="claro"] .icono.sel { background: rgba(11, 107, 93, .16); }
.icono.sel, .icono:focus-visible { background: rgba(79, 209, 184, .25); outline: none; }
.icono:active svg { transform: scale(.92); }

/* ───────── Ventanas ───────── */
#ventanas { position: absolute; inset: 0 0 var(--barra-h) 0; pointer-events: none; }
.ventana {
  position: absolute; pointer-events: auto;
  display: flex; flex-direction: column;
  min-width: 320px; min-height: 220px;
  background: var(--ventana); color: var(--texto);
  border-radius: var(--r-ventana);
  box-shadow: var(--sombra-ventana);
  overflow: hidden;
  animation: abrir .22s var(--ease-out);
  transform-origin: 50% 60%;
}
@keyframes abrir { from { opacity: 0; transform: scale(.94) translateY(10px); } }
.ventana.cerrando { animation: cerrar .16s var(--ease) forwards; pointer-events: none; }
@keyframes cerrar { to { opacity: 0; transform: scale(.95); } }
.ventana.minimizando { transition: transform .22s var(--ease), opacity .2s var(--ease); opacity: 0; pointer-events: none; }
.ventana.inactiva .ventana-titulo { color: var(--texto-3); }
.ventana.max { border-radius: 0; box-shadow: none; }
.ventana.ajustando { transition: left .2s var(--ease-out), top .2s var(--ease-out), width .2s var(--ease-out), height .2s var(--ease-out), border-radius .2s; }

.ventana-titulo {
  flex: none; display: flex; align-items: center; gap: 10px;
  height: 42px; padding-left: 14px;
  background: var(--titulo); user-select: none; touch-action: none;
}
.ventana-titulo .vt-icono { width: 18px; height: 18px; flex: none; }
.ventana-titulo .vt-icono svg { width: 18px; height: 18px; }
.ventana-titulo h2 {
  flex: 1; min-width: 0; margin: 0; font-size: 13px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vt-botones { display: flex; align-self: stretch; }
.vt-botones button {
  width: 46px; display: grid; place-items: center; color: var(--texto-2);
  transition: background .12s, color .12s;
}
.vt-botones button svg { width: 15px; height: 15px; }
.vt-botones button:hover { background: var(--hover); color: var(--texto); }
.vt-botones .vt-cerrar:hover { background: #C42B1C; color: #fff; }
.ventana-cuerpo { flex: 1; min-height: 0; overflow: auto; position: relative; }
.ventana-cuerpo.cuerpo-marco { overflow: hidden; display: flex; }
.marco-herramientas { flex: 1; width: 100%; height: 100%; border: 0; display: block; background: var(--ventana, #0F1211); }

.borde { position: absolute; z-index: 5; }
.borde-n { top: -3px; left: 8px; right: 8px; height: 7px; cursor: ns-resize; }
.borde-s { bottom: -3px; left: 8px; right: 8px; height: 7px; cursor: ns-resize; }
.borde-e { right: -3px; top: 8px; bottom: 8px; width: 7px; cursor: ew-resize; }
.borde-o { left: -3px; top: 8px; bottom: 8px; width: 7px; cursor: ew-resize; }
.borde-ne { top: -3px; right: -3px; width: 14px; height: 14px; cursor: nesw-resize; }
.borde-no { top: -3px; left: -3px; width: 14px; height: 14px; cursor: nwse-resize; }
.borde-se { bottom: -3px; right: -3px; width: 14px; height: 14px; cursor: nwse-resize; }
.borde-so { bottom: -3px; left: -3px; width: 14px; height: 14px; cursor: nesw-resize; }
.ventana.max .borde { display: none; }

.vista-ajuste {
  position: absolute; z-index: 40; pointer-events: none; opacity: 0;
  background: rgba(79, 209, 184, .16); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-radius: 10px; transition: all .18s var(--ease-out);
}
.vista-ajuste.ver { opacity: 1; }

/* ───────── Barra de tareas ───────── */
.barra {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 500;
  height: var(--barra-h); display: flex; align-items: center; justify-content: center;
  background: var(--vidrio); -webkit-backdrop-filter: blur(24px) saturate(1.3); backdrop-filter: blur(24px) saturate(1.3);
}
.barra-centro { display: flex; align-items: center; gap: 4px; }
.barra-apps { display: flex; gap: 4px; }
.barra-btn {
  position: relative; width: 44px; height: 42px; border-radius: 6px;
  display: grid; place-items: center; color: var(--texto);
  transition: background .12s;
}
.barra-btn:hover, .barra-btn[aria-expanded="true"] { background: var(--hover); }
.barra-btn svg { width: 26px; height: 26px; transition: transform .2s var(--ease-out); }
.barra-btn:active svg, .barra-btn:active .logo-b { transform: scale(.86); }
#btnBuscar svg { width: 20px; height: 20px; }
.barra-btn::after {
  content: ""; position: absolute; bottom: 3px; left: 50%; height: 3px; width: 0;
  border-radius: 3px; background: var(--texto-3); transform: translateX(-50%);
  transition: width .2s var(--ease-out), background .2s;
}
.barra-btn.abierta::after { width: 6px; }
.barra-btn.enfocada { background: var(--hover); }
.barra-btn.enfocada::after { width: 16px; background: var(--acento); }
.barra-btn.salta svg { animation: salto .5s var(--ease-out); }
@keyframes salto { 40% { transform: translateY(-6px); } }

.barra-bandeja {
  position: absolute; right: 8px; top: 5px; bottom: 5px;
  display: flex; align-items: center; gap: 14px; padding: 0 10px; border-radius: 6px;
  transition: background .12s;
}
.barra-bandeja:hover { background: var(--hover); }
.bandeja-iconos { display: flex; gap: 8px; color: var(--texto); }
.bandeja-iconos svg { width: 16px; height: 16px; }
.bandeja-hora { display: grid; text-align: right; font-size: 12px; line-height: 1.35; font-variant-numeric: tabular-nums; }
.bandeja-hora small { font-size: 12px; color: var(--texto-2); }

/* ───────── Menú inicio ───────── */
.menu-inicio {
  position: absolute; z-index: 600; left: 50%; bottom: calc(var(--barra-h) + 12px);
  width: min(640px, calc(100vw - 24px)); max-height: calc(100dvh - var(--barra-h) - 24px);
  display: flex; flex-direction: column;
  background: var(--vidrio-fuerte); -webkit-backdrop-filter: blur(30px) saturate(1.4); backdrop-filter: blur(30px) saturate(1.4);
  border-radius: 12px; box-shadow: var(--sombra-pop);
  transform: translateX(-50%); overflow: hidden;
  animation: subir .26s var(--ease-out);
}
@keyframes subir { from { opacity: 0; transform: translate(-50%, 24px); } }
.mi-buscar { padding: 24px 28px 8px; }
.campo-buscar {
  display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 14px;
  background: var(--ventana-2); border-radius: 19px; color: var(--texto-3);
}
.campo-buscar svg { width: 16px; height: 16px; flex: none; }
.campo-buscar input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--texto); }
.campo-buscar input::placeholder { color: var(--texto-3); }
.mi-cuerpo { flex: 1; overflow: auto; padding: 12px 28px 20px; }
.mi-cuerpo h3 { margin: 14px 4px 8px; font-size: 14px; font-weight: 600; }
.mi-anclados { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; }
.mi-app {
  display: grid; justify-items: center; gap: 6px; padding: 12px 4px 10px; border-radius: 6px;
  font-size: 12px; text-align: center;
}
.mi-app svg { width: 34px; height: 34px; }
.mi-app:hover, .mi-item:hover, .mi-item.sel { background: var(--hover); }
.mi-recomendado { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; }
.mi-item {
  display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 6px; text-align: left; min-width: 0;
}
.mi-item .mi-mini { width: 36px; height: 36px; flex: none; border-radius: 6px; overflow: hidden; background: var(--ventana-3); }
.mi-item .mi-mini img { width: 100%; height: 100%; object-fit: cover; }
.mi-item .mi-mini svg { width: 36px; height: 36px; }
.mi-item b { display: block; font-weight: 500; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mi-item small { display: block; color: var(--texto-3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mi-item > span:last-child { min-width: 0; }
.mi-vacio { padding: 24px 4px; color: var(--texto-3); }
.mi-pie {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 28px; background: var(--hover);
}
.mi-usuario { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.mi-usuario i { width: 32px; height: 32px; border-radius: 50%; background: #131614; color: #4FD1B8; display: grid; place-items: center; }
.mi-usuario i .logo-bait { width: 20px; height: 7px; }
.mi-pie .barra-btn { width: 38px; height: 38px; }
.mi-pie .barra-btn svg { width: 18px; height: 18px; }

/* ───────── Menú contextual / desplegables ───────── */
.menu-contexto, .lista-panel {
  position: fixed; z-index: 950; min-width: 220px; padding: 5px;
  background: var(--vidrio-fuerte); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  border-radius: 8px; box-shadow: var(--sombra-pop); color: var(--texto);
  animation: pop .14s var(--ease-out);
}
@keyframes pop { from { opacity: 0; transform: scale(.97) translateY(-4px); } }
.menu-contexto button, .lista-panel button {
  width: 100%; display: flex; align-items: center; gap: 12px;
  height: 34px; padding: 0 12px; border-radius: 5px; text-align: left; font-size: 13px;
}
.menu-contexto button svg, .lista-panel button svg { width: 16px; height: 16px; color: var(--texto-2); flex: none; }
.menu-contexto button:hover, .lista-panel button:hover, .lista-panel button.foco { background: var(--hover); }
.menu-contexto hr { border: 0; height: 1px; background: var(--hover); margin: 4px 6px; }
.lista-panel button[aria-selected="true"] { color: var(--acento); }
.lista-panel button[aria-selected="true"] svg { color: var(--acento); }

/* ───────── Diálogos ───────── */
.dialogo-capa {
  position: fixed; inset: 0; z-index: 980; display: grid; place-items: center; padding: 16px;
  background: rgba(0, 0, 0, .35); animation: aparecer-rapido .15s;
}
@keyframes aparecer-rapido { from { opacity: 0; } }
.dialogo {
  width: min(420px, 100%); background: var(--ventana); color: var(--texto);
  border-radius: 12px; box-shadow: var(--sombra-pop); overflow: hidden;
  animation: abrir .2s var(--ease-out);
}
.dialogo-cuerpo { padding: 24px 24px 20px; }
.dialogo h3 { margin: 0 0 8px; font: 600 19px/1.3 var(--f-display); }
.dialogo p { margin: 0; color: var(--texto-2); }
.dialogo-pie { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 24px; background: var(--ventana-2); }

/* ───────── Avisos (toasts) y panel de notificaciones ───────── */
.avisos {
  position: absolute; right: 12px; bottom: calc(var(--barra-h) + 12px); z-index: 700;
  display: grid; gap: 8px; width: min(360px, calc(100vw - 24px));
}
.aviso {
  display: flex; gap: 12px; padding: 14px 16px;
  background: var(--vidrio-fuerte); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  border-radius: 10px; box-shadow: var(--sombra-pop);
  animation: deslizar .35s var(--ease-out); cursor: default;
}
.aviso.sale { animation: deslizar-fuera .25s var(--ease) forwards; }
@keyframes deslizar { from { opacity: 0; transform: translateX(40px); } }
@keyframes deslizar-fuera { to { opacity: 0; transform: translateX(40px); } }
.aviso-icono { width: 32px; height: 32px; flex: none; }
.aviso-icono svg { width: 32px; height: 32px; }
.aviso b { display: block; font-weight: 600; margin-bottom: 2px; }
.aviso p { margin: 0; color: var(--texto-2); font-size: 13px; }
.aviso[data-accion] { cursor: pointer; }

.panel-avisos {
  position: absolute; right: 12px; bottom: calc(var(--barra-h) + 12px); z-index: 600;
  width: min(380px, calc(100vw - 24px)); max-height: calc(100dvh - var(--barra-h) - 24px);
  display: flex; flex-direction: column; gap: 10px;
  animation: deslizar .25s var(--ease-out);
}
.pa-bloque { background: var(--vidrio-fuerte); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); border-radius: 12px; box-shadow: var(--sombra-pop); }
.pa-lista { overflow: auto; padding: 8px; }
.pa-lista h3 { margin: 8px 10px; font-size: 14px; font-weight: 600; }
.pa-lista .aviso { animation: none; background: var(--hover); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; margin-bottom: 6px; }
.pa-calendario { padding: 16px 18px 18px; }
.pa-calendario header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.pa-calendario header b { font: 600 15px var(--f-display); }
.pa-calendario header span { color: var(--texto-3); font-size: 12px; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; }
.cal span { width: 34px; height: 34px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; }
.cal .dia-sem { color: var(--texto-3); height: 26px; }
.cal .otro { color: var(--texto-3); opacity: .5; }
.cal .hoy { background: var(--acento); color: var(--acento-tinta); font-weight: 600; }

/* ───────── Contenido de apps: piezas comunes ───────── */
.app { height: 100%; display: flex; flex-direction: column; }
.herramientas {
  flex: none; display: flex; align-items: center; gap: 6px; padding: 8px 10px;
  background: var(--ventana);
}
.herr-btn {
  width: 32px; height: 32px; border-radius: 6px; display: grid; place-items: center; color: var(--texto-2);
}
.herr-btn svg { width: 17px; height: 17px; }
.herr-btn:hover:not(:disabled) { background: var(--hover); color: var(--texto); }
.herr-btn:disabled { opacity: .35; cursor: default; }
.herr-btn.activo { background: var(--activo); color: var(--acento); }
.ruta {
  flex: 1; min-width: 0; height: 32px; display: flex; align-items: center; gap: 4px; padding: 0 10px;
  background: var(--ventana-2); border-radius: 6px; font-size: 13px; white-space: nowrap; overflow: hidden;
}
.ruta button { padding: 2px 6px; border-radius: 4px; }
.ruta button:hover { background: var(--hover); }
.ruta i { color: var(--texto-3); font-style: normal; }
.herramientas .campo-buscar { width: 200px; height: 32px; border-radius: 6px; padding: 0 10px; }

/* Explorador de archivos */
.explorador { flex: 1; min-height: 0; display: grid; grid-template-columns: 196px 1fr; }
.ex-lateral { overflow: auto; padding: 8px; background: var(--ventana-2); }
.ex-lateral button {
  width: 100%; display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px;
  border-radius: 6px; font-size: 13px; text-align: left;
}
.ex-lateral button svg { width: 20px; height: 20px; flex: none; }
.ex-lateral button:hover { background: var(--hover); }
.ex-lateral button.activo { background: var(--activo); }
.ex-lateral small { margin-left: auto; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.ex-lateral hr { border: 0; height: 1px; background: var(--hover); margin: 8px 6px; }
.ex-zona { overflow: auto; padding: 16px; }
.ex-intro { margin: 0 0 16px; max-width: 64ch; color: var(--texto-2); }
.ex-intro b { display: block; font: 600 20px/1.25 var(--f-display); color: var(--texto); margin-bottom: 4px; }
.ex-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; }
.archivo {
  display: grid; gap: 8px; padding: 8px; border-radius: 8px; text-align: left; cursor: default;
  transition: background .12s;
}
.archivo:hover { background: var(--hover); }
.archivo.sel { background: var(--activo); }
.archivo .mini { aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; background: var(--ventana-3); }
.archivo .mini img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .4s var(--ease-out); }
.archivo:hover .mini img { transform: scale(1.03); }
.archivo b { font-weight: 500; font-size: 13px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.archivo small { color: var(--texto-3); font-size: 12px; }
.ex-lista .archivo { grid-template-columns: 56px 1fr auto; align-items: center; gap: 14px; padding: 6px 10px; }
.ex-lista .archivo .mini { aspect-ratio: 4 / 3; }
.ex-lista { grid-template-columns: 1fr; gap: 2px; }
.ex-lista .archivo small.der { font-family: var(--f-mono); font-size: 11.5px; }
.ex-grilla:not(.ex-lista) .archivo small.der { display: none; }
.estado-barra {
  flex: none; display: flex; justify-content: space-between; padding: 6px 14px;
  font-size: 12px; color: var(--texto-3); background: var(--ventana);
}

/* Documento (visor de servicio / producto / proyecto / noticia) */
.doc { max-width: 760px; margin: 0 auto; padding: 32px clamp(18px, 4vw, 44px) 56px; }
.doc-portada { border-radius: 10px; overflow: hidden; background: var(--ventana-3); margin-bottom: 28px; aspect-ratio: 16 / 9; }
.doc-portada img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.doc h1 {
  margin: 0 0 12px; font: 650 clamp(26px, 3.2vw, 36px)/1.12 var(--f-display);
  letter-spacing: -.02em; text-wrap: balance;
}
.doc .bajada { margin: 0 0 24px; font-size: 17px; line-height: 1.55; color: var(--texto-2); text-wrap: pretty; }
.doc h2 { margin: 32px 0 10px; font: 600 20px/1.3 var(--f-display); }
.doc h4 { margin: 24px 0 8px; font-size: 15px; font-weight: 600; }
.doc p { margin: 0 0 14px; line-height: 1.7; color: var(--texto-2); max-width: 70ch; }
.doc ul { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 8px; }
.doc li { position: relative; padding-left: 22px; line-height: 1.6; color: var(--texto-2); }
.doc li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--acento); }
.doc li strong { color: var(--texto); font-weight: 600; }
.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 2px; margin: 0 0 28px; border-radius: 10px; overflow: hidden; }
.datos div { padding: 12px 14px; background: var(--ventana-2); }
.datos dt { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--texto-3); margin-bottom: 2px; }
.datos dt svg { width: 14px; height: 14px; }
.datos dd { margin: 0; font-weight: 500; }
.datos a { color: var(--texto); text-underline-offset: 3px; }
.desafio { margin: 0 0 28px; padding: 18px 20px; background: var(--ventana-2); border-radius: 10px; }
.desafio h4 { margin: 0 0 6px; }
.desafio p { margin: 0; }
.doc-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.doc-fecha { display: block; margin-bottom: 10px; color: var(--texto-3); font-size: 13px; }

/* Bienvenida */
.bienvenida {
  min-height: 100%; display: grid; grid-template-columns: 1.15fr .85fr;
  background: var(--ventana);
}
.bv-texto { padding: clamp(28px, 5vw, 56px); display: flex; flex-direction: column; justify-content: center; }
.bv-texto .saludo { margin: 0 0 14px; font-size: 13px; color: var(--acento); font-weight: 500; }
.bv-texto h1 {
  margin: 0 0 16px; font: 700 clamp(34px, 4.6vw, 58px)/1 var(--f-display); letter-spacing: -.035em; text-wrap: balance;
}
.bv-texto h1 .subrayado { background: linear-gradient(var(--chispa), var(--chispa)) left 96% / 100% 4px no-repeat; padding-bottom: 6px; }
.bv-texto p { margin: 0 0 24px; max-width: 48ch; color: var(--texto-2); font-size: 15.5px; line-height: 1.6; }
.bv-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.bv-cifras { display: grid; grid-template-columns: repeat(4, auto); gap: 22px; margin-top: 36px; justify-content: start; }
.bv-cifras b { display: block; font: 650 26px/1 var(--f-display); letter-spacing: -.02em; }
.bv-cifras span { font-size: 12px; color: var(--texto-3); }
.bv-lado { background: var(--ventana-2); padding: 24px; display: flex; flex-direction: column; gap: 10px; overflow: auto; }
.bv-lado h3 { margin: 6px 4px 4px; font-size: 13px; font-weight: 600; color: var(--texto-2); }
.atajo {
  display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 10px; text-align: left;
  background: var(--ventana); transition: background .12s, transform .15s var(--ease-out);
}
.atajo:hover { background: var(--ventana-3); }
.atajo:active { transform: scale(.98); }
.atajo svg { width: 38px; height: 38px; flex: none; }
.atajo b { display: block; font-weight: 600; }
.atajo small { color: var(--texto-3); font-size: 12.5px; line-height: 1.4; display: block; }
.bv-pista { margin: auto 4px 0; padding-top: 10px; font-size: 12px; color: var(--texto-3); }

/* Acerca de BAIT */
.acerca { padding: 28px clamp(20px, 4vw, 40px) 40px; max-width: 820px; margin: 0 auto; }
.acerca-cab { display: flex; align-items: center; gap: 22px; margin-bottom: 28px; }
.acerca-cab .marca { width: 92px; height: 92px; border-radius: 22px; background: #131614; color: #4FD1B8; display: grid; place-items: center; flex: none; }
.acerca-cab .marca .logo-bait { width: 64px; height: 20px; }
.acerca-cab h1 { margin: 0 0 4px; font: 650 26px/1.15 var(--f-display); letter-spacing: -.02em; }
.acerca-cab p { margin: 0; color: var(--texto-2); }
.especs { margin: 0 0 28px; border-radius: 10px; overflow: hidden; display: grid; gap: 2px; }
.especs div { display: grid; grid-template-columns: 180px 1fr; gap: 16px; padding: 11px 16px; background: var(--ventana-2); }
.especs dt { color: var(--texto-3); }
.especs dd { margin: 0; font-weight: 500; }
.acerca h2 { margin: 30px 0 10px; font: 600 19px/1.3 var(--f-display); }
.acerca > p { color: var(--texto-2); line-height: 1.7; max-width: 68ch; }
.metodo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; counter-reset: paso; }
.metodo div { padding: 16px; background: var(--ventana-2); border-radius: 10px; counter-increment: paso; }
.metodo b { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; font-weight: 600; }
.metodo b::before { content: counter(paso); font: 600 13px var(--f-mono); color: var(--acento); }
.metodo p { margin: 0; color: var(--texto-2); font-size: 13.5px; line-height: 1.6; }
.plataformas { display: flex; flex-wrap: wrap; gap: 6px; }
.plataformas span { padding: 6px 12px; border-radius: 6px; background: var(--ventana-2); font-size: 13px; }

/* Noticias (lector) */
.lector { flex: 1; min-height: 0; display: grid; grid-template-columns: 320px 1fr; }
.lector-lista { overflow: auto; background: var(--ventana-2); padding: 8px; }
.nota {
  width: 100%; display: grid; grid-template-columns: 72px 1fr; gap: 12px; padding: 10px; border-radius: 8px; text-align: left;
}
.nota:hover { background: var(--hover); }
.nota.activo { background: var(--activo); }
.nota img { width: 72px; height: 54px; object-fit: cover; border-radius: 5px; background: var(--ventana-3); }
.nota b { font-weight: 500; font-size: 13px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nota small { display: block; margin-top: 3px; color: var(--texto-3); font-size: 12px; }
.lector-art { overflow: auto; }
.lector-volver { display: none; }

/* Contacto (correo) */
.correo { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 260px; }
.correo form { display: flex; flex-direction: column; min-height: 0; overflow: auto; }
.cf-fila { display: flex; align-items: center; gap: 12px; padding: 0 20px; min-height: 46px; background: var(--ventana); }
.cf-fila + .cf-fila { box-shadow: 0 -1px 0 var(--hover); }
.cf-fila label { width: 70px; flex: none; color: var(--texto-3); font-size: 13px; }
.cf-fila input { flex: 1; min-width: 0; height: 44px; border: 0; outline: 0; background: none; }
.cf-fila .fijo { font-weight: 500; }
.cf-fila .fijo small { color: var(--texto-3); font-weight: 400; }
.correo textarea {
  flex: 1; min-height: 160px; resize: none; border: 0; outline: 0; padding: 18px 20px;
  background: var(--ventana); line-height: 1.6; box-shadow: 0 -1px 0 var(--hover);
}
.correo textarea::placeholder, .cf-fila input::placeholder { color: var(--texto-3); }
.cf-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 20px; background: var(--ventana-2); }
.cf-acciones .error { color: var(--chispa); font-size: 13px; }
.correo aside { background: var(--ventana-2); padding: 20px; overflow: auto; }
.correo aside h3 { margin: 0 0 12px; font: 600 16px/1.3 var(--f-display); }
.canal {
  display: flex; align-items: center; gap: 12px; padding: 10px; margin: 0 -10px; border-radius: 8px;
  color: var(--texto); text-decoration: none;
}
.canal:hover { background: var(--hover); }
.canal svg { width: 32px; height: 32px; flex: none; }
.canal small { display: block; color: var(--texto-3); font-size: 12px; }
.correo aside p { color: var(--texto-3); font-size: 12.5px; line-height: 1.55; margin: 16px 0 0; }

/* Lista desplegable propia */
.lista {
  flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  height: 34px; padding: 0 10px; margin: 0 -10px; border-radius: 6px; text-align: left;
}
.lista:hover, .lista[aria-expanded="true"] { background: var(--hover); }
.lista svg { width: 16px; height: 16px; color: var(--texto-3); transition: transform .2s var(--ease-out); }
.lista[aria-expanded="true"] svg { transform: rotate(180deg); }
.lista .vacio { color: var(--texto-3); }

/* Terminal */
.terminal {
  height: 100%; padding: 14px 16px; overflow: auto; cursor: text;
  background: #0B0E0D; color: #D6DBD5; font: 13px/1.6 var(--f-mono);
}
.terminal .ln { white-space: pre-wrap; word-break: break-word; }
.terminal .pr { color: #4FD1B8; }
.terminal .dim { color: #7E857F; }
.terminal .ok { color: #4FD1B8; }
.terminal .warn { color: #FF8A4C; }
.terminal .entrada { display: flex; gap: 8px; }
.terminal input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: #EEEFEA; font: inherit; caret-color: #4FD1B8; }
.terminal a { color: #4FD1B8; }

/* Papelera */
.papelera-vacia { display: grid; place-items: center; align-content: center; gap: 12px; height: 100%; text-align: center; padding: 24px; color: var(--texto-2); }
.papelera-vacia svg { width: 72px; height: 72px; }
.papelera-vacia b { font: 600 18px var(--f-display); color: var(--texto); }

/* Configuración */
.ajustes { padding: 24px clamp(18px, 4vw, 36px) 36px; max-width: 760px; }
.ajustes h1 { margin: 0 0 20px; font: 650 26px/1.2 var(--f-display); }
.ajustes h2 { margin: 26px 0 10px; font-size: 14px; font-weight: 600; }
.fondos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.fondo-op { position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--ventana-3) center / cover; outline-offset: 2px; }
.fondo-op[aria-pressed="true"] { outline: 3px solid var(--acento); }
.fondo-op span {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 8px 6px; font-size: 12px; color: #fff; text-align: left;
  background: linear-gradient(transparent, rgba(0, 0, 0, .6));
}
.opcion { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; background: var(--ventana-2); border-radius: 8px; margin-bottom: 4px; }
.opcion b { display: block; font-weight: 500; }
.opcion small { color: var(--texto-3); font-size: 12.5px; }
.segmentado { display: flex; padding: 3px; background: var(--ventana-3); border-radius: 8px; gap: 2px; flex: none; }
.segmentado button { height: 30px; padding: 0 14px; border-radius: 6px; font-size: 13px; color: var(--texto-2); }
.segmentado button[aria-pressed="true"] { background: var(--ventana); color: var(--texto); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }

.sin-js { position: fixed; inset: 0; display: grid; place-content: center; padding: 24px; text-align: center; background: #0F1211; color: #EEEFEA; }

/* ───────── Celular y pantallas angostas ───────── */
@media (max-width: 760px) {
  :root { --barra-h: 58px; }
  .iconos {
    right: 0; padding: 18px 12px; grid-auto-flow: row; grid-template-rows: none;
    grid-template-columns: repeat(4, 1fr); grid-auto-rows: 100px; gap: 6px 0;
  }
  .icono { width: auto; }
  .icono svg { width: 54px; height: 54px; }
  .ventana { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; border-radius: 0; min-width: 0; box-shadow: none; animation: abrir-cel .28s var(--ease-out); }
  @keyframes abrir-cel { from { opacity: 0; transform: translateY(24px); } }
  .ventana .borde, .vt-botones .vt-max { display: none; }
  .ventana-titulo { height: 48px; padding-top: env(safe-area-inset-top); }
  .barra { padding-bottom: env(safe-area-inset-bottom); height: calc(var(--barra-h) + env(safe-area-inset-bottom)); justify-content: flex-start; padding-left: 6px; }
  .barra-centro { min-width: 0; overflow-x: auto; scrollbar-width: none; padding-right: 76px; }
  .barra-bandeja { right: 4px; gap: 0; padding: 0 8px; }
  .bandeja-iconos { display: none; }
  .menu-inicio { left: 8px; right: 8px; width: auto; transform: none; animation: subir-cel .26s var(--ease-out); }
  @keyframes subir-cel { from { opacity: 0; transform: translateY(24px); } }
  .mi-buscar { padding: 18px 16px 6px; }
  .mi-cuerpo { padding: 8px 16px 16px; }
  .mi-anclados { grid-template-columns: repeat(4, 1fr); }
  .mi-recomendado { grid-template-columns: 1fr; }
  .mi-pie { padding: 10px 16px; }
  .explorador { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .ex-lateral { display: flex; gap: 4px; overflow-x: auto; padding: 6px 8px; scrollbar-width: none; }
  .ex-lateral button { width: auto; flex: none; }
  .ex-lateral hr, .ex-lateral small { display: none; }
  .ex-grilla { grid-template-columns: 1fr 1fr; }
  .herramientas .campo-buscar { width: 120px; }
  .herramientas .herr-nav { display: none; }
  .bienvenida { grid-template-columns: 1fr; }
  .bv-cifras { grid-template-columns: repeat(2, auto); gap: 16px 28px; }
  .lector { grid-template-columns: 1fr; }
  .lector.leyendo .lector-lista { display: none; }
  .lector:not(.leyendo) .lector-art { display: none; }
  .lector-volver { display: inline-flex; margin: 12px 0 0 12px; }
  .correo { grid-template-columns: 1fr; grid-template-rows: auto auto; overflow: auto; }
  .correo form { overflow: visible; }
  .metodo { grid-template-columns: 1fr; }
  .especs div { grid-template-columns: 1fr; gap: 0; }
  .avisos { right: 8px; left: 8px; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
html.sin-animaciones *, html.sin-animaciones *::before, html.sin-animaciones *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }

/* ───────── Versión WordPress ───────── */
.barra-clasico {
  position: absolute; left: 8px; top: 7px; bottom: 7px;
  display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 6px;
  font-size: 13px; color: var(--texto-2); transition: background .12s, color .12s;
}
.barra-clasico svg { width: 16px; height: 16px; }
.barra-clasico:hover { background: var(--hover); color: var(--texto); }
.mi-pie { gap: 10px; }
.mi-usuario { margin-right: auto; }
.mi-clasico { height: 34px; background: transparent; color: var(--texto-2); font-size: 13px; }
.mi-clasico:hover { background: var(--hover); color: var(--texto); }

/* Contenido HTML que viene del editor de WordPress */
.doc h3 { margin: 26px 0 8px; font: 600 17px/1.35 var(--f-display); }
.doc ol { margin: 0 0 18px; padding-left: 22px; color: var(--texto-2); display: grid; gap: 8px; }
.doc ol li { padding-left: 4px; }
.doc ol li::before { content: none; }
.doc a { color: var(--acento); text-underline-offset: 3px; }
.doc strong, .doc b { color: var(--texto); font-weight: 600; }
.doc img { height: auto; border-radius: 8px; }
.doc figure { margin: 22px 0; }
.doc figcaption { margin-top: 6px; font-size: 13px; color: var(--texto-3); }
.doc blockquote { margin: 22px 0; padding: 4px 0 4px 18px; box-shadow: inset 3px 0 0 var(--ventana-3); color: var(--texto-2); font-style: italic; }
.doc table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 14px; }
.doc th, .doc td { padding: 8px 10px; text-align: left; background: var(--ventana-2); border-bottom: 2px solid var(--ventana); }
.doc .wp-block-buttons, .doc .wp-block-button { margin: 18px 0; }

/* Contacto conectado al formulario del sitio */
.cf-fila .cf-cap { flex: none; font-weight: 500; font-variant-numeric: tabular-nums; }
.cf-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-acciones .btn[disabled] { opacity: .6; cursor: wait; }
.cf-listo { flex: 1; display: grid; place-content: center; justify-items: start; gap: 10px; padding: 32px clamp(20px, 5vw, 48px); background: var(--ventana); }
.cf-listo b { font: 650 24px/1.2 var(--f-display); letter-spacing: -.01em; }
.cf-listo p { margin: 0; max-width: 48ch; color: var(--texto-2); line-height: 1.6; }
.cf-listo .ticket { font-family: var(--f-mono); font-size: 13px; color: var(--acento); }
.cf-listo div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

@media (max-width: 760px) {
  .barra-clasico { display: none; }
  .mi-clasico { padding: 0 10px; }
}
@media (max-width: 1100px) and (min-width: 761px) {
  .barra-clasico span { display: none; }
}

/* Ventana de datos antes de WhatsApp */
.dialogo-wa { width: min(440px, 100%); }
.dw-cab svg { width: 44px; height: 44px; margin-bottom: 14px; }
.dialogo-wa > .dialogo-cuerpo > p { margin-bottom: 18px; line-height: 1.55; }
.dw-campos { display: grid; gap: 12px; }
.dw-campos label { display: grid; gap: 6px; font-size: 13px; color: var(--texto-3); }
.dw-campos input {
  height: 42px; padding: 0 12px; border: 0; border-radius: 8px; outline: 0;
  background: var(--ventana-2); color: var(--texto); font-size: 15px;
  box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .15s;
}
.dw-campos input:focus { box-shadow: inset 0 0 0 2px var(--acento); }
.dw-error { min-height: 20px; margin: 10px 0 0 !important; color: var(--chispa) !important; font-size: 13px; }

/* Contenido de la página en HTML para buscadores y lectores de pantalla
   (template-parts/escritorio-seo.php): el mismo texto que muestran las ventanas. */
.seo-contenido {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Íconos, archivos y barras se comportan como en un sistema: el doble clic
   abre, no selecciona el texto. El contenido de las ventanas sí se puede copiar. */
.iconos, .icono, .barra, .menu-inicio, .mi-app, .mi-item, .ex-lateral, .archivo, .nota,
.herramientas, .estado-barra, .ventana-titulo, .atajo, .menu-contexto, .lista-panel, .fondo-op {
  -webkit-user-select: none;
  user-select: none;
}

/* ───────── Celular: ventanas como pantallas de una app ───────── */
.vt-atras { display: none; }
@media (max-width: 760px) {
  .ventana-titulo { height: calc(52px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 12px 0 0; gap: 4px; }
  .vt-atras {
    display: grid; place-items: center; flex: none; width: 48px; height: 48px; margin-left: 2px;
    color: var(--texto); border-radius: 10px;
  }
  .vt-atras svg { width: 22px; height: 22px; }
  .vt-atras:active { background: var(--hover); }
  .ventana-titulo .vt-icono, .vt-botones { display: none; }
  .ventana-titulo h2 { font: 600 16px/1.2 var(--f-display); }
  .ventana-cuerpo { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .doc { padding: 20px 18px 40px; }
  .doc h1 { font-size: 26px; }
  .doc .bajada { font-size: 16px; }
  .doc-portada { margin-bottom: 20px; border-radius: 8px; }
  .lector-volver { display: none !important; }

  /* Avisos arriba y compactos: no tapan lo que se está leyendo */
  .avisos { top: calc(8px + env(safe-area-inset-top)); bottom: auto; left: 8px; right: 8px; width: auto; }
  .aviso { padding: 10px 12px; gap: 10px; animation-name: bajar; }
  .aviso.sale { animation-name: subir-fuera; }
  .aviso-icono, .aviso-icono svg { width: 26px; height: 26px; }
  .aviso p { font-size: 12.5px; }
}
@keyframes bajar { from { opacity: 0; transform: translateY(-16px); } }
@keyframes subir-fuera { to { opacity: 0; transform: translateY(-16px); } }

/* ───────── Pantallas táctiles (iPhone y Android) ───────── */
button, a, .icono, .archivo, .nota, .aviso[data-accion], [role="button"] { touch-action: manipulation; }
@media (hover: none), (pointer: coarse) {
  .icono, .aviso[data-accion] { cursor: pointer; }
  /* iOS hace zoom al enfocar campos de menos de 16px y descuadra la pantalla */
  input, textarea, .campo-buscar input, .cf-fila input, .dw-campos input, .terminal input { font-size: 16px !important; }
  /* Sin mouse, el :hover queda pegado después de tocar */
  .icono:hover { background: transparent; }
  .icono:active { background: rgba(255, 255, 255, .12); }
  .archivo:hover .mini img { transform: none; }
}

/* ═════════ Vista de celular: pantalla de inicio de teléfono ═════════ */
#ventanas { z-index: 2; }
.m-estado, .m-inicio, .m-abajo, .m-indicador, .pista-movil { display: none; }

@media (max-width: 760px) {
  :root { --barra-h: 0px; --m-estado: calc(env(safe-area-inset-top) + 34px); }
  .barra, .iconos { display: none !important; }
  #ventanas { inset: var(--m-estado) 0 0 0; }

  /* Barra de estado */
  .m-estado {
    position: absolute; z-index: 650; top: 0; left: 0; right: 0; height: var(--m-estado);
    display: flex; align-items: center; justify-content: space-between;
    padding: env(safe-area-inset-top) 26px 0 30px;
    font: 600 15px/1 var(--f-ui); font-variant-numeric: tabular-nums; color: var(--texto);
    transition: background .2s;
  }
  .m-estado-iconos { display: flex; gap: 6px; }
  .m-estado-iconos svg { width: 17px; height: 17px; }
  #escritorio.con-ventanas .m-estado { background: var(--titulo); }

  /* Pantalla de inicio */
  .m-inicio {
    display: block; position: absolute; top: var(--m-estado); left: 0; right: 0;
    bottom: calc(env(safe-area-inset-bottom) + 150px);
    overflow-y: auto; padding: 10px 18px 16px; scrollbar-width: none;
  }
  .m-widget, .m-noticia, .m-dock, .m-buscar {
    background: var(--vidrio); -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4);
  }
  .m-widget { border-radius: 24px; padding: 16px 16px 14px; margin-bottom: 22px; }
  .m-widget-cuerpo { display: grid; justify-items: start; gap: 6px; width: 100%; text-align: left; }
  .m-widget-marca { color: var(--acento); }
  .m-widget-marca .logo-bait { width: 58px; height: 18px; }
  .m-widget-saludo { font-size: 12.5px; color: var(--texto-2); }
  .m-widget strong { font: 700 25px/1.05 var(--f-display); letter-spacing: -.03em; color: var(--texto); text-wrap: balance; }
  .m-widget strong span { color: var(--acento); }
  .m-widget-acciones { display: flex; gap: 8px; margin-top: 14px; }
  .m-widget-acciones .btn { height: 34px; padding: 0 16px; border-radius: 17px; font-size: 13.5px; }

  .m-apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 6px; margin: 0 0 22px; padding: 0; list-style: none; }
  .m-app, .m-dock-app { display: grid; justify-items: center; gap: 6px; width: 100%; -webkit-tap-highlight-color: transparent; }
  .m-ico { display: block; width: 60px; height: 60px; transition: transform .15s var(--ease-out), filter .15s; }
  .m-ico svg { width: 60px; height: 60px; }
  .m-app:active .m-ico, .m-dock-app:active .m-ico { transform: scale(.9); filter: brightness(.85); }
  .m-nombre { max-width: 100%; font-size: 12px; line-height: 1.2; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html[data-tema="claro"] .m-nombre { color: var(--texto); text-shadow: none; }

  .m-noticia { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border-radius: 22px; text-align: left; }
  .m-noticia:active { transform: scale(.98); }
  .m-noticia img { width: 64px; height: 64px; flex: none; object-fit: cover; border-radius: 14px; }
  .m-noticia small { display: block; margin-bottom: 3px; font-size: 11.5px; color: var(--texto-3); }
  .m-noticia b { font-weight: 600; font-size: 14px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

  /* Buscador y dock */
  .m-abajo {
    display: grid; justify-items: center; gap: 12px; position: absolute; left: 10px; right: 10px;
    bottom: calc(env(safe-area-inset-bottom) + 10px);
  }
  .m-buscar { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 16px; border-radius: 17px; font-size: 13.5px; font-weight: 500; color: var(--texto); }
  .m-buscar svg { width: 15px; height: 15px; }
  .m-dock { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; padding: 14px 12px; border-radius: 30px; }
  .m-dock .m-nombre { display: none; }

  /* Barra de inicio (home indicator) sobre las apps abiertas */
  .m-indicador {
    position: absolute; z-index: 660; left: 50%; bottom: env(safe-area-inset-bottom); transform: translateX(-50%);
    width: 160px; height: 24px; display: none; place-items: center;
  }
  .m-indicador::before { content: ""; width: 134px; height: 5px; border-radius: 3px; background: var(--texto); opacity: .85; }
  #escritorio.con-ventanas .m-indicador { display: grid; }

  /* Apps a pantalla completa, bajo la barra de estado */
  .ventana { padding-bottom: calc(env(safe-area-inset-bottom) + 30px); background: var(--ventana); }
  .ventana-cuerpo { scroll-padding-bottom: 24px; }
  .ventana-titulo { height: 48px; padding: 0 0 0 2px; }
  .ventana-titulo h2 { text-align: center; margin-right: 50px; }

  /* Buscador del teléfono: hoja que sube desde abajo */
  .menu-inicio { top: var(--m-estado); bottom: 0; left: 0; right: 0; max-height: none; border-radius: 22px 22px 0 0; animation: hoja .34s cubic-bezier(.2,.9,.25,1); }
  .mi-pie { padding-bottom: calc(env(safe-area-inset-bottom) + 12px); }
  /* Centro de notificaciones: baja desde la barra de estado */
  .panel-avisos { top: calc(var(--m-estado) + 6px); bottom: auto; left: 8px; right: 8px; width: auto; max-height: calc(100dvh - var(--m-estado) - 20px); animation: bajar .28s cubic-bezier(.2,.9,.25,1); }
  .avisos { top: calc(var(--m-estado) + 6px); }

  /* Pantalla de bloqueo del teléfono */
  #bloqueo.bloqueo-movil { touch-action: none; will-change: transform; }
  #bloqueo.bloqueo-movil .ingreso, #bloqueo.bloqueo-movil .pista-pc { display: none; }
  #bloqueo.bloqueo-movil .pista-movil { display: block; animation: latido 2.4s infinite var(--ease); }
  #bloqueo.bloqueo-movil .bloqueo-reloj { top: calc(env(safe-area-inset-top) + 9vh); display: flex; flex-direction: column-reverse; }
  #bloqueo.bloqueo-movil .bloqueo-reloj p { margin: 0 0 4px; font-size: 18px; }
  #bloqueo.bloqueo-movil .bloqueo-reloj time { font-size: 92px; font-weight: 600; }
  #bloqueo.bloqueo-movil .bloqueo-pie { bottom: calc(env(safe-area-inset-bottom) + 18px); }
  #bloqueo.bloqueo-movil .bloqueo-pie::after { content: ""; display: block; width: 134px; height: 5px; margin: 16px auto 0; border-radius: 3px; background: rgba(238, 239, 234, .85); }
}
@keyframes hoja { from { transform: translateY(100%); } }

@media (max-width: 760px) {
  /* Explorador como app de teléfono: sin ruta ni barra de estado de PC */
  .app .ruta, .app .estado-barra { display: none; }
  .herramientas .campo-buscar { flex: 1; width: auto; }
}

#bloqueo, .m-estado, .m-inicio, .m-abajo, .m-indicador { -webkit-user-select: none; user-select: none; }

@media (max-width: 760px) {
  /* Contacto en el celular: todo en una sola columna que se desplaza; antes el
     bloque de canales tapaba la verificación y el botón Enviar. */
  .correo { display: block; overflow-y: auto; }
  .correo form { min-height: auto; overflow: visible; }
  .correo textarea { flex: none; min-height: 140px; }
}