/* ==========================================================================
NormaViva Pro Site — _shared.css
--------------------------------------------------------------------------
Design system compartido por todas las pages `/mi-expediente/*`.
Todas las clases con prefijo `.pro-*` para evitar colisiones con el site
publico. Apply `` en cada page Pro para activar.
--------------------------------------------------------------------------
Owner: agente Beta1 (shell arquitectonico). Otros agentes copian
componentes via el ejemplo en el footer de este archivo.
Version: 1.0 · 2026-04-24
========================================================================== */
/* --------------------------------------------------------------------------
1. TOKENS (root-scoped bajo .pro-site para no contaminar paginas legacy)
-------------------------------------------------------------------------- */
.pro-site {
/* Navy scale (primary) */
--pro-navy-950: #142c52;
--pro-navy-900: #1b3a6b;
--pro-navy-800: #2a4e86;
--pro-navy-700: #1b3a6b;
--pro-navy-500: #2a4e86;
--pro-navy-300: #6b86b6;
--pro-navy-100: #dbe4f3;
/* Gold scale (accent) */
--pro-gold-50: #eff6ff;
--pro-gold-100: #dbeafe;
--pro-gold-300: #93c5fd;
--pro-gold-500: #60a5fa;
--pro-gold-600: #3b82f6;
--pro-gold-700: #1d4ed8;
/* Neutrals */
--pro-bg: #f8f9fa;
--pro-bg-alt: #f1f5f9;
--pro-surface: #ffffff;
--pro-line: #e2e8f0;
--pro-line-strong: #cbd5e1;
--pro-ink: #0f1f3d;
--pro-body: #334155;
--pro-mute: #64748b;
--pro-subtle: #94a3b8;
/* Semantic */
--pro-success: #16a34a;
--pro-success-50: #dcfce7;
--pro-success-700: #15803d;
--pro-warn: #d97706;
--pro-warn-50: #fef3c7;
--pro-warn-700: #92400e;
--pro-danger: #dc2626;
--pro-danger-50: #fee2e2;
--pro-danger-700: #991b1b;
--pro-info: #2563eb;
--pro-info-50: #eff6ff;
--pro-info-700: #1d4ed8;
/* Typography */
--pro-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
--pro-font-display: "Source Serif 4", "Source Serif Pro", Georgia, serif;
--pro-font-mono: "JetBrains Mono", "Fira Mono", ui-monospace, SFMono-Regular, monospace;
/* Radii */
--pro-r-xs: 4px;
--pro-r-sm: 8px;
--pro-r-md: 12px;
--pro-r-lg: 16px;
--pro-r-xl: 24px;
/* Shadows */
--pro-shadow-sm: 0 1px 2px rgba(11,30,63,.06), 0 1px 1px rgba(11,30,63,.04);
--pro-shadow: 0 10px 30px -12px rgba(11,30,63,.18), 0 4px 12px -4px rgba(11,30,63,.08);
--pro-shadow-lg: 0 30px 60px -20px rgba(11,30,63,.25), 0 10px 20px -6px rgba(11,30,63,.10);
--pro-shadow-focus: 0 0 0 3px rgba(27,58,107,.18);
/* Motion */
--pro-ease-out: cubic-bezier(.22,.61,.36,1);
--pro-ease-bounce: cubic-bezier(.34,1.56,.64,1);
--pro-dur-fast: .15s;
--pro-dur-med: .25s;
/* Layout */
--pro-nav-h: 64px;
--pro-sidebar-w: 240px;
--pro-container-w: 1440px;
--pro-container-md: 1120px;
/* Foundation */
font-family: var(--pro-font-sans);
font-size: 16px;
line-height: 1.55;
color: var(--pro-ink);
background: var(--pro-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 0;
padding: 0;
}
.pro-site * { box-sizing: border-box; }
.pro-site img, .pro-site svg { max-width: 100%; display: block; }
.pro-site a:where(:not([class*="btn"]):not([class*="topnav"]):not([class*="nav-link"])) { color: var(--pro-navy-700); text-decoration: none; transition: color var(--pro-dur-fast) ease; }
.pro-site a:where(:not([class*="btn"]):not([class*="topnav"]):not([class*="nav-link"])):hover { color: var(--pro-navy-900); text-decoration: underline; }
/* Contraste (fix 2026-06-10): botones con fondo navy/azul NUNCA heredan el
color navy de .pro-site a — texto blanco siempre. */
.pro-site a.me-btn--primary, .pro-site a.me-btn--gold,
.pro-site a.pro-btn--primary, .pro-site a.pro-btn--gold,
.pro-site a.me-btn--primary:hover, .pro-site a.me-btn--gold:hover,
.pro-site a.pro-btn--primary:hover, .pro-site a.pro-btn--gold:hover { color: #fff; text-decoration: none; }
.pro-site .pro-topnav-links a, .pro-site .pro-topnav-links a:hover { color: #fff; }
.pro-site .pro-topnav-brand, .pro-site .pro-topnav-brand:hover { color: #fff; text-decoration: none; }
.pro-site h1, .pro-site h2, .pro-site h3, .pro-site h4 {
color: var(--pro-navy-900);
font-family: var(--pro-font-display);
letter-spacing: -.015em;
line-height: 1.2;
margin: 0 0 .6rem;
}
.pro-site p { margin: 0 0 .8rem; color: var(--pro-body); }
.pro-site code, .pro-site pre { font-family: var(--pro-font-mono); font-size: .92em; }
/* Utility classes */
.pro-hidden { display: none !important; }
.pro-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;
}
.pro-container { max-width: var(--pro-container-w); margin: 0 auto; padding: 0 24px; }
.pro-container--md { max-width: var(--pro-container-md); }
@media (max-width: 700px) { .pro-container { padding: 0 16px; } }
/* --------------------------------------------------------------------------
2. TOP NAV (inyectado por js/pro-shell.js)
-------------------------------------------------------------------------- */
.pro-topnav {
position: sticky; top: 0; z-index: 50;
height: var(--pro-nav-h);
background: linear-gradient(180deg, rgba(27,58,107,.97), rgba(42,78,134,.95));
backdrop-filter: saturate(180%) blur(10px);
-webkit-backdrop-filter: saturate(180%) blur(10px);
border-bottom: 1px solid rgba(255,255,255,.06);
color: #e2e8f0;
}
.pro-topnav-inner {
max-width: var(--pro-container-w);
margin: 0 auto;
padding: 0 24px;
height: 100%;
display: flex; align-items: center; gap: 24px;
}
.pro-topnav-brand {
display: flex; align-items: center; gap: 10px;
color: #fff; text-decoration: none; font-weight: 700;
font-size: 16px; letter-spacing: -.01em;
flex-shrink: 0;
}
.pro-topnav-brand:hover { color: #fff; text-decoration: none; }
.pro-topnav-brand img { width: 28px; height: 28px; border-radius: 6px; }
.pro-topnav-brand-badge {
display: inline-flex; align-items: center;
background: linear-gradient(135deg, var(--pro-gold-300), var(--pro-gold-500));
color: #0b2d5e;
font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
padding: 3px 8px; border-radius: 999px;
margin-left: 2px;
}
.pro-topnav-links {
display: flex; align-items: center; gap: 2px;
margin: 0 auto 0 8px;
flex: 1;
overflow-x: auto;
scrollbar-width: none;
}
.pro-topnav-links::-webkit-scrollbar { display: none; }
.pro-nav-link {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 12px; border-radius: 8px;
color: #fff;
font-size: 13.5px; font-weight: 500; text-decoration: none;
white-space: nowrap;
transition: color var(--pro-dur-fast), background var(--pro-dur-fast);
}
.pro-nav-link:hover { color: #fff; background: rgba(255,255,255,.06); text-decoration: none; }
.pro-nav-link.is-active {
color: #fff; background: rgba(147,197,253,.12);
box-shadow: inset 0 -2px 0 var(--pro-gold-500);
}
.pro-nav-link-badge {
font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
padding: 2px 6px; border-radius: 999px;
background: var(--pro-gold-500); color: #0b2d5e;
}
.pro-topnav-right {
display: flex; align-items: center; gap: 10px;
flex-shrink: 0;
}
.pro-topnav-tier {
display: inline-flex; align-items: center; gap: 6px;
background: linear-gradient(135deg, rgba(147,197,253,.15), rgba(147,197,253,.08));
color: var(--pro-gold-300);
padding: 5px 12px; border-radius: 999px;
font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
border: 1px solid rgba(147,197,253,.28);
}
.pro-topnav-user {
position: relative;
display: flex; align-items: center; gap: 10px;
padding: 4px 10px 4px 4px;
border-radius: 999px;
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.08);
cursor: pointer;
transition: background var(--pro-dur-fast);
color: #e2e8f0;
font: inherit; font-size: 13px;
}
.pro-topnav-user:hover { background: rgba(255,255,255,.1); }
.pro-topnav-avatar {
width: 28px; height: 28px; border-radius: 50%;
background: linear-gradient(135deg, var(--pro-gold-500), var(--pro-gold-600));
color: #fff;
display: flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 12px;
flex-shrink: 0;
}
.pro-topnav-email {
max-width: 140px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pro-topnav-menu {
position: absolute; top: calc(100% + 6px); right: 0;
min-width: 220px;
background: #fff;
border: 1px solid var(--pro-line);
border-radius: var(--pro-r-md);
box-shadow: var(--pro-shadow-lg);
padding: 6px;
display: none;
z-index: 60;
}
.pro-topnav-menu[data-open="true"] { display: block; }
.pro-topnav-menu a, .pro-topnav-menu button {
display: flex; align-items: center; gap: 8px;
width: 100%;
padding: 8px 12px;
font-size: 13.5px; color: var(--pro-body); font-weight: 500;
text-decoration: none; text-align: left;
border-radius: var(--pro-r-sm);
background: transparent; border: 0; cursor: pointer; font-family: inherit;
transition: background var(--pro-dur-fast);
}
.pro-topnav-menu a:hover, .pro-topnav-menu button:hover {
background: var(--pro-bg-alt); color: var(--pro-navy-800); text-decoration: none;
}
.pro-topnav-menu-sep { height: 1px; background: var(--pro-line); margin: 4px 2px; }
.pro-topnav-burger {
display: none;
background: transparent; border: 0;
color: #e2e8f0;
padding: 8px; margin-left: -8px;
cursor: pointer; border-radius: var(--pro-r-sm);
}
.pro-topnav-burger:hover { background: rgba(255,255,255,.08); }
.pro-topnav-burger svg { width: 22px; height: 22px; }
@media (max-width: 960px) {
.pro-topnav-links { display: none; }
.pro-topnav-burger { display: inline-flex; }
.pro-topnav-email { display: none; }
}
/* Mobile drawer */
.pro-drawer {
position: fixed; top: 0; left: 0;
width: min(320px, 88vw); height: 100%;
background: #fff; z-index: 100;
box-shadow: var(--pro-shadow-lg);
padding: 20px 16px;
overflow-y: auto;
transform: translateX(-100%);
transition: transform var(--pro-dur-med) var(--pro-ease-out);
display: flex; flex-direction: column;
}
.pro-drawer[data-open="true"] { transform: translateX(0); }
.pro-drawer-backdrop {
position: fixed; inset: 0; z-index: 99;
background: rgba(11,30,63,.45);
opacity: 0; pointer-events: none;
transition: opacity var(--pro-dur-med) var(--pro-ease-out);
}
.pro-drawer-backdrop[data-open="true"] { opacity: 1; pointer-events: auto; }
.pro-drawer-head {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 16px; padding-bottom: 14px;
border-bottom: 1px solid var(--pro-line);
}
.pro-drawer-head strong { color: var(--pro-navy-800); font-size: 16px; }
.pro-drawer-close {
background: transparent; border: 0; padding: 6px;
color: var(--pro-mute); cursor: pointer; border-radius: var(--pro-r-sm);
}
.pro-drawer-close:hover { background: var(--pro-bg-alt); color: var(--pro-navy-800); }
.pro-drawer-links {
display: flex; flex-direction: column; gap: 2px;
}
.pro-drawer-link {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px; border-radius: var(--pro-r-sm);
color: var(--pro-body); font-size: 14px; font-weight: 500;
text-decoration: none;
transition: background var(--pro-dur-fast);
}
.pro-drawer-link:hover { background: var(--pro-bg-alt); color: var(--pro-navy-800); text-decoration: none; }
.pro-drawer-link.is-active { background: var(--pro-gold-50); color: var(--pro-gold-700); font-weight: 600; }
/* --------------------------------------------------------------------------
3. LAYOUT (main shell + sidebar optional)
-------------------------------------------------------------------------- */
.pro-main {
min-height: calc(100vh - var(--pro-nav-h) - 80px);
padding: 32px 0 64px;
}
.pro-shell-with-sidebar {
display: grid;
grid-template-columns: var(--pro-sidebar-w) 1fr;
gap: 32px;
max-width: var(--pro-container-w);
margin: 0 auto;
padding: 0 24px;
}
@media (max-width: 1024px) {
.pro-shell-with-sidebar {
grid-template-columns: 1fr;
gap: 16px;
}
.pro-sidebar { display: none; }
.pro-sidebar[data-open="true"] { display: block; }
}
/* --------------------------------------------------------------------------
4. SIDEBAR (data-heavy pages)
-------------------------------------------------------------------------- */
.pro-sidebar {
background: var(--pro-surface);
border: 1px solid var(--pro-line);
border-radius: var(--pro-r-lg);
padding: 20px 16px;
box-shadow: var(--pro-shadow-sm);
position: sticky; top: calc(var(--pro-nav-h) + 16px);
max-height: calc(100vh - var(--pro-nav-h) - 32px);
overflow-y: auto;
align-self: start;
}
.pro-sidebar h3 {
font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
color: var(--pro-mute);
margin: 16px 8px 8px;
font-family: var(--pro-font-sans);
}
.pro-sidebar h3:first-child { margin-top: 0; }
.pro-sidebar-link {
display: flex; align-items: center; gap: 10px;
padding: 9px 12px; border-radius: var(--pro-r-sm);
color: var(--pro-body); font-size: 14px; font-weight: 500;
text-decoration: none;
transition: background var(--pro-dur-fast), color var(--pro-dur-fast);
}
.pro-sidebar-link:hover { background: var(--pro-bg-alt); color: var(--pro-navy-800); text-decoration: none; }
.pro-sidebar-link.is-active {
background: var(--pro-gold-50);
color: var(--pro-gold-700);
font-weight: 600;
border-left: 3px solid var(--pro-gold-500);
padding-left: 9px;
}
.pro-sidebar-link svg { width: 18px; height: 18px; flex-shrink: 0; }
.pro-sidebar-link-count {
margin-left: auto;
font-size: 11px; font-weight: 700;
padding: 2px 8px; border-radius: 999px;
background: var(--pro-bg-alt); color: var(--pro-mute);
}
.pro-sidebar-link.is-active .pro-sidebar-link-count {
background: var(--pro-gold-300); color: var(--pro-gold-700);
}
/* --------------------------------------------------------------------------
5. BUTTONS
-------------------------------------------------------------------------- */
.pro-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 10px 18px;
border-radius: var(--pro-r-sm);
font-family: inherit;
font-size: 14px; font-weight: 600;
line-height: 1.4;
cursor: pointer;
border: 1px solid transparent;
text-decoration: none;
transition: transform var(--pro-dur-fast) var(--pro-ease-out),
box-shadow var(--pro-dur-fast) var(--pro-ease-out),
background var(--pro-dur-fast),
border-color var(--pro-dur-fast),
color var(--pro-dur-fast);
min-height: 40px;
white-space: nowrap;
}
.pro-btn:hover { transform: translateY(-1px); text-decoration: none; }
.pro-btn:active { transform: translateY(0); }
.pro-btn:focus-visible { outline: 0; box-shadow: var(--pro-shadow-focus); }
.pro-btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; }
.pro-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.pro-btn--primary {
background: linear-gradient(180deg, var(--pro-navy-700), var(--pro-navy-800));
color: #fff;
box-shadow: 0 6px 16px -6px rgba(27,58,107,.55);
}
.pro-btn--primary:hover {
background: linear-gradient(180deg, var(--pro-navy-800), var(--pro-navy-900));
box-shadow: 0 10px 22px -8px rgba(27,58,107,.65);
color: #fff;
}
.pro-btn--gold {
background: linear-gradient(180deg, var(--pro-gold-500), var(--pro-gold-600));
color: #fff;
box-shadow: 0 6px 16px -6px rgba(59,130,246,.55);
}
.pro-btn--gold:hover {
box-shadow: 0 10px 22px -8px rgba(59,130,246,.65);
color: #fff;
}
.pro-btn--secondary {
background: var(--pro-surface);
color: var(--pro-navy-700);
border-color: var(--pro-line-strong);
}
.pro-btn--secondary:hover {
border-color: var(--pro-navy-700);
color: var(--pro-navy-900);
}
.pro-btn--ghost {
background: transparent;
color: var(--pro-body);
border-color: transparent;
}
.pro-btn--ghost:hover {
background: var(--pro-bg-alt);
color: var(--pro-navy-800);
}
.pro-btn--danger {
background: linear-gradient(180deg, #ef4444, var(--pro-danger));
color: #fff;
box-shadow: 0 6px 16px -6px rgba(220,38,38,.55);
}
.pro-btn--danger:hover { color: #fff; }
.pro-btn--sm { padding: 6px 12px; font-size: 12.5px; min-height: 32px; }
.pro-btn--lg { padding: 14px 22px; font-size: 15px; min-height: 48px; }
.pro-btn--block { width: 100%; }
/* --------------------------------------------------------------------------
6. CARDS
-------------------------------------------------------------------------- */
.pro-card {
background: var(--pro-surface);
border: 1px solid var(--pro-line);
border-radius: var(--pro-r-lg);
box-shadow: var(--pro-shadow-sm);
padding: 20px;
transition: transform var(--pro-dur-med) var(--pro-ease-out),
box-shadow var(--pro-dur-med) var(--pro-ease-out),
border-color var(--pro-dur-fast);
}
.pro-card--hoverable:hover {
transform: translateY(-2px);
box-shadow: var(--pro-shadow);
border-color: var(--pro-navy-300);
}
.pro-card--subtle { background: var(--pro-bg-alt); border-color: var(--pro-line); }
.pro-card--highlight {
background: linear-gradient(180deg, var(--pro-gold-50), var(--pro-surface) 60%);
border-color: var(--pro-gold-300);
}
.pro-card--danger {
background: var(--pro-danger-50);
border-color: #fecaca;
}
.pro-card-head {
display: flex; align-items: center; justify-content: space-between;
gap: 10px; margin-bottom: 12px;
}
.pro-card-title {
font-size: 16px; font-weight: 700; color: var(--pro-navy-800);
font-family: var(--pro-font-display);
margin: 0;
}
.pro-card-body { color: var(--pro-body); font-size: 14.5px; }
.pro-card-footer {
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid var(--pro-line);
display: flex; gap: 10px; align-items: center; justify-content: space-between;
}
/* --------------------------------------------------------------------------
7. BADGES + CHIPS
-------------------------------------------------------------------------- */
.pro-badge {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 9px;
border-radius: 999px;
font-size: 10.5px; font-weight: 800;
letter-spacing: .08em; text-transform: uppercase;
white-space: nowrap;
background: var(--pro-bg-alt); color: var(--pro-mute);
}
.pro-badge--tier {
background: linear-gradient(135deg, var(--pro-gold-100), var(--pro-gold-300));
color: var(--pro-gold-700);
}
.pro-badge--new { background: var(--pro-success-50); color: var(--pro-success-700); }
.pro-badge--beta { background: var(--pro-info-50); color: var(--pro-info-700); }
.pro-badge--killer {
background: linear-gradient(135deg, var(--pro-gold-100), var(--pro-gold-300));
color: var(--pro-gold-700);
}
.pro-badge--pro-only {
background: linear-gradient(135deg, var(--pro-gold-500), var(--pro-gold-600));
color: #fff;
}
.pro-badge--danger { background: var(--pro-danger-50); color: var(--pro-danger-700); }
.pro-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px;
border-radius: 999px;
background: var(--pro-bg-alt);
color: var(--pro-body);
font-size: 12.5px; font-weight: 500;
border: 1px solid var(--pro-line);
cursor: default;
font-family: inherit;
transition: background var(--pro-dur-fast), border-color var(--pro-dur-fast), color var(--pro-dur-fast);
}
.pro-chip--interactive { cursor: pointer; }
.pro-chip--interactive:hover {
background: var(--pro-surface);
border-color: var(--pro-navy-300);
color: var(--pro-navy-700);
}
.pro-chip--active {
background: var(--pro-navy-700); color: #fff; border-color: var(--pro-navy-700);
}
.pro-chip--filter-active {
background: var(--pro-gold-100); color: var(--pro-gold-700); border-color: var(--pro-gold-300);
}
.pro-chip-remove {
width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%; background: rgba(0,0,0,.1); color: inherit;
font-size: 10px; font-weight: 800; cursor: pointer; line-height: 1;
border: 0; padding: 0; margin-left: 2px;
}
/* --------------------------------------------------------------------------
8. INPUTS + FORMS
-------------------------------------------------------------------------- */
.pro-input,
.pro-textarea,
.pro-select {
display: block; width: 100%;
padding: 10px 14px;
border: 1.5px solid var(--pro-line-strong);
border-radius: var(--pro-r-sm);
background: var(--pro-surface);
color: var(--pro-ink);
font-family: inherit; font-size: 14.5px;
line-height: 1.4;
transition: border-color var(--pro-dur-fast), box-shadow var(--pro-dur-fast);
}
.pro-input:focus,
.pro-textarea:focus,
.pro-select:focus {
outline: 0;
border-color: var(--pro-navy-700);
box-shadow: var(--pro-shadow-focus);
}
.pro-input:disabled,
.pro-textarea:disabled,
.pro-select:disabled {
background: var(--pro-bg-alt); color: var(--pro-mute); cursor: not-allowed;
}
.pro-textarea { resize: vertical; min-height: 90px; }
.pro-select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2364748b'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.06l3.71-3.83a.75.75 0 111.08 1.04l-4.25 4.39a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 18px;
padding-right: 36px;
}
.pro-form-row { display: grid; gap: 14px; margin-bottom: 14px; }
.pro-form-label {
display: block;
font-size: 13px; font-weight: 600;
color: var(--pro-navy-800);
margin-bottom: 4px;
}
.pro-form-help {
font-size: 12px; color: var(--pro-mute); margin-top: 4px;
}
.pro-form-error {
font-size: 12.5px; color: var(--pro-danger-700);
margin-top: 4px; display: flex; align-items: center; gap: 4px;
}
/* --------------------------------------------------------------------------
9. TABLES
-------------------------------------------------------------------------- */
.pro-table-wrap {
overflow-x: auto;
border: 1px solid var(--pro-line);
border-radius: var(--pro-r-md);
background: var(--pro-surface);
box-shadow: var(--pro-shadow-sm);
}
.pro-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
min-width: 540px;
}
.pro-table th,
.pro-table td {
padding: 12px 16px;
text-align: left;
border-bottom: 1px solid var(--pro-line);
}
.pro-table thead th {
background: var(--pro-bg-alt);
font-size: 11.5px;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--pro-mute);
font-weight: 700;
white-space: nowrap;
}
.pro-table tbody tr:hover { background: var(--pro-bg); }
.pro-table tbody tr:last-child td { border-bottom: 0; }
.pro-table--striped tbody tr:nth-child(even) { background: var(--pro-bg); }
.pro-table--dense th,
.pro-table--dense td { padding: 8px 12px; font-size: 13px; }
.pro-table-sort {
display: inline-flex; gap: 4px; align-items: center;
cursor: pointer;
}
.pro-table-sort:hover { color: var(--pro-navy-700); }
.pro-table-sort svg { width: 12px; height: 12px; opacity: .5; }
/* --------------------------------------------------------------------------
10. TABS
-------------------------------------------------------------------------- */
.pro-tabs {
display: inline-flex;
background: var(--pro-bg-alt);
border-radius: 999px;
padding: 4px;
gap: 2px;
}
.pro-tab {
padding: 8px 18px;
border-radius: 999px;
font-size: 13.5px; font-weight: 600;
color: var(--pro-body);
background: transparent;
border: 0;
cursor: pointer; font-family: inherit;
transition: background var(--pro-dur-fast), color var(--pro-dur-fast);
}
.pro-tab:hover { color: var(--pro-navy-800); }
.pro-tab.is-active {
background: var(--pro-surface);
color: var(--pro-navy-800);
box-shadow: var(--pro-shadow-sm);
}
.pro-tabs--vertical {
display: flex; flex-direction: column;
padding: 6px;
border-radius: var(--pro-r-md);
background: var(--pro-bg-alt);
gap: 2px;
}
.pro-tabs--vertical .pro-tab {
text-align: left;
border-radius: var(--pro-r-sm);
}
.pro-tab-panel { display: none; }
.pro-tab-panel.is-active { display: block; }
/* --------------------------------------------------------------------------
11. TOAST + MODAL
-------------------------------------------------------------------------- */
.pro-toasts {
position: fixed; bottom: 24px; right: 24px;
display: flex; flex-direction: column; gap: 10px;
z-index: 200; max-width: 380px;
}
.pro-toast {
background: var(--pro-surface);
border: 1px solid var(--pro-line);
border-left: 4px solid var(--pro-navy-700);
border-radius: var(--pro-r-md);
box-shadow: var(--pro-shadow-lg);
padding: 12px 16px;
font-size: 14px;
color: var(--pro-body);
animation: pro-toast-in .28s var(--pro-ease-out);
}
.pro-toast--success { border-left-color: var(--pro-success); }
.pro-toast--danger { border-left-color: var(--pro-danger); }
.pro-toast--info { border-left-color: var(--pro-info); }
.pro-toast--warn { border-left-color: var(--pro-warn); }
@keyframes pro-toast-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.pro-modal-backdrop {
position: fixed; inset: 0; z-index: 150;
background: rgba(11,30,63,.55);
display: none;
align-items: center; justify-content: center;
padding: 20px;
}
.pro-modal-backdrop[data-open="true"] { display: flex; }
.pro-modal {
background: var(--pro-surface);
border-radius: var(--pro-r-lg);
box-shadow: var(--pro-shadow-lg);
max-width: 560px; width: 100%;
max-height: 85vh; overflow-y: auto;
padding: 24px;
}
.pro-modal-head {
display: flex; justify-content: space-between; align-items: flex-start;
gap: 12px; margin-bottom: 14px;
}
.pro-modal-title {
font-size: 20px; font-weight: 700; color: var(--pro-navy-800);
font-family: var(--pro-font-display);
margin: 0;
}
.pro-modal-close {
background: transparent; border: 0; padding: 4px;
color: var(--pro-mute); cursor: pointer;
border-radius: var(--pro-r-sm);
}
.pro-modal-close:hover { background: var(--pro-bg-alt); color: var(--pro-navy-800); }
.pro-modal-actions {
display: flex; gap: 10px; justify-content: flex-end;
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--pro-line);
}
/* --------------------------------------------------------------------------
12. SKELETONS + EMPTY STATE
-------------------------------------------------------------------------- */
.pro-skeleton {
display: grid; gap: 8px;
}
.pro-skeleton-line {
height: 14px; border-radius: 4px;
background: linear-gradient(90deg, var(--pro-bg-alt), var(--pro-line), var(--pro-bg-alt));
background-size: 200% 100%;
animation: pro-skel 1.4s ease-in-out infinite;
}
.pro-skeleton-line:nth-child(1) { width: 96%; }
.pro-skeleton-line:nth-child(2) { width: 88%; }
.pro-skeleton-line:nth-child(3) { width: 72%; }
.pro-skeleton-block {
height: 120px; border-radius: var(--pro-r-md);
background: linear-gradient(90deg, var(--pro-bg-alt), var(--pro-line), var(--pro-bg-alt));
background-size: 200% 100%;
animation: pro-skel 1.4s ease-in-out infinite;
}
@keyframes pro-skel {
0% { background-position: 0% 50%; }
100% { background-position: 200% 50%; }
}
.pro-empty-state {
text-align: center;
padding: 56px 24px;
color: var(--pro-mute);
}
.pro-empty-state-icon {
width: 64px; height: 64px;
margin: 0 auto 14px;
border-radius: var(--pro-r-lg);
background: var(--pro-bg-alt);
display: flex; align-items: center; justify-content: center;
color: var(--pro-mute);
}
.pro-empty-state-icon svg { width: 30px; height: 30px; }
.pro-empty-state h3 {
font-size: 17px; color: var(--pro-navy-800);
font-family: var(--pro-font-display);
margin: 0 0 6px;
}
.pro-empty-state p { font-size: 14px; margin: 0 0 16px; color: var(--pro-mute); }
/* --------------------------------------------------------------------------
13. STAT CARD + PROGRESS
-------------------------------------------------------------------------- */
.pro-stat-card {
background: var(--pro-surface);
border: 1px solid var(--pro-line);
border-radius: var(--pro-r-lg);
box-shadow: var(--pro-shadow-sm);
padding: 18px 20px;
min-width: 0;
}
.pro-stat-card-label {
font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
color: var(--pro-mute);
margin-bottom: 6px;
}
.pro-stat-card-value {
font-size: 32px; font-weight: 800;
color: var(--pro-navy-900);
font-family: var(--pro-font-display);
line-height: 1;
font-variant-numeric: tabular-nums;
}
.pro-stat-card-trend {
margin-top: 8px;
display: inline-flex; align-items: center; gap: 4px;
font-size: 12.5px; font-weight: 600;
}
.pro-stat-card-trend--up { color: var(--pro-success-700); }
.pro-stat-card-trend--down { color: var(--pro-danger-700); }
.pro-stat-card-trend--flat { color: var(--pro-mute); }
.pro-stat-card-trend svg { width: 12px; height: 12px; }
.pro-progress-bar {
height: 8px;
background: var(--pro-bg-alt);
border-radius: 999px;
overflow: hidden;
}
.pro-progress-bar-fill {
height: 100%;
background: linear-gradient(90deg, var(--pro-navy-500), var(--pro-navy-700));
border-radius: inherit;
transition: width .6s var(--pro-ease-out);
}
.pro-progress-bar-fill--gold {
background: linear-gradient(90deg, var(--pro-gold-500), var(--pro-gold-600));
}
.pro-progress-bar-fill--success {
background: linear-gradient(90deg, #4ade80, var(--pro-success));
}
/* --------------------------------------------------------------------------
14. BREADCRUMBS
-------------------------------------------------------------------------- */
.pro-breadcrumbs {
display: flex; align-items: center; flex-wrap: wrap;
gap: 8px;
font-size: 13px; color: var(--pro-mute);
margin-bottom: 20px;
}
.pro-breadcrumbs a { color: var(--pro-navy-700); font-weight: 500; }
.pro-breadcrumbs-sep { color: var(--pro-subtle); }
.pro-breadcrumbs strong { color: var(--pro-navy-800); font-weight: 600; }
/* --------------------------------------------------------------------------
15. FOOTER
-------------------------------------------------------------------------- */
.pro-footer {
margin-top: 64px;
padding: 36px 0 28px;
border-top: 1px solid var(--pro-line);
background: var(--pro-bg-alt);
color: var(--pro-body);
}
.pro-footer-inner {
max-width: var(--pro-container-w);
margin: 0 auto;
padding: 0 24px;
}
.pro-footer-top {
display: flex; flex-wrap: wrap;
justify-content: space-between; gap: 20px;
padding-bottom: 20px;
border-bottom: 1px solid var(--pro-line);
margin-bottom: 20px;
}
.pro-footer-brand {
max-width: 360px;
font-size: 13px;
color: var(--pro-mute);
line-height: 1.5;
}
.pro-footer-brand strong {
display: block; font-size: 15px; color: var(--pro-navy-800);
margin-bottom: 6px;
}
.pro-footer-links-col {
display: flex; flex-direction: column; gap: 6px;
font-size: 13.5px;
}
.pro-footer-links-col h4 {
font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
color: var(--pro-mute);
margin: 0 0 8px;
font-family: var(--pro-font-sans);
}
.pro-footer-links-col a { color: var(--pro-body); }
.pro-footer-links-col a:hover { color: var(--pro-navy-700); }
.pro-footer-disclaimer {
font-size: 12px; color: var(--pro-mute);
line-height: 1.55;
max-width: 820px;
}
.pro-footer-disclaimer strong { color: var(--pro-navy-800); }
.pro-footer-bottom {
display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
padding-top: 16px;
border-top: 1px solid var(--pro-line);
margin-top: 16px;
font-size: 12px; color: var(--pro-mute);
}
/* --------------------------------------------------------------------------
16. PRINT + REDUCED MOTION
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.pro-site *, .pro-site *::before, .pro-site *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
.pro-btn:hover, .pro-card--hoverable:hover { transform: none; }
}
@media print {
.pro-topnav, .pro-sidebar, .pro-drawer, .pro-drawer-backdrop, .pro-toasts { display: none !important; }
.pro-site { background: #fff; color: #000; }
.pro-card { box-shadow: none; border-color: #ccc; }
}
/* --------------------------------------------------------------------------
17. DARK MODE (opt-in via `data-theme="dark"`)
-------------------------------------------------------------------------- */
.pro-site[data-theme="dark"] {
--pro-bg: #0a1220;
--pro-bg-alt: #0f1a30;
--pro-surface: #132240;
--pro-line: #1e3152;
--pro-line-strong: #2a4674;
--pro-ink: #e5edf9;
--pro-body: #cbd5e1;
--pro-mute: #8ea0be;
--pro-subtle: #64748b;
background: var(--pro-bg);
color: var(--pro-ink);
}
/* ==========================================================================
SAMPLE USAGE (para otros agentes — copy-paste-friendly)
--------------------------------------------------------------------------
Fallos TTA — Pro
========================================================================== */
/* 2026-04-26: replace text+badge brand with single wordmark SVG */
.pro-topnav-brand .pro-topnav-wordmark {
height: 26px;
width: auto;
border-radius: 0;
display: block;
}
@media (max-width: 520px) {
.pro-topnav-brand .pro-topnav-wordmark { height: 22px; }
}
/* 2026-04-26: high-specificity overrides para defeat .me-page a navy color que carga después */
.pro-topnav .pro-nav-link,
.pro-topnav .pro-nav-link:hover,
.pro-topnav .pro-nav-link:focus,
.pro-topnav .pro-nav-link.is-active,
.pro-topnav .pro-topnav-brand,
.pro-topnav .pro-topnav-brand:hover,
.pro-topnav .pro-topnav-brand:focus { color: #fff; text-decoration: none; }
.pro-topnav .pro-topnav-brand img { filter: none; }
/* ════════════════════════════════════════════════════════════════════════════
Premium animation tokens · added 2026-04-26 sprint Pro consolidación
════════════════════════════════════════════════════════════════════════════ */
/* View Transitions API setup */
/* @view-transition disabled 2026-04-26 — fix sticky breakage on Pro pages. JS-triggered transitions still work via document.startViewTransition. */
::view-transition-old(root), ::view-transition-new(root) {
animation-duration: 280ms;
animation-timing-function: cubic-bezier(.22,.61,.36,1);
}
::view-transition-old(root) { animation-name: pro-fade-out; }
::view-transition-new(root) { animation-name: pro-fade-in; }
@keyframes pro-fade-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
@keyframes pro-fade-out {
from { opacity: 1; }
to { opacity: 0; }
}
/* Stagger fade-up: page-mount entrance for sections */
@keyframes pro-stagger-fade-up {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: none; }
}
.pro-mount-stagger > * {
opacity: 0;
animation: pro-stagger-fade-up .42s cubic-bezier(.22,.61,.36,1) forwards;
}
.pro-mount-stagger > *:nth-child(1) { animation-delay: 40ms; }
.pro-mount-stagger > *:nth-child(2) { animation-delay: 90ms; }
.pro-mount-stagger > *:nth-child(3) { animation-delay: 140ms; }
.pro-mount-stagger > *:nth-child(4) { animation-delay: 190ms; }
.pro-mount-stagger > *:nth-child(5) { animation-delay: 240ms; }
.pro-mount-stagger > *:nth-child(6) { animation-delay: 290ms; }
.pro-mount-stagger > *:nth-child(7) { animation-delay: 340ms; }
.pro-mount-stagger > *:nth-child(8) { animation-delay: 390ms; }
.pro-mount-stagger > *:nth-child(9) { animation-delay: 440ms; }
.pro-mount-stagger > *:nth-child(n+10) { animation-delay: 480ms; }
/* Premium skeleton (alternative to pro-skel: glass shimmer) */
@keyframes pro-skel-shimmer-v2 {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.pro-skeleton-v2 {
display: block;
background: linear-gradient(90deg, rgba(226,232,240,.45) 25%, rgba(255,255,255,.85) 50%, rgba(226,232,240,.45) 75%);
background-size: 200% 100%;
animation: pro-skel-shimmer-v2 1.6s ease-in-out infinite;
border-radius: 8px;
height: 18px;
margin: 8px 0;
}
.pro-skeleton-v2.pro-skeleton-tall { height: 32px; }
.pro-skeleton-v2.pro-skeleton-block { height: 80px; border-radius: 12px; }
.pro-skeleton-v2.pro-skeleton-line-short { width: 60%; }
.pro-skeleton-v2.pro-skeleton-line-medium { width: 85%; }
/* Animated number counter (count-up effect via CSS — applied with JS class toggle) */
.pro-counter {
font-variant-numeric: tabular-nums;
display: inline-block;
transition: transform .28s cubic-bezier(.22,.61,.36,1);
}
.pro-counter--bump {
animation: pro-counter-bump .42s cubic-bezier(.34,1.56,.64,1);
}
@keyframes pro-counter-bump {
0% { transform: scale(1); }
40% { transform: scale(1.12); }
100% { transform: scale(1); }
}
/* Glass surface (for premium overlays / hero panels) */
.pro-glass {
background: rgba(255,255,255,.72);
backdrop-filter: saturate(180%) blur(12px);
-webkit-backdrop-filter: saturate(180%) blur(12px);
border: 1px solid rgba(255,255,255,.4);
box-shadow: 0 18px 48px -16px rgba(11,30,63,.18), 0 4px 12px -4px rgba(11,30,63,.08);
}
.pro-glass-dark {
background: linear-gradient(180deg, rgba(11,30,63,.84), rgba(17,41,79,.78));
backdrop-filter: saturate(180%) blur(12px);
-webkit-backdrop-filter: saturate(180%) blur(12px);
border: 1px solid rgba(255,255,255,.08);
color: #fff;
box-shadow: 0 18px 48px -16px rgba(0,0,0,.45);
}
/* Hover lift premium */
.pro-lift {
transition: transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s ease;
}
.pro-lift:hover {
transform: translateY(-3px);
box-shadow: 0 16px 36px -12px rgba(11,30,63,.22);
}
/* Streaming text cursor (for chat / sala token-by-token) */
.pro-stream-cursor::after {
content: "▍";
display: inline-block;
margin-left: 2px;
color: var(--pro-gold-500, #60a5fa);
animation: pro-cursor-blink 1.05s steps(2) infinite;
vertical-align: text-bottom;
}
@keyframes pro-cursor-blink {
to { opacity: 0; }
}
/* Reveal-on-scroll utility */
.pro-reveal {
opacity: 0;
transform: translateY(14px);
transition: opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1);
}
.pro-reveal.is-visible {
opacity: 1;
transform: none;
}
/* Hero gradient ambient (subtle navy→navy shift for hero section background) */
@keyframes pro-hero-ambient {
0% { background-position: 0% 0%; }
50% { background-position: 100% 100%; }
100% { background-position: 0% 0%; }
}
.pro-hero-ambient {
background: linear-gradient(135deg, #142c52, #1b3a6b 30%, #2a4e86 65%, #1b3a6b);
background-size: 200% 200%;
animation: pro-hero-ambient 18s ease-in-out infinite;
}
.pro-hero-ambient--gold-accent {
position: relative;
overflow: hidden;
}
.pro-hero-ambient--gold-accent::before {
content: "";
position: absolute;
top: -50%; left: -20%;
width: 80%; height: 200%;
background: radial-gradient(ellipse at center, rgba(147,197,253,.10), transparent 60%);
animation: pro-hero-ambient 22s ease-in-out infinite reverse;
pointer-events: none;
}
/* Reduced motion respect (override all the above) */
@media (prefers-reduced-motion: reduce) {
::view-transition-old(root), ::view-transition-new(root) {
animation-duration: .001s !important;
}
.pro-mount-stagger > * { animation-duration: .001s !important; animation-delay: 0s !important; opacity: 1 !important; transform: none !important; }
.pro-skeleton-v2 { animation: none !important; }
.pro-counter--bump { animation: none !important; }
.pro-lift:hover { transform: none !important; }
.pro-stream-cursor::after { animation: none !important; opacity: .5 !important; }
.pro-reveal { opacity: 1 !important; transform: none !important; }
.pro-hero-ambient { animation: none !important; }
.pro-hero-ambient--gold-accent::before { animation: none !important; }
}
/* 2026-04-26 sticky-fix: defensive overflow rules removed entirely — original Wave 1 sticky CSS works without overrides */