:root{
      --green:#39A900;
      --bg:#ffffff;
      --text:#0f172a;
      --muted:#64748b;
      --card:#ffffff;
      --border:#e2e8f0;
      --shadow: 0 8px 24px rgba(15,23,42,.08);
      --shadow2: 0 6px 18px rgba(15,23,42,.06);
      --radius:16px;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      background:var(--bg);
      color:var(--text);
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
      line-height:1.35;
    }
    a{color:var(--green); text-decoration:none}
    a:hover{text-decoration:underline}

    /* Encabezado institucional (offline) */
    .instTopbar{
      width:100%;
      background:#fff;
      border-bottom:1px solid var(--border);
    }
    .instInner{
      width:90vw;
      max-width:none;
      margin:0 auto;
      padding:10px 16px 8px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
    }
    .instLeft{flex:0 0 auto}
    .instLeft img{height:44px;width:auto;display:block}
    .instCenter{
      flex:1 1 auto;
      text-align:center;
      min-width:240px;
    }
    .instTopText{
      font-size:13px;
      font-weight:700;
      color:#0f172a;
      line-height:1.2;
    }
    .instName{
      margin-top:2px;
      font-size:18px;
      font-weight:900;
      color:var(--green);
      letter-spacing:.2px;
    }
    .instRight{
      flex:0 0 auto;
      font-size:13px;
      font-weight:700;
      color:#0f172a;
      text-align:right;
      white-space:nowrap;
    }
    .instBar{
      height:10px;
      background:var(--green);
    }

    .wrap{width:90vw;max-width:none;margin:0 auto;padding:18px 16px 32px}
    header{
      display:flex; gap:14px; align-items:flex-start; justify-content:space-between;
      padding:14px 16px;
      border:1px solid var(--border);
      border-radius:var(--radius);
      box-shadow:var(--shadow2);
      background:linear-gradient(180deg, rgba(var(--brand-rgb),.06), rgba(var(--brand-rgb),0));
      position:sticky; top:0; z-index:5; backdrop-filter:saturate(1.2);
    }
    .title{
      display:flex; flex-direction:column; gap:6px;
    }
    .title h1{
      margin:0;
      font-size:20px;
      letter-spacing:.2px;
    }
    .subtitle{
      margin:0; color:var(--muted); font-size:13px;
    }
    .pills{display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end}
    .pill{
      font-size:12px;
      padding:8px 10px;
      border-radius:999px;
      border:1px solid var(--border);
      background:#fff;
      box-shadow: 0 2px 10px rgba(15,23,42,.04);
      white-space:nowrap;
    }
    .pill strong{color:var(--green)}
    .grid{
      display:grid;
      grid-template-columns: 1fr;
      gap:14px;
      margin-top:14px;
    }
    @media (min-width: 980px){
      .grid{grid-template-columns: 1.1fr .9fr}
    }

    .card{
      border:1px solid var(--border);
      border-radius:var(--radius);
      background:var(--card);
      box-shadow:var(--shadow2);
      overflow:hidden;
    }
    .card .hd{
      padding:12px 14px;
      border-bottom:1px solid var(--border);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }
    .card .hd h2{
      margin:0;
      font-size:14px;
      letter-spacing:.2px;
      display:flex; align-items:center; gap:8px;
    }
    .badge{
      font-size:12px;
      padding:6px 10px;
      border-radius:999px;
      border:1px solid rgba(var(--brand-rgb),.25);
      background:rgba(var(--brand-rgb),.08);
      color: #14532d;
      white-space:nowrap;
    }
    .card .bd{padding:14px}
    .muted{color:var(--muted)}
    .row{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
    .row > *{min-width:0}
    .spacer{flex:1}
    .btn{
      appearance:none;
      border:1px solid var(--green);
      background:var(--green);
      color:#fff;
      padding:10px 12px;
      border-radius:12px;
      font-weight:650;
      font-size:13px;
      cursor:pointer;
      box-shadow: 0 8px 18px rgba(var(--brand-rgb),.22);
      transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
    }
    .btn:hover{transform: translateY(-1px); box-shadow: 0 10px 22px rgba(var(--brand-rgb),.28)}
    .btn:active{transform: translateY(0); box-shadow: 0 6px 14px rgba(var(--brand-rgb),.18)}
    .btn.secondary{
      background:#fff;
      color:var(--green);
      box-shadow:none;
    }
    .btn.secondary:hover{box-shadow: 0 8px 18px rgba(15,23,42,.07)}
    .btn.ghost{
      background:transparent;
      border-color:var(--border);
      color:var(--text);
      box-shadow:none;
    }
    .btn:disabled{
      opacity:.5;
      cursor:not-allowed;
      transform:none;
      box-shadow:none;
    }

    .field{
      display:flex;
      flex-direction:column;
      gap:6px;
      min-width: 220px;
    }
    /* Selector de carpeta estilo "dropzone" (Sección A) */
    .folderPickRow{gap:12px; align-items:stretch; flex-wrap:nowrap}
    @media (max-width: 860px){
      .folderPickRow{flex-wrap:wrap}
      .iconBtn{height:56px; width:100%; min-width:unset}
    }
    .dropzone{
      flex:1;
      min-height:86px;
      border:2px dashed #d6dee8;
      border-radius:14px;
      background:#fbfdff;
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      padding:18px;
      transition:background .15s, border-color .15s, box-shadow .15s;
      user-select:none;
    }
    .dropzone:hover{background:#f4faff; border-color:#a7c8ff}
    .dropzone:focus{outline:none; box-shadow:0 0 0 3px rgba(58,130,255,.18)}
    .dzInner{display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; color:#6b7c93}
    .dzTitle{font-weight:700; color:#5b6f8b}
    .dzIcon{width:28px; height:28px; opacity:.75}
    .dzIcon svg{width:28px; height:28px}
    .iconBtn{
      width:86px;
      min-width:86px;
      height:86px;
      border-radius:14px;
      border:1px solid #e2e8f0;
      background:#ffffff;
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      transition:background .15s, border-color .15s, box-shadow .15s;
    }
    .iconBtn svg{width:22px; height:22px}
    .iconBtn:hover:not(:disabled){background:#f7fafc}
    .iconBtn:disabled{opacity:.45; cursor:not-allowed}
    /* Botón Play pequeño en "Reproducidas" */
    .iconBtn.replayBtn{
      width:34px;
      min-width:34px;
      height:34px;
      border-radius:12px;
    }
    .iconBtn.replayBtn svg{width:16px; height:16px}
    .srOnly{
      position:absolute;
      left:-10000px;
      top:auto;
      width:1px;
      height:1px;
      overflow:hidden;
    }

    label{font-size:12px; color:var(--muted)}
    .fieldLabel{font-size:12px; color:var(--muted)}
    input[type="text"], input[type="number"], select{
      width:100%;
      border:1px solid var(--border);
      border-radius:12px;
      padding:10px 11px;
      outline:none;
      font-size:13px;
      background:#fff;
    }
    input[type="text"]:focus, input[type="number"]:focus, select:focus{
      border-color: rgba(var(--brand-rgb),.55);
      box-shadow: 0 0 0 4px rgba(var(--brand-rgb),.14);
    }
    input[type="file"]{font-size:13px}

    .msg{
      border:1px solid var(--border);
      background:#fff;
      border-radius:12px;
      padding:10px 12px;
      font-size:13px;
      display:flex; gap:10px; align-items:flex-start;
    }
    .msg.ok{border-color:rgba(var(--brand-rgb),.35); background:rgba(var(--brand-rgb),.05)}
    .msg.err{border-color:rgba(239,68,68,.35); background:rgba(239,68,68,.05)}
    .msg.warn{border-color:rgba(245,158,11,.35); background:rgba(245,158,11,.05)}
    .msg .dot{
      width:10px;height:10px;border-radius:999px; margin-top:4px; flex:0 0 auto;
      background: var(--border);
    }
    .msg.ok .dot{background:var(--green)}
    .msg.err .dot{background:#ef4444}
    .msg.warn .dot{background:#f59e0b}

    .lists{
      display:grid;
      grid-template-columns:1fr;
      gap:12px;
    }
    @media (min-width: 980px){
      .lists{grid-template-columns:0.8fr 1.2fr}
    }
    .listbox{
      border:1px solid var(--border);
      border-radius:14px;
      overflow:hidden;
      background:#fff;
    }
    .listbox .lh{
      padding:10px 12px;
      border-bottom:1px solid var(--border);
      font-size:12px;
      color:var(--muted);
      display:flex; align-items:center; justify-content:space-between; gap:10px;
    }
    .scroll{
      max-height:240px;
      overflow:auto;
    }
    .item{
      padding:9px 12px;
      border-bottom:1px solid #f1f5f9;
      font-size:13px;
      display:flex;
      gap:10px;
      align-items:center;
      justify-content:space-between;
    }
    .item:last-child{border-bottom:none}
    /* Alinea la etiqueta "Reproducida" y el botón Play en la misma línea */
    .item .r{
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:8px;
      white-space:nowrap;
      flex: 0 0 auto;
    }
    .item .name{
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      max-width: 80%;
    }
    .tag{
      font-size:11px;
      padding:4px 8px;
      border:1px solid var(--border);
      border-radius:999px;
      color:var(--muted);
      background:#fff;
      flex: 0 0 auto;
    }
    .tag.played{
      color:#14532d;
      border-color:rgba(var(--brand-rgb),.35);
      background:rgba(var(--brand-rgb),.08);
    }
    .tag.pending{
      color:var(--muted);
    }

    .seg{
      display:inline-flex;
      border:1px solid var(--border);
      border-radius:12px;
      overflow:hidden;
      background:#fff;
    }
    .seg button{
      border:none;
      background:transparent;
      padding:9px 12px;
      font-size:13px;
      cursor:pointer;
      color:var(--muted);
    }
    .seg button.active{
      background:rgba(var(--brand-rgb),.12);
      color:#14532d;
      font-weight:700;
    }

    .playerBox{
      border:1px solid var(--border);
      border-radius:14px;
      padding:10px 12px;
      background:#fff;
    }
    .now{
      font-size:13px;
      display:flex;
      gap:10px;
      align-items:flex-start;
      justify-content:space-between;
      flex-wrap:wrap;
      margin-bottom:10px;
    }
    .now .titleLine{min-width:240px}
    .small{font-size:12px; color:var(--muted)}
    video,audio{width:100%; border-radius:12px; outline:none; background:#000}

    .previewWrap{
      border:1px dashed rgba(var(--brand-rgb),.45);
      background:rgba(var(--brand-rgb),.03);
      border-radius:14px;
      padding:12px;
      overflow:auto;
    }
    .bingoHdr{
      display:grid;
      grid-template-columns:repeat(5, 1fr);
      gap:8px;
      margin-bottom:8px;
    }
    .bingoHdr div{
      text-align:center;
      font-weight:800;
      letter-spacing:.25em;
      color:#14532d;
      background:rgba(var(--brand-rgb),.12);
      border:1px solid rgba(var(--brand-rgb),.24);
      padding:10px 0;
      border-radius:12px;
    }
    .bingoGrid{
      display:grid;
      grid-template-columns:repeat(5, minmax(140px,1fr));
      gap:8px;
    }
    @media (max-width: 520px){
      .bingoGrid{grid-template-columns:repeat(2, minmax(140px,1fr))}
      .bingoHdr{grid-template-columns:repeat(5, 1fr)}
    }
    .cell{
      position:relative;
      border:1px solid var(--border);
      border-radius:14px;
      background:#fff;
      padding:10px 10px 12px;
      min-height:66px;
      box-shadow: 0 6px 16px rgba(15,23,42,.05);
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:8px;
    }
    .cell .txt{
      font-size:12.5px;
      overflow:hidden;
      display:-webkit-box;
      -webkit-line-clamp: 3;
      line-clamp: 3;
      -webkit-box-orient: vertical;
    }
    .mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}

    .hr{height:1px;background:var(--border);margin:12px 0}

    .note{
      font-size:12px;
      color:var(--muted);
      background:#fff;
      border:1px solid var(--border);
      border-radius:12px;
      padding:10px 12px;
    }

    .kbd{
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size:11px;
      padding:2px 6px;
      border:1px solid var(--border);
      border-bottom-width:2px;
      border-radius:8px;
      background:#fff;
      color:var(--text);
      white-space:nowrap;
    }
/* Footer (Diseño y Desarrollo) */
.footerDD{
  width:90vw;
  max-width:none;
  margin: 10px auto 26px;
  padding: 0 16px 20px;
}
.footerDD .cap{
  text-align:center;
  letter-spacing:.45em;
  font-size:12px;
  color:var(--muted);
  margin: 18px 0 10px;
}
.footerDD .bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow2);
}
.footerDD .avatar{
  width:48px;height:48px;
  border-radius:999px;
  background:#f59e0b;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:22px;
  font-weight:900;
  flex:0 0 auto;
}
.footerDD .meta{flex:1 1 auto; min-width:0}
.footerDD .role{
  font-size:12px;
  letter-spacing:.22em;
  color:var(--muted);
  font-weight:850;
  text-transform:uppercase;
}
.footerDD .name{
  font-size:16px;
  font-weight:900;
  margin-top:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.footerDD .gear{
  width:44px;height:44px;
  border-radius:999px;
  background: rgba(59,130,246,.10);
  border:1px solid rgba(59,130,246,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#3b82f6;
  flex:0 0 auto;
}
.footerDD .gear svg{width:20px;height:20px}
  
/* --- UI v15 (estilo "Bingo Maestro") --- */
html,body{background:#f5f7fb;}
.wrap{width:90vw;max-width:none;margin:18px auto 32px;}
.hero{background:#fff;border:2px solid rgba(var(--brand-rgb),.35);border-radius:18px;padding:18px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.heroMain{flex:1 1 360px;min-width:280px}
.heroTitle{display:flex;gap:12px;align-items:flex-start}
.heroIcon{width:44px;height:44px;border-radius:14px;background:rgba(var(--brand-rgb),.12);color:var(--green);display:grid;place-items:center;flex:0 0 auto}
.heroH1{margin:0;font-size:26px;line-height:1.1}
.heroStats{display:flex;gap:12px;flex-wrap:wrap}
.statCard{min-width:120px;border-radius:14px;padding:10px 12px;border:1px solid rgba(0,0,0,.06);text-align:center}
.statTop{font-size:10px;font-weight:800;letter-spacing:.18em;color:#334155}
.statVal{font-size:22px;font-weight:900;margin-top:4px}
.statSub{font-size:12px;font-weight:800;color:var(--muted)}
.statBlue{background:#ecf4ff}
.statGreen{background:#ecfff0}
.statPurple{background:#f3efff}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}

/* Mantén el reproductor controlado para que las listas queden visibles */
#cardD:fullscreen video,
#cardD:fullscreen audio,
#cardD:-webkit-full-screen video,
#cardD:-webkit-full-screen audio{
  max-height:42vh;
}

@media (max-width: 980px){.grid{grid-template-columns:1fr}}

.card{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:18px;box-shadow:0 10px 30px rgba(15,23,42,.06)}
.hd{background:#f8fafc;border-bottom:1px solid rgba(0,0,0,.06);border-top-left-radius:18px;border-top-right-radius:18px;padding:14px 16px}
.hd h2{margin:0;font-size:15px;display:flex;align-items:center;gap:10px}
.badge{background:#eef2ff;color:#334155;border:1px solid rgba(0,0,0,.06);border-radius:999px;padding:5px 10px;font-size:11px;font-weight:800}

.cardD{border-color:rgba(var(--brand-rgb),.20)}
.cardD .hd{background:#ecfff0;border-bottom-color:rgba(var(--brand-rgb),.18)}
.cardD .badge{background:#dfffe8;color:#1f7a2a;border-color:rgba(31,122,42,.18)}

.seg{background:#f1f5f9;border-radius:999px;padding:4px;gap:6px}
.seg button{border-radius:999px;padding:8px 14px;font-weight:800}
.seg button.active{background:#fff;box-shadow:0 4px 14px rgba(15,23,42,.08)}

.progRow{display:flex;align-items:center;gap:12px;margin-top:10px}
.pbar{height:10px;background:#e2e8f0;border-radius:999px;flex:1;overflow:hidden}
#playedBar{height:100%;background:rgba(var(--brand-rgb),.85);width:0%}


.hIco{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:8px;background:rgba(var(--brand-rgb),.12);color:var(--green);margin-right:4px;flex:0 0 auto}
.cardA .hIco{background:rgba(37,99,235,.10);color:#2563eb}
.cardB .hIco{background:rgba(99,102,241,.10);color:#4f46e5}
.cardC .hIco{background:rgba(16,185,129,.10);color:#0f766e}
.cardD .hIco{background:rgba(var(--brand-rgb),.12);color:var(--green)}


/* ===== LokyApps + personalización institucional + móvil/iPhone ===== */
:root{--brand-rgb:57,169,0;--brand-dark:#14532d}
.instLeft img{height:54px;max-width:150px;object-fit:contain}
.instBar{background:var(--green)}
.brandConfig{margin-top:18px;overflow:visible}
.brandConfigGrid{display:grid;grid-template-columns:minmax(260px,1.3fr) minmax(220px,.7fr);gap:14px;align-items:end}
.brandNameField,.brandColorField{min-width:0}
.colorControl{display:grid;grid-template-columns:70px minmax(110px,1fr);gap:10px;align-items:center}
#institutionColor{width:70px;height:44px;border:1px solid var(--border);border-radius:12px;background:#fff;padding:4px;cursor:pointer}
#institutionHex{min-width:0;text-transform:uppercase;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:800}
.brandLogoField{grid-column:1/-1;display:flex;align-items:center;gap:14px;border:1px solid var(--border);border-radius:14px;padding:12px;background:#fff}
.brandLogoPreview{width:90px;height:78px;border:1px solid var(--border);border-radius:14px;background:#fff;display:grid;place-items:center;flex:0 0 auto;overflow:hidden}
.brandLogoPreview img{width:100%;height:100%;object-fit:contain;padding:8px}
.brandLogoText{display:flex;flex-direction:column;gap:4px;min-width:0;font-size:13px;color:var(--muted)}
.brandLogoText strong{color:var(--text)}
.brandLogoActions{margin-top:6px}
.filePickBtn{width:96px;min-width:96px;height:86px;border-radius:14px;border:1px solid var(--border);background:#fff;color:#334155;display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;cursor:pointer;font-weight:800;font-size:11px}
.filePickBtn svg{width:22px;height:22px}
.filePickBtn:hover{background:#f8fafc}
.mobileMediaHint{margin-top:7px}


/* Header de producto LokyBingo */
.productTopbar{width:100%;background:#fff;border-bottom:1px solid #dbe3ec;box-shadow:0 2px 12px rgba(15,23,42,.03)}
.productTopbarInner{width:min(1440px,94vw);margin:0 auto;min-height:82px;padding:12px 16px;display:flex;align-items:center;gap:18px}
.productMark{width:58px;height:58px;object-fit:contain;display:block;flex:0 0 auto}
.productCopy{display:flex;align-items:baseline;gap:18px;min-width:0;flex-wrap:wrap}
.productName{font-size:clamp(28px,3vw,42px);font-weight:1000;letter-spacing:-.055em;line-height:1;color:#0f172a;white-space:nowrap}
.productName .accent{color:#2fb800}
.productTagline{font-size:13px;font-weight:800;color:#64748b;white-space:nowrap}
@media(max-width:720px){
  .productTopbarInner{width:100%;min-height:64px;padding:8px 12px;gap:10px}
  .productMark{width:45px;height:45px}.productCopy{gap:3px;align-items:flex-start;flex-direction:column}
  .productName{font-size:28px}.productTagline{font-size:9px;white-space:normal}
}
/* Footer heredado de los otros proyectos */
.footerDD{display:none!important}
.lokyFooter{display:block;width:100vw;margin:30px 0 0 calc(50% - 50vw);padding:0}
.lokyFooterCard{width:100%;margin:0;background:#fff;border:0;border-top:1px solid rgba(37,99,235,.16);border-radius:0;box-shadow:0 -10px 28px rgba(15,23,42,.06);padding:20px max(24px,7.5vw);display:flex;align-items:center;justify-content:center;gap:18px}
.lokyFooterLogo{width:170px;height:auto;max-height:96px;object-fit:contain;display:block;flex:0 0 auto}
.lokyFooterCopy{min-width:0;text-align:left}
.lokyFooterRole{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:#eff6ff;border:1px solid rgba(37,99,235,.16);font-size:10px;font-weight:1000;letter-spacing:.18em;text-transform:uppercase;color:#1d4ed8}
.lokyFooterRole::before{content:"";width:7px;height:7px;border-radius:50%;background:#2563eb}
.lokyFooterText{margin-top:8px;max-width:720px;font-size:12px;font-weight:750;color:#475569;line-height:1.5}

/* Pseudo fullscreen: iPhone Safari no siempre permite Fullscreen API en divs */
body.pseudoFsActive{overflow:hidden!important}
#cardD.pseudoFullscreen{position:fixed!important;inset:0!important;z-index:9999!important;width:100vw!important;height:100dvh!important;max-width:none!important;margin:0!important;border-radius:0!important;display:flex!important;flex-direction:column!important;background:#fff!important;padding-bottom:max(0px,env(safe-area-inset-bottom))}
#cardD.pseudoFullscreen .bd{flex:1 1 auto;min-height:0;overflow:hidden;display:flex;flex-direction:column;padding:12px}
#cardD.pseudoFullscreen .lists{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
#cardD.pseudoFullscreen .listbox{display:flex;flex-direction:column;min-height:0}
#cardD.pseudoFullscreen .scroll{flex:1 1 auto;min-height:0;max-height:none;overflow:auto;-webkit-overflow-scrolling:touch}

@media(max-width:720px){
  html{-webkit-text-size-adjust:100%}
  body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
  button,.btn,.iconBtn,.filePickBtn,.seg button{min-height:44px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
  input[type="text"],input[type="number"],input[type="search"],select{font-size:16px!important}
  .instInner{width:100%;padding:8px 10px;gap:8px}
  .instLeft img{height:42px;max-width:88px}.instCenter{min-width:0}.instTopText{font-size:11px}.instName{font-size:16px}.instRight{display:none}.instBar{height:5px}
  .wrap{width:100%;margin:0;padding:10px 10px calc(18px + env(safe-area-inset-bottom))}
  .hero{padding:13px;border-radius:16px}.heroH1{font-size:22px}.heroStats{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.statCard{min-width:0;padding:8px 5px}.statVal{font-size:18px}.statTop{font-size:8px}
  .brandConfig{margin-top:10px}.brandConfigGrid{grid-template-columns:1fr;gap:10px}.brandLogoField{grid-column:auto;align-items:flex-start}.brandLogoPreview{width:76px;height:70px}.colorControl{grid-template-columns:66px 1fr}
  .grid{grid-template-columns:1fr!important;gap:10px;margin-top:10px}.card{border-radius:16px}.card .hd{padding:10px 11px}.card .bd{padding:11px}.card .hd h2{font-size:13px}.badge{font-size:9px;padding:4px 7px}
  .folderPickRow{display:grid;grid-template-columns:1fr 88px 64px;gap:7px}.dropzone{min-height:76px;padding:10px}.filePickBtn{width:88px;min-width:88px;height:76px}.iconBtn{width:64px;min-width:64px;height:76px}
  .scroll{max-height:180px;-webkit-overflow-scrolling:touch}.item{padding:8px 9px}.item .name{max-width:68%}
  .previewWrap{padding:7px;overflow:hidden}.bingoHdr{gap:4px}.bingoHdr div{padding:6px 0;border-radius:8px;font-size:12px}.bingoGrid{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:4px}.cell{min-height:58px;padding:6px;border-radius:9px;gap:3px}.cell .txt{font-size:9px;line-height:1.05;-webkit-line-clamp:4;line-clamp:4}.cell .tag{font-size:7px;padding:2px 3px}
  .row{gap:7px}.field{min-width:0!important;width:100%}.lists{grid-template-columns:1fr;gap:8px}.playerBox{padding:9px}.playerBox video{max-height:34vh}.playerBox audio{min-height:44px}
  #cardD.pseudoFullscreen .lists{grid-template-columns:1fr}
  .lokyFooterCard{padding:16px 14px;gap:12px}.lokyFooterLogo{width:125px;max-height:72px}.lokyFooterText{font-size:10px}
}
@media(max-width:430px){
  .folderPickRow{grid-template-columns:1fr 78px 56px}.filePickBtn{width:78px;min-width:78px}.iconBtn{width:56px;min-width:56px}.dzTitle{font-size:12px}
  .brandLogoField{flex-direction:column}.brandLogoPreview{width:100%;height:72px}.brandLogoActions{width:100%;display:grid;grid-template-columns:1fr 1fr}.brandLogoActions .btn{width:100%;padding:9px 6px;font-size:11px}
  .lokyFooterCard{flex-direction:column;text-align:center}.lokyFooterCopy{text-align:center}.lokyFooterRole{justify-content:center}
}


/* ============================================================
   v26 · Vista previa 5x5 + Mando del instructor fullscreen
============================================================ */
.previewWrap{overflow:hidden!important;min-width:0}
#boardPreview.bingoGrid{
  width:100%!important;
  min-width:0!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:clamp(3px,.45vw,7px)!important;
}
#boardPreview .cell{
  min-width:0!important;
  width:100%!important;
  min-height:clamp(72px,8.2vw,110px)!important;
  padding:7px 5px 5px!important;
  border-radius:10px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  position:relative!important;
  overflow:hidden!important;
}
#boardPreview .cell .txt{
  width:100%!important;
  padding:12px 2px 0!important;
  text-align:center!important;
  font-size:clamp(8px,.78vw,12px)!important;
  line-height:1.05!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
  -webkit-line-clamp:5!important;
  line-clamp:5!important;
}
#boardPreview .cell .txt.is-long{font-size:clamp(7px,.66vw,10px)!important}
#boardPreview .cell .txt.is-xlong{font-size:clamp(6.5px,.58vw,9px)!important}
#boardPreview .cell .tag{
  position:absolute!important;
  top:4px!important;
  right:4px!important;
  font-size:7px!important;
  line-height:1!important;
  padding:2px 4px!important;
}

.fsStage{display:none}
.fsStageMain{min-width:0}
.fsKicker{font-size:10px;font-weight:1000;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.fsNowName{font-size:clamp(22px,3vw,46px);font-weight:1000;line-height:1.08;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:4px}
.fsCount{font-size:13px;font-weight:850;color:var(--muted);margin-top:7px}
.fsCount strong{color:var(--green);font-size:18px}
.fsNextBtn{min-height:76px!important;min-width:230px!important;padding:14px 24px!important;border-radius:18px!important;font-size:16px!important;font-weight:1000!important;letter-spacing:.04em!important;box-shadow:0 14px 32px rgba(var(--brand-rgb),.24)!important}

:is(#cardD:fullscreen,#cardD:-webkit-full-screen,#cardD.pseudoFullscreen) .fsStage{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:18px;
  padding:14px 16px;
  margin:0 0 10px;
  border:1px solid rgba(var(--brand-rgb),.22);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(var(--brand-rgb),.09),#fff 60%);
  box-shadow:0 10px 28px rgba(15,23,42,.07);
}
:is(#cardD:fullscreen,#cardD:-webkit-full-screen,#cardD.pseudoFullscreen) .seg,
:is(#cardD:fullscreen,#cardD:-webkit-full-screen,#cardD.pseudoFullscreen) #manualPane,
:is(#cardD:fullscreen,#cardD:-webkit-full-screen,#cardD.pseudoFullscreen) #randomPane{
  display:none!important;
}
:is(#cardD:fullscreen,#cardD:-webkit-full-screen,#cardD.pseudoFullscreen) .progRow{margin:0 0 8px}
:is(#cardD:fullscreen,#cardD:-webkit-full-screen,#cardD.pseudoFullscreen) .playerBox{
  flex:0 0 auto;
  min-height:150px;
  padding:14px 16px;
  border:2px solid rgba(var(--brand-rgb),.18);
  box-shadow:0 12px 34px rgba(15,23,42,.08);
}
:is(#cardD:fullscreen,#cardD:-webkit-full-screen,#cardD.pseudoFullscreen) .playerBox .now .titleLine .small{display:none}
:is(#cardD:fullscreen,#cardD:-webkit-full-screen,#cardD.pseudoFullscreen) #nowPlaying{
  font-size:clamp(20px,2.1vw,34px)!important;
  font-weight:1000!important;
}
:is(#cardD:fullscreen,#cardD:-webkit-full-screen,#cardD.pseudoFullscreen) #videoPlayer{max-height:30vh!important;object-fit:contain}
:is(#cardD:fullscreen,#cardD:-webkit-full-screen,#cardD.pseudoFullscreen) #audioPlayer{min-height:54px}
:is(#cardD:fullscreen,#cardD:-webkit-full-screen,#cardD.pseudoFullscreen) .lists{margin-top:10px}
:is(#cardD:fullscreen,#cardD:-webkit-full-screen,#cardD.pseudoFullscreen) .listbox .lh{font-size:13px;font-weight:850}
:is(#cardD:fullscreen,#cardD:-webkit-full-screen,#cardD.pseudoFullscreen) .item{font-size:13px;padding:8px 10px}

@media(max-width:720px){
  #boardPreview .cell{min-height:68px!important;padding:5px 3px 3px!important}
  #boardPreview .cell .txt{font-size:clamp(7px,2vw,9px)!important;padding-top:10px!important}
  #boardPreview .cell .txt.is-long{font-size:7px!important}
  #boardPreview .cell .txt.is-xlong{font-size:6.5px!important}
  :is(#cardD:fullscreen,#cardD:-webkit-full-screen,#cardD.pseudoFullscreen) .fsStage{grid-template-columns:1fr;gap:8px;padding:9px;margin-bottom:6px}
  .fsNowName{font-size:22px}.fsNextBtn{width:100%;min-width:0!important;min-height:52px!important}
}


/* ===== LokyBingo · header y modales institucionales ===== */
.productTopbarInner{display:grid!important;grid-template-columns:minmax(300px,1fr) minmax(250px,.8fr) auto!important;align-items:center!important}
.productIdentity{display:flex;align-items:center;gap:18px;min-width:0}
.productInstitution{display:flex;align-items:center;justify-content:center;gap:10px;min-width:0}
.productInstitution>img{width:46px;height:46px;object-fit:contain;border:1px solid var(--border);border-radius:12px;background:#fff;flex:0 0 auto;filter:none!important;box-shadow:none!important;animation:none!important}
.productInstitutionCopy{min-width:0;text-align:left}.productInstitutionCopy small{display:block;font-size:9px;letter-spacing:.12em;font-weight:900;color:#94a3b8}.productInstitutionCopy strong{display:block;margin-top:2px;font-size:14px;color:var(--brand-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
.productActions{display:flex;justify-content:flex-end;align-items:center;gap:8px;flex-wrap:wrap}
.topbarBtn{min-height:40px;padding:9px 12px;border-radius:11px;border:1px solid var(--green);background:var(--green);color:#fff;font:800 12px/1.1 inherit;cursor:pointer}
.topbarBtnSoft{background:#fff;color:var(--brand-dark);border-color:var(--border)}
.productName .accent{color:var(--green)!important}
.productMark,.brandLogoPreview img,.lokyFooterLogo{filter:none!important;animation:none!important}
body.lokyModalOpen{overflow:hidden!important}
.lokyModal{position:fixed;inset:0;z-index:20000;display:none;align-items:center;justify-content:center;padding:18px}
.lokyModal.open{display:flex}
.lokyModalBackdrop{position:absolute;inset:0;background:rgba(15,23,42,.62);backdrop-filter:blur(4px)}
.lokyModalCard{position:relative;z-index:1;width:min(720px,calc(100vw - 30px));max-height:min(88dvh,760px);overflow:auto;margin:0;background:#fff;border:1px solid var(--border);border-radius:22px;box-shadow:0 28px 90px rgba(15,23,42,.30);transform:none}
.lokyModalHead{position:sticky;top:0;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:17px 18px;background:#fff;border-bottom:1px solid var(--border)}
.lokyModalHead h2{margin:0;font-size:20px}.lokyModalHead p{margin:5px 0 0;color:var(--muted);font-size:12px;line-height:1.45}
.modalCloseX{width:40px;height:40px;flex:0 0 40px;border-radius:50%;border:1px solid var(--border);background:#fff;color:var(--text);font-size:22px;font-weight:900;cursor:pointer}
.lokyModalBody{padding:18px}.lokyModalBody .brandConfigGrid{margin:0}.lokyModalBody .brandLogoField{margin-top:0}
.lokyModalFoot{position:sticky;bottom:0;display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;padding:14px 18px;background:#f8fafc;border-top:1px solid var(--border)}
.helpModalCard{width:min(650px,calc(100vw - 30px))}.helpSteps{display:grid;gap:10px}.helpStep{display:grid;grid-template-columns:38px 1fr;gap:12px;align-items:start;padding:12px;border:1px solid var(--border);border-radius:14px;background:#fff}.helpStep>b{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:rgba(var(--brand-rgb),.10);color:var(--brand-dark);font-size:16px}.helpStep strong{display:block;font-size:13px}.helpStep span{display:block;margin-top:3px;color:var(--muted);font-size:12px;line-height:1.45}
@media(max-width:850px){.productTopbarInner{grid-template-columns:1fr auto!important}.productInstitution{grid-column:1/-1;grid-row:2;justify-content:flex-start}.productActions{grid-column:2;grid-row:1}.productIdentity{grid-column:1;grid-row:1}.productInstitutionCopy strong{max-width:70vw}}
@media(max-width:560px){.productTopbarInner{gap:7px!important;padding:8px 10px!important}.productMark{width:42px!important;height:42px!important}.productName{font-size:25px!important}.productTagline{display:none}.productActions{gap:5px}.topbarBtn{padding:8px 9px;font-size:10px;min-height:36px}.productInstitution{display:none}.lokyModal{padding:10px}.lokyModalCard{width:calc(100vw - 20px);max-height:90dvh}.lokyModalBody{padding:14px}.lokyModalFoot{padding:12px 14px}.brandConfigGrid{grid-template-columns:1fr!important}.brandLogoField{flex-direction:column;align-items:flex-start}.brandLogoPreview{width:100%;height:76px}}