:root{--bg:#040b17;--panel:#091629;--panel2:#0d1e35;--line:#20334f;--text:#f6f8fc;--muted:#8fa2bb;--purple:#7447ff;--purple2:#9b72ff;--orange:#ff7a21;--green:#27d17f;--gold:#f1b634;--danger:#ff5f68;--cyan:#38bdf8}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--text);background:radial-gradient(circle at 25% 0,#10264b 0,transparent 35%),radial-gradient(circle at 100% 30%,#1b103b 0,transparent 32%),linear-gradient(180deg,#030914,#07111f 75%,#06110d)}a{color:inherit}.app-shell{max-width:1500px;margin:auto;padding:22px}.glass{background:linear-gradient(180deg,rgba(12,29,52,.93),rgba(5,15,29,.93));border:1px solid rgba(101,132,170,.28);box-shadow:0 22px 55px rgba(0,0,0,.3);border-radius:20px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 0 22px}.brand{display:flex;align-items:center;gap:14px}.brand-logo{width:105px;height:82px;object-fit:contain;filter:drop-shadow(0 8px 18px rgba(0,0,0,.35))}.brand h1{font-size:clamp(1.35rem,3vw,2.25rem);margin:0;font-weight:950;letter-spacing:-.04em}.brand p{margin:2px 0 0;color:#d3ddeb;font-weight:650}.accent{color:var(--orange)}.toolbar{display:flex;gap:10px;flex-wrap:wrap}.btn{border:1px solid var(--line);background:#0a1729;color:#fff;padding:11px 16px;border-radius:12px;font-weight:850;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:8px;justify-content:center;margin-top: 8px;}.btn:hover{border-color:#526a8a;background:#10233d}.btn-primary{background:linear-gradient(135deg,var(--purple),#5421d8);border-color:#8d69ff;box-shadow:0 10px 25px rgba(116,71,255,.3)}.btn-danger{background:#35161d;border-color:#6f2a36;color:#ffb8bd}.btn-success{background:#123324;border-color:#285f47;color:#9af0c4}.btn:disabled{opacity:.45;cursor:not-allowed}.grid{display:grid;gap:18px}.card{padding:18px}.eyebrow{color:#a9b8cb;text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;font-weight:900}.title{margin:4px 0 0;font-size:1.25rem;font-weight:950}.select,input{width:100%;background:#071527;color:#fff;border:1px solid #29415f;border-radius:12px;min-height:46px;padding:0 13px;font-weight:700}.select:focus,input:focus{outline:none;border-color:#805dff;box-shadow:0 0 0 3px rgba(116,71,255,.18)}.metric-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%;min-width:0}.metric{padding:13px 8px;border-radius:14px;background:#071426;border:1px solid #1b304c;text-align:center;min-width:0;overflow:hidden}.metric strong{display:block;font-size:clamp(1.15rem,2vw,1.45rem);line-height:1.05}.metric span{display:block;font-size:clamp(.58rem,1.2vw,.72rem);color:var(--muted);font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.logo{width:44px;height:44px;object-fit:contain;border-radius:10px;background:rgba(255,255,255,.05);padding:3px}.logo-lg{width:90px;height:90px}.team-line{display:flex;align-items:center;gap:10px;min-width:0}.team-line b{overflow:hidden;text-overflow:ellipsis}.pill{border-radius:999px;padding:6px 10px;background:#17233b;border:1px solid #2b4162;color:#c8d4e4;font-size:.78rem;font-weight:850}.progress{height:8px;border-radius:999px;background:#0b1b31;overflow:hidden}.progress>i{height:100%;display:block;background:linear-gradient(90deg,var(--purple),var(--cyan));border-radius:inherit}.empty{color:var(--muted);font-style:italic}.footer{color:#8191a6;text-align:center;font-size:.8rem;padding:24px 0}.modal-note{font-size:.82rem;color:var(--muted)}@media(max-width:800px){.app-shell{padding:14px}.topbar{align-items:flex-start}.brand-logo{width:80px;height:65px}.toolbar{justify-content:flex-end}.metric-row{grid-template-columns:1fr}.hide-mobile{display:none}}@media print{body{background:#fff;color:#111}.no-print,.topbar .toolbar{display:none!important}.glass{background:#fff;color:#111;border:1px solid #ccc;box-shadow:none}.pill,.metric{color:#111;background:#fff}}

/* ==========================================================
   TEMA COSTA RICA · OPTIMIZADO PARA PROYECCIÓN
   Azul como base, blanco para contraste y rojo como acento.
   ========================================================== */
:root{
  --bg:#0b3558;
  --panel:#123f63;
  --panel-2:#174c73;
  --card:#123f63;
  --text:#ffffff;
  --muted:#d9e8f3;
  --line:rgba(255,255,255,.20);
  --purple:#ce1126;
  --purple-2:#e33145;
  --orange:#ffffff;
  --green:#2fb36f;
  --red:#ce1126;
  --accent:#ce1126;
}

html,body{
  background:
    radial-gradient(circle at 8% 12%,rgba(255,255,255,.14) 0,rgba(255,255,255,0) 24%),
    radial-gradient(circle at 91% 14%,rgba(206,17,38,.28) 0,rgba(206,17,38,0) 28%),
    radial-gradient(circle at 76% 88%,rgba(255,255,255,.09) 0,rgba(255,255,255,0) 24%),
    linear-gradient(135deg,#062d52 0%,#0b4b7b 46%,#123f63 70%,#7d1830 100%) !important;
  background-attachment:fixed !important;
  color:#fff !important;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    linear-gradient(118deg,
      rgba(0,43,92,.18) 0%,
      rgba(255,255,255,.045) 46%,
      rgba(206,17,38,.13) 100%);
}

.glass,.card,.panel,.pair,.metric{
  background:linear-gradient(145deg,rgba(15,61,96,.96),rgba(9,45,75,.94)) !important;
  border-color:rgba(255,255,255,.20) !important;
  box-shadow:0 14px 34px rgba(0,18,38,.28) !important;
}

.topbar{
  background:linear-gradient(90deg,rgba(4,40,73,.96),rgba(12,72,112,.93),rgba(118,20,42,.82)) !important;
  border-color:rgba(255,255,255,.18) !important;
}

.btn{
  border-color:rgba(255,255,255,.22) !important;
  background:rgba(6,47,79,.88) !important;
  color:#fff !important;
}
.btn:hover{
  background:rgba(18,79,120,.98) !important;
  border-color:rgba(255,255,255,.42) !important;
}
.btn-primary{
  background:linear-gradient(135deg,#ce1126,#a50e20) !important;
  border-color:#ed5363 !important;
  box-shadow:0 8px 22px rgba(206,17,38,.28) !important;
}
.btn-danger{
  background:linear-gradient(135deg,#8e1021,#ce1126) !important;
}

.pill,.badge,.eyebrow,.accent{
  color:#fff !important;
}
.pill{
  background:rgba(206,17,38,.82) !important;
  border-color:rgba(255,255,255,.30) !important;
}

.select,input,select{
  background:#0d3b60 !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.26) !important;
}

.empty,.muted,.subtitle,.team-meta{
  color:#d9e8f3 !important;
}

/* Franja patria sutil en la parte superior de cada vista */
.app-shell::before{
  content:"";
  display:block;
  height:5px;
  width:100%;
  margin-bottom:10px;
  border-radius:999px;
  background:linear-gradient(90deg,#002b5c 0 34%,#ffffff 34% 42%,#ce1126 42% 58%,#ffffff 58% 66%,#002b5c 66% 100%);
  box-shadow:0 2px 12px rgba(0,0,0,.20);
}

/* Mejor contraste de textos para proyectores */
h1,h2,h3,.title,strong,b{
  text-shadow:0 1px 2px rgba(0,0,0,.28);
}

/* El resultado del sorteo conserva protagonismo en rojo patrio */
.result-card,.draw-result{
  border-color:rgba(255,255,255,.28) !important;
}

/* Impresión: fondo limpio y sin degradados */
@media print{
  html,body{
    background:#fff !important;
    color:#111 !important;
  }
  body::before,.app-shell::before{display:none !important}
  .glass,.card,.panel,.pair,.metric{
    background:#fff !important;
    color:#111 !important;
    border-color:#bbb !important;
    box-shadow:none !important;
  }
  h1,h2,h3,.title,strong,b{color:#111 !important;text-shadow:none !important}
  .muted,.empty{color:#555 !important}
}

/* ==========================================================
   AJUSTE DE SEPARACIÓN VISUAL ENTRE ENCABEZADO Y CONTENIDO
   ========================================================== */

/* El encabezado deja de sentirse pegado al bloque principal */
.topbar{
  margin-bottom:22px !important;
  border-radius:0 0 22px 22px !important;
  overflow:hidden !important;
}

/* Más aire entre la franja patria y el encabezado */
.app-shell::before{
  margin-bottom:14px !important;
}

/* Primer bloque después del encabezado */
.topbar + section,
.topbar + .glass,
.topbar + .card,
.topbar + main,
header.topbar + section{
  margin-top:0 !important;
}

/* En la portada, el hero queda claramente separado */
.hero,
.hero-card,
.home-hero,
main > .glass:first-of-type,
.app-shell > .glass:first-of-type{
  border-radius:26px !important;
}

/* Sombra más suave para que ambos bloques se distingan */
.topbar{
  box-shadow:0 10px 26px rgba(0,22,45,.24) !important;
}
.topbar + section,
.app-shell > section.glass:first-of-type{
  box-shadow:0 18px 38px rgba(0,20,42,.22) !important;
}

/* ==========================================================
   HEADER REDONDEADO COMPLETO + ESPACIADO DEL BOTÓN ADMIN
   ========================================================== */

.topbar{
  border-radius:24px !important;
  padding:22px 28px !important;
  margin-left:0 !important;
  margin-right:0 !important;
  overflow:hidden !important;
}

/* Asegura que el contenido del header no toque los extremos */
.topbar .brand{
  margin-left:0 !important;
}

.topbar .toolbar{
  margin-right:0 !important;
  padding-right:0 !important;
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
}

/* Botón Admin con aire respecto al borde */
.topbar .toolbar .btn,
.topbar .toolbar a.btn,
.topbar .toolbar button.btn{
  margin-right:0 !important;
}

/* Si existe un botón Admin específico, aumenta su separación visual */
.topbar .toolbar a[href*="admin"],
.topbar .toolbar button[id*="admin"],
.topbar .toolbar .admin-btn{
  margin-right:0 !important;
  padding-left:22px !important;
  padding-right:22px !important;
}

/* En pantallas grandes, da todavía más respiración al encabezado */
@media (min-width:1200px){
  .topbar{
    padding-left:30px !important;
    padding-right:30px !important;
  }
}

/* En móvil conserva redondeo pero reduce padding */
@media (max-width:700px){
  .topbar{
    border-radius:18px !important;
    padding:16px 18px !important;
  }
}


/* ==========================================================
   RESPONSIVE GLOBAL · TORNEO DE LA INDEPENDENCIA
   Adaptación para escritorio, tablet y teléfonos.
   ========================================================== */

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  width:100%;
  overflow-x:hidden;
}
img,svg,video,canvas{
  max-width:100%;
}
.app-shell,
.grid,
.glass,
.card,
.topbar,
.brand,
.toolbar,
.team-line{
  min-width:0;
}
select,input,button,textarea{
  max-width:100%;
}
.table-wrap{
  width:100%;
  max-width:100%;
  overflow-x:auto !important;
  -webkit-overflow-scrolling:touch;
}
table{
  max-width:100%;
}
.toolbar .btn{
  white-space:normal;
  text-align:center;
}
.team-line b,
.title,
.brand h1,
.brand p{
  overflow-wrap:anywhere;
}

/* Tablet */
@media (max-width:900px){
  .app-shell{
    width:100%;
    max-width:100%;
    padding:12px !important;
  }

  .app-shell::before{
    margin-bottom:10px !important;
  }

  .topbar{
    width:100%;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:14px !important;
    padding:16px !important;
    margin-bottom:16px !important;
  }

  .brand{
    width:100%;
    align-items:center;
  }

  .brand > div{
    min-width:0;
    flex:1;
  }

  .brand-logo{
    width:74px !important;
    height:64px !important;
    flex:0 0 auto;
  }

  .brand h1{
    font-size:clamp(1.25rem,5vw,1.85rem) !important;
    line-height:1.05;
  }

  .brand p{
    font-size:.9rem;
    line-height:1.25;
  }

  .topbar .toolbar{
    width:100%;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px !important;
  }

  .topbar .toolbar .btn{
    width:100%;
    min-width:0;
    margin:0 !important;
    padding:10px 11px !important;
  }

  .glass,.card{
    border-radius:16px !important;
  }

  .card{
    padding:15px;
  }

  .metric-row{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }

  .metric{
    padding:11px 6px;
  }

  .metric span{
    white-space:normal;
    line-height:1.15;
  }

  .logo-lg{
    width:74px;
    height:74px;
  }
}

/* Teléfono */
@media (max-width:600px){
  .app-shell{
    padding:8px !important;
  }

  .topbar{
    border-radius:15px !important;
    padding:12px !important;
    gap:11px !important;
  }

  .brand{
    gap:9px !important;
  }

  .brand-logo{
    width:56px !important;
    height:52px !important;
  }

  .brand h1{
    font-size:1.2rem !important;
    letter-spacing:-.025em !important;
  }

  .brand p{
    font-size:.78rem;
  }

  .topbar .toolbar{
    grid-template-columns:1fr 1fr;
    gap:6px !important;
  }

  .topbar .toolbar .btn{
    font-size:.78rem;
    line-height:1.15;
    min-height:42px;
    padding:8px 7px !important;
  }

  .btn{
    min-height:44px;
    padding:10px 12px;
  }

  select,input,textarea,.select{
    min-height:44px;
    font-size:16px !important; /* evita zoom automático en iPhone */
  }

  .eyebrow{
    font-size:.65rem;
  }

  .title{
    font-size:1.08rem;
  }

  .metric-row{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:5px;
  }

  .metric strong{
    font-size:1.08rem;
  }

  .metric span{
    font-size:.58rem;
  }

  .team-line{
    gap:7px;
  }

  .logo{
    width:38px;
    height:38px;
    flex:0 0 38px;
  }

  .logo-lg{
    width:64px;
    height:64px;
  }

  .pill{
    font-size:.68rem;
    padding:5px 8px;
  }

  .modal-note{
    font-size:.76rem;
  }

  .footer{
    padding:16px 5px;
  }

  .table-wrap{
    border-radius:10px;
  }

  table{
    font-size:.8rem;
  }

  th,td{
    padding:8px 7px;
  }

  .swal2-popup{
    width:calc(100% - 24px) !important;
    max-width:440px !important;
    padding:1rem !important;
  }
}

/* Teléfono angosto */
@media (max-width:390px){
  .topbar .toolbar{
    grid-template-columns:1fr;
  }
  .metric-row{
    grid-template-columns:1fr !important;
  }
}


/* =========================================================
   SWEETALERT2 · TEMA TORNEO DE INDEPENDENCIA EDICIÓN 54
   ========================================================= */
.swal2-container{
  font-family:inherit !important;
  backdrop-filter:blur(5px);
}
.swal2-popup.torneo-swal{
  width:min(92vw,440px) !important;
  padding:1.7rem 1.6rem 1.45rem !important;
  border-radius:22px !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.20) !important;
  background:
    radial-gradient(circle at 92% 8%,rgba(206,17,38,.25),transparent 30%),
    linear-gradient(145deg,#0f3d60 0%,#092d4b 100%) !important;
  box-shadow:0 28px 70px rgba(0,18,38,.48) !important;
}
.swal2-popup.torneo-swal::before{
  content:"";
  position:absolute;
  top:0;left:22px;right:22px;
  height:4px;
  border-radius:0 0 8px 8px;
  background:linear-gradient(90deg,#002b5c 0 34%,#fff 34% 42%,#ce1126 42% 58%,#fff 58% 66%,#002b5c 66% 100%);
}
.torneo-swal .swal2-title{
  color:#fff !important;
  font-weight:1000 !important;
  font-size:1.45rem !important;
  letter-spacing:-.02em;
  padding-top:.25rem !important;
}
.torneo-swal .swal2-html-container{
  color:#d9e8f3 !important;
  font-size:.93rem !important;
  line-height:1.5 !important;
}
.torneo-swal .swal2-actions{gap:9px !important;margin-top:1.25rem !important}
.torneo-swal .swal2-styled{
  border-radius:12px !important;
  padding:.72rem 1.15rem !important;
  font-weight:900 !important;
  box-shadow:none !important;
  transition:transform .15s ease,filter .15s ease !important;
}
.torneo-swal .swal2-styled:hover{transform:translateY(-1px);filter:brightness(1.07)}
.torneo-swal .swal2-confirm{
  background:#ce1126 !important;
  color:#fff !important;
}
.torneo-swal .swal2-cancel{
  background:#174c73 !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.18) !important;
}
.torneo-swal .swal2-deny{background:#7d1830 !important;color:#fff !important}
.torneo-swal .swal2-icon{margin-top:1.35rem !important}
.torneo-swal .swal2-icon.swal2-success{border-color:#2fb36f !important;color:#2fb36f !important}
.torneo-swal .swal2-icon.swal2-success [class^=swal2-success-line]{background-color:#2fb36f !important}
.torneo-swal .swal2-icon.swal2-success .swal2-success-ring{border-color:rgba(47,179,111,.35) !important}
.torneo-swal .swal2-icon.swal2-error{border-color:#ff5a67 !important;color:#ff5a67 !important}
.torneo-swal .swal2-icon.swal2-error [class^=swal2-x-mark-line]{background-color:#ff5a67 !important}
.torneo-swal .swal2-icon.swal2-warning{border-color:#f3c95d !important;color:#f3c95d !important}
.torneo-swal .swal2-icon.swal2-question{border-color:#fff !important;color:#fff !important}
.torneo-swal .swal2-icon.swal2-info{border-color:#75c9ff !important;color:#75c9ff !important}
.torneo-swal .swal2-input,.torneo-swal .swal2-textarea,.torneo-swal .swal2-select{
  color:#fff !important;
  background:rgba(4,40,73,.72) !important;
  border:1px solid rgba(255,255,255,.20) !important;
  border-radius:12px !important;
  box-shadow:none !important;
}
.torneo-swal .swal2-input:focus,.torneo-swal .swal2-textarea:focus,.torneo-swal .swal2-select:focus{
  border-color:#fff !important;
  box-shadow:0 0 0 3px rgba(255,255,255,.10) !important;
}
.torneo-swal .swal2-validation-message{
  color:#fff !important;
  background:rgba(206,17,38,.24) !important;
}
.torneo-swal .swal2-close{color:#d9e8f3 !important}
.torneo-swal .swal2-timer-progress-bar{background:#ce1126 !important}
@media(max-width:520px){
  .swal2-popup.torneo-swal{padding:1.45rem 1.05rem 1.2rem !important;border-radius:18px !important}
  .torneo-swal .swal2-actions{width:100% !important}
  .torneo-swal .swal2-styled{flex:1 1 auto !important}
}

/* RESPONSIVE V2 · TABLET + CELULAR */
@media screen{html,body{max-width:100%;overflow-x:hidden}.app-shell{width:min(100%,1500px)}.brand{min-width:0}.brand>div{min-width:0}.brand h1,.brand p,.title{overflow-wrap:anywhere}.table-wrap{max-width:100%;overflow-x:auto!important;-webkit-overflow-scrolling:touch}}
@media screen and (max-width:900px){.app-shell{padding:12px!important}.topbar{flex-direction:column!important;align-items:stretch!important;padding:15px!important;gap:12px!important}.brand{width:100%}.brand-logo{width:68px!important;height:60px!important}.topbar .toolbar{width:100%;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}.topbar .toolbar .btn{width:100%!important;min-width:0!important;min-height:44px;margin:0!important}}
@media screen and (max-width:600px){.app-shell{padding:8px!important}.topbar{padding:11px!important;border-radius:15px!important}.brand-logo{width:52px!important;height:48px!important}.brand h1{font-size:1.15rem!important}.brand p{font-size:.76rem!important}.topbar .toolbar .btn{padding:8px 7px!important;font-size:.78rem!important}select,input,textarea,.select{font-size:16px!important}}
@media screen and (max-width:390px){.topbar .toolbar{grid-template-columns:1fr!important}}


/* RESPONSIVE V3 · CONSISTENCIA GLOBAL 2026 */
@media screen{
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  img,svg,video,canvas{max-width:100%;height:auto}
  .glass,.card,.panel,.pair,.grid>*{min-width:0}
  form,fieldset{max-width:100%;min-width:0}
  input,select,textarea,button{max-width:100%}
  .toolbar,.actions,.team-line,.brand{min-width:0}
  .table-wrap{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
}
@media screen and (max-width:760px){
  .app-shell{width:100%;padding:10px!important}
  .glass,.card,.panel{max-width:100%}
  .toolbar,.actions{flex-wrap:wrap}
  .toolbar>.btn,.actions>.btn,.actions>button{min-height:44px}
  .brand h1,.brand p,.title,.modal-note{overflow-wrap:anywhere}
}
@media screen and (max-width:480px){
  .swal2-popup.torneo-swal{width:calc(100% - 20px)!important;margin:10px!important}
  .torneo-swal .swal2-actions{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
  .torneo-swal .swal2-styled{width:100%!important;margin:0!important}
}

/* ===== PATROCINADORES · LOGOS FLOTANTES ===== */
.sponsors-strip{
  position:relative;
  margin:14px 0 20px;
  padding:12px 18px 16px;
  border:0;
  border-radius:18px;
  background:linear-gradient(90deg,rgba(255,255,255,.035),rgba(255,255,255,.075),rgba(255,255,255,.035));
  box-shadow:none;
  overflow:hidden;
}
.sponsors-heading{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-bottom:10px;
}
.sponsors-heading .sponsor-ball{display:none}
.sponsors-heading h2{
  margin:0;
  color:rgba(255,255,255,.72);
  font-size:1.3rem; !important
  font-weight:900;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.sponsors-heading h2:before,
.sponsors-heading h2:after{
  content:"";
  display:inline-block;
  vertical-align:middle;
  width:42px;
  height:1px;
  margin:0 10px;
  background:rgba(255,255,255,.18);
}
.sponsors-heading p{display:none}
.sponsors-grid{
  display:grid;
  grid-template-columns:1.35fr .9fr .9fr 1.35fr;
  align-items:center;
  gap:26px;
}
.sponsor-logo-card{
  position:relative;
  min-width:0;
  height:92px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:0;
  background:transparent;
  overflow:visible;
}
.sponsor-logo-card img{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:86px;
  object-fit:contain;
  filter:drop-shadow(0 6px 9px rgba(0,0,0,.34));
  transition:transform .18s ease,filter .18s ease;
}
.sponsor-logo-card:hover img{transform:translateY(-2px)}
/* Servicell recibe solo un halo claro, no una tarjeta */
.sponsor-logo-card.logo-servicell img{
  position:relative;z-index:1;
  max-height:73px;
  filter:drop-shadow(0 5px 8px rgba(0,0,0,.34));
}
.sponsor-logo-card.logo-rw img{max-height:88px}
.sponsor-logo-card.logo-pizza img{max-height:90px}
.sponsor-logo-card.logo-legal img{max-height:86px}

@media(max-width:850px){
  .sponsors-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px}
  .sponsor-logo-card{height:82px}
  .sponsor-logo-card.logo-servicell img{max-height:64px}
  .sponsor-logo-card.logo-rw img{max-height:78px}
  .sponsor-logo-card.logo-pizza img{max-height:80px}
  .sponsor-logo-card.logo-legal img{max-height:76px}
}
@media(max-width:480px){
  .sponsors-strip{padding:10px 8px 12px;margin:10px 0 16px}
  .sponsors-heading{margin-bottom:7px}
  .sponsors-heading h2{font-size:.61rem}
  .sponsors-heading h2:before,.sponsors-heading h2:after{width:25px;margin:0 7px}
  .sponsors-grid{gap:7px 12px}
  .sponsor-logo-card{height:70px}
  .sponsor-logo-card.logo-servicell img{max-height:54px}
  .sponsor-logo-card.logo-rw img{max-height:66px}
  .sponsor-logo-card.logo-pizza img{max-height:68px}
  .sponsor-logo-card.logo-legal img{max-height:64px}
}


/* ===== ICONO CERRAR SESIÓN · SVG LOCAL ===== */
.logout-action::before{
  content:"";
  width:18px;
  height:18px;
  flex:0 0 18px;
  display:inline-block;
  background:url("../icons/logout.svg") center/contain no-repeat;
}
.logout-action{gap:8px}

/* ===== MENÚ MÓVIL DESPLEGABLE ===== */
.mobile-menu-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  gap:9px;
  width:100%;
  min-height:46px;
  border:1px solid rgba(120,153,190,.35);
  border-radius:13px;
  background:linear-gradient(135deg,#0d2139,#09172a);
  color:#fff;
  font:inherit;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 8px 22px rgba(0,0,0,.18);
}
.mobile-menu-toggle .menu-lines{
  width:18px;height:14px;position:relative;display:inline-block;
}
.mobile-menu-toggle .menu-lines::before,
.mobile-menu-toggle .menu-lines::after,
.mobile-menu-toggle .menu-lines{
  border-top:2px solid currentColor;
}
.mobile-menu-toggle .menu-lines::before,
.mobile-menu-toggle .menu-lines::after{
  content:"";position:absolute;left:0;width:18px;
}
.mobile-menu-toggle .menu-lines::before{top:4px}
.mobile-menu-toggle .menu-lines::after{top:10px}
.mobile-menu-toggle .menu-chevron{
  margin-left:auto;
  transition:transform .2s ease;
}
.topbar.menu-open .mobile-menu-toggle .menu-chevron{transform:rotate(180deg)}

@media screen and (max-width:900px){
  .topbar.has-mobile-menu{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
  }
  .topbar.has-mobile-menu .mobile-menu-toggle{
    display:flex!important;
  }
  .topbar.has-mobile-menu .toolbar{
    display:none!important;
    width:100%!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    padding-top:2px;
  }
  .topbar.has-mobile-menu.menu-open .toolbar{
    display:grid!important;
    animation:mobileMenuOpen .18s ease-out;
  }
  .topbar.has-mobile-menu .toolbar .btn,
  .topbar.has-mobile-menu .toolbar a.btn,
  .topbar.has-mobile-menu .toolbar button.btn{
    width:100%!important;
    justify-content:flex-start!important;
    min-height:46px!important;
    margin:0!important;
  }
}
@keyframes mobileMenuOpen{
  from{opacity:0;transform:translateY(-5px)}
  to{opacity:1;transform:translateY(0)}
}


/* =========================================================
   MENÚ MÓVIL PREMIUM · V3
   ========================================================= */
@media screen and (max-width:900px){
  .topbar.has-mobile-menu{
    position:relative;
    gap:10px!important;
    padding:10px 12px!important;
    border-radius:0 0 18px 18px;
  }

  .topbar.has-mobile-menu .mobile-menu-toggle{
    display:flex!important;
    position:relative;
    align-items:center;
    justify-content:flex-start;
    width:100%;
    min-height:52px;
    padding:0 16px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:16px;
    background:
      linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.035)),
      linear-gradient(135deg,#0c2742,#07182b);
    color:#fff;
    font-size:15px;
    font-weight:900;
    letter-spacing:.2px;
    box-shadow:
      0 10px 28px rgba(0,0,0,.24),
      inset 0 1px 0 rgba(255,255,255,.10);
    -webkit-tap-highlight-color:transparent;
  }

  .topbar.has-mobile-menu .mobile-menu-toggle::after{
    content:"";
    position:absolute;
    left:0;
    top:10px;
    bottom:10px;
    width:3px;
    border-radius:0 5px 5px 0;
    background:linear-gradient(#fff,#d71920);
    opacity:.9;
  }

  .mobile-menu-toggle .menu-lines{
    width:21px!important;
    height:16px!important;
    margin-right:11px;
    border-top:2px solid #fff!important;
    opacity:.95;
  }
  .mobile-menu-toggle .menu-lines::before,
  .mobile-menu-toggle .menu-lines::after{
    width:21px!important;
    border-top:2px solid #fff!important;
  }
  .mobile-menu-toggle .menu-chevron{
    margin-left:auto;
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    font-size:18px;
    line-height:1;
    transition:transform .22s ease,background .22s ease;
  }
  .topbar.menu-open .mobile-menu-toggle .menu-chevron{
    transform:rotate(180deg);
    background:rgba(255,255,255,.14);
  }

  .topbar.has-mobile-menu .toolbar{
    display:none!important;
    position:relative;
    width:100%!important;
    padding:8px!important;
    margin:0!important;
    gap:6px!important;
    grid-template-columns:1fr!important;
    border:1px solid rgba(255,255,255,.10);
    border-radius:16px;
    background:
      linear-gradient(180deg,rgba(11,32,55,.98),rgba(5,20,36,.99));
    box-shadow:0 18px 36px rgba(0,0,0,.28);
    overflow:hidden;
  }
  .topbar.has-mobile-menu.menu-open .toolbar{
    display:grid!important;
    animation:premiumMenuOpen .2s ease-out;
  }

  .topbar.has-mobile-menu .toolbar .btn,
  .topbar.has-mobile-menu .toolbar a.btn,
  .topbar.has-mobile-menu .toolbar button.btn{
    position:relative;
    width:100%!important;
    min-height:46px!important;
    margin:0!important;
    padding:10px 13px!important;
    justify-content:flex-start!important;
    border:1px solid transparent!important;
    border-radius:12px!important;
    background:transparent!important;
    box-shadow:none!important;
    color:#eef6ff!important;
    font-size:14px!important;
    font-weight:750!important;
    text-align:left!important;
    transition:background .16s ease,border-color .16s ease,transform .16s ease;
  }

  .topbar.has-mobile-menu .toolbar .btn + .btn,
  .topbar.has-mobile-menu .toolbar a.btn + a.btn{
    border-top-color:rgba(255,255,255,.055)!important;
  }

  .topbar.has-mobile-menu .toolbar .btn:active,
  .topbar.has-mobile-menu .toolbar a.btn:active{
    transform:scale(.985);
    background:rgba(255,255,255,.09)!important;
  }

  .topbar.has-mobile-menu .toolbar .btn.active,
  .topbar.has-mobile-menu .toolbar a.btn.active{
    background:linear-gradient(90deg,rgba(215,25,32,.20),rgba(255,255,255,.04))!important;
    border-color:rgba(215,25,32,.28)!important;
  }

  .topbar.has-mobile-menu .toolbar .logout-action{
    margin-top:4px!important;
    background:rgba(215,25,32,.10)!important;
    border-color:rgba(215,25,32,.18)!important;
  }
  .topbar.has-mobile-menu .toolbar .logout-action::before{
    width:19px;
    height:19px;
    flex-basis:19px;
  }
}

@keyframes premiumMenuOpen{
  0%{opacity:0;transform:translateY(-7px) scale(.985)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}