/* ============================================================
   Cayman Hosting · Herramientas
   Identidad: "consola de operaciones de red".
   Verde mangle profundo (pino) + verde follaje (marca lima),
   datos en monoespaciada. Tipos: Space Grotesk / IBM Plex.
   ============================================================ */

:root {
    /* Superficies y texto */
    --paper:        #EDF1EA;
    --surface:      #FFFFFF;
    --surface-2:    #F5F8F2;
    --ink:          #14211C;
    --ink-soft:     #3C4A42;
    --muted:        #6E7C71;
    --line:         #DBE3D7;
    --line-strong:  #C5D0C0;

    /* Marca y pino (la apuesta cromática) */
    --brand:        #8FC646;   /* verde follaje oficial Cayman */
    --brand-deep:   #6E9E2C;   /* texto verde sobre fondo claro */
    --brand-press:  #7DB838;   /* hover de botones lima */
    --brand-soft:   #EAF4DB;
    --pine:         #0E332C;   /* mangle profundo: consola + mapa */
    --pine-2:       #12453B;
    --pine-line:    #214d43;
    --sage:         #7FA08F;   /* puntos del mapa */

    /* Señales */
    --ok:    #43A24B;
    --ok-glow: #6fe07a;
    --warn:  #C98718;
    --err:   #D2503F;
    --info:  #2E7D9A;

    /* Tipografía */
    --display: "Space Grotesk", system-ui, sans-serif;
    --sans:    "IBM Plex Sans", system-ui, sans-serif;
    --mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

    --radius:   14px;
    --radius-s: 9px;
    --shadow:   0 1px 2px rgba(20,33,28,.05), 0 8px 24px -16px rgba(20,33,28,.25);
    --shadow-pine: 0 18px 50px -24px rgba(14,51,44,.55);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--sans);
    color: var(--ink);
    background:
        radial-gradient(1200px 600px at 80% -10%, #E3EEDA 0%, transparent 60%),
        var(--paper);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

code, .mono { font-family: var(--mono); }

::selection { background: var(--brand-soft); color: var(--pine); }

/* ---------- Barra superior ---------- */
.topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 14px clamp(16px, 4vw, 40px);
    background: rgba(237, 241, 234, .82);
    backdrop-filter: saturate(140%) blur(12px);
    border-bottom: 1px solid var(--line);
}

.brand {
    display: flex;
    align-items: center;
    gap: 11px;
    font-family: var(--display);
    font-weight: 600;
    letter-spacing: -.01em;
}
.brand .logo-full { height: 30px; width: auto; flex: none; display: block; }
.brand .name { font-size: 17px; color: var(--ink); }
.brand .name b { color: var(--brand-deep); font-weight: 700; }
.brand .sub {
    font-family: var(--sans);
    font-weight: 500;
    font-size: 12px;
    color: var(--muted);
    padding-left: 11px;
    margin-left: 3px;
    border-left: 1px solid var(--line-strong);
}

.ipchip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--ink-soft);
    background: var(--surface);
    border: 1px solid var(--line);
    padding: 7px 12px;
    border-radius: 999px;
    box-shadow: var(--shadow);
}
.ipchip .pulse {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--ok);
    box-shadow: 0 0 0 0 rgba(67,162,75,.5);
    animation: pulse 2.4s infinite;
}
.ipchip code { color: var(--pine); font-weight: 500; }
@keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgba(67,162,75,.45); }
    70%  { box-shadow: 0 0 0 7px rgba(67,162,75,0); }
    100% { box-shadow: 0 0 0 0 rgba(67,162,75,0); }
}

/* ---------- Contenedor ---------- */
.wrap {
    max-width: 1080px;
    margin: 0 auto;
    padding: clamp(22px, 4vw, 44px) clamp(16px, 4vw, 40px) 80px;
}

/* ---------- Consola HERO (IP) ---------- */
.console {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    background:
        radial-gradient(120% 140% at 92% 0%, var(--pine-2) 0%, var(--pine) 55%);
    color: #EAF3EC;
    padding: clamp(22px, 4vw, 34px) clamp(22px, 4vw, 38px);
    box-shadow: var(--shadow-pine);
    border: 1px solid var(--pine-line);
}
/* trama sutil de "scan" en el fondo de la consola */
.console::after {
    content: "";
    position: absolute; inset: 0;
    background-image: repeating-linear-gradient(
        to bottom, rgba(255,255,255,.025) 0 1px, transparent 1px 4px);
    pointer-events: none;
    mix-blend-mode: overlay;
}
.console > * { position: relative; z-index: 1; }

.console-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.eyebrow {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: #9FC3AE;
    font-weight: 600;
}
.live {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 11.5px; letter-spacing: .04em; color: #9FC3AE;
}
.live i {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--ok-glow);
    box-shadow: 0 0 8px 1px var(--ok-glow);
    animation: pulse 2.2s infinite;
}

.console-ip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}
.bigip {
    font-family: var(--mono);
    font-size: clamp(28px, 6vw, 46px);
    font-weight: 500;
    letter-spacing: -.01em;
    color: #FFFFFF;
    line-height: 1.05;
    word-break: break-all;
}
.ipver {
    font-size: 11px; font-weight: 600; letter-spacing: .08em;
    color: #Bfe39d;
    border: 1px solid rgba(143,198,70,.45);
    background: rgba(143,198,70,.18);
    padding: 3px 8px; border-radius: 6px;
}

.console-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--pine-line);
}
.console-meta .item { font-size: 13px; min-width: 0; }
.console-meta .k {
    display: block; font-size: 10.5px; text-transform: uppercase;
    letter-spacing: .12em; color: #80a591; margin-bottom: 3px;
}
.console-meta .v { color: #D7E7DC; font-family: var(--mono); font-size: 13px; word-break: break-all; }

/* botón copiar (sobre pino) */
.copy {
    font-family: var(--sans);
    font-size: 12.5px; font-weight: 600;
    color: var(--pine);
    background: var(--brand);
    border: none;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: transform .08s ease, background .15s ease;
}
.copy:hover { background: var(--brand-press); }
.copy:active { transform: translateY(1px); }
.copy.copied { background: #BFE39D; }

/* ---------- Bloques / secciones ---------- */
.block { margin-top: clamp(34px, 5vw, 52px); }
.block-label {
    display: flex;
    align-items: center;
    gap: 11px;
    font-family: var(--display);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .02em;
    color: var(--ink);
    margin-bottom: 16px;
    text-transform: uppercase;
}
.block-label .tick {
    width: 9px; height: 9px; border-radius: 2px;
    background: var(--brand);
    box-shadow: 0 0 0 4px var(--brand-soft);
}
.block-label .hint {
    font-family: var(--sans); font-weight: 400; text-transform: none;
    font-size: 12.5px; color: var(--muted); letter-spacing: 0;
    margin-left: auto;
}

/* ---------- Panel con pestañas ---------- */
.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.tabs {
    display: flex;
    gap: 2px;
    padding: 6px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
}
.tab {
    flex: 1;
    font-family: var(--sans);
    font-weight: 600;
    font-size: 13.5px;
    color: var(--ink-soft);
    background: transparent;
    border: none;
    padding: 10px 12px;
    border-radius: var(--radius-s);
    cursor: pointer;
    transition: background .14s ease, color .14s ease;
    white-space: nowrap;
}
.tab:hover { color: var(--ink); background: rgba(143,198,70,.10); }
.tab.is-active {
    background: var(--surface);
    color: var(--pine);
    box-shadow: 0 1px 0 var(--brand) inset, var(--shadow);
}

/* barra de consulta */
.query {
    display: flex;
    gap: 10px;
    padding: clamp(16px, 3vw, 22px);
    flex-wrap: wrap;
}
.field {
    flex: 1 1 240px;
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    padding: 0 12px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.field:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
    background: var(--surface);
}
.field svg { flex: none; color: var(--muted); }
.field input {
    flex: 1; min-width: 0;
    font-family: var(--mono);
    font-size: 14.5px;
    color: var(--ink);
    border: none;
    background: transparent;
    padding: 12px 0;
    outline: none;
}
.field input::placeholder { color: #9aa89d; font-family: var(--mono); }

.select-type {
    position: relative;
    flex: 0 0 auto;
}
.select-type select {
    appearance: none;
    font-family: var(--mono);
    font-size: 14px; font-weight: 500;
    color: var(--ink);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    padding: 12px 36px 12px 14px;
    cursor: pointer;
    outline: none;
    height: 100%;
}
.select-type select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.select-type::after {
    content: "";
    position: absolute; right: 14px; top: 50%;
    width: 7px; height: 7px;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}
.select-type.hidden { display: none; }

.btn-go {
    flex: 0 0 auto;
    font-family: var(--sans);
    font-weight: 600;
    font-size: 14px;
    color: var(--pine);
    background: var(--brand);
    border: none;
    border-radius: var(--radius-s);
    padding: 12px 22px;
    cursor: pointer;
    transition: background .15s ease, transform .08s ease;
}
.btn-go:hover { background: var(--brand-press); }
.btn-go:active { transform: translateY(1px); }
.btn-go:disabled { opacity: .6; cursor: progress; }

/* ---------- Área de resultados ---------- */
.results { padding: 0 clamp(16px, 3vw, 22px) clamp(16px, 3vw, 22px); }
.results:empty { display: none; }

.placeholder {
    color: var(--muted);
    font-size: 13.5px;
    padding: 8px 2px 18px;
}

.result-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: var(--muted);
    padding: 4px 2px 14px;
    border-bottom: 1px dashed var(--line);
    margin-bottom: 14px;
}
.result-bar b { color: var(--ink); font-weight: 600; }
.result-bar .pill {
    font-family: var(--mono); font-size: 11.5px;
    background: var(--surface-2); border: 1px solid var(--line);
    color: var(--ink-soft);
    padding: 2px 8px; border-radius: 999px;
}

/* tabla de registros DNS */
.rec {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    margin-bottom: 7px;
    background: var(--surface);
    animation: rise .28s ease both;
}
.rec .type {
    font-family: var(--mono); font-size: 12px; font-weight: 600;
    color: var(--pine);
    background: var(--brand-soft);
    text-align: center;
    padding: 4px 0; border-radius: 6px;
}
.rec .val {
    font-family: var(--mono); font-size: 13.5px; color: var(--ink);
    word-break: break-all;
}
.rec .val .pref { color: var(--warn); margin-right: 8px; font-weight: 600; }
.rec .ttl { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.rec .mini-copy {
    border: 1px solid var(--line); background: var(--surface-2);
    color: var(--muted); font-size: 11px; cursor: pointer;
    padding: 4px 8px; border-radius: 6px;
}
.rec .mini-copy:hover { color: var(--pine); border-color: var(--brand); }

@keyframes rise { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* ---------- WHOIS ---------- */
.whois-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}
.whois-grid .cell {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    padding: 11px 13px;
}
.whois-grid .cell .k {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em;
    color: var(--muted); margin-bottom: 5px;
}
.whois-grid .cell .v {
    font-family: var(--mono); font-size: 13px; color: var(--ink);
    word-break: break-word;
}
.status-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.chip {
    font-family: var(--mono); font-size: 11.5px;
    color: var(--ink-soft);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    padding: 4px 10px; border-radius: 999px;
}
.chip.ns { color: var(--pine); border-color: #cfe0bf; background: var(--surface); }

.raw-toggle {
    font-family: var(--sans); font-size: 12.5px; font-weight: 600;
    color: var(--brand-deep);
    background: none; border: none; cursor: pointer;
    padding: 6px 0; display: inline-flex; align-items: center; gap: 6px;
}
.raw-toggle:hover { text-decoration: underline; }
.raw-panel {
    margin-top: 10px;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
}
.raw-panel.open { max-height: 520px; overflow: auto; }
.raw-panel pre {
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.55;
    color: var(--ink-soft);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    padding: 14px 16px;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ---------- Propagación: mapa + lista ---------- */
.prop-map {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    background: radial-gradient(120% 130% at 50% -10%, var(--pine-2), var(--pine) 70%);
    border: 1px solid var(--pine-line);
    margin-bottom: 16px;
    aspect-ratio: 1000 / 460;
}
.prop-map svg { display: block; width: 100%; height: 100%; }
.prop-map .dot { fill: var(--sage); opacity: .28; }
.prop-map .pin-base { fill: rgba(255,255,255,.22); }
.prop-map .ping {
    fill: none; stroke-width: 2; opacity: 0;
}
.prop-map .pin {
    transition: fill .25s ease, r .25s ease;
}
.prop-map .pin.pending { fill: #9FC3AE; }
.prop-map .pin.ok      { fill: var(--ok-glow); filter: drop-shadow(0 0 4px var(--ok-glow)); }
.prop-map .pin.diff    { fill: #FFC24B; filter: drop-shadow(0 0 4px #FFC24B); }
.prop-map .pin.err     { fill: #F0785F; }
@keyframes ping {
    0%   { opacity: .9; r: 3; }
    100% { opacity: 0; r: 16; }
}
.prop-legend {
    position: absolute; left: 14px; bottom: 12px;
    display: flex; gap: 14px; flex-wrap: wrap;
    font-size: 11px; color: #BFD3C6;
}
.prop-legend span { display: inline-flex; align-items: center; gap: 6px; }
.prop-legend i { width: 8px; height: 8px; border-radius: 50%; }
.prop-legend i.ok { background: var(--ok-glow); }
.prop-legend i.diff { background: #FFC24B; }
.prop-legend i.err { background: #F0785F; }

.prop-list { display: grid; gap: 7px; }
.node {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 13px;
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    background: var(--surface);
    animation: rise .26s ease both;
}
.node .flag {
    width: 22px; height: 16px; border-radius: 3px;
    overflow: hidden; background: var(--surface-2);
    font-size: 11px; display: flex; align-items: center; justify-content: center;
    color: var(--muted); border: 1px solid var(--line);
}
.node .who { min-width: 0; }
.node .who .name { font-weight: 600; font-size: 13.5px; color: var(--ink); }
.node .who .loc { font-size: 11.5px; color: var(--muted); }
.node .who .vals {
    font-family: var(--mono); font-size: 12.5px; color: var(--ink-soft);
    margin-top: 3px; word-break: break-all;
}
.node .who .vals .anycast { color: var(--info); font-size: 10.5px; margin-left: 6px; }
.node .end { display: flex; align-items: center; gap: 10px; }
.node .ms { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.node .badge {
    width: 22px; height: 22px; border-radius: 50%;
    display: grid; place-items: center;
    flex: none;
}
.node .badge svg { width: 13px; height: 13px; }
.node.ok   .badge { background: var(--brand-soft); color: var(--ok); }
.node.diff .badge { background: #FCEFD4; color: var(--warn); }
.node.err  .badge { background: #FBE3DE; color: var(--err); }
.node.pending .badge { background: var(--surface-2); }
.node.pending .badge .spin {
    width: 13px; height: 13px; border: 2px solid var(--line-strong);
    border-top-color: var(--brand); border-radius: 50%;
    animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Tarjetas de utilidades ---------- */
.grid2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
}
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: clamp(18px, 3vw, 24px);
}
.card h3 {
    font-family: var(--display); font-weight: 600; font-size: 16px;
    margin: 0 0 4px; color: var(--ink);
}
.card .desc { font-size: 12.5px; color: var(--muted); margin: 0 0 18px; }

/* generador de contraseñas */
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin-bottom: 18px; }
.opt { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: 13.5px; color: var(--ink-soft); user-select: none; }
.opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.opt .box {
    width: 18px; height: 18px; border-radius: 5px;
    border: 1.5px solid var(--line-strong);
    display: grid; place-items: center;
    transition: background .14s ease, border-color .14s ease;
    flex: none;
}
.opt .box svg { width: 11px; height: 11px; color: var(--pine); opacity: 0; transform: scale(.6); transition: .14s ease; }
.opt input:checked + .box { background: var(--brand); border-color: var(--brand); }
.opt input:checked + .box svg { opacity: 1; transform: none; }
.opt input:focus-visible + .box { box-shadow: 0 0 0 3px var(--brand-soft); }

.len-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.len-row .lab { font-size: 13px; color: var(--ink-soft); }
.len-row .num {
    font-family: var(--mono); font-weight: 600; font-size: 15px; color: var(--pine);
    background: var(--brand-soft); padding: 2px 10px; border-radius: 7px;
}
input[type=range].slider {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 6px; border-radius: 999px;
    background: var(--line); outline: none; margin: 4px 0 20px;
}
input[type=range].slider::-webkit-slider-thumb {
    -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
    background: var(--brand); cursor: pointer; border: 3px solid #fff;
    box-shadow: 0 1px 4px rgba(20,33,28,.25);
}
input[type=range].slider::-moz-range-thumb {
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--brand); cursor: pointer; border: 3px solid #fff;
}

.pw-out {
    display: flex; align-items: center; gap: 10px;
    background: var(--pine);
    border-radius: var(--radius-s);
    padding: 14px 16px;
    margin-bottom: 14px;
    min-height: 52px;
}
.pw-out code {
    flex: 1; color: #EAF3EC; font-size: 15px; word-break: break-all; min-width: 0;
}
.pw-out code.empty { color: #6f8a7c; }
.pw-out .ico-btn {
    flex: none; width: 32px; height: 32px; border-radius: 7px;
    border: 1px solid var(--pine-line); background: var(--pine-2);
    color: #BFE39d; cursor: pointer; display: grid; place-items: center;
    transition: background .14s ease;
}
.pw-out .ico-btn:hover { background: #1b5a4d; color: #fff; }
.pw-out .ico-btn svg { width: 15px; height: 15px; }

.strength { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.strength .bars { display: flex; gap: 4px; flex: 1; }
.strength .bars i {
    flex: 1; height: 5px; border-radius: 999px; background: var(--line);
    transition: background .2s ease;
}
.strength .lab { font-size: 12px; font-weight: 600; color: var(--muted); min-width: 52px; text-align: right; }

.btn-block {
    width: 100%;
    font-family: var(--sans); font-weight: 600; font-size: 14px;
    color: var(--pine); background: var(--brand); border: none;
    border-radius: var(--radius-s); padding: 13px; cursor: pointer;
    transition: background .15s ease, transform .08s ease;
}
.btn-block:hover { background: var(--brand-press); }
.btn-block:active { transform: translateY(1px); }

/* ptr card */
.inline-form { display: flex; gap: 10px; flex-wrap: wrap; }
.inline-form .field { flex: 1 1 180px; }
.ptr-out {
    margin-top: 16px; padding: 14px 16px;
    background: var(--surface-2); border: 1px solid var(--line);
    border-radius: var(--radius-s); font-size: 13.5px;
}
.ptr-out.hidden { display: none; }
.ptr-out .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.ptr-out .v { font-family: var(--mono); font-size: 14px; color: var(--ink); margin-top: 4px; word-break: break-all; }
.ptr-out .v.none { color: var(--muted); }

/* alertas de error */
.err-msg {
    display: flex; align-items: center; gap: 10px;
    background: #FBE9E5; border: 1px solid #F1C5BC;
    color: #8f3022; font-size: 13px;
    border-radius: var(--radius-s); padding: 11px 14px; margin-top: 6px;
}
.err-msg svg { flex: none; }

/* ---------- Footer ---------- */
.foot {
    max-width: 1080px; margin: 0 auto;
    padding: 26px clamp(16px, 4vw, 40px) 50px;
    border-top: 1px solid var(--line);
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    flex-wrap: wrap;
    font-size: 12px; color: var(--muted);
}
.foot .brand-mini { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 600; color: var(--ink-soft); }
.foot .brand-mini svg, .foot .brand-mini .emblem { width: 18px; height: 18px; display: block; }

/* ---------- Util ---------- */
.spinner-inline {
    display: inline-block; width: 14px; height: 14px;
    border: 2px solid var(--line-strong); border-top-color: var(--brand);
    border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -2px;
}
.hidden { display: none !important; }

/* ---------- Responsive ---------- */
@media (max-width: 560px) {
    /* Encabezado: más compacto y sin desbordes */
    .topbar { padding: 12px 16px; gap: 10px 12px; }
    .brand { gap: 9px; }
    .brand .sub { display: none; }
    .ipchip { font-size: 11.5px; padding: 6px 10px; max-width: 100%; }
    .ipchip code { word-break: break-all; }

    /* Barra de consulta: el campo ocupa toda la fila; tipo + botón debajo */
    .query { gap: 8px; }
    .query .field { flex: 1 1 100%; }
    .query .select-type { flex: 1 1 auto; }
    .query .select-type select { width: 100%; }
    .query .btn-go { flex: 1 1 auto; }

    .opts { grid-template-columns: 1fr; }
    .rec { grid-template-columns: 56px 1fr; }
    .rec .ttl, .rec .mini-copy { grid-column: 2; justify-self: start; }
    .tab { font-size: 12.5px; padding: 9px 6px; }
    .node { grid-template-columns: 20px 1fr auto; }
}

/* Pantallas muy angostas (teléfonos chicos) */
@media (max-width: 400px) {
    .brand .logo-full { height: 26px; }
    .topnav-item { padding: 4px 7px; font-size: 12px; }
    .tab { font-size: 11.5px; padding: 8px 4px; }
    .wrap { padding-left: 14px; padding-right: 14px; }
    .console-meta { gap: 10px 18px; }
    .foot { gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .01ms !important; }
}

/* ---------- Menú de navegación (Herramientas / Monitoreo) ---------- */
.topnav {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--sans);
    font-weight: 500;
    font-size: 12.5px;
    padding-left: 11px;
    margin-left: 3px;
    border-left: 1px solid var(--line-strong);
}
.topnav-item {
    color: var(--muted);
    text-decoration: none;
    padding: 4px 10px;
    border-radius: 999px;
    transition: color .15s ease, background .15s ease;
}
.topnav-item:hover { color: var(--ink); background: var(--surface-2); }
.topnav-item.is-active { color: var(--pine); background: var(--brand-soft); }

@media (max-width: 560px) {
    .topnav { border-left: none; padding-left: 0; margin-left: 0; }
    .topnav-item.is-active { display: none; }   /* en móvil basta el enlace a Monitoreo */
    .topnav-item { padding: 4px 8px; }
}