/* ========================================================== InfinityAPP · app.css Único CSS de la app (layout, tipografía, sidebar, topbar, cards, tablas, formularios, botones, badges, widgets) ========================================================== */ /* ---------- Variables de tema (modo claro por defecto) ---------- */ :root { --bg: #f5f6f8; --fg: #111; --muted: #6b7280; --card: #fff; --border: #e5e7eb; --brand: #111; /* acento monocromo */ --brand-ink: #fff; --link: #111; --link-hover: #000; --ok-bg: #e6ffed; --ok-fg: #05620a; --warn-bg: #fff7ed; --warn-fg: #9a3412; --err-bg: #ffecec; --err-fg: #8a0b0b; --shadow: 0 10px 30px rgba(0,0,0,.08); } /* (Opcional) tema oscuro: aplicable con [data-theme="dark"] en o */ [data-theme="dark"] { --bg: #0f1216; --fg: #e5e7eb; --muted: #94a3b8; --card: #161b22; --border: #233044; --brand: #e5e7eb; --brand-ink: #111; --link: #e5e7eb; --link-hover: #fff; --ok-bg: #0f2d17; --ok-fg: #7cf18b; --warn-bg: #331c0a; --warn-fg: #ffb265; --err-bg: #2d1212; --err-fg: #ff8f8f; --shadow: 0 10px 30px rgba(0,0,0,.35); } /* ---------- Reset/estructura base ---------- */ * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--bg); color: var(--fg); font: 14px/1.45 system-ui, Segoe UI, Roboto, Arial, sans-serif; } a { color: var(--link); text-decoration: none; } a:hover { color: var(--link-hover); text-decoration: underline; } img { max-width: 100%; display: block; } /* ---------- Utilidades ---------- */ .container { max-width: 1200px; margin: 0 auto; padding: 16px; } .grid { display: grid; gap: 12px; } .grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); } .mt-0{margin-top:0}.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px} .mb-0{margin-bottom:0}.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px} .text-muted { color: var(--muted); } .center { display:grid; place-items:center; } /* ---------- Layout principal (sidebar + main) ---------- */ .layout { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; } /* Sidebar */ .sidebar { background: #0f1216; color: #e5e7eb; border-right: 1px solid #1e232c; } .sidebar.collapsed { width: 74px; } .sidebar-header { display:flex; align-items:center; gap:10px; padding: 12px; border-bottom: 1px solid #1e232c; } .hamb { background: transparent; color:#e5e7eb; border:1px solid #2a2f3a; border-radius:6px; padding:6px 8px; cursor:pointer; } .brand { font-weight: 800; } /* Menú del sidebar */ .menu { padding: 8px; } .menu ul { list-style: none; margin: 0; padding: 0; } .mi { border-radius: 8px; margin: 4px 0; } .mi-link { display:flex; align-items:center; gap:10px; padding:10px; border-radius:8px; color:#e5e7eb; } .mi-link:hover { background: #181c22; text-decoration: none; } .mi-icon { width: 22px; text-align: center; } .mi-label { flex: 1; } .mi-caret { transition: transform .2s ease; } /* Submenú */ .submenu { display:none; margin-left:34px; padding-left:8px; border-left:1px dashed #2a2f3a; margin-top:4px; animation: fade .2s ease; } .mi.open > .mi-link .mi-caret { transform: rotate(90deg); } .mi.open > .submenu { display:block; } @keyframes fade { from { opacity:.6; transform: translateY(-4px) } to { opacity:1; transform:none } } /* Colapsado: esconder labels/submenus */ .sidebar.collapsed .mi-label { display:none } .sidebar.collapsed .submenu { display:none !important } /* Main + Topbar */ .main { display:flex; flex-direction: column; } .topbar { display:flex; justify-content:space-between; align-items:center; padding: 10px 16px; background: var(--brand); color: var(--brand-ink); box-shadow: var(--shadow); } .topbar .left { font-weight: 700; } .userbox { position:relative; display:flex; align-items:center; gap:10px; } .userbtn { background: var(--card); color: var(--fg); border:none; border-radius:999px; width:30px; height:30px; cursor:pointer; } .user-menu { position:absolute; right:0; top:36px; background: var(--card); color: var(--fg); border:1px solid var(--border); border-radius: 8px; min-width: 160px; display:none; box-shadow: var(--shadow); overflow:hidden; } .user-menu a { display:block; padding:8px 12px; color: inherit; } .user-menu a:hover { background: #f1f5f9; } /* Content */ .content { padding: 16px; } /* ---------- Componentes ---------- */ /* Cards */ .card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; box-shadow: var(--shadow); } /* Botones */ .btn { background: var(--brand); color: var(--brand-ink); border: none; border-radius: 8px; padding: 8px 12px; cursor: pointer; } .btn:hover { filter: brightness(0.92); } .btn.outline { background: transparent; color: var(--fg); border: 1px solid var(--fg); } .btn.subtle { background: #fff; color:#111; border:1px solid var(--border); } .btn.block { display:block; width:100%; } /* Formulario */ input[type=text], input[type=email], input[type=password], input[type=number], select, textarea { width: 100%; padding: 10px 12px; background: var(--card); color: var(--fg); border: 1px solid var(--border); border-radius: 8px; outline: none; } label { display:block; margin-bottom:6px; font-weight:600; } .form-row { display:grid; grid-template-columns:1fr 1fr; gap: 12px; } /* Tablas */ table { width:100%; border-collapse: collapse; } th, td { padding: 8px 10px; border-bottom: 1px solid var(--border); } th { text-align: left; font-weight: 700; } /* Badges */ .badge { padding: 2px 8px; border-radius: 999px; font-size: 12px; display:inline-block; } .badge.ok { background: var(--ok-bg); color: var(--ok-fg); } .badge.warn { background: var(--warn-bg); color: var(--warn-fg); } .badge.err { background: var(--err-bg); color: var(--err-fg); } /* Chips */ .chip { display:inline-block; padding:8px 10px; border-radius:999px; border:1px solid var(--border); color: var(--fg); text-decoration:none; } .chip:hover { background:#f3f4f6; } /* Widgets */ .widgets { display:grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap:16px; } .widget { background: var(--card); border:1px solid var(--border); border-radius:12px; padding:14px; } .widget h3 { margin:0 0 8px } .widget .metric { color: var(--muted); font-size: 12px; text-transform: uppercase; } .widget .big { font-size: 24px; font-weight: 800; } /* Login (centrado vertical/footbar fijo) */ .login-wrap { min-height: 100vh; display:grid; grid-template-rows: 1fr auto; } .login-main { display:grid; place-items:center; padding:24px; } .login-card { width: 100%; max-width: 380px; } .login-footer { text-align:center; padding:12px; color:var(--muted); } /* Footer pegado abajo en páginas largas o cortas */ .footer-sticky { margin-top: auto; text-align:center; padding: 12px; color: var(--muted); } /* Clickable */ .brand { cursor: pointer; } /* Modal móvil */ .backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: none; z-index: 80; } @media (max-width: 900px) { .layout { grid-template-columns: 1fr; } .sidebar { position: fixed; top:0; bottom:0; left:-280px; width: 260px; transition: left .2s ease; z-index: 90; } body.mobile-open .sidebar { left: 0; } body.mobile-open .backdrop { display: block; } .topbar { position: sticky; top:0; z-index: 70; } } /* ===== Loader Overlay ===== */ .loader-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: none; /* se muestra por JS */ align-items: center; justify-content: center; z-index: 9999; backdrop-filter: blur(2px); } .loader-box { background: var(--card); color: var(--fg); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; box-shadow: var(--shadow); display: inline-flex; align-items: center; gap: 12px; min-width: 200px; justify-content: center; } .spinner { width: 20px; height: 20px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--fg); border-right-color: var(--fg); animation: spin .7s linear infinite; } .loader-text { font-weight: 600; } @keyframes spin { to { transform: rotate(360deg); } } /* Bloquea scroll cuando hay loader (opcional) */ body.loading { overflow: hidden; } /* ============================ InfinityAPP · Modal simple ============================ */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); backdrop-filter: blur(2px); display: none; /* se muestra con .show */ align-items: center; justify-content: center; z-index: 9000; } .modal-overlay.show { display: flex; } .modal-box { background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); width: 100%; max-width: 520px; padding: 0; animation: modalPop .25s ease; } @keyframes modalPop { from { transform: scale(.92); opacity: .4; } to { transform: scale(1); opacity: 1; } } .modal-header { padding: 14px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 16px; } .modal-close { background: transparent; border: none; color: var(--fg); font-size: 22px; line-height: 1; cursor: pointer; } .modal-body { padding: 16px; max-height: 65vh; overflow-y: auto; } .modal-footer { padding: 14px 16px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; }