/* ==========================================================================
   Rank Tracker Instamarketing — hoja de estilos única, sin dependencias.
   Tokens heredados de la web principal.
   ========================================================================== */

:root {
    --ink:        #0d1117;
    --ink-soft:   #161c26;
    --ink-line:   #232c39;
    --paper:      #ffffff;
    --paper-warm: #f7f8f6;
    --paper-cool: #eef2ef;
    --text:       #161d26;
    --text-muted: #59636e;
    --text-invert:#f2f5f3;
    --text-invert-muted: #a8b3bd;
    --line:       #e1e6e2;
    --line-strong:#c9d1cb;
    --brand:      #0f9d58;
    --brand-deep: #0a7a43;
    --brand-tint: #e8f6ef;
    --gold:       #e2a83b;
    --gold-deep:  #b3801f;
    --gold-tint:  #fdf4e3;
    --danger:     #c0392b;
    --danger-tint:#fbeae7;
    --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, "Helvetica Neue", Arial, sans-serif;
    --radius: 12px;
    --shadow: 0 1px 2px rgba(13, 17, 23, .05), 0 4px 16px rgba(13, 17, 23, .05);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.55;
    color: var(--text);
    background: var(--paper-warm);
}
a { color: var(--brand-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.5rem; margin: 0; letter-spacing: -.01em; }
h2 { font-size: 1.05rem; margin: 0; }
code {
    background: var(--paper-cool);
    padding: .1em .4em;
    border-radius: 5px;
    font-size: .875em;
    word-break: break-all;
}
code.block {
    display: block;
    padding: .6em .8em;
    margin: .4em 0;
    cursor: copy;
}
code.block.copied { outline: 2px solid var(--brand); }

/* ---------- estructura ---------- */
.shell { display: flex; min-height: 100vh; }
.sidebar {
    width: 225px;
    flex: 0 0 225px;
    background: var(--ink);
    color: var(--text-invert);
    display: flex;
    flex-direction: column;
    padding: 1.4rem 1.1rem;
    gap: 1.6rem;
}
.brand a { color: var(--text-invert); text-decoration: none; display: block; line-height: 1.2; }
.brand-mark { font-weight: 800; font-size: 1.14rem; letter-spacing: -.02em; }
.brand-green { color: var(--brand); }
.brand-sub {
    display: block;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--text-invert-muted);
    margin-top: .2rem;
}
.nav { display: flex; flex-direction: column; gap: .25rem; flex: 1; }
.nav a {
    color: var(--text-invert-muted);
    padding: .5rem .7rem;
    border-radius: 8px;
    font-weight: 600;
}
.nav a:hover { color: var(--text-invert); background: var(--ink-soft); text-decoration: none; }
.nav a.on { color: var(--text-invert); background: var(--ink-soft); box-shadow: inset 3px 0 0 var(--brand); }
.sidebar-foot { font-size: .85rem; color: var(--text-invert-muted); display: flex; flex-direction: column; gap: .3rem; }
.sidebar-foot .who { overflow: hidden; text-overflow: ellipsis; }
.sidebar-foot .logout { color: var(--text-invert-muted); }
.sidebar-foot .logout:hover { color: var(--text-invert); }

.main { flex: 1; min-width: 0; padding: 1.7rem 2rem 3rem; max-width: 1200px; }

/* ---------- cabecera de página ---------- */
.page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.2rem;
}
.page-sub { margin: .3rem 0 0; color: var(--text-muted); font-size: .9rem; }
.page-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.crumbs { margin: 0 0 .3rem; font-size: .85rem; }
.muted { color: var(--text-muted); font-weight: 400; }

/* ---------- avisos ---------- */
.flash {
    padding: .7rem 1rem;
    border-radius: 10px;
    margin-bottom: 1rem;
    border: 1px solid var(--line);
    background: var(--paper);
    font-size: .92rem;
}
.flash-ok    { border-color: #bfe3d0; background: var(--brand-tint); }
.flash-error { border-color: #eec4bd; background: var(--danger-tint); }
.flash-info  { border-color: #f0ddb5; background: var(--gold-tint); }
.flash-float { max-width: 480px; margin: 1rem auto 0; }

/* ---------- tarjetas de estadística ---------- */
.stat-row { display: flex; gap: .8rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.stat {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .7rem 1.1rem;
    min-width: 118px;
    box-shadow: var(--shadow);
}
.stat-n { display: block; font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; }
.stat-n.stat-sm { font-size: 1.02rem; padding-top: .35rem; }
.stat-l { display: block; font-size: .74rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .07em; }

/* ---------- tarjetas de proyecto ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.1rem 1.2rem;
    box-shadow: var(--shadow);
}
.card-link { display: block; color: inherit; }
.card-link:hover { text-decoration: none; border-color: var(--brand); }
.card-off { opacity: .6; }
.card-top { display: flex; justify-content: space-between; gap: .6rem; align-items: baseline; }
.card-domain { margin: .15rem 0 0; color: var(--text-muted); font-size: .88rem; }
.card-client { margin: .1rem 0 0; font-size: .85rem; color: var(--text-muted); }
.card-stats { display: flex; gap: 1.2rem; margin: .9rem 0 .6rem; }
.card-stats .n { display: block; font-weight: 800; font-size: 1.15rem; }
.card-stats .l { display: block; font-size: .72rem; color: var(--text-muted); }
.card-foot { display: flex; justify-content: space-between; align-items: center; gap: .6rem; font-size: .82rem; flex-wrap: wrap; }
.card-updated { color: var(--text-muted); }

/* ---------- paneles ---------- */
.panel {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.1rem 1.3rem 1.3rem;
    margin-bottom: 1.2rem;
    box-shadow: var(--shadow);
}
.panel-danger { border-color: #eec4bd; }
.panel-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: .8rem;
}
.panel-head .muted { font-size: .84rem; }
.sep { border: 0; border-top: 1px solid var(--line); margin: 1.1rem 0; }
.empty {
    background: var(--paper);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius);
    padding: 2.2rem;
    text-align: center;
    color: var(--text-muted);
}

/* ---------- tablas ---------- */
.table-wrap { overflow-x: auto; }
.table-tall { max-height: 420px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; }
.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th {
    text-align: left;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
    font-weight: 700;
    padding: .5rem .7rem;
    border-bottom: 1px solid var(--line-strong);
    white-space: nowrap;
    background: var(--paper);
}
.table-tall th { position: sticky; top: 0; }
.table td { padding: .55rem .7rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tbody tr:hover { background: var(--paper-warm); }
.table .num { text-align: right; white-space: nowrap; }
.table th.num { text-align: right; }
.url-cell { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .84rem; }
.actions { white-space: nowrap; text-align: right; }
.actions .inline-form { display: inline-block; margin-left: .25rem; }
.row-edit td { background: var(--paper-cool); }
.form-inline-edit { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.form-inline-edit input { flex: 1; min-width: 160px; }
.table-filter {
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    padding: .35rem .7rem;
    font: inherit;
    font-size: .88rem;
    min-width: 180px;
}

/* ---------- badges ---------- */
.pos {
    display: inline-block;
    min-width: 2.1em;
    text-align: center;
    padding: .12em .45em;
    border-radius: 7px;
    font-weight: 700;
    font-size: .88rem;
}
.pos-top3  { background: var(--gold-tint); color: var(--gold-deep); }
.pos-top10 { background: var(--brand-tint); color: var(--brand-deep); }
.pos-top20 { background: var(--paper-cool); color: var(--text); }
.pos-rest  { background: var(--paper-cool); color: var(--text-muted); }
.pos-none  { background: var(--paper-cool); color: var(--text-muted); font-weight: 500; }
.delta { font-weight: 700; font-size: .85rem; white-space: nowrap; }
.delta-up   { color: var(--brand-deep); }
.delta-down { color: var(--danger); }
.delta-flat { color: var(--text-muted); font-weight: 500; }
.tag {
    display: inline-block;
    font-size: .74rem;
    font-weight: 700;
    padding: .1em .55em;
    border-radius: 99px;
}
.tag-ok    { background: var(--brand-tint); color: var(--brand-deep); }
.tag-muted { background: var(--paper-cool); color: var(--text-muted); }

/* ---------- formularios ---------- */
label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: .2rem; }
label input, label select, label textarea {
    display: block;
    width: 100%;
    margin-top: .3rem;
    font: inherit;
    padding: .5rem .7rem;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--paper);
    color: var(--text);
}
label textarea { resize: vertical; }
label input:focus, label select:focus, label textarea:focus {
    outline: 2px solid var(--brand);
    outline-offset: 0;
    border-color: var(--brand);
}
label.check { display: flex; align-items: center; gap: .5rem; font-weight: 600; }
label.check input { width: auto; margin: 0; }
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: .9rem 1.1rem;
    align-items: start;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-actions { grid-column: 1 / -1; display: flex; gap: .6rem; align-items: center; margin-top: .2rem; }
.inline-form { display: inline-flex; gap: .6rem; align-items: center; margin: 0; flex-wrap: wrap; }

/* buscador de ubicaciones */
.loc-hint { display: block; font-size: .78rem; margin-top: .25rem; }
.loc-results {
    position: relative;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    margin-top: .3rem;
    background: var(--paper);
    box-shadow: var(--shadow);
    max-height: 220px;
    overflow-y: auto;
}
.loc-results button {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--line);
    padding: .45rem .7rem;
    font: inherit;
    font-size: .88rem;
    cursor: pointer;
}
.loc-results button:last-child { border-bottom: 0; }
.loc-results button:hover { background: var(--brand-tint); }
.loc-results .loc-type { color: var(--text-muted); font-size: .78rem; }

/* ---------- botones ---------- */
.btn {
    display: inline-block;
    font: inherit;
    font-weight: 700;
    font-size: .88rem;
    color: var(--text);
    background: var(--paper);
    border: 1px solid var(--line-strong);
    border-radius: 9px;
    padding: .48rem .95rem;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.3;
}
.btn:hover { border-color: var(--brand); color: var(--brand-deep); text-decoration: none; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; }
.btn-danger { color: var(--danger); border-color: #e3b6af; }
.btn-danger:hover { background: var(--danger-tint); border-color: var(--danger); color: var(--danger); }
.btn-sm { padding: .25rem .6rem; font-size: .8rem; }
.btn-block { width: 100%; margin-top: .5rem; }

/* ---------- gráficas ---------- */
.chart { position: relative; }
.chart svg { display: block; width: 100%; height: auto; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .tick { fill: var(--text-muted); font-size: 10.5px; font-family: var(--font-sans); }
.chart .tick-y { text-anchor: end; }
.chart .tick-x { text-anchor: middle; }
.chart .serie { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .pt { fill: var(--brand); opacity: 0; }
.chart .pt.lit { opacity: 1; }
.chart .pt-null { fill: var(--text-muted); }
.chart .xhair { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 3; }
.chart-empty {
    color: var(--text-muted);
    padding: 2rem;
    text-align: center;
    border: 1px dashed var(--line-strong);
    border-radius: 8px;
}
.chart-tip {
    position: absolute;
    pointer-events: none;
    background: var(--ink);
    color: var(--text-invert);
    font-size: .8rem;
    padding: .3rem .6rem;
    border-radius: 7px;
    white-space: nowrap;
    transform: translate(-50%, -130%);
    z-index: 5;
}
.spark { width: 110px; height: 30px; }
.spark polyline { fill: none; stroke: var(--brand); stroke-width: 1.6; }
.spark circle { fill: var(--brand); }
.spark-empty { color: var(--text-muted); }

/* ---------- login / instalador ---------- */
body.bare { background: var(--ink); min-height: 100vh; }
.auth-wrap { display: flex; align-items: center; justify-content: center; min-height: 92vh; padding: 1.5rem; }
.auth-card {
    background: var(--paper);
    border-radius: 16px;
    padding: 2rem 2.2rem;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
}
.auth-card-wide { max-width: 640px; }
.auth-card h2 { margin: 1.2rem 0 .6rem; font-size: .95rem; }
.auth-brand { text-align: center; margin-bottom: 1.4rem; }
.auth-brand .brand-mark { font-size: 1.5rem; color: var(--ink); }
.auth-brand .brand-green { color: var(--brand); }
.auth-sub { display: block; color: var(--text-muted); font-size: .85rem; margin-top: .25rem; }
.auth-card label { margin-bottom: .8rem; }
.auth-foot { text-align: center; font-size: .82rem; color: var(--text-muted); margin: 1.2rem 0 0; }

/* ---------- cron ---------- */
.cron-list { padding-left: 1.2rem; }
.cron-list li { margin-bottom: .9rem; }

/* ---------- responsive ---------- */
@media (max-width: 880px) {
    .shell { flex-direction: column; }
    .sidebar {
        width: auto;
        flex: none;
        flex-direction: row;
        align-items: center;
        padding: .7rem 1rem;
        gap: 1rem;
    }
    .brand-sub { display: none; }
    .nav { flex-direction: row; gap: .15rem; flex-wrap: wrap; }
    .nav a { padding: .35rem .6rem; font-size: .85rem; }
    .nav a.on { box-shadow: inset 0 -2px 0 var(--brand); }
    .sidebar-foot { flex-direction: row; margin-left: auto; gap: .8rem; }
    .main { padding: 1.1rem 1rem 2.5rem; }
    .form-row { grid-template-columns: 1fr; }
    .page-head { flex-direction: column; }
}