/* * 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 { min-height: var(--topbar-height); background: var(--color-bg-topbar); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-topbar); padding: .5rem 1.5rem .65rem; position: sticky; top: 0; z-index: 50; } .topbar__grid { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(320px, auto) minmax(220px, 1fr); grid-template-areas: "identity company actions" "title title services"; column-gap: 1rem; row-gap: .45rem; align-items: start; } .topbar__slot--identity { grid-area: identity; justify-self: start; } .topbar__slot--company { grid-area: company; justify-self: center; } .topbar__slot--actions { grid-area: actions; justify-self: end; display: flex; align-items: center; gap: .45rem .75rem; flex-wrap: wrap; } .topbar__slot--title { grid-area: title; } .topbar__slot--services { grid-area: services; justify-self: end; align-self: start; } .topbar__slot--identity, .topbar__slot--company, .topbar__slot--actions, .topbar__slot--title, .topbar__slot--services { min-width: 0; max-width: 100%; } .topbar__title { font-size: var(--font-size-lg); font-weight: 600; color: var(--color-text); min-width: 0; line-height: 1.2; } .topbar__identity { white-space: nowrap; color: var(--color-text-muted); font-size: var(--font-size-sm); } .topbar__company-form, .topbar__field-group, .topbar__company-static { display: inline-flex; align-items: center; gap: .35rem; margin: 0; max-width: 100%; } .topbar__company-static { border: 1px solid var(--color-border); border-radius: var(--border-radius); background: var(--color-bg-card); padding: .42rem .6rem; } .topbar__company-value { color: var(--color-text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 360px; } .topbar__field-label { color: var(--color-text-muted); font-size: var(--font-size-sm); white-space: nowrap; } .topbar select { width: auto; min-width: 140px; max-width: 360px; padding: .45rem .65rem; } .topbar .topbar__company-form select { min-width: 280px; max-width: 420px; } .topbar .topbar__field-group select { min-width: 140px; max-width: 200px; } .topbar__services-strip { display: inline-flex; align-items: center; gap: .55rem; } .topbar__service-dots { display: inline-flex; align-items: center; gap: .35rem; } .topbar__service-dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--color-border); display: inline-block; } .topbar__service-dot.is-on { background: var(--color-success); border-color: var(--color-success); } .topbar__service-dot.is-off { background: var(--color-danger); border-color: var(--color-danger); } .topbar__services-menu { position: relative; min-width: 170px; max-width: 100%; } .topbar__services-menu[open] > summary { border-color: var(--color-primary); } .topbar__services-menu[open] > summary::after { transform: rotate(180deg); } .topbar__services-menu > summary { list-style: none; cursor: pointer; min-width: 170px; max-width: 100%; padding: .42rem .75rem; border: 1px solid var(--color-border); border-radius: var(--border-radius); background: var(--color-bg-card); color: var(--color-text); font-weight: 600; display: inline-flex; align-items: center; justify-content: space-between; gap: .5rem; white-space: nowrap; } .topbar__services-menu > summary::after { content: "▾"; color: var(--color-text-muted); font-size: .72rem; transition: transform .15s ease; } .topbar__services-menu > summary::-webkit-details-marker { display: none; } .topbar__services-form { position: absolute; right: 0; top: calc(100% + .35rem); z-index: 100; width: min(320px, calc(100vw - 2rem)); border: 1px solid var(--color-border); border-radius: var(--border-radius); background: var(--color-bg-card); box-shadow: var(--shadow-card); padding: .75rem .8rem; display: flex; flex-direction: column; gap: .55rem; } .topbar__services-item { display: flex; justify-content: space-between; align-items: center; gap: .75rem; color: var(--color-text); } .topbar__services-label { font-size: .9rem; line-height: 1.2; } .topbar-switch { position: relative; width: 44px; height: 24px; flex: 0 0 auto; } .topbar-switch input[type="checkbox"] { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; } .topbar-switch__slider { position: absolute; inset: 0; border-radius: 999px; background: var(--color-border); transition: background .15s ease; } .topbar-switch__slider::before { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--color-bg-input, #ffffff); transition: transform .15s ease; } .topbar-switch input[type="checkbox"]:checked + .topbar-switch__slider { background: var(--color-primary); } .topbar-switch input[type="checkbox"]:checked + .topbar-switch__slider::before { transform: translateX(20px); } .topbar-switch input[type="checkbox"]:focus-visible + .topbar-switch__slider { outline: 2px solid var(--color-primary); outline-offset: 2px; } .topbar__services-save { justify-content: center; width: 100%; margin-top: .2rem; } .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; } @media (max-width: 1200px) { .topbar__grid { grid-template-columns: minmax(200px, 1fr) minmax(220px, auto); grid-template-areas: "identity actions" "company company" "title services"; } .topbar__slot--company { justify-self: stretch; } .topbar__company-form { width: 100%; justify-content: center; } .topbar .topbar__company-form select { width: min(560px, 100%); min-width: 0; } } @media (max-width: 980px) { .layout { flex-direction: column; min-height: 100vh; } .sidebar { position: static; width: 100%; max-height: none; overflow: visible; } .sidebar__nav { display: flex; flex-wrap: wrap; gap: .35rem; padding: .6rem 1rem 1rem; } .sidebar__nav a { border-left: none; border-bottom: 2px solid transparent; border-radius: var(--border-radius); padding: .4rem .75rem; } .sidebar__nav a:hover, .sidebar__nav a.active { border-left-color: transparent; border-bottom-color: var(--color-primary); } .main { margin-left: 0; min-height: 0; } } @media (max-width: 720px) { .topbar { padding: .5rem .9rem; } .topbar__grid { grid-template-columns: 1fr; grid-template-areas: "identity" "company" "actions" "services" "title"; row-gap: .55rem; } .topbar__identity { white-space: normal; } .topbar__slot--actions, .topbar__slot--company, .topbar__slot--services { justify-self: stretch; width: 100%; } .topbar__slot--actions { justify-content: space-between; } .topbar__company-static, .topbar__company-form, .topbar__field-group, .topbar__services-menu { width: 100%; } .topbar__company-form { justify-content: space-between; } .topbar__services-strip { width: 100%; justify-content: space-between; } .topbar__services-menu > summary { width: 100%; } .topbar__services-form { position: static; width: 100%; margin-top: .35rem; } .topbar select, .topbar .topbar__company-form select { width: 100%; min-width: 0; max-width: none; } .content { padding: 1rem; } }