/* Pulso — estilos base del Módulo A (sin frameworks, sin build step) */

:root {
    --ink: #1c2333;
    --muted: #5c6577;
    --line: #e3e6ec;
    --bg: #f7f8fa;
    --card: #ffffff;
    --brand: #ff6a00;
    --brand-dark: #d95a00;
    --ok: #1e7e34;
    --no: #c0392b;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.5;
}

.container { max-width: 1024px; margin: 0 auto; padding: 0 20px; }

/* Header */
.site-header { background: #0e1116; color: #fff; }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; }
.brand { color: #fff; font-weight: 700; font-size: 1.4rem; text-decoration: none; letter-spacing: .5px; }
.brand::after { content: "."; color: var(--brand); }
.main-nav a { color: #c9cfda; text-decoration: none; margin-left: 18px; }
.main-nav a:hover { color: #fff; }

main.container { padding-top: 28px; padding-bottom: 48px; }

/* Encabezado de página */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.page-head h1 { margin: 0 0 4px; font-size: 1.8rem; }
.page-head .actions { display: flex; gap: 8px; align-items: center; }
form.inline { display: inline; }

.muted { color: var(--muted); }
.empty { color: var(--muted); background: var(--card); border: 1px dashed var(--line); padding: 18px; border-radius: 8px; }

/* Tarjetas */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 20px 22px; margin-bottom: 20px; }
.card h2 { margin-top: 0; font-size: 1.15rem; }
.card h3 { font-size: 1rem; margin-top: 22px; }
.card.placeholder { background: #fbfbfc; border-style: dashed; }

/* Tablas */
.table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.table th, .table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.table thead th { background: #eef0f4; font-size: .82rem; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.table tbody tr:last-child td { border-bottom: 0; }
.table td.actions { white-space: nowrap; text-align: right; }

/* Badges por tipo de sitio */
.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .8rem; font-weight: 600; background: #eef0f4; color: var(--ink); }
.badge-type-a  { background: #e8f4fd; color: #0b5fa5; }
.badge-type-b1 { background: #eaf7ee; color: #1e7e34; }
.badge-type-b2 { background: #e6f3f0; color: #0b6b5c; }
.badge-type-c  { background: #fef3e2; color: #9a5b00; }
.badge-type-d  { background: #f3e8fd; color: #6d28d9; }
.badge-type-e  { background: #e0f2f1; color: #0b6b62; }
.badge-type-f  { background: #f1f2f4; color: var(--muted); }

/* Semáforo de listo/pendiente */
.ready { font-weight: 600; font-size: .9rem; white-space: nowrap; }
.ready-ok { color: var(--ok); }
.ready-no { color: var(--no); }

/* Botones */
.btn { display: inline-block; padding: 8px 16px; border-radius: 6px; border: 1px solid var(--line); background: var(--card); color: var(--ink); text-decoration: none; cursor: pointer; font-size: .95rem; font-family: inherit; }
.btn:hover { background: #f0f2f6; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn-danger { background: #fff; border-color: #e5b4ac; color: var(--no); }
.btn-danger:hover { background: #fdf0ee; }
.btn-small { padding: 4px 10px; font-size: .85rem; }

/* Formularios */
.form { margin-top: 12px; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-weight: 600; margin-bottom: 6px; font-size: .92rem; }
.form-group input[type="text"],
.form-group input[type="url"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="number"],
.form-group input[type="date"],
.form-group select,
.form-group textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 6px; font-size: 1rem; background: #fff; font-family: inherit; }
.form-group textarea { resize: vertical; }
.form-row { display: flex; gap: 16px; }
.form-row .form-group { flex: 1; }
.form-row .form-group.grow { flex: 2; }
.error { display: block; color: var(--no); font-size: .85rem; margin-top: 4px; }

/* Mensajes flash */
.flash { padding: 12px 16px; border-radius: 8px; margin-bottom: 20px; }
.flash-success { background: #e6f4ea; border: 1px solid #a8d5b5; color: #146c43; }
.flash-error { background: #fdecea; border: 1px solid #f0b9b2; color: #a02c22; }

/* Playbook */
.playbook dt { font-weight: 700; margin-top: 12px; }
.playbook dd { margin: 2px 0 0; }
.playbook-cols { display: flex; gap: 32px; margin-top: 8px; }
.playbook-cols > div { flex: 1; }
.playbook-cols h3 { margin-bottom: 6px; }
.playbook-cols ul { margin: 0; padding-left: 20px; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding: 18px 0; color: var(--muted); text-align: center; }

@media (max-width: 640px) {
    .page-head { flex-direction: column; }
    .form-row { flex-direction: column; gap: 0; }
    .playbook-cols { flex-direction: column; gap: 0; }
}

/* Auth */
.auth-wrap { max-width: 420px; margin: 48px auto; }
.auth-wrap .brand-big { font-size: 1.8rem; font-weight: 700; text-align: center; display: block; margin-bottom: 20px; color: var(--ink); text-decoration: none; }
.auth-wrap .brand-big::after { content: "."; color: var(--brand); }
.auth-links { margin-top: 14px; font-size: .9rem; display: flex; justify-content: space-between; }
.auth-links a { color: var(--brand-dark); }

/* Fase 1: análisis (oportunidades, salud, rankings) */
.dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.dot-green { background: var(--ok); }
.dot-yellow { background: #e8a13d; }
.dot-red { background: var(--no); }

.health-line { display: flex; align-items: center; font-size: 1.05rem; }

.severity-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .8rem; font-weight: 700; color: #fff; margin-right: 8px; }
.sev-alta { background: var(--no); }
.sev-media { background: #e8a13d; }
.sev-baja { background: var(--ok); }

.opportunity { margin-bottom: 16px; }
.opportunity-head { margin-bottom: 6px; }
.opportunity h3 { margin: 6px 0; }
.opportunity .actions { margin-top: 10px; }
.opportunity-list { list-style: none; margin: 0 0 12px; padding: 0; }
.opportunity-list li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.opportunity-list li:last-child { border-bottom: none; }

.evidence { background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 10px 14px; margin: 10px 0; }
.evidence h4 { margin: 0 0 6px; font-size: .95rem; }
.evidence dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; }
.evidence dt { font-weight: 700; color: var(--muted); text-transform: capitalize; }
.evidence dd { margin: 0; word-break: break-word; }

.tabs { display: flex; gap: 8px; margin-bottom: 16px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.tab { padding: 6px 14px; border-radius: 6px 6px 0 0; text-decoration: none; color: var(--muted); }
.tab:hover { color: var(--ink); }
.tab-active { color: var(--ink); font-weight: 700; border-bottom: 2px solid var(--brand); }

.progress { background: #e9e2d8; border-radius: 4px; height: 10px; overflow: hidden; min-width: 120px; }
.progress-bar { background: var(--ok); height: 100%; border-radius: 4px; }

.table th.num, .table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-scroll { overflow-x: auto; }
.rankings .page-cell { max-width: 320px; word-break: break-all; font-size: .85rem; }
.rankings .pos-top { background: #e6f4ea; font-weight: 700; }

/* Modal */
.modal-backdrop { position: fixed; inset: 0; background: rgba(14,17,22,.55); display: none; align-items: flex-start; justify-content: center; z-index: 50; padding: 48px 20px; }
.modal-backdrop.open { display: flex; }
.modal { background: #fff; border-radius: 12px; max-width: 640px; width: 100%; max-height: 85vh; overflow-y: auto; padding: 26px 28px; }
.modal h2 { margin-top: 0; }
.modal h3 { margin-top: 20px; }
.modal table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: .93rem; }
.modal table th, .modal table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.modal table th { font-size: .82rem; text-transform: uppercase; letter-spacing: .4px; color: #5b6472; }
.modal-close { float: right; }
.page-head h2 { margin: 0; font-size: 1.15rem; }

/* Fase 2 — Framework de ejecución */
.level-picker { margin-bottom: 20px; }
.level-form { display: grid; gap: 8px; margin: 12px 0; }
.level-option { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.level-option input { margin-top: 3px; }
.level-active { border-color: var(--accent); background: #fff7f0; }

.change-row { margin-bottom: 14px; }
.change-row h3 { margin: 8px 0 4px; }
.change-row h3 a { color: inherit; text-decoration: none; }
.change-row h3 a:hover { text-decoration: underline; }
.change-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.status-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .8rem; font-weight: 700; margin-right: 4px; background: #e8e4dc; color: #3c4450; }
.status-proposed { background: #e3ecf7; color: #1d4f91; }
.status-approved { background: #e6f4ea; color: #1e6b3a; }
.status-rejected { background: #f1e8e4; color: #8a5a3b; }
.status-applied { background: #d9ecdf; color: #14532d; }
.status-failed { background: #fbe3e1; color: #a11f1f; }
.status-rolled_back { background: #eee9f5; color: #5b3d99; }

.risk-low { background: #e6f4ea; color: #1e6b3a; }
.risk-medium { background: #fdf3e3; color: #9a6a12; }
.risk-high { background: #fbe3e1; color: #a11f1f; }

.diff-table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: .93rem; }
.diff-table th, .diff-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.diff-table thead th { font-size: .82rem; text-transform: uppercase; letter-spacing: .4px; color: #5b6472; }
.diff-table tbody th { font-weight: 600; width: 30%; }
.diff-before { color: #8a5a3b; }
.diff-after { color: #14532d; font-weight: 600; }

.audit-list { display: grid; grid-template-columns: 180px 1fr; gap: 6px 14px; margin: 12px 0; }
.audit-list dt { font-weight: 600; font-size: .9rem; }
.audit-list dd { margin: 0; }

.executors { margin-top: 28px; }
.executor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.executor-card h3 { margin-top: 0; }
.small { font-size: .85rem; }

/* Acciones manuales */
.badge-origin-pulso { background: #e8f4fd; color: #0b5fa5; }
.badge-origin-manual { background: #f3e8fd; color: #6d28d9; }

/* Pendientes de decisión (índice de sitios) */
.badge-pending { background: #fdf3e3; color: #9a5b00; text-decoration: none; }
.badge-pending:hover { text-decoration: underline; }
.pending-banner { background: #fff8ec; border: 1px solid #f0dcae; border-radius: 8px; padding: 10px 14px; margin: 12px 0; }

.origin-filter { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.origin-link { font-size: .85rem; padding: 2px 10px; border-radius: 999px; color: var(--ink); text-decoration: none; background: #eef0f4; }
.origin-active { background: var(--ink); color: #fff; }

.check-group label { display: flex; gap: 8px; align-items: center; font-weight: 600; cursor: pointer; }
.check-group input[type="checkbox"] { width: 1.1rem; height: 1.1rem; }

.manual-mark-done, .update-date-form { display: inline-flex; gap: 6px; align-items: center; }
.manual-mark-done input[type="date"], .update-date-form input[type="date"] {
    padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; font-family: inherit; font-size: .9rem;
}

/* Informe mensual (Fase 3) */
.report-month-picker { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.report-month-picker label { font-weight: 600; }
.report-month-picker input[type="month"] { padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; font-family: inherit; font-size: .95rem; }

.report-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 8px; }
.report-metric { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 14px; text-align: center; }
.report-metric-value { display: block; font-size: 1.6rem; font-weight: 700; color: var(--ink); }
.report-metric-label { display: block; font-size: .85rem; color: var(--muted); margin-top: 4px; }

.report-progress { height: 8px; background: #eef0f4; border-radius: 999px; overflow: hidden; margin-bottom: 4px; max-width: 160px; }
.report-progress-bar { height: 100%; background: var(--brand); border-radius: 999px; }

.report-delta { display: inline-block; margin: 2px 8px 2px 0; padding: 2px 8px; border-radius: 999px; font-size: .82rem; background: #eef0f4; color: var(--muted); white-space: nowrap; }
.report-delta-up { background: #e6f4ea; color: #1e7e34; }
.report-delta-down { background: #fdeceb; color: #c0392b; }

.report-foot { text-align: center; margin-top: 8px; }

/* Impresión: informe limpio en una o varias páginas */
@media print {
    .no-print, .site-header .main-nav, .report-month-picker, .flash { display: none !important; }
    .site-header { background: none; color: var(--ink); }
    .brand { color: var(--ink); }
    body { background: #fff; }
    main.container { padding: 0; max-width: none; }
    .card { break-inside: avoid; box-shadow: none; }
    .report-metric { break-inside: avoid; }
    a { color: inherit; text-decoration: none; }
}

/* Tracking GEO — barras de tendencia semanal (share of voice) */
.geo-bars { display: flex; gap: 10px; align-items: flex-end; margin: 16px 0 24px; flex-wrap: wrap; }
.geo-bar-col { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 44px; }
.geo-bar-track { width: 34px; height: 120px; background: #ece7db; border-radius: 4px; position: relative; overflow: hidden; display: flex; align-items: flex-end; }
.geo-bar-fill { width: 100%; background: var(--ok); border-radius: 0 0 4px 4px; min-height: 0; }
.geo-bar-label { font-size: .72rem; color: var(--muted); }
.geo-bar-pct { font-size: .8rem; font-weight: 700; }
.suggestion-list { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.excerpt-cell { max-width: 420px; font-size: .85rem; color: var(--muted); }
.actions-cell { white-space: nowrap; }
.geo-add-form { margin: 18px 0; }

/* Wizard de onboarding guiado (Fase 3) */
.steps { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0 0 24px; }
.step { flex: 1; display: flex; gap: 10px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; color: var(--muted); font-size: .88rem; }
.step-num { width: 26px; height: 26px; border-radius: 50%; background: #eef0f4; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex: none; }
.step-label { line-height: 1.2; }
.step-current { border-color: var(--brand); color: var(--ink); font-weight: 600; }
.step-current .step-num { background: var(--brand); color: #fff; }
.step-done { color: var(--ink); }
.step-done .step-num { background: var(--ok); color: #fff; }
.wizard-nav { display: flex; gap: 10px; align-items: center; margin-top: 4px; flex-wrap: wrap; }
.checklist { list-style: none; padding: 0; }
.checklist li { margin: 8px 0; }

/* Fase 3 — Social automático */
.badge-status-draft { background: #f1f2f4; color: var(--muted); }
.badge-status-scheduled { background: #e8f4fd; color: #0b5fa5; }
.badge-status-approved { background: #eaf7ee; color: #1e7e34; }
.badge-status-published { background: #e0f2f1; color: #0b6b62; }
.badge-status-failed { background: #fdecea; color: #a02c22; }
.hidden { display: none; }