/* ============================================================
   styles.css (migrado del <style> original de KNIME)
   - Soporta tema dark/light via body[data-theme]
   - Incluye variables usadas por app.js (chart colors/cats)
   - Mantiene estilos de tablas, DataTables, child rows, toggle, etc.
   ============================================================ */

/* =======================
   THEME TOKENS (DARK)
   ======================= */
body[data-theme='dark']{
  --bg:#1c1f26; --text:#e8e9eb; --heading:#00c7b7; --accent:#00c7b7;
  --summary-bg:#2a2e36; --summary-accent:#00c7b7; --summary-shadow:rgba(0,0,0,.40);
  --table-bg:#2a2e36; --table-text:#e8e9eb; --table-border:#3e4148;
  --thead-bg:#d32f2f; --thead-text:#fff; --tfoot-bg:#00c7b7; --tfoot-text:#111;
  --row-hover-bg:#3a404c; --row-regular-bg:#30353f; --row-regular-text:#00c7b7;
  --row-last-bg:#d32f2f; --row-last-text:#fff; --row-selected-bg:#264653;
  --child-bg:#1f232b; --child-border:#444; --child-thead-bg:#3b4049; --child-thead-text:#00c7b7;
  --dt-input-bg:#2a2e36; --dt-input-text:#e8e9eb; --dt-input-border:#3e4148;
  --dt-select-bg:#2a2e36; --dt-select-text:#e8e9eb; --dt-select-border:#3e4148;
  --dt-info:#c9ccd3; --dt-page-bg:#2a2e36; --dt-page-text:#e8e9eb; --dt-page-border:#3e4148;
  --dt-page-active-bg:#00c7b7; --dt-page-active-text:#111; --dt-page-active-border:#00c7b7;
  --dt-btn-bg:#3b4049; --dt-btn-text:#e8e9eb; --dt-btn-border:#4a4f57; --dt-btn-bg-hover:#4a4f57;
  --toggle-track:#3f4450; --toggle-thumb:#ffffff;
  --chart-grid:#4a4f57; --chart-axis:#cfd3da;
  --cat-oro:#d4af37; --cat-plata:#c0c0c0; --cat-bronce:#cd7f32;
  --cat-none:#ffffff; --cat-none-border:#8a8f98;
  --obj-line:#ff5252; --below-alpha:0.35;
}

/* =======================
   THEME TOKENS (LIGHT)
   ======================= */
body[data-theme='light']{
  --bg:#f8f9fc; --text:#222; --heading:#083b7a; --accent:#083b7a;
  --summary-bg:#e6e9ef; --summary-accent:#083b7a; --summary-shadow:rgba(0,0,0,.10);
  --table-bg:#fff; --table-text:#222; --table-border:#d0d3d8;
  --thead-bg:#083b7a; --thead-text:#fff; --tfoot-bg:#d32f2f; --tfoot-text:#fff;
  --row-hover-bg:#e9eef7; --row-regular-bg:#fff; --row-regular-text:#083b7a;
  --row-last-bg:#d32f2f; --row-last-text:#fff; --row-selected-bg:#dfe6f2;
  --child-bg:#f2f4f7; --child-border:#d0d3d8; --child-thead-bg:#dfe6f2; --child-thead-text:#004d26;
  --dt-input-bg:#fff; --dt-input-text:#222; --dt-input-border:#cbd3df;
  --dt-select-bg:#fff; --dt-select-text:#222; --dt-select-border:#cbd3df;
  --dt-info:#445063; --dt-page-bg:#fff; --dt-page-text:#083b7a; --dt-page-border:#cbd3df;
  --dt-page-active-bg:#083b7a; --dt-page-active-text:#fff; --dt-page-active-border:#083b7a;
  --dt-btn-bg:#e6e9ef; --dt-btn-text:#083b7a; --dt-btn-border:#cbd3df; --dt-btn-bg-hover:#dfe6f2;
  --toggle-track:#cfd6e1; --toggle-thumb:#ffffff;
  --chart-grid:#d7dde7; --chart-axis:#32415a;
  --cat-oro:#d4af37; --cat-plata:#c0c0c0; --cat-bronce:#cd7f32;
  --cat-none:#b9c0cc; --cat-none-border:#7a8598;
  --obj-line:#d32f2f; --below-alpha:0.35;
}

/* =======================
   GLOBAL
   ======================= */
body[data-theme]{
  background:var(--bg);
  color:var(--text);
  transition:background .35s ease, color .35s ease;
}

.container{ max-width:98%; }

h4,h5,h6{
  text-align:center;
  color:var(--heading);
}
h4{ font-weight:700; }
h5{ font-weight:600; }
h6{ font-weight:400; }

footer{
  text-align:center;
  padding-top:1%;
  color:#888;
}

/* =======================
   HEADER LOGO
   ======================= */
.logo-container{
  display:flex;
  justify-content:center;
  align-items:center;
  background:#f5f5f5;
  color:#222;
  border-radius:16px;
  width:fit-content;
  margin:10px auto;
  padding:0.6% 2%;
}
.logo-container img{
  width:15%;
  min-width:25px;
}

/* =======================
   SUMMARY BAR
   ======================= */
.summary-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:var(--summary-bg);
  border-left:4px solid var(--summary-accent);
  border-radius:10px;
  padding:6px 10px;
  margin-bottom:8px;
  box-shadow:0 0 8px var(--summary-shadow);
}
.summary-item .value{
  font-weight:bold;
  color:var(--accent);
}

/* =======================
   ROW STATES
   ======================= */
.clickable-row{
  cursor:pointer;
  transition:background-color .2s;
}
.clickable-row:hover{
  background:var(--row-hover-bg) !important;
}
tr.selected{
  background:var(--row-selected-bg) !important;
}

/* =======================
   TABLES (MAIN + CHILD)
   FIX: DataTables + scrollX (evita desalineación)
   ======================= */
.spt-table{
  background:var(--table-bg) !important;
  color:var(--table-text) !important;
  border-color:var(--table-border) !important;
  width:100% !important;
  table-layout:auto;
  border-collapse:collapse;
}
.spt-table thead th{
  white-space:nowrap !important;
}
.spt-table th,
.spt-table td{
  vertical-align:middle;
  text-align:center;
  padding:.45rem .5rem;
}
.spt-table thead{
  background:var(--thead-bg) !important;
  color:var(--thead-text) !important;
}
.spt-table tfoot tr.tfoot-summary{
  background:var(--tfoot-bg) !important;
  color:var(--tfoot-text) !important;
  font-weight:bold;
  border-top:2px solid var(--table-border);
}
.spt-table tbody tr.row-regular{
  background:var(--row-regular-bg) !important;
  color:var(--row-regular-text) !important;
}
.spt-table tbody tr.row-last{
  background:var(--row-last-bg) !important;
  color:var(--row-last-text) !important;
}

/* Wrapper scroll */
.table-responsive{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

/* =======================
   CHILD ROW CONTAINER
   ======================= */
.child-content{
  background:var(--child-bg);
  border:1px solid var(--child-border);
  color:var(--text);
  margin-top:10px;
  border-radius:8px;
  padding:10px;
  display:none;
}
.child-content thead{
  background:var(--child-thead-bg);
  color:var(--child-thead-text);
}
.child-header{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-bottom:8px;
}
.child-title{
  margin:0;
  color:var(--heading);
  font-weight:600;
  text-align:center;
}
.child-controls{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:center;
}
.chart-actions{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
}

.obj-chip{
  background:rgba(0,0,0,.10);
  border:1px solid var(--table-border);
  border-radius:9999px;
  padding:4px 10px;
  font-size:12px;
}

.btn-png{
  border-radius:10px;
  font-weight:600;
  padding:4px 10px;
}

/* =======================
   VIEW TOGGLE (table/chart)
   ======================= */
.view-toggle{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.view-toggle-input{
  position:absolute;
  opacity:0;
  width:0;
  height:0;
}
.view-toggle-label{
  width:56px;
  height:30px;
  border-radius:9999px;
  background:var(--toggle-track);
  display:inline-block;
  position:relative;
  cursor:pointer;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.2);
  transition:background .25s ease;
}
.view-toggle-label::after{
  content:"⇆";
  position:absolute;
  top:3px;
  left:3px;
  width:24px;
  height:24px;
  border-radius:50%;
  background:var(--toggle-thumb);
  color:#333;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  line-height:1;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
  transition:left .25s ease, transform .25s ease;
}
.view-toggle-input:checked + .view-toggle-label::after{
  left:29px;
}

/* =======================
   CHART VIEW
   ======================= */
.chart-view{ width:100%; }
.chart-wrapper{
  position:relative;
  height:380px;
  width:100%;
}
.chart-hint{
  text-align:center;
  font-size:12px;
  opacity:.75;
  margin-top:6px;
}

/* =======================
   DATATABLES THEMING
   NOTE: wrapper selectors should match your table id
   ======================= */
#tablaPrincipal_wrapper .dataTables_filter input{
  background:var(--dt-input-bg);
  color:var(--dt-input-text);
  border:1px solid var(--dt-input-border);
  border-radius:6px;
  padding:4px 8px;
}
#tablaPrincipal_wrapper .dataTables_length select{
  background:var(--dt-select-bg);
  color:var(--dt-select-text);
  border:1px solid var(--dt-select-border);
  border-radius:6px;
  padding:4px 8px;
}
#tablaPrincipal_wrapper .dataTables_info{
  color:var(--dt-info);
}
#tablaPrincipal_wrapper .pagination .page-link{
  background:var(--dt-page-bg);
  color:var(--dt-page-text);
  border:1px solid var(--dt-page-border);
}
#tablaPrincipal_wrapper .page-item.active .page-link{
  background:var(--dt-page-active-bg);
  color:var(--dt-page-active-text);
  border-color:var(--dt-page-active-border);
}
#tablaPrincipal_wrapper .dt-buttons .btn{
  background:var(--dt-btn-bg);
  color:var(--dt-btn-text);
  border:1px solid var(--dt-btn-border);
  border-radius:6px;
}
#tablaPrincipal_wrapper .dt-buttons .btn:hover{
  background:var(--dt-btn-bg-hover);
}

/* =======================
   THEME TOGGLE (fixed)
   ======================= */
.theme-toggle-fixed{
  position:fixed;
  top:16px;
  right:16px;
  z-index:2147483647;
  pointer-events:auto;
}
.theme-toggle-fixed .toggle-input{
  position:absolute;
  opacity:0;
  width:0;
  height:0;
}
.theme-toggle-fixed .toggle-label{
  display:inline-block;
  width:56px;
  height:30px;
  background:var(--toggle-track);
  border-radius:9999px;
  position:relative;
  cursor:pointer;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.2);
  transition:background .25s ease;
}
.theme-toggle-fixed .toggle-label::after{
  content:"🌙";
  position:absolute;
  top:3px;
  left:3px;
  width:24px;
  height:24px;
  border-radius:50%;
  background:var(--toggle-thumb);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;
  font-size:14px;
  line-height:1;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
  transition:left .25s ease, content .25s ease;
}
.theme-toggle-fixed .toggle-input:checked + .toggle-label::after{
  left:29px;
  content:"☀️";
}
@media print{
  .theme-toggle-fixed{ display:none; }
}

/* =======================
   MOBILE
   ======================= */
@media (max-width: 768px){
  .container{
    max-width:100% !important;
    padding-left:10px;
    padding-right:10px;
  }
  .logo-container{
    padding:8px 14px;
  }
  .logo-container img{
    width:28px !important;
    max-width:28px !important;
  }
  h4{ font-size:18px; }
  h5{ font-size:14px; }
  h6{ font-size:12px; }
  .summary-bar{
    flex-direction:column;
    gap:6px;
    align-items:flex-start;
  }
  .summary-item{
    font-size:13px;
  }
  .child-controls{
    flex-direction:column;
    gap:8px;
  }
  .btn-png{
    width:100%;
    max-width:240px;
  }
  .theme-toggle-fixed{
    top:10px;
    right:10px;
    transform:scale(.95);
  }
  #tablaPrincipal_wrapper .dt-buttons .btn{
    padding:4px 8px;
    font-size:12px;
  }
  #tablaPrincipal_wrapper .dataTables_filter input{
    width:160px;
  }
}
/* ====== CONTENEDOR DE BOTONES CEDIS ====== */
.cedis-container{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  padding:10px 0;
  margin-bottom:10px;
}

/* ====== Barra tipo tabs (multi) ====== */
.cedis-tabs-wrap{
  margin: 6px 0 12px 0;
}

.cedis-tabs{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  padding:10px;
  border-radius:14px;
  background:var(--summary-bg);
  border:1px solid var(--table-border);
  box-shadow:0 0 8px var(--summary-shadow);
}

.cedis-tab{
  border:1px solid var(--table-border);
  background:var(--table-bg);
  color:var(--accent);
  padding:6px 14px;
  border-radius:9999px;
  font-weight:700;
  font-size:13px;
  cursor:pointer;
  transition:all .18s ease;
  user-select:none;
}

.cedis-tab:hover{
  background:var(--row-hover-bg);
}

.cedis-tab.active{
  background:var(--thead-bg);
  border-color:var(--thead-bg);
  color:#fff;
}

.cedis-tab.is-all{
  opacity:0.95;
}

.cedis-tabs-hint{
  text-align:center;
  font-size:12px;
  opacity:.75;
  margin-top:6px;
}