/*! SE Chiapas UIKit v2.30.0 | Secretaria de Educacion del Estado de Chiapas */ /* ========================================================== SE Chiapas Design Tokens: Colors Canonical source: SE-Chiapas-Design-System/colors_and_type.css ========================================================== */ :root { /* ---- Brand / Institutional ---- */ --se-primary: #009887; --se-primary-rgb: 0, 152, 135; --se-primary-hover: #008072; --se-primary-active: #006b5f; --se-primary-link-hover: #007769; --se-primary-subtle: rgba(var(--se-primary-rgb), 0.1); /* Teal accesible para TEXTO pequeño/links (AA 4.5:1 sobre blanco). El brand --se-primary se reserva para rellenos/UI (umbral 3:1). En dark se reasigna. */ --se-primary-text: #00786b; --se-secondary: #ae1922; --se-secondary-rgb: 174, 25, 34; --se-secondary-hover: #90161d; --se-secondary-subtle: rgba(174, 25, 34, 0.1); --se-secondary-soft: rgba(174, 25, 34, 0.04); --se-tertiary: #d3c2b4; --se-tertiary-rgb: 211, 194, 180; --se-tertiary-dark: #b19a86; --se-tertiary-soft: #e8e3d8; --se-quaternary: #c90166; --se-quaternary-rgb: 201, 1, 102; /* ---- Nav-specific teal ---- */ --se-primary-nav: #3b8b70; --se-primary-nav-bg: #f4faf8; --se-primary-nav-border: #b7dbd1; /* ---- Neutral Surfaces ---- */ --se-body-bg: #F4F4F4; --se-surface-bg: #f6f8fb; --se-card-bg: #ffffff; --se-subtle-bg: #f8f9fa; --se-input-bg: #f8f9fa; /* ---- Text / Foreground (Institutional palette) ---- */ --se-fg-strong: #0C0206; --se-fg-body: #585f69; --se-fg-muted: #6c757d; --se-fg-subtle: #6e737d; --se-fg-meta: #6f7782; --se-fg-on-dark: rgba(255, 255, 255, 0.9); --se-fg-on-dark-muted: rgba(255, 255, 255, 0.6); /* ---- Borders ---- */ --se-border: #dee2e6; --se-border-light: #f3f4f6; --se-border-soft: #e5e7eb; --se-border-form: #ced4da; --se-border-input: var(--se-border-form); /* alias usado por kit-* (antes indefinido) */ /* ---- Topbar ---- */ --se-topbar-bg: #4d545d; /* ---- Semantic Status ---- */ --se-success: #009887; --se-success-soft: rgba(var(--se-primary-rgb), 0.1); --se-success-border: rgba(var(--se-primary-rgb), 0.2); --se-danger: #D0021B; --se-danger-soft: rgba(208, 2, 27, 0.08); --se-danger-border: rgba(208, 2, 27, 0.22); --se-warning: #b38e5d; --se-warning-soft: rgba(255, 193, 7, 0.1); --se-warning-border: rgba(255, 193, 7, 0.2); /* Dorado accesible para TEXTO/iconos warning (AA 4.5:1 sobre blanco). El --se-warning se reserva para rellenos. En dark se reasigna al dorado claro. */ --se-warning-text: #8a6d3b; --se-warning-strong: var(--se-warning-text); /* alias usado por kit-menu (texto AA) */ --se-info: #0c7fa0; --se-info-soft: rgba(13, 202, 240, 0.1); --se-info-border: rgba(13, 202, 240, 0.25); /* ---- Tints de estado (alias usados por los componentes .kit-*; antes indefinidos => fondos de estado invisibles en claro Y oscuro). Heredan el dark mode de sus -soft/-subtle. ---- */ --se-primary-tint: var(--se-primary-subtle); --se-success-tint: var(--se-success-soft); --se-danger-tint: var(--se-danger-soft); --se-warning-tint: var(--se-warning-soft); --se-info-tint: var(--se-info-soft); --se-neutral: #6c757d; --se-neutral-soft: rgba(108, 117, 125, 0.1); --se-neutral-border: rgba(108, 117, 125, 0.2); /* ---- Paleta de gráficos (consumida por SeChiapas.chart, tokens-first) ---- */ --se-chart-1: var(--se-primary); /* teal institucional Pantone 626 */ --se-chart-2: var(--se-secondary); /* rojo institucional */ --se-chart-3: #c90166; /* quaternary */ --se-chart-4: #b38e5d; --se-chart-5: #3b8b70; --se-chart-6: #d3c2b4; --se-chart-7: #0c7fa0; /* info */ --se-chart-8: #6c757d; /* ---- Overlays / Backdrops ---- */ --se-overlay-dark: rgba(0, 0, 0, 0.85); --se-overlay-dark-soft: rgba(0, 0, 0, 0.5); --se-overlay-on-dark: rgba(255, 255, 255, 0.15); --se-overlay-on-dark-strong: rgba(255, 255, 255, 0.25); --se-overlay-caption: rgba(0, 0, 0, 0.7); --se-backdrop-blur: blur(8px); /* ---- Datatable Tokens ---- */ --dt-bg-header-footer: #f8f9fa; --dt-bg-row: #ffffff; --dt-bg-row-hover: rgba(var(--se-primary-rgb), 0.03); --dt-border-light: #f3f4f6; --dt-text-header: #6b7280; --dt-icon-header: #9ca3af; --dt-accent: var(--se-primary); /* ---- Semantic Aliases ---- */ --fg1: var(--se-fg-strong); --fg2: var(--se-fg-body); --fg3: var(--se-fg-muted); --fg4: var(--se-fg-subtle); --bg1: var(--se-card-bg); --bg2: var(--se-subtle-bg); --bg3: var(--se-body-bg); --bg-app: var(--se-surface-bg); --accent-1: var(--se-primary); --accent-2: var(--se-secondary); --accent-3: var(--se-quaternary); /* ---- Confirmation Dialog ---- */ --se-confirm-color: #3b8b70; --se-cancel-color: #d33; --se-on-primary: #ffffff; /* ---- Bootstrap Remapping ---- */ --bs-primary: var(--se-primary); --bs-primary-rgb: var(--se-primary-rgb); --bs-secondary: var(--se-secondary); --bs-secondary-rgb: var(--se-secondary-rgb); --bs-info: var(--se-tertiary); --bs-info-rgb: var(--se-tertiary-rgb); --bs-warning: var(--se-quaternary); --bs-warning-rgb: var(--se-quaternary-rgb); --bs-body-bg: var(--se-body-bg); --bs-body-color: var(--se-fg-body); --bs-link-color: var(--se-primary-text); --bs-link-hover-color: var(--se-primary-link-hover); } /* ========================================================== SE Chiapas Design Tokens: Typography Canonical source: SE-Chiapas-Design-System/colors_and_type.css ========================================================== */ :root { /* ---- Font Families ---- */ --se-font-sans: 'Manrope', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --se-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; /* ---- Type Scale (micro-rem) ---- */ --se-text-xxs: 0.65rem; /* 10.4px — nav-section-title, eyebrow */ --se-text-xs: 0.70rem; /* 11.2px — se-label */ --se-text-sm: 0.75rem; /* 12px — badges, small eyebrows */ --se-text-md: 0.85rem; /* 13.6px — buttons, inputs, body small */ --se-text-base: 0.9rem; /* 14.4px — body default */ --se-text-lg: 1.05rem; /* 16.8px — section-header, empty-title */ --se-text-xl: 1.5rem; /* 24px — page-title */ --se-text-2xl: 2rem; /* 32px — stat numbers */ --se-text-3xl: 2.5rem; /* 40px — hero numbers */ /* ---- Font Weights ---- */ --se-weight-light: 300; --se-weight-regular: 400; --se-weight-medium: 500; --se-weight-semibold: 600; --se-weight-bold: 700; --se-weight-xbold: 800; /* ---- Line Heights ---- */ --se-leading-tight: 1.2; --se-leading-snug: 1.35; --se-leading-body: 1.5; /* ---- Letter Spacing ---- */ --se-tracking-tight: -0.5px; --se-tracking-normal: 0; --se-tracking-wide: 0.5px; --se-tracking-xwide: 1px; } /* ========================================================== SE Chiapas Design Tokens: Spacing & Component Sizing ========================================================== */ :root { /* ---- Layout Sizing ---- */ --se-sidebar-width: 280px; --se-sidebar-collapsed-width: 84px; --se-topbar-height: 58px; /* ---- Component Heights ---- */ --se-btn-height: 38px; --se-icon-btn-size: 34px; --se-search-bar-height: 42px; --se-avatar-sm: 32px; --se-avatar-md: 42px; --se-avatar-lg: 90px; --se-section-icon-size: 28px; --se-empty-icon-size: 56px; /* ---- Icon Square Sizes (decorative containers) ---- */ --se-icon-square-sm: 28px; --se-icon-square-md: 36px; --se-icon-square-lg: 42px; --se-icon-square-xl: 56px; /* ---- Logo Sizing ---- */ --se-logo-height-sm: 32px; --se-logo-height-md: 40px; --se-logo-height-lg: 56px; /* ---- Compact Padding ---- */ --se-pad-cell: 0.85rem 1rem; --se-pad-tight: 0.5rem 0.75rem; --se-pad-comfort: 1rem 1.25rem; } /* ========================================================== SE Chiapas Design Tokens: Shadows & Focus Rings Canonical source: SE-Chiapas-Design-System/colors_and_type.css ========================================================== */ :root { --se-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02); --se-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); --se-shadow-md: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.05); --se-shadow-lg: 0 4px 20px -10px rgba(0, 0, 0, 0.1); --se-shadow-brand: 0 0.125rem 0.25rem rgba(var(--se-primary-rgb), 0.2); --se-shadow-brand-hover: 0 0.25rem 0.5rem rgba(var(--se-primary-rgb), 0.3); /* ---- Focus Rings ---- */ --se-focus-ring: 0 0 0 0.25rem rgba(var(--se-primary-rgb), 0.1); --se-focus-ring-sm: 0 0 0 0.2rem rgba(var(--se-primary-rgb), 0.1); } /* ========================================================== SE Chiapas Design Tokens: Borders, Radii & Transitions Canonical source: SE-Chiapas-Design-System/colors_and_type.css Radii are intentionally small — institutional austerity. ========================================================== */ :root { /* ---- Corner Radii (austere, small values) ---- */ --se-radius-sm: 0.0625rem; /* 1px — chips/tags */ --se-radius-md: 0.125rem; /* 2px — buttons, inputs */ --se-radius-lg: 0.1875rem; /* 3px — nav-link pills, alerts */ --se-radius-xl: 0.25rem; /* 4px — cards, datatables */ --se-radius-2xl: 0.375rem; /* 6px — hero stat cards */ --se-radius-pill: 50rem; /* Full pill */ --se-radius-circle: 50%; /* ---- Transitions ---- */ --se-transition-fast: 0.15s ease-in-out; --se-transition-base: 0.2s ease; --se-transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* ========================================================== SE Chiapas Design Tokens: Dark Theme ---------------------------------------------------------- Activacion: (estatico) o via JS: SeChiapas.Theme.set('dark' | 'light' | 'auto') Estrategia: re-asignacion de tokens base. Como casi todos los componentes usan var(--se-*) en lugar de colores hardcoded, automaticamente se ajustan. Esta hoja agrega solo overrides puntuales para los componentes que tienen `background: white` literal heredado. Brand colors (--se-primary, --se-secondary) SE MANTIENEN identicos. Solo cambian fondos, texto y bordes. ========================================================== */ [data-theme="dark"] { /* ---- Brand: SIN CAMBIOS ---- */ /* --se-primary, --se-secondary, --se-quaternary se heredan */ /* ---- Surfaces ---- */ --se-body-bg: #0f1115; --se-surface-bg: #14171c; --se-card-bg: #1a1d22; --se-subtle-bg: #1f232a; --se-input-bg: #1f232a; /* ---- Foreground ---- */ --se-fg-strong: #f5f5f5; --se-fg-body: #d1d5db; --se-fg-muted: #9ca3af; --se-fg-subtle: #868d99; /* AA 5.06:1 sobre card oscura (#6b7280 fallaba) */ --se-fg-meta: #8a8f97; /* Texto accesible en oscuro: el teal/dorado de marca ya cumplen AA sobre dark. */ --se-primary-text: #009887; /* 4.70:1 sobre card oscura */ --se-warning-text: #b38e5d; /* 5.59:1 sobre card oscura */ /* ---- Borders ---- */ --se-border: #2d3138; --se-border-light: #23272e; --se-border-soft: #2d3138; --se-border-form: #3a3f48; /* ---- Brand muted (nav bg / nav border en oscuro) ---- */ --se-primary-nav-bg: rgba(var(--se-primary-rgb), 0.14); --se-primary-nav-border: rgba(var(--se-primary-rgb), 0.28); /* ---- Datatable tokens ---- */ --dt-bg-header-footer: #14171c; --dt-bg-row: #1a1d22; --dt-bg-row-hover: rgba(var(--se-primary-rgb), 0.08); --dt-border-light: #23272e; --dt-text-header: #9ca3af; --dt-icon-header: #6b7280; /* ---- Topbar (mantener oscuro pero ligeramente mas profundo) ---- */ --se-topbar-bg: #1a1d22; /* ---- Soft variants de status (mas opacas para no perderse en bg oscuro) ---- */ --se-success-soft: rgba(var(--se-primary-rgb), 0.18); --se-danger-soft: rgba(208, 2, 27, 0.18); --se-warning-soft: rgba(255, 193, 7, 0.18); --se-info-soft: rgba(13, 202, 240, 0.18); } /* ========================================================== Overrides puntuales para componentes con background: white hardcoded (los iremos migrando a var(--se-card-bg) gradualmente) ========================================================== */ /* Inputs base (forms) */ [data-theme="dark"] .se-input, [data-theme="dark"] .se-select, [data-theme="dark"] .se-textarea { background: var(--se-input-bg); color: var(--se-fg-strong); border-color: var(--se-border-form); } [data-theme="dark"] .se-input:focus, [data-theme="dark"] .se-select:focus, [data-theme="dark"] .se-textarea:focus { background: var(--se-card-bg); } /* Check / Radio / Switch */ [data-theme="dark"] .se-check-input { background: var(--se-input-bg); } [data-theme="dark"] .se-switch-track { background: var(--se-border-form); } /* File upload */ [data-theme="dark"] .se-file { background: var(--se-input-bg); } [data-theme="dark"] .se-file::file-selector-button { background: var(--se-primary-nav-bg); color: var(--se-primary); } [data-theme="dark"] .se-dropzone { background: var(--se-input-bg); } /* Date inputs (color-scheme picker) */ [data-theme="dark"] input[type="date"], [data-theme="dark"] input[type="datetime-local"], [data-theme="dark"] input[type="time"], [data-theme="dark"] input[type="month"], [data-theme="dark"] input[type="week"] { color-scheme: dark; } /* Modal / Drawer */ [data-theme="dark"] .se-modal, [data-theme="dark"] .modal-content, [data-theme="dark"] .modal.se-applauncher .modal-content, [data-theme="dark"] .offcanvas.se-drawer { background: var(--se-card-bg); color: var(--se-fg-body); } /* App launcher specifics */ [data-theme="dark"] .se-applauncher-content, [data-theme="dark"] .se-applauncher-toolbar { background: var(--se-card-bg); } [data-theme="dark"] .se-applauncher-head { background: linear-gradient(180deg, var(--se-subtle-bg) 0%, var(--se-card-bg) 100%); } [data-theme="dark"] .se-applauncher-foot, [data-theme="dark"] .se-drawer-head, [data-theme="dark"] .se-drawer-foot { background: var(--se-subtle-bg); } [data-theme="dark"] .se-applauncher-cell { background: var(--se-card-bg); } [data-theme="dark"] .se-applauncher-search { background: var(--se-input-bg); color: var(--se-fg-strong); } [data-theme="dark"] .se-applauncher-search-kbd { background: var(--se-card-bg); color: var(--se-fg-meta); } [data-theme="dark"] .se-applauncher-empty-icon { background: var(--se-subtle-bg); } [data-theme="dark"] .se-applauncher-group-head { background: var(--se-card-bg); } [data-theme="dark"] .se-applauncher-cell.is-disabled { background: var(--se-subtle-bg); } /* Pagination / kbd / copy-btn */ [data-theme="dark"] .se-kbd { background: var(--se-input-bg); color: var(--se-fg-strong); border-color: var(--se-border-form); } [data-theme="dark"] .se-copy-btn { color: var(--se-fg-meta); } /* Avatar fallback (apps con bg blanco) */ [data-theme="dark"] .se-avatar { background: var(--se-primary); } /* Backdrop ya esta oscuro, no necesita override */ /* Tabs / pills / dropdown / tooltip / popover heredan vars sin issue */ /* Skeleton: shimmer mas sutil en dark. La clase real es .se-skel/.kit-skel (no .se-skeleton, que no existe) — antes el override no aplicaba nunca. */ [data-theme="dark"] .se-skel, [data-theme="dark"] .kit-skel { background: linear-gradient(90deg, var(--se-subtle-bg) 0%, var(--se-border-light) 50%, var(--se-subtle-bg) 100%); } /* SweetAlert override */ [data-theme="dark"] .swal2-popup { background: var(--se-card-bg) !important; color: var(--se-fg-body) !important; } [data-theme="dark"] .swal2-title { color: var(--se-fg-strong) !important; } [data-theme="dark"] .swal2-html-container { color: var(--se-fg-body) !important; } /* Select2 override */ [data-theme="dark"] .select2-container--default .select2-selection--single, [data-theme="dark"] .select2-container--default .select2-selection--multiple, [data-theme="dark"] .select2-container--default .select2-dropdown { background: var(--se-input-bg); border-color: var(--se-border-form); color: var(--se-fg-strong); } [data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--se-fg-strong); } [data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field { background: var(--se-card-bg); color: var(--se-fg-strong); border-color: var(--se-border-form); } [data-theme="dark"] .select2-container--default .select2-results__option { color: var(--se-fg-body); } /* Drawer close button visibility */ [data-theme="dark"] .se-drawer-close, [data-theme="dark"] .se-applauncher-close { color: var(--se-fg-muted); } [data-theme="dark"] .se-drawer-close:hover, [data-theme="dark"] .se-applauncher-close:hover { background: var(--se-card-bg); color: var(--se-fg-strong); } /* Scrollbars dark */ [data-theme="dark"] .se-applauncher-body::-webkit-scrollbar-thumb { background: var(--se-border-form); } [data-theme="dark"] .se-applauncher-body::-webkit-scrollbar-thumb:hover { background: var(--se-fg-subtle); } /* ========================================================== SE Chiapas Design Tokens: Portal Público ---------------------------------------------------------- Tokens de la superficie PÚBLICA institucional (portal ciudadano), distinta de la superficie admin (sidebar/topbar). Todos namespaced --se-portal-* / --se-teal-* / --se-aud-* — NO alteran tokens admin. Consumidos por: layout/_portal-shell, components/_portal-hero, _promo-banner, _editorial, _article. ========================================================== */ :root { /* ---- Contenedor y superficies del portal ---- */ --se-portal-wrap: 1240px; /* ancho máximo del contenido público */ --se-portal-statebar-bg: #1c1f24; /* barra del Estado (gobchis), oscura */ --se-portal-foot-bg: #2b2f36; /* pie institucional público */ /* ---- Rampa teal-oscuro (fondos oscuros institucionales: vitrina, MPU) ---- */ --se-teal-darker: #04302b; --se-teal-deep: #00564c; --se-teal-mid: #007a6c; --se-teal-tint: #9fe6db; /* texto/acento sobre teal oscuro */ --se-teal-wash: #e8f5f4; /* hover claro de botones sobre teal */ --se-vitrina-bg: #0d1014; /* fondo del riel de la vitrina */ /* ---- Acentos por audiencia (triángulo educativo) ---- */ --se-aud-alumnos: #005F56; /* verde */ --se-aud-alumnos-d: #00443d; --se-aud-docentes: #9E2343; /* guinda */ --se-aud-docentes-d: #6b1227; --se-aud-tutores: #BC955C; /* arena */ --se-aud-tutores-d: #8a6a3e; } /* ========================================================== SE Chiapas Base: Document Reset & Bootstrap Overrides ========================================================== */ .overflow-y-auto { overflow-y: auto !important; } body { background-color: var(--se-body-bg); color: var(--se-fg-body); font-family: var(--se-font-sans); font-size: var(--se-text-base); line-height: var(--se-leading-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .text-primary { color: var(--se-primary) !important; } .text-secondary { color: var(--se-secondary) !important; } .bg-primary { background-color: var(--se-primary) !important; color: white !important; } .bg-secondary { background-color: var(--se-secondary) !important; color: white !important; } .btn-primary { --bs-btn-bg: var(--se-primary); --bs-btn-border-color: var(--se-primary); --bs-btn-hover-bg: var(--se-primary-hover); --bs-btn-hover-border-color: var(--se-primary-hover); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--se-primary-active); } .btn-secondary { --bs-btn-bg: var(--se-secondary); --bs-btn-border-color: var(--se-secondary); --bs-btn-hover-bg: var(--se-secondary-hover); --bs-btn-hover-border-color: var(--se-secondary-hover); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; } .btn-outline-primary { --bs-btn-color: var(--se-primary); --bs-btn-border-color: var(--se-primary); --bs-btn-hover-bg: var(--se-primary); --bs-btn-hover-color: #fff; } .btn-outline-secondary { --bs-btn-color: var(--se-secondary); --bs-btn-border-color: var(--se-secondary); --bs-btn-hover-bg: var(--se-secondary); --bs-btn-hover-color: #fff; } .validation-summary-valid { display: none !important; } /* ---- Semantic Typography ---- */ .se-h1, h1.se { font-family: var(--se-font-sans); font-weight: var(--se-weight-bold); font-size: var(--se-text-xl); line-height: var(--se-leading-tight); letter-spacing: var(--se-tracking-tight); color: var(--se-fg-strong); margin: 0 0 0.25rem; } .se-h2, h2.se { font-family: var(--se-font-sans); font-weight: var(--se-weight-bold); font-size: var(--se-text-lg); line-height: var(--se-leading-tight); letter-spacing: -0.2px; color: var(--se-fg-strong); margin: 0 0 0.25rem; } .se-h3, h3.se { font-family: var(--se-font-sans); font-weight: var(--se-weight-bold); font-size: 1rem; line-height: var(--se-leading-snug); color: var(--se-fg-strong); margin: 0 0 0.25rem; } .se-subtitle { color: var(--se-fg-muted); font-size: var(--se-text-md); margin: 0; } .se-p, p.se { font-size: var(--se-text-base); line-height: var(--se-leading-body); color: var(--se-fg-body); } .se-eyebrow { font-size: var(--se-text-sm); font-weight: var(--se-weight-bold); text-transform: uppercase; letter-spacing: var(--se-tracking-xwide); color: var(--se-fg-meta); } .se-stat { font-family: var(--se-font-sans); font-weight: var(--se-weight-xbold); font-size: var(--se-text-2xl); line-height: 1; letter-spacing: -0.5px; } .se-mono, code.se { font-family: var(--se-font-mono); font-size: 0.85em; } /* ========================================================== SE Chiapas Base: Brand Utility Classes ========================================================== */ .bg-brand { background-color: var(--se-primary) !important; color: white !important; } .bg-secondary-brand { background-color: var(--se-secondary) !important; color: white !important; } .bg-tertiary-brand { background-color: var(--se-tertiary) !important; color: white !important; } .bg-tertiary-brand-dark { background-color: var(--se-tertiary-dark) !important; color: white !important; } .bg-quaternary-brand { background-color: var(--se-quaternary) !important; color: white !important; } .text-brand { color: var(--se-primary) !important; } .text-secondary-brand { color: var(--se-secondary) !important; } .text-quaternary-brand { color: var(--se-quaternary) !important; } .hover-bg-light:hover { background-color: rgba(0, 0, 0, 0.03); } .hover-soft-gray:hover { background-color: var(--se-subtle-bg) !important; } .hover-white:hover { color: white !important; } .cursor-pointer { cursor: pointer; } .transition-all { transition: var(--se-transition-smooth); } /* ---- Semantic text colors (replaces text-success/text-danger/etc.) ---- */ .se-text-success { color: var(--se-success) !important; } .se-text-danger { color: var(--se-danger) !important; } .se-text-warning { color: var(--se-warning-text) !important; } .se-text-info { color: var(--se-info) !important; } .se-text-primary { color: var(--se-primary-text) !important; } .se-text-secondary { color: var(--se-secondary) !important; } .se-text-muted { color: var(--se-fg-muted) !important; } .se-text-subtle { color: var(--se-fg-subtle) !important; } .se-text-meta { color: var(--se-fg-meta) !important; } .se-text-strong { color: var(--se-fg-strong) !important; } .se-text-on-dark { color: var(--se-fg-on-dark) !important; } .se-text-on-dark-muted { color: var(--se-fg-on-dark-muted) !important; } /* ---- Font-size utilities (replace inline font-size styles) ---- */ .se-fs-xxs { font-size: var(--se-text-xxs) !important; } .se-fs-xs { font-size: var(--se-text-xs) !important; } .se-fs-sm { font-size: var(--se-text-sm) !important; } .se-fs-md { font-size: var(--se-text-md) !important; } .se-fs-base { font-size: var(--se-text-base) !important; } .se-fs-lg { font-size: var(--se-text-lg) !important; } .se-fs-xl { font-size: var(--se-text-xl) !important; } .se-fs-2xl { font-size: var(--se-text-2xl) !important; } .se-fs-3xl { font-size: var(--se-text-3xl) !important; } /* ---- Font-weight utilities ---- */ .se-fw-light { font-weight: var(--se-weight-light) !important; } .se-fw-regular { font-weight: var(--se-weight-regular) !important; } .se-fw-medium { font-weight: var(--se-weight-medium) !important; } .se-fw-semibold { font-weight: var(--se-weight-semibold) !important; } .se-fw-bold { font-weight: var(--se-weight-bold) !important; } .se-fw-xbold { font-weight: var(--se-weight-xbold) !important; } /* ---- Mono font utilities ---- */ /* .se-font-mono: solo cambia la familia (uso en inputs, tablas, folios). */ /* .se-mono: estilo de inline-code en _reset.css (incluye font-size 0.85em). */ .se-font-mono { font-family: var(--se-font-mono); } /* ---- Icon square (decorative icon container) ---- */ .se-icon-square { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--se-radius-lg); width: var(--se-icon-square-md); height: var(--se-icon-square-md); flex-shrink: 0; } .se-icon-square-sm { width: var(--se-icon-square-sm); height: var(--se-icon-square-sm); } .se-icon-square-lg { width: var(--se-icon-square-lg); height: var(--se-icon-square-lg); } .se-icon-square-xl { width: var(--se-icon-square-xl); height: var(--se-icon-square-xl); } .se-icon-square-circle { border-radius: var(--se-radius-circle); } /* ---- Avatar (round photo / initials container) ---- */ .se-avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--se-radius-circle); background-color: var(--se-primary); color: var(--se-on-primary); width: var(--se-avatar-md); height: var(--se-avatar-md); overflow: hidden; box-shadow: var(--se-shadow-sm); } .se-avatar img { width: 100%; height: 100%; object-fit: cover; } .se-avatar-sm { width: var(--se-avatar-sm); height: var(--se-avatar-sm); font-size: var(--se-text-md); } .se-avatar-lg { width: var(--se-avatar-lg); height: var(--se-avatar-lg); font-size: var(--se-text-3xl); font-weight: var(--se-weight-bold); } .se-avatar-status { position: absolute; bottom: 0; right: 0; width: 14px; height: 14px; background: var(--se-success); border: 3px solid var(--se-card-bg); border-radius: var(--se-radius-circle); } /* ---- Logo container ---- */ .se-logo { max-height: var(--se-logo-height-md); width: auto; display: block; } .se-logo-sm { max-height: var(--se-logo-height-sm); } .se-logo-lg { max-height: var(--se-logo-height-lg); } /* ---- Vertical divider (replaces .vr with rgba hack) ---- */ .se-divider-v { display: inline-block; width: 1px; height: 36px; background-color: var(--se-border-soft); align-self: center; } .se-divider-v-sm { height: 18px; } .se-divider-v-on-dark { background-color: var(--se-overlay-on-dark); } /* ---- Hover opacity ---- */ .hover-opacity-100:hover { opacity: 1 !important; } .hover-opacity-90:hover { opacity: 0.9 !important; } /* ========================================================== SE Chiapas Base: Accessibility primitives (WCAG 2.1 AA) Cubre los requerimientos basicos de accesibilidad de sitios gubernamentales en Mexico (LFPED, NMX-I-329-NYCE). Utilities: .se-sr-only - oculto visual, leido por screen readers .se-sr-only-focusable - se vuelve visible al recibir foco (skip-link) .se-skip-link - patron salto-al-contenido completo .se-focus-ring - anillo de foco consistente .se-live - region aria-live (no visual) .se-live--visible - region aria-live que ademas se muestra Reglas globales: @media (prefers-reduced-motion) - desactiva animaciones @media (forced-colors) - Windows High Contrast ========================================================== */ /* ---- Visually hidden (sr-only equivalente) ---- */ .se-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; } /* Variante que se vuelve visible al enfocarse */ .se-sr-only-focusable:focus, .se-sr-only-focusable:focus-visible { position: fixed; top: 1rem; left: 1rem; width: auto; height: auto; padding: 0.75rem 1.25rem; margin: 0; overflow: visible; clip: auto; white-space: normal; z-index: 10000; background-color: var(--se-primary); color: var(--se-on-primary, #fff); border-radius: var(--se-radius-md); box-shadow: var(--se-shadow-lg); font-weight: var(--se-weight-semibold); text-decoration: none; } /* ---- Skip link (saltar al contenido principal) ---- */ /* Uso: Saltar al contenido ...
...
*/ .se-skip-link { position: absolute; left: -9999px; top: 0; z-index: 10000; padding: 0.75rem 1.25rem; background-color: var(--se-primary); color: var(--se-on-primary, #fff); text-decoration: none; font-weight: var(--se-weight-semibold); border-radius: 0 0 var(--se-radius-md) 0; box-shadow: var(--se-shadow-md); } .se-skip-link:focus, .se-skip-link:focus-visible { left: 0; outline: 3px solid var(--se-warning); outline-offset: 2px; } /* ---- Focus ring consistente ---- */ /* Aplica a elementos interactivos del kit que no definen su propio focus. */ .se-focus-ring:focus-visible { outline: 2px solid var(--se-focus, var(--se-primary)); outline-offset: 2px; box-shadow: 0 0 0 4px color-mix(in oklab, var(--se-focus, var(--se-primary)) 22%, transparent); border-radius: var(--se-radius-sm); } /* Refuerzo global para los componentes mas usados sin focus propio robusto. */ .se-btn:focus-visible, .se-row-action:focus-visible, .se-stat-card-link:focus-visible, .se-tab:focus-visible, .se-pagination-link:focus-visible, .se-breadcrumb-link:focus-visible { outline: 2px solid var(--se-focus, var(--se-primary)); outline-offset: 2px; box-shadow: 0 0 0 4px color-mix(in oklab, var(--se-focus, var(--se-primary)) 20%, transparent); } /* Inputs ya tienen focus propio; este es un fallback semantico. */ .se-input:focus-visible, .se-form-control:focus-visible, .se-select:focus-visible, .se-textarea:focus-visible { outline: 2px solid transparent; box-shadow: 0 0 0 3px color-mix(in oklab, var(--se-primary) 22%, transparent), inset 0 0 0 1px var(--se-primary); } /* ---- ARIA live region (anuncios async para screen readers) ---- */ /* Recomendado: usar la API del kit, que crea y reutiliza las regiones singleton (#se-live-polite / #se-live-assertive) automaticamente: SeChiapas.announce('Guardado correctamente'); // polite SeChiapas.announce('Error al guardar', { assertive:true }); // assertive Uso manual (sin JS del kit):
*/ .se-live { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .se-live--visible { position: static; width: auto; height: auto; padding: 0.5rem 0.75rem; margin: 0; overflow: visible; clip: auto; white-space: normal; } /* ---- Reduced motion (WCAG 2.3.3) ---- */ /* Desactiva animaciones para usuarios con vestibulo sensible o que prefieren menos movimiento. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* Excepciones: indicadores de actividad que perderian significado sin movimiento */ .spinner-border, .se-spinner, .se-btn.is-loading::after, .se-save-state--saving .se-save-state-icon { animation-duration: 0.85s !important; animation-iteration-count: infinite !important; } } /* ---- High contrast (Windows Forced Colors Mode) ---- */ @media (forced-colors: active) { .se-btn { border: 1px solid ButtonText; } .se-card, .se-stat-card, .se-callout { border: 1px solid CanvasText; } .se-badge { border: 1px solid currentColor; } .se-input, .se-form-control { border: 1px solid CanvasText; } } /* ========================================================== SE Chiapas Component: Buttons Ported from kit-btn with se-* prefix for production. ========================================================== */ .se-btn { font-family: var(--se-font-sans); font-size: var(--se-text-md); font-weight: var(--se-weight-bold); border-radius: var(--se-radius-lg); padding: 0.55rem 1rem; border: 1px solid transparent; display: inline-flex; position: relative; align-items: center; gap: 0.5rem; cursor: pointer; transition: all var(--se-transition-base); line-height: 1.25; text-decoration: none; white-space: nowrap; } .se-btn:focus-visible { outline: none; box-shadow: var(--se-focus-ring); } .se-btn i { font-size: 0.95rem; } /* ---- Primary ---- */ .se-btn-brand, .se-btn-primary { background: var(--se-primary); color: white; box-shadow: var(--se-shadow-brand); } .se-btn-brand:hover, .se-btn-primary:hover { background: var(--se-primary-hover); color: white; box-shadow: var(--se-shadow-brand-hover); transform: translateY(-1px); } .se-btn-brand:active, .se-btn-primary:active { background: var(--se-primary-active); transform: none; } /* ---- Outline ---- */ .se-btn-outline { background: var(--se-card-bg); color: var(--se-fg-strong); border-color: var(--se-border-soft); } .se-btn-outline:hover { border-color: var(--se-primary); color: var(--se-primary); background: var(--se-primary-nav-bg); } /* ---- Ghost ---- */ .se-btn-ghost { background: transparent; color: var(--se-fg-muted); } .se-btn-ghost:hover { background: rgba(0, 0, 0, 0.03); color: var(--se-fg-strong); } /* ---- On Dark (acciones sobre el topbar / superficies oscuras) ---- */ .se-btn-on-dark { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.85); border-color: rgba(255, 255, 255, 0.12); } .se-btn-on-dark:hover { background: rgba(255, 255, 255, 0.12); color: #fff; } /* ---- Danger Outline ---- */ .se-btn-danger { background: var(--se-card-bg); color: var(--se-danger); border-color: var(--se-danger); } .se-btn-danger:hover { background: var(--se-danger); color: white; } /* ---- Small ---- */ .se-btn-sm { font-size: var(--se-text-sm); padding: 0.35rem 0.75rem; } /* ---- Icon Button ---- */ .se-icon-btn, .se-btn-icon { padding: 0.4rem; width: var(--se-icon-btn-size); height: var(--se-icon-btn-size); justify-content: center; display: inline-flex; align-items: center; border: none; background: transparent; color: var(--se-fg-muted); border-radius: var(--se-radius-md); cursor: pointer; transition: all var(--se-transition-base); font-size: 14px; } .se-icon-btn:hover, .se-btn-icon:hover { background: rgba(0, 0, 0, 0.04); color: var(--se-fg-strong); } /* ---- Table Action Button (legacy) ---- */ .se-btn-table-action { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-weight: var(--se-weight-medium); text-decoration: none; background-color: transparent; color: #798d83; border: 1px solid #dce0e4; font-size: var(--se-text-md); padding: 6px 16px; border-radius: var(--se-radius-md); transition: all var(--se-transition-base); } .se-btn-table-action i { opacity: 0.75; } .se-btn-table-action:hover { background-color: rgba(0, 0, 0, 0.03); color: #798d83; } /* ---- Loading state ---- El spinner reutiliza la animación `se-spin` (de _spinner.css), ya exenta en el bloque prefers-reduced-motion de _a11y.css. `color: transparent` oculta texto e iconos-fuente (Bootstrap Icons) sin alterar el ancho. El color del spinner llega por --se-spin-color, que SeChiapas.btn.loading() fija leyendo el color computado antes de ocultar; si se usa el estado de forma puramente declarativa, cae al fallback. */ .se-btn.is-loading { color: transparent !important; cursor: progress; pointer-events: none; } .se-btn.is-loading::after { content: ""; position: absolute; top: 50%; left: 50%; width: 1em; height: 1em; margin: -0.5em 0 0 -0.5em; border: 2px solid var(--se-spin-color, #fff); border-right-color: transparent; border-radius: 50%; animation: se-spin 0.9s linear infinite; } /* ========================================================== SE Chiapas Component: Badges & Chips Ported from kit-badge with se-* prefix. ========================================================== */ .se-badge { display: inline-flex; align-items: center; gap: 0.3rem; font-size: var(--se-text-xs); font-weight: var(--se-weight-bold); padding: 0.3em 0.65em; border-radius: var(--se-radius-md); border: 1px solid transparent; line-height: 1.2; } .se-badge-success { background: var(--se-success-soft); color: var(--se-success); border-color: var(--se-success-border); } .se-badge-danger { background: var(--se-danger-soft); color: var(--se-danger); border-color: var(--se-danger-border); } .se-badge-warning { background: var(--se-warning-soft); color: var(--se-warning-text); border-color: var(--se-warning-border); } .se-badge-info { background: var(--se-info-soft); color: var(--se-info); border-color: var(--se-info-border); } .se-badge-primary { background: var(--se-primary-subtle); color: var(--se-primary); border-color: var(--se-success-border); } .se-badge-secondary { background: var(--se-secondary-subtle); color: var(--se-secondary); border-color: var(--se-secondary-subtle); } .se-badge-neutral { background: var(--se-neutral-soft); color: var(--se-neutral); border-color: var(--se-neutral-border); } .se-badge-pill { border-radius: var(--se-radius-pill); padding-inline: 0.75em; } .se-badge-on-dark { background: var(--se-overlay-on-dark); color: var(--se-fg-on-dark); border-color: transparent; } /* ---- Icon Chip ---- */ .se-chip { width: var(--se-avatar-md); height: var(--se-avatar-md); border-radius: var(--se-radius-lg); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; flex-shrink: 0; } .se-chip-sm { width: var(--se-avatar-sm); height: var(--se-avatar-sm); font-size: var(--se-text-md); border-radius: var(--se-radius-circle); border: 1px solid; } .se-chip-lg { width: var(--se-avatar-lg); height: var(--se-avatar-lg); font-size: var(--se-text-xl); } .se-chip-success { background: var(--se-success-soft); color: var(--se-primary); } .se-chip-danger { background: var(--se-danger-soft); color: var(--se-danger); } .se-chip-warning { background: var(--se-warning-soft); color: var(--se-warning-text); } .se-chip-info { background: var(--se-info-soft); color: var(--se-info); } .se-chip-primary { background: var(--se-primary-subtle); color: var(--se-primary); } .se-chip-secondary { background: var(--se-secondary-subtle); color: var(--se-secondary); } .se-chip-neutral { background: var(--se-neutral-soft); color: var(--se-neutral); } .se-chip-brand { background: var(--se-primary); color: var(--se-on-primary); } /* ---- Tag / Light Chip (legacy) ---- */ .se-tag-light { display: inline-block; background-color: var(--se-card-bg); border-radius: var(--se-radius-sm); padding: 0.25rem 0.5rem; color: var(--se-fg-strong); font-weight: var(--se-weight-medium); font-size: var(--se-text-sm); border: 1px solid var(--se-border-light); box-shadow: var(--se-shadow-xs); margin-bottom: 0.5rem; } /* ========================================================== SE Chiapas Component: State Taxonomy (color por tono) Solo pinta color; la forma viene de .se-badge (preexistente). Iconografia/label se inyectan via SeChiapas.state.apply(). ========================================================== */ .se-state-icon { font-size: 0.95em; margin-right: 0.35em; } .se-state--success { color: var(--se-success); } .se-state--warning { color: var(--se-warning-text); } .se-state--danger { color: var(--se-danger); } .se-state--info { color: var(--se-info); } .se-state--neutral { color: var(--se-fg-muted); } /* ========================================================== SE Chiapas Component: Cards ========================================================== */ .se-card, .se-datatable-card { background: var(--se-card-bg); border: 0; border-radius: var(--se-radius-xl); box-shadow: var(--se-shadow-lg); overflow: hidden; /* Evita que el card sea encogido por flex parents (.se-content es flex column). Sin esto, el overflow:hidden clipa el footer cuando la tabla excede el viewport. */ flex-shrink: 0; /* Default padding when used without se-card-body */ padding: 1.5rem; } /* Remove default padding when structured header/body is used */ .se-card:has(.se-card-header), .se-card:has(.se-card-body), .se-card:has(.se-dt), .se-card:has(.se-form-head), .se-card:has(table) { padding: 0; } .se-card-header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--se-border-light); } .se-card-title { font-size: 1rem; font-weight: var(--se-weight-bold); color: var(--se-fg-strong); margin: 0; display: flex; align-items: center; gap: 0.5rem; } .se-card-body { padding: 1.5rem; } .se-card-highlight { background-color: var(--se-primary-nav-bg); border: 1px solid var(--se-primary-nav-border); border-radius: var(--se-radius-xl); overflow: hidden; } /* ========================================================== Cards tonales (v2.3.0) Mismo patrón que stat-cards: chip + meta como header, default tinted, modificadores .is-neutral y .is-emphasis. ========================================================== */ .se-card[class*="se-card--"] { padding: 0; overflow: hidden; } .se-card-head { display: flex; align-items: stretch; border-bottom: 1px solid var(--se-border-soft); } .se-card-chip { width: 40px; display: flex; align-items: center; justify-content: center; color: white; font-size: 15px; flex-shrink: 0; } .se-card-meta { padding: 0.55rem 1rem; flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .se-card-eyebrow { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.7px; text-transform: uppercase; color: var(--se-fg-strong); } .se-card-tag { font-family: var(--se-font-mono); font-size: 10px; letter-spacing: 0.5px; padding: 2px 6px; border-radius: 2px; white-space: nowrap; background: var(--se-card-bg); } /* ---- Default: header tinted ---- */ .se-card--primary { border: 1px solid color-mix(in oklab, var(--se-primary) 25%, var(--se-border-soft)); } .se-card--primary .se-card-chip { background: var(--se-primary); } .se-card--primary .se-card-head { background: color-mix(in oklab, var(--se-primary) 10%, var(--se-card-bg)); border-bottom-color: color-mix(in oklab, var(--se-primary) 20%, var(--se-border-soft)); } .se-card--primary .se-card-tag { color: var(--se-primary); border: 1px solid color-mix(in oklab, var(--se-primary) 25%, var(--se-card-bg)); } .se-card--secondary { border: 1px solid color-mix(in oklab, var(--se-secondary) 25%, var(--se-border-soft)); } .se-card--secondary .se-card-chip { background: var(--se-secondary); } .se-card--secondary .se-card-head { background: color-mix(in oklab, var(--se-secondary) 10%, var(--se-card-bg)); border-bottom-color: color-mix(in oklab, var(--se-secondary) 20%, var(--se-border-soft)); } .se-card--secondary .se-card-tag { color: var(--se-secondary); border: 1px solid color-mix(in oklab, var(--se-secondary) 25%, var(--se-card-bg)); } .se-card--tertiary { border: 1px solid color-mix(in oklab, var(--se-tertiary-dark) 40%, var(--se-border-soft)); } .se-card--tertiary .se-card-chip { background: var(--se-tertiary-dark); } .se-card--tertiary .se-card-head { background: color-mix(in oklab, var(--se-tertiary) 28%, var(--se-card-bg)); border-bottom-color: color-mix(in oklab, var(--se-tertiary-dark) 35%, var(--se-border-soft)); } .se-card--tertiary .se-card-tag { color: var(--se-tertiary-dark); border: 1px solid color-mix(in oklab, var(--se-tertiary-dark) 35%, var(--se-card-bg)); } .se-card--quaternary { border: 1px solid color-mix(in oklab, var(--se-quaternary) 25%, var(--se-border-soft)); } .se-card--quaternary .se-card-chip { background: var(--se-quaternary); } .se-card--quaternary .se-card-head { background: color-mix(in oklab, var(--se-quaternary) 10%, var(--se-card-bg)); border-bottom-color: color-mix(in oklab, var(--se-quaternary) 20%, var(--se-border-soft)); } .se-card--quaternary .se-card-tag { color: var(--se-quaternary); border: 1px solid color-mix(in oklab, var(--se-quaternary) 25%, var(--se-card-bg)); } .se-card--danger { border: 1px solid color-mix(in oklab, var(--se-danger) 25%, var(--se-border-soft)); } .se-card--danger .se-card-chip { background: var(--se-danger); } .se-card--danger .se-card-head { background: color-mix(in oklab, var(--se-danger) 10%, var(--se-card-bg)); border-bottom-color: color-mix(in oklab, var(--se-danger) 20%, var(--se-border-soft)); } .se-card--danger .se-card-tag { color: var(--se-danger); border: 1px solid color-mix(in oklab, var(--se-danger) 25%, var(--se-card-bg)); } /* ---- Modificador .is-neutral ---- */ .se-card[class*="se-card--"].is-neutral { border-color: var(--se-border-soft); } .se-card[class*="se-card--"].is-neutral .se-card-head { background: var(--se-subtle-bg); border-bottom-color: var(--se-border-soft); } /* ---- Modificador .is-emphasis ---- */ .se-card[class*="se-card--"].is-emphasis { border: 0; color: white; } .se-card[class*="se-card--"].is-emphasis .se-card-head { display: none; } .se-card[class*="se-card--"].is-emphasis .se-card-eyebrow { color: rgba(255,255,255,0.75); } .se-card[class*="se-card--"].is-emphasis .se-card-title { color: white; } .se-card--primary.is-emphasis { background: var(--se-primary); } .se-card--secondary.is-emphasis { background: var(--se-secondary); } .se-card--tertiary.is-emphasis { background: var(--se-tertiary-dark); } .se-card--quaternary.is-emphasis { background: var(--se-quaternary); } .se-card--danger.is-emphasis { background: var(--se-danger); } /* ========================================================== SE Chiapas Component: Datatables Ported from kit-dt with se-* prefix + legacy se-datatable-*. ========================================================== */ /* ---- Wrap ---- */ .se-dt-wrap { border: 1px solid var(--dt-border-light); border-radius: var(--se-radius-md); overflow: hidden; background: var(--se-card-bg); } /* ---- Table ---- */ .se-dt { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; table-layout: auto; } /* ---- Header ---- */ .se-dt thead th, .se-datatable-header th { background: var(--dt-bg-header-footer); color: var(--dt-text-header); font-size: var(--se-text-xs); font-weight: var(--se-weight-bold); text-transform: uppercase; letter-spacing: 0.6px; padding: 0.7rem 1rem; text-align: left; border-bottom: 1px solid var(--dt-border-light); white-space: nowrap; } .se-datatable-header { background-color: var(--dt-bg-header-footer) !important; border-bottom: 1px solid var(--dt-border-light); } .se-datatable-header th i { color: var(--dt-icon-header) !important; } /* ---- Sortable Columns ---- */ .se-dt thead th.se-dt-sortable { cursor: pointer; user-select: none; } .se-dt thead th.se-dt-sortable:hover { color: var(--se-primary); } .se-dt thead th.se-dt-sortable:focus-visible { outline: 2px solid var(--se-focus, var(--se-primary)); outline-offset: -2px; } /* Indicador de orden (cableado por SeChiapas.dataTable vía aria-sort). */ .se-dt thead th.se-dt-sortable::after { content: ""; display: inline-block; width: 0; height: 0; margin-left: 0.4em; vertical-align: middle; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: 0.22; transition: opacity var(--se-transition-fast); } .se-dt thead th.se-dt-sortable[aria-sort="ascending"]::after { border-top: 0; border-bottom: 5px solid var(--se-primary); opacity: 1; } .se-dt thead th.se-dt-sortable[aria-sort="descending"]::after { border-bottom: 0; border-top: 5px solid var(--se-primary); opacity: 1; } /* ---- Row Number Column ---- */ .se-dt thead th.se-dt-select, .se-dt tbody td.se-dt-select { width: 1%; white-space: nowrap; text-align: center; padding-left: 0.75rem; padding-right: 0.5rem; } .se-dt thead th.se-dt-rownum, .se-dt tbody td.se-dt-rownum { width: 48px; text-align: right; font-family: var(--se-font-mono); padding-right: 0.75rem; border-right: 1px solid var(--dt-border-light); } .se-dt thead th.se-dt-rownum { color: var(--se-fg-muted); letter-spacing: 0; text-transform: none; } .se-dt tbody td.se-dt-rownum { font-size: var(--se-text-sm); color: var(--se-fg-muted); background: var(--dt-bg-header-footer); user-select: none; } /* ---- Rows ---- */ .se-dt tbody td, .se-datatable-row td { padding: 0.7rem 1rem; font-size: var(--se-text-md); color: var(--se-fg-body); border-bottom: 1px solid var(--dt-border-light); vertical-align: middle; background-color: var(--dt-bg-row) !important; transition: background var(--se-transition-fast); } .se-datatable-row { border-bottom: 1px solid var(--dt-border-light) !important; } /* ---- Hover Accent Bar (legacy MI-SISTEMA style) ---- */ .se-datatable-row td:first-child { position: relative; } .se-datatable-row td:first-child::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background-color: var(--dt-accent); transition: width var(--se-transition-base); } .se-datatable-row:hover td { background-color: var(--dt-bg-row-hover) !important; } .se-datatable-row:hover td:first-child::before { width: 4px; } /* ---- DS-style hover (no accent bar) ---- */ .se-dt tbody tr { transition: background 0.12s ease; } .se-dt tbody tr:hover td { background: var(--dt-bg-row-hover) !important; } .se-dt tbody tr:hover td.se-dt-rownum { background: var(--dt-bg-row-hover) !important; color: var(--se-primary); } .se-dt tbody tr:last-child td { border-bottom: 0; } /* ---- Zebra Striping ---- */ .se-dt--zebra tbody tr:nth-child(even) td:not(.se-dt-rownum) { background: rgba(0, 0, 0, 0.015) !important; } /* ---- Compact Mode ---- */ .se-dt--compact tbody td { padding: 0.45rem 1rem; font-size: var(--se-text-sm); } .se-dt--compact thead th { padding: 0.5rem 1rem; } /* ---- Cell Helpers ---- */ .se-dt .se-dt-primary { font-weight: var(--se-weight-bold); color: var(--se-fg-strong); } .se-dt .se-dt-sub { font-size: var(--se-text-sm); color: var(--se-fg-muted); } .se-dt .se-dt-mono { font-family: var(--se-font-mono); font-feature-settings: "tnum"; } .se-dt .se-dt-num { text-align: right; font-family: var(--se-font-mono); font-feature-settings: "tnum"; } /* ---- Footer ---- */ .se-datatable-footer, .se-dt-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 1rem; padding: 0.6rem 1rem; background: var(--dt-bg-header-footer); border-top: 1px solid var(--dt-border-light); font-size: var(--se-text-sm); color: var(--se-fg-muted); } .se-datatable-footer span.dt-footer-text { color: var(--dt-text-header); font-size: var(--se-text-md); } .se-datatable-footer .dt-footer-text .fw-bold { color: var(--se-fg-strong) !important; } .se-datatable-footer .dt-footer-separator { font-size: 5px; color: #d1d5db; margin: 0 1rem; } .se-dt-foot-count strong { color: var(--se-fg-strong); font-weight: var(--se-weight-bold); } /* ---- Density Toggle ---- */ .se-dt-density { display: inline-flex; border: 1px solid var(--dt-border-light); border-radius: var(--se-radius-sm); overflow: hidden; } .se-dt-density button { background: var(--se-card-bg); border: 0; padding: 0.25rem 0.55rem; font-size: var(--se-text-sm); color: var(--se-fg-muted); cursor: pointer; transition: all 0.12s ease; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .se-dt-density button.is-active { background: var(--se-primary); color: white; } .se-dt-density button:not(.is-active):hover { background: rgba(0, 0, 0, 0.04); color: var(--se-fg-strong); } /* ---- Pager ---- */ .se-dt-pager { display: inline-flex; align-items: center; gap: 0.25rem; } .se-dt-pager button { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; background: var(--se-card-bg); border: 1px solid var(--dt-border-light); border-radius: var(--se-radius-sm); color: var(--se-fg-body); cursor: pointer; transition: all 0.12s ease; padding: 0; } .se-dt-pager button:hover:not(:disabled) { border-color: var(--se-primary); color: var(--se-primary); } .se-dt-pager button:disabled { opacity: 0.4; cursor: not-allowed; } .se-dt-pager-info { padding: 0 0.5rem; font-family: var(--se-font-mono); color: var(--se-fg-strong); } /* ========================================================== v2.4 — Datatable Toolbar (workbench) ---------------------------------------------------------- Barra compacta arriba de un .se-dt: alberga búsqueda (se-search-pill), chips, density toggle, acciones rápidas. ========================================================== */ .se-dt-toolbar { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--se-border-light); background: linear-gradient(180deg, white 0%, var(--se-subtle-bg) 100%); } @media (max-width: 767.98px) { .se-dt-toolbar { flex-wrap: wrap; padding: 0.5rem; } .se-dt-toolbar .se-search-pill { flex: 1 1 100%; } } /* ========================================================== v2.4 — Row states (clickable / selected / expanded) ---------------------------------------------------------- Permite que filas indiquen su comportamiento sin JS: .is-clickable → cursor pointer + hover bg .is-selected → bg primary 4%, stripe izquierda .is-expanded → bg sutil + stripe gris para indicar que existe un sub-row visible debajo ========================================================== */ .se-dt tbody tr.is-clickable { cursor: pointer; } .se-dt tbody tr.is-selected td { background: color-mix(in oklab, var(--se-primary) 4%, var(--dt-bg-row)) !important; } .se-dt tbody tr.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--se-primary); } .se-dt tbody tr.is-expanded td { background: var(--se-subtle-bg) !important; } .se-dt tbody tr.is-expanded td:first-child { box-shadow: inset 3px 0 0 var(--se-fg-subtle); } /* ========================================================== v2.4 — Sub-row (detalle expansible bajo demanda) ---------------------------------------------------------- Patrón: …
Motor
HR16…
…
========================================================== */ .se-dt-subrow { background: var(--se-subtle-bg); border-bottom: 1px solid var(--se-border-soft); } .se-dt-subrow > td { padding: 0 0.75rem 0.85rem !important; } .se-dt-subrow-content { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; margin-left: 1.2rem; } .se-dt-subrow-tile { padding: 0.5rem 0.65rem; background: var(--se-card-bg); border-radius: var(--se-radius-sm, 6px); border: 1px solid var(--se-border-light); } .se-dt-subrow-tile-k { font-family: var(--se-font-mono); font-size: var(--se-text-xs, 0.6rem); letter-spacing: 0.1em; text-transform: uppercase; color: var(--se-fg-muted); font-weight: var(--se-weight-bold); margin-bottom: 0.15rem; } .se-dt-subrow-tile-v { font-size: var(--se-text-md); font-weight: var(--se-weight-semibold, 600); color: var(--se-fg-strong); } .se-dt-subrow-tile-v.is-mono { font-family: var(--se-font-mono); } .se-dt-subrow-tile-v.is-warn { color: var(--se-warning-text); } .se-dt-subrow-tile-v.is-ok { color: var(--se-success); } @media (max-width: 900px) { .se-dt-subrow-content { grid-template-columns: repeat(2, 1fr); } } /* ========================================================== v2.4 — Row actions (revealed on hover) ---------------------------------------------------------- Botones de acción por fila que aparecen al hover del row. En dispositivos táctiles y bajo 1024px siempre visibles (ver bloque responsive abajo). ========================================================== */ .se-row-actions { display: inline-flex; gap: 0.2rem; opacity: 0; transition: opacity var(--se-transition-fast, 0.15s ease); justify-content: flex-end; } .se-dt tbody tr:hover .se-row-actions, .se-dt tbody tr.is-selected .se-row-actions, .se-dt tbody tr.is-expanded .se-row-actions { opacity: 1; } .se-row-action { width: 28px; height: 28px; border-radius: var(--se-radius-sm, 6px); display: grid; place-items: center; color: var(--se-fg-muted); background: transparent; border: 0; cursor: pointer; font-size: 0.86rem; transition: all 0.12s ease; text-decoration: none; } .se-row-action:hover { background: var(--se-subtle-bg); color: var(--se-fg-strong); } .se-row-action.is-primary { background: var(--se-primary); color: white; } .se-row-action.is-primary:hover { filter: brightness(0.92); color: white; } .se-row-action-label { display: none; } /* ========================================================== v2.4 — Responsive: touch-visible actions + card reflow ---------------------------------------------------------- Estrategia tiered: ≥ 1024 + hover → acciones reveladas en hover (default) 768–1023 o táctil → acciones siempre visibles < 768 → tabla colapsa a stack de cards ========================================================== */ /* Touch (cualquier ancho): no existe hover → siempre visible */ @media (hover: none) and (pointer: coarse) { .se-row-actions { opacity: 1; } } /* Tablet por ancho (redundancia útil) */ @media (min-width: 768px) and (max-width: 1023.98px) { .se-row-actions { opacity: 1; } } /* Phone: tabla se convierte en lista de cards apiladas ---------------------------------------------------------- El reflow aplica a CUALQUIER fila de .se-dt (no requiere .is-clickable). Grid-areas neutrales (primary/secondary/ tertiary/state) para que cualquier listado de 5–6 columnas pueda adoptarlo sin renombrar nada. Mapping convencional de columnas (orden de td): 1 → check (checkbox) 2 → primary (identidad principal: placa, nombre, folio) 3 → secondary (info secundaria: descripción, CURP, fecha) 4 → tertiary (info terciaria: resguardante, contacto, monto) 5 → state (badge de estado) 6 → actions (botones) Si una tabla no tiene checkbox (5 columnas), los nth-child se desplazan en 1: aplicar la utilidad `.se-dt--no-check` en el para corregir el mapping. ---------------------------------------------------------- */ @media (max-width: 767.98px) { .se-dt, .se-dt > tbody { display: block; } .se-dt > thead { display: none; } /* Cada fila ahora es una tarjeta */ .se-dt > tbody > tr { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "check primary state" ". secondary secondary" ". tertiary tertiary" "actions actions actions"; column-gap: 0.75rem; row-gap: 0.45rem; padding: 0.9rem 1rem; border: 1px solid var(--se-border-soft); border-radius: var(--se-radius-md, 10px); margin: 0 0.5rem 0.65rem; background: var(--se-card-bg); box-shadow: 0 1px 2px rgba(0,0,0,0.025); } .se-dt > tbody > tr.is-clickable { cursor: default; } .se-dt > tbody > tr.is-selected { border-color: var(--se-primary); background: color-mix(in oklab, var(--se-primary) 4%, white); box-shadow: 0 0 0 2px color-mix(in oklab, var(--se-primary) 12%, transparent); } .se-dt > tbody > tr.is-selected td:first-child { box-shadow: none; } /* Las celdas pierden table-cell, se vuelven block en grid */ .se-dt > tbody > tr > td { display: block; padding: 0; border: 0; background: transparent !important; vertical-align: baseline; } /* Mapping td → grid-area (tabla CON checkbox, 6 columnas) */ .se-dt > tbody > tr > td:nth-child(1) { grid-area: check; align-self: start; padding-top: 0.1rem; padding-left: 0 !important; } .se-dt > tbody > tr > td:nth-child(2) { grid-area: primary; } .se-dt > tbody > tr > td:nth-child(3) { grid-area: secondary; } .se-dt > tbody > tr > td:nth-child(4) { grid-area: tertiary; } .se-dt > tbody > tr > td:nth-child(5) { grid-area: state; justify-self: end; align-self: start; } .se-dt > tbody > tr > td:nth-child(6) { grid-area: actions; text-align: left; padding-top: 0.7rem; border-top: 1px solid var(--se-border-light); margin-top: 0.2rem; } /* Variante --no-check: tabla SIN columna de checkbox (5 columnas). El grid omite la columna "check" y los td shiftean -1 en nth-child. */ .se-dt--no-check > tbody > tr { grid-template-columns: 1fr auto; grid-template-areas: "primary state" "secondary secondary" "tertiary tertiary" "actions actions"; } .se-dt--no-check > tbody > tr > td:nth-child(1) { grid-area: primary; padding-left: 0 !important; padding-top: 0 !important; } .se-dt--no-check > tbody > tr > td:nth-child(2) { grid-area: secondary; } .se-dt--no-check > tbody > tr > td:nth-child(3) { grid-area: tertiary; } .se-dt--no-check > tbody > tr > td:nth-child(4) { grid-area: state; justify-self: end; align-self: start; } .se-dt--no-check > tbody > tr > td:nth-child(5) { grid-area: actions; text-align: left; padding-top: 0.7rem; border-top: 1px solid var(--se-border-light); margin-top: 0.2rem; } /* Acciones full-width con labels visibles */ .se-row-actions { opacity: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; } .se-row-action { width: auto; height: 42px; padding: 0 0.9rem; font-size: var(--se-text-md); font-weight: var(--se-weight-semibold, 600); gap: 0.4rem; border: 1px solid var(--se-border); border-radius: var(--se-radius-sm, 7px); justify-content: center; } .se-row-action.is-primary { border-color: var(--se-primary); } .se-row-action-label { display: inline; } /* Sub-row se oculta en móvil — el detalle vive en la pantalla de detalle */ .se-dt-subrow { display: none !important; } /* Empty state row: comportamiento simple, no grid */ .se-dt > tbody > tr:has(> td[colspan]) { display: block; padding: 0; border: 0; margin: 0; background: transparent; box-shadow: none; } .se-dt > tbody > tr:has(> td[colspan]) > td { display: block; padding: 0; } } /* ========================================================== SE Chiapas Component: Forms Ported from kit-field / kit-input with se-* prefix. ========================================================== */ /* ---- Field Block ---- */ .se-field { display: block; margin-bottom: 1rem; } /* ---- Labels ---- */ .se-label, .se-field-label { display: block; font-size: var(--se-text-xs); font-weight: var(--se-weight-semibold); text-transform: uppercase; letter-spacing: var(--se-tracking-wide); color: var(--se-fg-muted); margin-bottom: 0.4rem; } .se-field-required { color: var(--se-danger); margin-left: 0.1rem; } /* ---- Inputs ---- */ .se-input, .se-select, .se-textarea { width: 100%; font-family: var(--se-font-sans); font-size: var(--se-text-md); color: var(--se-fg-strong); background: var(--se-card-bg); border: 1px solid var(--se-border-form); border-radius: var(--se-radius-md); padding: 0.5rem 0.75rem; display: block; transition: border-color var(--se-transition-fast), box-shadow var(--se-transition-fast); } .se-input:focus, .se-select:focus, .se-textarea:focus { outline: none; border-color: var(--se-primary); box-shadow: var(--se-focus-ring-sm); } .se-select { appearance: auto; } .se-textarea { resize: none; } /* ---- Read-Only / Generated ---- */ .se-input-generated, .se-input-readonly { background: var(--se-primary-nav-bg); border-color: var(--se-primary-nav-border); color: var(--se-primary-nav); font-weight: var(--se-weight-bold); font-family: var(--se-font-mono); cursor: not-allowed; } .se-input-generated:focus, .se-input-readonly:focus { box-shadow: none; border-color: var(--se-primary-nav-border); } /* ---- Input Group ---- */ .se-input-group { display: flex; align-items: stretch; width: 100%; } .se-input-group-text, .se-input-group-addon { background: var(--se-input-bg); border: 1px solid var(--se-border-form); padding: 0 0.75rem; display: flex; align-items: center; font-size: var(--se-text-md); color: var(--se-fg-muted); } .se-input-group-text i, .se-input-group-addon i { font-size: var(--se-text-md); margin: 0; } .se-input-group > :first-child { border-top-left-radius: var(--se-radius-md); border-bottom-left-radius: var(--se-radius-md); } .se-input-group > :last-child { border-top-right-radius: var(--se-radius-md); border-bottom-right-radius: var(--se-radius-md); } .se-input-group .se-input { border-radius: 0; flex: 1 1 auto; min-width: 0; } /* Addon interactivo: botón integrado en el grupo (revelar contraseña, limpiar, acción inline). Espejo de .se-input-group-text pero clicable. Úsalo en vez de meter un .se-btn suelto (que queda sin borde y se ve desprendido del campo). */ .se-input-group-btn { background: var(--se-input-bg); border: 1px solid var(--se-border-form); padding: 0 0.75rem; display: flex; align-items: center; justify-content: center; font-size: var(--se-text-md); color: var(--se-fg-muted); cursor: pointer; transition: color var(--se-transition-fast), background var(--se-transition-fast); } .se-input-group-btn i { font-size: var(--se-text-md); margin: 0; } .se-input-group-btn:hover { color: var(--se-fg-strong); background: var(--se-primary-nav-bg); } .se-input-group-btn:focus-visible { outline: none; color: var(--se-primary); border-color: var(--se-primary); box-shadow: var(--se-focus-ring-sm); z-index: 1; } /* ---- Field Hint ---- */ .se-field-hint { font-size: var(--se-text-sm); color: var(--se-fg-muted); margin-top: 0.4rem; display: flex; align-items: center; gap: 0.3rem; } /* ---- Error State ---- */ .se-field--error .se-input, .se-field--error .se-select, .se-field--error .se-textarea { border-color: var(--se-danger); box-shadow: 0 0 0 3px rgba(174, 25, 34, 0.08); } .se-field-error { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.4rem; font-size: var(--se-text-sm); color: var(--se-danger); font-weight: var(--se-weight-medium); } .se-field-error .bi { font-size: 0.95rem; } /* ========================================================== Validation States v2.4: success, validating ========================================================== */ /* ---- Success State (validacion correcta confirmada) ---- */ .se-field--success .se-input, .se-field--success .se-select, .se-field--success .se-textarea, .se-input.is-valid, .se-form-control.is-valid { border-color: var(--se-success); box-shadow: 0 0 0 3px color-mix(in oklab, var(--se-success) 12%, transparent); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2316a34a'%3E%3Cpath d='M13.485 1.929a.75.75 0 0 1 0 1.06L6.06 10.414a.75.75 0 0 1-1.06 0L1.515 6.929a.75.75 0 0 1 1.06-1.06L5.53 8.823l6.894-6.894a.75.75 0 0 1 1.06 0z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.625rem center; background-size: 1rem; padding-right: 2.25rem; } .se-field-success { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.4rem; font-size: var(--se-text-sm); color: var(--se-success); font-weight: var(--se-weight-medium); } .se-field-success .bi { font-size: 0.95rem; } /* ---- Validating State (async check en curso) ---- */ .se-field--validating .se-input, .se-field--validating .se-select, .se-input.is-validating { border-color: var(--se-info); box-shadow: 0 0 0 3px color-mix(in oklab, var(--se-info) 10%, transparent); padding-right: 2.25rem; background-image: none; } .se-field--validating { position: relative; } .se-field--validating::after { content: ''; position: absolute; top: 50%; right: 0.75rem; width: 14px; height: 14px; margin-top: -7px; border: 2px solid color-mix(in oklab, var(--se-info) 25%, transparent); border-top-color: var(--se-info); border-radius: var(--se-radius-circle); animation: se-field-spin 0.7s linear infinite; pointer-events: none; } .se-field-validating { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.4rem; font-size: var(--se-text-sm); color: var(--se-info); font-weight: var(--se-weight-medium); } @keyframes se-field-spin { to { transform: rotate(360deg); } } /* ---- Character counter (textareas con limite) ---- */ .se-field-counter { margin-top: 0.25rem; text-align: right; font-size: var(--se-text-xs); color: var(--se-fg-meta); font-variant-numeric: tabular-nums; } .se-field-counter.is-near-limit { color: var(--se-warning-text); } .se-field-counter.is-over-limit { color: var(--se-danger); font-weight: var(--se-weight-semibold); } /* ---- Help icon trigger (tooltip explicativo) ---- */ .se-help-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: var(--se-radius-circle); background-color: var(--se-subtle-bg); color: var(--se-fg-meta); font-size: 11px; cursor: help; margin-left: 0.25rem; transition: background-color 0.15s, color 0.15s; vertical-align: middle; border: 0; } .se-help-icon:hover, .se-help-icon:focus-visible { background-color: color-mix(in oklab, var(--se-info) 15%, var(--se-subtle-bg)); color: var(--se-info); outline: none; } /* ---------------------------------------------------------- Input con apariencia de celdas (una por carácter): CURP/RFC. El valor capturado se mantiene LIMPIO (sin separadores); las celdas son puramente visuales. `--se-cells` = nº de caracteres (lo fija mask.js desde el cap). `--se-cell` = avance por carácter (ajustable si la rejilla no cae entre caracteres). ---------------------------------------------------------- */ .se-input--cells { --se-cell: 2.2ch; font-family: var(--se-font-mono); letter-spacing: calc(var(--se-cell) - 1ch); text-indent: calc((var(--se-cell) - 1ch) / 2); text-transform: uppercase; /* Fila de casillas: divisiones de ALTURA COMPLETA entre celdas; el borde del input es el marco exterior, así se lee como una fila de cuadros que se llenan carácter por carácter. */ background-image: repeating-linear-gradient( to right, transparent 0 calc(var(--se-cell) - 1.5px), var(--se-border-form, var(--se-border)) calc(var(--se-cell) - 1.5px) var(--se-cell)); background-repeat: no-repeat; background-position: left center; background-size: calc(var(--se-cell) * (var(--se-cells, 18) - 1)) 100%; } /* ========================================================== SE Chiapas Component: Search Bar Barra de busqueda con iconos integrados y focus state. ========================================================== */ .se-search-bar { display: flex; align-items: center; background-color: var(--se-surface); border-radius: var(--se-radius-md); border: 1px solid var(--se-border); height: var(--se-search-bar-height); box-shadow: var(--se-shadow-sm); transition: var(--se-transition-all); overflow: hidden; } .se-search-bar:focus-within { border-color: var(--se-primary); box-shadow: var(--se-shadow-focus); } .se-search-bar input { border: none; box-shadow: none; padding: 0 var(--se-space-1); height: 100%; background: transparent; color: #495057; font-size: 14px; } .se-search-bar input:focus { box-shadow: none; outline: none; } /* ========================================================== v2.4 — Search Pill (compact toolbar search) ---------------------------------------------------------- Variante compacta del search bar, pensada para toolbars de datatable / workbench. Más baja que .se-search-bar (36px), con slot opcional para shortcut keyboard hint. Markup:
↵
========================================================== */ .se-search-pill { display: flex; align-items: center; gap: 0.5rem; background: var(--se-subtle-bg); border: 1px solid var(--se-border-soft); border-radius: var(--se-radius-md, 8px); padding: 0 0.75rem; height: 36px; transition: border-color var(--se-transition-fast), box-shadow var(--se-transition-fast), background var(--se-transition-fast); } .se-search-pill:focus-within { border-color: var(--se-primary); box-shadow: var(--se-focus-ring, 0 0 0 3px rgba(var(--se-primary-rgb), 0.18)); background: var(--se-card-bg); } .se-search-pill > .bi { color: var(--se-fg-muted); font-size: var(--se-text-md); } .se-search-pill input { flex: 1; border: 0; background: transparent; outline: none; font-family: var(--se-font-sans); font-size: var(--se-text-md); color: var(--se-fg-strong); padding: 0; height: 100%; min-width: 0; } .se-search-pill input::placeholder { color: var(--se-fg-subtle); } .se-search-pill kbd { font-family: var(--se-font-mono); font-size: var(--se-text-xs); color: var(--se-fg-muted); background: var(--se-card-bg); border: 1px solid var(--se-border); border-radius: var(--se-radius-sm, 4px); padding: 0.05rem 0.4rem; letter-spacing: 0.02em; } /* ========================================================== SE Chiapas Component: Spotlight (Command Palette / Global Search) Modal de busqueda global con accesos rapidos. Triggers: data-bs-toggle="modal" + Cmd/Ctrl+K via search-modal.js ========================================================== */ .se-spotlight { background-color: var(--se-surface-bg); border: 0; border-radius: var(--se-radius-2xl); overflow: hidden; box-shadow: var(--se-shadow-lg); } .se-spotlight-head { display: flex; align-items: center; gap: 1rem; padding: 0.85rem 1.25rem; background-color: var(--se-card-bg); border-bottom: 1px solid var(--se-border-soft); } .se-spotlight-head .bi { color: var(--se-fg-muted); font-size: var(--se-text-lg); } .se-spotlight-input { flex: 1; border: 0; background: transparent; box-shadow: none; padding: 0; font-size: var(--se-text-lg); color: var(--se-fg-strong); } .se-spotlight-input:focus { outline: none; box-shadow: none; } .se-spotlight-input::placeholder { color: var(--se-fg-muted); } .se-spotlight-body { padding: 1.25rem; max-height: 400px; overflow-y: auto; } .se-spotlight-section-title { display: flex; align-items: center; gap: 0.4rem; font-size: var(--se-text-xs); font-weight: var(--se-weight-bold); color: var(--se-fg-muted); letter-spacing: var(--se-tracking-wide); margin-bottom: 0.85rem; padding-left: 0.25rem; text-transform: uppercase; } .se-spotlight-list { display: flex; flex-direction: column; background: var(--se-card-bg); border: 1px solid var(--se-border-light); border-radius: var(--se-radius-lg); box-shadow: var(--se-shadow-xs); overflow: hidden; } .se-spotlight-item { display: flex; align-items: center; gap: 1rem; padding: 0.85rem 1rem; text-decoration: none; color: var(--se-fg-strong); border-bottom: 1px solid var(--se-border-light); transition: var(--se-transition-base); } .se-spotlight-item:last-child { border-bottom: 0; } .se-spotlight-item:hover, .se-spotlight-item:focus-visible { background-color: var(--se-subtle-bg); color: var(--se-fg-strong); outline: none; } .se-spotlight-item-icon { width: var(--se-icon-square-lg); height: var(--se-icon-square-lg); border-radius: var(--se-radius-lg); display: flex; align-items: center; justify-content: center; font-size: var(--se-text-lg); flex-shrink: 0; } .se-spotlight-item-body { flex: 1; min-width: 0; } .se-spotlight-item-title { display: block; font-size: var(--se-text-base); font-weight: var(--se-weight-bold); color: var(--se-fg-strong); line-height: var(--se-leading-snug); margin: 0; } .se-spotlight-item-desc { display: block; font-size: var(--se-text-md); color: var(--se-fg-muted); line-height: var(--se-leading-snug); margin-top: 2px; } .se-spotlight-item-chevron { color: var(--se-fg-subtle); font-size: var(--se-text-md); flex-shrink: 0; } /* ---- Spotlight Trigger (lives in topbar pill) ---- */ .se-spotlight-trigger { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; color: var(--se-fg-on-dark); transition: var(--se-transition-base); } .se-spotlight-trigger .bi { color: var(--se-fg-on-dark-muted); font-size: var(--se-text-md); } .se-spotlight-trigger-label { font-weight: var(--se-weight-medium); color: var(--se-fg-on-dark); } .se-kbd { display: inline-flex; align-items: center; background-color: var(--se-overlay-on-dark); color: var(--se-fg-on-dark); font-size: var(--se-text-xxs); font-weight: var(--se-weight-medium); text-transform: uppercase; padding: 0.35em 0.5em; border-radius: var(--se-radius-md); letter-spacing: var(--se-tracking-wide); } .se-kbd-light { background-color: var(--se-subtle-bg); color: var(--se-fg-muted); border: 1px solid var(--se-border-soft); } /* ========================================================== SE Chiapas Component: Shortcuts Overlay Modal listador de atajos abierto con "?". Reutiliza .se-modal y .se-kbd existentes; aporta solo el layout especifico. ========================================================== */ .se-shortcuts-overlay-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 1080; display: flex; align-items: center; justify-content: center; padding: 2rem; } .se-shortcuts-overlay { max-width: 640px; max-height: 80vh; width: 100%; overflow: auto; background: var(--se-card-bg); border-radius: var(--se-radius-lg); padding: 1.5rem; outline: none; } .se-shortcuts-overlay header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; } .se-shortcuts-overlay h2 { font-size: var(--se-text-lg); margin: 0; color: var(--se-fg-strong); } .se-shortcuts-overlay h3 { font-family: var(--se-font-mono); font-size: var(--se-text-xxs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--se-fg-muted); margin: 1.25rem 0 0.5rem; } .se-shortcuts-overlay ul { list-style: none; margin: 0; padding: 0; } .se-shortcuts-overlay li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.4rem 0; border-bottom: 1px solid var(--se-border-soft); font-size: var(--se-text-sm); color: var(--se-fg-body); } .se-shortcuts-overlay li:last-child { border-bottom: 0; } /* ========================================================== SE Chiapas Component: Tour (coach marks de onboarding) ========================================================== */ .se-tour-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 1090; } .se-tour-target { position: relative; z-index: 1100; outline: 3px solid var(--se-primary); outline-offset: 4px; border-radius: var(--se-radius-md); transition: outline 0.2s ease; } .se-tour-step { position: fixed; z-index: 1110; background: var(--se-card-bg); border-radius: var(--se-radius-md); box-shadow: var(--se-shadow-lg); padding: 1rem 1.25rem; width: 320px; max-width: 90vw; outline: none; } .se-tour-step h3 { margin: 0 0 0.5rem; font-size: var(--se-text-md); color: var(--se-fg-strong); } .se-tour-step p { margin: 0 0 0.75rem; font-size: var(--se-text-sm); color: var(--se-fg-body); } .se-tour-step footer { display: flex; align-items: center; gap: 0.5rem; border-top: 1px solid var(--se-border-soft); padding-top: 0.5rem; } .se-tour-count { font-family: var(--se-font-mono); font-size: var(--se-text-xxs); color: var(--se-fg-muted); margin-right: auto; } .se-tour-step button { font-family: var(--se-font-sans); font-size: var(--se-text-sm); border: 1px solid var(--se-border-soft); background: var(--se-card-bg); color: var(--se-fg-body); border-radius: var(--se-radius-md); padding: 0.35rem 0.75rem; cursor: pointer; } .se-tour-step .se-tour-next { background: var(--se-primary); color: #fff; border-color: var(--se-primary); } .se-tour-step button:disabled { opacity: 0.5; cursor: not-allowed; } .se-tour-step button:focus-visible { outline: 2px solid var(--se-primary); outline-offset: 2px; } /* ========================================================== SE Chiapas Component: Empty States Placeholder visual cuando no hay datos. ========================================================== */ .se-empty-state { text-align: center; padding: 3rem 1.5rem; background-color: var(--se-subtle-bg); border-radius: var(--se-radius-xl); border: 2px dashed var(--se-border-soft); margin: 1.5rem; } .se-empty-icon { display: inline-flex; align-items: center; justify-content: center; background-color: var(--se-card-bg); border-radius: var(--se-radius-circle); width: var(--se-empty-icon-size); height: var(--se-empty-icon-size); margin-bottom: 1rem; box-shadow: var(--se-shadow-sm); border: 1px solid var(--se-border-light); } .se-empty-icon i { font-size: var(--se-text-xl); opacity: 0.5; margin: 0; color: var(--se-fg-muted); } .se-empty-title { font-weight: var(--se-weight-bold); color: var(--se-fg-strong); margin-bottom: 0.5rem; font-size: var(--se-text-lg); } .se-empty-text { color: var(--se-fg-muted); font-size: var(--se-text-base); max-width: 350px; margin: 0 auto 1.5rem auto; } .se-empty-actions { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; margin-top: 0.5rem; } /* ========================================================== Variants semanticos (tonos por situacion) ========================================================== */ /* Sin resultados de filtros aplicados */ .se-empty-state--filtered { background-color: color-mix(in oklab, var(--se-info) 4%, var(--se-card-bg)); border-color: color-mix(in oklab, var(--se-info) 35%, var(--se-border-soft)); } .se-empty-state--filtered .se-empty-icon { background: color-mix(in oklab, var(--se-info) 12%, var(--se-card-bg)); border-color: color-mix(in oklab, var(--se-info) 30%, var(--se-border-light)); } .se-empty-state--filtered .se-empty-icon i { color: var(--se-info); opacity: 0.75; } /* Error al cargar (red, action: retry) */ .se-empty-state--error, .se-empty-state--danger { background-color: color-mix(in oklab, var(--se-danger) 5%, var(--se-card-bg)); border-color: color-mix(in oklab, var(--se-danger) 35%, var(--se-border-soft)); border-style: solid; } .se-empty-state--error .se-empty-icon, .se-empty-state--danger .se-empty-icon { background: color-mix(in oklab, var(--se-danger) 12%, var(--se-card-bg)); border-color: color-mix(in oklab, var(--se-danger) 30%, var(--se-border-light)); } .se-empty-state--error .se-empty-icon i, .se-empty-state--danger .se-empty-icon i { color: var(--se-danger); opacity: 0.85; } /* Sin permisos para ver la seccion */ .se-empty-state--permissions { background-color: color-mix(in oklab, var(--se-warning) 5%, var(--se-card-bg)); border-color: color-mix(in oklab, var(--se-warning) 30%, var(--se-border-soft)); border-style: solid; } .se-empty-state--permissions .se-empty-icon { background: color-mix(in oklab, var(--se-warning) 15%, var(--se-card-bg)); border-color: color-mix(in oklab, var(--se-warning) 30%, var(--se-border-light)); } .se-empty-state--permissions .se-empty-icon i { color: var(--se-warning-text); opacity: 0.85; } /* Primera vez (welcome / onboarding) */ .se-empty-state--first-time { background-color: color-mix(in oklab, var(--se-primary) 4%, var(--se-card-bg)); border-color: color-mix(in oklab, var(--se-primary) 30%, var(--se-border-soft)); } .se-empty-state--first-time .se-empty-icon { background: color-mix(in oklab, var(--se-primary) 12%, var(--se-card-bg)); border-color: color-mix(in oklab, var(--se-primary) 25%, var(--se-border-light)); } .se-empty-state--first-time .se-empty-icon i { color: var(--se-primary); opacity: 0.85; } /* Estado completado (todo en orden) */ .se-empty-state--success { background-color: color-mix(in oklab, var(--se-success) 5%, var(--se-card-bg)); border-color: color-mix(in oklab, var(--se-success) 30%, var(--se-border-soft)); border-style: solid; } .se-empty-state--success .se-empty-icon { background: color-mix(in oklab, var(--se-success) 12%, var(--se-card-bg)); border-color: color-mix(in oklab, var(--se-success) 25%, var(--se-border-light)); } .se-empty-state--success .se-empty-icon i { color: var(--se-success); opacity: 0.9; } /* ========================================================== Variantes de tamano ========================================================== */ .se-empty-state--compact { padding: 1.5rem 1rem; margin: 0.75rem; } .se-empty-state--compact .se-empty-icon { width: calc(var(--se-empty-icon-size) * 0.7); height: calc(var(--se-empty-icon-size) * 0.7); margin-bottom: 0.5rem; } .se-empty-state--compact .se-empty-icon i { font-size: var(--se-text-md); } .se-empty-state--compact .se-empty-title { font-size: var(--se-text-base); } .se-empty-state--compact .se-empty-text { font-size: var(--se-text-sm); margin-bottom: 0.75rem; } .se-empty-state--hero { padding: 5rem 2rem; } .se-empty-state--hero .se-empty-icon { width: calc(var(--se-empty-icon-size) * 1.5); height: calc(var(--se-empty-icon-size) * 1.5); margin-bottom: 1.5rem; } .se-empty-state--hero .se-empty-icon i { font-size: var(--se-text-3xl); } .se-empty-state--hero .se-empty-title { font-size: var(--se-text-2xl); margin-bottom: 0.75rem; } .se-empty-state--hero .se-empty-text { font-size: var(--se-text-lg); max-width: 500px; } /* ========================================================== SE Chiapas Component: Page Headers & Section Headers ---------------------------------------------------------- Opcion A: Icon Frame Editorial. El icono prefix del titulo () se transforma automaticamente en un cuadro institucional 42x42 con bg teal-pale y glyph en color primary. Sin cambiar markup. ========================================================== */ /* ---- Page Header (Title + Subtitle + Actions) ---- */ .se-page-header { display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--se-border-light); } @media (min-width: 576px) { .se-page-header { flex-direction: row; align-items: flex-start; gap: 1.5rem; } } /* ---- Title ---- */ .se-page-title { display: flex; align-items: center; gap: 0.85rem; font-family: var(--se-font-sans); font-size: var(--se-text-2xl); /* 32px */ font-weight: var(--se-weight-xbold); /* 800 */ color: var(--se-fg-strong); letter-spacing: var(--se-tracking-tight); /* -0.5px */ line-height: var(--se-leading-tight); /* 1.2 */ margin: 0; } /* Icon frame — el inicial se transforma en cuadro institucional */ .se-page-title > i:first-child, .se-page-title > .bi:first-child { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 42px; height: 42px; background: var(--se-primary-nav-bg); color: var(--se-primary) !important; /* override text-brand inline */ border: 1px solid var(--se-primary-nav-border); border-radius: var(--se-radius-xl); /* 4px — austero */ font-size: 1.25rem; line-height: 1; transition: background var(--se-transition-fast), border-color var(--se-transition-fast); } /* Variante secundaria: usar tono secondary (rojo institucional) cuando se requiera */ .se-page-title--secondary > i:first-child, .se-page-title--secondary > .bi:first-child { background: var(--se-secondary-soft); color: var(--se-secondary) !important; border-color: rgba(var(--se-secondary-rgb), 0.18); } /* Variante neutral: gris sutil para paginas no-CRUD */ .se-page-title--neutral > i:first-child, .se-page-title--neutral > .bi:first-child { background: var(--se-subtle-bg); color: var(--se-fg-strong) !important; border-color: var(--se-border-light); } /* ---- Subtitle ---- */ .se-page-subtitle { font-family: var(--se-font-sans); font-size: var(--se-text-base); /* 14.4px */ color: var(--se-fg-muted); line-height: var(--se-leading-body); /* 1.5 */ letter-spacing: var(--se-tracking-normal); max-width: 58ch; /* legibilidad — corta lineas largas */ margin: 0.5rem 0 0; /* respiracion respecto al titulo */ /* Indenta el subtitulo a la altura del texto del titulo (42px icon + 0.85rem gap), pero solo cuando el titulo tiene icono. Se hace via padding-left calculado. */ padding-left: calc(42px + 0.85rem); } /* Si el titulo NO tiene icono, no indentar el subtitulo */ .se-page-title:not(:has(> i:first-child, > .bi:first-child)) + .se-page-subtitle, .se-page-title-plain + .se-page-subtitle { padding-left: 0; } /* ---- Actions zone (segundo
del page-header) ---- */ .se-page-header > div:last-child { display: flex; gap: 0.5rem; flex-wrap: wrap; flex-shrink: 0; } @media (min-width: 576px) { .se-page-header > div:last-child { align-self: center; /* alinea acciones al centro vertical del titulo */ } } /* Mobile: el subtitulo no indenta (se ve raro en columna estrecha) */ @media (max-width: 575.98px) { .se-page-subtitle { padding-left: 0; } .se-page-title { font-size: var(--se-text-xl); } /* baja a 24px en mobile */ .se-page-title > i:first-child, .se-page-title > .bi:first-child { width: 36px; height: 36px; font-size: 1.1rem; } } /* ---- Eyebrow opcional ARRIBA del titulo (futuro uso) ---- */ .se-page-eyebrow { display: block; font-family: var(--se-font-sans); font-size: var(--se-text-xxs); /* 10.4px */ font-weight: var(--se-weight-bold); letter-spacing: var(--se-tracking-xwide); text-transform: uppercase; color: var(--se-fg-meta); margin: 0 0 0.4rem; padding-left: calc(42px + 0.85rem); /* alinea con el texto del titulo */ } .se-page-eyebrow:not(:has(~ .se-page-title > i:first-child)) { padding-left: 0; } /* ========================================================== Section Header (dentro de cards) — sin cambios estructurales pero CON tokens correctos ========================================================== */ .se-section-header { display: flex; align-items: center; gap: 0.5rem; font-family: var(--se-font-sans); font-size: var(--se-text-lg); /* 16.8px */ font-weight: var(--se-weight-bold); color: var(--se-fg-strong); letter-spacing: var(--se-tracking-normal); margin: 0; } .se-section-icon { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--se-radius-circle); width: var(--se-section-icon-size); height: var(--se-section-icon-size); box-shadow: var(--se-shadow-sm); background-color: var(--se-secondary); color: white; flex-shrink: 0; } .se-section-icon i { font-size: var(--se-text-base); margin: 0; } /* ========================================================== v2.4 — .se-page-title.is-tight ---------------------------------------------------------- Variante compacta del título. Reduce tamaño y suprime el ícono decorativo (filosofía: íconos sólo donde aporten jerarquía — navegación, acciones primarias, badges). Útil para listados frecuentados por capturistas/analistas que prefieren densidad sobre presencia. ========================================================== */ .se-page-title.is-tight { font-size: var(--se-text-xl, 1.35rem); font-weight: var(--se-weight-semibold, 650); letter-spacing: -0.012em; } .se-page-title.is-tight > i:first-child, .se-page-title.is-tight > .bi:first-child { display: none; } /* ========================================================== SE Chiapas Component: Stat Cards (KPI) v2.3.0 — Header interno con chip + meta (default tinted), modificadores is-neutral (header gris) y is-emphasis (full color). Reemplaza al border-top tonal anterior. ========================================================== */ .se-stat-card { position: relative; background: var(--se-card-bg); border: 1px solid var(--se-border-soft); border-radius: 4px; padding: 0; min-height: 168px; display: grid; grid-template-rows: auto 1fr auto; gap: 0; box-shadow: 0 1px 0 rgba(20, 30, 30, 0.02); transition: border-color var(--se-transition-fast); overflow: hidden; } .se-stat-card:hover { border-color: var(--se-border-form); } /* ---- Default head (sin variant tonal: eyebrow + icon) ---- */ .se-stat-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1.25rem 1.25rem 0.65rem; } .se-stat-eyebrow { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.7px; text-transform: uppercase; color: var(--se-fg-muted); } .se-stat-icon { width: 28px; height: 28px; border: 1px solid var(--se-border-soft); border-radius: 3px; background: var(--dt-bg-header-footer); color: var(--se-fg-muted); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; } .se-stat-body { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; padding: 0.5rem 1.25rem 1rem; } .se-stat-value { font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: -1.2px; margin: 0; color: var(--se-fg-strong); font-variant-numeric: tabular-nums; } .se-stat-delta { display: inline-flex; align-items: center; gap: 0.2rem; font-family: var(--se-font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.3px; padding: 2px 6px; border: 1px solid currentColor; border-radius: 2px; line-height: 1; } .se-stat-delta--up { color: var(--se-primary); } .se-stat-delta--down { color: var(--se-danger); } .se-stat-delta--flat { color: var(--se-fg-subtle); } .se-stat-foot { display: flex; align-items: center; gap: 0.4rem; font-family: var(--se-font-mono); font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--se-fg-subtle); padding: 0.6rem 1.25rem; border-top: 1px solid var(--se-border-soft); } /* ---- Spark Lines ---- */ .se-stat-spark { display: flex; align-items: flex-end; gap: 2px; height: 24px; margin-top: -0.25rem; } .se-stat-spark span { flex: 1; background: var(--se-border-form); border-radius: 1px; min-height: 2px; } .se-stat-spark span.is-last { background: currentColor; } /* ========================================================== Variants tonales — markup nuevo: .se-stat-card.se-stat-card--{tone} > .se-stat-head (override: chip + meta) > .se-stat-chip > .se-stat-meta > .se-stat-eyebrow > .se-stat-tag (opcional) > .se-stat-body > .se-stat-foot ========================================================== */ /* Override .se-stat-head cuando hay variant tonal */ .se-stat-card[class*="se-stat-card--"] .se-stat-head { display: flex; align-items: stretch; padding: 0; gap: 0; border-bottom: 1px solid var(--se-border-soft); } .se-stat-chip { width: 40px; display: flex; align-items: center; justify-content: center; color: white; font-size: 15px; flex-shrink: 0; } .se-stat-meta { padding: 0.55rem 1rem; flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .se-stat-tag { font-family: var(--se-font-mono); font-size: 10px; letter-spacing: 0.5px; padding: 2px 6px; border-radius: 2px; white-space: nowrap; } /* ---- Default: header tinted (color al 10% sobre blanco, borde al 25%) ---- */ .se-stat-card--primary { border-color: color-mix(in oklab, var(--se-primary) 25%, var(--se-border-soft)); } .se-stat-card--primary .se-stat-chip { background: var(--se-primary); } .se-stat-card--primary .se-stat-head { background: color-mix(in oklab, var(--se-primary) 10%, var(--se-card-bg)); border-bottom-color: color-mix(in oklab, var(--se-primary) 20%, var(--se-border-soft)); } .se-stat-card--primary .se-stat-tag { color: var(--se-primary); border: 1px solid color-mix(in oklab, var(--se-primary) 25%, var(--se-card-bg)); background: var(--se-card-bg); } .se-stat-card--secondary { border-color: color-mix(in oklab, var(--se-secondary) 25%, var(--se-border-soft)); } .se-stat-card--secondary .se-stat-chip { background: var(--se-secondary); } .se-stat-card--secondary .se-stat-head { background: color-mix(in oklab, var(--se-secondary) 10%, var(--se-card-bg)); border-bottom-color: color-mix(in oklab, var(--se-secondary) 20%, var(--se-border-soft)); } .se-stat-card--secondary .se-stat-tag { color: var(--se-secondary); border: 1px solid color-mix(in oklab, var(--se-secondary) 25%, var(--se-card-bg)); background: var(--se-card-bg); } .se-stat-card--tertiary { border-color: color-mix(in oklab, var(--se-tertiary-dark) 40%, var(--se-border-soft)); } .se-stat-card--tertiary .se-stat-chip { background: var(--se-tertiary-dark); } .se-stat-card--tertiary .se-stat-head { background: color-mix(in oklab, var(--se-tertiary) 28%, var(--se-card-bg)); border-bottom-color: color-mix(in oklab, var(--se-tertiary-dark) 35%, var(--se-border-soft)); } .se-stat-card--tertiary .se-stat-tag { color: var(--se-tertiary-dark); border: 1px solid color-mix(in oklab, var(--se-tertiary-dark) 35%, var(--se-card-bg)); background: var(--se-card-bg); } .se-stat-card--quaternary { border-color: color-mix(in oklab, var(--se-quaternary) 25%, var(--se-border-soft)); } .se-stat-card--quaternary .se-stat-chip { background: var(--se-quaternary); } .se-stat-card--quaternary .se-stat-head { background: color-mix(in oklab, var(--se-quaternary) 10%, var(--se-card-bg)); border-bottom-color: color-mix(in oklab, var(--se-quaternary) 20%, var(--se-border-soft)); } .se-stat-card--quaternary .se-stat-tag { color: var(--se-quaternary); border: 1px solid color-mix(in oklab, var(--se-quaternary) 25%, var(--se-card-bg)); background: var(--se-card-bg); } .se-stat-card--danger { border-color: color-mix(in oklab, var(--se-danger) 25%, var(--se-border-soft)); } .se-stat-card--danger .se-stat-chip { background: var(--se-danger); } .se-stat-card--danger .se-stat-head { background: color-mix(in oklab, var(--se-danger) 10%, var(--se-card-bg)); border-bottom-color: color-mix(in oklab, var(--se-danger) 20%, var(--se-border-soft)); } .se-stat-card--danger .se-stat-tag { color: var(--se-danger); border: 1px solid color-mix(in oklab, var(--se-danger) 25%, var(--se-card-bg)); background: var(--se-card-bg); } /* ---- Modificador .is-neutral: header gris en lugar de tintado ---- */ .se-stat-card[class*="se-stat-card--"].is-neutral { border-color: var(--se-border-soft); } .se-stat-card[class*="se-stat-card--"].is-neutral .se-stat-head { background: var(--se-subtle-bg); border-bottom-color: var(--se-border-soft); } .se-stat-card[class*="se-stat-card--"].is-neutral .se-stat-tag { background: var(--se-card-bg); } /* (chip mantiene su color de tono) */ /* ---- Modificador .is-emphasis: full color, sin header con chip ---- */ .se-stat-card[class*="se-stat-card--"].is-emphasis { border: 0; color: white; } .se-stat-card[class*="se-stat-card--"].is-emphasis .se-stat-head { display: none; } .se-stat-card[class*="se-stat-card--"].is-emphasis .se-stat-body { padding-top: 1.25rem; flex-direction: column; align-items: flex-start; gap: 0.6rem; } .se-stat-card[class*="se-stat-card--"].is-emphasis .se-stat-value { color: white; } .se-stat-card[class*="se-stat-card--"].is-emphasis .se-stat-eyebrow { color: rgba(255,255,255,0.75); } .se-stat-card[class*="se-stat-card--"].is-emphasis .se-stat-foot { color: rgba(255,255,255,0.75); border-top-color: rgba(255,255,255,0.18); } .se-stat-card--primary.is-emphasis { background: var(--se-primary); } .se-stat-card--secondary.is-emphasis { background: var(--se-secondary); } .se-stat-card--tertiary.is-emphasis { background: var(--se-tertiary-dark); } .se-stat-card--quaternary.is-emphasis { background: var(--se-quaternary); } .se-stat-card--danger.is-emphasis { background: var(--se-danger); } /* ========================================================== v2.4 — Variantes semánticas adicionales ---------------------------------------------------------- Cubren los tokens --se-success, --se-warning, --se-info y --se-neutral ya definidos en :root. Útiles para listados donde la card necesita semántica sin recurrir al guinda institucional (Disponibles=verde, Asignados=ámbar, Total=gris, etc.). ========================================================== */ .se-stat-card--success { border-color: color-mix(in oklab, var(--se-success) 25%, var(--se-border-soft)); } .se-stat-card--success .se-stat-chip { background: var(--se-success); } .se-stat-card--success .se-stat-head { background: color-mix(in oklab, var(--se-success) 10%, var(--se-card-bg)); border-bottom-color: color-mix(in oklab, var(--se-success) 20%, var(--se-border-soft)); } .se-stat-card--success .se-stat-tag { color: var(--se-success); border: 1px solid color-mix(in oklab, var(--se-success) 25%, var(--se-card-bg)); background: var(--se-card-bg); } .se-stat-card--success.is-emphasis { background: var(--se-success); } .se-stat-card--warning { border-color: color-mix(in oklab, var(--se-warning) 28%, var(--se-border-soft)); } .se-stat-card--warning .se-stat-chip { background: var(--se-warning); } .se-stat-card--warning .se-stat-head { background: color-mix(in oklab, var(--se-warning) 12%, var(--se-card-bg)); border-bottom-color: color-mix(in oklab, var(--se-warning) 22%, var(--se-border-soft)); } .se-stat-card--warning .se-stat-tag { color: var(--se-warning-text); border: 1px solid color-mix(in oklab, var(--se-warning) 25%, var(--se-card-bg)); background: var(--se-card-bg); } .se-stat-card--warning.is-emphasis { background: var(--se-warning); } .se-stat-card--info { border-color: color-mix(in oklab, var(--se-info) 25%, var(--se-border-soft)); } .se-stat-card--info .se-stat-chip { background: var(--se-info); } .se-stat-card--info .se-stat-head { background: color-mix(in oklab, var(--se-info) 10%, var(--se-card-bg)); border-bottom-color: color-mix(in oklab, var(--se-info) 20%, var(--se-border-soft)); } .se-stat-card--info .se-stat-tag { color: var(--se-info); border: 1px solid color-mix(in oklab, var(--se-info) 25%, var(--se-card-bg)); background: var(--se-card-bg); } .se-stat-card--info.is-emphasis { background: var(--se-info); } .se-stat-card--neutral { border-color: color-mix(in oklab, var(--se-neutral) 25%, var(--se-border-soft)); } .se-stat-card--neutral .se-stat-chip { background: var(--se-neutral); } .se-stat-card--neutral .se-stat-head { background: color-mix(in oklab, var(--se-neutral) 10%, var(--se-card-bg)); border-bottom-color: color-mix(in oklab, var(--se-neutral) 20%, var(--se-border-soft)); } .se-stat-card--neutral .se-stat-tag { color: var(--se-neutral); border: 1px solid color-mix(in oklab, var(--se-neutral) 25%, var(--se-card-bg)); background: var(--se-card-bg); } .se-stat-card--neutral.is-emphasis { background: var(--se-neutral); } /* ========================================================== v2.4 — .se-stat-card-link ---------------------------------------------------------- Wrapper que convierte una stat card en filtro clickable. Aporta hover (elevación + borde guinda), focus ring y estado .is-active (anillo + dot guinda en esquina superior derecha). Markup:
…
 ========================================================== */ .se-stat-card-link { display: block; text-decoration: none; color: inherit; cursor: pointer; position: relative; transition: transform var(--se-transition-fast, 0.15s ease); } .se-stat-card-link:hover { transform: translateY(-1px); } .se-stat-card-link:hover .se-stat-card { border-color: var(--se-primary); box-shadow: 0 6px 18px -8px rgba(20, 17, 14, 0.18); } .se-stat-card-link:focus-visible { outline: none; } .se-stat-card-link:focus-visible .se-stat-card { border-color: var(--se-primary); box-shadow: var(--se-focus-ring, 0 0 0 3px rgba(var(--se-primary-rgb), 0.22)); } .se-stat-card-link.is-active .se-stat-card { border-color: var(--se-primary); box-shadow: 0 0 0 2px color-mix(in oklab, var(--se-primary) 18%, transparent), 0 8px 22px -10px rgba(20, 17, 14, 0.15); } .se-stat-card-link.is-active::before { content: ''; position: absolute; top: 10px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--se-primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--se-primary) 18%, transparent); z-index: 2; } /* ========================================================== SE Chiapas UIKit — Gráficos (marco institucional) Consume SeChiapas.chart (ApexCharts). Tokens-first. ========================================================== */ .se-chart-card { background: var(--se-card-bg); border: 1px solid var(--se-border); border-radius: var(--se-radius-xl); box-shadow: var(--se-shadow-sm); padding: 1rem 1.25rem; } .se-chart-header { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; } .se-chart-eyebrow { display: block; font-size: .65rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--se-fg-subtle); } .se-chart-title { font-size: 1.05rem; font-weight: 700; color: var(--se-fg-strong); line-height: 1.2; margin: 0; } .se-chart-actions { display: flex; gap: .35rem; flex-shrink: 0; } /* Cuerpo: ApexCharts exige una altura definida en el contenedor. */ .se-chart-body { position: relative; min-height: 240px; } .se-chart-card--compact .se-chart-body { min-height: 160px; } .se-chart-foot { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--se-border-light); font-size: .75rem; color: var(--se-fg-muted); } /* Estado vacío / cargando: reutiliza patrones existentes dentro del body. */ .se-chart-body.is-empty, .se-chart-body.is-loading { display: flex; align-items: center; justify-content: center; } /* Contenedor inline para sparkline embebido en se-stat-card. */ .se-spark { display: block; width: 100%; max-width: 160px; height: 36px; } .se-stat-card .se-spark { margin-top: .35rem; } /* ========================================================== SE Chiapas Component: Alerts (Dossier-note treatment) Ported from kit-alert. Institutional style with side rail. ========================================================== */ .se-alert { display: grid; grid-template-columns: 56px 1fr; background: var(--se-card-bg); border: 1px solid var(--se-border-soft); border-left: 0; border-radius: 4px; overflow: hidden; position: relative; } .se-alert::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: var(--se-border-soft); } .se-alert-rail { background: var(--dt-bg-header-footer); border-right: 1px solid var(--se-border-soft); display: flex; align-items: center; justify-content: center; padding: 0.65rem 0.4rem; position: relative; } .se-alert-rail::before { content: ''; position: absolute; top: 6px; left: 6px; width: 6px; height: 6px; border-top: 1px solid var(--se-fg-subtle); border-left: 1px solid var(--se-fg-subtle); } .se-alert-rail::after { content: ''; position: absolute; bottom: 6px; right: 6px; width: 6px; height: 6px; border-bottom: 1px solid var(--se-fg-subtle); border-right: 1px solid var(--se-fg-subtle); } .se-alert-rail-code { font-family: var(--se-font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.6px; text-align: center; line-height: 1.1; color: var(--se-fg-strong); writing-mode: vertical-rl; transform: rotate(180deg); text-transform: uppercase; padding: 0.2rem 0; } .se-alert-content { padding: 0.85rem 1rem; display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; } .se-alert-head { display: flex; align-items: center; gap: 0.55rem; font-size: var(--se-text-md); font-weight: var(--se-weight-bold); color: var(--se-fg-strong); } .se-alert-head .bi { font-size: 16px; } .se-alert-body { font-size: var(--se-text-sm); color: var(--se-fg-muted); line-height: 1.45; } /* ---- Tones ---- */ .se-alert--danger .se-alert-rail { background: var(--se-danger-soft); } .se-alert--danger .se-alert-rail-code { color: var(--se-danger); } .se-alert--danger .se-alert-head .bi { color: var(--se-danger); } .se-alert--warning .se-alert-rail { background: var(--se-warning-soft); } .se-alert--warning .se-alert-rail-code { color: var(--se-fg-strong); } .se-alert--warning .se-alert-head .bi { color: var(--se-warning-text); } .se-alert--info .se-alert-rail { background: var(--se-primary-nav-bg); } .se-alert--info .se-alert-rail-code { color: var(--se-primary-nav); } .se-alert--info .se-alert-head .bi { color: var(--se-primary-nav); } .se-alert--success .se-alert-rail { background: var(--se-primary-nav-bg); } .se-alert--success .se-alert-rail-code { color: var(--se-primary); } .se-alert--success .se-alert-head .bi { color: var(--se-primary); } /* ========================================================== SE Chiapas Component: Institutional Form Layout Ported from kit-form. Numbered sections with 12-col grid. ========================================================== */ .se-form { background: var(--se-card-bg); border: 1px solid var(--se-border-soft); border-radius: var(--se-radius-md); } .se-form-head { padding: 1rem 2rem; border-bottom: 1px solid var(--se-border-soft); background: var(--dt-bg-header-footer); display: flex; align-items: center; gap: 1rem; } .se-form-head-num { font-family: var(--se-font-mono); font-size: var(--se-text-xs); color: var(--se-fg-subtle); letter-spacing: 0.6px; text-transform: uppercase; } .se-form-head-title { font-size: var(--se-text-base); font-weight: var(--se-weight-bold); color: var(--se-fg-strong); margin: 0; } .se-form-section { padding: 1.5rem 2rem; border-bottom: 1px solid var(--se-border-soft); } .se-form-section:last-of-type { border-bottom: 0; } .se-form-section-head { display: grid; grid-template-columns: 36px 1fr; gap: 0.75rem; align-items: baseline; margin-bottom: 1rem; } .se-form-section-num { font-family: var(--se-font-mono); font-size: var(--se-text-xs); font-weight: var(--se-weight-bold); color: var(--se-primary); letter-spacing: 1px; border-top: 2px solid var(--se-primary); padding-top: 0.4rem; text-align: left; } .se-form-section-title { font-size: var(--se-text-md); font-weight: var(--se-weight-bold); color: var(--se-fg-strong); margin: 0; text-transform: uppercase; letter-spacing: 0.5px; border-top: 1px solid var(--se-border-soft); padding-top: 0.4rem; } .se-form-section-desc { grid-column: 2; margin: 0.25rem 0 0; font-size: var(--se-text-sm); color: var(--se-fg-muted); line-height: 1.5; } /* ---- 12-col Grid ---- */ .se-form-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 2rem; row-gap: 1.75rem; } .se-form-grid > .span-1 { grid-column: span 1; } .se-form-grid > .span-2 { grid-column: span 2; } .se-form-grid > .span-3 { grid-column: span 3; } .se-form-grid > .span-4 { grid-column: span 4; } .se-form-grid > .span-5 { grid-column: span 5; } .se-form-grid > .span-6 { grid-column: span 6; } .se-form-grid > .span-7 { grid-column: span 7; } .se-form-grid > .span-8 { grid-column: span 8; } .se-form-grid > .span-9 { grid-column: span 9; } .se-form-grid > .span-10 { grid-column: span 10; } .se-form-grid > .span-11 { grid-column: span 11; } .se-form-grid > .span-12 { grid-column: span 12; } @media (max-width: 720px) { .se-form-grid > [class*='span-'] { grid-column: span 12; } } .se-form-foot { padding: 0.85rem 2rem; background: var(--dt-bg-header-footer); border-top: 1px solid var(--se-border-soft); display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: var(--se-text-sm); color: var(--se-fg-muted); } .se-form-foot-actions { display: flex; gap: 0.5rem; } /* ========================================================== v2.4 — Form head/section refinements ---------------------------------------------------------- Patron "single num + eyebrow" en el form-head para evitar doble numeracion (antes: 01 -> 01.A subsection era ruido). Patron "section-head sin num" usa dashed-divider + hint a la derecha en lugar del numeral 01.A/01.B. ========================================================== */ /* Eyebrow text small encima del title en .se-form-head */ .se-form-head-eyebrow { font-family: var(--se-font-mono); font-size: var(--se-text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--se-fg-muted); font-weight: var(--se-weight-bold); margin: 0 0 0.1rem; line-height: 1; } /* Variante .se-form-section-head sin .se-form-section-num: flex con title + hint a la derecha, dashed-divider abajo */ .se-form-section-head:not(:has(> .se-form-section-num)) { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px dashed var(--se-border-soft); grid-template-columns: none; } .se-form-section-head:not(:has(> .se-form-section-num)) > .se-form-section-title { border-top: 0; padding-top: 0; text-transform: uppercase; letter-spacing: 0.05em; } /* Hint mono a la derecha del section-head */ .se-form-section-hint { font-family: var(--se-font-mono); font-size: var(--se-text-xs); letter-spacing: 0.04em; color: var(--se-fg-muted); white-space: nowrap; } /* Form actions row al pie del form (justify-end + top-border) */ .se-form-actions { display: flex; justify-content: flex-end; gap: 0.5rem; padding-top: 1rem; margin-bottom: 1.5rem; border-top: 1px solid var(--se-border-light); } /* Toggle box pattern — switch + texto dentro de un wrapper limpio (reemplaza inline-styled cards con switches) */ .se-toggle-card { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; background: var(--se-subtle-bg); border: 1px solid var(--se-border-soft); border-radius: var(--se-radius-md); cursor: pointer; transition: border-color var(--se-transition-fast); user-select: none; margin: 0; } .se-toggle-card:hover { border-color: var(--se-primary); } .se-toggle-card .form-check-input { margin: 0; flex-shrink: 0; } .se-toggle-card-label { font-size: var(--se-text-md); font-weight: var(--se-weight-semibold, 600); color: var(--se-fg-strong); } /* ========================================================== SE Chiapas Component: Form Summary (resumen de errores) Resumen funcional moderno (naming se-*). El legacy .kit-form-summary queda intacto para MI-SISTEMA (deprecacion: backlog #9). ========================================================== */ .se-form-summary { border: 1px solid var(--se-danger); border-radius: var(--se-radius-md); background: var(--se-card-bg); margin-bottom: 1.25rem; overflow: hidden; } .se-form-summary:focus { outline: none; } .se-form-summary:focus-visible { outline: 2px solid var(--se-danger); outline-offset: 2px; } .se-form-summary--warning { border-color: var(--se-warning); } .se-form-summary-head { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1rem; border-bottom: 1px solid var(--se-border-soft); } .se-form-summary-icon { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--se-radius-sm); border: 1px solid var(--se-danger); color: var(--se-danger); flex-shrink: 0; } .se-form-summary--warning .se-form-summary-icon { border-color: var(--se-warning); color: var(--se-warning-text); } .se-form-summary-title { flex: 1; margin: 0; font-weight: var(--se-weight-bold); color: var(--se-fg-strong); font-size: var(--se-text-md); } .se-form-summary-count { font-family: var(--se-font-mono); font-weight: var(--se-weight-bold); font-size: var(--se-text-sm); color: var(--se-danger); border: 1px solid currentColor; border-radius: var(--se-radius-sm); padding: 2px 8px; flex-shrink: 0; } .se-form-summary--warning .se-form-summary-count { color: var(--se-warning-text); } .se-form-summary-list { list-style: none; margin: 0; padding: 0; } .se-form-summary-item { border-bottom: 1px solid var(--se-border-soft); } .se-form-summary-item:last-child { border-bottom: 0; } .se-form-summary-link { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.625rem 1rem; text-decoration: none; font-size: var(--se-text-sm); color: var(--se-fg-body); transition: background 0.12s ease; } .se-form-summary-link:hover { background: var(--se-surface-bg); } .se-form-summary-link:focus-visible { outline: 2px solid var(--se-danger); outline-offset: -2px; } .se-form-summary-link-field { font-weight: var(--se-weight-bold); color: var(--se-fg-strong); } .se-form-summary-link-msg { color: var(--se-fg-body); } /* ========================================================== SE Chiapas Component: Timeline Ported from kit-timeline-item. ========================================================== */ .se-timeline-item { display: flex; gap: 0.75rem; align-items: flex-start; padding-bottom: 0.75rem; border-bottom: 1px solid var(--se-border-light); } .se-timeline-item:last-child { border-bottom: 0; padding-bottom: 0; } .se-timeline-body { flex-grow: 1; } .se-timeline-title { margin: 0 0 0.25rem; font-size: var(--se-text-md); font-weight: var(--se-weight-bold); color: var(--se-fg-strong); } .se-timeline-desc { margin: 0; font-size: var(--se-text-md); color: var(--se-fg-muted); line-height: 1.3; } .se-timeline-meta { margin: 0.35rem 0 0; font-size: var(--se-text-xxs); color: var(--se-fg-subtle); display: flex; align-items: center; gap: 0.35rem; } /* ========================================================== SE Chiapas Component: Layout Grid Utilities Ported from kit-grid. ========================================================== */ .se-grid { display: grid; gap: 1.25rem; } .se-grid-6 { grid-template-columns: repeat(6, 1fr); } .se-grid-5 { grid-template-columns: repeat(5, 1fr); } .se-grid-4 { grid-template-columns: repeat(4, 1fr); } .se-grid-3 { grid-template-columns: repeat(3, 1fr); } .se-grid-2 { grid-template-columns: repeat(2, 1fr); } .se-grid-3-1 { grid-template-columns: 2fr 1fr; } @media (max-width: 1280px) { .se-grid-6 { grid-template-columns: repeat(3, 1fr); } .se-grid-5 { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 1100px) { .se-grid-4 { grid-template-columns: repeat(2, 1fr); } .se-grid-3-1 { grid-template-columns: 1fr; } } @media (max-width: 768px) { .se-grid-6 { grid-template-columns: repeat(2, 1fr); } .se-grid-5 { grid-template-columns: repeat(2, 1fr); } .se-grid-3 { grid-template-columns: 1fr; } .se-grid-2 { grid-template-columns: 1fr; } } @media (max-width: 480px) { .se-grid-6 { grid-template-columns: 1fr; } .se-grid-5 { grid-template-columns: 1fr; } } .se-stack { display: flex; flex-direction: column; gap: 1.25rem; } .se-row { display: flex; gap: 0.75rem; align-items: center; } /* ========================================================== SE Chiapas Component: Accordion Institutional numbered accordion with chevron animation. Ported from kit-accordion (kit-extra.css). ========================================================== */ .se-accordion { border: 1px solid var(--se-border); background: var(--se-card-bg); border-radius: var(--se-radius-md); } .se-accordion-item + .se-accordion-item { border-top: 1px solid var(--se-border); } .se-accordion-head { width: 100%; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 1rem; padding: 1rem 1.25rem; background: transparent; border: 0; text-align: left; cursor: pointer; font: inherit; color: var(--se-fg-strong); transition: background 0.12s ease; } .se-accordion-head:hover { background: var(--se-subtle-bg); } .se-accordion-head:focus-visible { outline: 2px solid var(--se-focus, var(--se-primary)); outline-offset: -2px; } .se-accordion-num { font-family: var(--se-font-mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; color: var(--se-fg-meta); background: var(--se-subtle-bg); border: 1px solid var(--se-border); padding: 0.25rem 0.5rem; border-radius: 2px; } .se-accordion-item.is-open .se-accordion-num { color: #fff; background: var(--se-primary); border-color: var(--se-primary); font-weight: 700; } .se-accordion-title-block { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; } .se-accordion-title { font-weight: 600; font-size: 0.95rem; color: var(--se-fg-strong); } .se-accordion-subtitle { font-size: 0.8rem; color: var(--se-fg-meta); } .se-accordion-meta { font-family: var(--se-font-mono); font-size: 0.7rem; letter-spacing: 0.06em; color: var(--se-fg-meta); text-transform: uppercase; } .se-accordion-chev { font-size: 0.85rem; color: var(--se-fg-meta); transition: transform 0.18s ease; } .se-accordion-item.is-open .se-accordion-chev { transform: rotate(180deg); color: var(--se-primary); } .se-accordion-body { padding: 0 1.25rem 1.25rem calc(1.25rem + 2.5rem); font-size: 0.875rem; line-height: 1.55; color: var(--se-fg-muted); border-top: 1px dashed var(--se-border); padding-top: 1rem; margin-left: 1.25rem; margin-right: 1.25rem; } /* ========================================================== SE Chiapas Component: Segmented Control Tab-like toggle for switching views. Ported from kit-segmented (kit-extra.css). ========================================================== */ .se-segmented { display: inline-flex; background: var(--se-subtle-bg); border: 1px solid var(--se-border); border-radius: var(--se-radius-md); padding: 3px; gap: 2px; } .se-segmented-opt { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; font: inherit; font-size: var(--se-text-md); font-weight: var(--se-weight-medium); border: 0; background: transparent; color: var(--se-fg-muted); border-radius: calc(var(--se-radius-md) - 2px); cursor: pointer; transition: all 0.12s ease; } .se-segmented-opt:hover { color: var(--se-fg-strong); } .se-segmented-opt:focus-visible { outline: 2px solid var(--se-focus, var(--se-primary)); outline-offset: 2px; } .se-segmented-opt.is-active { background: var(--se-card-bg); color: var(--se-fg-strong); font-weight: var(--se-weight-semibold); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), inset 0 0 0 1px var(--se-border); } .se-segmented-opt i { font-size: 0.95rem; } .se-segmented--sm .se-segmented-opt { padding: 0.375rem 0.75rem; font-size: var(--se-text-sm); } /* ========================================================== SE Chiapas Component: Modal & Drawer ---------------------------------------------------------- ⚠️ CONVENCIÓN CANÓNICA (v2.5.2+): usar Bootstrap modal con adapter de clases internas .se-modal-* (mismo patrón que drawer/dropdown/tooltip). Bootstrap maneja activacion, backdrop, animacion, accesibilidad. El UIKit solo tematiza. Markup canónico (recomendado): DEPRECATED (mantenido por backwards compat — no usar en nuevas vistas): los selectores standalone `.se-modal-backdrop` y `.se-modal` siguen funcionando pero NO usan la mecanica de Bootstrap (no soportan stacking, focus trap nativo, ni ARIA modal automatico). Migrar a markup canónico arriba. Drawer: ver `_drawer.css` (adapter sobre Bootstrap offcanvas). Lightbox: ver `_image-preview.css` (.se-lightbox adapter). Escritorio Digital (launcher institucional, modal): ver `_app-launcher.css`. ========================================================== */ /* ---- Adapter sobre Bootstrap modal (CANÓNICO v2.5.2+) ---- */ .modal-content { border: 0; border-radius: var(--se-radius-md); background: var(--se-card-bg); font-family: var(--se-font-sans); color: var(--se-fg-body); } .modal-content .se-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--se-border-soft); background: var(--dt-bg-header-footer); flex-shrink: 0; } .modal-content .se-modal-body { padding: 1.25rem; overflow-y: auto; } .modal-content .se-modal-foot { padding: 0.85rem 1.25rem; background: var(--dt-bg-header-footer); border-top: 1px solid var(--se-border-soft); display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-shrink: 0; } /* ---- Modal standalone (DEPRECATED v2.5.2) ---- Mantenido para apps que aun lo usen. Migrar a Bootstrap modal arriba. */ @keyframes se-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes se-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } } @keyframes se-modal-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ---- Modal ---- */ .se-modal-backdrop { position: fixed; inset: 0; background: rgba(20, 30, 30, 0.45); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 1000; animation: se-fade-in 0.15s ease; } .se-modal { background: var(--se-card-bg); border-radius: var(--se-radius-md); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); width: min(560px, calc(100vw - 2rem)); max-height: calc(100vh - 4rem); display: flex; flex-direction: column; animation: se-modal-in 0.18s ease; overflow: hidden; } .se-modal--lg { width: min(820px, calc(100vw - 2rem)); } .se-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--se-border-soft); background: var(--dt-bg-header-footer); } .se-modal-head-l { display: flex; align-items: center; gap: 0.75rem; min-width: 0; } .se-modal-eyebrow { font-family: var(--se-font-mono); font-size: var(--se-text-xs); letter-spacing: 0.5px; color: var(--se-fg-subtle); text-transform: uppercase; } .se-modal-title { font-size: var(--se-text-base); font-weight: var(--se-weight-bold); color: var(--se-fg-strong); margin: 0; line-height: 1.2; } .se-modal-close { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; border-radius: var(--se-radius-sm); color: var(--se-fg-muted); cursor: pointer; } .se-modal-close:hover { background: rgba(0, 0, 0, 0.05); color: var(--se-fg-strong); } .se-modal-body { padding: 1.25rem; overflow-y: auto; flex: 1; } .se-modal-foot { padding: 0.85rem 1.25rem; background: var(--dt-bg-header-footer); border-top: 1px solid var(--se-border-soft); display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .se-modal-foot-meta { font-size: var(--se-text-sm); color: var(--se-fg-muted); font-family: var(--se-font-mono); letter-spacing: 0.4px; } .se-modal-foot-actions { display: flex; gap: 0.5rem; margin-left: auto; } /* ---- Drawer (right-side panel) ---- */ .se-drawer-backdrop { position: fixed; inset: 0; background: rgba(20, 30, 30, 0.35); z-index: 1000; animation: se-fade-in 0.15s ease; } .se-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); background: var(--se-card-bg); box-shadow: -8px 0 30px rgba(0, 0, 0, 0.15); display: flex; flex-direction: column; animation: se-slide-in 0.22s cubic-bezier(.2, .7, .3, 1); z-index: 1001; } .se-drawer--lg { width: min(640px, 100vw); } .se-drawer .se-modal-head { background: var(--se-card-bg); border-bottom: 2px solid var(--se-primary); } .se-drawer .se-modal-body { background: var(--se-surface-bg); } /* ---- Bootstrap Offcanvas tweak (consistent width with se-drawer) ---- */ .offcanvas.se-offcanvas { width: min(360px, 100vw); } .offcanvas.se-offcanvas--lg { width: min(440px, 100vw); } .offcanvas.se-offcanvas--xl { width: min(640px, 100vw); } /* ---- Lightbox (full-screen image / media viewer) ---- */ .se-modal-lightbox-backdrop { position: fixed; inset: 0; background: var(--se-overlay-dark); backdrop-filter: var(--se-backdrop-blur); display: flex; align-items: center; justify-content: center; z-index: 1050; animation: se-fade-in 0.2s ease; } .se-modal-lightbox { background: transparent; width: min(1100px, calc(100vw - 4rem)); max-height: calc(100vh - 4rem); display: flex; flex-direction: column; animation: se-modal-in 0.22s ease; } .se-modal-lightbox-media { flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: var(--se-radius-md); } .se-modal-lightbox-media img, .se-modal-lightbox-media video { max-width: 100%; max-height: calc(100vh - 8rem); object-fit: contain; display: block; } .se-modal-lightbox-caption { color: var(--se-fg-on-dark); text-align: center; padding: 0.85rem 1rem; font-size: var(--se-text-md); } .se-modal-lightbox-close { position: absolute; top: 1.25rem; right: 1.5rem; width: var(--se-icon-square-lg); height: var(--se-icon-square-lg); display: inline-flex; align-items: center; justify-content: center; background: var(--se-overlay-on-dark); color: var(--se-fg-on-dark); border: 0; border-radius: var(--se-radius-circle); cursor: pointer; transition: var(--se-transition-base); } .se-modal-lightbox-close:hover { background: var(--se-overlay-on-dark-strong); } /* ---- Bootstrap-modal-based lightbox (when reusing .modal markup) ---- */ .modal.se-modal-lightbox-bs { backdrop-filter: var(--se-backdrop-blur); background-color: var(--se-overlay-dark); } /* ---- Caption strip (overlay on bottom of image) ---- */ .se-img-caption { position: absolute; bottom: 0; left: 0; right: 0; background: var(--se-overlay-caption); color: var(--se-fg-on-dark); padding: 0.35rem 0.5rem; font-size: var(--se-text-xs); } .se-img-caption-pill { position: absolute; bottom: 0.75rem; right: 0.75rem; background: var(--se-overlay-caption); color: var(--se-fg-on-dark); padding: 0.25rem 0.5rem; border-radius: var(--se-radius-md); font-size: var(--se-text-xs); font-weight: var(--se-weight-semibold); } /* ========================================================== Responsive (v2.4.1) ---------------------------------------------------------- En mobile (<480px) los modales y drawers van full-screen para evitar markups apretados con padding minusculo. ========================================================== */ @media (max-width: 480px) { .se-modal, .se-modal--lg { width: 100vw; max-height: 100vh; border-radius: 0; } .se-modal-head, .se-modal-foot { padding: 0.85rem 1rem; } .se-modal-body { padding: 1rem; } .se-modal-foot { flex-direction: column; align-items: stretch; gap: 0.5rem; } .se-modal-foot-actions { margin-left: 0; flex-direction: column; } .se-modal-foot-actions > * { width: 100%; justify-content: center; } .se-drawer, .se-drawer--lg { width: 100vw; } .se-modal-lightbox { width: 100vw; padding: 0.5rem; } .se-modal-lightbox-close { top: 0.75rem; right: 0.75rem; } } /* ========================================================== SE Chiapas Component: Toasts Institutional notification toasts with status rail. Ported from kit-toast (kit.css). ========================================================== */ .se-toast-tray { position: fixed; bottom: 1.25rem; right: 1.25rem; display: flex; flex-direction: column-reverse; gap: 0.6rem; z-index: 1100; pointer-events: none; } @keyframes se-toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes se-toast-out { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(20px); } } .se-toast { pointer-events: auto; min-width: 320px; max-width: 420px; background: var(--se-card-bg); border: 1px solid var(--se-border-soft); border-radius: 4px; box-shadow: 0 8px 24px rgba(20, 30, 30, 0.10), 0 1px 0 rgba(20, 30, 30, 0.04); display: grid; grid-template-columns: 1fr auto auto; animation: se-toast-in 0.18s cubic-bezier(.2, .7, .3, 1); position: relative; overflow: hidden; } .se-toast::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--se-fg-subtle); } .se-toast--leaving { animation: se-toast-out 0.18s ease forwards; } .se-toast-body { padding: 0.85rem 0.5rem 0.85rem 1rem; min-width: 0; display: grid; gap: 0.15rem; } .se-toast-eyebrow { font-family: var(--se-font-mono); font-size: 10px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--se-fg-subtle); display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.15rem; } .se-toast-code { font-weight: 700; letter-spacing: 0.4px; padding: 1px 5px; border: 1px solid currentColor; border-radius: 2px; font-size: 9px; } .se-toast-title { margin: 0; font-size: var(--se-text-md); font-weight: var(--se-weight-bold); color: var(--se-fg-strong); letter-spacing: -0.005em; } .se-toast-desc { margin: 0; font-size: var(--se-text-sm); color: var(--se-fg-muted); line-height: 1.4; } .se-toast-meta { margin-top: 0.35rem; font-family: var(--se-font-mono); font-size: 10px; color: var(--se-fg-subtle); letter-spacing: 0.5px; text-transform: uppercase; padding-top: 0.4rem; border-top: 1px dashed var(--se-border-soft); } .se-toast-close { background: transparent; border: 0; width: 36px; color: var(--se-fg-subtle); cursor: pointer; align-self: stretch; border-left: 1px solid var(--se-border-soft); } .se-toast-close:hover { color: var(--se-fg-strong); background: rgba(0, 0, 0, 0.03); } /* ---- Status Tones ---- */ .se-toast--success::before { background: var(--se-primary); } .se-toast--success .se-toast-code { color: var(--se-primary); } .se-toast--danger::before { background: var(--se-danger); } .se-toast--danger .se-toast-code { color: var(--se-danger); } .se-toast--warning::before { background: var(--se-warning); } .se-toast--warning .se-toast-code { color: var(--se-warning-text); } .se-toast--info::before { background: var(--se-primary-nav); } .se-toast--info .se-toast-code { color: var(--se-primary-nav); } /* ---- Action button (ej. Deshacer) ---- */ .se-toast-action { align-self: center; margin: 0 0.25rem; font-family: var(--se-font-sans); font-weight: var(--se-weight-bold); font-size: var(--se-text-sm); letter-spacing: 0.02em; text-transform: uppercase; background: var(--se-card-bg); color: var(--se-primary); border: 1px solid var(--se-primary); border-radius: var(--se-radius-md); padding: 0.3rem 0.7rem; cursor: pointer; white-space: nowrap; transition: all var(--se-transition-base); } .se-toast-action:hover { background: var(--se-primary); color: white; } .se-toast-action:focus-visible { outline: 2px solid var(--se-primary); outline-offset: 2px; } /* ---- Countdown bar ---- Barra de un solo disparo; la duracion la fija snackbar.js inline con !important (gana sobre el @media prefers-reduced-motion, asi la barra conserva su duracion real). transform-origin:left -> se encoge hacia la izq. */ @keyframes se-toast-countdown { from { transform: scaleX(1); } to { transform: scaleX(0); } } .se-toast-countdown { position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: var(--se-primary); transform-origin: left; animation: se-toast-countdown linear forwards; } .se-toast--paused .se-toast-countdown { animation-play-state: paused; } /* ========================================================== SE Chiapas Component: Progress Bar & Ring Ported from kit-progress / kit-ring (kit-extra.css). ========================================================== */ /* ---- Progress Bar ---- */ .se-progress { width: 100%; } .se-progress-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.5rem; } .se-progress-label { font-size: 0.8rem; color: var(--se-fg-muted); font-weight: var(--se-weight-medium); } .se-progress-value { font-family: var(--se-font-mono); font-size: 0.9rem; font-weight: var(--se-weight-semibold); color: var(--se-fg-strong); } .se-progress-pct { font-size: 0.7rem; color: var(--se-fg-meta); margin-left: 0.15rem; } .se-progress-track { position: relative; height: 8px; background: var(--se-subtle-bg); border: 1px solid var(--se-border); border-radius: 1px; overflow: hidden; } .se-progress-fill { height: 100%; background: var(--se-primary); transition: width 0.4s ease; position: relative; } .se-progress-fill::after { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(255, 255, 255, 0.1) 6px 7px); } .se-progress--sm .se-progress-track { height: 5px; } .se-progress--lg .se-progress-track { height: 12px; } .se-progress--success .se-progress-fill { background: var(--se-success); } .se-progress--warning .se-progress-fill { background: var(--se-warning); } .se-progress--danger .se-progress-fill { background: var(--se-danger); } @keyframes se-progress-ind { 0% { transform: translateX(-100%); } 100% { transform: translateX(400%); } } .se-progress-fill--indeterminate { width: 33% !important; animation: se-progress-ind 1.4s ease-in-out infinite; } /* ---- Ring (circular progress) ---- */ .se-ring { position: relative; display: inline-block; } .se-ring-track { stroke: var(--se-border); } .se-ring-fill { stroke: var(--se-primary); transition: stroke-dashoffset 0.5s ease; stroke-linecap: butt; } .se-ring--success .se-ring-fill { stroke: var(--se-success); } .se-ring--warning .se-ring-fill { stroke: var(--se-warning); } .se-ring--danger .se-ring-fill { stroke: var(--se-danger); } .se-ring-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem; } .se-ring-value { font-family: var(--se-font-mono); font-size: 1.15rem; font-weight: 700; color: var(--se-fg-strong); line-height: 1; } .se-ring-sub { font-family: var(--se-font-mono); font-size: 0.6rem; letter-spacing: 0.08em; color: var(--se-fg-meta); text-transform: uppercase; } /* ========================================================== SE Chiapas Component: Progress Top (top-loader global) Singleton fijo de ~3px arriba del viewport. NProgress-like. ========================================================== */ .se-progress-top { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 9999; pointer-events: none; background: transparent; } .se-progress-top-bar { height: 100%; width: 0%; background: var(--se-primary); transition: width 0.2s ease-out, opacity 0.2s ease; box-shadow: 0 0 8px rgba(var(--se-primary-rgb), 0.4); } .se-progress-top--leaving .se-progress-top-bar { opacity: 0; } .se-progress-top--fail .se-progress-top-bar { background: var(--se-danger); box-shadow: 0 0 8px rgba(174, 25, 34, 0.4); } .se-progress-top-cancel { position: absolute; right: 0.6rem; top: 0.4rem; pointer-events: auto; width: 20px; height: 20px; border-radius: 50%; background: var(--se-danger); color: #fff; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; } .se-progress-top-cancel:hover { opacity: 0.85; } .se-progress-top-cancel:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* ========================================================== SE Chiapas Component: History Timeline (Expediente) Institutional timeline with time column, marker, and dashed connector line. Ported from kit-history (kit.css). ========================================================== */ .se-history { display: flex; flex-direction: column; position: relative; } .se-history-item { display: grid; grid-template-columns: 84px 28px 1fr; gap: 0.85rem; padding: 0.85rem 0; position: relative; } .se-history-item:not(:last-child)::after { content: ''; position: absolute; left: calc(84px + 0.85rem + 14px); top: 32px; bottom: -8px; width: 1px; transform: translateX(-50%); background: repeating-linear-gradient(to bottom, var(--se-border-form) 0, var(--se-border-form) 3px, transparent 3px, transparent 6px); } .se-history-time { font-family: var(--se-font-mono); font-size: var(--se-text-xs); color: var(--se-fg-subtle); letter-spacing: 0.3px; padding-top: 0.1rem; text-align: right; line-height: 1.35; } .se-history-time strong { display: block; color: var(--se-fg-strong); font-weight: var(--se-weight-bold); } .se-history-marker { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--se-border-form); border-radius: var(--se-radius-sm); background: var(--se-card-bg); font-size: 0.8rem; color: var(--se-fg-muted); z-index: 1; } .se-history-item--current .se-history-marker { border-color: var(--se-primary); background: var(--se-primary); color: white; box-shadow: 0 0 0 3px rgba(var(--se-primary-rgb), 0.15); } .se-history-item--danger .se-history-marker { border-color: var(--se-danger); color: var(--se-danger); } .se-history-item--success .se-history-marker { border-color: var(--se-primary); color: var(--se-primary); } .se-history-body { min-width: 0; padding-top: 0.1rem; } .se-history-event { font-size: var(--se-text-md); color: var(--se-fg-body); margin: 0 0 0.15rem; line-height: 1.35; } .se-history-event strong { font-weight: var(--se-weight-bold); color: var(--se-fg-strong); } .se-history-actor { font-size: var(--se-text-xs); color: var(--se-fg-muted); display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-family: var(--se-font-mono); letter-spacing: 0.3px; } .se-history-payload { margin-top: 0.5rem; padding: 0.55rem 0.7rem; background: var(--dt-bg-header-footer); border-left: 2px solid var(--se-border-form); font-family: var(--se-font-mono); font-size: var(--se-text-xs); color: var(--se-fg-strong); border-radius: 0 var(--se-radius-sm) var(--se-radius-sm) 0; line-height: 1.5; } /* ========================================================== SE Chiapas Component: Filter Chips & Toolbar Ported from kit-filterbar / kit-filter-chip / kit-toolbar. ========================================================== */ /* ---- Toolbar ---- */ .se-toolbar { display: flex; gap: 1.5rem; margin-bottom: 1rem; align-items: center; flex-wrap: wrap; } .se-toolbar > .se-search-wrap { flex: 1 1 320px; min-width: 280px; max-width: 480px; } .se-toolbar-actions { display: flex; gap: 0.5rem; align-items: center; flex: 0 0 auto; padding-left: 1.5rem; border-left: 1px solid var(--se-border-soft); } @media (max-width: 720px) { .se-toolbar-actions { padding-left: 0; border-left: 0; width: 100%; } } /* ---- Search (icon-positioned input) ---- */ .se-search-wrap { position: relative; flex-grow: 1; } .se-search-wrap i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--se-fg-subtle); } .se-search-wrap .se-input { padding-left: 38px; height: var(--se-search-bar-height); background: var(--se-surface-bg); border-color: var(--se-border-soft); } /* ---- Filter Bar ---- */ .se-filterbar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.65rem; padding: 0.6rem 0.75rem; background: var(--se-card-bg); border: 1px solid var(--se-border-soft); border-radius: var(--se-radius-md); margin-bottom: 1rem; font-size: var(--se-text-sm); } .se-filterbar-label { font-family: var(--se-font-mono); font-size: var(--se-text-xs); color: var(--se-fg-subtle); letter-spacing: 0.5px; text-transform: uppercase; padding-right: 0.4rem; border-right: 1px solid var(--se-border-light); margin-right: 0.25rem; } .se-filter-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.4rem 0.2rem 0.65rem; background: var(--dt-bg-header-footer); border: 1px solid var(--se-border-form); border-radius: var(--se-radius-sm); font-size: var(--se-text-sm); color: var(--se-fg-body); line-height: 1.2; transition: all 0.12s ease; } .se-filter-chip strong { font-weight: var(--se-weight-bold); color: var(--se-fg-strong); } .se-filter-chip:hover { border-color: var(--se-fg-subtle); } .se-filter-chip-x { background: transparent; border: 0; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border-radius: 2px; color: var(--se-fg-muted); cursor: pointer; font-size: 11px; } .se-filter-chip-x:hover { background: rgba(0, 0, 0, 0.06); color: var(--se-danger); } .se-filter-clear { background: transparent; border: 0; font-size: var(--se-text-sm); color: var(--se-fg-muted); text-decoration: underline; cursor: pointer; padding: 0.2rem 0.4rem; margin-left: auto; } .se-filter-clear:hover { color: var(--se-danger); } /* ========================================================== Filter Drawer groups v2.4 — secciones dentro del .se-drawer para combinar multiples dimensiones de filtrado. ========================================================== */ .se-filter-group { padding-bottom: 1.15rem; margin-bottom: 1.15rem; border-bottom: 1px solid var(--se-border-soft); } .se-filter-group:last-of-type { border-bottom: 0; margin-bottom: 0; } .se-filter-group-title { font-size: var(--se-text-sm); font-weight: var(--se-weight-bold); color: var(--se-fg-strong); margin: 0 0 0.65rem; display: flex; align-items: center; gap: 0.4rem; } .se-filter-group-title i { color: var(--se-fg-meta); font-size: 0.95em; } /* Opciones tipo radio/checkbox apiladas */ .se-filter-options { display: flex; flex-direction: column; gap: 0.35rem; } /* Pills seleccionables (para estados, tipos) */ .se-filter-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; } .se-filter-pill { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.7rem; border: 1px solid var(--se-border-form); border-radius: var(--se-radius-pill, 999px); background: var(--se-card-bg); font-size: var(--se-text-sm); color: var(--se-fg-body); cursor: pointer; transition: all 0.12s ease; user-select: none; } .se-filter-pill:hover { border-color: var(--se-primary); color: var(--se-primary); } .se-filter-pill.is-active { background: var(--se-primary); border-color: var(--se-primary); color: var(--se-on-primary, #fff); } .se-filter-pill input { position: absolute; opacity: 0; width: 0; height: 0; } /* Badge contador de filtros activos (sobre el boton "Filtros") */ .se-filter-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 0.4rem; background: var(--se-primary); color: var(--se-on-primary, #fff); border-radius: var(--se-radius-pill, 999px); font-size: 10.5px; font-weight: var(--se-weight-bold); line-height: 1; } /* ========================================================== SE Chiapas Component: Callout (Inline Alert) Ported from kit-callout (kit-extra.css). ========================================================== */ .se-callout { display: grid; grid-template-columns: auto 1fr; gap: 0.875rem; padding: 0.875rem 1rem; border: 1px solid var(--se-border); border-left-width: 3px; background: var(--se-subtle-bg); border-radius: 2px; font-size: 0.875rem; } .se-callout-mark { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: var(--se-card-bg); border: 1px solid var(--se-border); border-radius: 50%; font-size: 0.95rem; color: var(--se-fg-muted); } .se-callout-body { min-width: 0; } .se-callout-title { font-weight: var(--se-weight-semibold); font-size: 0.9rem; color: var(--se-fg-strong); margin-bottom: 0.2rem; } .se-callout-text { color: var(--se-fg-muted); line-height: 1.5; } .se-callout-text strong { color: var(--se-fg-strong); } .se-callout--info { border-left-color: var(--se-primary-nav); } .se-callout--info .se-callout-mark { color: var(--se-primary-nav); border-color: var(--se-primary-nav); } .se-callout--success { border-left-color: var(--se-success); } .se-callout--success .se-callout-mark { color: var(--se-success); border-color: var(--se-success); } .se-callout--warning { border-left-color: var(--se-warning-text); background: color-mix(in oklch, var(--se-warning) 6%, var(--se-subtle-bg)); } .se-callout--warning .se-callout-mark { color: var(--se-warning-text); border-color: var(--se-warning); } .se-callout--danger { border-left-color: var(--se-danger); background: color-mix(in oklch, var(--se-danger) 5%, var(--se-subtle-bg)); } .se-callout--danger .se-callout-mark { color: var(--se-danger); border-color: var(--se-danger); } /* ========================================================== SE Chiapas Component: Spinner Ported from kit-spinner (kit-extra.css). ========================================================== */ .se-spinner { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--se-primary); } .se-spinner svg { width: 1.25em; height: 1.25em; animation: se-spin 0.9s linear infinite; } .se-spinner svg circle { stroke: currentColor; stroke-dasharray: 90 60; stroke-linecap: butt; opacity: 0.85; } .se-spinner-label { font-family: var(--se-font-mono); font-size: var(--se-text-sm); letter-spacing: 0.08em; color: var(--se-fg-muted); text-transform: uppercase; } .se-spinner--sm { font-size: 0.85rem; } .se-spinner--md { font-size: 1rem; } .se-spinner--lg { font-size: 1.5rem; } .se-spinner--success { color: var(--se-success); } .se-spinner--warning { color: var(--se-warning-text); } .se-spinner--danger { color: var(--se-danger); } @keyframes se-spin { to { transform: rotate(360deg); } } /* ========================================================== SE Chiapas Component: Banner (Global notification bar) Ported from kit-banner (kit-extra.css). ========================================================== */ .se-banner { display: grid; grid-template-columns: auto auto 1fr auto auto; gap: 1rem; align-items: center; padding: 0.875rem 1.25rem; border-bottom: 2px solid var(--se-border); position: relative; background: var(--se-subtle-bg); font-size: 0.875rem; } .se-banner-stripe { display: inline-flex; gap: 2px; align-self: stretch; align-items: center; } .se-banner-stripe span { width: 3px; height: 14px; background: var(--se-fg-meta); opacity: 0.35; } .se-banner-stripe span:nth-child(odd) { height: 8px; } .se-banner-icon { font-size: 1.1rem; color: var(--se-fg-muted); } .se-banner-body { display: flex; flex-direction: column; gap: 0.1rem; } .se-banner-title { font-family: var(--se-font-mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--se-fg-meta); } .se-banner-text { color: var(--se-fg-strong); } .se-banner-close { width: 24px; height: 24px; border: 1px solid var(--se-border); background: var(--se-card-bg); color: var(--se-fg-meta); cursor: pointer; border-radius: 2px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem; } .se-banner-close:hover { color: var(--se-fg-strong); border-color: var(--se-primary); } /* ---- Tones ---- Cada tone tiene 2 reglas: 1. Fallback con var(--se-X-soft) (token solido — soporta TODOS los browsers) 2. Override con color-mix(in oklch...) — solo aplica si el browser lo soporta Asi iOS Safari <16.4 y otros browsers viejos muestran el fallback institucional. */ .se-banner--info { background: var(--se-primary-subtle); border-bottom-color: var(--se-primary-nav); } .se-banner--info .se-banner-icon, .se-banner--info .se-banner-title { color: var(--se-primary-nav); } .se-banner--success { background: var(--se-success-soft); border-bottom-color: var(--se-success); } .se-banner--success .se-banner-icon, .se-banner--success .se-banner-title { color: var(--se-success); } .se-banner--warning { background: var(--se-warning-soft); border-bottom-color: var(--se-warning-text); } .se-banner--warning .se-banner-icon, .se-banner--warning .se-banner-title { color: var(--se-warning-text); } .se-banner--danger { background: var(--se-danger-soft); border-bottom-color: var(--se-danger); } .se-banner--danger .se-banner-icon, .se-banner--danger .se-banner-title { color: var(--se-danger); } .se-banner--brand { background: var(--se-primary); color: #fff; border-bottom-color: var(--se-primary); } .se-banner--brand .se-banner-icon, .se-banner--brand .se-banner-title, .se-banner--brand .se-banner-text { color: #fff; } /* Progressive enhancement: si el browser soporta color-mix() con oklch, se aplica el mix mas fino (8-12% del tone sobre subtle-bg). */ @supports (background: color-mix(in oklch, red, blue)) { .se-banner--info { background: color-mix(in oklch, var(--se-primary-nav) 8%, var(--se-subtle-bg)); } .se-banner--success { background: color-mix(in oklch, var(--se-success) 8%, var(--se-subtle-bg)); } .se-banner--warning { background: color-mix(in oklch, var(--se-warning) 12%, var(--se-subtle-bg)); } .se-banner--danger { background: color-mix(in oklch, var(--se-danger) 8%, var(--se-subtle-bg)); } } /* === SE Chiapas UIKit — Kit Menu (LEGACY) === Componente heredado del v1 kit. Migrar eventualmente a `.se-menu` moderno. Selectores `.kit-*` consumidos por MI-SISTEMA — NO renombrar. ============================================== */ /* ========================================================= 1. KitMenu / Dropdown ========================================================= */ .kit-menu { position: relative; display: inline-block; } .kit-menu__trigger { display: inline-block; } .kit-menu__panel { position: absolute; z-index: 50; min-width: 220px; max-width: 320px; background: var(--se-card-bg); border: 1px solid var(--se-border-soft); border-radius: var(--se-radius-md); box-shadow: var(--se-shadow-lg); padding: 0.375rem; animation: kitMenuIn 0.12s ease-out; } .kit-menu__panel--bottom-end { top: calc(100% + 4px); right: 0; } .kit-menu__panel--bottom-start { top: calc(100% + 4px); left: 0; } .kit-menu__panel--top-end { bottom: calc(100% + 4px); right: 0; } .kit-menu__panel--sm { min-width: 180px; } .kit-menu__panel--lg { min-width: 280px; } @keyframes kitMenuIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .kit-menu__divider { height: 1px; background: var(--se-border-soft); margin: 0.375rem -0.375rem; } .kit-menu__item { display: flex; align-items: center; gap: 0.625rem; width: 100%; padding: 0.5rem 0.625rem; background: transparent; border: 0; color: var(--se-fg-body); font-size: var(--se-text-sm); font-weight: var(--se-weight-medium); text-align: left; border-radius: var(--se-radius-sm); cursor: pointer; transition: background 0.12s ease; } .kit-menu__item:hover, .kit-menu__item.is-hl { background: var(--se-surface-bg); color: var(--se-fg-strong); } .kit-menu__item:disabled, .kit-menu__item.is-disabled { opacity: 0.4; cursor: not-allowed; } .kit-menu__item i.bi { color: var(--se-fg-muted); font-size: 1rem; flex-shrink: 0; } .kit-menu__item:hover i.bi { color: var(--se-primary); } .kit-menu__lbl { flex: 1; } .kit-menu__desc { display: block; font-size: var(--se-text-xs); color: var(--se-fg-muted); font-weight: var(--se-weight-regular); margin-top: 2px; } .kit-menu__kbd { font-family: var(--se-font-mono); font-size: var(--se-text-xxs); color: var(--se-fg-muted); background: var(--se-surface-bg); padding: 2px 6px; border-radius: 3px; border: 1px solid var(--se-border-soft); } .kit-menu__item--danger { color: var(--se-danger); } .kit-menu__item--danger:hover, .kit-menu__item--danger.is-hl { background: var(--se-danger-tint); color: var(--se-danger); } .kit-menu__item--danger:hover i.bi, .kit-menu__item--danger.is-hl i.bi { color: var(--se-danger); } .kit-menu__item--warning { color: var(--se-warning-strong, var(--se-warning)); } .kit-menu__item--warning:hover { background: var(--se-warning-tint); } .kit-menu__item--success { color: var(--se-success); } .kit-menu__item--success:hover { background: var(--se-success-tint); } /* === SE Chiapas UIKit — Kit Split Button (LEGACY) === Botón con menú heredado del v1 kit. Migrar eventualmente a `.se-split-btn` moderno. Selectores `.kit-*` consumidos por MI-SISTEMA — NO renombrar. Nota: la animación `kitMenuIn` se define en `_kit-menu.css`. ====================================================== */ /* ========================================================= IMPORTANT 1. KitSplitButton ========================================================= */ .kit-split-btn { position: relative; display: inline-flex; } .kit-split-btn__primary { border-radius: var(--se-radius-sm) 0 0 var(--se-radius-sm) !important; border-right: 0 !important; } .kit-split-btn__chev { border-radius: 0 var(--se-radius-sm) var(--se-radius-sm) 0 !important; padding-left: 0.5rem !important; padding-right: 0.5rem !important; border-left: 1px solid rgba(255,255,255,0.2) !important; } .kit-split-btn--secondary .kit-split-btn__chev, .kit-split-btn--ghost .kit-split-btn__chev { border-left-color: var(--se-border-soft) !important; } .kit-split-btn__panel { position: absolute; z-index: 50; top: calc(100% + 4px); right: 0; min-width: 240px; background: var(--se-card-bg); border: 1px solid var(--se-border-soft); border-radius: var(--se-radius-md); box-shadow: var(--se-shadow-lg); padding: 0.375rem; animation: kitMenuIn 0.12s ease-out; } /* === SE Chiapas UIKit — Kit Money (LEGACY) === Input monetario heredado del v1 kit. Migrar eventualmente a `.se-money` moderno. Selectores `.kit-*` consumidos por MI-SISTEMA — NO renombrar. ================================================ */ /* ========================================================= 5. KitMoney ========================================================= */ .kit-money { display: flex; align-items: stretch; border: 1px solid var(--se-border-input); border-radius: var(--se-radius-sm); background: var(--se-card-bg); overflow: hidden; transition: border-color 0.12s ease, box-shadow 0.12s ease; } .kit-money:focus-within { border-color: var(--se-primary); box-shadow: 0 0 0 3px var(--se-primary-tint); } .kit-money.is-disabled { opacity: 0.6; background: var(--se-surface-bg); } .kit-money__currency { display: flex; align-items: center; padding: 0 0.75rem; background: var(--se-surface-bg); border-right: 1px solid var(--se-border-soft); font-family: var(--se-font-mono); font-weight: var(--se-weight-bold); font-size: var(--se-text-md); color: var(--se-fg-strong); } .kit-money__input { flex: 1; min-width: 0; padding: 0.5rem 0.75rem; border: 0; outline: 0; background: transparent; font-family: var(--se-font-mono); font-weight: var(--se-weight-medium); font-size: var(--se-text-md); color: var(--se-fg-strong); text-align: right; } .kit-money__suffix { display: flex; align-items: center; padding: 0 0.625rem; background: var(--se-surface-bg); border-left: 1px solid var(--se-border-soft); font-family: var(--se-font-mono); font-size: var(--se-text-xs); font-weight: var(--se-weight-bold); color: var(--se-fg-muted); letter-spacing: 0.04em; } /* === SE Chiapas UIKit — Kit Slider / Range (LEGACY) === Slider heredado del v1 kit. Migrar eventualmente a `.se-slider` moderno. Selectores `.kit-*` consumidos por MI-SISTEMA — NO renombrar. ======================================================== */ /* ========================================================= IMPORTANT 8. KitSlider / KitRange ========================================================= */ .kit-slider { display: flex; flex-direction: column; gap: 0.5rem; } .kit-slider__head { display: flex; justify-content: space-between; align-items: baseline; } .kit-slider__label { font-size: var(--se-text-xs); font-weight: var(--se-weight-bold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--se-fg-muted); } .kit-slider__val { font-family: var(--se-font-mono); font-size: var(--se-text-md); font-weight: var(--se-weight-bold); color: var(--se-primary); } .kit-slider__track-wrap { position: relative; height: 24px; display: flex; align-items: center; } .kit-slider__track { position: absolute; left: 0; right: 0; height: 4px; background: var(--se-surface-bg); border: 1px solid var(--se-border-soft); border-radius: 999px; overflow: hidden; } .kit-slider__fill { position: absolute; top: 0; bottom: 0; background: var(--se-primary); } .kit-slider__input { -webkit-appearance: none; appearance: none; width: 100%; background: transparent; position: absolute; left: 0; right: 0; height: 24px; pointer-events: none; } .kit-slider__input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--se-primary); border: 3px solid var(--se-card-bg); box-shadow: 0 0 0 1px var(--se-primary), var(--se-shadow-sm); cursor: grab; pointer-events: auto; } .kit-slider__input::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--se-primary); border: 3px solid var(--se-card-bg); box-shadow: 0 0 0 1px var(--se-primary); cursor: grab; pointer-events: auto; } .kit-slider--range .kit-slider__input { pointer-events: none; } .kit-slider--range .kit-slider__input::-webkit-slider-thumb { pointer-events: auto; } .kit-slider--range .kit-slider__input::-moz-range-thumb { pointer-events: auto; } .kit-slider__marks { position: absolute; left: 0; right: 0; top: 22px; height: 18px; } .kit-slider__mark { position: absolute; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; } .kit-slider__mark i { width: 1px; height: 4px; background: var(--se-fg-muted); } .kit-slider__mark em { font-style: normal; font-family: var(--se-font-mono); font-size: var(--se-text-xxs); color: var(--se-fg-muted); } /* === SE Chiapas UIKit — Kit Color & Icon Picker (LEGACY) === Pickers heredados del v1 kit. Migrar eventualmente a `.se-colorpicker` y `.se-iconpicker` modernos. Selectores `.kit-*` consumidos por MI-SISTEMA — NO renombrar. Nota: la animación `kitMenuIn` se define en `_kit-menu.css`. ============================================================ */ /* ========================================================= IMPORTANT 9. KitColorPicker / KitIconPicker ========================================================= */ .kit-colorpicker, .kit-iconpicker { position: relative; display: inline-block; } .kit-colorpicker__trigger, .kit-iconpicker__trigger { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; background: var(--se-card-bg); border: 1px solid var(--se-border-input); border-radius: var(--se-radius-sm); font-size: var(--se-text-sm); cursor: pointer; min-width: 180px; } .kit-colorpicker__trigger:hover, .kit-iconpicker__trigger:hover { border-color: var(--se-primary); } .kit-colorpicker__swatch { width: 20px; height: 20px; border-radius: var(--se-radius-sm); border: 1px solid var(--se-border-soft); flex-shrink: 0; } .kit-colorpicker__hex { font-family: var(--se-font-mono); font-size: var(--se-text-xs); font-weight: var(--se-weight-bold); color: var(--se-fg-strong); flex: 1; } .kit-colorpicker__trigger > i.bi:last-child, .kit-iconpicker__trigger > i.bi:last-child { color: var(--se-fg-muted); } .kit-colorpicker__pop, .kit-iconpicker__pop { position: absolute; z-index: 50; top: calc(100% + 4px); left: 0; width: 280px; background: var(--se-card-bg); border: 1px solid var(--se-border-soft); border-radius: var(--se-radius-md); box-shadow: var(--se-shadow-lg); padding: 0.75rem; animation: kitMenuIn 0.12s ease-out; } .kit-colorpicker__label, .kit-iconpicker__label { font-size: var(--se-text-xxs); font-weight: var(--se-weight-bold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--se-fg-muted); margin-bottom: 0.5rem; } .kit-colorpicker__grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; } .kit-colorpicker__cell { width: 100%; aspect-ratio: 1; border: 1px solid var(--se-border-soft); border-radius: var(--se-radius-sm); cursor: pointer; display: flex; align-items: center; justify-content: center; color: white; font-size: 0.85rem; transition: transform 0.12s ease; } .kit-colorpicker__cell:hover { transform: scale(1.1); border-color: var(--se-fg-strong); } .kit-colorpicker__cell.is-selected { outline: 2px solid var(--se-fg-strong); outline-offset: 2px; } .kit-colorpicker__custom { display: flex; align-items: center; gap: 0.375rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--se-border-soft); } .kit-colorpicker__custom span { font-size: var(--se-text-xs); font-weight: var(--se-weight-bold); color: var(--se-fg-muted); } .kit-colorpicker__custom input[type="color"] { width: 36px; height: 32px; border: 1px solid var(--se-border-input); border-radius: var(--se-radius-sm); background: transparent; cursor: pointer; padding: 2px; } .kit-colorpicker__custom input[type="text"] { flex: 1; min-width: 0; } .kit-iconpicker__preview { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: var(--se-surface-bg); border: 1px solid var(--se-border-soft); border-radius: var(--se-radius-sm); color: var(--se-fg-strong); font-size: 1rem; } .kit-iconpicker__empty { color: var(--se-fg-muted); font-family: var(--se-font-mono); } .kit-iconpicker__name { font-family: var(--se-font-mono); font-size: var(--se-text-xs); color: var(--se-fg-body); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kit-iconpicker__search { display: flex; align-items: center; gap: 0.375rem; margin-bottom: 0.5rem; } .kit-iconpicker__search > i.bi { color: var(--se-fg-muted); } .kit-iconpicker__search > input { flex: 1; } .kit-iconpicker__grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; max-height: 220px; overflow-y: auto; } .kit-iconpicker__cell { width: 100%; aspect-ratio: 1; background: transparent; border: 1px solid transparent; border-radius: var(--se-radius-sm); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1rem; color: var(--se-fg-body); transition: all 0.1s ease; } .kit-iconpicker__cell:hover { background: var(--se-surface-bg); border-color: var(--se-border-soft); color: var(--se-primary); } .kit-iconpicker__cell.is-selected { background: var(--se-primary-tint); border-color: var(--se-primary); color: var(--se-primary); } .kit-iconpicker__empty-grid { grid-column: 1 / -1; text-align: center; padding: 1rem; font-size: var(--se-text-xs); color: var(--se-fg-muted); } /* === SE Chiapas UIKit — Kit DatePicker (LEGACY) === Calendario heredado del v1 kit. Migrar eventualmente a `.se-datepicker` moderno. Selectores `.kit-*` consumidos por MI-SISTEMA — NO renombrar. Nota: la animación `kitMenuIn` se define en `_kit-menu.css`. ==================================================== */ /* ========================================================= 4. KitDatePicker ========================================================= */ .kit-datepicker { position: relative; } .kit-datepicker__trigger { display: flex; align-items: center; gap: 0.625rem; width: 100%; text-align: left; background: var(--se-card-bg); cursor: pointer; } .kit-datepicker__trigger.is-empty { color: var(--se-fg-muted); } .kit-datepicker__trigger i.bi { color: var(--se-fg-muted); } .kit-datepicker__pop { position: absolute; z-index: 50; top: calc(100% + 4px); left: 0; width: 320px; background: var(--se-card-bg); border: 1px solid var(--se-border-soft); border-radius: var(--se-radius-md); box-shadow: var(--se-shadow-lg); padding: 0.75rem; animation: kitMenuIn 0.12s ease-out; } .kit-datepicker__head { display: flex; align-items: center; gap: 0.25rem; padding-bottom: 0.625rem; border-bottom: 1px solid var(--se-border-soft); margin-bottom: 0.5rem; } .kit-datepicker__nav { width: 28px; height: 28px; background: transparent; border: 0; border-radius: var(--se-radius-sm); color: var(--se-fg-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.12s ease; } .kit-datepicker__nav:hover { background: var(--se-surface-bg); color: var(--se-primary); } .kit-datepicker__title { flex: 1; text-align: center; font-weight: var(--se-weight-bold); font-size: var(--se-text-md); color: var(--se-fg-strong); text-transform: capitalize; } .kit-datepicker__title span { color: var(--se-fg-muted); font-weight: var(--se-weight-medium); margin-left: 0.25rem; } .kit-datepicker__rangebar { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.5rem; background: var(--se-primary-tint); border-radius: var(--se-radius-sm); margin-bottom: 0.5rem; } .kit-datepicker__pill { font-family: var(--se-font-mono); font-size: var(--se-text-xxs); font-weight: var(--se-weight-bold); color: var(--se-primary); letter-spacing: 0.06em; } .kit-datepicker__rangebar strong { font-size: var(--se-text-sm); color: var(--se-fg-strong); } .kit-datepicker__dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; font-size: var(--se-text-xxs); font-weight: var(--se-weight-bold); color: var(--se-fg-muted); text-align: center; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.25rem 0; } .kit-datepicker__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .kit-datepicker__cell { height: 34px; background: transparent; border: 0; font-family: var(--se-font-mono); font-size: var(--se-text-sm); font-weight: var(--se-weight-medium); color: var(--se-fg-body); border-radius: var(--se-radius-sm); cursor: pointer; transition: background 0.12s ease, color 0.12s ease; } .kit-datepicker__cell:hover:not(.is-disabled):not(.is-empty) { background: var(--se-surface-bg); color: var(--se-fg-strong); } .kit-datepicker__cell.is-empty { cursor: default; } .kit-datepicker__cell.is-today { border: 1px dashed var(--se-primary); color: var(--se-primary); } .kit-datepicker__cell.is-selected { background: var(--se-primary); color: var(--se-on-primary, white); border: 0; } .kit-datepicker__cell.is-range { background: var(--se-primary-tint); color: var(--se-primary); } .kit-datepicker__cell.is-disabled { opacity: 0.3; cursor: not-allowed; } .kit-datepicker__foot { display: flex; gap: 0.5rem; padding-top: 0.5rem; margin-top: 0.5rem; border-top: 1px solid var(--se-border-soft); } /* === SE Chiapas UIKit — Kit Tree (LEGACY) === Vista de árbol heredada del v1 kit. Migrar eventualmente a `.se-tree` moderno. Selectores `.kit-*` consumidos por MI-SISTEMA — NO renombrar. ============================================== */ /* ========================================================= IMPORTANT 2. KitTreeView ========================================================= */ .kit-tree { list-style: none; margin: 0; padding: 0.375rem 0; font-size: var(--se-text-sm); } .kit-tree__node { position: relative; } .kit-tree__row { display: flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.625rem; cursor: pointer; border-radius: var(--se-radius-sm); margin: 1px 0.5rem; transition: background 0.12s ease; position: relative; } .kit-tree__row:hover { background: var(--se-surface-bg); } .kit-tree__row.is-selected { background: var(--se-primary-tint); color: var(--se-primary); } .kit-tree__row.is-selected .kit-tree__icon, .kit-tree__row.is-selected .kit-tree__label { color: var(--se-primary); font-weight: var(--se-weight-bold); } .kit-tree__chev { width: 18px; height: 18px; background: transparent; border: 0; color: var(--se-fg-muted); display: inline-flex; align-items: center; justify-content: center; border-radius: 3px; cursor: pointer; flex-shrink: 0; font-size: 0.75rem; } .kit-tree__chev:hover { background: rgba(0,0,0,0.06); color: var(--se-fg-strong); } .kit-tree__icon { color: var(--se-fg-muted); font-size: 1rem; flex-shrink: 0; } .kit-tree__label { flex: 1; color: var(--se-fg-body); font-weight: var(--se-weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kit-tree__count { font-family: var(--se-font-mono); font-size: var(--se-text-xxs); font-weight: var(--se-weight-bold); color: var(--se-fg-muted); background: var(--se-surface-bg); padding: 1px 6px; border-radius: 999px; border: 1px solid var(--se-border-soft); } .kit-tree__meta { font-size: var(--se-text-xs); color: var(--se-fg-muted); font-family: var(--se-font-mono); } .kit-tree__children { list-style: none; margin: 0; padding: 0; } .kit-tree--lines .kit-tree__children { border-left: 1px dashed var(--se-border-soft); margin-left: 18px; } .kit-tree__row.is-leaf .kit-tree__chev { visibility: hidden; } /* === SE Chiapas UIKit — Kit DataTable Pro (LEGACY) === Selección + bulk bar de tabla heredada del v1 kit. Migrar eventualmente a `.se-data-table` moderno. Selectores `.kit-*` consumidos por MI-SISTEMA — NO renombrar. ======================================================== */ /* ========================================================= 7. KitDataTablePro — selection + bulk ========================================================= */ .kit-dt-pro { display: flex; flex-direction: column; } .kit-dt-pro__bulkbar { display: flex; justify-content: space-between; align-items: center; padding: 0.625rem 0.875rem; background: var(--se-primary-tint); border: 1px solid var(--se-primary); border-bottom: 0; border-radius: var(--se-radius-sm) var(--se-radius-sm) 0 0; animation: kitBulkIn 0.18s ease-out; } @keyframes kitBulkIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .kit-dt-pro__bulkbar-left { display: flex; align-items: center; gap: 0.625rem; } .kit-dt-pro__bulk-count { font-family: var(--se-font-mono); font-weight: var(--se-weight-bold); font-size: var(--se-text-md); color: var(--se-on-primary, white); background: var(--se-primary); padding: 2px 10px; border-radius: var(--se-radius-sm); min-width: 32px; text-align: center; } .kit-dt-pro__bulk-label { font-size: var(--se-text-sm); font-weight: var(--se-weight-bold); color: var(--se-primary); } .kit-dt-pro__bulk-clear { display: inline-flex; align-items: center; gap: 0.25rem; background: transparent; border: 0; color: var(--se-primary); font-size: var(--se-text-xs); font-weight: var(--se-weight-bold); text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; padding: 4px 8px; border-radius: var(--se-radius-sm); } .kit-dt-pro__bulk-clear:hover { background: var(--se-card-bg); } .kit-dt-pro__bulkbar-right { display: flex; gap: 0.375rem; } .kit-dt-pro__th-check, .kit-dt-pro__td-check { width: 36px; padding-left: 0.875rem !important; padding-right: 0 !important; } .kit-dt-pro__checkbox { width: 16px; height: 16px; accent-color: var(--se-primary); cursor: pointer; } .kit-table tr.is-selected td { background: var(--se-primary-tint) !important; } .kit-table--selectable tbody tr { cursor: default; } /* === SE Chiapas UIKit — Kit DataGrid (LEGACY) === Grid editable heredada del v1 kit. Migrar eventualmente a `.se-data-grid` moderno. Selectores `.kit-*` consumidos por MI-SISTEMA — NO renombrar. ================================================== */ /* ========================================================= IMPORTANT 4. KitDataGrid ========================================================= */ .kit-grid-wrap { border: 1px solid var(--se-border-soft); border-radius: var(--se-radius-md); overflow: hidden; background: var(--se-card-bg); } .kit-grid { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--se-text-sm); } .kit-grid thead th { background: var(--se-surface-bg); border-bottom: 1px solid var(--se-border-soft); padding: 0.625rem 0.75rem; font-size: var(--se-text-xs); font-weight: var(--se-weight-bold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--se-fg-muted); text-align: left; } .kit-grid__th-lbl { margin-right: 0.375rem; } .kit-grid__th-edit { color: var(--se-fg-muted); font-size: 0.75rem; opacity: 0.6; } .kit-grid__td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--se-border-soft); color: var(--se-fg-body); position: relative; cursor: cell; transition: background 0.12s ease; } .kit-grid__td:hover:not(.is-readonly) { background: var(--se-surface-bg); } .kit-grid__td.is-readonly { background: var(--se-surface-bg); cursor: not-allowed; opacity: 0.7; } .kit-grid__td.is-editing { padding: 0; background: var(--se-card-bg); } .kit-grid__td.is-dirty { background: var(--se-warning-tint) !important; font-weight: var(--se-weight-bold); } .kit-grid__editor { width: 100%; border: 2px solid var(--se-primary); outline: 0; padding: 0.5rem 0.75rem; font: inherit; background: var(--se-card-bg); color: var(--se-fg-strong); border-radius: 0; box-shadow: inset 0 0 0 1px var(--se-primary-tint); } .kit-grid__dirty-dot { position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--se-warning); } .kit-grid__hint { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.875rem; background: var(--se-surface-bg); border-top: 1px solid var(--se-border-soft); font-size: var(--se-text-xs); color: var(--se-fg-muted); } .kit-grid__hint kbd { font-family: var(--se-font-mono); font-size: var(--se-text-xxs); background: var(--se-card-bg); border: 1px solid var(--se-border-soft); padding: 1px 4px; border-radius: 3px; } .kit-grid__dirty-count { margin-left: auto; color: var(--se-warning-text); font-weight: var(--se-weight-bold); } /* === SE Chiapas UIKit — Kit Kanban (LEGACY) === Tablero kanban heredado del v1 kit. Migrar eventualmente a `.se-kanban` moderno. Selectores `.kit-*` consumidos por MI-SISTEMA — NO renombrar. ================================================ */ /* ========================================================= IMPORTANT 3. KitKanban ========================================================= */ .kit-kanban { display: flex; flex-direction: column; background: var(--se-surface-bg); border: 1px solid var(--se-border-soft); border-radius: var(--se-radius-md); overflow: hidden; } .kit-kanban__cols { display: flex; gap: 0.875rem; padding: 1rem; overflow-x: auto; min-height: 360px; } .kit-kanban__col { flex: 0 0 280px; background: var(--se-card-bg); border: 1px solid var(--se-border-soft); border-radius: var(--se-radius-md); display: flex; flex-direction: column; max-height: 70vh; transition: background 0.12s ease, border-color 0.12s ease; } .kit-kanban__col.is-over { border-color: var(--se-primary); background: var(--se-primary-tint); box-shadow: var(--se-shadow-md); } .kit-kanban__col.is-wip-over { border-color: var(--se-warning); } .kit-kanban__col-head { display: flex; justify-content: space-between; align-items: center; padding: 0.625rem 0.875rem; border-bottom: 1px solid var(--se-border-soft); } .kit-kanban__col-title { display: flex; align-items: center; gap: 0.5rem; font-size: var(--se-text-sm); font-weight: var(--se-weight-bold); color: var(--se-fg-strong); } .kit-kanban__col-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--se-fg-muted); } .kit-kanban__col-dot--primary { background: var(--se-primary); } .kit-kanban__col-dot--success { background: var(--se-success); } .kit-kanban__col-dot--warning { background: var(--se-warning); } .kit-kanban__col-dot--danger { background: var(--se-danger); } .kit-kanban__col-dot--info { background: var(--se-info, var(--se-primary)); } .kit-kanban__col-count { font-family: var(--se-font-mono); font-size: var(--se-text-xxs); font-weight: var(--se-weight-bold); color: var(--se-fg-muted); background: var(--se-surface-bg); padding: 1px 6px; border-radius: 999px; border: 1px solid var(--se-border-soft); } .kit-kanban__wip-warn { display: flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.875rem; background: var(--se-warning-tint); color: var(--se-warning-text); font-size: var(--se-text-xs); font-weight: var(--se-weight-bold); border-bottom: 1px solid var(--se-warning); } .kit-kanban__col-body { padding: 0.625rem; display: flex; flex-direction: column; gap: 0.5rem; overflow-y: auto; flex: 1; } .kit-kanban__empty { padding: 1.5rem 0.5rem; text-align: center; font-size: var(--se-text-xs); color: var(--se-fg-muted); border: 1px dashed var(--se-border-soft); border-radius: var(--se-radius-sm); background: var(--se-surface-bg); } .kit-kanban__card { background: var(--se-card-bg); border: 1px solid var(--se-border-soft); border-radius: var(--se-radius-sm); padding: 0.625rem 0.75rem; cursor: grab; transition: box-shadow 0.12s ease, transform 0.12s ease; } .kit-kanban__card:hover { box-shadow: var(--se-shadow-sm); } .kit-kanban__card:active { cursor: grabbing; } .kit-kanban__card.is-dragging { opacity: 0.5; transform: rotate(-1deg); } .kit-kanban__card-code { font-family: var(--se-font-mono); font-size: var(--se-text-xxs); font-weight: var(--se-weight-bold); color: var(--se-fg-muted); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 4px; } .kit-kanban__card-title { font-size: var(--se-text-sm); font-weight: var(--se-weight-bold); color: var(--se-fg-strong); line-height: 1.35; text-wrap: pretty; } .kit-kanban__card-meta { font-size: var(--se-text-xs); color: var(--se-fg-muted); margin-top: 4px; } .kit-kanban__card-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; } .kit-kanban__card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--se-border-soft); } .kit-kanban__card-who { display: inline-flex; align-items: center; gap: 0.375rem; font-size: var(--se-text-xs); color: var(--se-fg-body); font-weight: var(--se-weight-medium); } .kit-kanban__card-due { display: inline-flex; align-items: center; gap: 0.25rem; font-family: var(--se-font-mono); font-size: var(--se-text-xxs); color: var(--se-fg-muted); } .kit-kanban__foot { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 1rem; background: var(--se-card-bg); border-top: 1px solid var(--se-border-soft); font-size: var(--se-text-xs); color: var(--se-fg-muted); } .kit-kanban__hint { display: inline-flex; align-items: center; gap: 0.25rem; } /* === SE Chiapas UIKit — Kit Diff (LEGACY) === Visor de diferencias heredado del v1 kit. Migrar eventualmente a `.se-diff` moderno. Selectores `.kit-*` consumidos por MI-SISTEMA — NO renombrar. ============================================== */ /* ========================================================= IMPORTANT 5. KitDiff ========================================================= */ .kit-diff { border: 1px solid var(--se-border-soft); border-radius: var(--se-radius-md); overflow: hidden; background: var(--se-card-bg); } .kit-diff__head { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; background: var(--se-surface-bg); border-bottom: 1px solid var(--se-border-soft); } .kit-diff__col-head { padding: 0.75rem 1rem; display: flex; flex-direction: column; gap: 0.25rem; } .kit-diff__col-head--a { border-right: 1px solid var(--se-border-soft); } .kit-diff__col-head--b { border-left: 1px solid var(--se-border-soft); } .kit-diff__pill { font-family: var(--se-font-mono); font-size: var(--se-text-xxs); font-weight: var(--se-weight-bold); color: var(--se-fg-muted); letter-spacing: 0.06em; } .kit-diff__col-head strong { font-size: var(--se-text-md); color: var(--se-fg-strong); } .kit-diff__code { font-family: var(--se-font-mono); font-size: var(--se-text-xs); color: var(--se-fg-muted); } .kit-diff__center { display: flex; align-items: center; justify-content: center; padding: 0 1rem; } .kit-diff__count { font-family: var(--se-font-mono); font-size: var(--se-text-xs); font-weight: var(--se-weight-bold); color: var(--se-fg-muted); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; } .kit-diff__count.has-changes { color: var(--se-warning-text); background: var(--se-warning-tint); padding: 4px 10px; border-radius: var(--se-radius-sm); } .kit-diff__body { display: flex; flex-direction: column; } .kit-diff__row { display: grid; grid-template-columns: 180px 1fr; border-bottom: 1px solid var(--se-border-soft); } .kit-diff__row:last-child { border-bottom: 0; } .kit-diff__row.is-diff { background: var(--se-warning-tint); } .kit-diff__field { padding: 0.625rem 1rem; font-size: var(--se-text-xs); font-weight: var(--se-weight-bold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--se-fg-muted); background: var(--se-surface-bg); border-right: 1px solid var(--se-border-soft); display: flex; align-items: center; } .kit-diff__row.is-diff .kit-diff__field { color: var(--se-warning-text); } .kit-diff__cells { display: grid; grid-template-columns: 1fr 32px 1fr; } .kit-diff__cell { padding: 0.625rem 1rem; font-size: var(--se-text-sm); color: var(--se-fg-body); font-family: var(--se-font-mono); } .kit-diff__cell--a { border-right: 1px solid var(--se-border-soft); } .kit-diff__cell--b { border-left: 1px solid var(--se-border-soft); } .kit-diff__cell.is-removed { background: var(--se-danger-tint); color: var(--se-danger); text-decoration: line-through; text-decoration-color: var(--se-danger); } .kit-diff__cell.is-added { background: var(--se-success-tint); color: var(--se-success); font-weight: var(--se-weight-bold); } .kit-diff__arrow { display: flex; align-items: center; justify-content: center; color: var(--se-fg-muted); } .kit-diff__row.is-diff .kit-diff__arrow { color: var(--se-warning-text); } .kit-diff__empty { color: var(--se-fg-muted); font-style: italic; } /* === SE Chiapas UIKit — Kit Dropzone Pro (LEGACY) === Lista de archivos subidos heredada del v1 kit. Migrar eventualmente a `.se-dropzone-pro` moderno. Selectores `.kit-*` consumidos por MI-SISTEMA — NO renombrar. ====================================================== */ /* ========================================================= 6. KitDropzonePro ========================================================= */ .kit-dropzone-pro__list { margin-top: 1rem; border: 1px solid var(--se-border-soft); border-radius: var(--se-radius-md); background: var(--se-card-bg); overflow: hidden; } .kit-dropzone-pro__listhead { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0.875rem; background: var(--se-surface-bg); border-bottom: 1px solid var(--se-border-soft); font-size: var(--se-text-xs); font-weight: var(--se-weight-bold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--se-fg-muted); } .kit-dropzone-pro__item { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.875rem; border-bottom: 1px solid var(--se-border-soft); transition: background 0.12s ease; } .kit-dropzone-pro__item:last-child { border-bottom: 0; } .kit-dropzone-pro__item:hover { background: var(--se-surface-bg); } .kit-dropzone-pro__file-icon { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--se-radius-sm); background: var(--se-surface-bg); border: 1px solid var(--se-border-soft); color: var(--se-fg-muted); font-size: 1.1rem; flex-shrink: 0; } .kit-dropzone-pro__item--done .kit-dropzone-pro__file-icon { color: var(--se-success); border-color: var(--se-success); } .kit-dropzone-pro__item--error .kit-dropzone-pro__file-icon { color: var(--se-danger); border-color: var(--se-danger); } .kit-dropzone-pro__item--uploading .kit-dropzone-pro__file-icon { color: var(--se-primary); border-color: var(--se-primary); } .kit-dropzone-pro__file-info { flex: 1; min-width: 0; } .kit-dropzone-pro__file-name { font-size: var(--se-text-sm); font-weight: var(--se-weight-bold); color: var(--se-fg-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kit-dropzone-pro__file-meta { display: flex; gap: 0.5rem; font-size: var(--se-text-xs); color: var(--se-fg-muted); margin-top: 2px; } .kit-dropzone-pro__file-meta span { display: inline-flex; align-items: center; gap: 0.25rem; } .kit-dropzone-pro__pct { font-family: var(--se-font-mono); font-weight: var(--se-weight-bold); color: var(--se-primary); } .kit-dropzone-pro__ok { color: var(--se-success); font-weight: var(--se-weight-bold); } .kit-dropzone-pro__err { color: var(--se-danger); font-weight: var(--se-weight-bold); } .kit-dropzone-pro__bar { margin-top: 4px; height: 4px; background: var(--se-surface-bg); border-radius: 999px; overflow: hidden; } .kit-dropzone-pro__bar > span { display: block; height: 100%; background: var(--se-primary); transition: width 0.2s ease; } .kit-dropzone-pro__file-actions { display: flex; gap: 0.25rem; flex-shrink: 0; } /* === SE Chiapas UIKit — Kit Mention Input (LEGACY) === Input con menciones heredado del v1 kit. Migrar eventualmente a `.se-mention` moderno. Selectores `.kit-*` consumidos por MI-SISTEMA — NO renombrar. Nota: la animación `kitMenuIn` se define en `_kit-menu.css`. ======================================================== */ /* ========================================================= IMPORTANT 7. KitMentionInput ========================================================= */ .kit-mention { position: relative; } .kit-mention__input { width: 100%; } .kit-mention__pop { position: absolute; z-index: 50; width: 320px; background: var(--se-card-bg); border: 1px solid var(--se-border-soft); border-radius: var(--se-radius-md); box-shadow: var(--se-shadow-lg); overflow: hidden; animation: kitMenuIn 0.12s ease-out; } .kit-mention__pop-head { display: flex; align-items: center; gap: 0.375rem; padding: 0.5rem 0.75rem; background: var(--se-surface-bg); border-bottom: 1px solid var(--se-border-soft); font-size: var(--se-text-xs); font-weight: var(--se-weight-medium); color: var(--se-fg-muted); } .kit-mention__pop-head i.bi { color: var(--se-primary); } .kit-mention__pop-count { margin-left: auto; font-family: var(--se-font-mono); font-size: var(--se-text-xxs); font-weight: var(--se-weight-bold); background: var(--se-card-bg); border: 1px solid var(--se-border-soft); padding: 1px 6px; border-radius: 999px; } .kit-mention__pop ul { list-style: none; margin: 0; padding: 0.25rem; max-height: 240px; overflow-y: auto; } .kit-mention__pop li { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.625rem; border-radius: var(--se-radius-sm); cursor: pointer; } .kit-mention__pop li.is-hl, .kit-mention__pop li:hover { background: var(--se-primary-tint); } .kit-mention__person { display: flex; flex-direction: column; min-width: 0; flex: 1; } .kit-mention__person strong { font-size: var(--se-text-sm); color: var(--se-fg-strong); } .kit-mention__person span { font-size: var(--se-text-xs); color: var(--se-fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* === SE Chiapas UIKit — Kit Notification Center (LEGACY) === Centro de notificaciones heredado del v1 kit. Migrar eventualmente a `.se-notif` moderno. Selectores `.kit-*` consumidos por MI-SISTEMA — NO renombrar. Nota: la animación `kitMenuIn` se define en `_kit-menu.css`. =========================================================== */ /* ========================================================= IMPORTANT 6. KitNotifCenter ========================================================= */ .kit-notif { position: relative; } .kit-notif__bell { position: relative; } .kit-notif__badge { position: absolute; top: 6px; right: 6px; background: var(--se-danger); color: var(--se-on-primary, white); font-family: var(--se-font-mono); font-size: 9px; font-weight: var(--se-weight-bold); min-width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 0 4px; border: 1px solid var(--se-topbar-bg); } .kit-notif__panel { position: absolute; z-index: 100; top: calc(100% + 8px); right: 0; width: 380px; max-height: 70vh; background: var(--se-card-bg); border: 1px solid var(--se-border-soft); border-radius: var(--se-radius-md); box-shadow: var(--se-shadow-lg); display: flex; flex-direction: column; animation: kitMenuIn 0.14s ease-out; color: var(--se-fg-body); } .kit-notif__head { display: flex; justify-content: space-between; align-items: flex-start; padding: 0.75rem 1rem; border-bottom: 1px solid var(--se-border-soft); } .kit-notif__eyebrow { font-family: var(--se-font-mono); font-size: var(--se-text-xxs); font-weight: var(--se-weight-bold); color: var(--se-fg-muted); letter-spacing: 0.06em; } .kit-notif__title { font-size: var(--se-text-sm); color: var(--se-fg-body); margin-top: 2px; } .kit-notif__title strong { color: var(--se-fg-strong); } .kit-notif__mark-all { display: inline-flex; align-items: center; gap: 0.25rem; background: transparent; border: 0; color: var(--se-primary); font-size: var(--se-text-xs); font-weight: var(--se-weight-bold); text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; padding: 4px 8px; border-radius: var(--se-radius-sm); } .kit-notif__mark-all:hover { background: var(--se-primary-tint); } .kit-notif__body { flex: 1; overflow-y: auto; } .kit-notif__group { padding: 0.5rem 0 0; } .kit-notif__group-title { font-family: var(--se-font-mono); font-size: var(--se-text-xxs); font-weight: var(--se-weight-bold); color: var(--se-fg-muted); text-transform: uppercase; letter-spacing: 0.06em; padding: 0.375rem 1rem; display: flex; justify-content: space-between; background: var(--se-surface-bg); border-top: 1px solid var(--se-border-soft); border-bottom: 1px solid var(--se-border-soft); } .kit-notif__group ul { list-style: none; margin: 0; padding: 0; } .kit-notif__item { display: flex; gap: 0.625rem; align-items: flex-start; padding: 0.625rem 1rem; border-bottom: 1px solid var(--se-border-soft); cursor: pointer; transition: background 0.12s ease; position: relative; } .kit-notif__item:hover { background: var(--se-surface-bg); } .kit-notif__item.is-unread { background: var(--se-primary-tint); } .kit-notif__item.is-unread:hover { background: var(--se-primary-tint); filter: brightness(0.97); } .kit-notif__icon { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--se-radius-sm); font-size: 0.95rem; flex-shrink: 0; background: var(--se-surface-bg); border: 1px solid var(--se-border-soft); color: var(--se-fg-muted); } .kit-notif__icon--success { background: var(--se-success-tint); color: var(--se-success); border-color: var(--se-success); } .kit-notif__icon--warning { background: var(--se-warning-tint); color: var(--se-warning-text); border-color: var(--se-warning); } .kit-notif__icon--danger { background: var(--se-danger-tint); color: var(--se-danger); border-color: var(--se-danger); } .kit-notif__icon--info { background: var(--se-primary-tint); color: var(--se-primary); border-color: var(--se-primary); } .kit-notif__content { flex: 1; min-width: 0; } .kit-notif__item-title { font-size: var(--se-text-sm); font-weight: var(--se-weight-bold); color: var(--se-fg-strong); line-height: 1.3; } .kit-notif__item-desc { font-size: var(--se-text-xs); color: var(--se-fg-body); margin-top: 2px; line-height: 1.4; } .kit-notif__item-meta { display: flex; gap: 0.625rem; font-size: var(--se-text-xxs); font-family: var(--se-font-mono); color: var(--se-fg-muted); margin-top: 4px; } .kit-notif__item-meta span { display: inline-flex; align-items: center; gap: 0.25rem; } .kit-notif__unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--se-primary); flex-shrink: 0; margin-top: 8px; } .kit-notif__empty { padding: 2rem 1rem; text-align: center; color: var(--se-fg-muted); } .kit-notif__empty i.bi { font-size: 2rem; display: block; margin-bottom: 0.5rem; } .kit-notif__empty p { margin: 0; font-size: var(--se-text-sm); } .kit-notif__foot { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0.75rem; border-top: 1px solid var(--se-border-soft); background: var(--se-surface-bg); } /* === SE Chiapas UIKit — Kit Confirm (LEGACY) === Diálogo destructivo heredado del v1 kit. Migrar eventualmente a `.se-confirm` moderno. Selectores `.kit-*` consumidos por MI-SISTEMA — NO renombrar. ================================================= */ /* ========================================================= 2. KitConfirm — diálogo destructivo ========================================================= */ .kit-confirm__icon { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--se-radius-md); font-size: 1.4rem; flex-shrink: 0; } .kit-confirm__icon--danger { background: var(--se-danger-tint); color: var(--se-danger); box-shadow: inset 0 0 0 1px var(--se-danger-soft, rgba(180, 35, 24, 0.25)); } .kit-confirm__icon--warning { background: var(--se-warning-tint); color: var(--se-warning-text); } .kit-confirm__icon--info { background: var(--se-info-tint, var(--se-primary-tint)); color: var(--se-primary); } .kit-confirm__desc { margin: 0 0 1rem; color: var(--se-fg-body); font-size: var(--se-text-md); line-height: 1.5; text-wrap: pretty; } .kit-confirm__details { list-style: none; padding: 0; margin: 0 0 1rem; background: var(--se-surface-bg); border: 1px solid var(--se-border-soft); border-radius: var(--se-radius-sm); padding: 0.75rem 1rem; } .kit-confirm__details li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: var(--se-text-sm); color: var(--se-fg-body); padding: 0.25rem 0; } .kit-confirm__details li i.bi { color: var(--se-fg-muted); margin-top: 2px; } .kit-confirm__challenge { border-top: 1px solid var(--se-border-soft); padding-top: 1rem; margin-top: 1rem; } .kit-confirm__challenge label { display: block; font-size: var(--se-text-xs); font-weight: var(--se-weight-bold); color: var(--se-fg-strong); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.5rem; } .kit-confirm__challenge code { font-family: var(--se-font-mono); background: var(--se-danger-tint); color: var(--se-danger); padding: 1px 6px; border-radius: 3px; font-weight: var(--se-weight-bold); font-size: var(--se-text-xs); } .kit-confirm--danger .kit-modal__title { color: var(--se-danger); } /* === SE Chiapas UIKit — Kit Form Summary (LEGACY) === Resumen de errores de formulario heredado del v1 kit. Migrar eventualmente a `.se-form-summary` moderno. Selectores `.kit-*` consumidos por MI-SISTEMA — NO renombrar. ====================================================== */ /* ========================================================= 3. KitFormSummary ========================================================= */ .kit-form-summary { border: 1px solid var(--se-border-soft); border-radius: var(--se-radius-md); background: var(--se-card-bg); margin-bottom: 1.25rem; overflow: hidden; } .kit-form-summary--danger { border-color: var(--se-danger); } .kit-form-summary--danger .kit-form-summary__head { background: var(--se-danger-tint); } .kit-form-summary--warning { border-color: var(--se-warning); } .kit-form-summary--warning .kit-form-summary__head { background: var(--se-warning-tint); } .kit-form-summary__head { display: flex; align-items: center; gap: 0.875rem; padding: 0.875rem 1rem; border-bottom: 1px solid var(--se-border-soft); } .kit-form-summary__icon { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--se-radius-sm); font-size: 1.15rem; background: var(--se-card-bg); flex-shrink: 0; } .kit-form-summary__icon--danger { color: var(--se-danger); border: 1px solid var(--se-danger); } .kit-form-summary__icon--warning { color: var(--se-warning-text); border: 1px solid var(--se-warning); } .kit-form-summary__title { flex: 1; } .kit-form-summary__code { font-family: var(--se-font-mono); font-size: var(--se-text-xxs); font-weight: var(--se-weight-bold); letter-spacing: 0.08em; color: var(--se-fg-muted); text-transform: uppercase; } .kit-form-summary--danger .kit-form-summary__code { color: var(--se-danger); } .kit-form-summary--warning .kit-form-summary__code { color: var(--se-warning-text); } .kit-form-summary__msg { font-size: var(--se-text-md); font-weight: var(--se-weight-bold); color: var(--se-fg-strong); } .kit-form-summary__count { background: var(--se-card-bg); border: 1px solid currentColor; font-family: var(--se-font-mono); font-weight: var(--se-weight-bold); font-size: var(--se-text-md); width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--se-radius-sm); } .kit-form-summary--danger .kit-form-summary__count { color: var(--se-danger); } .kit-form-summary--warning .kit-form-summary__count { color: var(--se-warning-text); } .kit-form-summary__list { list-style: none; margin: 0; padding: 0; } .kit-form-summary__list li { border-bottom: 1px solid var(--se-border-soft); } .kit-form-summary__list li:last-child { border-bottom: 0; } .kit-form-summary__jump { display: flex; align-items: center; gap: 0.625rem; width: 100%; padding: 0.625rem 1rem; background: transparent; border: 0; text-align: left; font-size: var(--se-text-sm); color: var(--se-fg-body); cursor: pointer; transition: background 0.12s ease; } .kit-form-summary__jump:hover { background: var(--se-surface-bg); } .kit-form-summary__num { font-family: var(--se-font-mono); font-size: var(--se-text-xxs); font-weight: var(--se-weight-bold); color: var(--se-fg-muted); background: var(--se-surface-bg); padding: 2px 6px; border-radius: 3px; flex-shrink: 0; } .kit-form-summary__field { font-weight: var(--se-weight-bold); color: var(--se-fg-strong); flex-shrink: 0; } .kit-form-summary__sep { color: var(--se-fg-muted); } .kit-form-summary__txt { flex: 1; color: var(--se-fg-body); } .kit-form-summary__jump > i.bi { color: var(--se-fg-muted); font-size: 0.85rem; } .kit-form-summary__jump:hover > i.bi { color: var(--se-primary); transform: translateX(2px); } /* === SE Chiapas UIKit — Kit Avatar (LEGACY) === Variante XS de avatar para tarjetas Kanban, heredada del v1 kit. Migrar eventualmente a `.se-avatar` moderno (modificador `--xs`). Selectores `.kit-*` consumidos por MI-SISTEMA — NO renombrar. ================================================ */ /* ========================================================= Avatar XS for Kanban cards ========================================================= */ .kit-avatar.kit-avatar--xs { width: 18px; height: 18px; font-size: 9px; font-weight: var(--se-weight-bold); display: inline-flex; align-items: center; justify-content: center; background: var(--se-surface-bg); border: 1px solid var(--se-border-soft); border-radius: 50%; color: var(--se-fg-strong); } /* ========================================================= SE Chiapas — Density tokens Aplicar al o : data-density="compact|comfortable|spacious" Default: comfortable. ========================================================= */ :root, [data-density="comfortable"] { --d-row-h: 2.5rem; /* 40px — table rows, list items */ --d-input-h: 2.25rem; /* 36px — inputs, selects */ --d-btn-h: 2.25rem; /* 36px — botones default */ --d-btn-px: 1rem; /* 16px — padding-x botón */ --d-btn-py: 0.5rem; --d-card-p: 1.25rem; /* 20px — padding interno tarjeta */ --d-card-gap: 1rem; /* gap entre cards */ --d-section-gap: 1.5rem; /* gap entre secciones */ --d-stack-gap: 0.75rem; --d-font-body: var(--se-text-base); --d-font-input: var(--se-text-md); --d-icon-sm: 1rem; } [data-density="compact"] { --d-row-h: 2rem; /* 32px */ --d-input-h: 1.875rem; /* 30px */ --d-btn-h: 1.875rem; --d-btn-px: 0.75rem; --d-btn-py: 0.375rem; --d-card-p: 1rem; --d-card-gap: 0.75rem; --d-section-gap: 1rem; --d-stack-gap: 0.5rem; --d-font-body: var(--se-text-md); --d-font-input: var(--se-text-md); --d-icon-sm: 0.875rem; } [data-density="spacious"] { --d-row-h: 3rem; --d-input-h: 2.625rem; /* 42px */ --d-btn-h: 2.625rem; --d-btn-px: 1.25rem; --d-btn-py: 0.625rem; --d-card-p: 1.75rem; --d-card-gap: 1.5rem; --d-section-gap: 2.25rem; --d-stack-gap: 1rem; --d-font-body: var(--se-text-base); --d-font-input: var(--se-text-base); --d-icon-sm: 1.125rem; } /* Aplicación a primitivas existentes */ /* Apply density to all se-* and kit-* components */ [data-density] .kit-btn, [data-density] .se-btn, [data-density] .se-btn-brand, [data-density] .se-btn-outline, [data-density] .se-btn-ghost, [data-density] .se-btn-danger { min-height: var(--d-btn-h); padding: var(--d-btn-py) var(--d-btn-px); } [data-density] .kit-input, [data-density] .se-input, [data-density] .se-select, [data-density] .form-control, [data-density] .form-select { min-height: var(--d-input-h); font-size: var(--d-font-input); } [data-density] .kit-card, [data-density] .se-card, [data-density] .se-card-body { padding: var(--d-card-p); } [data-density] .kit-table tbody tr, [data-density] .se-dt tbody tr, [data-density] .se-datatable-row { height: var(--d-row-h); } [data-density] .kit-stack > * + *, [data-density] .se-stack > * + * { margin-top: var(--d-stack-gap); } [data-density] .se-form-grid { row-gap: var(--d-section-gap); } [data-density] .se-grid { gap: var(--d-card-gap); } /* Switcher control (para Storybook / Tweaks) */ .kit-density-switch { display: inline-flex; border: 1px solid var(--se-border); border-radius: var(--se-radius-md); overflow: hidden; background: var(--se-card-bg); } .kit-density-switch button { appearance: none; border: 0; background: transparent; padding: 0.375rem 0.75rem; font: inherit; font-size: var(--se-text-md); color: var(--se-fg-muted); cursor: pointer; border-right: 1px solid var(--se-border); } .kit-density-switch button:last-child { border-right: 0; } .kit-density-switch button[aria-pressed="true"] { background: var(--se-primary); color: white; } /* ========================================================= SE Chiapas — Skeletons orquestados por shell --------------------------------------------------------- v2.5.1 — Namespace migrado de .kit-skel* a .se-skel*. Los selectores .kit-* se mantienen como ALIAS para backwards compat con apps consumidoras que aun los usen. --------------------------------------------------------- Uso (preferido):
Uso (legacy alias — sigue funcionando):
Respeta prefers-reduced-motion. Orquestable por shell con data-app-state="loading"/"ready" en regiones .se-region-*. ========================================================= */ .se-skel, .kit-skel { position: relative; overflow: hidden; background-color: var(--se-border-light); border-radius: var(--se-radius-md, 2px); display: block; } .se-skel::after, .kit-skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100% ); transform: translateX(-100%); animation: se-skel-shimmer 1.4s ease-in-out infinite; } @keyframes se-skel-shimmer { to { transform: translateX(100%); } } /* Alias legacy del keyframe (por si alguna app lo referencia directo) */ @keyframes kit-skel-shimmer { to { transform: translateX(100%); } } @media (prefers-reduced-motion: reduce) { .se-skel::after, .kit-skel::after { animation: none; opacity: 0.6; } } .se-skel-line, .kit-skel-line { height: 0.75rem; margin: 0.375rem 0; } .se-skel-line.lg, .kit-skel-line.lg { height: 1.125rem; } .se-skel-line.sm, .kit-skel-line.sm { height: 0.5rem; } .se-skel-line.w-25, .kit-skel-line.w-25 { width: 25%; } .se-skel-line.w-50, .kit-skel-line.w-50 { width: 50%; } .se-skel-line.w-75, .kit-skel-line.w-75 { width: 75%; } .se-skel-line.w-100, .kit-skel-line.w-100 { width: 100%; } .se-skel-block, .kit-skel-block { width: 100%; height: 6rem; border-radius: var(--se-radius-xl); } .se-skel-circle, .kit-skel-circle { width: 2.5rem; height: 2.5rem; border-radius: 50%; } .se-skel-pill, .kit-skel-pill { width: 5rem; height: 1.5rem; border-radius: var(--se-radius-pill); } /* Composiciones listas */ .se-skel-card, .kit-skel-card { background: var(--se-card-bg); border-radius: var(--se-radius-xl); padding: var(--d-card-p, 1.25rem); box-shadow: var(--se-shadow-lg); } .se-skel-stat, .kit-skel-stat { background: var(--se-card-bg); border-radius: var(--se-radius-2xl); padding: 1.25rem; box-shadow: var(--se-shadow-lg); } .se-skel-row, .kit-skel-row { display: grid; grid-template-columns: 1.5rem 1fr 1fr 1fr 6rem; gap: 1rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--se-border-light); align-items: center; } /* ---- Composiciones v2.4 ---- */ /* Fila de tabla sin checkbox (5 columnas, alineada al .se-dt--no-check) */ .se-skel-row--no-check { grid-template-columns: 1.5fr 1fr 1fr 1fr 5rem; } /* Helper: repite N filas con un solo elemento (via --rows en JS o estatico) */ .se-skel-table { background: var(--se-card-bg); border-radius: var(--se-radius-xl); overflow: hidden; box-shadow: var(--se-shadow-lg); } /* Identity card skeleton (sidebar de Details) */ .se-skel-identity { background: var(--se-card-bg); border-radius: var(--se-radius-xl); padding: 1.5rem; box-shadow: var(--se-shadow-lg); text-align: center; } .se-skel-identity .se-skel-circle { width: 5rem; height: 5rem; margin: 0 auto 1rem; } .se-skel-identity .se-skel-line { margin-left: auto; margin-right: auto; } /* Stat card grid skeleton (KPI row) */ .se-skel-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; } /* Form field skeleton (label + input) */ .se-skel-field { margin-bottom: 1rem; } .se-skel-field .se-skel-line.label { width: 35%; height: 0.6rem; margin-bottom: 0.5rem; } .se-skel-field .se-skel-input { height: 2.5rem; border-radius: var(--se-radius-md); } /* Orquestación por shell: data-app-state="loading" | "ready" */ [data-app-state="loading"] .se-region-content, [data-app-state="loading"] .kit-region-content, [data-app-state="ready"] .se-region-skeleton, [data-app-state="ready"] .kit-region-skeleton { display: none; } [data-app-state="loading"] .se-region-skeleton, [data-app-state="loading"] .kit-region-skeleton, [data-app-state="ready"] .se-region-content, [data-app-state="ready"] .kit-region-content { display: revert; } /* ========================================================== SE Chiapas Kit: Checkbox + Radio (form-check) ---------------------------------------------------------- Wrapper sobre / nativos. No usa accent-color para tener control total del check. Markup: ========================================================== */ .se-check { display: flex; align-items: flex-start; gap: 0.55rem; cursor: pointer; user-select: none; font-family: var(--se-font-sans); font-size: var(--se-text-md); color: var(--se-fg-strong); line-height: 1.4; } .se-check--inline { display: inline-flex; margin-right: 1rem; } /* Texto del check (hereda tipografía de .se-check). min-width:0 permite que etiquetas largas envuelvan dentro del flex sin desbordar. */ .se-check-label { min-width: 0; } .se-check-input { appearance: none; -webkit-appearance: none; width: 1rem; height: 1rem; margin: 0.1rem 0 0 0; background: white; border: 1.5px solid var(--se-border-form); border-radius: var(--se-radius-md); cursor: pointer; flex-shrink: 0; position: relative; transition: border-color var(--se-transition-fast), background var(--se-transition-fast), box-shadow var(--se-transition-fast); } .se-check-input[type="radio"] { border-radius: var(--se-radius-circle); } .se-check-input:hover:not(:disabled) { border-color: var(--se-primary); } .se-check-input:focus-visible { outline: none; border-color: var(--se-primary); box-shadow: var(--se-focus-ring, 0 0 0 3px rgba(var(--se-primary-rgb), 0.18)); } .se-check-input:checked { background: var(--se-primary); border-color: var(--se-primary); } /* Checkmark SVG */ .se-check-input[type="checkbox"]:checked::after { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3.5 8.5 6.5 11.5 12.5 5'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; } /* Radio dot */ .se-check-input[type="radio"]:checked::after { content: ''; position: absolute; inset: 25%; background: white; border-radius: var(--se-radius-circle); } /* Indeterminate (only checkbox) */ .se-check-input[type="checkbox"]:indeterminate { background: var(--se-primary); border-color: var(--se-primary); } .se-check-input[type="checkbox"]:indeterminate::after { content: ''; position: absolute; inset: 35% 18%; background: white; border-radius: 1px; } /* Disabled */ .se-check-input:disabled { background: var(--se-subtle-bg); border-color: var(--se-border-light); cursor: not-allowed; } .se-check-input:disabled:checked { background: var(--se-fg-subtle); border-color: var(--se-fg-subtle); } .se-check:has(.se-check-input:disabled) { cursor: not-allowed; color: var(--se-fg-meta); } /* Error state */ .se-check.is-invalid .se-check-input, .se-check-input.is-invalid { border-color: var(--se-danger); } .se-check.is-invalid .se-check-input:focus-visible, .se-check-input.is-invalid:focus-visible { box-shadow: 0 0 0 3px rgba(208, 2, 27, 0.18); } /* Label helper text (segunda linea sutil) */ .se-check-help { display: block; font-size: var(--se-text-xs); color: var(--se-fg-meta); margin-top: 0.15rem; } /* Stacked group (radios verticales) */ .se-check-group { display: flex; flex-direction: column; gap: 0.5rem; } .se-check-group--inline { flex-direction: row; flex-wrap: wrap; gap: 0.5rem 1.25rem; } /* ========================================================== SE Chiapas Kit: Switch (toggle on/off) ---------------------------------------------------------- Markup: ========================================================== */ .se-switch { display: inline-flex; align-items: center; gap: 0.6rem; cursor: pointer; user-select: none; font-family: var(--se-font-sans); font-size: var(--se-text-md); color: var(--se-fg-strong); } /* Texto del switch (hereda tipografía de .se-switch). */ .se-switch-label { min-width: 0; } .se-switch-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .se-switch-track { position: relative; display: inline-block; width: 36px; height: 20px; background: var(--se-border-form); border-radius: var(--se-radius-pill); transition: background var(--se-transition-fast); flex-shrink: 0; } .se-switch-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: white; border-radius: var(--se-radius-circle); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); transition: transform var(--se-transition-fast); } .se-switch-input:checked + .se-switch-track { background: var(--se-primary); } .se-switch-input:checked + .se-switch-track::after { transform: translateX(16px); } .se-switch-input:focus-visible + .se-switch-track { box-shadow: var(--se-focus-ring, 0 0 0 3px rgba(var(--se-primary-rgb), 0.18)); } .se-switch-input:disabled + .se-switch-track { opacity: 0.5; cursor: not-allowed; } .se-switch:has(.se-switch-input:disabled) { cursor: not-allowed; color: var(--se-fg-meta); } /* Sizes */ .se-switch-track-sm { width: 28px; height: 16px; } .se-switch-track-sm::after { width: 12px; height: 12px; } .se-switch-input:checked + .se-switch-track-sm::after { transform: translateX(12px); } .se-switch-track-lg { width: 44px; height: 24px; } .se-switch-track-lg::after { width: 20px; height: 20px; } .se-switch-input:checked + .se-switch-track-lg::after { transform: translateX(20px); } /* Danger variant (toggle destructivo: rojo cuando activo) */ .se-switch--danger .se-switch-input:checked + .se-switch-track { background: var(--se-danger); } /* ========================================================== SE Chiapas Kit: File Upload ---------------------------------------------------------- Dos variantes: 1) INPUT FILE INSTITUCIONAL (estiliza el boton "Examinar") 2) DROPZONE (zona ancha con icono, texto e input oculto) Drag-over visual: agregar via JS class `is-dragover` al label. ========================================================== */ /* ---------- 1) Native file input estilizado ---------- */ .se-file { display: block; width: 100%; font-family: var(--se-font-sans); font-size: var(--se-text-md); color: var(--se-fg-strong); background: var(--se-input-bg); border: 1px solid var(--se-border-form); border-radius: var(--se-radius-md); padding: 0; cursor: pointer; transition: border-color var(--se-transition-fast), box-shadow var(--se-transition-fast); } .se-file:focus-visible { outline: none; border-color: var(--se-primary); box-shadow: var(--se-focus-ring, 0 0 0 3px rgba(var(--se-primary-rgb), 0.18)); } .se-file::file-selector-button { background: var(--se-primary-nav-bg); color: var(--se-primary); border: 0; border-right: 1px solid var(--se-primary-nav-border); padding: 0.55rem 0.9rem; font-family: var(--se-font-sans); font-size: var(--se-text-md); font-weight: var(--se-weight-semibold); cursor: pointer; margin-right: 0.75rem; transition: background var(--se-transition-fast), color var(--se-transition-fast); } .se-file::file-selector-button:hover { background: var(--se-primary); color: white; } .se-file:disabled { background: var(--se-subtle-bg); cursor: not-allowed; color: var(--se-fg-meta); } .se-file:disabled::file-selector-button { background: var(--se-border-light); color: var(--se-fg-meta); cursor: not-allowed; } /* ---------- 2) Dropzone ---------- */ .se-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; padding: 1.75rem 1.25rem; background: var(--se-subtle-bg); border: 1.5px dashed var(--se-border-form); border-radius: var(--se-radius-xl); text-align: center; cursor: pointer; transition: border-color var(--se-transition-fast), background var(--se-transition-fast); } .se-dropzone:hover, .se-dropzone:focus-within { border-color: var(--se-primary); background: var(--se-primary-nav-bg); } .se-dropzone.is-dragover { border-color: var(--se-primary); background: var(--se-primary-nav-bg); border-style: solid; } .se-dropzone-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .se-dropzone .bi, .se-dropzone-icon { font-size: 1.75rem; color: var(--se-primary); line-height: 1; } .se-dropzone-text { font-family: var(--se-font-sans); font-size: var(--se-text-md); color: var(--se-fg-strong); } .se-dropzone-text strong { color: var(--se-primary); font-weight: var(--se-weight-bold); } .se-dropzone-hint { font-size: var(--se-text-xs); color: var(--se-fg-meta); } /* Selected file preview row (poblada via JS) */ .se-file-selected { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.75rem; background: var(--se-primary-nav-bg); border: 1px solid var(--se-primary-nav-border); border-radius: var(--se-radius-md); font-family: var(--se-font-sans); font-size: var(--se-text-md); color: var(--se-fg-strong); margin-top: 0.5rem; } .se-file-selected .bi { color: var(--se-primary); flex-shrink: 0; } .se-file-selected-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .se-file-selected-size { color: var(--se-fg-meta); font-size: var(--se-text-xs); flex-shrink: 0; } .se-file-selected-remove { background: transparent; border: 0; color: var(--se-fg-meta); cursor: pointer; padding: 0.15rem 0.35rem; border-radius: var(--se-radius-sm); transition: background var(--se-transition-fast), color var(--se-transition-fast); } .se-file-selected-remove:hover { background: var(--se-danger-soft); color: var(--se-danger); } /* Error state */ .se-dropzone.is-invalid, .se-file.is-invalid { border-color: var(--se-danger); } /* ========================================================== SE Chiapas UIKit — Uploader multi-categoría con preview Orquestado por SeChiapas.uploader. Pensado para vivir dentro de un modal (subir varios documentos/fotos a una entidad en 1+ categorías: Antes/Después, Recepción/Entrega/Mantenimiento) con previsualizador lateral. ========================================================== */ .se-uploader { display: grid; grid-template-columns: 1fr 280px; gap: 1rem; min-height: 320px; } @media (max-width: 640px) { .se-uploader { grid-template-columns: 1fr; } } .se-uploader-main { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; } /* ---- Tabs de categoría ---- */ .se-uploader-tabs { display: inline-flex; gap: 0.35rem; flex-wrap: wrap; } .se-uploader-tab { border: 1px solid var(--se-border); background: var(--se-card-bg); border-radius: var(--se-radius-pill); padding: 0.3rem 0.8rem; font-size: var(--se-text-sm); color: var(--se-fg-muted); cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; } .se-uploader-tab.is-active { background: var(--se-primary-nav-bg); color: var(--se-primary); border-color: var(--se-primary-nav-border); font-weight: var(--se-weight-semibold); } .se-uploader-tab:focus-visible { outline: 2px solid var(--se-focus, var(--se-primary)); outline-offset: 2px; } .se-uploader-tab-count { background: var(--se-subtle-bg); color: var(--se-fg-muted); border-radius: var(--se-radius-pill); padding: 0 0.4rem; font-size: var(--se-text-xs); font-family: var(--se-font-mono); } .se-uploader-tab.is-active .se-uploader-tab-count { background: rgba(var(--se-primary-rgb), 0.15); color: var(--se-primary); } /* ---- Dropzone ---- */ .se-uploader-drop { border: 2px dashed var(--se-border-form); border-radius: var(--se-radius-lg); background: var(--se-input-bg); padding: 1.25rem; text-align: center; color: var(--se-fg-muted); transition: border-color var(--se-transition-fast), background var(--se-transition-fast); } .se-uploader-drop.is-dragover { border-color: var(--se-primary); background: var(--se-primary-nav-bg); color: var(--se-primary); } .se-uploader-drop .bi { font-size: 1.6rem; display: block; margin-bottom: 0.35rem; } .se-uploader-browse { background: none; border: 0; padding: 0; color: var(--se-primary-text); font-weight: var(--se-weight-semibold); cursor: pointer; text-decoration: underline; } /* ---- Grid de thumbnails ---- */ .se-uploader-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 0.5rem; } .se-uploader-thumb { position: relative; aspect-ratio: 1; border-radius: var(--se-radius-md); overflow: hidden; border: 1px solid var(--se-border); cursor: pointer; background: var(--se-subtle-bg); padding: 0; } .se-uploader-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .se-uploader-thumb.is-selected { outline: 2px solid var(--se-primary); outline-offset: 1px; } .se-uploader-thumb:focus-visible { outline: 2px solid var(--se-focus, var(--se-primary)); outline-offset: 1px; } .se-uploader-thumb-doc { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--se-fg-subtle); font-size: 1.5rem; } .se-uploader-thumb-x { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border: 0; border-radius: var(--se-radius-circle); background: var(--se-overlay-dark); color: #fff; font-size: 10px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; } /* ---- Panel de preview ---- */ .se-uploader-preview { border: 1px solid var(--se-border-light); border-radius: var(--se-radius-lg); background: var(--se-surface-bg); padding: 0.75rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; text-align: center; min-height: 200px; } .se-uploader-preview img { max-width: 100%; max-height: 240px; border-radius: var(--se-radius-md); object-fit: contain; } .se-uploader-preview-name { font-size: var(--se-text-sm); color: var(--se-fg-body); word-break: break-all; } .se-uploader-preview-empty { color: var(--se-fg-subtle); font-size: var(--se-text-sm); } /* ========================================================== SE Chiapas Kit: Date / Time / Datetime inputs ---------------------------------------------------------- Estiliza inputs nativos type="date|datetime-local|time|month|week". Hereda de .se-input pero ajusta el calendar picker indicator y agrega utilidades para rangos (input + "al" + input). Markup basico: Date range:
al
========================================================== */ /* Aseguramos accent-color institucional en el picker nativo */ input[type="date"].se-input, input[type="datetime-local"].se-input, input[type="time"].se-input, input[type="month"].se-input, input[type="week"].se-input { accent-color: var(--se-primary); font-family: var(--se-font-sans); font-size: var(--se-text-md); line-height: 1.4; } /* El icono nativo de calendario en webkit — teñido institucional via filter */ input[type="date"].se-input::-webkit-calendar-picker-indicator, input[type="datetime-local"].se-input::-webkit-calendar-picker-indicator, input[type="time"].se-input::-webkit-calendar-picker-indicator, input[type="month"].se-input::-webkit-calendar-picker-indicator, input[type="week"].se-input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.55; transition: opacity var(--se-transition-fast); padding: 0.15rem; border-radius: var(--se-radius-sm); } input[type="date"].se-input::-webkit-calendar-picker-indicator:hover, input[type="datetime-local"].se-input::-webkit-calendar-picker-indicator:hover, input[type="time"].se-input::-webkit-calendar-picker-indicator:hover { opacity: 1; background: var(--se-primary-nav-bg); } input[type="date"].se-input::-webkit-calendar-picker-indicator:focus-visible, input[type="datetime-local"].se-input::-webkit-calendar-picker-indicator:focus-visible, input[type="time"].se-input::-webkit-calendar-picker-indicator:focus-visible { outline: 2px solid var(--se-focus, var(--se-primary)); outline-offset: 2px; } /* Estado vacio del date: el placeholder visual del navegador suele estar gris claro */ input[type="date"].se-input:not(:focus):not([value]):in-range::-webkit-datetime-edit, input[type="date"].se-input:invalid::-webkit-datetime-edit { color: var(--se-fg-meta); } /* ---------- Date range (par de inputs + separador) ---------- */ .se-date-range { display: flex; align-items: center; gap: 0.5rem; flex-wrap: nowrap; } .se-date-range > .se-input { flex: 1 1 auto; min-width: 0; } .se-date-range-sep { flex-shrink: 0; font-family: var(--se-font-sans); font-size: var(--se-text-md); font-weight: var(--se-weight-semibold); color: var(--se-fg-meta); padding: 0 0.15rem; } @media (max-width: 480px) { .se-date-range { flex-wrap: wrap; } .se-date-range-sep { width: 100%; text-align: center; padding: 0.15rem 0; } } /* Time-only compact variant — ancho fijo para HH:MM */ .se-input--time { max-width: 140px; } .se-input--date { max-width: 180px; } .se-input--datetime { max-width: 220px; } .se-input--month { max-width: 180px; } .se-input--week { max-width: 180px; } /* ========================================================== SE Chiapas Kit: Tabs (adapter sobre Bootstrap 5) ---------------------------------------------------------- Funciona con nav-tabs / nav-pills de Bootstrap (el JS de data-bs-toggle="tab" sigue siendo de Bootstrap). Override visual: underline animado, sin borders ni fondos pesados. Markup (estilo underline):
...
...
Markup (estilo pills):
    ...
========================================================== */ /* ---------- UNDERLINE TABS (default) ---------- */ .se-tabs { border-bottom: 1px solid var(--se-border-light); gap: 0.25rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; } .se-tabs .nav-item { margin-bottom: -1px; } .se-tabs .nav-link { position: relative; background: transparent; border: 0; border-radius: 0; padding: 0.65rem 1rem; font-family: var(--se-font-sans); font-size: var(--se-text-md); font-weight: var(--se-weight-medium); color: var(--se-fg-muted); cursor: pointer; transition: color var(--se-transition-fast); display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; } .se-tabs .nav-link::after { content: ''; position: absolute; left: 0.5rem; right: 0.5rem; bottom: -1px; height: 2px; background: transparent; border-radius: 2px 2px 0 0; transition: background var(--se-transition-fast); } .se-tabs .nav-link:hover { color: var(--se-fg-strong); } .se-tabs .nav-link:hover::after { background: var(--se-border-form); } .se-tabs .nav-link.active, .se-tabs .nav-link[aria-selected="true"] { color: var(--se-primary); font-weight: var(--se-weight-semibold); } .se-tabs .nav-link.active::after, .se-tabs .nav-link[aria-selected="true"]::after { background: var(--se-primary); } .se-tabs .nav-link:focus-visible { outline: none; box-shadow: var(--se-focus-ring, 0 0 0 3px rgba(var(--se-primary-rgb), 0.18)); border-radius: var(--se-radius-sm); } .se-tabs .nav-link:disabled, .se-tabs .nav-link.disabled { color: var(--se-fg-subtle); cursor: not-allowed; pointer-events: none; } /* Optional: badge dentro del tab */ .se-tabs .nav-link .se-badge, .se-tabs .nav-link .badge { font-size: var(--se-text-xs); } /* ---------- PILLS ---------- */ .se-pills { gap: 0.35rem; border: 0; flex-wrap: wrap; } .se-pills .nav-link { background: transparent; border: 1px solid transparent; border-radius: var(--se-radius-pill); padding: 0.4rem 0.95rem; font-family: var(--se-font-sans); font-size: var(--se-text-md); font-weight: var(--se-weight-medium); color: var(--se-fg-muted); transition: background var(--se-transition-fast), color var(--se-transition-fast), border-color var(--se-transition-fast); display: inline-flex; align-items: center; gap: 0.4rem; } .se-pills .nav-link:hover { background: var(--se-subtle-bg); color: var(--se-fg-strong); } .se-pills .nav-link.active, .se-pills .nav-link[aria-selected="true"] { background: var(--se-primary-nav-bg); color: var(--se-primary); border-color: var(--se-primary-nav-border); font-weight: var(--se-weight-semibold); } .se-pills .nav-link:focus-visible { outline: none; box-shadow: var(--se-focus-ring, 0 0 0 3px rgba(var(--se-primary-rgb), 0.18)); } /* ---------- Pill con dropdown ----------
    • …
    • El caret lo aporta Bootstrap (.dropdown-toggle::after); el menú usa .se-dropdown-menu para heredar el estilo institucional. */ .se-pills .nav-item.dropdown .nav-link.dropdown-toggle { gap: 0.3rem; } .se-pills .nav-link.dropdown-toggle.show, .se-pills .nav-link.dropdown-toggle[aria-expanded="true"] { background: var(--se-primary-nav-bg); color: var(--se-primary); border-color: var(--se-primary-nav-border); font-weight: var(--se-weight-semibold); } /* ---------- TAB CONTENT fade (matchear Bootstrap) ---------- */ .tab-content > .tab-pane.fade { transition: opacity var(--se-transition-base); } /* ========================================================== SE Chiapas Kit: Dropdown (adapter sobre Bootstrap 5) ---------------------------------------------------------- Funciona con data-bs-toggle="dropdown" de Bootstrap (JS). Override del dropdown-menu / dropdown-item con tokens. Markup tipico:
    ========================================================== */ .se-dropdown .dropdown-menu, .dropdown-menu.se-dropdown-menu { background: var(--se-card-bg); border: 1px solid var(--se-border-light); border-radius: var(--se-radius-md); box-shadow: var(--se-shadow-lg); padding: 0.35rem; margin-top: 0.35rem; min-width: 12rem; font-family: var(--se-font-sans); } .se-dropdown .dropdown-item, .dropdown-menu.se-dropdown-menu .dropdown-item { display: flex; align-items: center; gap: 0.55rem; padding: 0.5rem 0.7rem; border-radius: var(--se-radius-sm); font-size: var(--se-text-md); color: var(--se-fg-strong); background: transparent; border: 0; width: 100%; text-align: left; cursor: pointer; transition: background var(--se-transition-fast), color var(--se-transition-fast); white-space: nowrap; } .se-dropdown .dropdown-item .bi, .dropdown-menu.se-dropdown-menu .dropdown-item .bi { color: var(--se-fg-meta); font-size: 0.95rem; flex-shrink: 0; transition: color var(--se-transition-fast); } .se-dropdown .dropdown-item:hover, .se-dropdown .dropdown-item:focus, .dropdown-menu.se-dropdown-menu .dropdown-item:hover, .dropdown-menu.se-dropdown-menu .dropdown-item:focus { background: var(--se-primary-nav-bg); color: var(--se-primary); outline: none; } /* Foco de teclado visible (WCAG 2.4.7) — el :focus de arriba quita el outline. */ .se-dropdown .dropdown-item:focus-visible, .dropdown-menu.se-dropdown-menu .dropdown-item:focus-visible { outline: 2px solid var(--se-focus, var(--se-primary)); outline-offset: -2px; } .se-dropdown .dropdown-item:hover .bi, .dropdown-menu.se-dropdown-menu .dropdown-item:hover .bi { color: var(--se-primary); } .se-dropdown .dropdown-item.active, .dropdown-menu.se-dropdown-menu .dropdown-item.active { background: var(--se-primary); color: white; } .se-dropdown .dropdown-item.active .bi, .dropdown-menu.se-dropdown-menu .dropdown-item.active .bi { color: white; } .se-dropdown .dropdown-item:disabled, .se-dropdown .dropdown-item.disabled, .dropdown-menu.se-dropdown-menu .dropdown-item:disabled { color: var(--se-fg-subtle); cursor: not-allowed; background: transparent; } /* Danger item (eliminar, descartar, salir) */ .se-dropdown .dropdown-item--danger, .dropdown-menu.se-dropdown-menu .dropdown-item--danger, .se-dropdown .dropdown-item.text-danger { color: var(--se-danger); } .se-dropdown .dropdown-item--danger .bi, .dropdown-menu.se-dropdown-menu .dropdown-item--danger .bi { color: var(--se-danger); } .se-dropdown .dropdown-item--danger:hover, .dropdown-menu.se-dropdown-menu .dropdown-item--danger:hover { background: var(--se-danger-soft); color: var(--se-danger); } .se-dropdown .dropdown-item--danger:hover .bi { color: var(--se-danger); } /* Header (titulo de grupo) */ .se-dropdown .dropdown-header, .dropdown-menu.se-dropdown-menu .dropdown-header { font-size: var(--se-text-xxs); font-weight: var(--se-weight-bold); text-transform: uppercase; letter-spacing: var(--se-tracking-xwide); color: var(--se-fg-meta); padding: 0.55rem 0.7rem 0.25rem; margin: 0; } /* Separador */ .se-dropdown .dropdown-divider, .dropdown-menu.se-dropdown-menu .dropdown-divider { margin: 0.35rem 0; border-color: var(--se-border-light); } /* Item con descripcion (dos lineas) */ .se-dropdown .dropdown-item-desc { display: block; font-size: var(--se-text-xs); color: var(--se-fg-meta); font-weight: var(--se-weight-regular); margin-top: 0.1rem; } /* Trigger caret nativo de Bootstrap mas sutil */ .se-dropdown .dropdown-toggle::after { border-top-color: currentColor; opacity: 0.7; } /* ========================================================== SE Chiapas UIKit — Split button (.se-split) Acción principal + caret que abre un .se-dropdown. Reemplazo MODERNO de .kit-split-btn (legacy). Adapter sobre el dropdown de Bootstrap (data-bs-toggle="dropdown"). ----------------------------------------------------------
    ========================================================== */ .se-split { display: inline-flex; position: relative; } /* Acción principal: esquinas redondeadas solo a la izquierda. */ .se-split > .se-btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } /* Caret: esquinas solo a la derecha, más angosto, con separador. */ .se-split > .se-split-caret { border-top-left-radius: 0; border-bottom-left-radius: 0; padding-left: 0.5rem; padding-right: 0.5rem; border-left: 1px solid rgba(0, 0, 0, 0.12); } .se-split > .se-split-caret i { transition: transform var(--se-transition-fast); } .se-split > .se-split-caret[aria-expanded="true"] i { transform: rotate(180deg); } /* Separador claro cuando la variante es sólida (texto blanco sobre marca). */ .se-split > .se-btn-brand.se-split-caret, .se-split > .se-btn-secondary.se-split-caret { border-left-color: rgba(255, 255, 255, 0.3); } /* ========================================================== SE Chiapas Kit: Tooltip (adapter sobre Bootstrap 5) ---------------------------------------------------------- Bootstrap maneja la activacion (data-bs-toggle="tooltip" + new bootstrap.Tooltip()). Aqui solo redefinimos look. Activacion en JS: [...document.querySelectorAll('[data-bs-toggle="tooltip"]')] .forEach(el => new bootstrap.Tooltip(el)); Markup: ========================================================== */ .tooltip { font-family: var(--se-font-sans); --bs-tooltip-bg: var(--se-fg-strong); --bs-tooltip-color: white; --bs-tooltip-font-size: var(--se-text-xs); --bs-tooltip-padding-x: 0.6rem; --bs-tooltip-padding-y: 0.35rem; --bs-tooltip-margin: 0.4rem; --bs-tooltip-border-radius: var(--se-radius-md); --bs-tooltip-opacity: 1; } .tooltip .tooltip-inner { background: var(--se-fg-strong); color: white; font-weight: var(--se-weight-medium); letter-spacing: var(--se-tracking-normal); padding: 0.35rem 0.6rem; border-radius: var(--se-radius-md); box-shadow: var(--se-shadow-sm); max-width: 280px; text-align: left; line-height: 1.4; } .tooltip .tooltip-arrow::before { border-top-color: var(--se-fg-strong); border-bottom-color: var(--se-fg-strong); border-left-color: var(--se-fg-strong); border-right-color: var(--se-fg-strong); } /* Variant: tooltip claro (sobre fondo oscuro) */ .tooltip.tooltip--light .tooltip-inner { background: white; color: var(--se-fg-strong); border: 1px solid var(--se-border-light); box-shadow: var(--se-shadow-md); } .tooltip.tooltip--light .tooltip-arrow::before { border-top-color: white; border-bottom-color: white; border-left-color: white; border-right-color: white; } /* Variant: tooltip danger (warning destructivo) */ .tooltip.tooltip--danger .tooltip-inner { background: var(--se-danger); } .tooltip.tooltip--danger .tooltip-arrow::before { border-top-color: var(--se-danger); border-bottom-color: var(--se-danger); border-left-color: var(--se-danger); border-right-color: var(--se-danger); } /* ========================================================== SE Chiapas Kit: Definition List ---------------------------------------------------------- Para pares clave/valor en vistas Details. Reemplaza el patron repetido de
    `. Funcionan también fuera de tablas (cards, listas). ========================================================== */ /* ---------------------------------------------------------- 1 · Plate cell — identificador con stripe de tono ---------------------------------------------------------- Markup:
    XYZ-123-D
    CVH-00247
    El stripe acepta: is-success / is-warning / is-danger / is-neutral. Sin modifier queda gris muy claro. ---------------------------------------------------------- */ .se-cell-plate { display: flex; align-items: center; gap: 0.55rem; } .se-cell-plate-stripe { width: 4px; height: 26px; border-radius: 2px; background: var(--se-fg-subtle); flex-shrink: 0; } .se-cell-plate-stripe.is-success { background: var(--se-success); } .se-cell-plate-stripe.is-warning { background: var(--se-warning); } .se-cell-plate-stripe.is-danger { background: var(--se-danger); } .se-cell-plate-stripe.is-info { background: var(--se-info); } .se-cell-plate-stripe.is-neutral { background: var(--se-neutral); } .se-cell-plate-main { font-family: var(--se-font-mono); font-size: var(--se-text-md); font-weight: var(--se-weight-bold); letter-spacing: 0.04em; color: var(--se-fg-strong); line-height: 1.15; } .se-cell-plate-sub { font-family: var(--se-font-sans); font-weight: var(--se-weight-medium); font-size: var(--se-text-xs); color: var(--se-fg-muted); letter-spacing: 0; margin-top: 1px; } /* ---------------------------------------------------------- 2 · Person cell — avatar circular + identidad ---------------------------------------------------------- Markup:
    LH
    Luis Hernández R.
    Sec. Educación · Activo
    Vacío: — sin asignar — Tonos de avatar (alternables para distinguir personas en listados largos): tone-a (azul), tone-b (terracota), tone-c (verde), tone-d (vinotinto). Sin tono = guinda institucional. ---------------------------------------------------------- */ .se-cell-pers { display: flex; align-items: center; gap: 0.5rem; } .se-cell-pers-avatar { width: 28px; height: 28px; border-radius: var(--se-radius-circle); background: linear-gradient(135deg, var(--se-primary), color-mix(in oklab, var(--se-primary) 75%, white)); color: white; display: grid; place-items: center; font-family: var(--se-font-sans); font-size: var(--se-text-xs); font-weight: var(--se-weight-bold); flex-shrink: 0; letter-spacing: 0.02em; text-transform: uppercase; } .se-cell-pers-avatar.tone-a { background: linear-gradient(135deg, #5C7BC2, #3B5C9E); } .se-cell-pers-avatar.tone-b { background: linear-gradient(135deg, #8A4A2C, #6E3A24); } .se-cell-pers-avatar.tone-c { background: linear-gradient(135deg, #2C7A4A, #1F5A38); } .se-cell-pers-avatar.tone-d { background: linear-gradient(135deg, #A04B5E, #7E3A4A); } .se-cell-pers-name { font-weight: var(--se-weight-semibold, 600); font-size: var(--se-text-md); color: var(--se-fg-strong); line-height: 1.2; } .se-cell-pers-meta { font-size: var(--se-text-xs); color: var(--se-fg-muted); margin-top: 1px; } .se-cell-pers.is-empty { color: var(--se-fg-muted); font-style: italic; font-size: var(--se-text-md); } /* ========================================================== SE Chiapas Kit: Preview Card — v2.4 ---------------------------------------------------------- Tarjeta de vista previa "en vivo" que muestra como lucira un registro mientras se captura. Pensada para sidebars de formularios Create donde antes habia un "Resumen del Alta" estatico e inutil. Live updates via JS: la captura del formulario llama una funcion update() que reescribe textContent por id de los slots. Markup minimo:
    Vista previa EN VIVO
    Modelo 2026

    Pendientes

    Vincular poliza
    ========================================================== */ .se-preview-card { background: var(--se-card-bg); border: 1px solid var(--se-border-soft); border-radius: var(--se-radius-md); overflow: hidden; position: relative; } .se-preview-card::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--se-primary); opacity: 0.6; } .se-preview-card-head { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 0.85rem 0.5rem; border-bottom: 1px solid var(--se-border-light); font-family: var(--se-font-mono); font-size: var(--se-text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--se-fg-muted); } .se-preview-card-live { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--se-success); font-weight: var(--se-weight-bold); } .se-preview-card-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--se-success); animation: se-preview-card-live-pulse 1.4s ease-in-out infinite; flex-shrink: 0; } @keyframes se-preview-card-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .se-preview-card-body { padding: 0.85rem; } /* Meta grid: pares clave/valor en chips suaves */ .se-preview-card-meta { margin-top: 0.75rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; } .se-preview-card-meta > div { padding: 0.5rem 0.6rem; background: var(--se-subtle-bg); border-radius: var(--se-radius-sm, 6px); } .se-preview-card-meta-k { display: block; font-family: var(--se-font-mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--se-fg-muted); font-weight: var(--se-weight-bold); margin-bottom: 0.1rem; } .se-preview-card-meta-v { font-size: var(--se-text-md); font-weight: var(--se-weight-bold); color: var(--se-fg-strong); } /* Checklist de proximos pasos */ .se-preview-card-checklist { margin-top: 0.85rem; padding-top: 0.75rem; border-top: 1px solid var(--se-border-light); } .se-preview-card-checklist-title { font-family: var(--se-font-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--se-fg-muted); font-weight: var(--se-weight-bold); margin: 0 0 0.4rem; } .se-preview-card-checklist-item { display: flex; align-items: center; gap: 0.4rem; font-size: var(--se-text-md); padding: 0.15rem 0; } .se-preview-card-checklist-check { width: 14px; height: 14px; border-radius: 50%; display: grid; place-items: center; font-size: 0.55rem; flex-shrink: 0; } .se-preview-card-checklist-item.is-done { color: var(--se-fg-strong); } .se-preview-card-checklist-item.is-done .se-preview-card-checklist-check { background: color-mix(in oklab, var(--se-success) 12%, white); color: var(--se-success); } .se-preview-card-checklist-item.is-pending { color: var(--se-fg-muted); } .se-preview-card-checklist-item.is-pending .se-preview-card-checklist-check { background: color-mix(in oklab, var(--se-warning) 12%, white); color: var(--se-warning-text); } /* ========================================================== SE Chiapas Kit: Details Layout — v2.4 ---------------------------------------------------------- Patrones para vistas Details (expedientes ricos): 1) .se-details-hero — card hero con eyebrow + title + meta 2) .se-spec-grid — grid 2-col de tiles clave/valor 3) .se-identity-card — sidebar card con foto + datos + footer Diseñado para que vistas Details de cualquier modulo (Vehiculos, Proveedores, Conductores, Seguros, Siniestros) reusen los mismos building blocks. ========================================================== */ /* ---------------------------------------------------------- 1 · Details Hero card ---------------------------------------------------------- Markup:

    EXPEDIENTE · FOLIO 247

    Nissan Sentra Advance

    Modelo 2024 · …

    Placas XYZ-123-D
    …
    Disponible
    ---------------------------------------------------------- */ .se-details-hero { padding: 0; overflow: hidden; } .se-details-hero-top { padding: 1.5rem 1.5rem 1rem; border-bottom: 1px solid var(--se-border-soft); } .se-details-hero-meta { padding: 0.85rem 1.5rem; background: var(--se-subtle-bg); display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; font-size: var(--se-text-sm); } .se-details-hero-meta-k { font-size: var(--se-text-xs); letter-spacing: 0.04em; color: var(--se-fg-muted); font-weight: var(--se-weight-medium); margin-right: 0.3rem; } /* ---------------------------------------------------------- 2 · Spec grid ---------------------------------------------------------- Tiles 2-col para mostrar pares clave/valor en una ficha: ej. Especificaciones tecnicas. En movil colapsa a 1 col. Markup:
    Numero de serie
    3N1AB7AP4KY217845
    …
    ---------------------------------------------------------- */ .se-spec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.85rem; } @media (max-width: 640px) { .se-spec-grid { grid-template-columns: 1fr; } } .se-spec-tile { padding: 0.85rem 1rem; background: var(--se-subtle-bg); border: 1px solid var(--se-border-soft); border-radius: var(--se-radius-md); } .se-spec-tile-k { font-size: var(--se-text-xs); color: var(--se-fg-muted); letter-spacing: 0.02em; margin-bottom: 0.3rem; } .se-spec-tile-v { font-size: 0.95rem; font-weight: var(--se-weight-bold); color: var(--se-fg-strong); line-height: 1.3; word-break: break-word; } /* ---------------------------------------------------------- 3 · Identity card (sidebar de Details) ---------------------------------------------------------- Card con foto en la parte superior, datos identitarios en el centro y footer con persona asignada (resguardante, titular, conductor, etc). Markup:
    … … 12

    XYZ-123-D

    …
    ---------------------------------------------------------- */ .se-identity-card { overflow: hidden; } .se-identity-card-photo { position: relative; aspect-ratio: 4 / 3; background: linear-gradient(135deg, var(--se-subtle-bg), color-mix(in oklab, var(--se-tertiary-dark) 12%, var(--se-subtle-bg))); display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--se-border-soft); overflow: hidden; } .se-identity-card-photo > img { width: 100%; height: 100%; object-fit: cover; } .se-identity-card-photo-placeholder { font-size: 5rem; color: var(--se-fg-subtle); opacity: 0.35; } .se-identity-card-photo-badge { position: absolute; top: 0.75rem; left: 0.75rem; } .se-identity-card-photo-count { position: absolute; bottom: 0.75rem; right: 0.75rem; background: rgba(0, 0, 0, 0.65); color: white; padding: 0.2rem 0.55rem; border-radius: var(--se-radius-pill, 999px); font-family: var(--se-font-mono); font-size: var(--se-text-xs); display: inline-flex; align-items: center; gap: 0.3rem; } .se-identity-card-plates { font-size: var(--se-text-xl); letter-spacing: 0.05em; margin: 0 0 0.25rem; display: flex; align-items: center; gap: 0.4rem; } .se-identity-card-foot { background: var(--se-subtle-bg); padding: 1rem; border-top: 1px solid var(--se-border-soft); } /* ========================================================== SE Chiapas Component: Save State Indicator Feedback visual de estado de guardado en formularios. Patron tipo Google Docs: idle -> dirty -> saving -> saved. Estructura: Sin cambios Guardando... Guardado hace 3s Estados: --idle | --dirty | --saving | --saved | --error Tamanos: (default) | --inline | --block ========================================================== */ .se-save-state { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; border-radius: var(--se-radius-pill, 999px); background-color: var(--se-subtle-bg); font-size: var(--se-text-sm); font-weight: var(--se-weight-medium); color: var(--se-fg-muted); transition: background-color 0.2s ease, color 0.2s ease; user-select: none; white-space: nowrap; line-height: 1; } .se-save-state-dot { width: 8px; height: 8px; border-radius: var(--se-radius-circle); background-color: currentColor; flex-shrink: 0; } .se-save-state-icon { display: inline-flex; align-items: center; font-size: 1em; flex-shrink: 0; line-height: 1; } .se-save-state-text { line-height: 1; } .se-save-state-meta { color: var(--se-fg-meta); font-weight: var(--se-weight-regular); font-size: var(--se-text-xs); padding-left: 0.25rem; border-left: 1px solid color-mix(in oklab, currentColor 25%, transparent); } /* ---- Estados ---- */ .se-save-state--idle { background-color: var(--se-subtle-bg); color: var(--se-fg-meta); } .se-save-state--dirty { background-color: color-mix(in oklab, var(--se-info) 10%, var(--se-card-bg)); color: var(--se-info); } .se-save-state--dirty .se-save-state-dot { animation: se-save-pulse 1.6s ease-in-out infinite; } .se-save-state--saving { background-color: color-mix(in oklab, var(--se-primary) 10%, var(--se-card-bg)); color: var(--se-primary); } .se-save-state--saving .se-save-state-icon { animation: se-save-spin 0.85s linear infinite; } .se-save-state--saved { background-color: color-mix(in oklab, var(--se-success) 12%, var(--se-card-bg)); color: var(--se-success); animation: se-save-fade-in 0.3s ease-out; } .se-save-state--error { background-color: color-mix(in oklab, var(--se-danger) 12%, var(--se-card-bg)); color: var(--se-danger); } /* ---- Variantes de tamano ---- */ .se-save-state--inline { padding: 0.125rem 0.5rem; font-size: var(--se-text-xs); gap: 0.375rem; } .se-save-state--inline .se-save-state-dot { width: 6px; height: 6px; } .se-save-state--block { padding: 0.5rem 1rem; font-size: var(--se-text-base); gap: 0.625rem; } .se-save-state--block .se-save-state-dot { width: 10px; height: 10px; } /* ---- Animations ---- */ @keyframes se-save-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.7); } } @keyframes se-save-spin { to { transform: rotate(360deg); } } @keyframes se-save-fade-in { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: translateY(0); } } /* ---- Retry button (estado error con accion de reintento) ---- */ .se-save-state-retry { background: transparent; border: 1px solid currentColor; color: inherit; border-radius: var(--se-radius-sm); padding: 2px 8px; margin-left: 0.25rem; font-family: var(--se-font-sans); font-size: var(--se-text-xs); font-weight: var(--se-weight-bold); letter-spacing: 0.02em; cursor: pointer; transition: all var(--se-transition-base); } .se-save-state-retry:hover { background: currentColor; color: var(--se-card-bg); } .se-save-state-retry:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } /* ========================================================== SE Chiapas Component: Confirm Dialog (destructive actions) Modal para confirmar acciones graves con typed-name verification. No confundir con `.kit-confirm__*` (legacy v1, BEM namespace). Estructura: Tonos: --danger (default) | --warning | --info ========================================================== */ .se-confirm-overlay { position: fixed; inset: 0; background-color: color-mix(in oklab, var(--se-fg-strong) 65%, transparent); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 1080; animation: se-confirm-overlay-in 0.2s ease-out; } .se-confirm { background-color: var(--se-card-bg); border-radius: var(--se-radius-xl); box-shadow: var(--se-shadow-xl, 0 25px 50px -12px rgba(0, 0, 0, 0.35)); width: 100%; max-width: 480px; padding: 2rem; position: relative; animation: se-confirm-in 0.25s cubic-bezier(0.16, 1, 0.3, 1); } .se-confirm-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--se-radius-circle); margin-bottom: 1rem; font-size: var(--se-text-2xl); line-height: 1; } .se-confirm-title { font-size: var(--se-text-xl); font-weight: var(--se-weight-bold); color: var(--se-fg-strong); margin: 0 0 0.5rem 0; line-height: 1.3; } .se-confirm-body { font-size: var(--se-text-base); color: var(--se-fg-muted); margin: 0 0 1.25rem 0; line-height: 1.55; } .se-confirm-body strong { color: var(--se-fg-strong); } .se-confirm-callout { display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.75rem 0.875rem; margin: 0 0 1.25rem 0; background-color: color-mix(in oklab, var(--se-warning) 8%, var(--se-card-bg)); border-left: 3px solid var(--se-warning); border-radius: var(--se-radius-sm); font-size: var(--se-text-sm); color: var(--se-fg-strong); line-height: 1.4; } .se-confirm-callout i { color: var(--se-warning-text); font-size: 1.1em; flex-shrink: 0; } /* ---- Typed verification ---- */ .se-confirm-typed { margin-bottom: 1.5rem; } .se-confirm-typed > label { display: block; font-size: var(--se-text-sm); color: var(--se-fg-muted); margin-bottom: 0.5rem; line-height: 1.4; } .se-confirm-typed code { display: inline-block; padding: 0.0625rem 0.375rem; background-color: var(--se-subtle-bg); border: 1px solid var(--se-border-light); border-radius: var(--se-radius-sm); font-family: var(--se-font-mono); font-size: 0.95em; font-weight: var(--se-weight-semibold); color: var(--se-fg-strong); user-select: all; } .se-confirm-typed-input { display: block; width: 100%; padding: 0.625rem 0.875rem; font-family: var(--se-font-mono); font-size: var(--se-text-base); border: 2px solid var(--se-border-soft); border-radius: var(--se-radius-md); background-color: var(--se-card-bg); color: var(--se-fg-strong); transition: border-color 0.15s, box-shadow 0.15s; } .se-confirm-typed-input:focus { outline: none; border-color: var(--se-primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--se-primary) 22%, transparent); } .se-confirm-typed-input.is-match { border-color: var(--se-success); box-shadow: 0 0 0 3px color-mix(in oklab, var(--se-success) 22%, transparent); } .se-confirm-typed-input.is-mismatch { border-color: var(--se-danger); box-shadow: 0 0 0 3px color-mix(in oklab, var(--se-danger) 18%, transparent); } /* ---- Actions footer ---- */ .se-confirm-actions { display: flex; gap: 0.625rem; justify-content: flex-end; align-items: center; } /* ---- Tones (definen color del icono) ---- */ .se-confirm--danger .se-confirm-icon { background-color: color-mix(in oklab, var(--se-danger) 12%, var(--se-card-bg)); color: var(--se-danger); } .se-confirm--warning .se-confirm-icon { background-color: color-mix(in oklab, var(--se-warning) 14%, var(--se-card-bg)); color: var(--se-warning-text); } .se-confirm--info .se-confirm-icon { background-color: color-mix(in oklab, var(--se-info) 12%, var(--se-card-bg)); color: var(--se-info); } /* ---- Variants sin typed-verification (confirmacion simple) ---- */ .se-confirm--simple { max-width: 420px; } .se-confirm--simple .se-confirm-typed { display: none; } /* ---- Animations ---- */ @keyframes se-confirm-overlay-in { from { opacity: 0; } to { opacity: 1; } } @keyframes se-confirm-in { from { opacity: 0; transform: translateY(8px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ---- Responsive ---- */ @media (max-width: 575.98px) { .se-confirm { padding: 1.5rem 1.25rem; } .se-confirm-actions { flex-direction: column-reverse; align-items: stretch; } .se-confirm-actions .se-btn { width: 100%; justify-content: center; } } /* ========================================================== SE Chiapas Component: Notification Center Badge counter en nav items + panel/drawer lateral con avisos. Estructura: 1) Badge sobre cualquier ícono/nav item: 12 2) Trigger en topbar: 3) Panel/drawer con items: ========================================================== */ /* ---- Badge contador sobre nav items ---- */ .se-nav-badge { position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 5px; background-color: var(--se-danger); color: var(--se-on-danger, #fff); border-radius: var(--se-radius-pill, 999px); font-size: 10.5px; font-weight: var(--se-weight-bold); line-height: 18px; text-align: center; border: 2px solid var(--se-card-bg); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); pointer-events: none; z-index: 1; } .se-nav-badge--dot { min-width: 10px; height: 10px; padding: 0; line-height: 0; font-size: 0; } .se-nav-badge--muted { background-color: var(--se-fg-meta); color: white; } .se-nav-badge--info { background-color: var(--se-info); color: white; } /* Tamaño pequeno (sidebar items con icono mas chico) */ .se-nav-badge--sm { min-width: 16px; height: 16px; padding: 0 4px; font-size: 9.5px; line-height: 16px; } /* Para el sidebar collapsed, badge sale del lado derecho */ .se-sidebar.is-collapsed .se-nav-badge { top: 4px; right: 4px; } /* ---- Trigger boton (topbar bell) ---- */ .se-notification-trigger { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: none; background: transparent; border-radius: var(--se-radius-md); color: var(--se-fg-strong); cursor: pointer; transition: background-color 0.15s; } .se-notification-trigger:hover { background-color: var(--se-subtle-bg); } .se-notification-trigger i { font-size: var(--se-text-lg); } .se-notification-trigger.is-active { background-color: color-mix(in oklab, var(--se-primary) 10%, var(--se-card-bg)); color: var(--se-primary); } /* ---- Panel / Drawer ---- */ .se-notification-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 380px; max-width: 100vw; background-color: var(--se-card-bg); box-shadow: -8px 0 30px rgba(0, 0, 0, 0.12); z-index: 1070; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); } .se-notification-panel.is-open { transform: translateX(0); } .se-notification-backdrop { position: fixed; inset: 0; background-color: color-mix(in oklab, var(--se-fg-strong) 35%, transparent); z-index: 1069; opacity: 0; pointer-events: none; transition: opacity 0.2s; } .se-notification-backdrop.is-open { opacity: 1; pointer-events: auto; } .se-notification-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--se-border-soft); flex-shrink: 0; } .se-notification-head h6 { margin: 0; font-size: var(--se-text-base); font-weight: var(--se-weight-bold); color: var(--se-fg-strong); display: flex; align-items: center; gap: 0.5rem; } .se-notification-mark-read { border: none; background: transparent; font-size: var(--se-text-sm); color: var(--se-primary); font-weight: var(--se-weight-medium); cursor: pointer; padding: 0.25rem 0.5rem; border-radius: var(--se-radius-sm); } .se-notification-mark-read:hover { background-color: color-mix(in oklab, var(--se-primary) 8%, transparent); } .se-notification-close { border: none; background: transparent; color: var(--se-fg-meta); font-size: var(--se-text-lg); cursor: pointer; padding: 0.25rem 0.5rem; border-radius: var(--se-radius-sm); } .se-notification-close:hover { background-color: var(--se-subtle-bg); color: var(--se-fg-strong); } /* ---- Lista de items ---- */ .se-notification-list { flex: 1; overflow-y: auto; list-style: none; margin: 0; padding: 0; } .se-notification-item { display: flex; gap: 0.75rem; padding: 0.875rem 1.25rem; border-bottom: 1px solid var(--se-border-soft); cursor: pointer; transition: background-color 0.15s; text-decoration: none; color: inherit; } .se-notification-item:hover { background-color: var(--se-subtle-bg); } .se-notification-item.is-unread { background-color: color-mix(in oklab, var(--se-primary) 5%, var(--se-card-bg)); border-left: 3px solid var(--se-primary); } .se-notification-item.is-unread:hover { background-color: color-mix(in oklab, var(--se-primary) 8%, var(--se-card-bg)); } .se-notification-item.is-priority { background-color: color-mix(in oklab, var(--se-danger) 6%, var(--se-card-bg)); border-left: 3px solid var(--se-danger); } /* Icono o avatar circular */ .se-notification-icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--se-radius-circle); display: inline-flex; align-items: center; justify-content: center; background-color: color-mix(in oklab, var(--se-primary) 12%, var(--se-card-bg)); color: var(--se-primary); font-size: var(--se-text-lg); } .se-notification-icon--warning { background-color: color-mix(in oklab, var(--se-warning) 14%, var(--se-card-bg)); color: var(--se-warning-text); } .se-notification-icon--success { background-color: color-mix(in oklab, var(--se-success) 14%, var(--se-card-bg)); color: var(--se-success); } .se-notification-icon--danger { background-color: color-mix(in oklab, var(--se-danger) 14%, var(--se-card-bg)); color: var(--se-danger); } .se-notification-icon--info { background-color: color-mix(in oklab, var(--se-info) 14%, var(--se-card-bg)); color: var(--se-info); } .se-notification-body { flex: 1; min-width: 0; } .se-notification-title { font-size: var(--se-text-sm); font-weight: var(--se-weight-semibold); color: var(--se-fg-strong); margin: 0 0 0.125rem 0; line-height: 1.35; } .se-notification-text { font-size: var(--se-text-xs); color: var(--se-fg-muted); margin: 0 0 0.25rem 0; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .se-notification-time { font-size: var(--se-text-xs); color: var(--se-fg-meta); } /* ---- Footer del panel (ver todas) ---- */ .se-notification-foot { padding: 0.75rem 1.25rem; border-top: 1px solid var(--se-border-soft); text-align: center; flex-shrink: 0; } .se-notification-foot a { font-size: var(--se-text-sm); color: var(--se-primary); font-weight: var(--se-weight-medium); text-decoration: none; } .se-notification-foot a:hover { text-decoration: underline; } /* ---- Estado vacio ---- */ .se-notification-empty { padding: 3rem 1.5rem; text-align: center; } .se-notification-empty i { font-size: 2.5rem; color: var(--se-fg-subtle); margin-bottom: 0.75rem; display: block; } .se-notification-empty p { margin: 0; font-size: var(--se-text-sm); color: var(--se-fg-muted); } /* ---- Responsive ---- */ @media (max-width: 575.98px) { .se-notification-panel { width: 100vw; } } /* ========================================================== SE Chiapas Component: Thread / Comment Thread Hilo de iteraciones (correcciones, observaciones, respuestas). Diferenciado del _history.css: este es conversacional con bubbles + autor, no solo timeline lineal. Estructura:
    1. JV
      Juan Validador Validador
      Falta especificar el periodo de cobertura...
      Devuelta para correccion
    2. ...
    Variantes: --validator | guinda (rol revisor) --titular | azul (rol solicitante) --system | gris (eventos automaticos) ========================================================== */ .se-thread { list-style: none; margin: 0; padding: 0; position: relative; } /* Linea vertical que conecta los items */ .se-thread::before { content: ''; position: absolute; top: 32px; bottom: 32px; left: 19px; width: 2px; background: linear-gradient( to bottom, var(--se-border-soft) 0%, var(--se-border-soft) 100% ); z-index: 0; } .se-thread-item { display: flex; gap: 0.875rem; padding-bottom: 1.5rem; position: relative; z-index: 1; } .se-thread-item:last-child { padding-bottom: 0; } /* ---- Avatar (iniciales o icono) ---- */ .se-thread-avatar { flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--se-radius-circle); display: inline-flex; align-items: center; justify-content: center; background-color: var(--se-subtle-bg); color: var(--se-fg-strong); font-size: var(--se-text-sm); font-weight: var(--se-weight-bold); border: 3px solid var(--se-card-bg); box-shadow: 0 0 0 1px var(--se-border-soft); text-transform: uppercase; letter-spacing: 0.02em; } .se-thread-avatar i { font-size: var(--se-text-md); } /* Variantes por rol */ .se-thread-item--validator .se-thread-avatar { background-color: color-mix(in oklab, var(--se-primary) 16%, var(--se-card-bg)); color: var(--se-primary); } .se-thread-item--titular .se-thread-avatar { background-color: color-mix(in oklab, var(--se-info) 16%, var(--se-card-bg)); color: var(--se-info); } .se-thread-item--system .se-thread-avatar { background-color: var(--se-subtle-bg); color: var(--se-fg-meta); } /* ---- Contenido ---- */ .se-thread-content { flex: 1; min-width: 0; padding-top: 4px; } .se-thread-meta { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.375rem; flex-wrap: wrap; font-size: var(--se-text-sm); } .se-thread-actor { font-weight: var(--se-weight-semibold); color: var(--se-fg-strong); } .se-thread-role { font-size: var(--se-text-xs); font-weight: var(--se-weight-medium); padding: 1px 7px; background-color: var(--se-subtle-bg); color: var(--se-fg-meta); border-radius: var(--se-radius-pill, 999px); text-transform: uppercase; letter-spacing: 0.03em; } .se-thread-item--validator .se-thread-role { background-color: color-mix(in oklab, var(--se-primary) 10%, var(--se-card-bg)); color: var(--se-primary); } .se-thread-item--titular .se-thread-role { background-color: color-mix(in oklab, var(--se-info) 10%, var(--se-card-bg)); color: var(--se-info); } .se-thread-time { font-size: var(--se-text-xs); color: var(--se-fg-meta); margin-left: auto; } /* ---- Bubble del mensaje ---- */ .se-thread-bubble { padding: 0.625rem 0.875rem; background-color: var(--se-subtle-bg); border: 1px solid var(--se-border-soft); border-radius: var(--se-radius-md); font-size: var(--se-text-sm); color: var(--se-fg-strong); line-height: 1.55; white-space: pre-wrap; word-wrap: break-word; } .se-thread-item--validator .se-thread-bubble { background-color: color-mix(in oklab, var(--se-primary) 5%, var(--se-card-bg)); border-color: color-mix(in oklab, var(--se-primary) 18%, var(--se-border-soft)); } .se-thread-item--titular .se-thread-bubble { background-color: color-mix(in oklab, var(--se-info) 5%, var(--se-card-bg)); border-color: color-mix(in oklab, var(--se-info) 18%, var(--se-border-soft)); } .se-thread-item--system .se-thread-bubble { background-color: transparent; border-style: dashed; color: var(--se-fg-muted); font-style: italic; } /* ---- Accion (badge debajo del bubble) ---- */ .se-thread-action { margin-top: 0.5rem; display: flex; align-items: center; gap: 0.5rem; font-size: var(--se-text-xs); color: var(--se-fg-meta); } /* ---- Variantes de tamaño ---- */ .se-thread--compact .se-thread-item { padding-bottom: 1rem; } .se-thread--compact .se-thread-avatar { width: 32px; height: 32px; font-size: var(--se-text-xs); } .se-thread--compact::before { left: 15px; top: 24px; bottom: 24px; } .se-thread--compact .se-thread-bubble { padding: 0.5rem 0.75rem; font-size: var(--se-text-xs); } /* ---- Composer (input para responder) ---- */ .se-thread-composer { display: flex; gap: 0.75rem; padding: 0.875rem; background-color: var(--se-card-bg); border: 1px solid var(--se-border-soft); border-radius: var(--se-radius-md); margin-top: 1rem; } .se-thread-composer-input { flex: 1; resize: vertical; min-height: 70px; padding: 0.5rem 0.75rem; border: 1px solid var(--se-border-soft); border-radius: var(--se-radius-md); font-family: var(--se-font-sans); font-size: var(--se-text-sm); background-color: var(--se-card-bg); color: var(--se-fg-strong); } .se-thread-composer-input:focus { outline: none; border-color: var(--se-primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--se-primary) 20%, transparent); } .se-thread-composer-actions { display: flex; flex-direction: column; justify-content: space-between; gap: 0.5rem; } /* ========================================================== SE Chiapas Kit: Popover (adapter Bootstrap 5) ---------------------------------------------------------- Bootstrap maneja activacion (data-bs-toggle="popover" + new bootstrap.Popover()). Aqui solo retematizamos. Activacion JS: [...document.querySelectorAll('[data-bs-toggle="popover"]')] .forEach(el => new bootstrap.Popover(el)); Markup: Variante danger: agregar customClass: 'popover--danger' ========================================================== */ .popover { font-family: var(--se-font-sans); --bs-popover-bg: white; --bs-popover-border-color: var(--se-border-light); --bs-popover-border-radius: var(--se-radius-md); --bs-popover-box-shadow: var(--se-shadow-lg); --bs-popover-header-bg: var(--se-subtle-bg); --bs-popover-header-color: var(--se-fg-strong); --bs-popover-header-font-size: var(--se-text-md); --bs-popover-header-padding-x: 0.85rem; --bs-popover-header-padding-y: 0.55rem; --bs-popover-body-color: var(--se-fg-body); --bs-popover-body-font-size: var(--se-text-md); --bs-popover-body-padding-x: 0.85rem; --bs-popover-body-padding-y: 0.7rem; --bs-popover-arrow-width: 1rem; --bs-popover-arrow-height: 0.5rem; font-size: var(--se-text-md); box-shadow: var(--se-shadow-lg); } .popover .popover-header { font-weight: var(--se-weight-bold); letter-spacing: var(--se-tracking-tight); border-bottom: 1px solid var(--se-border-light); margin: 0; } .popover .popover-header::before { content: none; /* Bootstrap pinta un pseudo border, lo removemos */ } .popover .popover-body { line-height: 1.5; } /* Arrow colors matchean Bootstrap pero el header/body lo deja consistente */ .popover.bs-popover-top .popover-arrow::after, .popover.bs-popover-auto[data-popper-placement^="top"] .popover-arrow::after { border-top-color: white; } .popover.bs-popover-bottom .popover-arrow::after, .popover.bs-popover-auto[data-popper-placement^="bottom"] .popover-arrow::after { border-bottom-color: var(--se-subtle-bg); } /* Variant: brand (header verde institucional) */ .popover.popover--brand .popover-header { background: var(--se-primary); color: white; border-bottom-color: var(--se-primary-active); } .popover.popover--brand.bs-popover-bottom .popover-arrow::after, .popover.popover--brand.bs-popover-auto[data-popper-placement^="bottom"] .popover-arrow::after { border-bottom-color: var(--se-primary); } /* Variant: danger */ .popover.popover--danger .popover-header { background: var(--se-danger); color: white; } .popover.popover--danger.bs-popover-bottom .popover-arrow::after, .popover.popover--danger.bs-popover-auto[data-popper-placement^="bottom"] .popover-arrow::after { border-bottom-color: var(--se-danger); } /* Helper trigger icon — para botones que solo contienen un icono y disparan popover */ .se-popover-trigger { background: transparent; border: 0; color: var(--se-fg-meta); width: 24px; height: 24px; border-radius: var(--se-radius-circle); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--se-transition-fast), color var(--se-transition-fast); padding: 0; } .se-popover-trigger:hover { background: var(--se-primary-nav-bg); color: var(--se-primary); } .se-popover-trigger:focus-visible { outline: none; box-shadow: var(--se-focus-ring, 0 0 0 3px rgba(var(--se-primary-rgb), 0.18)); } /* ========================================================== SE Chiapas Kit: Autocomplete / Combobox ---------------------------------------------------------- Dos variantes: 1) NATIVE DATALIST (cero JS, sintaxis HTML5):
    2) JS-DRIVEN (markup que cualquier libreria puede poblar):
    • Comitan Estado: Chiapas
    • Cozumel Estado: Quintana Roo
    ========================================================== */ .se-autocomplete { position: relative; display: block; width: 100%; font-family: var(--se-font-sans); } .se-autocomplete-input { width: 100%; } /* Indicador visual (icono lupa) */ .se-autocomplete::before { content: '\F52A'; /* bi-search */ font-family: 'bootstrap-icons'; position: absolute; right: 0.8rem; top: 50%; transform: translateY(-50%); color: var(--se-fg-meta); pointer-events: none; font-size: 0.95rem; } .se-autocomplete .se-autocomplete-input { padding-right: 2.5rem; } /* ---------- Suggestions popup ---------- */ .se-autocomplete-list { list-style: none; margin: 0.25rem 0 0; padding: 0.35rem; background: var(--se-card-bg); border: 1px solid var(--se-border-light); border-radius: var(--se-radius-md); box-shadow: var(--se-shadow-lg); max-height: 280px; overflow-y: auto; position: absolute; top: 100%; left: 0; right: 0; z-index: 100; display: none; } .se-autocomplete.is-open .se-autocomplete-list { display: block; } .se-autocomplete-item { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.5rem 0.7rem; border-radius: var(--se-radius-sm); font-size: var(--se-text-md); color: var(--se-fg-strong); cursor: pointer; transition: background var(--se-transition-fast), color var(--se-transition-fast); } .se-autocomplete-item:hover, .se-autocomplete-item.is-active { background: var(--se-primary-nav-bg); color: var(--se-primary); } .se-autocomplete-item:focus-visible { outline: 2px solid var(--se-focus, var(--se-primary)); outline-offset: -2px; } .se-autocomplete-item strong { font-weight: var(--se-weight-bold); } .se-autocomplete-meta { font-size: var(--se-text-xs); color: var(--se-fg-meta); } /* Empty state */ .se-autocomplete-empty { padding: 0.75rem; text-align: center; color: var(--se-fg-meta); font-style: italic; font-size: var(--se-text-sm); } /* Group header (categoria de sugerencias) */ .se-autocomplete-group { padding: 0.5rem 0.7rem 0.25rem; font-size: var(--se-text-xxs); font-weight: var(--se-weight-bold); text-transform: uppercase; letter-spacing: var(--se-tracking-xwide); color: var(--se-fg-meta); } /* ========================================================== SE Chiapas UIKit — Combobox / multiselect (.se-combobox) Orquestado por SeChiapas.combobox: mejora un Estados: - .se-tag-input.is-focused → borde primary, focus ring - .se-tag-input.is-invalid → borde danger - .se-tag.is-removing → animacion fade-out (toggle via JS) ========================================================== */ .se-tag-input { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; min-height: 40px; padding: 0.3rem 0.5rem; background: var(--se-input-bg); border: 1px solid var(--se-border-form); border-radius: var(--se-radius-md); font-family: var(--se-font-sans); transition: border-color var(--se-transition-fast), box-shadow var(--se-transition-fast); cursor: text; } .se-tag-input:focus-within, .se-tag-input.is-focused { border-color: var(--se-primary); box-shadow: var(--se-focus-ring, 0 0 0 3px rgba(var(--se-primary-rgb), 0.18)); outline: none; } .se-tag-input.is-invalid { border-color: var(--se-danger); } .se-tag-input.is-invalid:focus-within { box-shadow: 0 0 0 3px rgba(208, 2, 27, 0.18); } .se-tag-input.is-disabled { background: var(--se-subtle-bg); cursor: not-allowed; } /* ---------- Tag chip ---------- */ .se-tag { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.25rem 0.15rem 0.55rem; background: var(--se-primary-nav-bg); color: var(--se-primary); border: 1px solid var(--se-primary-nav-border); border-radius: var(--se-radius-sm); font-size: var(--se-text-sm); font-weight: var(--se-weight-medium); white-space: nowrap; line-height: 1.4; transition: opacity var(--se-transition-fast), transform var(--se-transition-fast); } .se-tag.is-removing { opacity: 0; transform: scale(0.85); } /* Variantes de tono */ .se-tag--neutral { background: var(--se-subtle-bg); color: var(--se-fg-strong); border-color: var(--se-border-light); } .se-tag--info { background: rgba(25, 104, 194, 0.08); color: #1968c2; border-color: rgba(25, 104, 194, 0.18); } .se-tag--warning { background: var(--se-warning-soft); color: var(--se-warning-text); border-color: var(--se-warning-border); } .se-tag--danger { background: var(--se-danger-soft); color: var(--se-danger); border-color: var(--se-danger-border); } /* Remove button */ .se-tag-remove { width: 16px; height: 16px; border-radius: var(--se-radius-circle); background: transparent; border: 0; color: currentColor; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; font-size: 0.7rem; opacity: 0.7; transition: background var(--se-transition-fast), opacity var(--se-transition-fast); flex-shrink: 0; } .se-tag-remove:hover { background: currentColor; opacity: 1; } .se-tag-remove:hover .bi { color: white; } .se-tag-remove .bi { transition: color var(--se-transition-fast); } .se-tag-remove:focus-visible { outline: none; box-shadow: 0 0 0 2px white, 0 0 0 4px currentColor; } /* ---------- Input field (inline) ---------- */ .se-tag-input-field { flex: 1 1 120px; min-width: 80px; border: 0; outline: none; background: transparent; font-family: inherit; font-size: var(--se-text-md); color: var(--se-fg-strong); padding: 0.25rem 0.35rem; margin: 0; line-height: 1.4; } .se-tag-input-field::placeholder { color: var(--se-fg-meta); } .se-tag-input-field:disabled { cursor: not-allowed; color: var(--se-fg-meta); } /* ========================================================== SE Chiapas Kit: Tree View ---------------------------------------------------------- Aprovecha
    / nativos para expand/collapse sin JS. Para arboles dinamicos, usar JS para construir el markup pero conservar la estructura. Markup: ========================================================== */ .se-tree { list-style: none; padding: 0; margin: 0; font-family: var(--se-font-sans); font-size: var(--se-text-md); color: var(--se-fg-strong); } .se-tree-item { list-style: none; } .se-tree-node { position: relative; } .se-tree-node > summary { list-style: none; cursor: pointer; } .se-tree-node > summary::-webkit-details-marker { display: none; } .se-tree-node > summary::marker { content: ''; } /* Summary (folder/header row) */ .se-tree-summary, .se-tree-leaf { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.5rem; border-radius: var(--se-radius-sm); color: var(--se-fg-strong); text-decoration: none; transition: background var(--se-transition-fast), color var(--se-transition-fast); user-select: none; cursor: pointer; } .se-tree-summary:hover, .se-tree-leaf:hover { background: var(--se-primary-nav-bg); color: var(--se-primary); } .se-tree-summary:focus-visible, .se-tree-leaf:focus-visible { outline: none; box-shadow: var(--se-focus-ring, 0 0 0 3px rgba(var(--se-primary-rgb), 0.18)); } .se-tree-leaf--active, .se-tree-summary.is-selected, .se-tree-leaf.is-selected { background: var(--se-primary); color: white; } .se-tree-leaf--active .bi, .se-tree-summary.is-selected .bi, .se-tree-leaf.is-selected .bi { color: white; } /* Caret (chevron que rota al expandir) */ .se-tree-caret { font-size: 0.75rem; color: var(--se-fg-meta); flex-shrink: 0; transition: transform var(--se-transition-fast); } .se-tree-node[open] > summary .se-tree-caret { transform: rotate(90deg); } /* Icon (folder/file) */ .se-tree-icon { font-size: 1rem; color: var(--se-primary); flex-shrink: 0; } .se-tree-leaf .bi:not(.se-tree-meta) { font-size: 0.95rem; color: var(--se-fg-meta); flex-shrink: 0; } /* Label */ .se-tree-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--se-weight-medium); } /* Meta (count badge inline) */ .se-tree-meta { font-size: var(--se-text-xxs); color: var(--se-fg-meta); font-weight: var(--se-weight-bold); background: var(--se-subtle-bg); padding: 0.05rem 0.4rem; border-radius: var(--se-radius-pill); flex-shrink: 0; } .se-tree-summary.is-selected .se-tree-meta, .se-tree-leaf.is-selected .se-tree-meta { background: rgba(255, 255, 255, 0.2); color: white; } /* Children (nested ul) */ .se-tree-children { list-style: none; padding: 0 0 0 1.5rem; margin: 0.1rem 0; border-left: 1px dashed var(--se-border-light); margin-left: 0.85rem; } /* Sizes */ .se-tree--sm .se-tree-summary, .se-tree--sm .se-tree-leaf { padding: 0.25rem 0.4rem; font-size: var(--se-text-sm); } .se-tree--sm .se-tree-children { padding-left: 1.15rem; } /* ========================================================== SE Chiapas Kit: Image Preview / Gallery ---------------------------------------------------------- Patrones para vistas con evidencias fotograficas (siniestros, mantenimientos, expedientes vehiculares). 1) GRID DE MINIATURAS:
    Dano frontal Dano frontal ...
    2) MODAL LIGHTBOX (usa modal de Bootstrap): 3) ASPECT-RATIO HELPERS:
    ========================================================== */ /* ---------- Gallery grid ---------- */ .se-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.65rem; font-family: var(--se-font-sans); } .se-gallery-item { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--se-subtle-bg); border: 1px solid var(--se-border-light); border-radius: var(--se-radius-md); overflow: hidden; text-decoration: none; cursor: zoom-in; transition: transform var(--se-transition-fast), border-color var(--se-transition-fast), box-shadow var(--se-transition-fast); } .se-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--se-transition-smooth); } .se-gallery-item:hover { border-color: var(--se-primary); transform: translateY(-2px); box-shadow: var(--se-shadow-md); } .se-gallery-item:hover img { transform: scale(1.04); } .se-gallery-item:focus-visible { outline: none; box-shadow: var(--se-focus-ring, 0 0 0 3px rgba(var(--se-primary-rgb), 0.18)); } /* Caption (etiqueta abajo, fade-up al hover) */ .se-gallery-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 0.4rem 0.55rem; background: linear-gradient(180deg, transparent, rgba(12, 2, 6, 0.65)); color: white; font-size: var(--se-text-xs); font-weight: var(--se-weight-semibold); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); pointer-events: none; opacity: 0; transform: translateY(100%); transition: opacity var(--se-transition-fast), transform var(--se-transition-fast); } .se-gallery-item:hover .se-gallery-caption, .se-gallery-item:focus-visible .se-gallery-caption { opacity: 1; transform: translateY(0); } /* Badge (corner overlay para tipo/numero) */ .se-gallery-badge { position: absolute; top: 0.35rem; left: 0.35rem; padding: 0.1rem 0.45rem; background: rgba(12, 2, 6, 0.75); color: white; border-radius: var(--se-radius-pill); font-size: var(--se-text-xxs); font-weight: var(--se-weight-bold); letter-spacing: 0.4px; text-transform: uppercase; } /* Empty state (no hay imagenes) */ .se-gallery-empty { grid-column: 1 / -1; text-align: center; padding: 2rem; color: var(--se-fg-meta); font-size: var(--se-text-sm); background: var(--se-subtle-bg); border: 1px dashed var(--se-border-form); border-radius: var(--se-radius-md); } /* Sizes */ .se-gallery--sm { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 0.4rem; } .se-gallery--lg { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.85rem; } /* ---------- Lightbox modal ---------- */ .se-lightbox .modal-content, .modal-content.se-lightbox-content { background: rgba(12, 2, 6, 0.95); border: 0; border-radius: var(--se-radius-md); overflow: hidden; position: relative; } .se-lightbox-close { position: absolute; top: 0.75rem; right: 0.75rem; width: 36px; height: 36px; border-radius: var(--se-radius-circle); background: rgba(255, 255, 255, 0.15); border: 0; color: white; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; z-index: 10; transition: background var(--se-transition-fast); } .se-lightbox-close:hover { background: rgba(255, 255, 255, 0.3); } .se-lightbox-img { width: 100%; height: auto; max-height: 80vh; object-fit: contain; display: block; } .se-lightbox-caption { padding: 0.85rem 1.15rem; color: white; font-family: var(--se-font-sans); font-size: var(--se-text-md); background: rgba(0, 0, 0, 0.4); text-align: center; } /* ---------- Aspect ratio helpers ---------- */ .se-aspect { position: relative; width: 100%; background: var(--se-subtle-bg); border-radius: var(--se-radius-md); overflow: hidden; } .se-aspect > img, .se-aspect > video, .se-aspect > iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .se-aspect-1-1 { aspect-ratio: 1 / 1; } .se-aspect-4-3 { aspect-ratio: 4 / 3; } .se-aspect-16-9 { aspect-ratio: 16 / 9; } .se-aspect-3-4 { aspect-ratio: 3 / 4; } .se-aspect-21-9 { aspect-ratio: 21 / 9; } /* ========================================================== SE Chiapas Kit: Misc small components ---------------------------------------------------------- Bundle de componentes pequeños: - Copy-to-clipboard button - Keyboard shortcut hint (.se-kbd) - Divider / Separator - Section heading (entre cards o dentro de body) ========================================================== */ /* ========================================================== COPY TO CLIPBOARD button ---------------------------------------------------------- Markup: JS minimal (registrar en su app): document.querySelectorAll('[data-clipboard]').forEach(btn => { btn.addEventListener('click', () => { navigator.clipboard.writeText(btn.dataset.clipboard); btn.classList.add('is-copied'); setTimeout(() => btn.classList.remove('is-copied'), 1500); }); }); ========================================================== */ .se-copy-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; width: 28px; height: 28px; padding: 0; background: transparent; border: 1px solid var(--se-border-light); border-radius: var(--se-radius-sm); color: var(--se-fg-meta); cursor: pointer; transition: background var(--se-transition-fast), border-color var(--se-transition-fast), color var(--se-transition-fast); font-family: var(--se-font-sans); font-size: 0.85rem; flex-shrink: 0; } .se-copy-btn:hover { background: var(--se-primary-nav-bg); border-color: var(--se-primary-nav-border); color: var(--se-primary); } .se-copy-btn:focus-visible { outline: none; box-shadow: var(--se-focus-ring, 0 0 0 3px rgba(var(--se-primary-rgb), 0.18)); } .se-copy-btn.is-copied { background: var(--se-success); border-color: var(--se-success); color: white; } .se-copy-btn.is-copied .bi::before { content: '\F26A'; /* bi-check2 */ } /* Variante con texto (wide) */ .se-copy-btn--wide { width: auto; padding: 0 0.65rem; font-size: var(--se-text-sm); font-weight: var(--se-weight-semibold); } /* ========================================================== KBD — keyboard shortcut hint ---------------------------------------------------------- Markup: Ctrl + K ========================================================== */ .se-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 0.45rem; background: var(--se-card-bg); border: 1px solid var(--se-border-form); border-bottom-width: 2px; border-radius: var(--se-radius-md); font-family: var(--se-font-mono); font-size: var(--se-text-xs); font-weight: var(--se-weight-bold); color: var(--se-fg-strong); text-transform: uppercase; letter-spacing: 0.2px; white-space: nowrap; line-height: 1; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05); vertical-align: baseline; } .se-kbd-sep { color: var(--se-fg-meta); font-size: var(--se-text-xs); margin: 0 0.15rem; font-weight: var(--se-weight-medium); user-select: none; } /* Variant: dark (sobre fondos claros institucionales) */ .se-kbd--dark { background: var(--se-fg-strong); color: white; border-color: var(--se-fg-body); } /* Variant: on-dark (sobre fondos oscuros — topbar pill, spotlight trigger). Glyph translucido, integrado al pill, sin "burbuja blanca" rompiendo. */ .se-kbd--on-dark, .se-topbar-pill .se-kbd, .se-spotlight-trigger .se-kbd { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); border-bottom-width: 1px; color: rgba(255, 255, 255, 0.85); box-shadow: none; } /* ========================================================== DIVIDER / SEPARATOR ---------------------------------------------------------- Markup:
    → linea horizontal
    → dashed
    o tambien
    → linea con texto centrado ========================================================== */ .se-divider { height: 1px; border: 0; background: var(--se-border-light); margin: 1rem 0; } .se-divider--soft { background: var(--se-border-soft); } .se-divider--dashed { background: transparent; border-top: 1px dashed var(--se-border-form); height: 0; } .se-divider--strong { background: var(--se-border-form); height: 1px; } .se-divider--spaced { margin: 1.5rem 0; } .se-divider--tight { margin: 0.5rem 0; } /* Vertical divider (.se-divider-v ya existe en _utilities.css) */ /* Text-in-the-middle divider */ .se-divider-text { display: flex; align-items: center; gap: 0.85rem; margin: 1.25rem 0; font-family: var(--se-font-sans); font-size: var(--se-text-xxs); font-weight: var(--se-weight-bold); text-transform: uppercase; letter-spacing: var(--se-tracking-xwide); color: var(--se-fg-meta); } .se-divider-text::before, .se-divider-text::after { content: ''; flex: 1; height: 1px; background: var(--se-border-light); } /* ========================================================== SECTION HEADING (subseccion dentro de pagina o card) ---------------------------------------------------------- Mas chico que .se-page-title, mas semantico que h3 suelto. Markup:

    DOCUMENTOS

    Comprobantes adjuntos

    PDF o XML de la factura emitida.

    ========================================================== */ .se-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin: 1.5rem 0 0.85rem; padding-bottom: 0.65rem; border-bottom: 1px solid var(--se-border-light); font-family: var(--se-font-sans); flex-wrap: wrap; } .se-section-heading-eyebrow { font-size: var(--se-text-xxs); font-weight: var(--se-weight-bold); letter-spacing: var(--se-tracking-xwide); text-transform: uppercase; color: var(--se-fg-meta); margin: 0 0 0.15rem; } .se-section-heading-title { font-size: var(--se-text-lg); font-weight: var(--se-weight-bold); color: var(--se-fg-strong); margin: 0; line-height: 1.25; display: inline-flex; align-items: center; gap: 0.45rem; } .se-section-heading-title .bi { color: var(--se-primary); font-size: 1.05rem; } .se-section-heading-desc { font-size: var(--se-text-md); color: var(--se-fg-muted); margin: 0.25rem 0 0; line-height: 1.4; } .se-section-heading-actions { display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-left: auto; } /* Variant flush (sin border, sin margen top — para usar dentro de card body) */ .se-section-heading--flush { margin-top: 0; padding-bottom: 0; border-bottom: 0; } /* ========================================================== SE Chiapas UIKit — Branding institucional (pie + watermark) Patrones compartidos por TODOS los sistemas del ecosistema: - Pie con "Gobierno del Estado de Chiapas · [escudo] · Secretaría de Educación" y PLADSE pegado a la derecha (firma del ecosistema). - Marca de agua: escudo a baja opacidad sobre el fondo de página. ========================================================== */ /* ---------- Pie institucional ---------- Grid de 3 columnas: el texto de gobierno queda centrado (col 2) y PLADSE a la derecha (col 3), ambos en la MISMA fila → alineados verticalmente. (Antes era absolute + top:50%, que se descuadraba por el padding asimétrico de .se-footer.) */ .se-footer--ecosystem { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 0.55rem; } .se-footer-gov { grid-column: 2; display: inline-flex; align-items: center; gap: 0.55rem; color: var(--se-fg-muted); font-size: var(--se-text-sm); } /* Escudo pequeño y monocromático entre los textos (línea en claro). */ .se-footer-crest { height: 26px; width: auto; flex-shrink: 0; opacity: 0.85; } /* PLADSE: firma del ecosistema, a la derecha y al mismo nivel que el texto. */ .se-footer-pladse { grid-column: 3; justify-self: end; align-self: center; height: 26px; width: auto; margin-right: 0.25rem; opacity: 0.85; } .se-footer-pladse:hover { opacity: 1; } @media (max-width: 575.98px) { /* En móvil se apila: texto centrado y PLADSE debajo. */ .se-footer--ecosystem { grid-template-columns: 1fr; row-gap: 0.4rem; justify-items: center; } .se-footer-gov, .se-footer-pladse { grid-column: 1; justify-self: center; margin-right: 0; } } /* ---------- Marca de agua (escudo de fondo) ---------- El sistema define la imagen y opcionalmente posición/tamaño/opacidad:
    En oscuro conviene apuntar a la versión blanca. */ .se-crest-bg { position: relative; isolation: isolate; } .se-crest-bg::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--se-crest-image, none); background-repeat: no-repeat; background-position: var(--se-crest-pos, right -60px bottom -70px); background-size: var(--se-crest-size, 440px); opacity: var(--se-crest-opacity, 0.04); pointer-events: none; } /* ========================================================== SE Chiapas UIKit · Portal Público — Hero + Banda de audiencias ---------------------------------------------------------- Hero editorial con marca de agua del escudo + triángulo educativo (3 portales por audiencia con acento propio). Parte de la superficie pública (ver layout/_portal-shell). Tokens-first. Selectores que NO se definen aquí (viven en layout/_portal-shell.css): .se-portal-wrap · .se-portal-btn / --teal / --ghost · .se-portal-kicker .se-portal-rule · .se-portal-section · .se-portal-sec-head .se-portal-more · .se-portal-empty · .se-portal-back · .se-portal-reveal ========================================================== */ /* ---------------------------------------------------------- HERO ---------------------------------------------------------- */ .se-portal-hero { position: relative; overflow: hidden; background: radial-gradient(120% 90% at 88% 8%, rgba(var(--se-primary-rgb), .06), transparent 60%), var(--se-card-bg); border-bottom: 1px solid var(--se-border); } /* Escudo marca de agua — posición absoluta, decorativo */ .se-portal-crest { position: absolute; top: -60px; right: -120px; width: 560px; opacity: .05; filter: grayscale(1); pointer-events: none; } /* Override de padding del contenedor genérico dentro del hero */ .se-portal-hero .se-portal-wrap { position: relative; padding: 74px 32px 0; } /* Grid de dos columnas: texto (izq) + aside buscador (der) */ .se-portal-hero-grid { display: grid; grid-template-columns: 1.35fr .9fr; gap: 56px; align-items: start; } /* Titular principal */ .se-portal-hero h1 { font-size: 3.55rem; line-height: 1.04; letter-spacing: -.022em; font-weight: 800; margin: .7rem 0 0; color: var(--se-fg-strong); } /* Fragmento de color institucional dentro del h1 */ .se-portal-hero h1 em { font-style: normal; font-weight: 800; color: var(--se-primary-active); box-shadow: inset 0 -.12em 0 rgba(var(--se-primary-rgb), .14); } /* Párrafo introductorio */ .se-portal-hero-lede { font-size: 1.12rem; color: var(--se-fg-body); max-width: 34ch; margin: 1.3rem 0 0; } /* Fila de botones CTA (usa .se-portal-btn definido en portal-shell) */ .se-portal-hero-cta { display: flex; gap: 14px; margin-top: 1.9rem; flex-wrap: wrap; } /* Columna derecha del grid */ .se-portal-hero-aside { padding-top: 8px; } /* Buscador inline */ .se-portal-searchbox { display: flex; align-items: center; gap: 10px; background: #fff; border: 1.5px solid var(--se-border); border-radius: var(--se-radius-lg); padding: .7rem .9rem; } .se-portal-searchbox:focus-within { border-color: var(--se-primary); } .se-portal-searchbox input { border: 0; outline: 0; flex: 1; font: inherit; font-size: .95rem; color: var(--se-fg-strong); background: transparent; } .se-portal-searchbox i { color: var(--se-fg-muted); } /* Lista de accesos rápidos bajo el buscador */ .se-portal-quick { margin-top: 1.1rem; display: flex; flex-direction: column; } .se-portal-quick a { display: flex; align-items: center; gap: 12px; padding: .85rem .2rem; border-bottom: 1px solid var(--se-border-light); font-weight: 600; color: var(--se-fg-strong); font-size: .92rem; } /* Número de orden tabular */ .se-portal-quick-num { color: var(--se-primary-active); font-weight: 800; font-size: .8rem; width: 22px; font-variant-numeric: tabular-nums; } /* Flecha → al final de cada fila */ .se-portal-quick-go { margin-left: auto; color: var(--se-fg-muted); transition: var(--se-transition-base); } .se-portal-quick a:hover .se-portal-quick-go { color: var(--se-primary); transform: translateX(3px); } /* ---------------------------------------------------------- BANDA DE AUDIENCIAS (triángulo educativo) ---------------------------------------------------------- */ .se-audience-nav { margin-top: 64px; border-top: 1px solid var(--se-border); display: grid; grid-template-columns: repeat(3, 1fr); } /* Tarjeta de audiencia (elemento ) */ .se-audience-card { padding: 30px 30px 30px 26px; border-left: 1px solid var(--se-border); position: relative; display: block; transition: var(--se-transition-base); background: var(--se-card-bg); } .se-audience-card:first-child { border-left: 0; } /* Barra de acento lateral — se anima a altura completa en hover */ .se-audience-card::before { content: ''; position: absolute; left: -1px; top: 0; width: 3px; height: 0; transition: height var(--se-transition-base); } .se-audience-card:hover { background: #fff; } .se-audience-card:hover::before { height: 100%; } /* Acentos por audiencia — barra lateral */ .se-audience-card--alumnos::before { background: var(--se-aud-alumnos); } .se-audience-card--docentes::before { background: var(--se-aud-docentes); } .se-audience-card--tutores::before { background: var(--se-aud-tutores); } /* Icono de categoría */ .se-audience-ico { font-size: 1.5rem; margin-bottom: 14px; display: block; } /* Acentos por audiencia — color del icono */ .se-audience-card--alumnos .se-audience-ico { color: var(--se-aud-alumnos); } .se-audience-card--docentes .se-audience-ico { color: var(--se-aud-docentes); } .se-audience-card--tutores .se-audience-ico { color: var(--se-aud-tutores); } /* Nombre de la audiencia */ .se-audience-nav h3 { font-size: 1.18rem; font-weight: 800; letter-spacing: -.01em; color: var(--se-fg-strong); } /* Descripción breve */ .se-audience-nav p { font-size: .86rem; color: var(--se-fg-muted); margin: .35rem 0 0; } /* Flecha decorativa (posición absoluta arriba-der) */ .se-audience-arrow { position: absolute; right: 24px; top: 28px; color: var(--se-fg-muted); transition: var(--se-transition-base); } .se-audience-card:hover .se-audience-arrow { color: var(--se-fg-strong); transform: translateX(3px); } /* ---------------------------------------------------------- RESPONSIVE — max-width: 980 px ---------------------------------------------------------- */ @media (max-width: 980px) { /* Hero: wrap con padding reducido */ .se-portal-hero .se-portal-wrap { padding: 48px 20px 0; } /* Hero: una columna, gap compacto */ .se-portal-hero-grid { grid-template-columns: 1fr; gap: 36px; } /* Hero: h1 más pequeño */ .se-portal-hero h1 { font-size: 2.6rem; } /* Audiencias: columna única, separadas por borde superior */ .se-audience-nav { grid-template-columns: 1fr; } .se-audience-card { border-left: 0; border-top: 1px solid var(--se-border); } } /* ========================================================== SE Chiapas UIKit · Portal Público — Banners promocionales ---------------------------------------------------------- Sistema institucional de banners: vitrina (slider sobre Bootstrap carousel), franja horizontal y MPU lateral. Distinto de .se-banner (stripe de notificación). Segmentable por audiencia desde el backend. Tokens-first, dark-aware por la rampa --se-teal-*. ========================================================== */ /* ========================================================== I. VITRINA OFICIAL Slider de campañas, 3:1 cinematográfico (máx 470 px). Construido sobre Bootstrap carousel; los controles y dots se reestimizan bajo el scope .se-promo-vitrina. ========================================================== */ .se-promo-vitrina { background: var(--se-vitrina-bg); } .se-promo-vslide { position: relative; aspect-ratio: 3 / 1; max-height: 470px; overflow: hidden; background: linear-gradient( 115deg, var(--se-teal-darker) 0%, var(--se-teal-deep) 55%, var(--se-teal-mid) 100% ); display: flex; align-items: center; background-size: cover; background-position: center; } /* Velo de legibilidad cuando el slide lleva imagen de fondo */ .se-promo-vslide::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, rgba(4, 48, 43, .78) 0%, rgba(4, 48, 43, .35) 55%, transparent 100% ); pointer-events: none; } /* Escudo marca de agua (decorativo, esquina inferior-derecha) */ .se-promo-vslide .se-promo-vslide-crest { position: absolute; right: -50px; bottom: -90px; width: 440px; opacity: .13; filter: none; pointer-events: none; } /* Contenedor interior alineado al ancho canónico del portal */ .se-promo-vslide .se-promo-vslide-inner { position: relative; z-index: 1; color: #fff; max-width: 1240px; margin: 0 auto; padding: 0 32px; width: 100%; } /* Kicker (sobre-título en mayúsculas) */ .se-promo-kicker { font-size: .72rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--se-teal-tint); } /* Titular principal de la vitrina */ .se-promo-vslide h2 { color: #fff; font-size: 2.7rem; font-weight: 800; letter-spacing: -.022em; line-height: 1.05; margin: .55rem 0 1.1rem; max-width: 17ch; } /* Cuerpo / descripción corta de la vitrina */ .se-promo-vslide p { color: rgba(255, 255, 255, .82); font-size: 1rem; max-width: 40ch; margin: -.5rem 0 1.1rem; } /* CTA principal (botón blanco sólido sobre fondo oscuro) */ .se-promo-vbtn { display: inline-flex; align-items: center; gap: 9px; background: #fff; color: var(--se-teal-darker); font-weight: 800; font-size: .92rem; padding: .78rem 1.3rem; border-radius: var(--se-radius-lg); transition: var(--se-transition-base); } .se-promo-vbtn:hover { background: var(--se-teal-wash); color: var(--se-teal-darker); } /* ---------------------------------------------------------- Bootstrap carousel overrides — scoped bajo .se-promo-vitrina ---------------------------------------------------------- */ /* Flechas laterales (prev / next) */ .se-promo-vitrina .carousel-control-prev, .se-promo-vitrina .carousel-control-next { width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, .16); top: 50%; transform: translateY(-50%); bottom: auto; opacity: 1; transition: var(--se-transition-base); } .se-promo-vitrina .carousel-control-prev { left: 26px; } .se-promo-vitrina .carousel-control-next { right: 26px; } .se-promo-vitrina .carousel-control-prev:hover, .se-promo-vitrina .carousel-control-next:hover { background: rgba(255, 255, 255, .28); } .se-promo-vitrina .carousel-control-prev-icon, .se-promo-vitrina .carousel-control-next-icon { width: 18px; height: 18px; } /* Dots (indicators) — alineados a la derecha, barra fina */ .se-promo-vitrina .carousel-indicators { bottom: 20px; justify-content: flex-end; padding-right: 32px; margin: 0; } .se-promo-vitrina .carousel-indicators [data-bs-target] { width: 30px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .35); border: 0; opacity: 1; transition: var(--se-transition-base); } .se-promo-vitrina .carousel-indicators .active { background: #fff; } /* ========================================================== II. FRANJA HORIZONTAL (in-content, 970 × 250) .se-promo-strip > .se-promo-strip-panel Variante con imagen: añadir .is-image al panel. ========================================================== */ .se-promo-strip { padding-top: 6px; } .se-promo-strip-panel { position: relative; height: 170px; border: 1px solid var(--se-border); border-radius: var(--se-radius-lg); overflow: hidden; display: flex; align-items: center; background: linear-gradient( 100deg, var(--se-card-bg) 0%, var(--se-card-bg) 58%, var(--se-border-light) 58%, var(--se-border-light) 100% ); background-size: cover; background-position: center; } /* CTA (bloque de texto izquierdo) */ .se-promo-strip-panel .se-promo-strip-cta { position: absolute; left: 42px; z-index: 1; max-width: 62%; } /* Kicker dentro del strip (color teal oscuro sobre fondo claro) */ .se-promo-strip-panel .se-promo-strip-cta .se-promo-kicker { font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--se-primary-active); } .se-promo-strip-panel .se-promo-strip-cta h4 { font-size: 1.35rem; font-weight: 800; letter-spacing: -.015em; margin: .3rem 0 .6rem; color: var(--se-fg-strong); } /* Descripción corta */ .se-promo-strip-body { font-size: .88rem; color: var(--se-fg-muted); margin: 0 0 .6rem; } /* Etiqueta "PUBLICIDAD" / "PATROCINADO" (esquina superior-derecha) */ .se-promo-tag { position: absolute; top: 12px; right: 14px; z-index: 1; font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--se-fg-muted); border: 1px solid var(--se-border); border-radius: 2px; padding: 3px 8px; } /* Estado: panel con imagen de fondo (velo claro izquierdo + tag sobre blanco) */ .se-promo-strip-panel.is-image::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .72) 48%, rgba(255, 255, 255, 0) 80% ); } .se-promo-strip-panel.is-image .se-promo-tag { color: var(--se-fg-strong); background: rgba(255, 255, 255, .85); border-color: transparent; } /* ========================================================== III. MPU LATERAL (300 × 250 estándar / 300 × 420 tall) ========================================================== */ .se-promo-mpu { display: block; position: relative; overflow: hidden; border-radius: var(--se-radius-lg); border: 1px solid var(--se-border); aspect-ratio: 300 / 250; background: linear-gradient( 150deg, var(--se-teal-darker) 0%, var(--se-teal-deep) 60%, var(--se-teal-mid) 100% ); background-size: cover; background-position: center; } /* Variante apaisada (half-page / portrait) */ .se-promo-mpu--tall { aspect-ratio: 300 / 420; } /* Velo de gradiente para legibilidad del copy inferior */ .se-promo-mpu::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(4, 48, 43, .12) 0%, rgba(4, 48, 43, .74) 100% ); } /* Escudo marca de agua (esquina inferior-derecha) */ .se-promo-mpu .se-promo-mpu-crest { position: absolute; right: -26px; bottom: -30px; width: 170px; opacity: .16; pointer-events: none; } /* Etiqueta "PATROCINADO" (encima del velo, esquina superior-izquierda) */ .se-promo-mpu .se-promo-mpu-tag { position: absolute; top: 12px; left: 12px; z-index: 1; background: rgba(255, 255, 255, .92); color: var(--se-teal-darker); font-size: .6rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px; border-radius: 2px; } /* Bloque de copy (anclado al borde inferior) */ .se-promo-mpu .se-promo-mpu-in { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 1; color: #fff; } /* Kicker dentro del MPU — reutiliza .se-promo-kicker pero con tamaño reducido */ .se-promo-mpu .se-promo-mpu-in .se-promo-kicker { color: var(--se-teal-tint); font-size: .62rem; } .se-promo-mpu .se-promo-mpu-in h5 { color: #fff; font-size: 1.08rem; font-weight: 800; letter-spacing: -.012em; line-height: 1.16; margin: .3rem 0 .5rem; } /* CTA de texto con subrayado tenue */ .se-promo-mpu .se-promo-mpu-in .se-promo-mpu-go { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 800; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .5); padding-bottom: 1px; } .se-promo-mpu:hover .se-promo-mpu-go { border-bottom-color: #fff; } /* ========================================================== IV. RESPONSIVE ========================================================== */ @media (max-width: 980px) { /* Vitrina: proporciones libres en móvil, menor tamaño de titular, se ocultan las flechas (swipe nativo de carousel) */ .se-promo-vslide { aspect-ratio: auto; min-height: 240px; } .se-promo-vslide h2 { font-size: 1.9rem; } .se-promo-vitrina .carousel-control-prev, .se-promo-vitrina .carousel-control-next { display: none; } /* Franja horizontal: apilada verticalmente */ .se-promo-strip-panel { height: auto; min-height: 120px; flex-direction: column; align-items: flex-start; padding: 24px 20px; } .se-promo-strip-panel .se-promo-strip-cta { position: static; max-width: 100%; } .se-promo-strip-panel.is-image::before { background: rgba(255, 255, 255, .9); } } /* ========================================================== SE Chiapas UIKit · Portal Público — Editorial ---------------------------------------------------------- Patrones de contenido público: actualidad editorial (líder + columna), cabecera de página interna, rejillas de tarjetas (noticias, convocatorias, video), lista de micrositios y servicios ciudadanos. Tokens-first. ========================================================== */ /* ---------------------------------------------------------- 1. ACTUALIDAD EDITORIAL — líder + columna de feeds ---------------------------------------------------------- */ .se-editorial { display: grid; grid-template-columns: 1.6fr 1fr; gap: 44px; } /* Pieza principal (líder) */ .se-editorial-lead { display: block; } .se-editorial-lead .se-editorial-media { aspect-ratio: 16 / 9; border-radius: var(--se-radius-lg); overflow: hidden; background: linear-gradient(135deg, var(--se-aud-alumnos), var(--se-primary-active)); position: relative; border: 1px solid var(--se-border); background-size: cover; background-position: center; } .se-editorial-lead .se-editorial-media .se-editorial-tag { position: absolute; top: 16px; left: 16px; background: #fff; color: var(--se-aud-docentes); font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px; border-radius: 2px; z-index: 2; } .se-editorial-lead .se-editorial-media .se-editorial-crest { position: absolute; inset: 0; background: url('/images/logos/escudo-blanco.png') no-repeat right -40px bottom -30px; background-size: 230px; opacity: .16; } .se-editorial-lead .se-editorial-meta { display: flex; gap: 14px; align-items: center; margin: 18px 0 8px; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--se-fg-muted); } .se-editorial-lead .se-editorial-meta .se-editorial-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--se-aud-tutores); } .se-editorial-lead h3 { font-size: 1.62rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.12; color: var(--se-fg-strong); } .se-editorial-lead p { margin: .7rem 0 0; color: var(--se-fg-body); max-width: 52ch; } .se-editorial-lead:hover h3 { color: var(--se-primary-active); } /* Columna de feeds secundarios */ .se-editorial-feeds { display: flex; flex-direction: column; } .se-editorial-feed { display: flex; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--se-border); } .se-editorial-feed:first-child { padding-top: 0; } .se-editorial-feed-date { flex-shrink: 0; text-align: center; width: 48px; } .se-editorial-feed-date .se-editorial-feed-day { font-size: 1.55rem; color: var(--se-aud-docentes); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .se-editorial-feed-date .se-editorial-feed-mon { font-size: .66rem; font-weight: 800; letter-spacing: .1em; color: var(--se-fg-muted); } .se-editorial-feed h4 { font-size: 1.02rem; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; color: var(--se-fg-strong); } .se-editorial-feed p { font-size: .84rem; color: var(--se-fg-muted); margin: .3rem 0 0; } .se-editorial-feed:hover h4 { color: var(--se-primary-active); } /* ---------------------------------------------------------- 2. CABECERA DE PÁGINA INTERNA — hero compacto con marca de agua ---------------------------------------------------------- */ .se-portal-head { position: relative; overflow: hidden; background: radial-gradient(120% 120% at 90% 0%, rgba(var(--se-primary-rgb), .06), transparent 58%), var(--se-card-bg); border-bottom: 1px solid var(--se-border); } .se-portal-head .se-portal-head-crest { position: absolute; top: -70px; right: -90px; width: 420px; opacity: .05; filter: grayscale(1); pointer-events: none; } .se-portal-head .se-portal-wrap { position: relative; padding: 52px 32px 44px; } .se-portal-head h1 { font-size: 2.7rem; line-height: 1.05; letter-spacing: -.022em; font-weight: 800; color: var(--se-fg-strong); margin: .55rem 0 0; max-width: 20ch; } .se-portal-head .se-portal-head-lede { font-size: 1.06rem; color: var(--se-fg-body); max-width: 60ch; margin: .9rem 0 0; } /* ---------------------------------------------------------- 3. REJILLA DE TARJETAS — noticias / boletines / índice ---------------------------------------------------------- */ .se-news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .se-news-card { display: flex; flex-direction: column; border: 1px solid var(--se-border); border-radius: var(--se-radius-lg); overflow: hidden; background: #fff; transition: var(--se-transition-base); } .se-news-card:hover { border-color: var(--se-primary); transform: translateY(-2px); } .se-news-card-media { aspect-ratio: 16 / 9; position: relative; overflow: hidden; background: linear-gradient(135deg, var(--se-aud-alumnos), var(--se-primary-active)); background-size: cover; background-position: center; } .se-news-card-media .se-news-card-crest { position: absolute; inset: 0; background: url('/images/logos/escudo-blanco.png') no-repeat right -28px bottom -22px; background-size: 160px; opacity: .16; } .se-news-card-media .se-news-card-ico { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2rem; color: rgba(255, 255, 255, .85); } .se-news-card-body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; } .se-news-card-kicker { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--se-fg-muted); } .se-news-card-date { font-size: .74rem; font-weight: 800; letter-spacing: .05em; color: var(--se-aud-docentes); } .se-news-card h3 { font-size: 1.16rem; font-weight: 800; letter-spacing: -.014em; line-height: 1.18; color: var(--se-fg-strong); margin: .45rem 0 0; } .se-news-card p { font-size: .88rem; color: var(--se-fg-muted); margin: .5rem 0 0; line-height: 1.5; } .se-news-card:hover h3 { color: var(--se-primary-active); } .se-news-card-foot { margin-top: auto; padding-top: 14px; font-size: .82rem; font-weight: 700; color: var(--se-primary-active); display: inline-flex; align-items: center; gap: 7px; } /* ---------------------------------------------------------- 4. CONVOCATORIAS — grid de índice + tarjeta base ---------------------------------------------------------- */ /* Grid de índice (página interna) */ .se-conv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .se-conv-grid .se-conv-card { border: 1px solid var(--se-border); border-radius: var(--se-radius-lg); background: #fff; } .se-conv-grid .se-conv-card:first-child { border-left: 1px solid var(--se-border); } /* Tarjeta base de convocatoria (también usada en strip, sin grid propio) */ .se-conv-card { padding: 26px; border-left: 1px solid var(--se-border); } .se-conv-card:first-child { border-left: 0; } .se-conv-card .se-conv-status { display: inline-flex; align-items: center; gap: 7px; font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; } .se-conv-card .se-conv-status.is-open { color: var(--se-aud-alumnos); } .se-conv-card .se-conv-status.is-open .se-conv-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--se-aud-alumnos); } .se-conv-card .se-conv-status.is-closed { color: var(--se-fg-muted); } .se-conv-card .se-conv-status.is-closed .se-conv-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--se-fg-muted); } .se-conv-card .se-conv-dep { font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--se-fg-muted); margin: 14px 0 4px; } .se-conv-card h4 { font-size: 1.08rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; color: var(--se-fg-strong); } .se-conv-card .se-conv-link { margin-top: 16px; display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: .84rem; color: var(--se-aud-docentes); } /* ---------------------------------------------------------- 5. VIDEO GRID — videoteca (índice y duo) ---------------------------------------------------------- */ .se-video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .se-video-tile { display: block; position: relative; aspect-ratio: 16 / 9; border-radius: var(--se-radius-lg); overflow: hidden; border: 1px solid var(--se-border); background: linear-gradient(135deg, var(--se-portal-foot-bg), var(--se-portal-statebar-bg)); background-size: cover; background-position: center; } .se-video-tile .se-video-tile-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 2, 6, .05), rgba(12, 2, 6, .75)); } .se-video-tile .se-video-tile-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--se-aud-docentes); display: grid; place-items: center; font-size: 1.7rem; transition: var(--se-transition-base); } .se-video-tile:hover .se-video-tile-play { transform: translate(-50%, -50%) scale(1.06); } .se-video-tile .se-video-tile-meta { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 2; } .se-video-tile .se-video-tile-badge { display: inline-block; background: var(--se-aud-docentes); color: #fff; font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 4px 9px; border-radius: 2px; margin-bottom: 8px; } .se-video-tile h4 { color: #fff; font-size: 1.12rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; } /* ---------------------------------------------------------- 6. DUO · LISTA DE MICROSITIOS · SERVICIOS CIUDADANOS ---------------------------------------------------------- */ /* Contenedor de dos columnas (videoteca + micrositios) */ .se-portal-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; } /* Lista de micrositios */ .se-portal-ms-list { display: flex; flex-direction: column; } .se-portal-ms-list a { display: flex; align-items: center; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--se-border); } .se-portal-ms-list a:first-child { padding-top: 0; } .se-portal-ms-list .se-portal-ms-bar { width: 3px; align-self: stretch; border-radius: 2px; background: var(--se-primary); flex-shrink: 0; } .se-portal-ms-list .se-portal-ms-kicker { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--se-fg-muted); margin-bottom: 2px; } .se-portal-ms-list h4 { font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; color: var(--se-fg-strong); } .se-portal-ms-list a .se-portal-ms-go { margin-left: auto; color: var(--se-fg-muted); transition: var(--se-transition-base); } .se-portal-ms-list a:hover .se-portal-ms-go { color: var(--se-primary); transform: translateX(3px); } .se-portal-ms-list a:hover h4 { color: var(--se-primary-active); } /* Servicios ciudadanos */ .se-portal-services { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--se-border); border-radius: var(--se-radius-lg); overflow: hidden; background: #fff; } .se-portal-services a { padding: 26px 24px; border-left: 1px solid var(--se-border); display: flex; flex-direction: column; gap: 10px; transition: var(--se-transition-base); } .se-portal-services a:first-child { border-left: 0; } .se-portal-services a:hover { background: var(--se-body-bg); } .se-portal-services i { font-size: 1.55rem; color: var(--se-primary-active); } .se-portal-services span { font-weight: 700; font-size: .96rem; color: var(--se-fg-strong); letter-spacing: -.01em; } /* ---------------------------------------------------------- 7. RESPONSIVE ---------------------------------------------------------- */ @media (max-width: 980px) { /* Editorial */ .se-editorial { grid-template-columns: 1fr; gap: 32px; } /* Page header */ .se-portal-head h1 { font-size: 2.1rem; } /* Card / conv / video grids */ .se-news-grid, .se-conv-grid, .se-video-grid { grid-template-columns: 1fr 1fr; } /* Conv strip (used inside a bordered container) */ .se-conv-card { border-left: 0; border-top: 1px solid var(--se-border); } .se-conv-card:first-child { border-top: 0; } /* Duo */ .se-portal-duo { grid-template-columns: 1fr; gap: 32px; } /* Services */ .se-portal-services { grid-template-columns: 1fr 1fr; } .se-portal-services a:nth-child(3) { border-left: 0; } } @media (max-width: 560px) { /* Grids to single column */ .se-news-grid, .se-conv-grid, .se-video-grid { grid-template-columns: 1fr; } /* Services */ .se-portal-services { grid-template-columns: 1fr; } .se-portal-services a { border-left: 0; border-top: 1px solid var(--se-border); } .se-portal-services a:first-child { border-top: 0; } } /* ========================================================== SE Chiapas UIKit · Portal Público — Artículo + prosa + estado ---------------------------------------------------------- Página de detalle pública: layout artículo + columna lateral, tipografía de prosa para HTML inyectado (.se-prose), reproductor embebido 16:9 (.se-embed) y página de estado 404/500 (.se-state-page). Tokens-first. ========================================================== */ /* ---------------------------------------------------------- 1. LAYOUT DE DETALLE — se-article-layout grid: columna principal + aside fija de 324 px ---------------------------------------------------------- */ .se-article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 324px; gap: 54px; align-items: start; padding: 50px 0 8px; } /* ---------------------------------------------------------- 2. ARTÍCULO — se-article encabezado editorial: eyebrow, título, meta, lead, media ---------------------------------------------------------- */ .se-article .se-article-eyebrow { font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--se-aud-docentes); } .se-article h1 { font-size: 2.5rem; line-height: 1.08; letter-spacing: -.022em; font-weight: 800; color: var(--se-fg-strong); margin: .5rem 0 0; } .se-article-meta { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin: 18px 0 0; font-size: .8rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--se-fg-muted); } .se-article-meta i { color: var(--se-primary-active); } .se-article-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--se-aud-tutores); } .se-article-lead { font-size: 1.18rem; line-height: 1.55; color: var(--se-fg-body); margin: 22px 0 0; padding-bottom: 22px; border-bottom: 2px solid var(--se-primary); font-weight: 500; } .se-article-media { aspect-ratio: 16 / 8; margin: 26px 0 0; border-radius: var(--se-radius-lg); overflow: hidden; border: 1px solid var(--se-border); background-size: cover; background-position: center; } /* ---------------------------------------------------------- 3. PROSA — se-prose tipografía para HTML inyectado / sanitizado: headings, links con subrayado teal, listas, blockquote, img, tabla ---------------------------------------------------------- */ .se-prose { margin-top: 26px; color: var(--se-fg-body); font-size: 1.02rem; line-height: 1.72; } .se-prose > *:first-child { margin-top: 0; } .se-prose h2 { font-size: 1.5rem; font-weight: 800; letter-spacing: -.015em; color: var(--se-fg-strong); margin: 2rem 0 .7rem; } .se-prose h3 { font-size: 1.2rem; font-weight: 800; color: var(--se-fg-strong); margin: 1.6rem 0 .5rem; } .se-prose p { margin: 0 0 1.1rem; } .se-prose a { color: var(--se-primary-active); font-weight: 600; box-shadow: inset 0 -.08em 0 rgba(var(--se-primary-rgb), .2); } .se-prose a:hover { box-shadow: inset 0 -1.05em 0 rgba(var(--se-primary-rgb), .1); } .se-prose ul, .se-prose ol { margin: 0 0 1.1rem; padding-left: 1.4rem; } .se-prose li { margin: .35rem 0; } .se-prose blockquote { margin: 1.4rem 0; padding: .4rem 0 .4rem 1.3rem; border-left: 3px solid var(--se-primary); color: var(--se-fg-strong); font-style: italic; font-size: 1.1rem; } .se-prose img { max-width: 100%; height: auto; border-radius: var(--se-radius-lg); border: 1px solid var(--se-border); margin: 1.2rem 0; } .se-prose table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; font-size: .92rem; } .se-prose th, .se-prose td { border: 1px solid var(--se-border); padding: .6rem .8rem; text-align: left; } .se-prose th { background: var(--se-body-bg); font-weight: 700; color: var(--se-fg-strong); } /* ---------------------------------------------------------- 4. COLUMNA LATERAL — se-portal-aside ---------------------------------------------------------- */ .se-portal-aside { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 22px; } .se-portal-aside-card { border: 1px solid var(--se-border); border-radius: var(--se-radius-lg); background: var(--se-card-bg); padding: 22px; } .se-portal-aside-card h5 { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--se-primary-active); margin: 0 0 14px; } .se-portal-aside-list { display: flex; flex-direction: column; } .se-portal-aside-list a { display: block; padding: 12px 0; border-bottom: 1px solid var(--se-border-light); font-size: .92rem; font-weight: 600; color: var(--se-fg-strong); line-height: 1.3; } .se-portal-aside-list a:last-child { border-bottom: 0; padding-bottom: 0; } .se-portal-aside-list a:hover { color: var(--se-primary-active); } .se-portal-aside-list small { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--se-fg-muted); margin-bottom: 2px; } /* ---------------------------------------------------------- 5. EMBED DE VIDEO — se-embed contenedor responsive 16:9 para iframe YouTube/Vimeo ---------------------------------------------------------- */ .se-embed { position: relative; aspect-ratio: 16 / 9; border-radius: var(--se-radius-lg); overflow: hidden; border: 1px solid var(--se-border); background: var(--se-portal-foot-bg); margin-top: 8px; } .se-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* ---------------------------------------------------------- 6. PÁGINA DE ESTADO — se-state-page pantallas 404 / 500 / sin permisos con escudo marca de agua (distinto de .se-state, el helper de texto de utilidades) ---------------------------------------------------------- */ .se-state-page { min-height: 54vh; display: grid; place-items: center; text-align: center; padding: 64px 24px; position: relative; overflow: hidden; } .se-state-page .se-state-page-crest { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 360px; opacity: .04; filter: grayscale(1); pointer-events: none; background: url('/images/logos/escudo-negro.png') no-repeat center / contain; } .se-state-page-code { font-size: .78rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--se-aud-docentes); } .se-state-page h1 { font-size: 2.4rem; font-weight: 800; letter-spacing: -.02em; color: var(--se-fg-strong); margin: .5rem 0 0; position: relative; } .se-state-page p { color: var(--se-fg-muted); max-width: 48ch; margin: .8rem 0 1.6rem; position: relative; } /* ---------------------------------------------------------- 7. RESPONSIVE ---------------------------------------------------------- */ @media (max-width: 980px) { .se-article-layout { grid-template-columns: 1fr; gap: 36px; } .se-portal-aside { position: static; } .se-article h1 { font-size: 2rem; } } /* ========================================================== SE Chiapas UIKit — Bienvenida (página de inicio default) Landing institucional para sistemas que aún no tienen un dashboard/index propio. Saludo por hora + identidad del sistema + accesos. Centrado, sobrio, con marca de agua del escudo (combina con .se-crest-bg). Todo con tokens. El saludo lo rellena el módulo JS `saludo` (data-se-saludo). ========================================================== */ .se-bienvenida { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 100%; padding: clamp(2rem, 6vh, 5rem) 1.5rem; gap: 0.85rem; } .se-bienvenida-logo { max-height: 72px; width: auto; margin-bottom: 0.5rem; } /* Saludo por hora: "Buenas tardes, 👋" */ .se-bienvenida-saludo { margin: 0; font-size: var(--se-text-2xl); font-weight: var(--se-weight-bold); color: var(--se-fg-strong); line-height: 1.15; } .se-bienvenida-nombre { color: var(--se-primary); } .se-bienvenida-titulo { margin: 0; font-size: var(--se-text-3xl); font-weight: var(--se-weight-xbold); color: var(--se-fg-strong); letter-spacing: -0.01em; } .se-bienvenida-subtitulo { margin: 0; max-width: 52ch; font-size: var(--se-text-lg); color: var(--se-fg-muted); } .se-bienvenida-acciones { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-top: 1rem; } .se-bienvenida-meta { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.55rem; margin-top: 1.5rem; font-size: var(--se-text-sm); color: var(--se-fg-subtle); } .se-bienvenida-meta .se-bienvenida-meta-sep { opacity: 0.5; } @media (max-width: 575.98px) { .se-bienvenida-saludo { font-size: var(--se-text-xl); } .se-bienvenida-titulo { font-size: var(--se-text-2xl); } .se-bienvenida-subtitulo { font-size: var(--se-text-md); } } /* ========================================================== SE Chiapas UIKit — Auth / Centrado Layout de página completa SIN sidebar ni topbar: una tarjeta centrada sobre fondo institucional. Cubre login, errores (404/403/500), mantenimiento y splash. Combina con .se-crest-bg para la marca de agua del escudo. Reusa .se-input / .se-btn. ========================================================== */ .se-auth { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 2rem 1.25rem; background: var(--se-body-bg); } /* Tarjeta central */ .se-auth-card { width: 100%; max-width: 420px; background: var(--se-card-bg); border: 1px solid var(--se-border); border-radius: var(--se-radius-2xl); box-shadow: var(--se-shadow-lg); padding: clamp(1.5rem, 4vw, 2.5rem); text-align: center; } .se-auth-card--wide { max-width: 560px; } .se-auth-logo { max-height: 56px; width: auto; margin-bottom: 1.25rem; } .se-auth-title { margin: 0; font-size: var(--se-text-xl); font-weight: var(--se-weight-xbold); color: var(--se-fg-strong); } .se-auth-subtitle { margin: 0.35rem 0 0; font-size: var(--se-text-md); color: var(--se-fg-muted); } /* Cuerpo (formulario o contenido) — alinea a la izquierda los campos */ .se-auth-body { margin-top: 1.5rem; text-align: left; display: flex; flex-direction: column; gap: 0.85rem; } .se-auth-body .se-btn { width: 100%; justify-content: center; } /* Excepción: un botón dentro de un input-group (p.ej. el toggle de contraseña) NO es full-width; debe encajar como sufijo del campo sin descuadrarlo. */ .se-auth-body .se-input-group .se-btn { width: auto; flex: 0 0 auto; justify-content: center; } /* Para páginas de error: número grande + mensaje */ .se-auth-code { font-size: var(--se-text-3xl); font-weight: var(--se-weight-xbold); line-height: 1; color: var(--se-primary); letter-spacing: -0.02em; } /* Pie de la tarjeta (enlaces secundarios) */ .se-auth-foot { margin-top: 1.25rem; font-size: var(--se-text-sm); color: var(--se-fg-muted); } /* Firma institucional bajo la tarjeta */ .se-auth-brand { margin-top: 1.5rem; display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--se-text-sm); color: var(--se-fg-subtle); } .se-auth-brand img { height: 22px; width: auto; opacity: 0.85; } /* ========================================================== se-auth--split — Variante de 2 paneles (login institucional) ---------------------------------------------------------- Panel lateral institucional (marca + escudo de fondo) a la izquierda + panel de formulario a la derecha. Elevado desde el login de eedu.web.auth. Los CAMPOS usan los canónicos (.se-input/.se-btn); esta variante solo aporta el shell de 2 columnas. En <992px el aside se oculta y el formulario ocupa todo el ancho. La app define las imágenes vía variables (sin hex/urls en el kit): --se-auth-crest : url() del escudo de fondo del panel lateral --se-auth-trama : url() de la trama del panel de formulario Markup: ver templates/razor/_LayoutAuthSplit.cshtml ========================================================== */ .se-auth--split { flex-direction: row; align-items: stretch; justify-content: flex-start; padding: 0; min-height: 100vh; } /* Panel institucional (izquierda) */ .se-auth-aside { flex: 0 0 50%; position: relative; display: flex; align-items: center; justify-content: center; padding: 4rem; overflow: hidden; background: var(--se-primary); color: #fff; } /* Escudo de fondo, muy sutil */ .se-auth-aside::before { content: ''; position: absolute; top: 50%; left: 50%; width: 85%; height: 85%; transform: translate(-50%, -50%); background: var(--se-auth-crest, none) no-repeat center / contain; opacity: 0.08; pointer-events: none; z-index: 1; } .se-auth-aside-content { position: relative; z-index: 2; text-align: center; width: 100%; } .se-auth-aside-content .se-auth-title, .se-auth-aside-content .se-auth-subtitle { color: #fff; } .se-auth-aside-content .se-auth-subtitle { opacity: 0.85; } .se-auth-aside-head { position: absolute; top: 2rem; left: 4rem; z-index: 2; } .se-auth-aside-foot { position: absolute; bottom: 3rem; left: 4rem; width: 85%; z-index: 2; font-size: var(--se-text-sm); color: rgba(255, 255, 255, 0.85); } .se-auth-aside-head img { height: 4rem; width: auto; } .se-auth-aside-foot img { height: 3rem; width: auto; } /* Panel del formulario (derecha) — apila logo de app + tarjeta, centrados */ .se-auth-main { flex: 0 0 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; padding: 2rem; } /* Logo de la app (opcional) sobre la tarjeta del formulario */ .se-auth-main-logo { position: relative; z-index: 1; max-height: 3.5rem; width: auto; margin-bottom: 2rem; } /* Trama de fondo opcional del panel de formulario */ .se-auth-main-trama { position: absolute; inset: 0; background: var(--se-auth-trama, none) no-repeat center / cover; opacity: 0.6; pointer-events: none; z-index: 0; } .se-auth-main > .se-auth-card { position: relative; z-index: 1; width: 100%; } /* En split, la tarjeta del formulario es plana (el panel ya da el marco) */ .se-auth--split .se-auth-card { max-width: 25rem; background: transparent; border: 0; box-shadow: none; text-align: left; } @media (max-width: 991.98px) { .se-auth--split { flex-direction: column; } .se-auth-aside { display: none; } .se-auth-main { flex: 1 1 100%; } } /* ========================================================== SE Chiapas UIKit — Master-Detail Lista a la izquierda + panel de detalle a la derecha (ej. expedientes, bandeja de formularios, respuestas). Vive DENTRO del content de cualquier layout. En móvil colapsa a una sola columna: con .is-detail-open (toggle por JS) muestra el panel. ========================================================== */ .se-masterdetail { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 1rem; align-items: start; min-height: 0; } /* ---- Lista (master) ---- */ .se-masterdetail-list { display: flex; flex-direction: column; background: var(--se-card-bg); border: 1px solid var(--se-border); border-radius: var(--se-radius-xl); box-shadow: var(--se-shadow-xs); overflow: hidden; } .se-masterdetail-list-head { padding: var(--se-pad-cell); font-size: var(--se-text-md); border-bottom: 1px solid var(--se-border-light); font-weight: var(--se-weight-semibold); color: var(--se-fg-strong); display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .se-masterdetail-items { overflow-y: auto; } .se-md-item { display: block; width: 100%; text-align: left; padding: 0.7rem 1rem; border: 0; border-bottom: 1px solid var(--se-border-light); border-left: 3px solid transparent; background: transparent; color: var(--se-fg-body); text-decoration: none; cursor: pointer; } .se-md-item:hover { background: var(--se-subtle-bg); } .se-md-item.is-active { background: var(--se-primary-nav-bg); border-left-color: var(--se-primary); } .se-md-item-title { font-weight: var(--se-weight-semibold); color: var(--se-fg-strong); } .se-md-item-meta { font-size: var(--se-text-sm); color: var(--se-fg-muted); } /* ---- Panel (detail) ---- */ .se-masterdetail-panel { background: var(--se-card-bg); border: 1px solid var(--se-border); border-radius: var(--se-radius-xl); box-shadow: var(--se-shadow-xs); padding: 1.25rem 1.5rem; min-width: 0; } /* Botón "volver a la lista" — solo visible en móvil */ .se-masterdetail-back { display: none; } @media (max-width: 767.98px) { .se-masterdetail { grid-template-columns: 1fr; } .se-masterdetail.is-detail-open .se-masterdetail-list { display: none; } .se-masterdetail:not(.is-detail-open) .se-masterdetail-panel { display: none; } .se-masterdetail.is-detail-open .se-masterdetail-back { display: inline-flex; } } /* ========================================================== SE Chiapas UIKit — Split (dos paneles) Dos paneles lado a lado dentro de una tarjeta (ej. editor + preview de un constructor de formularios). Vive dentro del content; ideal a sangre en el layout "foco". En móvil apila. ========================================================== */ .se-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 0; height: 100%; background: var(--se-card-bg); border: 1px solid var(--se-border); border-radius: var(--se-radius-xl); box-shadow: var(--se-shadow-xs); overflow: hidden; } .se-split--40-60 { grid-template-columns: 2fr 3fr; } .se-split--60-40 { grid-template-columns: 3fr 2fr; } .se-split--narrow-left { grid-template-columns: minmax(260px, 360px) 1fr; } .se-split-pane { overflow: auto; padding: 1.25rem 1.5rem; min-width: 0; } .se-split-pane + .se-split-pane { border-left: 1px solid var(--se-border); } .se-split-pane--muted { background: var(--se-surface-bg); } .se-split-pane-head { font-size: var(--se-text-md); font-weight: var(--se-weight-semibold); color: var(--se-fg-strong); margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--se-border-light); display: flex; align-items: center; gap: 0.5rem; } @media (max-width: 767.98px) { .se-split, .se-split--40-60, .se-split--60-40, .se-split--narrow-left { grid-template-columns: 1fr; } .se-split-pane + .se-split-pane { border-left: 0; border-top: 1px solid var(--se-border); } } /* ========================================================== SE Chiapas UIKit — Content + Aside (riel lateral) Contenido principal + un riel de contexto/filtros/propiedades. Por defecto el riel va a la DERECHA (filtros, propiedades de un campo, metadatos). Modifier --left para ponerlo a la izquierda (en ese caso coloca el