body{
    margin:0;
    padding:30px;
    min-height:100vh;

    background:
    radial-gradient(circle at top left,#3a0a54 0%,transparent 35%),
    radial-gradient(circle at bottom right,#ff9f1c20 0%,transparent 35%),
    linear-gradient(135deg,#050816,#08142e,#12051f);

    font-family:'Open Sans',sans-serif;
}

/* Tabla principal*/

table{
    width:75%;
    max-width:1000px;

    margin:auto;
    border-collapse:separate;
    border-spacing:0;

    background:rgba(8,12,30,.90);

    border:2px solid #ff4db8;
    border-radius:24px;

    overflow:hidden;

    box-shadow:
    0 0 25px rgba(255,77,184,.25),
    0 0 60px rgba(0,0,0,.6);
}


/* Cabecera*/

.cell-header-left{
    background: linear-gradient(90deg,#12051f,#1f1147);
    color:white;
    font-size:32px;
    font-weight:700;
    text-align:center;
    letter-spacing:1px;
    border-radius:0;

    text-shadow:
        0 0 10px rgba(255,77,184,.8),
        0 0 20px rgba(255,77,184,.4);
}

.cell-header-right{
    background: linear-gradient(90deg,#12051f,#1f1147);
    border-radius:0;
    width:150px;
    text-align:center;
}



.cell-white{
    color:white;
    font-size:14px;
    font-weight:600;
    padding:15px;
    background:transparent;
    text-align:left;
}

/* Efecto de ayuda para los datos*/

.input-text,
.input-select{

    box-sizing:border-box;
    width:100%;
    max-width:380px;
    height:55px;
    border:none;
    border-radius:14px;
    background:white;
    color:#222;
    font-size:16px;
    padding:12px 18px;
    transition:.3s;
}

.input-text:focus,
.input-select:focus{

    outline:none;

    box-shadow:
    0 0 0 2px #ff4db8,
    0 0 20px rgba(255,77,184,.7);
}


.tooltip .tooltiptext{

    background:#091120;
    color:white;
    border:1px solid #ff4db8;
    border-radius:15px;
    padding:15px;
    box-shadow:
    0 0 20px rgba(255,77,184,.25);
}

.tooltip .tooltiptext:after{
    border-color:
    transparent #ff4db8 transparent transparent;
}

/* Botones*/

.button-css{
    border:none;
    color:white;
    font-size:18px;
    font-weight:bold;
    padding:15px 40px;
    border-radius:14px;
    cursor:pointer;

    background:
    linear-gradient(90deg,#ff4d6d,#d633ff);
    transition:.3s;
}

.shadow-effect{
    box-shadow:
    0 0 20px rgba(214,51,255,.4);
}

.shadow-effect:hover{
    transform:translateY(-3px);
    box-shadow:
    0 0 30px rgba(255,77,184,.8),
    0 0 50px rgba(214,51,255,.4);
}

/* Pie de página */

.cell-footer{
    background:#050816;
    color:white;
    padding:30px;
    font-size:12px;
    border-top:2px solid #ff4db8;
}

/* Efectos extra */

tr{
    transition:.3s;
}

tr:hover{
    background:rgba(255,255,255,.02);
}

.div-center{
    text-align:center;
}

.image-center{
    display:block;
    margin:auto;
}

.cell-header-right img{
    width:120px;
    height:120px;
    display:block;
    margin:auto;
}

/* Ajusta el espacio del encabezado */
.cell-header-right,
.cell-header-left{
    padding:20px;
}