<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sistema Integrado</title>
   <style>
/* --------------------------------------------------
   Global Reset & Base (de ambos bloques)
   -------------------------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --primary-color: #5591af;
  --secondary-color: #f5f5f5;
  --text-color: #333;
  --border-color: #ddd;

  /* Nuevas variables del segundo bloque */
  --topnav-h: 64px;                 /* altura del navbar fijo */
  --sidebar-w: 250px;
  --sidebar-w-collapsed: 60px;
  --content-gap: 16px;
  --rm-right-gap: 24px;
  --date-col-w: 120px;
  --border-soft: #e3e7ee;
  --ink-1: #374151;
  --ink-2: #4b5a66;
  --bg-1: #fff;
  --bg-2: #f7f9fc;
  --bg-3: #fbfdfe;
  --chip-bg: #eef5fa;
  --chip-bd: #d7e7f2;
  --chip-ink: #3a6a84;
}

/* Body unificado (sin padding para no crear hueco) */
body {
  font-family: 'Segoe UI', Arial, sans-serif;
  background-color: var(--secondary-color);
  color: var(--text-color);
  padding-top: 0; /* << antes 50px: causaba el espacio */
}

/* El main queda justo bajo el navbar fijo */
main.app-main { padding-top: var(--topnav-h) !important; }

/* Barra contextual sticky (si está vacía, no ocupa espacio) */
.contentnav:empty { display: none; }
/* Quita el padding-top que metía hueco */
.contentnav { 
  transition: margin-left 0.3s ease; 
  margin-left: calc(var(--sidebar-w) + var(--content-gap)) !important;
  padding-top: 0 !important;  /* << antes 1% */
}
.contentnav-full-width { margin-left: 0; }

/* Asegura que el primer bloque del contenido no añade margen arriba */
.app-main > .container-fluid { padding-top: 0 !important; }
.app-main > .container-fluid > :first-child { margin-top: 0 !important; }
.rm-shell, .cm-shell, .card { margin-top: 0 !important; }

/* --------------------------------------------------
   Estilos del primer bloque (pantalla de entrada)
   -------------------------------------------------- */
.form-container {
  max-width: 95%;
  margin: 20px auto;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  padding: 25px;
}

.section-header {
  background-color: var(--primary-color);
  color: #fff;
  padding: 10px 15px;
  border-radius: 4px;
  margin: 20px 0 15px;
}
.section-header h3 { margin: 0; font-size: 18px; }

table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
table th, table td {
  padding: 12px;
  border: 1px solid var(--border-color);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

select, input[type="text"], input[type="number"], textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 14px;
  transition: border 0.3s, box-shadow 0.3s;
}
select:focus, input:focus, textarea:focus {
  border-color: var(--primary-color);
  outline: none;
  box-shadow: 0 0 0 2px rgba(85,145,175,0.2);
}

.btn-submit{
  background: linear-gradient(135deg, #5591af 0%, #3a7a99 100%);
  color:#fff; padding:12px 30px; border:none; border-radius:6px;
  font-size:16px; font-weight:600; box-shadow:0 4px 8px rgba(0,0,0,0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease; cursor:pointer;
}
.btn-submit:hover{ transform: translateY(-2px); box-shadow:0 6px 12px rgba(0,0,0,0.15); }
.btn-submit:active{ transform: translateY(0); box-shadow:0 4px 8px rgba(0,0,0,0.1); }
.btn-submit:focus{ outline:none; box-shadow:0 0 0 3px rgba(85,145,175,0.4); }

/* Main Variable Card */
.main-variable-item{
  background-color:#f0f8ff; border:1px solid #d0e3ff; border-radius:5px;
  padding:15px; margin-bottom:15px;
}
.form-group{ display:flex; align-items:center; margin-bottom:15px; }
.form-group label{ min-width:120px; margin-right:15px; font-weight:500; }

/* Add/Remove Buttons */
.add-variable-btn{
  background-color:#e7f1ff; color:var(--primary-color);
  border:1px dashed var(--primary-color); border-radius:4px;
  padding:8px 15px; cursor:pointer; display:inline-flex; align-items:center; margin-top:10px;
}
.add-variable-btn:hover{ background-color:#d0e3ff; }
.remove-variable-btn{
  background-color:#ffebee; color:#f44336; border:none; padding:5px 10px; border-radius:4px; cursor:pointer; margin-left:10px;
}
.remove-variable-btn:hover{ background-color:#ffcdd2; }

/* Collapse Toggles (Phases & Properties) */
.navbar-toggler{
  display:flex; align-items:center; width:100%; background:none; border:none; color:var(--text-color); cursor:pointer; transition:background .2s;
}
.navbar-toggler:hover{ background: rgba(0,0,0,0.03); }
.navbar-toggler-icon{ margin-left:auto; transition: transform .3s ease; }
.navbar-toggler.open .navbar-toggler-icon{ transform: rotate(180deg); }

.collapse-section{ max-height:0; overflow:hidden; opacity:0; transition:max-height .35s ease, opacity .35s ease; }
.collapse-section.open{ max-height:1000px; opacity:1; }

/* Phase vs Property Styles */
.properties-container > .phase-toggle,
.navbar-toggler.phase-toggle{
  background-color:#dceffa; border-radius:4px; padding:8px 15px; margin-bottom:8px; font-weight:600; color:#1f3a5f; font-size:16px;
}
.properties-container .property-toggle,
.navbar-toggler.property-toggle{
  background:transparent; padding:6px 15px 6px 40px; margin-bottom:4px; font-weight:500; font-size:16px;
}

/* Reserve icon space */
.phase-icon, .phase-icon-placeholder{
  display:inline-block; width:20px; height:20px; margin-right:8px; vertical-align:middle;
}
.phase-icon-placeholder{ visibility:hidden; }

/* Align fix/range inputs under Data Type */
.fix-value-row, .interval-value-row{ margin-left:135px; }

.translatable{ display:none; }
body:not(.loaded) .translatable{ display:none; }

/* Vídeo fondo */
.video{
  position:absolute; right:0; bottom:0; min-width:100%; min-height:100%;
  transform: translateX(calc((100% - 100vw) / 2)); z-index:-2;
}

/* Branding */
#stylenavbar{ position:absolute; left:50%; transform:translate(-50%); color:white; }
#LogoSicerIndex{ width:5%; margin-left:45%; margin-right:auto; }
#LogoSicerNavbar{ width:3%; margin-left:4%; }
#WordNavbarIndex{ padding:0 1.5rem; font-size:20px; font-weight:lighter; color:white; }
#WordNavbarGeneral{ padding:0 1.5rem; font-size:16px; font-weight:lighter; color:white; }

/* Sidebar visual */
.sidebar{ background-color:white; color:white; height:100vh; }
#sidebar2{ color:black; padding:4px 8px; display:block; text-decoration:none; }
#sidebar2:hover{ background-color:rgb(55,115,145); }
.content{ padding:5px; }
.sidebar3{
  color:white; padding:4px 8px; display:block; text-decoration:none; background-color:rgb(85,145,175);
  margin:6px 0; font-size:15px; border-radius:6px;
}
.sidebar3:hover{ background-color:#20525f; color:white; }
#sidebar1{ color:black; padding:4px 8px; display:block; text-decoration:none; }
#sidebar1:hover{ background-color:#444; }
.sidebar4{
  color:white; padding:6px 10px; display:block; text-decoration:none; background-color:rgb(140,160,180);
  font-size:13px; margin:6px 0; border-radius:6px;
}
.sidebar4:hover{ background-color:#5a9fb1; color:white; }
.sidebar5{
  color:black; padding:6px 10px; display:block; text-decoration:none; background-color:rgb(200,210,220);
  margin-bottom:4px; font-size:12px; border-radius:6px;
}
.sidebar5:hover{ background-color:white; }

.editlogo,.editlogo2{ width:25px; }

/* Login / helpers */
.login-container{ display:flex; flex-direction:column; align-items:center; justify-content:center; max-width:300px; margin:0 auto; height:100vh; }
.login-box{
  background-color:rgb(55,115,145); padding:20px; border-radius:8px; box-shadow:0 4px 8px rgba(0,0,0,0.1);
}
.login-box h1{text-align:center;}
.login-box form{text-align:center;}
.login-box label{ display:block; margin-bottom:5px; }
.login-box input{ width:100%; padding:10px; margin-bottom:10px; border:1px solid #ccc; border-radius:4px; }
.login-box button{ padding:10px 20px; background-color:#007bff; color:#fff; border:none; border-radius:4px; cursor:pointer; }

.print-icon{ font-size:24px; }
.login-containerdelete{ display:flex; flex-direction:column; align-items:center; justify-content:center; max-width:400px; margin:0 auto; height:80vh; }
.bodyform{ display:flex; justify-content:center; align-items:center; min-height:100vh; margin:0; }
.btnform{
  display:block; margin:20px auto; padding:10px 20px; background-color:#3498db; color:white; border:none; border-radius:5px; cursor:pointer; transition: background-color .3s;
}
.btnform:hover{ background-color:#2980b9; }

.sidebar.sidebar-hidden{ display:none; }
.align-right-icon{ float:right; margin-right:10px; }

/* --------------------------------------------------
   Estilos del segundo bloque (navegadores/tablas)
   -------------------------------------------------- */

/* Sidebar fijo (desktop) anclado justo bajo el navbar */
#sidebarContainer{
  position: fixed;
  top: var(--topnav-h);                 /* debajo del navbar */
  left: 0;
  width: var(--sidebar-w);
  height: calc(100vh - var(--topnav-h));/* ocupa el resto */
  border-right: 1px solid #ccc;
  background: #f8f9fa;
  overflow-y: auto;
  transition: width .25s ease, transform .25s ease;
  z-index: 1500;                        /* por encima de la tabla */
}

/* Estado colapsado (desktop) */
#sidebarContainer.collapsed{ width: var(--sidebar-w-collapsed); }

/* Cabecera vertical visible solo en colapsado (desktop) */
#collapsedHeader{ display:none; }
#sidebarContainer.collapsed #collapsedHeader{ display:block; }

/* Botón toggle dentro del sidebar (desktop) */
.toggle-sidebar-btn{
  position:absolute; top:-35px; right:0;
  width:35px; height:35px; background:transparent; border:none; cursor:pointer;
}
#toggleSidebarIcon{ transition:transform .25s ease; }
body.sidebar-collapsed #toggleSidebarIcon{ transform:rotate(180deg); }

/* Etiqueta vertical al colapsar (desktop) */
#collapsedHeader{
  display:none; writing-mode:vertical-rl; text-orientation:mixed;
  text-align:center; font-weight:bold; color:#333; padding-top:8%; margin-top:30px;
}
body.sidebar-collapsed #collapsedHeader{ display:block; }

/* Ajuste para cuando el sidebar está colapsado (desktop) */
body.sidebar-collapsed .contentnav{
  margin-left: calc(var(--sidebar-w-collapsed) + var(--content-gap)) !important;
}

/* ===== Drawer móvil ===== */
@media (max-width: 991.98px){
  /* El contenido no deja hueco lateral en móvil */
  .contentnav{ margin-left: 0 !important; }

  /* El sidebar se comporta como cajón */
  #sidebarContainer{
    width: 100%;
    max-width: 320px;
    transform: translateX(-100%);  /* oculto por defecto */
    z-index: 1050;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
  }
  #sidebarContainer.is-open{ transform: translateX(0); }

  /* El header vertical no aplica en móvil */
  #collapsedHeader{ display: none !important; }

  /* Botón chevron dentro del cajón */
  .toggle-sidebar-btn{
    top: 8px; right: 8px; width: 36px; height: 36px;
  }

  /* Backdrop opcional (añade un div#sidebarBackdrop en el HTML si quieres usarlo) */
  #sidebarBackdrop{
    position: fixed;
    top: var(--topnav-h); left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.35);
    display: none;
    z-index: 1040;
  }
  #sidebarBackdrop.show{ display:block; }
}

/* RAW MATERIAL LIST (rm-*) */
.rm-shell{
  position: relative;
  max-width: none;
  margin: 12px 12px 20px 8px;
  background: #fff;
  border: 1px solid #e3e7ee;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.rm-header{
  display:flex; align-items:center; gap:12px;
  background:#4f8aa7; color:#fff; padding:12px 16px; border-radius:12px 12px 0 0;
  position:relative; z-index:8;
}
.rm-header img{ height:24px; filter:brightness(0) invert(1); }
.rm-title{ font-weight:700; font-size:18px; }
.rm-count{
  margin-left:auto; font-size:12px; opacity:.9;
  background:rgba(255,255,255,.15); padding:4px 8px; border-radius:10px;
}

.rm-toolbar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:#f7f9fc; border-top:1px solid #dce4ec; border-bottom:1px solid #e3e7ee;
  padding:10px 12px; position:relative; z-index:8;
}
.rm-toolbar__left{ display:flex; align-items:center; gap:8px; order:1; }
.rm-searchwrap{ position:relative; }
#rm-search{
  min-width:280px; padding:8px 36px 8px 34px; background:#fff;
  border:1px solid #cfd6de; border-radius:10px; outline:0; font-size:13px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.04); transition:.15s;
}
#rm-search:focus{ border-color:#4f8aa7; box-shadow:0 0 0 2px rgba(79,138,167,.15); }
.rm-search-icon{ position:absolute; left:10px; top:50%; transform:translateY(-50%); opacity:.55; font-size:14px; color:#6b7280; }
#rm-clear{
  border:1px solid #cfd6de; background:#fff; border-radius:10px; padding:8px 10px; cursor:pointer; transition:.15s;
}
#rm-clear:hover{ background:#eef2f6; border-color:#b0b9c6; }

.rm-toolbar__center{
  flex:1 1 100%; order:2; display:block; white-space:nowrap; padding-bottom:4px;
  overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
}
.rm-toolbar__right{ order:3; }

.az-btn{
  --c:#4f8aa7; min-width:28px; padding:6px 8px; margin-right:6px;
  border:1px solid #d7dde6; border-radius:999px; cursor:pointer; transition:.15s;
  background:linear-gradient(#fff,#f5f7fb); font-weight:700; font-size:12px; box-shadow:0 1px 0 rgba(0,0,0,.04);
}
.az-btn:hover{ border-color:#c3cada; background:linear-gradient(#f9fafc,#f0f2f5); }
.az-btn.is-active{ color:#fff; border-color:var(--c); background:linear-gradient(180deg,#5c97b3,#437d97); }

/* Viewport que scrollea la tabla */
.rm-viewport{
  position: relative;
  width: 100%;
  height: calc(100vh - var(--nav-h) - 130px);
  min-height: 320px;
  background: #fff;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: auto;
  padding-right: 24px;
  box-sizing: content-box;
  isolation: isolate;
  padding-left: 0 !important;
}
.rm-viewport::-webkit-scrollbar{ width:12px; height:12px; display:block; }
.rm-viewport::-webkit-scrollbar-thumb{ background:#cfd6de; border-radius:8px; border:2px solid #f1f3f6; }
.rm-viewport::-webkit-scrollbar-thumb:hover{ background:#b0b9c6; }
.rm-viewport::-webkit-scrollbar-track{ background:#f1f3f6; }

/* Tabla */
#export-excel{
  table-layout:auto !important;
  width:max-content !important; min-width:100% !important;
  border-collapse:separate !important; border-spacing:0 !important;
  font-size:13px; color:#374151; position:relative;
}
#export-excel th, #export-excel td{
  padding:10px 12px; border:none !important; text-align:center;
  white-space:normal !important; overflow:visible !important; text-overflow:clip !important;
  max-width:none !important; line-height:1.25; word-break:break-word; overflow-wrap:anywhere;
  min-width:100px; box-sizing:border-box;
}
#export-excel thead th{
  position: sticky;
  top: 0;
  z-index: 10 !important;
  background: #fbfdfe;
  color: #4b5a66;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .5px;
  border-bottom: 2px solid #e3e7ee;
}

/* Anchuras útiles */
.col-std{ width:48px; white-space:nowrap !important; }
.col-internal{ min-width:240px; text-align:left; }
.col-subtypology{ min-width:140px; }
.col-commercial{ min-width:260px; text-align:left; }
.col-area{ min-width:110px; }
.col-supplier,.col-customer{ min-width:150px; }
.col-price{ min-width:110px; text-align:right; white-space:nowrap !important; }
.col-date{ width:120px; min-width:120px; }
.nowrap{ white-space:nowrap !important; }

/* Filas */
.even-row{ background:#fff; }
.odd-row{ background:#f7fafc; }
#export-excel tbody tr:hover{ background:#edf6ff; cursor:pointer; }
.muted{ opacity:.55; font-style:italic; }
mark.rm-hit{ background:#ffe58a; padding:0 2px; border-radius:2px; font-weight:600; }

/* Agrupación */
tr[data-row="group"]{ background:#f0f7ff !important; border-top:2px solid #d0e3ff; font-weight:600; }
tr[data-row="group"] td:first-child{ border-left:3px solid #4f8aa7; }
tr[data-row="group"]:hover{ background:#e1f0ff !important; }
.hidden-row{ display:none; }
tr[data-row="detail"]{ background:#f9fbfd !important; }
tr[data-row="detail"]:hover{ background:#e3eeff !important; }

/* Enlaces/iconos en tabla */
.rm-table a{ color:#4f8aa7; text-decoration:none; transition:color .15s; }
.rm-table a:hover{ color:#3d7189; }
.fa-check{ color:#22c55e !important; }
.fa-xmark{ color:#ef4444 !important; }

/* Sticky columnas de fechas a la derecha */
.stick-r1{ position:sticky; right:0; background:#fff; z-index:9 !important; box-shadow:-1px 0 0 #e3e7ee; }
.stick-r2{ position:sticky; right:120px; background:#fff; z-index:9 !important; box-shadow:-1px 0 0 #e3e7ee; }
#export-excel tbody tr:hover .stick-r1,
#export-excel tbody tr:hover .stick-r2{ background:#edf6ff; }

/* Scrollbar espejo inferior */
.rm-xscroll{ height:16px; overflow-x:auto; overflow-y:hidden; background:#f1f3f6; margin-right:24px; position:relative; z-index:2; }
.rm-xscroll-inner{ height:1px; }
.rm-xscroll::-webkit-scrollbar{ height:12px; }
.rm-xscroll::-webkit-scrollbar-thumb{ background:#cfd6de; border-radius:8px; border:2px solid #f1f3f6; }
.rm-xscroll::-webkit-scrollbar-thumb:hover{ background:#b0b9c6; }
.rm-xscroll::-webkit-scrollbar-track{ background:#f1f3f6; }

/* Barra A–Z scrollable */
.rm-toolbar__center::-webkit-scrollbar{ height:8px; }
.rm-toolbar__center::-webkit-scrollbar-thumb{ background:#cfd6de; border-radius:8px; }
.rm-toolbar__center::-webkit-scrollbar-track{ background:#f1f3f6; }

/* UPDATED SCREEN (cm-*) */
.cm-shell{
  position:relative; max-width:none; margin:10px 12px 20px 8px; background:#fff;
  border:1px solid var(--border-soft); border-radius:12px; box-shadow:0 6px 16px rgba(0,0,0,.06);
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.cm-header{
  display:flex; align-items:center; gap:12px; background:#4f8aa7; color:#fff;
  padding:12px 16px; border-radius:12px 12px 0 0;
}
.cm-header img{ height:24px; filter:brightness(0) invert(1); }
.cm-title{ font-weight:700; font-size:18px; }
.cm-sub{ opacity:.9; font-size:13px; }
.cm-sub--inline{ display:flex; align-items:center; gap:8px; flex-wrap:nowrap; white-space:nowrap; }
.cm-sub__input{ border:none; background:transparent; color:#fff; font-weight:700; width:auto; min-width:0; padding:0; }
.cm-toolbar{
  display:flex; align-items:center; gap:8px; padding:10px 12px; background:var(--bg-2); border-top:1px solid #dce4ec; border-bottom:1px solid var(--border-soft);
}

.cm-summary{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; padding:14px; }
.cm-card{ border:1px solid #e7ecf2; border-radius:12px; padding:10px 12px; background:#fbfdfe; }
.cm-card h6{ margin:0 0 6px; font-size:11px; letter-spacing:.5px; color:#6b7280; text-transform:uppercase; }
.cm-card .v{ font-weight:600; color:#2f3a45; font-size:13px; }
.cm-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.cm-chip{ background:var(--chip-bg); border:1px solid var(--chip-bd); color:var(--chip-ink); border-radius:999px; padding:2px 8px; font-size:12px; font-weight:600; }

.cm-body{ display:grid; grid-template-columns:1fr 1fr; gap:18px; padding:6px 14px 90px; }
.cm-section{ border:1px solid #e7ecf2; border-radius:14px; background:#fff; }
.cm-section h5{ margin:0; padding:12px 14px; border-bottom:1px solid #edf1f6; background:#fafcfe; font-size:14px; color:#3b4a56; }
.cm-fields{ padding:12px 14px; }
.cm-row{ display:grid; grid-template-columns:180px 1fr; gap:12px; align-items:center; margin-bottom:10px; }
.cm-row label{ font-size:13px; color:var(--ink-2); }
.cm-row .ro{ font-weight:600; color:#2f3a45; }
.cm-help{ font-size:12px; color:#6b7280; margin-top:4px; }

/* Inputs dentro de cm- */
.cm-fields input[type="text"],
.cm-fields input[type="number"],
.cm-fields input[type="file"],
.cm-fields select,
.cm-fields textarea{
  width:100%; border:1px solid #cfd6de; border-radius:10px; background:#fff; padding:8px 10px; font-size:13px; outline:0; transition:.15s;
}
.cm-fields input:focus, .cm-fields select:focus, .cm-fields textarea:focus{
  border-color:#4f8aa7; box-shadow:0 0 0 2px rgba(79,138,167,.15);
}

.cm-switch{ display:flex; align-items:center; gap:10px; }
.cm-doc{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.cm-doc a{ color:#4f8aa7; text-decoration:none; }
.cm-doc a:hover{ color:#3d7189; }
.cm-doc .filename{ font-size:12px; color:#6b7280; }
.cm-icon{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:8px; background:#eef5fa; border:1px solid #d7e7f2; }

.cm-actions{
  position:sticky; bottom:0; z-index:20;
  background:linear-gradient(180deg,rgba(255,255,255,0),#fff 18px),#fff;
  border-top:1px solid #e7ecf2; padding:12px 14px; border-radius:0 0 12px 12px;
  display:flex; justify-content:flex-end; gap:10px;
}
.cm-btn{
  border:1px solid #d7dde6; border-radius:10px; background:linear-gradient(#fff,#f5f7fb);
  padding:8px 12px; font-size:13px; cursor:pointer; transition:.15s; display:inline-flex; align-items:center; gap:8px;
}
.cm-btn:hover{ background:linear-gradient(#f9fafc,#f0f2f5); border-color:#c3cada; }
.cm-btn.primary{ border-color:#4f8aa7; background:linear-gradient(180deg,#5c97b3,#437d97); color:#fff; box-shadow:0 1px 0 rgba(0,0,0,.06); }
.cm-btn.danger{ border-color:#e3b4b4; background:linear-gradient(#fff,#fff5f5); color:#b42318; }

/* Meta rail */
.cm-meta{ border:1px dashed #dfe7ee; border-radius:14px; background:#fcfeff; }
.cm-meta .cm-fields .cm-row{ grid-template-columns:140px 1fr; }

/* Responsive Updated */
@media (max-width: 1100px){
  .cm-summary{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .cm-body{ grid-template-columns:1fr; }
}
@media (max-width: 640px){
  .cm-row{ grid-template-columns:1fr; }
  .cm-row label{ margin-bottom:4px; }
}

/* Responsive básico para tabla */
@media (max-width: 992px){ #export-excel .col-opt-md{ display:none; } }
@media (max-width: 768px){
  #export-excel .col-opt-sm, #export-excel .col-opt-md{ display:none; }
  .rm-toolbar{ flex-direction:column; align-items:stretch; }
  .rm-toolbar__left,.rm-toolbar__center,.rm-toolbar__right{ width:100%; justify-content:center; }
  #rm-search{ min-width:100%; }
}

.numfmt { font-variant-numeric: tabular-nums; white-space: nowrap; }
.numfmt .int    { font-size: 1em; font-weight: 600; }
.numfmt .sep    { opacity: .6; padding: 0 .05em; }
.numfmt .dec    { font-size: .8em; opacity: .8; }
.numfmt .unit   { margin-left: .25em; opacity: .7; font-size: .9em; }

/* Para columnas numéricas de tablas (ya usas .col-num) */
.col-num .numfmt { display: inline-flex; align-items: baseline; justify-content: flex-end; }


#cmShell table td.col-num .num-int { font-size: 1.2em; }
#cmShell table td.col-num .num-dec { opacity: .65; }
/* Números con entero vs decimales */
/* Ajuste de tamaño/contraste para decimales (más legible) */
/* Tamaño/estilo de números en columnas numéricas */
/* DEBUG: forzar que se vea el cambio */
.col-num .num-int,
.text-end .num-int { font-size: 140% !important; font-weight: 800 !important; }
.col-num .num-dec,
.text-end .num-dec { font-size: 75% !important; opacity: .60 !important; }



/* Si tu tabla tiene un tono azulado de fondo, subimos un poco el contraste del decimal */
.table .num-dec { opacity: .65; }

/* Monoespaciado opcional para alineación perfecta por columnas */
.number-mono .num-int,
.number-mono .num-dec {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

</style>

    
</head>
<body>
    <!-- Aquí iría el contenido de tu aplicación -->
</body>
</html>