/* ===========================
Variables y Reset Globales
========================== */
:root {
  --color-bg: #1C2C88;         /* Primario: Azul Visionary */
  --color-card: rgba(125, 106, 255, 0.7); /* Cartas con cristal translúcido */
  --color-text: #FFFFFF;       /* Neutro claro: Blanco Puro */
  --color-primary: #1C2C88;    /* Primario: Azul Visionary */
  --color-accent: #7D6AFF;     /* Acento: Morado Neón */
  --color-emphasis: #D96A00;   /* Énfasis: Naranja Ojo */
  --gradient: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  --btn-primary-bg: var(--color-emphasis);
   
}

/* Global reset y fondo */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html, body {
  min-height: 100% !important;
  height: auto !important;
  background: linear-gradient(
    to bottom,
    var(--color-primary) 0%,
    var(--color-accent) 100%
  ) no-repeat fixed !important;
  background-size: cover !important;
  color: var(--color-text) !important;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont !important;
  text-shadow: 0 0 4px rgba(0,0,0,0.3) !important;
}

/* Enlaces globales */
a {
  color: var(--color-text);
  font-weight: 700;
  text-decoration: none;
  transition: color 0.2s, text-shadow 0.2s;
}
a:hover {
  color: var(--color-emphasis);
  text-shadow: 0 0 6px var(--color-emphasis);
}
::placeholder {
  color: rgba(255,255,255,0.6);
}

/* ===========================
   Estilos específicos para index.ejs
   =========================== */

/* ===========================
   Estilos para PC (≥ 601px)
   =========================== */
@media (min-width: 601px) {
  /* Widget de la rifa */
  #raffle-widget {
    position: fixed;
    bottom: 1.8rem;
    right: 1.5rem;
    background: var(--color-card);
    color: var(--color-text);
    padding: 1rem 1.25rem;
    border-radius: 0.75rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    text-align: center;
    z-index: 1000;
    width: 250px;
  }
  #raffle-widget p {
    margin: 0.25rem 0;
  }
  #raffle-widget #pool-amount {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-emphasis);
  }
  #raffle-widget a {
    color: var(--color-emphasis);
    text-decoration: none;
    transition: color 0.2s;
  }
  #raffle-widget a:hover {
    color: var(--color-accent);
  }
  #raffle-widget .secondary-btn {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    padding: 0.5rem;
    width: 100%;
  }

  /* Búsqueda */
  .search-bar {
    display: flex;
    justify-content: center;
    margin: 2rem 0;
  }
  .search-bar input {
    width: 300px;
    max-width: 60%;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 9999px 0 0 9999px;
    background: var(--color-card);
    color: var(--color-text);
  }
  .search-bar button {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 0 9999px 9999px 0;
    background: var(--gradient);
    color: var(--color-text);
    cursor: pointer;
    transition: opacity 0.2s;
  }
  .search-bar button:hover {
    opacity: 0.9;
  }

  /* Grid de vídeos */
  #videos-grid.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 2fr));
    gap: 1rem;
    padding: 0 2rem;
  }
  /* Estilos de cada card (suponiendo que main.js inyecta .video-card dentro de #videos-grid) */
  .video-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 300px;
    background: var(--color-card);
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    transition: transform 0.2s;
  }
  .video-card:hover {
    transform: translateY(-5px);
  }
  .video-thumb {
    width: 100%;
    height: 75%;
    object-fit: cover;
    display: block;
  }
  .video-card .info {
    padding: 0.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .video-card .info h3 {
    color: var(--color-accent);
    font-weight: 700;
    text-align: center;
    margin: 0;
  }
  .video-card .info p {
    color: #9ca3af;
    font-size: 0.9rem;
    margin: 0.25rem 0 0;
    text-align: center;
  }

  /* Paginación */
  .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2rem 0;
    gap: 1rem;
  }
  .pagination button {
    background:var(--color-emphasis);
    color: var(--color-text);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background 0.2s;
  }
.pagination button {
  transition: background 0.2s, box-shadow 0.3s, transform 0.2s;
}

.pagination button:hover {
  background: var(--color-emphasis);
  transform: translateY(-2px) scale(1.03);
  box-shadow:
    0 4px 12px rgba(217, 106, 0, 0.6),       /* sombra principal naranja */
    0 0 8px var(--color-accent);               /* resplandor morado */
  /* opcional: añade un sutil efecto de degradado */
  background: linear-gradient(
    to right,
    var(--color-emphasis),
    rgba(217,106,0,0.85)
  );
  color: var(--color-text);
}

  .pagination span {
    font-size: 1rem;
  }
}


/* ===========================
   Estilos comunes para index.ejs (válidos siempre)
   =========================== */

/* Widget de la rifa: base */
#raffle-widget {
  position: fixed;
  bottom: 2.8rem;
  right: 1.5rem;
  background: var(--color-card);
  color: var(--color-text);
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  text-align: center;
  z-index: 500;
  width: 250px;
  transition: all 0.2s;
}
#raffle-widget p {
  margin: 0.25rem 0;
}
#raffle-widget #pool-amount {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-emphasis);
}
#raffle-widget a {
  color: var(--color-text);
  text-decoration: none;
  transition: color 0.2s, text-shadow 0.2s;
}
#raffle-widget a:hover {
  color: var(--color-emphasis);
  /* Brillo blanco sutil en hover */
  text-shadow: 0 0 6px rgba(255,255,255,0.8);
}
#raffle-widget .secondary-btn {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  padding: 0.5rem;
  width: 100%;
}


/* Búsqueda: base mejorado */
.search-bar {
  display: flex;
  justify-content: center;
  margin: 2rem 0;
}

.search-bar input {
  width: 300px;
  max-width: 60%;
  padding: 0.75rem 1rem;
  border: none;
  border-radius: 9999px 0 0 9999px;
  background: var(--color-card);
  color: var(--color-text);
  outline: none;                  /* elimina el borde de enfoque por defecto */
  box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
  transition: box-shadow 0.2s;
}

.search-bar input:focus {
  box-shadow: inset 0 0 6px rgba(0,0,0,0.5), 0 0 8px var(--color-primary);
}

/* Botón de búsqueda */
.search-bar button {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 0 9999px 9999px 0;
  background: var(--color-emphasis);
  color: var(--color-text);
  cursor: pointer;
  outline: none;                  /* elimina el borde de enfoque por defecto */
  box-shadow: 0 0 6px var(--color-emphasis);
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}

.search-bar button:hover,
.search-bar button:focus {
  background: linear-gradient(
    to right,
    var(--color-emphasis),
    rgba(217,106,0,0.85)
  );
  transform: translateY(-1px);
  box-shadow:
    0 4px 12px rgba(217,106,0,0.6),
    0 0 8px var(--color-accent);
}


.search-bar button {
  transition: background 0.2s, box-shadow 0.3s, transform 0.2s;
}

.search-bar button:hover {
  background: var(--color-emphasis);
  transform: translateY(-2px) scale(1.03);
  box-shadow:
    0 4px 12px rgba(217, 106, 0, 0.6),       /* sombra principal naranja */
    0 0 8px var(--color-accent);               /* resplandor morado */
  /* opcional: añade un sutil efecto de degradado */
  background: linear-gradient(
    to right,
    var(--color-emphasis),
    rgba(217,106,0,0.85)
  );
  color: var(--color-text);
}


#videos-grid.grid {
  display: grid;
  /* Siempre 3 columnas de igual ancho */
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  padding: 0 2rem;
}

.video-card {
  position: relative;
  background: var(--color-card);
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  transition: transform 0.2s;
  /* no fijes height aquí; usa aspect-ratio para que funcione en móvil */
  aspect-ratio: 16/9;
  display: flex;
  flex-direction: column;
}
.video-card:hover {
  transform: translateY(-5px);
}
.video-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-card .info {
  position: absolute;
  bottom: 0.5rem;
  left: 0.5rem;
  right: 0.5rem;
  background: rgba(0,0,0,0.6);
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.video-card .info h3 {
  color: var(--color-accent);
  font-weight: 700;
  text-align: center;
  margin: 0;
  font-size: 0.95rem;
}
.video-card .info p {
  color: #9ca3af;
  font-size: 0.75rem;
  margin: 0.25rem 0 0;
  text-align: center;
}

/* Paginación: base */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2rem 0;
  gap: 1rem;
  padding: 0 2rem;
}
.pagination button {
  background:var(--color-emphasis);
  color: var(--color-text);
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.2s;
}
.pagination button {
  transition: background 0.2s, box-shadow 0.3s, transform 0.2s;
}

.pagination button:hover {
  background: var(--color-emphasis);
  transform: translateY(-2px) scale(1.03);
  box-shadow:
    0 4px 12px rgba(217, 106, 0, 0.6),       /* sombra principal naranja */
    0 0 8px var(--color-accent);               /* resplandor morado */
  /* opcional: añade un sutil efecto de degradado */
  background: linear-gradient(
    to right,
    var(--color-emphasis),
    rgba(217,106,0,0.85)
  );
  color: var(--color-text);
}

.pagination span {
  font-size: 1rem;
  color: var(--color-text);
}

/* ===========================
   PC puro (opcional, si hay overrides específicos)
   =========================== */
@media (min-width: 601px) {
  /* Si no necesitas cambiar nada más, esta sección puede quedar vacía
     dado que los estilos comunes ya cubren el diseño de PC correcto */
}

/* ===========================
   Móvil (≤ 600px): overrides
   =========================== */
@media (max-width: 600px) {
  /* Widget de rifa más pequeño */
  #raffle-widget {
    bottom: 0.9rem;
    right: 0.8rem;
    width: 180px;
    padding: 0.3rem;
    font-size: 0.75rem;
  }
  #raffle-widget #pool-amount {
    font-size: 1rem;
  }
  #raffle-widget .secondary-btn {
    margin-top: 0.3rem;
    padding: 0.4rem;
    font-size: 0.75rem;
  }

  /* Búsqueda: ocupa todo ancho */
  .search-bar {
    margin: 1.5rem 0;
    padding: 0 1rem;
  }
  .search-bar input {
    width: 100%;
    max-width: none;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
  }
  .search-bar button {
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
  }

  /* Grid Instagram-like: dos columnas cuadradas */
  #videos-grid.grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    padding: 0 0.5rem;
  }
  .video-card {
    /* aspect-ratio ya está en 16/9; para cuadrado: */
    aspect-ratio: 1/1;
  }
  .video-card .info {
    bottom: 0.4rem;
    left: 0.4rem;
    right: 0.4rem;
    padding: 0.2rem 0.4rem;
  }
  .video-card .info h3 {
    font-size: 0.8rem;
  }
  .video-card .info p {
    font-size: 0.65rem;
  }

  /* Paginación: padding reducido */
  .pagination {
    margin: 1rem 0;
    padding: 0 0.5rem;
    gap: 0.5rem;
  }
  .pagination button {
    flex: 1 1 auto;
    padding: 0.6rem;
    font-size: 0.85rem;
  }
}

/****************************************************************************
****************************************************************************
****************************************************************************/

/* ===========================
   Header & navegación
   =========================== */

.site-header {
  --padding-horizontal: 2rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 1rem var(--padding-horizontal);
  background:var(--color-primary);
  box-shadow: 0 0 12px var(--color-accent), 0 2px 8px rgba(0,0,0,0.5);
  backdrop-filter: blur(10px);
  z-index: 100;
}

.site-header .logo {
  margin-right: auto;
}

.site-logo {
  height: 2.5rem;
  width: auto;
}

/* Tamaño fijo para avatar (en header) */
.site-header .avatar-img,
.site-header .avatar-placeholder {
  width: 2.5rem !important;
  height: 2.5rem !important;
  min-width: 2.5rem !important;
  min-height: 2.5rem !important;
  max-width: 2.5rem !important;
  max-height: 2.5rem !important;
  font-size: 1rem !important;
  line-height: 1 !important;
}

/* Solo Mi Cuenta permite tamaño grande */
.form-page .avatar-container .avatar-img,
.form-page .avatar-container .avatar-placeholder {
  width: 120px !important;
  height: 120px !important;
  font-size: 3rem !important;
}

/* Botón avatar */
.avatar-btn {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 110;
}

.avatar-img,
.avatar-placeholder {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--color-text);
  border: 2px solid var(--color-text);
  box-shadow: 0 0 6px var(--color-accent);
}

/* Menú desplegable */
.nav-links {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: var(--padding-horizontal);
  display: none;
  flex-direction: column;
  background: var( --color-card);
  border-radius: 0.5rem;
  box-shadow: 0 0 12px var(--color-accent), 0 4px 12px rgba(0,0,0,0.3);
  backdrop-filter: blur(8px);
  overflow: hidden;
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 105;
}

.nav-links.open {
  display: flex;
}

.nav-links li {
  width: 100%;
}

.nav-links a,
.nav-links button {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  text-decoration: none;
  color: var(--color-text);
  font-weight: 700;
  transition: background 0.2s, text-shadow 0.2s;
}

.nav-links a:hover,
.nav-links button:hover {
  background: rgba(255,255,255,0.2);
  text-shadow: 0 0 4px var(--color-accent);
}

button.secondary-btn {
  background-color: var(--color-emphasis);
  color: var(--color-text);
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  border: none;
  cursor: pointer;
  font-weight: 500;
  box-shadow: 0 0 6px var(--color-emphasis);
  transition: background-color 0.2s, box-shadow 0.2s;
}

button.secondary-btn:hover {
  background-color: var(--color-emphasis);
  box-shadow: 0 0 8px var(--color-emphasis), 0 0 6px var(--color-accent);
}

/* ===========================
   NUEVOS ESTILOS para nombre de usuario junto al avatar
   =========================== */

.site-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.site-header .user-info {
  position: absolute;
  top: 50%;
  right: var(--padding-horizontal);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  z-index: 110;
  white-space: nowrap;
}

.site-header .username-display {
  font-weight: 600 !important;
  font-size: 1rem !important;
  color: var(--color-text) !important;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  box-shadow: inset 0 0 6px rgba(0,0,0,0.7);
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.avatar-btn {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  padding: 0;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* ===========================
   Ajustes para móvil (≤ 600px)
   =========================== */
@media (max-width: 600px) {
  .site-header .user-info {
    /* Poner en fila junto al avatar */
    flex-direction: row !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0.5rem !important;
  }

  .site-header .username-display {
    /* Reducir tamaño de letra */
    font-size: 0.75rem !important;
    /* Asegurar que quepa en una línea */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding: 0.2rem 0.4rem !important;
  }
}



/************************************************************************************************
*************************************************************************************************
*************************************************************************************************/
/* ===========================
   Estilos Crear Campaña de Video
  
   =========================== */

/* Contenedor form-page y form-container */
.form-page {
  display: flex;
  justify-content: center;
  padding: 2rem;
  min-height: calc(100vh - 160px); /* considerar header/footer */
}
.form-container {
  background: rgba(255,255,255,0.1);
  padding: 2rem;
  border-radius: 0.75rem;
  max-width: 600px;
  width: 100%;
  box-shadow: 0 0 12px var(--color-accent), 0 4px 12px rgba(0,0,0,0.5);
  backdrop-filter: blur(8px);
}
.form-container h1 {
  font-size: 1.75rem;
  margin-bottom: 1rem;
  color: var(--color-text)!important;
  text-align: center;
  text-shadow: 0 0 6px var(--color-accent);
}

/* Formulario */
.video-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.video-form label {
  font-weight: 600;
  color: var(--color-text);
  text-shadow: 0 0 2px rgba(0,0,0,0.5);
}
.video-form input[type="text"],
.video-form input[type="url"],
.video-form input[type="file"],
.video-form textarea,
.video-form select {
  padding: 0.75rem;
  font-size: 1rem;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid rgba(0,0,0,0.3);
  border-radius: 0.375rem;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
  width: 100%;
  box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
.video-form input:focus,
.video-form textarea:focus,
.video-form select:focus {
  background: rgba(255,255,255,0.05);
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 8px var(--color-primary);
}

/* Botón submit */
.video-form button.primary-btn,
.video-form button[type="submit"] {
  background:  var(--color-emphasis);
  color: var(--color-text);
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  font-weight: 600;
  transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
  text-align: center;
  margin-top: 1rem;
  box-shadow: 0 0 12px var(--color-accent);
}
.video-form button.primary-btn:hover,
.video-form button[type="submit"]:hover {
  opacity: 0.9;
  transform: scale(1.02);
  box-shadow: 0 0 16px var(--color-emphasis), 0 0 12px var(--color-accent);
}

/* Mensaje de token gratuito */
.free-token-msg {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  color: #9ae6b4; /* verde suave */
  font-weight: 600;
  text-shadow: 0 0 2px rgba(0,0,0,0.5);
}

/* ------------ Input file estilizado ------------ */
.video-form input[type="file"] {
  background: rgba(255,255,255,0.1);
  color: var(--color-text);
  border: 1px solid rgba(0,0,0,0.3);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
  box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
.video-form input[type="file"]::-webkit-file-upload-button,
.video-form input[type="file"]::file-selector-button {
  background: var(--color-emphasis)  ;
  color: var(--color-text);
  border: none;
  padding: 0.5rem 1rem;
  margin-right: 0.5rem;
  border-radius: 0.375rem;
  cursor: pointer;
  font-weight: 600;
  transition: opacity 0.2s, box-shadow 0.2s;
  box-shadow: 0 0 8px var(--color-accent);
}
.video-form input[type="file"]::-webkit-file-upload-button:hover,
.video-form input[type="file"]::file-selector-button:hover {
  opacity: 0.9;
  box-shadow: 0 0 12px var(--color-emphasis), 0 0 8px var(--color-accent);
}
.video-form input[type="file"]:focus {
  outline: none;
  border-color: var(--color-primary);
  background: rgba(255,255,255,0.05);
}

/* Nombre de archivo */
.file-name {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.7);
}

/* ------------ Select personalizado ------------ */
.select-wrapper {
  position: relative;
  width: 100%;
  margin-bottom: 1rem;
}
.select-wrapper label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 600;
  color:var(--color-accent);
  text-shadow: 0 0 2px rgba(0,0,0,0.5);
}
.select-wrapper select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  padding: 0.75rem 1rem;
  background-color: var(--color-accent);
  color: var(--color-text);
  border: 1px solid rgba(0,0,0,0.3);
  border-radius: 0.375rem;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
  box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
/* Si está deshabilitado */
.select-wrapper select:disabled {
  opacity: 1;
  cursor: not-allowed;
}
/* Focus / Active */
.select-wrapper select:focus,
.select-wrapper select:active {
  background-color: var(--color-accent)!important;
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 8px var(--color-primary);
}
/* Flecha custom */
.select-arrow {
  pointer-events: none;
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--color-text);
  filter: drop-shadow(0 0 2px rgba(0,0,0,0.5));
}



.loader-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.loader-content {
  background:var(--color-card);
  padding: 2rem;
  border-radius: 1rem;
  text-align: center;
  width: 300px;
}
.progress {
  background: var(--color-card);
  border-radius: .5rem;
  overflow: hidden;
  margin: 1rem 0;
  height: 1rem;
}
.progress-bar {
  width: 0%;
  height: 100%;
  background: #4caf50;
  transition: width 0.2s;
}


/* Ajustes responsive */
@media (max-width: 600px) {
  .form-page {
    padding: 1rem;
    min-height: calc(100vh - 120px);
  }
  .form-container {
    padding: 1.5rem;
  }
  .form-container h1 {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
  }
  .video-form {
    gap: 0.75rem;
  }
  .video-form input[type="text"],
  .video-form input[type="url"],
  .video-form input[type="file"],
  .video-form textarea,
  .select-wrapper select {
    padding: 0.65rem;
    border: 1px solid rgba(0,0,0,0.3);
  }
  .video-form button.primary-btn,
  .video-form button[type="submit"] {
    width: 100%;
    padding: 0.75rem;
  }
  .select-wrapper select {
    padding-right: 2.5rem;
  }
}
@media (min-width: 601px) {
  .select-wrapper select {
    padding-right: 2.5rem;
  }
}


/*********************************************************************************************
**********************************************************************************************
**********************************************************************************************/


/* ===========================
   Estilos video-page 
   =========================== */

.video-page {
  padding: 2rem 1rem;
  display: flex;
  justify-content: center;
}
.video-container {
  width: 100%;
  max-width: 800px;
}

/* Video-wrapper: posición relativa para overlays */
.video-wrapper {
  position: relative;
  width: 100%;
  background: rgba(255,255,255,0.1);
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 0 12px var(--color-accent), 0 4px 12px rgba(0,0,0,0.5);
  padding-top: 56.25%; /* relación 16:9 */
}
.video-wrapper video.fixed-player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background-color: black;
  pointer-events: none;
}

/* Overlay base */
.overlay {
  position: absolute;
  padding: 0.25rem 0.5rem;
  background: rgba(0, 0, 0, 0.6);
  color: var(--color-text);
  font-size: 0.9rem;
  border-radius: 0.375rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  text-shadow: 0 0 2px rgba(0,0,0,0.7);
}

/* Contador de vistas: esquina superior izquierda */
.views-overlay {
  top: 0.5rem;
  left: 0.5rem;

}

.buy-btn {
  top: 0.5rem;
  right: 0.5rem;
  /* Forzamos el naranja de énfasis */
  background-color: var(--color-emphasis) !important;
  background-image: none !important;
  color: var(--color-text);
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.9rem;
  transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 0 8px var(--color-emphasis);
}
.buy-btn:hover {
  opacity: 0.9;
  transform: scale(1.05);
  box-shadow: 0 0 12px var(--color-emphasis), 0 0 8px var(--color-accent);
}

/* Preview debajo del video */
.preview {
  margin-top: 1.5rem;
}
.preview h2 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--color-text);
  text-shadow: 0 0 6px var(--color-text);
}
.preview p {
  color: rgba(255,255,255,0.7);
  margin-bottom: 1rem;
  text-shadow: 0 0 2px rgba(0,0,0,0.5);
}
/* Mensaje “No quedan tickets” */
.no-tickets-msg {
  color: gray;
  margin-top: 1rem;
  text-shadow: 0 0 2px rgba(0,0,0,0.5);
}

/* Referral section */
.referral-section {
  margin-top: 1rem;
  background: rgba(255,255,255,0.1);
  padding: 1rem;
  border-radius: 0.75rem;
  box-shadow: 0 0 8px var(--color-accent), 0 2px 8px rgba(0,0,0,0.3);
  backdrop-filter: blur(8px);
}
.referral-section p {
  margin: 0 0 0.5rem;
  color: var(--color-text);
  text-shadow: 0 0 2px rgba(0,0,0,0.5);
}
.referral-section input {
  width: 100%;
  padding: 0.5rem;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid rgba(0,0,0,0.3);
  border-radius: 0.375rem;
  box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
  transition: background 0.2s, border-color 0.2s;
}
.referral-section input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 8px var(--color-primary);
}
.referral-section button.secondary-btn {
  background-color: var(--color-emphasis);
  color: var(--color-text);
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.2s, box-shadow 0.2s;
  box-shadow: 0 0 6px var(--color-emphasis);
}
.referral-section button.secondary-btn:hover {
  background-color: var(--color-emphasis);
  box-shadow: 0 0 8px var(--color-emphasis), 0 0 6px var(--color-accent);
}

/* Social links */
.social-links {
  margin-top: 1.5rem;
}
.social-links h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  color: var(--color-text);
}
.social-links .links-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.social-links .btn-social {
  width: 6rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: white;
  font-weight: 500;
  text-decoration: none;
  transition: opacity 0.2s, transform 0.1s;
  font-size: 0.85rem;
}
.social-links .btn-social:hover {
  opacity: 0.8;
  transform: scale(1.05);
}
/* Colores de cada red */
.social-links .btn-instagram {
  background: radial-gradient(circle at 30% 107%, 
    #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
.social-links .btn-youtube {
  background: #FF0000;
}
.social-links .btn-x {
  background: #000000;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.5);
}
.social-links .btn-facebook {
  background: #1877F2;
}

/* Likes / Dislikes */
.likes-controls {
  margin-top: 1.5rem;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.likes-controls .icon-img {
  cursor: pointer;
  filter: drop-shadow(0 0 4px var(--color-accent));
}
.likes-controls span {
  font-size: 1rem;
  color: var(--color-text);
  text-shadow: 0 0 2px rgba(0,0,0,0.5);
}

/* Comentarios */
.comments-section {
  margin-top: 2rem;
}
.comments-section h3 {
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
  color: var(--color-text);
  text-shadow: 0 0 6px var(--color-accent);
}
.comments-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.comments-list li {
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.3);
}
.comments-list li strong {
  color: var(--color-text);
  text-shadow: 0 0 2px rgba(0,0,0,0.5);
}
.comments-list li p {
  margin: 0.25rem 0;
  color: var(--color-text);
}
.comments-list li small {
  color: rgba(255,255,255,0.7);
}

/* Formulario de comentario */
.comment-form {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}
.comment-form input[type="text"] {
  flex: 1;
  padding: 0.5rem;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid rgba(0,0,0,0.3);
  border-radius: 0.375rem;
  box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
  transition: background 0.2s, border-color 0.2s;
}
.comment-form input:focus {
  background: rgba(255,255,255,0.05);
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 8px var(--color-primary);
}
.comment-form button.primary-btn {
  background:var(--color-emphasis) ;
  color: var(--color-text);
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  font-weight: 600;
  transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 0 8px var(--color-accent);
}
.comment-form button.primary-btn:hover {
  opacity: 0.9;
  transform: scale(1.02);
  box-shadow: 0 0 12px var(--color-emphasis), 0 0 8px var(--color-accent);
}


/* ===========================
   Móvil extra pequeño (≤ 420px)
   =========================== */
@media (max-width: 420px) {
  .campaign-info {
    
    gap: 1rem;                 /* menos separación */
    text-align: center;        /* centrar texto */
    padding: 1rem 0;           /* añadir un poco de espacio arriba/abajo */
  }

  /* Si tienes elementos hijos con clases específicas, por ejemplo .tickets o .days,
     podrías ajustar sus tipografías: */
  .campaign-info > * {
    font-size: 0.7rem;         /* ligeramente más pequeño */
  }

  /* Si el text-shadow te quita legibilidad, suavízalo: */
  .campaign-info {
    text-shadow: 0 0 4px var(--color-text);
  }
}








/* Responsive Móvil */
@media (max-width: 600px) {
  .video-page {
    padding: 1rem;
  }
  .video-container {
    max-width: 100%;
  }
  .video-wrapper {
    padding-top: 56.25%;
  }
  .views-overlay {
    top: 0.25rem;
    left: 0.25rem;
    font-size: 0.8rem;
    padding: 0.2rem 0.4rem;
    box-shadow: 0 0 4px var(--color-accent);
  }
  .buy-btn {
    top: 0.25rem;
    right: 0.25rem;
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
  }
  .preview h2 {
    font-size: 1.25rem;
  }
  .preview p {
    font-size: 0.9rem;
  }
  .referral-section {
    padding: 0.75rem;
  }
  .referral-section input {
    padding: 0.4rem;
  }
  .referral-section button.secondary-btn {
    padding: 0.4rem 0.8rem;
    font-size: 0.9rem;
  }
  .social-links h3 {
    font-size: 1.1rem;
  }
  .social-links .btn-social {
    width: 5rem;
    height: 2rem;
    font-size: 0.75rem;
  }
  .likes-controls {
    gap: 0.25rem;
  }
  .likes-controls img {
    width: 20px;
    height: 20px;
  }
  .likes-controls span {
    font-size: 0.9rem;
  }
  .comments-section h3 {
    font-size: 1.1rem;
  }
  .comments-list li {
    padding: 0.5rem 0;
  }
  .comment-form {
    flex-direction: column;
    gap: 0.5rem;
  }
  .comment-form input[type="text"] {
    width: 100%;
  }
  .comment-form button.primary-btn {
    width: 100%;
  }
}
/*************************************************************************************************
**************************************************************************************************
**************************************************************************************************/


/* ===========================
   Estilos para Login y Registro (form-auth) al estilo “Crear Campaña”
   =========================== */

/* Contenedor general */
.form-page {
  display: flex;
  justify-content: center;
  padding: 2rem;
  min-height: calc(100vh - 160px);
}
.form-container {
  background: var(--color-card);
  padding: 2rem;
  border-radius: 0.75rem;
  max-width: 400px;
  width: 100%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.form-container h1 {
  font-size: 1.75rem;
  margin-bottom: 1rem;
  color: var(--color-text);
  text-align: center;
}
/* Mensaje de error */
.error {
  color: var(--color-accent);
  background: rgba(231, 76, 60, 0.1);
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  margin-bottom: 1rem;
  text-align: center;
}

/* Formulario */
.form-auth {
  display: grid;
  gap: 1rem;
}
.form-auth div {
  display: flex;
  flex-direction: column;
}
.form-auth label {
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.25rem;
}
.form-auth input[type="text"],
.form-auth input[type="email"],
.form-auth input[type="password"],
.form-auth input[type="tel"] {
  padding: 0.75rem;
  font-size: 1rem;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid #fffff;
  border-radius: 0.375rem;
  transition: background 0.2s, border-color 0.2s;
  width: 100%;
}
.form-auth input:focus {
  background: rgba(255,255,255,0.05);
  outline: none;
  border-color: var(--color-primary);
}

/* Select personalizado en Registro */
.select-wrapper {
  position: relative;
  width: 100%;
}
.select-wrapper label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 600;
  color: var(--color-text);
}
.select-wrapper select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  padding: 0.75rem 1rem;
  background-color: var(--color-card);
  color: var(--color-text);
  border: 1px solid #374151;
  border-radius: 0.375rem;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.select-wrapper select:focus,
.select-wrapper select:hover {
  background: rgba(255,255,255,0.05);
  outline: none;
  border-color: var(--color-primary);
}
.select-wrapper select option {
  background-color: var(--color-card);
  color: var(--color-text);
}
.select-wrapper select:disabled {
  background-color: var(--color-card);
  color: var(--color-text);
  opacity: 1;
  cursor: not-allowed;
}
.select-arrow {
  pointer-events: none;
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--color-text);
}

/* Botón submit */
.form-auth button.primary-btn,
.form-auth button[type="submit"] {
  background: var(--color-emphasis);
  color: var(--color-text);
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  font-weight: 600;
  transition: opacity 0.2s;
  margin-top: 0.5rem;
  text-align: center;
}
.form-auth button.primary-btn:hover,
.form-auth button[type="submit"]:hover {
  opacity: 0.9;
}

/* Enlace debajo del formulario */
.form-container p {
  margin-top: 1rem;
  text-align: center;
  color: var(--color-text);
}
.form-container p a {
  color: var(--color-text);
  font-weight: 600;
  text-decoration: none;
}
.form-container p a:hover {
  text-decoration: underline;
}

/* ===========================
   Responsive Móvil (≤ 600px)
   =========================== */
@media (max-width: 600px) {
  .form-page {
    padding: 1rem;
    min-height: calc(100vh - 120px);
  }
  .form-container {
    padding: 1.5rem;
  }
  .form-container h1 {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
  }
  .form-auth {
    gap: 0.75rem;
  }
  .form-auth input[type="text"],
  .form-auth input[type="email"],
  .form-auth input[type="password"],
  .form-auth input[type="tel"],
  .select-wrapper select {
    padding: 0.65rem;
    font-size: 0.95rem;
  }
  .form-auth button.primary-btn,
  .form-auth button[type="submit"] {
    width: 100%;
    padding: 0.75rem;
    font-size: 0.95rem;
  }
  .select-wrapper select {
    padding-right: 2.5rem;
  }
  .error {
    font-size: 0.9rem;
    padding: 0.4rem 0.6rem;
  }
  .form-container p {
    font-size: 0.9rem;
  }
}

/**************************************************************************************************
***************************************************************************************************
***************************************************************************************************/

/* ===========================
   Estilos Mi Red de Referidos
   =========================== */


/* Contenedor principal */
.admin-page.referrals-page {
  padding: 2rem 1rem;
  color: var(--color-text);
}
/* Encabezado centrado */
.referrals-header {
  text-align: center;
  margin-bottom: 2rem;
}
.referrals-header h1 {
  font-size: 2rem;
  margin: 0;
  color: var(--color-text)!important;
}
.referrals-header p {
  margin: 0.5rem 0 0;
  font-size: 1rem;
  color: var(--color-text);
}

/* Contenido columnas */
.referrals-content {
  display: flex;
  gap: 2rem;
}
/* Columna izquierda */
.video-list-container {
  flex: 1 1 250px;
}
/* Columna derecha */
.metrics-container {
  flex: 2 1 400px;
}

/* Lista de vídeos */
.video-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.video-item {
  /* nada extra */
}
.video-link {
  display: block;
  padding: 0.75rem 1rem;
  background: var(--color-card);
  border-radius: 0.5rem;
  text-decoration: none;
  color: var(--color-text);
  transition: background 0.2s;
}
.video-link:hover {
  background: rgba(255,255,255,0.1);
}
.video-link.active {
  background: var(--color-primary);
  color: var(--color-text);
}
.video-title {
  font-weight: 600;
}
.video-date {
  display: inline-block;
  font-size: 0.85rem;
  color: #9ca3af;
  margin-left: 0.5rem;
}

/* Mensaje informativo en izquierda */
.info {
  margin-top: 1rem;
  font-style: italic;
  color: #9ca3af;
}

/* Métricas (derecha) */
.referrals-section {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
/* Título de sección */
.referrals-section h2 {
  font-size: 1.5rem;
  margin: 0;
  color: var(--color-text);
}

/* Niveles */
.levels {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.level-block {
  flex: 1 1 150px;
  background: var(--color-card);
  padding: 1rem;
  border-radius: 0.75rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.level-block h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  color: var(--color-text);
}
.ref-list {
  list-style: disc inside;
  padding-left: 0;
  margin: 0;
}
.ref-list li {
  margin-bottom: 0.5rem;
  color: var(--color-text);
}
.ref-list li.empty {
  font-style: italic;
  color: #9ca3af;
}

/* Comisiones */
.commissions-block {
  background: var(--color-card);
  padding: 1rem;
  border-radius: 0.75rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  overflow-x: auto;
}
.commissions-block h3 {
  font-size: 1.25rem;
  margin: 0 0 0.75rem;
  color: var(--color-text);
}
.comm-table {
  width: 100%;
  border-collapse: collapse;
}
.comm-table th,
.comm-table td {
  padding: 0.75rem;
  border: 1px solid #374151;
  text-align: left;
  color: var(--color-text);
}
.comm-table thead th {
  background: var(--color-card);
  font-weight: 600;
}
.comm-table tbody tr:hover {
  background: rgba(255,255,255,0.05);
}
.comm-table .empty {
  text-align: center;
  font-style: italic;
  color: #9ca3af;
}

/* ===========================
   PC (≥ 601px)
   =========================== */
@media (min-width: 601px) {
  /* Mantener .referrals-content en fila */
  .referrals-content {
    flex-direction: row;
  }
  /* Ajustes de ancho máximo y centrado si hace falta */
  .admin-page.referrals-page {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .video-list-container,
  .metrics-container {
    max-width: 800px;
    width: 100%;
  }
}

/* ===========================
   Móvil (≤ 600px) - CORREGIDO
   =========================== */
@media (max-width: 600px) {
  .admin-page.referrals-page {
    padding: 1rem;
  }

  /* Apilar columnas */
  .referrals-content {
    flex-direction: column;
    gap: 1.5rem;
  }

  /* Lista de vídeos: igual, columna */
  .video-link {
    padding: 0.6rem 0.75rem;
    font-size: 0.95rem;
  }

  .video-date {
    display: block;
    margin-left: 0;
    margin-top: 0.25rem;
    font-size: 0.8rem;
  }

  /* Encabezado ajustado */
  .referrals-header h1 {
    font-size: 1.5rem;
  }
  .referrals-header p {
    font-size: 0.95rem;
  }

  /* Niveles en columna */
  .levels {
    flex-direction: column;
    gap: 1rem;
  }
  .level-block {
    padding: 0.75rem;
  }
  .level-block h3 {
    font-size: 1.1rem;
  }

  /* Comisiones */
  .commissions-block {
    padding: 0.75rem;
  }
  .commissions-block h3 {
    font-size: 1.1rem;
  }

  /* TABLA: tamaños y color (móvil) */
  .comm-table th,
  .comm-table td {
    padding: 0.5rem;
    font-size: 0.9rem;
    /* no tocar color aquí: lo forzamos abajo para tbody */
  }

  /* Forzar texto blanco y opacidad 1 en las celdas del tbody */
  .comm-table tbody td {
    color: #ffffff !important;
    opacity: 1 !important;
  }

  /* Opcional: aclarar los bordes para que se vean sobre fondo oscuro */
  .comm-table th,
  .comm-table td {
    border-color: rgba(255,255,255,0.10);
  }
}

/* ===========================
   Móvil - mostrar solo el título activo y la info debajo
   Requiere soporte para :has() en el navegador
   =========================== */

/* Si la lista contiene un .video-link.active, ocultar todos los items... */
.video-list:has(.video-link.active) .video-item {
  display: none !important;
}

/* ...pero mostrar el item que tenga el link activo */
.video-list:has(.video-link.active) .video-item .video-link.active {
  display: block !important;
}

/* Asegurar que el item activo mantenga padding / estilo como los demás */
.video-list:has(.video-link.active) .video-item .video-link.active {
  padding: 0.65rem 0.75rem;
  border-radius: 0.5rem;
}

/* Ajustes visuales: empujar un poco la sección de métricas para que quede pegada al título activo */
@media (max-width: 600px) {
  .video-list:has(.video-link.active) {
    margin-bottom: 0.5rem;
  }
  .video-list:has(.video-link.active) + .metrics-container,
  /* en caso de estructura distinta, asegúrate que metrics-container está después */
  .metrics-container {
    margin-top: 0.25rem;
  }
}


/* ===== Forzar texto blanco en la tabla de comisiones (móvil) ===== */
@media (max-width: 600px) {
  /* Forzar la variable si se usa --color-text */
  .admin-page.referrals-page .commissions-block {
    --color-text: #ffffff !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
    -webkit-text-fill-color: #ffffff !important;
    
  }

  /* Forzar color y opacidad en todas las celdas y filas del tbody */
  .admin-page.referrals-page .commissions-block .comm-table tbody,
  .admin-page.referrals-page .commissions-block .comm-table tbody tr,
  .admin-page.referrals-page .commissions-block .comm-table tbody td,
  .admin-page.referrals-page .commissions-block .comm-table tbody td * {
    color: #ffffff !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #ffffff !important;
    mix-blend-mode: normal !important;
  }

  /* Si hubiera pseudo-elementos con color, forzarlos también */
  .admin-page.referrals-page .commissions-block .comm-table tbody td::before,
  .admin-page.referrals-page .commissions-block .comm-table tbody td::after {
    color: #ffffff !important;
    opacity: 1 !important;
  }

  /* Ajuste de bordes para mejor lectura */
  .admin-page.referrals-page .commissions-block .comm-table th,
  .admin-page.referrals-page .commissions-block .comm-table td {
    border-color: rgba(255,255,255,0.10) !important;
  }
}



/************************************************************************************************
*************************************************************************************************
*************************************************************************************************/

/* ===========================
   Estilos Mis Campañas (business-dashboard)
   =========================== */

/* Contenedor general */
.business-dashboard-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 1rem;
  color: var(--color-text);
}

/* Título centrado arriba */
.business-dashboard-page .dashboard-header {
  width: 100%;
  max-width: 1000px;
  text-align: center;
}
.business-dashboard-page .dashboard-header h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--color-text);
}

/* Contenedor de la tabla debajo */
.business-dashboard-page .table-container {
  width: 100%;
  max-width: 1000px;
  overflow-x: auto;
  margin-top: 1rem;
  background: var(--color-card);
  border-radius: 0.75rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* Tabla */
.campaigns-table {
  width: 100%;
  border-collapse: collapse;
}
.campaigns-table thead {
  background: var(--gradient);
}
.campaigns-table thead th {
  padding: 0.75rem;
  color: var(--color-text);
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}
.campaigns-table tbody tr {
  border-bottom: 1px solid #374151;
}
.campaigns-table tbody tr:hover {
  background: rgba(255,255,255,0.05);
}
.campaigns-table td {
  padding: 0.75rem;
  text-align: center;
  color: var(--color-text);
  white-space: nowrap;
}
/* Enlaces en tabla */
.campaigns-table a {
  color: var(--color-primary);
  text-decoration: none;
}
.campaigns-table a:hover {
  text-decoration: underline;
}

/* ===========================
   PC (≥ 601px)
   =========================== */
@media (min-width: 601px) {
  .business-dashboard-page {
    padding: 2rem;
  }
  .business-dashboard-page .dashboard-header h1 {
    font-size: 2rem;
  }
  .campaigns-table thead th,
  .campaigns-table td {
    font-size: 1rem;
  }
}

/* ===========================
   Móvil (≤ 600px)
   =========================== */
@media (max-width: 600px) {
  .business-dashboard-page {
    padding: 1rem;
  }
  .business-dashboard-page .dashboard-header h1 {
    font-size: 1.5rem;
  }
  .business-dashboard-page .table-container {
    margin-top: 0.5rem;
    box-shadow: none;
    border-radius: 0.5rem;
  }
  .campaigns-table thead th,
  .campaigns-table td {
    padding: 0.5rem;
    font-size: 0.85rem;
  }
  /* Scroll horizontal si muchas columnas */
  .business-dashboard-page .table-container {
    overflow-x: auto;
  }
  /* Opcional: indicar scroll */
  .business-dashboard-page .table-container::-webkit-scrollbar {
    height: 6px;
  }
  .business-dashboard-page .table-container::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.3);
    border-radius: 3px;
  }
}



/**************************************************************************************************
***************************************************************************************************
**************************************************************************************************/


/* ===========================
   Estilos “Mi Cuenta” formuario al estilo Crear Campaña
   =========================== */

/* Contenedor general */
.form-page {
  display: flex;
  justify-content: center;
  padding: 2rem;
  min-height: calc(100vh - 160px);
}
.form-container {
  background: var(--color-card);
  padding: 2rem;
  border-radius: 0.75rem;
  max-width: 500px;
  width: 100%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.form-container h1 {
  font-size: 1.75rem;
  margin-bottom: 1rem;
  color: var(--color-text);
  text-align: center;
}

/* Secciones dentro de form-container */
.form-container section {
  margin-top: 1.5rem;
}
.form-container section h2 {
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
  color: var(--color-text);
}

/* Alerts */
.alert {
  padding: 0.75rem 1rem;
  border-radius: 0.375rem;
  margin-bottom: 1rem;
  font-size: 0.95rem;
}
.alert-error {
  background: rgba(231, 76, 60, 0.1);
  color: var(--color-accent);
}
.alert-success {
  background: rgba(46, 204, 113, 0.1);
  color: #2d6a4f;
}

/* Formularios de perfil y contraseña */
.account-form {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}
.account-form label {
  font-weight: 600;
  color: var(--color-text);
}
.account-form input[type="text"],
.account-form input[type="email"],
.account-form input[type="password"],
.account-form input[type="tel"] {
  padding: 0.75rem;
  font-size: 1rem;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid #374151;
  border-radius: 0.375rem;
  transition: background 0.2s, border-color 0.2s;
  width: 100%;
}
.account-form input:focus {
  background: rgba(255,255,255,0.05);
  outline: none;
  border-color: var(--color-primary);
}

/* Botones */
.account-form button.primary-btn,
.account-form button[type="submit"] {
  background: var(--gradient);
  color: var(--color-text);
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  font-weight: 600;
  transition: opacity 0.2s;
  margin-top: 0.5rem;
  text-align: center;
}
.account-form button.primary-btn:hover,
.account-form button[type="submit"]:hover {
  opacity: 0.9;
}

/* Separador */
.form-container hr {
  margin: 2rem 0;
  border: none;
  border-top: 1px solid rgba(255,255,255,0.1);
}

/* ===========================
   Responsive Móvil (≤ 600px)
   =========================== */
@media (max-width: 600px) {
  .form-page {
    padding: 1rem;
    min-height: calc(100vh - 120px);
  }
  .form-container {
    padding: 1.5rem;
  }
  .form-container h1 {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
  }
  .form-container section h2 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
  }
  .account-form {
    gap: 0.75rem;
  }
  .account-form input[type="text"],
  .account-form input[type="email"],
  .account-form input[type="password"],
  .account-form input[type="tel"] {
    padding: 0.65rem;
    font-size: 0.95rem;
  }
  .account-form button.primary-btn,
  .account-form button[type="submit"] {
    width: 100%;
    padding: 0.75rem;
    font-size: 0.95rem;
  }
  .alert {
    font-size: 0.9rem;
    padding: 0.6rem 0.8rem;
  }
  .form-container hr {
    margin: 1.5rem 0;
  }
}



/************************************************************************************************
*************************************************************************************************
************************************************************************************************/
/* =========================
   wallet.css — reemplazo completo
   Scoped a .wallet-page (NO tocar :root)
   ========================= */

/* Layout principal */
.wallet-page {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  padding: 28px;
  align-items: start;
  color: var(--color-text);
  font-family: Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* SIDEBAR */
.wallet-page .wallet-sidebar {
  position: sticky;
  top: 24px;
  padding: 20px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  box-shadow: 0 6px 18px rgba(12,12,30,0.45);
}

/* Sidebar top */
.wallet-page .wallet-sidebar .sidebar-top { margin-bottom: 16px; }
.wallet-page .wallet-sidebar .logo { margin: 0 0 6px 0; font-weight: 700; letter-spacing: 0.2px; font-size: 1.15rem; }
.wallet-page .wallet-sidebar .balance-label { opacity: 0.8; margin: 0; font-size: 0.78rem; }
.wallet-page .wallet-sidebar .balance-value { margin: 6px 0 0; font-weight: 700; font-size: 1.05rem; word-break: break-all; }

/* Sidebar actions */
.wallet-page .sidebar-actions { display:flex; flex-direction:column; gap:8px; margin:10px 0; }
.wallet-page .sidebar-btn {
  display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border-radius:10px;
  background:var(--color-accent); border:1px solid transparent; color:var(--color-text);
  text-align:left; cursor:pointer; font-weight:600;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.wallet-page .sidebar-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(20,20,40,0.25); }

/* Active state */
.wallet-page .sidebar-btn.active {
  background: var(--color-emphasis); border:1px solid rgba(255,255,255,0.08);
  box-shadow: 0 8px 20px rgba(28,44,136,0.12), 0 0 30px rgba(125,106,255,0.06);
  position:relative;
}
.wallet-page .sidebar-btn.active::before {
  content:""; position:absolute; left:-6px; top:6px; bottom:6px; width:4px; border-radius:6px;
  background:var(--gradient); opacity:.95;
}

/* CONTENT */
.wallet-page .wallet-content .card {
  background: var(--color-card); border-radius:14px; padding:18px; border:1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(6px) saturate(120%); -webkit-backdrop-filter: blur(6px) saturate(120%);
  box-shadow: 0 8px 30px rgba(8,10,30,0.45); color:var(--color-text);
}

/* Header */
.wallet-page .header-card .form-title { margin:0 0 6px 0; font-size:1.25rem; font-weight:700; }
.wallet-page .header-card .muted { opacity:.85; }

/* Action containers */
.wallet-page .action-container { margin-top:18px; }

/* Buttons */
.wallet-page .primary-btn {
  display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:10px;
  background: var(--color-accent); color:var(--color-text); border:none; font-weight:1000; cursor:pointer;
  box-shadow: 0 8px 20px rgba(217,106,0,0.12);
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  text-align: center !important;
}
.wallet-page .primary-btn:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(217,106,0,0.18); }
.wallet-page .primary-btn:active { transform: translateY(-1px); }
.wallet-page .primary-btn:focus-visible { outline:3px solid rgba(125,106,255,0.22); outline-offset:2px; }

/* Secondary (con sheen) */
.wallet-page .secondary-btn {
  display:inline-block; padding:8px 10px; border-radius:8px; background:var(--color-emphasis);
  color:var(--color-text); border:1px solid rgba(255,255,255,0.08); font-weight:600; cursor:pointer;
  position:relative; overflow:hidden; -webkit-tap-highlight-color:transparent;
  transition: transform .16s cubic-bezier(.2,.9,.2,1), box-shadow .16s ease, filter .12s ease;
  will-change: transform;
}
.wallet-page .secondary-btn::after {
  content:""; position:absolute; left:-60%; top:-20%; width:220%; height:140%; background:var(--gradient);
  opacity:0; transform:rotate(10deg) translateX(0); filter:blur(12px);
  transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .28s ease; pointer-events:none; mix-blend-mode:screen;
}
.wallet-page .secondary-btn:hover,
.wallet-page .secondary-btn:where(:focus, :focus-visible) { transform:translateY(-3px) scale(1.02); box-shadow: 0 8px 20px rgba(125,106,255,0.10), 0 2px 6px rgba(12,12,30,0.18); filter:saturate(1.06); }
.wallet-page .secondary-btn:hover::after,
.wallet-page .secondary-btn:where(:focus, :focus-visible)::after { opacity:.22; transform:rotate(10deg) translateX(26%); }
.wallet-page .secondary-btn:active { transform: translateY(0) scale(.98); box-shadow: inset 0 3px 8px rgba(0,0,0,0.18); filter:brightness(.96); }
.wallet-page .secondary-btn:focus-visible { outline:3px solid rgba(125,106,255,0.22); outline-offset:3px; }

/* Reduce motion hint for secondary */
@media (prefers-reduced-motion: reduce) {
  .wallet-page .secondary-btn, .wallet-page .secondary-btn::after { transition:none !important; animation:none !important; }
  .wallet-page .secondary-btn:hover, .wallet-page .secondary-btn:active { transform:none; box-shadow:none; }
}

/* Form grid */
.wallet-page .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:end; }
.wallet-page .form-group { display:flex; flex-direction:column; gap:8px; }
.wallet-page .form-group label { font-size:.9rem; opacity:.95; }
.wallet-page .input-field {
  padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02); color:var(--color-text); font-weight:600; outline:none;
}
.wallet-page .input-field::placeholder { opacity:.6; font-weight:500; }

/* Inline form */
.wallet-page .inline-form { display:inline-flex; gap:10px; align-items:center; }

/* Deposit row */
.wallet-page .deposit-row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.wallet-page .deposit-addr {
  background: rgba(0,0,0,0.12); padding:10px 12px; border-radius:10px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, "Roboto Mono", monospace; font-size:.92rem; user-select:all;
}

/* Table wrapper */
.wallet-page .table-wrapper { margin-top:10px; overflow:auto; border-radius:10px; border:1px solid rgba(255,255,255,0.03); }
.wallet-page .tx-table { width:100%; border-collapse:collapse; min-width:900px; }
.wallet-page .tx-table th, .wallet-page .tx-table td {
  text-align:left; padding:10px 12px; border-bottom:1px dashed rgba(255,255,255,0.03); font-size:.86rem;
}
.wallet-page .tx-table thead th { position:sticky; top:0; background:rgba(0,0,0,0.06); font-weight:700; }
.wallet-page .tx-table tbody tr:hover { background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); }

/* Typography */
.wallet-page .mono { font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, "Roboto Mono", monospace; font-size:.84rem; }
.wallet-page .small { font-size:.82rem; }
.wallet-page .muted { opacity:.8; }

/* ----------------------------
   Transaction visuals (colors + badges)
   Works when rows/cells have classes:
     <tr class="tx-row deposit"> or withdraw
     status cell becomes: <span class="status-badge status-done|status-pending">
   If not, include the JS provided to auto-annotate the DOM.
   ---------------------------- */

/* ---- Wallet: transaction highlights & badges (falla segura) ---- */
.wallet-page .tx-table .tx-row.deposit { background: rgba(34,197,94,0.03) !important; }
.wallet-page .tx-table .tx-row.withdraw { background: rgba(239,68,68,0.03) !important; }

/* Spanish variants just in case */
.wallet-page .tx-table .tx-row.retiro { background: rgba(239,68,68,0.03) !important; }
.wallet-page .tx-table .tx-row.deposito { background: rgba(34,197,94,0.03) !important; }

/* Type cell + icons */
.wallet-page .tx-table .tx-type { font-weight:700; display:inline-flex; align-items:center; gap:8px; }
.wallet-page .tx-table .tx-type.deposit,
.wallet-page .tx-table .tx-type.deposito { color: rgba(34,197,94,0.95) !important; }
.wallet-page .tx-table .tx-type.deposit::before,
.wallet-page .tx-table .tx-type.deposito::before { content:"⬆"; display:inline-block; color: rgba(34,197,94,0.95); transform: translateY(-1px); }

.wallet-page .tx-table .tx-type.withdraw,
.wallet-page .tx-table .tx-type.retiro { color: rgba(239,68,68,0.95) !important; }
.wallet-page .tx-table .tx-type.withdraw::before,
.wallet-page .tx-table .tx-type.retiro::before { content:"⬇"; display:inline-block; color: rgba(239,68,68,0.95); transform: translateY(-1px); }

/* Badges */
.wallet-page .tx-table .status-badge {
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px 10px; border-radius:999px; font-weight:700; font-size:.78rem;
  text-transform:capitalize; letter-spacing:.4px; min-width:86px; text-align:center;
}

/* Done (teal-ish) */
.wallet-page .tx-table .status-badge.status-done,
.wallet-page .tx-table .status-badge.status-completado {
  color: rgba(6,95,70,1) !important;
  background: rgba(16,185,129,0.08) !important;
  border: 1px solid rgba(16,185,129,0.14) !important;
  box-shadow: 0 6px 18px rgba(16,185,129,0.03) !important;
}

/* Pending (orange/red) */
.wallet-page .tx-table .status-badge.status-pending,
.wallet-page .tx-table .status-badge.status-pendiente {
  color: rgba(185,28,28,1) !important;
  background: rgba(249,115,22,0.06) !important;
  border: 1px solid rgba(249,115,22,0.12) !important;
  box-shadow: 0 6px 18px rgba(249,115,22,0.03) !important;
}

/* Failed */
.wallet-page .tx-table .status-badge.status-failed {
  color: rgba(120,20,20,1) !important;
  background: rgba(120,20,20,0.06) !important;
  border: 1px solid rgba(120,20,20,0.12) !important;
}

/* Fallback: si JS no envolvió status, aplica algo al TD */
.wallet-page .tx-table td:nth-child(7) {
  padding: 8px 12px;
  font-weight:700;
  color: rgba(255,255,255,0.95);
}

/* Asegura que la tabla no oculte sombras y que las filas respondan */
.wallet-page .tx-table tbody tr:hover { background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); }

/* -------------------------
   Flash / Notificaciones
   ------------------------- */
.flash {
  display: inline-block;
  max-width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  margin-bottom: 10px;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
  border: 1px solid transparent;
  color: #0b1220;
  background: #f8fafb;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 240ms ease, transform 240ms cubic-bezier(.2,.9,.2,1);
}

/* success (verde) */
.flash-success {
  background: linear-gradient(180deg, #f0fff4 0%, #e6ffed 100%);
  border-color: #b7f3c7;
  color: #064e3b; /* verde oscuro legible */
  box-shadow: 0 6px 18px rgba(6, 95, 49, 0.06);
}

/* error (rojo) */
.flash-error {
  background: linear-gradient(180deg, #fff7f7 0%, #fff1f0 100%);
  border-color: #f3b1b1;
  color: #6b0710; /* rojo oscuro legible */
  box-shadow: 0 6px 18px rgba(107, 7, 16, 0.04);
}

/* pequeña animación appearing */
.flash.enter {
  opacity: 0;
  transform: translateY(-6px) scale(.995);
}
.flash.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* auto-hide helper: reduce opacity then remove visually */
.flash.hidden {
  opacity: 0 !important;
  transform: translateY(-6px) scale(.995) !important;
  pointer-events: none;
}

/* -------------------------
   Notificaciones dinámicas (transferMsg / p2p)
   ------------------------- */
.p2p-transfer-msg,
#transferMsg,
#withdrawMsg {
  min-height: 1.6em;
  padding: 6px 10px;
  border-radius: 8px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: opacity 220ms ease, transform 220ms cubic-bezier(.2,.9,.2,1);
  opacity: 0;
  transform: translateY(-4px);
}

/* visible state (JS debe añadir .visible o data-type) */
.p2p-transfer-msg.visible,
#transferMsg.visible,
#withdrawMsg.visible {
  opacity: 1;
  transform: translateY(0);
}

/* types via data-type attribute (set in JS: container.dataset.type = 'success'|'error'|'info') */
.p2p-transfer-msg[data-type="success"],
#transferMsg[data-type="success"],
#withdrawMsg[data-type="success"] {
  background: #e6ffed;
  color: #065f31;
  border: 1px solid #b7f3c7;
  box-shadow: 0 6px 18px rgba(6,95,49,0.06);
}

.p2p-transfer-msg[data-type="error"],
#transferMsg[data-type="error"],
#withdrawMsg[data-type="error"] {
  background: #fff1f0;
  color: #6b0710;
  border: 1px solid #f3b1b1;
  box-shadow: 0 6px 18px rgba(107,7,16,0.04);
}

.p2p-transfer-msg[data-type="info"],
#transferMsg[data-type="info"],
#withdrawMsg[data-type="info"] {
  background: #eef2ff;
  color: #1e3a8a;
  border: 1px solid #c7d2fe;
  box-shadow: 0 6px 18px rgba(30,58,138,0.04);
}

/* iconos pequeños (si quieres usar pseudo-elementos) */
.p2p-transfer-msg::before,
.flash::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  margin-right: 8px;
  flex: 0 0 14px;
}
.p2p-transfer-msg[data-type="success"]::before,
.flash-success::before { background: linear-gradient(90deg, #16a34a, #059669); }
.p2p-transfer-msg[data-type="error"]::before,
.flash-error::before { background: linear-gradient(90deg, #ef4444, #dc2626); }
.p2p-transfer-msg[data-type="info"]::before { background: linear-gradient(90deg, #3b82f6, #2563eb); }

/* -------------------------
   Status badges (tx table)
   ------------------------- */
.status-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}

.status-badge.status-pending { background: #fff7ed; color: #7c2d12; border-color: #fbd38d; }
.status-badge.status-done    { background: #ecfdf5; color: #065f46; border-color: #86efac; }
.status-badge.status-failed  { background: #fff1f2; color: #7f1d1d; border-color: #fca5a5; }
.status-badge.status-unknown { background: #f3f4f6; color: #111827; border-color: #e5e7eb; }

/* -------------------------
   Responsive tweaks
   ------------------------- */
@media (max-width: 640px) {
  .flash { font-size: .9rem; padding: 9px 12px; }
  .p2p-transfer-msg { font-size: .92rem; min-width: 160px; }
}

/* ----------------------------
   Quantity controls (modern +/-)
   Use markup:
     <div class="qty-control">
       <button class="qty-btn qty-decrease">−</button>
       <input class="input-field qty-input" type="number" ... />
       <button class="qty-btn qty-increase">+</button>
     </div>
   ---------------------------- */

.wallet-page .qty-control {
  display:inline-flex; align-items:center; gap:8px; background: rgba(255,255,255,0.02);
  padding:6px; border-radius:12px; border:1px solid rgba(255,255,255,0.04);
  box-shadow: 0 6px 18px rgba(6,8,20,0.12);
}

.wallet-page .qty-btn {
  display:inline-grid; place-items:center; width:40px; height:38px; border-radius:10px; border:none;
  cursor:pointer; font-size:1.05rem; font-weight:800; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  color:var(--color-text); box-shadow: 0 6px 14px rgba(12,12,30,0.18);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.wallet-page .qty-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(12,12,30,0.22); }
.wallet-page .qty-btn:active { transform: translateY(0); box-shadow: inset 0 3px 8px rgba(0,0,0,0.18); }

/* colors for +/- */
.wallet-page .qty-btn.qty-increase { color: rgba(34,197,94,0.95); background: linear-gradient(180deg, rgba(34,197,94,0.06), rgba(34,197,94,0.02)); }
.wallet-page .qty-btn.qty-decrease { color: rgba(239,68,68,0.95); background: linear-gradient(180deg, rgba(239,68,68,0.04), rgba(239,68,68,0.01)); }

.wallet-page .qty-input { width:120px; padding:8px 10px; border-radius:10px; border:1px solid rgba(255,255,255,0.04);
  background:transparent; color:var(--color-text); text-align:center; font-weight:800;
  -moz-appearance:textfield; appearance:textfield;
}

/* hide native spinners */
.wallet-page .qty-input::-webkit-outer-spin-button,
.wallet-page .qty-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.wallet-page .qty-input[type=number] { -moz-appearance:textfield; }

/* Responsive */
@media (max-width:880px) {
  .wallet-page { grid-template-columns:1fr; padding:16px; gap:16px; }
  .wallet-page .wallet-sidebar { position:relative; top:0; display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:12px; }
  .wallet-page .sidebar-actions { flex-direction:row; overflow:auto; padding:6px 0; }
  .wallet-page .form-grid { grid-template-columns:1fr; }
  .wallet-page .tx-table { min-width:700px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .wallet-page * { transition:none !important; animation:none !important; }
  .wallet-page .qty-btn { transform:none !important; box-shadow:none !important; }
  .wallet-page .secondary-btn::after { display:none !important; }
}


/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.amount-wrapper {
  display: flex;
  align-items: center;
  gap: 5px;
}

.amount-wrapper input {
  width: 100px;
  text-align: center;
  font-size: 16px;
  padding: 6px 10px;
}

.amount-wrapper button {
  border: 1px solid #ccc;
  background: var(--color-card);
  color: #ffffff; /* ⚡ ahora sí blanco */
  font-size: 18px;
  font-weight: bold;
  padding: 4px 10px;
  cursor: pointer;
  line-height: 1;
  border-radius: 4px;
  transition: background 0.2s, transform 0.1s;
}

.amount-wrapper button:hover {
  background: var(--color-accent);
}

.amount-wrapper button:active {
  transform: scale(0.95);
}

/* Parpadeo suave para alertas */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.transfer-warning {
  color: #d9534f; /* rojo alerta */
  font-weight: bold;
  animation: blink 1.2s infinite;
  margin-bottom: 10px;
}


/* Transfer message component */
:root{
  --msg-padding: 8px 12px;
  --msg-radius: 10px;
  --msg-font: 14px;
  --msg-transition: 220ms cubic-bezier(.2,.9,.3,1);
  --msg-shadow: 0 6px 18px rgba(16,24,40,0.06);
}

/* contenedor base (hidden por defecto) */
.transfer-msg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: var(--msg-padding);
  border-radius: var(--msg-radius);
  font-size: var(--msg-font);
  line-height: 1;
  min-height: 36px;
  box-shadow: var(--msg-shadow);
  transition: transform var(--msg-transition), opacity var(--msg-transition),
              background-color var(--msg-transition), border-color var(--msg-transition);
  opacity: 0;
  transform: translateY(-6px) scale(.995);
  pointer-events: none; /* evitar foco accidental cuando está oculto */
  border: 1px solid transparent;
}

/* cuando visible */
.transfer-msg.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* icono */
.transfer-msg__icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 20px;
  font-size: 14px;
}

/* texto */
.transfer-msg__text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 360px;
}

/* variantes */
.transfer-msg--success {
  background: linear-gradient(180deg, rgba(16,185,129,0.08), rgba(16,185,129,0.03));
  color: #065f46;
  border-color: rgba(16,185,129,0.18);
}

.transfer-msg--error {
  background: linear-gradient(180deg, rgba(239,68,68,0.06), rgba(239,68,68,0.02));
  color: #7f1d1d;
  border-color: rgba(239,68,68,0.14);
}

.transfer-msg--info {
  background: linear-gradient(180deg, rgba(59,130,246,0.06), rgba(59,130,246,0.02));
  color: #1e40af;
  border-color: rgba(59,130,246,0.14);
}

/* pequeño botón de cerrar opcional (no obligatorio) */
.transfer-msg__close {
  margin-left: 6px;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 14px;
  padding: 4px;
  border-radius: 6px;
}
.transfer-msg__close:hover { background: rgba(0,0,0,0.04); }
/* ---------------------------
   P2P suggestions dropdown
   --------------------------- */

.p2p-suggestions-floating {
  position: absolute;            /* JS posiciona left/top */
  z-index: 1400;
  min-width: 260px;
  max-width: 420px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--color-card, #ffffff);
  color: var(--color-text, #0f172a);
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgba(15,23,42,0.08), 0 4px 12px rgba(2,6,23,0.04);
  border: 1px solid rgba(15,23,42,0.06);
  padding: 6px;
  display: none;                 /* JS toggles .open */
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* visible state */
.p2p-suggestions-floating.open {
  display: block;
}

/* row */
.p2p-suggestions-floating .suggest-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  background: transparent;
  border: none;
  padding: 10px;
  cursor: pointer;
  text-align: left;
  border-radius: 6px;
  transition: background 120ms ease, transform 80ms ease;
}

/* hover / focus */
.p2p-suggestions-floating .suggest-row:hover,
.p2p-suggestions-floating .suggest-row:focus {
  background: linear-gradient(90deg, rgba(0,0,0,0.02), rgba(0,0,0,0.01));
  transform: translateY(-1px);
  outline: none;
}

/* top line */
.p2p-suggestions-floating .s-top {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap: 8px;
}

.p2p-suggestions-floating .s-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-text, #0f172a);
}

.p2p-suggestions-floating .s-id {
  font-size: 0.8rem;
  color: var(--color-muted, #6b7280);
}

/* bottom line */
.p2p-suggestions-floating .s-bottom {
  margin-top: 6px;
  font-size: 0.85rem;
  color: var(--color-muted-2, #374151);
}

/* empty state */
.p2p-suggestions-floating .suggest-empty {
  padding: 10px;
  color: var(--color-muted, #6b7280);
  text-align: center;
  font-size: 0.95rem;
}

/* Transfer message area (right of button) */
.p2p-transfer-msg {
  display: inline-block;
  min-width: 220px;
  margin-left: 10px;
  padding: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  font-size: 0.95rem;
  transition: all 160ms ease;
  line-height: 1.2;
  vertical-align: middle;
}

/* visible */
.p2p-transfer-msg.visible[data-type="success"] {
  padding: 8px 12px;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(220,250,237,0.9), rgba(240,255,250,0.9));
  color: #047857;
  border: 1px solid rgba(4,120,87,0.12);
}

.p2p-transfer-msg.visible[data-type="error"] {
  padding: 8px 12px;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(255,240,240,0.98), rgba(255,245,245,0.98));
  color: #991b1b;
  border: 1px solid rgba(220,38,38,0.10);
}

.p2p-transfer-msg.visible[data-type="info"] {
  padding: 6px 10px;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text, #111827);
}

/* dark theme support */
body.dark .p2p-suggestions-floating {
  background: #071126;
  color: #e6eef8;
  border: 1px solid rgba(255,255,255,0.04);
}

body.dark .p2p-suggestions-floating .s-bottom,
body.dark .p2p-suggestions-floating .s-id {
  color: rgba(230,238,248,0.8);
}

/* Sidebar vertical + botones compactos para móvil (<=420px)
   Reemplaza las reglas móviles anteriores por este bloque.
*/
@media (max-width:420px) {

  /* Contenedor principal: single column */
  .wallet-page {
    display: block !important;
    padding: 12px !important;
    gap: 10px !important;
    font-size: 15px !important;
  }

  /* Sidebar: columna vertical (Mi Wallet -> Balance -> Botones) */
  .wallet-page .wallet-sidebar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    padding: 12px !important;
    border-radius: 12px !important;
    position: relative !important;
    width: 100% !important;
    box-shadow: none !important;
  }

  /* Top (logo + optional small info) */
  .wallet-page .wallet-sidebar .sidebar-top {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    align-items: flex-start !important;
    width: 100% !important;
  }

  .wallet-page .wallet-sidebar .logo {
    font-size: 1.05rem !important;
    margin: 0 !important;
    line-height: 1 !important;
  }

  /* Balance debajo del logo */
  .wallet-page .wallet-sidebar .balance-label {
    display: block !important;
    font-size: 0.86rem !important;
    opacity: 0.9 !important;
    margin: 0 !important;
  }
  .wallet-page .wallet-sidebar .balance-value {
    font-size: 1rem !important;
    font-weight: 800 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }

  /* Acciones: columna, full-width, compact (stacked) */
  .wallet-page .sidebar-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Botones compactos y full-width en la columna */
  .wallet-page .sidebar-actions .sidebar-btn {
    width: 100% !important;            /* stacked full-width */
    min-width: 0 !important;
    min-height: 34px !important;       /* compacto pero tocable */
    padding: 6px 8px !important;
    font-size: 0.90rem !important;     /* reducido pero legible */
    border-radius: 8px !important;
    text-align: center !important;
    
  }

  /* Version aún más compacta (opcional futura): 
     - Si quieres aún más pequeño, cambia min-height a 30px y font-size a 0.75rem */
  


  /* Contenido principal: arrancar debajo del sidebar */
  .wallet-page .wallet-content {
    margin-top: 8px !important;
  }

  /* Mantener visibles las secciones (fallback) */
  #depositContainer[style*="display:none"] {
    display: block !important;
  }

  /* Accesibilidad y hit targets */
  button, .sidebar-btn {
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
  }

  /* Espacio inferior para teclado virtual */
  body { padding-bottom: 16px !important; }
}

@media (max-width:420px) {
  /* Transfer warning: un poco más pequeño y compacto en mobile */
  .wallet-page .transfer-warning {
    font-size: 0.80rem !important;    /* ligeramente más pequeño */
    line-height: 1.12 !important;     /* mejor lectura en líneas cortas */
    margin-bottom: 8px !important;    /* espacio controlado debajo */
    white-space: normal !important;   /* permite salto de línea si hace falta */
  }

  /* Si quieres también reducir el emoji/glyph visualmente: */
  .wallet-page .transfer-warning { font-variant-ligatures: none; }
  .wallet-page .transfer-warning::first-letter { /* opcional, no obligatorio */
    /* no cambiamos nada aquí; lo dejo para que no rompa el flow */
  }
}



/* ======= FIX definitivo: tabla móvil alineada + evitar romper footer/iconos ======= */
@media (max-width:420px) {
  /* 1) Header usando grid en vez de font-size:0 — evita efectos colaterales */
  .wallet-page .tx-table {
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    font-size: 0.93rem !important; /* tamaño normal para la tabla */
  }

  /* Thead: layout grid con 3 columnas (coincide con los TD visibles) */
  .wallet-page .tx-table thead {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: var(--color-card, transparent) !important; /* franja visual */
    margin-bottom: 6px !important;
  }

  .wallet-page .tx-table thead tr {
    display: grid !important;
    grid-template-columns: 90px  100px 110px !important; /* Tipo | Monto | Estado */
    gap: 0 !important;
    align-items: center !important;
    box-sizing: border-box !important;
    padding: 6px 0 !important;
  }

  .wallet-page .tx-table thead th {
    display: block !important;
    padding: 6px 8px !important;
    box-sizing: border-box !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 0.92rem !important; /* restaura tamaño real del texto del header */
  }

  /* Mostrar solo los headers que queremos */
  .wallet-page .tx-table thead th { display: none !important; }
  .wallet-page .tx-table thead th:nth-child(2) { display: block !important; justify-self: start !important; }
  .wallet-page .tx-table thead th:nth-child(3) { display: block !important; justify-self: end !important; }
  .wallet-page .tx-table thead th:nth-child(7) { display: block !important; justify-self: end !important; }

  /* CUERPO: mantener semántica y usar mismo grid widths para celdas visibles */
  .wallet-page .tx-table tbody { display: table-row-group !important; width: 100% !important; }

  /* uniformizar padding y box-sizing */
  .wallet-page .tx-table tbody tr td {
    box-sizing: border-box !important;
    padding: 8px 8px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    vertical-align: middle !important;
  }

  /* ocultar columnas extras (1,4,5,6,8) */
  .wallet-page .tx-table tbody tr td:nth-child(1),
  .wallet-page .tx-table tbody tr td:nth-child(4),
  .wallet-page .tx-table tbody tr td:nth-child(5),
  .wallet-page .tx-table tbody tr td:nth-child(6),
  .wallet-page .tx-table tbody tr td:nth-child(8) {
    display: none !important;
    width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  /* Forzar que las 3 columnas visibles usen el mismo ancho que el header GRID */
  .wallet-page .tx-table tbody tr td:nth-child(2) {
    display: table-cell !important;
    width: width: 90px !important; !important;
    text-align: left !important;
    padding-left: 10px !important;
  }
  .wallet-page .tx-table tbody tr td:nth-child(3) {
    display: table-cell !important;
    width: 100px !important;
    text-align: right !important;
    padding-right: 8px !important;
    font-family: ui-monospace, "Roboto Mono", monospace !important;
    font-weight: 800 !important;
  }
  .wallet-page .tx-table tbody tr td:nth-child(7) {
    display: table-cell !important;
    width: 150px !important;
    text-align: right !important;
    padding-right: 8px !important;
  }

  /* Badge base */
  .wallet-page .tx-table .status-badge {
    display:inline-block !important;
    padding:6px 8px !important;
    border-radius:999px !important;
    font-size:0.78rem !important;
    font-weight:700 !important;
    background: rgba(255,255,255,0.02) !important;
  }

  /* separador filas */
  .wallet-page .tx-table tbody tr { border-bottom: 1px solid rgba(255,255,255,0.04) !important; }

  /* fix para evitar overflow por contenido largo: truncar y evitar que estire */
  .wallet-page .tx-table tbody tr td * { max-width: 100% !important; box-sizing: border-box !important; }

  /* ============ OVERRIDES para footer / iconos que hayan sido afectadas por reglas previas ============ */
  /* Restauramos tamaño de iconos y footer dentro de .wallet-page (no tocamos iconos globales fuera del área) */
  .wallet-page footer,
  .wallet-page .footer,
  .wallet-page .site-footer,
  .wallet-page .icon,
  .wallet-page i,
  .wallet-page svg,
  .wallet-page .btn-icon,
  .wallet-page .fa,
  .wallet-page .material-icons {
    font-size: inherit !important;
    width: auto !important;
    height: auto !important;
    line-height: inherit !important;
  }

  /* Si algún elemento quedó con font-size:0, forzamos restauración solo fuera de la tabla */
  .wallet-page :not(.tx-table) { font-size: inherit !important; }

  /* último recurso visual: si hay overflow residual, habilita scroll horizontal limitado */
  /* .wallet-page .table-wrapper { overflow-x: auto !important; -webkit-overflow-scrolling: touch; } */
}




/************************************************************************************************
*************************************************************************************************
************************************************************************************************/
/* public/css/admin.css */

/* ===========================
   Panel de Administración “Visionary” sin gradiente, usando color naranja
   =========================== */



/* Contenedor principal */
.admin-dashboard {
  background: var(--color-card);
  color: var(--color-text);
  border-radius: 0.75rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  padding: 2rem;
  margin: 2rem auto;
  max-width: 1000px;
}

/* Título y bienvenida */
.admin-dashboard h1 {
  font-size: 2rem;
  color: var(--color-text);
  margin-bottom: 0.5rem;
  text-align: center;
}
.admin-dashboard p {
  text-align: center;
  margin-bottom: 1.5rem;
}

/* Secciones */
.admin-section {
  margin-top: 2rem;
}
.admin-section h2 {
  font-size: 1.5rem;
  color: var(--color-text);
  margin-bottom: 1rem;
  border-bottom: 2px solid rgba(255,255,255,0.1);
  padding-bottom: 0.25rem;
}

/* Estadísticas rápidas */
.stats-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.stats-list li {
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

/* Enlaces rápidos */
.links-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.links-list li {
  margin-bottom: 0.5rem;
}
.links-list a {
  color: var(--color-text);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s;
}
.links-list a:hover {
  color: var(--color-accent);
}

/* Tabla de tokens */
.table-wrapper {
  overflow-x: auto;
  margin-top: 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  background: var(--color-bg);
}
.tokens-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
}
.tokens-table thead {
  background: var(--color-accent); 
}
.tokens-table thead th {
  padding: 0.75rem;
  color: var(--color-text);
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}
.tokens-table tbody tr {
  border-bottom: 1px solid #374151;
}
.tokens-table tbody tr:hover {
  background: rgba(255,255,255,0.05);
}
.tokens-table td {
  padding: 0.75rem;
  color: var(--color-text);
  white-space: nowrap;
  font-size: 0.95rem;
}
.empty-row {
  text-align: center;
  font-style: italic;
}

/* Input de enlace y botón copiar */
.copy-container {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.copy-container input {
  background: var(--color-emphasis);
  color: var(--color-text);
  border: 1px solid #374151;
  border-radius: 0.375rem;
  padding: 0.5rem 1rem;       /* más padding horizontal */
  font-size: 0.9rem;
  width: auto;               /* se ajusta al contenido */
  min-width: 100%;           /* al menos el 100% de su contenedor */
  transition: background 0.2s, border-color 0.2s;
}

.copy-container button {
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: 0.375rem;
  padding: 0.5rem 1rem;       /* coincide con el input */
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.2s;
}

.copy-container input:focus {
  outline: none;
  background: rgba(255,255,255,0.05);
  border-color: var(--color-primary);
}

.copy-container button:hover {
  background: var(--color-primary-dark);
}

.copy-container button {
  background: var(--color-accent);
  color: var(--color-text);
  padding: 0.4rem 0.8rem;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  font-weight: 600;
  transition: opacity 0.2s;
}
.copy-container button:hover {
  opacity: 0.9;
}

/* Formulario generar token */
.generate-form {
  margin-top: 1rem;
}
.generate-form button {
  background: var(--color-emphasis);
  color: var(--color-text);
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  font-weight: 600;
  transition: opacity 0.2s;
}
.generate-form button:hover {
  opacity: 0.9;
}

/* Responsive móvil */
@media (max-width: 600px) {
  .admin-dashboard {
    padding: 1rem;
    margin: 1rem;
  }
  .admin-dashboard h1 {
    font-size: 1.5rem;
  }
  .admin-section h2 {
    font-size: 1.25rem;
  }
  .table-wrapper {
    margin-top: 0.5rem;
  }
  .tokens-table {
    min-width: unset;
  }
  .tokens-table thead th,
  .tokens-table td {
    padding: 0.5rem;
    font-size: 0.85rem;
  }
  .copy-container {
    flex-direction: column;
    align-items: stretch;
  }
  .copy-container button {
    width: 100%;
  }
  .generate-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .generate-form button {
    width: 100%;
    padding: 0.5rem 1rem;
  }
}
input[type="text"]::-webkit-clear-button,
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
  display: none;
}


/**********************************************************************************************
***********************************************************************************************
**********************************************************************************************/

/* public/css/admin-others.css */

/* ===========================
  
   Incluye: Precios de campaña, Revisión de clics, Ajustes de comisión (formulario y lista), Bolsa de comisiones.
   =========================== */


/* Estilos comunes */
.admin-page {
  background: var(--color-bg);
  color: var(--color-text);
  padding: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}
.admin-page h1 {
  font-size: 1.75rem;
  color: var(--color-accent);
  text-align: center;
  margin-bottom: 1.5rem;
}

/* Botones primarios */
.primary-btn,
.primary-btn1 {
  display: inline-block;
  background: var(--gradient);
  color: var(--color-text);
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s, transform 0.1s;
  margin-bottom: 1rem;
}
.primary-btn:hover,
.primary-btn1:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

/* Botones secundarios / alertas */
.alert {
  padding: 0.75rem 1rem;
  border-radius: 0.375rem;
  margin-bottom: 1rem;
}
.alert-error {
  background: #fdecea;
  color: #721c24;
}
.alert-success {
  background: #d4edda;
  color: #155724;
}

/* Tablas generales: estilo de contenedor */
.admin-page table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-card);
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  margin-bottom: 1.5rem;
}
.admin-page thead {
  background: var(--color-accent);
}
.admin-page thead th {
  padding: 0.75rem 1rem;
  color: var(--color-text);
  font-weight: 600;
  text-align: left;
  font-size: 0.95rem;
  border-bottom: 1px solid #374151;
}
.admin-page tbody tr {
  border-bottom: 1px solid #374151;
}
.admin-page tbody tr:last-child {
  border-bottom: none;
}
.admin-page tbody tr:hover {
  background: rgba(255,255,255,0.05);
}
.admin-page td {
  padding: 0.75rem 1rem;
  color: var(--color-text);
  font-size: 0.9rem;
  vertical-align: middle;
  white-space: nowrap;
}

/* Botones de acciones en tablas */
.btn-edit,
.btn-delete {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  border-radius: 0.375rem;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s, transform 0.1s;
  margin-right: 0.5rem;
}
.btn-edit {
  background: var(--color-primary);
  color: var(--color-text);
}
.btn-edit:hover {
  background: darken(var(--color-primary), 10%);
  transform: translateY(-1px);
}
.btn-delete {
  background: var(--color-accent);
  color: var(--color-text);
  border: none;
  cursor: pointer;
}
.btn-delete:hover {
  background: darken(var(--color-accent), 10%);
  transform: translateY(-1px);
}

/* ===========================
   1) Precios de campaña (lista)
   =========================== */
.rates-table {
  /* Aplica estilos de tabla general */
}
/* Para móvil: convertir filas en cards */
@media (max-width: 600px) {
  .admin-page table.rates-table {
    border: none;
  }
  .admin-page table.rates-table thead {
    display: none;
  }
  .admin-page table.rates-table,
  .admin-page table.rates-table tbody,
  .admin-page table.rates-table tr,
  .admin-page table.rates-table td {
    display: block;
    width: 100%;
  }
  .admin-page table.rates-table tr {
    margin-bottom: 1rem;
    background: var(--color-card);
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    padding: 0.5rem 0;
  }
  .admin-page table.rates-table td {
    position: relative;
    padding: 0.5rem 1rem 0.5rem 50%;
    text-align: left;
    white-space: normal;
  }
  .admin-page table.rates-table td::before {
    content: attr(data-label);
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 600;
    color: var(--color-accent);
  }
  .admin-page .primary-btn1 {
    width: 100%;
    box-sizing: border-box;
  }
}

/* ===========================
   2) Revisión de clics por red
   =========================== */
.clicks-log-page h1 {
  margin-bottom: 1rem;
}
/* Opcional: asignar clase clicks-table en EJS */
.clicks-table thead th,
.clicks-table td {}

/* Móvil: filas como cards */
@media (max-width: 600px) {
  .admin-page table.clicks-table {
    border: none;
  }
  .admin-page table.clicks-table thead {
    display: none;
  }
  .admin-page table.clicks-table,
  .admin-page table.clicks-table tbody,
  .admin-page table.clicks-table tr,
  .admin-page table.clicks-table td {
    display: block;
    width: 100%;
  }
  .admin-page table.clicks-table tr {
    margin-bottom: 1rem;
    background: var(--color-card);
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    padding: 0.5rem 0;
  }
  .admin-page table.clicks-table td {
    position: relative;
    padding: 0.5rem 1rem 0.5rem 50%;
    text-align: left;
    white-space: normal;
  }
  .admin-page table.clicks-table td::before {
    content: attr(data-label);
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 600;
    color: var(--color-accent);
  }
}

/* ===========================
   3) Editar Ajustes de Comisión (formulario)
   =========================== */
.commissions-form-page h1 {
  margin-bottom: 1rem;
  text-align: center;
}
.commissions-form-page form {
  background: var(--color-card);
  padding: 1.5rem;
  border-radius: 0.75rem;
  max-width: 500px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.commissions-form-page form label {
  font-weight: 600;
  color: var(--color-text);
}
.commissions-form-page form input[type="number"] {
  padding: 0.75rem;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid #374151;
  border-radius: 0.375rem;
  transition: background 0.2s, border-color 0.2s;
}
.commissions-form-page form input[type="number"]:focus {
  outline: none;
  background: rgba(255,255,255,0.05);
  border-color: var(--color-primary);
}
.commissions-form-page #sumError {
  margin-top: -0.5rem;
}
.commissions-form-page button.primary-btn {
  align-self: center;
  margin-top: 1rem;
}

/* Responsive móvil */
@media (max-width: 600px) {
  .commissions-form-page form {
    padding: 1rem;
    gap: 0.75rem;
  }
  .commissions-form-page form input[type="number"] {
    padding: 0.6rem;
    font-size: 0.9rem;
  }
  .commissions-form-page button.primary-btn {
    width: 100%;
    padding: 0.6rem;
    font-size: 0.9rem;
  }
}

/* ===========================
   4) Ajustes de Comisiones (lista)
   =========================== */
.commissions-list-page h1 {
  margin-bottom: 1rem;
  text-align: center;
}
.commissions-list-page table {
  /* usa estilos de tabla general */
}
/* Móvil: fila única como card */
@media (max-width: 600px) {
  .admin-page table {
    border: none;
  }
  .admin-page thead {
    display: none;
  }
  .admin-page,
  .admin-page tbody,
  .admin-page tr,
  .admin-page td {
    display: block;
    width: 100%;
  }
  .admin-page tr {
    margin-bottom: 1rem;
    background: var(--color-card);
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    padding: 0.5rem 0;
  }
  .admin-page td {
    position: relative;
    padding: 0.5rem 1rem 0.5rem 50%;
    text-align: left;
    white-space: normal;
  }
  /* data-label en EJS: "Venta directa", etc. */
  .admin-page td::before {
    content: attr(data-label);
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 600;
    color: var(--color-accent);
  }
  .commissions-list-page button.primary-btn {
    width: 100%;
    padding: 0.6rem;
  }
}

/* ===========================
   5) Bolsa de Comisiones (pool)
   =========================== */
.pool-page h1,
.pool-page p {
  text-align: center;
}
.pool-page h2 {
  margin-top: 1.5rem;
  color: var(--color-text);
}
.pool-page table {
  /* usa estilos de tabla general */
}
/* Estilo de monto en celdas: inline style en EJS puede mantenerse o usar clases */
.pool-page td.negative {
  color: #c0392b;
}
.pool-page td.positive {
  color: #27ae60;
}
/* Móvil: similar a anteriores */
@media (max-width: 600px) {
  .pool-page table {
    border: none;
  }
  .pool-page thead {
    display: none;
  }
  .pool-page,
  .pool-page tbody,
  .pool-page tr,
  .pool-page td {
    display: block;
    width: 100%;
  }
  .pool-page tr {
    margin-bottom: 1rem;
    background: var(--color-card);
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    padding: 0.5rem 0;
  }
  .pool-page td {
    position: relative;
    padding: 0.5rem 1rem 0.5rem 50%;
    text-align: left;
    white-space: normal;
  }
  .pool-page td::before {
    content: attr(data-label);
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 600;
    color: var(--color-accent);
  }
}



/* ===========================
   Notas:
   - Para que en móvil aparezcan etiquetas, en cada <td> de EJS añade data-label="NombreColumna".
     Ejemplo en Precios de campaña:
       <td data-label="Días"><%= r.days %></td>
       <td data-label="Precio">$<%= r.price %></td>
       <td data-label="Acciones">…</td>
   - En Revisión de clics, asigna clase clicks-table al <table> y en cada <td> data-label: 
       data-label="Usuario", data-label="Video ID", etc.
   - En Ajustes de Comisiones lista: <td data-label="Venta directa">…</td>, etc.
   - En Bolsa, <td data-label="Fecha">…, data-label="Tipo", data-label="Monto", data-label="Descripción".
   - Asegura que este CSS se cargue después de otros estilos globales.
   - Define bien las variables CSS en :root para colores coherentes.
   =========================== */




/************************************************************************************************
*************************************************************************************************
************************************************************************************************/

/* public/css/footer.css */

/* ===========================
   Estilos “Visionary” para el footer
   =========================== */

/* Asegúrate de incluir en tu layout:
   <link rel="stylesheet" href="/css/footer.css">
   y tener <meta name="viewport" ...> para responsivo.
*/

.site-footer {
  background: var(--color-card);
  color: var(--color-text);
  padding: 2rem 1rem;
  margin-top: auto;
}
.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.footer-copy {
  font-size: 0.9rem;
  color: var(--color-text);
  margin: 0;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}
.footer-link {
  display: inline-flex;
  align-items: center;
  color: var(--color-text);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  transition: color 0.2s;
}
.footer-link:hover {
  color: var(--color-text);
}

/* Icono de Instagram */
.footer-instagram .instagram-icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
  fill: var(--color-text);
  transition: fill 0.2s;
}
.footer-instagram:hover .instagram-icon {
  fill: var(--color-accent);
}

/* Separador opcional entre links (si quieres) */
/* .footer-links::before {
  content: "";
  flex-grow: 1;
} */

/* Responsive móvil */
@media (max-width: 600px) {
  .footer-content {
    flex-direction: column;
    text-align: center;
  }
  .footer-links {
    justify-content: center;
  }
}
*********************************************************************************************************/
*********************************************************************************************************/
*********************************************************************************************************/

/* estilos para la página de Términos y Condiciones */
.terms-page {
  background: var(--color-accent)!important;                      /* Fondo claro para toda la página */
  padding: 2rem;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #333;                               /* Texto principal en gris oscuro */
}

.terms-container {
  max-width: 800px;
  margin: 0 auto;
  background: var(--color-accent)!important;                     
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  color: #ffff;                               /* Asegura texto oscuro en todo el contenedor */
}

.terms-container h1 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 1.5rem;
  color: #ffff;                               /* Títulos más oscuros */
}

.terms-container h2 {
  font-size: 1.25rem;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  color: #ffff;
  border-bottom: 2px solid #ececec;
  padding-bottom: 0.25rem;
}

.terms-container p,
.terms-container li {
  color: #ffff;                               /* Texto de párrafos y listas */
  line-height: 1.6;
  margin-bottom: 0.75rem;
}

.terms-container ol,
.terms-container ul {
  margin-left: 1.5rem;
}

.terms-container ul {
  list-style-type: disc;
}

.terms-container ol {
  list-style-type: decimal;
}

.terms-container a {
  color: #0066cc;
  text-decoration: none;
}
.terms-container a:hover {
  text-decoration: underline;
}

/* Scroll interno para contenedores muy largos */
.terms-container {
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
}

/* Responsive */
@media (max-width: 600px) {
  .terms-container {
    padding: 1rem;
  }
  .terms-container h1 {
    font-size: 1.5rem;
  }
  .terms-container h2 {
    font-size: 1.1rem;
  }
}


/* estilos para la página de Política de Privacidad */
.privacy-page {
  background: var(--color-accent)!important;
  padding: 2rem;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #ffff;
}

.privacy-container {
  max-width: 800px;
  margin: 0 auto;
  background: var(--color-accent)!important;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  color: #ffff;
}

.privacy-container h1 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 1.5rem;
  color: #ffff;
}

.privacy-container ol {
  margin-left: 1.5rem;
  list-style-type: decimal;
}

.privacy-container li {
  color: #ffff;
  line-height: 1.6;
  margin-bottom: 0.75rem;
}

.privacy-container a {
  color: #00000;
  text-decoration: none;
}

.privacy-container a:hover {
  text-decoration: underline;
}

/* Scroll interno si fuese necesario */
.privacy-container {
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
}

/* Responsive */
@media (max-width: 600px) {
  .privacy-container {
    padding: 1rem;
  }
  .privacy-container h1 {
    font-size: 1.5rem;
  }
}


/* estilos para Ranking Semanal */
.dashboard-page {
  padding: 2rem;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: transparent;
  color: var(--color-text);
}

.dashboard-page h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
  text-align: center;
}

/* Botón Mostrar */
.btn-show {
  display: block;
  margin: 0 auto 1.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--color-emphasis);
  color: var(--color-text);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  transition: background 0.2s, box-shadow 0.2s;
  box-shadow: 0 0 6px var(--color-emphasis);
}

.btn-show:hover {
  background: darken(var(--color-emphasis), 10%);
  box-shadow: 0 0 8px var(--color-emphasis);
}

/* Contenido de reglas */
.rules-content {
  background: transparent;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.hidden {
  display: none;
}

.rules-content h2 {
  margin-top: 0;
  font-size: 1.5rem;
  color: var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 0.5rem;
}

.rules-content ol {
  margin: 1rem 0;
  padding-left: 1.25rem;
  list-style: decimal;
}

.rules-content li {
  margin-bottom: 0.75rem;
  line-height: 1.5;
}

/* Tabla estilizada */
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-card);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  border-radius: 0.5rem;
  overflow: hidden;
}

thead {
  background: var(--color-accent);
}

thead th {
  padding: 1rem;
  color: var(--color-text);
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
}

tbody tr {
  transition: background 0.2s;
}

tbody tr:nth-child(even) {
  background: rgba(255,255,255,0.05);
}

tbody tr:hover {
  background: rgba(255,255,255,0.1);
}

th, td {
  padding: 0.75rem;
  text-align: center;
  color: var(--color-text);
  font-size: 0.95rem;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}

/* Resaltar líder y actual */
tbody tr.leader td {
  background-color: var(--color-emphasis);
  color: var(--color-text);
}

tbody tr.current td {
  background-color: var(--color-bg);
  color: var(--color-text);
}

/* Responsive */
@media (max-width: 600px) {
  .dashboard-page {
    padding: 1rem;
  }
  .btn-show {
    width: 100%;
  }
  table, thead, tbody, th, td, tr {
    display: block;
  }
  thead {
    display: none;
  }
  tbody tr {
    margin-bottom: 1rem;
  }
  tbody tr td {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem;
    font-size: 0.9rem;
  }
  tbody tr td::before {
    content: attr(data-label);
    font-weight: 600;
    text-transform: uppercase;
  }
}

/**************************************************************************************************
**************************************************************************************************/

/* Cláusula de Propiedad Intelectual (dark) */
.clause-card.dark {
  background:var(--color-accent);
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  margin: 24px 0;
}
.clause-header {
  background:var(--color-accent);
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.clause-header h2 {
  margin: 0;
  font-size: 1.125rem;
}
.required {
  color: #e74c3c;
  font-size: 1.25rem;
}
.clause-body {
  padding: 16px;
  font-size: 0.95rem;
  line-height: 1.4;
}
.clause-footer {
  padding: 16px;
  border-top: 1px solid rgba(255,255,255,0.2);
}
.checkbox-label {
  display: flex;
  align-items: center;
  font-size: 0.95rem;
}
.checkbox-input {
  margin-right: 8px;
  width: 16px;
  height: 16px;
}
/*********************************************************************************************************
**********************************************************************************************************/

/* Botón de retroceso */
   .back-button {
      position: fixed;
      top: 5rem;
      right: 1rem;
      width: 30px;
      height: 30px;
      background-color: #000;
      color: white;
      font-size: 16px;
      font-weight: bold;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
      z-index: 50;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.2s ease, background-color 0.3s ease;
    }

    .back-button:hover {
      background-color: #e65100;
      transform: scale(1.1);
    }




/****************************************/
.primary-btn2 {
  background-color: var(--color-emphasis);
  color: var(--color-text);
  width: 4cm;
  height: 1cm;
  text-align: center;
  line-height: 1cm;
  text-decoration: none;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: bold;
  display: inline-block;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 0 6px var(--color-emphasis);
}

.primary-btn2:hover {
  background-color: rgba(217, 106, 0, 0.9);
  box-shadow: 0 0 8px var(--color-emphasis);
  /* Forzar que el texto siga blanco */
  color: var(--color-text) !important;
}



/**********************************************************************************************
***********************************************************************************************/

/* ==============================
   Contenedor general
   ============================== */
.form-page1 {
  background: var(--color-bg);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.form-container1 {
  background: var(--color-card);
  padding: 2rem 2.5rem;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  width: 100%;
  max-width: 380px;
}

/* ==============================
   Títulos y textos
   ============================== */
.form-page1 h1 {
  margin-bottom: 1.5rem;
  font-size: 1.75rem;
  color: var(--color-text);
  text-align: center;
  font-weight: 600;
}

.form-page1 p.secret-text1 {
  color: var(--color-text-light);
  font-size: 0.95rem;
  text-align: center;
  margin-bottom: 1.5rem;
  word-break: break-word;
}

/* ==============================
   Inputs y labels
   ============================== */
.account-form1 label {
  display: block;
  margin-bottom: 0.4rem;
  font-weight: 500;
  color: var(--color-text);
}

.account-form1 input[type="text"],
.account-form1 input[type="password"],
.account-form1 input[name="token"],
.account-form1 input[type="email"],
.account-form1 input[type="number"] {
  width: 100%;
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
  border: 1px solid #ccc;
  border-radius: var(--border-radius);
  font-size: 1rem;
  color: var(--color-text);
  transition: border-color var(--transition);
}

.account-form1 input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 82, 204, 0.15);
}

/* ==============================
   Botones
   ============================== */
.form-container1 .primary-btn {
  width: 100%;
  padding: 0.85rem;
  background: var(--color-emphasis)!Important;
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  text-align: center;
  transition: background var(--transition), transform var(--transition);
}

.form-container1 .primary-btn:hover {
  background: var(--color-emphasis-alt);
  transform: translateY(-1px);
}

.form-container1 .primary-btn:active {
  transform: translateY(0);
}

/* ==============================
   Mensajes de alerta
   ============================== */
.form-container1 .error,
.form-container1 .alert-error {
  background: #fdecea;
  color: var(--color-error);
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--color-error);
  border-radius: var(--border-radius);
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

.form-container1 .alert-success {
  background: #e6f4ea;
  color: var(--color-success);
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--color-success);
  border-radius: var(--border-radius);
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

.form-container1 .alert-warning {
  background: #fff4e5;
  color: #663c00;
  padding: 0.75rem 1rem;
  border-left: 4px solid #ffb830;
  border-radius: var(--border-radius);
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

 /* ===========================
     Título y mensajes de error
     =========================== */
  .form-container h1 {
    font-size: 1.75rem;
    margin-bottom: 1.5rem;
    color: var(--color-accent);
    text-align: center;
    text-shadow: 0 0 6px var(--color-accent);
  }
  .error {
    background: rgba(217,106,0,0.2);
    color: var(--color-emphasis);
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    text-shadow: none;
    box-shadow: inset 0 0 6px rgba(217,106,0,0.5);
  }

  /* ===========================
     Formulario
     =========================== */
  form {
    display: grid;
    gap: 1rem;
  }
  form label {
    font-weight: 600;
    color: var(--color-text);
    text-shadow: 0 0 2px rgba(0,0,0,0.5);
  }
  form input[type="text"] {
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem;
    background: rgba(255,255,255,0.05);
    color: var(--color-text);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 0.375rem;
    box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  form input[type="text"]:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 8px var(--color-primary);
    background: rgba(255,255,255,0.1);
  }

  /* ===========================
     Botón Verificar
     =========================== */
  .primary-btn {
    background: var(--color-emphasis)!important;
    color: var(--color-text);
    padding: 0.75rem;
    border: none;
    border-radius: 9999px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
    box-shadow: 0 0 8px var(--color-emphasis);
  }
  .primary-btn:hover {
    opacity: 0.9;
    transform: scale(1.02);
    box-shadow: 0 0 12px var(--color-emphasis), 0 0 8px var(--color-accent);
  }

  /* ===========================
     Responsive
     =========================== */
  @media (max-width: 600px) {
    .form-container {
      padding: 1.5rem;
    }
    .form-container h1 {
      font-size: 1.5rem;
      margin-bottom: 1rem;
    }
    form input[type="text"] {
      padding: 0.6rem;
      font-size: 0.9rem;
    }
    .primary-btn {
      padding: 0.6rem;
      font-size: 0.9rem;
    }
  }