/* ADS · interface rebuilt from the four supplied visual references.
   Shared theme is loaded after the structural and page-specific styles. */
:root {
  --bg: #00101c;
  --surface: #061b2c;
  --surface-2: #0c2940;
  --surface-3: #10364f;
  --line: rgba(76, 159, 204, .3);
  --line-strong: rgba(60, 203, 243, .6);
  --text: #f3f7ff;
  --muted: #c2d3e6;
  --muted-2: #9cb8d4;
  --accent: #37e5ff;
  --accent-2: #00ddce;
  --warning: #ffcb71;
  --danger: #ff8795;
  --radius: 12px;
  --sidebar: 280px;
  --shadow: 0 12px 30px rgba(0, 4, 12, .18);
}
body { font-family: Inter, system-ui, sans-serif; font-size: 14px; line-height: 1.5; background: radial-gradient(ellipse at 60% 45%, rgba(0, 50, 92, .3), transparent 72%), linear-gradient(120deg, #020c15, #001629 70%, #00101b); background-attachment: fixed; color: var(--text); }
body::before { display: none; }
h1, h2, h3, h4, h5, h6 { font-family: Inter, system-ui, sans-serif; }
a { color: #40e8ff; }
a:hover { color: #a3f7ff; }
svg { stroke-width: 1.7; }
.sidebar { background: url('../arte/onda-menu.svg') top right / 100% auto no-repeat, radial-gradient(ellipse at 100% 80%, #00213c70, transparent 70%), #020e1b; border-right: 1px solid #164363; box-shadow: 8px 0 40px #0003; }
.sidebar-shell { padding: 14px 20px 22px; }
.brand { padding: 5px 8px; min-height: 65px; gap: 16px; }
.brand-logo { width: 46px; height: 46px; border-radius: 12px; border: 1px solid #00bce9; background: linear-gradient(135deg, #075778, #07192b 75%); box-shadow: inset 0 2px 5px #18d9ff4a, 0 0 22px #00bfff30; }
.brand-logo svg { width: 27px; height: 27px; color: #74efff; filter: drop-shadow(0 0 5px #00c9ff70); }
.brand-copy strong { font-family: Inter, sans-serif; font-size: 21px; font-weight: 800; letter-spacing: .06em; }
.brand-dot { color: #fff; }
.brand-copy > span { color: #b5ddff; font-size: 9px; font-weight: 700; letter-spacing: .23em; margin-top: 3px; }
.workspace-label { margin: 7px 0 21px; padding: 8px 12px; min-height: 51px; gap: 12px; border-radius: 12px; border: 1px solid #25465f; background: linear-gradient(110deg, #0d2135c9, #0b223899); box-shadow: inset 0 1px 0 #ffffff05; }
.workspace-mark { width: 34px; color: #5bedff; }
.workspace-mark svg { width: 23px; height: 23px; }
.workspace-label > span:nth-child(2) { flex: 1; min-width: 0; font-size: 10px; line-height: 1.3; color: #cfdded; }
.workspace-label strong { font-size: 12px; color: #f3f7ff; font-weight: 600; }
.workspace-collapse { display: grid; place-items: center; border: 0; padding: 4px; background: transparent; color: #d6e9fb; border-radius: 4px; }
.workspace-collapse svg { width: 15px; height: 15px; }
.nav-section { padding: 0 0 12px; scrollbar-width: thin; scrollbar-color: #174663 transparent; }
.nav-label { margin: 23px 15px 9px; font-size: 10px; color: #b5d7f8; font-weight: 700; letter-spacing: .18em; }
.nav-label:first-child { margin-top: 0; }
.nav-link { display: flex; align-items: center; gap: 19px; min-height: 38px; padding: 7px 18px; margin-bottom: 0; border: 1px solid transparent; border-radius: 9px; font-size: 14px; color: #f3f6ff; font-weight: 400; }
.nav-link svg { color: #e3effe; width: 19px; height: 19px; }
.nav-link:hover { background: #0732528c; border-color: #1c526c; }
.nav-link.active { color: #fff; font-weight: 650; background: linear-gradient(100deg, #036b95a8, #063858c9); border-color: #04c5f0; box-shadow: inset 0 1px 0 #72e4ff1a, 0 0 20px #009fda10; }
.nav-link.active svg { color: #40eaff; filter: drop-shadow(0 0 5px #00c5ff6b); }
.nav-link.active::before { display: none; }
.sidebar-footer { padding: 14px 0 0; border-color: #103348; }
.sidebar-user { gap: 15px; padding: 9px 12px; min-height: 56px; border: 1px solid #244f70; border-radius: 12px; background: linear-gradient(110deg, #0c2134, #0c2d489c); }
.sidebar-avatar { width: 37px; height: 37px; border-radius: 50%; color: #fff; font-size: 12px; border: 1px solid #0cf0ff; background: linear-gradient(135deg, #15cfff, #0086ee 65%, #02639d); box-shadow: inset 0 1px 2px #fff6, 0 0 12px #00b3ff30; }
.sidebar-user-copy strong { font-size: 13px; font-weight: 600; }
.sidebar-user-copy > span { font-size: 11px; color: #c2d3e6; }
.logout-link { color: #d7eaff; }
.logout-link svg { width: 20px; height: 20px; }
.sidebar-signature { margin-top: 13px; padding: 12px 0 0; border-top: 1px solid #173749; font-size: 8px; color: #bbd4ed; letter-spacing: .04em; }
.sidebar-signature span { color: #bbd4ed; }
.contenido { padding: 0 28px 28px; }
.main-shell { max-width: none; }
.main-shell.main-shell-guest { max-width: 1120px; width: 100%; }
.workspace-header { min-height: 64px; margin-bottom: 0; border: 0; }
.workspace-breadcrumb { gap: 14px; color: #edf4ff; font-size: 12px; }
.workspace-breadcrumb strong { font-weight: 500; color: #fff; }
.workspace-breadcrumb > svg { color: #729aba; }
.workspace-home { display: grid; place-items: center; width: 30px; height: 28px; border-radius: 9px; background: linear-gradient(135deg, #0a2b3e, #03121e); color: #6defff; }
.workspace-home svg { width: 19px; height: 19px; }
.workspace-meta { display: flex; align-items: center; gap: 18px; }
.workspace-product { color: #dce8f9; font-size: 12px; gap: 10px; }
.workspace-product svg { width: 18px; height: 18px; color: #55e9ff; }
.desktop-menu-toggle { display: none; }
.sidebar-collapsed .desktop-menu-toggle { display: grid; }
.main-shell > .page-header, .visores-page > .page-header { position: relative; isolation: isolate; overflow: hidden; min-height: 188px; padding: 30px 46px; margin: 4px 0 22px; border: 1px solid #08638b; border-radius: 14px; background: url('../arte/onda-azul.svg') center / cover no-repeat, radial-gradient(ellipse at 75% 0, #00477460, transparent 70%), linear-gradient(120deg, #052335, #00223c 70%, #002034); box-shadow: inset 0 1px 0 #71deff08, 0 12px 35px #0000000d; }
.main-shell > .page-header > div, .visores-page > .page-header > div { position: relative; z-index: 1; }
.page-kicker { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; color: #57f1ff; font-size: 10px; font-weight: 750; letter-spacing: .18em; }
.page-kicker::before { content: ''; display: block; width: 23px; height: 1px; background: #25e6f7; box-shadow: 0 0 8px #00cfff; }
.page-title { font-family: Inter, sans-serif; font-size: 42px; line-height: 1.1; letter-spacing: -.03em; font-weight: 750; }
.page-subtitle { margin: 8px 0 0; color: #d3e1f3; font-size: 14px; line-height: 1.45; }
.page-actions { gap: 12px; }
.main-shell > .page-header .page-actions .btn { padding: 12px 23px; min-height: 48px; font-size: 15px; border-radius: 12px; }
.btn { min-height: 36px; padding: 7px 14px; gap: 8px; border-radius: 9px; font-size: 13px; font-weight: 600; }
.btn svg { width: 17px; height: 17px; flex-basis: 17px; }
.btn-primary { color: #fff; border: 1px solid #00e5ff; background: linear-gradient(135deg, #00c6f1, #009be6 65%, #009caf); box-shadow: inset 0 2px 7px #6bfcff3b, 0 0 17px #00baff30, 0 4px 12px #0002; }
.btn-primary:hover, .btn-primary:focus-visible { color: #fff; border-color: #8fffff; background: linear-gradient(135deg, #1bdefb, #03a8ee 65%, #00b7c3); box-shadow: 0 0 22px #00cbff55; }
.btn-outline-light, .btn-editar { color: #f1f7ff; border: 1px solid #315b78; background: linear-gradient(120deg, #0f2d43a1, #031321c7); box-shadow: inset 0 1px 3px #c0e9ff15, 0 3px 6px #0002; }
.btn-editar { border-color: #0a91c2; }
.btn-outline-light:hover, .btn-editar:hover { color: #fff; background: linear-gradient(120deg, #134563, #062339); border-color: #42dfff; }
.btn-outline-danger { border: 1px solid #925067; color: #ffb9c3; background: linear-gradient(120deg, #462c433d, #151b2b); box-shadow: inset 0 1px 3px #ffd5e51a; }
.btn-outline-danger:hover { color: #ffe6ea; background: #5e293f; border-color: #fb90a4; }
.btn-sm { min-height: 32px; padding: 5px 11px; font-size: 13px; gap: 7px; }
.btn-sm svg { width: 15px; height: 15px; flex-basis: 15px; }
.content-panel, .form-panel, .table-shell, .filter-panel { border: 1px solid #245775; border-radius: 14px; background: radial-gradient(ellipse at 100% 100%, #0e34533d, transparent 65%), linear-gradient(125deg, #092438a6, #041522e8); box-shadow: inset 0 1px 0 #ffffff04, 0 6px 25px #00000014; }
.content-panel, .form-panel { padding: 24px 30px; }
.table-shell { padding: 16px; }
.table-shell .table-responsive { border-radius: 12px; }
.collection-head { padding: 6px 9px 18px; border: 0; }
.collection-head > span:first-child { gap: 14px; color: #f2f6ff; font-size: 19px; font-weight: 650; }
.collection-head > span:first-child > svg { box-sizing: content-box; width: 22px; height: 22px; padding: 9px; border: 1px solid #005b7b; border-radius: 11px; color: #58eaff; background: linear-gradient(135deg, #07557675, #00243a57); }
.collection-count { padding: 6px 11px; border: 1px solid #164b6c; border-radius: 8px; background: #0b2a424d; color: #daeaff; font-size: 12px; }
.table.tabla-moderna { margin: 0; --bs-table-bg: transparent; --bs-table-color: #f0f6ff; }
.table.tabla-moderna thead th { padding: 14px 16px; border-bottom: 1px solid #20567a; background: linear-gradient(180deg, #0d304acc, #0a273db8); color: #c3ddfa; font-size: 12px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.table.tabla-moderna tbody td { padding: 18px 16px; border-bottom: 1px solid #1a3d54b3; background: transparent; color: #edf4ff; font-size: 15px; }
.table.tabla-moderna tbody tr:last-child td { border-bottom: 0; }
.table.tabla-moderna tbody tr:hover td { background: #00639416; }
.table.tabla-moderna tbody td strong { color: #fff; font-weight: 650; }
.table.tabla-moderna tbody td a { color: #38e8ff; }
.table.tabla-moderna tbody td a.btn-editar, .table.tabla-moderna tbody td a.btn-outline-light { color: #f2f8ff; }
.table.tabla-moderna tbody td a.btn-primary { color: #fff; }
.table .col-id { width: 65px; }
.table .col-actions-sm { width: 230px; }
.badge-soft { padding: 5px 10px; border: 1px solid #23708c; border-radius: 7px; color: #e2f7ff; background: linear-gradient(135deg, #0b49607d, #0733438a); font-size: 12px; }
.badge-soft.success { border-color: #00897f; color: #b3fff4; background: #00695d4a; }
.badge-soft.warning { border-color: #8b7845; color: #ffe6b2; background: #81602830; }
.status-dot { gap: 8px; padding: 5px 11px; border: 1px solid #3c5767; border-radius: 18px; background: #1c354652; color: #eaf4ff; font-size: 12px; white-space: nowrap; }
.status-dot::before { width: 8px; height: 8px; }
.status-dot.is-on { border-color: #007f79; background: linear-gradient(120deg, #00766655, #004b4d66); }
.status-dot.is-on::before { background: #04eed3; box-shadow: 0 0 0 3px #00d5be1a, 0 0 9px #00f4d870; }
.status-dot.is-off { border-color: #697063; color: #ffdf98; background: #65522138; }
.status-dot.is-off::before { background: #ffcd65; }
.section-title { font-size: 21px; letter-spacing: -.02em; font-weight: 650; }
.content-panel > .page-header { padding-bottom: 14px; border: 0; }
.form-label { color: #e0ebf9; font-size: 13px; font-weight: 500; }
.form-control, .form-select { min-height: 43px; color: #edf7ff; font-size: 14px; border: 1px solid #26516e; border-radius: 7px; background-color: #011422b8; }
.form-control::placeholder { color: #b6cbe0; }
.form-control:focus, .form-select:focus { color: #fff; border-color: #23d9f3; background-color: #031b2d; box-shadow: 0 0 0 3px #00bdec1c; }
.form-check-input:checked { border-color: #00dded; background-color: #009bcd; }
.form-text, .text-muted { color: #b6cada !important; }
.alert { border-radius: 10px; font-size: 13px; }
/* Anuncios and Avisos share the table treatment and keep their live actions. */
body[data-section="anuncios"] .main-shell > .table-shell { background: url('../arte/onda-tarjeta.svg') right bottom / 100% 200px no-repeat, linear-gradient(120deg, #062438cf, #061c30ed); }
body[data-section="anuncios"] .main-shell > .table-shell .table-responsive { border: 1px solid #164766; }
body[data-section="anuncios"] .table.tabla-moderna tbody td { padding-top: 20px; padding-bottom: 20px; }
body[data-section="avisos"] .main-shell > .page-header { min-height: 160px; padding: 24px 36px; margin-top: 0; margin-bottom: 20px; }
body[data-section="avisos"] .main-shell > .page-header > div:first-child { max-width: 47%; }
body[data-section="avisos"] .main-shell > .page-header .page-subtitle { font-size: 14px; max-width: 550px; }
body[data-section="avisos"] .main-shell > .table-shell { padding: 0 20px 8px; border-color: #007a9d; background: radial-gradient(ellipse at 0 0, #00719c33, transparent 60%), #031a29bd; }
body[data-section="avisos"] .main-shell > .table-shell .table-responsive { border-radius: 0; }
body[data-section="avisos"] .table.tabla-moderna tbody td { padding: 7px 11px; }
body[data-section="avisos"] .table.tabla-moderna thead th { padding: 11px; background: transparent; }
body[data-section="avisos"] .table .col-id { width: 60px; }
body[data-section="avisos"] .table .col-actions-xl { width: 420px; }
body[data-section="avisos"] .btn-sm { min-height: 30px; padding: 4px 10px; }
.main-shell > .page-header > .aviso-hero-art { position: absolute; z-index: 0; width: 280px; height: 140px; top: 6px; right: 280px; perspective: 700px; pointer-events: none; }
.aviso-glass { position: absolute; width: 190px; height: 103px; border: 1px solid #11c7ec80; border-radius: 10px; background: linear-gradient(125deg, #0672a157, #00203938 60%, #00b9d746); box-shadow: inset 0 1px 9px #00e2ff21, 0 8px 20px #0003; transform: rotate(-12deg) rotateY(10deg); }
.aviso-glass > span { position: absolute; top: 3px; left: 10px; font-size: 12px; color: #9aeaff; letter-spacing: 3px; }
.aviso-glass-back { top: 12px; left: 0; }
.aviso-glass-front { top: 30px; left: 48px; }
.aviso-glass-front svg { position: absolute; top: 28px; left: 59px; width: 64px; height: 60px; color: #32ebff; stroke-width: 1.2; filter: drop-shadow(0 0 7px #05e9ff80); }
.launches-panel { position: relative; overflow: hidden; padding: 14px 20px; background: url('../arte/onda-tarjeta.svg') right bottom / 100% 240px no-repeat, #061c2c; }
.launches-panel .section-title { display: flex; align-items: center; gap: 16px; margin: 0 8px 14px; }
.launches-panel .section-title svg { width: 25px; height: 25px; color: #03e3f4; }
.launches-panel .table-responsive { border: 1px solid #214c68; border-radius: 12px; }
/* Dashboard: the reference's wide hero, five compact metrics and horizontal day. */
.dashboard-hero { margin: 0 0 17px; padding: 0; border: 1px solid #136c92; border-radius: 13px; background: url('../arte/onda-azul.svg') center / 100% 100% no-repeat, radial-gradient(ellipse at 70% 0, #00567a45, transparent 65%), linear-gradient(120deg, #062a3b, #00243d 75%, #00202d); }
.dashboard-hero .hero-head { min-height: 252px; padding: 23px 48px 20px; grid-template-columns: minmax(0, 1.3fr) minmax(300px, 1fr); gap: 20px; }
.dashboard-hero .page-kicker { font-size: 9px; margin-bottom: 12px; }
.dashboard-hero .page-kicker::before { display: none; }
.dashboard-hero .kicker-line { width: 22px; }
.dashboard-hero .hero-title { font-family: Inter, sans-serif; font-size: clamp(30px, 2.55vw, 43px); font-weight: 750; line-height: 1.08; letter-spacing: -.025em; }
.dashboard-hero .hero-title > span { color: #45d8f2; text-shadow: 0 0 25px #13b4df12; }
.dashboard-hero .hero-desc { max-width: 440px; margin-top: 10px; font-size: 13px; color: #d4e5f5; line-height: 1.35; }
.hero-actions { margin-top: 15px; gap: 14px; }
.hero-actions .btn { min-height: 38px; padding: 8px 16px; font-size: 12px; }
.hero-visual { height: 205px; max-width: 430px; width: 100%; margin-left: auto; }
.visual-orbit { display: none; }
.broadcast-screen { width: 76%; border-color: #2f9cc3; border-radius: 11px; background: #031c30; box-shadow: 0 14px 32px #0004, inset 0 1px 0 #ffffff18; }
.screen-back { top: 6px; right: 2px; height: 152px; opacity: .8; transform: rotate(5deg) rotateY(-10deg); }
.screen-front { top: 45px; left: 0; width: 73%; height: 150px; transform: rotate(-7deg) rotateY(8deg); }
.screen-top { height: 18px; background: #03233c; }
.screen-top small { color: #d7f4ff; font-size: 5px; letter-spacing: .04em; }
.screen-art { height: calc(100% - 18px); padding: 15px 19px; background: url('../arte/onda-azul.svg') center / cover, linear-gradient(115deg, #0b437d, #055478 65%, #007c82); }
.screen-art::after { border-color: #0fc8ef33; }
.screen-art > svg { top: 20px; right: 22px; width: 26px; height: 26px; color: #c6fffa; border-color: #c0fffa; }
.screen-caption { color: #fff; font-family: Inter, sans-serif; font-size: 29px; font-weight: 650; line-height: .98; }
.screen-frequency { bottom: 10px; left: 20px; gap: 3px; }
.screen-frequency b { width: 3px; background: #28e2ff; opacity: 1; }
.screen-lines { padding: 19px; gap: 12px; }
.visual-tag { bottom: 8px; right: 0; border: 1px solid #00e3d1; border-radius: 24px; padding: 8px 14px; background: #003136c9; color: #85ffef; font-size: 10px; box-shadow: inset 0 1px 4px #00efd930; }
.visual-tag svg { width: 16px; height: 16px; }
.hero-bottom { min-height: 39px; padding: 9px 39px; border-color: #225673; background: #03203440; }
.hero-note { gap: 10px; font-size: 10px; color: #e0efff; }
.hero-note svg { width: 17px; height: 17px; color: #26e5ed; }
.hero-note-divider { color: #8bdaf7; margin: 0 12px; }
.workspace-meta .server-clock { border-radius: 0; gap: 12px; border-left: 1px solid #24435e; padding-left: 18px; }
.workspace-meta .server-clock-label, .workspace-meta .server-clock > svg { display: none; }
.workspace-meta .server-clock-time { font: 650 12px Inter, sans-serif; color: #fff; }
.workspace-meta .server-clock-date { color: #ccddee; font: 400 11px Inter, sans-serif; }
.dashboard-metrics { gap: 15px; margin-bottom: 20px; }
.dashboard-metrics .metric-card { --metric-color: #00cfff; display: grid; grid-template-columns: 47px minmax(0, 1fr); grid-template-rows: 19px 32px auto; column-gap: 16px; height: 108px; min-height: 108px; padding: 15px 18px; overflow: hidden; border: 1px solid #265c7b; border-radius: 13px; background: url('../arte/onda-tarjeta.svg') right bottom / 100% 110% no-repeat, radial-gradient(ellipse at 100% 100%, color-mix(in srgb, var(--metric-color) 22%, transparent), transparent 65%), linear-gradient(120deg, #0a2739, #051b2a); }
.dashboard-metrics .metric-card::after { inset: auto 0 0; height: 1px; background: linear-gradient(90deg, transparent, var(--metric-color)); opacity: 1; }
.dashboard-metrics .metric-card:nth-child(2) { --metric-color: #00e6c6; }
.dashboard-metrics .metric-card:nth-child(3) { --metric-color: #ffc95a; background-image: radial-gradient(ellipse at 100% 100%, #eac2674f, transparent 45%), linear-gradient(150deg, transparent 65%, #a47d2636 90%, #f6d3888c 100%), linear-gradient(120deg, #102838, #122433); }
.dashboard-metrics .metric-card:nth-child(4) { --metric-color: #b29bff; background-image: radial-gradient(ellipse at 100% 100%, #8272ed4f, transparent 45%), linear-gradient(150deg, transparent 65%, #6859c436 90%, #b8a8ff8c 100%), linear-gradient(120deg, #11263d, #16243e); }
.dashboard-metrics .metric-card:nth-child(5) { --metric-color: #8edbff; }
.dashboard-metrics .metric-top { display: contents; }
.dashboard-metrics .metric-label { grid-column: 2; grid-row: 1; align-self: start; font-size: 11px; color: #f3f8ff; }
.dashboard-metrics .metric-icon { grid-column: 1; grid-row: 1 / 3; align-self: start; width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, color-mix(in srgb, var(--metric-color) 19%, #081a29), #071c2a); box-shadow: inset 0 1px 4px #ffffff14; }
.dashboard-metrics .metric-icon svg { width: 23px; height: 23px; }
.dashboard-metrics .metric-value { grid-column: 2; grid-row: 2; margin: 0; font: 650 30px/1 Inter, sans-serif; letter-spacing: -.03em; }
.dashboard-metrics .metric-meta { grid-column: 2; grid-row: 3; margin: 1px 0 0; font-size: 9px; line-height: 1.4; color: #dfebf9; }
.dashboard-grid { grid-template-columns: minmax(0, 1fr) 355px; gap: 18px; }
.schedule-panel { padding: 20px 30px; }
.schedule-panel .page-header { margin-bottom: 14px !important; padding: 0; border: 0; }
.schedule-panel .page-kicker { font-size: 9px; margin-bottom: 6px; }
.schedule-panel .page-kicker::before { display: none; }
.schedule-panel .section-title { font-size: 21px; }
.schedule-panel .page-subtitle { font-size: 12px; margin-top: 3px; }
.schedule-panel .page-actions .btn { min-height: 34px; padding: 7px 13px; font-size: 11px; }
.schedule-panel .page-actions svg { width: 16px; height: 16px; flex-basis: 16px; }
.schedule-top { position: relative; margin-bottom: 14px; gap: 17px; }
.schedule-current { min-height: 76px; padding: 10px 16px 10px 72px; border: 1px solid #27566c; border-left: 5px solid #00d6cb; border-radius: 12px; background: linear-gradient(100deg, #004d548c, #05212b8c); }
.schedule-current::before { content: '✓'; inset: 18px auto auto 16px; display: grid; place-items: center; width: 35px; height: 35px; border: 1px solid #00bfb369; border-radius: 50%; background: #00a99c38; color: #8bffef; font-size: 22px; }
.schedule-current-k { color: #70fff0; font-size: 9px; font-weight: 700; letter-spacing: .1em; }
.schedule-current-v { margin-top: 3px; font: 650 15px/1.2 Inter, sans-serif; }
.schedule-current-meta { color: #cee5f2; font-size: 11px; margin-top: 4px; }
.schedule-tabs { padding: 2px; gap: 0; border: 1px solid #244e68; border-radius: 7px; background: #021421; }
.schedule-tab { min-height: 26px; min-width: 64px; padding: 4px 15px; border-radius: 5px; font-size: 11px; color: #e1ecfb; }
.schedule-tab.is-active { background: linear-gradient(135deg, #06cdff, #008ce2); border-color: #23e2ff; color: #fff; box-shadow: inset 0 1px 5px #a5f5ff6e, 0 0 9px #02c5ff50; }
.schedule-range { margin: -40px 0 23px; text-align: right; color: #d3e2f3; font-size: 11px; font-weight: 400; }
.schedule-board { overflow: visible; border: 0; border-radius: 0; background: transparent; }
.day-timeline { min-height: 0; padding: 0 5px; }
.timeline-track { position: relative; min-height: 54px; border: 1px solid #264259; border-radius: 6px 6px 0 0; }
.timeline-slots { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; overflow: hidden; border-radius: inherit; }
.timeline-slots > span { border-left: 1px solid #34537470; border-right: 1px solid #071421; background: repeating-linear-gradient(130deg, #17314d 0 3px, #10243a 3px 6px); }
.day-timeline .schedule-block { top: 5px; right: auto; min-width: 3px; min-height: 0; height: 32px; padding: 5px 6px; border: 1px solid var(--block-color); border-radius: 4px; background: color-mix(in srgb, var(--block-color) 38%, #032136); box-shadow: 0 3px 7px #0004; font-size: 10px; }
.timeline-now { position: absolute; top: -3px; bottom: 0; width: 1px; background: #00edff; box-shadow: 0 0 8px #00d9ff; }
.timeline-now::before { content: ''; position: absolute; top: -3px; left: -4px; width: 9px; height: 9px; border-radius: 50%; background: #03f1fa; box-shadow: 0 0 12px #00e6ff; }
.timeline-hours { display: flex; justify-content: space-between; margin: 5px -12px 0; color: #bad0ea; font-size: 10px; }
.week-grid, .month-grid { border: 1px solid #244459; border-radius: 8px; overflow: hidden; }
.dashboard-rail { gap: 16px; }
.dashboard-rail .content-panel { padding: 18px 26px; }
.panel-heading { gap: 12px; }
.panel-heading .section-title { font-size: 16px; }
.panel-icon { color: #54efff; }
.panel-icon svg { width: 23px; height: 23px; }
.network-count { margin: 16px 0; gap: 22px; }
.network-count strong { font: 650 48px/1 Inter, sans-serif; }
.network-count > span { color: #f0f6ff; font-size: 12px; line-height: 1.7; }
.network-track { height: 7px; background: #213e60; }
.network-legend { gap: 13px; margin: 10px 0 13px; }
.network-legend > span { color: #d6e4f5; font-size: 10px; }
.legend-dot { width: 7px; height: 7px; background: #00e2cf; }
.legend-dot.offline, .legend-dot.inactive { background: #789cc9; }
.panel-link { padding-top: 12px; font-size: 12px; font-weight: 600; color: #78efff; }
.panel-link svg { width: 17px; height: 17px; }
.quick-panel { margin: 0; }
.quick-summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; list-style: none; cursor: pointer; }
.quick-summary::-webkit-details-marker { display: none; }
.quick-summary > span:first-child { min-width: 0; }
.quick-summary .page-kicker { margin: 0 0 6px; font-size: 9px; }
.quick-summary .page-kicker::before { display: none; }
.quick-summary > span > span:last-child { color: #dae7f8; font-size: 11px; }
.quick-bolt { display: grid; place-items: center; flex-shrink: 0; width: 47px; height: 47px; border: 1px solid #1dcbe3; border-radius: 12px; background: linear-gradient(140deg, #08788b8a, #052839); box-shadow: inset 0 1px 6px #6beeff35; }
.quick-bolt svg { width: 25px; height: 25px; color: #fff; fill: #fff; }
.quick-links { margin-top: 16px; }
.rail-signature { display: none; }
/* Visores: compact three-column cards matching the reference, with live metrics. */
.visores-page { --visor-green: #00e5dc; --visor-amber: #ffca6b; }
body[data-section="visores"] .workspace-header { min-height: 42px; }
.visores-page > .page-header { min-height: 112px; padding: 16px 48px; margin: 0 0 12px; border-radius: 12px; }
.visores-page .page-title { font-size: 34px; }
.visores-page .page-kicker { font-size: 9px; margin-bottom: 6px; }
.visores-page .page-subtitle { font-size: 13px; margin-top: 5px; }
.visores-page .page-actions .btn { min-height: 40px; padding: 9px 17px; font-size: 12px; border-radius: 10px; }
.visores-summary { gap: 16px; margin-bottom: 14px; }
.visor-stat { position: relative; overflow: hidden; min-height: 80px; padding: 12px 22px; gap: 20px; border: 1px solid #1d698b; border-radius: 12px; background: url('../arte/onda-tarjeta.svg') right bottom / 100% 120% no-repeat, linear-gradient(120deg, #0b2b3c, #042135); }
.visor-stat.is-on { background-image: radial-gradient(ellipse at 100% 110%, #00dfbe55, transparent 55%), linear-gradient(153deg, transparent 65%, #00a89630 90%, #00efc36e 100%), linear-gradient(120deg, #092b3c, #042333); }
.visor-stat.is-off { background-image: radial-gradient(ellipse at 100% 110%, #e6bc6755, transparent 55%), linear-gradient(153deg, transparent 65%, #9c7d3730 90%, #eec479a6 100%), linear-gradient(120deg, #102d40, #142b3b); }
.visor-stat.is-inactive { background-image: radial-gradient(ellipse at 100% 110%, #8071ef55, transparent 55%), linear-gradient(153deg, transparent 65%, #6e5dbb30 90%, #ad9fffa6 100%), linear-gradient(120deg, #142b45, #1b2744); }
.visor-stat-icon, .visor-device-icon { width: 45px; height: 45px; border: 1px solid #1b6c8e; border-radius: 11px; background: linear-gradient(135deg, #06587b9c, #042437); color: #69f4ff; box-shadow: inset 0 2px 5px #a3efff16; }
.visor-stat-icon svg { width: 25px; height: 25px; }
.visor-stat.is-on .visor-stat-icon { background: linear-gradient(135deg, #005e5e9c, #03282c); color: #00f5e5; border-color: #008583; }
.visor-stat.is-off .visor-stat-icon { background: #75623d33; color: #ffce6a; border-color: #846a3a; }
.visor-stat.is-inactive .visor-stat-icon { background: linear-gradient(135deg, #343c759c, #172540); color: #bbc8ff; border-color: #5663a2; }
.visor-stat-label { font-size: 12px; color: #f3f7ff; }
.visor-stat strong { margin-top: 3px; font: 650 28px/1.1 Inter, sans-serif; }
.visores-page .visor-filters { grid-template-columns: minmax(0, 1.45fr) minmax(190px, 1fr) auto; gap: 28px; margin-bottom: 15px; padding: 10px 30px 15px; border-radius: 12px; background: linear-gradient(110deg, #0a3046b0, #031b2bce); }
.visores-page .form-label { font-size: 12px; margin-bottom: 4px; }
.visores-page .form-control, .visores-page .form-select { min-height: 35px; height: 35px; font-size: 12px; border-color: #2b637f; background-color: #001421c9; }
.visor-search > svg { top: 9px; left: 12px; width: 17px; height: 17px; }
.visor-search .form-control { padding-left: 36px; }
.visor-filter-actions { gap: 18px; }
.visores-page .visor-filter-actions .btn { min-height: 35px; font-size: 12px; padding: 6px 17px; }
.visores-collection-head { margin: 0 4px 14px; }
.visores-collection-head h2 { font-size: 21px; font-weight: 650; letter-spacing: -.02em; }
.visores-collection-head p { font-size: 12px; margin-top: 2px; color: #d2e0ef; }
.visores-collection-head .collection-count { padding: 6px 10px; font-size: 11px; }
.visores-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.visor-card { position: relative; display: grid; grid-template-columns: 62px minmax(0, 1fr); grid-template-rows: auto auto auto 1fr auto; column-gap: 12px; align-content: start; padding: 15px 24px; border: 1px solid #1c6381; border-top: 2px solid var(--connection-color); border-radius: 14px; background: url('../arte/onda-tarjeta.svg') top right / 100% 115px no-repeat, linear-gradient(140deg, #0c2b3bc9, #031b2ced); box-shadow: inset 0 15px 28px -25px var(--connection-color), 0 8px 16px #00000019; }
.visor-card:hover { border-color: #2189ad; border-top-color: var(--connection-color); box-shadow: inset 0 15px 28px -25px var(--connection-color), 0 8px 20px #0003; }
.visor-card.is-inactive { --connection-color: #aa9bef; }
.visor-card-top { display: contents; margin: 0; }
.visor-device-icon { grid-column: 1; grid-row: 1; width: 47px; height: 45px; }
.visor-device-icon svg { width: 27px; height: 27px; }
.visor-status { position: absolute; top: 20px; right: 21px; padding: 0; border: 0; background: transparent; }
.visor-status .status-dot { padding: 4px 8px; border: 1px solid #8c80624d; border-radius: 12px; background: #73552d3b; color: var(--connection-color); font-size: 10px; }
.visor-status .status-dot.is-on { background: #00746c4a; border-color: #00ae9e55; }
.visor-status .status-dot.is-alert { background: #6b5d9c3b; border-color: #a49bd044; }
.visor-status .status-dot::before { width: 6px; height: 6px; }
.visor-card-identity { display: grid; grid-column: 2; grid-row: 1; align-self: start; min-width: 0; }
.visor-id { padding-right: 75px; color: #c4e5ff; font-size: 9px; font-weight: 650; letter-spacing: .14em; line-height: 1.3; }
.visor-card-identity h3 { padding-right: 65px; margin: 5px 0 0; font: 650 20px/1.2 Inter, sans-serif; letter-spacing: -.02em; }
.visor-card-identity p { margin: 9px 0 0 -74px; font-size: 11px; color: #d6e4f2; overflow-wrap: anywhere; }
.visor-display-info { grid-column: 1 / -1; grid-row: 2; gap: 10px; margin: 10px 0 0; font-size: 11px; color: #d1e4f8; }
.visor-display-info svg { width: 16px; height: 16px; color: #d4edff; }
.visor-info-separator { margin: 0 6px; }
.visor-card-details { grid-column: 1 / -1; grid-row: 3; gap: 7px 18px; margin: 9px 0 11px; padding: 10px 3px 0; border-color: #25516b; }
.visor-card-details dt { gap: 9px; color: #c7daee; font-size: 10px; font-weight: 400; }
.visor-card-details dt svg { width: 16px; height: 16px; color: #c5e7ff; }
.visor-card-details dd { margin: 1px 0 0 25px; color: #f3f8ff; font-size: 11px; font-weight: 600; line-height: 1.4; }
.visor-health { grid-column: 1 / -1; grid-row: 4; align-self: start; margin: 0 0 9px; padding-top: 10px; border-color: #25516b; }
.visor-health-heading { gap: 5px; }
.visor-health-heading h4 { font-size: 10px; gap: 9px; }
.visor-health-heading h4 svg { width: 17px; height: 17px; color: #c4e4ff; }
.visor-health-alert { font-size: 9px; padding: 3px 5px; }
.visor-contact-age { margin: 4px 0 7px; font-size: 11px; color: #c5dfef; }
.visor-timeline { height: 36px; gap: 3px; }
.visor-timeline-bar { border-radius: 1px; background: repeating-linear-gradient(130deg, #254b69 0 2px, #18374e 2px 4px); border: 1px solid #31597966; }
.visor-timeline-bar::after { font-size: 11px; }
.visor-timeline-axis { margin-top: 4px; color: #c9d9e9; font-size: 9px; }
.visor-health-stats { margin: 10px 0; gap: 5px; }
.visor-health-stats dt { font-size: 10px; }
.visor-health-stats dd { margin-top: 3px; font-size: 16px; }
.visor-timeline-legend { gap: 14px; margin-top: 10px; color: #e1edf9; font-size: 9px; }
.visor-timeline-legend > span { gap: 6px; }
.visor-timeline-legend > span::before { width: 8px; height: 8px; }
.visor-health-help { margin-top: 7px; color: #d1e2f3; font-size: 9px; }
.visor-health-help p { font-size: 11px; }
.visor-card-actions { grid-column: 1 / -1; grid-row: 5; padding-top: 12px; gap: 10px; border-color: #25516b; }
.visores-page .visor-card-actions .btn { min-height: 34px; padding: 6px 12px; font-size: 11px; border-radius: 7px; }
.visor-card-actions form .btn { min-width: 35px; padding: 7px !important; }
.visor-card-actions .btn svg { width: 15px; height: 15px; flex-basis: 15px; }
.visores-empty { background: #052035; border-color: #2e7396; }
/* Shared form/login surfaces inherit the same palette. */
.auth-card { background: url('../arte/onda-azul.svg') bottom right / 100% 200px no-repeat, #082338de; border-color: #267394; }
.auth-brand > svg { width: 42px; height: 42px; color: #4ae9ff; }
.auth-story h1 { font-family: Inter, sans-serif; }
.auth-story h1 span { color: #4adfff; }
.auth-emblem { background: #006e8e35; border-color: #137b96; color: #56eeff; }
.topbar { background: #021726f2; border-color: #1b4d67; }
.topbar-brand > svg { width: 34px; height: 34px; padding: 5px; box-sizing: content-box; color: #64edff; border: 1px solid #1689ad; border-radius: 9px; background: #0643667d; }
/* Adaptation follows the same composition without forcing desktop widths. */
@media (min-width: 1500px) { :root { --sidebar: 294px; } .contenido { padding-right: 27px; padding-left: 30px; } }
@media (min-width: 992px) and (max-height: 820px) { .sidebar-shell { padding-top: 10px; padding-bottom: 14px; } .brand { min-height: 58px; } .workspace-label { margin-bottom: 15px; } .nav-link { min-height: 34px; padding-top: 6px; padding-bottom: 6px; } .nav-label { margin-top: 20px; } }
@media (max-width: 1450px) {
  .visores-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-grid { grid-template-columns: minmax(0, 1fr) 290px; }
  .dashboard-metrics { gap: 10px; }
  .dashboard-metrics .metric-card { column-gap: 9px; padding: 14px 12px; grid-template-columns: 36px minmax(0, 1fr); }
  .dashboard-metrics .metric-icon { width: 34px; height: 37px; }
  .dashboard-metrics .metric-meta { font-size: 8px; }
  .dashboard-hero .hero-head { padding-left: 32px; padding-right: 32px; grid-template-columns: minmax(0, 1.2fr) minmax(240px, 1fr); }
  .visor-stat { gap: 12px; padding: 12px 16px; }
  .visores-page .visor-filters { gap: 16px; padding-left: 20px; padding-right: 20px; }
  .visor-filter-actions { gap: 10px; }
  .main-shell > .page-header > .aviso-hero-art { right: 190px; width: 230px; opacity: .8; }
}
@media (max-width: 1190px) {
  .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
  .dashboard-rail { grid-template-columns: 1fr 1fr; align-items: start; }
  .dashboard-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .workspace-meta .server-clock { display: none; }
  .visores-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .visores-page .visor-filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .visor-filter-actions { grid-column: 1 / -1; }
  .main-shell > .page-header > .aviso-hero-art { display: none; }
  body[data-section="avisos"] .main-shell > .page-header > div:first-child { max-width: 65%; }
  .main-shell > .page-header { padding-left: 30px; padding-right: 30px; }
  .page-title { font-size: 36px; }
}
@media (max-width: 991.98px) {
  .sidebar-shell { padding: 14px 18px 20px; }
  .sidebar { width: 280px; }
  .sidebar-close { display: grid; }
  .workspace-collapse { display: none; }
  .contenido { margin-left: 0; padding: 0 20px 28px; }
  .workspace-header { min-height: 55px; }
  .sidebar-collapsed .desktop-menu-toggle { display: none; }
  .workspace-breadcrumb { font-size: 11px; gap: 11px; }
  .topbar-title strong { font-family: Inter, sans-serif; font-size: 17px; }
  .topbar-title > span { color: #b6d8f7; font-size: 9px; }
  .visores-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .visor-card { padding-left: 18px; padding-right: 18px; }
  .visor-status { right: 16px; }
  .visor-card-identity h3 { font-size: 19px; }
  .visor-stat { padding: 14px 20px; }
}
@media (max-width: 760px) {
  .workspace-product { display: none; }
  .dashboard-hero .hero-head { grid-template-columns: 1fr; min-height: 0; padding: 30px 26px; }
  .dashboard-hero .hero-title { font-size: clamp(28px, 5.5vw, 38px); }
  .hero-visual { display: none; }
  .hero-bottom { padding: 12px 22px; }
  .dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .dashboard-metrics .metric-card { min-height: 110px; padding: 15px; grid-template-columns: 39px minmax(0, 1fr); column-gap: 12px; }
  .dashboard-metrics .metric-card:last-child { grid-column: auto; min-height: 110px; }
  .dashboard-metrics .metric-meta { font-size: 9px; }
  .dashboard-rail { grid-template-columns: 1fr; }
  .schedule-panel { padding: 22px; }
  .schedule-panel .page-header { gap: 12px; }
  .schedule-panel .page-actions { width: auto; }
  .schedule-panel .section-title { font-size: 18px; }
  .schedule-range { margin: 0 0 13px; text-align: left; }
  .schedule-top { margin-bottom: 10px; }
  .timeline-hours { font-size: 8px; margin-left: -6px; margin-right: -6px; }
  .timeline-hours span:nth-child(2n) { visibility: hidden; }
  .visores-grid { grid-template-columns: minmax(0, 1fr); }
  .visores-page > .page-header { min-height: 155px; padding: 23px; }
  .visores-page .page-title { font-size: 31px; }
  .visor-stat { padding: 13px 12px; gap: 12px; }
  .visor-stat-icon { width: 36px; height: 39px; }
  .visor-stat-icon svg { width: 23px; height: 23px; }
  .visor-stat-label { font-size: 11px; }
  .visor-stat strong { font-size: 26px; }
  .visores-page .visor-filters { grid-template-columns: minmax(0, 1fr); padding: 17px 20px; gap: 14px; }
  .visores-page .form-control, .visores-page .form-select { min-height: 42px; height: 42px; font-size: 13px; }
  .visor-search > svg { top: 12px; }
  .visores-page .visor-filter-actions .btn { min-height: 39px; }
  .visores-collection-head h2 { font-size: 20px; }
  .visores-collection-head p { font-size: 11px; }
  .visor-card { padding: 18px 22px; }
  .visor-card-details dt { font-size: 11px; }
  .visor-card-details dd { font-size: 12px; }
  .visor-card-identity h3 { font-size: 22px; }
  .visor-health-heading h4 { font-size: 11px; }
  .visor-timeline { height: 42px; }
  .visor-timeline-legend, .visor-health-help { font-size: 10px; }
  .visores-page .visor-card-actions .btn { min-height: 38px; font-size: 12px; }
  .visor-status { right: 19px; }
}
@media (max-width: 580px) {
  .contenido { padding: 0 14px 24px; }
  .workspace-header { min-height: 50px; }
  .workspace-breadcrumb { gap: 8px; font-size: 10px; }
  .main-shell > .page-header { padding: 25px; min-height: 170px; gap: 18px; margin-bottom: 18px; }
  .main-shell > .page-header, .visores-page > .page-header { background-size: auto 100%; background-position: 65% center; }
  .page-title { font-size: 34px; }
  .page-subtitle { font-size: 13px; }
  .page-actions .btn { width: auto; }
  .main-shell > .page-header .page-actions .btn { min-height: 41px; font-size: 13px; padding: 9px 16px; }
  body[data-section="avisos"] .main-shell > .page-header { padding: 25px; }
  body[data-section="avisos"] .main-shell > .page-header > div:first-child { max-width: 100%; }
  .collection-head { padding: 4px 0 14px; gap: 10px; }
  .collection-head > span:first-child { font-size: 15px; gap: 9px; }
  .collection-head > span:first-child > svg { width: 18px; height: 18px; padding: 7px; }
  .collection-count { font-size: 10px; padding: 5px 8px; }
  .table-shell { padding: 12px; }
  .table.tabla-moderna tbody td { font-size: 12px; }
  .content-panel, .form-panel { padding: 20px; }
  .visor-card-details { column-gap: 9px; }
  .visor-card-details dd { margin-left: 0; }
  .visor-card-identity h3 { font-size: 20px; }
  .dashboard-metrics .metric-card { gap: 0 10px; padding: 14px 12px; grid-template-columns: 30px minmax(0, 1fr); }
  .dashboard-metrics .metric-icon { width: 30px; height: 35px; }
  .dashboard-metrics .metric-icon svg { width: 19px; height: 19px; }
  .dashboard-metrics .metric-label { font-size: 10px; }
  .dashboard-metrics .metric-value { font-size: 26px; }
  .dashboard-metrics .metric-meta { grid-column: 1 / -1; margin-top: 8px; }
  .hero-note { flex-wrap: wrap; gap: 7px; }
  .hero-note-divider { margin: 0 4px; }
}
@media print { .workspace-header, .sidebar, .topbar { display: none; } .contenido { margin: 0; } .visor-card { break-inside: avoid; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* Provisional AdsPro identity: original concept at sign-in, vector mark at UI sizes. */
.brand .brand-logo { width: 54px; height: 54px; border: 0; border-radius: 0; background: none; box-shadow: none; }
.brand .brand-logo .adspro-symbol, .topbar-brand > .adspro-symbol { display: block; width: 54px; height: 54px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; object-fit: contain; }
.brand { gap: 10px; }
.adspro-wordmark { font-family: Inter, sans-serif; font-weight: 750; letter-spacing: -.035em; white-space: nowrap; }
.adspro-wordmark > span { color: #17e4d9; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; }
.brand-copy .adspro-wordmark { font-size: 26px; letter-spacing: -.035em; }
.brand-copy > span { font-size: 8px; letter-spacing: .18em; }
.topbar-title .adspro-wordmark { font-size: 22px; letter-spacing: -.035em; }
.topbar-brand > .adspro-symbol { width: 43px; height: 43px; }
.auth-brand.adspro-login-brand { display: block; width: 270px; margin: 0 0 28px -10px; }
.adspro-concept-window { position: relative; width: 270px; height: 210px; overflow: hidden; }
.adspro-login-brand .adspro-concept-window img { position: absolute; top: -50px; left: -25px; display: block; width: 320px; height: 320px; max-width: none; object-fit: contain; }
.auth-brand.adspro-login-brand > span { display: block; padding: 0; border: 0; margin: 0; text-align: center; font-size: 10px; font-weight: 650; color: #b8d9eb; letter-spacing: .23em; text-transform: uppercase; }
@media (max-width: 680px) { .auth-brand.adspro-login-brand { margin: 0 auto 24px; } }