/* ============================================================================= KINEGUN INTELLIGENCE · Mi cuenta — hoja de estilos ----------------------------------------------------------------------------- Adaptación de TailAdmin (github.com/TailAdmin) escrita a mano. POR QUÉ ESCRITA A MANO Y NO CON TAILWIND TailAdmin es Tailwind v4: necesita Node y un paso de compilación. Esta plataforma no tiene build ni gestor de dependencias, así que la alternativa habría sido el CDN de Tailwind — un JavaScript enorme, sin SRI, que compila estilos en el navegador. Justo lo que la auditoría desaconsejó (cero atributos `integrity` en todo el proyecto) y que además la CSP bloquearía. Esto son ~14 KB de CSS estático: sin dependencias, sin red externa, cacheable y sin superficie de ataque nueva. Los tokens son los del tema oficial de TailAdmin, tomados de su style.css. ============================================================================= */ /* ------------------------------ TIPOGRAFÍA -------------------------------- Outfit es la fuente de TailAdmin. Va servida desde este mismo dominio, no desde Google Fonts: cada carga de Google Fonts manda la IP de la persona a un tercero, y aquí eso sería incoherente — la sección «Mis datos» le está diciendo que sus datos no se comparten con nadie. Licencia SIL Open Font 1.1 (fuentes/LICENCIA-Outfit.txt). Solo el subconjunto latino: 56 KB los cuatro pesos, y se cachean para siempre. */ @font-face{font-family:Outfit;font-style:normal;font-weight:400;font-display:swap; src:url(../fuentes/outfit-latin-400-normal.woff2) format("woff2")} @font-face{font-family:Outfit;font-style:normal;font-weight:500;font-display:swap; src:url(../fuentes/outfit-latin-500-normal.woff2) format("woff2")} @font-face{font-family:Outfit;font-style:normal;font-weight:600;font-display:swap; src:url(../fuentes/outfit-latin-600-normal.woff2) format("woff2")} @font-face{font-family:Outfit;font-style:normal;font-weight:700;font-display:swap; src:url(../fuentes/outfit-latin-700-normal.woff2) format("woff2")} :root{ /* Marca TailAdmin */ --brand-25:#f2f7ff; --brand-50:#ecf3ff; --brand-100:#dde9ff; --brand-200:#c2d6ff; --brand-300:#9cb9ff; --brand-400:#7592ff; --brand-500:#465fff; --brand-600:#3641f5; --brand-700:#2a31d8; --brand-800:#252dae; --brand-900:#262e89; /* Escala de grises */ --gray-25:#fcfcfd; --gray-50:#f9fafb; --gray-100:#f2f4f7; --gray-200:#e4e7ec; --gray-300:#d0d5dd; --gray-400:#98a2b3; --gray-500:#667085; --gray-600:#475467; --gray-700:#344054; --gray-800:#1d2939; --gray-900:#101828; --gray-950:#0c111d; /* Estado */ --success-50:#ecfdf3; --success-500:#12b76a; --success-600:#039855; --success-700:#027a48; --error-50:#fef3f2; --error-500:#f04438; --error-600:#d92d20; --error-700:#b42318; --warning-50:#fffaeb; --warning-500:#f79009; --warning-600:#dc6803; --warning-700:#b54708; /* Colores de cada IA — los de la plataforma, no los de TailAdmin. Curiosidad: el verde de KAI (#12B76A) coincide exactamente con el success-500 de TailAdmin, así que el conjunto encaja sin retoques. */ --ia-kai:#12B76A; --ia-lia:#EC6BA8; --ia-maia:#1C6FB8; --ia-exia:#F4590E; --ia-tania:#782CF5; --shadow-xs:0 1px 2px 0 rgba(16,24,40,.05); --shadow-sm:0 1px 3px 0 rgba(16,24,40,.1),0 1px 2px -1px rgba(16,24,40,.1); --shadow-lg:0 12px 16px -4px rgba(16,24,40,.08),0 4px 6px -2px rgba(16,24,40,.03); --r:12px; --r-lg:16px; --r-xl:20px; /* Superficies — modo claro */ --fondo:var(--gray-50); --panel:#fff; --borde:var(--gray-200); --texto:var(--gray-800); --texto-2:var(--gray-500); --texto-3:var(--gray-400); --hover:var(--gray-100); --side:#fff; --side-txt:var(--gray-700); } /* Modo oscuro: mismo esquema que TailAdmin (gray-900 de fondo, tarjetas translúcidas sobre él). Se activa con la clase .dark en . */ html.dark{ --fondo:var(--gray-900); --panel:#161f31; --borde:var(--gray-800); --texto:#e9eef6; --texto-2:var(--gray-400); --texto-3:var(--gray-500); --hover:rgba(255,255,255,.04); --side:var(--gray-950); --side-txt:var(--gray-300); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;background:var(--fondo);color:var(--texto); font-family:Outfit,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased; transition:background .2s,color .2s; } a{color:inherit} img{max-width:100%;display:block} h1,h2,h3,h4{margin:0;font-weight:600;color:var(--texto)} h1{font-size:24px;letter-spacing:-.01em} h2{font-size:18px} h3{font-size:15px} p{margin:0} :focus-visible{outline:2px solid var(--brand-500);outline-offset:2px;border-radius:6px} /* ------------------------------- ESTRUCTURA ------------------------------- */ .app{display:flex;min-height:100vh} .sidebar{ position:fixed;inset:0 auto 0 0;width:290px;z-index:60; background:var(--side);border-right:1px solid var(--borde); display:flex;flex-direction:column;overflow-y:auto; transform:translateX(-100%);transition:transform .25s ease; } .sidebar.abierto{transform:translateX(0)} @media (min-width:1024px){ .sidebar{transform:translateX(0)} .contenido{margin-left:290px} } .sidebar-cab{padding:26px 22px 20px;display:flex;align-items:center;gap:11px} .logo-marca{width:36px;height:36px;border-radius:10px;flex:0 0 auto; background:conic-gradient(from 210deg,var(--ia-kai),var(--ia-lia),var(--ia-maia),var(--ia-exia),var(--ia-tania),var(--ia-kai))} .logo-tx b{display:block;font-size:14px;letter-spacing:.02em;color:var(--texto)} .logo-tx span{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-3)} .menu{padding:4px 16px 26px;flex:1} .menu-grupo{margin:18px 0 8px;padding:0 10px;font-size:11px;letter-spacing:.09em; text-transform:uppercase;color:var(--texto-3);font-weight:500} .menu a{ display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r); color:var(--side-txt);text-decoration:none;font-weight:500;font-size:14px;margin-bottom:2px; transition:background .15s,color .15s; } .menu a:hover{background:var(--hover);color:var(--texto)} .menu a.on{background:var(--brand-50);color:var(--brand-700);font-weight:600} html.dark .menu a.on{background:rgba(70,95,255,.15);color:#a9b8ff} .menu a svg{width:20px;height:20px;flex:0 0 auto} .menu .pill{margin-left:auto;font-size:11px;font-weight:600;padding:2px 8px;border-radius:99px; background:var(--gray-100);color:var(--texto-2)} html.dark .menu .pill{background:rgba(255,255,255,.07)} .contenido{flex:1;min-width:0;display:flex;flex-direction:column} .cabecera{ position:sticky;top:0;z-index:40;background:var(--panel); border-bottom:1px solid var(--borde); display:flex;align-items:center;gap:12px;padding:12px 18px; } @media (min-width:1024px){.cabecera{padding:14px 26px}} .icon-btn{ width:40px;height:40px;border-radius:10px;border:1px solid var(--borde); background:var(--panel);color:var(--texto-2);display:flex;align-items:center; justify-content:center;cursor:pointer;flex:0 0 auto;transition:background .15s; } .icon-btn:hover{background:var(--hover);color:var(--texto)} .icon-btn svg{width:20px;height:20px} #btn-menu{display:flex} @media (min-width:1024px){#btn-menu{display:none}} .principal{padding:20px 18px 40px;max-width:1200px;width:100%;margin:0 auto} @media (min-width:1024px){.principal{padding:26px}} /* --------------------------------- MIGAS ---------------------------------- */ .migas{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:20px} .migas nav{font-size:13px;color:var(--texto-2)} .migas nav a{text-decoration:none;color:var(--texto-2)} .migas nav a:hover{color:var(--brand-500)} /* -------------------------------- TARJETAS -------------------------------- */ .tarjeta{ background:var(--panel);border:1px solid var(--borde);border-radius:var(--r-xl); padding:20px;box-shadow:var(--shadow-xs); } @media (min-width:768px){.tarjeta{padding:24px}} .tarjeta-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px} .tarjeta-cab p{color:var(--texto-2);font-size:13px;margin-top:3px} .rejilla{display:grid;gap:16px} .r-2{grid-template-columns:1fr} .r-3{grid-template-columns:1fr} .r-4{grid-template-columns:repeat(2,1fr)} @media (min-width:640px){.r-2{grid-template-columns:repeat(2,1fr)}.r-3{grid-template-columns:repeat(2,1fr)}} @media (min-width:1024px){.r-3{grid-template-columns:repeat(3,1fr)}.r-4{grid-template-columns:repeat(4,1fr)}} /* Tarjeta de métrica, calcada de metric-group-01 de TailAdmin */ .metrica .ico{ width:48px;height:48px;border-radius:var(--r);background:var(--gray-100); display:flex;align-items:center;justify-content:center;color:var(--gray-800); } html.dark .metrica .ico{background:var(--gray-800);color:#fff} .metrica .ico svg{width:24px;height:24px} .metrica .pie{margin-top:18px;display:flex;align-items:flex-end;justify-content:space-between;gap:10px} .metrica .et{font-size:13px;color:var(--texto-2)} .metrica .num{margin-top:5px;font-size:28px;font-weight:700;letter-spacing:-.02em;color:var(--texto)} .chip{display:inline-flex;align-items:center;gap:5px;border-radius:99px;padding:3px 10px; font-size:12px;font-weight:500;white-space:nowrap} .chip-ok{background:var(--success-50);color:var(--success-700)} .chip-no{background:var(--error-50);color:var(--error-700)} .chip-av{background:var(--warning-50);color:var(--warning-700)} .chip-nt{background:var(--gray-100);color:var(--gray-600)} html.dark .chip-ok{background:rgba(18,183,106,.15);color:#5fdba0} html.dark .chip-no{background:rgba(240,68,56,.15);color:#f9a19a} html.dark .chip-av{background:rgba(247,144,9,.15);color:#f8c17c} html.dark .chip-nt{background:rgba(255,255,255,.07);color:var(--gray-300)} /* --------------------------------- BOTONES -------------------------------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:11px 18px;border-radius:10px;border:1px solid transparent; font:inherit;font-weight:500;font-size:14px;cursor:pointer;text-decoration:none; transition:background .15s,border-color .15s,color .15s; } /* Sin esto, un icono dentro de un botón ancho se estira hasta ocupar la tarjeta entera: el SVG no tiene tamaño intrínseco. */ .btn svg{width:17px;height:17px;flex:0 0 auto} .btn-sm svg{width:15px;height:15px} .btn-p{background:var(--brand-500);color:#fff} .btn-p:hover{background:var(--brand-600)} .btn-s{background:var(--panel);border-color:var(--borde);color:var(--texto)} .btn-s:hover{background:var(--hover)} .btn-d{background:var(--error-500);color:#fff} .btn-d:hover{background:var(--error-600)} .btn-sm{padding:8px 13px;font-size:13px} .btn:disabled{opacity:.55;cursor:not-allowed} /* -------------------------------- FORMULARIOS ----------------------------- */ .campo{margin-bottom:16px} .campo label{display:block;font-size:13px;font-weight:500;margin-bottom:7px;color:var(--texto)} .campo .ayuda{font-size:12px;color:var(--texto-3);margin-top:6px} input[type=text],input[type=email],input[type=password],input[type=date],input[type=tel],select,textarea{ width:100%;padding:11px 14px;border:1px solid var(--borde);border-radius:10px; background:var(--panel);color:var(--texto);font:inherit;font-size:14px; transition:border-color .15s,box-shadow .15s; } input:focus,select:focus,textarea:focus{ outline:none;border-color:var(--brand-300);box-shadow:0 0 0 3px var(--brand-50); } html.dark input:focus,html.dark select:focus,html.dark textarea:focus{box-shadow:0 0 0 3px rgba(70,95,255,.2)} input::placeholder,textarea::placeholder{color:var(--texto-3)} textarea{resize:vertical;min-height:96px} input[type=file]{font-size:13px;color:var(--texto-2)} /* ---------------------------------- AVISOS -------------------------------- */ .aviso{display:flex;gap:12px;padding:14px 16px;border-radius:var(--r);margin-bottom:18px;font-size:14px} .aviso svg{width:20px;height:20px;flex:0 0 auto;margin-top:1px} .aviso b{display:block;margin-bottom:2px} .aviso-ok{background:var(--success-50);color:var(--success-700)} .aviso-no{background:var(--error-50);color:var(--error-700)} .aviso-av{background:var(--warning-50);color:var(--warning-700)} .aviso-in{background:var(--brand-50);color:var(--brand-700)} html.dark .aviso-ok{background:rgba(18,183,106,.12);color:#7ee2b0} html.dark .aviso-no{background:rgba(240,68,56,.12);color:#f9a19a} html.dark .aviso-av{background:rgba(247,144,9,.12);color:#f8c17c} html.dark .aviso-in{background:rgba(70,95,255,.12);color:#a9b8ff} /* --------------------------------- AVATAR --------------------------------- */ .avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:0 0 auto; background:var(--brand-500);color:#fff;display:flex;align-items:center;justify-content:center; font-weight:600;font-size:16px;overflow:hidden} .avatar-xl{width:96px;height:96px;font-size:32px} /* --------------------------------- TABLAS --------------------------------- */ .tabla-envuelta{overflow-x:auto;margin:0 -20px;padding:0 20px} table{width:100%;border-collapse:collapse;font-size:14px} th{text-align:left;font-weight:500;font-size:12px;letter-spacing:.04em;text-transform:uppercase; color:var(--texto-3);padding:0 14px 12px;border-bottom:1px solid var(--borde);white-space:nowrap} td{padding:14px;border-bottom:1px solid var(--borde);color:var(--texto-2);vertical-align:middle} tr:last-child td{border-bottom:0} td b{color:var(--texto);font-weight:600} /* ------------------------------ LISTA DE IAs ------------------------------ */ .ia-fila{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--borde)} .ia-fila:last-child{border-bottom:0} .ia-punto{width:38px;height:38px;border-radius:11px;flex:0 0 auto;display:flex; align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px} .ia-txt{flex:1;min-width:0} .ia-txt b{display:block;color:var(--texto)} .ia-txt span{font-size:13px;color:var(--texto-2)} /* -------------------------------- VACÍOS ---------------------------------- */ .vacio{text-align:center;padding:34px 18px;color:var(--texto-2)} .vacio svg{width:44px;height:44px;color:var(--texto-3);margin:0 auto 12px} .vacio b{display:block;color:var(--texto);margin-bottom:5px} /* ------------------------------- ACCESO ----------------------------------- */ .acceso{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:22px} .acceso .caja{width:min(420px,100%)} .acceso .marca{display:flex;align-items:center;gap:11px;justify-content:center;margin-bottom:24px} .velo{position:fixed;inset:0;background:rgba(16,24,40,.5);z-index:50;display:none} .velo.on{display:block} @media (min-width:1024px){.velo{display:none!important}} .solo-lectores{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0} /* ---------------------- CLARO / OSCURO EN LA CABECERA --------------------- Se resuelve en CSS, no en JavaScript: el icono correcto ya está pintado en el primer fotograma, sin el parpadeo de "sol y luego luna". */ .solo-oscuro{display:none} html.dark .solo-claro{display:none} html.dark .solo-oscuro{display:inline-flex} /* El nombre junto al avatar solo cabe con algo de ancho. */ .nom-cab{display:none} @media (min-width:640px){.nom-cab{display:block}} /* -------------------------------- DATOS ---------------------------------- Inventario de privacidad: qué guarda cada asesor y para qué. */ .dato-fila{display:flex;gap:14px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--borde)} .dato-fila:last-child{border-bottom:0} .dato-fila .ia-punto{width:32px;height:32px;border-radius:9px;font-size:12px} .dato-fila .qs{flex:1;min-width:0} .dato-fila .qs b{display:block;color:var(--texto);font-size:13.5px} .dato-fila .qs span{font-size:12.5px;color:var(--texto-2);display:block;margin-top:2px} .dato-fila .cant{font-size:12.5px;color:var(--texto-3);white-space:nowrap;padding-top:2px} /* Interruptor de consentimiento. */ .switch{display:inline-flex;align-items:center;gap:11px;cursor:pointer} .switch input{position:absolute;opacity:0;width:0;height:0} .switch .via{width:42px;height:24px;border-radius:999px;background:var(--gray-200); position:relative;transition:background .15s;flex:0 0 auto} html.dark .switch .via{background:rgba(255,255,255,.14)} .switch .via::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px; border-radius:50%;background:#fff;transition:transform .15s;box-shadow:0 1px 3px rgba(16,24,40,.2)} .switch input:checked + .via{background:var(--brand-500)} .switch input:checked + .via::after{transform:translateX(18px)} .switch input:focus-visible + .via{outline:2px solid var(--brand-500);outline-offset:2px} .zona-riesgo{border-color:var(--error-500)} html.dark .zona-riesgo{border-color:rgba(240,68,56,.45)} /* ------------------------------- FOTO ------------------------------------- El avatar es el control. Se pincha y se abre el menú de foto: el nativo es feo y ocupa espacio para nada. Ojo con .solo-lectores en el input: lo oculta a la vista pero NO al lector de pantalla ni al teclado, y sigue enviándose con el formulario. Si el JavaScript no carga, la regla de abajo lo devuelve a la vista para que se pueda subir la foto igual. */ .cab-perfil{display:flex;gap:20px;align-items:center;flex-wrap:wrap} .foto-boton{position:relative;padding:0;border:0;background:none;cursor:pointer; border-radius:50%;line-height:0;flex:0 0 auto} .foto-boton:focus-visible{outline:2px solid var(--brand-500);outline-offset:3px} .foto-capa{position:absolute;inset:0;border-radius:50%;display:flex; align-items:center;justify-content:center;background:rgba(16,24,40,.55); color:#fff;opacity:0;transition:opacity .15s} .foto-capa svg{width:26px;height:26px} .foto-boton:hover .foto-capa,.foto-boton:focus-visible .foto-capa{opacity:1} /* En táctil no hay hover: se deja una pista permanente y discreta. */ @media (hover:none){ .foto-capa{opacity:1;inset:auto 0 0 auto;width:30px;height:30px;background:var(--brand-500); border:2px solid var(--panel)} .foto-capa svg{width:15px;height:15px} } html.sin-js .solo-lectores[type=file]{position:static;width:auto;height:auto;margin:0; clip:auto;white-space:normal;margin-top:12px} /* --------------------------------- MODAL ---------------------------------- */ .modal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:20px} .modal[hidden]{display:none} .modal-fondo{position:absolute;inset:0;background:rgba(16,24,40,.6)} .modal-caja{position:relative;background:var(--panel);border:1px solid var(--borde); border-radius:16px;width:min(420px,100%);max-height:90vh;overflow:auto;box-shadow:var(--shadow-lg)} .modal-cab{display:flex;align-items:center;justify-content:space-between;gap:12px; padding:16px 18px;border-bottom:1px solid var(--borde)} .modal-cuerpo{padding:20px 18px} .modal-pie{display:flex;gap:10px;padding:0 18px 18px} .foto-grande{display:block;width:100%;max-width:280px;margin:0 auto;border-radius:14px} .foto-vacia{text-align:center;color:var(--texto-3);padding:22px 0} .foto-vacia svg{width:56px;height:56px;margin:0 auto 10px} .foto-vacia p{font-size:13.5px} @media print{.sidebar,.cabecera,.velo,.no-imprimir{display:none!important}.contenido{margin-left:0}}