:root {
    /* titulo */
    --v_cian: #2b87ff;
    /* resaltar */
    --v_note_red: #e58088;
    --v_note_blue: #66a8ff;
    --v_note_yellow: #ffd666;
    --v_note_green: #66ffcf;
}

/* titulos */
h2, h3, h4 {
    border-bottom: 2px solid var(--v_white);
}

h2 {
    color: var(--v_lightRed);
    border-color: var(--v_lightRed);
}

h3 {
    color: var(--v_cian);
    border-color: var(--v_cian);
}

h4 {
    color: var(--v_yellow);
    border-color: var(--v_yellow);
}

/* tablas */
table {
    border: none;
    border-collapse: collapse;
    width: 100%;
}

table img, h3 img{
    height: 15px;
    width: 15px;
}

table td, table th {
    padding: 5px;
}

table th, table td.title {
    background-color: var(--v_lightGrey);
    font-weight: bold;
    text-align: center;
}

table tr:last-child td:first-child{
    border-bottom-left-radius: 15px;
}

table tr:first-child td:first-child, table tr:first-child th:first-child {
    border-top-left-radius: 15px;
}
    
table tr:last-child td:last-child {
    border-bottom-right-radius: 15px;
}

table tr:first-child td:last-child, table tr:first-child th:last-child {
    border-top-right-radius: 15px;
}

table tr:nth-child(even) {
    background: var(--v_darkRed-05);
}

table tr:nth-child(even) td.left {
    background: var(--v_darkRed);
    font-weight: bold;
    text-align: center;
}

table tr:nth-child(odd) {
    background: var(--v_darkBlue-05);
}

table tr:nth-child(odd) td.left {
    background: var(--v_darkBlue);
    font-weight: bold;
    text-align: center;
}

table tr td {
    width: 25%;
}

table td.left {
    width: 20%;
}

table td.rigth {
    width: 80%;
}

table tr.w-auto td {
    width: auto;
    border: 1px var(--v_black) !important;
    text-align: center;
}

.to-rigth {
    float: right;
}

.col2 {
    column-count: 2;
}

.col3 {
    column-count: 3;
}

.col4 {
    column-count: 4;
}

.col5 {
    column-count: 5;
}

/* columnas sin tabla */
.divCols {
  display: flex;
  gap: 20px;
}

.col {
  flex: 1;
}

/* ejercicios, marcar texto como titulo, y cursor */
.mark, .success {
    color: var(--v_green);
}

.fail {
    color: var(--v_lightRed);
}

.mark {
    font-weight: bold;
}

/* resaltar palabras o silabas */
.batchim {
    background: linear-gradient(to bottom, var(--v_white) 0 57%, var(--v_note_green) 43% 100%);
    background-clip: text;
    color: transparent;
}

.mark_red {
    color: var(--v_note_red);
}

.mark_blue {
    color: var(--v_note_blue);
}

.mark_yellow {
    color: var(--v_note_yellow);
}

.mark_green {
    color: var(--v_note_green);
}