/* =========================================================
   CALCULADORA DE REDE — ferramentas/calculadora-rede.html
   JS: js/calculadora-rede.js
   Só o painel externo usa desfoque; o que está dentro dele é
   apenas translúcido (desfoque dentro de desfoque não funciona).
   ========================================================= */

.rc-page { padding-top: 6.5rem; }
/* é uma ferramenta: abertura compacta, para o painel aparecer sem precisar rolar */
.rc-page .ss-hero { padding: 1rem 0 1.75rem; }
.rc-page .ss-hero h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); margin: .25rem 0 .75rem; }
.rc-page .ss-hero h1 .ss-line { display: inline-block; vertical-align: top; }
.rc-page .ss-intro { max-width: 680px; }
#rc-app { min-height: 760px; }   /* reserva o espaço: o conteúdo é montado pelo JS */

.rc-painel {
  border-radius: 1.6rem; padding: 2rem;
  background: var(--glass-tint); border: 1px solid var(--glass-line);
  box-shadow: var(--glass-shine), var(--glass-shadow);
  -webkit-backdrop-filter: blur(26px) saturate(170%); backdrop-filter: blur(26px) saturate(170%);
}
html.perf-low .rc-painel { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--glass-solid); }

/* ---------- abas ---------- */
.rc-abas { display: inline-flex; flex-wrap: wrap; gap: .25rem; padding: .25rem; margin-bottom: 1.75rem; border-radius: 980px; background: color-mix(in srgb, var(--gray) 12%, transparent); }
.rc-abas button { padding: .5rem 1.05rem; border: 0; border-radius: 980px; background: none; color: var(--gray); font: inherit; font-size: .92rem; font-weight: 500; letter-spacing: -.01em; cursor: pointer; transition: color .2s, background .2s; }
.rc-abas button:hover { color: var(--cream); }
.rc-abas button[aria-selected="true"] { background: var(--accent); color: #111; }
body.light-theme .rc-abas button[aria-selected="true"] { color: #fff; }

/* ---------- campos ---------- */
.rc-campos { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.25rem; align-items: end; }
.rc-campo { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.rc-campo label, .rc-inline { font-size: .88rem; font-weight: 500; letter-spacing: -.005em; color: var(--gray); }
.rc-campo label b { color: var(--accent); font-weight: 600; }
.rc-campo input:not([type="range"]), .rc-campo select, .rc-inline select {
  width: 100%; min-width: 0; padding: .65rem .85rem; border-radius: .8rem; font: inherit; font-size: 1rem; color: var(--cream);
  background: color-mix(in srgb, var(--gray) 12%, transparent); border: 1px solid var(--glass-line);
}
.rc-campo select option, .rc-inline select option { background: var(--card-bg); color: var(--cream); }
.rc-entrada { font-family: var(--mono) !important; font-size: 1.15rem !important; }
.rc-page input:focus-visible, .rc-page select:focus-visible, .rc-page button:focus-visible, .rc-tabela-rolagem:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rc-page input[aria-invalid="true"] { border-color: #e5604f; }
.rc-campo input[type="range"] { width: 100%; height: 2.6rem; margin: 0; accent-color: var(--accent); cursor: pointer; }

.rc-exemplos { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-top: .9rem; font-size: .85rem; color: var(--gray); }
.rc-exemplos button { padding: .3rem .75rem; border: 1px solid var(--glass-line); border-radius: 980px; background: none; color: var(--cream); font: inherit; cursor: pointer; transition: transform 160ms var(--ease-out), background .2s; }
.rc-exemplos button:hover { background: color-mix(in srgb, var(--gray) 16%, transparent); }

/* ---------- resultado ---------- */
.rc-resumo, .rc-erro, .rc-aviso { margin-top: 1.5rem; font-size: 1.15rem; line-height: 1.4; letter-spacing: -.015em; }
.rc-resumo b { color: var(--accent); font-weight: 600; }
.rc-erro { padding: .85rem 1.1rem; border-radius: .9rem; font-size: 1rem; background: rgba(229, 96, 79, .13); border: 1px solid rgba(229, 96, 79, .35); }
.rc-erro b { font-weight: 600; }
.rc-aviso { margin-top: .75rem; padding: .7rem 1rem; border-radius: .8rem; font-size: .92rem; color: var(--cream); background: color-mix(in srgb, var(--accent) 12%, transparent); }

.rc-dados { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .6rem; margin: 1.25rem 0 0; }
.rc-dados > div { min-width: 0; padding: .8rem 1rem; border-radius: .95rem; background: color-mix(in srgb, var(--gray) 10%, transparent); }
.rc-dados .is-destaque { background: color-mix(in srgb, var(--accent) 15%, transparent); }
.rc-dados .is-largo { grid-column: 1 / -1; }
.rc-dados dt { font-size: .8rem; color: var(--gray); margin-bottom: .2rem; }
.rc-dados dd { margin: 0; font-size: 1.08rem; font-weight: 500; letter-spacing: -.01em; overflow-wrap: anywhere; }

.rc-acoes { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.rc-botao { padding: .55rem 1rem; border: 1px solid var(--glass-line); border-radius: 980px; background: color-mix(in srgb, var(--gray) 10%, transparent); color: var(--cream); font: inherit; font-size: .88rem; font-weight: 500; cursor: pointer; transition: transform 160ms var(--ease-out), background .2s; }
.rc-botao:hover:not(:disabled) { background: color-mix(in srgb, var(--gray) 22%, transparent); }
.rc-botao:disabled { opacity: .5; cursor: not-allowed; }
.rc-botao:active:not(:disabled), .rc-exemplos button:active, .rc-usar:active { transform: scale(.97); }

/* ---------- blocos ---------- */
.rc-bloco { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--glass-line); }
.rc-bloco h3 { font-size: 1.2rem; font-weight: 600; letter-spacing: -.02em; }
.rc-bloco-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.rc-inline { display: inline-flex; align-items: center; gap: .5rem; }
.rc-inline select { width: auto; padding: .4rem .7rem; font-size: .95rem; }
.rc-nota { margin-top: .6rem; font-size: .88rem; line-height: 1.45; color: var(--gray); }

/* bits: rede na cor de destaque, host na segunda cor */
.rc-page { --rc-host: #5fe0d8; }
body.light-theme .rc-page { --rc-host: #a35406; }
.rc-bits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; margin-top: .9rem; font-family: var(--mono); }
.rc-octeto { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2px; }
.rc-octeto i { display: grid; place-items: center; aspect-ratio: 1 / 1.25; border-radius: .25rem; font-style: normal; font-size: clamp(.68rem, 1.1vw, .92rem); }
.rc-octeto .n { color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, transparent); }
.rc-octeto .h { color: var(--rc-host); background: color-mix(in srgb, var(--rc-host) 13%, transparent); }
.rc-legenda { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: .75rem; font-size: .88rem; }
.rc-legenda .n { color: var(--accent); }
.rc-legenda .h { color: var(--rc-host); }

/* ---------- planejador ---------- */
#rc-linhas { display: flex; flex-direction: column; gap: .6rem; margin: 1.25rem 0 .9rem; }
.rc-linha { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, .8fr) minmax(0, 1fr) 2.6rem; gap: .6rem; align-items: end; }
.rc-linha + .rc-linha label { display: none; }
.rc-remover { height: 2.75rem; border: 0; border-radius: .8rem; background: none; color: var(--gray); font-size: 1.3rem; line-height: 1; cursor: pointer; transition: color .2s, background .2s; }
.rc-remover:hover { color: #e5604f; background: rgba(229, 96, 79, .12); }

.rc-uso { display: flex; gap: 2px; height: .7rem; margin-top: 1rem; overflow: hidden; border-radius: 980px; background: color-mix(in srgb, var(--gray) 16%, transparent); }
.rc-uso i { display: block; min-width: 2px; background: var(--accent); }
.rc-uso i:nth-child(even) { background: var(--rc-host); }

/* ---------- tabelas ---------- */
.rc-tabela-rolagem { margin-top: 1rem; overflow-x: auto; scrollbar-width: thin; border-radius: .9rem; }
.rc-tabela { width: 100%; border-collapse: collapse; font-size: .92rem; letter-spacing: -.005em; }
.rc-tabela th { padding: .55rem .8rem; text-align: left; white-space: nowrap; font-size: .8rem; font-weight: 500; color: var(--gray); border-bottom: 1px solid var(--glass-line); }
.rc-tabela td { padding: .6rem .8rem; white-space: nowrap; border-bottom: 1px solid var(--border); }
.rc-tabela b { font-weight: 600; }
.rc-tabela tr.rc-fora td { color: #e5604f; }
.rc-usar { padding: .2rem .6rem; border: 1px solid var(--glass-line); border-radius: 980px; background: none; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; transition: transform 160ms var(--ease-out), background .2s; }
.rc-usar:hover { background: color-mix(in srgb, var(--accent) 15%, transparent); }

/* ---------- telas menores ---------- */
@media (max-width: 760px), (pointer: coarse) {
  .rc-painel { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--glass-solid); }
}
@media (max-width: 760px) {
  .rc-painel { padding: 1.15rem; border-radius: 1.3rem; }
  .rc-abas { display: flex; }
  .rc-abas button { flex: 1 1 auto; padding: .5rem .6rem; font-size: .86rem; }
  .rc-campos { grid-template-columns: 1fr; }
  .rc-dados { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rc-dados > div { padding: .7rem .8rem; }
  .rc-dados dd { font-size: .95rem; }
  .rc-bits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rc-octeto i { font-size: .72rem; }
  .rc-linha { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 2.4rem; padding-bottom: .75rem; border-bottom: 1px solid var(--border); }
  .rc-linha .rc-campo:first-child { grid-column: 1 / -1; }
  .rc-linha + .rc-linha label { display: block; }
  .rc-tabela { font-size: .86rem; }
  .rc-tabela th, .rc-tabela td { padding: .5rem .55rem; }
  /* tabelas largas viram cartões: cada linha mostra o nome do campo */
  .rc-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .rc-cards tr { display: block; padding: .7rem .85rem; margin-bottom: .55rem; border-radius: .9rem; background: color-mix(in srgb, var(--gray) 10%, transparent); }
  .rc-cards td { display: flex; justify-content: space-between; gap: 1rem; padding: .2rem 0; border: 0; white-space: normal; text-align: right; overflow-wrap: anywhere; }
  .rc-cards td::before { content: attr(data-r); flex: 0 0 auto; text-align: left; color: var(--gray); font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .rc-abas button, .rc-botao, .rc-usar, .rc-remover { transition: none; }
  .rc-botao:active:not(:disabled), .rc-exemplos button:active, .rc-usar:active { transform: none; }
}