/*
* Varys — design tokens.
* Toda referencia a color va a través de variables. Cambiar la marca = editar
* este bloque y nada más.
*/
:root {
/* Marca */
--brand-primary: #1e293b; /* navy de estructura/texto, un punto más suave */
--brand-accent: #2563eb; /* azul confianza — acción (CTAs/links/acentos) */
--brand-accent-warm: #f59e0b; /* ámbar cálido — detalles y "trust" */
--brand-bg: #ffffff;
--brand-text: #1f2937; /* gris carbón, no negro puro */
--brand-muted: #64748b;
--brand-border: #e7eaf0;
--brand-surface: #f6f8fc; /* superficie levemente más cálida/luminosa */
/* Tintes del hero — degradado suave que rompe el blanco */
--hero-tint-1: #eef2ff; /* índigo muy claro */
--hero-tint-2: #fef6ec; /* crema cálida */
/* Estados */
--color-success: #16a34a;
--color-warning: #d97706;
--color-error: #dc2626;
--color-info: #0284c7;
/* Tipografía */
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter",
Roboto, "Helvetica Neue", Arial, sans-serif;
--font-mono: ui-monospace, SFMono-Regular, "Menlo", "Monaco",
"Cascadia Mono", "Consolas", monospace;
/* Layout */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--shadow-sm: 0 1px 2px rgba(30, 41, 59, 0.05);
--shadow-md: 0 8px 24px rgba(30, 41, 59, 0.08);
--sidebar-width: 248px;
--sidebar-collapsed-width: 64px;
--topbar-height: 56px;
}
[data-theme="dark"] {
--brand-bg: #0b1220;
--brand-text: #e2e8f0;
--brand-muted: #94a3b8;
--brand-border: #1e293b;
--brand-surface: #111827;
--hero-tint-1: #111a33;
--hero-tint-2: #1a1626;
}
* { box-sizing: border-box; }
/* HTML5 [hidden] como contrato universal: cuando JS pone `el.hidden = true`,
la regla por defecto del navegador (display: none) pierde ante cualquier
regla con especificidad de clase (display: grid|flex|block). Forzamos el
contrato con !important para que Stimulus pueda confiar en `el.hidden`. */
[hidden] { display: none !important; }
html, body {
margin: 0;
padding: 0;
font-family: var(--font-sans);
background: var(--brand-bg);
color: var(--brand-text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 1.5;
}
a { color: var(--brand-primary); text-decoration: none; }
a:hover { color: var(--brand-accent); }
h1, h2, h3, h4 { margin: 0 0 12px; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 28px; line-height: 1.2; }
h2 { font-size: 22px; }
h3 { font-size: 17px; }
p { margin: 0 0 12px; color: var(--brand-text); }
.page-title { font-size: 28px; margin: 0 0 4px; }
.page-lede { color: var(--brand-muted); margin: 0 0 32px; max-width: 720px; }
.section-title {
margin: 28px 0 12px;
font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em;
color: var(--brand-muted); font-weight: 600;
}
/* Visually hidden, accesible para lectores de pantalla. */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ── Botones ────────────────────────────────────────────────── */
.btn {
display: inline-flex; align-items: center; justify-content: center;
gap: 6px;
padding: 10px 18px;
border: 1px solid transparent;
border-radius: var(--radius-md);
font: inherit; font-weight: 500;
cursor: pointer; transition: background 120ms, border-color 120ms, color 120ms;
text-decoration: none;
}
.btn-primary { background: var(--brand-accent); color: #fff; border-color: var(--brand-accent); }
.btn-primary:hover { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.btn-secondary { background: transparent; color: var(--brand-text); border-color: var(--brand-border); }
.btn-secondary:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.btn-full { width: 100%; }
.btn-lg { padding: 14px 24px; font-size: 16px; }
/* ── Forms ──────────────────────────────────────────────────── */
.form-group { margin-bottom: 16px; }
.form-group label {
display: block; margin-bottom: 6px;
font-size: 13px; font-weight: 500; color: var(--brand-muted);
}
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="text"],
.form-group input[type="number"],
.form-group select,
.form-group textarea {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--brand-border);
border-radius: var(--radius-md);
font: inherit;
background: var(--brand-bg); color: var(--brand-text);
transition: border-color 120ms;
}
.form-group textarea { resize: vertical; min-height: 96px; }
.form-group textarea.mono { font-family: var(--font-mono); font-size: 13px; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--brand-primary);
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.06);
}
.form-group .help { display: block; font-size: 12px; color: var(--brand-muted); margin-top: 4px; }
.form-check { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 14px; }
.form-actions { display: flex; gap: 8px; margin-top: 20px; }
.form-grid {
display: grid; gap: 0 16px;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
/* Variante estricta de 2 columnas (responsive a 1 col bajo 560px). */
.form-grid--cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
}
.form-grid--cols-2 > .form-group { margin-bottom: 0; }
@media (max-width: 560px) {
.form-grid--cols-2 { grid-template-columns: 1fr; }
}
/* ── Alertas ────────────────────────────────────────────────── */
.alert {
padding: 12px 14px; border-radius: var(--radius-md);
margin-bottom: 16px; font-size: 14px;
border: 1px solid transparent;
}
.alert-error { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.alert-success { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.alert-info { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.alert-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
/* ── Auth pages (login, forgot, reset) ──────────────────────── */
.auth-page {
min-height: 100vh;
display: flex; align-items: center; justify-content: center;
background: var(--brand-surface);
padding: 24px;
}
.auth-container { width: 100%; max-width: 380px; }
.auth-brand { text-align: center; margin-bottom: 32px; }
.auth-brand .brand-mark {
display: inline-flex; align-items: center; justify-content: center;
width: 56px; height: 56px;
background: var(--brand-primary);
border-radius: var(--radius-md);
margin-bottom: 16px;
}
.auth-brand h1 { font-size: 24px; margin: 0 0 4px; color: var(--brand-primary); }
.auth-brand p { font-size: 14px; color: var(--brand-muted); margin: 0; }
.auth-card {
background: var(--brand-bg);
border: 1px solid var(--brand-border);
border-radius: var(--radius-lg);
padding: 28px;
box-shadow: var(--shadow-md);
}
.auth-link {
display: block; text-align: center;
margin-top: 16px; font-size: 14px; color: var(--brand-muted);
}
.auth-link:hover { color: var(--brand-primary); }
/* ── Landing pública ────────────────────────────────────────── */
.landing { min-height: 100vh; display: flex; flex-direction: column; }
.landing-header {
padding: 24px 32px;
display: flex; align-items: center; justify-content: space-between;
border-bottom: 1px solid var(--brand-border);
}
.landing-logo {
display: flex; align-items: center; gap: 10px;
color: var(--brand-primary);
font-weight: 600; font-size: 18px;
}
.landing-logo svg { width: 28px; height: 28px; }
.landing-hero {
flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; padding: 80px 24px;
max-width: 720px; margin: 0 auto;
}
.landing-hero .eyebrow {
text-transform: uppercase; letter-spacing: 0.08em;
font-size: 12px; color: var(--brand-accent); font-weight: 600; margin-bottom: 16px;
}
.landing-hero h1 { font-size: 48px; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 16px; }
.landing-hero .lede { font-size: 18px; color: var(--brand-muted); max-width: 560px; margin: 0 auto 32px; }
.landing-cta { display: inline-flex; gap: 12px; }
.landing-features {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
max-width: 960px; margin: 0 auto; padding: 64px 24px;
border-top: 1px solid var(--brand-border);
}
.feature { text-align: left; }
.feature h3 { font-size: 16px; color: var(--brand-primary); margin-bottom: 8px; }
.feature p { font-size: 14px; color: var(--brand-muted); margin: 0; }
.landing-footer {
padding: 24px 32px; border-top: 1px solid var(--brand-border);
text-align: center; font-size: 13px; color: var(--brand-muted);
}
.landing-footer a { color: var(--brand-primary); }
.landing-footer a:hover { color: var(--brand-accent); }
@media (max-width: 720px) {
.landing-hero h1 { font-size: 34px; }
.landing-features { grid-template-columns: 1fr; padding: 40px 24px; }
}
/* ── Landing pública: header sticky, nav, footer, accesibilidad ─────── */
.skip-link {
position: absolute; left: -9999px; top: 0; z-index: 100;
background: var(--brand-primary); color: #fff;
padding: 10px 16px; border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus { left: 0; }
/* Honeypot anti-spam: fuera de pantalla para humanos. */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.landing-header {
position: sticky; top: 0; z-index: 50;
background: rgba(255, 255, 255, 0.88);
backdrop-filter: saturate(180%) blur(8px);
}
.landing-nav { display: flex; gap: 28px; }
.landing-nav-link { font-size: 14px; font-weight: 500; color: var(--brand-muted); }
.landing-nav-link:hover { color: var(--brand-text); }
.landing-header-actions { display: flex; align-items: center; gap: 16px; }
.landing-login { font-size: 14px; font-weight: 500; color: var(--brand-text); }
.landing-login:hover { color: var(--brand-accent); }
.landing-footer-inner { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.landing-footer-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--brand-primary); font-weight: 600; }
.landing-footer-brand svg { width: 22px; height: 22px; }
.landing-footer-tagline { margin: 0; font-size: 14px; color: var(--brand-text); }
.landing-footer-legal { margin: 0; font-size: 13px; color: var(--brand-muted); }
/* CTA fija inferior (solo móvil) */
.landing-cta-mobile { display: none; }
/* Scroll por ancla: reserva el alto del header sticky (~95px) en el scrollport
para que el título de la sección no quede oculto, y transición suave
(respetando reduced-motion). scroll-padding-top en el contenedor es más
robusto que scroll-margin-top por destino para navegación por fragmento. */
html { scroll-padding-top: 112px; }
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}
/* ── Home (landing del agente de Seguros) ───────────────────────────── */
.home-hero, .home-problem, .home-section, .home-showcase, .home-contact {
max-width: 1080px; margin: 0 auto; padding: 64px 24px;
}
.home-hero {
text-align: center; padding-top: 80px; padding-bottom: 64px;
display: flex; flex-direction: column; align-items: center;
background: linear-gradient(160deg, var(--hero-tint-1) 0%, var(--hero-tint-2) 100%);
border-radius: var(--radius-lg);
margin-top: 16px;
}
.home-hero .eyebrow {
text-transform: uppercase; letter-spacing: 0.08em;
font-size: 12px; font-weight: 700; color: var(--brand-accent); margin-bottom: 18px;
}
.home-hero-title {
font-size: 52px; line-height: 1.08; letter-spacing: -0.02em;
max-width: 760px; margin: 0 0 20px; color: var(--brand-text);
}
.home-hero-lede { font-size: 19px; line-height: 1.5; color: var(--brand-muted); max-width: 620px; margin: 0 0 32px; }
.home-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; max-width: 100%; }
.home-hero-trust { margin: 24px auto 0; max-width: 480px; font-size: 13px; line-height: 1.5; color: var(--brand-muted); }
.home-hero-trust svg { width: 16px; height: 16px; color: var(--color-success); vertical-align: -3px; margin-right: 6px; }
.home-problem { text-align: center; padding-top: 24px; padding-bottom: 24px; }
.home-problem-title { font-size: 28px; letter-spacing: -0.01em; margin: 0 auto 12px; max-width: 700px; color: var(--brand-text); }
.home-problem-body { font-size: 16px; line-height: 1.6; color: var(--brand-muted); max-width: 700px; margin: 0 auto; }
.home-section--alt { background: var(--brand-surface); border-radius: var(--radius-lg); }
.home-section-head { text-align: center; max-width: 680px; margin: 0 auto 40px; }
.home-section-title { font-size: 30px; letter-spacing: -0.01em; margin: 0 0 10px; color: var(--brand-text); }
.home-section-lede { font-size: 16px; line-height: 1.55; color: var(--brand-muted); margin: 0; }
.home-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.home-feature {
padding: 24px;
background: var(--brand-bg); border: 1px solid var(--brand-border);
border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.home-feature-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px; border-radius: var(--radius-md);
background: rgba(37, 99, 235, 0.10); color: var(--brand-accent); margin-bottom: 14px;
}
.home-feature-icon svg { width: 22px; height: 22px; }
/* Un tinte distinto por feature para dar vida y ayudar a escanear */
.home-feature:nth-child(1) .home-feature-icon { background: rgba(37, 99, 235, 0.10); color: #2563eb; }
.home-feature:nth-child(2) .home-feature-icon { background: rgba(245, 158, 11, 0.12); color: #d97706; }
.home-feature:nth-child(3) .home-feature-icon { background: rgba(139, 92, 246, 0.12); color: #8b5cf6; }
.home-feature:nth-child(4) .home-feature-icon { background: rgba(22, 163, 74, 0.12); color: #16a34a; }
.home-feature:nth-child(5) .home-feature-icon { background: rgba(2, 132, 199, 0.12); color: #0284c7; }
.home-feature-title { font-size: 17px; margin: 0 0 6px; color: var(--brand-text); }
.home-feature-body { font-size: 14px; line-height: 1.55; color: var(--brand-muted); margin: 0; }
.home-steps {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.home-step { text-align: center; }
.home-step-num {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; border-radius: 50%;
background: var(--brand-accent); color: #fff; font-weight: 600; margin-bottom: 14px;
box-shadow: 0 4px 10px rgba(37, 99, 235, 0.25);
}
.home-step-title { font-size: 18px; margin: 0 0 6px; color: var(--brand-text); }
.home-step-body { font-size: 14px; line-height: 1.55; color: var(--brand-muted); margin: 0; }
.home-showcase { display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; }
.home-showcase-text { max-width: 680px; }
.home-shot { margin: 0; width: 100%; max-width: 960px; }
.home-shot-frame {
border: 1px solid var(--brand-border); border-radius: var(--radius-lg);
overflow: hidden; box-shadow: var(--shadow-md); background: var(--brand-bg);
}
.home-shot-dots { display: flex; gap: 6px; padding: 12px 14px; background: var(--brand-surface); border-bottom: 1px solid var(--brand-border); }
.home-shot-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--brand-border); }
.home-shot-img { display: block; width: 100%; height: auto; }
.home-shot-caption { margin-top: 12px; font-size: 13px; color: var(--brand-muted); }
.home-audience { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.home-audience-item {
padding: 22px; background: var(--brand-bg);
border: 1px solid var(--brand-border); border-left: 3px solid var(--brand-accent-warm);
border-radius: var(--radius-lg);
}
.home-audience-title { font-size: 16px; margin: 0 0 6px; color: var(--brand-text); }
.home-audience-body { font-size: 14px; line-height: 1.55; color: var(--brand-muted); margin: 0; }
.home-faq { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.home-faq-item { border: 1px solid var(--brand-border); border-radius: var(--radius-md); background: var(--brand-bg); padding: 0 18px; }
.home-faq-q {
cursor: pointer; list-style: none; position: relative;
font-size: 16px; font-weight: 600; color: var(--brand-text);
padding: 16px 28px 16px 0;
}
.home-faq-q::-webkit-details-marker { display: none; }
.home-faq-q::after { content: '+'; position: absolute; right: 0; top: 14px; font-size: 20px; color: var(--brand-muted); }
.home-faq-item[open] .home-faq-q::after { content: '\2212'; }
.home-faq-a { margin: 0 0 16px; font-size: 15px; line-height: 1.6; color: var(--brand-muted); }
.home-contact { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 40px; align-items: start; }
.home-contact-aside-title { font-size: 15px; margin: 24px 0 10px; color: var(--brand-text); }
.home-contact-steps { margin: 0; padding-left: 18px; color: var(--brand-muted); font-size: 14px; line-height: 1.7; }
.home-contact-form-wrap {
background: var(--brand-bg); border: 1px solid var(--brand-border);
border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-sm);
}
.home-contact-form .form-group { margin-bottom: 16px; }
.home-contact-submit { width: 100%; justify-content: center; margin-top: 8px; }
@media (max-width: 860px) {
.landing-nav { display: none; }
/* El header se reduce: el CTA "Solicitar acceso" vive en la barra fija inferior. */
.landing-header { padding: 14px 18px; }
.landing-header-actions .btn-primary { display: none; }
.landing-cta-mobile {
display: flex; position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60;
align-items: center; justify-content: center; gap: 8px;
padding: 14px; border-radius: var(--radius-lg);
background: var(--brand-accent); color: #fff; font-weight: 600;
box-shadow: var(--shadow-md);
}
.landing-footer { padding-bottom: 88px; }
.home-features { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
html { scroll-padding-top: 78px; }
.home-hero, .home-problem, .home-section, .home-showcase, .home-contact { padding: 48px 20px; }
.home-hero-title { font-size: 34px; }
.home-hero-lede { font-size: 17px; }
.home-section-title { font-size: 24px; }
.home-steps { grid-template-columns: 1fr; }
.home-contact { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 560px) {
.home-features { grid-template-columns: 1fr; }
.home-audience { grid-template-columns: 1fr; }
}
/* ── App layout (sidebar + main) ────────────────────────────── */
.app-layout {
display: flex;
min-height: 100vh;
}
.sidebar {
width: var(--sidebar-width);
flex-shrink: 0;
background: var(--brand-primary);
color: #cbd5e1;
display: flex; flex-direction: column;
position: sticky; top: 0; height: 100vh;
}
.sidebar-header {
padding: 20px 18px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.sidebar-logo {
display: flex; align-items: center; gap: 10px;
color: #fff; font-weight: 600; font-size: 17px;
}
.sidebar-logo svg { width: 26px; height: 26px; color: #fff; flex-shrink: 0; }
.sidebar-header--agent { padding: 14px 18px 16px; }
.sidebar-back {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
color: #94a3b8; padding: 4px 0;
}
.sidebar-back:hover { color: #fff; }
.sidebar-agent {
display: flex; align-items: center; gap: 10px;
margin-top: 10px;
}
.sidebar-agent-dot {
width: 10px; height: 10px; border-radius: 50%;
background: var(--agent-color, #c9a14a);
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06);
}
.sidebar-agent-name { color: #fff; font-weight: 600; font-size: 16px; }
.sidebar-nav {
flex: 1;
padding: 12px 8px;
overflow-y: auto;
display: flex; flex-direction: column; gap: 2px;
justify-content: safe center;
scrollbar-width: none;
-ms-overflow-style: none;
}
.sidebar-nav::-webkit-scrollbar { display: none; }
.nav-item {
display: flex; align-items: center; gap: 12px;
padding: 9px 12px;
color: #cbd5e1;
border-radius: var(--radius-md);
font-size: 14px;
transition: background 120ms, color 120ms;
}
.nav-item:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.nav-item.active {
background: rgba(255, 255, 255, 0.1);
color: #fff;
font-weight: 500;
}
.nav-item.active::before {
content: ''; position: absolute; margin-left: -16px;
width: 3px; height: 18px;
background: var(--agent-color, var(--brand-accent));
border-radius: 2px;
}
.nav-item { position: relative; }
.nav-item svg, .nav-item .nav-icon svg {
width: 18px; height: 18px; flex-shrink: 0;
}
.nav-item--danger:hover { color: #fca5a5; }
/* Grupos anidados (Módulos → Seguros, etc.) */
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-sub {
display: flex; flex-direction: column;
margin: 2px 0 4px 18px;
padding-left: 12px;
border-left: 1px solid rgba(255, 255, 255, 0.08);
transition: margin 220ms ease, padding 220ms ease, border-color 220ms ease;
}
.nav-item--sub {
font-size: 13px;
color: #94a3b8;
}
.nav-item--sub:hover { color: #fff; }
.nav-item--sub.active {
background: rgba(255, 255, 255, 0.08);
color: #fff;
font-weight: 500;
}
.nav-item--sub.active::before { display: none; }
.sidebar-divider {
height: 1px; background: rgba(255, 255, 255, 0.06);
margin: 12px 4px;
}
.sidebar-footer {
padding: 8px 8px 16px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
display: flex; flex-direction: column; gap: 2px;
}
/* Badge (modo admin u otros) */
.sidebar-badge {
display: inline-block;
margin-top: 6px;
padding: 2px 8px;
border-radius: 999px;
background: rgba(201, 161, 74, 0.15);
color: var(--brand-accent);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
}
/* Contexto activo (cliente / agente / atajos) */
.sidebar-context {
padding: 10px 12px;
display: flex; flex-direction: column; gap: 6px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.sidebar-ctx-chip {
display: flex; align-items: center; gap: 8px;
padding: 8px 10px;
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.04);
color: #cbd5e1;
font-size: 13px;
line-height: 1.2;
cursor: default;
}
.sidebar-ctx-icon {
width: 18px; height: 18px;
flex-shrink: 0;
color: #94a3b8;
}
.sidebar-ctx-icon--dot {
width: 12px; height: 12px;
margin: 0 3px;
border-radius: 50%;
background: var(--agent-color, var(--brand-accent));
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06);
color: transparent;
}
.sidebar-ctx-chip--interactive {
cursor: pointer;
transition: background 120ms;
list-style: none;
}
.sidebar-ctx-chip--interactive::-webkit-details-marker { display: none; }
.sidebar-ctx-chip--interactive:hover { background: rgba(255, 255, 255, 0.08); }
.sidebar-ctx-label {
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #94a3b8;
flex-shrink: 0;
}
.sidebar-ctx-value {
color: #fff;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
min-width: 0;
}
.sidebar-ctx-caret {
color: #94a3b8;
flex-shrink: 0;
transition: transform 150ms;
}
.sidebar-ctx-select[open] .sidebar-ctx-caret { transform: rotate(180deg); }
.sidebar-ctx-menu {
margin-top: 4px;
padding: 4px;
border-radius: var(--radius-md);
background: rgba(0, 0, 0, 0.25);
display: flex; flex-direction: column; gap: 2px;
}
.sidebar-ctx-menu-item {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
width: 100%;
padding: 7px 10px;
border: 0;
background: transparent;
color: #cbd5e1;
font: inherit;
font-size: 13px;
text-align: left;
border-radius: var(--radius-sm);
cursor: pointer;
transition: background 120ms, color 120ms;
}
.sidebar-ctx-menu-item:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.sidebar-ctx-menu-item.is-current {
background: rgba(255, 255, 255, 0.08);
color: #fff;
font-weight: 500;
}
.sidebar-ctx-tag {
font-size: 10px;
padding: 1px 6px;
border-radius: 999px;
background: rgba(201, 161, 74, 0.18);
color: var(--brand-accent);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.sidebar-ctx-tag--override {
background: rgba(201, 161, 74, 0.32);
color: #fde68a;
}
/* Banner de "Modo administrador": aparece cuando un super-admin entra a un
customer sin tener membership real. Recordatorio visual de que está
operando en contexto ajeno. */
.admin-override-banner {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
padding: 12px 16px;
background: rgba(201, 161, 74, 0.08);
border: 1px solid rgba(201, 161, 74, 0.3);
border-radius: var(--radius-md);
color: var(--brand-text);
font-size: 13px;
line-height: 1.45;
}
.admin-override-banner svg {
width: 22px;
height: 22px;
color: var(--brand-accent);
flex-shrink: 0;
}
.admin-override-banner strong {
font-weight: 600;
}
/* Sección de usuario (pie): icono Salir + bloque clickeable al perfil */
.sidebar-user {
padding: 10px 10px 14px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
display: flex; flex-direction: row; align-items: center; gap: 8px;
}
.sidebar-user-logout {
width: 40px; height: 40px;
flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--radius-md);
color: #cbd5e1;
transition: background 120ms, color 120ms;
}
.sidebar-user-logout svg {
width: 22px; height: 22px;
flex-shrink: 0;
transform: rotate(180deg);
}
.sidebar-user-logout:hover {
background: rgba(252, 165, 165, 0.12);
color: #fca5a5;
}
.sidebar-user-link {
flex: 1; min-width: 0;
display: flex; flex-direction: column;
line-height: 1.2;
padding: 6px 10px;
border-radius: var(--radius-md);
color: inherit;
transition: background 120ms;
}
.sidebar-user-link:hover { background: rgba(255, 255, 255, 0.06); }
.sidebar-user-link.is-current { background: rgba(255, 255, 255, 0.08); }
.sidebar-user-name {
color: #fff;
font-size: 13px;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sidebar-user-email {
color: #94a3b8;
font-size: 11px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Mobile sidebar */
.sidebar-overlay {
display: none;
position: fixed; inset: 0;
background: rgba(15, 23, 42, 0.45);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 40;
}
/* Toggle del menú en mobile (hamburguesa ↔ X, según body.sidebar-open) */
.sidebar-mobile-toggle {
display: none;
position: absolute;
top: calc(env(safe-area-inset-top, 0px) + 10px);
right: 12px;
z-index: 10;
width: 40px; height: 40px;
padding: 0;
border: 0;
border-radius: var(--radius-md);
background: transparent;
color: #cbd5e1;
cursor: pointer;
align-items: center; justify-content: center;
transition: background 120ms, color 120ms;
}
.sidebar-mobile-toggle:hover {
background: rgba(255, 255, 255, 0.08);
color: #fff;
}
.sidebar-mobile-toggle svg { width: 22px; height: 22px; }
.sidebar-mobile-toggle__close { display: none; }
body.sidebar-open .sidebar-mobile-toggle__open { display: none; }
body.sidebar-open .sidebar-mobile-toggle__close { display: inline-block; }
@media (max-width: 768px) {
body.sidebar-open { overflow: hidden; }
/* Panel siempre visible: colapsado por defecto, expande con body.sidebar-open */
.sidebar {
position: fixed; left: 0; top: 0;
z-index: 50;
width: var(--sidebar-collapsed-width);
height: 100vh;
height: 100dvh;
overflow: hidden;
padding-top: env(safe-area-inset-top, 0px);
padding-bottom: env(safe-area-inset-bottom, 0px);
transition: width 220ms cubic-bezier(0.32, 0.72, 0, 1);
}
body.sidebar-open .sidebar {
width: min(280px, 85vw);
box-shadow: 6px 0 32px rgba(0, 0, 0, 0.3);
}
body.sidebar-open .sidebar-overlay { display: block; }
.sidebar-mobile-toggle { display: inline-flex; }
/* Reservar espacio para el panel colapsado */
.main-wrapper { margin-left: var(--sidebar-collapsed-width); }
.main-content { padding-top: 0; }
/* Nav alineado al inicio: convención mobile */
.sidebar-nav { justify-content: flex-start; padding: 18px 8px; }
/* Espacio en el header debajo del toggle absoluto */
.sidebar-header { padding-top: 60px; }
/* Touch targets ≥44px y tipografía un poco mayor */
.nav-item {
font-size: 15px;
min-height: 44px;
}
.sidebar-ctx-chip { min-height: 44px; }
.sidebar-user-logout { width: 44px; height: 44px; }
/* Colapsado: ocultar etiquetas (mismo patrón que desktop, pero con
body.sidebar-open en vez de :hover como gatillo) */
.sidebar .sidebar-logo span,
.sidebar .sidebar-badge,
.sidebar .nav-item > span:not(.nav-icon),
.sidebar .sidebar-user-name,
.sidebar .sidebar-user-email {
white-space: nowrap;
opacity: 0;
transition: opacity 120ms ease;
}
body.sidebar-open .sidebar .sidebar-logo span,
body.sidebar-open .sidebar .sidebar-badge,
body.sidebar-open .sidebar .nav-item > span:not(.nav-icon),
body.sidebar-open .sidebar .sidebar-user-name,
body.sidebar-open .sidebar .sidebar-user-email {
opacity: 1;
transition: opacity 160ms ease 80ms;
}
/* Chips de contexto: reducir a icono en colapsado */
.sidebar-ctx-chip {
transition: padding 220ms ease, gap 220ms ease, background 120ms;
}
.sidebar .sidebar-ctx-label,
.sidebar .sidebar-ctx-value,
.sidebar .sidebar-ctx-caret {
max-width: 0;
opacity: 0;
overflow: hidden;
transition: max-width 220ms ease, opacity 120ms ease;
}
body.sidebar-open .sidebar .sidebar-ctx-label,
body.sidebar-open .sidebar .sidebar-ctx-value,
body.sidebar-open .sidebar .sidebar-ctx-caret {
max-width: 200px;
opacity: 1;
transition: max-width 220ms ease, opacity 160ms ease 80ms;
}
body:not(.sidebar-open) .sidebar .sidebar-ctx-chip {
padding: 8px;
gap: 0;
justify-content: center;
background: transparent;
}
body:not(.sidebar-open) .sidebar .sidebar-ctx-menu { display: none; }
/* Bloque clickeable al perfil: colapsa dejando sólo el icono Salir */
.sidebar-user-link {
max-width: 200px;
transition: max-width 220ms ease,
padding 220ms ease,
opacity 120ms ease;
}
body:not(.sidebar-open) .sidebar .sidebar-user-link {
max-width: 0;
padding-left: 0;
padding-right: 0;
opacity: 0;
}
}
/* Desktop: menú principal colapsado por defecto; se expande al pasar el mouse */
@media (min-width: 769px) {
.sidebar {
position: fixed;
top: 0; left: 0;
height: 100vh;
width: var(--sidebar-collapsed-width);
overflow: hidden;
z-index: 30;
transition: width 220ms ease;
}
.sidebar:hover {
width: var(--sidebar-width);
box-shadow: var(--shadow-md);
}
.main-wrapper {
margin-left: var(--sidebar-collapsed-width);
}
/* Etiquetas de texto: fade en sincronía con la expansión */
.sidebar .sidebar-logo span,
.sidebar .sidebar-badge,
.sidebar .nav-item > span:not(.nav-icon),
.sidebar .sidebar-user-name,
.sidebar .sidebar-user-email {
white-space: nowrap;
opacity: 0;
transition: opacity 120ms ease;
}
.sidebar:hover .sidebar-logo span,
.sidebar:hover .sidebar-badge,
.sidebar:hover .nav-item > span:not(.nav-icon),
.sidebar:hover .sidebar-user-name,
.sidebar:hover .sidebar-user-email {
opacity: 1;
transition: opacity 160ms ease 80ms;
}
/* Sub-items: en colapsado se alinean con los items raíz (sin indent ni borde). */
.sidebar:not(:hover) .nav-sub {
margin-left: 0;
padding-left: 0;
border-left-color: transparent;
}
/* Contexto: visible siempre. En colapsado los chips se reducen a sus iconos. */
.sidebar-ctx-chip {
transition: padding 220ms ease,
gap 220ms ease,
background 120ms;
}
.sidebar .sidebar-ctx-label,
.sidebar .sidebar-ctx-value,
.sidebar .sidebar-ctx-caret {
max-width: 0;
opacity: 0;
overflow: hidden;
transition: max-width 220ms ease, opacity 120ms ease;
}
.sidebar:hover .sidebar-ctx-label,
.sidebar:hover .sidebar-ctx-value,
.sidebar:hover .sidebar-ctx-caret {
max-width: 200px;
opacity: 1;
transition: max-width 220ms ease, opacity 160ms ease 80ms;
}
.sidebar:not(:hover) .sidebar-ctx-chip {
padding: 8px;
gap: 0;
justify-content: center;
background: transparent;
}
.sidebar:not(:hover) .sidebar-ctx-chip:hover {
background: rgba(255, 255, 255, 0.06);
}
.sidebar:not(:hover) .sidebar-ctx-menu {
display: none;
}
/* Bloque clickeable al perfil: colapsa dejando sólo el icono Salir */
.sidebar-user-link {
max-width: 200px;
transition: max-width 220ms ease,
padding 220ms ease,
opacity 120ms ease;
}
.sidebar:not(:hover) .sidebar-user-link {
max-width: 0;
padding-left: 0;
padding-right: 0;
opacity: 0;
}
}
/* Main area */
.main-wrapper {
flex: 1;
display: flex; flex-direction: column;
min-width: 0;
}
.main-content {
flex: 1;
padding: 32px 32px 64px;
max-width: 1280px;
width: 100%;
margin-inline: auto;
}
.main-content--wide { max-width: none; }
/* ── Cards & utilidades ─────────────────────────────────────── */
.card {
background: var(--brand-bg);
border: 1px solid var(--brand-border);
border-radius: var(--radius-lg);
}
.card-body { padding: 24px; }
.empty-state {
text-align: center; padding: 64px 24px;
border: 1px dashed var(--brand-border); border-radius: var(--radius-lg);
}
.empty-state h3 { color: var(--brand-text); margin-bottom: 4px; }
.empty-state p { color: var(--brand-muted); margin: 0; }
.dashboard-cta { margin-top: 8px; }
/* ── Galería de agentes ─────────────────────────────────────── */
.agents-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
margin-top: 8px;
}
.agent-card {
position: relative;
background: var(--brand-bg);
border: 1px solid var(--brand-border);
border-radius: var(--radius-lg);
padding: 24px;
color: var(--brand-text);
display: flex; flex-direction: column;
transition: border-color 150ms, transform 150ms, box-shadow 150ms;
box-shadow: var(--shadow-sm);
}
.agent-card:hover {
border-color: var(--agent-color, var(--brand-primary));
color: var(--brand-text);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.agent-card.is-inactive { opacity: 0.55; }
.agent-card-icon {
width: 44px; height: 44px;
display: flex; align-items: center; justify-content: center;
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--agent-color, var(--brand-accent)) 12%, transparent);
color: var(--agent-color, var(--brand-accent));
margin-bottom: 16px;
}
.agent-card-icon svg { width: 24px; height: 24px; }
.agent-card-name {
font-size: 18px; font-weight: 600;
margin: 0 0 6px;
color: var(--brand-text);
}
.agent-card-desc {
font-size: 14px; color: var(--brand-muted);
margin: 0 0 16px;
}
.agent-card-stats {
display: flex; gap: 16px;
padding-top: 16px;
border-top: 1px solid var(--brand-border);
margin-top: auto;
}
.agent-stat-value {
display: block;
font-size: 18px; font-weight: 600;
color: var(--brand-text);
}
.agent-stat-label {
display: block;
font-size: 12px; color: var(--brand-muted);
text-transform: uppercase; letter-spacing: 0.04em;
}
.agent-card-badge {
position: absolute; top: 16px; right: 16px;
font-size: 11px; padding: 2px 8px;
background: var(--brand-surface);
border: 1px solid var(--brand-border);
border-radius: 999px;
color: var(--brand-muted);
text-transform: uppercase; letter-spacing: 0.04em;
}
/* ── Chat conversacional ────────────────────────────────────── */
.chat-layout {
display: grid;
grid-template-columns: 320px 1fr;
height: calc(100vh - 32px);
margin: -32px -32px -64px;
background: var(--brand-bg);
}
/* Sidebar */
.chat-sidebar {
border-right: 1px solid var(--brand-border);
background: var(--brand-bg);
display: flex; flex-direction: column;
min-width: 0;
}
.chat-sidebar-header {
padding: 18px 20px;
display: flex; align-items: center; justify-content: space-between;
gap: 8px;
}
.chat-sidebar-title {
font-size: 18px; font-weight: 600;
margin: 0; color: var(--brand-text);
letter-spacing: -0.01em;
}
.chat-new-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px;
background: var(--brand-bg);
color: var(--brand-text);
border: 1px solid var(--brand-border);
border-radius: var(--radius-md);
font: inherit; font-size: 13px; font-weight: 500;
cursor: pointer;
text-decoration: none;
transition: border-color 120ms, color 120ms, background 120ms;
}
.chat-new-btn:hover {
border-color: var(--brand-primary);
color: var(--brand-primary);
background: var(--brand-bg);
}
.chat-new-btn svg { width: 14px; height: 14px; }
.chat-sidebar-search {
padding: 0 20px 14px;
display: flex; align-items: center; gap: 8px;
}
.chat-search-input {
position: relative;
flex: 1; min-width: 0;
}
.chat-search-input svg {
position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
width: 14px; height: 14px; color: var(--brand-muted);
}
.chat-search-input input {
width: 100%;
padding: 8px 12px 8px 32px;
border: 1px solid var(--brand-border);
border-radius: var(--radius-md);
background: var(--brand-bg);
font: inherit; font-size: 13px;
color: var(--brand-text);
transition: border-color 120ms, box-shadow 120ms;
}
.chat-search-input input:focus {
outline: none;
border-color: var(--brand-primary);
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.06);
}
.chat-search-filter {
width: 34px; height: 34px;
background: var(--brand-bg);
border: 1px solid var(--brand-border);
border-radius: var(--radius-md);
color: var(--brand-muted);
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
transition: border-color 120ms, color 120ms;
}
.chat-search-filter:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.chat-search-filter svg { width: 14px; height: 14px; }
.chat-sidebar-list {
flex: 1; overflow-y: auto;
padding: 0 12px 12px;
display: flex; flex-direction: column; gap: 4px;
}
.chat-conv-item {
display: block;
width: 100%;
text-align: left;
padding: 10px 12px;
border-radius: var(--radius-md);
text-decoration: none;
color: var(--brand-text);
background: transparent;
border: 1px solid transparent;
font: inherit;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
transition: background 120ms, border-color 120ms;
}
.chat-conv-item:hover {
background: var(--brand-surface);
border-color: var(--brand-border);
}
.chat-conv-item:focus-visible {
outline: 2px solid color-mix(in srgb, var(--brand-primary) 40%, transparent);
outline-offset: 1px;
}
.chat-conv-item.is-active {
background: color-mix(in srgb, var(--brand-accent) 12%, var(--brand-bg));
border-color: color-mix(in srgb, var(--brand-accent) 35%, var(--brand-border));
}
.chat-conv-item.is-active .chat-conv-title { color: var(--brand-primary); }
.chat-conv-top {
display: flex; align-items: baseline; justify-content: space-between;
gap: 8px;
}
.chat-conv-title {
font-size: 13px; font-weight: 600;
color: var(--brand-text);
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1; min-width: 0;
}
.chat-conv-time {
font-size: 11px; color: var(--brand-muted);
flex-shrink: 0;
}
.chat-conv-snippet {
margin-top: 4px;
font-size: 12px; color: var(--brand-muted);
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.chat-sidebar-empty {
padding: 24px 16px;
text-align: center;
color: var(--brand-muted);
font-size: 13px;
}
.chat-sidebar-tip {
margin: 12px 16px 16px;
padding: 14px;
background: linear-gradient(135deg, color-mix(in srgb, var(--brand-accent) 14%, transparent), color-mix(in srgb, var(--brand-accent) 4%, transparent));
border: 1px solid color-mix(in srgb, var(--brand-accent) 30%, var(--brand-border));
border-radius: var(--radius-md);
display: flex; gap: 10px; align-items: flex-start;
position: relative;
}
.chat-tip-icon {
flex-shrink: 0;
width: 28px; height: 28px;
display: inline-flex; align-items: center; justify-content: center;
color: var(--brand-accent);
}
.chat-tip-icon svg { width: 18px; height: 18px; }
.chat-tip-body { flex: 1; min-width: 0; padding-right: 18px; }
.chat-tip-body strong {
display: block;
font-size: 13px; color: var(--brand-text);
margin-bottom: 2px;
}
.chat-tip-body p {
margin: 0;
font-size: 12px; color: var(--brand-muted);
line-height: 1.45;
}
.chat-tip-close {
position: absolute; top: 8px; right: 8px;
width: 22px; height: 22px;
background: transparent; border: 0; padding: 0;
color: var(--brand-muted);
cursor: pointer;
border-radius: var(--radius-sm);
display: inline-flex; align-items: center; justify-content: center;
}
.chat-tip-close:hover { color: var(--brand-text); background: rgba(255,255,255,0.4); }
.chat-tip-close svg { width: 12px; height: 12px; }
/* Panel principal */
.chat-panel {
display: flex; flex-direction: column;
background: var(--brand-surface);
min-width: 0;
}
.chat-panel-header {
padding: 16px 24px;
border-bottom: 1px solid var(--brand-border);
background: var(--brand-bg);
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
}
.chat-panel-heading { min-width: 0; flex: 1; }
.chat-panel-title-row {
display: flex; align-items: center; gap: 6px;
min-width: 0;
}
.chat-panel-title {
font-size: 18px; font-weight: 600;
margin: 0;
color: var(--brand-text);
letter-spacing: -0.01em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
/* Botón-ícono del header del panel. Mismo estilo que .chat-widget__bar-action
(los botones de pantalla completa / minimizar del widget): lo comparten el
toggle de conversaciones, el lápiz de editar título y el de eliminar. */
.chat-hdr-btn {
flex-shrink: 0;
width: 32px; height: 32px;
display: inline-flex; align-items: center; justify-content: center;
padding: 0;
background: transparent;
border: 0;
border-radius: var(--radius-sm, 6px);
color: var(--brand-muted);
cursor: pointer;
transition: background 120ms, color 120ms;
}
.chat-hdr-btn:hover {
background: var(--brand-surface);
color: var(--brand-text);
}
.chat-hdr-btn svg { width: 16px; height: 16px; }
.chat-panel-title-input {
flex: 1; min-width: 0;
font-size: 18px; font-weight: 600;
color: var(--brand-text);
letter-spacing: -0.01em;
padding: 2px 8px;
border: 1px solid var(--brand-primary);
border-radius: var(--radius-sm, 6px);
background: var(--brand-bg);
outline: none;
}
.chat-panel-subtitle {
font-size: 12px; color: var(--brand-muted);
margin: 0;
}
.chat-panel-subtitle strong { color: var(--brand-text); font-weight: 500; }
.chat-panel-sep { color: var(--brand-border); margin: 0 6px; }
.chat-panel-model { font-family: var(--font-mono); font-size: 11px; }
.chat-panel-actions { display: inline-flex; gap: 8px; align-items: center; }
.chat-panel-actions .btn { padding: 6px 12px; }
.chat-panel-actions .btn svg { width: 14px; height: 14px; }
.chat-more {
padding: 6px 8px !important;
min-width: auto;
}
/* Mensajes */
.chat-messages {
flex: 1; overflow-y: auto;
padding: 28px 32px;
display: flex; flex-direction: column; gap: 18px;
}
.chat-msg { display: flex; gap: 10px; }
.chat-msg--user { justify-content: flex-end; }
.chat-msg--assistant { justify-content: flex-start; align-items: flex-start; }
.chat-msg--tool { justify-content: center; }
.chat-msg-avatar {
flex-shrink: 0;
width: 32px; height: 32px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
background: var(--brand-primary);
color: var(--agent-color, var(--brand-accent));
margin-top: 2px;
}
.chat-msg-avatar svg { width: 16px; height: 16px; }
.chat-bubble {
max-width: 65ch;
padding: 12px 14px;
border-radius: 14px;
line-height: 1.55;
word-wrap: break-word;
font-size: 14px;
position: relative;
}
.chat-msg--user .chat-bubble {
background: var(--brand-primary); color: #fff;
border-bottom-right-radius: 4px;
}
.chat-msg--assistant .chat-bubble {
background: var(--brand-bg);
border: 1px solid var(--brand-border);
color: var(--brand-text);
border-top-left-radius: 4px;
box-shadow: var(--shadow-sm);
}
.chat-bubble-content { word-wrap: break-word; }
.chat-bubble-content strong { font-weight: 600; }
.chat-bubble-content em { font-style: italic; }
.chat-bubble-content ul {
margin: 6px 0;
padding-left: 18px;
}
.chat-bubble-content li { margin: 2px 0; }
.chat-bubble-content ol { margin: 6px 0; padding-left: 20px; }
.chat-bubble-content p { margin: 0 0 8px; }
.chat-bubble-content > :first-child { margin-top: 0; }
.chat-bubble-content > :last-child { margin-bottom: 0; }
.chat-bubble-content a {
color: var(--brand-primary);
text-decoration: underline;
word-break: break-word;
}
.chat-msg--user .chat-bubble-content a { color: #fff; }
.chat-bubble-content h1,
.chat-bubble-content h2,
.chat-bubble-content h3,
.chat-bubble-content h4 {
font-size: 14px; font-weight: 700;
margin: 10px 0 6px;
line-height: 1.3;
}
.chat-bubble-content code {
font-family: var(--font-mono);
font-size: 0.86em;
background: color-mix(in srgb, var(--brand-muted) 16%, transparent);
padding: 1px 5px;
border-radius: 4px;
}
.chat-bubble-content pre {
margin: 8px 0;
padding: 10px 12px;
background: var(--brand-primary);
color: #f8fafc;
border-radius: 8px;
overflow-x: auto;
font-size: 12px;
line-height: 1.5;
}
.chat-bubble-content pre code {
background: none; padding: 0; font-size: inherit; color: inherit;
}
.chat-bubble-content blockquote {
margin: 8px 0;
padding: 4px 12px;
border-left: 3px solid var(--brand-border);
color: var(--brand-muted);
}
.chat-bubble-content hr {
border: 0;
border-top: 1px solid var(--brand-border);
margin: 12px 0;
}
.chat-bubble-content table {
display: block;
width: max-content;
max-width: 100%;
overflow-x: auto;
border-collapse: collapse;
margin: 8px 0;
font-size: 13px;
}
.chat-bubble-content th,
.chat-bubble-content td {
border: 1px solid var(--brand-border);
padding: 6px 10px;
text-align: left;
vertical-align: top;
word-break: break-word;
}
.chat-bubble-content thead th {
background: var(--brand-surface);
font-weight: 600;
}
.chat-bubble-content tbody tr:nth-child(even) td {
background: color-mix(in srgb, var(--brand-surface) 60%, transparent);
}
/* Burbuja de usuario (fondo oscuro): mantener legibles código y tablas. */
.chat-msg--user .chat-bubble-content code { background: rgba(255,255,255,0.18); }
.chat-msg--user .chat-bubble-content th,
.chat-msg--user .chat-bubble-content td { border-color: rgba(255,255,255,0.3); }
.chat-msg--user .chat-bubble-content thead th { background: rgba(255,255,255,0.12); }
.chat-msg--user .chat-bubble-content tbody tr:nth-child(even) td { background: rgba(255,255,255,0.06); }
.chat-bubble-meta {
display: flex; align-items: center; justify-content: flex-end;
gap: 6px;
margin-top: 6px;
font-size: 11px;
}
.chat-msg--user .chat-bubble-meta { color: rgba(255,255,255,0.65); }
.chat-msg--assistant .chat-bubble-meta { color: var(--brand-muted); }
.chat-bubble-time { line-height: 1; }
.chat-bubble-checks {
width: 14px; height: 12px;
color: var(--color-success);
}
.chat-msg--user .chat-bubble-checks {
color: #4ade80;
}
.chat-error { background: #fef2f2 !important; border-color: #fecaca !important; color: #991b1b !important; }
.chat-error .chat-bubble-content { color: #991b1b; }
.chat-thinking {
display: inline-flex; gap: 4px; align-items: center;
padding: 14px 16px !important;
}
.chat-thinking span {
width: 6px; height: 6px; border-radius: 50%;
background: var(--brand-muted);
animation: chat-dot 1.2s infinite ease-in-out both;
}
.chat-thinking span:nth-child(2) { animation-delay: -1.0s; }
.chat-thinking span:nth-child(3) { animation-delay: -0.8s; }
@keyframes chat-dot {
0%, 80%, 100% { opacity: 0.2; transform: scale(0.7); }
40% { opacity: 1; transform: scale(1); }
}
.chat-empty {
text-align: center;
margin: 64px auto 0;
max-width: 420px;
color: var(--brand-text);
display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.chat-empty-avatar {
display: inline-flex; align-items: center; justify-content: center;
width: 56px; height: 56px;
border-radius: 50%;
background: var(--brand-primary);
color: var(--agent-color, var(--brand-accent));
margin-bottom: 4px;
}
.chat-empty-avatar svg { width: 26px; height: 26px; }
.chat-empty h3 { font-size: 17px; font-weight: 600; margin: 0; }
.chat-empty p { margin: 0; font-size: 14px; color: var(--brand-muted); }
/* Composer */
.chat-composer {
padding: 14px 20px 18px;
background: var(--brand-bg);
border-top: 1px solid var(--brand-border);
display: flex; gap: 10px; align-items: center;
}
.chat-composer-attach {
flex-shrink: 0;
width: 36px; height: 36px;
background: transparent; border: 1px solid var(--brand-border);
border-radius: var(--radius-md);
color: var(--brand-muted);
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
transition: color 120ms, border-color 120ms;
}
.chat-composer-attach:not(:disabled):hover {
color: var(--brand-primary);
border-color: var(--brand-primary);
}
.chat-composer-attach:disabled { opacity: 0.55; cursor: not-allowed; }
.chat-composer-attach svg { width: 16px; height: 16px; }
.chat-composer textarea {
flex: 1;
min-height: 36px; max-height: 160px;
padding: 8px 12px;
border: 1px solid var(--brand-border);
border-radius: var(--radius-md);
font: inherit; font-size: 14px;
background: var(--brand-bg); color: var(--brand-text);
resize: none;
overflow-y: hidden;
line-height: 1.45;
transition: border-color 120ms, box-shadow 120ms;
}
.chat-composer textarea:focus {
outline: none;
border-color: var(--brand-primary);
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.06);
}
.chat-composer-hint {
font-size: 11px; color: var(--brand-muted);
flex-shrink: 0;
}
.chat-composer-send {
flex-shrink: 0;
width: 38px; height: 38px;
background: var(--brand-accent); color: #fff;
border: 0;
border-radius: var(--radius-md);
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
transition: background 120ms, transform 120ms;
}
.chat-composer-send:hover:not(:disabled) {
background: color-mix(in srgb, var(--brand-accent) 88%, white);
transform: translateY(-1px);
}
.chat-composer-send:disabled { background: var(--brand-muted); cursor: not-allowed; opacity: 0.7; }
.chat-composer-send svg { width: 16px; height: 16px; }
.tool-call-log {
background: color-mix(in srgb, var(--brand-accent) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--brand-accent) 30%, var(--brand-border));
border-radius: var(--radius-md);
padding: 8px 12px;
max-width: 70ch;
font-size: 13px;
}
.tool-call-log summary {
cursor: pointer; color: var(--brand-text);
list-style: none;
}
.tool-call-log summary::-webkit-details-marker { display: none; }
.tool-icon { color: var(--brand-accent); margin-right: 4px; }
.tool-call-log code {
background: var(--brand-bg); border: 1px solid var(--brand-border);
padding: 1px 6px; border-radius: 4px; font-family: var(--font-mono); font-size: 12px;
}
.tool-call-body { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--brand-border); }
.tool-call-row {
display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
padding: 4px 0; font-family: var(--font-mono); font-size: 12px;
}
.tool-status {
padding: 1px 8px; border-radius: 999px; font-size: 11px;
text-transform: uppercase; letter-spacing: 0.04em;
}
.tool-status--ok { background: #dcfce7; color: #166534; }
.tool-status--error { background: #fee2e2; color: #991b1b; }
.tool-duration { color: var(--brand-muted); }
.tool-payload {
width: 100%; margin: 4px 0 0;
background: var(--brand-bg); border: 1px solid var(--brand-border);
padding: 6px 8px; border-radius: 4px;
font-family: var(--font-mono); font-size: 11px;
white-space: pre-wrap; word-break: break-all;
max-height: 200px; overflow-y: auto;
}
@media (max-width: 900px) {
.chat-layout { grid-template-columns: 1fr; height: auto; min-height: calc(100vh - 32px); }
.chat-sidebar { display: none; }
}
/* ── Modal (usado por confirm-modal_controller.js) ─────────────── */
.modal-overlay {
position: fixed; inset: 0;
background: rgba(15, 23, 42, 0.45);
display: flex; align-items: center; justify-content: center;
z-index: 100; padding: 24px;
opacity: 0; pointer-events: none;
transition: opacity 160ms ease;
}
.modal-overlay--active { opacity: 1; pointer-events: auto; }
.modal {
background: var(--brand-bg);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
width: 100%; max-width: 460px;
transform: translateY(8px);
transition: transform 160ms ease;
}
.modal-overlay--active .modal { transform: translateY(0); }
.modal-header {
padding: 18px 20px 0;
display: flex; align-items: center; justify-content: space-between;
}
.modal-header h3 { margin: 0; font-size: 17px; }
.modal-close {
background: transparent; border: 0; cursor: pointer;
font-size: 22px; line-height: 1; color: var(--brand-muted);
padding: 4px 8px; border-radius: var(--radius-sm);
}
.modal-close:hover { background: var(--brand-surface); color: var(--brand-text); }
.modal-body { padding: 12px 20px; color: var(--brand-text); }
.modal-body p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--brand-muted); }
.modal-footer {
padding: 16px 20px 20px;
display: flex; gap: 8px; justify-content: flex-end;
}
.btn-danger {
background: var(--color-error); color: #fff; border-color: var(--color-error);
}
.btn-danger:hover { background: #b91c1c; border-color: #b91c1c; color: #fff; }
/* ── Monitor de Seguros (vista index del agente) ───────────────── */
.ins-monitor {
display: flex; flex-direction: column;
gap: 24px;
}
/* Header */
.ins-page-header {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 16px; flex-wrap: wrap;
margin-bottom: 4px;
}
.ins-page-heading { min-width: 0; }
.ins-page-title {
font-size: 32px; line-height: 1.15; letter-spacing: -0.02em;
margin: 0 0 6px; color: var(--brand-text);
}
.ins-page-lede {
margin: 0; color: var(--brand-muted); font-size: 15px;
}
.ins-page-actions { display: inline-flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ins-refresh { padding: 8px 14px; font-size: 13px; }
.ins-refresh svg { width: 15px; height: 15px; }
.ins-date-chip {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 14px;
background: var(--brand-bg);
border: 1px solid var(--brand-border);
border-radius: var(--radius-md);
font-size: 13px; color: var(--brand-text);
box-shadow: var(--shadow-sm);
}
.ins-date-chip svg { width: 15px; height: 15px; color: var(--brand-muted); }
/* KPI row */
.ins-kpi-row {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 16px;
}
.ins-kpi {
display: flex; align-items: center; gap: 14px;
padding: 18px;
background: var(--brand-bg);
border: 1px solid var(--brand-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
color: var(--brand-text); text-decoration: none;
transition: border-color 150ms, transform 150ms, box-shadow 150ms;
min-width: 0;
}
.ins-kpi:hover {
border-color: color-mix(in srgb, var(--brand-primary) 25%, var(--brand-border));
transform: translateY(-1px);
box-shadow: var(--shadow-md);
color: var(--brand-text);
}
.ins-kpi-icon {
flex-shrink: 0;
width: 44px; height: 44px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--radius-md);
}
.ins-kpi-icon svg { width: 22px; height: 22px; }
.ins-kpi-icon--primary { background: #eef2ff; color: #4f46e5; }
.ins-kpi-icon--success { background: #ecfdf5; color: #059669; }
.ins-kpi-icon--violet { background: #f5f3ff; color: #7c3aed; }
.ins-kpi-icon--warning { background: #fff7ed; color: #d97706; }
.ins-kpi-icon--danger { background: #fef2f2; color: #dc2626; }
.ins-kpi-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ins-kpi-label {
font-size: 13px; color: var(--brand-muted);
line-height: 1.2;
}
.ins-kpi-value {
font-size: 28px; font-weight: 600; line-height: 1.1;
letter-spacing: -0.01em;
}
.ins-kpi-value--primary { color: #4f46e5; }
.ins-kpi-value--success { color: #059669; }
.ins-kpi-value--violet { color: #7c3aed; }
.ins-kpi-value--warning { color: #d97706; }
.ins-kpi-value--danger { color: #dc2626; }
@media (max-width: 1100px) {
.ins-kpi-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
.ins-kpi-row { grid-template-columns: repeat(2, 1fr); }
.ins-kpi-value { font-size: 24px; }
}
/* Nav grid */
.ins-nav-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.ins-nav-card {
display: flex; align-items: center; gap: 16px;
padding: 22px;
background: var(--brand-bg);
border: 1px solid var(--brand-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
color: var(--brand-text); text-decoration: none;
transition: border-color 150ms, transform 150ms, box-shadow 150ms;
}
.ins-nav-card:hover {
border-color: color-mix(in srgb, var(--brand-primary) 25%, var(--brand-border));
transform: translateY(-1px);
box-shadow: var(--shadow-md);
color: var(--brand-text);
}
.ins-nav-icon {
flex-shrink: 0;
width: 56px; height: 56px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--radius-md);
}
.ins-nav-icon svg { width: 26px; height: 26px; }
.ins-nav-icon--primary { background: #eef2ff; color: #4f46e5; }
.ins-nav-icon--success { background: #ecfdf5; color: #059669; }
.ins-nav-icon--violet { background: #f5f3ff; color: #7c3aed; }
.ins-nav-icon--warning { background: #fff7ed; color: #d97706; }
.ins-nav-body { flex: 1; min-width: 0; }
.ins-nav-title { font-size: 16px; margin: 0 0 4px; color: var(--brand-text); }
.ins-nav-desc {
margin: 0; font-size: 13px; color: var(--brand-muted);
line-height: 1.45;
}
.ins-nav-arrow {
flex-shrink: 0;
width: 32px; height: 32px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
border: 1px solid var(--brand-border);
color: var(--brand-muted);
transition: background 150ms, color 150ms, border-color 150ms;
}
.ins-nav-arrow svg { width: 14px; height: 14px; }
.ins-nav-card:hover .ins-nav-arrow {
background: var(--brand-primary); border-color: var(--brand-primary); color: #fff;
}
@media (max-width: 720px) {
.ins-nav-grid { grid-template-columns: 1fr; }
}
/* Operaciones */
.ins-ops {
background: var(--brand-bg);
border: 1px solid var(--brand-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
padding: 22px;
display: flex; flex-direction: column; gap: 18px;
}
.ins-ops-header {
display: flex; align-items: center; gap: 14px;
}
.ins-ops-icon {
flex-shrink: 0;
width: 44px; height: 44px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--radius-md);
background: var(--brand-surface);
color: var(--brand-muted);
}
.ins-ops-icon svg { width: 22px; height: 22px; }
.ins-ops-title { margin: 0 0 2px; font-size: 16px; color: var(--brand-text); }
.ins-ops-lede { margin: 0; font-size: 13px; color: var(--brand-muted); }
.ins-ops-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 16px;
}
.ins-op-card {
display: flex;
flex-direction: column;
gap: 18px;
padding: 20px;
background: var(--brand-bg);
border: 1px solid var(--brand-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
transition: border-color 160ms, box-shadow 160ms, transform 160ms;
}
.ins-op-card:hover {
border-color: color-mix(in srgb, var(--brand-primary) 25%, var(--brand-border));
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}
.ins-op-card-head {
display: flex; align-items: flex-start; gap: 14px;
min-height: 56px;
}
.ins-op-icon {
flex-shrink: 0;
width: 44px; height: 44px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--radius-md);
}
.ins-op-icon svg { width: 22px; height: 22px; }
.ins-op-icon--primary { background: #eef2ff; color: #4f46e5; }
.ins-op-icon--success { background: #ecfdf5; color: #059669; }
.ins-op-icon--violet { background: #f5f3ff; color: #7c3aed; }
.ins-op-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ins-op-title {
margin: 0;
font-size: 15px; font-weight: 600;
color: var(--brand-text);
line-height: 1.25;
display: inline-flex; align-items: center; gap: 8px;
flex-wrap: wrap;
}
.ins-op-counter {
display: inline-flex; align-items: center;
min-width: 24px; height: 22px;
padding: 0 8px;
background: #fef2f2;
color: #dc2626;
border-radius: 999px;
font-size: 11px; font-weight: 700; line-height: 1;
letter-spacing: 0.02em;
}
.ins-op-desc {
margin: 0;
font-size: 13px;
color: var(--brand-muted);
line-height: 1.45;
}
.ins-op-card-foot {
display: flex;
align-items: center;
gap: 8px;
margin-top: auto;
}
.ins-op-fields {
flex: 1;
display: grid;
grid-template-columns: minmax(90px, 0.9fr) minmax(0, 1.4fr);
gap: 6px;
min-width: 0;
}
.ins-op-select-input {
appearance: none; -webkit-appearance: none;
width: 100%;
height: 32px;
padding: 0 26px 0 10px;
border: 1px solid var(--brand-border);
border-radius: var(--radius-md);
background: var(--brand-bg) url("data:image/svg+xml;utf8,") no-repeat right 8px center / 12px 12px;
color: var(--brand-text);
font: inherit; font-size: 12.5px;
cursor: pointer;
text-overflow: ellipsis;
transition: border-color 150ms, box-shadow 150ms;
}
.ins-op-select-input:hover { border-color: color-mix(in srgb, var(--brand-primary) 30%, var(--brand-border)); }
.ins-op-select-input:focus {
outline: none;
border-color: var(--brand-primary);
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}
/* Botón "play" circular (solo icono) que reemplaza a "Iniciar" */
.ins-op-play {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0 0 0 2px; /* compensar visualmente el triángulo */
background: var(--brand-accent);
color: #fff;
border: none;
border-radius: 50%;
cursor: pointer;
transition: background 150ms, transform 100ms ease;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.15);
}
.ins-op-play:hover { background: color-mix(in srgb, var(--brand-accent) 88%, white); }
.ins-op-play:active { transform: scale(0.96); }
.ins-op-play:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; }
.ins-op-play svg { width: 14px; height: 14px; }
@media (max-width: 540px) {
.ins-op-fields { grid-template-columns: 1fr; }
}
/* ── Panel de Actividad de operaciones (progreso en vivo) ───────── */
.ins-activity-section { margin-top: 24px; }
.ins-activity-header {
display: flex; align-items: center; gap: 12px;
margin-bottom: 14px;
}
.ins-activity-title { font-size: 18px; font-weight: 600; margin: 0; color: var(--brand-text); }
.ins-activity-live {
display: inline-flex; align-items: center; gap: 6px;
padding: 2px 10px; border-radius: 999px;
background: color-mix(in srgb, var(--color-success) 12%, transparent);
color: var(--color-success);
font-size: 12px; font-weight: 600;
}
.ins-activity-live-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--color-success);
animation: ins-activity-pulse 1.2s ease-in-out infinite;
}
.ins-activity { display: flex; flex-direction: column; gap: 12px; }
.ins-activity-empty {
margin: 0; padding: 24px;
border: 1px dashed var(--brand-border); border-radius: var(--radius-lg);
background: var(--brand-surface); color: var(--brand-muted);
font-size: 14px; text-align: center;
}
.ins-activity-item {
padding: 16px 18px;
background: var(--brand-bg); border: 1px solid var(--brand-border);
border-left: 3px solid var(--brand-border);
border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.ins-activity-item--running { border-left-color: var(--color-info); }
.ins-activity-item--completed { border-left-color: var(--color-success); }
.ins-activity-item--partial { border-left-color: var(--color-warning); }
.ins-activity-item--failed { border-left-color: var(--color-error); }
.ins-activity-head {
display: flex; align-items: center; justify-content: space-between;
gap: 10px; margin-bottom: 10px;
}
.ins-activity-op { font-size: 15px; font-weight: 600; color: var(--brand-text); }
.ins-activity-status {
display: inline-flex; align-items: center; gap: 6px;
padding: 2px 10px; border-radius: 999px;
font-size: 12px; font-weight: 600;
background: var(--brand-surface); color: var(--brand-muted);
}
.ins-activity-status--running { background: color-mix(in srgb, var(--color-info) 12%, transparent); color: var(--color-info); }
.ins-activity-status--completed { background: color-mix(in srgb, var(--color-success) 12%, transparent); color: var(--color-success); }
.ins-activity-status--partial { background: color-mix(in srgb, var(--color-warning) 14%, transparent); color: var(--color-warning); }
.ins-activity-status--failed { background: color-mix(in srgb, var(--color-error) 12%, transparent); color: var(--color-error); }
.ins-activity-pulse {
width: 7px; height: 7px; border-radius: 50%;
background: currentColor;
animation: ins-activity-pulse 1.2s ease-in-out infinite;
}
.ins-activity-bar {
height: 8px; border-radius: 999px;
background: var(--brand-surface); overflow: hidden;
margin-bottom: 8px;
}
.ins-activity-bar-fill {
height: 100%; border-radius: 999px;
transition: width 0.4s ease;
background: var(--color-info);
}
.ins-activity-bar-fill--completed { background: var(--color-success); }
.ins-activity-bar-fill--partial { background: var(--color-warning); }
.ins-activity-bar-fill--failed { background: var(--color-error); }
/* Total desconocido y en curso: barra "viva" en movimiento. */
.ins-activity-bar-fill.is-indeterminate {
width: 40% !important;
background: linear-gradient(90deg, transparent, var(--color-info), transparent);
animation: ins-activity-indeterminate 1.3s linear infinite;
}
.ins-activity-meta {
display: flex; align-items: center; justify-content: space-between;
gap: 10px; flex-wrap: wrap;
font-size: 13px; color: var(--brand-muted);
}
.ins-activity-counts { font-variant-numeric: tabular-nums; }
.ins-activity-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.ins-activity-chip {
padding: 1px 8px; border-radius: 999px;
font-size: 12px; font-weight: 600;
}
.ins-activity-chip--ok { background: color-mix(in srgb, var(--color-success) 12%, transparent); color: var(--color-success); }
.ins-activity-chip--fail { background: color-mix(in srgb, var(--color-error) 12%, transparent); color: var(--color-error); }
.ins-activity-chip--skip { background: var(--brand-surface); color: var(--brand-muted); }
.ins-activity-current {
margin: 8px 0 0; font-size: 13px; color: var(--brand-text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ins-activity-current-label { color: var(--brand-muted); margin-right: 4px; }
.ins-activity-error {
margin: 8px 0 0; padding: 8px 10px;
background: color-mix(in srgb, var(--color-error) 8%, transparent);
border-radius: var(--radius-md);
font-size: 12px; color: var(--color-error);
font-family: var(--font-mono); word-break: break-word;
}
.ins-activity-foot {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
margin-top: 10px; font-size: 12px; color: var(--brand-muted);
}
.ins-activity-foot-sep { opacity: 0.5; }
@keyframes ins-activity-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}
@keyframes ins-activity-indeterminate {
0% { transform: translateX(-120%); }
100% { transform: translateX(320%); }
}
@media (prefers-reduced-motion: reduce) {
.ins-activity-pulse, .ins-activity-live-dot { animation: none; }
.ins-activity-bar-fill.is-indeterminate { animation: none; }
}
/* ── Estado de scraping por institución (/admin/seguros/scrape-result) ── */
.sr-table-wrap { overflow-x: auto; border: 1px solid var(--brand-border); border-radius: var(--radius-md); }
.sr-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sr-table th, .sr-table td { padding: 12px 14px; text-align: left; vertical-align: middle; }
.sr-table thead th {
font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;
color: var(--brand-muted); border-bottom: 1px solid var(--brand-border); white-space: nowrap;
}
.sr-table tbody tr { border-bottom: 1px solid var(--brand-border); }
.sr-table tbody tr:last-child { border-bottom: 0; }
.sr-num { text-align: right; font-variant-numeric: tabular-nums; }
.sr-danger { color: var(--color-error); }
/* Barra lateral de color según urgencia */
.sr-row--blocked td:first-child { box-shadow: inset 3px 0 0 var(--color-error); }
.sr-row--failed td:first-child { box-shadow: inset 3px 0 0 var(--color-error); }
.sr-row--partial td:first-child { box-shadow: inset 3px 0 0 var(--brand-accent-warm); }
.sr-row--never td:first-child { box-shadow: inset 3px 0 0 var(--brand-muted); }
.sr-row--ok td:first-child { box-shadow: inset 3px 0 0 var(--color-success); }
.sr-inst { display: flex; align-items: center; gap: 10px; }
.sr-inst-body { display: flex; flex-direction: column; min-width: 0; }
.sr-inst-name { font-weight: 600; color: var(--brand-text); display: flex; align-items: center; gap: 6px; }
.sr-inst-url {
font-size: 12px; color: var(--brand-muted); max-width: 340px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sr-inst-url:hover { color: var(--brand-accent); }
.sr-badge, .sr-run {
display: inline-block; padding: 2px 10px; border-radius: 999px;
font-size: 12px; font-weight: 600; white-space: nowrap;
}
.sr-badge--ok { background: color-mix(in srgb, var(--color-success) 12%, transparent); color: var(--color-success); }
.sr-badge--partial { background: color-mix(in srgb, var(--brand-accent-warm) 15%, transparent); color: var(--brand-accent-warm); }
.sr-badge--failed { background: color-mix(in srgb, var(--color-error) 12%, transparent); color: var(--color-error); }
.sr-badge--blocked { background: var(--color-error); color: #fff; }
.sr-badge--never { background: var(--brand-surface); color: var(--brand-muted); }
.sr-run--completed { color: var(--color-success); }
.sr-run--partial { color: var(--brand-accent-warm); }
.sr-run--failed { color: var(--color-error); }
.sr-run--running { color: var(--brand-accent); }
.sr-run-date { display: block; font-size: 12px; color: var(--brand-muted); margin-top: 2px; }
.sr-tag { font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 4px; }
.sr-tag--muted { background: var(--brand-surface); color: var(--brand-muted); }
.sr-actions { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.sr-link { font-size: 13px; font-weight: 500; color: var(--brand-accent); white-space: nowrap; }
.sr-link:hover { text-decoration: underline; }
.sr-link--accent { color: var(--brand-accent); font-weight: 600; }
.sr-empty { text-align: center; color: var(--brand-muted); padding: 32px; }
/* ── Configuración del agente ─────────────────────────────────── */
.cfg-page {
display: flex; flex-direction: column;
gap: 22px;
}
/* Header */
.cfg-header {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 16px; flex-wrap: wrap;
}
.cfg-heading { min-width: 0; max-width: 720px; }
.cfg-title {
font-size: 30px; line-height: 1.15; letter-spacing: -0.02em;
margin: 0 0 8px; color: var(--brand-text);
}
.cfg-lede {
margin: 0; color: var(--brand-muted); font-size: 14px;
line-height: 1.5;
}
.cfg-status {
display: inline-flex; align-items: center; gap: 10px;
padding: 8px 12px 8px 14px;
background: var(--brand-bg);
border: 1px solid var(--brand-border);
border-radius: 999px;
font-size: 13px; color: var(--brand-text);
box-shadow: var(--shadow-sm);
cursor: pointer;
user-select: none;
}
.cfg-status-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--color-success);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-success) 18%, transparent);
}
.cfg-status[data-active="false"] .cfg-status-dot {
background: var(--brand-muted);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-muted) 18%, transparent);
}
.cfg-status-label { font-weight: 500; }
/* Cards */
.cfg-card {
background: var(--brand-bg);
border: 1px solid var(--brand-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.cfg-card-header {
display: flex; align-items: center; gap: 10px;
padding: 16px 20px;
border-bottom: 1px solid var(--brand-border);
}
.cfg-card-icon {
width: 32px; height: 32px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--radius-md);
flex-shrink: 0;
}
.cfg-card-icon svg { width: 18px; height: 18px; }
.cfg-card-icon--info { background: #eff6ff; color: #2563eb; }
.cfg-card-icon--violet { background: #f5f3ff; color: #7c3aed; }
.cfg-card-title {
font-size: 16px; font-weight: 600;
margin: 0; color: var(--brand-text);
}
.cfg-card-body { padding: 20px; }
/* Grids */
.cfg-grid-2 {
display: grid; gap: 16px 20px;
grid-template-columns: repeat(2, 1fr);
}
.cfg-grid-3 {
display: grid; gap: 16px 20px;
grid-template-columns: repeat(3, 1fr);
}
.cfg-grid-3--mt { margin-top: 8px; }
@media (max-width: 900px) {
.cfg-grid-2, .cfg-grid-3 { grid-template-columns: 1fr; }
}
/* Fields */
.cfg-field { display: flex; flex-direction: column; min-width: 0; }
.cfg-field--wide { margin-top: 16px; }
.cfg-field label {
display: block; margin-bottom: 6px;
font-size: 13px; font-weight: 500; color: var(--brand-text);
}
.cfg-field input[type="text"],
.cfg-field input[type="number"],
.cfg-field input[type="email"],
.cfg-field select,
.cfg-field textarea {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--brand-border);
border-radius: var(--radius-md);
font: inherit; font-size: 14px;
background: var(--brand-bg); color: var(--brand-text);
transition: border-color 120ms, box-shadow 120ms;
}
.cfg-field input:focus,
.cfg-field select:focus,
.cfg-field textarea:focus {
outline: none;
border-color: var(--brand-primary);
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.06);
}
.cfg-field textarea { resize: vertical; min-height: 88px; }
.cfg-field select {
appearance: none; -webkit-appearance: none;
padding-right: 36px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
}
.cfg-help {
display: block; margin-top: 6px;
font-size: 12px; color: var(--brand-muted);
line-height: 1.45;
}
/* Color picker (swatch + input) */
.cfg-color-input {
position: relative;
display: flex; align-items: center;
border: 1px solid var(--brand-border);
border-radius: var(--radius-md);
background: var(--brand-bg);
padding: 4px 4px 4px 8px;
transition: border-color 120ms, box-shadow 120ms;
}
.cfg-color-input:focus-within {
border-color: var(--brand-primary);
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.06);
}
.cfg-color-swatch {
width: 28px; height: 28px; border-radius: var(--radius-sm);
flex-shrink: 0;
border: 1px solid rgba(15, 23, 42, 0.08);
}
.cfg-color-input input {
border: 0 !important;
background: transparent;
padding: 8px 10px !important;
flex: 1; min-width: 0;
font-family: var(--font-mono); font-size: 13px;
box-shadow: none !important;
}
.cfg-color-input input:focus { box-shadow: none !important; }
/* Temperature slider */
.cfg-range {
-webkit-appearance: none; appearance: none;
width: 100%; height: 4px; margin-top: 12px;
background: var(--brand-border);
border-radius: 999px;
outline: none;
cursor: pointer;
}
.cfg-range::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
width: 14px; height: 14px; border-radius: 50%;
background: var(--brand-accent);
border: 2px solid var(--brand-bg);
box-shadow: 0 0 0 1px var(--brand-primary);
cursor: pointer;
}
.cfg-range::-moz-range-thumb {
width: 14px; height: 14px; border-radius: 50%;
background: var(--brand-accent);
border: 2px solid var(--brand-bg);
box-shadow: 0 0 0 1px var(--brand-primary);
cursor: pointer;
}
.cfg-range-scale {
display: flex; justify-content: space-between;
margin-top: 4px;
font-size: 11px; color: var(--brand-muted);
}
/* Toggle (switch) */
.cfg-field--toggle { justify-content: flex-start; }
.cfg-toggle {
position: relative;
display: inline-flex; align-items: center;
width: 40px; height: 22px;
flex-shrink: 0;
}
.cfg-toggle--lg { width: 44px; height: 24px; margin-top: 4px; }
.cfg-toggle input,
.cfg-toggle .cfg-toggle-input {
position: absolute; inset: 0;
width: 100%; height: 100%;
margin: 0; opacity: 0; cursor: pointer; z-index: 2;
}
.cfg-toggle-track {
position: absolute; inset: 0;
background: var(--brand-border);
border-radius: 999px;
transition: background 160ms ease;
}
.cfg-toggle-thumb {
position: absolute; top: 2px; left: 2px;
width: calc(100% - 4px); /* placeholder */
height: calc(100% - 4px);
aspect-ratio: 1;
width: auto;
background: #fff;
border-radius: 50%;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.2);
transition: left 160ms ease;
}
.cfg-toggle input:checked ~ .cfg-toggle-track,
.cfg-toggle .cfg-toggle-input:checked ~ .cfg-toggle-track {
background: var(--brand-accent);
}
.cfg-toggle input:checked ~ .cfg-toggle-track .cfg-toggle-thumb,
.cfg-toggle .cfg-toggle-input:checked ~ .cfg-toggle-track .cfg-toggle-thumb {
left: calc(100% - 2px);
transform: translateX(-100%);
}
/* Pill verde para el del header */
.cfg-status .cfg-toggle input:checked ~ .cfg-toggle-track {
background: var(--color-success);
}
/* System prompt — textarea con números de línea */
.cfg-prompt {
position: relative;
display: flex;
border: 1px solid var(--brand-border);
border-radius: var(--radius-md);
background: var(--brand-bg);
overflow: hidden;
transition: border-color 120ms, box-shadow 120ms;
}
.cfg-prompt:focus-within {
border-color: var(--brand-primary);
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.06);
}
.cfg-prompt-gutter {
margin: 0; padding: 12px 10px 12px 12px;
background: var(--brand-surface);
border-right: 1px solid var(--brand-border);
font-family: var(--font-mono); font-size: 13px;
line-height: 1.55;
color: var(--brand-muted);
text-align: right;
user-select: none;
overflow: hidden;
min-width: 36px;
white-space: pre;
}
.cfg-prompt-input {
flex: 1;
border: 0 !important;
border-radius: 0 !important;
padding: 12px 40px 12px 12px !important;
font-family: var(--font-mono); font-size: 13px;
line-height: 1.55;
resize: vertical;
min-height: 160px;
white-space: pre;
overflow-x: auto;
box-shadow: none !important;
}
.cfg-prompt-input:focus { box-shadow: none !important; }
.cfg-prompt-expand {
position: absolute; top: 8px; right: 8px;
width: 28px; height: 28px;
background: transparent; border: 1px solid var(--brand-border);
border-radius: var(--radius-sm);
color: var(--brand-muted);
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
transition: color 120ms, background 120ms, border-color 120ms;
}
.cfg-prompt-expand:hover {
color: var(--brand-primary);
background: var(--brand-bg);
border-color: var(--brand-primary);
}
.cfg-prompt-expand svg { width: 14px; height: 14px; }
.cfg-prompt.is-fullscreen {
position: fixed; inset: 24px;
z-index: 60;
box-shadow: var(--shadow-md);
}
.cfg-prompt.is-fullscreen .cfg-prompt-input { min-height: 0; height: 100%; }
/* Acciones (botones alineados a la derecha) */
.cfg-actions {
display: flex; gap: 12px;
justify-content: flex-end;
padding-top: 4px;
}
.cfg-actions .btn { min-width: 120px; }
.cfg-actions .btn-primary svg { width: 16px; height: 16px; }
@media (max-width: 600px) {
.cfg-actions { flex-direction: column-reverse; }
.cfg-actions .btn { width: 100%; }
}
/* ── Workers (admin/messenger) ────────────────────────────────── */
.wk-page { display: flex; flex-direction: column; gap: 22px; }
.wk-header {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 16px; flex-wrap: wrap;
}
.wk-title {
font-size: 28px; line-height: 1.15; letter-spacing: -0.02em;
margin: 0 0 6px;
}
.wk-lede {
margin: 0; color: var(--brand-muted); font-size: 14px;
max-width: 720px; line-height: 1.5;
}
.wk-lede code, .wk-cmd, .wk-fqcn, .wk-error-detail {
font-family: var(--font-mono); font-size: 12px;
background: var(--brand-surface);
padding: 1px 6px; border-radius: 4px;
border: 1px solid var(--brand-border);
}
.wk-stop-form .btn svg { width: 14px; height: 14px; }
/* KPIs */
.wk-kpi-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.wk-kpi {
background: var(--brand-bg);
border: 1px solid var(--brand-border);
border-radius: var(--radius-lg);
padding: 16px 18px;
box-shadow: var(--shadow-sm);
display: flex; flex-direction: column; gap: 4px;
}
.wk-kpi-label {
font-size: 12px; color: var(--brand-muted);
text-transform: uppercase; letter-spacing: 0.04em;
font-weight: 500;
}
.wk-kpi-value {
font-size: 28px; font-weight: 600; line-height: 1;
color: var(--brand-text);
letter-spacing: -0.01em;
}
.wk-kpi-sub { font-size: 11px; color: var(--brand-muted); }
.wk-kpi--danger .wk-kpi-value { color: var(--color-error); }
.wk-kpi--accent .wk-kpi-value { color: #4f46e5; }
@media (max-width: 900px) { .wk-kpi-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .wk-kpi-row { grid-template-columns: 1fr; } }
/* Cards */
.wk-card {
background: var(--brand-bg);
border: 1px solid var(--brand-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.wk-card-header {
padding: 16px 20px;
border-bottom: 1px solid var(--brand-border);
display: flex; align-items: flex-start; justify-content: space-between;
gap: 12px; flex-wrap: wrap;
}
.wk-card-title { margin: 0 0 4px; font-size: 16px; }
.wk-card-lede { margin: 0; color: var(--brand-muted); font-size: 13px; }
.wk-card-actions { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.wk-card-actions .btn svg { width: 14px; height: 14px; }
.wk-empty {
padding: 40px 24px; text-align: center;
color: var(--brand-muted);
}
.wk-empty p { margin: 0; font-size: 14px; }
/* Tablas */
.wk-table {
width: 100%; border-collapse: collapse;
font-size: 13px;
}
.wk-table th, .wk-table td {
padding: 10px 16px;
text-align: left;
border-bottom: 1px solid var(--brand-border);
vertical-align: middle;
}
.wk-table th {
font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
font-weight: 600; color: var(--brand-muted);
background: var(--brand-surface);
}
.wk-table tbody tr:last-child td { border-bottom: 0; }
.wk-table tbody tr:hover { background: var(--brand-surface); }
.wk-col-actions { width: 200px; text-align: right; }
.wk-col-actions .btn { margin-left: 4px; }
.wk-col-num { text-align: right; font-variant-numeric: tabular-nums; }
.wk-table code { font-family: var(--font-mono); font-size: 12px; }
.wk-cmd {
display: inline-block; max-width: 380px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
vertical-align: middle;
}
.wk-fqcn {
display: block; margin-top: 2px;
font-size: 10px; background: transparent; border: 0;
color: var(--brand-muted); padding: 0;
}
.wk-error { color: var(--color-error); max-width: 480px; }
.wk-row-detail td {
background: var(--brand-surface);
padding: 4px 16px 10px;
border-bottom: 1px solid var(--brand-border);
}
.wk-error-detail {
display: inline-block; max-width: 100%;
color: var(--color-error);
background: var(--brand-bg);
}
/* Tags y status */
.wk-tag {
display: inline-block;
padding: 2px 9px; border-radius: 999px;
font-size: 11px; font-weight: 500;
text-transform: uppercase; letter-spacing: 0.04em;
}
.wk-tag--async { background: #eef2ff; color: #4f46e5; }
.wk-tag--scrape { background: #ecfdf5; color: #059669; }
.wk-status {
display: inline-block;
padding: 2px 9px; border-radius: 999px;
font-size: 11px; font-weight: 500;
}
.wk-status--queued { background: var(--brand-surface); color: var(--brand-muted); border: 1px solid var(--brand-border); }
.wk-status--running { background: #eef2ff; color: #4f46e5; }
.wk-status--received { background: #eef2ff; color: #4f46e5; }
.wk-status--handled { background: #ecfdf5; color: #059669; }
.wk-status--failed { background: #fef2f2; color: #dc2626; }
/* ── Mapa de Coberturas (matriz) ──────────────────────────────── */
.mx-page { display: flex; flex-direction: column; gap: 18px; }
/* Header */
.mx-page-header {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 16px; flex-wrap: wrap;
}
.mx-page-heading { min-width: 0; max-width: 720px; }
.mx-page-title {
font-size: 28px; line-height: 1.15; letter-spacing: -0.02em;
margin: 0 0 4px;
}
.mx-page-lede {
margin: 0; color: var(--brand-muted); font-size: 14px;
}
.mx-page-actions { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mx-export {
display: inline-flex; align-items: stretch;
border: 1px solid var(--brand-border);
border-radius: var(--radius-md);
background: var(--brand-bg);
overflow: hidden;
}
.mx-export .btn {
border: 0;
border-radius: 0;
padding: 8px 14px;
box-shadow: none;
}
.mx-export .btn:first-child {
border-right: 1px solid var(--brand-border);
}
.mx-export svg { width: 14px; height: 14px; }
.mx-export-toggle { padding: 8px 8px !important; }
.mx-update {
display: inline-flex; align-items: center; gap: 8px;
font-size: 13px; color: var(--brand-muted);
}
.mx-update strong { color: var(--brand-text); font-weight: 500; }
.mx-update svg { width: 14px; height: 14px; }
/* Toolbar */
.mx-toolbar {
background: var(--brand-bg);
border: 1px solid var(--brand-border);
border-radius: var(--radius-lg);
padding: 16px;
display: flex; align-items: flex-end; gap: 18px;
flex-wrap: wrap;
box-shadow: var(--shadow-sm);
}
.mx-toolbar-section { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mx-toolbar-section--grow { flex: 1; min-width: 200px; }
.mx-toolbar-label {
font-size: 13px; color: var(--brand-text); font-weight: 500;
}
.mx-chip-row { display: inline-flex; gap: 18px; flex-wrap: wrap; }
.mx-chip {
display: inline-flex; align-items: center; gap: 6px;
cursor: pointer; user-select: none;
font-size: 13px; color: var(--brand-text);
}
.mx-chip input[type="checkbox"] {
width: 16px; height: 16px;
accent-color: var(--brand-accent);
cursor: pointer;
}
.mx-chip-label { line-height: 1; }
.mx-multi { position: relative; min-width: 220px; }
.mx-multi-trigger {
display: flex; align-items: center; justify-content: space-between;
gap: 8px;
width: 100%; padding: 10px 12px;
background: var(--brand-bg);
border: 1px solid var(--brand-border);
border-radius: var(--radius-md);
font: inherit; font-size: 13px;
color: var(--brand-text);
cursor: pointer;
transition: border-color 120ms;
}
.mx-multi-trigger:hover { border-color: color-mix(in srgb, var(--brand-primary) 30%, var(--brand-border)); }
.mx-multi.is-open .mx-multi-trigger {
border-color: var(--brand-primary);
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.06);
}
.mx-multi-trigger svg { width: 14px; height: 14px; color: var(--brand-muted); }
.mx-multi-panel {
position: absolute; left: 0; top: calc(100% + 6px);
z-index: 30;
min-width: 100%;
background: var(--brand-bg);
border: 1px solid var(--brand-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
padding: 6px;
max-height: 280px; overflow-y: auto;
}
.mx-multi-item {
display: flex; align-items: center; gap: 10px;
padding: 8px 10px; border-radius: var(--radius-sm);
cursor: pointer; user-select: none;
font-size: 13px; color: var(--brand-text);
}
.mx-multi-item:hover { background: var(--brand-surface); }
.mx-multi-item input[type="checkbox"] {
width: 16px; height: 16px;
accent-color: var(--brand-accent);
cursor: pointer;
}
.mx-search {
position: relative;
display: flex; align-items: center;
}
.mx-search svg {
position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
width: 16px; height: 16px;
color: var(--brand-muted);
}
.mx-search input {
width: 100%;
padding: 10px 12px 10px 38px;
border: 1px solid var(--brand-border);
border-radius: var(--radius-md);
background: var(--brand-bg);
font: inherit; font-size: 13px;
color: var(--brand-text);
transition: border-color 120ms, box-shadow 120ms;
}
.mx-search input:focus {
outline: none;
border-color: var(--brand-primary);
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.06);
}
.mx-toolbar-extra { align-self: flex-end; }
.mx-toolbar-extra svg { width: 14px; height: 14px; }
/* KPIs */
.mx-kpi-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.mx-kpi {
background: var(--brand-bg);
border: 1px solid var(--brand-border);
border-radius: var(--radius-lg);
padding: 16px 18px;
box-shadow: var(--shadow-sm);
display: flex; align-items: center; gap: 14px;
}
.mx-kpi-icon {
flex-shrink: 0;
width: 40px; height: 40px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--radius-md);
}
.mx-kpi-icon svg { width: 20px; height: 20px; }
.mx-kpi-icon--primary { background: #eff6ff; color: #2563eb; }
.mx-kpi-icon--violet { background: #f5f3ff; color: #7c3aed; }
.mx-kpi-icon--info { background: #eef2ff; color: #4f46e5; }
.mx-kpi-icon--success { background: #ecfdf5; color: #059669; }
.mx-kpi-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mx-kpi-label {
font-size: 12px; color: var(--brand-muted);
line-height: 1.2;
}
.mx-kpi-line { display: inline-flex; align-items: baseline; gap: 6px; }
.mx-kpi-value {
font-size: 24px; font-weight: 600; line-height: 1;
color: var(--brand-text);
letter-spacing: -0.01em;
}
.mx-kpi-of { font-size: 13px; color: var(--brand-muted); }
@media (max-width: 1100px) { .mx-kpi-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .mx-kpi-row { grid-template-columns: 1fr; } }
/* Card de la matriz */
.mx-card {
background: var(--brand-bg);
border: 1px solid var(--brand-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.mx-table-wrap {
overflow-x: auto;
width: 100%;
}
/* Tabla principal */
.mx-table {
width: 100%; border-collapse: collapse;
font-size: 13px;
table-layout: fixed;
}
.mx-table thead { background: var(--brand-surface); }
.mx-table th, .mx-table td {
padding: 6px 4px;
border-bottom: 1px solid var(--brand-border);
text-align: center;
vertical-align: middle;
white-space: nowrap;
}
.mx-table tbody tr:last-child > td { border-bottom: 0; }
/* Headers de tipo (1ra fila) */
.mx-thead-types th {
font-size: 12px; font-weight: 600;
text-transform: none;
color: var(--brand-text);
background: var(--brand-surface);
border-bottom: 1px solid var(--brand-border);
padding-top: 12px; padding-bottom: 6px;
}
.mx-thead-types .mx-col-type { color: var(--brand-text); }
/* Header de la columna categoría */
.mx-col-cat {
text-align: left;
background: var(--brand-bg);
position: sticky; left: 0; z-index: 2;
width: 200px;
min-width: 200px;
max-width: 200px;
padding-left: 12px !important;
padding-right: 8px !important;
box-shadow: 1px 0 0 var(--brand-border);
}
.mx-col-cat-filter {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 8px;
background: transparent; border: 1px solid var(--brand-border);
border-radius: var(--radius-sm);
font: inherit; font-size: 12px; color: var(--brand-text);
cursor: pointer;
}
.mx-col-cat-filter:hover { border-color: var(--brand-primary); }
.mx-col-cat-filter svg { width: 12px; height: 12px; color: var(--brand-muted); }
.mx-col-cat-sub { background: var(--brand-bg); }
/* Headers de instituciones — avatares compactos */
.mx-thead-institutions th {
background: var(--brand-surface);
border-bottom: 1px solid var(--brand-border);
padding: 8px 2px 10px;
width: 38px;
}
.mx-col-inst { vertical-align: middle; text-align: center; }
.mx-col-inst .seg-avatar { margin: 0 auto; cursor: default; }
/* Filas de grupo */
.mx-row-group td {
background: var(--brand-bg);
padding: 8px 12px;
border-bottom: 1px solid var(--brand-border);
}
.mx-row-group .mx-col-cat {
background: var(--brand-bg);
padding-left: 12px;
}
.mx-group-toggle {
display: inline-flex; align-items: center; gap: 8px;
background: transparent; border: 0; padding: 0;
font: inherit; font-size: 13px; font-weight: 600;
color: var(--brand-text);
cursor: pointer;
text-transform: uppercase; letter-spacing: 0.04em;
}
.mx-group-toggle:hover { color: var(--brand-primary); }
.mx-group-toggle .mx-group-circle {
width: 16px; height: 16px;
color: var(--color-success);
flex-shrink: 0;
}
.mx-group-toggle .mx-group-icon {
flex-shrink: 0;
width: 18px; height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.mx-group-toggle .mx-group-icon svg { width: 18px; height: 18px; }
/* Paleta de íconos temáticos para grupos/categorías de seguros */
.seg-cat-icon { color: var(--brand-muted); }
.seg-cat-icon--vehiculos { color: #2563eb; } /* azul */
.seg-cat-icon--vida { color: #e11d48; } /* rosa-rojo */
.seg-cat-icon--salud { color: #059669; } /* verde */
.seg-cat-icon--hogar { color: #ea580c; } /* naranja */
.seg-cat-icon--viaje { color: #0891b2; } /* cyan */
.seg-cat-icon--mascota { color: #d97706; } /* ámbar */
.seg-cat-icon--cesantia { color: #7c3aed; } /* violeta */
.seg-cat-icon--credito { color: #dc2626; } /* rojo */
.seg-cat-icon--oncologicos { color: #db2777; } /* magenta */
.seg-cat-icon--ahorro { color: #0d9488; } /* teal */
.seg-cat-icon--pyme { color: #c2410c; } /* naranja oscuro */
.seg-cat-icon--financieros { color: #4f46e5; } /* indigo */
.seg-cat-icon--default { color: var(--brand-muted); }
.mx-group-chevron {
width: 14px; height: 14px;
color: var(--brand-muted);
transition: transform 200ms ease;
}
.mx-row-group.is-collapsed .mx-group-chevron { transform: rotate(-90deg); }
.mx-cell--group {
background: var(--brand-bg);
}
/* Filas de categoría */
.mx-row-cat .mx-col-cat--sub {
text-align: left;
padding-left: 30px;
padding-right: 8px;
color: var(--brand-text);
font-weight: 400;
background: var(--brand-bg);
white-space: normal;
line-height: 1.3;
overflow-wrap: anywhere;
}
.mx-row-cat:hover td { background: var(--brand-surface); }
.mx-row-cat:hover .mx-col-cat--sub { background: var(--brand-surface); }
/* Marcas (celdas) */
.mx-cell {
width: 38px;
min-width: 38px;
padding: 4px 2px;
}
.mx-mark {
display: inline-flex; align-items: center; justify-content: center;
gap: 3px;
padding: 0;
font: inherit; font-size: 12px;
line-height: 1; min-width: 20px;
border: 0; background: transparent;
text-decoration: none;
}
.mx-mark--ok { color: var(--brand-primary); }
.mx-mark--ok svg { width: 14px; height: 14px; color: #2563eb; }
.mx-mark--ok:hover svg { color: var(--brand-primary); }
.mx-mark--none { color: var(--brand-muted); }
.mx-mark--multi {
color: #2563eb;
font-weight: 500;
}
.mx-mark--multi svg { width: 14px; height: 14px; }
.mx-mark--multi span { font-size: 11px; }
/* Footer (leyenda + paginación) */
.mx-table-footer {
padding: 14px 18px;
display: flex; align-items: center; justify-content: space-between;
gap: 16px; flex-wrap: wrap;
border-top: 1px solid var(--brand-border);
}
.mx-legend {
list-style: none; margin: 0; padding: 0;
display: inline-flex; align-items: center; gap: 18px;
font-size: 13px; color: var(--brand-text);
}
.mx-legend li { display: inline-flex; align-items: center; gap: 6px; }
.mx-legend-mark {
width: 22px; min-width: 22px;
justify-content: center;
}
.mx-legend-mark.mx-mark--multi span { font-size: 11px; }
.mx-pager {
display: inline-flex; align-items: center; gap: 14px;
font-size: 13px; color: var(--brand-text);
}
.mx-page-size { display: inline-flex; align-items: center; gap: 8px; color: var(--brand-muted); }
.mx-page-size select {
appearance: none; -webkit-appearance: none;
padding: 6px 28px 6px 10px;
border: 1px solid var(--brand-border);
border-radius: var(--radius-sm);
background: var(--brand-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center;
color: var(--brand-text);
font: inherit; font-size: 12px;
cursor: pointer;
}
.mx-page-info { color: var(--brand-muted); }
.mx-page-buttons { display: inline-flex; align-items: center; gap: 4px; }
.mx-page-btn,
.mx-page-number {
display: inline-flex; align-items: center; justify-content: center;
min-width: 28px; height: 28px;
padding: 0 8px;
background: var(--brand-bg);
border: 1px solid var(--brand-border);
border-radius: var(--radius-sm);
font: inherit; font-size: 12px; color: var(--brand-text);
cursor: pointer;
transition: background 120ms, border-color 120ms;
}
.mx-page-btn svg { width: 14px; height: 14px; }
.mx-page-btn:hover:not(:disabled),
.mx-page-number:hover:not(.is-active) {
background: var(--brand-surface);
border-color: color-mix(in srgb, var(--brand-primary) 30%, var(--brand-border));
}
.mx-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.mx-page-number.is-active {
background: #2563eb;
border-color: #2563eb;
color: #fff;
font-weight: 600;
}
.mx-page-numbers { display: inline-flex; gap: 4px; }
.mx-page-ellipsis {
display: inline-flex; align-items: center; justify-content: center;
min-width: 28px; height: 28px;
color: var(--brand-muted); font-size: 12px;
}
@media (max-width: 768px) {
.mx-table-footer { flex-direction: column; align-items: stretch; }
.mx-pager { justify-content: space-between; flex-wrap: wrap; }
}
/* ── Revisión de Clasificaciones ──────────────────────────────── */
.rev-page { display: flex; flex-direction: column; gap: 18px; }
/* Header */
.rev-page-header {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 16px; flex-wrap: wrap;
}
.rev-page-heading { min-width: 0; max-width: 720px; }
.rev-page-title {
font-size: 28px; line-height: 1.15; letter-spacing: -0.02em;
margin: 0 0 4px;
}
.rev-page-lede {
margin: 0; color: var(--brand-muted); font-size: 14px;
}
.rev-page-actions { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rev-page-actions .btn svg { width: 14px; height: 14px; }
.rev-update {
display: inline-flex; align-items: center; gap: 8px;
font-size: 13px; color: var(--brand-muted);
}
.rev-update strong { color: var(--brand-text); font-weight: 500; }
.rev-update svg { width: 14px; height: 14px; }
/* KPIs */
.rev-kpi-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.rev-kpi {
background: var(--brand-bg);
border: 1px solid var(--brand-border);
border-radius: var(--radius-lg);
padding: 18px;
box-shadow: var(--shadow-sm);
display: flex; align-items: center; gap: 14px;
}
.rev-kpi-icon {
flex-shrink: 0;
width: 44px; height: 44px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--radius-md);
}
.rev-kpi-icon svg { width: 22px; height: 22px; }
.rev-kpi-icon--violet { background: #f5f3ff; color: #7c3aed; }
.rev-kpi-icon--warning { background: #fff7ed; color: #d97706; }
.rev-kpi-icon--success { background: #ecfdf5; color: #059669; }
.rev-kpi-icon--primary { background: #eff6ff; color: #2563eb; }
.rev-kpi-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rev-kpi-label {
font-size: 13px; color: var(--brand-muted);
line-height: 1.2;
}
.rev-kpi-value {
font-size: 28px; font-weight: 600; line-height: 1.1;
letter-spacing: -0.01em;
color: var(--brand-text);
}
.rev-kpi-value--violet { color: #7c3aed; }
.rev-kpi-value--warning { color: #d97706; }
.rev-kpi-value--success { color: #059669; }
.rev-kpi-value--primary { color: #2563eb; }
.rev-kpi-sub { font-size: 12px; color: var(--brand-muted); }
@media (max-width: 1100px) { .rev-kpi-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .rev-kpi-row { grid-template-columns: 1fr; } }
/* Toolbar */
.rev-toolbar {
background: var(--brand-bg);
border: 1px solid var(--brand-border);
border-radius: var(--radius-lg);
padding: 12px 14px;
display: flex; align-items: center; gap: 10px;
flex-wrap: wrap;
box-shadow: var(--shadow-sm);
}
.rev-inst-select {
position: relative;
display: inline-flex; align-items: center;
border: 1px solid var(--brand-border);
border-radius: var(--radius-md);
background: var(--brand-bg);
min-width: 280px;
transition: border-color 120ms, box-shadow 120ms;
}
.rev-inst-select:focus-within {
border-color: var(--brand-primary);
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.06);
}
.rev-inst-icon {
display: inline-flex; align-items: center; justify-content: center;
padding: 8px 0 8px 12px;
color: var(--brand-muted);
}
.rev-inst-icon svg { width: 18px; height: 18px; }
.rev-inst-select select {
appearance: none; -webkit-appearance: none;
flex: 1;
padding: 10px 38px 10px 10px;
border: 0; background: transparent;
font: inherit; font-size: 13px; color: var(--brand-text);
cursor: pointer;
}
.rev-inst-select select:focus { outline: none; }
.rev-inst-arrow {
position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
width: 14px; height: 14px; color: var(--brand-muted); pointer-events: none;
}
.rev-inst-link {
display: inline-flex; align-items: center; justify-content: center;
width: 38px; height: 38px;
border: 1px solid var(--brand-border);
border-radius: var(--radius-md);
color: var(--brand-muted);
transition: border-color 120ms, color 120ms;
}
.rev-inst-link:hover { color: var(--brand-primary); border-color: var(--brand-primary); }
.rev-inst-link svg { width: 16px; height: 16px; }
.rev-search {
position: relative;
flex: 1; min-width: 220px;
display: flex; align-items: center;
}
.rev-search svg {
position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
width: 16px; height: 16px; color: var(--brand-muted);
}
.rev-search input {
width: 100%;
padding: 10px 12px 10px 38px;
border: 1px solid var(--brand-border);
border-radius: var(--radius-md);
background: var(--brand-bg);
font: inherit; font-size: 13px;
color: var(--brand-text);
transition: border-color 120ms, box-shadow 120ms;
}
.rev-search input:focus {
outline: none;
border-color: var(--brand-primary);
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.06);
}
.rev-toolbar-extra svg { width: 14px; height: 14px; }
/* Lista de cards */
.rev-list { display: flex; flex-direction: column; gap: 12px; }
.rev-card {
position: relative;
background: var(--brand-bg);
border: 1px solid var(--brand-border);
border-radius: var(--radius-lg);
padding: 18px 56px 18px 18px;
box-shadow: var(--shadow-sm);
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: 24px;
transition: border-color 150ms, box-shadow 150ms;
}
.rev-card:hover {
border-color: color-mix(in srgb, var(--brand-primary) 25%, var(--brand-border));
box-shadow: var(--shadow-md);
}
.rev-card-main { display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
.rev-card-icon {
position: relative;
flex-shrink: 0;
width: 44px; height: 44px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--radius-md);
background: #eef2ff;
color: #4f46e5;
}
.rev-card-icon svg { width: 22px; height: 22px; }
.rev-card-badge {
position: absolute; top: -4px; right: -4px;
width: 18px; height: 18px;
background: var(--color-warning); color: #fff;
border: 2px solid var(--brand-bg);
border-radius: 50%;
font-size: 10px; font-weight: 700; line-height: 1;
display: inline-flex; align-items: center; justify-content: center;
}
.rev-card-body { min-width: 0; flex: 1; }
.rev-card-title {
font-size: 15px; font-weight: 600;
margin: 0 0 6px;
color: var(--brand-text);
}
.rev-card-title a {
color: inherit;
}
.rev-card-title a:hover { color: var(--brand-primary); }
.rev-card-desc {
margin: 0 0 8px;
font-size: 13px; color: var(--brand-muted);
line-height: 1.5;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.rev-card.is-expanded .rev-card-desc {
-webkit-line-clamp: unset;
display: block;
}
.rev-card-source {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px;
background: var(--brand-surface);
border: 1px solid var(--brand-border);
border-radius: var(--radius-md);
font-size: 12px; color: var(--brand-text);
}
.rev-card-source svg { width: 13px; height: 13px; color: var(--brand-muted); }
.rev-card-link {
display: inline-flex; align-items: center;
color: var(--brand-muted);
margin-left: 4px;
}
.rev-card-link:hover { color: var(--brand-primary); }
.rev-card-link svg { width: 13px; height: 13px; }
/* Form de clasificación inline */
.rev-card-form { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.rev-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.rev-form-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rev-form-field label {
font-size: 12px; color: var(--brand-muted);
}
.rev-form-field select {
appearance: none; -webkit-appearance: none;
width: 100%;
padding: 8px 30px 8px 10px;
border: 1px solid var(--brand-border);
border-radius: var(--radius-md);
background: var(--brand-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
font: inherit; font-size: 13px;
color: var(--brand-text);
cursor: pointer;
}
.rev-form-field select:focus {
outline: none; border-color: var(--brand-primary);
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.06);
}
.rev-form-row { display: flex; gap: 10px; align-items: stretch; }
.rev-form-just {
flex: 1;
padding: 8px 12px;
border: 1px solid var(--brand-border);
border-radius: var(--radius-md);
background: var(--brand-bg);
font: inherit; font-size: 13px;
color: var(--brand-text);
}
.rev-form-just:focus {
outline: none; border-color: var(--brand-primary);
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.06);
}
.rev-form-submit { white-space: nowrap; }
.rev-form-submit svg { width: 14px; height: 14px; }
.rev-card-expand {
position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
width: 28px; height: 28px;
background: transparent; border: 1px solid var(--brand-border);
border-radius: var(--radius-sm);
color: var(--brand-muted);
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
transition: background 120ms, color 120ms, border-color 120ms;
}
.rev-card-expand:hover {
color: var(--brand-primary);
border-color: var(--brand-primary);
}
.rev-card-expand svg {
width: 14px; height: 14px;
transition: transform 200ms ease;
}
.rev-card.is-expanded .rev-card-expand svg { transform: rotate(180deg); }
@media (max-width: 1100px) {
.rev-card { grid-template-columns: 1fr; }
}
/* Footer (paginación) */
.rev-footer {
display: flex; align-items: center; justify-content: space-between;
gap: 14px; flex-wrap: wrap;
padding: 4px 4px;
}
.rev-footer-info { font-size: 13px; color: var(--brand-muted); }
.rev-pager {
display: inline-flex; align-items: center; gap: 14px;
font-size: 13px; color: var(--brand-text);
}
.rev-page-size {
display: inline-flex; align-items: center; gap: 8px;
color: var(--brand-muted);
}
.rev-page-size select {
appearance: none; -webkit-appearance: none;
padding: 6px 28px 6px 10px;
border: 1px solid var(--brand-border);
border-radius: var(--radius-sm);
background: var(--brand-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center;
color: var(--brand-text);
font: inherit; font-size: 12px;
cursor: pointer;
}
.rev-page-buttons { display: inline-flex; align-items: center; gap: 4px; }
.rev-page-btn,
.rev-page-number {
display: inline-flex; align-items: center; justify-content: center;
min-width: 28px; height: 28px;
padding: 0 8px;
background: var(--brand-bg);
border: 1px solid var(--brand-border);
border-radius: var(--radius-sm);
font: inherit; font-size: 12px; color: var(--brand-text);
cursor: pointer;
transition: background 120ms, border-color 120ms;
}
.rev-page-btn svg { width: 14px; height: 14px; }
.rev-page-btn:hover:not(:disabled),
.rev-page-number:hover:not(.is-active) {
background: var(--brand-surface);
border-color: color-mix(in srgb, var(--brand-primary) 30%, var(--brand-border));
}
.rev-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.rev-page-number.is-active {
background: #2563eb; border-color: #2563eb; color: #fff;
font-weight: 600;
}
.rev-page-numbers { display: inline-flex; gap: 4px; }
.rev-page-ellipsis {
display: inline-flex; align-items: center; justify-content: center;
min-width: 28px; height: 28px;
color: var(--brand-muted); font-size: 12px;
}
/* ── Detalle de producto (Conoce más) ─────────────────────────── */
.pd { display: flex; flex-direction: column; gap: 16px; max-width: 980px; }
/* Top bar */
.pd-topbar {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; flex-wrap: wrap;
}
.pd-back svg { width: 14px; height: 14px; }
.pd-topbar-actions { display: inline-flex; gap: 8px; }
.pd-topbar-actions .btn svg { width: 14px; height: 14px; }
.pd-more { padding: 6px 8px !important; }
/* Header */
.pd-header { padding: 4px 0 4px; }
.pd-title {
display: inline-flex; align-items: center; gap: 10px;
font-size: 28px; line-height: 1.15; letter-spacing: -0.02em;
margin: 0 0 10px; color: var(--brand-text);
}
.pd-title-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px;
border-radius: var(--radius-md);
background: #eff6ff; color: #2563eb;
}
.pd-title-icon svg { width: 18px; height: 18px; }
.pd-meta-row {
display: inline-flex; flex-wrap: wrap; align-items: center;
gap: 8px; font-size: 13px; color: var(--brand-muted);
}
.pd-meta-chip {
display: inline-flex; align-items: center; gap: 5px;
color: var(--brand-text);
}
.pd-meta-chip svg { width: 13px; height: 13px; color: var(--brand-muted); }
.pd-meta-sep { color: var(--brand-border); }
/* Cards genérica */
.pd-card {
background: var(--brand-bg);
border: 1px solid var(--brand-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.pd-card-header {
display: flex; align-items: center; gap: 10px;
padding: 14px 18px;
border-bottom: 1px solid var(--brand-border);
}
.pd-card-icon {
flex-shrink: 0;
width: 28px; height: 28px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--radius-sm);
}
.pd-card-icon svg { width: 16px; height: 16px; }
.pd-card-icon--primary { background: #eff6ff; color: #2563eb; }
.pd-card-icon--muted { background: var(--brand-surface); color: var(--brand-muted); }
.pd-card-title {
flex: 1;
font-size: 15px; font-weight: 600;
margin: 0; color: var(--brand-text);
}
.pd-card-tag {
display: inline-block;
padding: 2px 8px; border-radius: 999px;
background: var(--brand-surface);
border: 1px solid var(--brand-border);
font-size: 11px; font-weight: 500;
color: var(--brand-muted);
text-transform: uppercase; letter-spacing: 0.06em;
}
.pd-card-toggle {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 10px;
background: transparent;
border: 1px solid var(--brand-border);
border-radius: var(--radius-sm);
font: inherit; font-size: 12px;
color: var(--brand-text);
cursor: pointer;
transition: border-color 120ms, color 120ms;
}
.pd-card-toggle:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.pd-card-toggle svg { width: 14px; height: 14px; }
.pd-card-toggle-hide { display: none; }
.pd-card.is-expanded .pd-card-toggle-show { display: none; }
.pd-card.is-expanded .pd-card-toggle-hide { display: inline; }
.pd-card-body { padding: 18px; }
/* Hero */
.pd-hero {
background: var(--brand-surface);
border: 1px solid var(--brand-border);
border-radius: var(--radius-lg);
padding: 18px;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 18px;
align-items: stretch;
}
.pd-hero-avatar {
width: 96px; height: 96px;
border-radius: 50%;
background: var(--brand-primary);
color: #fff;
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center;
overflow: hidden;
padding: 8px;
flex-shrink: 0;
}
.pd-hero-avatar span {
font-size: 28px; font-weight: 700;
line-height: 1;
}
.pd-hero-avatar small {
margin-top: 4px;
font-size: 9px; line-height: 1.1;
text-transform: uppercase; letter-spacing: 0.04em;
opacity: 0.85;
word-break: break-word;
}
.pd-hero-info { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pd-hero-info-row { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pd-hero-label {
font-size: 11px; color: var(--brand-muted);
text-transform: uppercase; letter-spacing: 0.06em;
font-weight: 500;
}
.pd-hero-value { font-size: 14px; color: var(--brand-text); }
.pd-hero-value--strong { font-weight: 600; }
.pd-hero-source {
display: inline-flex; align-items: center; gap: 6px;
font-size: 13px; color: var(--brand-text);
font-family: var(--font-mono);
text-decoration: none;
word-break: break-all;
}
.pd-hero-source:hover { color: var(--brand-primary); }
.pd-hero-source svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--brand-muted); }
.pd-hero-dates { display: flex; flex-direction: column; gap: 8px; }
.pd-hero-date {
background: var(--brand-bg);
border: 1px solid var(--brand-border);
border-radius: var(--radius-md);
padding: 10px 14px;
display: inline-flex; align-items: center; gap: 10px;
min-width: 220px;
}
.pd-hero-date-icon {
width: 28px; height: 28px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--radius-sm);
background: var(--brand-surface);
color: var(--brand-muted);
flex-shrink: 0;
}
.pd-hero-date-icon svg { width: 16px; height: 16px; }
.pd-hero-date-label {
display: block;
font-size: 11px; color: var(--brand-muted);
}
.pd-hero-date-value {
display: block;
font-size: 13px; color: var(--brand-text);
font-weight: 500;
}
@media (max-width: 900px) {
.pd-hero { grid-template-columns: auto 1fr; }
.pd-hero-dates { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
}
/* Sobre este seguro: narrativa + FAQ */
.pd-narrative {
margin: 0 0 18px;
color: var(--brand-text); font-size: 14px;
line-height: 1.6;
}
.pd-faq-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px 18px;
}
.pd-faq-item {
border-bottom: 1px solid var(--brand-border);
}
.pd-faq-item summary {
list-style: none;
padding: 12px 0;
display: flex; align-items: center; justify-content: space-between;
gap: 8px;
cursor: pointer;
font-size: 13px; font-weight: 500;
color: var(--brand-text);
}
.pd-faq-item summary::-webkit-details-marker { display: none; }
.pd-faq-item summary::before {
content: '›';
margin-right: 6px;
font-size: 16px; line-height: 0; color: var(--brand-muted);
}
.pd-faq-chevron {
width: 14px; height: 14px;
color: var(--brand-muted);
transition: transform 200ms ease;
}
.pd-faq-item[open] .pd-faq-chevron { transform: rotate(180deg); }
.pd-faq-item summary:hover { color: var(--brand-primary); }
.pd-faq-content {
padding: 0 0 14px 14px;
font-size: 13px; line-height: 1.55;
color: var(--brand-muted);
}
@media (max-width: 720px) {
.pd-faq-grid { grid-template-columns: 1fr; }
}
/* Coberturas */
.pd-prima {
display: flex; align-items: baseline; gap: 8px;
padding: 12px 14px;
background: var(--brand-surface);
border: 1px solid var(--brand-border);
border-radius: var(--radius-md);
margin-bottom: 16px;
}
.pd-prima-label {
font-size: 12px; color: var(--brand-muted);
text-transform: uppercase; letter-spacing: 0.06em;
}
.pd-prima-value {
font-size: 18px; font-weight: 600;
color: var(--brand-text);
}
.pd-coverage-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px 28px;
}
.pd-coverage-block { min-width: 0; }
.pd-coverage-title {
font-size: 14px; font-weight: 600;
margin: 0 0 10px;
color: var(--brand-text);
}
.pd-coverage-list {
list-style: none;
margin: 0; padding: 0;
display: flex; flex-direction: column; gap: 8px;
}
.pd-coverage-list li {
display: flex; align-items: flex-start; gap: 10px;
font-size: 13px; line-height: 1.5;
color: var(--brand-text);
}
.pd-coverage-bullet {
flex-shrink: 0;
width: 22px; height: 22px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
background: #eff6ff;
color: #2563eb;
margin-top: 1px;
}
.pd-coverage-bullet svg { width: 12px; height: 12px; }
.pd-coverage-text {
margin: 0;
font-size: 13px; line-height: 1.5;
color: var(--brand-text);
}
.pd-footnote {
margin: 18px 0 0;
padding: 10px 12px;
border-top: 1px dashed var(--brand-border);
font-size: 12px; line-height: 1.5;
color: var(--brand-muted);
display: flex; align-items: flex-start; gap: 8px;
}
.pd-footnote svg { width: 13px; height: 13px; margin-top: 2px; flex-shrink: 0; }
.pd-footnote a { color: var(--brand-primary); }
@media (max-width: 720px) {
.pd-coverage-grid { grid-template-columns: 1fr; }
}
/* Justificación + texto crudo */
.pd-justif {
background: color-mix(in srgb, var(--brand-accent) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--brand-accent) 30%, var(--brand-border));
border-radius: var(--radius-md);
padding: 12px 14px;
display: flex; gap: 10px; align-items: flex-start;
margin-bottom: 12px;
}
.pd-justif-icon {
flex-shrink: 0;
width: 28px; height: 28px;
display: inline-flex; align-items: center; justify-content: center;
color: var(--brand-accent);
}
.pd-justif-icon svg { width: 16px; height: 16px; }
.pd-justif-body strong {
display: block; font-size: 13px; color: var(--brand-text);
margin-bottom: 2px;
}
.pd-justif-body p {
margin: 0;
font-size: 13px; line-height: 1.5;
color: var(--brand-text);
}
.pd-coverage-raw {
display: none;
}
.pd-card.is-expanded .pd-coverage-raw { display: block; margin-top: 12px; }
.pd-coverage-raw pre {
margin: 0;
padding: 14px 16px;
background: var(--brand-surface);
border: 1px solid var(--brand-border);
border-radius: var(--radius-md);
font-family: var(--font-mono); font-size: 12px;
line-height: 1.55;
white-space: pre-wrap;
word-break: break-word;
max-height: 360px; overflow-y: auto;
color: var(--brand-text);
}
/* Corregir clasificación */
.pd-correct-form { display: flex; flex-direction: column; gap: 14px; }
.pd-correct-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.pd-correct-field { display: flex; flex-direction: column; gap: 6px; }
.pd-correct-field label {
font-size: 12px; color: var(--brand-muted);
font-weight: 500;
}
.pd-correct-field select,
.pd-correct-field textarea {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--brand-border);
border-radius: var(--radius-md);
font: inherit; font-size: 13px;
color: var(--brand-text);
background: var(--brand-bg);
transition: border-color 120ms, box-shadow 120ms;
}
.pd-correct-field select {
appearance: none; -webkit-appearance: none;
padding-right: 36px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
cursor: pointer;
}
.pd-correct-field textarea { resize: vertical; min-height: 80px; }
.pd-correct-field select:focus,
.pd-correct-field textarea:focus {
outline: none;
border-color: var(--brand-primary);
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.06);
}
.pd-correct-submit {
width: 100%;
padding: 12px 16px !important;
font-weight: 500;
}
.pd-correct-submit svg { width: 14px; height: 14px; }
@media (max-width: 720px) {
.pd-correct-grid { grid-template-columns: 1fr; }
}
/* Historial */
.pd-history {
list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column; gap: 12px;
}
.pd-history-item {
padding: 12px 14px;
border: 1px solid var(--brand-border);
border-radius: var(--radius-md);
display: grid;
grid-template-columns: auto 1fr;
gap: 4px 12px;
}
.pd-history-cat {
grid-column: 1; grid-row: 1;
display: inline-block;
padding: 2px 10px; border-radius: 999px;
background: #eff6ff; color: #2563eb;
font-size: 11px; font-weight: 500;
text-transform: uppercase; letter-spacing: 0.04em;
}
.pd-history-date {
grid-column: 2; grid-row: 1;
text-align: right;
font-size: 12px; color: var(--brand-muted);
}
.pd-history-text {
grid-column: 1 / -1;
margin: 4px 0 0;
font-size: 13px; color: var(--brand-text);
line-height: 1.5;
}
.pd-history-author {
grid-column: 1 / -1;
margin-top: 4px;
font-size: 11px; color: var(--brand-muted);
}
/* ─────────────────────────────────────────────────────────────────
PWA / Responsive global
- Safe-area-inset (iOS notch, Android gesture bar).
- Anti-zoom en inputs en mobile (font-size ≥16px).
- Touch targets ≥44px en dispositivos táctiles.
- .table-responsive wrapper para tablas anchas.
- Drawer del chat-sidebar en mobile.
- Tweaks específicos cuando la app corre en standalone (instalada).
───────────────────────────────────────────────────────────────── */
/* Estilo base de tablas planas (.data-table / .wk-table) — antes solo
visible vía DataTables; ahora también vivas en admin y team. */
.data-table {
width: 100%;
border-collapse: collapse;
background: var(--brand-bg);
font-size: 14px;
}
.data-table th,
.data-table td {
padding: 10px 14px;
border-bottom: 1px solid var(--brand-border);
text-align: left;
vertical-align: middle;
}
.data-table th {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--brand-muted);
background: var(--brand-surface);
font-weight: 600;
}
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: var(--brand-surface); }
.data-table td.empty,
.data-table td .empty {
color: var(--brand-muted);
text-align: center;
padding: 24px 12px;
}
/* Wrapper para hacer scroll horizontal en tablas anchas, en vez de
romper el layout. Aplica también si una sale como hija
directa de un .card-body o .card sin envoltura explícita. */
.table-responsive,
.card-body > table:not(.dataTable):not([data-controller="datatable"]),
.card > table:not(.dataTable):not([data-controller="datatable"]) {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
.table-responsive { display: block; }
.table-responsive > table { min-width: 100%; }
/* Safe-area-inset para el layout principal y elementos fijos. */
.app-layout {
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}
.main-content {
padding-bottom: max(64px, calc(64px + env(safe-area-inset-bottom)));
}
.sidebar {
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
}
/* Mobile (≤768px): reduce paddings y aumenta targets táctiles. */
@media (max-width: 768px) {
.main-content { padding: 20px 16px 56px; }
body.sidebar-open { overflow: hidden; }
.page-title { font-size: 22px; }
h1 { font-size: 24px; }
h2 { font-size: 19px; }
/* Anti-zoom iOS: inputs ≥16px de font-size */
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="search"],
.form-group input[type="tel"],
.form-group input[type="url"],
.form-group select,
.form-group textarea,
.cfg-field input,
.cfg-field select,
.cfg-field textarea,
.chat-composer textarea,
.chat-search-input input,
.rev-search input {
font-size: 16px;
}
/* Botones con altura táctil mínima. */
.btn { min-height: 44px; padding: 11px 18px; }
.btn-sm, .btn-xs { min-height: 36px; }
/* Sidebar nav items: targets más cómodos. */
.sidebar .nav-item { padding: 12px 12px; font-size: 15px; }
.sidebar-user-logout { width: 44px; height: 44px; }
/* Cards menos densas. */
.card-body { padding: 18px 16px; }
}
/* Phone pequeño (≤480px). */
@media (max-width: 480px) {
.main-content { padding: 16px 12px 56px; }
.auth-page { padding: 16px; }
.auth-card { padding: 22px 18px; }
.landing-header { padding: 16px 20px; }
.landing-hero { padding: 56px 20px; }
.landing-hero h1 { font-size: 28px; }
.landing-hero .lede { font-size: 15px; }
.chat-composer { padding: 10px 12px; gap: 8px; }
.chat-composer textarea { font-size: 16px; }
.chat-messages { padding: 18px 14px; }
.chat-bubble { max-width: 90vw; }
.chat-panel-header { padding: 12px 14px; }
}
/* Pointer coarse (touch) — sin importar viewport, asegura touch targets. */
@media (pointer: coarse) {
.nav-item,
.sidebar-ctx-menu-item,
.chat-conv-item,
.data-table a,
.table a {
min-height: 44px;
}
a.btn-link,
button.btn-link { padding: 10px 4px; }
}
/* ── Chat layout en mobile: drawer en vez de ocultar sidebar ── */
@media (max-width: 900px) {
.chat-layout {
position: relative;
}
.chat-sidebar {
display: flex;
position: fixed;
left: 0; top: 0; bottom: 0;
width: min(86vw, 320px);
z-index: 55;
background: var(--brand-bg);
border-right: 1px solid var(--brand-border);
transform: translateX(-100%);
transition: transform 200ms ease;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
}
body.chat-drawer-open .chat-sidebar { transform: translateX(0); }
body.chat-drawer-open .chat-drawer-overlay {
opacity: 1; pointer-events: auto;
}
.chat-drawer-overlay {
position: fixed; inset: 0;
background: rgba(15, 23, 42, 0.45);
z-index: 50;
opacity: 0; pointer-events: none;
transition: opacity 200ms ease;
}
.chat-drawer-toggle {
display: inline-flex;
align-items: center; justify-content: center;
width: 36px; height: 36px;
padding: 0;
border: 1px solid var(--brand-border);
border-radius: var(--radius-md);
background: var(--brand-bg);
color: var(--brand-text);
cursor: pointer;
flex-shrink: 0;
}
.chat-drawer-toggle svg { width: 18px; height: 18px; }
}
@media (min-width: 901px) {
.chat-drawer-toggle { display: none; }
.chat-drawer-overlay { display: none; }
}
/* ── Widget de chat estilo LinkedIn (3 estados) ─────────────────
Estados:
.chat-widget--collapsed → barra inferior derecha (52px)
.chat-widget--open → panel flotante (~380x600px)
.chat-widget--fullscreen→ overlay sobre toda la pantalla
*/
.chat-widget {
position: fixed;
right: max(20px, env(safe-area-inset-right));
bottom: 0;
z-index: 40;
width: 320px;
font-family: var(--font-sans, inherit);
display: flex; flex-direction: column;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
background: var(--brand-bg);
box-shadow: 0 -2px 16px rgba(15, 23, 42, 0.12);
border: 1px solid var(--brand-border);
border-bottom: 0;
overflow: hidden;
}
/* ── Barra del estado COLAPSADO ────────────────────────────────── */
.chat-widget__bar {
display: flex; align-items: center;
gap: 8px;
padding: 8px 10px 8px 12px;
background: var(--brand-bg);
border: 0;
cursor: default;
}
.chat-widget__bar-title {
flex: 1; min-width: 0;
display: flex; align-items: center; gap: 10px;
background: transparent;
border: 0;
padding: 6px 4px;
cursor: pointer;
text-align: left;
color: var(--brand-text);
font: inherit;
}
.chat-widget__bar-title:hover .chat-widget__bar-name {
color: var(--brand-primary);
}
.chat-widget__bar-avatar {
position: relative;
flex-shrink: 0;
width: 32px; height: 32px;
border-radius: 50%;
background: var(--brand-primary);
color: var(--agent-color, var(--brand-accent));
display: inline-flex; align-items: center; justify-content: center;
}
.chat-widget__bar-avatar svg { width: 16px; height: 16px; }
.chat-widget__bar-dot {
position: absolute;
bottom: 0; right: 0;
width: 10px; height: 10px;
background: #22c55e;
border: 2px solid var(--brand-bg);
border-radius: 50%;
}
.chat-widget__bar-text {
min-width: 0;
display: flex; flex-direction: column; gap: 0;
line-height: 1.2;
}
.chat-widget__bar-name {
font-size: 14px; font-weight: 600;
color: var(--brand-text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-widget__bar-agent {
font-size: 11px; color: var(--brand-muted);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-widget__bar-actions {
display: inline-flex; align-items: center; gap: 2px;
flex-shrink: 0;
}
.chat-widget__bar-action {
width: 32px; height: 32px;
display: inline-flex; align-items: center; justify-content: center;
background: transparent;
border: 0;
border-radius: var(--radius-sm, 6px);
color: var(--brand-muted);
cursor: pointer;
transition: background 120ms, color 120ms;
}
.chat-widget__bar-action:hover {
background: var(--brand-surface);
color: var(--brand-text);
}
.chat-widget__chevron { transition: transform 180ms; }
/* ── Panel (estados open + fullscreen) ─────────────────────────── */
.chat-widget__panel {
display: flex; flex-direction: column;
border-top: 1px solid var(--brand-border);
background: var(--brand-bg);
height: min(620px, calc(100vh - 120px));
}
.chat-widget__panel-header {
display: flex; align-items: center; justify-content: space-between;
gap: 8px;
padding: 10px 12px;
border-bottom: 1px solid var(--brand-border);
background: var(--brand-bg);
}
.chat-widget__panel-title {
display: flex; align-items: center; gap: 10px;
min-width: 0; flex: 1;
}
.chat-widget__panel-title > div {
display: flex; flex-direction: column;
min-width: 0;
line-height: 1.2;
}
.chat-widget__panel-title strong {
font-size: 14px; font-weight: 600;
color: var(--brand-text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-widget__panel-subtitle {
font-size: 11px; color: var(--brand-muted);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-widget__panel-actions {
display: inline-flex; align-items: center; gap: 2px;
flex-shrink: 0;
}
.chat-widget__body {
flex: 1;
min-height: 0;
background: var(--brand-surface);
overflow: hidden;
}
.chat-widget__loading {
display: flex; align-items: center; justify-content: center;
gap: 10px;
padding: 32px 16px;
font-size: 13px;
color: var(--brand-muted);
height: 100%;
}
.chat-widget__loading--error { color: var(--color-error, #b91c1c); }
.chat-widget__spinner {
width: 14px; height: 14px;
border: 2px solid var(--brand-border);
border-top-color: var(--brand-primary);
border-radius: 50%;
animation: chat-widget-spin 0.8s linear infinite;
}
@keyframes chat-widget-spin {
to { transform: rotate(360deg); }
}
/* ── Estado COLAPSADO ──────────────────────────────────────────── */
.chat-widget--collapsed { /* default */ }
.chat-widget--collapsed .chat-widget__panel { display: none; }
.chat-widget--collapsed .chat-widget__chevron { transform: rotate(0deg); }
/* ── Estado ABIERTO ────────────────────────────────────────────── */
.chat-widget--open {
width: 380px;
/* Sobre el panel de navegación móvil (.sidebar z-index:50) pero bajo el
confirm-modal (z-index:100, montado en ) para que el modal de
"eliminar conversación" siga apareciendo encima del chat. */
z-index: 60;
}
.chat-widget--open .chat-widget__bar { display: none; }
.chat-widget--open .chat-widget__bar-action--exit-fullscreen { display: none; }
/* ── Estado FULLSCREEN ─────────────────────────────────────────── */
.chat-widget--fullscreen {
inset: 0;
width: 100%;
height: 100%;
border: 0;
border-radius: 0;
box-shadow: none;
z-index: 60;
}
.chat-widget--fullscreen .chat-widget__bar { display: none; }
.chat-widget--fullscreen .chat-widget__panel {
flex: 1;
height: 100%;
}
.chat-widget--fullscreen .chat-widget__bar-action--enter-fullscreen { display: none; }
body.chat-widget-fullscreen { overflow: hidden; }
/* ── Ajustes del chat embebido dentro del widget ───────────────── */
.chat-layout--embedded {
display: flex;
height: 100%;
min-height: 0;
margin: 0;
background: var(--brand-bg);
}
.chat-layout--embedded .chat-panel {
flex: 1;
min-width: 0;
min-height: 0;
height: 100%;
}
.chat-layout--embedded .chat-messages {
min-height: 0;
}
.chat-widget--open .chat-layout--embedded .chat-sidebar { display: none; }
.chat-widget--open .chat-layout--embedded .chat-drawer-toggle { display: inline-flex; }
/* El chrome del botón vive en @media (max-width:900px); dentro del widget
se fuerza visible también en escritorio, así que aquí lo igualamos al
estilo .chat-hdr-btn (sin tocar su lógica de display). */
.chat-widget--open .chat-layout--embedded .chat-drawer-toggle,
.chat-widget--fullscreen .chat-layout--embedded .chat-drawer-toggle {
align-items: center; justify-content: center;
width: 32px; height: 32px;
padding: 0;
border: 0;
border-radius: var(--radius-sm, 6px);
background: transparent;
color: var(--brand-muted);
cursor: pointer;
flex-shrink: 0;
transition: background 120ms, color 120ms;
}
.chat-widget--open .chat-layout--embedded .chat-drawer-toggle:hover,
.chat-widget--fullscreen .chat-layout--embedded .chat-drawer-toggle:hover {
background: var(--brand-surface);
color: var(--brand-text);
}
.chat-widget--open .chat-layout--embedded .chat-drawer-toggle svg,
.chat-widget--fullscreen .chat-layout--embedded .chat-drawer-toggle svg {
width: 16px; height: 16px;
}
.chat-widget--open .chat-layout--embedded .chat-panel-header {
padding: 10px 14px;
gap: 10px;
}
.chat-widget--open .chat-layout--embedded .chat-panel-title { font-size: 14px; }
.chat-widget--open .chat-layout--embedded .chat-panel-subtitle { font-size: 11px; }
.chat-widget--open .chat-layout--embedded .chat-messages {
padding: 18px 16px;
gap: 14px;
}
.chat-widget--open .chat-layout--embedded .chat-bubble { font-size: 13px; max-width: 80%; }
.chat-widget--open .chat-layout--embedded .chat-composer { padding: 10px 12px; }
/* En estado FULLSCREEN mostramos sidebar + panel lado a lado cuando hay
espacio (>900px). */
@media (min-width: 901px) {
.chat-widget--fullscreen .chat-layout--embedded .chat-sidebar {
display: flex;
width: 320px;
flex-shrink: 0;
}
.chat-widget--fullscreen .chat-layout--embedded .chat-drawer-toggle { display: none; }
}
/* Drawer overlay: en modo open/fullscreen el sidebar abre como cajón.
Refinamos el comportamiento para que funcione dentro del widget también. */
.chat-widget .chat-layout--embedded .chat-drawer-overlay {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.45);
z-index: 5;
opacity: 0; pointer-events: none;
transition: opacity 200ms ease;
}
.chat-widget .chat-layout--embedded {
position: relative;
}
body.chat-drawer-open .chat-widget .chat-layout--embedded .chat-drawer-overlay {
opacity: 1; pointer-events: auto;
}
body.chat-drawer-open .chat-widget--open .chat-layout--embedded .chat-sidebar,
body.chat-drawer-open .chat-widget--fullscreen .chat-layout--embedded .chat-sidebar {
display: flex;
position: absolute;
left: 0; top: 0; bottom: 0;
width: min(280px, 80%);
z-index: 10;
background: var(--brand-bg);
border-right: 1px solid var(--brand-border);
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
transform: translateX(0);
}
/* Mobile: el widget en estado colapsado se reduce a icono circular. */
@media (max-width: 600px) {
.chat-widget {
right: max(12px, env(safe-area-inset-right));
bottom: max(12px, env(safe-area-inset-bottom));
}
.chat-widget--collapsed {
width: auto;
border-radius: 999px;
border-bottom: 1px solid var(--brand-border);
bottom: max(16px, env(safe-area-inset-bottom));
}
.chat-widget--collapsed .chat-widget__bar { padding: 4px; }
.chat-widget--collapsed .chat-widget__bar-text { display: none; }
.chat-widget--collapsed .chat-widget__bar-actions { display: none; }
.chat-widget--open {
width: calc(100vw - 24px);
right: 12px;
}
.chat-widget--open .chat-widget__panel {
height: min(560px, calc(100vh - 100px));
}
}
/* ── Estilos cuando la app corre instalada (standalone) ── */
@media all and (display-mode: standalone) {
/* Oculta CTAs de "Iniciar sesión" duplicadas si están en el chrome PWA */
.landing-header .btn-secondary { display: inline-flex; }
/* Suaviza el sticky header para evitar parpadeos en transición. */
.sidebar { will-change: transform; }
}
/* iOS PWA: prevenir bounce de la página completa, dejar scroll a los
contenedores internos. */
@media (display-mode: standalone) and (pointer: coarse) {
html, body { overscroll-behavior-y: contain; }
}
/* Tap highlights más sobrios en iOS/Android. */
a, button { -webkit-tap-highlight-color: rgba(15, 23, 42, 0.08); }
/* Mejor scroll en contenedores con overflow horizontal. */
.table-responsive::-webkit-scrollbar,
.chat-messages::-webkit-scrollbar { height: 8px; width: 8px; }
.table-responsive::-webkit-scrollbar-thumb,
.chat-messages::-webkit-scrollbar-thumb {
background: var(--brand-border);
border-radius: 999px;
}
/* ── Admin dashboard (/admin) ───────────────────────────────── */
.adm-hero {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 16px; flex-wrap: wrap;
margin-bottom: 24px;
}
.adm-hero-titles { min-width: 0; max-width: 720px; }
.adm-hero-title {
margin: 0 0 6px;
font-size: 28px; line-height: 1.15; letter-spacing: -0.02em;
color: var(--brand-text);
}
.adm-hero-lede {
margin: 0; color: var(--brand-muted); font-size: 14px;
line-height: 1.5;
}
.adm-hero-actions {
display: inline-flex; gap: 10px; flex-wrap: wrap;
}
.adm-hero-actions .btn {
display: inline-flex; align-items: center; gap: 6px;
}
/* KPI grid */
.adm-kpi-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
margin-bottom: 22px;
}
@media (max-width: 1100px) { .adm-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .adm-kpi-grid { grid-template-columns: 1fr; } }
.adm-kpi {
position: relative;
display: flex; align-items: flex-start; gap: 14px;
padding: 18px 20px;
background: var(--brand-bg);
border: 1px solid var(--brand-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
color: inherit; text-decoration: none;
transition: transform 120ms, box-shadow 120ms, border-color 120ms;
}
.adm-kpi:not(.adm-kpi--static):hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--brand-primary) 35%, var(--brand-border));
box-shadow: var(--shadow-md);
color: inherit;
}
.adm-kpi--static { cursor: default; }
.adm-kpi-icon {
flex-shrink: 0;
width: 40px; height: 40px;
border-radius: var(--radius-md);
display: inline-flex; align-items: center; justify-content: center;
}
.adm-kpi-icon svg { width: 20px; height: 20px; }
.adm-kpi--customers .adm-kpi-icon { background: #eff6ff; color: #2563eb; }
.adm-kpi--users .adm-kpi-icon { background: #f5f3ff; color: #7c3aed; }
.adm-kpi--agents .adm-kpi-icon { background: #fef3c7; color: #b45309; }
.adm-kpi--contracts .adm-kpi-icon { background: #ecfeff; color: #0e7490; }
.adm-kpi-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.adm-kpi-label {
font-size: 12px; font-weight: 500;
color: var(--brand-muted);
text-transform: uppercase; letter-spacing: 0.04em;
}
.adm-kpi-value {
font-size: 28px; font-weight: 600; line-height: 1.15;
color: var(--brand-text); letter-spacing: -0.01em;
}
.adm-kpi-sub {
font-size: 12px; color: var(--brand-muted);
margin-top: 2px;
}
.adm-kpi-arrow {
align-self: center;
color: var(--brand-muted);
font-size: 18px;
transition: transform 120ms, color 120ms;
}
.adm-kpi:hover .adm-kpi-arrow {
color: var(--brand-primary);
transform: translateX(2px);
}
/* Shortcuts row */
.adm-shortcuts {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin-bottom: 22px;
}
@media (max-width: 900px) { .adm-shortcuts { grid-template-columns: 1fr; } }
.adm-shortcut {
display: flex; align-items: center; gap: 12px;
padding: 14px 16px;
background: var(--brand-bg);
border: 1px solid var(--brand-border);
border-radius: var(--radius-lg);
color: inherit; text-decoration: none;
transition: border-color 120ms, background 120ms;
}
.adm-shortcut:hover {
border-color: color-mix(in srgb, var(--brand-primary) 35%, var(--brand-border));
background: color-mix(in srgb, var(--brand-primary) 3%, var(--brand-bg));
color: inherit;
}
.adm-shortcut div:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.adm-shortcut strong { font-size: 14px; color: var(--brand-text); }
.adm-shortcut span { font-size: 12px; color: var(--brand-muted); }
.adm-shortcut-icon {
flex-shrink: 0;
width: 36px; height: 36px;
border-radius: var(--radius-md);
display: inline-flex; align-items: center; justify-content: center;
}
.adm-shortcut-icon svg { width: 18px; height: 18px; }
.adm-shortcut-icon--info { background: #ecfeff; color: #0e7490; }
.adm-shortcut-icon--violet { background: #f5f3ff; color: #7c3aed; }
.adm-shortcut-icon--amber { background: #fef3c7; color: #b45309; }
/* Card de actividad */
.adm-card {
background: var(--brand-bg);
border: 1px solid var(--brand-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.adm-card-header {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 16px; flex-wrap: wrap;
padding: 18px 22px;
border-bottom: 1px solid var(--brand-border);
}
.adm-card-title {
margin: 0 0 4px;
font-size: 16px; font-weight: 600; color: var(--brand-text);
}
.adm-card-lede {
margin: 0; color: var(--brand-muted); font-size: 13px;
}
.adm-card-link {
font-size: 13px; font-weight: 500;
color: var(--brand-primary);
white-space: nowrap;
}
.adm-card-link:hover { color: var(--brand-accent); }
/* Empty state */
.adm-empty {
padding: 48px 24px;
text-align: center;
color: var(--brand-muted);
}
.adm-empty svg { width: 32px; height: 32px; margin: 0 auto 8px; display: block; opacity: 0.6; }
.adm-empty p { margin: 0; font-size: 14px; }
/* Timeline */
.adm-timeline {
list-style: none;
margin: 0; padding: 8px 0;
}
.adm-timeline-item {
display: grid;
grid-template-columns: 36px 1fr auto;
gap: 12px 14px;
align-items: start;
padding: 14px 22px;
border-bottom: 1px solid color-mix(in srgb, var(--brand-border) 60%, transparent);
}
.adm-timeline-item:last-child { border-bottom: 0; }
.adm-timeline-icon {
width: 36px; height: 36px;
border-radius: var(--radius-md);
display: inline-flex; align-items: center; justify-content: center;
background: var(--brand-surface);
color: var(--brand-muted);
flex-shrink: 0;
}
.adm-timeline-icon svg { width: 18px; height: 18px; }
.adm-timeline-body { min-width: 0; }
.adm-timeline-headline {
display: flex; align-items: center; gap: 8px;
flex-wrap: wrap;
margin-bottom: 4px;
}
.adm-timeline-headline strong {
font-size: 14px; font-weight: 600;
color: var(--brand-text);
}
.adm-timeline-type {
font-size: 11px;
padding: 2px 6px;
border-radius: 4px;
background: var(--brand-surface);
color: var(--brand-muted);
font-family: var(--font-mono);
}
.adm-timeline-meta {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
font-size: 12px; color: var(--brand-muted);
}
.adm-timeline-pill {
display: inline-flex; align-items: center;
padding: 2px 8px;
background: var(--brand-surface);
border: 1px solid var(--brand-border);
border-radius: 999px;
font-weight: 500;
color: var(--brand-text);
}
.adm-timeline-actor::before { content: '·'; margin-right: 8px; color: var(--brand-border); }
.adm-timeline-subject {
font-family: var(--font-mono);
font-size: 11px;
}
.adm-timeline-subject::before { content: '·'; margin-right: 8px; color: var(--brand-border); font-family: var(--font-sans); }
.adm-timeline-time {
font-size: 12px; color: var(--brand-muted);
white-space: nowrap;
align-self: center;
}
/* Tonos del icono según severidad del evento */
.adm-tone-success .adm-timeline-icon { background: #dcfce7; color: #15803d; }
.adm-tone-info .adm-timeline-icon { background: #dbeafe; color: #1d4ed8; }
.adm-tone-warning .adm-timeline-icon { background: #fef3c7; color: #b45309; }
.adm-tone-neutral .adm-timeline-icon { background: var(--brand-surface); color: var(--brand-muted); }
@media (max-width: 640px) {
.adm-timeline-item { grid-template-columns: 32px 1fr; padding: 12px 16px; }
.adm-timeline-time { grid-column: 2; padding-top: 4px; }
.adm-card-header { padding: 14px 16px; }
}
/* ── Admin · Clientes (/admin/clientes) ─────────────────────── */
.cli-page { display: flex; flex-direction: column; gap: 18px; }
/* Toolbar: búsqueda + filtros */
.cli-toolbar {
display: flex; align-items: center; gap: 12px;
flex-wrap: wrap;
}
.cli-search {
position: relative; flex: 1; min-width: 240px;
}
.cli-search svg {
position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
width: 16px; height: 16px; color: var(--brand-muted);
pointer-events: none;
}
.cli-search input {
width: 100%;
padding: 11px 14px 11px 40px;
background: var(--brand-bg);
border: 1px solid var(--brand-border);
border-radius: var(--radius-md);
font: inherit; font-size: 14px;
color: var(--brand-text);
transition: border-color 120ms, box-shadow 120ms;
}
.cli-search input:focus {
outline: none;
border-color: var(--brand-primary);
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.06);
}
.cli-search input::-webkit-search-cancel-button { cursor: pointer; }
.cli-filters {
display: inline-flex; gap: 4px;
padding: 4px;
background: var(--brand-surface);
border: 1px solid var(--brand-border);
border-radius: 999px;
}
.cli-filter {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px;
background: transparent;
border: none;
border-radius: 999px;
font: inherit; font-size: 13px; font-weight: 500;
color: var(--brand-muted);
cursor: pointer;
transition: background 120ms, color 120ms;
}
.cli-filter:hover { color: var(--brand-text); }
.cli-filter.is-active {
background: var(--brand-bg);
color: var(--brand-text);
box-shadow: var(--shadow-sm);
}
.cli-filter-count {
display: inline-flex; align-items: center; justify-content: center;
min-width: 20px; height: 18px;
padding: 0 6px;
background: var(--brand-surface);
border-radius: 999px;
font-size: 11px; font-weight: 600;
color: var(--brand-muted);
}
.cli-filter.is-active .cli-filter-count {
background: var(--brand-primary); color: #fff;
}
/* Avatar genérico (cliente y miembros) */
.cli-avatar {
flex-shrink: 0;
width: 48px; height: 48px;
border-radius: 12px;
display: inline-flex; align-items: center; justify-content: center;
color: #fff;
font-size: 16px; font-weight: 600;
letter-spacing: 0.04em;
box-shadow: var(--shadow-sm);
}
.cli-avatar--lg {
width: 72px; height: 72px;
border-radius: 16px;
font-size: 24px;
}
/* Paleta determinística por id % 6 */
.cli-avatar--0 { background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%); }
.cli-avatar--1 { background: linear-gradient(135deg, #581c87 0%, #7c3aed 100%); }
.cli-avatar--2 { background: linear-gradient(135deg, #831843 0%, #be185d 100%); }
.cli-avatar--3 { background: linear-gradient(135deg, #064e3b 0%, #0d9488 100%); }
.cli-avatar--4 { background: linear-gradient(135deg, #7c2d12 0%, #c2410c 100%); }
.cli-avatar--5 { background: linear-gradient(135deg, #134e4a 0%, #0e7490 100%); }
/* Lista de tarjetas */
.cli-list {
display: flex; flex-direction: column;
gap: 10px;
}
.cli-card {
display: grid;
grid-template-columns: 1fr auto;
gap: 12px;
align-items: center;
padding: 16px 20px;
background: var(--brand-bg);
border: 1px solid var(--brand-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
transition: border-color 120ms, box-shadow 120ms, transform 120ms;
}
.cli-card[data-status="inactive"] { opacity: 0.78; }
.cli-card:hover {
border-color: color-mix(in srgb, var(--brand-primary) 35%, var(--brand-border));
box-shadow: var(--shadow-md);
}
.cli-card-main {
display: flex; align-items: center; gap: 14px;
color: inherit; text-decoration: none;
min-width: 0;
}
.cli-card-info { min-width: 0; flex: 1; }
.cli-card-headline {
display: flex; align-items: center; gap: 10px;
flex-wrap: wrap;
margin-bottom: 2px;
}
.cli-card-name {
margin: 0;
font-size: 16px; font-weight: 600;
color: var(--brand-text);
}
.cli-card-legal {
margin-bottom: 6px;
font-size: 13px; color: var(--brand-muted);
}
.cli-card-meta {
display: flex; flex-wrap: wrap; gap: 6px 14px;
align-items: center;
}
.cli-meta-item {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12px; color: var(--brand-text);
}
.cli-meta-item svg { width: 14px; height: 14px; color: var(--brand-muted); }
.cli-meta-label {
text-transform: uppercase; letter-spacing: 0.04em;
font-size: 10px; font-weight: 600; color: var(--brand-muted);
}
.cli-meta-value { font-weight: 500; }
.cli-meta-item--muted { color: var(--brand-muted); font-size: 12px; }
/* Status pill */
.cli-status {
display: inline-flex; align-items: center; gap: 6px;
padding: 3px 10px 3px 8px;
border-radius: 999px;
font-size: 12px; font-weight: 500;
border: 1px solid transparent;
}
.cli-status-dot {
width: 6px; height: 6px; border-radius: 50%;
background: currentColor;
}
.cli-status--active {
background: #dcfce7; color: #15803d; border-color: #bbf7d0;
}
.cli-status--inactive {
background: var(--brand-surface); color: var(--brand-muted); border-color: var(--brand-border);
}
/* Acciones de la tarjeta */
.cli-card-actions {
display: inline-flex; gap: 8px; align-items: center;
}
.cli-action-form { display: inline-block; }
.cli-action-form .btn { display: inline-flex; align-items: center; gap: 6px; }
/* Empty results (después del filtrado) */
.cli-empty-results { margin-top: 16px; }
/* Vista detalle */
.cli-detail-back {
margin-bottom: 16px;
}
.cli-detail-back a {
display: inline-flex; align-items: center; gap: 6px;
font-size: 13px; color: var(--brand-muted);
text-decoration: none;
transition: color 120ms;
}
.cli-detail-back a:hover { color: var(--brand-primary); }
.cli-detail-hero {
display: flex; align-items: center; justify-content: space-between;
gap: 20px; flex-wrap: wrap;
padding: 24px;
margin-bottom: 22px;
background: linear-gradient(135deg, var(--brand-bg) 0%, color-mix(in srgb, var(--brand-accent) 4%, var(--brand-bg)) 100%);
border-color: color-mix(in srgb, var(--brand-accent) 22%, var(--brand-border));
}
.cli-detail-hero-main {
display: flex; align-items: center; gap: 18px;
min-width: 0; flex: 1;
}
.cli-detail-identity { min-width: 0; }
.cli-detail-name {
margin: 0 0 4px;
font-size: 24px; line-height: 1.15; letter-spacing: -0.01em;
color: var(--brand-text);
}
.cli-detail-legal {
margin-bottom: 10px;
color: var(--brand-muted); font-size: 14px;
}
.cli-detail-badges {
display: flex; flex-wrap: wrap; gap: 8px;
}
.cli-detail-pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px;
background: var(--brand-bg);
border: 1px solid var(--brand-border);
border-radius: 999px;
font-size: 12px; color: var(--brand-text);
}
.cli-detail-pill svg { width: 13px; height: 13px; color: var(--brand-muted); }
.cli-detail-pill-label {
color: var(--brand-muted);
text-transform: uppercase; letter-spacing: 0.04em;
font-size: 10px; font-weight: 600;
}
.cli-detail-pill-value { font-weight: 500; }
.cli-detail-actions {
display: inline-flex; gap: 8px; flex-wrap: wrap;
}
.cli-detail-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
/* KPIs del detalle */
.cli-detail-kpis {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
margin-bottom: 22px;
}
@media (max-width: 720px) { .cli-detail-kpis { grid-template-columns: 1fr; } }
.cli-kpi {
padding: 16px 20px;
background: var(--brand-bg);
border: 1px solid var(--brand-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
display: flex; flex-direction: column; gap: 4px;
}
.cli-kpi-label {
font-size: 12px; font-weight: 500;
color: var(--brand-muted);
text-transform: uppercase; letter-spacing: 0.04em;
}
.cli-kpi-value {
font-size: 28px; font-weight: 600; line-height: 1.15;
color: var(--brand-text); letter-spacing: -0.01em;
}
.cli-kpi-value--date { font-size: 18px; }
.cli-kpi-sub { font-size: 12px; color: var(--brand-muted); }
/* Grid de cards de detalle */
.cli-detail-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
margin-bottom: 18px;
}
@media (max-width: 1100px) { .cli-detail-grid { grid-template-columns: 1fr; } }
.cli-detail-card--full { grid-column: 1 / -1; }
/* Lista de miembros */
.cli-member-list, .cli-contract-list {
list-style: none; margin: 0; padding: 8px 0;
}
.cli-member, .cli-contract {
display: flex; align-items: center; gap: 12px;
padding: 12px 22px;
border-bottom: 1px solid color-mix(in srgb, var(--brand-border) 60%, transparent);
}
.cli-member:last-child, .cli-contract:last-child { border-bottom: 0; }
.cli-member-avatar {
flex-shrink: 0;
width: 36px; height: 36px;
border-radius: 10px;
display: inline-flex; align-items: center; justify-content: center;
color: #fff; font-size: 13px; font-weight: 600;
}
.cli-member-info { flex: 1; min-width: 0; }
.cli-member-name {
font-size: 14px; font-weight: 500;
color: var(--brand-text);
}
.cli-member-email {
font-size: 12px; color: var(--brand-muted);
}
.cli-member-meta {
display: inline-flex; align-items: center; gap: 8px;
flex-shrink: 0;
}
.cli-member-role {
font-size: 11px; font-weight: 500;
padding: 3px 10px;
border-radius: 999px;
background: var(--brand-surface);
color: var(--brand-muted);
}
.cli-member-role.is-admin {
background: color-mix(in srgb, var(--brand-accent) 15%, var(--brand-bg));
color: color-mix(in srgb, var(--brand-accent) 75%, var(--brand-text));
}
.cli-member-revoked {
font-size: 11px;
padding: 3px 8px;
background: #fef2f2;
color: #991b1b;
border-radius: 999px;
}
/* Lista de contratos */
.cli-contract-icon {
flex-shrink: 0;
width: 36px; height: 36px;
border-radius: 10px;
background: color-mix(in srgb, var(--agent-color, #c9a14a) 15%, var(--brand-bg));
color: var(--agent-color, #c9a14a);
display: inline-flex; align-items: center; justify-content: center;
}
.cli-contract-icon svg { width: 18px; height: 18px; }
.cli-contract-info { flex: 1; min-width: 0; }
.cli-contract-name {
font-size: 14px; font-weight: 500;
color: var(--brand-text);
}
.cli-contract-meta {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12px; color: var(--brand-muted);
flex-wrap: wrap;
}
/* Form view */
.cli-form-page { max-width: 760px; margin: 0; display: flex; flex-direction: column; gap: 18px; }
.cli-form-card .cli-form-body { padding: 22px; }
.cli-form-actions {
display: inline-flex; gap: 8px;
}
/* Responsive ajustes */
@media (max-width: 760px) {
.cli-card { grid-template-columns: 1fr; }
.cli-card-actions { width: 100%; justify-content: flex-end; }
.cli-detail-hero { flex-direction: column; align-items: stretch; }
.cli-detail-actions { justify-content: stretch; }
.cli-detail-actions .btn, .cli-detail-actions form { flex: 1; }
.cli-toolbar { flex-direction: column; align-items: stretch; }
.cli-filters { width: 100%; justify-content: space-between; }
}
/* ── Admin · Usuarios (/admin/usuarios) ─────────────────────── */
/* Reusa la mayoría de estilos .cli-* (lista, avatar, card, search/filter,
detail-hero, kpis). Agrega solo lo específico de usuario. */
.usr-role-badge {
background: color-mix(in srgb, var(--brand-accent) 15%, var(--brand-bg));
color: color-mix(in srgb, var(--brand-accent) 80%, var(--brand-text));
border: 1px solid color-mix(in srgb, var(--brand-accent) 35%, var(--brand-border));
}
.usr-role-badge svg { color: currentColor; }
/* Card "Cuenta" del detalle */
.usr-info-grid {
margin: 0; padding: 22px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px 24px;
}
@media (max-width: 720px) { .usr-info-grid { grid-template-columns: 1fr; } }
.usr-info-item dt {
font-size: 11px; font-weight: 600;
color: var(--brand-muted);
text-transform: uppercase; letter-spacing: 0.04em;
margin-bottom: 4px;
}
.usr-info-item dd {
margin: 0;
font-size: 14px; color: var(--brand-text);
}
.usr-info-item code {
font-family: var(--font-mono);
font-size: 12px;
padding: 2px 6px;
background: var(--brand-surface);
border-radius: 4px;
}
/* Toggle visual de rol global en el form */
.usr-role-toggle {
display: flex; align-items: flex-start; gap: 14px;
padding: 16px;
background: var(--brand-surface);
border: 1px solid var(--brand-border);
border-radius: var(--radius-md);
cursor: pointer;
transition: border-color 120ms, background 120ms;
}
.usr-role-toggle:hover {
border-color: color-mix(in srgb, var(--brand-primary) 35%, var(--brand-border));
}
.usr-role-toggle:has(input:checked) {
background: color-mix(in srgb, var(--brand-accent) 8%, var(--brand-bg));
border-color: color-mix(in srgb, var(--brand-accent) 45%, var(--brand-border));
}
.usr-role-toggle input[type="checkbox"] {
flex-shrink: 0;
width: 18px; height: 18px;
margin-top: 2px;
accent-color: var(--brand-accent);
cursor: pointer;
}
.usr-role-toggle-content {
display: flex; flex-direction: column; gap: 4px;
min-width: 0;
}
.usr-role-toggle-content strong {
font-size: 14px; font-weight: 600;
color: var(--brand-text);
}
.usr-role-toggle-content span {
font-size: 13px; color: var(--brand-muted);
line-height: 1.45;
}
/* Member list inside user show: customer name link */
.usr-detail-grid .cli-member-name a,
.cli-member-name a {
color: var(--brand-text);
text-decoration: none;
}
.cli-member-name a:hover { color: var(--brand-primary); }
/* ── Perfil del usuario (/perfil) ───────────────────────────── */
.profile-hero {
padding: 28px 28px;
margin-bottom: 24px;
background: linear-gradient(135deg, var(--brand-bg) 0%, color-mix(in srgb, var(--brand-accent) 5%, var(--brand-bg)) 100%);
border-color: color-mix(in srgb, var(--brand-accent) 25%, var(--brand-border));
}
.profile-hero-main {
display: flex; align-items: center; gap: 22px;
flex-wrap: wrap;
}
.profile-avatar {
flex-shrink: 0;
width: 80px; height: 80px;
border-radius: 50%;
background: linear-gradient(135deg, var(--brand-primary) 0%, color-mix(in srgb, var(--brand-primary) 70%, var(--brand-accent)) 100%);
color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-size: 28px; font-weight: 600;
letter-spacing: 0.04em;
box-shadow:
0 0 0 4px var(--brand-bg),
0 0 0 5px color-mix(in srgb, var(--brand-accent) 60%, var(--brand-border)),
var(--shadow-sm);
}
.profile-identity { min-width: 0; flex: 1; }
.profile-name {
margin: 0 0 4px;
font-size: 24px; line-height: 1.15; letter-spacing: -0.01em;
color: var(--brand-text);
}
.profile-email {
color: var(--brand-muted); font-size: 14px;
margin-bottom: 12px;
word-break: break-all;
}
.profile-badges {
display: flex; flex-wrap: wrap; gap: 8px;
}
.profile-badge {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 10px 5px 8px;
background: var(--brand-bg);
border: 1px solid var(--brand-border);
border-radius: 999px;
font-size: 12px; font-weight: 500;
color: var(--brand-text);
}
.profile-badge svg { width: 14px; height: 14px; }
.profile-badge--admin {
background: color-mix(in srgb, var(--brand-accent) 15%, var(--brand-bg));
border-color: color-mix(in srgb, var(--brand-accent) 45%, var(--brand-border));
color: color-mix(in srgb, var(--brand-accent) 75%, var(--brand-text));
}
.profile-badge--soft {
background: var(--brand-surface);
color: var(--brand-muted);
}
/* Grid de cards */
.profile-grid {
display: grid;
gap: 20px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.profile-grid > .profile-card--info { grid-column: 1 / -1; }
@media (max-width: 960px) {
.profile-grid { grid-template-columns: 1fr; }
}
.profile-card {
background: var(--brand-bg);
border: 1px solid var(--brand-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
display: flex; flex-direction: column;
overflow: hidden;
}
.profile-card-header {
display: flex; align-items: flex-start; gap: 12px;
padding: 18px 22px;
border-bottom: 1px solid var(--brand-border);
}
.profile-card-icon {
flex-shrink: 0;
width: 36px; height: 36px;
border-radius: var(--radius-md);
display: inline-flex; align-items: center; justify-content: center;
}
.profile-card-icon svg { width: 18px; height: 18px; }
.profile-card-icon--user { background: #eff6ff; color: #2563eb; }
.profile-card-icon--lock { background: #fef3c7; color: #b45309; }
.profile-card-icon--settings { background: #f5f3ff; color: #7c3aed; }
.profile-card-icon--info { background: #ecfeff; color: #0e7490; }
.profile-card-titles { min-width: 0; flex: 1; }
.profile-card-title {
margin: 0;
font-size: 16px; font-weight: 600;
color: var(--brand-text);
}
.profile-card-lede {
margin: 2px 0 0;
font-size: 13px; color: var(--brand-muted);
line-height: 1.45;
}
.profile-card-body { padding: 22px; }
.profile-card-body .form-actions { margin-top: 16px; }
/* Campo estático (read-only visual, p. ej. email no editable) */
.form-group--static .static-field {
display: flex; align-items: center; gap: 10px;
width: 100%;
padding: 10px 12px;
background: var(--brand-surface);
border: 1px solid var(--brand-border);
border-radius: var(--radius-md);
color: var(--brand-text);
font-size: 14px;
cursor: not-allowed;
user-select: text;
}
.form-group--static .static-field-value {
flex: 1; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.form-group--static .static-field-icon {
width: 16px; height: 16px;
color: var(--brand-muted);
flex-shrink: 0;
}
.form-group--static .help { display: block; }
/* Evidencia del scraping (captura de pantalla del producto) */
.seg-evidence-thumb {
display: block;
max-height: 280px;
overflow: hidden;
border: 1px solid var(--brand-border);
border-radius: 8px;
margin-bottom: .4rem;
background: var(--brand-surface, #fff);
}
.seg-evidence-thumb img {
display: block;
width: 100%;
height: auto;
}
.seg-evidence-history {
margin-top: .5rem;
font-size: .85rem;
}
.seg-evidence-history summary {
cursor: pointer;
color: var(--brand-accent);
}
.seg-evidence-history ul {
margin: .4rem 0 0;
padding-left: 1.1rem;
}
/* Alta manual de producto: barra de acción + preview de la captura subida */
.ins-prod-actions {
display: flex;
justify-content: flex-end;
margin-bottom: .75rem;
}
.seg-upload-preview {
display: block;
max-height: 260px;
width: auto;
margin-top: .5rem;
border: 1px solid var(--brand-border);
border-radius: 8px;
}
/* Selector de idioma (radio tarjetas) */
.locale-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-top: 2px;
}
.locale-option {
position: relative;
display: flex; align-items: center; gap: 12px;
padding: 14px 14px 14px 16px;
background: var(--brand-bg);
border: 1px solid var(--brand-border);
border-radius: var(--radius-md);
cursor: pointer;
transition: border-color 120ms, box-shadow 120ms, background 120ms;
}
.locale-option:hover {
border-color: color-mix(in srgb, var(--brand-primary) 35%, var(--brand-border));
background: color-mix(in srgb, var(--brand-primary) 3%, var(--brand-bg));
}
.locale-option:has(.locale-option-input:checked) {
border-color: var(--brand-primary);
background: color-mix(in srgb, var(--brand-primary) 4%, var(--brand-bg));
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.06);
}
.locale-option-input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.locale-option-flag {
display: inline-flex; align-items: center; justify-content: center;
min-width: 38px; height: 28px;
padding: 0 8px;
border-radius: 6px;
background: var(--brand-surface);
border: 1px solid var(--brand-border);
color: var(--brand-text);
font-size: 12px; font-weight: 700;
letter-spacing: 0.06em;
}
.locale-option-label {
flex: 1;
color: var(--brand-text);
font-size: 14px; font-weight: 500;
}
.locale-option-check {
width: 18px; height: 18px;
color: var(--brand-primary);
opacity: 0;
transition: opacity 120ms;
}
.locale-option:has(.locale-option-input:checked) .locale-option-check {
opacity: 1;
}
@media (max-width: 520px) {
.locale-grid { grid-template-columns: 1fr; }
}
/* Card de cuenta (read-only) */
.profile-info-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px 24px;
margin: 0 0 22px;
}
@media (max-width: 560px) {
.profile-info-grid { grid-template-columns: 1fr; }
}
.profile-info-item dt {
font-size: 12px; font-weight: 500;
color: var(--brand-muted);
text-transform: uppercase; letter-spacing: 0.04em;
margin-bottom: 4px;
}
.profile-info-item dd {
margin: 0;
font-size: 14px; color: var(--brand-text);
}
.profile-info-muted { color: var(--brand-muted); }
.profile-orgs { border-top: 1px solid var(--brand-border); padding-top: 18px; }
.profile-orgs-title {
margin: 0 0 12px;
font-size: 13px; font-weight: 600;
color: var(--brand-muted);
text-transform: uppercase; letter-spacing: 0.04em;
}
.profile-orgs-list {
list-style: none;
margin: 0; padding: 0;
display: flex; flex-wrap: wrap; gap: 8px;
}
.profile-org-chip {
display: inline-flex; align-items: center; gap: 10px;
padding: 6px 12px 6px 6px;
background: var(--brand-bg);
border: 1px solid var(--brand-border);
border-radius: 999px;
font-size: 13px;
}
.profile-org-avatar {
width: 26px; height: 26px;
border-radius: 50%;
background: linear-gradient(135deg, var(--brand-primary) 0%, color-mix(in srgb, var(--brand-primary) 65%, var(--brand-accent)) 100%);
color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 600;
}
.profile-org-name { color: var(--brand-text); font-weight: 500; }
.profile-org-role {
font-size: 11px; font-weight: 500;
color: var(--brand-muted);
padding: 2px 8px;
background: var(--brand-surface);
border-radius: 999px;
}
.profile-org-role.is-admin {
color: color-mix(in srgb, var(--brand-accent) 75%, var(--brand-text));
background: color-mix(in srgb, var(--brand-accent) 15%, var(--brand-bg));
}
.profile-orgs-empty {
margin: 0;
color: var(--brand-muted);
font-size: 13px;
}
@media (max-width: 640px) {
.profile-hero { padding: 22px 20px; }
.profile-avatar { width: 64px; height: 64px; font-size: 22px; }
.profile-name { font-size: 20px; }
.profile-card-header { padding: 16px 18px; }
.profile-card-body { padding: 18px; }
}
/* ── Componentes compartidos del módulo Seguros (.seg-*) ──────── */
/* Avatar circular con iniciales coloreadas por institución.
Se eligen 8 paletas determinísticas en server vía .seg-avatar--c{1..8}. */
.seg-avatar {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px;
border-radius: 999px;
font-weight: 600; font-size: 14px;
line-height: 1; letter-spacing: -0.01em;
flex-shrink: 0;
color: #fff;
background: var(--brand-primary);
user-select: none;
}
.seg-avatar img { width: 100%; height: 100%; object-fit: contain; border-radius: 999px; padding: 2px; background: #fff; }
.seg-avatar--image {
background: #fff;
border: 1px solid var(--brand-border);
overflow: hidden;
}
.seg-avatar--sm { width: 28px; height: 28px; font-size: 11px; }
.seg-avatar--lg { width: 56px; height: 56px; font-size: 20px; }
.seg-avatar--xl { width: 80px; height: 80px; font-size: 28px; border-radius: 18px; }
/* Paletas determinísticas — generadas en server con hash(name) % 8 */
.seg-avatar--c1 { background: #4f46e5; } /* indigo */
.seg-avatar--c2 { background: #0891b2; } /* cyan */
.seg-avatar--c3 { background: #059669; } /* emerald */
.seg-avatar--c4 { background: #d97706; } /* amber */
.seg-avatar--c5 { background: #dc2626; } /* red */
.seg-avatar--c6 { background: #7c3aed; } /* violet */
.seg-avatar--c7 { background: #db2777; } /* pink */
.seg-avatar--c8 { background: #0f172a; } /* slate (brand) */
/* Fila de chips toggleables (filtros visuales) */
.seg-chip-filter-row {
display: flex; align-items: center; gap: 8px;
flex-wrap: wrap;
}
.seg-chip-filter-label {
font-size: 12px; font-weight: 600;
color: var(--brand-muted);
text-transform: uppercase; letter-spacing: 0.04em;
margin-right: 4px;
}
.seg-chip-filter {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px;
background: var(--brand-bg);
border: 1px solid var(--brand-border);
border-radius: 999px;
font-size: 13px; font-weight: 500;
color: var(--brand-text);
cursor: pointer;
transition: background 120ms, border-color 120ms, color 120ms;
line-height: 1.2;
}
.seg-chip-filter:hover {
border-color: color-mix(in srgb, var(--brand-primary) 30%, var(--brand-border));
background: var(--brand-surface);
}
.seg-chip-filter.is-active {
background: var(--brand-primary);
border-color: var(--brand-primary);
color: #fff;
}
.seg-chip-filter.is-active:hover { background: color-mix(in srgb, var(--brand-primary) 88%, #000); }
.seg-chip-filter-count {
display: inline-flex; align-items: center; justify-content: center;
min-width: 20px; height: 18px; padding: 0 6px;
border-radius: 999px;
background: var(--brand-surface);
color: var(--brand-muted);
font-size: 11px; font-weight: 600;
}
.seg-chip-filter.is-active .seg-chip-filter-count {
background: rgba(255,255,255,0.18); color: rgba(255,255,255,0.95);
}
/* Toolbar superior: search + filtros + acciones */
.seg-toolbar {
display: flex; align-items: center; gap: 16px;
padding: 14px 16px;
background: var(--brand-bg);
border: 1px solid var(--brand-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
margin-bottom: 16px;
flex-wrap: wrap;
}
.seg-toolbar-search {
position: relative; flex: 1 1 240px; min-width: 220px;
}
.seg-toolbar-search input {
width: 100%;
padding: 9px 12px 9px 36px;
border: 1px solid var(--brand-border);
border-radius: var(--radius-md);
background: var(--brand-bg);
color: var(--brand-text);
font-size: 14px;
transition: border-color 120ms, box-shadow 120ms;
}
.seg-toolbar-search input:focus {
outline: none;
border-color: var(--brand-primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 12%, transparent);
}
.seg-toolbar-search-icon {
position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
color: var(--brand-muted); pointer-events: none;
display: inline-flex;
}
.seg-toolbar-search-icon svg { width: 16px; height: 16px; }
.seg-toolbar-filters { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; flex: 1 1 auto; }
.seg-toolbar-actions { display: inline-flex; gap: 8px; align-items: center; }
.seg-toolbar-divider { width: 1px; height: 24px; background: var(--brand-border); }
/* KPI compacto inline (variante reducida de .ins-kpi) */
.seg-kpi-compact {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 14px;
background: var(--brand-surface);
border: 1px solid var(--brand-border);
border-radius: 999px;
font-size: 13px;
}
.seg-kpi-compact-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px;
color: var(--brand-muted);
}
.seg-kpi-compact-icon svg { width: 16px; height: 16px; }
.seg-kpi-compact-value { font-weight: 600; color: var(--brand-text); }
.seg-kpi-compact-label { color: var(--brand-muted); }
/* Card de producto (alternativa visual a fila de tabla) */
.seg-product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 14px;
}
.seg-product-card {
display: flex; flex-direction: column;
padding: 16px;
background: var(--brand-bg);
border: 1px solid var(--brand-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
text-decoration: none; color: inherit;
transition: border-color 150ms, transform 150ms, box-shadow 150ms;
min-width: 0;
}
.seg-product-card:hover {
border-color: color-mix(in srgb, var(--brand-primary) 35%, var(--brand-border));
transform: translateY(-1px);
box-shadow: var(--shadow-md);
color: inherit;
}
.seg-product-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.seg-product-card-inst { display: flex; flex-direction: column; min-width: 0; }
.seg-product-card-inst-name {
font-size: 13px; font-weight: 500; color: var(--brand-text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.seg-product-card-inst-type {
font-size: 11px; color: var(--brand-muted);
}
.seg-product-card-title {
font-size: 15px; font-weight: 600; line-height: 1.35;
color: var(--brand-text);
margin: 0 0 10px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.seg-product-card-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.seg-product-card-badge {
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 8px;
border-radius: 999px;
font-size: 11px; font-weight: 500;
background: var(--brand-surface);
color: var(--brand-muted);
line-height: 1.4;
}
.seg-product-card-badge--success { background: #ecfdf5; color: #047857; }
.seg-product-card-badge--info { background: #eff6ff; color: #1d4ed8; }
.seg-product-card-badge--warn { background: #fff7ed; color: #b45309; }
.seg-product-card-badge--muted { background: var(--brand-surface); color: var(--brand-muted); }
.seg-product-card-prima {
margin-top: auto;
padding-top: 12px;
border-top: 1px dashed var(--brand-border);
font-size: 12px; color: var(--brand-muted);
display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.seg-product-card-prima-value {
font-size: 16px; font-weight: 600; color: var(--brand-text); letter-spacing: -0.01em;
}
.seg-product-card-prima-empty { color: var(--brand-muted); font-style: italic; font-size: 12px; }
/* Banner "Pregúntale a Varys" — CTA contextual al chat. Estética alineada
con las nav-cards del home (fondo plano, borde sutil, sombra suave,
icon en accent translúcido y flecha circular acentuada al hover). */
.seg-ask-varys {
display: flex; align-items: center; gap: 16px;
padding: 16px 18px;
background: var(--brand-bg);
border: 1px solid var(--brand-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
cursor: pointer;
color: var(--brand-text);
text-align: left;
width: 100%;
font-family: inherit; font-size: 14px;
transition: border-color 150ms, transform 150ms, box-shadow 150ms;
}
.seg-ask-varys:hover {
border-color: color-mix(in srgb, var(--brand-accent) 55%, var(--brand-border));
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.seg-ask-varys-icon {
flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px;
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--brand-accent) 14%, var(--brand-bg));
color: var(--brand-accent);
}
.seg-ask-varys-icon svg { width: 20px; height: 20px; }
.seg-ask-varys-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.seg-ask-varys-label {
font-size: 11px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.06em;
color: var(--brand-muted);
}
.seg-ask-varys-prompt {
font-size: 14px; font-weight: 500;
color: var(--brand-text);
line-height: 1.4;
}
.seg-ask-varys-arrow {
flex-shrink: 0;
width: 32px; height: 32px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
border: 1px solid var(--brand-border);
color: var(--brand-muted);
transition: background 150ms, color 150ms, border-color 150ms;
}
.seg-ask-varys-arrow svg { width: 14px; height: 14px; }
.seg-ask-varys:hover .seg-ask-varys-arrow {
background: var(--brand-accent);
border-color: var(--brand-accent);
color: #fff;
}
/* Variante inline más compacta (para sidebar o columna estrecha) */
.seg-ask-varys--compact { padding: 12px 14px; gap: 12px; }
.seg-ask-varys--compact .seg-ask-varys-icon { width: 32px; height: 32px; }
.seg-ask-varys--compact .seg-ask-varys-icon svg { width: 16px; height: 16px; }
.seg-ask-varys--compact .seg-ask-varys-arrow { width: 28px; height: 28px; }
.seg-ask-varys--compact .seg-ask-varys-arrow svg { width: 12px; height: 12px; }
/* Grid de prompts sugeridos (usado en home y en empty states) */
.seg-prompt-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 10px;
}
/* Empty state estilizado para el módulo */
.seg-empty {
text-align: center;
padding: 48px 24px;
border: 1px dashed var(--brand-border);
border-radius: var(--radius-lg);
background: var(--brand-surface);
color: var(--brand-muted);
}
.seg-empty-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 56px; height: 56px;
border-radius: 999px;
background: var(--brand-bg);
color: var(--brand-muted);
margin: 0 auto 12px;
}
.seg-empty-icon svg { width: 28px; height: 28px; }
.seg-empty-title { font-size: 16px; font-weight: 600; color: var(--brand-text); margin: 0 0 6px; }
.seg-empty-text { margin: 0 0 16px; font-size: 14px; }
@media (max-width: 768px) {
.seg-toolbar { padding: 12px; gap: 10px; }
.seg-toolbar-divider { display: none; }
.seg-product-grid { grid-template-columns: 1fr; }
.seg-ask-varys { padding: 12px 14px; gap: 10px; }
.seg-ask-varys-icon { width: 32px; height: 32px; }
}
/* ── Extensiones de la home de Seguros ──────────────────────── */
/* Variante de nav-grid en 3 columnas (solo para la home) */
.ins-nav-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) {
.ins-nav-grid--cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
.ins-nav-grid--cols-3 { grid-template-columns: 1fr; }
}
/* Variante de nav-grid en 5 columnas (Explora del home): se acomoda al ancho. */
.ins-nav-grid--cols-5 {
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
/* Card "Pregúntale a Varys": estática (los chips internos son los click targets) */
.ins-nav-card--static { cursor: default; }
.ins-nav-card--static:hover {
border-color: var(--brand-border);
transform: none;
box-shadow: var(--shadow-sm);
}
.ins-nav-icon--accent { background: #fef3c7; color: #b45309; }
.ins-nav-icon--coral { background: #ffe4e6; color: #be123c; }
/* Card destacada: borde dorado sutil + sombra cálida (Pregúntale a Varys) */
.ins-nav-card--featured {
border-color: color-mix(in srgb, var(--brand-accent) 55%, var(--brand-border));
box-shadow:
var(--shadow-sm),
0 0 0 1px color-mix(in srgb, var(--brand-accent) 18%, transparent) inset;
}
.ins-nav-card--featured:hover {
border-color: var(--brand-accent);
}
/* Botón estilo "burbuja de chat" reemplaza la flecha en la card Varys */
.ins-nav-bubble {
flex-shrink: 0;
width: 32px; height: 32px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
background: color-mix(in srgb, var(--brand-accent) 14%, var(--brand-bg));
color: var(--brand-accent);
}
.ins-nav-bubble svg { width: 14px; height: 14px; }
/* Chip clickeable dentro de un nav-preview (reset de