/* MARCADOR-VERSION-NOTICIAS-v11 -- si ves este comentario al abrir el
   archivo, el servidor tiene la version correcta con los 4 ajustes:
   titular en negrita, fecha+boton en la misma fila, resumen a 3
   lineas, tarjeta de tamaño fijo. */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: normal;
  src: local("?"), url("../../fuentes/Montserrat-Light.ttf");
}

body{
  background-attachment: fixed;
  height: 100vh;
  margin: 0;
  overflow-y: scroll;
 background: radial-gradient(circle, #0077ea, #1f4f96, #1b2949, #000);

}

input[type=date]::-webkit-outer-spin-button,
input[type=date]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0;

}

li  {
 font-family: 'Montserrat', sans-serif;
}


.btnDisabled{display: none;}

.celdaMerma input[type=date]:focus, .materialize-textarea:focus:not([readonly]) {
     border-bottom: unset !important;
     box-shadow: 0 0.1rem 0.0rem hsla(0,10%,10%,.2) !important;
}
.celdaMerma input[type=number]:focus, .materialize-textarea:focus:not([readonly]) {
     border-bottom: unset !important;
     box-shadow: 0 0.1rem 0.0rem hsla(0,10%,10%,.2) !important;
}


input[type=date]:not(.browser-default){
  border-bottom: unset;
  height: unset;
  font-size: unset;
  margin: unset; /*0 0 8px 0*/
  padding: 0;
  border: 1px solid #e0e0e0;
  padding-top: 3px;
  padding-bottom: 3px;
}

input[type=number]:not(.browser-default){
 display: inline-block;
  width: unset;
  font-size: unset;
  padding-top: 3px;
  padding-bottom: 3px;
  color: #757575;
  border: 1px solid #e0e0e0;
  box-shadow: unset;
  /*line-height: unset;*/
  height: unset;
  margin-bottom: unset;
  margin-top: unset;
}

.usrinput {
    height: 2rem !important;
    margin: 8px 0px 8px 40px !important;
}

input:-internal-autofill-previewed, input:-internal-autofill-selected {
  background-color: rgb(2, 2, 2 ) !important;
}

.numero_input{
  font-size: 1rem !important;
  padding: 0.2em !important;
  color: #757575 !important;
  padding: 0.2em !important;
  color: #757575 !important;
  border: 1px solid white !important;
  -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3) !important;
          box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3) !important;
  margin-bottom: 1em !important;
  margin-top: 0.4em !important;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] { -moz-appearance:textfield; }
[type="radio"]:not(:checked), [type="radio"]:checked { position: unset; }

.modalx {
  display:flex;
 }

.oculto{
  margin-top: -1.5rem;
}

.normal {
  font-size: 2.5rem;
}
.textos{
  font-size: 1rem; 
}
.colorAzul{
  color: #068ed2;
}
 .colorRojo{
  color: #fc626c;
 }
 .colorVerde {
  color: #3ab363;
 }
.FondoRojo{
  background-color: #fc626c;
}
.FondoAzul {
  background-color: #068ed2;
}
.division_panel{
  width: 100%;
  border: 1px solid white;
  -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
          box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}
.divisionSelect{
  border-top: 3px solid red;
  margin-top: 10px !important;
  color: red;
}
.ingresar-pagina1{
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  width: 22rem;
  background: rgba(0,0,0,0.6);
  padding: 0.63rem 1.25rem;
  box-sizing: border-box;
  margin-top: 0%;
  border-radius: 0.44rem;
}
.titulosFormulario{
  width: 100%;
  display: flex;
}
.tituloscards{
  /*border: 1px solid red;*/
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.pie_panel{
  margin-left: -0.5rem;
  margin-right: -0.5rem;
  width: 104%;
  border-top: 1px solid #bdbdbd;
   background-color: #eceff1;
  padding: 0.8rem 0.5rem 0.8rem 0.5rem;
  display: flex;
  justify-content: space-around;
  }
.paraBotones{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.iconoEtiqueta{
  display: flex;
}
.iconoEtiqueta span{
/*  font-size: 2rem;*/
  margin-left: 1rem;
}

.img-centrar-v {
  width: 85%;
  }

.container {
  margin: 0 auto;
  max-width: 100%;
  width: 100%;

}



nav .brand-logo {
  /*padding-left: 2%;*/
  max-height: 4.3rem;
  overflow: hidden;
}

.dropdown-content {
  top: -4.3rem;
 }
.tamanocirculo{
  margin-top: auto;
  margin-bottom: auto;
  margin-right: 0.3rem;
  width: 3.2rem;
  height: 3.2rem;
}
.tamanocirculo2{
  margin-left: auto;
  margin-right: auto;
  width: 7rem;
  height: 7rem;
}
.profile{
  display:flex;
  justify-content: space-between;

}
.letra1 td {
  border-right: 1px solid #eceff1;
}
td, th {
  padding: 3px 8px;
  font-size: 0.8rem;
}
.borde1{
  border: 1px solid red;
 }
.borde2{
  border: 1px solid green;
}
.bordepie{
  border: 1px solid #eeeeee;
}
.bordeBajo{
  border: 1px solid #E7E7E7;
  border-radius: 0px 0px 5px 5px;
}
.degradeI{
  background: linear-gradient(45deg, #068ed2 50%, #3369E6 100%) !important;
}
.degradeF{
    background: linear-gradient(45deg, #068ed2 50%, #3369E6 100%) !important;
}
.degradeX{
background: rgba(0,0,0,0.5);
padding-left: 1.25rem;
}

.brand-logo{
  margin-left: 1rem;
}
.img-centrar-v{
  margin-top: 0.3rem;
}

i.top {
  /*margin-top: -0.625rem;*/
  margin-bottom: -2.8rem;

}

.nav-wrapper a{
  height: 4.3rem;
}

.submenu{
  width: 100%;
}
.submenus i {
  margin-left: -0.6rem;
 /* color: yellow;*/
}
.submenus span {
  margin-left: -1rem;
  color: #068ed2;
}

.submenus1{
  color: #068ED2;
}
.submenus2 {
   color: #068ED2;
   margin-left: -0.6rem;
   width: 110%;
}

.sidenav .user-view{
  height: 11rem;
}
.sidenav .user-view {
  margin-bottom: 0;
}
.fondoMovil{
    background-color: white;
  }

.sidenav li:hover {
  border-right: 5px solid #1de9b6;
}
.sidenav li.active {
  background-color: rgba(224, 224, 224, 0.5);
  }
.sidenav li > a:hover {
  background-color: rgba(0, 0, 0, 0.3);
}

#listaMenu li{
  line-height: 2.2rem !important;
}


.sidenav .collapsible-body, .sidenav.fixed .collapsible-body{
 background-color: #f5f5f5;
}
.sidenav .collapsible-header:hover, .sidenav.fixed .collapsible-header:hover {
 background-color: rgba(0, 0, 0, 0.3);
}
.pagina_principal{

  min-height: calc(100vh - 4.1rem);
  height: auto;
  padding: 1.25rem 1.25rem 0px;
  background-color: white;
  /*border: 1px solid white;*/
}
.p_flex{
  display: flex;
  flex-wrap: wrap;
}
.left{margin-left: unset !important;}

.idOpcion{
  position: fixed;
  z-index: 1;
  color: white;
  margin-left: 50%;
  left: -6.25rem;
  margin-top: -2rem;
  height: 2.5rem;
  width: 12.5rem;
  padding-top: 0.9rem;
  background-color: #3ab363;
  border-radius: 0.3rem;
  display: flex;
  justify-content: center;
}

.sidenav {
    width: 18rem;
}
.sidenav li > a {
 padding-left: 0.94rem ;
 color: #068ed2;
}
 .sidenav li > a > i.material-icons, .azul1 {
      color: #068ed2;
  }

.sidenav .collapsible-header, .sidenav.fixed .collapsible-header {
    padding: 0px 0px 10px 10px;
}


.collapsible-header > i {
  color: #068ed2;
}



/* label color — etiqueta de formulario en reposo (gris suave, no amarillo).
   El amarillo #FFFF00 anterior chocaba con el tema; se corrige en la fuente. */
   .input-field label {
     color: #6b7280;
   }

   /* icon prefix focus color */
   .input-field .prefix.active {
     color: #c6ff00;
   }
   .prefix {
     color: #f4ff81;
   }

 .menu_activo {
   background-color: #068ed2;
  }

.notificaciones{
   display: -webkit-inline-box;
}
.notificaciones:hover{
  background-color: #81d4fa ;
}
.circulo1{
    font-size: 0.75rem;
    padding: 0.125rem 0.32rem;
    border-radius: 50%;
    background-color: red;
    margin-left: -0.625rem;
    z-index: 999;
    height: .3125rem;
    color: white;
}

.alert{
  background-color: rgba(0,130,214,0.7);
  color: #fff;
  padding: 0.625rem;
  border-radius: 03125rem;

}

.notification-badge {
  font-family: "Montserrat", sans-serif;
  font-size: 0.8rem;
  position: relative;
  right: 0.3125rem;
  top: -1.25rem;
  color: #ffffff;
  background-color: #FC626C;
  margin: 0 -.8em;
  border-radius: 50%;
  padding: 0.15rem 0.4rem;
}

.mipanel{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-bottom: 1.25rem;
}

.opacidad50 {
  background-color: rgba(255,255,255,1);
  box-shadow: 0 0.625rem 0.625rem hsla(0,0%,0%,.5);
}
.MiCardGlobal {
    width: 98%;
    border-radius: 8px;   /* esquinas simetricas y suaves (px, no % que las deforma) */
    box-shadow: none !important;   /* sin sombra en las tarjetas de graficas */
    border: 1px solid #e6eaef;     /* borde suave para que se note el margen sin sombra */
  }
.gbarras{
    height: 45vh;
  }
.gbarrasPie{
    height: auto;
  }
.micard {
  width: 48%;
  /*height: 14vh;*/
  height: 10rem;            /* mas alto: el texto tiene mas espacio (antes 8rem) */
  border-radius: 8px;       /* esquinas simetricas y suaves (px, no % que las deforma) */
  margin-top: 0.625rem;     /* menos espacio entre tarjetas (antes 1.25rem) */
  font-size: 0.8rem;
  line-height: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.DegradeAlertas {
  background: #0288d1;   /* color plano (se quitó el degradado) */
}
.DAshadow {
  box-shadow: none;   /* se quitó la sombra de color */
}
.DegradeItems {
  background: #ef5350;   /* color plano (se quitó el degradado) */
}
.DIshadow {
  box-shadow: none;   /* se quitó la sombra de color */
}

.DegradeMermaD {
  background: #2e9e4f;   /* color plano (se quitó el degradado) */
}

.DMDshadow {
  box-shadow: none;   /* se quitó la sombra de color */
}
.DegradeMermaX {
  background: #e2701a;   /* color plano (se quitó el degradado) */
}

.DMXshadow {
  box-shadow: none;   /* se quitó la sombra de color */
}


/* Icon Background Round */
.background-round {
  background-color: rgba(0, 0, 0, 0.18);
  padding: 0.94rem;
  border-radius: 50%;
}
.no-margin {
    margin: 0% !important;
}
.mcp1 {
  width: 50%;
  padding: 0.625rem 0.625rem;
}
   .mcp2 {
   width: 48%;
   padding: 0.625rem 1.25rem;
   }

.datosCuadros {
    width: 100%;
    text-align:right;
    display: table;
 }
.full100{
  display: inline-block;
  width: 100% !important;
  /*border: 1px solid red;*/
}

.desbordeTexto{
   margin-bottom: -0.1875rem;
   margin-left: 0;      /* antes -6.25rem: encimaba el número con el subtítulo */
   float: none;         /* antes float:right: causaba el desborde */
}
.lh3rem{line-height: 3rem !important;}
.lh2rem{line-height: 2rem !important;}
.mt-3{margin-top: -0.1875rem;}
.mt-5{margin-top: -0.5rem;}
.mt-22{margin-top: -1.375rem;}
.ml-1{margin-left: -1rem};
.mt2{margin-top: 0.1rem !important;}
.mt3{margin-top: 0.1875rem;}
.mt5{margin-top: 0.3125rem;}
.mt10{margin-top: 0.625rem;}
.mt1rem{margin-top: 1rem !important; }
.ml7{margin-left: 0.4375rem;}
.ml10{margin-left: 0.625rem;}
.ml2rem{margin-left: 2rem !important}
.ml15{margin-left: 0.2em;margin-top: 2em;margin-bottom: 2em}
.mb10{padding-bottom: 0.625rem;}
.mb15{padding-bottom: 3rem;}
.mb00{margin-bottom: 0px !important;}
.mr5{padding-right: 0.5rem}

.mr10{margin-right: 1rem;}
.p00{padding: 0px !important;}
.pt10{padding: 0.625rem !important;}
.pt15{padding-top: 1rem};
.pt5{padding:0.3125rem;}
.wdt5{width: 5%;}
.wdt20{width: 20%;}
.wdt17{width: 18.5%;}
.wdt32{width: 32%;}
.wdt10{width: 10%;}
.wdt8{width: 8% !important;}
.wdt12{width: 12%;}
.wdt80{width: 80%;}
.txtr{text-align: right;}
 .fntsize1{
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
  }
 .fntsize2{
    font-family: 'Montserrat', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
  }
  .fichas{margin: 1rem; justify-content: space-around;display: flex;}
 .fntsize3{
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
  }
  .fntsize4{
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    font-weight: 400;
  }
.bold900{ font-weight: 900; }

.alturaPanel{
  max-height: calc(100vh - 15rem);
  overflow-y: scroll;
}
.alturaPanelFormulario{
  max-height: calc(100vh - 20rem);
  overflow-y: scroll;
}
.alturaPanelBusqueda{
  max-height: calc(100vh - 23rem);
  overflow-y: scroll;
}

.celdaSeparadora{
  background-color: #cfd8dc;
  height: 0.1rem;
}
.centrar{
  margin-left: auto;
  margin-right: auto;
}

.colorFila{
  background-color: #bbdefb;
  min-width: 15rem;
}

.card .card-content {
  padding: 0.5rem 0.5rem 0rem 0.5rem;
  line-height: 0.9em;
  
 }

.texto_formulario{
  display: inline-block;
  width: 100%;
  font-size: 1rem;
  font-weight: 600;

}
.texto_input{
  display: inline-block;
  width: 100%;
  font-size: 0.7em;
  padding: 0.2em;
  color: #757575;
  border: 1px solid white;
  -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
          box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  margin-bottom: 1em;
  margin-top: 0.4em;
}

.texto_input_date{
  font-size: 0.9rem;
  color: #757575;
  border: 1px solid white;
  -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
          box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}


select{
 height: unset;
}

  .logocd {
    position: fixed;
    z-index: -1000;
    top: calc(100vh - 9.5rem);
    padding: 0.5rem;
    background-color: white;
  }

  .logocd img {
    width: 60%;
    height: 60%
  }

  .logocd a {
    display: flex;
  }
  .paraDatos {
    display: flex;
    flex-wrap: wrap;
    margin-left: 0.5rem;
    box-shadow: 0 0.2rem 0.2rem hsla(0,0%,0%,.4);
    padding: 0.5rem 1.5rem 0.3rem 1rem;
  }
.sombra1{box-shadow: 0 0.2rem 0.2rem hsla(0,0%,0%,.4);}
.pie_panel_tabla{
  width: 100%;
  margin-top: 0.8rem;
  border-top: 1px solid #cfd8dc ;
  border-bottom: 1px solid #cfd8dc ;
  background-color: #eceff1;
  padding: 0.3rem 0.5rem 0.3rem 0.5rem;
  display: flex;
}

.imgNoticias{
  width: 5rem;
  height: 5rem;
}

.btnNoticias{
  font-size: 0.8rem;
  padding: 0.1rem 0.5rem 0.1rem 0.5rem;
  border-radius: 0.1rem;
  color: white;
  white-space: nowrap;
  flex-shrink: 0;
}
.altoNoticia{
  overflow-wrap: anywhere; /* evita que un enlace largo sin espacios empuje la pagina hacia el costado */
  padding-bottom: 0.85rem;
  margin-bottom: 0.85rem;
  border-bottom: 1px solid #eeeeee; /* separador visual entre noticias */
}

.filaNoticia td {
  padding-top: 0.5rem;
}

.filaNoticia:last-child .altoNoticia {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Fecha y boton "Detalles" en la misma fila, uno a cada extremo */
.noticiaFilaFecha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0.25rem 0;
}

/* Resumen en su propia fila, recortado a exactamente 3 lineas visuales
   (con "..." automatico), sin importar cuantos caracteres tenga. */
.resumenNoticia {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Contenedor de la lista completa de noticias: ALTURA FIJA (no maxima) --
   la tarjeta mide siempre lo mismo tenga 1 o 5 noticias, para no
   desconfigurar el layout de las tarjetas vecinas. Si hay varias
   noticias, se desplaza verticalmente DENTRO de esta caja (barra a
   la derecha), nunca estirando la tarjeta hacia afuera. */
.noticiasScroll {
  height: 22rem;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 0.75rem; /* espacio entre el contenido y la barra de desplazamiento */
}

.fixed-action-btn {
    top: calc(100vh - 9.5rem);
    bottom: unset !important;
    z-index: 1006 !important;
    background-color: white;
    right: 0% !important;
    padding-right: 100px;
}

.logocdimg {
    width: 60%;
    height: 60%
  }
.logopie {
  width: 50%;
  height: 50%
}
.imgWhats{
    width: 2rem;
    cursor: pointer;
}

 .titulos_panel{
    width: auto;
    padding: 1rem 1rem;
   background-color: #eceff1;

  }
.w100{
  display: flex;
  justify-content: space-around;
}

.wid100 {width: 100%;}

.posTabla{
  padding-left: 5%;
  padding-right: 5%;
  position: relative;
  background-color: white;
  margin-top: -100px;
  z-index: 800;
  max-height: 300px;
  overflow-y: scroll;

}

.cursorP{cursor: pointer;}
.cursorP:hover{background-color: #F3FB9F !important;}













@media only screen and (min-width: 601px) {
  table{border-collapse: unset;}
  .titulos_panel{
    width: 100%;
    display: flex;
    padding: 1rem 1rem;
    justify-content: space-between;
    background-color: #eceff1;
  }
  .header_fijo {
    table-layout: fixed;
    border-collapse: collapse;
  }
  .header_fijo thead {
    background-color: #068ed2;
    color: #FDFDFD;
    height: 2rem;
    width: 100%;
  }
  .header_fijo thead tr {
    display: block;
    position: relative;
  }
  .header_fijo tbody {
    display: block;
    overflow: auto;
    /*width: 100%;*/
    /*height: 28.125rem;*/
    height: 31.125rem;
  }
  .btnNoticias{
    font-size: 0.8rem;
    padding: 0.1rem 1rem 0.1rem 1rem;
    border-radius: 0.1rem;
    color: white;
  }
  .card .card-content {
    padding: 1rem 1rem 0rem 1rem;
  }
  .pie_panel{
    margin-left: -1rem;
    width: 105%;
    padding: 0.8rem 1rem 0.8rem 1rem;
    }
  .pie_panel_tabla{
    margin-top: 0.8rem;
    border-top: 1px solid #cfd8dc ;
    border-bottom: 1px solid #cfd8dc ;
    background-color: #eceff1;
    padding: 0.8rem 1rem 0.8rem 1rem;
    display: flex;
  }
  .navbar-fixed {
    height: 4.2rem;
  }
  .pagina_principal{
    margin-left: 0px;
    min-height: calc(100vh - 4.2rem);
    height: auto;
  }
  .gbarras{
      height: 45vh;
  }
  td, th {
      border-bottom: 1px solid #eceff1;
      font-size: 0.8rem;
      height: 2rem;
  }
  .celdaMerma{
      font-size: 0.7rem;
      height: 1rem;
      padding: 0.2rem 0.4rem 0.2rem 0.4rem;
  }
  .btnXsmall{
    padding: 0.4rem;
    background-color: #00897b;
    color: white;
    cursor: pointer;
    border: unset;
    border-radius: 0.2rem;
    box-shadow: 0 0.1rem 0.0rem hsla(0,10%,10%,.5) !important;
  }
  .btnXsmall:hover , .btnXsmall:focus  {
    background-color:#004d40;
  }
  .micard {
    height: 10rem;          /* mas alto tambien aqui (duplicada de movil) */
    margin-top: 0.625rem;   /* duplicada corregida: mismo espacio reducido */
  }
  .mcp1 {
   width: 48%;
   padding: 0.625rem 1.25rem;
   display: grid;
  }
  .mcp2 {
   width: 48%;
   padding: 0.625rem 1.25rem;
  }
  .desbordeTexto{
    width: 100%;
  }
  .header_fijo {
    table-layout: fixed;
    border-collapse: collapse;
  }
  .header_fijo thead {
    background-color: #068ed2;
    color: #FDFDFD;
    height: 2rem;
  }
  .header_fijo thead tr {
    display: block;
    position: relative;
  }
  .header_fijo tbody {
    display: block;
    overflow: auto;
    height: 31.125rem;
  }
  .colorFila{
    background-color: unset;
  }
  table.responsive-table th {
    width: unset;
  }
  .color_header thead {
    background-color: #068ed2;
    color: #FDFDFD;
    height: 2rem;
  }
  .color_header2 thead {
    background-color: #53BEF4;
    color: #FDFDFD;
    height: 2rem;
  }
  .paraBotones{
    display: block;
    justify-content: space-around;
  }
  .paraBotones > a {
    margin-top: unset;
  }
  .paraDatos {
        box-shadow: 0 0.2rem 0.2rem hsla(0,0%,0%,.4);
    padding: 0.5rem 1.5rem 0.3rem 1rem;
    width: 40%;
    margin-left: 0.2rem;
    margin-right: 2rem;
  }
  .tituloscards{
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .cuadroDatos{
    display: flex;
  }
}







/* ============================================================
   RESPONSIVE fv01 — tabla 10 cols → bloques apilados en móvil
   Breakpoint: ≤900px  (portrait + landscape iPhone/iPad)
   Target: table.striped.color_header
   ============================================================ */

/* ── Global: botón OK verde/gris + escáner (desktop y móvil) ── */
.btnXsmall.btn-ok-incomplete {
  background-color: #9e9e9e !important;
  color: #fff !important;
  opacity: 0.75;
  cursor: default;
}
.btnXsmall.btn-ok-complete {
  background-color: #3ab363 !important;
  color: #fff !important;
  opacity: 1;
  cursor: pointer;
}
.btnXsmall.btn-ok-complete:hover,
.btnXsmall.btn-ok-complete:focus { background-color: #2e7d32 !important; }

#btnScanner { font-size: 1rem; line-height: 1.8; padding: 0 0.5rem; }

/* ── Bloque móvil ≤900px ─────────────────────────────────────── */
@media only screen and (max-width: 900px) {

  /* 1 — Ocultar thead */
  table.striped.color_header thead { display: none; }

  /* 2 — Tabla y tbody como bloque */
  table.striped.color_header,
  table.striped.color_header tbody { display: block; width: 100%; }

  /* 3 — Cada tr = tarjeta; flex-wrap para layout 30/70 en cabecera */
  table.striped.color_header tbody tr {
    display: flex;
    flex-wrap: wrap;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    margin-bottom: 0.75rem;
    padding: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    overflow: hidden;
  }

  /* Fila de ingreso: borde sólido + indicador izquierdo con color de categoría */
  table.striped.color_header tbody tr:last-child {
    --cat-color: #068ed2;
    border: 1px solid #e0e0e0;
    background: #fafafa;
    border-left: 4px solid var(--cat-color);
  }

  /* 4 — Cada td: flex [etiqueta … valor], texto mínimo 16px */
  table.striped.color_header tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px !important;
    border-bottom: 1px solid #f0f0f0;
    font-size: 16px;
    text-align: right !important;
    height: auto !important;
    width: 100% !important;
    box-sizing: border-box;
  }
  table.striped.color_header tbody td:last-child { border-bottom: none; }

  /* 5 — Etiqueta base (filas de datos) */
  table.striped.color_header tbody td::before {
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #546e7a;
    text-align: left !important;
    white-space: nowrap;
    margin-right: 0.75rem;
    flex-shrink: 0;
    min-width: 6.5rem;
  }

  /* 6 — Etiquetas por posición (item 14: "Registro #" renombrado) */
  table.striped.color_header tbody td:nth-child(1)::before  { content: "Registro #"; }
  table.striped.color_header tbody td:nth-child(2)::before  { content: "Categoría"; }
  table.striped.color_header tbody td:nth-child(3)::before  { content: "Reg. Sanitario"; }
  table.striped.color_header tbody td:nth-child(4)::before  { content: "Producto"; }
  table.striped.color_header tbody td:nth-child(5)::before  { content: "Cantidad"; }
  table.striped.color_header tbody td:nth-child(6)::before  { content: "Vencimiento"; }
  table.striped.color_header tbody td:nth-child(7)::before  { content: "Lote"; }
  table.striped.color_header tbody td:nth-child(8)::before  { content: "Proveedor"; }
  table.striped.color_header tbody td:nth-child(9)::before  { content: "Costo Unit."; }
  table.striped.color_header tbody td:nth-child(10)::before { content: "Acción"; }

  /* 7 — Categoría en filas de datos: hereda color:white del PHP inline */
  table.striped.color_header tbody tr:not(:last-child) td:nth-child(2)::before {
    color: inherit;
  }

  /* 8 — Fila de ingreso: etiquetas usan --cat-color (items 4, 11) */
  table.striped.color_header tbody tr:last-child td::before {
    color: var(--cat-color, #068ed2);
    min-width: 5.5rem;
  }

  /* 9 — Items 15-16: "Registro #" (30%) y "Categoría" (70%) en misma fila */
  table.striped.color_header tbody td:nth-child(1) {
    width: 30% !important;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    border-right: 1px solid #eeeeee;
    padding: 6px 8px !important;
  }
  table.striped.color_header tbody td:nth-child(2) {
    width: 70% !important;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 6px 8px !important;
  }
  table.striped.color_header tbody td:nth-child(1)::before,
  table.striped.color_header tbody td:nth-child(2)::before {
    min-width: unset;
    margin-right: 0;
    margin-bottom: 2px;
    font-size: 11px;
  }

  /* 10 — Campo búsqueda (dosColumnas): etiqueta + área táctil 48px */
  #dosColumnas::before {
    content: "Buscar" !important;
    color: var(--cat-color, #068ed2) !important;
  }
  #dosColumnas { flex-wrap: wrap; }
  #dosColumnas > div {
    width: 100%;
    display: flex;
    align-items: center;
    margin-top: 4px;
  }
  #dosColumnas input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 48px;
    font-size: 16px !important;
  }

  /* 11 — ndt1 vacío/spacer: ocultar */
  #ndt1 { display: none !important; }

  /* 12 — Select Categoría: picker nativo iOS, sin distorsión */
  #idCateg { padding: 0 !important; }
  #idCateg::before {
    padding-left: 8px;
    font-size: 11px;
    margin-bottom: 2px;
  }
  #idCateg select.browser-default {
    width: 100% !important;
    font-size: 18px !important;
    padding: 10px 8px !important;
    height: auto !important;
    margin: 0 !important;
    border: none !important;
    -webkit-appearance: menulist-button;
    appearance: menulist-button;
    background-color: transparent;
  }

  /* 13 — Todos los inputs de la fila de ingreso: 16px, ancho completo */
  table.striped.color_header tbody tr:last-child input,
  table.striped.color_header tbody tr:last-child select.browser-default {
    width: 100% !important;
    box-sizing: border-box;
    font-size: 16px !important;
  }

  /* 14 — Botón OK: ancho completo */
  #ndt7 { justify-content: center; }
  #ndt7::before { content: "" !important; min-width: 0; }
  #ndt7 button { width: 100%; font-size: 16px; padding: 0.6rem; }

  /* 15 — Celda Acción: solo ícono centrado */
  table.striped.color_header tbody td:nth-child(10) { justify-content: center; }
  table.striped.color_header tbody td:nth-child(10)::before { content: "" !important; min-width: 0; }

  /* 16 — Restaurar padding en celdas .p00 */
  table.striped.color_header tbody td.p00 { padding: 8px 12px !important; }

  /* 17 — Tabla flotante de resultados del buscador */
  .posTabla { left: 0; right: 0; padding: 0 2%; max-height: 14rem; }

  /* 18 — PROCEDER AL REGISTRO: sticky bottom (item 9) */
  .pie_panel_tabla {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    z-index: 500;
    background-color: #eceff1;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.12);
  }

  /* 19 — Área táctil mínima para lupa y cámara */
  #btnBuscarProd,
  #btnScanner {
    min-height: 48px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

}

@media only screen and (min-width: 993px) {
  .container {
    width: 100%;
  }

  nav ul a:hover {
    background-color: #81d4fa ;
  }
  .ml15{margin-left: 1em;margin-top: unset; margin-bottom: 1em;}
  .gbarras, .gbarrasPie{
    height: 45vh;
  }
 .img-centrar-v {
    margin-top: 0.8rem;
  }
  .pagina_principal{
    margin-left: 250px;
  }
  .MiCardGlobal {
    width: 49%;
    max-height: 30rem;
    overflow-y: auto;
 }
  .sidenav li > a {
    color: #FFFFFF;
    padding-left: 1.0625rem ;
  }
  .sidenav li > a >span {
  padding-left: 0.375rem;
  color: white;
  }
  .sidenav li > a > i.material-icons {
      color: #ffffff;
  }
  .sidenav {
   width: 250px;
   top: 64px;
  }
  .dropdown-content {
    overflow-y: hidden;
  }
  .dropdown-content li {
    color: #068ED2;
    height: 1.25rem;
  }
  .dropdown-content li > a {
    font-size: 0.9rem;
    color: #068ed2;
  }
  .dropdown-content li > a > span{
     margin-left: -0.9375rem;
  }
  .dropdown-content li > a:hover {
    background-color: #81d4fa ;
    max-height: 3.125rem;
  }
  .dropdown-content li > a > i {
      height: unset;
      line-height: unset;
  }
  .dropdown-content li > a, .dropdown-content li > span {
      font-size: 0.9rem;
      color: #068ed2;
      display: block;
      padding: 0.625rem 0.3125rem;
  }
  .submenus1{
    color: unset;
    /*margin-left: -15px;*/
  }
  .submenus2 {
    color: unset;
    margin-left: -0.6rem;
    width: 110%;
  }
  .collapsible-header > i {
    color: unset;
  }
  .submenus span {
    margin-left: -1.5625rem;
  }
  .azul1{
    color: unset;
  }
  .sidenav li {
    background-color: unset;
  }
  .sidenav li.active {
    background-color: rgba(0, 0, 0, 0.5);
  }
  .sidenav .collapsible-body, .sidenav.fixed .collapsible-body{
    background-color: #1565c0;

  }
  .icono_titulo {
    font-size: 0.8rem;
    color: #068ED2;
  }
  .t_activo{
    font-size: 0.8rem;
    color: white;
  }
  .micard{
    width: 23%;
    height: 10rem;          /* mas alto tambien aqui (duplicada) */
    min-height: 9rem;
    font-size: 1rem;
  }
  .fntsize1{
    font-size: 1.25rem;
    font-weight: 400;
    text-overflow: clip;
    margin-top: 0.3125rem;

  }
  .desbordeTexto{
    width: auto;
    margin-left: 0;   /* duplicada corregida: ya no encima el texto */
  }
  .texto_formulario{
    font-size: 1rem;
  }
  .texto_input{
   font-size: 0.5em;
  }

  .fondoMovil{
    background-color: unset;
  }
  .paraDatos {
    width: 30%;
    flex-wrap: unset;
  }

}

/* ===== Ajustes visuales tarjetas KPI / gráficas (agregado) =====
   Complementa los cambios de arriba:
   6. Botones "Detalles" de las gráficas: esquinas redondeadas y sin sombra.
   5. Subtítulos de las tarjetas KPI un poco más chicos, para que no se
      desborden con números largos. Se limita a .micard para no afectar
      otros textos. */
.tituloscards .btn-small{border-radius:8px !important;box-shadow:none !important;}
/* Texto de las tarjetas KPI: números más grandes y en negrita marcada;
   subtítulos legibles y que PUEDEN ajustar a 2 líneas (evita que "Período
   total" se desborde). */
.micard .fntsize1{font-size:1.15rem !important;font-weight:800 !important;line-height:1.15 !important;}
.micard .fntsize2{font-size:1.05rem !important;font-weight:800 !important;line-height:1.15 !important;}
.micard .fntsize3{font-size:0.72rem !important;font-weight:600 !important;opacity:0.95;white-space:normal !important;line-height:1.05 !important;}
/* Se da más ancho a la columna de los números (mcp1) y menos al ícono (mcp2)
   para que cifras largas como "1.019,48" NO se salgan del borde de la tarjeta. */
.micard .mcp1{width:58% !important;padding:0.5rem 0.5rem !important;}
.micard .mcp2{width:42% !important;padding:0.5rem 0.4rem !important;}
/* el número ya no encima ni fuerza una sola línea al subtítulo */
.micard .desbordeTexto{margin-left:0 !important;float:none !important;white-space:normal !important;}

/* Pastel de procedimientos: que NO se desborde de su cajón. Se limita la
   altura, se centra y el canvas no supera el ancho disponible. */
#canvas-holder.gbarrasPie{position:relative;max-height:360px;overflow:hidden;
  padding:8px;box-sizing:border-box;justify-content:center;}
#canvas-holder.gbarrasPie canvas{max-width:100% !important;height:auto !important;}

/* ===== Limpieza en MÓVIL/TABLET (pantallas < 992px) =====
   1) Se oculta el cajón fijo "INICIO" / nombre de categoría (.idOpcion) que en
      pantallas chicas se montaba ENCIMA de las tarjetas KPI.
   2) Se oculta el bloque de contactos duplicado (row p_flex fntsize4) que solo
      aparecía en móvil y se veía como un "pie azul" de más al final. */
@media (max-width: 992px){
  .idOpcion{display:none !important;}
  .row.p_flex.fntsize4{display:none !important;}
}

/* ===== MÓVIL/TABLET (< 768px): tarjetas KPI con texto centrado EN ALTURA =====
   Se mantiene el ícono a la izquierda y los números a la derecha (como en
   escritorio), pero el contenido se centra VERTICALMENTE dentro de la tarjeta
   (antes quedaba pegado arriba). El texto crece un poco. */
@media (max-width: 768px){
  .micard{align-items:center !important;}
  .micard .fntsize1{font-size:1.35rem !important;}
  .micard .fntsize2{font-size:1.2rem !important;}
  .micard .fntsize3{font-size:0.82rem !important;}
}