/* docs/contenido.css - Estilos del CONTENIDO de los tutoriales (todo scoped bajo .doc-contenido)
 *
 * Separado de style.css para compartirlo con el visor de tutoriales internos del admin
 * (mercasist-admin/controlv2/tutorialesInternos.php, que lo carga desde https://docs.mercasist.com/contenido.css).
 * Aqui van SOLO reglas de .doc-contenido; el layout del sitio sigue en style.css.
 *
 * La pagina anfitriona debe definir estas variables CSS (en docs las define :root de style.css;
 * en el admin, tutorialesInternos.css): --primario, --primario-hover, --degradado,
 * --gris-50/100/200/400/500/700/800/900, --borde, --radio, --radio-sm, --sombra, --sombra-sm, --transicion.
 * Asume tambien el reset global de style.css (* { margin: 0; padding: 0; box-sizing: border-box; }).
 */

/* ===== CONTENIDO DEL TUTORIAL ===== */
/* Adaptacion de tutorial.css de docs.mercasist.org, scoped bajo .doc-contenido */

.doc-contenido { padding-top: 10px; }

.doc-contenido h2 {
    color: var(--gris-900);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-top: 38px;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: var(--borde);
    scroll-margin-top: 84px;
}

.doc-contenido h2:first-child { margin-top: 0; }

.doc-contenido h3 {
    color: var(--gris-900);
    font-size: 15px;
    font-weight: 600;
    margin-top: 26px;
    margin-bottom: 10px;
}

.doc-contenido p,
.doc-contenido li { font-size: 14px; margin-bottom: 10px; }

.doc-contenido ul,
.doc-contenido ol { margin-left: 25px; margin-bottom: 20px; }

.doc-contenido strong { color: var(--gris-800); }

.doc-contenido a { color: var(--primario); }

.doc-contenido code {
    background: var(--gris-100);
    border: 1px solid var(--gris-200);
    border-radius: 5px;
    padding: 1px 6px;
    font-size: 12.5px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--primario-hover);
    word-break: break-word;
}

.doc-contenido table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 20px 0;
    background: #fff;
    border: var(--borde);
    border-radius: var(--radio-sm);
    overflow: hidden;
}

.doc-contenido th,
.doc-contenido td {
    border-bottom: 1px solid var(--gris-100);
    padding: 11px 14px;
    text-align: left;
    font-size: 13px;
}

.doc-contenido td { border-right: 1px solid var(--gris-100); }
.doc-contenido th { border-right: 1px solid var(--gris-200); }
.doc-contenido th:last-child,
.doc-contenido td:last-child { border-right: none; }
.doc-contenido tr:last-child td { border-bottom: none; }

.doc-contenido th { background: var(--gris-50); color: var(--gris-900); font-weight: 600; }

/* Cajas informativas */
.doc-contenido .highlight-box {
    background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);
    border-left: 4px solid #4F46E5;
    padding: 18px 20px;
    margin: 20px 0;
    border-radius: 10px;
    font-size: 14px;
}

.doc-contenido .warning-box {
    background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
    border-left: 4px solid #D97706;
    padding: 18px 20px;
    margin: 20px 0;
    border-radius: 10px;
    font-size: 14px;
}

.doc-contenido .success-box {
    background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
    border-left: 4px solid #059669;
    padding: 18px 20px;
    margin: 20px 0;
    border-radius: 10px;
    font-size: 14px;
}

.doc-contenido .danger-box {
    background: linear-gradient(135deg, #FEF2F2 0%, #FECACA 100%);
    border-left: 4px solid #DC2626;
    padding: 18px 20px;
    margin: 20px 0;
    border-radius: 10px;
    font-size: 14px;
}

/* Capturas */
.doc-contenido img {
    max-width: 100%;
    height: auto;
}

.doc-contenido .screenshot {
    display: block;
    max-width: 100%;
    border: var(--borde);
    border-radius: 10px;
    margin: 20px auto;
    box-shadow: var(--sombra-sm);
    cursor: zoom-in;
    transition: box-shadow var(--transicion);
}

.doc-contenido .screenshot:hover { box-shadow: var(--sombra); }

.doc-contenido .screenshot-caption {
    text-align: center;
    font-size: 12px;
    color: var(--gris-400);
    margin-top: -12px;
    margin-bottom: 20px;
}

.doc-contenido .screenshot-mobile {
    display: block;
    max-width: 320px;
    border: var(--borde);
    border-radius: 10px;
    margin: 20px auto;
    box-shadow: var(--sombra-sm);
    cursor: zoom-in;
}

/* Videos */
.doc-contenido .tutorial-video {
    display: block;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    border: var(--borde);
    border-radius: var(--radio);
    margin: 24px auto;
    background: #0f1729;
    box-shadow: var(--sombra);
    outline: none;
}

.doc-contenido .video-caption {
    text-align: center;
    font-size: 12px;
    color: var(--gris-400);
    margin-top: -12px;
    margin-bottom: 24px;
}

/* Tarjetas y cajas variadas del contenido original */
.doc-contenido .option-card {
    border: 1px solid #E0E7FF;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 15px;
    background: linear-gradient(135deg, #FAFAFE 0%, #EEF2FF 100%);
}

.doc-contenido .option-card h3 { margin-top: 0; color: var(--primario); }

.doc-contenido .step-box {
    border: var(--borde);
    border-radius: 10px;
    padding: 20px;
    margin: 25px 0;
    background: #fff;
}

.doc-contenido .step-number {
    display: inline-block;
    background: var(--degradado);
    color: white;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    text-align: center;
    line-height: 35px;
    font-weight: 700;
    font-size: 16px;
    margin-right: 10px;
}

.doc-contenido .step-card {
    border: var(--borde);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 15px;
    background: var(--gris-50);
}

.doc-contenido .status-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
}

.doc-contenido .status-green { background: #059669; }
.doc-contenido .status-yellow { background: #D97706; }
.doc-contenido .status-red { background: #DC2626; }

.doc-contenido .status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.doc-contenido .flow-diagram {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 0;
}

.doc-contenido .flow-step {
    background: #EEF2FF;
    border: 1px solid #C7D2FE;
    border-radius: 10px;
    padding: 12px 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primario);
    text-align: center;
}

.doc-contenido .flow-arrow { font-size: 18px; color: var(--gris-400); }

.doc-contenido .step-active { border-color: #4F46E5; background: #EEF2FF; }
.doc-contenido .step-warning { border-color: #D97706; background: #FFFBEB; color: #92400E; }
.doc-contenido .step-danger { border-color: #DC2626; background: #FEF2F2; color: #991B1B; }
.doc-contenido .step-config { border-color: #78716c; background: #fafaf9; color: #44403c; }
.doc-contenido .step-inv { border-color: #0891B2; background: #ECFEFF; color: #155E75; }
.doc-contenido .step-ml { border-color: #FFE600; background: #FFFDE7; color: #78350F; }
.doc-contenido .step-cashea { border-color: #0E7490; background: #ECFEFF; color: #155E75; }

.doc-contenido .map-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 12px;
    margin: 20px 0;
}

.doc-contenido .map-item {
    background: #fff;
    border: var(--borde);
    border-radius: 10px;
    padding: 14px;
    font-size: 13px;
    text-decoration: none;
    color: var(--gris-700);
    display: block;
    transition: all var(--transicion);
}

.doc-contenido .map-item:hover {
    border-color: rgba(79, 70, 229, 0.35);
    box-shadow: var(--sombra-sm);
    transform: translateY(-1px);
}

.doc-contenido .map-num {
    display: inline-block;
    background: var(--degradado);
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    text-align: center;
    line-height: 24px;
    font-size: 12px;
    font-weight: 700;
    margin-right: 8px;
}

.doc-contenido .tut-link {
    color: var(--primario);
    text-decoration: none;
    font-weight: 500;
}

.doc-contenido .tut-link:hover { text-decoration: underline; }

.doc-contenido .channel-card {
    border: var(--borde);
    border-radius: 10px;
    padding: 18px;
    margin-bottom: 12px;
    background: var(--gris-50);
}

.doc-contenido .channel-icon {
    display: inline-block;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    text-align: center;
    line-height: 36px;
    margin-right: 10px;
    color: white;
    font-weight: 700;
}

.doc-contenido .ch-ml { background: #FFE600; color: #333; }
.doc-contenido .ch-wa,
.doc-contenido .ch-tienda { background: #25D366; }
.doc-contenido .ch-manual { background: #78716c; }
.doc-contenido .ch-cashea { background: #0E7490; }

.doc-contenido .config-card {
    border: var(--borde);
    border-radius: 10px;
    padding: 18px;
    margin-bottom: 12px;
    background: var(--gris-50);
}

.doc-contenido .field-card {
    border: var(--borde);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 10px;
    background: #fff;
}

.doc-contenido .side-by-side {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin: 20px 0;
}

.doc-contenido .side-text { flex: 1; }

.doc-contenido .side-by-side .screenshot { max-width: 50%; margin: 0; }

.doc-contenido .table-info {
    font-size: 12px;
    color: var(--gris-500);
    margin-top: -15px;
    margin-bottom: 20px;
}

.doc-contenido .badge-abierta { background: #DBEAFE; color: #1D4ED8; }
.doc-contenido .badge-pagada { background: #D1FAE5; color: #065F46; }
.doc-contenido .badge-enviada { background: #FEF3C7; color: #92400E; }
.doc-contenido .badge-entregada { background: #ECFDF5; color: #065F46; }
.doc-contenido .badge-finalizada { background: #E5E7EB; color: #374151; }
.doc-contenido .badge-cancelada { background: #FEE2E2; color: #991B1B; }

.doc-contenido .tag-auto,
.doc-contenido .tag-manual,
.doc-contenido .tag-masivo,
.doc-contenido .tag-sistema {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
}

.doc-contenido .tag-auto { background: #D1FAE5; color: #065F46; }
.doc-contenido .tag-manual { background: #DBEAFE; color: #1D4ED8; }
.doc-contenido .tag-masivo { background: #FEF3C7; color: #92400E; }
.doc-contenido .tag-sistema { background: #E5E7EB; color: #374151; }

.doc-contenido .method-card {
    border: var(--borde);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 12px;
    background: var(--gris-50);
}

.doc-contenido .method-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
    background: #EEF2FF;
    color: var(--primario);
}

.doc-contenido .scenario-box,
.doc-contenido .situation-card {
    border: var(--borde);
    border-radius: 10px;
    padding: 18px;
    margin: 15px 0;
    background: var(--gris-50);
}

.doc-contenido .email-preview {
    border: var(--borde);
    border-radius: 10px;
    padding: 20px;
    margin: 15px 0;
    background: var(--gris-50);
    font-size: 13px;
}

.doc-contenido .example-box {
    border: 1px solid #C7D2FE;
    border-radius: 10px;
    padding: 18px;
    margin: 15px 0;
    background: #EEF2FF;
}

.doc-contenido footer {
    display: none; /* el pie original se reemplaza por .doc-pie */
}

@media (max-width: 860px) {
    .doc-contenido .side-by-side { flex-direction: column; }
    .doc-contenido .side-by-side .screenshot { max-width: 100%; }
    .doc-contenido .tutorial-video { border-radius: var(--radio-sm); margin: 18px auto; }
    .doc-contenido .flow-diagram { flex-direction: column; }
    .doc-contenido .map-grid { grid-template-columns: 1fr; }
}