/* ============================================================ public/css/app.css Sistema de Gestión de Documentos - Transparencia Tema: Institucional moderno con acento teal/marino ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); /* ── Variables base (aliases semánticos) ────────────────────── */ :root { /* Colores de tema — sobreescritos por cada [data-theme] */ /*--navy: #0a1628;*/ --navy: #2f1809; --navy-mid: #112240; --navy-light: #1d3461; --teal: #866957; /* color 1 del boton login */ --teal-dark: #684e3e; /* color 2 del boton login */ --teal-glow: rgba(15, 33, 31, 0.18); --accent-rgb: 0,197,181; --text: #e2e8f0; --text-muted: #94a3b8; --border: rgba(255,255,255,0.08); --card-bg: rgba(53, 49, 49, 0.85); /* fondo de login */ --body-grad-a: rgba(0,197,181,0.08); --body-grad-b: rgba(0,100,160,0.12); --body-grad-z: #0d1f3c; /* Constantes */ --gold: #f0b429; --red: #e53e3e; --green: #38a169; --white: #f8fafc; --gray-500: #718096; --radius: 12px; --radius-sm: 8px; --shadow: 0 4px 24px rgba(0,0,0,0.35); --shadow-teal: 0 0 20px rgba(var(--accent-rgb),0.25); --font: 'Sora', sans-serif; --mono: 'JetBrains Mono', monospace; --transition: 0.2s cubic-bezier(0.4,0,0.2,1); } /* ══════════════════════════════════════════════════════════════ TEMAS DE COLOR — aplicados en ══════════════════════════════════════════════════════════════ */ /* 1. Océano (default) */ [data-theme="ocean"] { --navy: #0a1628; --navy-mid: #112240; --navy-light: #1d3461; --teal: #00c5b5; --teal-dark: #009d90; --teal-glow: rgba(0,197,181,0.18); --accent-rgb: 0,197,181; --text: #e2e8f0; --text-muted: #94a3b8; --border: rgba(255,255,255,0.08); --card-bg: rgba(17,34,64,0.85); --body-grad-a: rgba(0,197,181,0.08); --body-grad-b: rgba(0,100,160,0.12); --body-grad-z: #0d1f3c; } /* 2. Bosque */ [data-theme="forest"] { --navy: #0b1a12; --navy-mid: #112b1a; --navy-light: #1a4228; --teal: #2ecc71; --teal-dark: #1fa85a; --teal-glow: rgba(46,204,113,0.18); --accent-rgb: 46,204,113; --text: #d4edd9; --text-muted: #80b890; --border: rgba(255,255,255,0.08); --card-bg: rgba(17,43,26,0.88); --body-grad-a: rgba(46,204,113,0.07); --body-grad-b: rgba(0,80,30,0.14); --body-grad-z: #0e2018; } /* 3. Volcán */ [data-theme="volcano"] { --navy: #1a0a08; --navy-mid: #2a1210; --navy-light: #3d1c18; --teal: #ff6b35; --teal-dark: #d94f1e; --teal-glow: rgba(255,107,53,0.18); --accent-rgb: 255,107,53; --text: #f0ddd8; --text-muted: #c08070; --border: rgba(255,255,255,0.08); --card-bg: rgba(42,18,16,0.88); --body-grad-a: rgba(255,107,53,0.08); --body-grad-b: rgba(180,30,0,0.12); --body-grad-z: #1f0e0b; } /* 4. Amatista */ [data-theme="amethyst"] { --navy: #0f0a1e; --navy-mid: #1a1133; --navy-light: #2d1f52; --teal: #b06aff; --teal-dark: #8a44e0; --teal-glow: rgba(176,106,255,0.18); --accent-rgb: 176,106,255; --text: #e8deff; --text-muted: #9b80cc; --border: rgba(255,255,255,0.08); --card-bg: rgba(26,17,51,0.88); --body-grad-a: rgba(176,106,255,0.08); --body-grad-b: rgba(80,0,160,0.12); --body-grad-z: #130d24; } /* 5. Acero (tema claro) */ [data-theme="steel"] { --navy: #f0f4f8; --navy-mid: #ffffff; --navy-light: #dce6f0; --teal: #2563eb; --teal-dark: #1d4ed8; --teal-glow: rgba(37,99,235,0.12); --accent-rgb: 37,99,235; --text: #1e293b; --text-muted: #64748b; --border: rgba(0,0,0,0.09); --card-bg: rgba(255,255,255,0.94); --white: #0f172a; --shadow: 0 4px 24px rgba(0,0,0,0.10); --body-grad-a: rgba(37,99,235,0.05); --body-grad-b: rgba(100,150,255,0.07); --body-grad-z: #e8eef6; } /* 6. Cobre */ [data-theme="copper"] { --navy: #110d08; --navy-mid: #1e1610; --navy-light: #33240f; --teal: #e8943a; --teal-dark: #c0721f; --teal-glow: rgba(232,148,58,0.18); --accent-rgb: 232,148,58; --text: #f5e6d0; --text-muted: #b08050; --border: rgba(255,255,255,0.08); --card-bg: rgba(30,22,16,0.88); --body-grad-a: rgba(232,148,58,0.08); --body-grad-b: rgba(140,60,0,0.12); --body-grad-z: #160e07; } /* ── Theme transition suave ──────────────────────────────────── */ html { transition: background-color 0.4s ease, color 0.4s ease; } *, *::before, *::after { transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; } /* ── Theme Picker Panel ──────────────────────────────────────── */ .theme-picker-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 14px; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); font-family: var(--font); font-size: 0.82rem; font-weight: 500; cursor: pointer; text-align: left; transition: all var(--transition); margin-bottom: 8px; } .theme-picker-btn:hover { background: rgba(255,255,255,0.08); color: var(--text); } .theme-picker-btn .accent-dot { width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(135deg, var(--teal), var(--teal-dark)); flex-shrink: 0; box-shadow: 0 0 6px rgba(var(--accent-rgb),0.5); } .theme-panel { background: var(--navy-mid); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin: 0 12px 12px; display: none; box-shadow: var(--shadow); } .theme-panel.open { display: block; animation: slideDown 0.2s ease; } .theme-panel-title { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 12px; padding-left: 2px; } .theme-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; } .theme-swatch { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px 8px; border-radius: var(--radius-sm); border: 2px solid transparent; cursor: pointer; transition: all 0.2s ease; background: rgba(255,255,255,0.03); } .theme-swatch:hover { background: rgba(255,255,255,0.07); transform: translateY(-2px); } .theme-swatch.active { border-color: var(--teal); background: var(--teal-glow); box-shadow: 0 0 12px rgba(var(--accent-rgb),0.2); } .swatch-dots { display: flex; gap: 3px; } .swatch-dot { width: 12px; height: 12px; border-radius: 50%; } .swatch-label { font-size: 0.65rem; font-weight: 600; color: var(--text-muted); letter-spacing: 0.04em; text-align: center; white-space: nowrap; } .theme-swatch.active .swatch-label { color: var(--teal); } /* ── Reset & Base ───────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font); background: var(--navy); color: var(--text); min-height: 100vh; line-height: 1.6; overflow-x: hidden; } /* Background texture */ body::before { content: ''; position: fixed; inset: 0; z-index: -1; background: radial-gradient(ellipse 80% 60% at 10% 0%, var(--body-grad-a,rgba(0,197,181,0.08)) 0%, transparent 60%), radial-gradient(ellipse 60% 80% at 90% 100%, var(--body-grad-b,rgba(0,100,160,0.12)) 0%, transparent 60%), linear-gradient(180deg, var(--navy) 0%, var(--body-grad-z,#0d1f3c) 100%); } a { color: var(--teal); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--white); } h1,h2,h3,h4,h5 { font-weight: 600; line-height: 1.3; } p { color: var(--text-muted); } /* ── Layout ─────────────────────────────────────────────────── */ .layout { display: flex; min-height: 100vh; } /* ── Sidebar ─────────────────────────────────────────────────── */ .sidebar { width: 260px; min-height: 100vh; background: var(--navy-mid); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 100; transition: transform var(--transition); } .sidebar-logo { padding: 28px 24px 20px; border-bottom: 1px solid var(--border); } .sidebar-logo .logo-icon { width: 42px; height: 42px; background: linear-gradient(135deg, var(--teal), var(--teal-dark)); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 12px; box-shadow: var(--shadow-teal); } .sidebar-logo h2 { font-size: 0.95rem; color: var(--white); font-weight: 600; letter-spacing: -0.02em; } .sidebar-logo p { font-size: 0.72rem; color: var(--teal); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; } .sidebar-nav { flex: 1; padding: 20px 12px; overflow-y: auto; } .nav-section-label { font-size: 0.65rem; color: var(--text-muted); letter-spacing: 0.12em; text-transform: uppercase; padding: 0 12px; margin: 16px 0 6px; } .nav-link { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--radius-sm); color: var(--text-muted); font-size: 0.88rem; font-weight: 500; transition: all var(--transition); margin-bottom: 2px; } .nav-link:hover { background: rgba(255,255,255,0.05); color: var(--white); } .nav-link.active { background: var(--teal-glow); color: var(--teal); border: 1px solid rgba(0,197,181,0.2); } .nav-link .icon { font-size: 16px; flex-shrink: 0; } .sidebar-footer { padding: 16px 12px; border-top: 1px solid var(--border); } .user-card { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); background: rgba(255,255,255,0.04); } .user-avatar { width: 34px; height: 34px; background: linear-gradient(135deg, var(--teal), var(--navy-light)); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: var(--white); flex-shrink: 0; } .user-info { flex: 1; min-width: 0; } .user-name { font-size: 0.82rem; color: var(--white); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-role { font-size: 0.7rem; color: var(--teal); text-transform: uppercase; letter-spacing: 0.05em; } /* ── Main Content ───────────────────────────────────────────── */ .main { flex: 1; margin-left: 260px; display: flex; flex-direction: column; min-height: 100vh; } /* ── Topbar ─────────────────────────────────────────────────── */ .topbar { height: 68px; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; background: rgba(10, 22, 40, 0.6); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; } .topbar-title { font-size: 1.1rem; font-weight: 600; color: var(--white); } .topbar-right { display: flex; align-items: center; gap: 16px; } .btn-logout { display: flex; align-items: center; gap: 7px; padding: 7px 16px; background: rgba(229,62,62,0.12); border: 1px solid rgba(229,62,62,0.25); border-radius: var(--radius-sm); color: #fc8181; font-size: 0.82rem; font-family: var(--font); font-weight: 500; cursor: pointer; transition: all var(--transition); } .btn-logout:hover { background: rgba(229,62,62,0.25); color: #fff; } /* ── Page Content ───────────────────────────────────────────── */ .page-content { flex: 1; padding: 32px; max-width: 1400px; width: 100%; } /* ── Cards ───────────────────────────────────────────────────── */ .card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); backdrop-filter: blur(8px); box-shadow: var(--shadow); } .card-header { padding: 20px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .card-title { font-size: 1rem; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; } .card-body { padding: 24px; } /* ── Stats Grid ─────────────────────────────────────────────── */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 28px; } .stat-card { padding: 22px 24px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); position: relative; overflow: hidden; transition: transform var(--transition), box-shadow var(--transition); } .stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-teal); } .stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--teal), var(--teal-dark)); } .stat-label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; } .stat-value { font-size: 2rem; font-weight: 700; color: var(--white); line-height: 1; } .stat-icon { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 2.5rem; opacity: 0.12; } /* ── Forms ───────────────────────────────────────────────────── */ .form-group { margin-bottom: 18px; } label { display: block; font-size: 0.82rem; font-weight: 500; color: var(--text-muted); margin-bottom: 6px; letter-spacing: 0.02em; } .form-control { width: 100%; padding: 10px 14px; background: rgba(255,255,255,0.05); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--white); font-family: var(--font); font-size: 0.88rem; transition: all var(--transition); outline: none; } .form-control:focus { border-color: var(--teal); background: rgba(0,197,181,0.06); box-shadow: 0 0 0 3px rgba(0,197,181,0.15); } .form-control::placeholder { color: var(--gray-500); } select.form-control option { background: var(--navy-mid); color: var(--white); } .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; } /* ── Drop Zone ───────────────────────────────────────────────── */ .drop-zone { border: 2px dashed rgba(0,197,181,0.3); border-radius: var(--radius); padding: 48px 32px; text-align: center; cursor: pointer; transition: all var(--transition); background: rgba(0,197,181,0.03); } .drop-zone:hover, .drop-zone.drag-over { border-color: var(--teal); background: var(--teal-glow); box-shadow: inset 0 0 30px rgba(0,197,181,0.05); } .drop-zone-icon { font-size: 3rem; margin-bottom: 12px; opacity: 0.6; } .drop-zone h3 { color: var(--white); font-size: 1rem; margin-bottom: 6px; } .drop-zone p { font-size: 0.82rem; } #file-input { display: none; } .file-list { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; } .file-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(0,197,181,0.08); border: 1px solid rgba(0,197,181,0.15); border-radius: var(--radius-sm); font-size: 0.83rem; } .file-item .file-name { flex: 1; color: var(--white); font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .file-item .file-size { color: var(--text-muted); font-size: 0.75rem; } .file-item .file-remove { cursor: pointer; color: var(--red); opacity: 0.7; transition: opacity var(--transition); flex-shrink: 0; } .file-item .file-remove:hover { opacity: 1; } /* ── Buttons ─────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border: none; border-radius: var(--radius-sm); font-family: var(--font); font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: all var(--transition); white-space: nowrap; } .btn-primary { background: linear-gradient(135deg, var(--teal), var(--teal-dark)); color: var(--navy); box-shadow: 0 4px 14px rgba(92, 94, 73, 0.3); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(224, 176, 4, 0.4); } .btn-secondary { background: rgba(255,255,255,0.06); color: var(--text); border: 1px solid var(--border); } .btn-secondary:hover { background: rgba(255,255,255,0.1); color: var(--white); } .btn-danger { background: rgba(229,62,62,0.12); color: #fc8181; border: 1px solid rgba(229,62,62,0.2); } .btn-danger:hover { background: rgba(229,62,62,0.25); } .btn-sm { padding: 6px 12px; font-size: 0.78rem; } .btn-icon { padding: 7px; gap: 0; } .btn-loading { opacity: 0.7; pointer-events: none; } /* ── Table ───────────────────────────────────────────────────── */ .table-wrapper { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 0.85rem; } thead th { padding: 12px 16px; text-align: left; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border); background: rgba(255,255,255,0.02); } tbody tr { transition: background var(--transition); } tbody tr:hover { background: rgba(255,255,255,0.02); } td { padding: 13px 16px; border-bottom: 1px solid rgba(255,255,255,0.04); color: var(--text); vertical-align: middle; } .td-file { display: flex; align-items: center; gap: 10px; } .td-file .pdf-icon { font-size: 1.4rem; flex-shrink: 0; } .td-filename { font-family: var(--mono); font-size: 0.8rem; color: var(--white); } .td-meta { font-size: 0.72rem; color: var(--text-muted); } /* ── Badges ──────────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 99px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.03em; } .badge-teal { background: var(--teal-glow); color: var(--teal); border: 1px solid rgba(0,197,181,0.2); } .badge-gold { background: rgba(240,180,41,0.12); color: var(--gold); } .badge-blue { background: rgba(66,153,225,0.12); color: #63b3ed; } /* ── Alerts ──────────────────────────────────────────────────── */ .alert { padding: 14px 18px; border-radius: var(--radius-sm); display: flex; align-items: flex-start; gap: 10px; font-size: 0.875rem; margin-bottom: 20px; animation: slideDown 0.3s ease; } @keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .alert-success { background: rgba(56,161,105,0.12); border: 1px solid rgba(56,161,105,0.25); color: #68d391; } .alert-error { background: rgba(229,62,62,0.12); border: 1px solid rgba(229,62,62,0.25); color: #fc8181; } .alert-info { background: rgba(0,197,181,0.1); border: 1px solid rgba(0,197,181,0.2); color: var(--teal); } /* ── Filters bar ─────────────────────────────────────────────── */ .filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; padding: 16px 24px; border-bottom: 1px solid var(--border); } .filter-group { display: flex; flex-direction: column; gap: 4px; } .filter-group label { font-size: 0.72rem; } .filter-group .form-control { min-width: 160px; padding: 8px 12px; } /* ── URL copy box ─────────────────────────────────────────────── */ .url-box { display: flex; gap: 8px; align-items: center; background: rgba(0,0,0,0.3); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; font-family: var(--mono); font-size: 0.75rem; color: var(--text-muted); overflow: hidden; } .url-box span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── Modal ───────────────────────────────────────────────────── */ .modal-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(5, 10, 20, 0.75); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; animation: fadeIn 0.2s ease; } @keyframes fadeIn { from { opacity:0; } to { opacity:1; } } .modal-overlay.hidden { display: none; } .modal { background: var(--navy-mid); border: 1px solid var(--border); border-radius: var(--radius); width: 90%; max-width: 560px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); animation: scaleIn 0.2s ease; } @keyframes scaleIn { from { transform: scale(0.95); opacity:0; } to { transform: scale(1); opacity:1; } } .modal-header { padding: 20px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .modal-header h3 { font-size: 1rem; color: var(--white); } .modal-close { cursor: pointer; color: var(--text-muted); font-size: 1.4rem; transition: color var(--transition); background: none; border: none; } .modal-close:hover { color: var(--white); } .modal-body { padding: 24px; } .modal-footer { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; } /* ── Login page ──────────────────────────────────────────────── */ .login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; } .login-card { width: 100%; max-width: 420px; } .login-header { text-align: center; padding: 36px 32px 28px; border-bottom: 1px solid var(--border); } .login-logo { width: 60px; height: 60px; /*background: linear-gradient(135deg, var(--teal), var(--teal-dark));*/ /* fondo del logo */ border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; font-size: 28px; margin-bottom: 16px; /*box-shadow: var(--shadow-teal);*/ /* efecto fondo del logo */ } .login-header h1 { font-size: 1.4rem; color: var(--white); margin-bottom: 4px; } .login-header p { font-size: 0.82rem; } .login-body { padding: 28px 32px 32px; } /* ── Progress bar for upload ─────────────────────────────────── */ .progress-wrap { height: 4px; background: rgba(255,255,255,0.06); border-radius: 2px; overflow: hidden; margin-top: 12px; } .progress-bar { height: 100%; background: linear-gradient(90deg, var(--teal), var(--teal-dark)); transition: width 0.4s ease; border-radius: 2px; } /* ── Utilities ───────────────────────────────────────────────── */ .text-teal { color: var(--teal); } .text-muted { color: var(--text-muted); } .text-white { color: var(--white); } .text-right { text-align: right; } .text-center { text-align: center; } .mt-4 { margin-top: 4px; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mb-24 { margin-bottom: 24px; } .flex { display: flex; } .items-center { align-items: center; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .w-full { width: 100%; } .hidden { display: none !important; } /* ── Responsive ──────────────────────────────────────────────── */ @media (max-width: 900px) { .sidebar { transform: translateX(-100%); } .sidebar.open { transform: translateX(0); } .main { margin-left: 0; } .page-content { padding: 20px 16px; } .hamburger { display: flex !important; align-items: center; justify-content: center; width: 38px; height: 38px; background: rgba(255,255,255,0.06); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; font-size: 18px; } } .hamburger { display: none; } /* ── Scrollbar ───────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--navy-light); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--teal-dark); }