/* ============================================================
   RESET + FONDO
============================================================ */

* { margin:0; padding:0; box-sizing:border-box; }

body{
  font-family: Arial, sans-serif;
  background: url('https://images.unsplash.com/photo-1508098682722-e99c43a406b2?auto=format&fit=crop&w=1350&q=80')
    no-repeat center center fixed;
  background-size: cover;
  color:#fff;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(3px);
  z-index:-1;
}

/* 🔒 SEGURO: ninguna imagen se vuelve “banner” por accidente */
img{ max-width:100%; height:auto; }

/* ============================================================
   NAVBAR (Spotify/Zello)
============================================================ */

.topbar{
  background: rgba(0,0,0,.90);
  padding:14px 22px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  position:sticky;
  top:0;
  z-index:2000;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,255,120,.25);
}

.logo{
  display:flex;
  align-items:center;
  gap:10px;
  min-width: 220px;
}

/* 🔒 SEGURO: cualquier <img> dentro del header se queda chico */
.topbar .logo img{
  width:42px !important;
  height:42px !important;
  border-radius:50% !important;
  object-fit:cover !important;
  border: 2px solid #00ff55;
}

.brand{ font-size:20px; font-weight:bold; }

/* ============================================================
   MENÚ DESKTOP
============================================================ */

.menu{
  display:flex;
  gap:20px;
  align-items:center;
}

.menu a{
  color:white;
  font-weight:bold;
  text-decoration:none;
  font-size:15px;
  padding:6px 10px;
  border-radius:6px;
  transition:.25s ease;
}

.menu a:hover{
  background: rgba(0,255,120,.15);
  color:#00ff88;
}

/* ============================================================
   HAMBURGUESA + OVERLAY (MÓVIL)
============================================================ */

.menu-toggle{
  width:32px;
  height:24px;
  display:none;
  flex-direction:column;
  justify-content:space-between;
  cursor:pointer;
  position:relative;
  z-index:3000;
}

.menu-toggle span{
  background:white;
  height:4px;
  width:100%;
  border-radius:5px;
  transition:.35s ease;
}

.menu-toggle.active span:nth-child(1){ transform: translateY(10px) rotate(45deg); }
.menu-toggle.active span:nth-child(2){ opacity:0; }
.menu-toggle.active span:nth-child(3){ transform: translateY(-10px) rotate(-45deg); }

.menu-overlay{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.45);
  opacity:0;
  visibility:hidden;
  transition: opacity .2s ease;
  z-index:1300;
}

.menu-overlay.active{
  opacity:1;
  visibility:visible;
}

@media (max-width: 900px){
  .menu{
    position:fixed;
    top:0;
    right:0;
    width:260px;
    height:100vh;
    background:#111;
    flex-direction:column;
    padding:80px 25px;
    gap:18px;
    transform: translateX(100%);
    transition: transform .22s cubic-bezier(.4,0,1,1);
    border-left:1px solid rgba(255,255,255,.1);
    box-shadow:-6px 0 18px rgba(0,0,0,.55);
    z-index:1400;
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  .menu.active{
    transform: translateX(0);
    transition: transform .28s cubic-bezier(0,0,.2,1);
  }
  .menu a{ font-size:18px; font-weight:600; padding:10px 5px; }
  .menu-toggle{ display:flex; }
}

/* ============================================================
   CONTENEDORES BASE
============================================================ */

.contenedor, .container, .box{
  background: rgba(0,0,0,.55);
  padding: 30px;
  margin: 30px auto;
  max-width: 950px;
  border-radius: 15px;
  border: 1px solid rgba(0,255,120,.25);
  box-shadow: 0 10px 25px rgba(0,0,0,.45);
  backdrop-filter: blur(8px);
}

main.contenedor{ margin-top:25px; }

/* ============================================================
   TIPOGRAFÍA + FORMULARIOS + TABLAS
============================================================ */

h1,h2,h3{
  color:#00ff99;
  margin-bottom:12px;
  text-shadow: 0 0 5px black;
}

input, select{
  width:100%;
  padding:10px;
  border-radius:6px;
  border:none;
  margin-bottom:15px;
  background: rgba(255,255,255,.85);
  color:#000;
  font-size:16px;
}

button, a.boton{
  background:#00cc55;
  color:white;
  border:none;
  padding:10px 22px;
  border-radius:6px;
  font-weight:bold;
  font-size:16px;
  text-decoration:none;
  cursor:pointer;
}

button:hover, a.boton:hover{ background:#00ff55; }

table{ width:100%; border-collapse:collapse; }
td,th{ padding:12px; border-bottom:1px solid rgba(255,255,255,.20); }
tr:hover{ background: rgba(255,255,255,.10); }

/* ============================================================
   AVATARES
============================================================ */

.avatar{
  width:150px;
  height:150px;
  border-radius:50%;
  object-fit:cover;
  border:4px solid #00ff55;
  box-shadow: 0 0 16px rgba(0,255,120,.45);
}

.avatar-mini{
  width:40px;
  height:40px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid #00ff55;
  vertical-align:middle;
}

.avatar-ranking{
  width:32px;
  height:32px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid #00ff55;
  margin-right:8px;
  vertical-align:middle;
}

.avatar-dashboard{
  width:130px;
  height:130px;
  border-radius:50%;
  object-fit:cover;
  border:4px solid #00ff55;
  margin-bottom:18px;
  box-shadow: 0 0 12px rgba(0,255,120,.45);
}

/* ============================================================
   PERFIL / TARJETAS (Material)
============================================================ */

.perfil-container{
  max-width:900px;
  margin:40px auto;
  padding:20px;
}

.perfil-header{
  text-align:center;
  padding:25px;
  background: rgba(0,0,0,.60);
  border-radius:18px;
  box-shadow: 0 8px 25px rgba(0,0,0,.4);
  border: 1px solid rgba(0,255,120,.25);
  margin-bottom:30px;
  backdrop-filter: blur(6px);
}

.perfil-nombre{
  font-size:26px;
  color:#00ff99;
  margin:10px 0 5px;
}

.perfil-correo{ color:#ccc; margin-bottom:18px; }

.btn-material{
  background:#00cc55;
  padding:10px 22px;
  border-radius:999px;
  color:#000;
  font-weight:bold;
  text-decoration:none;
  display:inline-block;
  transition:.25s ease;
}

.btn-material:hover{ background:#00ff77; }

.btn-cancelar-material{
  display:inline-block;
  padding:10px 24px;
  background: rgba(255,255,255,.15);
  color:#eee;
  border-radius:999px;
  text-decoration:none;
  font-weight:bold;
  transition:.25s ease;
}

.btn-cancelar-material:hover{
  background: rgba(255,255,255,.28);
  color:#fff;
}

.perfil-cards{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:25px;
  margin-top:35px;
}

.perfil-card{
  display:flex;
  align-items:center;
  gap:15px;
  background: rgba(0,0,0,.60);
  border:1px solid rgba(0,255,120,.22);
  padding:18px;
  border-radius:14px;
  color:#fff;
  box-shadow: 0 10px 26px rgba(0,0,0,.50);
  backdrop-filter: blur(6px);
  transition: transform .20s ease, background .20s ease, box-shadow .20s ease;
}

.perfil-card:hover{
  background: rgba(0,255,120,.12);
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0,255,120,.18);
}

.perfil-card.disabled{
  opacity:.45;
  cursor:not-allowed;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:none;
}

.perfil-card.disabled:hover{
  transform:none;
  background: rgba(255,255,255,.07);
  box-shadow:none;
}

.perfil-card.logout{
  border-color: rgba(255,70,70,.45);
  box-shadow: 0 10px 24px rgba(255,0,0,.15);
}

.perfil-card.logout:hover{
  background: rgba(255,70,70,.18);
  box-shadow: 0 12px 28px rgba(255,80,80,.28);
}

.card-icon{
  font-size:36px;
  min-width:45px;
  text-shadow: 0 0 6px rgba(0,255,120,.65);
}

.card-info h3{
  font-size:20px;
  font-weight:bold;
  color:#00ff88;
  margin:0;
  text-shadow: 0 0 4px rgba(0,255,120,.25);
}

.card-info p{
  margin:3px 0 0 0;
  color:#cccccc;
  font-size:14px;
}

/* ============================================================
   FILTROS EN USUARIOS
============================================================ */

.filtro-usuarios input[type="text"],
.filtro-usuarios select{
  background: rgba(255,255,255,.90);
}

.filtro-usuarios button{ white-space:nowrap; }

/* ============================================================
   MENSAJES
============================================================ */

.mensaje-ok{
  background: rgba(0,200,100,.15);
  border:1px solid #00e676;
  color:#b8ffda;
  padding:8px 12px;
  border-radius:6px;
  margin-bottom:12px;
  font-size:14px;
}

.mensaje-error{
  background: rgba(255,80,80,.18);
  border:1px solid #ff8080;
  color:#ffd0d0;
  padding:8px 12px;
  border-radius:6px;
  margin-bottom:12px;
  font-size:14px;
}
/* ============================================================
   MENSAJES (EXTRAS OPCIONALES)
============================================================ */

.mensaje-ok strong,
.mensaje-error strong{
  color:#fff;
}

.mensaje-ok a,
.mensaje-error a{
  color:#00ff99;
  font-weight:bold;
  text-decoration:none;
}

.mensaje-ok a:hover,
.mensaje-error a:hover{
  text-decoration:underline;
}

/* Mensaje tipo "warning" (si lo ocupas después) */
.mensaje-warn{
  background: rgba(255,200,0,.16);
  border:1px solid rgba(255,220,80,.85);
  color:#fff3b0;
  padding:8px 12px;
  border-radius:6px;
  margin-bottom:12px;
  font-size:14px;
}

/* ============================================================
   FOOTER
============================================================ */

footer{
  text-align:center;
  padding:15px;
  background: rgba(0,0,0,.85);
  border-top:3px solid #00ff55;
  margin-top:40px;
  color:#ccc;
}
/* ============================================================
   FIX PERFIL-CARDS (evita look de "link" subrayado y mejora layout)
============================================================ */

/* Si la tarjeta es <a>, que NO parezca link */
a.perfil-card{
  text-decoration: none !important;
  color: inherit !important;
}

/* Quitar subrayado a cualquier texto dentro de la tarjeta */
.perfil-card *{
  text-decoration: none !important;
}

/* Forzar que todo dentro herede colores correctos */
.perfil-card .card-info h3,
.perfil-card .card-info p{
  color: inherit;
}

/* Ajuste extra para que el icono no “salte” */
.perfil-card .card-icon{
  line-height: 1;
}

/* Evita que el navegador ponga borde raro al hacer click */
.perfil-card:focus,
.perfil-card:focus-visible{
  outline: none;
  box-shadow: 0 0 0 2px rgba(0,255,120,.25);
}
/* ============================================================
   HEADER – USUARIO + CRÉDITOS
============================================================ */

.header-user-info{
  font-size:12px;
  margin-left:52px; /* alinea con texto del logo */
  margin-top:2px;
  color:#cfe9dc;
  opacity:.85;
  white-space:nowrap;
}

.header-creditos{
  color:#00ff88;
  font-weight:bold;
}
/* ============================================================
   TABLA JORNADA – GLOW TOP 3
============================================================ */
tr.top-1{
  background: rgba(0,255,120,.14) !important;
  box-shadow: inset 0 0 0 1px rgba(0,255,120,.35);
}
tr.top-1 td{
  font-weight: 700;
}
tr.top-1:hover{
  background: rgba(0,255,120,.20) !important;
}

/* opcional: top 2 y top 3 más sutil */
tr.top-2{
  background: rgba(255,255,255,.06) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}
tr.top-3{
  background: rgba(255,200,0,.06) !important;
  box-shadow: inset 0 0 0 1px rgba(255,200,0,.12);
}