/* * app.css — Estilos base de CentralitaBot * NUNCA usar colores directos aquí. Siempre var(--color-*) * El tema activo se carga ANTES de este archivo en el . */ /* === Reset === */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* === Base === */ html { font-size: 16px; } body { font-family: var(--font-family); font-size: var(--font-size-base); background: var(--color-bg); color: var(--color-text); line-height: 1.5; } /* === Layout principal === */ .layout { display: flex; min-height: 100vh; } .sidebar { width: var(--sidebar-width); background: var(--color-bg-sidebar); position: fixed; top: 0; left: 0; bottom: 0; display: flex; flex-direction: column; z-index: 100; overflow-y: auto; } .sidebar__logo { padding: 1.2rem 1.5rem; border-bottom: 1px solid rgba(255,255,255,.07); } .sidebar__logo a { color: var(--color-text-inverse); text-decoration: none; font-size: 1rem; font-weight: 700; letter-spacing: .02em; } .sidebar__nav { padding: .75rem 0; flex: 1; } .sidebar__nav a { display: flex; align-items: center; gap: .6rem; padding: .6rem 1.5rem; color: var(--color-text-sidebar); text-decoration: none; font-size: var(--font-size-sm); border-left: 3px solid transparent; transition: background .15s, color .15s; } .sidebar__nav a:hover, .sidebar__nav a.active { background: var(--color-bg-sidebar-hover); color: var(--color-text-sidebar-active); border-left-color: var(--color-primary); } .main { margin-left: var(--sidebar-width); flex: 1; display: flex; flex-direction: column; min-height: 100vh; } .topbar { height: var(--topbar-height); background: var(--color-bg-topbar); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-topbar); display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem; position: sticky; top: 0; z-index: 50; } .topbar__title { font-size: var(--font-size-lg); font-weight: 600; color: var(--color-text); } .topbar__user { display: flex; align-items: center; gap: 1rem; font-size: var(--font-size-sm); color: var(--color-text-muted); } .content { padding: 1.75rem 2rem; flex: 1; } /* === Tarjetas === */ .card { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-card); padding: 1.5rem; margin-bottom: 1.5rem; } .card__title { font-size: 1rem; font-weight: 600; color: var(--color-text); margin-bottom: 1rem; } /* === Botones === */ .btn { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem 1.1rem; border: none; border-radius: var(--border-radius); cursor: pointer; font-size: var(--font-size-sm); font-family: var(--font-family); text-decoration: none; transition: background .15s, opacity .15s; font-weight: 500; } .btn-primary { background: var(--color-primary); color: var(--color-text-inverse); } .btn-primary:hover { background: var(--color-primary-dark); } .btn-secondary { background: var(--color-border); color: var(--color-text); } .btn-secondary:hover { opacity: .85; } .btn-danger { background: var(--color-danger); color: var(--color-text-inverse); } .btn-danger:hover { opacity: .9; } .btn-sm { padding: .3rem .7rem; font-size: .8rem; } /* === Formularios === */ .form-group { margin-bottom: 1rem; } .form-group label { display: block; font-size: var(--font-size-sm); color: var(--color-text-muted); margin-bottom: .3rem; } input[type=text], input[type=email], input[type=password], input[type=number], select, textarea { width: 100%; padding: .5rem .8rem; border: 1px solid var(--color-border); border-radius: var(--border-radius); background: var(--color-bg-input, #ffffff); color: var(--color-text); font-size: var(--font-size-base); font-family: var(--font-family); transition: border-color .15s; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--color-primary); } /* === Tablas === */ table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); } th { text-align: left; padding: .6rem .8rem; background: var(--color-bg-card); border-bottom: 2px solid var(--color-border); color: var(--color-text-muted); font-weight: 600; } td { padding: .55rem .8rem; border-bottom: 1px solid var(--color-border); vertical-align: middle; } tr:last-child td { border-bottom: none; } tr:hover td { background: var(--color-primary-light); } /* === Alertas === */ .alert { padding: .75rem 1rem; border-radius: var(--border-radius); margin-bottom: 1rem; font-size: var(--font-size-sm); } .alert-success { background: var(--color-success-bg); color: var(--color-success); } .alert-warning { background: var(--color-warning-bg); color: var(--color-warning); } .alert-danger { background: var(--color-danger-bg); color: var(--color-danger); } .alert-info { background: var(--color-info-bg); color: var(--color-info); } /* === Badges === */ .badge { display: inline-block; padding: .2rem .55rem; border-radius: 20px; font-size: .78rem; font-weight: 600; } .badge-success { background: var(--color-success-bg); color: var(--color-success); } .badge-warning { background: var(--color-warning-bg); color: var(--color-warning); } .badge-danger { background: var(--color-danger-bg); color: var(--color-danger); } .badge-info { background: var(--color-info-bg); color: var(--color-info); } .badge-muted { background: var(--color-border); color: var(--color-text-muted); } /* === Página de login (max 70% alto visible) === */ .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--color-bg); } .login-box { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-card); padding: 2rem 2.5rem; width: 100%; max-width: 380px; max-height: 70vh; overflow: auto; } .login-box h1 { font-size: 1.2rem; font-weight: 700; color: var(--color-text); margin-bottom: 1.5rem; text-align: center; }