/* Estilo personalziado VG */

 @charset "utf-8";
 /* CSS Document */

 body{
  background-color: #eeeeee;
}


/* Estilo para card*/        
    /* Fila horizontal con flex y separación mínima */
    .row-flex {
      display: flex;
      flex-wrap: wrap;
      gap: 5px; /* separación horizontal entre cards */
      align-items: stretch; /* cards misma altura */
    }

    .row-flex .col {
      display: flex;
      padding: 2px; /* reduce margen entre columnas */
    }

    /* Card tipo dashboard */
    .card-kpi {
      display: flex;
      align-items: center;
      gap: 12px;
      flex: 1; /* ocupa todo el espacio de la columna */
      padding: 15px 12px; /* padding interno superior e inferior */
      border-radius: 10px;
      background: #fff;
    }

    /* Círculo celeste que contiene el icono */
    .icon-box {
      background: #e3f2fd; /* celeste elegante */
      border-radius: 50%;
      width: 40px;       /* tamaño fijo */
      height: 40px;      /* tamaño fijo */
      display: flex;
      align-items: center;
      justify-content: center;
      flex: none;         /* no se estira con flex */
    }

    .icon-box i {
      font-size: 18px;
      color: #1976d2;
      /*color: #616161;     /* gris elegante */
    }

    /* Texto dentro del card */
    .text-box {
      display: flex;
      flex-direction: column;
      justify-content: center;
      line-height: 1.2;
    }

    .text-box strong {
      font-size: 13px;
      color: #666;
    }

    .text-box span {
      font-size: 15px;
      font-weight: 500;
      color: #000;
    }

    /* Fin estilo para card */

.teal-text li a{
  color: #009688;
 }

 i.icon-gris {
     color: grey;
 }

/*Estilo para input*/
input:invalid {
 
border: 1px solid red;
 
}
 
/* Estilo por defecto */
 
input:valid {
 
border: 1px solid green;
 
}

/*add*/

* Estilo por defecto */
 
input:required:invalid {
 
border: 1px solid red;
 
}
 
input:required:valid {
 
border: 1px solid green;
 
}

/*fin estilo para input*/


 table.tabla_datos {
   border: 1px solid #1C6EA4;
   background-color: #EEEEEE;
   width: 100%;
   text-align: left;
   border-collapse: collapse;
 }
 table.tabla_datos td, table.tabla_datos th {
   border: 1px solid #AAAAAA;
   padding: 3px 2px;
 }
 table.tabla_datos tbody td {
   font-size: 13px;
 }
 table.tabla_datos tr:nth-child(even) {
   background: #D0E4F5;
 }
 table.tabla_datos thead {
   background: #1C6EA4;
   background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
   background: -webkit-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
   background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
   border-bottom: 2px solid #444444;
 }
 table.tabla_datos thead th {
   font-size: 15px;
   font-weight: bold;
   color: #FFFFFF;
   border-left: 2px solid #D0E4F5;
 }
 table.tabla_datos thead th:first-child {
   border-left: none;
 }

 table.tabla_datos tfoot {
   font-size: 14px;
   font-weight: bold;
   color: #FFFFFF;
   background: #D0E4F5;
   background: -moz-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
   background: -webkit-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
   background: linear-gradient(to bottom, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
   border-top: 2px solid #444444;
 }
 table.tabla_datos tfoot td {
   font-size: 14px;
 }
 table.tabla_datos tfoot .links {
   text-align: right;
 }
 table.tabla_datos tfoot .links a{
   display: inline-block;
   background: #1C6EA4;
   color: #FFFFFF;
   padding: 2px 8px;
   border-radius: 5px;
 }

 input[type=text] {
     width: 20%;
     padding: 12px 20px;
     margin: 8px 0;
     box-sizing: border-box;
  background-color:lightgray;
  border-radius: 5px;
  border-color: black;

 }

/* Personaliza iconos */
 .material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}
/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }


input[type="text"]{
background: #faffbd;
}

.input:[type="text"]{
  background: #faffbd;
}


/**/
.button-collpase{
        display: none;
      }
      .input-field input:focus + label {
           color: #0288d1 !important;
      }
        .row .input-field input:focus{
           border-bottom: 1px solid #039be5 !important;
           box-shadow: 0 1px 0 0 #039be5 !important;
        }
        .prefix{
           color: #ff9800 !important;
        }
        .btn{
           background-color: #039be5;
        }
        .btn:hover {
           background-color: #039be5;
        }
        /*.dropdown-content li>a dropdown-content li>span{
           color: #039be5;
        }*/
        .select-dropdown{
          color: #424242;
        }
        .dropdown-content li>span {
          color: #546e7a; !important;
        }
        .dropdown-content li>a {
          color: #0277bd; !important;
        }
        .select-content li>span {
          color: #0277bd; !important;
        }
        .select-content li>a {
          color: #0277bd; !important;
        }
        .input:[type="radio"]:checked{
          color: #0277bd;
          background-color: #0288d1;
        }
        .collection .collection-item.active {
        background-color: #0288d1;
        color:#eafaf9;
        }
        .collection a.collection-item {
        display:block;
        transition:.25s;
        color:#0288d1;
        }



        input[type="text"],
        input[type="textarea"],
        input[type="password"],
        input[type="email"],
        input[type="url"],
        input[type="time"],
        input[type="date"],
        input[type="datetime"],
        input[type="datetime-local"],
        input[type="tel"],
        input[type="number"],
        input[type="search"]{
          /*color:#0288d1;*/
          background: #f5f5f5 ; /* #faffbd;*/
          padding: 0px 2px;
        }
        .select-wrapper input.select-dropdown{
          /*color:#0288d1;*/
          background: #f5f5f5 ; /* #faffbd;*/
          padding: 0 2px;
        }