/*--------------------------- TUTORIAL ---------------------------*/

.tutorial-container {
    padding: 0px 6px 0px 0px;
    font-family: 'Inter', 'Segoe UI', sans-serif;
}

.tutorial-intro {
    padding: 30px;
    border-radius: 10px;
    color: white;
    margin-bottom: 10px;
}
.tutorial-intro h1 { margin: 0 0 15px 0; font-size: 32px; }
.tutorial-intro p  { margin: 0; font-size: 16px; opacity: 0.95; }

/* Color por lenguaje */
.tutorial-intro.php   { background: linear-gradient(135deg, #777BB4, #5a5e8a); }
.tutorial-intro.html  { background: linear-gradient(135deg, #E34F26, #b03d1e); }
.tutorial-intro.js    { background: linear-gradient(135deg, #c9a800, #a38700); }
.tutorial-intro.mysql { background: linear-gradient(135deg, #00758F, #005a6e); }
.tutorial-intro.py    { background: linear-gradient(135deg, #3776AB, #285d87); }
.tutorial-intro.css   { background: linear-gradient(135deg, #264DE4, #1a35a8); }
.tutorial-intro.guia  { background: linear-gradient(135deg, #374151, #1f2937); border: 1px solid rgba(229,231,235,0.2); }

/*--------------------------- SECCIÓN ---------------------------*/

.tutorial-section {
    background: #28303B;
    padding: 25px 15px 5px 15px;
    border-radius: 8px;
    margin-bottom: 10px;
    border-left: 4px solid var(--lang-color, #4f46e5);
}
.tutorial-section h2  { color: #fff; margin: 0 0 15px 0; font-size: 24px; }
.tutorial-section h3  { color: var(--lang-color, #4f46e5); margin: 20px 0 10px; font-size: 18px; }

.tutorial-section p,
.tutorial-section ul,
.tutorial-section ol  { color: #B6BABE; line-height: 1.7; margin-bottom: 15px; font-size: 15px; }

.tutorial-section ul,
.tutorial-section ol  { line-height: 1.8; padding-left: 20px; margin-bottom: 0; }
.tutorial-section li  { list-style: disc; margin-bottom: 6px; }
.tutorial-section ol li { list-style: decimal; }

/* Prism controla el color — no pisar */
.tutorial-section pre {
    background: #2d2d2d !important;
    padding: 20px;
    border-radius: 6px;
    overflow-x: auto;
    margin: 15px 0;
    border: 1px solid #333;
}
.tutorial-section pre code {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 14px;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    color: unset !important;
}

/* Código inline */
.tutorial-section code {
    background-color: #2d2d2d;
    color: #818cf8;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 14px;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    border: 1px solid #3d3d3d;
}

/*--------------------------- NOTA ---------------------------*/

.note-box {
    padding: 15px 20px;
    margin: 20px 0;
    border-radius: 6px;
    border-left: 4px solid;
    color: #B6BABE;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.note-box::before { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.note-box p       { margin: 0; }
.note-box strong  { display: block; margin-bottom: 4px; }

.note-box.info    { border-left-color: #4f46e5; background-color: #1e2a3a; }
.note-box.warning { border-left-color: #F59E0B; background-color: #2a2010; }
.note-box.tip     { border-left-color: #10B981; background-color: #0f2a1e; }

.note-box.info::before    { content: 'ℹ️'; }
.note-box.warning::before { content: '⚠️'; }
.note-box.tip::before     { content: '💡'; }

.note-box.info    strong { color: #818cf8; }
.note-box.warning strong { color: #F59E0B; }
.note-box.tip     strong { color: #10B981; }

/*--------------------------- SALIDA DE EJEMPLO ---------------------------*/

.example-output    { background: #1a1a1a; padding: 20px; border-radius: 6px; border: 2px solid #333; margin-top: 15px; }
.example-output h3 { color: var(--lang-color, #4f46e5); margin: 0 0 12px 0; font-size: 18px; }
.example-output p  { color: #B6BABE; margin: 8px 0; font-size: 14px; }

/*--------------------------- TABLA DE SINTAXIS ---------------------------*/

.syntax-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 20px 0; border-radius: 6px; }
.syntax-table         { width: 100%; border-collapse: collapse; margin: 0; border: 1px solid #333; }
.syntax-table thead              { background-color: #4f46e5; color: white; }
.syntax-table th                 { padding: 12px 16px; text-align: left; font-weight: 600; font-size: 14px; }
.syntax-table td                 { padding: 12px 16px; border-bottom: 1px solid #333; font-size: 14px; background-color: #1a1a1a; color: #B6BABE; }
.syntax-table tbody tr:hover td  { background-color: #252525; }
.syntax-table code               { background-color: #0d0d0d; padding: 0px 3px; border-radius: 3px; color: #818cf8; font-family: 'Consolas', 'Monaco', 'Courier New', monospace; }

/*--------------------------- TARJETAS ---------------------------*/

.card-grid        { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 290px)); justify-content: start; align-items: start; gap: 15px; margin-top: 20px; }
.card-grid.wide   { grid-template-columns: repeat(auto-fit, minmax(250px, 330px)); }

.info-card         { width: 100%; max-width: 330px; background: #1a2030; padding: 15px; border-radius: 6px; border-left: 3px solid var(--lang-color, #4f46e5); box-sizing: border-box; }
.info-card h4      { color: var(--lang-color, #4f46e5); margin: 0 0 8px 0; font-size: 15px; }
.info-card > code  { color: #10b981; font-size: 13px; display: block; font-family: 'Consolas', 'Monaco', 'Courier New', monospace; background: transparent; border: none; padding: 0; }
.info-card p       { color: #666; font-size: 13px; margin: 8px 0 0; }

/* Colores por lenguaje para info-card en index.php */
.info-card--php    { --lang-color: #777BB4; }
.info-card--html   { --lang-color: #E34F26; }
.info-card--js     { --lang-color: #F7DF1E; }
.info-card--mysql  { --lang-color: #00758F; }
.info-card--python { --lang-color: #3776AB; }
.info-card--css    { --lang-color: #264DE4; }

/*--------------------------- BOTÓN TRY IT ---------------------------*/

.btn-try-it         { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; padding: 10px 16px; background-color: #4f46e5; color: #fff; text-decoration: none; border-radius: 5px; font-size: 13px; font-weight: 600; transition: background-color 0.2s, transform 0.15s; }
.btn-try-it::before { content: '▶'; font-size: 9px; opacity: 0.85; }
.btn-try-it:hover   { background-color: #4338ca; transform: translateY(-1px); }

/*--------------------------- NAVEGACIÓN ---------------------------*/

.page-navigation      { display: flex; justify-content: space-between; margin: 40px 0 20px; padding-top: 30px; border-top: 1px solid #333; }
.nav-btn              { background-color: #4f46e5; color: white; padding: 11px 22px; border-radius: 6px; text-decoration: none; font-weight: 600; transition: all 0.2s; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.nav-btn:hover        { background-color: #4338ca; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(79,70,229,0.4); }
.nav-btn.prev::before { content: '←'; }
.nav-btn.next::after  { content: '→'; }

/*--------------------------- BREADCRUMB ---------------------------*/

.breadcrumb         { padding: 14px 40px; background-color: #0d0d0d; border-bottom: 1px solid #333; font-size: 13px; }
.breadcrumb a       { color: #818cf8; text-decoration: none; font-weight: 500; }
.breadcrumb a:hover { color: #a5b4fc; text-decoration: underline; }
.breadcrumb span    { color: #666; margin: 0 8px; }

/*--------------------------- RESPONSIVE ---------------------------*/

@media (max-width: 768px) {
    .tutorial-intro { padding: 15px; }
    .tutorial-container  { padding: 0px 3px 0px 2px; }
    .tutorial-intro h1   { font-size: 26px; }
    .tutorial-intro p    { font-size: 14px; }
    .tutorial-section    { padding: 10px; }
    .tutorial-section h2 { font-size: 20px; }
    .tutorial-section h3 { font-size: 16px; }
    .card-grid           { grid-template-columns: 1fr; }
    .page-navigation     { align-items: center; flex-direction: row; flex-wrap: wrap; gap: 10px; }
    .page-navigation .nav-btn {
        flex: 0 1 auto;
        width: auto !important;
        max-width: 100%;
        white-space: nowrap;
    }
    .page-navigation .nav-btn.next { margin-left: auto; }

    /* Punto 3 — tabla con scroll propio, sin doble scroll anidado */
    .syntax-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Punto 4 — breadcrumb: reducir padding horizontal */
    .breadcrumb { padding: 10px 12px; }

    /* Punto 5 — btn-try-it: ocupa todo el ancho disponible en mobile */
    .btn-try-it { display: flex; width: fit-content; max-width: 100%; box-sizing: border-box; }

    /* Punto 6 — código en info-card: evitar desborde */
    .info-card > code { word-break: break-all; overflow-wrap: break-word; }

    .note-box {
        flex-direction: column;
        gap: 6px;
        padding: 12px 14px;
        font-size: 14px;
    }
    .note-box::before { font-size: 16px; }
}

@media (max-width: 360px) {
    .tutorial-intro h1 { font-size: 22px; }
}

/*--------------------------- PLACEHOLDER DE IMAGEN (guías) ---------------------------*/

.img-placeholder {
    border: 2px dashed #3d3d3d;
    background: #1a1a1a;
    border-radius: 6px;
    padding: 24px 20px;
    margin: 15px 0;
    text-align: center;
    color: #6b7280;
    font-size: 13px;
    line-height: 1.6;
}
.img-placeholder strong { color: #9ca3af; }

@media (max-width: 768px) {
    .img-placeholder { padding: 18px 14px; }
}