/* ========================================================= NEW STYLE - SISTEMA GLOBAL Prefijo: ns- USO: Estas clases son independientes de los estilos existentes. No modifican elementos HTML globalmente. Se aplican únicamente cuando se agrega la clase ns-*. --------------------------------------------------------- TEXTOS Y TITULOS --------------------------------------------------------- TITULOS: .ns-title Título principal. .ns-title-sm Título pequeño. .ns-title-lg Título grande. SUBTITULOS: .ns-subtitle Subtítulo normal. .ns-subtitle-sm Subtítulo pequeño. .ns-subtitle-lg Subtítulo grande. TEXTO: .ns-text Texto normal. .ns-text-sm Texto pequeño. .ns-text-lg Texto grande. .ns-text-xl Texto extra grande. COLORES: .ns-text-primary .ns-text-secondary .ns-text-success .ns-text-warning .ns-text-danger .ns-text-info .ns-text-dark .ns-text-muted .ns-text-white .ns-text-black PESO: .ns-text-light .ns-text-normal .ns-text-medium .ns-text-semibold .ns-text-bold ALINEACION: .ns-text-left .ns-text-center .ns-text-right IMPORTANTE: Estas clases son independientes de los estilos existentes y pueden combinarse entre sí. Ejemplo: ns-text ns-text-sm ns-text-danger ns-text-bold --------------------------------------------------------- --------------------------------------------------------- BOTONES --------------------------------------------------------- .ns-btn - ns-btn-primary - ns-btn-secondary - ns-btn-danger - ns-btn-success - ns-btn-warning - ns-btn-info - ns-btn-dark - ns-btn-outline - ns-btn-light --------------------------------------------------------- ESTADOS (para contenedores con texto, como divs, span, label, etc.) --------------------------------------------------------- .ns-status - ns-status-success - ns-status-warning - ns-status-error - ns-status-info - ns-status-default --------------------------------------------------------- SUPERFICIES / CONTENEDORES (para diseño de jerarquia entre contenedores) --------------------------------------------------------- .ns-surface Contenedor principal. .ns-surface-soft Contenedor secundario. .ns-surface-inner Información interna. .ns-surface-section Separación de bloques. BANNERS --------------------------------------------------------- .ns-banner .ns-banner-primary .ns-banner-success .ns-banner-warning .ns-banner-danger .ns-banner-info .ns-banner-dark SUB-BANNERS --------------------------------------------------------- .ns-sub-banner .ns-sub-banner-primary .ns-sub-banner-success .ns-sub-banner-warning .ns-sub-banner-danger .ns-sub-banner-info TOOLBAR --------------------------------------------------------- .ns-toolbar .ns-toolbar-soft .ns-toolbar-dark PANEL --------------------------------------------------------- .ns-panel .ns-panel-soft HIGHLIGHT --------------------------------------------------------- .ns-highlight .ns-highlight-primary .ns-highlight-success .ns-highlight-warning .ns-highlight-danger .ns-highlight-info SECTION --------------------------------------------------------- .ns-section .ns-section-soft .ns-section-dark --------------------------------------------------------- CHECKBOX --------------------------------------------------------- .ns-checkbox Checkbox con estilo NS. .ns-checkbox-lg Checkbox de mayor tamaño. --------------------------------------------------------- UTILIDADES (para las propiedades de un elemento utilizando !important) --------------------------------------------------------- Estas clases NO definen el diseño completo del elemento. Modifican únicamente una propiedad o grupo pequeño de propiedades. BORDER RADIUS: .ns-radius-sm .ns-radius .ns-radius-lg .ns-radius-none PADDING: .ns-padding-sm .ns-padding .ns-padding-lg .ns-padding-xl MARGIN: .ns-margin-sm .ns-margin .ns-margin-lg MARGIN POR DIRECCIÓN: Arriba: .ns-mt-sm .ns-mt .ns-mt-lg Abajo: .ns-mb-sm .ns-mb .ns-mb-lg Izquierda: .ns-ml-sm .ns-ml .ns-ml-lg Derecha: .ns-mr-sm .ns-mr .ns-mr-lg BORDER: .ns-border .ns-border-none SHADOW: .ns-shadow-sm .ns-shadow .ns-shadow-lg .ns-shadow-none ========================================================= */ /* ========================================================= VARIABLES ========================================================= */ :root { /* Colores principales */ --ns-primary: #3b82f6; --ns-primary-hover: #2563eb; --ns-primary-light: rgba(59, 130, 246, 0.12); --ns-secondary: #64748b; --ns-secondary-hover: #475569; --ns-secondary-light: rgba(100, 116, 139, 0.12); --ns-gray-hover: #979faa; --ns-gray-light: rgba(107, 114, 124, 0.12); /* Estados */ --ns-success: #22c55e; --ns-success-hover: #16a34a; --ns-success-light: rgba(34, 197, 94, 0.12); --ns-warning: #f59e0b; --ns-warning-hover: #d97706; --ns-warning-light: rgba(245, 158, 11, 0.12); --ns-danger: #ef4444; --ns-danger-hover: #dc2626; --ns-danger-light: rgba(239, 68, 68, 0.12); --ns-info: #06b6d4; --ns-info-hover: #0891b2; --ns-info-light: rgba(6, 182, 212, 0.12); /* Neutros */ --ns-dark: #111827; --ns-dark-hover: #1f2937; --ns-light: #f8fafc; --ns-gray: #64748b; --ns-border: #e2e8f0; --ns-white: #ffffff; /* Texto */ --ns-text: #1e293b; --ns-text-muted: #64748b; /* Inputs */ --ns-input-bg: #ffffff; --ns-input-border: #cbd5e1; --ns-input-focus: #3b82f6; /* Bordes */ --ns-radius-sm: 6px; --ns-radius: 9px; --ns-radius-lg: 12px; /* Sombras */ --ns-shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.08); --ns-shadow: 0 5px 15px rgba(15, 23, 42, 0.10); --ns-shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.14); /* Transición */ --ns-transition: 0.2s ease; } /* ========================================================= UTILIDADES NS Estas clases NO definen el diseño del elemento. Solo modifican propiedades específicas. ========================================================= */ /* ========================================================= BORDER RADIUS ========================================================= */ .ns-radius-sm { border-radius: var(--ns-radius-sm) !important; } .ns-radius { border-radius: var(--ns-radius) !important; } .ns-radius-lg { border-radius: var(--ns-radius-lg) !important; } .ns-radius-none { border-radius: 0 !important; } /* ========================================================= PADDING ========================================================= */ .ns-padding-sm { padding: 6px 10px !important; } .ns-padding { padding: 10px 14px !important; } .ns-padding-lg { padding: 14px 18px !important; } .ns-padding-xl { padding: 24px 28px !important; } /* ========================================================= MARGIN ========================================================= */ .ns-margin-sm { margin: 5px !important; } .ns-margin { margin: 10px !important; } .ns-margin-lg { margin: 15px !important; } .ns-margin-xl { margin: 25px !important; } /* Margin arriba */ .ns-mt-sm { margin-top: 5px !important; } .ns-mt { margin-top: 10px !important; } .ns-mt-lg { margin-top: 15px !important; } /* Margin abajo */ .ns-mb-sm { margin-bottom: 5px !important; } .ns-mb { margin-bottom: 10px !important; } .ns-mb-lg { margin-bottom: 15px !important; } /* Margin izquierda */ .ns-ml-sm { margin-left: 5px !important; } .ns-ml { margin-left: 10px !important; } .ns-ml-lg { margin-left: 15px !important; } /* Margin derecha */ .ns-mr-sm { margin-right: 5px !important; } .ns-mr { margin-right: 10px !important; } .ns-mr-lg { margin-right: 15px !important; } /* ========================================================= BORDE ========================================================= */ .ns-border { border: 1px solid var(--ns-border) !important; } .ns-border-none { border: none !important; } /* ========================================================= SOMBRA ========================================================= */ .ns-shadow-sm { box-shadow: var(--ns-shadow-sm) !important; } .ns-shadow { box-shadow: var(--ns-shadow) !important; } .ns-shadow-lg { box-shadow: var(--ns-shadow-lg) !important; } .ns-shadow-none { box-shadow: none !important; } /* ========================================================= FIN A LA LA SECCIOND E CLASES UTILITARIAS ========================================================= */ /* ========================================================= BOTONES ========================================================= */ .ns-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 16px; border: 1px solid transparent; border-radius: var(--ns-radius); font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; box-sizing: border-box; transition: background var(--ns-transition), border-color var(--ns-transition), color var(--ns-transition), box-shadow var(--ns-transition), transform var(--ns-transition); } .ns-btn:hover { transform: translateY(-1px); } .ns-btn:active { transform: translateY(0); } /* PRIMARY */ .ns-btn-primary { background: var(--ns-primary); border-color: var(--ns-primary); color: var(--ns-white); } .ns-btn-primary:hover { background: var(--ns-primary-hover); border-color: var(--ns-primary-hover); } /* SECONDARY */ .ns-btn-secondary { background: var(--ns-secondary); border-color: var(--ns-secondary); color: var(--ns-white); } .ns-btn-secondary:hover { background: var(--ns-secondary-hover); border-color: var(--ns-secondary-hover); } /* SUCCESS */ .ns-btn-success { background: var(--ns-success); border-color: var(--ns-success); color: var(--ns-white); } .ns-btn-success:hover { background: var(--ns-success-hover); border-color: var(--ns-success-hover); } /* WARNING */ .ns-btn-warning { background: var(--ns-warning); border-color: var(--ns-warning); color: var(--ns-white); } .ns-btn-warning:hover { background: var(--ns-warning-hover); border-color: var(--ns-warning-hover); } /* DANGER */ .ns-btn-danger { background: var(--ns-danger); border-color: var(--ns-danger); color: var(--ns-white); } .ns-btn-danger:hover { background: var(--ns-danger-hover); border-color: var(--ns-danger-hover); } /* INFO */ .ns-btn-info { background: var(--ns-info); border-color: var(--ns-info); color: var(--ns-white); } .ns-btn-info:hover { background: var(--ns-info-hover); border-color: var(--ns-info-hover); } /* DARK */ .ns-btn-dark { background: var(--ns-dark); border-color: var(--ns-dark); color: var(--ns-white); } .ns-btn-dark:hover { background: var(--ns-dark-hover); } /* LIGHT */ .ns-btn-light { background: var(--ns-light); border-color: var(--ns-border); color: var(--ns-text); } .ns-btn-light:hover { background: #f1f5f9; } /* OUTLINE */ .ns-btn-outline { background: transparent; border-color: var(--ns-border); color: var(--ns-text); } .ns-btn-outline:hover { background: var(--ns-light); } /* OUTLINE PRIMARY */ .ns-btn-outline-primary { background: transparent; border-color: var(--ns-primary); color: var(--ns-primary); } .ns-btn-outline-primary:hover { background: var(--ns-primary-light); } /* ========================================================= TAMAÑOS DE BOTONES ========================================================= */ .ns-btn-sm { min-height: 34px; padding: 6px 12px; font-size: 12px; } .ns-btn-lg { min-height: 48px; padding: 10px 20px; font-size: 15px; } .ns-btn-block { width: 100%; } /* ========================================================= INPUTS ========================================================= */ .ns-input { width: 100%; min-height: 42px; padding: 9px 12px; box-sizing: border-box; border: 1px solid var(--ns-input-border); border-radius: var(--ns-radius); outline: none; background: var(--ns-input-bg); color: var(--ns-text); font-family: inherit; font-size: 14px; transition: border-color var(--ns-transition), box-shadow var(--ns-transition), background var(--ns-transition); } .ns-input::placeholder { color: #94a3b8; } .ns-input:hover { border-color: #94a3b8; } .ns-input:focus { border-color: var(--ns-input-focus); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12); } .ns-input:disabled { background: #f1f5f9; color: #94a3b8; cursor: not-allowed; } /* ========================================================= SELECT ========================================================= */ .ns-select { width: 100%; min-height: 42px; padding: 9px 36px 9px 12px; box-sizing: border-box; border: 1px solid var(--ns-input-border); border-radius: var(--ns-radius); outline: none; background-color: var(--ns-white); color: var(--ns-text); font-family: inherit; font-size: 14px; cursor: pointer; transition: border-color var(--ns-transition), box-shadow var(--ns-transition); } .ns-select-sm { width: 100%; min-height: 36px; padding: 6px 30px 6px 10px; box-sizing: border-box; border: 1px solid var(--ns-input-border); border-radius: var(--ns-radius-sm); outline: none; background-color: var(--ns-white); color: var(--ns-text); font-family: inherit; font-size: 13px; cursor: pointer; transition: border-color var(--ns-transition), box-shadow var(--ns-transition); } .ns-select:hover { border-color: #94a3b8; } .ns-select:focus { border-color: var(--ns-input-focus); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12); } /* ========================================================= TEXTAREA ========================================================= */ .ns-textarea { width: 100%; min-height: 100px; padding: 10px 12px; box-sizing: border-box; resize: vertical; border: 1px solid var(--ns-input-border); border-radius: var(--ns-radius); outline: none; background: var(--ns-white); color: var(--ns-text); font-family: inherit; font-size: 14px; line-height: 1.5; transition: border-color var(--ns-transition), box-shadow var(--ns-transition); } .ns-textarea:focus { border-color: var(--ns-input-focus); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12); } /* ========================================================= LABEL ========================================================= */ .ns-label { display: block; margin-bottom: 6px; color: var(--ns-text); font-size: 13px; font-weight: 600; } .ns-label-required::after { content: " *"; color: var(--ns-danger); } /* ========================================================= GRUPOS DE FORMULARIO ========================================================= */ .ns-form-group { width: 100%; margin-bottom: 16px; } .ns-form-help { display: block; margin-top: 5px; color: var(--ns-text-muted); font-size: 12px; } /* ========================================================= CHECKBOX ========================================================= */ .ns-checkbox { display: inline-flex; align-items: center; gap: 8px; color: var(--ns-text); font-size: 14px; cursor: pointer; } .ns-checkbox-sm { width: 15px; height: 15px; } .ns-checkbox-lg { width: 22px; height: 22px; } .ns-checkbox-xl { width: 35px; height: 35px; } .ns-checkbox input { width: 17px; height: 17px; margin: 0; accent-color: var(--ns-primary); cursor: pointer; } /* ========================================================= RADIO ========================================================= */ .ns-radio { display: inline-flex; align-items: center; gap: 8px; color: var(--ns-text); font-size: 14px; cursor: pointer; } .ns-radio input { width: 17px; height: 17px; margin: 0; accent-color: var(--ns-primary); cursor: pointer; } /* ========================================================= ALERTAS ========================================================= */ .ns-alert { width: 100%; padding: 12px 15px; box-sizing: border-box; border: 1px solid transparent; border-radius: var(--ns-radius); font-size: 14px; line-height: 1.5; } .ns-alert-primary { background: var(--ns-primary-light); border-color: rgba(59, 130, 246, 0.25); color: #1d4ed8; } .ns-alert-success { background: var(--ns-success-light); border-color: rgba(34, 197, 94, 0.25); color: #15803d; } .ns-alert-warning { background: var(--ns-warning-light); border-color: rgba(245, 158, 11, 0.25); color: #b45309; } .ns-alert-danger { background: var(--ns-danger-light); border-color: rgba(239, 68, 68, 0.25); color: #b91c1c; } .ns-alert-info { background: var(--ns-info-light); border-color: rgba(6, 182, 212, 0.25); color: #0e7490; } /* ========================================================= BADGES ========================================================= */ .ns-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 24px; padding: 3px 9px; box-sizing: border-box; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 1; } .ns-badge-primary { background: var(--ns-primary-light); color: var(--ns-primary); } .ns-badge-success { background: var(--ns-success-light); color: var(--ns-success-hover); } .ns-badge-warning { background: var(--ns-warning-light); color: var(--ns-warning-hover); } .ns-badge-danger { background: var(--ns-danger-light); color: var(--ns-danger-hover); } .ns-badge-info { background: var(--ns-info-light); color: var(--ns-info-hover); } .ns-badge-secondary { background: var(--ns-secondary-light); color: var(--ns-secondary-hover); } /* ========================================================= CARDS ========================================================= */ .ns-card { width: 100%; box-sizing: border-box; padding: 20px; background: var(--ns-white); border: 1px solid var(--ns-border); border-radius: var(--ns-radius-lg); box-shadow: var(--ns-shadow-sm); } .ns-card-header { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--ns-border); } .ns-card-title { margin: 0; color: var(--ns-text); font-size: 16px; font-weight: 700; } .ns-card-body { width: 100%; } .ns-card-footer { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--ns-border); } /* ========================================================= TABLAS ========================================================= */ .ns-table-wrapper { width: 100%; overflow-x: auto; border: 1px solid var(--ns-border); border-radius: var(--ns-radius); } .ns-table { width: 100%; border-collapse: collapse; background: var(--ns-white); color: var(--ns-text); font-size: 13px; } .ns-table th { padding: 11px 13px; background: var(--ns-light); border-bottom: 1px solid var(--ns-border); color: var(--ns-text-muted); font-size: 11px; font-weight: 700; text-align: left; text-transform: uppercase; } .ns-table td { padding: 11px 13px; border-bottom: 1px solid var(--ns-border); vertical-align: middle; } .ns-table tbody tr:last-child td { border-bottom: none; } .ns-table tbody tr:hover { background: #f8fafc; } /* ========================================================= SEPARADOR ========================================================= */ .ns-divider { width: 100%; height: 1px; margin: 16px 0; background: var(--ns-border); } /* ========================================================= GRUPOS DE BOTONES ========================================================= */ .ns-btn-group { display: flex; flex-wrap: wrap; gap: 8px; } /* ========================================================= ICON BUTTON ========================================================= */ .ns-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--ns-border); border-radius: var(--ns-radius); background: var(--ns-white); color: var(--ns-text); cursor: pointer; transition: background var(--ns-transition), border-color var(--ns-transition), color var(--ns-transition); } .ns-icon-btn:hover { background: var(--ns-light); border-color: #cbd5e1; } /* ========================================================= ESTADOS DE TEXTO ========================================================= */ .ns-text-primary { color: var(--ns-primary) !important; } .ns-text-secondary { color: var(--ns-secondary) !important; } .ns-text-success { color: var(--ns-success-hover) !important; } .ns-text-warning { color: var(--ns-warning-hover) !important; } .ns-text-danger { color: var(--ns-danger-hover) !important; } .ns-text-info { color: var(--ns-info-hover) !important; } .ns-text-muted { color: var(--ns-text-muted) !important; } /* ========================================================= FONDOS ========================================================= */ .ns-bg-primary { background: var(--ns-primary) !important; color: var(--ns-white); } .ns-bg-secondary { background: var(--ns-secondary) !important; color: var(--ns-white); } .ns-bg-success { background: var(--ns-success) !important; color: var(--ns-white); } .ns-bg-warning { background: var(--ns-warning) !important; color: var(--ns-white); } .ns-bg-danger { background: var(--ns-danger) !important; color: var(--ns-white); } .ns-bg-info { background: var(--ns-info) !important; color: var(--ns-white); } .ns-bg-light { background: var(--ns-light) !important; } .ns-bg-dark { background: var(--ns-dark) !important; color: var(--ns-white); } .ns-bg-gray { background: var(--ns-gray) !important; color: var(--ns-whitete); } /* ========================================================= ANCHOS ========================================================= */ .ns-w-25 { width: 25%; } .ns-w-50 { width: 50%; } .ns-w-75 { width: 75%; } .ns-w-100 { width: 100%; } /* ========================================================= ESPACIADO ========================================================= */ .ns-mt-1 { margin-top: 5px; } .ns-mt-2 { margin-top: 10px; } .ns-mt-3 { margin-top: 15px; } .ns-mt-4 { margin-top: 20px; } .ns-mb-1 { margin-bottom: 5px; } .ns-mb-2 { margin-bottom: 10px; } .ns-mb-3 { margin-bottom: 15px; } .ns-mb-4 { margin-bottom: 20px; } .ns-p-1 { padding: 5px; } .ns-p-2 { padding: 10px; } .ns-p-3 { padding: 15px; } .ns-p-4 { padding: 20px; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 768px) { .ns-btn { min-height: 42px; } .ns-btn-group { width: 100%; } .ns-btn-group .ns-btn { flex: 1 1 auto; } .ns-card { padding: 15px; border-radius: var(--ns-radius); } .ns-card-header { flex-direction: column; align-items: flex-start; } .ns-w-25, .ns-w-50, .ns-w-75 { width: 100%; } } @media (max-width: 480px) { .ns-btn { width: 100%; } .ns-btn-group { flex-direction: column; } .ns-icon-btn { width: 42px; height: 42px; } } /* ========================================================= ESTADOS / BADGES ========================================================= */ .ns-status { display: inline-flex; align-items: center; justify-content: center; min-width: 70px; padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.3; white-space: nowrap; border: 1px solid transparent; box-sizing: border-box; } /* SUCCESS */ .ns-status-success { background: rgba(34, 197, 94, 0.12); color: #15803d !important; border-color: rgba(34, 197, 94, 0.25); } /* WARNING */ .ns-status-warning { background: rgba(234, 179, 8, 0.14); color: #a16207 !important; border-color: rgba(234, 179, 8, 0.28); } /* ERROR */ .ns-status-error { background: rgba(239, 68, 68, 0.12); color: #b91c1c !important; border-color: rgba(239, 68, 68, 0.25); } /* INFO */ .ns-status-info { background: rgba(59, 130, 246, 0.12); color: #1d4ed8 !important; border-color: rgba(59, 130, 246, 0.25); } /* DEFAULT */ .ns-status-default { background: rgba(107, 114, 128, 0.12); color: #4b5563 !important; border-color: rgba(107, 114, 128, 0.22); } /* ========================================================= SUPERFICIES / CONTENEDORES ========================================================= */ .ns-flex { display: flex; } .ns-flex-row { display: flex; flex-direction: row; } .ns-jcenter { justify-content: center; } .ns-acenter { align-items: center; } .ns-jleft { justify-content: left; } .ns-aleft { align-items: start; } .ns-jright { justify-content: right; } .ns-aright { align-items: end; } .ns-flex-col { display: flex; flex-direction: column; } .ns-w-full { width: 100%; } .ns-h-full { height: 100%; } .ns-gap-sm { gap: 4px; } .ns-gap { gap: 8px; } .ns-gap-lg { gap: 12px; } .ns-surface { box-sizing: border-box; width: 100%; padding: 15px; background: var(--ns-white); border: 1px solid var(--ns-border); border-radius: var(--ns-radius); box-shadow: var(--ns-shadow-sm); color: var(--ns-text); } /* --------------------------------------------------------- SUPERFICIE SUAVE --------------------------------------------------------- */ .ns-surface-soft { box-sizing: border-box; width: 100%; padding: 14px; background: var(--ns-light); border: 1px solid var(--ns-border); border-radius: var(--ns-radius); color: var(--ns-text); } /* --------------------------------------------------------- SUPERFICIE INTERNA --------------------------------------------------------- */ .ns-surface-inner { box-sizing: border-box; width: 100%; padding: 12px; background: var(--ns-white); border-radius: var(--ns-radius-sm); color: var(--ns-text); } /* --------------------------------------------------------- SECCIÓN --------------------------------------------------------- */ .ns-surface-section { box-sizing: border-box; width: 100%; padding: 10px 12px; background: var(--ns-light); border-radius: var(--ns-radius-sm); color: var(--ns-text); } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 768px) { .ns-surface { padding: 12px; } .ns-surface-soft { padding: 12px; } .ns-surface-inner { padding: 10px; } .ns-surface-section { padding: 9px 10px; } } /* ========================================================= BANNER Contenedor destacado para avisos, encabezados o información importante. ========================================================= */ .ns-banner { box-sizing: border-box; width: 100%; padding: 16px 18px; border: 1px solid transparent; border-radius: var(--ns-radius); display: flex; align-items: center; gap: 10px; color: var(--ns-text); box-shadow: var(--ns-shadow-sm); } /* Variantes */ .ns-banner-primary { background: var(--ns-primary-light); border-color: rgba(59, 130, 246, 0.25); } .ns-banner-success { background: var(--ns-success-light); border-color: rgba(34, 197, 94, 0.25); } .ns-banner-warning { background: var(--ns-warning-light); border-color: rgba(245, 158, 11, 0.25); } .ns-banner-danger { background: var(--ns-danger-light); border-color: rgba(239, 68, 68, 0.25); } .ns-banner-info { background: var(--ns-info-light); border-color: rgba(6, 182, 212, 0.25); } .ns-banner-dark { background: var(--ns-dark); border-color: var(--ns-dark); color: var(--ns-white); } /* ========================================================= SUB-BANNER Versión más pequeña y discreta del banner. Ideal para encabezados secundarios o bloques internos. ========================================================= */ .ns-sub-banner { box-sizing: border-box; width: 100%; padding: 10px 14px; border-radius: var(--ns-radius-sm); display: flex; align-items: center; gap: 8px; color: var(--ns-text); border: 1px solid var(--ns-border); } /* Variantes */ .ns-sub-banner-primary { background: var(--ns-primary-light); border-color: rgba(59, 130, 246, 0.20); } .ns-sub-banner-success { background: var(--ns-success-light); border-color: rgba(34, 197, 94, 0.20); } .ns-sub-banner-warning { background: var(--ns-warning-light); border-color: rgba(245, 158, 11, 0.20); } .ns-sub-banner-danger { background: var(--ns-danger-light); border-color: rgba(239, 68, 68, 0.20); } .ns-sub-banner-info { background: var(--ns-info-light); border-color: rgba(6, 182, 212, 0.20); } /* ========================================================= TOOLBAR Barra de herramientas para botones, filtros, búsquedas, selects y acciones. ========================================================= */ .ns-toolbar { box-sizing: border-box; width: 100%; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--ns-white); border: 1px solid var(--ns-border); border-radius: var(--ns-radius); box-shadow: var(--ns-shadow-sm); color: var(--ns-text); } .ns-toolbar-soft { background: var(--ns-light); box-shadow: none; } .ns-toolbar-dark { background: var(--ns-dark); border-color: var(--ns-dark); color: var(--ns-white); box-shadow: var(--ns-shadow); } /* ========================================================= PANEL Contenedor para agrupar contenido relacionado. Más estructurado que un section simple. ========================================================= */ .ns-panel { box-sizing: border-box; width: 100%; padding: 16px; background: var(--ns-white); border: 1px solid var(--ns-border); border-radius: var(--ns-radius); box-shadow: var(--ns-shadow); color: var(--ns-text); } .ns-panel-soft { background: var(--ns-light); box-shadow: none; } /* ========================================================= HIGHLIGHT Bloque para destacar información dentro de una vista. ========================================================= */ .ns-highlight { box-sizing: border-box; width: 100%; padding: 12px 14px; border-left: 4px solid var(--ns-primary); border-radius: var(--ns-radius-sm); background: var(--ns-primary-light); color: var(--ns-text); } /* Variantes */ .ns-highlight-primary { border-left-color: var(--ns-primary); background: var(--ns-primary-light); } .ns-highlight-success { border-left-color: var(--ns-success); background: var(--ns-success-light); } .ns-highlight-warning { border-left-color: var(--ns-warning); background: var(--ns-warning-light); } .ns-highlight-danger { border-left-color: var(--ns-danger); background: var(--ns-danger-light); } .ns-highlight-info { border-left-color: var(--ns-info); background: var(--ns-info-light); } /* ========================================================= SECTION Separador visual ligero para dividir contenido dentro de una vista sin crear una tarjeta completa. ========================================================= */ .ns-section { box-sizing: border-box; width: 100%; padding: 12px 14px; background: var(--ns-white); border: 1px solid var(--ns-border); border-radius: var(--ns-radius-sm); color: var(--ns-text); } .ns-section-soft { background: var(--ns-light); border-color: transparent; } .ns-section-dark { background: var(--ns-dark); border-color: var(--ns-dark); color: var(--ns-white); } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 768px) { .ns-banner { padding: 13px 14px; } .ns-sub-banner { padding: 9px 11px; } .ns-toolbar { padding: 9px 10px; flex-wrap: wrap; } .ns-panel { padding: 13px; } .ns-highlight { padding: 10px 12px; } .ns-section { padding: 10px 12px; } } /* fin de superficies y contenedores */ /* inicio titulos y textos */ /* ========================================================= TEXTOS Y TITULOS ========================================================= */ /* --------------------------------------------------------- TITULOS --------------------------------------------------------- */ .ns-title { margin: 0 0 10px 0; font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; color: var(--ns-text); } .ns-title-sm { font-size: 20px; } .ns-title-lg { font-size: 30px; } /* --------------------------------------------------------- SUBTITULOS --------------------------------------------------------- */ .ns-subtitle { margin: 0 0 8px 0; font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--ns-text); } .ns-subtitle-sm { font-size: 16px; } .ns-subtitle-lg { font-size: 21px; } /* --------------------------------------------------------- TEXTO --------------------------------------------------------- */ .ns-text { font-family: Arial, Helvetica, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.5; color: var(--ns-text); } .ns-text-sm { font-size: 13px !important; } .ns-text-lg { font-size: 17px !important; } .ns-text-xl { font-size: 20px !important; } /* --------------------------------------------------------- COLORES DE TEXTO --------------------------------------------------------- */ .ns-text-primary { color: var(--ns-primary) !important; } .ns-text-secondary { color: var(--ns-secondary) !important; } .ns-text-success { color: var(--ns-success) !important; } .ns-text-warning { color: var(--ns-warning) !important; } .ns-text-danger { color: var(--ns-danger) !important; } .ns-text-info { color: var(--ns-info) !important; } .ns-text-dark { color: var(--ns-dark) !important; } .ns-text-muted { color: var(--ns-text-muted) !important; } .ns-text-white { color: var(--ns-white) !important; } .ns-text-black { color: #000000 !important; } /* --------------------------------------------------------- PESO DEL TEXTO --------------------------------------------------------- */ .ns-text-light { font-weight: 300; } .ns-text-normal { font-weight: 400; } .ns-text-medium { font-weight: 500; } .ns-text-semibold { font-weight: 600; } .ns-text-bold { font-weight: 700; } /* --------------------------------------------------------- ALINEACION --------------------------------------------------------- */ .ns-text-left { text-align: left !important; } .ns-text-center { text-align: center !important; } .ns-text-right { text-align: right !important; } /* --------------------------------------------------------- TITULOS RESPONSIVOS --------------------------------------------------------- */ @media (max-width: 768px) { .ns-title { font-size: 21px; } .ns-title-sm { font-size: 18px; } .ns-title-lg { font-size: 25px; } .ns-subtitle { font-size: 17px; } .ns-subtitle-sm { font-size: 15px; } .ns-subtitle-lg { font-size: 19px; } } /* fin de superficies y contenedores */ .ns-clickable { cursor: pointer; } .ns-clickable:hover { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35), 0 4px 12px rgba(15, 23, 42, 0.15); transform: translateY(-1px); }