/* Herramientas: listado y calculadoras. Depende de home.css. */

/* Varias reglas de acá fijan display en grid o flex, y eso le gana al atributo hidden:
   sin esto, los bloques que arrancan ocultos se ven como cajas vacías. */
[hidden]{display:none!important}

/* ---- Listado ---- */
.hr-grilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.hr-card{display:flex;flex-direction:column;gap:10px;padding:26px;border:1px solid var(--linea);border-radius:16px;
  text-decoration:none;background:#fff;transition:border-color .15s,box-shadow .15s,transform .15s}
.hr-card:hover{border-color:var(--rojo);box-shadow:0 14px 34px rgba(28,31,39,.09);transform:translateY(-2px)}
.hr-card b{font:500 1.22rem/1.25 var(--disp)}
.hr-card p{color:var(--tinta-2);font-size:.95rem;flex:1}
.hr-ico{display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:14px;
  background:var(--graf);color:#fff;font-size:1.25rem}
.hr-card .lnk{color:var(--rojo)}

/* ---- Texto SEO bajo la herramienta ---- */
.hr-texto{max-width:860px;padding-top:56px;padding-bottom:16px}
.hr-texto code{background:var(--gris);border:1px solid var(--linea);border-radius:6px;padding:1px 6px;
  font:.9em/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap}
/* Las fórmulas largas (FSPL, F₁) miden más que un teléfono: ahí sí tienen que cortar. */
@media(max-width:760px){.hr-texto code{white-space:normal;overflow-wrap:break-word}}

/* ---- Calculadora ---- */
.re{padding-top:36px}

.re-form{display:grid;gap:18px}

/* ---- Mapa ---- */
.re-mapa-caja{border:1px solid var(--linea);border-radius:16px;overflow:hidden;background:#fff}
.re-mapa-barra{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--linea)}
.re-mapa-modo{display:flex;gap:6px;flex:none}
.re-mb{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--linea);border-radius:999px;
  background:#fff;color:var(--tinta-2);font:600 .86rem var(--sans);cursor:pointer;white-space:nowrap}
.re-mb:hover{border-color:var(--tinta-3)}
.re-mb.on{border-color:var(--rojo);background:#fdecee;color:var(--tinta)}
.re-mapa-busca{position:relative;flex:1;min-width:220px;display:flex;gap:6px}
.re-mapa-busca input{flex:1;min-width:0;padding:9px 12px;border:1px solid var(--linea);border-radius:10px;font:400 .92rem var(--sans)}
.re-mapa-busca input:focus{outline:2px solid var(--rojo-luz);outline-offset:1px;border-color:var(--rojo)}
.re-mbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 14px;border:1px solid var(--linea);
  border-radius:10px;background:#fff;color:var(--tinta-2);font:600 .86rem var(--sans);cursor:pointer;white-space:nowrap}
.re-mbtn:hover{border-color:var(--tinta-3);color:var(--tinta)}
.re-sugerencias{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:1200;margin:0;padding:6px;list-style:none;
  background:#fff;border:1px solid var(--linea);border-radius:12px;box-shadow:0 16px 40px rgba(28,31,39,.16);max-height:260px;overflow:auto}
.re-sugerencias button{display:block;width:100%;text-align:left;padding:9px 12px;border:0;border-radius:8px;background:none;
  font:400 .88rem/1.4 var(--sans);color:var(--tinta-2);cursor:pointer}
.re-sugerencias button:hover{background:var(--gris);color:var(--tinta)}
.re-mapa{height:420px;width:100%;background:var(--gris)}
.re-mapa-pie{padding:10px 14px;font-size:.82rem;color:var(--tinta-3);border-top:1px solid var(--linea)}
.re-marca span{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;
  color:#fff;font:700 .78rem/1 var(--sans);border:2px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.leaflet-container{font:inherit}
/* El contenedor de Leaflet es focusable: sin esto el outline rojo del sitio sale cortado por el overflow. */
.leaflet-container:focus,.leaflet-container:focus-visible{outline-offset:-3px}
@media(max-width:700px){.re-mapa{height:320px}.re-mapa-modo{width:100%}.re-mb{flex:1;justify-content:center}}
.re-ends{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.re-box{margin:0;border:1px solid var(--linea);border-radius:16px;padding:18px 20px 20px;background:#fff;display:grid;gap:14px}
.re-box legend{padding:0 8px;font:600 .95rem var(--sans);color:var(--tinta);display:flex;align-items:center;gap:8px}
.re-box legend i{color:var(--rojo)}
.re-pin{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;
  background:var(--rojo);color:#fff;font:700 .75rem/1 var(--sans)}
.re-pin-b{background:var(--graf)}

.re-f{display:grid;gap:6px;min-width:0}
.re-f > span{font:600 .83rem/1.3 var(--sans);color:var(--tinta-2);display:flex;gap:6px;flex-wrap:wrap;align-items:baseline}
.re-f small{font-weight:400;color:var(--tinta-3);font-size:.78rem}
.re-f input,.re-f select{width:100%;padding:10px 12px;border:1px solid var(--linea);border-radius:10px;
  font:400 .98rem var(--sans);color:var(--tinta);background:#fff;min-width:0}
.re-f input:focus,.re-f select:focus{outline:2px solid var(--rojo-luz);outline-offset:1px;border-color:var(--rojo)}
.re-f2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.re-f3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.re-err{display:none;color:var(--rojo-d);font:400 .82rem var(--sans);font-style:normal}
.re-err:not(:empty){display:block}

.re-opts{display:flex;flex-wrap:wrap;gap:18px}
.re-chk{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;color:var(--tinta-2);cursor:pointer}
.re-chk input{width:17px;height:17px;accent-color:var(--rojo);margin:0}

.re-acciones{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.pill-oscura{background:var(--graf);color:#fff}
.pill-oscura:hover{background:var(--graf-3)}
.re-acciones button[disabled]{opacity:.55;pointer-events:none}
.re-estado{font-size:.88rem;color:var(--tinta-3)}
.re-estado-malo{color:var(--rojo-d)}

/* ---- Resultados ---- */
.re-res{margin-top:34px;display:grid;gap:26px}

.re-verdicto{display:flex;gap:16px;align-items:flex-start;padding:18px 22px;border-radius:16px;border:1px solid}
.re-verdicto i{font-size:1.5rem;line-height:1.2;flex:none}
.re-verdicto b{display:block;font:600 1.1rem var(--disp)}
.re-verdicto p{font-size:.95rem;margin-top:3px}
.re-v-ok{background:#edf9f1;border-color:#a9dfbf;color:#13622f}
.re-v-media{background:#fff8e8;border-color:#f0d9a0;color:#7a5309}
.re-v-mal{background:#fdecee;border-color:#f3b7bd;color:#8e101b}

.re-grafico{border:1px solid var(--linea);border-radius:16px;padding:14px 14px 10px;background:#fff}
.re-grafico canvas{width:100%;display:block;cursor:crosshair}
.re-leyenda{display:flex;flex-wrap:wrap;gap:16px;padding:12px 4px 0;font-size:.82rem;color:var(--tinta-2)}
.re-leyenda span{display:inline-flex;align-items:center;gap:7px}
.re-sw{width:16px;height:10px;border-radius:2px;display:inline-block;flex:none}
.re-sw-terreno{background:linear-gradient(180deg,#8a91a0,#4a505e)}
.re-sw-clutter{background:rgba(31,168,85,.45)}
.re-sw-los{height:0;border-top:2px solid #1c1f27;border-radius:0}
.re-sw-f1{background:rgba(224,30,46,.18)}
.re-sw-f60{height:0;border-top:2px dashed #e01e2e;border-radius:0}
.re-fuente{font-size:.8rem;color:var(--tinta-3);padding:6px 4px 0}

.re-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.re-tile{border:1px solid var(--linea);border-radius:14px;padding:14px 16px;background:#fff;display:grid;gap:2px}
.re-tile span{font:600 .76rem/1.2 var(--sans);text-transform:uppercase;letter-spacing:.04em;color:var(--tinta-3)}
.re-tile b{font:500 1.42rem/1.15 var(--disp);color:var(--tinta)}
.re-tile em{font-style:normal;font-size:.8rem;color:var(--tinta-3)}

.re-tablas{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.re-tabla{border:1px solid var(--linea);border-radius:16px;padding:6px 20px 14px;background:#fff;min-width:0}
.re-tabla h3{font:500 1.08rem var(--disp);padding:14px 0 8px}
.re-tabla table{width:100%;border-collapse:collapse;font-size:.9rem;table-layout:fixed}
.re-tabla th{text-align:left;font-weight:400;color:var(--tinta-2);padding:7px 0;border-bottom:1px solid var(--linea);
  width:38%;overflow-wrap:break-word}
.re-tabla td{padding:7px 0 7px 10px;border-bottom:1px solid var(--linea);font-variant-numeric:tabular-nums;
  width:32%;overflow-wrap:break-word}
.re-tabla td.re-nota{color:var(--tinta-3);font-size:.8rem;width:30%}
.re-tabla tr:last-child th,.re-tabla tr:last-child td{border-bottom:0}
.re-ok{color:#13622f}
.re-warn{color:#9a6400}
.re-bad{color:var(--rojo-d)}

/* ---- Pestañas (ráfagas: Mikrotik / Cisco) ---- */
.re-tabs{display:flex;gap:8px;margin-bottom:22px;border-bottom:1px solid var(--linea);flex-wrap:wrap}
.re-tab{padding:12px 20px;border:0;border-bottom:3px solid transparent;background:none;cursor:pointer;
  font:600 .98rem var(--sans);color:var(--tinta-3);margin-bottom:-1px}
.re-tab:hover{color:var(--tinta)}
.re-tab.on{color:var(--tinta);border-bottom-color:var(--rojo)}

/* ---- Valor + unidad ---- */
.re-combo{display:flex;gap:0;min-width:0}
.re-combo input{border-radius:10px 0 0 10px;border-right:0;flex:1;min-width:0}
.re-combo select{border-radius:0 10px 10px 0;width:auto;flex:none;background:var(--gris);font-size:.88rem;padding:10px 8px}

/* ---- Bloques de comandos ---- */
.re-cmd-caja{display:flex;flex-direction:column;gap:12px}
.re-cmd{margin:0;padding:16px;background:var(--graf);color:#e9ecf2;border-radius:12px;overflow-x:auto;
  font:.84rem/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre;tab-size:2}
.re-cmd-caja .re-mbtn{align-self:flex-start}

/* ---- Barra de capacidad (RAID) ---- */
.re-barra-caja{border:1px solid var(--linea);border-radius:16px;padding:6px 20px 18px;background:#fff}
.re-barra-caja h3{font:500 1.08rem var(--disp);padding:14px 0 12px}
.re-barra{display:flex;height:34px;border-radius:8px;overflow:hidden;background:var(--gris)}
.re-barra i{display:block;height:100%}
.re-barra-leg{display:flex;flex-wrap:wrap;gap:16px;padding-top:12px;font-size:.84rem;color:var(--tinta-2)}
.re-barra-leg span{display:inline-flex;align-items:center;gap:7px}
.re-barra-leg i{width:12px;height:12px;border-radius:3px;display:inline-block}

.re-sw-tasa{height:0;border-top:2px solid #1c1f27;border-radius:0}
.re-sw-prom{height:0;border-top:2px solid #6b7280;border-radius:0}
.re-sw-umbral{height:0;border-top:2px dashed #e01e2e;border-radius:0}
.re-sw-max{height:0;border-top:2px dashed #1fa855;border-radius:0}

.re-notas{border-left:3px solid var(--rojo);background:var(--gris);border-radius:0 14px 14px 0;padding:18px 22px}
.re-notas h3{font:600 .95rem var(--sans);text-transform:uppercase;letter-spacing:.05em;color:var(--tinta-3);margin-bottom:8px}
.re-notas ul{margin:0;padding-left:20px;display:grid;gap:7px}
.re-notas li{font-size:.9rem;color:var(--tinta-2);line-height:1.55}

@media(max-width:900px){
  .re-ends,.re-tablas{grid-template-columns:1fr}
  .re-f3{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .re-f3,.re-f2{grid-template-columns:1fr}
  .re-box{padding:14px 16px 18px}
  .re-tabla{padding:4px 14px 12px}
  .re-tabla table{font-size:.85rem}
  .re-acciones .pill{width:100%}
}
@media print{
  .hd,.ft,.wa-flot,.re-form,.re-acciones,.bl-cta{display:none!important}
  .re-res{margin-top:0}
}