/* Cronos: lo que no viene del lienzo (carga, acceso, aviso de guardado). Mismos colores del lienzo. */
html, body { margin: 0; background: #262626; }
#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: #262626; }
.cx-gate { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; background: #262626; font-family: 'IBM Plex Sans', sans-serif; color: #FFFFFF; }
.cx-card { width: 100%; max-width: 400px; background: #404040; 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 es SOLO el logo de Cronos (Entrar, permiso de Claude, avisos). No reusar este nombre: lo revisa test/tanda46.js */
.cx-logo { display: block; width: 150px; height: auto; }
.cx-logo.full { width: 246px; max-width: 100%; align-self: center; margin: 4px 0 6px; }
.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-pw { position: relative; display: block; }
.cx-pw .cx-inp { padding-right: 48px; }
.cx-ojo { position: absolute; top: 0; right: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: none; border: 0; color: #B3B3B3; cursor: pointer; border-radius: 8px; }
.cx-ojo:hover { color: #FFFFFF; }
.cx-ojo:focus-visible { outline: 2px solid #12B3F5; outline-offset: -2px; }
.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; } #app > div > .rp { min-height: 0 !important; } }
/* panel del dueño: lo que no se cambia ahí (nombre de la franquicia, gerente) se ve apagado */
.cx-dueno input:disabled { opacity: .6; cursor: not-allowed; }
/* panel del dueño y de plataforma en pantalla angosta: el menú arranca en íconos y, abierto, va encima de la información */
@media (max-width: 999px) {
  nav[aria-label="Panel maestro"], nav[aria-label="Panel de plataforma"] { position: fixed !important; top: 0; left: 0; bottom: 0; z-index: 40; max-width: 86vw !important; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #6A6A6A #505050; box-shadow: 8px 0 32px rgba(0,0,0,.6); }
  main[style*="999 1 560px"] { flex-basis: 260px !important; padding: 20px 16px !important; }
}
/* renglones de dos tonos en todas las tablas */
tbody tr:nth-child(even) { background-color: rgba(255,255,255,.085); }
tbody tr:hover { background-color: rgba(255,255,255,.14); }
/* barra de arriba: franquicia, avisos, panel del dueño, usuario y salir */
.cx-top { position: sticky; top: 0; z-index: 15; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  margin: -32px -32px 24px; padding: 8px 32px; min-height: 60px; box-sizing: border-box; background: #36414B; border-bottom: 3px solid #2A333B; }
.cx-top .btn { display: inline-flex; align-items: center; justify-content: center; background: transparent; color: #FFFFFF; border: 1px solid #555555; border-radius: 8px; padding: 6px 10px; min-height: 36px; font: 13px 'IBM Plex Sans', sans-serif; cursor: pointer; text-decoration: none; white-space: nowrap; }
.cx-top .btn:hover { background: #45515C; color: #FFFFFF; }
.cx-top .btn { border-color: #6A6A6A; }
.cx-top .xs { font-size: 12px; } .cx-top .mu { color: #B3B3B3; }
.cx-top-l, .cx-top-r { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.cx-top-fr { display: flex; align-items: center; gap: 8px; }
.cx-top-fr select { min-height: 36px; padding: 6px 8px; font-size: 13px; min-width: 140px; }
.cx-top-b { position: relative; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: #8A8A8A; }
button.cx-top-b { cursor: pointer; color: #FFFFFF; }
.cx-top-b.on { color: #FF9800; }
.cx-top-n { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #E53935; color: #FFFFFF; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; }
.cx-top-u { display: flex; align-items: center; gap: 10px; background: none; border: 0; border-radius: 10px; padding: 4px 6px; color: #FFFFFF; font: inherit; cursor: pointer; text-align: right; }
.cx-top-u:hover { background: #45515C; }
.cx-top-ut { display: flex; flex-direction: column; line-height: 1.25; }
.cx-av { flex: none; width: 38px; height: 38px; border-radius: 50%; background: #FFFFFF; color: #262626; display: flex; align-items: center; justify-content: center; font: 600 16px 'IBM Plex Sans', sans-serif; }
.cx-dd { position: relative; }
.cx-sop, .cx-pag { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 18px; border-radius: 10px; font: 15px 'IBM Plex Sans', sans-serif; cursor: pointer; white-space: nowrap; }
.cx-sop { background: #FFFFFF; color: #3C3C3C; border: 1px solid #D9D9D9; }
.cx-pag { background: #F4E026; color: #262626; border: 1px solid #F4E026; font-weight: 600; }
.cx-sop:hover { background: #F0F0F0; } .cx-pag:hover { background: #E3CF14; }
.cx-bk { position: fixed; inset: 0; z-index: 30; }
.cx-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 31; width: 280px; max-width: calc(100vw - 32px); box-sizing: border-box; background: #404040; border: 1px solid #5A5A5A; border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 6px; color: #FFFFFF; font-size: 14px; box-shadow: 0 12px 32px rgba(0,0,0,.55); }
.cx-menu { padding: 6px; gap: 0; width: 240px; }
/* campanita: avisos de la bodega */
.cx-avp { width: 340px; gap: 10px; }
.cx-avh { font-weight: 600; font-size: 15px; }
.cx-avi { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; overflow-wrap: anywhere; }
.cx-avi > .pill { flex: none; }
.cx-avl { cursor: pointer; border-radius: 6px; } .cx-avl:hover { background: #4A4A4A; }
.cx-avs { color: #B3B3B3; font-size: 13px; }
.cx-avb { display: flex; flex-wrap: wrap; gap: 8px; }
.cx-mh { display: flex; flex-direction: column; padding: 8px 10px 10px; border-bottom: 1px solid #5A5A5A; margin-bottom: 4px; overflow-wrap: anywhere; }
.cx-menu [role=menuitem] { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: #FFFFFF; font: 14px 'IBM Plex Sans', sans-serif; text-decoration: none; cursor: pointer; text-align: left; }
.cx-menu [role=menuitem]:hover { background: #36414B; }
.cx-menu .cx-out { color: #F28B82; }
.cx-osc { background: rgba(0,0,0,.6); z-index: 60; }
.cx-mdl { position: fixed; inset: 0; z-index: 61; display: flex; align-items: flex-start; justify-content: center; padding: 48px 16px; overflow-y: auto; pointer-events: none; }
.cx-win { pointer-events: auto; width: min(620px, 100%); box-sizing: border-box; background: #404040; border: 1px solid #5A5A5A; border-radius: 12px; padding: 22px; display: flex; flex-direction: column; gap: 12px; color: #FFFFFF; font: 14px 'IBM Plex Sans', sans-serif; box-shadow: 0 16px 48px rgba(0,0,0,.6); }
.cx-win h2 { margin: 0; font-size: 20px; } .cx-win h3 { margin: 6px 0 0; font-size: 15px; color: #D9D9D9; font-weight: 600; }
.cx-wh { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.cx-x { width: 40px; height: 40px; border-radius: 8px; border: 1px solid #5A5A5A; background: transparent; color: #FFFFFF; cursor: pointer; font-size: 16px; }
.cx-vacio { background: #3A2A12; border: 1px solid #7A5A1E; color: #FFE08A; border-radius: 10px; padding: 12px 14px; }
.cx-monto { display: flex; flex-direction: column; gap: 2px; background: #333333; border-radius: 10px; padding: 14px 16px; }
.cx-monto b { font: 600 28px 'IBM Plex Mono', monospace; color: #FF9800; overflow-wrap: anywhere; }
.cx-rows { display: flex; flex-direction: column; }
.cx-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px dashed #5A5A5A; }
.cx-rv { display: flex; align-items: center; gap: 8px; min-width: 0; text-align: right; }
.cx-rv b { overflow-wrap: anywhere; font-family: 'IBM Plex Mono', monospace; }
.cx-copy { flex: none; border: 1px solid #6A6A6A; background: #333333; color: #FFFFFF; border-radius: 6px; padding: 4px 10px; min-height: 30px; cursor: pointer; font: 12px 'IBM Plex Sans', sans-serif; }
.cx-btn1, .cx-btn2 { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; min-height: 46px; padding: 0 22px; border-radius: 8px; font: 600 15px 'IBM Plex Sans', sans-serif; cursor: pointer; text-decoration: none; }
.cx-btn1 { background: #FF9800; color: #FFFFFF; border: 0; } .cx-btn1:hover { background: #F08C00; color: #FFFFFF; }
.cx-btn2 { background: #333333; color: #FFFFFF; border: 1px solid #5A5A5A; }
.cx-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: #D9D9D9; }
.cx-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.cx-fl { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cx-inp { background: #262626; color: #FFFFFF; border: 1px solid #555555; border-radius: 8px; padding: 10px 12px; min-height: 44px; box-sizing: border-box; font: 14px 'IBM Plex Sans', sans-serif; width: 100%; }
.cx-acc { display: flex; flex-wrap: wrap; gap: 10px; }
.cx-ok, .cx-err { border-radius: 10px; padding: 10px 14px; font-size: 13px; }
/* API y conexiones: llave recién creada y lista de llaves */
.cx-key { display: flex; gap: 8px; align-items: center; background: #1E1E1E; border: 1px solid #6A6A6A; border-radius: 8px; padding: 8px 10px; }
.cx-key code { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 12px; color: #FFE0B2; }
.cx-win code { overflow-wrap: anywhere; }
.cx-llave { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; border-top: 1px solid #4A4A4A; padding: 10px 0; }
.cx-llave-t { min-width: 0; flex: 1 1 220px; overflow-wrap: anywhere; }
.cx-chk { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; cursor: pointer; }
.cx-chk input { flex: none; margin-top: 2px; }
.cx-ok { background: #1C3324; border: 1px solid #2F6B45; color: #BFEFCB; } .cx-err { background: #2E1A1A; border: 1px solid #7A3B36; color: #F8C1BB; }
a.cx-sop { text-decoration: none; }
.cx-sopw { width: min(760px, 100%); gap: 14px; }
.cx-c { text-align: center; margin: 4px 0 0; }
h2.cx-c { font-size: 26px; }
.cx-hor { display: flex; flex-direction: column; border: 1px solid #5A5A5A; border-radius: 8px; overflow: hidden; }
.cx-hor > div { display: grid; grid-template-columns: 1fr 1fr; }
.cx-hor > div > span { padding: 12px; text-align: center; border-bottom: 1px solid #5A5A5A; background: #333333; }
.cx-hor > div > span:first-child { border-right: 1px solid #5A5A5A; font-weight: 600; }
.cx-hor > div:last-child > span { border-bottom: 0; }
.cx-sopb { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 16px; padding: 8px 0 16px; border-bottom: 1px solid #5A5A5A; }
.cx-sopb > div { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cx-sopb h3 { margin: 0; font-size: 22px; color: #FFFFFF; }
.cx-bb { display: inline-flex; align-items: center; justify-content: center; min-width: 220px; min-height: 52px; border-radius: 6px; background: linear-gradient(#2F7FC1, #1D5F98); color: #FFFFFF; font: 600 18px 'IBM Plex Sans', sans-serif; text-decoration: none; }
.cx-bb:hover { color: #FFFFFF; filter: brightness(1.1); }
.cx-desc { min-height: 110px; }
.cx-full { align-self: stretch; width: 100%; }
@media (max-width: 620px) { .cx-form { grid-template-columns: minmax(0, 1fr); } .cx-mdl { padding: 16px 8px; } .cx-win { padding: 16px; } }
.cx-top-nm { font-size: 14px; color: #FFFFFF; }
/* Quien entra a varias franquicias: la barra de arriba toma un color por franquicia (cxTopCls en src/data.js) */
.cx-top.cx-fc { border-bottom-color: rgba(0, 0, 0, 0.35); }
.cx-top.cx-fc .btn, .cx-top.cx-fc .cx-top-u { border-color: rgba(255, 255, 255, 0.35); }
.cx-top.cx-fc .btn:hover, .cx-top.cx-fc .cx-top-u:hover { background: rgba(255, 255, 255, 0.14); }
.cx-top.cx-fc .mu { color: rgba(255, 255, 255, 0.82); }
.cx-top.cx-fc0 { background: #2E7D32; }
.cx-top.cx-fc1 { background: #6A1B9A; }
.cx-top.cx-fc2 { background: #A15C07; }
.cx-top.cx-fc3 { background: #00695C; }
.cx-top.cx-fc4 { background: #AD1457; }
.cx-top.cx-fc5 { background: #8E244D; }
.cx-top.cx-fc6 { background: #1565C0; }
@media (max-width: 999px) { .cx-top { margin: -20px -16px 16px; padding: 8px 16px; } .cx-top-ut { display: none; } }
@media (max-width: 620px) { .cx-sop span, .cx-pag span { display: none; } .cx-sop, .cx-pag { padding: 0 12px; } .cx-top-r > .btn { display: none; } }
@media print { .cx-top { display: none !important; } }

/* El menú lateral (completo o de iconos) se queda fijo al bajar la página, con su propio scroll si no cabe */
nav[aria-label="Menú (iconos)"]{position:sticky;top:0;align-self:flex-start;height:100vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#6A6A6A #505050}
@media (min-width:1000px){nav[aria-label="Menú principal"]{position:sticky;top:0;align-self:flex-start;height:100vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#6A6A6A #505050}}

/* Celular (menos de 700 px): barra de arriba en un solo renglón, botones redondos del mismo tamaño */
@media (max-width: 699px) {
  .cx-top { margin: -12px -12px 12px; padding: 6px 10px; min-height: 54px; flex-wrap: nowrap; gap: 8px; border-bottom-width: 2px; }
  .cx-top-l { min-width: 0; flex: 1 1 auto; flex-wrap: nowrap; }
  .cx-top-l > span, .cx-top-l .xs { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cx-top-fr { min-width: 0; }
  .cx-top-fr > span { display: none; }
  .cx-top-fr select { width: auto; max-width: 46vw; min-height: 38px; }
  .cx-top-r { flex: none; flex-wrap: nowrap; gap: 6px; }
  .cx-sop, .cx-pag { width: 38px; height: 38px; min-height: 38px; padding: 0; justify-content: center; }
  .cx-top-b { width: 36px; height: 38px; }
  .cx-top-u { padding: 0; }
  .cx-av { width: 36px; height: 36px; font-size: 15px; }
  .cx-mdl { padding: 8px 0 0; }
  .cx-win { border-radius: 14px 14px 0 0; min-height: calc(100vh - 8px); padding: 16px; }
  #cx-sync { bottom: 76px; }
  main[style*="999 1 560px"] { padding: 12px !important; }
  /* Panel del dueño y Plataforma: la columna de íconos pasa a ser una barra abajo (se desliza de lado si no caben) */
  .cx-dueno nav[aria-label="Menú (iconos)"], .cx-plataforma nav[aria-label="Menú (iconos)"] {
    position: fixed !important; top: auto !important; left: 0; right: 0; bottom: 0; z-index: 35; height: auto !important; align-self: auto !important;
    flex-direction: row !important; align-items: center !important; overflow-x: auto !important; overflow-y: hidden !important; gap: 4px !important;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom)) !important; border-right: 0 !important; border-top: 1px solid #3A3A3A; box-shadow: 0 -6px 20px rgba(0,0,0,.35); scrollbar-width: none; }
  .cx-dueno nav[aria-label="Menú (iconos)"] > *, .cx-plataforma nav[aria-label="Menú (iconos)"] > * { flex: none; margin: 0 !important; }
  .cx-dueno nav[aria-label="Menú (iconos)"] > :not(a):not(button), .cx-plataforma nav[aria-label="Menú (iconos)"] > :not(a):not(button) { width: 1px !important; height: 32px !important; }
  .cx-dueno main, .cx-plataforma main { padding-bottom: 84px !important; }
}

/* Datos del negocio (menú de la cuenta, otro negocio): cuadro del logo y botón para subirlo */
.cx-neglogo { align-self: stretch; box-sizing: border-box; display: flex; align-items: center; justify-content: center; min-height: 120px; background: #FFFFFF; border: 1px solid #5A5A5A; border-radius: 8px; padding: 12px; }
.cx-neglogo img { max-width: 100%; max-height: 140px; object-fit: contain; }
.cx-neglogo .mu { color: #6B6B6B; }
.cx-up { position: relative; overflow: hidden; cursor: pointer; display: inline-flex; align-items: center; }
.cx-up input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }