/* Tema «Tycoon» — solo activo cuando (véase theme-boot en index). */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');
html[data-theme="tycoon"] body {
image-rendering: pixelated;
image-rendering: -moz-crisp-edges;
image-rendering: crisp-edges;
}
.theme-tycoon-decor {
display: none;
}
html[data-theme="tycoon"] .theme-tycoon-decor {
display: block;
}
html[data-theme="tycoon"] {
--wood-1: #8b5a2b;
--wood-2: #a87642;
--brick-2: #c25040;
--gold-1: #d4a017;
--gold-2: #f4c430;
--grass-2: #6cb555;
--sky-1: #5fa3d1;
--sky-2: #87cee5;
--paper: #f4e8c8;
--paper-2: #e8d8a8;
--ty-ink: #2a1810;
--ty-shadow: #1a0f08;
--metal-3: #b8b8b8;
--metal-2: #8e8e8e;
--bg: transparent;
--s1: #f4e8c8;
--s2: #e8d8a8;
--s3: #dccca0;
--s4: #d0c090;
--border: #6a4a30;
--border2: #8b5a2b;
--accent: #b08010;
--accent-hover: #d4a017;
--accent2: #3a7a3a;
--accent3: #a0392a;
--accent4: #3a5a8a;
--text: #2a1810;
--text-soft: #3a2818;
--muted: #5a4030;
--muted2: #6a5040;
--mono: 'VT323', monospace;
--serif: 'VT323', monospace;
--shadow: 4px 4px 0 var(--ty-shadow);
--shadow-hover: 4px 4px 0 rgba(0, 0, 0, 0.35);
--radius: 4px;
--radius-sm: 2px;
}
html[data-theme="tycoon"] body {
font-family: var(--mono);
font-size: 20px;
line-height: 1.25;
color: var(--ty-ink);
background:
radial-gradient(circle at 20% 30%, var(--sky-2) 0%, transparent 25%),
radial-gradient(circle at 70% 60%, var(--sky-2) 0%, transparent 30%),
linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 72%, var(--accent2) 100%);
background-attachment: fixed;
min-height: 100vh;
}
html[data-theme="tycoon"] .theme-tycoon-decor {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1;
overflow: hidden;
}
.theme-tycoon-decor .cloud {
position: fixed;
background: #fff;
width: 64px;
height: 16px;
box-shadow:
-16px -8px 0 0 white,
16px -8px 0 0 white,
-8px -16px 0 0 white,
8px -16px 0 0 white,
0 -24px 0 0 white;
}
.theme-tycoon-decor .cloud:nth-child(1) {
top: 50px;
left: -100px;
animation: bg-drift-a 95s linear infinite;
}
.theme-tycoon-decor .cloud:nth-child(2) {
top: 120px;
left: -160px;
animation: bg-drift-b 115s linear infinite;
}
.theme-tycoon-decor .cloud:nth-child(3) {
top: 30px;
left: -220px;
animation: bg-drift-c 135s linear infinite;
}
@keyframes bg-drift-a {
from {
transform: translateX(0);
}
to {
transform: translateX(calc(100vw + 280px));
}
}
@keyframes bg-drift-b {
from {
transform: translateX(0) scale(0.72);
}
to {
transform: translateX(calc(100vw + 280px)) scale(0.72);
}
}
@keyframes bg-drift-c {
from {
transform: translateX(0) scale(0.52);
}
to {
transform: translateX(calc(100vw + 280px)) scale(0.52);
}
}
.theme-tycoon-decor .skyline {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 72px;
z-index: 2;
background: linear-gradient(transparent 40%, var(--ty-ink) 40%);
opacity: 0.85;
}
.theme-tycoon-decor .skyline::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 52px;
background: repeating-linear-gradient(
90deg,
var(--ty-ink) 0 3%,
transparent 3% 6%,
var(--ty-ink) 6% 12%,
transparent 12% 15%
);
mask-image: linear-gradient(180deg, transparent 0%, #000 45%);
}
html[data-theme="tycoon"] nav,
html[data-theme="tycoon"] .submenu {
position: relative;
z-index: 10;
}
html[data-theme="tycoon"] nav {
background: linear-gradient(180deg, var(--wood-2) 0%, var(--wood-1) 100%);
border-bottom: 4px solid var(--ty-shadow);
box-shadow: inset 0 -2px 0 0 var(--ty-shadow), inset 0 2px 0 0 #c89060, 0 4px 0 rgba(0, 0, 0, 0.25);
backdrop-filter: none;
padding: 6px 16px 8px;
}
html[data-theme="tycoon"] .nav-brand {
font-family: 'Press Start 2P', monospace;
font-size: 11px;
color: var(--paper);
text-shadow: 2px 2px 0 var(--ty-shadow);
border-right-color: var(--ty-shadow);
padding: 12px 16px 12px 0;
}
html[data-theme="tycoon"] .nav-brand em {
color: var(--gold-2);
font-style: normal;
}
html[data-theme="tycoon"] .nav-tab {
font-family: 'Press Start 2P', monospace;
font-size: 7px;
line-height: 1.5;
padding: 10px 10px 12px;
color: var(--paper);
background: linear-gradient(180deg, var(--metal-3) 0%, var(--metal-2) 45%, #6a6a6a 100%);
border: 2px solid var(--ty-shadow);
border-bottom-width: 3px;
margin: 4px 2px 0;
border-radius: 2px;
text-shadow: 1px 1px 0 var(--ty-shadow);
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.35);
border-bottom: 2px solid transparent;
letter-spacing: 0.04em;
}
html[data-theme="tycoon"] .nav-tab:hover {
background: linear-gradient(180deg, #d8b870 0%, var(--gold-1) 100%);
color: var(--ty-ink);
}
html[data-theme="tycoon"] .nav-tab.active {
background: linear-gradient(180deg, var(--gold-1) 0%, #906010 100%);
color: var(--ty-ink);
border-bottom-color: var(--ty-shadow);
}
html[data-theme="tycoon"] .nav-status {
color: var(--paper);
font-family: 'Press Start 2P', monospace;
font-size: 6px;
}
html[data-theme="tycoon"] .status-dot {
border-radius: 0;
width: 8px;
height: 8px;
border: 1px solid var(--ty-shadow);
}
html[data-theme="tycoon"] .status-dot.ok {
background: var(--grass-2);
box-shadow: 0 0 4px var(--grass-2);
}
html[data-theme="tycoon"] .btn-logout {
font-family: 'Press Start 2P', monospace;
font-size: 6px;
color: var(--paper);
border: 2px solid var(--ty-shadow);
background: linear-gradient(180deg, #8a4040 0%, var(--brick-2) 100%);
border-radius: 2px;
padding: 8px 10px;
}
html[data-theme="tycoon"] .btn-logout:hover {
color: var(--gold-2);
border-color: var(--gold-1);
}
html[data-theme="tycoon"] .submenu {
background: linear-gradient(180deg, #4a3220 0%, #3a2818 100%);
border-bottom: 3px solid var(--ty-shadow);
top: 52px;
}
html[data-theme="tycoon"] .subtab {
font-family: 'Press Start 2P', monospace;
font-size: 6px;
color: var(--paper-2);
}
html[data-theme="tycoon"] .subtab.active {
color: var(--gold-2);
}
html[data-theme="tycoon"] main {
position: relative;
z-index: 5;
padding-bottom: 100px;
}
html[data-theme="tycoon"] .page-title,
html[data-theme="tycoon"] .kpi-value,
html[data-theme="tycoon"] .modal-title,
html[data-theme="tycoon"] .login-title {
font-family: 'Press Start 2P', monospace;
font-weight: normal;
letter-spacing: 0.02em;
}
html[data-theme="tycoon"] .page-title {
font-size: 18px;
line-height: 1.4;
text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.15);
}
html[data-theme="tycoon"] .kpi-value {
font-size: 22px;
}
html[data-theme="tycoon"] .kpi,
html[data-theme="tycoon"] .card,
html[data-theme="tycoon"] .salon-item,
html[data-theme="tycoon"] .mesa,
html[data-theme="tycoon"] .login-box {
border-width: 3px;
border-color: var(--ty-shadow);
box-shadow: var(--shadow);
}
html[data-theme="tycoon"] .kpi:hover,
html[data-theme="tycoon"] .card:hover {
transform: translate(1px, 1px);
box-shadow: 2px 2px 0 var(--ty-shadow);
}
html[data-theme="tycoon"] .notification {
border-width: 3px;
background: var(--paper-2);
}
html[data-theme="tycoon"] .btn-primary,
html[data-theme="tycoon"] .btn-secondary {
font-family: 'Press Start 2P', monospace;
font-size: 8px;
border: 2px solid var(--ty-shadow);
border-radius: 2px;
box-shadow: 2px 2px 0 var(--ty-shadow);
}
html[data-theme="tycoon"] .btn-primary {
background: linear-gradient(180deg, var(--gold-2) 0%, var(--gold-1) 100%);
color: var(--ty-ink);
}
html[data-theme="tycoon"] .btn-secondary {
background: var(--paper-2);
color: var(--ty-ink);
}
html[data-theme="tycoon"] .btn-mini {
font-size: 7px;
padding: 5px 8px;
}
html[data-theme="tycoon"] .search-input {
font-family: var(--mono);
font-size: 18px;
border-width: 3px;
background: var(--paper);
}
html[data-theme="tycoon"] table thead th {
font-family: 'Press Start 2P', monospace;
font-size: 7px;
background: #4a3220;
color: var(--paper-2);
}
html[data-theme="tycoon"] tbody td {
border-bottom-color: rgba(42, 24, 16, 0.25);
}
html[data-theme="tycoon"] .lc-hint.ok { color: #2b6b2b; }
html[data-theme="tycoon"] .lc-hint.warn { color: #9f2f20; }
html[data-theme="tycoon"] .compras-ocr-warnings {
background: #f3d7a4;
color: var(--ty-ink);
border: 2px solid #9f2f20;
}
html[data-theme="tycoon"] .compras-ocr-warnings strong { color: #9f2f20; }
html[data-theme="tycoon"] .ocr-chip {
background: var(--paper-2);
color: var(--ty-ink);
border: 2px solid var(--ty-shadow);
}
html[data-theme="tycoon"] .login-overlay {
background: rgba(26, 15, 8, 0.92);
}
html[data-theme="tycoon"] .login-title {
font-size: 16px;
line-height: 1.5;
}
html[data-theme="tycoon"] #back-to-selector {
background: var(--s1) !important;
color: var(--ty-ink) !important;
border: 3px solid var(--ty-shadow) !important;
}