:root { --ink:#402716; --muted:#805d3e; --line:#a96832; --surface:#fff1c9ee; --soft:#ffc95e; --green:#26763a; --lime:#f6d844; --orange:#f17424; --glow:#ffe17b99; --track:#d49343; --grid:#a45b2d25; --wood1:#743d1e; --wood2:#b66027; }
[data-theme="dark"] { --ink:#fff5d8; --muted:#e7c58e; --line:#9d6636; --surface:#342114f0; --soft:#14251e; --green:#76bd42; --lime:#ffda43; --orange:#ff873c; --glow:#f8b73952; --track:#624324; --grid:#e0ad4a19; --wood1:#3f2115; --wood2:#774024; }
* { box-sizing:border-box; } body { min-height:100vh; margin:0; background:radial-gradient(ellipse at 10% 5%,#fff6afcc 0 5%,transparent 25%),radial-gradient(ellipse at 90% 100%,#ed672a80,transparent 32%),var(--soft); color:var(--ink); font-family:Trebuchet MS,Inter,ui-sans-serif,sans-serif; transition:background .4s,color .3s; } body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.45; background-image:radial-gradient(var(--grid) 1px,transparent 1px); background-size:11px 11px; }
.page-shell { position:relative; max-width:1320px; margin:auto; padding:46px 28px 26px; }.hero { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding:12px 0 35px; }.eyebrow { color:var(--green); font-size:.75rem; font-weight:900; letter-spacing:.12em; margin:0 0 7px; }.live-dot { display:inline-block; width:9px; height:9px; margin-right:4px; background:#ef4525; border:2px solid #fff2b3; border-radius:50%; box-shadow:0 0 0 0 #ef4525; animation:pulse 1.8s infinite; }.hero h1 { margin:0; font-size:clamp(2rem,4vw,3.5rem); letter-spacing:-.06em; text-shadow:2px 3px 0 #fff0a3; }.hero h1 em { color:var(--orange); font-style:normal; text-shadow:2px 3px 0 #a33e1d; }.fruit { display:inline-block; margin-left:.2em; font-size:.72em; animation:bob 1.7s ease-in-out infinite; }.subtitle { color:var(--muted); margin:9px 0 0; font-weight:600; }.hero-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }.button { border:2px solid var(--wood1); border-radius:14px 14px 17px 17px; padding:11px 16px; color:#fff7ce; background:linear-gradient(var(--wood2),var(--wood1)); box-shadow:0 4px 0 #472315,0 7px 12px #562a2e44; font:inherit; font-weight:900; cursor:pointer; transition:transform .15s,box-shadow .15s; }.button:hover { transform:translateY(-3px) rotate(-1deg); box-shadow:0 7px 0 #472315,0 11px 15px #562a2e44; }.button:active { transform:translateY(3px); box-shadow:0 1px 0 #472315; }.primary { color:#62300d; border-color:#d15b1d; background:linear-gradient(#ffe75b,#ffb729); box-shadow:0 4px 0 #c15716,0 7px 12px #562a2e44; }.secondary { color:#fff7ce; }.theme-toggle { display:flex; align-items:center; gap:5px; position:relative; width:61px; height:39px; padding:0 8px; border:2px solid var(--wood1); border-radius:20px; color:#fff6c7; background:var(--wood2); box-shadow:0 3px 0 #472315; cursor:pointer; }.theme-toggle i { position:absolute; left:4px; width:27px; height:27px; border:2px solid #b9501b; border-radius:50%; background:#ffdb4f; transition:left .25s; }.theme-toggle span { z-index:1; font-size:14px; }.theme-toggle span:last-of-type { margin-left:auto; } [data-theme="dark"] .theme-toggle i { left:27px; background:#ece9ce; }.summary { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:16px; }.metric,.panel { border:3px solid var(--wood1); border-radius:20px 20px 24px 24px; background:var(--surface); box-shadow:0 5px 0 var(--wood1),inset 0 1px #fff7d4; }.metric { position:relative; overflow:hidden; padding:20px; transition:transform .2s; }.metric::after { content:""; position:absolute; right:-24px; bottom:-28px; width:100px; height:100px; border:12px dotted var(--orange); border-radius:50%; opacity:.25; }.metric:hover { transform:translateY(-6px) rotate(-.5deg); }.metric span { color:var(--green); font-size:.86rem; font-weight:900; }.metric strong { display:block; font-size:2rem; letter-spacing:-.05em; margin:8px 0 2px; }.metric small { color:var(--muted); font-size:.71rem; font-weight:700; }.insights { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }.panel { padding:22px; }.panel h2 { font-size:1.05rem; margin:0; }.panel-title,.records-top,.dialog-header { display:flex; justify-content:space-between; align-items:start; gap:16px; }.panel-title span,.records-top p,.footnote { color:var(--muted); font-size:.82rem; margin:5px 0 0; font-weight:700; }.bars { display:grid; gap:15px; margin-top:24px; }.bar-row { display:grid; grid-template-columns:130px 1fr 44px; gap:10px; align-items:center; font-size:.82rem; font-weight:800; }.bar-track { height:14px; border:2px solid var(--wood1); border-radius:10px; background:var(--track); overflow:hidden; }.bar-fill { height:100%; border-radius:6px; background:repeating-linear-gradient(135deg,var(--green) 0 9px,#75b93c 9px 18px); box-shadow:inset 0 2px #c8ec69; transform-origin:left; animation:grow .7s ease-out both; }.bar-row:nth-child(2) .bar-fill { background:repeating-linear-gradient(135deg,#f5ce28 0 9px,#ef9b26 9px 18px); }.bar-row:nth-child(3) .bar-fill { background:repeating-linear-gradient(135deg,#ed7131 0 9px,#ffb23a 9px 18px); }.records-top { margin-bottom:18px; }.quick-search { border:2px solid var(--wood1); background:#fff4ca; padding:8px 12px; border-radius:12px; color:#895426; }.quick-search input { border:0; outline:0; color:#402716; background:transparent; font:inherit; width:210px; }.table-wrap { overflow:auto; } table { width:100%; border-collapse:collapse; min-width:870px; } th { color:var(--green); font-size:.7rem; font-weight:900; letter-spacing:.08em; text-align:left; padding:0 11px 10px; } td { border-top:2px dashed #bf8754; font-size:.85rem; font-weight:600; padding:13px 11px; white-space:nowrap; } tbody tr { transition:background .2s; } tbody tr:hover { background:#ffdb623d; }.empty { text-align:center; color:var(--muted); padding:20px 0 0; }.footnote { text-align:right; padding:4px; } dialog { color:var(--ink); width:min(620px,calc(100% - 32px)); border:3px solid var(--wood1); border-radius:20px; padding:0; background:var(--surface); box-shadow:0 10px 0 #24120d,0 18px 60px #0008; } dialog::backdrop { background:#10241bbd; backdrop-filter:blur(3px); } dialog form { padding:25px; }.icon-button { border:0; background:none; color:var(--orange); font-size:2rem; line-height:.7; cursor:pointer; }.filter-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; margin:24px 0; }.filter-grid label { color:var(--muted); display:grid; font-size:.78rem; font-weight:900; gap:7px; }.filter-grid input,.filter-grid select { border:2px solid var(--line); border-radius:10px; padding:10px; color:var(--ink); background:#fff7d9; font:inherit; }.dialog-actions { display:flex; justify-content:flex-end; gap:10px; } @keyframes pulse { 70% { box-shadow:0 0 0 8px transparent; } 100% { box-shadow:0 0 0 0 transparent; } } @keyframes grow { from { transform:scaleX(0); } } @keyframes bob { 50% { transform:translateY(-7px) rotate(9deg); } }
@media (max-width:720px) { .page-shell { padding:28px 16px; }.hero { align-items:start; flex-direction:column; }.summary { grid-template-columns:1fr 1fr; }.insights { grid-template-columns:1fr; }.records-top { flex-direction:column; }.quick-search,.quick-search input { width:100%; }.filter-grid { grid-template-columns:1fr; }.bar-row { grid-template-columns:95px 1fr 38px; } }

/* Aventura tropical con contraste oscuro y energía orgánica. */
:root { --ink:#38200e; --muted:#76543c; --line:#91502b; --surface:#fff0c7ef; --soft:#dc823a; --green:#25713c; --lime:#f6d844; --orange:#f17424; --glow:#bc28c275; --track:#c67d42; --grid:#74321f2b; --wood1:#5d2c16; --wood2:#9f4d22; --ooze:#76127d; --ooze-lite:#dd4dd4; }
[data-theme="dark"] { --ink:#fff4fb; --muted:#d5afda; --line:#75417e; --surface:#1b1025ed; --soft:#07090f; --green:#7bd04c; --lime:#eaf35e; --orange:#ff8838; --glow:#ce2fd58a; --track:#39203f; --grid:#b42fd326; --wood1:#2b1734; --wood2:#55205f; --ooze:#86148f; --ooze-lite:#ee54e0; }
body { background:radial-gradient(ellipse at 10% 5%,#ffd167a8 0 5%,transparent 25%),radial-gradient(ellipse at 90% 100%,var(--ooze),transparent 32%),var(--soft); }
body::after { content:""; position:fixed; z-index:-1; pointer-events:none; width:38vw; height:16vw; min-width:280px; min-height:120px; right:-5vw; top:-5vw; background:radial-gradient(ellipse at 50% 0,var(--ooze-lite),var(--ooze) 48%,transparent 51%); opacity:.48; filter:blur(2px); transform:rotate(-17deg); }
.hero h1 em { text-shadow:2px 3px 0 var(--ooze); }.button { box-shadow:0 4px 0 #241028,0 7px 14px #67187577; }.button:hover { box-shadow:0 7px 0 #241028,0 11px 18px #ba27cb77; }.primary { border-color:var(--ooze); color:#3a123f; box-shadow:0 4px 0 #9e1d9f,0 7px 12px #562a2e44; }.theme-toggle { box-shadow:0 3px 0 #241028; }.theme-toggle i { border-color:var(--ooze); } [data-theme="dark"] .theme-toggle i { background:var(--ooze-lite); }.metric::after { border-color:var(--ooze); }.bar-fill { box-shadow:inset 0 2px #c8ec69,0 0 11px var(--glow); }.bar-row:nth-child(2) .bar-fill { background:repeating-linear-gradient(135deg,var(--ooze-lite) 0 9px,var(--ooze) 9px 18px); }.quick-search { border-color:var(--wood1); }.icon-button { color:var(--ooze-lite); } tbody tr:hover { background:var(--glow); }
.site-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 4px 0; }.watermark { margin:0; color:var(--muted); font-size:.82rem; font-weight:900; letter-spacing:.06em; opacity:.8; }

/* Modo oscuro: acabado de smoking — negro, marfil y plata. */
[data-theme="dark"] { --ink:#f8f6ee; --muted:#b8b8b4; --line:#53555b; --surface:#111216ed; --soft:#050506; --green:#e8e6dc; --lime:#ffffff; --orange:#d8d7d0; --glow:#ffffff1c; --track:#27282c; --grid:#ffffff10; --wood1:#08090b; --wood2:#222328; --ooze:#76777b; --ooze-lite:#e7e5de; }
[data-theme="dark"] body { background:radial-gradient(ellipse at 10% 5%,#ffffff10 0 5%,transparent 25%),radial-gradient(ellipse at 90% 100%,#3d3e42,transparent 32%),#050506; }
[data-theme="dark"] body::after { background:radial-gradient(ellipse at 50% 0,#f1f0e940,#54555a 48%,transparent 51%); opacity:.35; }
[data-theme="dark"] .hero h1 { text-shadow:2px 3px 0 #000; } [data-theme="dark"] .hero h1 em { color:#f8f6ee; text-shadow:2px 3px 0 #505156; }
[data-theme="dark"] .eyebrow,[data-theme="dark"] .metric span,[data-theme="dark"] th { color:#e9e7df; } [data-theme="dark"] .live-dot { background:#f8f6ee; border-color:#85868a; }
[data-theme="dark"] .metric,.panel { box-shadow:0 5px 0 #050506,inset 0 1px #ffffff20; } [data-theme="dark"] .metric::after { border-color:#d8d7d0; opacity:.14; }
[data-theme="dark"] .primary { color:#111216; border-color:#f8f6ee; background:linear-gradient(#fff,#d9d8d1); box-shadow:0 4px 0 #73747a,0 7px 12px #0008; }
[data-theme="dark"] .button,[data-theme="dark"] .theme-toggle { box-shadow:0 4px 0 #050506,0 7px 14px #0009; } [data-theme="dark"] .button:hover { box-shadow:0 7px 0 #050506,0 11px 18px #0009; }
[data-theme="dark"] .bar-fill { background:repeating-linear-gradient(135deg,#f8f6ee 0 9px,#9c9da0 9px 18px); box-shadow:inset 0 2px #fff,0 0 11px #fff2; } [data-theme="dark"] .bar-row:nth-child(2) .bar-fill { background:repeating-linear-gradient(135deg,#deddd7 0 9px,#77787d 9px 18px); } [data-theme="dark"] .bar-row:nth-child(3) .bar-fill { background:repeating-linear-gradient(135deg,#aaaab0 0 9px,#4a4b51 9px 18px); }
[data-theme="dark"] .quick-search,[data-theme="dark"] .filter-grid input,[data-theme="dark"] .filter-grid select { color:#202126; background:#f5f3eb; border-color:#74757a; } [data-theme="dark"] .quick-search input { color:#202126; } [data-theme="dark"] .icon-button { color:#f8f6ee; }

.update-status { display:flex; align-items:center; gap:9px; min-width:190px; min-height:43px; padding:7px 10px; border:2px solid var(--wood1); border-radius:8px; color:var(--ink); background:var(--surface); box-shadow:0 3px 0 var(--wood1); }
.update-status > span:last-child { display:grid; gap:2px; }
.update-status small { color:var(--muted); font-size:.61rem; font-weight:900; letter-spacing:.08em; }
.update-status time { font-size:.76rem; font-weight:900; white-space:nowrap; }
.sync-dot { flex:0 0 auto; width:10px; height:10px; border:2px solid var(--surface); border-radius:50%; background:var(--green); box-shadow:0 0 0 2px var(--green); }
[data-theme="dark"] .update-status { box-shadow:0 3px 0 #050506; }
@media (max-width:980px) { .hero { align-items:flex-start; flex-direction:column; }.hero-actions { width:100%; }.update-status { margin-right:auto; } }
@media (max-width:720px) { .update-status { width:100%; }.update-status time { white-space:normal; }.hero-actions .button { flex:1 1 180px; } }