/** * ZENDARA — Theme & Design Tokens * Archivo: css/theme.css * @version 2.1 (2026-05-29) * * v2.1 changelog — SISTEMA DE SECCIONES UNIFICADO (W estética): * - Nuevo bloque "ZEN-SECTION" al final del archivo: patrón visual común * para las 3 pantallas principales (nueva-solicitud, cotizar-solicitud, * detalle-solicitud). Define: * .zen-hero → bloque destacado con título + chips arriba * .zen-section → sección con header numerado + body * .zen-section-num → badge numérico con gradient del color portal * .zen-section--accent → variante con border-left para acción principal * .zen-section--success → variante verde para informe de adjudicación * .zen-subsection → divisor + label para subdividir un body * .zen-side-card → cards compactas para sidebars * .zen-chip / .zen-chip-* → pills de metadata con variantes * .zen-layout → grid 2 columnas (contenido + sidebar) * - Sin cambios en variables ni en lo existente — solo CSS agregado al * final. Las clases legacy (.card, etc.) siguen funcionando. * * v2.0 (2026-05-10) — Anexado bloque SIDEBAR + TOPBAR UNIFICADOS. * v1.1 (2026-05-07) — Soporte bi-portal (azul/verde). * v1.0 — Setup inicial. * * USO: * 1. * 2. o data-portal="proveedor" * 3. Usá siempre las variables: var(--color-primary), var(--text-1), etc. */ /* ══════════════════════════════════════════════════════════════ VARIABLES BASE — comunes a ambos portales ══════════════════════════════════════════════════════════════ */ :root { /* ── PALETA AZUL (comprador) ── */ --azul-500: #1E5FA8; --azul-700: #0F2B5B; --azul-400: #2D6BC4; --azul-100: #EFF6FF; --azul-50: #F5F9FF; --azul-rgb: 30, 95, 168; /* ── PALETA VERDE (proveedor) ── */ --verde-500: #059669; --verde-700: #0A3D2E; --verde-100: #ECFDF5; --verde-50: #F2F7F5; --verde-rgb: 5, 150, 105; /* ── ACENTOS Y SECUNDARIOS ── */ --color-accent: #C9973A; --color-accent-light: rgba(201, 151, 58, 0.10); /* ── ESTADOS ── */ --color-success: #059669; --color-success-light: rgba(5, 150, 105, 0.10); --color-warning: #D97706; --color-warning-light: rgba(217, 119, 6, 0.10); --color-danger: #DC2626; --color-danger-light: rgba(220, 38, 38, 0.08); --color-info: #0EA5E9; --color-info-light: rgba(14, 165, 233, 0.10); /* ── SUPERFICIES ── */ --color-card: #FFFFFF; --color-card-soft: #FAFBFD; /* ── TEXTO ── */ --text-1: #0F1623; --text-2: #4A5568; --text-3: #94A3B8; --text-on-primary: #FFFFFF; --text-on-dark: #FFFFFF; /* ── TIPOGRAFÍA ── */ --font-display: 'Geist Sans', 'Plus Jakarta Sans', sans-serif; --font-body: 'Plus Jakarta Sans', sans-serif; /* ── RADIOS ── */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 18px; --radius-pill: 100px; /* ── SOMBRAS ── */ --shadow-sm: 0 1px 3px rgba(15, 22, 35, 0.06); --shadow-md: 0 4px 16px rgba(15, 22, 35, 0.08); --shadow-lg: 0 8px 32px rgba(15, 22, 35, 0.10); --shadow-xs: 0 1px 2px rgba(15, 22, 35, 0.04); /* ── LAYOUT ── */ --sidebar-width: 240px; --topbar-height: 60px; /* ── TRANSICIONES ── */ --transition-fast: 0.15s ease; --transition-base: 0.2s cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 0.28s cubic-bezier(0.4, 0, 0.2, 1); /* ── CREDIBILIDAD ── */ --cred-nuevo: #94A3B8; --cred-nuevo-bg: rgba(148, 163, 184, 0.15); --cred-bronce: #CD853F; --cred-bronce-bg: rgba(180, 120, 60, 0.20); --cred-plata: #B8B8D0; --cred-plata-bg: rgba(180, 180, 200, 0.20); --cred-oro: #DAA520; --cred-oro-bg: rgba(212, 175, 55, 0.20); --cred-platino: #7DD3FC; --cred-platino-bg: rgba(100, 200, 255, 0.15); } /* ══════════════════════════════════════════════════════════════ PORTAL COMPRADOR (azul) — default ══════════════════════════════════════════════════════════════ */ :root, body[data-portal="comprador"] { --color-primary: var(--azul-500); --color-primary-dark: var(--azul-700); --color-primary-mid: var(--azul-400); --color-primary-light: var(--azul-100); --color-primary-extralight: var(--azul-50); --color-primary-rgb: var(--azul-rgb); --color-bg: #F4F7FB; --border-color: rgba(30, 95, 168, 0.10); --border-color-strong: rgba(30, 95, 168, 0.18); --border-color-soft: rgba(143, 163, 184, 0.20); --shadow-primary: 0 2px 6px rgba(30, 95, 168, 0.22); --shadow-primary-hover: 0 4px 12px rgba(30, 95, 168, 0.30); --color-sidebar: var(--azul-700); --color-sidebar-active: rgba(30, 95, 168, 0.32); --color-sidebar-rol-bg: rgba(30, 95, 168, 0.28); --color-sidebar-rol-border: rgba(30, 95, 168, 0.45); --color-sidebar-rol-text: #93C5FD; --color-sidebar-rol-dot: #60A5FA; --sidebar-bar-color: #60A5FA; } /* ══════════════════════════════════════════════════════════════ PORTAL PROVEEDOR (verde) ══════════════════════════════════════════════════════════════ */ body[data-portal="proveedor"] { --color-primary: var(--verde-500); --color-primary-dark: var(--verde-700); --color-primary-mid: #10B981; --color-primary-light: var(--verde-100); --color-primary-extralight: #F8FCFA; --color-primary-rgb: var(--verde-rgb); --color-bg: var(--verde-50); --border-color: #E2EDE8; --border-color-strong: #C8DDD4; --border-color-soft: rgba(143, 163, 184, 0.20); --shadow-primary: 0 1px 4px rgba(5, 150, 105, 0.22); --shadow-primary-hover: 0 3px 8px rgba(5, 150, 105, 0.30); --color-sidebar: var(--verde-700); --color-sidebar-active: rgba(5, 150, 105, 0.30); --color-sidebar-rol-bg: rgba(5, 150, 105, 0.30); --color-sidebar-rol-border: rgba(5, 150, 105, 0.40); --color-sidebar-rol-text: #6EE7B7; --color-sidebar-rol-dot: #34D399; --sidebar-bar-color: #34D399; } /* ══════════════════════════════════════════════════════════════ VARIABLES DE SIDEBAR ══════════════════════════════════════════════════════════════ */ :root, body[data-portal] { --color-sidebar-hover: rgba(255, 255, 255, 0.07); --color-sidebar-text: rgba(255, 255, 255, 0.6); --color-sidebar-text-soft: rgba(255, 255, 255, 0.4); --color-sidebar-text-strong: rgba(255, 255, 255, 0.88); --color-sidebar-text-label: rgba(255, 255, 255, 0.26); --color-sidebar-label: rgba(255, 255, 255, 0.3); --color-sidebar-border: rgba(255, 255, 255, 0.07); } /* ══════════════════════════════════════════════════════════════ ALIASES LEGACY ══════════════════════════════════════════════════════════════ */ :root, body[data-portal] { --c: var(--color-primary); --c-dark: var(--color-primary-dark); --c-mid: var(--color-primary-mid); --c-l: var(--color-primary-light); --c-ll: var(--color-primary-extralight); --accent: var(--color-accent); --bg: var(--color-bg); --card: var(--color-card); --t1: var(--text-1); --t2: var(--text-2); --t3: var(--text-3); --border: var(--border-color); --bm: var(--border-color-strong); --ok: var(--color-success); --warn: var(--color-warning); --err: var(--color-danger); --info: var(--color-info); --fd: var(--font-display); --fb: var(--font-body); --sw: var(--sidebar-width); --th: var(--topbar-height); --rsm: var(--radius-sm); --rmd: var(--radius-md); --rlg: var(--radius-xl); --shsm: var(--shadow-sm); --shmd: var(--shadow-md); --shlg: var(--shadow-lg); --p-primary: var(--color-primary); --p-dark: var(--color-primary-dark); --p-light: var(--color-primary-light); --p-border: rgba(var(--color-primary-rgb), 0.15); --p-shadow: rgba(var(--color-primary-rgb), 0.18); --bg-card: var(--color-card); --bg-sidebar: var(--color-sidebar); --text-primary: var(--text-1); --text-secondary: var(--text-2); --text-muted: var(--text-3); --border-mid: var(--border-color-strong); --success: var(--color-success); --success-l: var(--color-success-light); --warning: var(--color-warning); --warning-l: var(--color-warning-light); --error: var(--color-danger); --error-l: var(--color-danger-light); --info-l: var(--color-info-light); --sidebar-w: var(--sidebar-width); --topbar-h: var(--topbar-height); } /* ══════════════════════════════════════════════════════════════ RESET BÁSICO ══════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); background: var(--color-bg); color: var(--text-1); min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ══════════════════════════════════════════════════════════════ UTILIDADES COMUNES ══════════════════════════════════════════════════════════════ */ .fade-in { animation: parallaxFadeIn 0.22s ease; } @keyframes parallaxFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ══════════════════════════════════════════════════════════════ ░░░ v2.0 — SIDEBAR + TOPBAR UNIFICADOS ░░░ ══════════════════════════════════════════════════════════════ */ .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-width); background: var(--color-sidebar); display: flex; flex-direction: column; z-index: 50; transition: transform var(--transition-slow); } .s-logo { height: var(--topbar-height); padding: 0 1.25rem; display: flex; align-items: center; gap: 9px; border-bottom: 1px solid var(--color-sidebar-border); text-decoration: none; flex-shrink: 0; } .s-logo-mark { width: 28px; height: 28px; background: var(--color-primary); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .s-logo-mark svg { width: 14px; height: 14px; } .s-logo-text { font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--text-on-dark); letter-spacing: -0.02em; } .s-rol { padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--color-sidebar-border); flex-shrink: 0; } .s-rol-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; background: var(--color-sidebar-rol-bg); border: 1px solid var(--color-sidebar-rol-border); border-radius: var(--radius-pill); font-size: 0.67rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-sidebar-rol-text); } .s-rol-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--color-sidebar-rol-dot); } .cred-widget { margin: 0.6rem 0.75rem 0.25rem; padding: 0.75rem 0.85rem; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-sm); } .cred-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; } .cred-lbl { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-sidebar-label); } .cred-bdg { padding: 2px 7px; border-radius: var(--radius-pill); font-size: 0.6rem; font-weight: 700; text-transform: uppercase; } .cred-bdg.nuevo { background: var(--cred-nuevo-bg); color: var(--cred-nuevo); } .cred-bdg.bronce { background: var(--cred-bronce-bg); color: var(--cred-bronce); } .cred-bdg.plata { background: var(--cred-plata-bg); color: var(--cred-plata); } .cred-bdg.oro { background: var(--cred-oro-bg); color: var(--cred-oro); } .cred-bdg.platino { background: var(--cred-platino-bg); color: var(--cred-platino); } .cred-stars { font-size: 1.05rem; letter-spacing: 2px; color: var(--color-warning); margin-bottom: 0.2rem; line-height: 1; } .cred-stars-empty { color: rgba(255,255,255,0.18); } .cred-score-text { font-family: var(--font-display); font-size: 0.85rem; font-weight: 600; color: var(--text-on-dark); line-height: 1; margin-bottom: 0.3rem; } .cred-score-text span { font-size: 0.65rem; font-weight: 400; color: rgba(255,255,255,0.35); } .membresia-badge { margin: 0.6rem 0.75rem 0.25rem; padding: 0.6rem 0.85rem; background: rgba(var(--color-primary-rgb), 0.15); border: 1px solid rgba(var(--color-primary-rgb), 0.25); border-radius: var(--radius-sm); } .membresia-plan { font-size: 0.72rem; font-weight: 600; color: var(--color-sidebar-rol-text); margin-bottom: 0.3rem; display: flex; align-items: center; justify-content: space-between; } .membresia-barra-bg { height: 3px; background: rgba(255,255,255,0.10); border-radius: 2px; overflow: hidden; margin-bottom: 0.25rem; } .membresia-barra-fill { height: 100%; background: var(--sidebar-bar-color, var(--color-primary)); border-radius: 2px; transition: width 0.5s ease; } .membresia-sub { font-size: 0.62rem; color: rgba(255,255,255,0.42); } .s-nav { flex: 1; padding: 0.85rem 0; overflow-y: auto; } .s-section { padding: 0 0.75rem; margin-bottom: 0.2rem; } .s-section-label { font-size: 0.61rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-sidebar-label); padding: 0.45rem 0.6rem 0.35rem; } .nav-item { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: var(--radius-sm); font-size: 0.83rem; font-weight: 400; color: var(--color-sidebar-text); text-decoration: none; cursor: pointer; transition: all var(--transition-fast); border: none; background: none; width: 100%; text-align: left; } .nav-item:hover { background: var(--color-sidebar-hover); color: var(--color-sidebar-text-strong); } .nav-item.active { background: var(--color-sidebar-active); color: var(--text-on-dark); font-weight: 500; } .n-icon { width: 16px; text-align: center; opacity: 0.6; font-size: 0.88rem; flex-shrink: 0; } .nav-item.active .n-icon { opacity: 1; } .s-bottom { padding: 0.75rem; border-top: 1px solid var(--color-sidebar-border); flex-shrink: 0; } .s-user { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: var(--radius-sm); transition: background var(--transition-fast); } .s-user:hover { background: var(--color-sidebar-hover); } .u-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--color-primary); display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 600; color: var(--text-on-primary); flex-shrink: 0; } .u-info { flex: 1; min-width: 0; } .u-name { font-size: 0.79rem; font-weight: 500; color: var(--text-on-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .u-empresa { font-size: 0.67rem; color: var(--color-sidebar-text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .u-logout { color: rgba(255,255,255,0.6); font-size: 0.9rem; cursor: pointer; padding: 4px 6px; border-radius: var(--radius-sm); transition: all var(--transition-fast); } .u-logout:hover { background: rgba(220,38,38,0.25); color: white; } .sb-backdrop { display: none; position: fixed; inset: 0; background: rgba(15,26,46,0.48); z-index: 49; backdrop-filter: blur(2px); } .sb-backdrop.visible { display: block; } .topbar { position: fixed; top: 0; left: var(--sidebar-width); right: 0; height: var(--topbar-height); background: var(--color-card); border-bottom: 1px solid var(--border-color); display: flex; align-items: center; padding: 0 1.5rem; gap: 1rem; z-index: 40; box-shadow: var(--shadow-sm); transition: left var(--transition-slow); } .t-menu { display: none; width: 36px; height: 36px; border: none; background: transparent; cursor: pointer; border-radius: var(--radius-sm); align-items: center; justify-content: center; font-size: 1.1rem; color: var(--text-2); transition: background var(--transition-fast); } .t-menu:hover { background: var(--color-bg); } .t-breadcrumb { flex: 1; display: flex; align-items: center; gap: 6px; font-size: 0.84rem; min-width: 0; } .t-breadcrumb-item { color: var(--text-3); white-space: nowrap; } .t-breadcrumb-sep { color: var(--border-color-strong); font-size: 0.7rem; flex-shrink: 0; } .t-breadcrumb-current { font-weight: 500; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .t-actions { display: flex; align-items: center; gap: 8px; } .main { margin-left: var(--sidebar-width); margin-top: var(--topbar-height); padding: 1.75rem; min-height: calc(100vh - var(--topbar-height)); transition: margin-left var(--transition-slow); } @media (max-width: 900px) { .sidebar { transform: translateX(calc(-1 * var(--sidebar-width))); } .sidebar.open { transform: translateX(0); box-shadow: var(--shadow-md); } .topbar { left: 0; padding: 0 1rem; } .t-menu { display: inline-flex; } .main { margin-left: 0; padding: 1rem; } } /* ══════════════════════════════════════════════════════════════ ░░░ v2.1 — SISTEMA DE SECCIONES UNIFICADAS ░░░ Patrón visual común para nueva-solicitud, cotizar-solicitud, detalle-solicitud. Las clases legacy (.card, .card-header) siguen funcionando — esto se suma como sistema preferido. ══════════════════════════════════════════════════════════════ */ /* ── LAYOUT 2 COLUMNAS (contenido + sidebar derecho) ── */ .zen-layout { display: grid; grid-template-columns: 1fr 320px; gap: 1.5rem; align-items: start; } .zen-layout-main { display: flex; flex-direction: column; min-width: 0; } .zen-layout-aside { position: sticky; top: calc(var(--topbar-height) + 1.75rem); align-self: flex-start; display: flex; flex-direction: column; gap: 1rem; } @media (max-width: 1100px) { .zen-layout { grid-template-columns: 1fr; } .zen-layout-aside { position: static; } } /* ── HERO de página: bloque superior con título + descripción + chips ── */ .zen-hero { background: linear-gradient(180deg, var(--color-card) 0%, var(--color-card-soft) 100%); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 1.5rem; margin-bottom: 1.5rem; position: relative; overflow: hidden; box-shadow: var(--shadow-xs); } .zen-hero::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-mid) 100%); } .zen-hero-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 0.6rem; } .zen-hero-titlebox { flex: 1; min-width: 0; } .zen-hero-eyebrow { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-primary); margin-bottom: 0.35rem; display: flex; align-items: center; gap: 6px; } .zen-hero-eyebrow::before { content: ''; width: 14px; height: 2px; background: var(--color-primary); border-radius: 2px; } .zen-hero-title { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; color: var(--text-1); letter-spacing: -0.025em; line-height: 1.25; margin: 0; } .zen-hero-subtitle { font-size: 0.82rem; color: var(--text-3); font-weight: 300; margin-top: 0.3rem; line-height: 1.5; } .zen-hero-aside { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .zen-hero-desc { font-size: 0.86rem; color: var(--text-2); line-height: 1.6; margin-top: 0.4rem; white-space: pre-wrap; } .zen-hero-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 0.9rem; } .zen-hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; padding-top: 1.1rem; margin-top: 1.1rem; border-top: 1px solid var(--border-color); } .zen-hero-grid-cell-label { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-3); margin-bottom: 0.3rem; } .zen-hero-grid-cell-value { font-size: 0.88rem; color: var(--text-1); font-weight: 500; } /* ── CHIP (pill de metadata) ── */ .zen-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: var(--radius-pill); font-size: 0.74rem; font-weight: 500; background: var(--color-card); color: var(--text-2); border: 1px solid var(--border-color); transition: all var(--transition-fast); line-height: 1.4; } .zen-chip-primary { background: var(--color-primary-light); color: var(--color-primary); border-color: rgba(var(--color-primary-rgb), 0.22); } .zen-chip-info { background: var(--color-info-light); color: #0369A1; border-color: rgba(14, 165, 233, 0.20); } .zen-chip-warning { background: var(--color-warning-light); color: #92400E; border-color: rgba(217, 119, 6, 0.22); } .zen-chip-success { background: var(--color-success-light); color: #065F46; border-color: rgba(5, 150, 105, 0.22); } .zen-chip-danger { background: var(--color-danger-light); color: #991B1B; border-color: rgba(220, 38, 38, 0.20); } .zen-chip-soft { background: var(--color-bg); color: var(--text-3); } /* Código copiable (pill monospaced) */ .zen-code-pill { font-family: 'Geist Mono', 'SF Mono', Menlo, Consolas, monospace; font-size: 0.72rem; font-weight: 500; color: var(--text-2); background: var(--color-bg); padding: 4px 12px; border-radius: var(--radius-pill); border: 1px solid var(--border-color); letter-spacing: 0.02em; cursor: pointer; transition: all var(--transition-fast); user-select: all; white-space: nowrap; display: inline-flex; align-items: center; } .zen-code-pill:hover { background: var(--color-primary-light); border-color: rgba(var(--color-primary-rgb), 0.3); color: var(--color-primary); } .zen-code-pill.copiado { background: var(--color-success-light); border-color: rgba(5, 150, 105, 0.3); color: #065F46; } .zen-code-pill-sm { font-size: 0.66rem; padding: 2px 9px; } /* ── SECCIÓN principal — patrón unificado ── */ .zen-section { background: var(--color-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); margin-bottom: 1.25rem; overflow: hidden; transition: border-color var(--transition-base), box-shadow var(--transition-base); position: relative; box-shadow: var(--shadow-xs); } .zen-section:hover { border-color: var(--border-color-strong); } .zen-section:last-child { margin-bottom: 0; } .zen-section-header { display: flex; align-items: center; gap: 12px; padding: 0.9rem 1.25rem; background: linear-gradient(180deg, var(--color-card-soft) 0%, var(--color-card) 100%); border-bottom: 1px solid var(--border-color); min-height: 56px; } .zen-section-num { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-mid) 100%); color: var(--text-on-primary); font-family: var(--font-display); font-size: 0.8rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 2px 6px rgba(var(--color-primary-rgb), 0.28), inset 0 1px 0 rgba(255,255,255,0.18); letter-spacing: -0.01em; } .zen-section-num-icon { width: 30px; height: 30px; border-radius: 9px; background: var(--color-bg); color: var(--text-2); font-size: 1rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid var(--border-color-strong); } .zen-section-titlebox { flex: 1; min-width: 0; } .zen-section-title { font-family: var(--font-display); font-size: 0.92rem; font-weight: 600; color: var(--text-1); letter-spacing: -0.01em; margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .zen-section-hint { font-size: 0.74rem; font-weight: 400; color: var(--text-3); margin: 0.15rem 0 0; line-height: 1.5; } .zen-section-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .zen-section-pill { font-size: 0.7rem; font-weight: 500; color: var(--text-3); background: var(--color-bg); padding: 3px 10px; border-radius: var(--radius-pill); border: 1px solid var(--border-color); white-space: nowrap; } .zen-section-body { padding: 1.25rem; } .zen-section-body--tight { padding: 0.75rem 1.25rem; } .zen-section-body--flush { padding: 0; } /* Variante ACENTO — para la acción principal (ej: adjudicar) */ .zen-section--accent { border-color: rgba(var(--color-primary-rgb), 0.28); box-shadow: 0 1px 3px rgba(var(--color-primary-rgb), 0.08); } .zen-section--accent::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--color-primary); z-index: 1; } .zen-section--accent .zen-section-header { background: linear-gradient(180deg, var(--color-primary-light) 0%, var(--color-primary-extralight) 100%); border-bottom-color: rgba(var(--color-primary-rgb), 0.2); padding-left: calc(1.25rem + 4px); } .zen-section--accent .zen-section-title { color: var(--color-primary-dark); } .zen-section--accent .zen-section-hint { color: var(--color-primary); opacity: 0.85; } .zen-section--accent .zen-section-body { padding-left: calc(1.25rem + 4px); } /* Variante SUCCESS — para informe de adjudicación cerrado */ .zen-section--success { border-color: rgba(5, 150, 105, 0.28); } .zen-section--success .zen-section-header { background: linear-gradient(180deg, var(--color-success-light) 0%, var(--color-card) 100%); border-bottom-color: rgba(5, 150, 105, 0.2); } .zen-section--success .zen-section-num { background: linear-gradient(135deg, var(--color-success) 0%, #10B981 100%); box-shadow: 0 2px 6px rgba(5, 150, 105, 0.28), inset 0 1px 0 rgba(255,255,255,0.18); } .zen-section--success .zen-section-title { color: #065F46; } /* Variante SOFT — secciones secundarias (archivos, info auxiliar) */ .zen-section--soft .zen-section-header { background: var(--color-card); } .zen-section--soft .zen-section-num { display: none; } /* ── SUB-SECCIÓN dentro de un body ── */ .zen-subsection { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border-color); } .zen-subsection:first-child { margin-top: 0; padding-top: 0; border-top: none; } .zen-subsection-title { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-3); margin: 0 0 0.85rem; display: flex; align-items: center; gap: 8px; } .zen-subsection-title::before { content: ''; width: 14px; height: 2px; background: var(--border-color-strong); border-radius: 2px; flex-shrink: 0; } .zen-subsection-title-aside { margin-left: auto; font-size: 0.7rem; font-weight: 500; letter-spacing: normal; text-transform: none; color: var(--text-3); } /* ── SIDE CARD: cards compactas para sidebar ── */ .zen-side-card { background: var(--color-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xs); transition: border-color var(--transition-base); } .zen-side-card:hover { border-color: var(--border-color-strong); } .zen-side-card-header { padding: 0.75rem 1.1rem; border-bottom: 1px solid var(--border-color); background: var(--color-card-soft); display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; } .zen-side-card-title { font-family: var(--font-display); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.01em; color: var(--text-1); margin: 0; display: flex; align-items: center; gap: 6px; } .zen-side-card-title-icon { font-size: 0.85rem; opacity: 0.85; } .zen-side-card-body { padding: 0.9rem 1.1rem; } .zen-side-card-body--tight { padding: 0.5rem 1.1rem; } /* ── ACCION CARD: grupo de botones de acción al final del sidebar ── */ .zen-action-card { background: linear-gradient(180deg, var(--color-card) 0%, var(--color-card-soft) 100%); border: 1px solid rgba(var(--color-primary-rgb), 0.2); border-radius: var(--radius-lg); padding: 1.1rem; box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.06); } /* ── DATA ROW: fila label : valor en sidebars ── */ .zen-data-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; padding: 0.55rem 0; border-bottom: 1px solid var(--border-color); font-size: 0.8rem; } .zen-data-row:last-child { border-bottom: none; } .zen-data-row-label { color: var(--text-3); font-weight: 400; } .zen-data-row-value { color: var(--text-1); font-weight: 500; text-align: right; } .zen-data-row-value--lg { font-family: var(--font-display); font-size: 1rem; font-weight: 700; } /* ── BANNER: aviso contextual full-width ── */ .zen-banner { display: flex; align-items: flex-start; gap: 12px; padding: 1rem 1.25rem; border-radius: var(--radius-lg); margin-bottom: 1.25rem; font-size: 0.86rem; line-height: 1.55; border: 1px solid; } .zen-banner-icon { font-size: 1.4rem; flex-shrink: 0; line-height: 1.2; } .zen-banner-text { flex: 1; } .zen-banner-text strong { font-weight: 600; display: block; margin-bottom: 0.2rem; color: inherit; } .zen-banner-actions { display: flex; gap: 6px; flex-shrink: 0; align-items: center; } .zen-banner-info { background: var(--color-info-light); color: #0369A1; border-color: rgba(14, 165, 233, 0.25); } .zen-banner-warning { background: var(--color-warning-light); color: #92400E; border-color: rgba(217, 119, 6, 0.25); } .zen-banner-success { background: var(--color-success-light); color: #065F46; border-color: rgba(5, 150, 105, 0.25); } .zen-banner-danger { background: var(--color-danger-light); color: #991B1B; border-color: rgba(220, 38, 38, 0.25); } .zen-banner-pending { background: rgba(124, 58, 237, 0.10); color: #5B21B6; border-color: rgba(124, 58, 237, 0.22); } /* ── HELPERS ── */ .zen-text-mono { font-family: 'Geist Mono', 'SF Mono', Menlo, Consolas, monospace; } .zen-shrink-0 { flex-shrink: 0; } /* Animaciones */ @keyframes zenSlideIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .zen-slide-in { animation: zenSlideIn 0.3s ease both; } /* Responsive */ @media (max-width: 900px) { .zen-hero { padding: 1.1rem; } .zen-hero-title { font-size: 1.2rem; } .zen-section-header { padding: 0.75rem 1rem; min-height: 50px; gap: 10px; } .zen-section-body { padding: 1rem; } .zen-section--accent .zen-section-header, .zen-section--accent .zen-section-body { padding-left: calc(1rem + 4px); } }