/* Imagen corporativa de Cryma Cloud (Manual de Marca, octubre de 2026).
   Se carga DESPUÉS de la hoja de cada página y manda sobre ella: los
   colores, la letra, los radios y las rejillas se cambian aquí, una vez,
   para todas las pantallas.

   Paleta:  azul principal #0B5BD3 · verde principal #2ECC71 · azul profundo
   #0A2E6D · fondo claro #F5F8FC · gris texto #64748B · gris borde #E2E8F0
   éxito #22C55E · aviso #F59E0B · error #EF4444.   Letra: Inter. */

:root {
  --azul-marca: #0B5BD3; --verde-marca: #2ECC71; --profundo: #0A2E6D;
  /* las variables que ya usan las páginas, con los colores de la marca */
  --fondo: #F5F8FC; --panel: #fff; --borde: #E2E8F0; --linea: #E2E8F0;
  --texto: #334155; --tenue: #64748B; --fuerte: #0B5BD3; --azul: #0B5BD3; --marca: #0B5BD3;
  --marino: #0A2E6D; --marino2: #123F8C; --cab: #F5F8FC; --par: #FBFCFE;
  --ok: #15803D; --ok-fondo: #DCFCE7; --aviso: #B45309; --aviso-fondo: #FEF3C7;
  --mal: #DC2626; --mal-fondo: #FEE2E2; --verde: #22C55E; --ambar: #F59E0B; --rojo: #EF4444;
  --radio: 8px; --radio-g: 12px;
  --sombra: 0 1px 2px rgba(10, 46, 109, .05), 0 4px 12px rgba(10, 46, 109, .04);
}

/* La columna del contenido no puede crecer más que la ventana: sin esto, una
   rejilla ancha ensanchaba la página entera y salía el desplazamiento lateral. */
body { grid-template-columns: 220px minmax(0, 1fr) !important; }
body > div, body > .derecha, main, section { min-width: 0; }
.barra, .barra-a, .barra-lista { flex-wrap: wrap; }

body { font-family: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif; font-size: 13.5px;
       color: var(--texto); background: var(--fondo); -webkit-font-smoothing: antialiased; }
a { color: var(--azul-marca); }
::selection { background: #CFE0FA; }

/* ---------- menú lateral ---------- */
aside { background: var(--profundo); color: #C7D5EE; }
.logo { height: 64px; padding: 0 14px; background: #fff; border-bottom: 0; gap: 0; justify-content: center; }
.logo > i, .logo > span { display: none; }
.logo img.largo { height: 46px; width: auto; display: block; }
.logo img.corto { height: 38px; width: auto; display: none; }
.local { margin: 12px 10px 6px; padding: 10px 12px; background: rgba(255, 255, 255, .08);
         border: 1px solid rgba(255, 255, 255, .10); border-radius: 10px; }
.local small { color: #9FB6DE; letter-spacing: .08em; }
.local b { font-size: 14.5px; font-weight: 700; }
.local select, #restaurante { height: 30px; border: 0; border-radius: 6px; max-width: none; }
.menu, aside nav { padding: 6px 0 16px; }
.menu h6, aside nav h6 { margin: 16px 22px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .09em; color: #7F9BCB; }
.menu a, aside nav a { margin: 1px 10px; padding: 8px 12px; border-left: 0; border-radius: var(--radio);
                       font-weight: 500; color: #D5E0F3; }
.menu a:hover, aside nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.menu a.activa, aside nav a.activa { background: var(--azul-marca); color: #fff; font-weight: 600;
                                     box-shadow: 0 2px 8px rgba(11, 91, 211, .35); }
.menu a.sub, aside nav a.sub { padding-left: 40px; font-weight: 400; font-size: 13px; color: #B9C9E6; }
.menu a.pronto::after, aside nav a.pronto::after { border-color: rgba(255, 255, 255, .3); border-radius: 999px; }
.menu a b, aside nav a b { background: rgba(255, 255, 255, .16); border-radius: 999px; font-weight: 600; }
aside nav a b.alerta, .menu a b.alerta { background: var(--ambar); color: #3B2C00; }
.ico { width: 18px; height: 18px; flex: none; display: inline-grid; place-items: center; font-size: 14px; }
.ico svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8;
           stroke-linecap: round; stroke-linejoin: round; }

/* ---------- franja y cabecera ---------- */
.franja { height: 3px; background: linear-gradient(90deg, var(--azul-marca), var(--verde-marca)); }
.derecha { grid-template-rows: 3px 60px 1fr; }
header { height: 60px; border-bottom: 1px solid var(--borde); padding: 0 24px; }
header h3 { font-size: 20px; font-weight: 700; color: var(--profundo); letter-spacing: -.01em; }
.estado { color: var(--tenue); }
header .estado { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
header #quien { flex: none; overflow: visible; }
.estado button, .estado select { border-radius: 6px; border-color: var(--borde); height: 28px; }
.estado a { color: var(--azul-marca); }
.punto.ok { background: var(--verde); }

/* ---------- paneles y tarjetas ---------- */
#lista { padding: 18px 24px; }
main { min-width: 0; }
#lista .caja-panel, .panel-a, .panel, .cifra, .tarjeta, .ventaja, .acciones {
  border: 1px solid var(--borde); border-radius: var(--radio-g); box-shadow: var(--sombra); }
.acciones { overflow: hidden; }
#lista .titulo-panel, .titulo-a, .titulo-panel { padding: 4px 2px 10px; font-size: 14px; font-weight: 700; color: var(--profundo); }
#bandeja { padding: 18px 24px; }
#bandeja h2, .config h2 { color: var(--profundo); font-weight: 700; }
#detalle h2 { color: var(--profundo); font-weight: 700; }
.cifra { padding: 18px 16px; text-align: left; }
.cifra strong { color: var(--profundo); font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
.cifra.mal strong { color: var(--mal); }
.cifra span { font-size: 11.5px; font-weight: 600; letter-spacing: .05em; color: var(--tenue); }
.cifra .tres { justify-content: flex-start; gap: 20px; margin: 14px 0 10px; }
.cifra .tres small { display: block; font-size: 10px; line-height: 1.25; letter-spacing: .04em; }
.cifra a { text-decoration: none; font-weight: 600; color: var(--azul-marca); }
.barras div { background: #CFE0FA; border-radius: 6px 6px 0 0; }
.barras div.hoy { background: var(--azul-marca); }
.prov-p i { background: #E8EEF7; }
.prov-p i u { background: var(--azul-marca); border-radius: 4px; }
#visor { background: #0E1E3F; }
.herramientas button { border-radius: 6px; }
.avisos, .resultado, .aviso { border-radius: 10px; }
.aviso.ok { background: var(--ok-fondo); border-color: #BBF7D0; color: var(--ok); }
.aviso.mal { background: var(--mal-fondo); border-color: #FECACA; color: var(--mal); }
.aviso.alerta { background: var(--aviso-fondo); border-color: #FDE68A; color: var(--aviso); }
.hero { background: linear-gradient(120deg, var(--profundo), var(--azul-marca)); border-radius: 16px; }
.hero h2 { font-weight: 700; letter-spacing: -.01em; }
.hero small { color: #BBD4FF; }
.ventaja b, .pedir h4 { color: var(--profundo); }
.modulo { border-color: var(--borde); }
.modulo:first-of-type { border-radius: 10px 10px 0 0; }
.modulo:last-of-type { border-radius: 0 0 10px 10px; }

/* ---------- botones ---------- */
.btn, #lista .barra-lista button, .barra-a button, .enviar, .fila button, .tarjeta > button, .corregir,
.masivo button, .pestanas button {
  border-radius: var(--radio); font-weight: 600; transition: background .12s, border-color .12s, box-shadow .12s; }
.btn { height: 36px; padding: 0 14px; font-size: 13.5px; border-color: var(--borde); color: var(--texto); background: #fff; }
.btn:hover { background: var(--cab); border-color: #CBD5E1; }
.btn.pri, #lista .barra-lista button, .barra-a button, .enviar, .fila button, .tarjeta > button {
  background: var(--azul-marca); border: 1px solid var(--azul-marca); color: #fff; }
.btn.pri:hover, #lista .barra-lista button:hover, .barra-a button:hover, .enviar:hover:not(:disabled),
.fila button:hover, .tarjeta > button:hover { background: #094DB5; border-color: #094DB5; }
#lista .barra-lista button, .barra-a button { height: 36px; padding: 0 14px; font-size: 13.5px; }
.barra-a button.claro, .fila button.secundario { background: #fff; color: var(--texto); border: 1px solid var(--borde); }
.barra-a button.claro:hover, .fila button.secundario:hover { background: var(--cab); border-color: #CBD5E1; }
.fila button.enlace, .fila button.enlace:hover { background: none; border: 0; color: var(--mal); }
.btn.mini { height: 26px; padding: 0 10px; font-size: 12px; border-radius: 6px; }
.grupo .btn { border-radius: 0; }
.grupo .btn:first-child { border-radius: var(--radio) 0 0 var(--radio); }
.grupo .btn:last-child { border-radius: 0 var(--radio) var(--radio) 0; }
.enviar { padding: 10px 20px; }
.enviar:disabled { background: #CBD5E1; border-color: #CBD5E1; }
.candidatos button, .buscar button { border-color: #BFD4F6; color: var(--azul-marca); border-radius: 999px; background: #F3F8FF; }
.candidatos button:hover, .buscar button:hover { background: var(--azul-marca); border-color: var(--azul-marca); color: #fff; }
.crear button, .masivo button, .alta-prov button { background: var(--verde); border-radius: 999px; font-weight: 600; }
.masivo button { border-radius: var(--radio); }
.corregir { border-color: var(--borde); }
.corregir.activo { background: var(--azul-marca); border-color: var(--azul-marca); }
.pestanas button.activa { background: var(--azul-marca); border-color: var(--azul-marca); }

/* ---------- campos ---------- */
input[type=text], input[type=search], input[type=password], input[type=number], input[type=date], input[type=month],
input:not([type]), select, textarea { border-radius: var(--radio); border-color: var(--borde); color: var(--texto); }
#lista .barra-lista input, #lista .barra-lista select, .barra-a input, .barra-a select, .barra input, .barra select {
  height: 36px; font-size: 13.5px; border-radius: var(--radio); }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--azul-marca) !important;
                                            box-shadow: 0 0 0 3px rgba(11, 91, 211, .15); }
td select, td input { border-radius: 6px; }
.caja { border-radius: 4px; border-color: #94A3B8; width: 15px; height: 15px; }
tr.sel .caja, th .caja.todas { background: var(--azul-marca); border-color: var(--azul-marca); }
.editar.corregido, select.corregido { border-color: var(--azul-marca); background: #EEF4FD; }

/* ---------- rejillas ---------- */
#lista .marco, .marco-a, .rejilla { border: 1px solid var(--borde); border-radius: 10px; background: #fff; }
#lista th, .marco-a th, .rejilla th {
  background: var(--cab); height: 40px; padding: 0 12px; font-size: 12px; font-weight: 600; color: var(--tenue);
  border-right: 0; border-bottom: 1px solid var(--borde); }
#lista td, .marco-a td, .rejilla td {
  height: 40px; padding: 0 10px; font-size: 13px; border-right: 0; border-bottom: 1px solid #EEF2F7; background: #fff; }
#lista th, .marco-a th, .rejilla th { padding-left: 10px; padding-right: 10px; }
#lista tbody tr:nth-child(even) td, .marco-a tbody tr:nth-child(even) td, .rejilla tbody tr:nth-child(even) td { background: var(--par); }
#lista tbody tr:hover td, .rejilla tbody tr:hover td, .marco-a tbody tr:hover td { background: #EFF5FE; }
.rejilla tbody tr.sel td { background: #DCE9FC !important; }
#lista tbody tr:last-child td, .marco-a tbody tr:last-child td, .rejilla tbody tr:last-child td { border-bottom: 0; }
#lista .pie-lista, .pie-rejilla { color: var(--tenue); padding-top: 10px; }
th { color: var(--tenue); }
table { border-color: var(--borde); }
#datos table { border-radius: 10px; }
tr.revisar td { background: #FFFBEB; }
table.creados th, table.creados td { border-color: var(--borde); }
table.creados th { background: var(--cab); }
td.creado-aqui, tr.creado-aqui > td { background: #FFF8E1 !important; }

/* Una rejilla ya no se sale de la pantalla: `cryma.js` reparte el ancho que
   hay entre sus columnas. Si aun así queda muy apretada, las celdas pasan a
   varias líneas en vez de cortar el texto o pedir desplazarse de lado. */
table.fluida { table-layout: fixed; min-width: 0 !important; }
table.apretada th { white-space: normal; overflow-wrap: anywhere; line-height: 1.2; padding-top: 6px; padding-bottom: 6px;
                    height: auto; font-size: 11.5px; }
table.apretada td { white-space: normal; overflow-wrap: anywhere; height: auto; padding-top: 8px; padding-bottom: 8px;
                    line-height: 1.3; }
table.apretada th, table.apretada td { padding-left: 6px; padding-right: 6px; }
table.apretada td { font-size: 12.5px; }
td .btn.mini { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* ---------- estados ---------- */
.chip, .et { border-radius: 999px; padding: 2px 10px; font-size: 11.5px; font-weight: 600; }
.chip.ok, .et.ok { background: var(--ok-fondo); color: var(--ok); }
.chip.aviso, .et.av { background: var(--aviso-fondo); color: var(--aviso); }
.chip.mal, .et.mal { background: var(--mal-fondo); color: var(--mal); }
.chip.gris, .et.gris { background: #EEF2F7; color: var(--tenue); }
.emparejado { color: var(--ok); }
.falta { color: var(--mal); } .sobra { color: var(--ok); }
.precio.sube { color: var(--mal); } .precio.baja { color: var(--ok); }
.conversion, .hecho-a-mano, .mas { color: var(--azul-marca); }
.opciones { border-radius: 10px; background: var(--cab); }
.acciones h5 { background: var(--cab); color: var(--profundo); }
.acciones a.sel { background: var(--azul-marca); }
.lista-sel { border-radius: var(--radio); }

/* ---------- entrar ---------- */
#entrada { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px;
           background: radial-gradient(1200px 600px at 85% -10%, #DCE9FC 0, transparent 60%),
                       radial-gradient(900px 500px at -10% 110%, #D9F7E6 0, transparent 55%), var(--fondo); }
#entrada form { width: 360px; max-width: 100%; background: #fff; padding: 32px 30px 26px; border-radius: 16px;
                border: 1px solid var(--borde); box-shadow: 0 12px 32px rgba(10, 46, 109, .12);
                display: flex; flex-direction: column; gap: 12px; }
#entrada img { height: 70px; width: auto; align-self: center; margin-bottom: 4px; }
#entrada h2 { margin: 0; font-size: 20px; font-weight: 700; color: var(--profundo); text-align: center; letter-spacing: -.01em; }
#entrada p { margin: -6px 0 6px; text-align: center; color: var(--tenue); }
#entrada input { height: 42px; padding: 0 14px; font: inherit; font-size: 14.5px; border: 1px solid var(--borde); }
#entrada button { height: 44px; border: 0; border-radius: var(--radio); background: var(--azul-marca); color: #fff;
                  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
#entrada button:hover { background: #094DB5; }
#entrada .error { color: var(--mal); min-height: 1.3em; text-align: center; font-size: 13px; }
#entrada small { text-align: center; color: var(--tenue); font-size: 12px; }

/* ---------- pantallas estrechas ---------- */
@media (max-width: 1150px) {
  body { grid-template-columns: 64px minmax(0, 1fr) !important; }
  .logo { padding: 0; }
  .logo img.largo { display: none; } .logo img.corto { display: block; }
  .local, .menu h6, aside nav h6, .menu a.sub, aside nav a.sub { display: none; }
  .menu a, aside nav a { margin: 2px 8px; padding: 10px 0; justify-content: center; }
  aside nav a { font-size: 0; gap: 0; } aside nav a .ico { font-size: 14px; }
  aside nav a b, aside nav a.pronto::after { display: none; }
  #lista, #bandeja { padding: 14px; }
  header { padding: 0 14px; }
  .multiple { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .cifras { grid-template-columns: 1fr; }
  header h3 { font-size: 17px; }
  header .estado { display: none; } header .estado#quien { display: inline; margin-left: auto; }
}