* {
        margin: 0;
        padding: 0;
      }
      /*pantalla chica */
      @media screen and (min-width: 1366px) and (max-width: 1366px),
      screen and (min-height: 768px) and (max-height: 768px) {
          body {
              zoom: 70%;
            color:#000;
              /*-webkit-transform: scale(0.75);*/
              /*transform: scale(0.75);*/
          }
      }



     





      
      button{
        border-radius: 9px;
      }


      .overviewcard {
        width: 100%;
        margin: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 21px;
        background-color: #d3d3d3;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    


.avatar-button {
    /* ... (otras propiedades) ... */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Espaciado entre el ícono y el texto */
}

.bi {
    font-size: 28px; /* O el tamaño que prefieras para el ícono */
    vertical-align: middle; /* Para alinear verticalmente en caso de que haya algún desajuste */
}




      
      .buttonEditar {
        background-color: #4CAF50;
        /* Color de fondo */
        /* border: none; Sin borde */
        color: white;
        /* Color del texto */
        padding: 10px 30px;
        /* Tamaño del padding */
        text-align: center;
        /* Alineación del texto */
        text-decoration: none;
        /* Sin subrayado */
        display: inline-block;
        /* Display en línea */
        font-size: 16px;
        /* Tamaño de la fuente */
        margin: 4px 2px;
        /* Margen */
        transition-duration: 0.4s;
        /* Duración de la transición */
        cursor: pointer;
        /* Cursor de tipo mano */
        border-radius: 8px;
        /* Radio de las esquinas */
      }
      .buttonEditar:hover {
          background-color: #3e8e41;
          color: white;
      }
      .modal{
        float: right;

      }
      .txtnormal {
        font-family: Arial, Helvetica, sans-serif;
        font-size: medium;
        text-align: left; 
      }
      .txtlink {
        color: #fff;
        text-decoration: none;
      	/* background-color: #C0C0C0; */
        font-size: 15px;
        width: 20%;
      }
      .txtlink:hover {
        color: #fff;
        text-decoration: blink;
      }




      .img_bienvenida{
        border-radius: 50%;


      }
     
       .btn:hover {
        background: #3cb0fd;
        background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
        background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
        background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
        background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
        background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
        text-decoration: none;
      }
      .txt_button {
        font-size: 14px;
        text-decoration: none;
        color: #FFFFFF;
      }
      /* menu principal  */
      .nomcole {
        font-family: Arial, Helvetica, sans-serif;
        font-size: medium;
        padding-left: 5px;
        padding-top: 5px;
        text-align: left;
      }
      .txt2plano {
        font-family: Arial, Helvetica, sans-serif;
        font-size: x-small;
        padding-left: 5px;
      }
      .usuario {
        font-family: Arial, Helvetica, sans-serif;
        font-size: small;
        padding-left: 5px;
        padding-top: 5px;
        text-align: left;
        border-bottom: thin;
        border-bottom-style: solid;
        border-bottom-color: navy;
        vertical-align: bottom;
      }
      .titulo1 {
        font-family: Arial, Helvetica, sans-serif;
        font-size: x-large;
        color: blue;
        text-align: right;
      }
      .celdalb {
        border-bottom: thin;
        border-bottom-style: solid;
        border-bottom-color: navy;
        text-align: center
      }
      .celdalbi {
        border-bottom: thin;
        border-bottom-style: solid;
        border-bottom-color: navy;
        text-align: right;
      }
      .menu_no_sel {
        background-image: url('../image/dolphin_bg.gif');
        font-size: 12px;
        width: 13%;
        height: 28px;
        color: #FFFFFF;
        font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
        font-weight: bold;
        text-align: center;
      }
      /*// botones*/
      .btn {
        background: #FFFFFF;
        background-image: -webkit-linear-gradient(top, #FFFFFF, #2980b9);
        background-image: -moz-linear-gradient(top, #FFFFFF, #2980b9);
        background-image: -ms-linear-gradient(top, #FFFFFF, #2980b9);
        background-image: -o-linear-gradient(top, #FFFFFF, #2980b9);
        background-image: linear-gradient(to bottom, #FFFFFF, #2980b9);
        -webkit-border-radius: 12;
        -moz-border-radius: 12;
        border-radius: 12px;
        font-family: Arial;
        color: #000000;
        font-size: 13px;
        padding: 10px 20px 10px 20px;
        border: solid #000000 2px;
        text-decoration: none;
      }

      .btn:hover {
        text-decoration: none;
      }

      .buton_f {
        width: 200px;
        height: 45px;
        color: #fff;
        padding: 5px 10px;
        font-weight: bold;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
        display: inline-block;
        outline: none;
        border-radius: 5px;
        border: none;
        background: #5386da;
        box-shadow: 0 5px #4433ff;
      }

      /*opcion de boton intereactivo*/
      /*botonnes ----Guardar  / Volver*/
      .buton_ {
        width: 200px;
        height: 45px;
        color: #fff;
        padding: 5px 10px;
        font-weight: bold;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
        display: inline-block;
        outline: none;
        border-radius: 9px;
        border: none;
        background: #5386da;
        box-shadow: 0 5px #4433ff;
      }

      .buton_:hover {
        box-shadow: 0 3px #4433ff;
        top: 1px;
      }

      .buton_:active {
        box-shadow: 0 0 #4433ff;
        top: 5px;
      }


      .ramon{
        border-bottom: 9px;
        /* border-radius: 9px; */
      }



      .checkbox-JASoft {
      	display: inline-block;
      	position: relative;
          width: 70px;
      	height: 30px;
      	background: #555;
      	border-radius: 15px;
      	box-shadow: inset 0px 1px 1px rgba(0,0,0,0.6), 0px 1px 0px rgba(255,255,255,0.3);
      }
      .checkbox-JASoft label {

          /* aspecto */
          display: block;
          width: 34px;
      	height: 20px;
      	border-radius: 17px;
      	box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.35);
      	background: #fcfff4;
      	background: linear-gradient(to top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
          cursor: pointer;

          /* Posicionamiento */
          position: absolute;
          top: 5px;
      	left: 5px;
          z-index: 1;

      	/* Comportamiento */
          transition: all .4s ease;

          /* ocultar el posible texto que tenga */
          overflow: hidden;
          text-indent: 35px;
          transition: text-indent 0s;
      }
      .checkbox-JASoft input[type=checkbox]:checked + label {
      	left: auto;
          right: 5px;
      }
      .checkbox-JASoft:after {
      	content: 'NO';
      	font: 12px/30px Arial, sans-serif;
      	color: #AAA;
      	position: absolute;
      	right: 10px;
          z-index: 0;
      	font-weight: bold;
      	text-shadow: 1px 1px 0px rgba(255,255,255,.20);
      }

      .checkbox-JASoft:before {
      	content: 'SÍ';
      	font: 12px/30px Arial, sans-serif;
      	color: lime;
      	position: absolute;
      	left: 10px;
      	z-index: 0;
      	font-weight: bold;
      }



        /*botonnes ----Guardar  / Volver*/
       .menu_bl {
        background-image: url('../image/dolphin_bg.gif');
        height: 28px;
      }

      .menu_no_sel:hover {
        background-image: url('../image/dolphin_bg-OVER.gif');
      }

      .menu_sel {
        background-image: url('../image/dolphin_bg-ON.gif');
        height: 28px;
        text-align: center;
      }

      .tabla_menu {
        border-collapse: collapse;
        width: 100%;
      }

      .menu_abajo {

        background-color: white;
        /* background-color: #004E8C; */
        height: 6px;
      }

      .txtmenu {
        font-size: 11px;
        color: #2c0055;
        font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
        font-weight: bold;
        text-decoration: none;
      }

      /* menu tab----------------------------------------------------------------------------------------------------------*/
      .letra_sel {
        text-align: center;
        color: #000080;
        background-color: #898686;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        padding: 0px 0px 5px 0px;
        /* padding: 0px 0px 20px 0px;
        border: 1px solid red ; */
        /* width: 10%; */

      }

      .letra_nsel {
        font-family: Arial, Helvetica, sans-serif;
        padding: 5px 0px 0px 0px;
        text-align: center;
        color: red;
        background-color: #D7FFFF;
        /* border-top: thin #000080 solid; */
        /* width: 10%; */
        font-size: 12px;

      }


      .letra_sit {
        background-color: #CCCCCC;
        height: 4px;
        border-top: thin #000080 solid;
        border-left: thin #000080 solid;
        border-right: thin #000080 solid;
      }

      .letra_sib {
        background-color: #CCCCCC;
        height: 4px;
        border-left: thin #000080 solid;
        border-right: thin #000080 solid;
        /*border-bottom:thin #000080 solid;*/
      }

      .letra_nob {
        background-color: #D7FFFF;
        height: 4px;
        border-bottom: thin #000080 solid;
        border-left: thin #000080 solid;
        border-right: thin #000080 solid;
      }

      .letra_not {
        background-color: #FFFFFF;
        height: 4px;
        border-bottom: thin #000080 solid;
      }

      .tabla_letra {
        border-collapse: collapse;
      }

      .letra_a {
        font-family: Arial, Helvetica, sans-serif;
        /* font-size: small; */
        color: #000080;
        text-decoration: none;
        font-size: 120px;

      }

      .letra_a:hover {
        color: maroon;
      }

      /* submenu --------------------------------------------------------------------------------------------------------- */
      .celda_alto_tsm {
        height: 28px;
        border-bottom: 1px navy solid;
      }

      .tabla_sm {
        border-collapse: collapse;
        width: 100%;
        border: 1px navy solid;
      }

      .sb_menu_1 {
        background-image: url('../image/menu2.gif');
        padding-left: 10px;
        color: #FFFFFF;
      }

      .sb_menu_2 {
        background-color: #FFFFFF;
        padding-left: 20px;
      }

      .sb_menu_3 {
        background-color: #FFFFFF;
        padding-left: 30px;
      }

      .txtsmenu {
        font-weight: bold;
        font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
        font-size: 12px;
        text-decoration: none;
        color: navy;
      }

      .txtsmenu:hover {
        color: maroon;
      }

      .masomenos {
        width: 22px;
        background-image: url('../image/menu2.gif');
        text-align: center;
      }

      .masomenosb {
        width: 22px;
        background-color: #FFFFFF;
        text-align: center;
      }

      /* ingreso datos -------------------------------------------------------------------------------------------- */
      .tabseleccionado {
        text-align: center;
        font-family: Arial, Helvetica, sans-serif;
        font-size: small;
        background-color: #CCCCCC;
        border-left: 1px solid #CCCCCC;
        border-right: 1px solid #CCCCCC;
        border-top: 1px solid #CCCCCC;
      }

      .tabnoseleccionado {
        text-align: center;
        font-family: Arial, Helvetica, sans-serif;
        font-size: small;
        background-color: #D7FFFF;
        border-bottom: 1px solid #CCCCCC;
        border-left: 1px solid #CCCCCC;
        border-right: 1px solid #CCCCCC;
        border-top: 1px solid #CCCCCC;
      }

      .linkmenu {
        text-decoration: none;
        color: navy;
      }

      .linkmenu:hover {
        color: maroon;
      }



      .celdadat {
        font-family: Arial, Helvetica, sans-serif;
        font-size: medium;
        color: #FFFFFF;
        background-color: #CCCCCC;

      }


      .tabla_detalle_orden_compra{
        margin: 0 auto;
        width: 55%;
        /* padding: 10px 10px 10px ; */
        border: black 2px solid;
      }

      .tabla_detalle_orden_compra tbody tr:hover {
        background-color: #DBA934;
      }

      .tabla_centrada{
      	margin: 0 auto;
        width: 35%;
        /* padding: 10px 10px 10px ; */
        border: black 2px solid;
      }
      .tabla_centrada tbody tr:hover {
        background-color: #DBA934;
      }



      .tabla_centrada_usuario{
      	margin: 0 auto;
        width: 35%;
        /* padding: 10px 10px 10px ; */
        border: black 2px solid;
      }
      .tabla_centrada_usuario tbody {
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Sombra para efecto 3D */
        /* border: 10px solid #ccc; Borde ligero */
        border-radius: 10px; /* Bordes redondeados (opcional)
        background-color: #fff; Color de fondo (opcional) */
        overflow: hidden; /* Para mantener la sombra dentro de los bordes redondeados */
    }


    .tablaPat tbody {
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.20); /* Sombra para efecto 3D */
        border: 10px solid #ccc;
        border-radius: 10px; /* Bordes redondeados (opcional)
        background-color: #fff; Color de fondo (opcional) */
        overflow: hidden; /* Para mantener la sombra dentro de los bordes redondeados */
    }





      .tabla_centrada_mantenedor{
      	margin: 0 auto;
        width: 70%;
        /* padding: 10px 10px 10px ; */
        border: black 2px solid;
      }

      .tablaPat {
        background-color: #CCCCCC;
        width: 50%;
        margin: 0 auto; /* Centra la tabla */
        border-collapse: separate; /* Asegura que los bordes estén separados para el efecto 3D */
        border-spacing: 0; /* Elimina el espacio entre bordes */
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); /* Sombra principal para el efecto 3D */
        position: relative; /* Posicionamiento relativo para posibles pseudoelementos */
        border: 2px solid #000000;
    }
    
    .tablaPat::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2); /* Sombra interior para más profundidad */
        z-index: -1; /* Asegura que la sombra interior esté detrás del contenido de la tabla */
    }
    
    /* .tablaPat, .tablaPat th, .tablaPat td {
    }
     */

      .tablasincronizacion{
        background-color: #CCCCCC;
        width: 50%;
        /* border: black 2px solid; */
        /*text-align: center;  Me centra las letras*/
        margin:0 auto;  /*ME CENTRA LA TABLA*/
      }

      .tablasincronizacion tbody tr:hover {
        background-color: #DBA934;
      }







      .tablaPatboton{
        background-color: #CCCCCC;
        width: 70%;
        /* border: black 0px solid; */
        /*text-align: center;  Me centra las letras*/
        margin:0 auto;  /*ME CENTRA LA TABLA*/
      }

      .tablaAlumno{
          border: thin navy solid;
          vertical-align: top;
          width: 86%;
          margin: 0 auto;
      }
      .tablacafe{
        margin: 0 auto;
        width: 86%;
      }/* TABLA PRINCIPAL */
      .tabla2 {
        /* border: thin navy solid; */
        /* vertical-align: top; */
        width: 86%;
        margin: 0 auto;
        font-family: Arial, Helvetica, sans-serif;
      }




      /* TABLA PRINCIPAL */
      .tabla {
        /* background-image: radial-gradient(circle at 83.77% 50%, #6d65a9 0, #4e53a2 25%, #1f419a 50%, #003192 75%, #00258b 100%);  */
        background-color: #7EABD7;
        border: black 1px solid;
        width: 86%;
        margin: 0 auto;
        font-family: Arial, Helvetica, sans-serif;
      }

      .tablaCursosRealizados {
        /* border: thin navy solid; */
        vertical-align: top;
        width: 86%;
        margin: 0 auto;
        font-family: Arial, Helvetica, sans-serif;
      }

      .tablaAcordion {
        border: thin navy solid;
        vertical-align: top;
        width: 86%;
        margin: 0 auto;
        font-family: Arial, Helvetica, sans-serif;
        background: #D0E4F5;
      }


      .lupe{
        text-align:center;
        background-color: red;


      }






      /* tabla que imprime los datos de tutor  */
      .tabla_cabezera_info{
        border: thin navy solid;
        vertical-align: top;
        width: 86%;
        margin: 0 auto;
        font-family: Arial, Helvetica, sans-serif;
        background-color:  #004E8C
      }
      /* Tabla que imprime los  datos internos del tutor */
      .nomtabla {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        font-weight: bold;
        background-color: #004E8C;
        color: #FFFFFF;
        height: 29px;
        text-align: center;
      }

      .nomtablaModal {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 20px;
        font-weight: bold;
        background-color: #004E8C;
        color: #FFFFFF;
        height: 34px;
        text-align: center;
        padding: 7px 0px 40px;
      }


      .nomtablaModal_sub {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 15px;
        font-weight: bold;
        background-color: #004E8C;
        color: #FFFFFF;
        height: 24px;
        text-align: center;
        padding: 7px 0px 40px;
      }

      .nomtablaModalEliminar {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 20px;
        font-weight: bold;
        background-color: red;
        color: #FFFFFF;
        height: 34px;
        text-align: center;
        padding: 7px 0px 40px;
      }

      /* Tabla que imprime los modales de MENU MANTENCION*/
      .nomtabla2 {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        font-weight: bold;
        width: 90%;
        color: #FFFFFF;
        height: 29px;
        text-align: center;
      }

      .nomtabla_mantenedor {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 24px;
        font-weight: bold;
        color: #FFFFFF;
        /* height: 29px; */
        text-align: center;
      }



      /* tabla que imprime si es tutor o no  */
      .logo_tutor{
          font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
          font-size: medium;
          font-weight: bold;
          background-color: #004E8C;
          color: #FFFFFF;
          width: 10%;
          text-align: center
      }








      .avatar {
        vertical-align: middle;
        width: 10%;
        height: 100%;
        border-radius: 50%;
      }



      .imagen {
        height: 150px;
        width: 190px;
        border-radius: 50%;
        background-repeat: no-repeat;
        background-position: 50%;
      }


      .imagenColegioExpandir {
        /* height: 100px; */
        /* width: 100px; */
        /* border-radius: 20%; */
        background-repeat: no-repeat;
        background-position: 50%;
        height: 5%;
        width: 10%;


      }

      .imagenColegioBienvenida {
        height: 50;
        width: 50%;
        border-radius: 20%;
        background-repeat: no-repeat;
        background-position: 50%;


      }


      .tabla_lista {
        margin-left: auto;
        margin-right: auto; 
        border: thin navy solid;
        vertical-align: top;
        width: 86%;
        background-color: #898686;
        margin: 0 auto;
      }
     









      .tabla_lista tbody tr:hover {
        background-color: #DBA934;
        /* font-size: 10px; */
      }
      .tabla_lista_cdeuda {
        margin-left: auto;
        margin-right: auto; 
        border: thin navy solid;
        vertical-align: top;
        width: 86%;
        background-color: #898686;
        margin: 0 auto;
      }
      .tabla_lista_cdeuda tbody tr:hover {
        background-color: #DBA934;
      }






      .tab_titulo {
                text-align: center;
        			  background-color: #004E8C;
        			  color: #FFFFFF;
        			  font-size: 20px;
        			  height: 2px;
              }

            .titlista {
                text-align: center;
                font-family: Arial, Helvetica, sans-serif;
                color: #fff;
                font-size: 15px;
                background-color: #004E8C;
              }


      .tabla_lista2 {
        border: thin navy solid;
        vertical-align: top;
        width: 90%;
        /* background-color: #898686; */
        margin: 0 auto;
      }

      .tabla_lista2 tbody tr:hover {
        background-color: red;
      }

      /* tabla para lista_apoderado.php */
      .tabla_interna_lista {
        border: thin navy solid;
        vertical-align: top;
        width: 100%;
        background-color: #898686;
        margin: 0 auto;
        /* cellspacing: "5"; NO FUNCIONA */
      }

      .tabla_interna_lista tr:nth-child(even) {
        background: #D0E4F5;
      }

      .tabla_interna_lista2 {
        border: thin navy solid;
        vertical-align: top;
        width: 90%;
        background-color: #898686;
        margin: 0 auto;
        /* cellspacing: "5"; NO FUNCIONA */
      }

      .tabla_interna_lista2 tr:hover {
        background-color: DBA934;
      }

      .tab_titulo2 {
        text-align: center;
        background-color: #004E8C;
        color: #FFFFFF;
        font-size: 30px;
        height: 23px;
        /* border;  2 */
      }


      .titlista2 {
        text-align: center;
        font-family: Arial, Helvetica, sans-serif;
        color: #fff;
        font-size: small;
        background-color: #004E8C;
        border: 1;

      }





      table.tabla_interna_lista2 tr:nth-child(even) {
        background: white;
      }





      table.tabla__lista tr:nth-child(even) {
        background: #D0E4F5;
      }


      .tabla_descuento {
        border: thin navy solid;
        vertical-align: top;
        width: 36%;
        margin: 0 auto;
      }



      /* FORMATO DE LSO INPUT */
      input {
        border-radius: 6px;
        /* height: 20px; */
        font-size: 10px;
        padding: 5px;
        font-family: Arial, Helvetica, sans-serif;
        border: 1px #4B5050 solid;
        color: black;
        /* width: 20px; */
        box-sizing: border-box;

      }

      /* FORMATO DE LSO INPUT */
      select {
        border-radius: -31px;
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
        /* height: 30px; */
        font-size: 12px;
        padding: 2px 0px 2px 8px;
        font-family:
        Arial, Helvetica, sans-serif;
        border: 1px #4B5050 solid;

      }





      .titlistaAlumnos {
        text-align: center;
        font-family: Arial, Helvetica, sans-serif;
        color: #fff;
        font-size: small;
        background-color: #004E8C;
        border: 2px   solid #898686;

      }



      /* ordena los td de los input al centro */
      .lista_input{
        text-align: center;
        font-size: 12px;
        
      }

      .tabla_descuento {
        border: thin navy solid;
        vertical-align: top;
        width: 90%;
        margin: 0 auto;
      }

      .tabla_descuento :hover {
        background-color: #DBA934;
      }


      .txtcampo {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        color: black;
      }

      .txtcampo_error {
        color: #FF0000;
      }



      .celdaing {
        text-align: left;
        height: 47px;
        border: 1px;
      }

      .celdaing:span {
        width: 36%
      }


      /* cursos realizados  */
      .celdaCursoRealizado{
        text-align: left;
        height: 47px;
        border: 1px;
        background-color: #C4C3C3;
      }
      .celdaCursoRealizadoNOrealizada{
        text-align: left;
        height: 47px;
        border: 1px;
        background-color: coral;
        opacity: 0.5;

      }
      /* cursos realizados  */




      .input_dat_xxs {
        font-family: Arial, Helvetica, sans-serif;
        width: 30px;
        text-align: center;
        font-size: 10px;
      }

      /* este ocupo para los input par el no /si fallecido */
      .input_dat_xs {
        font-family: Arial, Helvetica, sans-serif;
        width: 20%;
        font-size: 12px;

      }

      .input_dat_ch {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        width: 90px;
      }


      .input_consulta_deuda {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 10px;
        width: 80px;
        height: 20px;
      }


      .input_dat_es {
        font-family: Arial, Helvetica, sans-serif;
        width: 150px;
      }

      .input_dat_lu {
        font-family: Arial, Helvetica, sans-serif;
        width: 110px;
      }

      .input_dat_c {
        font-family: Arial, Helvetica, sans-serif;
        width: 150px;
      }

      .input_dat_cm {
        font-family: Arial, Helvetica, sans-serif;
        width: 200px;
        color: black;

      }

      .input_dat_cmm {
        font-family: Arial, Helvetica, sans-serif;
        width: 65%;
        color: black;
        font-size: 12px;
        /* height: 10%; */
      }


      .input_dat_boletas_electronicas {
        font-family: Arial, Helvetica, sans-serif;
        width: 65%;
        color: black;
        font-size: 15px;
        /* height: 10%; */
      }


      /* este ocupo para los input en general */
      .input_dat_m {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        width: 90%;
        color: black;

        /* border: 1px #00F solid; */


      }
      .input_dat_select {
        font-family: Arial, Helvetica, sans-serif;
        width: 90%;
        font-size: 12px;
        color: black;

      }


      .f{
        font-family: Arial, Helvetica, sans-serif;
        width: 120px;
      }


      .input_dat_g {
        font-family: Arial, Helvetica, sans-serif;
        width: 408px;
      }
      .input_dat_pat {
        font-family: Arial, Helvetica, sans-serif;
        width: 380px;
      }


      .input_dat_gg {
        font-family: Arial, Helvetica, sans-serif;
        width: 425px;
        text-align: center;
      }

      .celdaing2 {
        text-align: center;
        border:10px;

      }
      /* para tabla detalle orden de compra  WEBPAY DETALEL PAGO*/
      .celdaing3 {
        text-align: center;
        border: 2px solid #898686;
      }


      .border_input{
         border: 2px   solid #898686;
         text-align: center;
         padding: 2px;
         /* color:red; */
      }

      .botonfoto {
        margin-left: 0px;
        margin-bottom: 0px;
      }

      .txtch {
        font-family: Arial, Helvetica, sans-serif;
        font-size: small;
        color: black;
      }

      .txttitulo {
        font-family: Arial, Helvetica, sans-serif;
        font-size: medium;
        color: black;
      }

      .celdatit {
        border-bottom: thin black solid;
        padding: 10px 150px 10px 160px;
      }

      .celdatit_der {
        border-bottom: thin black solid;
        text-align: center;
      }

      .celdatop {
        vertical-align: top;
        margin-top: auto;
      }

      .textarea {
        width: 300px;
        height: 60px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: small;
      }
      /* autocompletar*/
      .suggestionsBox {
        position: absolute;
        left: 20px;
        margin: 5px 0px 0px 0px;
        width: 400px;
        background-color: #FFFFFF;
        list-style-type: none;
        border: 1px solid #000;
        color: black;
      }

      .suggestionList {
        margin: 0px;
        padding: 0px;
      }

      .suggestionList li {
        margin: 0px 0px 3px 0px;
        padding: 3px;
        cursor: pointer;
      }

      .suggestionList li:hover {
        background-color: #DBA934;
      }




      .ordenarBotenes {
        text-align: left;
        font-family: Arial, Helvetica, sans-serif;
        color: black;
        font-size: x-small;
        background: #D0E4F5;
      }

      .lista01 {
        text-align: center;
        font-family: Arial, Helvetica, sans-serif;
        color: black;
        font-size: 15px;
        background: #D0E4F5;
        border: solid #000000 2px;
      }

      .lista03 {
        text-align: left;
        font-family: Arial, Helvetica, sans-serif;
        color: #FFF;
        font-size: 10px;
        background: #999;
        font-weight: bold;
      }

      .lista02 {
        text-align: center;
        font-family: Arial, Helvetica, sans-serif;
         color: black;   /*color de la letra */
        font-size: 15px;
        background: #FFFFFF;    /*color de todo el input */
          border: solid #000000 2px;
      }

      table.lista01 td:nth-child(even) {
        background: red;
      }

      .alumno {
        text-align: left;
        font-family: Arial, Helvetica, sans-serif;
        color: black;
        font-size: x-small;
        background: #FFFFFF;
      }

      table.alumno tr:nth-child(even) {
        background: #D0E4F5;

      }



      /* color de los font-aweosone */
      .fontawesone{
        color:#004E8C;
        /* color:#002BBA; */
        font-size:20px;

      }






      .link_imagen {
        text-decoration: none;
        border: 0px;
      }

      /*notas - periodos*/
      .infper {
        font-family: Arial, Helvetica, sans-serif;
        text-align: center;
        font-size: small;
        border: thin gray solid;
      }

      #ulmenu {
        display: block;
        /*margin:20px;*/
      }

      #ulmenu li {
        float: left;
        width: 160px;
        list-style: none;
        background: #33F;
        color: #FFF;
        height: 22px;
        text-align: center;
        border-left: #FFF solid 1px;
        padding-top: 5px;
      }

      #ulmenu li a {
        color: #FFF;
        text-decoration: none;
        padding: 2px;
      }

      #ulmenu li:hover {
        color: #00F;
        background: #09F;
      }

      #ulmenu li a:visited {
        color: #FFF;
      }

      .ancho_10 {
        width: 10px;
      }

      .ancho_15 {
        width: 15px;
      }

      .ancho_20 {
        width: 20px;
      }

      .ancho_80 {
        width: 80px;
      }

      .ancho_210 {
        width: 210px;
      }

      .centro {
        text-align: center
      }




      .logoImprimir{
        background-color:#CCCCCC;
        text-align: right;
        padding:12px 41px;
      }

      /* //MODAL */
      .modal-contenido {
        background-color: #756D6B;
        width: 400px;
        height: 200px;
        padding: 20px 20px;
        margin: 18% auto;
        position: relative;
      }

      .modal {
        background-color: rgba(0, 0, 0, .8);
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        opacity: 0;
        pointer-events: none;
        transition: all 1s;
      }

      #miModal:target {
        opacity: 1;
        pointer-events: auto;
      }



      .cabezera {
        font-size: 120px;
        font-family: Arial, Helvetica, sans-serif;
        margin: 0 auto;
        /* padding-top:0; */
        /* background-color: red; */
        text-align: justify;

      }


      @media screen and (max-width: 1920px) {

        .cabezera{
          /* width: 100%; */
          margin: 0 auto;
          text-align: justify;


        }

        .radioModulos{
          color:red;    /* color de los candados*/
           text-align: center;
          background-color: #E1D8D7;
          padding: 10px 0px 10px 0px;
          border: 1px solid black;
        }

        .radioMenu{
          margin: 0 auto;
          /* text-align: justify; */
          color:red;    /* color de los candados*/
          text-align: center;
          background-color: #E1D8D7;
          margin: 0px 0px 0px 0px;
        }

        .botonMenu1{
          background-color: red;
          font-size: 120px;
          width: 100%;
          padding: 20px, 10px, 10px,10px;


        }

      /******************************************************************* CABEZERA */

      .tablaCabezera {
        vertical-align: top;
        width: 86%;
        margin: -14px auto;
      }
      .infoUsuario{
          height:71%;
          width: 40px;
          padding: 10px 10px;
      }

      
    .nombre_colegio_cabezera{
        color:rgb(10, 10, 10);
        font-size: 20px;
        font-family: Arial, sans-serif;
        font-weight: bold;
    }


      .logoSeduc{
        text-align: right;
      }
      h4{
        color: black;
        font-family: Arial, sans-serif;
        font-size: 20px;
        font-weight: bold;   
        }
        p{
          color: black;
        font-family: Arial, sans-serif;
        font-size: 15px;
        font-weight: bold;   

        }
        .bloqueNegro {
            /* border: 1px solid black; */
            height: 78px;
            width: 150%;  /* Toma el 100% del ancho de su contenedor */
           /* position: absolute;  Posiciona el bloque respecto al contenedor */
            bottom: 0;  /* Alinea el bloque en la parte inferior del contenedor */
            /* padding-top: 10px;   Agrega un espacio de 10px en la parte superior */        
            position: relative;
            overflow: hidden;
            /* height: 80px; */
            line-height: 25px;
            background: #E1D8D7;
            color: black;
            text-align: center;
            border-radius: 15px;
            box-shadow: 0 0 7px #222;
            text-shadow: 0 0 3px #fff;
            font-size: 15px;
            
            
        }
        .contenedorLogo {
            display: inline-block;  /* Hace que el contenedor se ajuste al contenido */
            position: relative;  /* Establece un contexto de posicionamiento */
        }
        .contenedorLogo img {
            height:75px;        }

        .bloqueCentrado {
            text-align: center;
        }
        
        .bloque {
            overflow: hidden;
            white-space: nowrap;
            /* Otros estilos para el bloque */
        }
        
        .textoAnimado {
            display: inline-block;
            color: red;
            animation: desplazar 10s linear infinite;
        }
        
        @keyframes desplazar {
            from {
                transform: translateX(100%);
            }
            to {
                transform: translateX(-100%);
            }
        }
        
    
      /*****************************FIN********************************** CABEZERA */


      }




      /******************MENU ALUMNO *************
      ***************CSS PARA EL MODAL ********** */
      .basurero {
        background-color: blue;
        color: red;
      }
      .swal2-title {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 15px !important;
        /* color: green !important; */
      }

  
      .btn_editarUsuario {
        background-color: #343a40;  /* color oscuro */
        border: none;
        color: white;
        padding: 10px 20px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
        border-radius: 4px;
        transition: background-color 0.3s ease;
    }
    
    .btn_editarUsuario:hover {
        background-color: #495057;  /* un poco más claro al pasar el cursor */
    }
    


      /* Para resolución de 1920x1080 */
      @media screen and (min-width: 1920px) and (min-height: 1080px) {

                			.btn_ok_validacion{
                				background: #004E8C;
                				border-radius: 10px;
                				font-family: Arial, Helvetica, sans-serif;
                				color: #ffffff;
                				font-size: 20px;
                				padding:17px 210px;
                				text-decoration: none;
                				border: 1px;
                			}
                			.btn_ok{
                				background: #004E8C;
                				border-radius: 10px;
                				font-family: Arial, Helvetica, sans-serif;
                				color: #ffffff;
                				font-size: 20px;
                				padding:17px 134px;
                				text-decoration: none;
                				border: 1px;
                			}

      }

      /* Para resolución de 1280x720 */
      @media screen and (max-width: 1280px) and (max-height: 720px) {

                			.btn_ok_validacion{
                				background: #004E8C;
                				border-radius: 10px;
                				font-family: Arial, Helvetica, sans-serif;
                				color: #ffffff;
                				font-size: 20px;
                				padding:17px 210px;
                				text-decoration: none;
                				border: 1px;
                			}
                			.btn_ok{
                				background: #004E8C;
                				border-radius: 10px;
                				font-family: Arial, Helvetica, sans-serif;
                				color: #ffffff;
                				font-size: 20px;
                				padding:17px 134px;
                				text-decoration: none;
                				border: 1px;
                			}

      }
      .btn_ok_validacion{
        background: #004E8C;
        border-radius: 10px;
        font-family: Arial, Helvetica, sans-serif;
        color: #ffffff;
        font-size: 20px;
        padding:17px 210px;
        text-decoration: none;
        border: 1px;
      }

    /*BOTON OK DE TODOS LOS MODALES*/
    /* PARA TODAS LAS CONFIRMACIONES DE INFORMACION */

      .btn_ok{
        background: rgb(91, 142, 74);
        border-radius: 10px;
        font-family: Arial, Helvetica, sans-serif;
        color: #ffffff;
        font-size: 20px;
        padding:17px 44px;
        text-decoration: none;
        cursor: pointer; /* Añade un cursor en forma de mano */

        border: 1px;
      }


      .btn_ok:hover {
        /* background: #3cb0fd;
        background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
        background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
        background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
        background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
        background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
        text-decoration: none; */
      }

    /*BOTON OK DE TODOS LOS MODALES*/











      .btn_ok_{
        background:red;
        border-radius: 10px;
        font-family: Arial, Helvetica, sans-serif;
        color: #ffffff;
        font-size: 20px;
        padding: 17px 44px;
        text-decoration: none;
        border: 1px;
      }

      

      

      .swal2-Cancel {/*boton cancelar*/
        /* background-color: orange !important; */
        font-size: 20px !important;
      }


      /* MODAL PERMISOS */
      .modal {
        overflow: auto;
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 9999;
      }

      .tab-btn {
        background-color: white;
        border: none;
        padding: 10px 10px;
        cursor: pointer;
      }

      .tab-content {
        display: none;
      }

      .tab-content.active {
        display: block;
      }

      .swal2-popup {
        background-image: url('../../img/logo_seduc2.jpg');
        border: 4px solid black;
        padding: 2px;
        background-repeat: no-repeat;
        background-size: auto;
        width: 900;
      }

      .btn-ok{
      		background: #004E8C;
      		border-radius: 10px;
      		font-family: Arial, Helvetica, sans-serif;
      		color: #ffffff;
      		font-size: 14px;
      		padding: 5px 16px;
      		text-decoration: none;
      		border: 1px;
    	}

        .container {
          text-align: left;
        }

        .container p {
          text-align: left;
          padding-left: 1px;
        }

/* BANNER PARA LA UF */
        .banner {
            background-color: #f1f1f1;
            padding: 10px;
            font-size: 40px;
          }

            #uf-value {
              font-weight: bold;
              color: #ff0000;
              font-size:40px;
            }



     /* ***********************MENU FAMILIA*************************************** */
     /* ************************************************************************** */
            @keyframes shake {
                0% { transform: translateX(0); }
                25% { transform: translateX(5px); }
                50% { transform: translateX(-5px); }
                75% { transform: translateX(5px); }
                100% { transform: translateX(0); }
              }              
              .swal2-textarea.error {
                animation: shake 0.3s;
                border: 2px solid red;
              }
              
              .info_tutores {
                font-size: 15px;
                font-weight: bold;
                padding: 10px;
                border-radius: 5px;
                border: 2px solid red;
                /* Borde rojo de 2px */
                
                /* Añade un efecto de elevación 3D */
                box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.4), 
                            -5px -5px 15px rgba(255, 255, 255, 0.5); /* Sombra interna para mayor profundidad */
                transition: box-shadow 0.3s ease-in-out;
            }
            
            /* Efecto de interacción al pasar el mouse */
            .info_tutores:hover {
                box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.6), 
                            -8px -8px 20px rgba(255, 255, 255, 0.6);
            }
                      
              .cancel-button_tutor {
                background-color: #e53935; /* Rojo */
                width:188px;
                padding: 10px 20px;
                margin: 5px;
                border: none;
                color: #fff;
                font-size: 16px;
                cursor: pointer;
                border-radius: 5px;
                height: 40px;
                font-weight: bold;
              
              }
              
              .ok-button_tutor {
                background-color: #004E8C; /* Azul */
                width:188px;
                padding: 10px 20px;
                margin: 5px;
                border: none;
                color: #fff;
                font-size: 16px;
                cursor: pointer;
                border-radius: 5px;
                height: 40px;
                font-weight: bold;
              
              }
              /* Estilo para el tooltip */
              .custom-tooltip {
                position: relative;
                cursor: pointer;
              }
              
              /* Estilo para el contenido del tooltip */
              .custom-tooltip::before {
                content: attr(data-tooltip);
                position: absolute;
                top: -28px;
                left: 50%;
                transform: translateX(-50%);
                display: none;
                background-color: #333;
                color: #fff;
                padding: 5px 10px;
                border-radius: 466px;
              }
              
              /* Mostrar el tooltip cuando se pasa el mouse sobre el botón */
              .custom-tooltip:hover::before {
                display: block;
              }
      /* ***********************MENU FAMILIA*************************************** */
     /* *********************************************************FIN************* */




      /* ***********************MENU ALUMNO*************************************** */
     /* ******************************************************************* */
     textarea.red-border {
        border: 2px solid red !important;
    }
    
    @keyframes shake {
      0% { transform: translate(1px, 1px) rotate(0deg); }
      10% { transform: translate(-1px, -2px) rotate(-1deg); }
      20% { transform: translate(-2px, 0px) rotate(1deg); }
      30% { transform: translate(1px, 2px) rotate(0deg); }
      40% { transform: translate(1px, -1px) rotate(1deg); }
      50% { transform: translate(-1px, 2px) rotate(-1deg); }
      60% { transform: translate(-1px, 1px) rotate(0deg); }
      70% { transform: translate(1px, 1px) rotate(-1deg); }
      80% { transform: translate(-1px, -1px) rotate(1deg); }
      90% { transform: translate(1px, 2px) rotate(0deg); }
      100% { transform: translate(1px, -2px) rotate(-1deg); }
    }
    
    .shake {
      animation: shake 0.5s;
    }
    
    .activar_seccion{
        color:white;
        text-align:center;
        background-color:#5B8E4A;
        height: "800px";
        padding: "40px";
    }

    .cerrar_session{
        color:white;
        text-align:center;
        background-color:red;
        height: "800px";
        padding: "40px";
    }
        
    .cerrar_session:hover {
        box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.2);
        transform: translateY(-3px);
    }

    .activar_seccion:hover {
        box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.2) !important;
        transform: translateY(-3px) !important;
    }

    /* ***********************MENU ALUMNO**************************** */
     /* ****************************ACTIVAR ALUMNO****************** */

    .bt_activar_alumno {
        width: 200px            !important;
        height: 50px            !important;
        display: flex           !important;
        align-items: center     !important;
        justify-content: center !important;
        font-size: 15px         !important;
        border-top-color: rgb(55, 0, 0)   !important;    
        box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1) !important;
        transition: all 0.3s ease 0s;
    }
    
    
    .bt_activar_alumno:hover {
        box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.2) !important;
        transform: translateY(-3px) !important;
    }
    

    /* cuerpo de todos los modales que van a la base de datos */
    .cuerpo_modal_guardar{
        /* width: 100%; */
        font-family: 'Helvetica', sans-serif ; /* Fuente sencilla y legible */
        background-color: #f0f0f0; /* Fondo suave */
        color: #333; /* Texto oscuro y neutro */
        border-radius: 15px; /* Bordes redondeados */
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Sombra sutil */
        padding: 20px; /* Espacio en blanco alrededor del contenido */
        transition: all .3s ease-out; /* Transición suave */

       }

       .cuerpo_modal_eliminar {
        width: auto;
        font-family: 'Helvetica', sans-serif; /* Fuente sencilla y legible */
        background-color: #ffcccc; /* Fondo rojo claro para llamar la atención */
        color: #333; /* Texto oscuro para contraste */
        border: 2px solid red; /* Borde rojo para resaltar la importancia */
        border-radius: 15px; /* Bordes redondeados */
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Sombra más pronunciada para añadir profundidad */
        padding: 20px; /* Espacio en blanco alrededor del contenido */
        transition: all 0.3s ease-out; /* Transición suave para cambios de estilo */
    }
    










       .cuerpo_modal_recuperar_pass{
        margin-left:85px;
        /* height: 450px; */
        font-family: 'Helvetica', sans-serif ; /* Fuente sencilla y legible */
        background-color: #f0f0f0; /* Fondo suave */
        color: #333; /* Texto oscuro y neutro */
        border-radius: 15px; /* Bordes redondeados */
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Sombra sutil */
        padding: 205px; /* Espacio en blanco alrededor del contenido */
        transition: all 0.3s ease-out; /* Transición suave */

       }
   




       .cuerpo_modal_cumpleanos{
        height: 150px;
        font-family: 'Helvetica', sans-serif ; /* Fuente sencilla y legible */
        background-color: #f0f0f0; /* Fondo suave */
        color: #333; /* Texto oscuro y neutro */
        border-radius: 15px; /* Bordes redondeados */
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Sombra sutil */
        padding: 25px; /* Espacio en blanco alrededor del contenido */
        transition: all 0.3s ease-out; /* Transición suave */

       }
   
        /* x de todos los modales  */
       .swal2-close {
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 20px;
        color: #888;
        cursor: pointer;
        font-size: 50px;
    }

    .btn_modal_excel{

      width: 200px            !important;
      height: 50px            !important;
      display: flex           !important;
      align-items: center     !important;
      justify-content: center !important;
      font-size: 15px         !important;
      border-top-color: #004E8C   !important;    
      background-color: rgb(91, 142, 74)  !important;    

      box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1) !important;
      transition: all 0.3s ease 0s;
    }
    .btn_modal_excel:hover {
      box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.2) !important;
      transform: translateY(-3px) !important;
  }
  

  /* informacion que va dentro del modal */
  .swal2-html-container{
    /* color: #f00 !important; */
    font-weight: bold !important;
    font-size: 15px !important;
}



/* PARA VIBRAR EN UN ERROR */
@keyframes shake {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-10px);
    }

    50% {
        transform: translateX(10px);
    }

    75% {
        transform: translateX(-10px);
    }

    100% {
        transform: translateX(0);
    }
}
/* MENU ALUMNOS */

.excel-textarea {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-bottom: 20px;
    width: 200%;
    margin: auto;
    border: 1px solid #ccc;
    padding: 10px;
    overflow: auto;
}

#idObservacion {
    width: 50%;
    /* puedes ajustar el ancho como necesites*/
    margin: auto;
    font-size:20px;
    /* centra el textarea*/
}

.texarea {
    background-color: #7EABD7;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    margin-bottom: 20px;
    font-size:15px;
}


/******************************************+
/* /PAGO MANUAL  */
/******************************************+ */

.txtcampo td {

    padding: 10px 100px 10px 100px;
    border: 1px solid black;
    color: #333;
    font-size: 16px;
}

.selectable-cell {
    cursor: pointer;
}

.sobresalido {
    background-color: #e6e6e6;
    /* Color de fondo claro */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 1.1);
    /* Sombreado para el efecto 3D */
}

.txtcampo td {
    padding: 10px 100px 10px 100px;
    border: 1px solid black;
    color: #333;
    font-size: 16px;
}

.efecto_marcar input[type="radio"]:checked+label {
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.1);
    background-color: red;
    border-radius: 4px;
}

.efecto_marcar {
    cursor: pointer;
}


    .elevated {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 1.1);
        /* Adjust as desired */
        background-color: #39FF14;
        /* A light gray as an example */
        transition: box-shadow 0.3s ease, background-color 0.3s ease;
        /* Smooth transition */


    }


    .btn_permisos_edit {
        background: #5B8E4A;
        background-image: linear-gradient(to bottom, #5B8E4A, #5B8E4A);
        border-radius: 10px;
        font-family: Arial;
        color: #ffffff;
        font-size: 14px;
        padding: 5px 16px;
        text-decoration: none;
        border: 1px solid transparent;
        text-align: center;
        margin: 10px;
        height: 30px;
        cursor: pointer;
        transition: background 0.3s ease, border-color 0.3s ease;
        }

    .btn_permisos_delete {
        background: red;
        background-image: linear-gradient(to bottom, red, red);
        border-radius: 10px;
        font-family: Arial;
        color: #ffffff;
        font-size: 14px;
        padding: 5px 16px;
        text-decoration: none;
        border: 1px solid transparent;
        text-align: center;
        margin: 10px;
        height: 30px;
        cursor: pointer;
        transition: background 0.3s ease, border-color 0.3s ease;

    }

    .textarea_agrepar_permiso {
        height: 90px;
        width: 100%;
        margin-bottom: 10px;
        resize: none;
    }


    /* Efecto de sobrepuesto para el primer textarea */
    #textarea1 {
        z-index: 2;
        /* Asegúrate que este valor sea mayor que el de textarea2 */
        position: relative;
        box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
        /* Sombra para dar efecto de elevación */
    }

 
    .contenedor_tabla {
        max-height: 550px; /* Ajusta esta altura según tus necesidades */
        overflow-y: auto;
        /* border: 1px solid #898686; Borde para mejorar la apariencia */
    }

    .countdown-circle {
      width: 50px;
      height: 50px;
      line-height: 50px;
      border-radius: 50%;
      background: white;
      border: 3px solid #4CAF50;
      text-align: center;
      font-size: 20px;
      color: #333;
      margin: 10px auto; /* Centrar horizontalmente */
      display: flex; /* Usar flexbox para centrar */
      justify-content: center; /* Centrar horizontalmente en flex container */
      align-items: center; /* Centrar verticalmente en flex container */
  }
  
  /* Contenedor para el texto y el círculo */
  .countdown-container {
      text-align: center;
  }
  @keyframes blinking {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

.blinking-red {
    color: red;
    animation: blinking 1s infinite;
}


.icono_campana {
    background: #5B8E4A;
    background-image: linear-gradient(to bottom, #5B8E4A, #5B8E4A);
    border-radius: 10px;
    font-family: Arial;
    color: #ffffff;
    font-size: 14px;
    padding: 5px 16px;
    text-decoration: none;
    text-align: center;
    margin: 10px;
    height: 50px; /* Aumenta la altura para permitir más espacio para el centrado */
    cursor: pointer;
    border: 0px solid;
    display: flex; /* Usa flexbox para el layout del botón */
    align-items: center; /* Centra los elementos hijos verticalmente */
    justify-content: center; /* Centra los elementos hijos horizontalmente */
}
.icono_campana .position-absolute {
    position: absolute;
    top: -10px; /* Ajusta según sea necesario */
    right: -10px; /* Ajusta según sea necesario */
    transform: translate(50%, -50%); /* Ajusta la posición exacta si es necesario */
}
@keyframes shakeBell {
    0%, 62.5%, 100% {
        transform: translateX(0); /* 0% a 62.5% y 100% del tiempo total sin movimiento (10 segundos de pausa + 3 segundos de pausa adicional) */
    }
    68.75% {
        transform: translateX(-5px); /* Mueve a la izquierda a los 11 segundos */
    }
    81.25% {
        transform: translateX(5px); /* Mueve a la derecha a los 13 segundos */
    }
}

.bi-bell {
    /* Aplica la animación al icono de la campana */
    animation: shakeBell 16s ease-in-out infinite;
}



/* // fecha para modificar los datos perssonales */