/* SEO (0.35.0): the three tabs of Mockups/seo-en-el-admin/SEO En El Admin.html. The header (.phead), the tabs (.ptabs),
   the cards (.ini-card, .ini-ch, .ini-list), the chips (.pill), the "?" (.help) and the sparks come from shell.css and
   screens.css; this file holds only what is the SEO screen's own. Loaded after them. */
.seo { gap: 16px; padding-bottom: 24px; }
.seo > [data-panel] { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.seo > [data-panel][hidden] { display: none; }
.seo .muted { color: #8A978F; }
.seo .sm, .seo-drawer .sm { font-size: 12.5px; }
.seo-drawer .muted { color: #8A978F; }
.seo .cb { padding: 16px 18px; }
.seo .grow, .seo-drawer .grow { flex: 1; }

/* the empty state's notice and the example switch */
.seo-wait { display: flex; gap: 14px; align-items: center; background: #FFFBEA; border: 1px solid #F3E2A0; border-radius: var(--corner); padding: 14px 18px; }
.seo-wait.ex { background: #FFF6D1; }
.seo-wait .ic { width: 38px; height: 38px; border-radius: 10px; background: var(--oro); color: var(--navy); display: grid; place-items: center; flex: none; }
.seo-wait .ic svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.seo-wait b { display: block; }
.seo-wait .s { font-size: 12.5px; color: #4A5A52; }
.demo-sw { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: #4A5A52; background: none; border: 0; padding: 4px 0; cursor: pointer; white-space: nowrap; }
.demo-sw i { width: 32px; height: 18px; border-radius: 999px; background: #CFD6D1; position: relative; display: inline-block; flex: none; }
.demo-sw i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: .15s; }
.demo-sw.on i { background: var(--oro-antiguo); }
.demo-sw.on i::after { left: 16px; }
.ex-tag { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; background: var(--oro); color: var(--navy); padding: 2px 7px; border-radius: 4px; font-weight: 700; margin-left: 8px; }
.seo .ptabs .sh { display: none; }
.seo-empty { padding: 26px 18px; text-align: center; color: #8A978F; font-size: 13px; }
.seo-empty b { display: block; color: #4A5A52; margin-bottom: 2px; }

/* the four numbers */
.seo-kpis { gap: 16px; }
.seo .kpi { padding: 16px 18px; display: flex; flex-direction: column; }
.seo .kpi .l { font-size: 12px; color: #4A5A52; font-weight: 500; display: flex; align-items: center; gap: 5px; }
.seo .kpi .v { font-size: 26px; font-weight: 600; letter-spacing: -.02em; margin: 6px 0 2px; line-height: 1.1; }
.seo .kpi .v.none { color: #8A978F; }
.seo .kpi .d { font-size: 12px; color: #8A978F; }
.seo .kpi .d b { font-weight: 600; }

/* the chart */
.seo-lines { height: 150px; padding: 6px 0; }
.seo-lines svg { width: 100%; height: 100%; display: block; }
.seo-legend { display: flex; gap: 16px; font-size: 12px; color: #4A5A52; margin-top: 6px; }
.seo-legend i { display: inline-block; width: 10px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }

.seo-g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.seo-g21 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.seo-side { display: grid; gap: 16px; }
.seo .ini-card table.t td:first-child { overflow-wrap: anywhere; }

/* the batches */
.seo-batch { padding: 16px 18px; border-bottom: 1px solid #F0EEE6; cursor: pointer; }
.seo-batch:last-child { border-bottom: 0; }
.seo-batch:hover, .seo-batch:focus-visible { background: #FCFBF7; outline: none; }
.seo-batch .hd { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.seo-batch.more { cursor: default; padding-bottom: 12px; }
.seo-batch .btn { white-space: nowrap; }
.seo-batch.more .hd { margin-bottom: 0; }
.seo-batch.more .n { background: #F0EEE6; color: #4A5A52; }
.seo-batch.more .tt { color: #4A5A52; }
.seo-batch .n { width: 26px; height: 26px; border-radius: 7px; background: #E3EEE7; color: var(--navy); display: grid; place-items: center; font-weight: 700; font-size: 12.5px; flex: none; }
.seo-batch .tt { font-weight: 600; }
.seo-batch .ds { font-size: 12.5px; color: #4A5A52; margin-top: 1px; }
.seo-batch .meta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.lvl { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; padding: 2px 7px; border-radius: 4px; flex: none; }
.lvl.h { background: #FDEBE9; color: #B42318; } .lvl.m { background: #FFF2DD; color: #9A5B00; } .lvl.l { background: #F0EEE6; color: #4A5A52; }
.seo-steps { display: flex; align-items: center; margin: 2px 0; flex-wrap: wrap; row-gap: 6px; }
.seo-steps .st { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #8A978F; white-space: nowrap; }
.seo-steps .st .pt { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #E7E4DA; background: #fff; flex: none; box-sizing: border-box; }
.seo-steps .st.done { color: #1E7A4A; } .seo-steps .st.done .pt { background: #1E7A4A; border-color: #1E7A4A; }
.seo-steps .st.now { color: var(--navy); font-weight: 600; } .seo-steps .st.now .pt { background: var(--oro); border-color: var(--oro); box-shadow: 0 0 0 3px #FFF3C4; }
.seo-steps .ln { width: 22px; height: 2px; background: #E7E4DA; margin: 0 6px; flex: none; }
.seo-steps .ln.done { background: #1E7A4A; }
.btn.g, .btn.seo-go { background: var(--navy); color: #fff; border: 1px solid var(--navy); }
.btn .rec { font-size: 11px; color: #9FE0BC; font-weight: 700; margin-left: 6px; }
.btn.ghost .rec { color: #1E7A4A; }

/* the timeline */
.seo-tl { list-style: none; margin: 0; padding: 0 0 0 4px; position: relative; }
.seo-tl::before { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; background: #E7E4DA; }
.seo-tl li { display: flex; gap: 12px; padding: 6px 0; position: relative; }
.seo-tl li .pt { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid #E7E4DA; flex: none; margin-top: 2px; z-index: 1; box-sizing: border-box; }
.seo-tl li.done .pt { background: #1E7A4A; border-color: #1E7A4A; }
.seo-tl li.now .pt { background: var(--oro); border-color: var(--oro); box-shadow: 0 0 0 4px #FFF3C4; }
.seo-tl li .t { font-weight: 600; font-size: 13px; }
.seo-tl li .w { font-size: 12px; color: #8A978F; }
.seo-tl li.todo .t { color: #8A978F; font-weight: 500; }

/* the drawer (a batch, or the full report when .wide) */
.seo-scrim { position: fixed; inset: 0; background: rgba(10, 20, 15, .25); z-index: 60; }
.seo-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 520px; max-width: 100%; background: #fff; border-left: 1px solid var(--border); box-shadow: -12px 0 32px rgba(0, 0, 0, .08);
  z-index: 61; display: flex; flex-direction: column; }
.seo-drawer.wide { width: 760px; }
.seo-drawer .hd { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid #F0EEE6; }
.seo-drawer .hd b { font-size: 16px; }
.seo-drawer .hd .x { margin-left: auto; background: none; border: 0; font-size: 22px; line-height: 1; color: #4A5A52; }
.seo-drawer .bd { flex: 1; overflow: auto; padding: 16px 20px; }
.seo-drawer .ft { border-top: 1px solid var(--border); padding: 12px 20px; display: flex; gap: 8px; align-items: center; }
.seo-drawer .ft a.btn { text-decoration: none; }
.seo-drawer h4 { margin: 18px 0 8px; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: #8A978F; }
.seo-drawer .warnline { margin-top: 10px; }
.seo-dt { font-weight: 600; font-size: 15px; }
.seo-gprev { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; background: #fff; }
.seo-gprev .u { font-size: 12px; color: #8A978F; }
.seo-gprev .t { color: #1a0dab; font-size: 16px; margin: 2px 0; }
.seo-gprev .d { font-size: 12.5px; color: #4A5A52; line-height: 1.4; }
.seo-ba { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-bottom: 10px; }
.seo-ba .w { padding: 8px 12px; font-size: 12px; font-weight: 600; background: #FCFBF7; border-bottom: 1px solid #F0EEE6; }
.seo-ba .r { display: grid; grid-template-columns: 62px 1fr; gap: 8px; padding: 8px 12px; font-size: 12.5px; border-bottom: 1px solid #F0EEE6; }
.seo-ba .r:last-child { border-bottom: 0; }
.seo-ba .r .k { color: #8A978F; font-weight: 600; }
.seo-ba .r.was .v { color: #8A978F; text-decoration: line-through; text-decoration-color: #D9A9A3; }
.seo-md { font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.seo-md h2 { font-size: 19px; margin: 18px 0 8px; } .seo-md h3 { font-size: 16px; margin: 16px 0 6px; } .seo-md h4, .seo-md h5, .seo-md h6 { font-size: 14px; margin: 14px 0 6px; text-transform: none; letter-spacing: 0; color: var(--text); }
.seo-md p { margin: 0 0 10px; }
.seo-md ul, .seo-md ol { margin: 0 0 10px; padding-left: 22px; }
.seo-md code { font-family: ui-monospace, monospace; font-size: 12.5px; background: #F5F2EA; padding: 1px 4px; border-radius: 4px; }
.seo-md pre { font-family: ui-monospace, monospace; font-size: 12px; background: #FCFBF7; border: 1px solid #F0EEE6; border-radius: 8px; padding: 10px 12px; overflow: auto; white-space: pre; margin: 0 0 12px; }
.seo-md hr { border: 0; border-top: 1px solid var(--border); margin: 16px 0; }

/* the report */
.seo-verdict { display: flex; gap: 16px; align-items: center; padding: 18px; }
.seo-verdict .big { width: 58px; height: 58px; border-radius: 14px; display: grid; place-items: center; flex: none; }
.seo-verdict .big.ok { background: #E6F4EC; color: #1E7A4A; } .seo-verdict .big.warn { background: #FFF2DD; color: #9A5B00; }
.seo-verdict .big svg { width: 30px; height: 30px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.seo-verdict h3 { margin: 0; font-size: 17px; }
.seo-verdict p { margin: 3px 0 0; color: #4A5A52; font-size: 13px; }
.seo-verdict .tx { flex: 1; min-width: 0; }
.seo-verdict .who { text-align: right; flex: none; }
.seo-area { display: flex; gap: 12px; align-items: center; padding: 11px 18px; border-bottom: 1px solid #F0EEE6; }
.seo-area:last-child { border-bottom: 0; }
.seo-area .nm { font-weight: 600; min-width: 170px; }
.seo-area .w { flex: 1; font-size: 12.5px; color: #4A5A52; }
.seo-area .pill { flex: none; }
.seo-hist { display: flex; gap: 10px; align-items: center; padding: 10px 18px; border-bottom: 1px solid #F0EEE6; font-size: 13px; }
.seo-hist:last-child { border-bottom: 0; }
.seo-hist.muted { color: #8A978F; }
.seo-hist .grow { flex: 1; }
.seo-dec { padding: 14px 18px; border-bottom: 1px solid #F0EEE6; }
.seo-dec:last-child { border-bottom: 0; }
.seo-dec > b { display: block; }
.seo-dec .s { font-size: 12.5px; color: #4A5A52; margin: 3px 0 10px; }
.seo-dec .ac { display: flex; gap: 6px; flex-wrap: wrap; }
.seo-dec .chosen { margin-top: 8px; }

@media (max-width: 1100px) {
  .seo-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seo-g2, .seo-g21 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  .seo .ptabs .lg { display: none; }
  .seo .ptabs .sh { display: inline; }
  .seo .kpi { padding: 12px 14px; }
  .seo .kpi .v { font-size: 20px; }
  .seo-wait { flex-wrap: wrap; padding: 12px 14px; }
  .seo-wait .grow { display: none; }
  .seo-batch { padding: 14px; }
  .seo-batch .hd { flex-wrap: wrap; }
  .seo-batch .hd > div { flex: 1; min-width: 0; }
  .seo-batch .hd .grow { display: none; }
  .seo .ini-ch .r > .muted { display: none; }
  .seo-area { flex-wrap: wrap; padding: 11px 14px; }
  .seo-area .nm { min-width: 0; width: 100%; }
  .seo-verdict { flex-wrap: wrap; }
  .seo-verdict .who { text-align: left; width: 100%; }
  .seo-hist { flex-wrap: wrap; padding: 10px 14px; }
  .seo-dec { padding: 14px; }
  .seo-drawer, .seo-drawer.wide { width: 100%; }
}