/* funcionamiento básico del sistema de pestañas */

    .tab-content {
        display: none;
    }

    .tab:target .tab-content,
    .tab:last-of-type .tab-content {
        display: block;
    }

    .tab:target~.tab:last-of-type .tab-content {
        display: none;
    }

    /* parámetros para configurar las pestañas */
    :root {
        --tabs-border-color: #40ACD6;
        --tabs-border-size: 3px;
        --tabs-text-color: black;
        --tabs-dark-color: white;
        --tabs-lite-color: #40ACD6;
        --tabs-width: 150px;
        --tabs-height: 60px;
    }




    .tab>a {
        text-align: center;
        position: absolute;
        width: calc(var(--tabs-width));
        height: calc(var(--tabs-height) + var(--tabs-border-size));
        top: 0;
        left: calc(var(--tabs-width) * var(--tabs-position));
        /* posición de cada pestaña */
    }

    /* más aspecto */
    .tabs {
        padding: 10px;
        color: var(--tabs-text-color);
    }

    /* Establecer display:flex en el contenedor de .tab-content */
    .tab-content {
        background-color: #FFFFFF;
        padding: 20px;
        border: var(--tabs-border-size) solid var(--tabs-border-color);
        border-radius: 0 0 10px 10px;
        position: relative;
        z-index: 100;
        /* Eliminar la altura fija y usar flexbox para que se ajuste automáticamente */
        display: flex;
        flex-direction: column;
    }

    /* Estilo específico para la última celda de la fila */
    .tab-content tbody tr td:last-child input {
        background-color: #ffcccc; /* Fondo rojo claro */
    }

    /* Estilos para que la última celda se alinee a la derecha */
    .tab-content tbody tr td:last-child {
        text-align: right;
    }


    .tab>a {
        background-color: var(--tabs-dark-color);
        padding: 10px;
        border: var(--tabs-border-size) solid var(--tabs-border-color);
        border-radius: 10px 10px 0 0;
        border-bottom: 0;
    }

    .tab:target>a,
    .tab:last-of-type>a {
        background-color: var(--tabs-lite-color);
        z-index: 200;
    }

    .tab:target~.tab:last-of-type>a {
        background-color: var(--tabs-dark-color);
        z-index: 0;
    }

    .column {
        -webkit-text-size-adjust: 100%;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        font-size: 14px;
        line-height: 1.42857143;
        font-family: HelveticaNeueLTStd-Lt;
        color: #666;
        box-sizing: border-box;
        position: relative;
        min-height: 1px;
        float: left;
        width: 100%;
        padding: 0 10px;
    }

    .label {
        display: inline-block;
        position: relative;
        margin-right: 5px;
        margin-bottom: 5px;
    }

    .botones {
        text-align: right;
    }

    .container {
        width: 100%;
    }

    .save {
        font-size: 20px;
        color: #fff;
        background-color: #5cb85c;
        border-color: #4cae4c;
    }

    /* Estilos para hacer que las th ocupen el 100% del ancho de la tabla */
    table {
        width: 100%;
    }

    thead th {
        width: auto;
    }   
    .custom-input-3d {
        background-color: #F56588;
        color: black;
        text-align: center;
        padding: 10px;
        border: 2px solid #E64A6F;
        border-radius: 8px;
        box-shadow: 0px 10px 5px rgba(0, 0, 0, 0.3);
        transition: transform 0.2s;
    }
    
    .custom-input-3d:hover {
        transform: scale(1.03);
    }

    .cuerpo{
        background-color: #004E8C; 
        color: rgb(222, 21, 21); 
        text-align: center;

    }








    .cuerpo_modal_guardar{
        /* width: 200px; */
        font-family: 'Helvetica', sans-serif ; /* Fuente sencilla y legible */
        background-color: #f0f0f0; /* Fondo suave */
        color: #030000; /* Texto oscuro y neutro */
        border-radius: 15px; /* Bordes redondeados */
        border: 4px solid black;

        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 */

       }
       .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: red   !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;
       }



       /* css del menu  */


       .cabezera {
        font-size: 12px;
        font-family: Arial, Helvetica, sans-serif;
        margin: 0 auto;
        padding-top:0; 
        width: 100%; 
        text-align: center;

        /* background-color: red; */
        text-align: justify;
        padding: 0px 0px 20px 0px;

      }

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


      }

      .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;

      }

      /* VIBRACION  */
      @keyframes shake {
        0% { transform: translateX(0); }
        25% { transform: translateX(-5px); }
        50% { transform: translateX(5px); }
        75% { transform: translateX(-5px); }
        100% { transform: translateX(0); }
    }
    
    .shake-animation {
        animation: shake 0.5s; /* Ajusta la duración según sea necesario */
    }