/* * VOSemáforo Flask — vo_v37.css * Reemplaza flask_phase4.css + estilos.css * Temas: dark (por defecto) / light (azul marino #00308F) * El tema se aplica con el atributo data-theme="dark|light" en */ /* ── Variables de tema ──────────────────────────────────────────────────────── */ :root, [data-theme="dark"] { --vo-bg: #0f1117; --vo-surface: #1a1d27; --vo-surface2: #22263a; --vo-surface3: #2a2f45; --vo-accent: #3b6fd4; --vo-accent-hover: #5485e0; --vo-accent-rgb: 59,111,212; --vo-gold: #f59e0b; --vo-gold-dim: rgba(245,158,11,.15); --vo-green: #22c55e; --vo-red: #ef4444; --vo-amber: #f59e0b; --vo-text: #e2e8f0; --vo-muted: #8892a4; --vo-hint: #555e72; --vo-border: rgba(255,255,255,.08); --vo-border2: rgba(255,255,255,.14); --vo-header-bg: #131620; --vo-card: #1a1d27; --vo-input-bg: #22263a; --vo-input-border: rgba(255,255,255,.10); --vo-badge-ok-bg: rgba(34,197,94,.14); --vo-badge-ok-txt: #86efac; --vo-badge-info-bg: rgba(59,111,212,.18); --vo-badge-info-txt:#93c5fd; --vo-badge-warn-bg: rgba(245,158,11,.14); --vo-badge-warn-txt:#fcd34d; --vo-badge-err-bg: rgba(239,68,68,.14); --vo-badge-err-txt: #fca5a5; --vo-flash-ok: #dcfce7; --vo-flash-ok-txt: #166534; --vo-flash-warn: #1a1400; --vo-flash-warn-txt: #fcd34d; --vo-flash-danger: #1a0404; --vo-flash-danger-txt:#fca5a5; --vo-flash-info: #0c1a3a; --vo-flash-info-txt: #93c5fd; --vo-nav-text: rgba(255,255,255,.55); --vo-nav-active: #ffffff; --vo-nav-active-bar:var(--vo-gold); --vo-nav-hover-bg: rgba(255,255,255,.07); --vo-page-title: #93c5fd; /* azul claro, contrasta en oscuro */ --vo-radius: 10px; --vo-radius-lg: 14px; --vo-shadow: 0 4px 20px rgba(0,0,0,.35); } [data-theme="light"] { --vo-bg: #eef1f8; --vo-surface: #ffffff; --vo-surface2: #e8edf8; --vo-surface3: #dde3f4; --vo-accent: #00308F; --vo-accent-hover: #003fba; --vo-accent-rgb: 0,48,143; --vo-gold: #b45309; --vo-gold-dim: rgba(180,83,9,.10); --vo-green: #16a34a; --vo-red: #dc2626; --vo-amber: #b45309; --vo-text: #111827; --vo-muted: #4a5280; --vo-hint: #9099c0; --vo-border: rgba(0,48,143,.10); --vo-border2: rgba(0,48,143,.20); --vo-header-bg: #00308F; --vo-card: #ffffff; --vo-input-bg: #f4f6fc; --vo-input-border: rgba(0,48,143,.18); --vo-badge-ok-bg: #dcfce7; --vo-badge-ok-txt: #15803d; --vo-badge-info-bg: #dbeafe; --vo-badge-info-txt: #1d4ed8; --vo-badge-warn-bg: #fef9c3; --vo-badge-warn-txt: #92400e; --vo-badge-err-bg: #fee2e2; --vo-badge-err-txt: #991b1b; --vo-flash-ok: #dcfce7; --vo-flash-ok-txt: #166534; --vo-flash-warn: #fef3c7; --vo-flash-warn-txt: #92400e; --vo-flash-danger: #fee2e2; --vo-flash-danger-txt:#991b1b; --vo-flash-info: #dbeafe; --vo-flash-info-txt: #1d4ed8; --vo-nav-text: rgba(255,255,255,.65); --vo-nav-active: #ffffff; --vo-nav-active-bar:#f0c040; --vo-nav-hover-bg: rgba(255,255,255,.12); --vo-page-title: #00308F; /* azul marino, contrasta en claro */ --vo-shadow: 0 4px 20px rgba(0,48,143,.10); } /* ── Reset y base ───────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body.vo-body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; font-size: 14px; line-height: 1.6; background: var(--vo-bg); color: var(--vo-text); transition: background .25s, color .25s; } body.vo-body.app-shell { padding-top: 108px; } @media (max-width: 820px) { body.vo-body.app-shell { padding-top: 148px; } } /* ── Header ─────────────────────────────────────────────────────────────────── */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: var(--vo-header-bg); border-bottom: 1px solid rgba(255,255,255,.10); box-shadow: 0 2px 12px rgba(0,0,0,.25); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; padding: 8px 20px; gap: 12px; } /* ── Brand / logo ───────────────────────────────────────────────────────────── */ .brand-link { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; } .brand-logo { /* Logo SVG: más ancho en el header — ~36×54px visual */ height: 46px; width: auto; display: block; filter: drop-shadow(0 1px 3px rgba(0,0,0,.4)); transition: transform .15s; } .brand-logo:hover { transform: scale(1.05); } .brand-text { display: flex; flex-direction: column; } .brand-name { font-size: 17px; font-weight: 700; color: #ffffff; letter-spacing: -.01em; } .brand-sub { font-size: 11px; color: rgba(255,255,255,.55); margin-top: 1px; } /* ── User area (derecha del header) ─────────────────────────────────────────── */ .header-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .cruce-tag { background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25); border-radius: 14px; padding: 3px 11px; font-size: 12px; font-weight: 600; color: #fff; } .user-tag { font-size: 12px; color: rgba(255,255,255,.70); } .user-tag strong { color: #fff; } /* ── Theme toggle ───────────────────────────────────────────────────────────── */ .theme-toggle { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18); border-radius: 18px; padding: 3px 9px 3px 6px; cursor: pointer; user-select: none; transition: background .2s; } .theme-toggle:hover { background: rgba(255,255,255,.17); } .toggle-track { width: 30px; height: 16px; border-radius: 8px; background: rgba(255,255,255,.25); position: relative; transition: background .2s; flex-shrink: 0; } .toggle-track.on { background: var(--vo-gold); } .toggle-knob { width: 12px; height: 12px; border-radius: 50%; background: #fff; position: absolute; top: 2px; left: 2px; transition: left .18s; box-shadow: 0 1px 3px rgba(0,0,0,.3); } .toggle-track.on .toggle-knob { left: 16px; } .toggle-label { font-size: 11px; color: rgba(255,255,255,.75); min-width: 32px; } .logout-link { background: transparent; border: 1px solid rgba(255,255,255,.22); border-radius: 6px; padding: 4px 11px; font-size: 12px; font-weight: 500; color: rgba(255,255,255,.80); text-decoration: none; cursor: pointer; transition: background .15s; } .logout-link:hover { background: rgba(255,255,255,.12); color: #fff; } /* ── Nav ────────────────────────────────────────────────────────────────────── */ .main-nav { border-top: 1px solid rgba(255,255,255,.08); overflow-x: auto; -webkit-overflow-scrolling: touch; } .main-nav::-webkit-scrollbar { height: 0; } .main-nav__list { display: flex; list-style: none; padding: 0 16px; gap: 0; margin: 0; flex-wrap: nowrap; } .main-nav__list .menu-item a { display: block; padding: 8px 13px; font-size: 13px; color: var(--vo-nav-text); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; transition: color .15s, background .15s; border-radius: 4px 4px 0 0; } .main-nav__list .menu-item a:hover { color: var(--vo-nav-active); background: var(--vo-nav-hover-bg); } .main-nav__list .menu-item.active a { color: var(--vo-nav-active); border-bottom-color: var(--vo-nav-active-bar); } /* ── Page wrap ──────────────────────────────────────────────────────────────── */ .page-wrap { padding: 24px 0 40px; min-height: calc(100vh - 108px); } .page-wrap.with-header { padding-top: 12px; } /* ── Flash messages ─────────────────────────────────────────────────────────── */ .flash-stack { width: min(1100px, 92vw); margin: 0 auto 16px; position: relative; z-index: 10; } .flash { padding: 11px 16px; border-radius: var(--vo-radius); margin-bottom: 8px; font-size: 13px; border-left: 3px solid transparent; } .flash.success, .flash.ok { background: var(--vo-flash-ok); color: var(--vo-flash-ok-txt); border-left-color: var(--vo-green); } .flash.warning { background: var(--vo-flash-warn); color: var(--vo-flash-warn-txt); border-left-color: var(--vo-amber); } .flash.danger, .flash.error { background: var(--vo-flash-danger); color: var(--vo-flash-danger-txt); border-left-color: var(--vo-red); } .flash.info { background: var(--vo-flash-info); color: var(--vo-flash-info-txt); border-left-color: var(--vo-accent); } /* ── Page card (contenedor principal de cada página) ──────────────────────── */ .legacy-page-card { font-family: inherit; background: var(--vo-card); border: 1px solid var(--vo-border); border-radius: var(--vo-radius-lg); box-shadow: var(--vo-shadow); margin: 0 auto; width: min(1100px, 92vw); padding: 0 0 24px; transition: background .25s; } /* ── Títulos de página ─────────────────────────────────────────────────────── */ .milky, .Titulo { font-size: 22px; font-weight: 700; /* Neutral, legible en ambos temas — sin verde ni sombra legacy */ color: var(--vo-page-title); padding: 20px 24px 16px; border-bottom: 1px solid var(--vo-border); margin: 0 0 20px; display: flex; align-items: center; gap: 10px; letter-spacing: -0.01em; } .Titulo.small-title { font-size: 18px; } /* ── Login ──────────────────────────────────────────────────────────────────── */ .login-panel { background: var(--vo-card); border: 1px solid var(--vo-border); border-radius: var(--vo-radius-lg); box-shadow: var(--vo-shadow); width: min(360px, 92vw); margin: 8vh auto 0; padding: 32px 30px; } .login-logo-wrap { text-align: center; margin-bottom: 24px; } .login-logo-wrap img, .login-logo-wrap svg { height: 72px; width: auto; display: inline-block; } .login-title-text { font-size: 20px; font-weight: 700; margin-top: 12px; color: var(--vo-text); } .login-sub-text { font-size: 12px; color: var(--vo-muted); margin-top: 4px; } /* ── Formularios generales ─────────────────────────────────────────────────── */ .field-block { margin-bottom: 16px; } .field-block label, .login-panel label { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--vo-muted); margin-bottom: 5px; } .field-block input[type="text"], .field-block input[type="number"], .field-block input[type="password"], .field-block textarea, .field-block select, .login-panel input[type="text"], .login-panel input[type="password"], .legacy-form select { width: 100%; padding: 9px 12px; background: var(--vo-input-bg); border: 1px solid var(--vo-input-border); border-radius: 7px; color: var(--vo-text); font-size: 14px; font-family: inherit; transition: border-color .15s, box-shadow .15s; } .field-block input:focus, .field-block textarea:focus, .field-block select:focus, .login-panel input:focus { outline: none; border-color: var(--vo-accent); box-shadow: 0 0 0 3px rgba(var(--vo-accent-rgb),.15); } .field-block textarea { min-height: 110px; resize: vertical; } /* ── Botones ───────────────────────────────────────────────────────────────── */ .legacy-btn, .login-panel input[type="submit"], button.legacy-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 20px; background: var(--vo-accent); border: none; border-radius: 7px; color: #ffffff; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; text-decoration: none; transition: background .15s, transform .1s; } .legacy-btn:hover, .login-panel input[type="submit"]:hover { background: var(--vo-accent-hover); } .legacy-btn:active { transform: scale(.97); } .legacy-btn.secondary { background: var(--vo-surface2); color: var(--vo-text); border: 1px solid var(--vo-border2); } .legacy-btn.secondary:hover { background: var(--vo-surface3); } .legacy-btn.danger { background: var(--vo-red); } .legacy-btn.danger:hover { background: #b91c1c; } .login-panel input[type="submit"] { width: 100%; font-size: 14px; padding: 11px; margin-top: 8px; border-radius: 8px; } .actions-row { display: flex; gap: 10px; flex-wrap: wrap; padding: 0 20px; } /* ── Tablas ────────────────────────────────────────────────────────────────── */ .legacy-table { width: 90%; margin: 0 auto; border-collapse: collapse; font-size: 13px; } .legacy-table th, .legacy-table td { padding: 9px 12px; text-align: left; border: 1px solid var(--vo-border2); } .legacy-table th { background: var(--vo-accent); color: #fff; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; } .legacy-table tr:nth-child(even) { background: var(--vo-surface2); } .legacy-table tr:hover td { background: var(--vo-surface3); } /* ── Badges / etiquetas ────────────────────────────────────────────────────── */ .badge { display: inline-block; padding: 2px 9px; border-radius: 5px; font-size: 11px; font-weight: 600; } .badge-ok { background: var(--vo-badge-ok-bg); color: var(--vo-badge-ok-txt); } .badge-info { background: var(--vo-badge-info-bg); color: var(--vo-badge-info-txt); } .badge-warn { background: var(--vo-badge-warn-bg); color: var(--vo-badge-warn-txt); } .badge-error { background: var(--vo-badge-err-bg); color: var(--vo-badge-err-txt); } /* ── Cards de métricas ─────────────────────────────────────────────────────── */ .metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; padding: 0 20px; margin-bottom: 20px; } .metric-card { background: var(--vo-surface2); border: 1px solid var(--vo-border); border-radius: var(--vo-radius); padding: 14px 16px; } .metric-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--vo-muted); margin-bottom: 5px; } .metric-value { font-size: 24px; font-weight: 700; color: var(--vo-text); } .metric-value.accent { color: var(--vo-accent); } .metric-value.green { color: var(--vo-green); } .metric-value.gold { color: var(--vo-gold); } .metric-sub { font-size: 11px; color: var(--vo-hint); margin-top: 3px; } /* ── Grids de paneles ──────────────────────────────────────────────────────── */ .command-grid, .diagram-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; width: 90%; margin: 0 auto; } .command-tile, .diagram-panel { background: var(--vo-surface2); border: 1px solid var(--vo-border); border-radius: var(--vo-radius); padding: 16px; } .panel-title { font-size: 14px; font-weight: 600; margin: 0 0 12px; color: var(--vo-text); } /* ── Code / pre ────────────────────────────────────────────────────────────── */ .code-box, .code-block { background: var(--vo-surface2); border: 1px solid var(--vo-border2); border-radius: 7px; padding: 12px 14px; font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 12px; white-space: pre-wrap; word-break: break-word; overflow: auto; color: var(--vo-text); } .tall-box { min-height: 300px; } /* ── Field columns ─────────────────────────────────────────────────────────── */ .field-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; width: 90%; margin: 0 auto; } .inline-form-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .wide-box { width: 90%; margin: 0 auto 12px; display: block; } /* ── Índice de cruces ──────────────────────────────────────────────────────── */ .idx-layout { display: grid; gap: 16px; } .idx-card { background: var(--vo-card); border: 1px solid var(--vo-border); border-radius: var(--vo-radius); padding: 18px 20px; margin: 0 20px; } .idx-card h3 { font-size: 14px; font-weight: 600; color: var(--vo-text); margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--vo-border); } .idx-toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; } .idx-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 15px; border: none; border-radius: 7px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s; } .idx-btn-primary { background: var(--vo-accent); color: #fff; } .idx-btn-primary:hover { background: var(--vo-accent-hover); } .idx-btn-danger { background: var(--vo-red); color: #fff; } .idx-btn-danger:hover { background: #b91c1c; } .idx-btn-blue { background: var(--vo-accent); color: #fff; } .idx-table { width: 100%; border-collapse: collapse; } .idx-table th, .idx-table td { border: 1px solid var(--vo-border); padding: 10px 13px; text-align: left; font-size: 13px; } .idx-table th { background: var(--vo-accent); color: #fff; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; } .idx-table tr:nth-child(even) { background: var(--vo-surface2); } .idx-table tr:hover td { background: var(--vo-surface3); } .idx-open-btn { background: var(--vo-accent); color: #fff; border: none; border-radius: 6px; padding: 5px 13px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; } .idx-open-btn:hover { background: var(--vo-accent-hover); } .idx-del-btn { background: transparent; color: var(--vo-red); border: 1px solid var(--vo-red); border-radius: 6px; padding: 5px 11px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; } .idx-del-btn:hover { background: var(--vo-red); color: #fff; } .idx-badge { display: inline-block; padding: 2px 9px; border-radius: 5px; font-size: 11px; font-weight: 600; background: var(--vo-badge-ok-bg); color: var(--vo-badge-ok-txt); } .idx-action-row { display: flex; gap: 8px; flex-wrap: wrap; } .exp-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 13px; border-radius: 7px; text-decoration: none; font-size: 12px; font-weight: 600; background: var(--vo-surface2); color: var(--vo-text); border: 1px solid var(--vo-border2); transition: background .15s; } .exp-btn:hover { background: var(--vo-surface3); } .new-cruce-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 4px; } .new-cruce-form input { border: 1px solid var(--vo-input-border); border-radius: 7px; padding: 8px 11px; font: inherit; font-size: 13px; min-width: 200px; background: var(--vo-input-bg); color: var(--vo-text); } .cfg-row { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 8px 0; border-bottom: 1px solid var(--vo-border); } .cfg-row:last-child { border-bottom: none; } .cfg-key { font-weight: 600; color: var(--vo-text); min-width: 240px; } .cfg-val { font-family: monospace; background: var(--vo-surface2); padding: 2px 8px; border-radius: 5px; color: var(--vo-muted); } /* ── login-side-note (mensajes bajo el login) ──────────────────────────────── */ .login-side-note { font-size: 12px; color: var(--vo-muted); text-align: center; margin-top: 16px; } .legacy-intro { font-size: 14px; color: var(--vo-muted); padding: 0 20px 12px; } /* ── Responsive ────────────────────────────────────────────────────────────── */ @media (max-width: 1100px) { .legacy-page-card { width: 96vw; } } @media (max-width: 820px) { .site-header__inner { padding: 8px 12px; } .brand-sub { display: none; } .field-columns { grid-template-columns: 1fr; } .command-grid, .diagram-grid { grid-template-columns: 1fr; } .main-nav__list { flex-wrap: nowrap; } .idx-card { margin: 0 10px; } .milky, .Titulo { font-size: 18px; padding: 16px 14px 12px; } } @media (max-width: 480px) { .header-right .user-tag { display: none; } .brand-name { font-size: 15px; } }