/* =============================================================================
* rack.css — estilos del mockup PVP Rack Interanual
*
* Modelo: CSS Cascade Layers (@layer). Dos capas explícitas:
*
* @layer base
* CSS utilitario tipo Excel: .rack, .rack td, .rack thead th,
* .pattern-25, .freeze, .sep-row, statusbar, toolbar, login, etc.
* Define los valores POR DEFECTO de la rejilla.
*
* @layer extracted-inline
* Una clase .sxNNN por cada estilo único que en el mockup original
* venía como atributo style="..." inline.
* Esta capa GANA SIEMPRE sobre `base`, sin importar la especificidad
* interna de las reglas de `base`. Replica la semántica del inline
* style original con un mecanismo CSS estándar y declarativo.
*
* CONTRATO PARA RENDERERS FUTUROS
* -------------------------------
* - Para emitir una celda con estilo no-default: añadir UNA clase .sxNNN
* (definida en `extracted-inline`) además de las utilitarias que
* corresponda (.freeze, .pattern-25, etc.).
* - Si aparece un valor CSS nuevo: AÑADIR una nueva clase .sxNNN+1 al
* final de `extracted-inline`. Nunca reutilizar ni reordenar índices.
* - Las clases .sxNNN están ordenadas por frecuencia descendente en el
* conjunto original (.sx001 = más repetida). El orden no tiene
* significado funcional, solo afecta a la legibilidad del archivo.
*
* Compatibilidad navegador (mínima): Chrome 99, Firefox 97, Safari 15.4.
* La PWA se distribuye via instalar.bat que fuerza Chrome moderno.
* ============================================================================= */
@layer base, extracted-inline;
@layer base {
:root{
--z-content: 1;
--z-cell-selection: 5;
--z-tbody-row-header: 10;
--z-freeze-row-cell: 20;
--z-freeze-row-header: 25;
--z-thead-col-header: 30;
--z-thead-corner: 40;
--z-toolbar: 100;
--selection-overlay: rgba(80, 80, 80, 0.35);
/* Variables de tema (no escalables) */
--excel-bg:#ffffff;--excel-header-bg:#f0f0f0;--excel-header-text:#5a5a5a;
--excel-header-border:#b0b0b0;
/* Cabeceras de columna/fila cuando hay selección activa (estilo Excel moderno):
fondo verde menta MUY pálido + texto en verde Excel + línea inset (definida abajo).
El texto referencia --excel-selection-border para que todo el verde de la selección
(texto, líneas inset, outlines) cambie desde un único punto. */
--excel-header-selected-bg:#caead8;
--excel-header-selected-text:var(--excel-selection-border);
--excel-selection-bg:#e8f0fe;
--excel-selection-border:#1f7a4d;
/* Arial del sistema: la fidelidad visual al Excel original prima sobre la
consistencia entre SO. La Arial nativa tiene hinting óptimo en cada
plataforma y se ve nítida a cualquier tamaño. El comportamiento de
ClearType en Windows (variaciones perceptibles de grosor por umbral de
tamaño) se acepta como inherente al rendering web — es lo mismo que
hacen Excel Online, Google Docs y demás. */
--excel-font:Arial,Helvetica,sans-serif;
/* Variable de escala: controla TODO el tamaño visual de la tabla.
Cambiarla via JS aplica un "zoom verdadero": las fuentes se renderizan
a su tamaño nativo nuevo (no como un scaling de píxeles), preservando
el peso visual de bold/normal incluso a tamaños grandes.
Default 1 = 10pt base de celdas. Cambia con el control de zoom. */
--scale:1;
}
/* === Estado autenticado / no autenticado ===
Controlado por la clase 'pre-auth' en , decidida por el script bloqueante
del antes del primer paint. Esto garantiza que NO haya flash de la pantalla
incorrecta (ni del login para usuarios autenticados, ni del rack para usuarios sin sesión).
Para usuarios SIN sesión (html sin .pre-auth):
- Fondo opaco marrón Bajondillo (oculta cualquier render parcial detrás)
- Rack y zoom-controls con display:none (el navegador NI siquiera calcula layout
de las 35 000 celdas, lo que mejora dramáticamente el First Paint)
Para usuarios CON sesión (html.pre-auth):
- El login se oculta con opacity+visibility (NO display:none) para permitir
la transición de fade-out cuando el usuario hace logout y vuelve a entrar */
html:not(.pre-auth){background-color:#1a0a08}
html:not(.pre-auth) .rack,
html:not(.pre-auth) .zoom-controls{display:none}
html.pre-auth #login-screen{opacity:0;visibility:hidden;pointer-events:none}
/* Mientras el zoom inicial no se haya aplicado, mantenemos el rack invisible.
Si no, el primer paint usa --scale:1 (tamaño Excel original, pequeño) y luego
el JS recalcula a baseScale*1.0 (típicamente 1.48× en 1920px) → flash visible.
visibility:hidden (no display:none) permite que clientWidth funcione, que es
lo que recomputeBaseScale necesita para medir el contenedor.
applyZoom() añade 'zoom-ready' a al ejecutarse por primera vez. */
html.pre-auth:not(.zoom-ready) .rack{visibility:hidden}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--excel-font);font-size:11px;background:#e7e8eb;
overflow:hidden;display:flex;flex-direction:column;user-select:none}
.toolbar{display:flex;align-items:center;gap:14px;padding:6px 12px;
background:#f3f3f3;border-bottom:1px solid #d0d0d0;font-size:12px;flex-shrink:0;z-index:var(--z-toolbar)}
.toolbar .title{font-weight:bold;color:#333}
.toolbar .subtitle{color:#777;font-size:11px}
.zoom-controls{display:flex;align-items:center;gap:4px;margin-left:auto}
.zoom-controls .zoom-controls button{width:24px;height:22px;border:1px solid #b0b0b0;background:#fff;
cursor:pointer;font-size:14px;font-weight:bold;color:#444;border-radius:2px}
.zoom-controls input[type=number]{width:54px;height:22px;border:1px solid #b0b0b0;
text-align:center;font-size:11px;font-family:inherit;border-radius:2px}
.zoom-controls .fit-btn{width:auto;padding:0 10px;font-size:11px;font-weight:normal}
.zoom-label{font-size:11px;color:#666}
.rack-wrap{flex:1;overflow:auto;position:relative;background:#fff}
.rack-zoom{position:relative}
.rack{border-collapse:separate;border-spacing:0;table-layout:fixed;
font-size:calc(10pt * var(--scale));background:var(--excel-bg);position:relative;
/* Font smoothing: minimiza halos de subpixel rendering en macOS (donde sí
tiene efecto). En Windows el SO controla el rendering con ClearType y
estas propiedades son ignoradas — comportamiento estándar de Excel
Online, Google Docs, etc.
NO usamos:
- text-rendering: geometricPrecision → desactiva el hinting y hace
que el texto se vea pixelado/borroso a tamaños pequeños
- transform: translateZ(0) → puede mejorar consistencia en algunos
casos pero introduce sus propios artefactos visuales */
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale}
/* Simula la gridline default de Excel: gris muy claro en TODAS las celdas.
Solo se aplica a right+bottom para que las celdas adyacentes no dupliquen.
Los bordes explícitos del estilo de celda Excel (thin/medium/thick) tienen
mayor especificidad por ser inline styles y sobreescriben este default. */
.rack td,.rack th{
border:0;
border-right:1px solid #E5E5E5;
border-bottom:1px solid #E5E5E5;
padding:0 2px;overflow:hidden;white-space:nowrap;
vertical-align:middle;text-align:center;
line-height:1.15;font-variant-numeric:tabular-nums;
font-size:calc(10pt * var(--scale))}
/* Cursor estilo Excel: 'cell' es el cursor de cruz blanca con borde negro */
.rack td{cursor:cell}
/* Cabeceras de columna y fila: flechas SVG direccionales como en Excel.
Las propiedades nativas s-resize/e-resize de CSS muestran flechas DOBLES
(cursor de redimensionar), que confunden al usuario. Excel usa una flecha
gruesa apuntando a la columna/fila a seleccionar: ↓ sobre cabecera de
columna, → sobre número de fila. Definidas como SVG inline con fill negro
y stroke blanco fino para visibilidad sobre cualquier fondo. Hotspot
colocado en la punta de la flecha para que el click sea preciso.
Fallback 'default' por si el SVG no carga (Safari antiguo, etc). */
.rack thead th[data-col]{cursor:url("data:image/svg+xml;utf8,") 8 14,default}
.rack tbody th[data-row]{cursor:url("data:image/svg+xml;utf8,") 14 8,default}
.rack thead th.corner{cursor:default}
.rack td.fb,.rack th.fb{font-weight:bold}
.rack td.fi,.rack th.fi{font-style:italic}
.rack thead th,.rack tbody th{background:var(--excel-header-bg);color:var(--excel-header-text);
font-weight:normal;text-align:center;
border-right:1px solid var(--excel-header-border);
border-bottom:1px solid var(--excel-header-border);
font-size:calc(9pt * var(--scale));z-index:var(--z-tbody-row-header)}
.rack thead th{position:-webkit-sticky;position:sticky;top:0;z-index:var(--z-thead-col-header);
height:calc(20px * var(--scale));
line-height:calc(20px * var(--scale))}
.rack tbody th{position:-webkit-sticky;position:sticky;left:0;z-index:var(--z-tbody-row-header);background:var(--excel-header-bg);
width:calc(35px * var(--scale));
min-width:calc(35px * var(--scale));
max-width:calc(35px * var(--scale))}
.rack thead th.corner{position:-webkit-sticky;position:sticky;left:0;top:0;z-index:var(--z-thead-corner);background:var(--excel-header-bg);
width:calc(35px * var(--scale));
min-width:calc(35px * var(--scale));
max-width:calc(35px * var(--scale))}
.rack tbody tr.freeze-row>td,.rack tbody tr.freeze-row>th{
position:-webkit-sticky;position:sticky;top:var(--top,0);background-color:#ffffff;
background-clip:padding-box;z-index:var(--z-freeze-row-cell)}
.rack tbody tr.freeze-row>th{z-index:var(--z-freeze-row-header);left:0}
/* Fix bug Chromium: position:-webkit-sticky;position:sticky + border-bottom desaparece o queda
semi-transparente al scrollear/cruzar el viewport. Aplicamos box-shadow
inset a TODAS las filas freeze (no solo a la última), que se pinta en
otra capa de composición y resiste el bug. Color #E5E5E5 = mismo gris
claro que la gridline por defecto, así no se nota duplicidad con el
border-bottom cuando éste sí se pinta correctamente. */
.rack tbody tr.freeze-row>td,
.rack tbody tr.freeze-row>th{
box-shadow:inset 0 -1px 0 0 #E5E5E5}
/* Override para la divisoria de la zona freeze: gris medio (#808080) más
visible, para marcar el final del pane fijado. */
.rack tbody tr.freeze-row.last-freeze>td,
.rack tbody tr.freeze-row.last-freeze>th{
box-shadow:inset 0 -1px 0 0 #808080}
/* Selección estilo Excel: capa translúcida ENCIMA del contenido.
Color: gris neutro al 17% — calibrado iterativamente con el usuario
comparando contra Excel real (partió de 14%, se subió a 20% por ser
imperceptible, se bajó a 17% por estar algo intenso). Sobre blanco
da ~#D4D4D4, sobre celdas con color de fondo (verde PVP, amarillo EM,
etc.) oscurece proporcionalmente sin tapar el contenido.
Usa background-image (no background-color) para no reemplazar el fondo
original de la celda. */
.rack td.col-sel,.rack td.row-sel,.rack td.cell-sel{
position:relative}
/* Sombreado base de col-sel y cell-sel via ::after; row-sel via ::before
para permitir doble overlay simultáneo. Variables CSS controlan fracción
visible para soportar celdas con colspan/rowspan. */
.rack td.col-sel::after,.rack td.cell-sel::after,.rack td.row-sel::before{
content:"";position:absolute;
background:var(--selection-overlay);
pointer-events:none;
z-index:1}
.rack td.col-sel::after{
top:0;bottom:0;
left:calc(var(--sel-col-offset, 0) * 100%);
width:calc(var(--sel-col-width, 1) * 100%)}
.rack td.row-sel::before{
left:0;right:0;
top:calc(var(--sel-row-offset, 0) * 100%);
height:calc(var(--sel-row-height, 1) * 100%)}
.rack td.cell-sel::after{top:0;bottom:0;left:0;right:0}
.rack td.cell-sel{
outline:2px solid var(--excel-selection-border);
outline-offset:-2px;z-index:var(--z-cell-selection);position:relative}
/* Encabezados seleccionados (estilo Excel moderno):
- Fondo verde menta muy pálido (--excel-header-selected-bg)
- Texto verde Excel (--excel-header-selected-text)
- Línea verde gruesa de 3px en el borde inferior (columnas) o derecho (filas).
Implementación con pseudo-elemento ::after (no box-shadow inset). Dos motivos:
1) Orden de pintado CSS: el border-right de la cabecera (1px gris) se pinta
DESPUÉS del box-shadow inset, tapando 1px del verde y dejando solo 2px
visibles. Un ::after absoluto se pinta sobre el border.
2) Las filas freeze (rows 3-12) ya usan box-shadow inset para su separador
gris/oscuro. Como box-shadow no se acumula entre reglas y .freeze-row>th
tiene mayor especificidad que .row-header-sel, la línea verde no se
aplicaba en cabeceras de filas freeze. El ::after es un layer independiente
que coexiste con cualquier box-shadow.
Es además coherente con el resto del CSS de selección: col-sel, row-sel y
cell-sel usan también pseudo-elementos. */
.rack thead th.col-header-sel,
.rack tbody th.row-header-sel{
background:var(--excel-header-selected-bg)!important;
color:var(--excel-header-selected-text)!important;
font-weight:bold
}
.rack thead th.col-header-sel::after,
.rack tbody th.row-header-sel::after{
content:"";position:absolute;
background:var(--excel-selection-border);
pointer-events:none;
z-index:2
}
.rack thead th.col-header-sel::after{
left:0;right:0;bottom:0;height:3px
}
.rack tbody th.row-header-sel::after{
top:0;bottom:0;right:0;width:3px
}
.rot90{writing-mode:vertical-rl;transform:rotate(180deg);text-align:center;white-space:nowrap;line-height:1}
.rot-90{writing-mode:vertical-lr;transform:rotate(180deg);text-align:center;white-space:nowrap;line-height:1}
.statusbar{display:flex;align-items:center;gap:24px;padding:4px 16px;
background:#f3f3f3;border-top:1px solid #d0d0d0;font-size:11px;color:#444;flex-shrink:0}
.statusbar .stat strong{font-weight:600;color:#222}
.statusbar .stat .val{color:#1f7a4d;font-weight:600}
.statusbar .footnote{margin-left:auto;color:#999;font-size:10px;font-style:italic}
.ha-left{text-align:left}.ha-right{text-align:right}.ha-center{text-align:center}
/* ════════════════════════════════════════════════════════════════════════
LOGIN OVERLAY — Yeti Login adaptado de @darin-senneff
(codepen.io/m3eu/pen/VwYBbwO) con paleta corporativa Bajondillo real
extraída del logo: marrones cálidos + naranjas/dorados del sol.
──────────────────────────────────────────────────────────────────────── */
:root{
/* Paleta Bajondillo extraída por análisis cromático del logo oficial */
--bj-deep:#1a0a08; /* marrón oscuro casi negro (fondo del logo) */
--bj-brown:#6c3024; /* marrón cálido medio (texto, contornos) */
--bj-sun-red:#b44830; /* rojo-naranja del centro del sol (CTA) */
--bj-sun:#cc6c3c; /* naranja-dorado principal del sol */
--bj-sun-light:#d89054; /* dorado claro (destacados) */
--bj-cream:#fff2e0; /* crema (fondos sutiles) */
--bj-card-bg:#fdfaf6; /* fondo card cremoso */
--bj-text:#3a1f15; /* texto principal (marrón profundo) */
--bj-text-muted:#8a6b5d; /* texto secundario */
--bj-input-bg:#faf3eb; /* fondo inputs */
--bj-input-border:#d4b9a3; /* borde inputs */
}
/* Overlay full-screen con fondo de imagen del hotel + capa cálida */
#login-screen{
position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;
display:flex;align-items:center;justify-content:center;
/* Background: imagen del hotel detrás con gradient cálido encima para
dar profundidad y mantener legibilidad de la card sobre ella. */
background:
linear-gradient(135deg,rgba(26,10,8,.78) 0%,rgba(108,48,36,.55) 50%,rgba(204,108,60,.45) 100%),
url('bg-hotel.jpg?v=20260514080500') center/cover no-repeat fixed;
opacity:1;
transition:opacity .55s cubic-bezier(.4,0,.2,1),visibility 0s .55s;
font-family:'Source Sans Pro','Segoe UI',Arial,Helvetica,sans-serif;
font-size:14px;
overflow:auto;
}
#login-screen.hidden{opacity:0;visibility:hidden;pointer-events:none}
/* Patrón sutil de viñeta para realzar la card sin tapar el hotel */
#login-screen::after{
content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;
background:radial-gradient(ellipse at center,transparent 0%,rgba(26,10,8,.35) 100%);
}
/* La card del Yeti — proporcional al codepen original pero con paleta cálida */
.login-card{
position:relative;z-index:1;
width:90%;max-width:380px;
background:var(--bj-card-bg);
margin:auto;padding:1.5em 2em 1.75em;
border:solid 1px #e8dccc;border-radius:.6em;
box-shadow:0 25px 50px -12px rgba(26,10,8,.55),0 8px 24px rgba(108,48,36,.3);
display:flex;flex-direction:column;align-items:stretch;
animation:bj-card-in .6s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes bj-card-in{
from{opacity:0;transform:translateY(20px) scale(.96)}
to{opacity:1;transform:translateY(0) scale(1)}
}
.login-card.shake{animation:bj-shake .4s ease}
@keyframes bj-shake{
0%,100%{transform:translateX(0)}
20%,60%{transform:translateX(-10px)}
40%,80%{transform:translateX(10px)}
}
/* Logo oficial del hotel en la cabecera de la card.
El PNG tiene fondo transparente (alpha anti-aliased), por lo que se
usa filter:drop-shadow que sigue los contornos alpha del logo en vez
de box-shadow que aplicaría sombra al rectángulo invisible. */
.login-card .brand{
text-align:center;margin:0 auto .3em;line-height:0;
}
.login-card .brand img{
height:90px;width:auto;display:inline-block;
filter:drop-shadow(0 2px 4px rgba(26,10,8,.25));
}
/* Contenedor circular del Yeti — borde cálido en vez del azul original */
.login-card .svgContainer{
position:relative;width:170px;height:170px;margin:.2em auto .8em;
border-radius:50%;background:none;
border:solid 2.5px var(--bj-brown);
overflow:hidden;pointer-events:none;
}
.login-card .svgContainer>div{
position:relative;width:100%;height:0;overflow:hidden;padding-bottom:100%;
}
.login-card .svgContainer .mySVG{
position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;
}
/* Inputs estilo Yeti pero con paleta cálida */
.login-card .inputGroup{margin:0 0 1.3em;padding:0;position:relative}
.login-card .inputGroup:last-of-type{margin-bottom:0}
.login-card label{
margin:0 0 8px;display:block;
font-size:1em;color:var(--bj-brown);font-weight:700;font-family:inherit;
letter-spacing:.3px;
}
.login-card input[type=text],.login-card input[type=password]{
display:block;margin:0;padding:0 1em;
background-color:var(--bj-input-bg);
border:solid 2px var(--bj-brown);border-radius:4px;-webkit-appearance:none;
box-sizing:border-box;width:100%;height:48px;
font-size:1.1em;color:var(--bj-text);font-weight:600;font-family:inherit;
transition:box-shadow .2s linear,border-color .25s ease-out;
}
.login-card input[type=text]{padding:12px 1em 0}
.login-card input[type=text]:focus,.login-card input[type=password]:focus{
outline:none;
box-shadow:0 2px 10px rgba(108,48,36,.15);
border-color:var(--bj-sun);
background:#fff;
}
/* Botón principal con gradient cálido (rojo-naranja del logo) */
.login-card button{
display:block;margin:0;padding:.5em 1em;
background:linear-gradient(135deg,var(--bj-sun-red),var(--bj-sun));
border:none;border-radius:4px;
box-sizing:border-box;
width:100%;height:50px;
font-size:1.05em;color:#fff;font-weight:700;font-family:inherit;
letter-spacing:.6px;text-transform:uppercase;
cursor:pointer;
box-shadow:0 4px 14px rgba(180,72,48,.4);
transition:background .2s ease-out,box-shadow .2s,transform .12s,filter .2s;
}
.login-card button:hover{
filter:brightness(1.06);
box-shadow:0 6px 20px rgba(180,72,48,.5);
transform:translateY(-1px);
}
.login-card button:active{transform:translateY(0);filter:brightness(.95)}
.login-card button:disabled{opacity:.65;cursor:wait}
/* Mensaje de error y footer pequeño */
.login-card .login-error{
display:none;
padding:.55em .8em;margin:0 0 1em;
background:#fce4dc;color:#8b2a1a;
border-left:3px solid var(--bj-sun-red);
border-radius:4px;font-size:.85em;
}
.login-card .login-error.show{display:block;animation:bj-card-in .25s ease}
.login-card .login-footer{
margin-top:1.3em;font-size:.75em;color:var(--bj-text-muted);
text-align:center;letter-spacing:.3px;
}
/* Botón de logout en el toolbar del rack — paleta cálida */
.toolbar .logout-btn{
margin-left:8px;padding:0 10px;height:22px;
border:1px solid #b0b0b0;background:#fff;border-radius:2px;
cursor:pointer;font-size:11px;color:#444;font-family:inherit;
}
.toolbar .logout-btn:hover{background:#f3f3f3;border-color:#888}
/* Alineaciones específicas de columnas (verificadas contra PDF) */
td[data-c="2"]{text-align:left !important}
td[data-c="35"],td[data-c="37"],td[data-c="39"]{text-align:right !important}
/* Filas separadoras (alturas reducidas como Excel) */
.rack tr.sep-row{height:calc(4px*var(--scale))}
.rack tr.sep-row>td,.rack tr.sep-row>th{
height:calc(4px*var(--scale));font-size:0;line-height:0;padding:0;
border-bottom:1px solid #E5E5E5
}
/* Trama LIGHTGRAY 25% del Excel original (puntos negros sobre blanco al 25%) */
.rack td.pattern-25{
background-color:#ffffff;
background-image:url("data:image/svg+xml;utf8,");
background-size:4px 4px;
background-repeat:repeat
}
/* Compensación de rendering web vs Office: en celdas mergeadas con texto
(colspan>1), Arial Bold a tamaños pequeños rinde ligeramente más ancho
en el navegador que en Excel. Un letter-spacing muy sutil libera ~1%
de ancho — imperceptible donde hay aire, suficiente donde apretaba
(CANELA PARTY y similares). No afecta a celdas no mergeadas. */
.rack td[colspan]:not([colspan="1"]),
.rack th[colspan]:not([colspan="1"]){letter-spacing:-0.02em}
/* Celdas con texto en varias líneas: etiquetas largas de la columna B que
en el Excel ocupan 2 líneas por "Wrap Text" (p.ej. "Precio medio TOTAL
(ANITA)"). El salto va explícito como en el HTML; esta regla permite
que la línea fluya (el resto del rack mantiene white-space:nowrap) y
compacta el interlineado para encajar en la altura de fila que el .xls ya
define para estas filas. Pensada para que un futuro importador BIFF8
aplique .cell-multiline + a cualquier celda con wrap. */
.rack td.cell-multiline{white-space:normal;line-height:1.15}
}
@layer extracted-inline {
/* Generadas automáticamente desde los style="..." del mockup.
* Ordenadas por frecuencia descendente. */
.sx001{color:#D9D9D9}
.sx002{color:#D9D9D9;font-size:calc(8.0pt*var(--scale))}
.sx003{background-color:#CCFFCC;border-left:1px solid #808080;border-top:1px solid #808080;border-bottom:1px solid #808080}
.sx004{font-size:calc(8.0pt*var(--scale));border-left:1px solid #808080;border-top:1px solid #808080;border-bottom:1px solid #808080}
.sx005{font-size:calc(8.0pt*var(--scale))}
.sx006{font-size:calc(8.0pt*var(--scale));border-left:1px solid #808080;border-top:1px solid #808080}
.sx007{color:#974706;font-size:calc(8.0pt*var(--scale))}
.sx008{height:calc(17px*var(--scale))}
.sx009{border-left:2px solid #000000}
.sx010{border-right:2px solid #000000}
.sx011{height:calc(4px*var(--scale))}
.sx012{border-bottom:2px solid #000000}
.sx013{border-top:2px solid #000000}
.sx014{font-size:calc(9.0pt*var(--scale));border-left:1px solid #808080;border-top:1px solid #808080;border-bottom:1px solid #808080}
.sx015{background-color:#CCFFCC;border:1px solid #808080}
.sx016{font-size:calc(9.0pt*var(--scale))}
.sx017{background-color:#FFCC00;font-size:calc(8.0pt*var(--scale));border:1px solid #808080}
.sx018{color:#FF0000}
.sx019{background-color:#FFCCCC;border-left:1px solid #808080;border-top:1px solid #808080}
.sx020{background-color:#FFCCCC;border-left:1px solid #808080;border-top:1px solid #808080;border-bottom:1px solid #808080}
.sx021{background-color:#CCFFCC;border-top:1px solid #808080;border-right:1px solid #808080;border-bottom:1px solid #808080}
.sx022{color:#FF0000;font-size:calc(8.0pt*var(--scale))}
.sx023{background-color:#FF0000;color:#FFFFFF;font-size:calc(8.0pt*var(--scale));border-left:1px solid #808080;border-top:1px solid #808080;border-bottom:1px solid #808080}
.sx024{height:calc(18px*var(--scale))}
.sx025{color:#D9D9D9;font-size:calc(8.0pt*var(--scale));border-left:1px solid #808080;border-top:1px solid #808080}
.sx026{background-color:#FFCC00;font-size:calc(8.0pt*var(--scale));border-left:1px solid #808080;border-top:1px solid #808080;border-bottom:1px solid #808080}
.sx027{border:1px solid #808080}
.sx028{background-color:#FFFF00;color:#FF0000;font-size:calc(8.0pt*var(--scale));border-left:1px solid #808080;border-top:1px solid #808080;border-bottom:1px solid #808080}
.sx029{color:#969696;font-size:calc(8.0pt*var(--scale))}
.sx030{background-color:#CCFFCC;color:#FF0000;border-left:1px solid #808080;border-top:1px solid #808080;border-bottom:1px solid #808080}
.sx031{height:calc(33px*var(--scale))}
.sx032{font-size:calc(8.0pt*var(--scale));border-left:2px solid #000000}
.sx033{font-size:calc(8.0pt*var(--scale));border-right:2px solid #000000}
.sx034{color:#FF0000;font-size:calc(9.0pt*var(--scale));border-left:1px solid #808080;border-top:1px solid #808080;border-bottom:1px solid #808080}
.sx035{background-color:#FFCCCC;font-size:calc(8.0pt*var(--scale));border-left:1px solid #808080;border-top:1px solid #808080}
.sx036{font-size:calc(8.0pt*var(--scale));border:1px solid #808080}
.sx037{border-left:1px solid #808080;border-top:1px solid #808080}
.sx038{height:calc(42px*var(--scale))}
.sx039{height:calc(10px*var(--scale))}
.sx040{color:#974706;font-size:calc(8.0pt*var(--scale));border-left:1px solid #808080;border-top:1px solid #808080;border-right:1px solid #808080}
.sx041{background-color:#FFCC00;font-size:calc(8.0pt*var(--scale));border-left:1px solid #808080;border-top:1px solid #808080}
.sx042{background-color:#FF5050;border:1px solid #808080}
.sx043{border-left:1px solid #808080;border-top:1px solid #808080;border-bottom:1px solid #808080}
.sx044{font-size:calc(8.0pt*var(--scale));border-left:1px solid #808080;border-top:1px solid #808080;border-right:1px solid #808080}
.sx045{width:calc(26px*var(--scale));min-width:calc(26px*var(--scale));max-width:calc(26px*var(--scale))}
.sx046{background-color:#FFCC00;font-size:calc(8.0pt*var(--scale))}
.sx047{background-color:#FFFF00;color:#FF0000;font-size:calc(8.0pt*var(--scale));border-left:1px solid #808080;border-top:1px solid #808080}
.sx048{font-size:calc(9.0pt*var(--scale));border:1px solid #808080}
.sx049{background-color:#CCFFCC;border-top:1px solid #808080;border-bottom:1px solid #808080}
.sx050{background-color:#FF0000;color:#FFFFFF;font-size:calc(8.0pt*var(--scale));border:1px solid #808080}
.sx051{background-color:#FF5050;font-size:calc(8.0pt*var(--scale));border-left:1px solid #808080;border-top:1px solid #808080}
.sx052{color:#974706;font-size:calc(8.0pt*var(--scale));border:1px solid #808080}
.sx053{background-color:#FDE9D9;font-size:calc(8.0pt*var(--scale));border-left:1px solid #808080;border-top:1px solid #808080;border-bottom:1px solid #808080}
.sx054{background-color:#FF5050;font-size:calc(8.0pt*var(--scale));border-left:1px solid #808080;border-top:1px solid #808080;border-right:1px solid #808080}
.sx055{background-color:#CCFFCC;);border:1px solid #808080}
.sx056{background-color:#FFCCCC;border:1px solid #808080}
.sx057{border-left:2px solid #000000;border-top:2px solid #000000}
.sx058{border-top:2px solid #000000;border-right:2px solid #000000}
.sx059{border-left:2px solid #000000;border-bottom:2px solid #000000}
.sx060{border-right:2px solid #000000;border-bottom:2px solid #000000}
.sx061{background-color:#FFCC00;font-size:calc(8.0pt*var(--scale));border-left:1px solid #808080;border-top:1px solid #808080;border-right:1px solid #808080}
.sx062{background-color:#FF5050;font-size:calc(8.0pt*var(--scale));border:1px solid #808080}
.sx063{height:calc(20px*var(--scale))}
.sx064{background-color:#FFFF00;color:#FF0000;font-size:calc(8.0pt*var(--scale));border:2px solid #000000}
.sx065{background-color:#FF5050;font-size:calc(8.0pt*var(--scale))}
.sx066{background-color:#CCFFCC;font-size:calc(8.0pt*var(--scale))}
.sx067{background-color:#FFC000;font-size:calc(8.0pt*var(--scale));border-left:1px solid #808080;border-top:1px solid #808080;border-right:1px solid #808080}
.sx068{color:#974706;font-size:calc(8.0pt*var(--scale));border-bottom:1px solid #974706}
.sx069{color:#974706;font-size:calc(9.0pt*var(--scale));border-bottom:1px solid #974706}
.sx070{background-color:#FFCCCC;font-size:calc(8.0pt*var(--scale))}
.sx071{background-color:#FFC000;font-size:calc(8.0pt*var(--scale));border-left:1px solid #808080;border-top:1px solid #808080}
.sx072{font-size:calc(9.0pt*var(--scale));border-top:2px solid #000000}
.sx073{font-size:calc(9.0pt*var(--scale));border-bottom:2px solid #000000}
.sx074{background-color:#FF5050;font-size:calc(8.0pt*var(--scale));border-left:1px solid #808080;border-top:1px solid #808080;border-bottom:1px solid #808080}
.sx075{background-color:#FDE9D9;font-size:calc(8.0pt*var(--scale));border-left:1px solid #808080;border-top:1px solid #808080}
.sx076{height:calc(34px*var(--scale))}
.sx077{background-color:#FF5050;color:#D9D9D9;border-top:1px solid #808080;border-bottom:1px solid #808080}
.sx078{background-color:#FF6600;font-size:calc(8.0pt*var(--scale));border-left:1px solid #808080;border-top:1px solid #808080;border-bottom:1px solid #808080}
.sx079{font-size:calc(8.0pt*var(--scale));border-left:1px solid #808080;border-right:1px solid #808080}
.sx080{background-color:#CCFFCC;border-left:1px solid #808080;border-top:1px solid #808080}
.sx081{font-size:calc(8.0pt*var(--scale));border-top:2px solid #000000}
.sx082{background-color:#FF5050;color:#D9D9D9;border:1px solid #808080}
.sx083{background-color:#FF5050;font-size:calc(8.0pt*var(--scale));border-top:1px solid #808080;border-bottom:1px solid #808080}
.sx084{font-size:calc(8.0pt*var(--scale));border-left:1px solid #808080;border-right:1px solid #808080;border-bottom:1px solid #808080}
.sx085{background-color:#C0C0C0;font-size:calc(9.0pt*var(--scale))}
.sx086{width:calc(6px*var(--scale));min-width:calc(6px*var(--scale));max-width:calc(6px*var(--scale))}
.sx087{border-left:1px solid #808080;border-top:1px solid #808080;border-right:1px solid #808080}
.sx088{border-left:1px solid #808080;border-right:1px solid #808080}
.sx089{background-color:#FFCCCC;border-left:1px solid #808080;border-top:1px solid #808080;border-right:1px solid #808080}
.sx090{background-color:#CCFFCC;color:#FF0000;border:1px solid #808080}
.sx091{background-color:#FF5050;color:#D9D9D9;border-left:1px solid #808080;border-top:1px solid #808080;border-bottom:1px solid #808080}
.sx092{background-color:#FF5050;color:#D9D9D9;border-top:1px solid #808080;border-right:1px solid #808080;border-bottom:1px solid #808080}
.sx093{background-color:#FFCCCC;font-size:calc(8.0pt*var(--scale));border-left:1px solid #808080;border-top:1px solid #808080;border-bottom:1px solid #808080}
.sx094{color:#D9D9D9;font-size:calc(8.0pt*var(--scale));border-left:1px solid #808080;border-top:1px solid #808080;border-right:1px solid #808080}
.sx095{background-color:#FFFF00;color:#FF0000;font-size:calc(8.0pt*var(--scale));border:1px solid #808080}
.sx096{color:#FF0000;font-size:calc(9.0pt*var(--scale))}
.sx097{background-color:#FF6600;font-size:calc(9.0pt*var(--scale))}
.sx098{display:none}
.sx099{background-color:#FFCCCC;);border:1px solid #808080}
.sx100{border-left:1px solid #808080;border-right:1px solid #808080;border-bottom:1px solid #808080}
.sx101{background-color:#D9D9D9;font-size:calc(9.0pt*var(--scale))}
.sx102{color:#974706;font-size:calc(8.0pt*var(--scale));border-bottom:2px solid #000000}
.sx103{color:#974706;font-size:calc(8.0pt*var(--scale));border-top:2px solid #000000}
.sx104{background-color:#FDE9D9;font-size:calc(8.0pt*var(--scale));border:1px solid #808080}
.sx105{border-left:1px solid #808080;border-bottom:1px solid #808080}
.sx106{height:calc(6px*var(--scale))}
.sx107{color:#D9D9D9;font-size:calc(8.0pt*var(--scale));border-left:1px solid #808080}
.sx108{background-color:#FF5050;color:#FF0000;border-left:1px solid #808080;border-top:1px solid #808080;border-bottom:1px solid #808080}
.sx109{background-color:#FF5050;color:#FF0000;border-top:1px solid #808080;border-right:1px solid #808080;border-bottom:1px solid #808080}
.sx110{background-color:#FFC000;font-size:calc(8.0pt*var(--scale));border:1px solid #808080}
.sx111{background-color:#CCFFCC;color:#000000;border-left:1px solid #808080;border-top:1px solid #808080;border-bottom:1px solid #808080}
.sx112{color:#000000}
.sx113{background-color:#FFCCCC;font-size:calc(8.0pt*var(--scale));border-left:1px solid #808080;border-top:1px solid #808080;border-right:1px solid #808080}
.sx114{font-size:calc(8.0pt*var(--scale));border-left:1px solid #808080;border-bottom:1px solid #808080}
.sx115{background-color:#D9D9D9}
.sx116{color:#FF0000;font-size:calc(9.0pt*var(--scale));border:1px solid #808080}
.sx117{width:calc(82px*var(--scale));min-width:calc(82px*var(--scale));max-width:calc(82px*var(--scale))}
.sx118{width:calc(50px*var(--scale));min-width:calc(50px*var(--scale));max-width:calc(50px*var(--scale))}
.sx119{width:calc(54px*var(--scale));min-width:calc(54px*var(--scale));max-width:calc(54px*var(--scale))}
.sx120{width:calc(30px*var(--scale));min-width:calc(30px*var(--scale));max-width:calc(30px*var(--scale))}
.sx121{height:calc(18px*var(--scale));--top:calc(20px*var(--scale))}
.sx122{height:calc(17px*var(--scale));--top:calc(38px*var(--scale))}
.sx123{height:calc(18px*var(--scale));--top:calc(55px*var(--scale))}
.sx124{height:calc(18px*var(--scale));--top:calc(73px*var(--scale))}
.sx125{background-color:#FFFF00;color:#FF0000;font-size:calc(7.0pt*var(--scale));border:2px solid #000000}
.sx126{height:calc(17px*var(--scale));--top:calc(91px*var(--scale))}
.sx127{height:calc(4px*var(--scale));--top:calc(108px*var(--scale))}
.sx128{height:calc(17px*var(--scale));--top:calc(112px*var(--scale))}
.sx129{background-color:#FDE9D9;font-size:calc(8.0pt*var(--scale))}
.sx130{background-color:#FDE9D9;font-size:calc(8.0pt*var(--scale));border-left:1px solid #808080;border-top:1px solid #808080;border-right:1px solid #808080}
.sx131{height:calc(33px*var(--scale));--top:calc(129px*var(--scale))}
.sx132{height:calc(33px*var(--scale));--top:calc(162px*var(--scale))}
.sx133{height:calc(17px*var(--scale));--top:calc(195px*var(--scale))}
.sx134{height:calc(17px*var(--scale));--top:calc(212px*var(--scale))}
.sx135{height:calc(34px*var(--scale));--top:calc(229px*var(--scale))}
.sx136{text-decoration:line-through;background-color:#F2F2F2;font-size:calc(8.0pt*var(--scale));border:2px solid #000000}
.sx137{background-color:#FF6600;font-size:calc(8.0pt*var(--scale));border:1px solid #808080}
.sx138{background-color:#FFCC00;font-size:calc(8.0pt*var(--scale));border-top:1px solid #808080;border-right:1px solid #808080;border-bottom:1px solid #808080}
.sx139{color:#D9D9D9;font-size:calc(8.0pt*var(--scale));border-left:1px solid #808080;border-right:1px solid #808080}
.sx140{color:#D9D9D9;font-size:calc(8.0pt*var(--scale));border-right:1px solid #808080}
.sx141{background-color:#FF5050;font-size:calc(8.0pt*var(--scale));border-top:1px solid #808080}
.sx142{background-color:#CCFFCC;color:#FF0000;border-top:1px solid #808080;border-bottom:1px solid #808080}
.sx143{background-color:#FF5050;font-size:calc(8.0pt*var(--scale));border-top:1px solid #808080;border-right:1px solid #808080;border-bottom:1px solid #808080}
.sx144{background-color:#FF5050;color:#D9D9D9;font-size:calc(8.0pt*var(--scale));border:1px solid #808080}
.sx145{background-color:#FF5050;border-left:1px solid #808080;border-right:1px solid #808080;border-bottom:1px solid #808080}
.sx146{background-color:#FFCC00;font-size:calc(8.0pt*var(--scale));border-top:1px solid #808080;border-right:1px solid #808080}
.sx147{background-color:#CCFFCC;border-left:1px solid #808080;border-top:1px solid #808080;border-right:1px solid #808080}
.sx148{background-color:#FFFF00;color:#FF0000;font-size:calc(8.0pt*var(--scale));border-left:2px solid #000000;border-right:2px solid #000000;border-bottom:2px solid #000000}
.sx149{color:#974706;font-size:calc(9.0pt*var(--scale))}
.sx150{background-color:#CCFFCC;font-size:calc(9.0pt*var(--scale));border:1px solid #808080}
}