/* * AgentCortex — Tema "Neural Dark" * Plataforma para administrar agentes de IA. * * Paleta: fondo #0a0b14, paneles #12142b, borde #242844, * violeta #7c3aed/#a78bfa, cian #22d3ee, verde #34d399, ambar #fb923c. * Escala tipografica real de aplicacion (no miniatura). * Soporta tema oscuro (default) y claro via prefers-color-scheme y [data-theme]. */ /* ============================= VARIABLES ============================= */ :root { /* --- Neural Dark (default) --- */ --ac-bg: #0a0b14; --ac-bg-elevated: #0e1020; --ac-panel: #12142b; --ac-panel-alt: #171a33; --ac-border: #262a4a; --ac-border-soft: #1e2138; --ac-violet: #7c3aed; --ac-violet-deep: #6d28d9; --ac-violet-light: #a78bfa; --ac-cyan: #22d3ee; --ac-green: #34d399; --ac-amber: #fb923c; --ac-red: #f87171; --ac-text: #e9eaf5; --ac-text-strong: #ffffff; --ac-text-secondary: #a8adce; --ac-text-muted: #7c82a6; --ac-text-faint: #5a5f82; --ac-text-input: #6b7099; --ac-input-bg: #191c34; --ac-input-disabled-bg: #101021; /* --- Escala tipografica (app real) --- */ --ac-fs-micro: 11px; /* labels, pills, eyebrows */ --ac-fs-small: 12.5px; /* captions, meta */ --ac-fs-body: 14px; /* texto base */ --ac-fs-lg: 15px; /* nav, breadcrumb */ --ac-fs-h3: 16px; /* titulos de card */ --ac-fs-h2: 20px; /* titulos de seccion */ --ac-fs-h1: 24px; /* titulo de pantalla */ --ac-fs-display: 30px; /* valores grandes (tiles) */ --ac-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --ac-active-bg: linear-gradient(90deg, #6d28d955, #0000); --ac-active-shadow: inset 2px 0 0 var(--ac-violet-light); --ac-btn-gradient: linear-gradient(90deg, var(--ac-violet), var(--ac-violet-deep)); --ac-btn-glow: 0 6px 18px #7c3aed55; --ac-focus-ring: 0 0 0 3px #7c3aed33; --ac-radius-sm: 9px; --ac-radius-md: 12px; --ac-radius-lg: 16px; --ac-shadow-elevated: 0 12px 40px rgba(0, 0, 0, .35); --ac-success-bg: #10b98122; --ac-success-fg: var(--ac-green); --ac-info-bg: #7c3aed22; --ac-info-fg: var(--ac-violet-light); --ac-warning-bg: #fb923c22; --ac-warning-fg: var(--ac-amber); --ac-danger-bg: #f8717122; --ac-danger-fg: var(--ac-red); color-scheme: dark; } /* --- Tema claro --- * El proyecto controla el tema con la clase `.dark-version` en el * (toggle del topbar / argon). Por defecto es oscuro (dark-version presente). * Cuando el usuario apaga el modo oscuro, se quita `.dark-version` y aplican * estas variables claras. El login lleva `.dark-version` fijo (siempre oscuro). */ body:not(.dark-version) { --ac-bg: #f4f5fa; --ac-bg-elevated: #ffffff; --ac-panel: #ffffff; --ac-panel-alt: #eef0f7; --ac-border: #d7dae8; --ac-border-soft: #e7e8f5; --ac-text: #1b1d2e; --ac-text-strong: #0a0b14; --ac-text-secondary: #4a4f70; --ac-text-muted: #6b7094; --ac-text-faint: #9aa0c0; --ac-text-input: #9297b8; --ac-input-bg: #ffffff; --ac-input-disabled-bg: #eef0f7; --ac-shadow-elevated: 0 10px 30px rgba(20, 20, 50, .08); color-scheme: light; } /* ============================= BASE ============================= */ html, body { background: var(--ac-bg); color: var(--ac-text); font-family: var(--ac-font); font-size: var(--ac-fs-body); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin: 0; padding: 0; } * { box-sizing: border-box; } a { color: var(--ac-violet-light); text-decoration: none; } a:hover { color: var(--ac-cyan); } ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-track { background: var(--ac-bg-elevated); } ::-webkit-scrollbar-thumb { background: var(--ac-border); border-radius: 8px; } ::-webkit-scrollbar-thumb:hover { background: #33385f; } .ac-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } /* ============================= SHELL ============================= */ .ac-shell { display: flex; min-height: 100vh; background: var(--ac-bg); } /* --- Sidebar --- */ .ac-sidebar { width: 244px; flex-shrink: 0; background: var(--ac-bg-elevated); border-right: 1px solid var(--ac-border-soft); display: flex; flex-direction: column; padding: 20px 14px; } .ac-sidebar__logo { font-weight: 800; font-size: 18px; letter-spacing: -.2px; color: var(--ac-text-strong); display: flex; align-items: center; gap: 10px; padding: 4px 8px 20px; } .ac-sidebar__logo .ac-dot { width: 10px; height: 10px; background: linear-gradient(135deg, var(--ac-violet-light), var(--ac-cyan)); box-shadow: 0 0 12px var(--ac-violet-light); } .ac-sidebar__section { font-size: var(--ac-fs-micro); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; color: var(--ac-text-faint); margin: 18px 10px 8px; } .ac-sidebar__user { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px 8px 4px; border-top: 1px solid var(--ac-border-soft); } .ac-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--ac-violet), var(--ac-cyan)); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; font-weight: 700; flex-shrink: 0; } .ac-sidebar__user-name { font-size: var(--ac-fs-body); color: var(--ac-text); font-weight: 600; } .ac-sidebar__user-role { font-size: var(--ac-fs-micro); color: var(--ac-text-faint); } /* --- Nav item --- */ .ac-nav-item, #sidenav-main .nav-link { font-size: var(--ac-fs-lg); color: var(--ac-text-secondary); padding: 10px 12px; border-radius: var(--ac-radius-sm); margin-bottom: 3px; display: flex; align-items: center; gap: 12px; cursor: pointer; transition: background .15s ease, color .15s ease; text-decoration: none; } .ac-nav-item:hover, #sidenav-main .nav-link:hover { color: var(--ac-text-strong); background: var(--ac-panel-alt); } .ac-nav-item.active, .ac-nav-item.is-active, #sidenav-main .nav-link.active { color: var(--ac-text-strong); background: var(--ac-active-bg); box-shadow: var(--ac-active-shadow); font-weight: 600; } .ac-nav-item__icon { width: 18px; text-align: center; flex-shrink: 0; font-size: 15px; } .ac-badge { margin-left: auto; background: var(--ac-violet); color: #fff; font-size: 10px; padding: 2px 8px; border-radius: 10px; font-weight: 700; } .ac-badge--cyan { background: var(--ac-cyan); color: #06222b; } /* --- Main --- */ .ac-main { flex: 1; display: flex; flex-direction: column; min-width: 0; } /* --- Topbar --- */ .ac-topbar { height: 64px; border-bottom: 1px solid var(--ac-border-soft); display: flex; align-items: center; padding: 0 26px; gap: 18px; background: var(--ac-bg); } .ac-topbar__crumb { font-size: var(--ac-fs-h3); color: var(--ac-text-strong); font-weight: 700; } .ac-topbar__search { margin-left: 10px; flex: 1; max-width: 320px; background: var(--ac-panel-alt); border: 1px solid var(--ac-border); border-radius: var(--ac-radius-sm); height: 40px; display: flex; align-items: center; padding: 0 14px; color: var(--ac-text-input); font-size: var(--ac-fs-body); gap: 8px; } .ac-topbar__icons { margin-left: auto; display: flex; gap: 18px; align-items: center; color: var(--ac-text-muted); font-size: 17px; } .ac-topbar__icons .ac-status-online { color: var(--ac-green); font-size: var(--ac-fs-small); display: flex; align-items: center; gap: 6px; } /* --- Content --- */ .ac-content { flex: 1; padding: 28px 32px; overflow: auto; } .ac-page-title { color: var(--ac-text-strong); font-size: var(--ac-fs-h1); font-weight: 800; letter-spacing: -.3px; margin: 0; } .ac-page-subtitle { color: var(--ac-text-muted); font-size: var(--ac-fs-body); margin: 6px 0 24px; } /* ============================= STAT TILES ============================= */ .ac-tiles { display: flex; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; } .ac-tile { flex: 1 1 210px; background: var(--ac-panel); border: 1px solid var(--ac-border); border-radius: var(--ac-radius-md); padding: 20px; } .ac-tile__label { font-size: var(--ac-fs-micro); text-transform: uppercase; letter-spacing: .6px; font-weight: 600; color: var(--ac-text-muted); display: flex; align-items: center; gap: 7px; } .ac-tile__value { font-size: var(--ac-fs-display); font-weight: 800; letter-spacing: -.5px; margin-top: 10px; color: var(--ac-text-strong); } .ac-tile__delta { font-size: var(--ac-fs-small); margin-top: 5px; color: var(--ac-text-muted); } .ac-tile__delta--up { color: var(--ac-green); } .ac-tile__delta--down { color: var(--ac-red); } /* ============================= PANELS / CARDS ============================= */ .ac-panels { display: flex; gap: 18px; flex-wrap: wrap; } .ac-card { background: var(--ac-panel); border: 1px solid var(--ac-border); border-radius: var(--ac-radius-md); padding: 20px; flex: 1 1 340px; min-width: 0; } .ac-card__title { font-size: var(--ac-fs-h3); color: var(--ac-text-strong); font-weight: 700; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; } .ac-card__title a, .ac-card__link { color: var(--ac-violet-light); font-size: var(--ac-fs-small); font-weight: 600; } .ac-card__empty { color: var(--ac-text-faint); font-size: var(--ac-fs-body); text-align: center; padding: 32px 8px; } /* --- Filas de lista --- */ .ac-row { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--ac-border-soft); font-size: var(--ac-fs-body); color: var(--ac-text-secondary); } .ac-row:last-child { border-bottom: none; } .ac-row__avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--ac-border); flex-shrink: 0; } .ac-pill { margin-left: auto; font-size: var(--ac-fs-micro); padding: 3px 10px; border-radius: 20px; font-weight: 600; } /* Dentro de un toggle el pill de estado va pegado al switch, no empujado a la derecha */ .ac-toggle .ac-pill { margin-left: 0; } .ac-pill--success { background: var(--ac-success-bg); color: var(--ac-success-fg); } .ac-pill--info { background: var(--ac-info-bg); color: var(--ac-info-fg); } .ac-pill--warning { background: var(--ac-warning-bg); color: var(--ac-warning-fg); } .ac-pill--danger { background: var(--ac-danger-bg); color: var(--ac-danger-fg); } /* ============================= TOKEN BARS ============================= */ .ac-token { margin-bottom: 16px; } .ac-token__header { display: flex; justify-content: space-between; font-size: var(--ac-fs-body); color: var(--ac-text); margin-bottom: 7px; } .ac-token__header .ac-token__meta { color: var(--ac-text-muted); font-size: var(--ac-fs-small); } .ac-token-bar { height: 8px; border-radius: 6px; background: var(--ac-border-soft); overflow: hidden; } .ac-token-bar__fill { height: 100%; border-radius: 6px; background: var(--ac-violet); transition: width .3s ease; } .ac-token__budget { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ac-border-soft); display: flex; justify-content: space-between; align-items: center; } .ac-token__budget-label { font-size: var(--ac-fs-small); color: var(--ac-text-muted); } .ac-token__budget-value { font-size: var(--ac-fs-h3); color: var(--ac-text-strong); font-weight: 700; } .ac-token__budget-value small { color: var(--ac-text-faint); font-weight: 400; font-size: var(--ac-fs-small); } /* ============================= TABLES ============================= */ .ac-table, table.ac-table { width: 100%; border-collapse: collapse; font-size: var(--ac-fs-body); color: var(--ac-text-secondary); } .ac-table thead th { text-align: left; font-size: var(--ac-fs-micro); text-transform: uppercase; letter-spacing: .6px; font-weight: 600; color: var(--ac-text-muted); padding: 12px 14px; border-bottom: 1px solid var(--ac-border); background: var(--ac-panel-alt); } .ac-table tbody td { padding: 13px 14px; border-bottom: 1px solid var(--ac-border-soft); } .ac-table tbody tr:hover { background: var(--ac-panel-alt); } .ac-table tbody tr:last-child td { border-bottom: none; } /* ============================= BOTONES ============================= */ .btn, .ac-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; border-radius: var(--ac-radius-sm); padding: 11px 20px; font-size: var(--ac-fs-body); font-weight: 600; font-family: inherit; cursor: pointer; transition: transform .1s ease, box-shadow .15s ease, filter .15s ease, opacity .15s ease; } .btn:active, .ac-btn:active { transform: translateY(1px); } .btn-primary, .ac-btn--primary { background: var(--ac-btn-gradient); color: #fff; box-shadow: var(--ac-btn-glow); } .btn-primary:hover, .ac-btn--primary:hover { filter: brightness(1.08); box-shadow: 0 8px 22px #7c3aed77; } .btn-secondary, .ac-btn--secondary { background: var(--ac-panel-alt); color: var(--ac-text); border: 1px solid var(--ac-border); } .btn-secondary:hover, .ac-btn--secondary:hover { border-color: var(--ac-violet-light); color: var(--ac-text-strong); } .btn-outline, .ac-btn--outline { background: transparent; color: var(--ac-violet-light); border: 1px solid var(--ac-violet); } .btn-outline:hover, .ac-btn--outline:hover { background: var(--ac-violet); color: #fff; } .btn-danger, .ac-btn--danger { background: linear-gradient(90deg, var(--ac-red), #dc2626); color: #fff; } .btn:disabled, .ac-btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; } /* ============================= INPUTS / FORMS ============================= */ .ac-input, .form-control, input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="search"], input[type="date"], textarea, select { background: var(--ac-input-bg); border: 1px solid var(--ac-border); border-radius: var(--ac-radius-sm); height: 44px; padding: 0 14px; color: var(--ac-text); font-size: var(--ac-fs-body); font-family: inherit; width: 100%; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; } /* Deshabilitado: claramente distinto del habilitado */ .ac-input:disabled, .form-control:disabled, input:disabled, textarea:disabled, select:disabled, .ac-input[disabled], input[disabled] { background: var(--ac-input-disabled-bg); color: var(--ac-text-muted); border-style: dashed; cursor: not-allowed; opacity: .75; } textarea { height: auto; padding: 12px 14px; } .ac-input::placeholder, .form-control::placeholder, input::placeholder, textarea::placeholder { color: var(--ac-text-input); } .ac-input:focus, .form-control:focus, input:focus, textarea:focus, select:focus { outline: none; border-color: var(--ac-violet); box-shadow: var(--ac-focus-ring); } .ac-label, label { color: var(--ac-text-secondary); font-size: var(--ac-fs-micro); text-transform: uppercase; letter-spacing: .6px; font-weight: 600; display: block; margin-bottom: 7px; } /* ============================= LOGIN (split) ============================= */ .ac-login-page { min-height: 100vh; } .ac-login-shell { display: flex; min-height: 100vh; background: var(--ac-bg); } /* Panel de marca (izquierda) */ .ac-login-brand { flex: 1.05; position: relative; background: radial-gradient(130% 120% at 15% 10%, #2c2064 0%, #14103a 42%, var(--ac-bg) 78%); padding: 44px 64px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; overflow: hidden; color: #fff; } .ac-login-brand > div:nth-child(3) { flex: 1; display: flex; flex-direction: column; justify-content: center; } .ac-login-brand::after { content: ""; position: absolute; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle, #7c3aed66, #0000 70%); top: 34%; left: 26%; filter: blur(20px); pointer-events: none; } .ac-login-glow { position: absolute; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, #22d3ee44, #0000 70%); bottom: -80px; right: -60px; pointer-events: none; } .ac-login-logo { position: relative; font-weight: 800; font-size: 20px; letter-spacing: -.2px; color: #fff; display: flex; align-items: center; gap: 11px; z-index: 2; } .ac-login-logo .ac-dot { width: 11px; height: 11px; } .ac-login-tagline { position: relative; z-index: 2; color: #cdbdfb; font-size: var(--ac-fs-lg); line-height: 1.6; max-width: 460px; } .ac-login-tagline b { color: #fff; font-size: 40px; line-height: 1.1; font-weight: 800; letter-spacing: -1px; display: block; margin-bottom: 16px; } .ac-login-features { position: relative; z-index: 2; margin-top: 34px; display: flex; flex-direction: column; gap: 14px; max-width: 440px; } .ac-login-feature { display: flex; align-items: center; gap: 12px; color: #d7d0f5; font-size: var(--ac-fs-body); } .ac-login-feature .ac-login-feature__ico { width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px; background: #7c3aed26; border: 1px solid #7c3aed44; display: flex; align-items: center; justify-content: center; color: var(--ac-violet-light); font-size: 14px; } .ac-login-brand__bottom { position: relative; z-index: 2; } .ac-login-brand__meta { display: flex; justify-content: space-between; align-items: center; font-size: var(--ac-fs-small); color: #9c93c6; } .ac-login-brand__frase { margin: 12px 0 0; font-size: var(--ac-fs-small); color: #8f88b8; font-style: italic; line-height: 1.5; } /* Panel de formulario (derecha) */ .ac-login-form-wrap { flex: 1; background: var(--ac-bg-elevated); border-left: 1px solid var(--ac-border-soft); padding: 48px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .ac-login-form { width: 100%; max-width: 372px; display: flex; flex-direction: column; gap: 16px; } .ac-login-title { color: var(--ac-text-strong); font-weight: 800; font-size: 26px; letter-spacing: -.4px; } .ac-login-subtitle { color: var(--ac-text-muted); font-size: var(--ac-fs-body); margin: -8px 0 6px; } .ac-login-field { display: flex; flex-direction: column; gap: 0; } .ac-login-row { display: flex; justify-content: space-between; align-items: center; font-size: var(--ac-fs-body); color: var(--ac-text-muted); } .ac-login-check { display: flex; align-items: center; gap: 8px; cursor: pointer; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: var(--ac-fs-body); color: var(--ac-text-secondary); margin: 0; } .ac-login-check input { width: 16px; height: 16px; accent-color: var(--ac-violet); cursor: pointer; } .ac-login-avatars { display: flex; gap: 10px; } .ac-login-avatars-label { font-size: var(--ac-fs-micro); text-transform: uppercase; letter-spacing: .6px; color: var(--ac-text-muted); margin-bottom: 10px; } /* Cuentas guardadas (avatares que Login.js inyecta en #contenedor) */ #contenedor { gap: 14px !important; } .lg-user { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; width: 66px; cursor: pointer; padding-top: 4px; } .lg-user__avatar { position: relative; width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(135deg, var(--ac-violet), var(--ac-cyan)); display: flex; align-items: center; justify-content: center; overflow: hidden; border: 2px solid var(--ac-border); transition: border-color .15s ease, transform .12s ease; } .lg-user__avatar::before { content: attr(data-inicial); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 19px; } .lg-user__img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; } .lg-user__name { font-size: var(--ac-fs-micro); color: var(--ac-text-secondary); max-width: 66px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lg-user:hover .lg-user__avatar { border-color: var(--ac-violet-light); transform: translateY(-2px); } .lg-user__x { position: absolute; top: -2px; right: 2px; z-index: 3; width: 18px; height: 18px; border-radius: 50%; background: var(--ac-panel-alt); border: 1px solid var(--ac-border); color: var(--ac-text-muted); font-size: 13px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity .15s ease; } .lg-user:hover .lg-user__x { opacity: 1; } .lg-user__x:hover { color: var(--ac-red); border-color: var(--ac-red); } /* ===== Tablas generadas por Table.CrearTabla (Bootstrap card) → Neural Dark ===== */ .ac-content .card, #griddatos .card, .table-responsive .card { background: var(--ac-panel); border: 1px solid var(--ac-border); border-radius: var(--ac-radius-md); overflow: hidden; } .ac-content .card-header, #griddatos .card-header, .card-header.bg-primary { background: var(--ac-panel-alt) !important; color: var(--ac-text-strong) !important; font-size: var(--ac-fs-h3) !important; font-weight: 700; border-bottom: 1px solid var(--ac-border); letter-spacing: .2px; } .ac-content .table, #griddatos .table, table.table { --bs-table-bg: transparent; --bs-table-color: var(--ac-text-secondary); --bs-table-striped-bg: rgba(255, 255, 255, .025); --bs-table-striped-color: var(--ac-text-secondary); --bs-table-hover-bg: var(--ac-panel-alt); --bs-table-hover-color: var(--ac-text-strong); --bs-table-border-color: var(--ac-border-soft); color: var(--ac-text-secondary); margin: 0; } .ac-content .table thead th, #griddatos .table thead th, table.table thead th { color: var(--ac-text-muted); background: var(--ac-panel); border-bottom: 1px solid var(--ac-border); text-transform: uppercase; font-size: var(--ac-fs-micro); letter-spacing: .6px; font-weight: 600; padding: 13px 16px; } .ac-content .table td, #griddatos .table td, table.table td { border-color: var(--ac-border-soft) !important; padding: 13px 16px; color: var(--ac-text-secondary); vertical-align: middle; } .ac-content .card-footer, #griddatos .card-footer { background: var(--ac-panel); border-top: 1px solid var(--ac-border-soft); } /* ===== Patron CRUD estandar: barra de lista + acciones por fila + modal ===== */ .ac-listbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; } .ac-listbar__search { flex: 1; min-width: 240px; max-width: 440px; } .ac-acciones { display: flex; gap: 8px; align-items: center; justify-content: flex-start; } .ac-icon-btn { width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--ac-panel-alt); border: 1px solid var(--ac-border); color: var(--ac-text-muted); font-size: 13px; transition: color .15s ease, border-color .15s ease, background .15s ease; cursor: pointer; } .ac-icon-btn--edit:hover { border-color: var(--ac-violet-light); color: var(--ac-violet-light); background: var(--ac-info-bg); } .ac-icon-btn--del:hover { border-color: var(--ac-red); color: var(--ac-red); background: var(--ac-danger-bg); } #griddatos .table td.ac-col-acciones, .ac-content .table th:last-child { width: 1%; white-space: nowrap; } /* Modal Bootstrap → Neural Dark */ .modal-content { background: var(--ac-panel); border: 1px solid var(--ac-border); border-radius: var(--ac-radius-lg); color: var(--ac-text); box-shadow: var(--ac-shadow-elevated); } .modal-header { border-bottom: 1px solid var(--ac-border); padding: 18px 22px; align-items: center; } .modal-header .modal-title { color: var(--ac-text-strong); font-weight: 700; font-size: var(--ac-fs-h3); } .modal-header .btn-close { filter: invert(1) grayscale(1) brightness(1.6); opacity: .6; } .modal-body { padding: 22px; } .modal-footer { border-top: 1px solid var(--ac-border); padding: 16px 22px; gap: 10px; } .ac-modal-close { background: none; border: none; color: var(--ac-text-muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; } .ac-modal-close:hover { color: var(--ac-text-strong); } /* Pestañas dentro de modal */ .ac-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--ac-border); margin-bottom: 20px; } .ac-tab { padding: 10px 16px; font-size: var(--ac-fs-body); font-weight: 600; color: var(--ac-text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; } .ac-tab:hover { color: var(--ac-text-secondary); } .ac-tab.active { color: var(--ac-violet-light); border-bottom-color: var(--ac-violet); } .ac-tab-panel { display: none; } .ac-tab-panel.active { display: block; } /* ============================= UTILIDADES ============================= */ .d-none { display: none !important; } .CursorPointer, .cursor-pointer { cursor: pointer !important; } #griddatos .table tbody tr.CursorPointer:hover td { color: var(--ac-text-strong); } .ac-text-muted { color: var(--ac-text-muted) !important; } .ac-text-success { color: var(--ac-green) !important; } .ac-text-danger { color: var(--ac-red) !important; } .ac-text-info { color: var(--ac-cyan) !important; } .ac-text-warning { color: var(--ac-amber) !important; } /* ============================= RESPONSIVE ============================= */ @media (max-width: 980px) { .ac-sidebar { width: 68px; padding: 16px 8px; } .ac-sidebar__logo span:last-child, .ac-sidebar__section, .ac-nav-item span:not(.ac-nav-item__icon), .ac-sidebar__user-name, .ac-sidebar__user-role { display: none; } .ac-panels { flex-direction: column; } .ac-content { padding: 20px; } .ac-login-shell { flex-direction: column; } .ac-login-brand { flex: none; min-height: 300px; padding: 80px 32px 32px; justify-content: center; } .ac-login-logo { left: 32px; } .ac-login-brand__bottom { display: none; } .ac-login-features { display: none; } .ac-login-tagline b { font-size: 30px; } .ac-login-form-wrap { border-left: none; border-top: 1px solid var(--ac-border-soft); padding: 32px 24px; } }