/* Minimal UI */
:root{ --bg:#0c0d10; --card:#151821; --muted:#8b94a7; --text:#e6e9ef; --pri:#4da3ff; --ok:#2ecc71; --warn:#f1c40f; --danger:#e74c3c; }
*{ box-sizing:border-box; }
html, body { height:100%; }
body{ 
  margin:0; background:var(--bg); 
  color:var(--text); 
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial; 
  min-height:100vh; display:flex; flex-direction:column; }
.topbar{ padding:18px 24px; border-bottom:1px solid #232634; display:flex; align-items:center; gap:12px; position:sticky; top:0; z-index:10; background:rgba(12,13,16,.9); backdrop-filter: blur(4px); }
.topbar h1{ margin:0; font-size:20px; }
.topbar .muted{ color:var(--muted); font-size:12px; }
.spacer{ flex:1 1 auto; }
.userbox a.logout{ color:#ffb4b4; text-decoration:none; margin-left:8px; }
.container{ width:100%;  margin:24px auto; padding:0 16px; flex:1 1 auto; }
.tabs{ display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.tab-btn{ background:#232634; color:#b7c0d8; border:1px solid #2c2f3a; padding:8px 10px; border-radius:10px; cursor:pointer; }
.tab-btn.active{ background:var(--pri); color:#001b33; border-color:#4da3ff; }
/* COLOR AL PASAR EL MOUSE */
.tab-btn:hover {
    background: #4da3ff;     /* azul del botón principal */
    color: black;
    border-color: #4da3ff;
    transform: translateY(-3px);
}
.tab-content{ display:none; }
.tab-content.active{ display:block; }
.card{ background:var(--card); border:1px solid #232634; border-radius:14px; padding:16px; max-width:100%; }
.card h2{ margin:0 0 12px 0; font-size:18px; }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
label{ display:flex; flex-direction:column; gap:6px; font-size:13px; color:#cfd6ea; }
input, select{ background:#0f1117; color:#e6e9ef; border:1px solid #2c2f3a; border-radius:8px; padding:8px; }
input::file-selector-button{ background:#2c2f3a; color:#cfd6ea; border:none; padding:6px 10px; border-radius:8px; margin-right:8px; cursor:pointer; }
.actions{ display:flex; gap:8px; flex-wrap:wrap; }
textarea{background:#0f1117; color:#fff;}
button{ background:var(--pri); color:#001b33; border:none; border-radius:10px; padding:10px 12px; cursor:pointer; font-weight:600; }
button.success{ background:#48F748; color:#000000; }
button.primary{ background:#9D0AF2; color:#fff; }
button.warning{ background:#F5BE27; color:#000000; }
button.secondary{ background:#2c2f3a; color:#cfd6ea; }
button.tercedary{ background:#E4FF24; color:#000; }
button.activo{ background:#45C7FF; color:#000; }
button.danger{ background:var(--danger); color:#fff; }
.table{ width:100%; border-collapse:collapse; margin-top:12px; font-size:14px; display:table; }
.table th, .table td{ border-bottom:1px solid #232634; padding:8px; text-align:left; }
.table tbody tr:hover{ background:#1a1f2e; }
.searchbar{ display:flex; gap:8px; margin-top:12px; }
.muted{ color:var(--muted); }
.footer{ text-align:center; padding:24px; color:#var(--muted); }
/* Badge redondo para días restantes */
.badge-day{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:26px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
}

.badge-estado{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:58px;
  height:26px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
}

.badge-green{
  background:#16351f;
  color:#2ecc71;
}

.badge-yellow{
  background:#3a3419;
  color:#f1c40f;
}

.badge-red{
  background:#3a1a1a;
  color:#e74c3c;
}


/* Auth */
.auth-body{ display:flex; align-items:center; justify-content:center; background:var(--bg); }
.login-card{ width:100%; max-width:380px; background:var(--card); border:1px solid #232634; border-radius:14px; padding:18px; }
.stack{ display:flex; flex-direction:column; gap:12px; }

/* Responsive tables */
@media (max-width: 800px){
  .grid2, .grid3{ grid-template-columns:1fr; }
  .table thead{ display:none; }
  .table, .table tbody, .table tr, .table td{ display:block; width:100%; }
  .table tr{ border:1px solid #232634; border-radius:10px; margin-bottom:10px; padding:6px; }
  .table td{ border:none; position:relative; padding-left:110px; }
  .table td::before{ content: attr(data-label); position:absolute; left:8px; top:8px; color:#8b94a7; font-size:12px; }
}