/* tombstone: // removed inline styles from index.html - moved here for modularity */

/* ---- Styles extracted from index.html ---- */
:root{
  --primary:#0a2a4a;
  --secondary:#00e5ff;
  --accent:#00ff88;
  --bg:#0a0e1a;
  --card-bg:#0d1b2e;
  --text:#e0f7fa;
  --border:rgba(0,229,255,0.2);
  --glow:0 0 15px rgba(0,229,255,0.3);
  --radius:14px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-overflow-scrolling:touch;
  transition:background-image .3s ease;
  background-size:cover;
  background-position:center;
}

/* Scrollbar thin */
::-webkit-scrollbar{height:8px;width:8px}
::-webkit-scrollbar-thumb{background:var(--secondary);border-radius:8px}
::-webkit-scrollbar-track{background:transparent}

/* Header */
.header{
  position:fixed;
  top:0;left:0;right:0;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 12px;
  gap:12px;
  z-index:40;
  backdrop-filter: blur(6px);
  background:linear-gradient(180deg, rgba(10,14,26,0.65), rgba(10,14,26,0.35));
  border-bottom:1px solid var(--border);
}
.header .left{display:flex;align-items:center;gap:10px}
.logo{
  display:flex;align-items:center;gap:8px;font-family:Orbitron,monospace;color:var(--secondary);font-weight:700;font-size:18px;
}
.logo .emoji{font-size:20px}
.clock{font-family:Orbitron,monospace;color:var(--secondary);font-weight:700;font-size:16px;text-align:center;min-width:96px}
.header .right{display:flex;align-items:center;gap:8px}

/* Buttons */
.btn{
  border:0;padding:8px 10px;border-radius:8px;background:transparent;color:var(--text);cursor:pointer;font-weight:600;
  display:inline-flex;align-items:center;gap:8px;
}
.btn.primary{background:var(--accent);color:#000;border-radius:8px}
.btn.orange{background:linear-gradient(90deg,#ff8a00,#ff3b30);color:#fff}
.icon-only{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px}

/* Nav tabs */
.nav{
  margin-top:64px;
  display:flex;
  gap:8px;
  padding:8px 12px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  border-bottom:1px solid var(--border);
  background:rgba(10,14,26,0.3);
}
.tab{
  flex:0 0 auto;
  display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;color:var(--text);font-weight:600;font-size:13px;
  background:transparent;border:1px solid transparent;cursor:pointer;opacity:0.95;
}
.tab.active{background:var(--secondary);color:#000;box-shadow:var(--glow)}
.tab .icon{font-size:16px}
.tab-indicator{
  height:3px;background:var(--secondary);border-radius:3px;transition:all .25s ease;
  position:relative;top:-3px;
}

/* Main content area */
.container{
  padding:16px;
  padding-top:12px;
  margin-top:0;
  margin-bottom:24px;
  position:relative;
  top:0;
  min-height:calc(100vh - 64px - 64px);
}

/* Category block */
.category{
  margin-bottom:18px;
}
.category-header{
  display:flex;align-items:center;gap:12px;margin-bottom:10px;
}
.category-header .title{
  border-left:4px solid var(--secondary);
  padding-left:10px;font-weight:700;font-size:16px;color:var(--secondary);
}

/* Cards grid */
.grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}
.card{
  background:var(--card-bg);
  border-radius:var(--radius);
  padding:12px;
  border:1px solid var(--border);
  box-shadow:var(--glow);
  transition:transform .18s ease,box-shadow .18s ease;
  cursor:pointer;
}
.card:hover{transform:scale(1.03);box-shadow:0 0 25px rgba(0,229,255,0.5)}
.card .name{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .meta{margin-top:8px;font-size:13px;display:flex;justify-content:space-between;gap:8px;color:var(--text);opacity:0.95}

/* Modal */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,0.5);display:none;align-items:center;justify-content:center;z-index:60;
}
.modal{
  background:rgba(0,0,0,0.85);
  border-radius:12px;padding:16px;width:92%;max-width:620px;border:1px solid var(--border);
  backdrop-filter:blur(12px);
  animation:fadeInScale .28s ease forwards;
  position:relative;
}
@keyframes fadeInScale{from{opacity:0;transform:scale(0.8)}to{opacity:1;transform:scale(1)}}
.modal .close{
  position:absolute;right:12px;top:12px;width:36px;height:36px;border-radius:50%;background:#ff3b30;color:#fff;display:inline-flex;align-items:center;justify-content:center;border:0;cursor:pointer;
}
.form-row{display:flex;gap:8px;margin-top:10px;align-items:center}
.form-row .field{flex:1;display:flex;flex-direction:column;gap:6px}
.input,textarea{padding:8px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--text);outline:none}
textarea{resize:none;height:72px}

/* Save button */
.save{margin-top:12px;background:var(--accent);color:#000;padding:10px 12px;border-radius:8px;border:0;font-weight:700;cursor:pointer;display:inline-flex;gap:8px;align-items:center}
.save:hover{box-shadow:0 0 18px rgba(0,255,136,0.3)}

/* Placeholder module */
.placeholder{
  height:calc(100vh - 64px - 48px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  color:var(--text);
}
.placeholder-icon{font-size:44px;color:var(--secondary);margin-bottom:8px}
.dots{font-size:20px;margin-top:12px;letter-spacing:6px;animation:pulseDots 1s infinite}
@keyframes pulseDots{0%{opacity:0.2}50%{opacity:1}100%{opacity:0.2}}

/* Chart container sizing to keep charts constrained */
.chart-container {
  position: relative;
  height: 220px;        /* altura fija en móvil */
  width: 100%;
  max-height: 220px;
  overflow: hidden;
}

@media (min-width: 768px) {
  .chart-container {
    height: 260px;
    max-height: 260px;
  }
}

/* Ensure canvas respects container sizing */
canvas {
  max-height: 100% !important;
  max-width: 100% !important;
}

/* Toast */
.toast{
  position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.8);padding:10px 14px;border-radius:10px;border:1px solid var(--border);box-shadow:var(--glow);display:none;z-index:80
}

/* Responsive */
@media(min-width:720px){
  .header{height:72px;padding:12px 20px}
  .logo{font-size:20px}
  .clock{font-size:18px;min-width:110px}
  .container{padding:24px 32px}
  .grid{grid-template-columns:repeat(3,1fr)}
}

/* Excel Evolve styles */
.excel-wrap{background:transparent;padding:12px;overflow:auto;height:calc(100vh - 120px)}
.excel-toolbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.excel-toolbar button{background:rgba(255,255,255,0.03);border:1px solid var(--secondary);color:var(--secondary);padding:8px 10px;border-radius:8px;font-size:0.8rem;cursor:pointer}
.excel-toolbar button:hover{box-shadow:0 0 18px rgba(0,229,255,0.12);transform:translateY(-1px)}
.formula-bar{display:flex;align-items:center;gap:8px;padding:8px;border-bottom:2px solid var(--secondary);background:#0d1b2e;font-family:'Courier New',monospace;color:var(--secondary);margin-bottom:8px;border-radius:6px}
.formula-bar .cell-ref{background:transparent;color:var(--secondary);font-weight:800;padding:4px 6px;border-radius:6px}
.formula-bar .fx-label{font-weight:900;color:var(--secondary)}
.formula-bar input{flex:1;padding:8px;border-radius:6px;background:transparent;border:1px solid rgba(0,229,255,0.06);color:var(--secondary);font-family:'Courier New',monospace}

/* table */
.excel-table { border-collapse: collapse; width: 100%; font-family: 'Courier New', monospace; font-size: 0.85rem; }
.excel-table th { background: var(--primary); color: var(--secondary); border: 1px solid rgba(0,229,255,0.2); padding: 8px 12px; text-align: center; font-family: Orbitron, sans-serif; font-size: 0.75rem; position: sticky; top: 0; z-index:2; }
.excel-table td { border: 1px solid rgba(0,229,255,0.1); padding: 6px 10px; color: var(--text); background: var(--card-bg); min-width: 80px; white-space: nowrap; }
.excel-table td:focus, .excel-table td.selected { outline: 2px solid var(--accent); background: rgba(0,255,136,0.08); box-shadow: inset 0 0 8px rgba(0,255,136,0.2); }
.excel-table tr:hover td { background: rgba(0,229,255,0.05); }
.excel-table td.col-numero { color: var(--secondary); text-align:center; font-weight:700; }
.excel-table td.col-ingreso { color: #00ff88; font-weight:700; }
.excel-table td.col-stock-bajo { color: #ff4444; }
.excel-table thead th:first-child { width: 40px; }

/* totals row */
.excel-totals { position: sticky; bottom: 0; display: table-row; background: var(--primary); color: var(--accent); font-weight:800; font-family:Orbitron,monospace; z-index:3; }

/* scrollbars */
.excel-table-wrap{max-height:calc(100vh - 220px);overflow:auto;border-radius:8px;border:1px solid rgba(0,229,255,0.04)}
.excel-table-wrap::-webkit-scrollbar{width:10px;height:10px}
.excel-table-wrap::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--secondary),var(--accent));border-radius:10px}
.excel-row-num{background:rgba(0,0,0,0.12);color:var(--secondary);text-align:center;padding:6px 8px;min-width:40px}

/* Admin button pulse */
#adminBtn{animation:adminPulse 2s infinite; box-shadow:0 6px 18px rgba(255,138,0,0.08)}
@keyframes adminPulse{0%{box-shadow:0 0 0 0 rgba(255,138,0,0.12)}50%{box-shadow:0 0 18px 6px rgba(255,98,0,0.12)}100%{box-shadow:0 0 0 0 rgba(255,138,0,0.12)}}

/* Admin modal basics (dynamic modal built by admin.js uses these classes) */
.admin-modal-backdrop{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:320;background:rgba(0,0,0,0.6);backdrop-filter:blur(6px)}
.admin-modal{background:rgba(0,0,0,0.95);padding:12px;border-radius:12px;border:1px solid var(--border);max-width:920px;width:94%;color:var(--text);overflow:auto;max-height:90vh}
.admin-lock{border-radius:8px;padding:10px;border:1px solid rgba(255,255,255,0.03);margin-bottom:8px;background:var(--card-bg)}
.admin-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.admin-badge-read{background:#2ecc71;color:#000;padding:6px 8px;border-radius:999px}
.admin-badge-edit{background:#3b82f6;color:#fff;padding:6px 8px;border-radius:999px}
.admin-badge-owner{background:gold;color:#000;padding:6px 8px;border-radius:999px}
.admin-input{width:100%;padding:8px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--text)}
.admin-small{display:flex;gap:8px;align-items:center}

/* small responsive tweaks */
@media (max-width:520px){ .excel-toolbar{flex-direction:column} }
@media(min-width:1024px){
  .grid{grid-template-columns:repeat(4,1fr)}
  .nav{padding:12px 28px;gap:14px}
}

/* NAVI floating assistant styles */
#naviBtn {
  position: fixed; bottom: 24px; right: 24px;
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  cursor: pointer; z-index: 10003; /* raised so NAVI button sits above login overlay */
  box-shadow: 0 0 20px var(--secondary), 0 0 40px rgba(0,229,255,0.3);
  animation: naviPulse 2s ease-in-out infinite;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
  color: #000;
}
@keyframes naviPulse {
  0%, 100% { box-shadow: 0 0 20px var(--secondary); transform: scale(1); }
  50% { box-shadow: 0 0 35px var(--secondary), 0 0 60px rgba(0,229,255,0.4); transform: scale(1.05); }
}
#naviBtn .navi-avatar { position:relative; width:100%; height:100%; display:flex;align-items:center;justify-content:center;border-radius:50%; overflow:visible }
#naviBtn .navi-face{ font-size:1.8rem; transform:translateY(2px) }
.navi-badge {
  position: absolute; top: -6px; right: -6px;
  background: #ff4444; color: white; border-radius: 50%;
  width: 20px; height: 20px; font-size: 0.65rem;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; animation: badgeBounce 1s ease infinite;
  z-index:10000;
}
@keyframes badgeBounce {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

/* NAVI Panel */
.navi-panel {
  position: fixed; bottom: 100px; right: 24px;
  width: 320px; z-index: 10002; /* raised above login overlay so NAVI panel is visible in front */
  background: rgba(10, 20, 40, 0.92);
  backdrop-filter: blur(16px);
  border: 1px solid var(--secondary);
  border-radius: 20px;
  box-shadow: 0 0 30px rgba(0,229,255,0.2);
  overflow: hidden;
  animation: naviOpen 0.3s ease;
  pointer-events: auto;
}
.navi-panel.hidden { display:none !important }
@keyframes naviOpen {
  from { opacity:0; transform: scale(0.8) translateY(20px); }
  to   { opacity:1; transform: scale(1) translateY(0); }
}
.navi-screen {
  background: rgba(0,0,0,0.5);
  margin: 12px; border-radius: 12px;
  padding: 16px; min-height: 120px;
  border: 1px solid rgba(0,229,255,0.1);
  font-family: 'Courier New', monospace;
}
.navi-display-text {
  color: #ff8c00;
  font-size: 0.85rem;
  line-height: 1.6;
  min-height: 80px;
}
.navi-dots span {
  color: var(--secondary);
  animation: dotBlink 1.4s infinite;
  font-size: 1.2rem;
}
.navi-dots span:nth-child(2) { animation-delay: 0.2s; }
.navi-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dotBlink {
  0%,80%,100% { opacity:0; } 40% { opacity:1; }
}