/* ============================================================
   ejemplos_tema.css  —  TEMA VISUAL COMÚN de TODO /ejemplos/
   (Java, Flutter, Dart, PHP, plugins, DOM, HTML, CSS, XML, APIs...)
   Lo inyecta nav-bar.php EL ÚLTIMO en cada página de /ejemplos/.
   - banner de título con el color del nav-bar (#2c3e50 plano)
   - encabezados de sección iguales
   - TODA caja/cabecera/botón con fondo de color -> #2c3e50
   Todo acotado a .tutorial-article para no filtrar al nav-bar.
   ============================================================ */

.tutorial-article {
    /* EL COLOR DEL NAV-BAR es el azul marino sólido #2c3e50 (lo pone
       ajuste.css: .navbar{background:var(--primary-color)} ). Todos los
       banners y paneles de color de Java usan ESE color plano. */
    --primary-color: #2c3e50;
    --secondary-color: #2c3e50;
    --accent-color: #2c3e50;
    --dark-color: #2c3e50;
    --light-color: #f7f8fb;

    --jt-navbar: #2c3e50;
    --jt-navbar-2: #34495e;   /* variante muy ligeramente más clara para hovers/th */
    --jt-grad: #2c3e50;       /* (nombre histórico; ahora es color plano) */
    --jt-ink: #2c3e50;
    --jt-muted: #5f6c72;
    --jt-border: #e6e8ee;

    max-width: 940px;
    margin: 0 auto;
    padding: 1.5rem 0 3rem;
    background: none;
    box-shadow: none;
    border-radius: 0;
}

/* ---------- BANNER DE TÍTULO (color del nav-bar) ---------- */
.tutorial-article .article-header {
    position: relative;
    overflow: hidden;
    text-align: center;
    background: var(--jt-navbar);
    color: #fff;
    border: 0;
    border-radius: 14px;
    padding: 2.6rem 2rem;
    margin: 0 0 2.6rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.tutorial-article .article-header::after {
    content: "";
    position: absolute;
    right: -60px;
    top: -60px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(255, 255, 255, .06), transparent 70%);
    pointer-events: none;
}

.tutorial-article .article-title {
    margin: 0 0 .6rem;
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 800;
    line-height: 1.2;
    color: #fff;
    /* anula el "texto con degradado recortado" de java_avanzado */
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: #fff;
}

.tutorial-article .article-subtitle {
    margin: 0 auto;
    max-width: 62ch;
    font-size: 1.08rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .92);
}

/* todo lo que va dentro del banner: texto blanco */
.tutorial-article .article-header,
.tutorial-article .article-header * {
    color: #fff;
    border-color: rgba(255, 255, 255, .3);
}

/* (los botones dentro del banner se invierten al final del archivo,
   después de la regla general de botones) */

/* badge opcional dentro del banner (páginas viejas) */
.tutorial-article .article-header .module-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .35);
    color: #fff;
    border-radius: 999px;
    padding: .3rem .8rem;
}
/* stats/píldoras dentro del banner */
.tutorial-article .article-header :is(.header-stats, .header-actions) {
    display: flex;
    gap: .8rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1rem;
}
.tutorial-article .article-header :is(.header-stats > *, .stat, .header-stat) {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 10px;
    padding: .5rem .9rem;
}

/* ---------- SECCIONES ---------- */
.tutorial-article .content-section {
    margin: 0 0 2.6rem;
    padding: 0;
    border: 0;
}

.tutorial-article .content-section > h2,
.tutorial-article .content-section h2 {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0 0 1.1rem;
    padding-bottom: .55rem;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--jt-ink);
    border: 0;
    border-bottom: 2px solid var(--jt-border);
    border-image: none;
}
.tutorial-article .content-section > h2 i,
.tutorial-article .content-section h2 i {
    color: #2c3e50;
}
.tutorial-article .content-section > h3,
.tutorial-article .content-section h3 {
    color: var(--jt-ink);
    font-size: 1.15rem;
    margin: 1.4rem 0 .6rem;
}
.tutorial-article .content-section p {
    line-height: 1.75;
    color: var(--jt-muted);
}
.tutorial-article .content-section a {
    color: #4f46c9;
    font-weight: 600;
}

/* código: mismo redondeo en todas */
.tutorial-article pre[class*="language-"] {
    border-radius: 10px;
}

/* ============================================================
   UNIFICAR PANELES DE COLOR (páginas viejas)
   Todos los bloques/cabeceras/insignias que llevaban su propio
   degradado (azul, rojo, verde, morado...) pasan al degradado
   del nav-bar. Los que ya lo usaban no cambian.
   ============================================================ */
.tutorial-article :is(
    .analogy, .intro-analogy, .conceptos-introduction,
    .overview-card, .next-module, .next-module-preview,
    .detail-header, .simulator-header, .explorer-header,
    .interface-header, .exercise-header, .final-test,
    .type-header, .type-header.variable, .type-header.constant,
    .comparison-item.array, .comparison-item.arraylist,
    .game-card.flipped, .cheat-sheet, .step-number,
    .access-table th, .comparison-table th, .wrapper-table th,
    .progress-fill
) {
    background: var(--jt-grad) !important;
    color: #fff !important;
    border-color: transparent !important;
}
/* texto dentro de esos paneles: blanco */
.tutorial-article :is(
    .analogy, .intro-analogy, .conceptos-introduction, .overview-card,
    .next-module, .next-module-preview, .detail-header, .simulator-header,
    .explorer-header, .interface-header, .exercise-header, .final-test,
    .type-header, .game-card.flipped, .cheat-sheet
) :is(h2, h3, h4, h5, p, span, strong, li, code) {
    color: #fff;
}

/* iconos de h2 que llevaban degradado de fondo -> icono morado plano */
.tutorial-article .content-section h2 i,
.tutorial-article .content-section > h2 i {
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: #2c3e50 !important;
    color: #2c3e50 !important;
}

/* tarjetas-metáfora ("caja de memoria"): fondo blanco sólido y legible */
.tutorial-article :is(
    .variable-box, .box-content, .comparison-content,
    .array-cell, .analogy-visual .variable-box
) {
    background: #fff !important;
}

/* tarjetas informativas que van SOBRE un panel de color: cristal translúcido
   con borde blanco (en vez de bordes de colores distintos) */
.tutorial-article :is(
    .analogy, .intro-analogy, .conceptos-introduction, .intro-container,
    .overview-card, .next-module, .next-module-preview
) :is(.concepto-item, .feature-card, .analogy-item, .feature, .intro-card) {
    background: rgba(255, 255, 255, .10) !important;
    border: 1px solid rgba(255, 255, 255, .28) !important;
    border-top: 4px solid rgba(255, 255, 255, .55) !important;
    box-shadow: none !important;
}
.tutorial-article :is(
    .analogy, .intro-analogy, .conceptos-introduction, .intro-container
) :is(.concepto-icon, .feature-icon) {
    color: #fff !important;
    background: none !important;
    -webkit-text-fill-color: #fff !important;
}
.tutorial-article :is(.data-type, .box-memory, .box-label, .data-value) {
    color: #2c3e50;
}
.tutorial-article .data-type,
.tutorial-article .box-memory {
    color: #5f6c72;
}
/* franjas de color de las tarjetas de tipo -> morado de marca */
.tutorial-article .variable-box[data-type] {
    border-top-color: #2c3e50 !important;
}

.dark-theme .tutorial-article :is(
    .variable-box, .box-content, .comparison-content, .array-cell
) {
    background: #232323 !important;
}
.dark-theme .tutorial-article :is(.data-type, .box-memory) { color: #b9bdc6; }
.dark-theme .tutorial-article :is(.box-label, .data-value) { color: #e8eaed; }

/* ---------- MODO OSCURO ---------- */
.dark-theme .tutorial-article {
    --jt-ink: #e8eaed;
    --jt-border: #2e2e2e;
    --jt-muted: #c7ccd4;
}
.dark-theme .tutorial-article .content-section > h2,
.dark-theme .tutorial-article .content-section h2 {
    color: #e8eaed;
    border-bottom-color: #2e2e2e;
}
.dark-theme .tutorial-article .content-section > h3,
.dark-theme .tutorial-article .content-section h3 { color: #e2e4e8; }
.dark-theme .tutorial-article .content-section p { color: #c7ccd4; }
.dark-theme .tutorial-article .content-section a { color: #9db2ff; }

/* ============================================================
   RESTO DE /ejemplos/ (Flutter, Dart, PHP, plugins, DOM, HTML,
   CSS, XML, APIs...): toda caja/cabecera/botón/editor con fondo
   de color pasa a #2c3e50 (el color del nav-bar).
   Se dejan con su color solo los indicadores semánticos
   (verde=GET/éxito/online, azul=POST, colores de marca de cada
   tecnología, y las demos que enseñan color / box-model).
   ============================================================ */

/* --- botones (NO meter IDs dentro de :is(): dispararía la especificidad) --- */
.tutorial-article :is(
    .download-btn, .download-button, .submit-btn, .demo-btn, .demo-button,
    .send-btn, .expand-button, .copy-code-btn, .btn-crear, .btn-leer,
    .btn-primary, .btn-secondary, .retry-button, .state-btn, .control-btn,
    .flutter-button, .modal-btn, .anim-btn, .action-button, .try-selector,
    .tab-button.active, .device-btn.active
),
.tutorial-article #apply-css,
.tutorial-article #reset-practice {
    background: #2c3e50 !important;
    background-image: none !important;
    color: #fff !important;
    border-color: #2c3e50 !important;
}
.tutorial-article :is(
    .download-btn, .download-button, .submit-btn, .demo-btn, .demo-button,
    .send-btn, .expand-button, .copy-code-btn, .btn-crear, .btn-leer,
    .btn-primary, .btn-secondary, .retry-button, .state-btn, .control-btn,
    .flutter-button, .modal-btn, .anim-btn, .action-button, .try-selector
):hover,
.tutorial-article #apply-css:hover {
    background: #34495e !important;
}

/* --- cabeceras, paneles, "cajas" con fondo de color --- */
.tutorial-article :is(
    .app-header, .appbar-content, .appbar-preview, .phone-header,
    .terminal-header, .editor-header, .response-header, .modal-content h2,
    .example-code h4, .code-section h3, .code-block h3,
    .endpoints-table th, .properties-table th, .comparison-table th, .schema-table th,
    .box, .widget-box, .content-box, .preview-box, .responsive-box,
    .interactive-widget, .preview-widget, .sizedbox-horizontal, .animated-box,
    .fullscreen-content, .resource-link, .horizontal-item, .widget-item,
    .tile-leading, .value-tag, .item-number, .item-index, .rule-number,
    .socket-connector, .network-line, .flow-number, .selector-icon, .method-icon,
    .feature-icon, .step-icon, .step-number, .practice-icon, .column-icon,
    .preview-avatar, .profile-avatar, .user-avatar, .client-avatar
) {
    background: #2c3e50 !important;
    background-image: none !important;
    color: #fff !important;
    border-color: #2c3e50 !important;
}

/* --- editores / bloques de código oscuros: al mismo #2c3e50 --- */
.tutorial-article :is(
    .code-box, .code-block, .code-block pre, .code-explanation pre,
    .contenido-archivo, .directory-structure, .sql-code, .example-code,
    .tree-diagram, .tree-node, .structure-visual, .syntax-visual,
    .html-editor, .html-editor-large, .generated-code, .css-code,
    .code-editor, .form-code, .terminal-input, .preview-code, .code-snippet,
    .endpoint-url, .phone-mockup, .demo-html pre, .media-editor pre,
    .media-query-code pre, .tab-content pre
),
.tutorial-article #css-editor {
    background: #2c3e50 !important;
    background-image: none !important;
}

/* .method-item / .route-item / .op-method-* mantienen su verde=GET / azul=POST
   (igual que .route-method.get / .http-method.get) — son indicadores semánticos */

/* --- SEMÁNTICOS QUE SE MANTIENEN (no tocar):
   .badge-get/.http-method.get/.route-method.get/.op-method.get (verde=GET)
   .route-method.post/.op-method.post/.method-btn.post.active/.badge-put (azul=POST)
   .badge-async/.badge-flutter/.badge-php/.badge-facturascripts (marca)
   .dom-notification.success/.info, .dot.green, .editor-dot.green,
   .status-dot.online (indicadores de estado)
   .siniestro-false, .switch, .app-content.safe/.unsafe, .safe-example
   .margin-box/.padding-box/.label-margin/.label-padding/.margin-example
   .box.blue/.box.green (demos de layout que necesitan contraste)
   #css-demo-styled ... (demo "con estilo vs sin estilo")
   --- */

/* ---- botones/enlaces DENTRO del banner: invertidos (blanco sobre navy)
   para que no se pierdan sobre el propio fondo del banner. Va aquí, al
   final, para ganar a la regla general de botones. ---- */
.tutorial-article .article-header.article-header :is(a, button, .download-btn, .btn, [class*="btn"], .demo-button, .action-button) {
    background: #fff !important;
    background-image: none !important;
    color: #2c3e50 !important;
    border: 1px solid #fff !important;
    border-radius: 8px !important;
    padding: .6rem 1.2rem !important;
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
}
.tutorial-article .article-header.article-header :is(a, button, .download-btn, .btn, [class*="btn"]):hover {
    background: rgba(255, 255, 255, .88) !important;
    transform: translateY(-1px);
}

@media (max-width: 600px) {
    .tutorial-article .article-header { padding: 1.9rem 1.3rem; border-radius: 12px; }
    .tutorial-article .content-section > h2,
    .tutorial-article .content-section h2 { font-size: 1.3rem; }
}