/* ===================================
   Componentes reutilizables
   Callouts, badges, cards, etc.
   =================================== */

/* --- Badges --- */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.badge-free {
    background: var(--color-success-light);
    color: var(--color-success);
}

.badge-pro {
    background: var(--color-pro-light);
    color: var(--color-pro);
}

.badge-both {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.badge-difficulty {
    background: var(--color-bg-alt);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}

.badge-basico { background: #ecfdf5; color: #059669; border-color: #d1fae5; }
.badge-intermedio { background: #fffbeb; color: #d97706; border-color: #fef3c7; }
.badge-avanzado { background: #fef2f2; color: #dc2626; border-color: #fecaca; }

/* --- Callouts --- */
.callout {
    padding: 16px 20px;
    border-radius: var(--radius);
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.6;
    border-left: 4px solid;
}

.callout-title {
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.callout-info {
    background: var(--color-info-light);
    border-left-color: var(--color-info);
}
.callout-info .callout-title { color: var(--color-info); }

.callout-tip {
    background: var(--color-success-light);
    border-left-color: var(--color-success);
}
.callout-tip .callout-title { color: var(--color-success); }

.callout-warning {
    background: var(--color-warning-light);
    border-left-color: var(--color-warning);
}
.callout-warning .callout-title { color: var(--color-warning); }

.callout-danger {
    background: var(--color-danger-light);
    border-left-color: var(--color-danger);
}
.callout-danger .callout-title { color: var(--color-danger); }

.callout-pro {
    background: var(--color-pro-light);
    border-left-color: var(--color-pro);
}
.callout-pro .callout-title { color: var(--color-pro); }

/* --- Steps (numbered instructions) --- */
.steps {
    counter-reset: step-counter;
    list-style: none;
    padding-left: 0;
    margin-bottom: 20px;
}

.steps li {
    counter-increment: step-counter;
    position: relative;
    padding-left: 40px;
    margin-bottom: 16px;
    min-height: 28px;
}

.steps li::before {
    content: counter(step-counter);
    position: absolute;
    left: 0;
    top: 0;
    width: 28px;
    height: 28px;
    background: var(--color-primary);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
}

.steps li strong { font-weight: 600; }

/* --- Quick Steps (compact) --- */
.quick-steps {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 20px 24px;
    margin-bottom: 24px;
}

.quick-steps-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 10px;
    color: var(--color-text);
}

.quick-steps ol {
    margin: 0;
    padding-left: 20px;
    font-size: 14px;
}
.quick-steps ol li { margin-bottom: 4px; }

/* --- Before You Begin --- */
.before-begin {
    background: var(--color-primary-light);
    border: 1px solid #bfdbfe;
    border-radius: var(--radius);
    padding: 20px 24px;
    margin-bottom: 24px;
}

.before-begin-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--color-primary);
    margin-bottom: 8px;
}

.before-begin ul {
    margin: 0;
    padding-left: 20px;
    font-size: 14px;
}
.before-begin ul li { margin-bottom: 4px; }

/* --- Feature Card (for Pro features list) --- */
.feature-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 12px;
}

.feature-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.feature-card-title { font-weight: 600; font-size: 15px; }
.feature-card-desc { font-size: 14px; color: var(--color-text-secondary); line-height: 1.5; }

/* --- Inline comparison table --- */
.comparison-inline {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.comparison-inline th,
.comparison-inline td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-border-light);
    font-size: 14px;
    text-align: left;
}

.comparison-inline th {
    background: var(--color-bg-alt);
    font-weight: 600;
    font-size: 13px;
}

.comparison-inline .icon-yes { color: var(--color-success); font-weight: bold; }
.comparison-inline .icon-no { color: var(--color-text-tertiary); }

/* --- Error Common block --- */
.error-block {
    background: var(--color-danger-light);
    border: 1px solid #fecaca;
    border-radius: var(--radius);
    padding: 20px 24px;
    margin-bottom: 20px;
}

.error-block-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--color-danger);
    margin-bottom: 8px;
}

.error-block p { font-size: 14px; margin-bottom: 8px; }
.error-block p:last-child { margin-bottom: 0; }

/* --- Navigation path (click instructions) --- */
.nav-path {
    display: inline;
    font-weight: 500;
    color: var(--color-text);
    background: var(--color-bg-alt);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 13px;
    border: 1px solid var(--color-border-light);
}

/* --- FAQ item --- */
.faq-item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    margin-bottom: 8px;
    overflow: hidden;
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-family);
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text);
    text-align: left;
    transition: background var(--transition);
}
.faq-question:hover { background: var(--color-bg-alt); }

.faq-chevron {
    transition: transform var(--transition);
    color: var(--color-text-tertiary);
    flex-shrink: 0;
}

.faq-item.is-open .faq-chevron { transform: rotate(90deg); }

.faq-answer {
    display: none;
    padding: 0 20px 16px;
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.7;
}

.faq-item.is-open .faq-answer { display: block; }