/* ============================================================ KDD Afiliados — Tema GLASSMORPHISM (Claro/Oscuro) Conmutable con [data-theme="dark|light"] en ============================================================ */ :root{ --kdd-gold:#C6A965; --kdd-gold-2:#e7d3a1; --radius:16px; --blur:16px; --font:"Inter","Segoe UI",system-ui,-apple-system,sans-serif; color-scheme: dark; /* Tema OSCURO (por defecto) */ --text:#f4f1ea; --muted:#b7b0a2; --ok:#57d99a; --err:#ff8a8a; --glass:rgba(255,255,255,.06); --glass-2:rgba(255,255,255,.10); --glass-brd:rgba(255,255,255,.14); --card-shadow:0 24px 60px rgba(0,0,0,.45); --header-bg:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04)); --body-bg: radial-gradient(60rem 40rem at 12% -10%, rgba(198,169,101,.22), transparent 60%), radial-gradient(50rem 40rem at 100% 0%, rgba(120,90,220,.18), transparent 55%), radial-gradient(50rem 40rem at 50% 120%, rgba(60,120,200,.14), transparent 60%), linear-gradient(160deg,#0b0b0f 0%,#12121a 45%,#0b0b0f 100%); --blob1:radial-gradient(circle,rgba(198,169,101,.35),transparent 70%); --blob2:radial-gradient(circle,rgba(120,90,220,.30),transparent 70%); --hairline:rgba(255,255,255,.10); /* Fondo con imagen (glassmorphism real) */ --bg-img:url('/assets/img/bg.jpg'); --bg-overlay: linear-gradient(180deg, rgba(8,8,12,.66), rgba(8,8,12,.82)), radial-gradient(60rem 40rem at 12% -10%, rgba(198,169,101,.30), transparent 60%), radial-gradient(50rem 40rem at 100% 0%, rgba(90,70,180,.22), transparent 55%); } /* Tema CLARO */ [data-theme="light"]{ color-scheme: light; --text:#17171c; --muted:#5c5c68; --ok:#0f7a4d; --err:#a12b2b; --glass:rgba(255,255,255,.55); --glass-2:rgba(255,255,255,.72); --glass-brd:rgba(17,17,20,.10); --card-shadow:0 20px 50px rgba(20,20,45,.12); --header-bg:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.5)); --body-bg: radial-gradient(60rem 40rem at 12% -10%, rgba(198,169,101,.28), transparent 60%), radial-gradient(50rem 40rem at 100% 0%, rgba(120,90,220,.14), transparent 55%), radial-gradient(50rem 40rem at 50% 120%, rgba(60,120,200,.12), transparent 60%), linear-gradient(160deg,#f7f8fb 0%,#eef0f6 50%,#f7f8fb 100%); --blob1:radial-gradient(circle,rgba(198,169,101,.30),transparent 70%); --blob2:radial-gradient(circle,rgba(120,90,220,.20),transparent 70%); --hairline:rgba(17,17,20,.10); --bg-overlay: linear-gradient(180deg, rgba(246,247,250,.70), rgba(238,240,246,.84)), radial-gradient(60rem 40rem at 12% -10%, rgba(198,169,101,.30), transparent 60%), radial-gradient(50rem 40rem at 100% 0%, rgba(120,90,220,.14), transparent 55%); } *{box-sizing:border-box} html,body{min-height:100%} body{ margin:0;font-family:var(--font);color:var(--text); background:var(--bg-overlay), var(--bg-img) center center / cover no-repeat fixed, #0b0b0f; min-height:100vh;transition:color .3s ease; } body::before,body::after{content:"";position:fixed;border-radius:50%;filter:blur(60px);opacity:.22;z-index:-1;pointer-events:none} body::before{width:32rem;height:32rem;left:-8rem;top:-6rem;background:var(--blob1);animation:float1 18s ease-in-out infinite} body::after{width:28rem;height:28rem;right:-6rem;bottom:-8rem;background:var(--blob2);animation:float2 22s ease-in-out infinite} @keyframes float1{50%{transform:translate(3rem,2rem)}} @keyframes float2{50%{transform:translate(-3rem,-2rem)}} @media (prefers-reduced-motion:reduce){body::before,body::after{animation:none}} /* Cabecera */ .site-header{position:sticky;top:0;z-index:20;padding:1rem 1.5rem;background:var(--header-bg); backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));border-bottom:1px solid var(--glass-brd)} /* Marca con logo (claro/oscuro) */ .brand{display:inline-flex;align-items:center;gap:.6rem} .brand .brand-logo{height:26px;width:auto;display:block} .brand .logo-for-light{display:none} /* en tema oscuro mostramos el logo claro */ .brand .logo-for-dark{display:block} [data-theme="light"] .brand .logo-for-light{display:block} [data-theme="light"] .brand .logo-for-dark{display:none} .brand::after{display:none} .header-inner{max-width:64rem;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem} .nav{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;font-size:.95rem} .nav a{color:var(--text);text-decoration:none;padding:.3rem .55rem;border-radius:10px;transition:.2s} .nav a:hover{color:var(--kdd-gold);background:var(--glass)} .inline{display:inline;margin:0} button.linkish{background:none;border:none;padding:0;font:inherit;color:var(--muted);cursor:pointer;text-decoration:underline;text-underline-offset:2px} button.linkish:hover{color:var(--kdd-gold)} /* Switch tema */ .theme-toggle{display:inline-flex;align-items:center;gap:.35rem;margin-left:.25rem;padding:.28rem .5rem;border-radius:999px; background:var(--glass-2);border:1px solid var(--glass-brd);cursor:pointer;color:var(--text);font:inherit;font-size:1rem;line-height:1;transition:.2s} .theme-toggle:hover{border-color:var(--kdd-gold)} .theme-toggle .tt-ico{opacity:.45;transition:.2s;font-size:.95rem} [data-theme="dark"] .theme-toggle .tt-moon{opacity:1} [data-theme="light"] .theme-toggle .tt-sun{opacity:1} /* Contenedor cristal */ .container{max-width:46rem;margin:2.5rem auto;padding:2.25rem;border-radius:var(--radius); background:var(--glass);border:1px solid var(--glass-brd); backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur)); box-shadow:var(--card-shadow),inset 0 1px 0 rgba(255,255,255,.12);transition:background .4s,border-color .4s} .container-wide{max-width:64rem} h1{font-size:clamp(1.7rem,4vw,2.3rem);margin:0 0 1rem;line-height:1.15;font-weight:800} h2{font-weight:750} a{color:var(--kdd-gold-2)} [data-theme="light"] a{color:#9a7b2e} p{line-height:1.6} .muted{color:var(--muted);font-size:.9rem} .cta-group{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.5rem 0} /* Botones */ .btn{display:inline-block;padding:.7rem 1.3rem;border-radius:12px;font-weight:700;color:#161207;text-decoration:none;cursor:pointer;font:inherit; background:linear-gradient(180deg,var(--kdd-gold-2),var(--kdd-gold));border:1px solid rgba(255,255,255,.25); box-shadow:0 10px 24px rgba(198,169,101,.28);transition:.2s} .btn:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(198,169,101,.42)} .btn-outline{background:var(--glass-2);color:var(--text);border:1px solid var(--glass-brd);box-shadow:none} .btn-outline:hover{background:var(--glass);color:var(--kdd-gold)} /* Form */ .form{display:flex;flex-direction:column;gap:1rem;margin:1.25rem 0} .form label{display:flex;flex-direction:column;gap:.35rem;font-weight:600;font-size:.9rem;color:var(--text)} .form label.check{flex-direction:row;align-items:center;font-weight:500} .form input[type=text],.form input[type=email],.form input[type=password],.form input[type=url],.form input[type=number],.form select{ padding:.7rem .85rem;border-radius:12px;color:var(--text);font:inherit;background:var(--glass);border:1px solid var(--glass-brd);transition:.2s} [data-theme="light"] .form input,[data-theme="light"] .form select{background:rgba(255,255,255,.8)} .form input::placeholder{color:var(--muted)} .form input:focus,.form select:focus{outline:none;border-color:var(--kdd-gold);box-shadow:0 0 0 3px rgba(198,169,101,.25)} .form input[type=checkbox]{accent-color:var(--kdd-gold);width:1.05rem;height:1.05rem} /* Alertas */ .alert{padding:.85rem 1rem;border-radius:12px;background:var(--glass-2);border:1px solid var(--glass-brd);border-left:3px solid var(--kdd-gold)} .alert-error{border-left-color:var(--err);background:rgba(255,138,138,.10);color:var(--err)} .alert-ok{border-left-color:var(--ok);background:rgba(87,217,154,.10);color:var(--ok)} /* Tablas */ .table-wrap{overflow-x:auto;margin:1rem 0;border-radius:12px} .table{width:100%;border-collapse:collapse;font-size:.92rem} .table th,.table td{text-align:left;padding:.7rem .6rem;border-bottom:1px solid var(--hairline);vertical-align:top} .table th{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)} .table tbody tr:hover{background:var(--glass)} .break{word-break:break-all} /* Meta/listas */ .meta{display:grid;grid-template-columns:7rem 1fr;gap:.5rem 1rem;margin:1.5rem 0} .meta dt{color:var(--muted);font-size:.85rem} .meta dd{margin:0} .list-links{padding-left:1.2rem;line-height:1.9} .actions{display:flex;flex-wrap:wrap;gap:.75rem} .danger-zone{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--hairline)} .site-footer{padding:2rem 1.5rem;text-align:center;color:var(--muted);font-size:.85rem} code{font-size:.9em;background:rgba(198,169,101,.18);padding:.1em .35em;border-radius:6px;color:var(--kdd-gold-2)} [data-theme="light"] code{color:#7a5f22} /* KPIs */ .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:1rem;margin:1.5rem 0} .stats>div{padding:1.1rem;border-radius:14px;background:var(--glass-2);border:1px solid var(--glass-brd);border-left:3px solid var(--kdd-gold); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} .stats strong{display:block;font-size:1.5rem;margin-top:.35rem;color:var(--kdd-gold-2)} [data-theme="light"] .stats strong{color:#9a7b2e} .saldo-hero{font-size:1.15rem;margin:1rem 0 1.5rem} /* Badges */ .badge{display:inline-block;padding:.18rem .5rem;border-radius:999px;font-size:.78rem;font-weight:700;border:1px solid var(--glass-brd);background:var(--glass-2)} .badge-validada,.badge-pagada{background:rgba(87,217,154,.15);color:var(--ok)} .badge-anulada{background:rgba(255,138,138,.12);color:var(--err)} .badge-devengada{background:rgba(198,169,101,.22);color:var(--kdd-gold-2)} [data-theme="light"] .badge-devengada{color:#7a5f22} .filters{margin-bottom:1rem;font-size:.95rem} .filters a{color:var(--text);text-decoration:none;padding:.2rem .5rem;border-radius:8px} .filters a:hover{background:var(--glass)} @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ [data-theme="dark"] .container,[data-theme="dark"] .site-header,[data-theme="dark"] .stats>div{background:rgba(20,20,28,.95)} [data-theme="light"] .container,[data-theme="light"] .site-header,[data-theme="light"] .stats>div{background:rgba(255,255,255,.92)} } /* ==== Menú de usuario (cabecera) ==== */ .user-menu{position:relative} .user-menu-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.22rem .55rem .22rem .22rem;border-radius:999px; background:var(--glass-2);border:1px solid var(--glass-brd);color:var(--text);cursor:pointer;font:inherit;transition:.2s} .user-menu-btn:hover{border-color:var(--kdd-gold)} .user-avatar{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%; background:linear-gradient(180deg,var(--kdd-gold-2),var(--kdd-gold));color:#161207;font-weight:800;font-size:.8rem;overflow:hidden;flex:none} .user-avatar img{width:100%;height:100%;object-fit:cover;display:block} .user-avatar-lg{width:72px;height:72px;font-size:1.6rem} .user-name{font-weight:600;font-size:.92rem} .user-caret{opacity:.6;font-size:.8rem} .user-dropdown{position:absolute;right:0;top:calc(100% + 8px);min-width:215px;padding:.4rem;border-radius:14px; background:var(--glass-2);border:1px solid var(--glass-brd);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur)); box-shadow:var(--card-shadow);display:none;z-index:60} .user-menu.open .user-dropdown{display:block} .user-dropdown .ud-head{padding:.5rem .7rem;font-size:.85rem;color:var(--muted);border-bottom:1px solid var(--hairline);margin-bottom:.3rem} .user-dropdown a,.user-dropdown .ud-salir{display:block;width:100%;text-align:left;padding:.55rem .7rem;border-radius:9px; color:var(--text);text-decoration:none;background:none;border:none;font:inherit;cursor:pointer;transition:.15s} .user-dropdown a:hover,.user-dropdown .ud-salir:hover{background:var(--glass);color:var(--kdd-gold)} .user-dropdown form{margin:0} .avatar-row{display:flex;gap:1.25rem;align-items:center;flex-wrap:wrap;margin:1rem 0 1.6rem} .form-inline{align-items:flex-start} /* ==== Ojos de contraseña ==== */ .pw-wrap{position:relative;display:block} .pw-wrap input{width:100%;padding-right:2.6rem} .pw-toggle{position:absolute;right:.45rem;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer; font-size:1.05rem;line-height:1;padding:.2rem;opacity:.7;border-radius:8px} .pw-toggle:hover{opacity:1;background:var(--glass)} /* Honeypot (campo trampa anti-bot) */ .hp-field{position:absolute !important;left:-9999px !important;top:auto;width:1px;height:1px;overflow:hidden} /* ==== Selects: contraste correcto en claro y oscuro ==== */ .form select{background:var(--glass);color:var(--text);border:1px solid var(--glass-brd);appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 1.1rem) 55%,calc(100% - .75rem) 55%; background-size:.35rem .35rem,.35rem .35rem;background-repeat:no-repeat;padding-right:2rem} .form select option{background:#15151a;color:#f4f1ea} [data-theme="light"] .form select option{background:#ffffff;color:#17171c}