/* [Pulso-Supabase] 🎓 (9-nov) Pulso Aprende: la ventana del video (public/aprende-ver.js) y los botones «▶ ¿Cómo se hace?» (public/aprende-botones.js).
 *  Usa los colores de la app (--surface, --t1, --t2, --border) y en /aprende los suyos (--ap-*). Claro y oscuro. */
.ap-ov { position: fixed; inset: 0; z-index: 9900; background: rgba(8, 10, 22, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .2s; }
.ap-ov.on { opacity: 1; }
.ap-modal { --ap-ms: var(--ap-s, var(--surface, #fff)); --ap-mt1: var(--ap-t1, var(--t1, #151a2d)); --ap-mt2: var(--ap-t2, var(--t2, #4f586c)); --ap-mbd: var(--ap-bd, var(--border, #dde2ec));
  position: fixed; z-index: 9910; left: 50%; top: 50%; width: min(1040px, 94vw); max-height: 94vh; max-height: 94dvh; display: flex; flex-direction: column;
  background: var(--ap-ms); color: var(--ap-mt1); border: 1px solid var(--ap-mbd); border-radius: 22px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6); overflow: hidden;
  transform: translate(-50%, -48%) scale(.98); opacity: 0; transition: opacity .2s, transform .25s cubic-bezier(.2, .8, .2, 1);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif; }
.ap-modal.on { opacity: 1; transform: translate(-50%, -50%); }
.ap-modal[hidden], .ap-ov[hidden] { display: none; }
.ap-m-cab { display: flex; align-items: center; gap: 12px; padding: 14px 14px 12px 20px; border-bottom: 1px solid var(--ap-mbd); flex: none; }
.ap-m-tt { flex: 1; min-width: 0; }
.ap-m-mod { display: block; font-size: 12px; font-weight: 700; color: var(--ap-mt2); letter-spacing: .02em; }
.ap-m-cab h2 { margin: 2px 0 0; font-size: 19px; line-height: 1.25; font-weight: 800; }
.ap-m-x { flex: none; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--ap-mbd); background: transparent; color: var(--ap-mt1); font-size: 18px; cursor: pointer; }
.ap-m-x:hover, .ap-m-x:focus-visible { background: color-mix(in srgb, #a855f7 14%, transparent); }
.ap-m-cuerpo { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ap-m-vid { background: #05060c; display: flex; justify-content: center; flex: none; }
.ap-m-vid video { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: 70vh; max-height: 70dvh; background: #05060c; }
.ap-modal[data-fmt="celular"] .ap-m-vid video { width: auto; height: min(72vh, 760px); height: min(72dvh, 760px); aspect-ratio: 9 / 16; max-width: 100%; }
.ap-m-info { padding: 14px 20px 18px; display: grid; gap: 12px; }
.ap-m-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ap-m-dur { font-size: 13px; font-weight: 700; color: var(--ap-mt2); margin-right: auto; }
.ap-m-fmt { display: inline-flex; padding: 3px; border-radius: 12px; background: color-mix(in srgb, var(--ap-mt2) 12%, transparent); }
.ap-m-fmt[hidden] { display: none; }
.ap-m-fmt button { border: 0; background: transparent; color: var(--ap-mt2); font: inherit; font-weight: 700; font-size: 13px; line-height: 1; padding: 8px 12px; border-radius: 9px; cursor: pointer; }
.ap-m-fmt button.on { background: var(--ap-ms); color: var(--ap-mt1); box-shadow: 0 2px 8px -3px rgba(0, 0, 0, .35); }
.ap-m-ensena { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ap-mt2); }
.ap-m-mas:empty { display: none; }
.ap-m-mas > b { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ap-mt2); margin-bottom: 8px; }
.ap-m-mas > div { display: flex; flex-wrap: wrap; gap: 8px; }
.ap-m-mas button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--ap-mbd); background: transparent; color: var(--ap-mt1); border-radius: 999px; padding: 8px 12px; font: inherit; font-weight: 600; font-size: 13px; line-height: 1.2; cursor: pointer; text-align: left; }
.ap-m-mas button span { color: #a855f7; font-size: 11px; }
.ap-m-mas button small { color: var(--ap-mt2); font-weight: 600; }
.ap-m-mas button:hover, .ap-m-mas button:focus-visible { border-color: #a855f7; background: color-mix(in srgb, #a855f7 10%, transparent); }
.ap-m-pie { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ap-m-todos { font-size: 13.5px; font-weight: 700; color: #a855f7; text-decoration: none; }
.ap-m-todos:hover { text-decoration: underline; }
.ap-m-todos[hidden] { display: none; }
.ap-m-extra { margin-left: auto; font-size: 12.5px; color: var(--ap-mt2); display: inline-flex; align-items: center; gap: 8px; }
.ap-m-extra button { border: 1px solid var(--ap-mbd); background: transparent; color: var(--ap-mt1); border-radius: 9px; padding: 6px 10px; font: inherit; font-weight: 700; font-size: 12px; line-height: 1; cursor: pointer; }
/* computador + video de celular: el video a la izquierda y lo demás al lado */
@media (min-width: 760px) {
  .ap-modal[data-fmt="celular"] { width: min(860px, 94vw); }
  .ap-modal[data-fmt="celular"] .ap-m-cuerpo { flex-direction: row; }
  .ap-modal[data-fmt="celular"] .ap-m-vid { flex: none; padding: 0; }
  .ap-modal[data-fmt="celular"] .ap-m-info { flex: 1; align-content: start; overflow-y: auto; }
}
/* celular: la ventana ocupa toda la pantalla */
@media (max-width: 759px) {
  .ap-modal { left: 0; top: 0; width: 100%; height: 100%; max-height: none; border-radius: 0; border: 0; transform: translateY(16px); }
  .ap-modal.on { transform: none; }
  .ap-m-cab { padding: calc(10px + env(safe-area-inset-top, 0px)) 10px 10px 16px; }
  .ap-m-cab h2 { font-size: 17px; }
  .ap-modal[data-fmt="celular"] .ap-m-vid video { height: min(64vh, 620px); height: min(64dvh, 620px); }
  .ap-m-info { padding: 12px 16px calc(18px + env(safe-area-inset-bottom, 0px)); }
}
html.ap-abierto, html.ap-abierto body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .ap-ov, .ap-modal { transition: none; } }

/* ── ▶ ¿Cómo se hace? (dentro de la app) ── el texto va por CSS (attr): el título de la pantalla no cambia para los lectores de pantalla */
.ap-btn { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px 0 7px; margin-left: 8px; vertical-align: 2px; border-radius: 999px;
  border: 1.5px solid color-mix(in srgb, #a855f7 55%, transparent); background: color-mix(in srgb, #a855f7 11%, transparent); color: #9333ea;
  letter-spacing: 0; text-transform: none; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s, transform .15s; }
button.ap-btn.ap-btn { font: 700 12px/1 system-ui, -apple-system, "Segoe UI", sans-serif; }   /* (más fuerte que «.es button { font: inherit }» de Estudio y parecidos) */
:root[data-theme="dark"] .ap-btn { color: #d8b4fe; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ap-btn { color: #d8b4fe; } }
.ap-btn svg { width: 10px; height: 10px; fill: currentColor; flex: none; }
.ap-btn .ap-btn-t::after { content: attr(data-t); }
.ap-btn:hover, .ap-btn:focus-visible { background: linear-gradient(135deg, #f43f5e, #a855f7); color: #fff; border-color: transparent; transform: translateY(-1px); }
.ap-btn[hidden] { display: none; }
@media (pointer: coarse) { .ap-btn { height: 28px; } }
@media (max-width: 759px) { .ap-btn .ap-btn-t::after { content: attr(data-c); } }
/* en la barra del buscador de la bandeja: solo el ▶, redondo como el «?» de al lado */
.cf-toolbar .ap-btn-tb { flex: none; align-self: center; width: 26px; height: 26px; padding: 0; margin-left: 0; justify-content: center; vertical-align: 0; opacity: .85; }
.cf-toolbar .ap-btn-tb .ap-btn-t { display: none; }
.cf-toolbar .ap-btn-tb:hover, .cf-toolbar .ap-btn-tb:focus-visible { opacity: 1; }
@media (pointer: coarse) { .cf-toolbar .ap-btn-tb { width: 30px; height: 30px; } }
/* en el celular la barra ya va llena (buscador, días, «?» y Filtros): el ▶ achicaría el buscador. El video de la bandeja queda en la hoja del «?» */
@media (max-width: 759px) { .cf-toolbar .ap-btn-tb { display: none; } }
/* arriba en Pulpo, Vitrina y Estudio: del alto de sus botones; en el celular solo el ▶ */
.ap-btn-top { height: 34px; padding: 0 13px 0 10px; margin: 0 6px 0 0; vertical-align: middle; flex: none; }
button.ap-btn.ap-btn-top { font-size: 13px; }
.ap-btn-top svg { width: 11px; height: 11px; }
@media (max-width: 759px) { .ap-btn-top { width: 34px; padding: 0; justify-content: center; } .ap-btn-top .ap-btn-t { display: none; } }
/* hoja de ayuda «?», perfil y menús */
.ap-ayu { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed color-mix(in srgb, #a855f7 30%, transparent); }
.ap-ayu .cf-btn { text-decoration: none; }
a.ap-mm, a.ap-pf, a.ap-hx { text-decoration: none; }
#cf-mmenu a.ap-mm { display: flex; align-items: center; justify-content: center; text-align: center; }
.cf-hx-pop .ap-hx-i { display: inline-grid; place-items: center; width: 20px; font-size: 16px; line-height: 1; }
/* 🎓 (9-nov) Configuración → Sistema → «🎓 Pulso Aprende» (public/aprende-cfg.js): qué videos y secciones ve el negocio */
#cf-aprende-caja { display: grid; gap: 12px; }
#cf-aprende-caja .cf-cfg-card, #cf-aprende-caja .cf-aviso { margin: 0; }   /* (el espacio lo da la cuadrícula) */
.ap-cfg-negs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ap-cfg-negs .cf-sub { margin-right: 2px; }
.ap-cfg-gen { display: grid; gap: 10px; padding: 14px 16px; }
.ap-cfg-gen-h { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.ap-cfg-gen-h > div { flex: 1 1 260px; min-width: 0; }
.ap-cfg-gen-h h3 { margin: 0 0 4px; font-size: 15px; }
.ap-cfg-gen-h p { margin: 0; }
.ap-cfg-gen-h a { text-decoration: none; }
.ap-cfg-mods { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); align-items: start; }
.ap-cfg-mod { padding: 12px; }
.ap-cfg-mod-h { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.ap-cfg-mod-h h3 { margin: 0; font-size: 14.5px; line-height: 1.25; }
.ap-cfg-mod-h p { margin: 2px 0 0; font-size: 12px; color: var(--t2); line-height: 1.3; }
.ap-cfg-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-size: 18px; background: color-mix(in srgb, #a855f7 12%, transparent); }
.ap-cfg-vids { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.ap-cfg-v { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 5px 4px; border-radius: 10px; transition: opacity .15s; }
.ap-cfg-v:hover { background: color-mix(in srgb, var(--t2) 7%, transparent); }
.ap-cfg-pos { position: relative; width: 72px; aspect-ratio: 16 / 9; padding: 0; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; background: #0b0d18; cursor: pointer; }
.ap-cfg-pos img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ap-cfg-pos i { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-size: 12px; color: #fff; background: rgba(8, 10, 22, .28); transition: background .15s; }
.ap-cfg-pos:hover i, .ap-cfg-pos:focus-visible i { background: linear-gradient(135deg, rgba(244, 63, 94, .6), rgba(168, 85, 247, .6)); }
.ap-cfg-t { min-width: 0; }
.ap-cfg-t b { display: block; font-size: 13px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-cfg-t small { display: block; font-size: 11.5px; color: var(--t2); line-height: 1.3; }
.ap-cfg-off .ap-cfg-pos img { filter: grayscale(1); opacity: .55; }
.ap-cfg-v.ap-cfg-off .ap-cfg-t b { color: var(--t2); }
.ap-cfg-mod.ap-cfg-off .ap-cfg-ico { filter: grayscale(1); opacity: .6; }
@media (max-width: 759px) { .ap-cfg-t b { white-space: normal; } .ap-cfg-v { grid-template-columns: 64px minmax(0, 1fr) auto; } .ap-cfg-pos { width: 64px; } }