/*
Theme Name: WiFi Portal CPA
Theme URI: https://lsbcreativa.com/
Author: LSB Creativa
Author URI: https://lsbcreativa.com/
Description: Tema de WordPress para portal de acceso WiFi con integración CPA. Diseño moderno, responsive y optimizado para conversiones.
Version: 1.0.0
Requires at least: 5.0
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wifi-portal-cpa
Tags: one-column, custom-background, custom-logo, featured-images, full-width-template
*/

/* ========================================
   VARIABLES Y RESET
======================================== */
:root {
  --bg-primary: #06141f;
  --bg-secondary: #0a2740;
  --card-bg: rgb(15 34 51 / 80%);
  --border-color: #1e3a55;
  --text-primary: #eaf2ff;
  --text-muted: #b9c7da;
  --color-success: #22c55e;
  --color-warning: #fbbf24;
  --color-accent: #2563eb;
  --color-accent-dark: #1d4ed8;
  --shadow-card: 0 18px 60px rgb(0 0 0 / 45%);
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --transition-fast: 120ms ease;
  --transition-normal: 350ms ease;
}

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

/* ========================================
   LAYOUT BASE
======================================== */
html, body {
  height: 100%;
}

body {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--text-primary);
  background:
    radial-gradient(1200px 600px at 15% 10%, rgb(37 99 235 / 25%), transparent 55%),
    radial-gradient(900px 600px at 85% 20%, rgb(34 197 94 / 18%), transparent 55%),
    linear-gradient(160deg, var(--bg-primary), var(--bg-secondary));
  background-attachment: fixed;
  display: grid;
  place-items: center;
  padding: 18px;
  min-height: 100dvh;
}

/* ========================================
   CARD PRINCIPAL
======================================== */
.card {
  width: min(440px, 100%);
  background: var(--card-bg);
  border: 1px solid rgb(30 58 85 / 75%);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ========================================
   HEADER
======================================== */
.card__header {
  padding: 18px 18px 10px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.card__logo {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 30%, rgb(255 255 255 / 15%), transparent 55%),
    linear-gradient(135deg, rgb(37 99 235 / 35%), rgb(34 197 94 / 25%));
  border: 1px solid rgb(255 255 255 / 10%);
  flex-shrink: 0;
}

.card__logo svg {
  display: block;
  fill: rgb(234 242 255 / 95%);
}

.card__title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 1.1;
}

.card__subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
}

.card__divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 8%), transparent);
}

/* ========================================
   CONTENIDO
======================================== */
.card__content {
  padding: 18px;
}

/* Status Box */
.status {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border-radius: var(--radius-lg);
  background: rgb(3 12 20 / 55%);
  border: 1px solid rgb(255 255 255 / 6%);
}

.status__indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-top: 4px;
  background: var(--color-warning);
  flex-shrink: 0;
  transition: background var(--transition-normal);
}

.status__indicator--active {
  animation: pulse 1.4s infinite;
}

.status__indicator--success {
  background: var(--color-success);
  animation: none;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgb(251 191 36 / 55%); }
  70% { box-shadow: 0 0 0 10px rgb(251 191 36 / 0%); }
}

/* Respeta preferencias de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  .status__indicator--active {
    animation: none;
  }
  .progress__bar {
    transition: none;
  }
}

.status__title {
  font-size: 15px;
  font-weight: 700;
}

.status__text {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 6px;
}

.status__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgb(34 197 94 / 10%);
  border: 1px solid rgb(34 197 94 / 18%);
  color: #c9f7d8;
  font-size: 12px;
  margin-top: 10px;
}

/* Steps */
.steps {
  list-style: none;
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.steps__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: var(--radius-md);
  background: rgb(255 255 255 / 4%);
  border: 1px solid rgb(255 255 255 / 6%);
  transition: background var(--transition-fast);
}

.steps__item--completed {
  background: rgb(34 197 94 / 8%);
}

.steps__badge {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  background: rgb(37 99 235 / 18%);
  border: 1px solid rgb(37 99 235 / 25%);
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
}

.steps__text {
  font-size: 13px;
  color: var(--text-muted);
}

/* Progress Bar */
.progress {
  margin-top: 14px;
  height: 10px;
  border-radius: 999px;
  background: rgb(255 255 255 / 6%);
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 6%);
}

.progress__bar {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, rgb(37 99 235 / 95%), rgb(34 197 94 / 85%));
  transition: width var(--transition-normal);
}

/* CTA */
.cta {
  margin-top: 16px;
  display: grid;
  gap: 10px;
}

.cta__btn {
  appearance: none;
  border: none;
  width: 100%;
  padding: 14px;
  border-radius: var(--radius-lg);
  font-weight: 700;
  font-size: 15px;
  color: white;
  cursor: pointer;
  background: linear-gradient(180deg, var(--color-accent), var(--color-accent-dark));
  box-shadow: 0 12px 30px rgb(29 78 216 / 35%);
  transform: translateY(0);
  transition: 
    transform var(--transition-fast),
    filter var(--transition-fast),
    opacity var(--transition-fast);
}

.cta__btn:hover:not(:disabled) {
  filter: brightness(1.05);
}

.cta__btn:active:not(:disabled) {
  transform: translateY(1px);
}

.cta__btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.cta__btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.cta__note {
  text-align: center;
  font-size: 12px;
  color: rgb(185 199 218 / 90%);
}

.cta__note strong {
  color: #dbe8ff;
}

/* Footer */
.card__footer {
  padding: 14px 18px 18px;
  color: rgb(185 199 218 / 85%);
  font-size: 11.5px;
  line-height: 1.35;
}

/* ========================================
   OCULTAR ELEMENTOS DE WORDPRESS
======================================== */
#wpadminbar {
  display: none !important;
}

html {
  margin-top: 0 !important;
}