body{font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin:0;background:#f8fafc;color:#0f172a}
.topnav{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(180deg, #ffffff 0%, #fbfbff 100%);padding:12px 40px;border-bottom:1px solid #e5e7eb;position:sticky;top:0;z-index:50;backdrop-filter:saturate(120%) blur(2px);box-shadow:0 2px 8px rgba(15,23,42,0.04)}
.topnav .brand{font-weight:700;color:#4f46e5;padding-left:8px}
.topnav ul{display:flex;gap:12px;list-style:none;margin:0;padding:0}
.topnav a{color:#111827;text-decoration:none;padding:8px 12px;border-radius:10px;transition:all .15s ease;border:1px solid transparent}
.topnav a:hover{background:#eef2ff;color:#111827;border-color:#e5e7eb;box-shadow:0 1px 2px rgba(0,0,0,0.04)}
.topnav a.active{background:#e0e7ff;color:#111827;border-color:#c7d2fe;box-shadow:inset 0 0 0 1px rgba(79,70,229,0.12)}
.topnav .auth{color:#6b7280;display:flex;align-items:center;gap:10px}
.container{max-width:1200px;margin:24px auto;padding:0 20px}
.container.wide{max-width:none;width:96%}
.container.wide-full{max-width:none;width:96%;padding-left:24px;padding-right:24px}
.card{background:#ffffff;border:1px solid #e5e7eb;border-radius:12px;padding:18px;margin-bottom:18px;box-shadow:0 1px 2px rgba(0,0,0,0.04)}
.kpi{font-size:28px;font-weight:700;margin-top:4px}
.grid-3{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
@media (max-width: 1200px){ .grid-3{grid-template-columns:repeat(4,1fr);} }
@media (max-width: 900px){ .grid-3{grid-template-columns:repeat(2,1fr);} }
@media (max-width: 600px){ .grid-3{grid-template-columns:1fr;} }
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:16px}
/* Compact chart cards */
.card.small-chart h3{margin-top:0;margin-bottom:8px;font-size:14px;color:#111827}
.card.small-chart canvas{height:140px !important}
/* 50%-width chart containers */
/* For dashboard charts, make three per row (each ~33%) and responsive to 2/1 columns */
.grid-3.charts-50{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px}
@media (max-width: 900px){ .grid-3.charts-50{grid-template-columns:repeat(2, 1fr);} }
@media (max-width: 600px){ .grid-3.charts-50{grid-template-columns:1fr;} }
.charts-50 .chart-50 canvas{height:240px !important}
.charts-50 .chart-50 h3{margin-top:0;margin-bottom:10px}
/* circular pies inside a 50% card: two per 50% */
.inner-pies{gap:12px}
.inner-pies .card.pie canvas{height:160px !important}
.col-span-2{grid-column:span 2}
.col-span-3{grid-column:span 3}
.hidden{display:none}
.ts-only{display:none}
.ts-mode .ts-only{display:block}
/* Rows that require a selected device (time-series mode) */
#dashSection .ts-required{display:none}
#dashSection.ts-mode .ts-required{display:grid}
.btn{background:#4f46e5;border:none;color:white;padding:8px 12px;border-radius:8px;cursor:pointer}
.btn.small{padding:4px 8px;font-size:12px}
.btn.danger{background:#ef4444}
.table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}
.table th,.table td{padding:8px 10px;border-bottom:1px solid #e5e7eb;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.table thead th{position:sticky;top:0;background:#fff;z-index:1}
/* Prevent table header color shift when modal opens */
body:has(.modal.show) .table thead th{background:#fff}
/* DataTable filter header row sits below main header */
.table thead tr.filter-row th{position:sticky; top:34px; background:#fafafa; z-index:1; border-bottom:1px solid #e5e7eb}
.table thead tr.filter-row input{width:100%; padding:6px 8px; font-size:12px; border-radius:6px}
/* Sortable headers */
.table th.sortable{cursor:pointer; user-select:none}
.table th.sortable::after{content:'\25B4\25BE'; opacity:0.25; font-size:10px; padding-left:6px}
.table th[data-sort="asc"]::after{content:'\25B4'; opacity:0.8}
.table th[data-sort="desc"]::after{content:'\25BE'; opacity:0.8}
.table th[data-sort="none"]::after{content:'\25B4\25BE'; opacity:0.25}
.table-scroll{width:100%;overflow:auto}
/* Align last column (acciones/detalles) to the right by default */
.table th:last-child,.table td:last-child{text-align:right}
/* Pagination footer */
.datatable-footer{display:flex;align-items:center;justify-content:flex-end;padding:12px 0;margin-top:10px}
.datatable-footer .pagination{display:flex;align-items:center;gap:10px;width:100%}
.datatable-footer select{padding:6px 8px;border-radius:8px;border:1px solid #e5e7eb}
.datatable-footer .btn.small{background:#ffffff;color:#111827;border:1px solid #e5e7eb;border-radius:8px;padding:6px 10px}
.datatable-footer .btn.small:hover{background:#f9fafb}
.datatable-footer .btn.small:disabled{opacity:0.5;cursor:not-allowed}
/* Keep small buttons compact */
.btn.small{white-space:nowrap}
label{display:flex;flex-direction:column;gap:6px;margin:6px 0}
input,select{background:#ffffff;border:1px solid #e5e7eb;color:#111827;padding:8px;border-radius:8px}
input.invalid, select.invalid{border-color:#ef4444; box-shadow:0 0 0 2px rgba(239,68,68,0.08)}
.modal select{pointer-events:auto;width:100%}
.token-cell{display:flex;align-items:center;gap:6px;min-width:220px}
.token-cell .token-text{font-family:monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;max-width:320px}
.toolbar{display:flex;gap:8px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.toolbar .selector-40{width:40%}
.toolbar .selector-40 select{width:100%}
.muted{color:#6b7280;font-size:12px;margin-top:6px}
/* Make samples table wider to show more content; allow horizontal scroll */
#samplesTable{min-width:2400px}
#samplesTable th, #samplesTable td{min-width:200px}
#samplesTable th:nth-child(1), #samplesTable td:nth-child(1){min-width:300px}
#samplesTable th:nth-child(2), #samplesTable td:nth-child(2){min-width:440px}
/* Modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,0.4);display:none;align-items:center;justify-content:center;padding:16px;z-index:1000}
.modal .panel{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:16px;max-width:480px;width:100%;display:flex;flex-direction:column}
.modal.show{display:flex}
.modal .panel .modal-footer{margin-top:12px;padding-top:12px;border-top:1px solid #e5e7eb;display:flex;justify-content:flex-end;gap:8px}

/* Navbar auth tweaks */
#logoutBtn{padding:10px 16px;font-size:14px;border-radius:10px;line-height:1.2}
#authUser{font-size:14px}

/* Documentation styles */
:root{
  --doc-border:#e5e7eb; --doc-bg:#ffffff; --doc-muted:#6b7280; --doc-accent:#4f46e5; --doc-code-bg:#0b1021; --doc-code-fg:#e5e7eb; --doc-inline-bg:#f3f4f6;
  --doc-warm-active:#fff7ed; /* warm light (orange-50) */
  --doc-warm-hover:#ffedd5;  /* warm hover (orange-100) */
  --doc-warm-border:#fdba74; /* warm border (orange-300) */
  --doc-content-bg:#f3f4f6;  /* light gray content background */
  --doc-content-border:#d1d5db; /* clearer border */
}
.doc-layout{grid-gap:20px}
.doc-sidebar{box-shadow:0 1px 2px rgba(0,0,0,0.04)}
/* Ensure lists have no bullets in the sidebar */
.doc-sidebar ul{list-style:none;margin:0;padding-left:0}
.doc-sidebar li{margin:8px 0} /* increased vertical spacing between menu items */
.doc-sidebar .section{padding:10px 0;border-top:1px dashed var(--doc-border)}
.doc-sidebar .section:first-child{border-top:none}
.doc-sidebar a{display:block;padding:6px 8px;border-radius:8px;text-decoration:none;color:#1f2937}
.doc-sidebar a:hover{background:var(--doc-warm-hover)}
.doc-sidebar a.active{background:var(--doc-warm-active);color:#1f2937;border-left:3px solid var(--doc-warm-border)}
.doc-content{background:var(--doc-content-bg);border:1px solid var(--doc-content-border);border-radius:16px;padding:24px;margin:12px 56px 40px 40px;box-shadow:0 10px 20px rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.04)}
@media (max-width: 900px){
  .doc-content{margin:8px 16px 24px 16px;}
}
/* Warm highlight for selected page's content area */
.doc-content.active{background:linear-gradient(0deg, rgba(255,247,237,0.6), rgba(255,247,237,0.6)), var(--doc-content-bg)}
.doc-header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--doc-border)}
.doc-title{font-size:22px;margin:0}
.doc-breadcrumb{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;color:var(--doc-muted);font-size:12px}
.md{line-height:1.7}
.md h1,.md h2,.md h3{scroll-margin-top:80px}
.md h2{margin-top:36px;margin-bottom:12px;padding-top:10px;border-top:1px solid var(--doc-border)}
.md h3{margin-top:22px;margin-bottom:8px}
.md p{margin:14px 0}
.md ul,.md ol{margin:12px 0 12px 24px}
.md li{margin:8px 0}
.md a{color:#1d4ed8;text-decoration:none}
.md a:hover{text-decoration:underline}
.md blockquote{border-left:3px solid #93c5fd;background:#eff6ff;padding:10px 12px;border-radius:6px;color:#1e3a8a}
.md pre{background:var(--doc-code-bg);color:var(--doc-code-fg);padding:14px 16px;border-radius:10px;overflow:auto;position:relative}
.md pre code{background:transparent;padding:0}
.md code{background:var(--doc-inline-bg);padding:2px 4px;border-radius:4px}
.md table{border-collapse:collapse;width:100%;margin:12px 0}
.md th,.md td{border:1px solid var(--doc-border);padding:10px;text-align:left}
.md hr{border:none;border-top:1px solid var(--doc-border);margin:24px 0}
/* Copy button for code blocks */
.md pre .copy-btn{position:absolute;top:8px;right:8px;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.25);color:#e5e7eb;padding:4px 8px;border-radius:6px;font-size:12px;cursor:pointer}
.md pre .copy-btn:hover{background:rgba(255,255,255,0.2)}
/* Scroll shadows */
.doc-sidebar{background:var(--doc-bg);border:1px solid var(--doc-border);border-radius:12px}
/* Remove previous combined rule to avoid overriding new .doc-content styles */


/* Alert row backgrounds */
.tr-alert-open{ background:#fee2e2; }
.tr-alert-closed-recent{ background:#fef3c7; }
.tr-alert-closed-old{ background:#dcfce7; }