/* ===== Extensión moderna solo para el área de clientes ===== */

@keyframes flotar { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes pulso { 0%{box-shadow:0 0 0 0 rgba(37,99,235,.5)} 70%{box-shadow:0 0 0 10px rgba(37,99,235,0)} 100%{box-shadow:0 0 0 0 rgba(37,99,235,0)} }
@keyframes aparecer { from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:translateY(0)} }
@keyframes brillo { 0%{background-position:0% 50%} 100%{background-position:200% 50%} }

.cliente-body { background: #0B1220; min-height: 100vh; }

.cliente-topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 26px; background: rgba(255,255,255,.03); border-bottom: 1px solid rgba(255,255,255,.06);
    position: sticky; top: 0; backdrop-filter: blur(10px); z-index: 20;
}
.cliente-topbar .marca { font-family:'Manrope',sans-serif; font-weight:800; color:#fff; font-size:17px; display:flex; align-items:center; gap:8px; }
.cliente-topbar .marca .punto { width:9px; height:9px; border-radius:50%; background:#22D3A5; box-shadow:0 0 10px #22D3A5; animation: pulso 2s infinite; }
.cliente-topbar .salir { color:#8DA0C4; font-size:13px; }

.cliente-hero {
    margin: 22px; border-radius: 20px; padding: 30px 24px;
    background: radial-gradient(circle at 30% 20%, rgba(37,99,235,.35), transparent 60%), linear-gradient(160deg,#0B1E3D,#071023);
    border: 1px solid rgba(255,255,255,.07); color:#fff; position: relative; overflow:hidden;
    animation: aparecer .5s ease both;
}
.cliente-hero::after {
    content:''; position:absolute; inset:0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.05) 50%, transparent 70%);
    background-size: 200% 100%; animation: brillo 4s linear infinite;
}
.cliente-hero h1 { font-family:'Manrope',sans-serif; font-size:22px; font-weight:800; position:relative; z-index:1; }
.cliente-hero .sub { color:#9FB0CE; font-size:13.5px; margin-top:6px; position:relative; z-index:1; }
.cliente-hero .orbe {
    width:70px; height:70px; border-radius:20px; margin-top:20px;
    background: linear-gradient(145deg,#3B82F6,#1D4ED8); display:flex; align-items:center; justify-content:center;
    font-size:28px; box-shadow: 0 0 40px rgba(59,130,246,.5); animation: flotar 4s ease-in-out infinite; position:relative; z-index:1;
}

.grid-servicios { padding: 0 22px 22px; display: flex; flex-direction: column; gap: 16px; }
.servicio-moderno {
    background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.08); border-radius: 18px;
    padding: 22px; color: #E6ECF7; transition: transform .2s ease, border-color .2s ease;
    animation: aparecer .5s ease both;
}
.servicio-moderno:hover { transform: translateY(-4px); border-color: rgba(59,130,246,.5); }
.servicio-moderno .fila-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.servicio-moderno .plan-nombre { font-weight:800; font-size:15.5px; }
.estado-pill { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; padding:5px 12px; border-radius:20px; }
.estado-pill.activo { background: rgba(34,211,165,.15); color:#22D3A5; }
.estado-pill.pendiente { background: rgba(251,191,36,.15); color:#FBBF24; }
.estado-pill.suspendido { background: rgba(248,113,113,.15); color:#F87171; }
.estado-pill span { width:6px; height:6px; border-radius:50%; background:currentColor; }

.dato-conexion { background: rgba(255,255,255,.04); border-radius: 12px; padding: 12px 14px; margin-top:10px; font-size:13px; color:#B7C2D6; display:flex; justify-content:space-between; }
.dato-conexion b { color:#fff; }

.btn-moderno {
    display:inline-flex; align-items:center; gap:8px; margin-top:16px; padding:11px 18px; border-radius: 12px;
    background: linear-gradient(90deg,#2563EB,#38BDF8); color:#fff; font-weight:700; font-size:13.5px; border:none; cursor:pointer;
    transition: filter .15s, transform .15s;
}
.btn-moderno:hover { filter: brightness(1.1); transform: translateY(-2px); text-decoration:none; }

.accesos-rapidos { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding: 0 22px 30px; }
.acceso-rapido {
    background: rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:16px;
    color:#E6ECF7; text-align:center; font-size:13px; font-weight:600; transition: transform .2s;
}
.acceso-rapido:hover { transform: translateY(-3px); text-decoration:none; }
.acceso-rapido .icono { font-size:20px; display:block; margin-bottom:6px; }

/* ===== Mejoras "wow": mesh animado, contador, nav inferior, stepper, shine, toast ===== */

@keyframes mesh { 0%{transform:translate(0,0) scale(1)} 50%{transform:translate(-4%,3%) scale(1.08)} 100%{transform:translate(0,0) scale(1)} }
.cliente-hero { position: relative; }
.cliente-hero .mesh {
    position:absolute; inset:-20%; z-index:0; opacity:.55; filter: blur(40px);
    background:
        radial-gradient(circle at 20% 30%, #2563EB 0%, transparent 45%),
        radial-gradient(circle at 80% 20%, #22D3A5 0%, transparent 40%),
        radial-gradient(circle at 60% 80%, #8B5CF6 0%, transparent 45%);
    animation: mesh 10s ease-in-out infinite;
}
.cliente-hero > *:not(.mesh) { position: relative; z-index: 1; }

.servicio-moderno { position: relative; overflow: hidden; }
.servicio-moderno::before {
    content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.06), transparent);
    transform: skewX(-20deg); transition: left .6s ease;
}
.servicio-moderno:hover::before { left: 130%; }

.nav-inferior {
    position: fixed; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-around;
    background: rgba(11,18,32,.85); backdrop-filter: blur(14px); border-top: 1px solid rgba(255,255,255,.08);
    padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); z-index: 30;
}
.nav-inferior a { display:flex; flex-direction:column; align-items:center; gap:3px; color:#7E8CAA; font-size:11px; font-weight:600; transition: color .15s, transform .15s; }
.nav-inferior a.activo, .nav-inferior a:hover { color:#5EA1FF; transform: translateY(-2px); text-decoration:none; }
.nav-inferior a .icono { font-size:19px; }
.grid-servicios, .accesos-rapidos { padding-bottom: 90px; }

.stepper { display:flex; align-items:center; margin: 18px 0; }
.stepper .paso { flex:1; text-align:center; position:relative; }
.stepper .paso .circulo {
    width:30px; height:30px; border-radius:50%; margin:0 auto 8px; display:flex; align-items:center; justify-content:center;
    background: rgba(255,255,255,.08); border:2px solid rgba(255,255,255,.15); font-size:13px; color:#7E8CAA; font-weight:800;
    transition: all .3s;
}
.stepper .paso.hecho .circulo { background: linear-gradient(135deg,#2563EB,#22D3A5); border-color: transparent; color:#fff; }
.stepper .paso.actual .circulo { border-color:#2563EB; color:#fff; box-shadow: 0 0 0 5px rgba(37,99,235,.2); }
.stepper .paso .etiqueta { font-size:11px; color:#7E8CAA; }
.stepper .paso.hecho .etiqueta, .stepper .paso.actual .etiqueta { color:#E6ECF7; font-weight:700; }
.stepper .linea { position:absolute; top:15px; left:-50%; width:100%; height:2px; background: rgba(255,255,255,.12); z-index:-1; }
.stepper .paso.hecho .linea { background: linear-gradient(90deg,#2563EB,#22D3A5); }
.stepper .paso:first-child .linea { display:none; }

.contador { font-family:'Manrope',sans-serif; }

.toast {
    position: fixed; top: 20px; left: 50%; transform: translateX(-50%) translateY(-20px); opacity:0;
    background: rgba(20,30,50,.95); color:#fff; padding: 13px 22px; border-radius: 12px; font-size: 13.5px; font-weight:600;
    border: 1px solid rgba(255,255,255,.1); box-shadow: 0 10px 30px rgba(0,0,0,.3); z-index: 50;
    transition: all .35s ease; display:flex; align-items:center; gap:8px;
}
.toast.mostrar { transform: translateX(-50%) translateY(0); opacity: 1; }

/* ===== Animaciones al desplazar (scroll reveal) ===== */
.reveal, .reveal-izq, .reveal-der {
    opacity: 0; transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
.reveal { transform: translateY(24px); }
.reveal-izq { transform: translateX(-30px); }
.reveal-der { transform: translateX(30px); }
.reveal.visible, .reveal-izq.visible, .reveal-der.visible {
    opacity: 1; transform: translate(0,0);
}

/* ===== Login clientes estilo claro (WHMCS) ===== */
.cwl-body { background: #F4F6F9; min-height: 100vh; font-family: 'Inter', Arial, sans-serif; display: flex; flex-direction: column; }
.cwl-main { flex: 1; }
.cwl-topbar {
    background: #0B1220; padding: 14px 0;
}
.cwl-topbar-inner {
    max-width: 1200px; margin: 0 auto; padding: 0 40px;
    display: flex; align-items: center; justify-content: space-between;
}
.cwl-logo-link { display: flex; align-items: center; }
.cwl-logo-img { height: 40px; width: auto; display: block; }
.cwl-topbar-derecha { display: flex; align-items: center; gap: 22px; }
.cwl-idioma, .cwl-link { color: #C3CEE3; font-size: 14px; text-decoration: none; }
.cwl-btn-carrito {
    background: #2563EB; color: #fff; padding: 9px 18px; border-radius: 6px;
    font-size: 14px; font-weight: 600; text-decoration: none;
}
.cwl-subnav { background: #2563EB; padding: 12px 0; }
.cwl-subnav-inner {
    max-width: 1200px; margin: 0 auto; padding: 0 40px;
    display: flex; align-items: center; justify-content: space-between;
}
.cwl-subnav a, .cwl-cuenta { color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; }
.cwl-subnav-link { color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 6px; transition: background .15s; }
.cwl-subnav-link:hover { text-decoration: none; color: #fff; background: rgba(255,255,255,.18); }

.cwl-main { max-width: 760px; margin: 0 auto; padding: 50px 24px; }
.cwl-main h1 { font-family: 'Manrope', sans-serif; font-size: 30px; color: #12151C; }
.cwl-main h1 .cwl-subtitulo { display: block; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 400; color: #8A93A6; margin-top: 4px; }
.cwl-main hr { border: none; border-top: 1px solid #E4E7EC; margin: 18px 0 30px; }

.cwl-columnas { display: flex; gap: 40px; flex-wrap: wrap; }
.cwl-col-form { flex: 1; min-width: 280px; max-width: 380px; }
.cwl-col-form label { display: block; font-size: 13px; font-weight: 600; color: #12151C; margin-bottom: 6px; }
.cwl-col-form input {
    width: 100%; padding: 11px 14px; margin-bottom: 18px; border: 1px solid #E4E7EC;
    border-radius: 5px; font-size: 14px;
}
.cwl-recordar { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 400; color: #6B7280; margin-bottom: 18px; }
.cwl-recordar input { width: auto; margin: 0; }
.cwl-fila-botones { display: flex; align-items: center; gap: 16px; }
.cwl-fila-botones button {
    background: #2563EB; color: #fff; border: none; padding: 11px 24px; border-radius: 5px;
    font-size: 14px; font-weight: 600; cursor: pointer;
}
.cwl-fila-botones button:hover { background: #1D4ED8; }
.cwl-perdiste { font-size: 13px; color: #2563EB; text-decoration: none; }

.cwl-col-chips { flex: 1; min-width: 260px; max-width: 320px; padding-left: 30px; border-left: 1px solid #E4E7EC; }
.cwl-chip {
    display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #E4E7EC;
    border-radius: 6px; padding: 12px 16px; margin-bottom: 12px; text-decoration: none;
    color: #12151C; font-size: 14px; font-weight: 500;
}
.cwl-chip:hover { border-color: #2563EB; }
.cwl-chip-icono {
    width: 26px; height: 26px; border-radius: 50%; background: #F0F3F9; display: flex;
    align-items: center; justify-content: center; font-size: 14px; color: #2563EB; font-weight: 700;
}

/* ===== Menús desplegables Servicios / Cuenta (por hover) ===== */
.cwl-dropdown { position: relative; display: inline-flex; align-items: center; }
.cwl-icono-cuenta {
    width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,.2);
    display: inline-flex; align-items: center; justify-content: center;
}
.cwl-dropdown-menu {
    display: none; position: absolute; top: calc(100% + 6px); left: 0;
    background: #fff; border: 1px solid #E4E7EC; border-radius: 8px; min-width: 220px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 8px 0; z-index: 50;
}
.cwl-dropdown-menu.cwl-abierto { display: block; }
.cwl-dropdown-menu a {
    display: block; padding: 10px 18px; color: #12151C; font-size: 14px; font-weight: 500; text-decoration: none;
}
.cwl-dropdown-menu a:hover { background: #F4F6F9; color: #2563EB; }
.cwl-dropdown-menu-derecha { left: auto; right: 0; }

.cwl-footer-copy {
    text-align: center; padding: 24px; color: #8A93A6; font-size: 13px;
}

/* ===== Métodos de pago (factura) ===== */
.cwl-metodo-pago {
    background: #F8F9FC; border: 1px solid #E4E7EC;
    border-radius: 8px; padding: 12px 16px; margin-bottom: 10px;
}
.cwl-metodo-pago summary {
    cursor: pointer; font-weight: 600; color: #12151C; font-size: 14px; list-style: none;
}
.cwl-metodo-pago summary::-webkit-details-marker { display: none; }
.cwl-metodo-pago summary::before { content: '▸ '; }
.cwl-metodo-pago[open] summary::before { content: '▾ '; }
.cwl-metodo-pago p { color: #5C6579; font-size: 13.5px; margin-top: 10px; line-height: 1.6; }