:root {
    --texto: #22323d;
	--azul: #4169e1;
	--naranjo: #f24b04;
    --blanco: #FFF;
    --negro: #000;
}

.mb-audio-size-small audio {
    width: 100px;
}

.mb-audio-size-medium audio {
    width: 400px;
}

.mb-audio-size-large audio {
    width: 100%;
}

.mb-input-field{
    color: var(--azul) !important;
    font-weight: 700;
    font-size: 18px;
    background-color: var(--blanco) !important;
    padding: 4px 10px !important;
}

.mb-word-select-sensei {
    cursor: pointer;
    line-height: 1.8;
}
.mb-word-select-sensei .mb-word-select-word {
    display: inline-block;
    margin: 0 2px;
    padding: 2px 4px;
    border: 1px solid transparent;
    border-radius: 3px;
}

.mb-word-select-sensei .mb-word-select-word.mb-word-selected[data-correct="1"] {
    border-color: #28a745; /* verde */
    background-color: rgba(40, 167, 69, 0.1);
}

.mb-word-select-sensei .mb-word-select-word.mb-word-selected[data-correct="0"] {
    border-color: #dc3545; /* rojo */
    background-color: rgba(220, 53, 69, 0.1);
}

.mb-options-select-sensei {
    margin: 0.5em 0;
}

.mb-option-select-option {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
    cursor: pointer;
}

.mb-option-circle {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #ccc;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    font-weight: 600;
    font-size: 13px;
    background-color: #fff;
}

.mb-option-text {
    flex: 1;
}

/* Estados correctos/incorrectos cuando están seleccionadas */
.mb-option-select-option.mb-option-selected[data-correct="1"] .mb-option-circle {
    border-color: #28a745;
    background-color: rgba(40, 167, 69, 0.1);
    color: #28a745;
}

.mb-option-select-option.mb-option-selected[data-correct="0"] .mb-option-circle {
    border-color: #dc3545;
    background-color: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

/* Editor preview */
.mb-checkbox-preview-option {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}

.mb-checkbox-preview-box {
    width: 18px;
    height: 18px;
    border-radius: 3px;
    border: 2px solid #ccc;
    margin-right: 6px;
    box-sizing: border-box;
}

.mb-checkbox-preview-correct {
    border-color: #28a745;
}

.mb-checkbox-preview-text {
    font-size: 13px;
}

/* Frontend */
.mb-checkbox-select-sensei {
    margin: 0.5em 0;
}

.mb-checkbox-select-option {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
    cursor: pointer;
}

.mb-checkbox-box {
    position: relative;
    width: 20px;
    height: 20px;
    border-radius: 3px;
    border: 2px solid #ccc;
    margin-right: 8px;
    box-sizing: border-box;
    background-color: #fff;
}
.mb-checkbox-check {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -52%);
    font-size: 14px;
    color: #28a745;
    opacity: 0;
    pointer-events: none;
}
/* Mostrar el check solo cuando está seleccionada la opción */
.mb-checkbox-select-option.mb-checkbox-selected .mb-checkbox-check {
    opacity: 1;
}
/* En incorrectas puedes usar rojo si prefieres */
.mb-checkbox-select-option.mb-checkbox-selected[data-correct="0"] .mb-checkbox-check {
    color: #dc3545;
}

.mb-checkbox-text {
    flex: 1;
}

/* Estados correctos/incorrectos cuando están seleccionadas */
.mb-checkbox-select-option.mb-checkbox-selected[data-correct="1"] .mb-checkbox-box {
    border-color: #28a745;
    background-color: rgba(40, 167, 69, 0.1);
}

.mb-checkbox-select-option.mb-checkbox-selected[data-correct="0"] .mb-checkbox-box {
    border-color: #dc3545;
    background-color: rgba(220, 53, 69, 0.1);
}

/* Editor preview True/False */
.mb-true-false-preview-statement {
    margin-top: 6px;
    margin-bottom: 6px;
    padding: 6px 8px;
    background-color: #f6f7f7;
    border-radius: 3px;
}

.mb-true-false-preview-options {
    display: flex;
    gap: 12px;
}

.mb-true-false-preview-option {
    display: flex;
    align-items: center;
    font-size: 13px;
}

.mb-true-false-preview-box {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    border: 2px solid #ccc;
    margin-right: 6px;
    box-sizing: border-box;
}

.mb-true-false-preview-correct .mb-true-false-preview-box {
    border-color: #28a745;
}

/* Frontend True/False */
.mb-true-false-sensei {
    margin: 0.75em 0;
}

.mb-true-false-statement {
    margin-bottom: 8px;
}

.mb-true-false-options {
    display: flex;
    gap: 16px;
}

.mb-true-false-option {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.mb-true-false-box {
    position: relative;
    width: 20px;
    height: 20px;
    border-radius: 3px;
    border: 2px solid #ccc;
    margin-right: 8px;
    box-sizing: border-box;
    background-color: #fff;
}
.mb-true-false-check {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -52%);
    font-size: 14px;
    color: #28a745;
    opacity: 0;
    pointer-events: none;
}

/* Mostrar check cuando está seleccionada la opción */
.mb-true-false-option.mb-true-false-selected .mb-true-false-check {
    opacity: 1;
}

/* En la incorrecta, rojo */
.mb-true-false-option.mb-true-false-selected[data-correct="0"] .mb-true-false-check {
    color: #dc3545;
}

.mb-true-false-label {
    font-size: 14px;
}

/* Estados correctos/incorrectos según selección */
.mb-true-false-option.mb-true-false-selected[data-correct="1"] .mb-true-false-box {
    border-color: #28a745;
    background-color: rgba(40, 167, 69, 0.1);
}

.mb-true-false-option.mb-true-false-selected[data-correct="0"] .mb-true-false-box {
    border-color: #dc3545;
    background-color: rgba(220, 53, 69, 0.1);
}

/* Editor preview */
.mb-inline-options-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.mb-inline-option-preview-pill {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid #ccc;
    font-size: 13px;
    background-color: #f6f7f7;
}

.mb-inline-option-preview-correct {
    border-color: #28a745;
}

/* Frontend inline options */
.mb-inline-options-sensei {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0;
}

.mb-inline-option-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid #ccc;
    cursor: pointer;
    font-size: 14px;
    background-color: #fff;
}

/* Estados correctos/incorrectos según selección */
.mb-inline-option-pill.mb-inline-option-selected[data-correct="1"] {
    border-color: #28a745;
    background-color: rgba(40, 167, 69, 0.1);
    color: #155724;
}

.mb-inline-option-pill.mb-inline-option-selected[data-correct="0"] {
    border-color: #dc3545;
    background-color: rgba(220, 53, 69, 0.1);
    color: #721c24;
}

.mb-dropdown-select-sensei {
    display: inline-block;
    margin: 0.5em 0;
}

.mb-dropdown-select {
    min-width: 180px;
    padding: 4px 8px;
}

/* Estado correcto/incorrecto según selección */
.mb-dropdown-select-sensei.mb-dropdown-correct .mb-dropdown-select {
    border: 2px solid #28a745;
    background-color: rgba(40, 167, 69, 0.08);
}

.mb-dropdown-select-sensei.mb-dropdown-incorrect .mb-dropdown-select {
    border: 2px solid #dc3545;
    background-color: rgba(220, 53, 69, 0.08);
}

.mb-simple-checkbox-sensei {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.mb-simple-checkbox-label {
    font-size: 14px;
}

/* Editor preview */
.mb-matching-editor-columns {
    display: flex;
    gap: 16px;
}

.mb-matching-editor-column {
    flex: 1;
}

.mb-matching-preview-wrapper {
    margin-top: 8px;
}

.mb-matching-preview {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.mb-matching-preview-col {
    flex: 1;
}

.mb-matching-preview-row {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
    font-size: 13px;
}

.mb-matching-preview-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #ccc;
    margin: 0 4px;
}

/* Frontend */
.mb-matching-lines-sensei {
    margin: 1em 0;
}

.mb-matching-lines-inner {
    position: relative;
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.mb-matching-col {
    flex: 1;
}

.mb-matching-row {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
    cursor: pointer;
    position: relative;
}

.mb-matching-col-left .mb-matching-dot {
    margin-left: 8px;
}

.mb-matching-col-right .mb-matching-dot {
    margin-right: 8px;
}

.mb-matching-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #666;
    background-color: #fff;
}

.mb-matching-text {
    font-size: 14px;
}

.mb-matching-row.mb-matching-selected .mb-matching-dot {
    border-color: #007cba;
}

/* SVG overlay */
.mb-matching-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.mb-matching-line {
    stroke-width: 2px;
    fill: none;
}

.mb-matching-line-correct {
    stroke: #28a745;
}

.mb-matching-line-incorrect {
    stroke: #dc3545;
}

/* Reset button */
.mb-matching-actions {
    margin-top: 8px;
}

.mb-matching-reset-button {
    font-size: 13px;
    padding: 4px 10px;
    border-radius: 3px;
    border: 1px solid #ccc;
    background-color: #f6f7f7;
    cursor: pointer;
}

.mb-matching-reset-button:hover {
    background-color: #e2e4e7;
}


/* Adicionales */
.tabla-01 *{
    box-sizing: border-box;
}
.tabla-01 table td{
    white-space: nowrap;
    padding: .25em;
}
.tabla-01 table strong,
.tabla-01 table code{
    display: inline-block;
    vertical-align: middle;
}
.tabla-01 table code{
    font-size: 18px;
    font-weight: 700;
}
.wp-block-columns.tabla-01{
    border: 1px solid #000;
    border-collapse: collapse;
    margin-top: -1px !important;
}
.wp-block-columns.tabla-01 .wp-block-column{
    position: relative;
}
.wp-block-columns.tabla-01 .wp-block-column:not(:last-child){
    border-right: 1px solid #000;
}
.wp-block-columns.tabla-01 p{
    min-height: 25px;
}
.wp-block-columns.tabla-01 .wp-block-column sup{
    position: absolute;
    font-size: 16px;
    font-weight: 700;
    top: 14px;
    left: 6px;
}
.wp-block-columns.tabla-01 .wp-block-column strong{
    padding-left: 30px;
}
.wp-block-columns.tabla-01 .wp-block-column .mb-input-simple-sensei{
    margin-block-start: 4px;
    margin-bottom: 4px;
}
.wp-block-columns.tabla-01 .wp-block-column .mb-input-field{
    max-width: 80% !important;
    margin-left: 10%;
    text-transform: uppercase !important;
    text-align: center;
}



/* Editor */
.mb-table-sensei-editor-grid {
    border: 1px dashed #ccd0d4;
    padding: 8px;
}

/* Frontend */
.mb-table-sensei-grid {
    margin-block-start: -1px !important;
}

.mb-table-sensei-grid > * {
    /* Cada hijo (bloque dentro de la tabla) actúa como una celda */
    background-color: #ffffff;
    border: 1px solid #e2e4e7;
    padding: 8px;
    box-sizing: border-box;
    margin-left: -1px;
    margin-bottom: 0 !important;
}