/* HERRAMIENTAS INTEGRADAS
   · mismo azul de la web en el índice y en cada herramienta; el color de cada una apenas asoma
   · sin cajas grandes: el índice es una lista con líneas finas y cada herramienta se apoya directo sobre el fondo */

/* 1. FONDO: igual que al pasar el mouse en el índice: negro con el color de cada herramienta */
.f-h-calculadora{--tc:#25d18e}
.f-h-paletas{--tc:#ff5fa8}
.f-h-contraste{--tc:#ffc233}
.f-h-convertidor{--tc:#28cdff}
.f-h-unidades{--tc:#ff7a3d}
.f-h-brief{--tc:#8a5bff}
.f-h-pdf{--tc:#ff4f5e}
:is(.f-h-calculadora,.f-h-paletas,.f-h-contraste,.f-h-convertidor,.f-h-unidades,.f-h-brief,.f-h-pdf){
 --fondo:#000;
 --g:radial-gradient(75vw 55vw at 92% 0%,color-mix(in srgb,var(--tc) 78%,transparent),transparent 66%),radial-gradient(60vw 45vw at 2% 100%,color-mix(in srgb,var(--tc) 40%,transparent),transparent 66%),linear-gradient(#050505,#000)}

/* 3. CADA HERRAMIENTA: sin panel azul grande, apoyada directo sobre el fondo */
.f-herramientas .md.md-pg{background:none;border:0;box-shadow:none;border-radius:0;margin-top:clamp(18px,2.4vw,30px)}
.f-herramientas .md-pg .md-b{border-radius:0;padding-top:clamp(6px,1vw,12px)}
.f-herramientas .md-pg .md-b>div{padding-left:0;padding-right:0}

/* calculadora: categorías como filas con línea fina */
.f-herramientas .cp-cat,.f-herramientas .cp-fuentes{background:none;border:0;border-top:1px solid rgba(255,255,255,.3);border-radius:0;margin-bottom:0}
.f-herramientas .cp-cat:last-of-type{border-bottom:1px solid rgba(255,255,255,.3)}
.f-herramientas .cp-fuentes{border-bottom:1px solid rgba(255,255,255,.3);margin-top:clamp(18px,2vw,26px)}
.f-herramientas .cp-ch,.f-herramientas .cp-fuentes summary{padding-left:2px;padding-right:2px}
.f-herramientas .cp-row{padding-left:2px;padding-right:2px}
.f-herramientas .cp-cli{background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:16px}
.f-herramientas .cp-cli.on{background:rgba(255,255,255,.16);color:#fff;box-shadow:inset 0 0 0 1.5px #fff}

/* resumen de la calculadora y resultado del contraste: texto blanco con una línea a la izquierda, sin tarjeta blanca */
.f-herramientas :is(.cp-res,.ct-res){background:none;box-shadow:none;border-radius:0;color:#fff;padding:0 0 0 clamp(16px,2vw,28px);border-left:1px solid rgba(255,255,255,.35)}
.f-herramientas :is(.cp-res,.ct-res) :is(h4,.cp-tt,.ct-ratio,.cp-m b,.cp-tu,.ct-sug h4){color:#fff}
.f-herramientas :is(.cp-vacio,.cp-m small,.cp-tot small,.cp-nota,.cp-pdf label,.cp-pdf-m,.ct-top small,.ct-chk small,.ct-nota,.ct-sug p,.ct-op-t){color:rgba(255,255,255,.8)}
.f-herramientas .ct-op-t b,.f-herramientas .ct-op-u{color:#fff}
.f-herramientas :is(.cp-lin,.cp-pdf){border-color:rgba(255,255,255,.28)}
.f-herramientas .ct-chk li,.f-herramientas .ct-sug{border-top-color:rgba(255,255,255,.28)}
.f-herramientas .ct-op{background:none;border-color:rgba(255,255,255,.4)}
.f-herramientas .ct-op:hover{background:rgba(255,255,255,.12);border-color:#fff}
.f-herramientas .cp-borrar{background:none;border-color:rgba(255,255,255,.5);color:#fff}
.f-herramientas .cp-borrar:hover:not(:disabled){background:#fff;border-color:#fff;color:var(--azul-f)}
.f-herramientas .cp-pdf .btn{background:#fff;color:var(--azul-f)}
.f-herramientas .cp-pdf .btn::after{background:var(--crema)}
.f-herramientas .ct-prev{box-shadow:none;border-radius:18px}

/* brief: la explicación sin caja */
.f-herramientas .br-que{background:none;border:0;border-top:1px solid rgba(255,255,255,.35);border-radius:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:clamp(16px,2vw,24px) 0 0}

/* conversor: resultados como columnas con línea, sin tarjetas blancas */
.f-herramientas .un-card{background:none;color:#fff;box-shadow:none;border-radius:0;border-top:1px solid rgba(255,255,255,.4);padding:12px 2px}
.f-herramientas .un-card:hover{background:rgba(255,255,255,.08);transform:none}
.f-herramientas .un-card small{color:rgba(255,255,255,.8)}
.f-herramientas .un-card.ok small{color:#b8f5cf}
.f-herramientas .un-frase{background:none;padding:10px 0;border-radius:0;border-top:1px solid rgba(255,255,255,.28)}

/* paletas y convertidor: zona de carga liviana, filas de archivos sin tarjeta blanca */
.f-herramientas :is(.pl-drop,.cv-drop){background:none;box-shadow:none;border-radius:20px;border:1.5px dashed rgba(255,255,255,.55)}
.f-herramientas :is(.pl-drop,.cv-drop):hover,.f-herramientas :is(.pl-drop,.cv-drop).over{background:rgba(255,255,255,.12);color:#fff;border-color:#fff}
.f-herramientas .pl-prev{background:none;border-radius:18px}
.f-herramientas .cv-it{background:none;color:#fff;box-shadow:none;border-radius:0;border-bottom:1px solid rgba(255,255,255,.28);padding:10px 2px}
.f-herramientas .cv-it.err{background:none}
.f-herramientas .cv-it .cv-m,.f-herramientas .cv-m .igual{color:rgba(255,255,255,.8)}
.f-herramientas .cv-m b{color:#b8f5cf}
.f-herramientas .cv-m b.mas,.f-herramientas .cv-it.err .cv-m{color:#ffc7c7}
.f-herramientas .cv-x{border-color:rgba(255,255,255,.45);color:#fff}
.f-herramientas .cv-x:hover{background:#fff;color:#7a1b1b}
.f-herramientas .cv-d{background:#fff;color:var(--azul-f)}
.f-herramientas .cv-d:hover{background:var(--crema);color:var(--nav)}

/* ajustes: sin el recuadro, todo se alinea con el título */
.f-herramientas :is(.un,.cv,.br,.ct,.cp,.pl){padding-left:0;padding-right:0}
.f-herramientas .un-n{color:#fff}
.f-herramientas .br{margin-inline:0}
.f-herramientas :is(.un,.cv){margin-left:0;margin-right:0}

/* Compresor de PDF: la herramienta principal ocupa todo el ancho, arriba de las demás */
.hgs-sq .tl.tl-main{grid-column:1/-1;aspect-ratio:auto;flex-direction:row;align-items:center;justify-content:flex-start;gap:clamp(16px,2.4vw,32px);padding:clamp(20px,2.6vw,34px)}
.tl-main .tl-top{flex:none;flex-direction:column;align-items:flex-start;gap:12px}
.tl-main .tl-ic{width:clamp(64px,7vw,92px)}
.tl-main .tl-tx{display:block;min-width:0}
.tl-main .tl-t{font-size:clamp(28px,3.6vw,48px)}
.tl-main .tl-d{display:block;-webkit-line-clamp:unset;line-clamp:unset;max-width:52ch;font-size:clamp(14px,1.3vw,18px);margin-top:10px}
@media(max-width:640px){.hgs-sq .tl.tl-main{flex-direction:column;align-items:flex-start;justify-content:space-between;gap:14px}.tl-main .tl-top{flex-direction:row;width:100%;justify-content:space-between;align-items:flex-start}.tl-main .tl-t{font-size:clamp(26px,8vw,34px)}}

/* Herramientas de PDF: pasos numerados, opciones claras y un botón de aceptar */
.pd-paso{margin-top:clamp(22px,3vw,34px)}
.pd-paso:first-of-type{margin-top:0}
.pd-h{display:flex;align-items:center;gap:12px;margin:0 0 14px;font-family:var(--fh);font-weight:900;font-style:normal;font-size:clamp(22px,2.4vw,30px);line-height:1.1}
.pd-n{flex:none;display:grid;place-items:center;width:clamp(32px,3vw,38px);aspect-ratio:1;border-radius:50%;background:#fff;color:var(--azul-f);font-size:clamp(16px,1.5vw,19px)}
.pd-hint{margin:8px 0 0;max-width:62ch;font-size:clamp(14px,1.15vw,16px);line-height:1.45;opacity:.92}
.pd-resumen{margin:0 0 14px;max-width:62ch;font-weight:700;font-size:clamp(16px,1.4vw,19px);line-height:1.4}
.pd-ops{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.pd-op{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:4px;padding:14px 16px 15px;border-radius:16px;border:1.5px solid rgba(255,255,255,.55);color:#fff;transition:background .2s,color .2s,transform .2s}
.pd-op b{font-family:var(--fh);font-weight:900;font-style:italic;font-size:clamp(17px,1.5vw,20px);line-height:1.1}
.pd-op span{font-size:clamp(14px,1.15vw,15.5px);line-height:1.35}
.pd-op small{font-size:13px;font-weight:700;color:#ffd9d9}
.pd-op:hover{background:rgba(255,255,255,.16);transform:translateY(-2px)}
.pd-op[aria-pressed="true"]{background:#fff;color:var(--azul-f);border-color:#fff}
.pd-op[aria-pressed="true"] small{color:#7a1b1b}
.pd-op[aria-disabled="true"]{opacity:.5;cursor:not-allowed}.pd-op[aria-disabled="true"]:hover{background:none;transform:none}
.pd-op:focus-visible{outline:3px solid #fff;outline-offset:3px}
.pd-aj .cv-g+.cv-g{margin-top:16px}
.cv-px.pd-ancho input{width:min(420px,78vw)}
.pd-go .btn{padding:15px 34px 16px;font-size:clamp(17px,1.5vw,20px)}
.pd-go .btn:disabled{opacity:.5;cursor:not-allowed}
.pd-go .cv-acc{align-items:center}
.pd-ext{display:grid;place-items:center;background:#fff!important;color:var(--azul-f);font-family:var(--fh);font-weight:900;font-size:14px;background-image:none!important}
#pdLista,#pdSalida{grid-template-columns:minmax(0,1fr)}
#pdLista .cv-it,#pdSalida .cv-it{grid-template-columns:56px minmax(0,1fr) auto}
@media(max-width:420px){#pdLista .cv-it,#pdSalida .cv-it{grid-template-columns:48px minmax(0,1fr)}.pd-ops{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.pd-op{transition:none}.pd-op:hover{transform:none}}