:root{
      --bg:#f5f7fb;
      --panel:#ffffff;
      --border:#e6eaf2;
      --text:#111827;
      --muted:#6b7280;
      --shadow: 0 10px 25px rgba(16,24,40,.08);
      --brand:#2563eb;
      --brand2:#1d4ed8;
      --green:var(--brand);
      --green2:var(--brand2);
      --danger:#e85b5b;
    }
    *{ box-sizing:border-box; }
    body{
      margin:0;
      font-family: Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
      background: var(--bg);
      color: var(--text);
    }
    .app{
      max-width: 1250px;
      margin: 18px auto;
      padding: 0 16px 22px;
    }
    .grid{
      display:grid;
      grid-template-columns: 1.55fr 0.85fr;
      gap: 18px;
      align-items:start;
    }

    /* Stats */
    .stats{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      margin-bottom: 14px;
    }
    .stat-card{
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 14px;
      box-shadow: var(--shadow);
      padding: 14px 12px;
      text-align:center;
    }
    .stat-label{
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: #9aa2b1;
    }
    
    /* Participantes: estilo como la imagen */
    .label-caps{
      text-transform: uppercase;
      letter-spacing: .06em;
      color: #64748b;
      font-weight: 900;
    }
    .textarea-big{
      min-height: 150px;
      padding: 14px 14px;
      background: #f8fafc;
      border-radius: 14px;
      resize: vertical;
    }

    .participants-block{ margin-top: 12px; }

    /* Barra de tiempo (cuenta regresiva) encima de la línea de selección */
    .timerbar-wrap{
  margin: 12px 0 18px;
  position: relative;
  z-index: 20;
  overflow: visible;
}
    .timerbar-track{
  position: relative;
  height: 12px;
  border-radius: 999px;
  background: #e5e7eb;
  border: 1px solid var(--border);
  overflow: visible;
}
    .timerbar-fill{
  position:absolute;
  left:0; top:0; bottom:0;
  width: 100%;
  border-radius: 999px;
  background: #22c55e; /* verde por defecto */
  transition: width .08s linear, background-color .15s linear;
  overflow: visible;
  z-index: 1;
}
    
        .timerbar-sparks{
      position:absolute;
      right:0;
      top:0;
      width:0;
      height:0;
      pointer-events:none;
      overflow: visible;
      z-index: 6;
    }
    .spark{
      position:absolute;
      left:0;
      top:0;
      width: var(--w, 6px);
      height: var(--h, 6px);
      border-radius: 999px;
      opacity: 0.95;
      transform: translate(var(--x0, 0px), var(--y0, -14px)) rotate(0deg) scale(1);
      animation: sparkBurst var(--dur, 700ms) ease-out forwards;
      filter: drop-shadow(0 0 10px rgba(255,160,0,.85));
      background: radial-gradient(circle at 30% 30%,
        rgba(255,255,255,.95) 0%,
        rgba(255,210,120,.92) 40%,
        rgba(255,150,0,.65) 62%,
        rgba(255,150,0,0) 78%);
    }
    .spark.streak{
      border-radius: 999px;
      background: linear-gradient(to bottom,
        rgba(255,255,255,.95) 0%,
        rgba(255,210,120,.92) 25%,
        rgba(255,160,0,.8) 55%,
        rgba(255,160,0,0) 100%);
      filter: drop-shadow(0 0 12px rgba(255,160,0,.9));
    }
    @keyframes sparkBurst{
      0%{
        transform: translate(var(--x0, 0px), var(--y0, -14px)) rotate(0deg) scale(1);
        opacity: 1;
      }
      100%{
        transform: translate(calc(var(--x0, 0px) + var(--dx, 0px)),
                             calc(var(--y0, -14px) + var(--dy, -70px)))
                   rotate(var(--rot, 0deg))
                   scale(var(--s, .25));
        opacity: 0;
      }
    }
    .timerbar-bomb{
  position:absolute;
  left:-8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  opacity: .92;
  pointer-events: none;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.22));
  z-index: 7;
  overflow: visible;
}
.timerbar-bomb .bomb-emoji{
  display: inline-block;
  transform: scale(var(--bombScale, 0.6));
  transform-origin: 50% 50%;
  transition: transform .09s linear;
  will-change: transform;
}
.timerbar-bomb-fixed{ right:auto; }
.timerbar-bomb.danger{ animation: bombShake .12s infinite; }
@keyframes bombShake{
  0%{ transform: translateY(-50%) translateX(0) rotate(0deg); }
  25%{ transform: translateY(-50%) translateX(-1px) rotate(-2deg); }
  50%{ transform: translateY(-50%) translateX(1px) rotate(2deg); }
  75%{ transform: translateY(-50%) translateX(-1px) rotate(2deg); }
  100%{ transform: translateY(-50%) translateX(1px) rotate(-2deg); }
}
.stat-value{
      margin-top: 8px;
      font-size: 28px;
      font-weight: 900;
      line-height: 1.1;
      color: #0b1220;
      font-variant-numeric: tabular-nums;
    }
    .stat-value.time{
      color: var(--green);
    }

    /* Stage */
    .stage-card{
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 14px;
      box-shadow: var(--shadow);
      padding: 12px;
      min-height: 640px;
    }
    .stage-wrap{
      position: relative;
      height: 610px;
      border-radius: 14px;
      background: #ffffff;
      border: 1px solid #eef1f6;
      overflow:hidden;
    }
    .tiles{
      position:absolute;
      inset: 0;
      user-select:none;
    }
    .line{
      position:absolute;
      left: 0;
      right: 0;
      top: 50%;
      bottom: auto;
      border-top: 2px dashed var(--danger);
      opacity:.85;
    }
    .line-label{
      position:absolute;
      left: 12px;
      top: calc(50% - 22px);
      bottom: auto;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .06em;
      color: var(--danger);
      text-transform: uppercase;
      background: #fff;
      padding: 2px 8px;
      border-radius: 999px;
      border: 1px solid rgba(232,91,91,.35);
    }

    .tile{
      position:absolute;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding: 10px 14px;
      border-radius: 14px;
      font-weight: 800;
      font-size: 14px;
      white-space: nowrap;

      background: #ffffff;
      border: 2px solid #111827;

      box-shadow: 0 8px 18px rgba(0,0,0,.10);
      will-change: transform;
      user-select:none;
    }
    .tile.small{
      padding: 8px 12px;
      border-radius: 12px;
      font-size: 13px;
    }
    .tile.large{
      padding: 12px 16px;
      border-radius: 16px;
      font-size: 15px;
    }
    .tile.winner{
      box-shadow: 0 14px 32px rgba(0,0,0,.18);
      transform: scale(1.06);
      z-index: 3;
    }

    .stage-hint{
      position:absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      width: 300px;
      max-width: calc(100% - 36px);
      background: #ffffff;
      border: 1px solid #eef1f6;
      border-radius: 14px;
      box-shadow: var(--shadow);
      padding: 18px 18px 16px;
      text-align:center;
      color: #586174;
    }
    .stage-hint .ic{
      width: 34px;
      height: 34px;
      margin: 0 auto 10px;
      color: var(--green);
      display:block;
    }
    .stage-hint b{ color: var(--green); }

    /* Sidebar */
    .side-card{
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 14px;
      box-shadow: var(--shadow);
      padding: 14px;
    }
    .side-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
      margin-bottom: 12px;
    }
    .side-title{
      display:flex;
      align-items:center;
      gap: 10px;
      font-size: 18px;
      font-weight: 900;
    }
    .side-title .ic{
      width: 18px;
      height: 18px;
      color: #64748b;
    }
.status-pill{
      font-size: 12px;
      font-weight: 800;
      color: #0b1220;
      background: #ffffff;
      border: 1px solid var(--border);
      padding: 6px 10px;
      border-radius: 999px;
      white-space: nowrap;
    }

    label{
      display:block;
      font-size: 12px;
      font-weight: 800;
      color: #334155;
      margin-bottom: 6px;
    }
    input, select, textarea{
      width:100%;
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 10px 12px;
      font-size: 14px;
      outline: none;
      background: #fff;
    }
    input:focus, select:focus, textarea:focus{
      border-color: rgba(22,156,90,.55);
      box-shadow: 0 0 0 3px rgba(22,156,90,.12);
    }

    /* Tiempo como línea con zonas (rojo/amarillo/verde) */
    .range-head{
      display:flex;
      align-items:baseline;
      justify-content:space-between;
      gap: 10px;
      margin-bottom: 6px;
    }
    .range-badge{
      font-size: 12px;
      font-weight: 900;
      color: #0b1220;
      background: #fbfcfe;
      border: 1px solid var(--border);
      padding: 4px 10px;
      border-radius: 999px;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }
    input[type="range"]{
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 12px;
      padding: 0;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: #e5e7eb;
}
    input[type="range"]:focus{
      outline: none;
      box-shadow: 0 0 0 3px rgba(22,156,90,.12);
    }
    input[type="range"]::-webkit-slider-thumb{
      -webkit-appearance: none;
      appearance: none;
      width: 20px;
      height: 20px;
      border-radius: 999px;
      background: #ffffff;
      border: 2px solid rgba(17,24,39,.55);
      box-shadow: 0 6px 14px rgba(0,0,0,.16);
      margin-top: -4px;
      cursor: pointer;
    }
    input[type="range"]::-moz-range-thumb{
      width: 20px;
      height: 20px;
      border-radius: 999px;
      background: #ffffff;
      border: 2px solid rgba(17,24,39,.55);
      box-shadow: 0 6px 14px rgba(0,0,0,.16);
      cursor: pointer;
    }
    input[type="range"]::-moz-range-track{
      height: 12px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: #e5e7eb;
    }
    .form-grid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .label-row{
      display:flex;
      align-items:baseline;
      justify-content:space-between;
      gap: 12px;
      margin-top: 12px;
    }
textarea{
      min-height: 300px;
      resize: vertical;
      margin-top: 0px;
      line-height: 1.35;
    }
    .muted{
      font-size: 12px;
      color: var(--muted);
      margin-top: 8px;
    }

    details.advanced{
      margin-top: 12px;
      border: 1px dashed #d5dbe7;
      border-radius: 12px;
      padding: 10px 12px;
      background: #fbfcfe;
    }
    details.advanced summary{
      cursor:pointer;
      font-weight: 900;
      color: #334155;
      list-style:none;
    }
    details.advanced summary::-webkit-details-marker{ display:none; }
    .advanced-grid{
      margin-top: 10px;
      display:grid;
      grid-template-columns: 1fr;
      gap: 10px;
    }

    .btn{
      width:100%;
      height: 46px;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: #fff;
      font-weight: 900;
      font-size: 14px;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:center;
      gap: 10px;
      margin-top: 12px;
    }
    .btn svg{ width: 18px; height: 18px; }
    .btn.primary{
      height: 54px;
      background: var(--green);
      border-color: rgba(0,0,0,0);
      color:#fff;
      font-size: 15px;
      box-shadow: 0 10px 20px rgba(22,156,90,.25);
    }
    .btn.primary:hover{ background: var(--green2); }
    .btn:disabled{
      opacity: .55;
      cursor: default;
    }
    .btn.primary:disabled{
      background: #b9c3d2;
      box-shadow:none;
    }
    /* Start button icons swap */
    #btnStart .ic-stop{ display:none; }
    #btnStart.running .ic-play{ display:none; }
    #btnStart.running .ic-stop{ display:inline; }

    .result{
      margin-top: 12px;
      font-size: 12px;
      color: #334155;
      background: #fbfcfe;
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 10px 12px;
    }

    /* Overlay */
    .overlay{
      position: fixed;
      inset: 0;
      background: rgba(15,23,42,.55);
      display:none;
      align-items:center;
      justify-content:center;
      padding: 18px;
      z-index: 50;
    }
    .overlay.show{ display:flex; }


    /* Bomb explosion FX layer (por encima del overlay) */
    #bombFxLayer{
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 65; /* overlay=50, confetti=60 */
    }
    .bomb-explosion{
      position: absolute;
      width: 14px;
      height: 14px;
      border-radius: 999px;
      transform: translate(-50%, -50%);
    }
    .bomb-explosion .flash{
      position:absolute;
      inset:-22px;
      border-radius: 999px;
      background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,186,0,.85) 22%, rgba(239,68,68,.25) 55%, rgba(239,68,68,0) 72%);
      animation: bombFlash .75s ease-out forwards;
      filter: blur(.2px);
    }
    .bomb-explosion .ring{
      position:absolute;
      inset:-10px;
      border-radius: 999px;
      border: 2px solid rgba(255,186,0,.9);
      box-shadow: 0 0 30px rgba(255,120,0,.35);
      animation: bombRing .75s ease-out forwards;
    }
    @keyframes bombFlash{
      0%{ transform: scale(.35); opacity: 0; }
      12%{ opacity: 1; }
      60%{ transform: scale(1.65); opacity: .85; }
      100%{ transform: scale(2.2); opacity: 0; }
    }
    @keyframes bombRing{
      0%{ transform: scale(.55); opacity: .9; }
      80%{ transform: scale(2.4); opacity: .25; }
      100%{ transform: scale(2.9); opacity: 0; }
    }
    .boom-particle{
      position:absolute;
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: #f59e0b;
      transform: translate(-50%, -50%);
      opacity: 0.95;
      filter: drop-shadow(0 4px 10px rgba(0,0,0,.22));
      animation: boomParticle .9s ease-out forwards;
    }
    .boom-particle.is-spark{
      width: 10px;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(255,255,255,.9), rgba(245,158,11,.95), rgba(239,68,68,.0));
      box-shadow: 0 0 16px rgba(245,158,11,.55);
    }
    @keyframes boomParticle{
      0%{ transform: translate(-50%, -50%) scale(1); opacity: 1; }
      100%{ transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.15); opacity: 0; }
    }

    /* Animación de explosión en la bomba (emoji) */
    .timerbar-bomb.exploding .bomb-emoji{
      animation: bombEmojiExplode .75s ease-out forwards;
    }
    @keyframes bombEmojiExplode{
      0%{ transform: scale(var(--bombScale, 1)); opacity: 1; }
      45%{ transform: scale(3.6); opacity: 1; }
      100%{ transform: scale(.15); opacity: 0; }
    }

    /* Zoom-in 3s para el cuadro de grupos */
    .winners-list.groups-zoom{
      animation: groupsZoomIn 3s ease-out both;
      transform-origin: 50% 10%;
    }
    @keyframes groupsZoomIn{
      0%{ transform: scale(.55); opacity: 0; }
      35%{ opacity: 1; }
      70%{ transform: scale(1.03); }
      100%{ transform: scale(1); }
    }

    /* Confetti (canvas overlay) */
    #confettiCanvas{
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 60;
      display: none;
    }
    #confettiCanvas.active{ display:block; }

    .modal{
      width: 70vw;
      max-width: 70vw;
      min-height: 70vh;
      max-height: 82vh;
      overflow: auto;
      background:#fff;
      border-radius: 16px;
      box-shadow: 0 30px 80px rgba(0,0,0,.28);
      border: 1px solid rgba(255,255,255,.25);
      padding: 14px;
    }
    @media (max-width: 720px){
      .modal{
        width: 92vw;
        max-width: 92vw;
        min-height: 70vh;
        max-height: 88vh;
      }
    }
    @media (max-width: 720px){
      .modal{
        width: 92vw;
        max-width: 92vw;
        max-height: 88vh;
      }
    }
    .modal-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
      padding: 6px 6px 10px;
    }
    .modal-head strong{
      font-size: 18px;
      font-weight: 900;
    }
    .close{
      border: 1px solid var(--border);
      background:#fff;
      border-radius: 10px;
      padding: 8px 10px;
      cursor:pointer;
      font-weight: 900;
    }
    .winner-big{
      display:none;
      margin: 6px 6px 12px;
      border-radius: 16px;
      padding: 22px 16px;
      background: #f0fff6;
      border: 1px solid rgba(22,156,90,.25);
      text-align:center;
      font-size: 34px;
      font-weight: 1000;
      color: var(--green2);
    }
    .winners-list{
      display:grid;
      gap: 10px;
      padding: 6px;
    }
    .winners-list .item{
      display:flex;
      gap: 10px;
      align-items:flex-start;
    }
    .winners-list .num{
      min-width: 28px;
      height: 28px;
      border-radius: 10px;
      border: 1px solid var(--border);
      background:#fff;
      display:grid;
      place-items:center;
      font-weight: 900;
      color: var(--muted);
      flex: 0 0 auto;
    }

    @media (max-width: 980px){
      .grid{ grid-template-columns: 1fr; }
      .stage-card{ min-height: 520px; }
      .stage-wrap{ height: 520px; }
      textarea{ min-height: 220px; }
    }

  
    /* Controles adicionales */
    .side-actions{
      display:flex;
      align-items:center;
      gap: 10px;
    }
    .proj-btn{
      height: 34px;
      padding: 0 10px;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: #ffffff;
      box-shadow: 0 1px 0 rgba(15,23,42,.03);
      font-weight: 900;
      font-size: 12px;
      cursor: pointer;
      white-space: nowrap;
    }
    .proj-btn:hover{ filter: brightness(.98); }
    .checkline{
      display:flex;
      align-items:center;
      gap: 10px;
      font-weight: 800;
      color: #111827;
    }
    .checkline input{
      width: 16px;
      height: 16px;
      accent-color: var(--brand);
    }


    /* Switch Ruleta / Grupos */
    .mode-switch{
      display:flex;
      align-items:center;
      gap: 10px;
      font-weight: 900;
      color: #111827;
    }
    .mode-label{
      font-size: 12px;
      font-weight: 1000;
      letter-spacing: .02em;
      color: #64748b;
      user-select:none;
    }
    .mode-label.active{
      color: var(--green2);
    }
    .switch{
      position: relative;
      display:inline-block;
      width: 54px;
      height: 30px;
      flex: 0 0 auto;
    }
    .switch input{ display:none; }
    .slider{
      position:absolute;
      inset:0;
      background:#e5e7eb;
      border: 1px solid rgba(17,24,39,.14);
      border-radius: 999px;
      transition: .2s;
      box-shadow: inset 0 1px 1px rgba(0,0,0,.06);
    }
    .slider:before{
      content:"";
      position:absolute;
      height: 24px;
      width: 24px;
      left: 3px;
      top: 2px;
      background:#fff;
      border-radius: 999px;
      transition: .2s;
      box-shadow: 0 6px 14px rgba(0,0,0,.16);
    }
    .switch input:checked + .slider{
      background: rgba(22,156,90,.22);
      border-color: rgba(22,156,90,.45);
    }
    .switch input:checked + .slider:before{
      transform: translateX(24px);
    }

    /* Modo proyector */
    .proj-exit{
      position: fixed;
      top: 14px;
      right: 14px;
      z-index: 120;
      display: none;
      height: 42px;
      padding: 0 12px;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: #ffffff;
      box-shadow: var(--shadow);
      font-weight: 900;
      cursor: pointer;
    }
    body.projector-mode .proj-exit{ display:block; }
    body.projector-mode .side-card{ display:none; }
    body.projector-mode .grid{ grid-template-columns: 1fr; }
    body.projector-mode .stage-card{ min-height: calc(100vh - 170px); }
    body.projector-mode .stage-wrap{ height: calc(100vh - 210px); }
    body.projector-mode .stat-card{ padding: 18px 12px; }
    body.projector-mode .stat-value{ font-size: 44px; }

    body.projector-mode .app{ max-width: 100%; margin: 0; padding: 12px 12px 18px; }
    body.projector-mode{ overflow: hidden; }
    body.projector-mode main{ width: 100%; }



    /* ====== Grupos ====== */
    .grid-span{ grid-column: 1 / -1; }
    .section-title{
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: #334155;
    }
    .btn.inline{ margin-top: 0; height: 46px; }
    .group-panel-title{
      font-weight: 900;
      margin-bottom: 10px;
      color: #334155;
    }
    .groups-grid{
      display:grid;
      grid-template-columns: 1fr;
      gap: 10px;
    }
    .group-card{
      border-radius: 12px;
      border: 1px solid rgba(17,24,39,.12);
      padding: 10px 10px 8px;
    }
    .group-title{
      font-weight: 1000;
      font-size: 13px;
      letter-spacing: .02em;
      margin-bottom: 8px;
      color: #111827;
      text-transform: none;
    }
    .group-members{
      display:flex;
      flex-wrap:wrap;
      gap: 6px;
    }
    
    /* Opciones y nombres de grupos */
    #groupNamesConfig{ margin-top: 10px; }
    #groupNamesBox{ margin-top: 10px; }
    #groupNamesInput{ width: 100%; min-height: 170px; font-size: 15px; }
    .group-option-switch{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      padding:12px 14px;
      border:1px solid rgba(59,130,246,.18);
      border-radius:14px;
      background:rgba(239,246,255,.72);
    }
    .group-option-copy{
      display:flex;
      flex-direction:column;
      gap:3px;
      min-width:0;
    }
    .group-option-copy strong{
      font-size:13px;
      color:#0f172a;
      font-weight:900;
    }
    .group-option-copy span{
      font-size:11px;
      color:#64748b;
      line-height:1.35;
    }
    .compact-switch{
      flex:0 0 auto;
      gap:8px;
    }
    .group-option-divider{
      height:1px;
      background:rgba(148,163,184,.24);
      margin:2px 0 12px;
    }
    @media (max-width:720px){
      .group-option-switch{ align-items:flex-start; flex-direction:column; }
      .compact-switch{ width:100%; justify-content:space-between; }
    }

.member-pill{
      font-size: 12px;
      font-weight: 800;
      border-radius: 999px;
      padding: 4px 8px;
      background: rgba(255,255,255,.7);
      border: 1px solid rgba(17,24,39,.10);
      color: #111827;
      max-width: 100%;
      overflow:hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

  
    .modal-actions{
      display:flex;
      gap: 8px;
      align-items:center;
      justify-content:flex-end;
    }
    .modal-actions .btn.inline{
      padding: 8px 10px;
      font-size: 13px;
    }

    /* Exportación a PDF (vía impresión del navegador) */
    .print-area{ display:none; }

    @media print{
      *{ -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

      body{ background:#fff !important; }
      body *{ visibility:hidden !important; }
      #printArea, #printArea *{ visibility:visible !important; }
      #printArea{
        display:block !important;
        position:fixed;
        inset:0;
        padding: 24px;
      }
      #printArea .print-title{
        font-size: 22px;
        font-weight: 900;
        margin: 0 0 6px;
      }
      #printArea .print-meta{
        font-size: 12px;
        color: #475569;
        margin-bottom: 14px;
      }
      #printArea .winner-big{
        display:block !important;
      }
    }


    /* ========================== LOKYSORTEO UI ========================== */
    body{padding:0;background:#f5f7fb;}
    .productTopbar{width:100%;background:#fff;border-bottom:1px solid #dbe3ec;box-shadow:0 2px 12px rgba(15,23,42,.04);position:relative;z-index:10;}
    .productTopbarInner{width:min(1480px,96vw);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;flex:1 1 auto;}
    .productName{font-size:clamp(28px,3vw,42px);font-weight:1000;letter-spacing:-.055em;line-height:1;color:#0f172a;white-space:nowrap;}
    .productName span{color:var(--brand);}
    .productTagline{font-size:13px;font-weight:800;color:#64748b;white-space:nowrap;}
    .institutionMini{display:flex;align-items:center;gap:10px;padding:7px 12px;border:1px solid var(--border);border-radius:14px;background:#fff;min-width:190px;max-width:330px;}
    .institutionMini img{width:38px;height:38px;object-fit:contain;border-radius:9px;flex:0 0 auto;}
    .institutionMiniText{display:flex;flex-direction:column;min-width:0;line-height:1.1;}
    .institutionMiniText small{font-size:9px;font-weight:950;letter-spacing:.16em;color:#94a3b8;}
    .institutionMiniText strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

    .app{max-width:1320px;margin:18px auto;padding:0 16px 22px;}
    .side-card,.stage-card,.stat-card{border-color:#e2e8f0;}
    .btn.primary{background:var(--brand);box-shadow:0 10px 20px color-mix(in srgb,var(--brand) 25%,transparent);}
    .btn.primary:hover{background:var(--brand2);}
    input:focus,select:focus,textarea:focus{border-color:color-mix(in srgb,var(--brand) 60%,#cbd5e1);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 13%,transparent);}
    .stat-value.time,.stage-hint .ic,.stage-hint b{color:var(--brand);}

    /* Splash */
    .lokySplash{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:#fff;transition:opacity .7s ease,visibility .7s ease;}
    .lokySplash.hide{opacity:0;visibility:hidden;pointer-events:none;}
    .lokySplashInner{text-align:center;animation:lokySplashZoom 4s cubic-bezier(.2,.8,.2,1) both;}
    .lokySplash img{width:min(190px,38vw);height:auto;display:block;margin:auto;filter:drop-shadow(0 16px 30px rgba(15,23,42,.12));}
    .lokySplashName{margin-top:18px;font-size:clamp(24px,4vw,38px);font-weight:1000;letter-spacing:-.04em;color:#0f172a;}
    .lokySplashName span{color:var(--brand);}
    @keyframes lokySplashZoom{0%{transform:scale(.68);opacity:0}18%{transform:scale(1);opacity:1}72%{transform:scale(1.04);opacity:1}100%{transform:scale(1.22);opacity:0}}

    /* Personalización */
    .brand-config{margin:0 0 14px;border:1px solid color-mix(in srgb,var(--brand) 24%,#e2e8f0);border-radius:14px;background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 7%,white),#fff);padding:10px 12px;}
    .brand-config summary{cursor:pointer;font-weight:950;color:#0f172a;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;}
    .brand-config summary::-webkit-details-marker{display:none;}
    .brand-config summary::after{content:"⌄";font-size:18px;color:#64748b;}
    .brand-config[open] summary::after{transform:rotate(180deg);}
    .brand-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-top:12px;}
    .brand-field{display:flex;flex-direction:column;gap:6px;}
    .brand-field>span{font-size:10px;font-weight:950;text-transform:uppercase;letter-spacing:.12em;color:#64748b;}
    .color-pair{display:grid;grid-template-columns:56px 1fr;gap:8px;}
    .color-pair input[type="color"]{width:56px;height:42px;padding:4px;border:1px solid #cbd5e1;border-radius:11px;background:#fff;}
    .logo-control{display:flex;align-items:center;gap:10px;}
    .logo-preview{width:58px;height:58px;border:1px solid #dbe3ec;border-radius:13px;background:#fff;display:grid;place-items:center;flex:0 0 auto;overflow:hidden;}
    .logo-preview img{width:50px;height:50px;object-fit:contain;}
    .logo-copy{display:flex;flex-direction:column;gap:4px;min-width:0;}
    .logo-copy small{font-size:10px;color:#64748b;line-height:1.25;}
    .logo-actions{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:2px;}
    .btn.compact{height:34px;margin:0;padding:0 10px;width:auto;font-size:11px;align-self:flex-start;}
    .btn.compact.logo-reset{background:#f8fafc;color:#475569;border-color:#cbd5e1;box-shadow:none;}
    .btn.compact.logo-reset:hover{background:#eef2f7;border-color:#94a3b8;}

    /* Botones de modo */
    .mode-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px;}
    .mode-big{height:58px;border-radius:14px;border:1px solid #dbe3ec;background:#fff;color:#475569;font-weight:950;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:.18s ease;box-shadow:0 2px 8px rgba(15,23,42,.04);}
    .mode-big:hover{transform:translateY(-1px);border-color:#a8b3c5;}
    #modeSorteoBtn.active{background:linear-gradient(135deg,#7C3AED,#5B21B6);border-color:#6D28D9;color:#fff;box-shadow:0 10px 22px rgba(109,40,217,.24);}
    #modeGroupsBtn.active{background:linear-gradient(135deg,#0EA5E9,#0369A1);border-color:#0284C7;color:#fff;box-shadow:0 10px 22px rgba(2,132,199,.24);}
    #modePairsBtn.active{background:linear-gradient(135deg,#FB923C,#EA580C);border-color:#F97316;color:#fff;box-shadow:0 10px 22px rgba(249,115,22,.24);}
    #modeTriosBtn.active{background:linear-gradient(135deg,#22C55E,#15803D);border-color:#16A34A;color:#fff;box-shadow:0 10px 22px rgba(34,197,94,.24);}

    /* Resultado ganador */
    .overlay{background:rgba(15,23,42,.64);backdrop-filter:blur(5px);}
    .modal{border-radius:24px;padding:18px;border:1px solid rgba(255,255,255,.45);box-shadow:0 34px 90px rgba(0,0,0,.34);}
    .winner-big{position:relative;overflow:hidden;margin:12px 6px 18px;padding:42px 24px 38px;background:linear-gradient(145deg,color-mix(in srgb,var(--brand) 10%,white),#fff);border:2px solid color-mix(in srgb,var(--brand) 36%,#e2e8f0);color:var(--brand2);font-size:clamp(36px,6vw,72px);letter-spacing:-.035em;box-shadow:0 18px 45px color-mix(in srgb,var(--brand) 18%,transparent);animation:winnerPop .7s cubic-bezier(.2,.9,.2,1.2) both;}
    .winner-big::before{content:"🏆";display:block;font-size:44px;margin-bottom:14px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.12));}
    .winner-big::after{content:"GANADOR";position:absolute;top:14px;right:18px;font-size:10px;letter-spacing:.18em;color:#64748b;font-weight:1000;}
    @keyframes winnerPop{0%{transform:scale(.72);opacity:0}70%{transform:scale(1.035);opacity:1}100%{transform:scale(1);opacity:1}}
    .winners-list .item{border:1px solid #e2e8f0;border-radius:14px;padding:12px;background:#fff;align-items:center;box-shadow:0 4px 14px rgba(15,23,42,.05);}
    .winners-list .num{background:color-mix(in srgb,var(--brand) 10%,white);border-color:color-mix(in srgb,var(--brand) 25%,#e2e8f0);color:var(--brand);}

    /* Ganadores múltiples: aprovechar todo el espacio disponible */
    .overlay.multi-winners .modal{
      height:82vh;
      max-height:82vh;
      display:flex;
      flex-direction:column;
      overflow:hidden;
    }
    .winners-list[data-render="winners"]{
      --winner-cols:1;
      flex:1 1 auto;
      min-height:0;
      width:100%;
      grid-template-columns:repeat(var(--winner-cols),minmax(0,1fr));
      grid-auto-rows:minmax(76px,1fr);
      align-content:stretch;
      overflow:auto;
      padding:8px 6px 10px;
      gap:12px;
    }
    .winners-list[data-render="winners"] .item{
      min-width:0;
      min-height:76px;
      height:100%;
      padding:14px 18px;
      justify-content:center;
      align-items:center;
      text-align:center;
      position:relative;
      gap:12px;
    }
    .winners-list[data-render="winners"] .num{
      width:38px;
      min-width:38px;
      height:38px;
      border-radius:12px;
      font-size:15px;
    }
    .winners-list[data-render="winners"] .winner-name{
      min-width:0;
      overflow-wrap:anywhere;
      font-size:clamp(17px,2.1vw,30px);
      line-height:1.12;
      font-weight:950 !important;
      letter-spacing:-.018em;
    }
    .winners-list[data-render="winners"][data-cols="2"] .winner-name{font-size:clamp(16px,1.65vw,25px);}
    .winners-list[data-render="winners"][data-cols="3"] .winner-name{font-size:clamp(15px,1.25vw,21px);}
    .winners-list[data-render="winners"][data-cols="3"] .item{padding:12px 12px;gap:9px;}
    .winners-list[data-render="winners"][data-cols="3"] .num{width:32px;min-width:32px;height:32px;font-size:13px;}

    /* Más de 18 ganadores: modal más ancho y mayor densidad de columnas */
    .overlay.many-winners .modal{width:92vw;max-width:1600px;height:86vh;max-height:86vh;}
    .winners-list[data-render="winners"][data-cols="4"] .winner-name{font-size:clamp(14px,1.05vw,19px);}
    .winners-list[data-render="winners"][data-cols="5"] .winner-name{font-size:clamp(13px,.88vw,17px);}
    .winners-list[data-render="winners"][data-cols="6"] .winner-name{font-size:clamp(12px,.76vw,16px);}
    .winners-list[data-render="winners"][data-cols="4"] .item,
    .winners-list[data-render="winners"][data-cols="5"] .item,
    .winners-list[data-render="winners"][data-cols="6"] .item{padding:9px 9px;gap:7px;min-height:62px;}
    .winners-list[data-render="winners"][data-cols="4"] .num,
    .winners-list[data-render="winners"][data-cols="5"] .num,
    .winners-list[data-render="winners"][data-cols="6"] .num{width:29px;min-width:29px;height:29px;font-size:11px;border-radius:9px;}

    @media (max-width:720px){
      .overlay.multi-winners .modal,.overlay.many-winners .modal{width:94vw;max-width:94vw;height:88vh;max-height:88vh;}
      .winners-list[data-render="winners"]{grid-auto-rows:minmax(70px,1fr);gap:8px;}
      .winners-list[data-render="winners"] .item{min-height:70px;padding:10px 10px;}
      .winners-list[data-render="winners"] .winner-name{font-size:clamp(15px,4.4vw,22px);}
      .winners-list[data-render="winners"][data-cols="2"] .winner-name{font-size:clamp(13px,3.6vw,18px);}
    }

    /* Grupos visuales */
    .winners-list[data-render="groups"],.winners-list.groups-zoom{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;}
    .group-card{position:relative;border-width:1px;border-style:solid;border-radius:16px;padding:14px;box-shadow:0 8px 20px rgba(15,23,42,.06);min-width:0;}
    .group-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px;}
    .group-title{font-size:15px;font-weight:1000;margin:0;color:#111827;}
    .group-count{flex:0 0 auto;border-radius:999px;padding:4px 8px;background:rgba(255,255,255,.75);border:1px solid rgba(15,23,42,.08);font-size:10px;font-weight:950;color:#475569;}
    .group-members{display:grid;grid-template-columns:1fr;gap:6px;}
    .member-pill{display:flex;align-items:center;gap:7px;white-space:normal;overflow:visible;text-overflow:clip;border-radius:10px;padding:7px 8px;background:rgba(255,255,255,.78);}
    .member-index{width:23px;height:23px;display:grid;place-items:center;border-radius:8px;background:#fff;border:1px solid rgba(15,23,42,.10);font-size:10px;font-weight:1000;flex:0 0 auto;color:#475569;}

    /* Ajuste manual de grupos después del sorteo */
    .group-editor{display:none;margin:10px 6px 2px;padding:12px;border:1px solid #dbe3ec;border-radius:16px;background:#f8fafc;flex:0 0 auto;}
    .group-editor.show{display:block;}
    .group-editor-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px;}
    .group-editor-title{font-size:12px;font-weight:1000;color:#0f172a;}
    .group-editor-hint{font-size:10px;color:#64748b;font-weight:700;}
    .group-editor-grid{display:grid;grid-template-columns:1.2fr .72fr 1.2fr auto;gap:8px;align-items:end;}
    .group-editor label{margin:0;font-size:10px;color:#475569;}
    .group-editor select{height:38px;padding:7px 9px;font-size:12px;border-radius:10px;background:#fff;}
    .group-editor .btn{width:auto;height:38px;margin:0;padding:0 14px;font-size:12px;background:#0ea5e9;color:#fff;border-color:#0284c7;}
    .group-editor .btn:hover{filter:brightness(.96);}
    @media(max-width:780px){.group-editor-grid{grid-template-columns:1fr 1fr}.group-editor .btn{width:100%}.group-editor-head{align-items:flex-start;flex-direction:column}}

    /* Configuración cambia según el modo */
    .side-card.mode-sorteo-config{background:linear-gradient(180deg,#fbf8ff 0%,#f6efff 100%);border-color:#e5d4ff;box-shadow:0 12px 30px rgba(124,58,237,.10);}
    .side-card.mode-groups-config{background:linear-gradient(180deg,#f5fbff 0%,#eaf7ff 100%);border-color:#ccecff;box-shadow:0 12px 30px rgba(14,165,233,.10);}
    .side-card.mode-pairs-config{background:linear-gradient(180deg,#fffaf4 0%,#fff0df 100%);border-color:#fed7aa;box-shadow:0 12px 30px rgba(249,115,22,.10);}
    .side-card.mode-trios-config{background:linear-gradient(180deg,#f6fff8 0%,#eafbee 100%);border-color:#bbf7d0;box-shadow:0 12px 30px rgba(34,197,94,.10);}
    .side-card.mode-sorteo-config .side-title{color:#5b21b6;}
    .side-card.mode-groups-config .side-title{color:#0369a1;}
    .side-card.mode-pairs-config .side-title{color:#c2410c;}
    .side-card.mode-trios-config .side-title{color:#15803d;}

    /* Arrastrar participantes entre grupos (solo modo Grupos) */
    .group-card.drag-over{outline:3px dashed rgba(14,165,233,.72);outline-offset:3px;transform:translateY(-1px);}
    .member-pill[draggable="true"]{cursor:grab;transition:opacity .15s ease,transform .15s ease,box-shadow .15s ease;}
    .member-pill[draggable="true"]:active{cursor:grabbing;}
    .member-pill.dragging{opacity:.42;transform:scale(.98);}
    .member-pill.swap-target{outline:2px solid rgba(124,58,237,.55);outline-offset:1px;box-shadow:0 0 0 4px rgba(124,58,237,.09);}

    /* Footer */
    .lokyFooter{width:100%;background:#fff;border-top:1px solid #e2e8f0;margin-top:12px;}
    .lokyFooterInner{width:min(1320px,96vw);margin:auto;padding:22px 16px 26px;display:flex;align-items:center;justify-content:space-between;gap:24px;}
    .lokyFooterLogo{width:min(230px,42vw);height:auto;display:block;object-fit:contain;}
    .lokyFooterText{text-align:right;color:#64748b;font-size:11px;font-weight:800;line-height:1.5;}
    .lokyFooterText strong{display:block;color:#0f172a;font-size:12px;}

    /* Proyector: solo escenario + tiempo + resultado emergente */
    body.projector-mode .productTopbar,body.projector-mode .lokyFooter{display:none!important;}
    body.projector-mode .stats{grid-template-columns:minmax(260px,420px);justify-content:center;margin:0 auto 12px;}
    body.projector-mode .stats .stat-card:nth-child(2),body.projector-mode .stats .stat-card:nth-child(3){display:none!important;}
    body.projector-mode .stage-card{min-height:calc(100vh - 92px);}
    body.projector-mode .stage-wrap{height:calc(100vh - 118px);}
    body.projector-mode .app{padding-top:12px;}

    @media(max-width:860px){
      .productTopbarInner{min-height:72px;gap:12px;padding:10px 12px;}.productMark{width:48px;height:48px}.productCopy{gap:7px}.productName{font-size:28px}.productTagline{width:100%;font-size:11px}.institutionMini{min-width:0;max-width:210px}.winners-list[data-render="groups"],.winners-list.groups-zoom{grid-template-columns:1fr;}.lokyFooterInner{flex-direction:column;align-items:flex-start}.lokyFooterText{text-align:left}
    }
    @media(max-width:620px){.institutionMini{display:none}.mode-buttons{grid-template-columns:1fr}.modal{width:94vw;max-width:94vw}.winner-big{padding:34px 14px 30px}.productTagline{white-space:normal}.lokySplash img{width:135px}}


    /* ===== Ajustes LokySorteo · cabecera, ayudas y personalización ===== */
    .productTopbarInner{
      display:grid;
      grid-template-columns:minmax(300px,1fr) minmax(360px,680px) minmax(300px,1fr);
      gap:20px;
      align-items:center;
      min-height:118px;
    }
    .productBrandBlock{display:flex;align-items:center;gap:14px;min-width:0;justify-self:start;}
    .productBrandLink{display:inline-flex;flex:0 0 auto;border-radius:16px;text-decoration:none;}
    .productBrandLink:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 35%,transparent);outline-offset:3px;}
    .productBrandBlock .productCopy{display:flex;flex-direction:column;align-items:flex-start;gap:6px;flex:1 1 auto;}
    .productBrandBlock .productName{font-size:clamp(27px,2.4vw,39px);}
    .productBrandBlock .productTagline{white-space:normal;line-height:1.25;}

    .institutionMini{
      width:100%;
      max-width:680px;
      min-width:0;
      justify-self:center;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:5px;
      padding:4px 10px;
      border:0;
      background:transparent;
      text-align:center;
    }
    .institutionMini img{
      width:48px;
      height:48px;
      object-fit:contain;
      border-radius:11px;
      border:1px solid #e2e8f0;
      background:#fff;
      box-shadow:0 6px 15px rgba(15,23,42,.06);
      flex:0 0 auto;
    }
    .institutionMiniText{align-items:center;width:100%;line-height:1.15;text-align:center;}
    .institutionMiniText small{font-size:9px;letter-spacing:.14em;}
    .institutionMiniText strong{
      display:block;
      width:100%;
      max-width:650px;
      margin:2px auto 0;
      font-size:clamp(12px,1.05vw,15px);
      line-height:1.18;
      white-space:normal;
      overflow:visible;
      text-overflow:clip;
      overflow-wrap:break-word;
      text-align:center;
    }
    .institutionAppTitle{display:block;margin-top:3px;font-size:10px;font-weight:800;color:#64748b;text-align:center;}

    .topbarActions{display:flex;flex-direction:column;align-items:stretch;gap:7px;min-width:162px;justify-self:end;}
    .topbarAction{
      min-height:34px;
      padding:7px 11px;
      border:1px solid #dbe3ec;
      border-radius:11px;
      background:#fff;
      color:#0f172a;
      font-weight:900;
      font-size:11px;
      cursor:pointer;
      box-shadow:0 2px 8px rgba(15,23,42,.04);
      white-space:nowrap;
    }
    .topbarAction:hover{background:#f8fafc;border-color:#cbd5e1;}
    .topbarAction:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 28%,transparent);outline-offset:2px;}

    .appModal{position:fixed;inset:0;z-index:11000;display:none;place-items:center;padding:16px;}
    .appModal.is-open{display:grid;}
    .appModalBackdrop{position:absolute;inset:0;background:rgba(15,23,42,.60);backdrop-filter:blur(4px);}
    .appModalCard{
      position:relative;
      width:min(650px,calc(100vw - 28px));
      max-height:calc(100vh - 32px);
      overflow:auto;
      background:#fff;
      border:1px solid rgba(255,255,255,.4);
      border-radius:22px;
      box-shadow:0 28px 80px rgba(15,23,42,.30);
    }
    .appModalHead{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:16px 18px;border-bottom:1px solid #e2e8f0;}
    .appModalHead h2{margin:0;font-size:20px;color:#0f172a;}
    .appModalHead p{margin:5px 0 0;color:#64748b;font-size:12px;line-height:1.4;}
    .appModalClose{width:34px;height:34px;border-radius:10px;border:1px solid #dbe3ec;background:#fff;color:#334155;font-size:18px;font-weight:900;cursor:pointer;flex:0 0 auto;}
    .appModalBody{padding:16px 18px;}
    .appModalActions{display:flex;justify-content:flex-end;gap:9px;flex-wrap:wrap;padding:14px 18px;border-top:1px solid #e2e8f0;}
    .modalBtn{min-height:40px;padding:8px 14px;border-radius:11px;border:1px solid #dbe3ec;background:#fff;color:#0f172a;font-weight:900;cursor:pointer;}
    .modalBtn.primary{background:var(--brand);border-color:var(--brand);color:#fff;}
    .modalBtn.secondary{background:#fff;}
    .modalBtn.restore{margin-right:auto;}
    .modalBtn:hover{filter:brightness(.97);}

    .howGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
    .howStep{border:1px solid #e2e8f0;border-radius:14px;background:#f8fafc;padding:12px;}
    .howStep b{display:block;font-size:13px;color:#0f172a;}
    .howStep span{display:block;margin-top:4px;font-size:11px;line-height:1.4;color:#64748b;}

    .brand-grid.modalBrandGrid{margin-top:0;gap:14px;}
    .brandHelp{font-size:10px;color:#64748b;line-height:1.35;margin-top:2px;}
    .brandNameHelp strong{color:#334155;}
    .brandModalLogoRow{display:flex;align-items:center;gap:12px;}
    .brandModalLogoRow .logo-preview{width:68px;height:68px;}
    .brandModalLogoRow .logo-preview img{width:58px;height:58px;}
    .brandModalLogoRow .logo-copy{flex:1;}
    .brandModalLogoRow input[type="file"]{display:none;}

    .saveToast{
      position:fixed;
      z-index:12000;
      top:18px;
      left:50%;
      transform:translate(-50%,-14px);
      min-width:min(430px,calc(100vw - 32px));
      max-width:calc(100vw - 32px);
      padding:12px 16px;
      border:1px solid #86efac;
      border-radius:13px;
      background:#ecfdf5;
      color:#166534;
      box-shadow:0 16px 38px rgba(15,23,42,.18);
      text-align:center;
      font-size:13px;
      font-weight:900;
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      transition:opacity .22s ease,transform .22s ease,visibility .22s ease;
    }
    .saveToast.show{opacity:1;visibility:visible;transform:translate(-50%,0);}


    /* ===== Ajustes v4 · temas, resumen previo y doble sorteo ===== */
    .distributionConfig{margin-top:12px;padding-top:12px;border-top:1px solid rgba(148,163,184,.28);}
    .topicBankStats{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px;}
    .topicBankStats span{display:inline-flex;align-items:center;padding:5px 8px;border:1px solid #dbe3ec;border-radius:999px;background:#fff;font-size:10px;font-weight:850;color:#475569;}
    .preSortSummary{margin-top:12px;padding:11px 12px;border:1px solid color-mix(in srgb,var(--brand) 24%,#dbe3ec);border-radius:13px;background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 7%,white),#fff);}
    .preSortSummary>span{display:block;font-size:9px;font-weight:950;letter-spacing:.11em;text-transform:uppercase;color:#64748b;}
    .preSortSummary>strong{display:block;margin-top:4px;font-size:12px;line-height:1.42;color:#0f172a;}
    .preSortSummary>small{display:block;margin-top:4px;font-size:10px;line-height:1.35;color:#64748b;}
    .preSortSummary.warn{border-color:#fbbf24;background:#fffbeb;}
    .preSortSummary.warn>small{color:#92400e;font-weight:800;}

    .topicTilesPane{display:none;position:absolute;left:50%;right:0;top:0;bottom:0;background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 5%,white),#fff);overflow:hidden;}
    .topicTiles{position:absolute;inset:0;overflow:hidden;}
    .sortPaneTitle{position:absolute;z-index:8;top:10px;left:12px;display:none;padding:5px 9px;border-radius:999px;border:1px solid #dbe3ec;background:rgba(255,255,255,.92);box-shadow:0 4px 12px rgba(15,23,42,.07);font-size:9px;font-weight:950;letter-spacing:.12em;color:#475569;pointer-events:none;}
    .topicTilesPane .sortPaneTitle{display:block;color:var(--brand);}
    .stage-wrap.dual-sort .topicTilesPane{display:block;border-left:2px solid color-mix(in srgb,var(--brand) 34%,#dbe3ec);}
    .stage-wrap.dual-sort .topicTilesPane::before{
      content:"";
      position:absolute;
      left:0;
      right:0;
      top:50%;
      border-top:2px dashed var(--danger);
      opacity:.85;
      z-index:6;
      pointer-events:none;
    }
    .stage-wrap.dual-sort .topicTilesPane::after{
      content:"LÍNEA DE SELECCIÓN";
      position:absolute;
      left:12px;
      top:calc(50% - 22px);
      z-index:7;
      padding:2px 8px;
      border-radius:999px;
      border:1px solid rgba(232,91,91,.35);
      background:rgba(255,255,255,.94);
      color:var(--danger);
      font-size:10px;
      font-weight:900;
      letter-spacing:.06em;
      text-transform:uppercase;
      pointer-events:none;
    }
    .stage-wrap.dual-sort .tiles{right:50%;}
    .stage-wrap.dual-sort #namesPaneTitle{display:block;}
    .stage-wrap.dual-sort .line{right:50%;}
    .stage-wrap.dual-sort .line-label{max-width:calc(50% - 24px);}
    .topic-tile{position:absolute;display:inline-flex;align-items:center;justify-content:center;max-width:calc(100% - 18px);padding:10px 13px;border-radius:13px;border:2px solid var(--brand);background:#fff;color:var(--brand2);box-shadow:0 8px 18px rgba(15,23,42,.10);font-size:13px;font-weight:900;line-height:1.15;text-align:center;overflow-wrap:anywhere;will-change:transform;}
    .topic-tile.small{padding:8px 10px;font-size:12px;}
    .topic-tile.large{padding:12px 15px;font-size:14px;}
    @media(max-width:720px){.topic-tile{font-size:11px;padding:8px 9px}.sortPaneTitle{top:7px;left:8px}.stage-wrap.dual-sort .line-label{font-size:8px;}}

    .group-topic{margin:0 0 10px;padding:9px 10px;border-radius:11px;background:rgba(255,255,255,.82);border:1px solid rgba(15,23,42,.10);}
    .group-topic span{display:block;font-size:9px;font-weight:950;letter-spacing:.11em;text-transform:uppercase;color:#64748b;margin-bottom:3px;}
    .group-topic strong{display:block;font-size:13px;line-height:1.28;color:#0f172a;overflow-wrap:anywhere;}
    .lastResultBox{margin-top:10px;border:1px solid #dbe3ec;border-radius:14px;background:#f8fafc;padding:10px;}
    .lastResultHead{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
    .lastResultHead strong{font-size:12px;color:#0f172a;}
    .lastResultSummary{font-size:10px;color:#64748b;margin-top:4px;line-height:1.4;}
    .lastResultActions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px;}
    .lastResultActions .btn{margin:0;height:40px;font-size:11px;}
    .lastResultActions .btn.report{background:var(--brand);border-color:var(--brand);color:#fff;}
    @media(max-width:520px){.lastResultActions{grid-template-columns:1fr;}}

    @media(max-width:980px){
      .productTopbarInner{grid-template-columns:1fr auto;gap:12px;min-height:0;padding:11px 12px;}
      .productBrandBlock{grid-column:1;}
      .institutionMini{grid-column:1/-1;grid-row:2;max-width:100%;order:3;}
      .topbarActions{grid-column:2;grid-row:1;min-width:150px;}
      .institutionMiniText strong{max-width:760px;}
    }
    @media(max-width:640px){
      .productTopbarInner{display:flex;flex-direction:column;align-items:stretch;}
      .productBrandBlock{justify-content:center;text-align:center;}
      .productBrandBlock .productCopy{align-items:center;text-align:center;}
      .topbarActions{display:grid;grid-template-columns:1fr;min-width:0;width:100%;}
      .institutionMini{display:flex!important;}
      .howGrid{grid-template-columns:1fr;}
      .appModalActions{flex-direction:column;}
      .modalBtn,.modalBtn.restore{width:100%;margin-right:0;}
      .brandModalLogoRow{align-items:flex-start;}
    }



    /* ===== Ajustes v5 · layout vertical + escenario ampliado + temas multicolor ===== */
    .grid{
      display:flex!important;
      flex-direction:column!important;
      gap:14px!important;
      align-items:stretch!important;
    }
    #configCard{order:1;width:100%;}
    .grid>main{order:2;width:100%;min-width:0;}
    #configCard .form-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
    #configCard .grid-span{grid-column:1/-1;}
    @media(max-width:1050px){#configCard .form-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
    @media(max-width:620px){#configCard .form-grid{grid-template-columns:1fr;}}

    /* Al iniciar, la configuración se compacta y el escenario gana casi toda la ventana. */
    body.sort-running .app{max-width:none;width:100%;margin:8px auto 0;padding:0 12px 16px;}
    body.sort-running #configCard{padding:9px 12px;border-radius:12px;}
    body.sort-running #configCard .form-grid,
    body.sort-running #configCard .participants-block,
    body.sort-running #configCard details.advanced,
    body.sort-running #configCard #btnReorder,
    body.sort-running #configCard #preSortSummary,
    body.sort-running #configCard #resultText,
    body.sort-running #configCard #lastResultBox{display:none!important;}
    body.sort-running #configCard .side-head{margin-bottom:4px;}
    body.sort-running #configCard #btnStart{width:min(330px,100%);height:42px;margin:4px auto 0;}
    body.sort-running .stats{margin-bottom:8px;}
    body.sort-running .stat-card{padding:9px 10px;}
    body.sort-running .stat-value{font-size:24px;}
    body.sort-running .timerbar-wrap{margin:7px 0 10px;}
    body.sort-running .stage-card{min-height:0;padding:8px;}
    body.sort-running .stage-wrap{height:clamp(520px,calc(100dvh - 315px),920px);min-height:520px;}
    @media(max-width:720px){
      body.sort-running .stage-wrap{height:clamp(470px,calc(100dvh - 300px),760px);min-height:470px;}
      body.sort-running .stats{grid-template-columns:1fr 1fr 1fr;gap:6px;}
      body.sort-running .stat-label{font-size:8px;}
      body.sort-running .stat-value{font-size:18px;}
    }

    .topic-tile{
      transition:border-color .15s ease,color .15s ease,background-color .15s ease,box-shadow .15s ease;
    }
    .group-topic{transition:border-color .15s ease,background-color .15s ease;}