/* Cronos: lo que no viene del lienzo (carga, acceso, aviso de guardado). Mismos colores del lienzo. */
html, body { margin: 0; background: #2B2B2B; }
#app > div > .rp { min-height: 100vh !important; }
.cx-load { min-height: 100vh; display: flex; align-items: center; justify-content: center; color: #B3B3B3; font: 14px 'IBM Plex Sans', sans-serif; background: #2B2B2B; }
.cx-gate { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; background: #2B2B2B; font-family: 'IBM Plex Sans', sans-serif; color: #FFFFFF; }
.cx-card { width: 100%; max-width: 400px; background: #3C3C3C; border: 1px solid #4D4D4D; border-radius: 12px; padding: 28px; display: flex; flex-direction: column; gap: 14px; box-sizing: border-box; }
.cx-card h1 { margin: 0; font-size: 20px; font-weight: 600; }
.cx-card p { margin: 0; color: #B3B3B3; font-size: 14px; line-height: 1.45; }
.cx-logo { font-weight: 600; font-size: 26px; }
.cx-logo span { color: #FF9800; }
.cx-sub { color: #B3B3B3; font-size: 13px; margin-top: -8px; }
.cx-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 8px; border: 1px solid #FF9800; background: #FF9800; color: #1F1300; font: 600 14px 'IBM Plex Sans', sans-serif; text-decoration: none; cursor: pointer; padding: 10px 16px; }
.cx-btn.gh { background: transparent; border-color: #555555; color: #FFFFFF; font-weight: 400; }
.cx-btn:disabled { opacity: .5; cursor: wait; }
.cx-lbl { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: #B3B3B3; }
.cx-inp { background: #262626; color: #FFFFFF; border: 1px solid #555555; border-radius: 8px; padding: 10px 12px; font: 14px 'IBM Plex Sans', sans-serif; min-height: 44px; box-sizing: border-box; width: 100%; color-scheme: dark; }
.cx-inp:focus { outline: none; border-color: #12B3F5; }
.cx-tabs { display: flex; border-bottom: 1px solid #4D4D4D; }
.cx-tab { flex: 1; background: none; border: 0; border-bottom: 2px solid transparent; color: #B3B3B3; padding: 10px; font: 14px 'IBM Plex Sans', sans-serif; cursor: pointer; min-height: 44px; }
.cx-tab.on { color: #FFFFFF; border-bottom-color: #FF9800; font-weight: 600; }
.cx-msg { border-radius: 10px; padding: 12px 14px; font-size: 13px; }
.cx-msg.err { background: #2E1A1A; border: 1px solid #7A3B36; color: #F8C1BB; }
.cx-msg.ok { background: #1C3324; border: 1px solid #2F6B45; color: #BFEFCB; }
.cx-msg.info { background: #1A2C3A; border: 1px solid #2A5373; color: #D6ECFA; }
#cx-sync { position: fixed; bottom: 16px; right: 16px; z-index: 50; display: none; border-radius: 8px; padding: 8px 12px; font: 13px 'IBM Plex Sans', sans-serif; background: #1A2C3A; border: 1px solid #2A5373; color: #D6ECFA; box-shadow: 0 6px 20px rgba(0,0,0,.5); max-width: calc(100% - 32px); }
#cx-sync.ok { background: #1C3324; border-color: #2F6B45; color: #BFEFCB; }
#cx-sync.err { background: #2E1A1A; border-color: #7A3B36; color: #F8C1BB; }
@media print { #cx-sync { display: none !important; } }