/*

██████╗ ██╗      █████╗  ██████╗██╗  ██╗ ██████╗██╗  ██╗ ██████╗ ██████╗ ██╗███╗   ███╗ █████╗          ██████╗ ██████╗ ███╗   ███╗
██╔══██╗██║     ██╔══██╗██╔════╝██║ ██╔╝██╔════╝██║  ██║██╔═══██╗██╔══██╗██║████╗ ████║██╔══██╗        ██╔════╝██╔═══██╗████╗ ████║
██████╔╝██║     ███████║██║     █████╔╝ ██║     ███████║██║   ██║██████╔╝██║██╔████╔██║███████║        ██║     ██║   ██║██╔████╔██║
██╔══██╗██║     ██╔══██║██║     ██╔═██╗ ██║     ██╔══██║██║   ██║██╔══██╗██║██║╚██╔╝██║██╔══██║        ██║     ██║   ██║██║╚██╔╝██║
██████╔╝███████╗██║  ██║╚██████╗██║  ██╗╚██████╗██║  ██║╚██████╔╝██║  ██║██║██║ ╚═╝ ██║██║  ██║ █████╗ ╚██████╗╚██████╔╝██║ ╚═╝ ██║
╚═════╝ ╚══════╝╚═╝  ╚═╝ ╚═════╝╚═╝  ╚═╝ ╚═════╝╚═╝  ╚═╝ ╚═════╝ ╚═╝  ╚═╝╚═╝╚═╝     ╚═╝╚═╝  ╚═╝ ╚════╝  ╚═════╝ ╚═════╝ ╚═╝     ╚═╝
*/
/* Estilos para el diagrama del Modelo de Caja */
.box-model-diagram {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 40px 0;
    font-family: monospace;
    font-size: 14px;
    color: #333;
}

.box-layer {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    box-sizing: border-box;
    border: 1px dashed rgba(0, 0, 0, 0.2);
}

.box-label {
    position: absolute;
    top: 5px;
    left: 5px;
    font-weight: bold;
    font-size: 10px;
    text-transform: uppercase;
}

/* Margin - Naranja */
.layer-margin {
    background-color: #f9cc9d;
    /* Chrome DevTools Margin color */
    width: 420px;
    height: 320px;
    padding: 30px;
    /* Representa el margen visualmente */
}

/* Border - Amarillo */
.layer-border {
    background-color: #f4dc95;
    /* Chrome DevTools Border color */
    width: 100%;
    height: 100%;
    padding: 30px;
    /* Representa el borde visualmente */
}

/* Padding - Verde */
.layer-padding {
    background-color: #c3e6cb;
    /* Chrome DevTools Padding color */
    width: 100%;
    height: 100%;
    padding: 30px;
    /* Representa el padding visualmente */
}

/* Content - Azul */
.layer-content {
    background-color: #9ec5fe;
    /* Chrome DevTools Content color */
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Estilos extraídos de inline styles */
.highlight-content {
    background-color: #9ec5fe;
    padding: 2px 5px;
}

.highlight-padding {
    background-color: #c3e6cb;
    padding: 2px 5px;
}

.highlight-border {
    background-color: #f4dc95;
    padding: 2px 5px;
}

.highlight-margin {
    background-color: #f9cc9d;
    padding: 2px 5px;
}

.tabla-comparativa {
    border-collapse: collapse;
    width: 100%;
    margin-top: 10px;
}

.tabla-header-row {
    background-color: #f0f0f0;
}

.tabla-th {
    padding: 8px;
}

.tabla-td {
    padding: 8px;
}

.tabla-td-center {
    padding: 8px;
    text-align: center;
}