/* Guías — estilos compartidos (formulas/, teoria/, tips/, herramientas/) */

/* Base de guía */
.guide-content { max-width: 800px; margin: 0 auto; line-height: 1.8; }
.guide-content h2 { margin-top: 2rem; border-bottom: 2px solid var(--accent-soft); padding-bottom: 0.5rem; }
.back-link { display: inline-block; margin-bottom: 2rem; color: var(--accent); text-decoration: none; font-weight: 600; }
.screenshot-placeholder { background: var(--bg-sidebar); border: 2px dashed var(--border); padding: 4rem; text-align: center; margin: 2.5rem 0; border-radius: 12px; color: var(--text-muted); }

/* Código y sintaxis */
.syntax { background: #0f172a; color: #f8fafc; padding: 1.5rem; border-radius: 8px; font-family: monospace; font-size: 1.1rem; margin: 1.5rem 0; border-left: 5px solid var(--accent); }
.argument { margin-bottom: 1rem; }
.argument strong { color: var(--accent); }
code { background: #e2e8f0; padding: 0.2rem 0.4rem; border-radius: 4px; font-weight: bold; color: #b91c1c; }

/* Anatomía de función */
.anatomy-box { background: #0f172a; color: #f8fafc; padding: 2rem; border-radius: 12px; font-family: 'Courier New', Courier, monospace; font-size: 1.5rem; text-align: center; margin: 2rem 0; border-bottom: 4px solid var(--accent); }
.part { display: inline-block; padding: 0.2rem 0.5rem; border-radius: 4px; margin: 0 0.1rem; }
.equal { color: #f472b6; }
.name { color: #60a5fa; font-weight: bold; }
.paren { color: #fbbf24; }
.arg { color: #34d399; }
.sep { color: #94a3b8; }
.description-list { list-style: none; padding: 0; }
.description-list li { margin-bottom: 1.5rem; padding-left: 1.5rem; border-left: 3px solid var(--border); }
.description-list strong { color: var(--accent); display: block; font-size: 1.1rem; }
.parts-list { list-style: none; padding: 0; }
.parts-list li { margin-bottom: 1.5rem; padding-left: 1.5rem; border-left: 3px solid var(--border); }
.parts-list strong { color: var(--accent); display: block; font-size: 1.1rem; }

/* Tablas */
.comparison-table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.9rem; }
.comparison-table th, .comparison-table td { border: 1px solid var(--border); padding: 1rem; text-align: left; }
.comparison-table th { background: var(--bg-sidebar); color: var(--accent); }
.data-table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
.data-table th, .data-table td { border: 1px solid var(--border); padding: 1rem; text-align: left; }
.data-table th { background: var(--bg-sidebar); }

/* Tarjetas informativas */
.info-card { background: var(--bg-sidebar); border-left: 5px solid var(--accent); padding: 1.5rem; border-radius: 4px; margin: 2rem 0; }
.highlight-box { background: var(--accent-soft); padding: 1.5rem; border-radius: 8px; margin: 2rem 0; }
.highlight-box h3 { margin-top: 0; color: var(--accent); }
.tip-box { background: #fffbeb; border: 1px solid #fde68a; padding: 1.5rem; border-radius: 8px; margin: 1.5rem 0; }
.tip-box h3 { color: #92400e; margin-top: 0; }
.pro-tip { background: var(--accent-soft); border-left: 5px solid var(--accent); padding: 1.5rem; border-radius: 4px; margin: 2rem 0; }
.important-box { background: #fff1f2; border-left: 5px solid #e11d48; padding: 1.5rem; border-radius: 4px; margin: 2rem 0; }
.feature-box { background: #f0fdf4; border: 1px solid #bbf7d0; padding: 1.5rem; border-radius: 8px; margin: 1.5rem 0; }
.feature-box h3 { color: #166534; margin-top: 0; }
.case-study { background: #f0fdf4; border: 1px solid var(--border); padding: 1.5rem; border-radius: 8px; margin: 1.5rem 0; }
.case-study h3 { color: var(--accent); margin-top: 0; margin-bottom: 0.5rem; }
.error-card { background: var(--bg-sidebar); border-left: 5px solid #ef4444; padding: 1.5rem; border-radius: 4px; margin: 2rem 0; }
.error-title { font-family: 'Courier New', Courier, monospace; font-size: 1.25rem; font-weight: bold; color: #ef4444; margin-bottom: 0.5rem; }
.note { border-left: 4px solid #f59e0b; background: #fffbeb; padding: 1rem; border-radius: 4px; margin: 1rem 0; }
.alignment-tip { background: #e0f2fe; padding: 1rem; border-radius: 4px; border-left: 5px solid #0ea5e9; margin: 1.5rem 0; }

/* Atajos de teclado */
.shortcut-card { background: #f8fafc; border: 1px solid var(--border); padding: 1.5rem; border-radius: 12px; margin: 1.5rem 0; display: flex; align-items: center; gap: 1.5rem; }
.shortcut-keys { display: flex; gap: 0.5rem; }
.key { background: #ffffff; border: 1px solid #d1d5db; border-bottom: 3px solid #9ca3af; padding: 0.5rem 0.75rem; border-radius: 6px; font-weight: bold; font-family: monospace; }
.shortcut { background: #f3f4f6; padding: 0.2rem 0.5rem; border-radius: 4px; font-weight: bold; border: 1px solid #d1d5db; }

/* Pasos y listas */
.step { margin-bottom: 1.5rem; }
.step strong { color: var(--accent); }
.step-block { background: var(--bg-sidebar); padding: 1.5rem; border-radius: 8px; margin: 1.5rem 0; }
.step-num { font-weight: 800; color: var(--accent); margin-right: 0.5rem; }
.step-box { border: 2px solid var(--accent-soft); padding: 1.5rem; border-radius: 8px; margin: 1.5rem 0; }
.step-box h3 { color: var(--accent); margin-top: 0; }
.order-list { list-style-type: decimal; padding-left: 1.5rem; }
.order-list li { margin-bottom: 0.5rem; }
.feature-list { list-style: none; padding: 0; margin: 2rem 0; }
.feature-item { display: flex; gap: 1rem; margin-bottom: 1rem; align-items: center; }
.icon { width: 24px; height: 24px; color: var(--accent); flex-shrink: 0; }
.example-box { border: 1px solid var(--border); padding: 1.5rem; border-radius: 8px; margin: 2rem 0; background: var(--bg-sidebar); }
.dual-column { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 1rem; }