/* ======================================================
   VARIABLES
====================================================== */
:root{
  --bg: #296f98;
  --header-bg: #194154;
  --text-dark: #194154;
  --text-light: #ffffff;

  --container: 1200px;

  --radius: 18px;
  --shadow: 0 10px 30px rgba(0,0,0,.22);
  --shadow2: 0 6px 18px rgba(0,0,0,.18);

  --header-h-mobile: 60px;
  --header-h-desktop: 80px;

  --border-soft: rgba(255,255,255,.14);
}


/* ======================================================
   RESET / BASE
====================================================== */
*,
*::before,
*::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text-light);

  /* Footer al fondo */
  min-height: 100vh;
  display: flex;
  flex-direction: column;

  /* Fondo global */
  background-color: var(--bg);
  background-image: url("/img/fondo-web.png");
  background-repeat: repeat;
  background-size: auto;
}

/* Accesibilidad */
.skip-link{
  position: absolute;
  left: -9999px;
  top: 10px;
  background: #ffffff;
  color: #000000;
  padding: 10px 12px;
  border-radius: 10px;
  z-index: 9999;
}
.skip-link:focus{ left: 10px; }

.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ======================================================
   HEADER (full width, logos a orillas, texto centrado)
====================================================== */
.site-header{
  position: sticky;
  top: 0;
  z-index: 1000;

  background-color: var(--header-bg);
  background-image: url("/img/fondo-webN.png");
  background-repeat: repeat;
  background-size: auto;

  border-bottom: 1px solid var(--border-soft);
}

.site-header::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.18),
    rgba(0,0,0,.08) 60%,
    rgba(0,0,0,.18)
  );
  pointer-events:none;
}

/* Full width (logos hasta las orillas) */
.header-inner{
  position: relative;
  z-index: 1;

  max-width: none;
  width: 100%;
  margin: 0;

  /* móvil */
  padding: 5px 5px;
  min-height: var(--header-h-mobile);

  display: grid;
  grid-template-columns: 76px 1fr 76px;
  align-items: center;
  gap: 8px;
}

/* Links de logos */
.brand{
  text-decoration: none;
  color: var(--text-light);
  width: 100%;
  overflow: hidden;
}

.brand-left{ justify-self: start; }
.brand-right{ justify-self: end; }

/* Logos rectangulares 400x150 */
.brand-logo{
  display: block;
  height: 36px;       /* móvil */
  width: 100%;
  max-width: 70px;
  object-fit: contain;

  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 8px;
}

/* Carril centrado (máx 1200px) para el texto */
.brand-text-wrap{
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;

  display: flex;
  justify-content: center;
}

/* Texto (por defecto centrado) */
.brand-text{
  text-align: center;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  min-width: 0;
}

.brand-title{
  margin: 0;
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: .2px;
  line-height: 1.08;
  color: #ffffff;
}

/* MÓVIL: NO se muestra */
.brand-subtitle{
  display: none;
}

/* ======================================================
   ESTILO PREMIADOS (Círculo perfecto)
====================================================== */


/* ======================================================
   MAIN
====================================================== */
.site-main{
  flex: 1;
  max-width: none;
  width: 100%;
  margin: 0 auto;
  padding: 28px 16px 44px;

  display: block;
}

.hero{
  width: 100%;
  display: grid;
  place-items: center;
  padding: 12px 0 24px;
}

/* ======================================================
   CTA PREMIOS (legacy)
====================================================== */
.card-link{
  text-decoration: none;
  width: min(520px, 92vw);
  display: block;
}

.card{
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  position: relative;

  outline: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.12);
}

.card-img{
  width: 100%;
  height: auto;
  display: block;
}

.card-caption{
  position: absolute;
  inset: 0;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;

  padding: 16px;

  background: linear-gradient(
    to top,
    rgba(0,0,0,.72),
    rgba(0,0,0,.18) 55%,
    rgba(0,0,0,0) 100%
  );
}

.card-badge{
  align-self: flex-start;
  padding: 10px 14px;
  border-radius: 999px;

  background: rgba(255,255,255,.95);
  color: var(--text-dark);
  font-weight: 900;
  letter-spacing: .2px;
}

.card-hint{
  color: rgba(255,255,255,.92);
  font-weight: 700;
}

.card-link:focus-visible .card{
  outline: 3px solid rgba(255,255,255,.92);
  outline-offset: 3px;
}

@media (hover:hover){
  .card{
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .card-link:hover .card{
    transform: translateY(-3px);
    box-shadow: 0 18px 50px rgba(0,0,0,.26);
  }
}

/* ======================================================
   FOOTER
====================================================== */
.site-footer{
  padding: 18px 16px 24px;
  text-align: center;

  color: rgba(255,255,255,.92);

  background: rgba(25,65,84,.55);
  border-top: 1px solid var(--border-soft);
}

.site-footer p{
  margin: 0;
  font-size: .60rem;
}

/* ======================================================
   HOME SECTIONS
====================================================== */
.home-intro{
  width: 100%;
  max-width: var(--container);
  margin: 0 auto 18px;
  text-align: center;
}

.home-title{
  margin: 0;
  font-size: 1.4rem;
  font-weight: 900;
  letter-spacing: .2px;
  color: var(--text-light);
}

.home-lead{
  margin: 10px 0 0;
  color: rgba(255,255,255,.9);
  line-height: 1.45;
}

/* MÓVIL: más separación entre tarjetas */
.home-grid{
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;

  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
}

/* ======================================================
   HOME CARD CON IMAGEN ARRIBA
====================================================== */
.home-card{
  display: flex;
  flex-direction: column;

  text-decoration: none;
  color: var(--text-light);

  background: rgba(25,65,84,.35);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px;
  overflow: hidden;

  box-shadow: var(--shadow2);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;

  margin: 6px 0;
}

/* Imagen superior */
.home-card-image{
  width: 100%;
  aspect-ratio: 5 / 3;
  background: rgba(0,0,0,.15);
  overflow: hidden;
}

.home-card-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Cuerpo de la tarjeta (botón centrado) */
.home-card-body{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

/* Botón */
.home-card-cta{
  margin-top: 0;
  align-self: center;

  padding: 10px 16px;
  border-radius: 999px;

  background: rgba(255,255,255,.95);
  color: var(--text-dark);
  font-weight: 900;
}

/* Hover */
@media (hover:hover){
  .home-card:hover{
    transform: translateY(-3px);
    box-shadow: 0 18px 46px rgba(0,0,0,.28);
    border-color: rgba(255,255,255,.3);
  }
}

/* ======================================================
   ESCRITORIO (REAJUSTADO A 1100PX)
====================================================== */
@media (min-width: 1100px){

  /* ===== HEADER 80px REAL ===== */
  .header-inner{
    /* Forzamos altura real de header en escritorio */
    height: var(--header-h-desktop);
    min-height: 0;

    /* Padding compacto para que quepa todo */
    padding: 6px 24px;

    /* REAJUSTE DE COLUMNAS PARA ESTABILIDAD */
    grid-template-columns: clamp(200px, 20vw, 340px) 1fr clamp(200px, 20vw, 340px);
    gap: 18px;
    align-items: center;
  }

  /* Logos más pequeños para que entren en 80px */
  .brand-logo{
    height: 52px;
    max-width: 220px;
  }

  /* Texto en una sola línea */
  .brand-text{
    flex-direction: row;
    align-items: baseline;
    gap: 40px; /* Reducido para evitar que empuje logos */
    white-space: nowrap;
  }

  .brand-title{
    font-size: 2rem;
    line-height: 1;
  }

  .brand-subtitle{
    display: inline;
    margin: 0;
    font-size: 1.2rem;
    font-style: italic;
    opacity: .9;
    white-space: nowrap;
  }

  .site-main{
    padding-top: 40px;
  }

  .site-footer p{
    font-size: .95rem;
  }

  /* ===== HOME INTRO ===== */
  .home-title{
    font-size: 2rem;
    line-height: 1.1;
  }

  .home-lead{
    font-size: 1rem;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
  }

  .home-intro{
    margin-bottom: 96px;
  }

  /* ===== TARJETAS (más pequeñas en escritorio) ===== */
  .home-grid{
    /* más flexible: se autoacomodan y quedan más pequeñas */
    max-width: 1200px;
    padding: 0 40px;

    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 56px;
  }

  .home-card{
    margin: 0;
    border-radius: 22px;
  }

  /* Imagen más compacta en escritorio para que la tarjeta no “crezca” tanto */
  .home-card-image{
    aspect-ratio: 16 / 10;
  }

  .home-card-body{
    padding: 16px;
  }

  .home-card-cta{
    font-size: .8rem;
    padding: 14px 22px;
  }
}
/* =========================================================
   ACCESO en header (debajo del logo derecho) — versión final
   👉 IMPORTANTE: ya NO uses .user-access con position:absolute
   ========================================================= */

/* Si todavía existe en tu CSS, elimínalo o déjalo anulado */
.user-access{ display:none !important; }

/* Contenedor derecho: logo + acceso debajo (sin salirse del header) */
.header-right{
  display: flex;
  flex-direction: column;
  align-items: center;       /* ✅ centra el botón con el logo */
  justify-content: center;
  gap: 6px;
  flex: 0 0 auto;
  min-width: 92px;           /* ✅ estabilidad (no “brinca”) */
}

/* Asegura que el link del logo no meta alturas raras */
.header-right .brand-right{
  display: block;
  line-height: 0;
}

/* Link Acceso/Username */
.header-access{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  text-decoration: none;
  opacity: .92;

  white-space: nowrap;        /* ✅ no salto de línea */
  max-width: 92px;            /* ✅ no se sale del header */
  overflow: hidden;
  text-overflow: ellipsis;

  line-height: 1;
  padding: 4px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.92);
  font-size: 12px;            /* escritorio */
}

.header-access:hover{
  opacity: 1;
  background: rgba(255,255,255,.14);
}

/* Móvil: más compacto y centrado bajo el logo */
@media (max-width: 520px){
  .header-right{
    min-width: 78px;
    gap: 4px;
  }
  .header-access{
    font-size: 11px;
    padding: 3px 7px;
    border-radius: 9px;
    max-width: 78px;
  }
}

/* === ESCRITORIO: REAJUSTADO A 1100PX === */
@media (min-width: 1100px){

  /* el header debe ser el contexto del posicionamiento */
  .site-header{ position: relative; }

  /* ya no lo centramos bajo el logo en escritorio */
  .header-right{
    align-items: flex-end;
  }

  /* “flotante” dentro del header, al borde derecho de la pantalla */
  .header-access{
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(46px); /* lo baja para que quede bajo el logo derecho */
    max-width: 160px;           /* evita que se desborde si el username es largo */
    text-align: center;
  }
}

/* ====== Admin: bloque usuario (avatar + nombre + rol) en header ====== */
.account-badge{
  /* slot del lado derecho (NO debe crecer el header) */
  width:220px;
  height:80px;                 /* ✅ tu header escritorio mide 80 */
  display:flex;
  align-items:center;
  justify-content:center;       /* ✅ centrado real */
  gap:14px;

  /* ✅ sin rectángulo envolvente */
  background:transparent;
  border:none;
  padding:0;
  border-radius:0;

  text-decoration:none;
  color:#fff;
}

.account-badge:hover{
  background:transparent;
  border:none;
}

.account-badge__avatar{
  width:70px;                   /* ✅ avatar grande */
  height:70px;
  display:flex;
  align-items:center;
  justify-content:center;

  /* ✅ sin rectángulo del avatar */
  background:transparent;
  border:none;
  border-radius:0;
}

.account-badge__avatar img{
  width:65px;                   /* ✅ 75x75 */
  height:65px;
  display:block;
  object-fit:contain;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.18));
}

.account-badge__text{
  display:flex;
  flex-direction:column;
  align-items:center;           /* ✅ texto centrado */
  justify-content:center;
  line-height:1.05;
  min-width:0;
  text-align:center;
}

.account-badge__name{
  font-weight:900;
  font-size:22px;               /* ✅ más grande */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.account-badge__role{
  font-style:italic;
  font-weight:800;
  font-size:18px;
  opacity:.95;
}

/* ===== Móvil: el bloque completo debe ser 72px, sin rectángulos, sin rol ===== */
@media (max-width: 640px){
  .account-badge{
    width:72px;
    height:72px;                /* ✅ tu header móvil ~74, aquí 72 */
    flex-direction:column;
    justify-content:center;
    gap:6px;
  }

  .account-badge__avatar{
    width:46px;
    height:46px;
  }
  .account-badge__avatar img{
    width:46px;
    height:46px;
  }

  .account-badge__name{
    font-size:12px;
    line-height:1;
  }

  .account-badge__role{
    display:none;               /* ✅ quitar rol en móvil */
  }
}

/* ==============================
   CHEQUEOS - Modal buscador
   (contraste + resultados visibles)
   ============================== */

.modal-backdrop{
  background: rgba(0,0,0,.55) !important;
}

.modal{
  background: #ffffff !important;
  color: #0b1b2b !important;
}

/* Input */
.m-input{
  background:#ffffff !important;
  color:#0b1b2b !important;
  border:1px solid rgba(0,0,0,.18) !important;
}
.m-input::placeholder{
  color: rgba(11,27,43,.55) !important;
}

/* Mensaje arriba del listado */
.m-msg{
  color:#0b1b2b !important;
  opacity:.9 !important;
}

/* Lista y renglones */
.m-list{
  background:#ffffff !important;
  border-top:1px solid rgba(0,0,0,.10) !important;
}

.m-item{
  background:#ffffff !important;
  padding:12px 10px !important;
  border-bottom:1px solid rgba(0,0,0,.08) !important;
}

/* Texto nombre / username */
.m-name{
  color:#0b1b2b !important;
  font-weight:900 !important;
}
.m-user{
  color: rgba(11,27,43,.75) !important;
  font-weight:800 !important;
}

/* Botón Agregar (si lo sigues usando) */
.m-add{
  background:#0b66c3 !important;
  color:#ffffff !important;
  border:0 !important;
  border-radius:12px !important;
  padding:10px 12px !important;
  font-weight:900 !important;
}

/* EXTRA: si hicimos “tocar el renglón completo”, esto ayuda */
.m-item:hover{
  background:#f3f7ff !important;
}


/* ==============================
   Canva embed (Responsivo)
   ============================== */
.velocistas-wrap{
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
}

.canva-frame{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;          /* Igual a 56.25% de Canva */
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow2);
  outline: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.12);
}

.canva-frame iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ======================================================
   VELOCISTAS (Canva embed)
====================================================== */
.section-page.velocistas-page{
  width: 100%;
  max-width: 1400px;   /* ✅ permite que el Canva crezca más en escritorio */
  margin: 0 auto;
  text-align: center;  /* ✅ centra título, texto y botones (móvil y desktop) */
}

.section-page.velocistas-page .section-lead{
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

/* Si por cualquier razón el embed quedó dentro de .card-link,
   esto quita el “tope” de 520px para que se vea grande */
.section-page.velocistas-page .card-link{
  width: min(1100px, 96vw);
  margin-left: auto;
  margin-right: auto;
}

/* Asegura que el botón “Regresar” se centre aunque no haya flex */
.section-page.velocistas-page .home-card-cta{
  display: inline-flex;
}

/* ✅ Botón especial: Abrir en Canva (diferente al de Regresar) */
.section-page.velocistas-page .btn-canva{
  background: rgba(25,65,84,.92);
  color: rgba(255,255,255,.96);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
}

.section-page.velocistas-page .btn-canva:hover{
  background: rgba(25,65,84,1);
  border-color: rgba(255,255,255,.30);
}

/* Escritorio: todavía más ancho (REAJUSTADO A 1100PX) */
@media (min-width: 1100px){
  .section-page.velocistas-page .card-link{
    width: min(1300px, 92vw);
  }
}

/* ==============================
   Aguas Abiertas - sección Canva
   ============================== */
.section-page.aguas-canva{
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  text-align: center;
}

.section-page.aguas-canva .section-lead{
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

/* por si esta página usa límites distintos, ayudamos a que el embed crezca */
.section-page.aguas-canva .velocistas-wrap{
  max-width: 1400px;
}