/* ═══════════════════════════════════════ Samsung Business Pro 2.0 Dashboard Tema claro (por defecto) y oscuro - Samsung Brand Identity El tema se elige por usuario: ═══════════════════════════════════════ */ @font-face { font-family: 'SamsungSharpSans'; src: url('../fonts/SamsungSharpSans-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; } @font-face { font-family: 'SamsungSharpSans'; src: url('../fonts/SamsungSharpSans-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; } @font-face { font-family: 'SamsungSharpSans'; src: url('../fonts/SamsungSharpSans-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; } @font-face { font-family: 'SamsungOne'; src: url('../fonts/SamsungOne-400_v1.0.ttf') format('truetype'); font-weight: 400; font-style: normal; } @font-face { font-family: 'SamsungOne'; src: url('../fonts/SamsungOne-700_v1.0.ttf') format('truetype'); font-weight: 700; font-style: normal; } :root { color-scheme: light; --samsung-blue: #1428A0; --samsung-blue-dark: #0D1B6F; --samsung-blue-light: #2962FF; --samsung-blue-glow: rgba(20, 40, 160, 0.18); --samsung-black: #000000; --samsung-white: #FFFFFF; --samsung-cyan: #00BFA5; --samsung-teal: #26C6DA; /* Color de acento (foco, pestaña activa, enlaces, progreso) y tinte neutro para fondos sutiles */ --accent: #1428A0; --accent-rgb: 20, 40, 160; --tint-rgb: 15, 23, 42; --bg-primary: #F3F5F9; --bg-secondary: #F8F9FC; --bg-card: #FFFFFF; --bg-card-hover: #F1F4FA; --bg-sidebar: #FFFFFF; --bg-sidebar-hover: #EEF1FA; --bg-input: #FFFFFF; --overlay-bg: rgba(15, 23, 42, 0.45); --loading-bg: rgba(243, 245, 249, 0.85); --text-primary: #1F2433; --text-secondary: #5B6275; --text-muted: #8A90A2; --text-strong: #0B0F1A; /* Texto de badges y botones de estado */ --text-green: #00796B; --text-yellow: #8A5A00; --text-blue: #1428A0; --text-red: #C62828; --icon-blue: #1428A0; --border-color: #DCE1EA; --border-light: #E9ECF2; --border-radius: 12px; --border-radius-sm: 8px; --border-radius-lg: 16px; --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.06); --shadow-md: 0 4px 16px rgba(16, 24, 40, 0.08); --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.14); --shadow-glow: 0 0 20px rgba(20, 40, 160, 0.08); --sidebar-width: 260px; --header-height: 70px; --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1); --status-completed: #00BFA5; --status-started: #FFB300; --status-pending: #D6DAE3; --status-error: #FF5252; } :root[data-theme="oscuro"] { color-scheme: dark; --samsung-blue-glow: rgba(20, 40, 160, 0.25); --accent: #00BFA5; --accent-rgb: 0, 191, 165; --tint-rgb: 255, 255, 255; --bg-primary: #0A0A0F; --bg-secondary: #111118; --bg-card: #16161E; --bg-card-hover: #1C1C28; --bg-sidebar: #08080D; --bg-sidebar-hover: #14142A; --bg-input: #1A1A24; --overlay-bg: rgba(0, 0, 0, 0.7); --loading-bg: rgba(10, 10, 15, 0.85); --text-primary: #E8E8EF; --text-secondary: #8A8A9A; --text-muted: #55556A; --text-strong: #FFFFFF; --text-green: #4DD0B8; --text-yellow: #FFD54F; --text-blue: #5C8AFF; --text-red: #FF8A80; --icon-blue: #7C9CFF; --border-color: #2A2A38; --border-light: #1E1E2A; --shadow-sm: 0 1px 3px rgba(0,0,0,0.3); --shadow-md: 0 4px 16px rgba(0,0,0,0.4); --shadow-lg: 0 8px 32px rgba(0,0,0,0.5); --shadow-glow: 0 0 20px rgba(var(--accent-rgb), 0.1); --status-pending: #3A3A4A; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 14px; } body { font-family: 'SamsungOne', 'SamsungSharpSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg-primary); color: var(--text-primary); min-height: 100vh; overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { font-family: 'SamsungSharpSans', 'SamsungOne', sans-serif; font-weight: 700; } /* ─── Sidebar ─── */ .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: var(--sidebar-width); background: var(--bg-sidebar); color: var(--text-strong); display: flex; flex-direction: column; z-index: 100; transition: transform var(--transition); border-right: 1px solid var(--border-light); } .sidebar-header { padding: 24px 20px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--border-light); } .sidebar-logo { width: 36px; height: auto; } [data-theme="oscuro"] .sidebar-logo { filter: brightness(0) invert(1); } .sidebar-title { font-family: 'SamsungSharpSans', sans-serif; font-weight: 700; font-size: 1rem; letter-spacing: -0.02em; white-space: nowrap; } .sidebar-nav { list-style: none; padding: 16px 12px; flex: 1; } .sidebar-nav li { margin-bottom: 4px; } .nav-link { display: flex; align-items: center; gap: 12px; padding: 12px 16px; color: var(--text-secondary); text-decoration: none; border-radius: var(--border-radius-sm); transition: all var(--transition); font-size: 0.93rem; font-weight: 500; } .nav-link:hover { background: var(--bg-sidebar-hover); color: var(--text-strong); } .nav-link.active { background: var(--samsung-blue); color: #FFFFFF; box-shadow: 0 2px 12px var(--samsung-blue-glow); } .nav-link svg { flex-shrink: 0; opacity: 0.7; } .nav-link:hover svg, .nav-link.active svg { opacity: 1; } .sidebar-footer { padding: 16px; border-top: 1px solid var(--border-light); } .sidebar-banner { width: 100%; border-radius: var(--border-radius-sm); } .sidebar-user { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 12px; background: rgba(var(--tint-rgb), 0.04); border-radius: var(--border-radius-sm); font-size: 0.82rem; color: var(--text-secondary); } .sidebar-user svg { flex-shrink: 0; opacity: 0.5; } .sidebar-user span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar-logout { display: flex; align-items: center; justify-content: center; color: var(--text-muted); padding: 4px; border-radius: 4px; transition: all var(--transition); } .theme-toggle { display: flex; align-items: center; justify-content: center; padding: 4px; border: none; border-radius: 4px; background: none; color: var(--text-muted); cursor: pointer; transition: all var(--transition); } .theme-toggle:hover { color: var(--accent); background: rgba(var(--accent-rgb), 0.12); } .theme-toggle .icon-sol { display: none; } [data-theme="oscuro"] .theme-toggle .icon-sol { display: block; } [data-theme="oscuro"] .theme-toggle .icon-luna { display: none; } .sidebar-logout:hover { color: var(--status-error); background: rgba(255,82,82,0.12); } .sidebar-toggle { display: none; position: fixed; top: 16px; left: 16px; z-index: 110; background: var(--samsung-blue); color: white; border: none; border-radius: var(--border-radius-sm); padding: 10px; cursor: pointer; box-shadow: var(--shadow-md); } /* ─── Main Content ─── */ .main-content { margin-left: var(--sidebar-width); min-height: 100vh; transition: margin-left var(--transition); } .page-header { background: var(--bg-secondary); padding: 20px 32px; border-bottom: 1px solid var(--border-color); display: flex; flex-direction: row-reverse; /* título a la derecha, filtros/acciones a la izquierda */ align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; position: sticky; top: 0; z-index: 50; } .page-title { font-size: 1.5rem; color: var(--text-strong); letter-spacing: -0.03em; } .page-body { padding: 24px 32px; } /* ─── Filters ─── */ .filters-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .filter-select, .filter-input { padding: 8px 14px; border: 1.5px solid var(--border-color); border-radius: var(--border-radius-sm); font-family: inherit; font-size: 0.9rem; background: var(--bg-input); color: var(--text-primary); transition: border-color var(--transition); min-width: 160px; } .filter-select:focus, .filter-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15); } .filter-select option { background: var(--bg-card); color: var(--text-primary); } .filter-input { min-width: 240px; } .filter-input::placeholder { color: var(--text-muted); } /* ─── Cards Grid ─── */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 24px; } .stat-card { background: var(--bg-card); border-radius: var(--border-radius); padding: 20px 24px; box-shadow: var(--shadow-sm); border: 1px solid var(--border-color); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-color); } .stat-card.highlight { background: linear-gradient(135deg, var(--samsung-blue), #1E3ACF); color: #FFFFFF; border: 1px solid rgba(41, 98, 255, 0.3); box-shadow: 0 4px 20px var(--samsung-blue-glow); } .stat-card.highlight .stat-label { color: rgba(255,255,255,0.7); } .stat-card.highlight .stat-value { color: #FFFFFF; } .stat-label { font-size: 0.82rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; margin-bottom: 8px; } .stat-value { font-family: 'SamsungSharpSans', sans-serif; font-size: 2rem; font-weight: 700; color: var(--text-strong); line-height: 1.1; } .stat-sub { font-size: 0.82rem; color: var(--text-secondary); margin-top: 4px; } .stat-card.highlight .stat-sub { color: rgba(255,255,255,0.55); } /* ─── Charts / Panels ─── */ .panels-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 20px; margin-bottom: 24px; } .panel { background: var(--bg-card); border-radius: var(--border-radius); box-shadow: var(--shadow-sm); border: 1px solid var(--border-color); overflow: hidden; } .panel-header { padding: 16px 20px; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; } .panel-title { font-size: 1rem; font-weight: 700; color: var(--text-strong); } .panel-body { padding: 20px; } /* ─── Progress Bars ─── */ .progress-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .progress-row:last-child { margin-bottom: 0; } .progress-label { min-width: 110px; font-size: 0.85rem; font-weight: 500; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .progress-track { flex: 1; height: 10px; background: var(--bg-primary); border-radius: 5px; overflow: hidden; } .progress-fill { height: 100%; border-radius: 5px; transition: width 0.6s ease; background: var(--samsung-blue-light); } .progress-fill.green { background: var(--status-completed); } .progress-fill.yellow { background: var(--status-started); } .progress-value { min-width: 45px; text-align: right; font-size: 0.85rem; font-weight: 700; color: var(--text-primary); } /* ─── Tables ─── */ .table-wrapper { overflow-x: auto; border-radius: var(--border-radius); border: 1px solid var(--border-color); background: var(--bg-card); box-shadow: var(--shadow-sm); } table { width: 100%; border-collapse: collapse; } thead th { background: var(--bg-secondary); padding: 12px 16px; text-align: left; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); border-bottom: 1px solid var(--border-color); white-space: nowrap; position: sticky; top: 0; } tbody td { padding: 12px 16px; font-size: 0.9rem; border-bottom: 1px solid var(--border-light); white-space: nowrap; color: var(--text-primary); } tbody tr:hover { background: rgba(var(--accent-rgb), 0.04); } tbody tr:last-child td { border-bottom: none; } /* ─── Status Badges ─── */ .badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; } .badge-completed { background: rgba(0,191,165,0.15); color: var(--text-green); } .badge-started { background: rgba(255,179,0,0.15); color: var(--text-yellow); } .badge-pending { background: rgba(var(--tint-rgb), 0.06); color: var(--text-muted); } .badge-registered { background: rgba(41,98,255,0.15); color: var(--text-blue); } .badge-active { background: rgba(0,191,165,0.15); color: var(--text-green); } .badge-inactive { background: rgba(255,82,82,0.15); color: var(--text-red); } /* ─── Buttons ─── */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: var(--border-radius-sm); font-family: inherit; font-size: 0.9rem; font-weight: 600; border: none; cursor: pointer; transition: all var(--transition); text-decoration: none; } .btn-primary { background: var(--samsung-blue); color: white; } .btn-primary:hover { background: var(--samsung-blue-light); box-shadow: 0 4px 16px var(--samsung-blue-glow); } .btn-secondary { background: var(--bg-input); color: var(--text-primary); border: 1.5px solid var(--border-color); } .btn-secondary:hover { background: var(--bg-card-hover); border-color: var(--text-muted); } .btn-danger { background: rgba(255,82,82,0.12); color: var(--text-red); } .btn-danger:hover { background: rgba(255,82,82,0.2); } .btn-success { background: rgba(0,191,165,0.12); color: var(--text-green); } .btn-success:hover { background: rgba(0,191,165,0.2); } .btn-sm { padding: 6px 14px; font-size: 0.82rem; } .btn:disabled { opacity: 0.4; cursor: not-allowed; } /* ─── Upload Area ─── */ .upload-zone { border: 2px dashed var(--border-color); border-radius: var(--border-radius-lg); padding: 48px; text-align: center; background: var(--bg-secondary); transition: all var(--transition); cursor: pointer; } .upload-zone:hover, .upload-zone.dragover { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.04); } .upload-zone svg { color: var(--text-muted); margin-bottom: 16px; } .upload-zone h3 { font-size: 1.1rem; margin-bottom: 8px; color: var(--text-primary); } .upload-zone p { color: var(--text-secondary); font-size: 0.9rem; } .upload-zone input[type="file"] { display: none; } /* ─── Pagination ─── */ .pagination { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 20px; } .pagination button { padding: 8px 14px; border: 1.5px solid var(--border-color); border-radius: var(--border-radius-sm); background: var(--bg-card); color: var(--text-primary); font-family: inherit; font-size: 0.85rem; cursor: pointer; transition: all var(--transition); } .pagination button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); } .pagination button.active { background: var(--samsung-blue); color: white; border-color: var(--samsung-blue); } .pagination button:disabled { opacity: 0.3; cursor: not-allowed; } .pagination-info { font-size: 0.85rem; color: var(--text-secondary); margin: 0 8px; } /* ─── Detail Page ─── */ .detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; } .detail-field { display: flex; flex-direction: column; gap: 4px; } .detail-label { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); } .detail-value { font-size: 0.95rem; color: var(--text-primary); } .detail-value input, .detail-value select { width: 100%; padding: 8px 12px; border: 1.5px solid var(--border-color); border-radius: var(--border-radius-sm); font-family: inherit; font-size: 0.9rem; background: var(--bg-input); color: var(--text-primary); transition: border-color var(--transition); } .detail-value input:focus, .detail-value select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1); } /* ─── Tabs ─── */ .tabs { display: flex; gap: 0; border-bottom: 2px solid var(--border-color); margin-bottom: 20px; } .tab-btn { padding: 12px 24px; border: none; background: none; font-family: inherit; font-size: 0.9rem; font-weight: 600; color: var(--text-secondary); cursor: pointer; position: relative; transition: color var(--transition); } .tab-btn:hover { color: var(--text-primary); } .tab-btn.active { color: var(--accent); } .tab-btn.active::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background: var(--accent); } .tab-content { display: none; } .tab-content.active { display: block; } /* ─── Toast ─── */ .toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 1000; display: flex; flex-direction: column; gap: 8px; } .toast { padding: 14px 20px; border-radius: var(--border-radius-sm); background: var(--bg-card); box-shadow: var(--shadow-lg); border-left: 4px solid var(--accent); font-size: 0.9rem; color: var(--text-primary); animation: slideIn 0.3s ease; max-width: 360px; } .toast.success { border-left-color: var(--status-completed); } .toast.error { border-left-color: var(--status-error); } @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* ─── Chart bars (CSS only) ─── */ .chart-bar-group { margin-bottom: 16px; } .chart-bar-label { font-size: 0.82rem; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; } .chart-bars { display: flex; gap: 4px; align-items: center; } .chart-bar { height: 28px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 700; color: white; min-width: 32px; transition: width 0.6s ease; } .chart-bar.completed { background: var(--status-completed); } .chart-bar.started { background: var(--status-started); } .chart-bar.pending { background: var(--status-pending); color: var(--text-secondary); } /* ─── Modal ─── */ .modal-overlay { display: none; position: fixed; inset: 0; background: var(--overlay-bg); z-index: 200; align-items: center; justify-content: center; backdrop-filter: blur(4px); } .modal-overlay.active { display: flex; } .modal { background: var(--bg-card); border-radius: var(--border-radius-lg); padding: 32px; max-width: 560px; width: 90%; max-height: 85vh; overflow-y: auto; box-shadow: var(--shadow-lg); border: 1px solid var(--border-color); } .modal h2 { margin-bottom: 20px; font-size: 1.25rem; color: var(--text-strong); } .modal .form-group { margin-bottom: 16px; } .modal .form-group label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; } .modal .form-group input, .modal .form-group select, .modal .form-group textarea { width: 100%; padding: 10px 14px; border: 1.5px solid var(--border-color); border-radius: var(--border-radius-sm); font-family: inherit; font-size: 0.9rem; background: var(--bg-input); color: var(--text-primary); } .modal .form-group input:focus, .modal .form-group select:focus, .modal .form-group textarea:focus { outline: none; border-color: var(--accent); } .modal .form-group select option { background: var(--bg-card); color: var(--text-primary); } .modal .form-group textarea { resize: vertical; min-height: 80px; } .modal-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 24px; } /* ─── Spinner ─── */ .spinner { width: 32px; height: 32px; border: 3px solid var(--border-color); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; margin: 40px auto; } @keyframes spin { to { transform: rotate(360deg); } } /* ─── Empty state ─── */ .empty-state { text-align: center; padding: 60px 20px; color: var(--text-secondary); } .empty-state svg { color: var(--text-muted); margin-bottom: 16px; } .empty-state h3 { font-size: 1.1rem; margin-bottom: 8px; color: var(--text-primary); } /* ─── Responsive ─── */ @media (max-width: 1024px) { .sidebar { transform: translateX(-100%); } .sidebar.open { transform: translateX(0); } .sidebar-toggle { display: flex; } .main-content { margin-left: 0; } .page-body { padding: 16px; } .page-header { padding: 16px; padding-left: 72px; /* hueco para el botón del menú */ } .panels-grid { grid-template-columns: 1fr; } .detail-grid { grid-template-columns: 1fr; } .stats-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } } @media (max-width: 640px) { .page-header { flex-direction: column; /* título arriba (a la derecha), filtros debajo a todo el ancho */ align-items: stretch; } .page-title { text-align: right; } .page-title > div { justify-content: flex-end; flex-wrap: wrap; } /* ficha: Volver + nombre */ .stats-grid { grid-template-columns: 1fr 1fr; } .filters-bar { flex-direction: column; align-items: stretch; } .filter-select, .filter-input { min-width: unset; width: 100%; } } /* ─── Clickable row ─── */ .clickable-row { cursor: pointer; } .clickable-row:hover { background: rgba(var(--accent-rgb), 0.06) !important; } /* ─── Cert mini progress ─── */ .cert-mini { display: flex; align-items: center; gap: 6px; } .cert-mini-bar { width: 50px; height: 6px; background: var(--status-pending); border-radius: 3px; overflow: hidden; } .cert-mini-fill { height: 100%; border-radius: 3px; background: var(--accent); } .cert-mini-text { font-size: 0.78rem; font-weight: 600; color: var(--text-secondary); min-width: 32px; } /* ─── Loading overlay ─── */ .loading-overlay { display: none; position: fixed; inset: 0; background: var(--loading-bg); z-index: 300; align-items: center; justify-content: center; } .loading-overlay.active { display: flex; } /* ─── Usuarios ─── */ .user-actions { display: flex; gap: 8px; flex-wrap: wrap; } .password-box { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--bg-input); border: 1.5px solid var(--border-color); border-radius: var(--border-radius-sm); } .password-box code { flex: 1; font-family: Consolas, 'Courier New', monospace; font-size: 1.05rem; color: var(--text-strong); word-break: break-all; user-select: all; } /* ─── Formularios en modal ─── */ .modal.modal-wide { max-width: 720px; } .modal .modal-section { font-size: 0.95rem; color: var(--text-strong); margin: 8px 0 12px; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } .form-grid .form-full { grid-column: 1 / -1; } @media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } } .asig-edit { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 16px; align-items: end; margin-bottom: 20px; } .asig-edit select:disabled { opacity: 0.55; } .asig-edit-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; } .asig-edit-section { grid-column: 1 / -1; margin: 8px 0 -4px; padding-top: 14px; border-top: 1px solid var(--border-light); font-size: 0.95rem; } @media (max-width: 900px) { .asig-edit { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .asig-edit { grid-template-columns: 1fr; } } .carta-box { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 12px 14px; margin-bottom: 20px; background: var(--bg-input); border: 1.5px solid var(--border-color); border-radius: var(--border-radius-sm); } .carta-link { color: var(--accent); font-weight: 600; word-break: break-all; } .carta-empty { font-size: 0.85rem; color: var(--text-secondary); } /* ─── Grupo desplegable del menú ─── */ .nav-group > summary { cursor: pointer; list-style: none; user-select: none; } .nav-group > summary::-webkit-details-marker { display: none; } .nav-chevron { margin-left: auto; transition: transform var(--transition); } .nav-group[open] .nav-chevron { transform: rotate(180deg); } .nav-submenu { list-style: none; margin-top: 4px; padding-left: 16px; } .nav-submenu .nav-link { padding: 10px 16px; font-size: 0.88rem; } /* ─── Adjuntos de incidencias ─── */ .adjuntos { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 180px; } .adjunto { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; max-width: 260px; } .adjunto a { color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .adjunto-size { color: var(--text-secondary); font-size: 0.78rem; white-space: nowrap; } .adjunto-del { background: none; border: none; color: var(--status-error); cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0 4px; } /* ─── Corrección manual de cursos ─── */ .curso-estado { padding: 6px 10px; border: 1.5px solid var(--border-color); border-radius: var(--border-radius-sm); background: var(--bg-input); color: var(--text-primary); font-family: inherit; font-size: 0.85rem; } .curso-estado option { background: var(--bg-card); } .curso-estado-wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .badge-corregido { background: rgba(255,179,0,0.15); color: var(--text-yellow); cursor: help; } .btn-link { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 0.82rem; padding: 0; text-decoration: underline; } /* ─── Opciones de carga ─── */ .upload-option { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 16px; } .upload-option label { font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; } .upload-option input[type="date"] { padding: 8px 12px; border: 1.5px solid var(--border-color); border-radius: var(--border-radius-sm); background: var(--bg-input); color: var(--text-primary); font-family: inherit; font-size: 0.9rem; } .upload-option-hint { flex-basis: 100%; font-size: 0.8rem; color: var(--text-muted); } /* ─── Informes ─── */ .rp-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 28px; } .rp-toolbar-label { font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin-right: 4px; } .rp-group { margin-bottom: 28px; } .rp-group-title { font-size: 0.78rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 12px; } .rp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; } .rp-card { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 14px; padding: 18px; text-align: left; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--border-radius); color: var(--text-primary); font-family: inherit; cursor: pointer; transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition); } .rp-card:hover { border-color: rgba(var(--accent-rgb), 0.5); transform: translateY(-2px); box-shadow: var(--shadow-md); } .rp-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .rp-card.active { border-color: var(--samsung-blue-light); background: linear-gradient(180deg, rgba(20, 40, 160, 0.18), var(--bg-card)); box-shadow: 0 4px 20px var(--samsung-blue-glow); } .rp-card-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: rgba(41, 98, 255, 0.12); color: var(--icon-blue); } .rp-card.active .rp-card-icon { background: var(--samsung-blue); color: #FFFFFF; } .rp-card-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .rp-card-title { font-weight: 600; color: var(--text-strong); line-height: 1.3; } .rp-card-desc { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .rp-card-count { display: flex; flex-direction: column; align-items: flex-end; font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; } .rp-card-count strong { font-family: 'SamsungSharpSans', sans-serif; font-size: 1.35rem; color: var(--text-strong); line-height: 1.1; } /* Vista del informe */ .rp-view { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--border-radius-lg); padding: 24px; margin-top: 8px; transition: opacity var(--transition); scroll-margin-top: calc(var(--header-height) + 16px); /* no quedar bajo la cabecera fija */ } .rp-view.rp-loading { opacity: 0.55; pointer-events: none; } .rp-view-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 22px; } .rp-view-heading { display: flex; gap: 14px; align-items: flex-start; max-width: 720px; } .rp-view-heading .rp-card-icon { width: 44px; height: 44px; background: var(--samsung-blue); color: #FFFFFF; } .rp-view-eyebrow { font-size: 0.72rem; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; } .rp-view-title { font-size: 1.3rem; color: var(--text-strong); margin: 2px 0 6px; } .rp-view-desc { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.5; } .rp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 22px; } .rp-kpi { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; background: var(--bg-secondary); border: 1px solid var(--border-light); border-left: 3px solid var(--border-color); border-radius: var(--border-radius-sm); } .rp-kpi-good { border-left-color: var(--status-completed); } .rp-kpi-warning { border-left-color: var(--status-started); } .rp-kpi-critical { border-left-color: var(--status-error); } .rp-kpi-label { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--text-secondary); } .rp-kpi-dot { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; color: var(--bg-primary); } .rp-kpi-good .rp-kpi-dot { background: var(--status-completed); } .rp-kpi-warning .rp-kpi-dot { background: var(--status-started); } .rp-kpi-critical .rp-kpi-dot { background: var(--status-error); } .rp-kpi-value { font-family: 'SamsungSharpSans', sans-serif; font-size: 1.75rem; font-weight: 700; color: var(--text-strong); line-height: 1.1; } .rp-kpi-sub { font-size: 0.78rem; color: var(--text-muted); } .rp-table-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; } .rp-search { position: relative; flex: 1; max-width: 340px; } .rp-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); } .rp-search input { width: 100%; padding: 9px 12px 9px 36px; border: 1.5px solid var(--border-color); border-radius: var(--border-radius-sm); background: var(--bg-input); color: var(--text-primary); font-family: inherit; font-size: 0.88rem; } .rp-search input:focus { outline: none; border-color: var(--accent); } .rp-count { font-size: 0.84rem; color: var(--text-secondary); } .rp-table { max-height: 70vh; overflow: auto; border: 1px solid var(--border-light); border-radius: var(--border-radius-sm); } .rp-table table { font-variant-numeric: tabular-nums; } .rp-table thead th { position: sticky; top: 0; z-index: 1; padding: 0; background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); } .rp-sort { display: flex; align-items: center; gap: 6px; width: 100%; padding: 12px 14px; background: none; border: none; color: var(--text-secondary); font: inherit; font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; white-space: nowrap; } .rp-num .rp-sort { justify-content: flex-end; } thead th.th-sort { padding: 0; } .th-sort .rp-sort { padding: 12px 16px; font-size: 0.78rem; letter-spacing: 0.06em; } .rp-sort:hover, .rp-sort.active { color: var(--text-strong); } .rp-sort-arrow { font-size: 0.7rem; opacity: 0.45; } .rp-sort.active .rp-sort-arrow { opacity: 1; color: var(--accent); } .rp-table tbody td { padding: 11px 14px; border-bottom: 1px solid var(--border-light); font-size: 0.87rem; vertical-align: middle; white-space: normal; max-width: 320px; } .rp-table tbody tr:nth-child(even) { background: rgba(var(--tint-rgb), 0.015); } .rp-table tbody tr:hover { background: rgba(var(--accent-rgb), 0.05); } .rp-table td.rp-num { text-align: right; white-space: nowrap; } .rp-persona { display: flex; flex-direction: column; gap: 2px; min-width: 180px; } .rp-persona strong { color: var(--text-strong); font-weight: 600; } .rp-persona span { font-size: 0.78rem; color: var(--text-muted); } .rp-empty, .rp-muted { color: var(--text-muted); } .rp-table td.rp-col-texto_largo { min-width: 200px; } .rp-long { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.45; } .rp-meter { display: inline-flex; align-items: center; gap: 10px; justify-content: flex-end; min-width: 130px; } .rp-meter-track { width: 72px; height: 6px; border-radius: 3px; background: rgba(var(--accent-rgb), 0.15); overflow: hidden; } .rp-meter-fill { height: 100%; border-radius: 3px; background: var(--accent); } .rp-meter-label { min-width: 44px; text-align: right; color: var(--text-primary); } .rp-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 0.78rem; font-weight: 500; color: var(--text-primary); background: rgba(var(--tint-rgb), 0.06); white-space: nowrap; margin: 2px 0; } .rp-chip-dot { display: grid; place-items: center; flex-shrink: 0; width: 14px; height: 14px; border-radius: 50%; color: var(--bg-primary); } .rp-chip-dot svg { stroke-width: 3; } .rp-chip-good { background: rgba(0, 191, 165, 0.14); } .rp-chip-good .rp-chip-dot { background: var(--status-completed); } .rp-chip-warning { background: rgba(255, 179, 0, 0.14); } .rp-chip-warning .rp-chip-dot { background: var(--status-started); } .rp-chip-critical { background: rgba(255, 82, 82, 0.16); } .rp-chip-critical .rp-chip-dot { background: var(--status-error); } .rp-yes { display: inline-flex; align-items: center; gap: 4px; color: var(--text-primary); } .rp-yes svg { color: var(--status-completed); } .rp-no { color: var(--text-muted); } .rp-empty-state { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 48px 16px; text-align: center; color: var(--text-secondary); } .rp-empty-state svg { color: var(--status-completed); margin-bottom: 4px; } .rp-empty-state h3 { color: var(--text-strong); font-size: 1rem; } .rp-empty-state p { font-size: 0.85rem; } @media (max-width: 700px) { .rp-view { padding: 16px; } .rp-kpis { grid-template-columns: repeat(2, 1fr); } .rp-kpi { padding: 12px 14px; } .rp-kpi-value { font-size: 1.4rem; } .rp-cards { grid-template-columns: 1fr; } .rp-search { max-width: none; } } /* ─── Operadoras ─── */ .op-intro { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 20px; max-width: 720px; } .op-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 18px 20px; margin-bottom: 16px; } .op-card-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; } .op-name { font-size: 1.1rem; color: var(--text-strong); margin-bottom: 2px; } .op-count { font-size: 0.8rem; color: var(--text-muted); } .op-actions { display: inline-flex; align-items: center; gap: 6px; } .op-icon-btn { display: inline-grid; place-items: center; width: 26px; height: 26px; border: none; border-radius: 6px; background: transparent; color: var(--text-secondary); cursor: pointer; } .op-icon-btn:hover { background: var(--bg-card-hover); color: var(--text-strong); } .op-icon-btn.danger:hover { color: var(--status-error); } .op-segments { display: flex; flex-direction: column; gap: 10px; } .op-segment { padding: 12px 14px; background: var(--bg-secondary); border: 1px solid var(--border-light); border-radius: var(--border-radius-sm); } .op-segment-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .op-segment-name { font-weight: 600; color: var(--text-primary); } .op-segment-head .op-actions { margin-left: auto; } .op-subs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .op-sub { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: 999px; background: rgba(41, 98, 255, 0.12); font-size: 0.82rem; color: var(--text-primary); } .op-sub .op-icon-btn { width: 22px; height: 22px; } .op-sub-count { min-width: 18px; padding: 0 5px; border-radius: 999px; background: rgba(var(--tint-rgb), 0.08); font-size: 0.72rem; color: var(--text-secondary); text-align: center; } .op-add-sub { padding: 4px 10px; border: 1px dashed var(--border-color); border-radius: 999px; background: none; color: var(--text-secondary); font: inherit; font-size: 0.8rem; cursor: pointer; } .op-add-sub:hover { border-color: var(--accent); color: var(--text-strong); } .op-empty { font-size: 0.85rem; color: var(--text-muted); } .op-modal-hint { font-size: 0.85rem; color: var(--text-secondary); margin: -10px 0 16px; }