/*

██████╗ ██╗      █████╗  ██████╗██╗  ██╗ ██████╗██╗  ██╗ ██████╗ ██████╗ ██╗███╗   ███╗ █████╗          ██████╗ ██████╗ ███╗   ███╗
██╔══██╗██║     ██╔══██╗██╔════╝██║ ██╔╝██╔════╝██║  ██║██╔═══██╗██╔══██╗██║████╗ ████║██╔══██╗        ██╔════╝██╔═══██╗████╗ ████║
██████╔╝██║     ███████║██║     █████╔╝ ██║     ███████║██║   ██║██████╔╝██║██╔████╔██║███████║        ██║     ██║   ██║██╔████╔██║
██╔══██╗██║     ██╔══██║██║     ██╔═██╗ ██║     ██╔══██║██║   ██║██╔══██╗██║██║╚██╔╝██║██╔══██║        ██║     ██║   ██║██║╚██╔╝██║
██████╔╝███████╗██║  ██║╚██████╗██║  ██╗╚██████╗██║  ██║╚██████╔╝██║  ██║██║██║ ╚═╝ ██║██║  ██║ █████╗ ╚██████╗╚██████╔╝██║ ╚═╝ ██║
╚═════╝ ╚══════╝╚═╝  ╚═╝ ╚═════╝╚═╝  ╚═╝ ╚═════╝╚═╝  ╚═╝ ╚═════╝ ╚═╝  ╚═╝╚═╝╚═╝     ╚═╝╚═╝  ╚═╝ ╚════╝  ╚═════╝ ╚═════╝ ╚═╝     ╚═╝
*/
/* Estilos para los ejemplos de Flexbox */
.flex-container {
    background-color: #f0f0f0;
    border: 2px dashed #999;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 8px;
    display: flex;
    /* Por defecto para los ejemplos */
}

.flex-item {
    background-color: #3498db;
    color: white;
    padding: 15px;
    margin: 5px;
    text-align: center;
    font-size: 1.2em;
    border-radius: 4px;
    min-width: 50px;
}

.flex-item:nth-child(2) {
    background-color: #e74c3c;
}

.flex-item:nth-child(3) {
    background-color: #2ecc71;
}

.flex-item:nth-child(4) {
    background-color: #f1c40f;
    color: #333;
}

.flex-item:nth-child(5) {
    background-color: #9b59b6;
}

.ejemplo-codigo {
    background-color: #2c3e50;
    color: #ecf0f1;
    padding: 15px;
    border-radius: 5px;
    overflow-x: auto;
    margin-bottom: 10px;
}

h3 {
    margin-top: 30px;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}

h4 {
    color: #555;
    margin-top: 20px;
}

/* Clases de utilidad para ejemplos Flexbox */

/* Flex Direction */
.flex-row {
    flex-direction: row;
}

.flex-row-reverse {
    flex-direction: row-reverse;
}

.flex-column {
    flex-direction: column;
}

.flex-column-reverse {
    flex-direction: column-reverse;
}

/* Flex Wrap */
.flex-nowrap {
    flex-wrap: nowrap;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-wrap-reverse {
    flex-wrap: wrap-reverse;
}

/* Justify Content */
.justify-start {
    justify-content: flex-start;
}

.justify-end {
    justify-content: flex-end;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

.justify-evenly {
    justify-content: space-evenly;
}

/* Align Items */
.align-stretch {
    align-items: stretch;
}

.align-start {
    align-items: flex-start;
}

.align-end {
    align-items: flex-end;
}

.align-center {
    align-items: center;
}

.align-baseline {
    align-items: baseline;
}

/* Align Content */
.content-start {
    align-content: flex-start;
}

.content-end {
    align-content: flex-end;
}

.content-center {
    align-content: center;
}

.content-between {
    align-content: space-between;
}

.content-around {
    align-content: space-around;
}

.content-stretch {
    align-content: stretch;
}

/* Item Properties */
.order-1 {
    order: 1;
}

.order-2 {
    order: 2;
}

.order-minus-1 {
    order: -1;
}

.grow-0 {
    flex-grow: 0;
}

.grow-1 {
    flex-grow: 1;
    flex-basis: 0;
}

.grow-2 {
    flex-grow: 2;
    flex-basis: 0;
}

.grow-3 {
    flex-grow: 3;
    flex-basis: 0;
}

.shrink-0 {
    flex-shrink: 0;
}

.shrink-1 {
    flex-shrink: 1;
}

.shrink-2 {
    flex-shrink: 2;
}

.self-auto {
    align-self: auto;
}

.self-start {
    align-self: flex-start;
}

.self-end {
    align-self: flex-end;
}

.self-center {
    align-self: center;
}

.flex-item:nth-child(3) {
    background-color: #2ecc71;
}

.flex-item:nth-child(4) {
    background-color: #f1c40f;
    color: #333;
}

.flex-item:nth-child(5) {
    background-color: #9b59b6;
}

.ejemplo-codigo {
    background-color: #2c3e50;
    color: #ecf0f1;
    padding: 15px;
    border-radius: 5px;
    overflow-x: auto;
    margin-bottom: 10px;
}

h3 {
    margin-top: 30px;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}

h4 {
    color: #555;
    margin-top: 20px;
}

/* Clases de utilidad para ejemplos Flexbox */

/* Flex Direction */
.flex-row {
    flex-direction: row;
}

.flex-row-reverse {
    flex-direction: row-reverse;
}

.flex-column {
    flex-direction: column;
}

.flex-column-reverse {
    flex-direction: column-reverse;
}

/* Flex Wrap */
.flex-nowrap {
    flex-wrap: nowrap;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-wrap-reverse {
    flex-wrap: wrap-reverse;
}

/* Justify Content */
.justify-start {
    justify-content: flex-start;
}

.justify-end {
    justify-content: flex-end;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

.justify-evenly {
    justify-content: space-evenly;
}

/* Align Items */
.align-stretch {
    align-items: stretch;
}

.align-start {
    align-items: flex-start;
}

.align-end {
    align-items: flex-end;
}

.align-center {
    align-items: center;
}

.align-baseline {
    align-items: baseline;
}

/* Align Content */
.content-start {
    align-content: flex-start;
}

.content-end {
    align-content: flex-end;
}

.content-center {
    align-content: center;
}

.content-between {
    align-content: space-between;
}

.content-around {
    align-content: space-around;
}

.content-stretch {
    align-content: stretch;
}

/* Item Properties */
.order-1 {
    order: 1;
}

.order-2 {
    order: 2;
}

.order-minus-1 {
    order: -1;
}

.grow-0 {
    flex-grow: 0;
}

.grow-1 {
    flex-grow: 1;
    flex-basis: 0;
}

.grow-2 {
    flex-grow: 2;
    flex-basis: 0;
}

.grow-3 {
    flex-grow: 3;
    flex-basis: 0;
}

.shrink-0 {
    flex-shrink: 0;
}

.shrink-1 {
    flex-shrink: 1;
}

.shrink-2 {
    flex-shrink: 2;
}

.self-auto {
    align-self: auto;
}

.self-start {
    align-self: flex-start;
}

.self-end {
    align-self: flex-end;
}

.self-center {
    align-self: center;
}

.h-300 {
    height: 300px;
}

.h-auto {
    height: auto;
}

.h-60 {
    height: 60px;
}

.center-all {
    justify-content: center;
    align-items: center;
}

/* Math Demo Specifics */
.basis-0 {
    flex-basis: 0;
}

.basis-100 {
    flex-basis: 100px;
}

.basis-200 {
    flex-basis: 200px;
}

.basis-300 {
    flex-basis: 300px;
}

.basis-auto {
    flex-basis: auto;
}

/* Helpers restored and added */
.w-150 {
    width: 150px;
}

.w-200 {
    width: 200px;
}

.w-600 {
    width: 100%;
    max-width: 600px;
}

/* Estilos para la sección Deep Dive */
.alerta-info {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
}

.ejemplo {
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 20px;
    justify-content: flex-start;
}

.justify-end {
    justify-content: flex-end;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

.justify-evenly {
    justify-content: space-evenly;
}

/* Align Items */
.align-stretch {
    align-items: stretch;
}

.align-start {
    align-items: flex-start;
}

.align-end {
    align-items: flex-end;
}

.align-center {
    align-items: center;
}

.align-baseline {
    align-items: baseline;
}

/* Align Content */
.content-start {
    align-content: flex-start;
}

.content-end {
    align-content: flex-end;
}

.content-center {
    align-content: center;
}

.content-between {
    align-content: space-between;
}

.content-around {
    align-content: space-around;
}

.content-stretch {
    align-content: stretch;
}

/* Item Properties */
.order-1 {
    order: 1;
}

.order-2 {
    order: 2;
}

.order-minus-1 {
    order: -1;
}

.grow-0 {
    flex-grow: 0;
}

.grow-1 {
    flex-grow: 1;
    flex-basis: 0;
}

.grow-2 {
    flex-grow: 2;
    flex-basis: 0;
}

.grow-3 {
    flex-grow: 3;
    flex-basis: 0;
}

.shrink-0 {
    flex-shrink: 0;
}

.shrink-1 {
    flex-shrink: 1;
}

.shrink-2 {
    flex-shrink: 2;
}

.self-auto {
    align-self: auto;
}

.self-start {
    align-self: flex-start;
}

.self-end {
    align-self: flex-end;
}

.self-center {
    align-self: center;
}

.h-300 {
    height: 300px;
}

.h-auto {
    height: auto;
}

.h-60 {
    height: 60px;
}

.center-all {
    justify-content: center;
    align-items: center;
}

/* Math Demo Specifics */
.basis-0 {
    flex-basis: 0;
}

.basis-100 {
    flex-basis: 100px;
}

.basis-200 {
    flex-basis: 200px;
}

.basis-300 {
    flex-basis: 300px;
}

.basis-auto {
    flex-basis: auto;
}

/* Helpers restored and added */
.w-150 {
    width: 150px;
}

.w-200 {
    width: 200px;
}

.w-600 {
    width: 100%;
    max-width: 600px;
}

/* Estilos para la sección Deep Dive */
.alerta-info {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
}

.ejemplo {
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.ejemplo pre {
    background-color: #2c3e50;
    color: #ecf0f1;
    padding: 15px;
    border-radius: 5px;
    overflow-x: auto;
    margin-bottom: 10px;
    font-family: monospace;
}

/* Restoring more missing helpers */
.self-stretch {
    align-self: stretch;
}

.h-100 {
    height: 100px;
}
.ejemplo code {
    background-color: #2c3e50;
    color: #ecf0f1;
    padding: 2px 5px;
    border-radius: 3px;
    font-family: monospace;
}

/* Fix for code blocks to avoid black rectangles */
.ejemplo-codigo code {
    background-color: transparent;
    color: inherit;
    padding: 0;
}

/* Fix for inline code in alerts and examples to avoid phosphorescent look */
.alerta-info code,
.ejemplo code {
    background-color: #2c3e50;
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
}

/* Ensure code inside pre blocks in examples is transparent */
.ejemplo pre code {
    background-color: transparent;
    color: inherit;
}