/* Constante · la calculadora de 30 KPIs: la de la cuenta (calculadora.html, también dentro de Mi caja) y la pública de la
   guía de indicadores (site/kpis/index.html, generada por scripts/guia-kpis.js). Las dos se ven igual porque usan este
   archivo, js/calculadora-html.js y js/calculadora.js. Va después de fuentes.css, tema.css y cabecera.css. */
html.boot body{visibility:hidden}
/* Los colores, en claro y en oscuro, son los de toda la web (css/tema.css) */
*{box-sizing:border-box;}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--f-texto);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
/* Los márgenes de la página y la cabecera (css/cabecera.css) son los de Mi caja: al pasar de una a otra no se mueve nada */
.wrap{max-width:880px;margin:0 auto;padding:0 24px 80px;}
@media screen{ .wrap.ancha{max-width:1160px} }   /* la de la cuenta, con el ancho de Mi caja (constante.css) */
h1.hero{font-family:var(--f-titulo);font-weight:800;font-size:clamp(32px,5vw,46px);line-height:1.05;letter-spacing:-.03em;margin:8px 0 12px;text-wrap:balance;}
.sub{color:var(--tinta-2);font-size:15px;margin:0 0 36px;max-width:62ch;}
.card{background:var(--hoja);border:1px solid var(--linea);border-radius:16px;padding:32px;margin-bottom:24px;}
.card h2{font-family:var(--f-titulo);font-weight:700;font-size:21px;line-height:1.25;letter-spacing:-.015em;margin:0 0 6px;color:var(--tinta);text-wrap:balance;}
.card .hint{color:var(--tinta-2);font-size:13.5px;margin:0 0 8px;}
.card-mi-caja{background:color-mix(in srgb,var(--papel) 55%,var(--hoja));}   /* sin franja: un fondo apenas más oscuro, como el resumen de Mi caja */
.card-mi-caja p{margin:6px 0 14px;}

/* Pestañas de la calculadora: «Calculadora de KPIs» y «Cómo se calculan los KPIs» (las de la web, .tabs, son de la cabecera) */
.pestanas{border-bottom:1px solid var(--linea);margin-bottom:32px;}
.tablist{display:flex;flex-wrap:wrap;column-gap:24px;}
.tab-btn{background:none;border:none;color:var(--tinta-2);font-family:var(--f-texto);font-size:14.5px;font-weight:600;padding:12px 2px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .2s,border-color .2s,transform .15s;}
.tab-btn[aria-selected="true"]{color:var(--tinta);border-bottom-color:var(--verde);}

/* Lista de indicadores: una lista limpia, cada indicador en una fila separada por una línea (sin recuadros). En el
   ordenador, dos columnas por grupo; cada indicador se abre en su sitio, debajo de su nombre. */
.pilar{font-family:var(--f-titulo);font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--tinta);margin:32px 0 8px;}
.kpi-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px;align-items:start;}
.kpi-col{border-top:1px solid var(--linea-2);min-width:0;}
.kpi-item{border-bottom:1px solid var(--linea-2);}
.kpi-item h4{margin:0;font-size:inherit;font-weight:inherit;}
/* El fondo al pasar el ratón sobresale 10 px por cada lado; el nombre queda alineado con el título del grupo */
.kpi-toggle{width:calc(100% + 20px);margin:0 -10px;text-align:left;background:none;border:none;border-radius:8px;color:var(--tinta);font-family:var(--f-texto);font-size:15.5px;font-weight:600;line-height:1.4;padding:13px 10px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;transition:background-color .2s,transform .15s;}
.kpi-toggle .flecha{color:var(--tinta-2);font-size:14px;flex-shrink:0;transition:transform .15s,color .2s;}
.kpi-toggle[aria-expanded="true"] .flecha{transform:rotate(90deg);}
.kpi-panel{padding:4px 0 24px;}
.kpi-que{font-size:14px;color:var(--tinta-2);margin:0 0 16px;}
/* Buscador «Busca un indicador»: filtra la lista por el nombre mientras escribes. En el ordenador, del ancho de una columna. */
.buscador{position:relative;width:min(100%,calc(50% - 20px));margin:20px 0 4px;}
.buscador::before{content:"";position:absolute;left:13px;top:50%;width:16px;height:16px;margin-top:-8px;background:var(--tinta-3);-webkit-mask:var(--icono-buscar) center / contain no-repeat;mask:var(--icono-buscar) center / contain no-repeat;pointer-events:none;}
.buscador input{width:100%;background:var(--papel-2);border:1px solid var(--linea);border-radius:8px;padding:10px 12px 10px 38px;color:var(--tinta);font-family:var(--f-texto);font-size:15px;outline:none;transition:border-color .15s,box-shadow .15s;}
.buscador input::placeholder{color:var(--tinta-3);opacity:1;}
.buscador input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;width:16px;height:16px;margin:0 0 0 8px;background:var(--tinta-3);-webkit-mask:var(--icono-borrar) center / contain no-repeat;mask:var(--icono-borrar) center / contain no-repeat;cursor:pointer;transition:background-color .2s;}
.buscador input:focus{border-color:var(--verde);box-shadow:0 0 0 3px color-mix(in srgb,var(--verde) 20%,transparent);}
.sin-resultados{font-size:14.5px;color:var(--tinta-2);margin:24px 0 4px;overflow-wrap:anywhere;}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;}
/* Lupa y aspa del buscador (la del navegador sale en su azul): el mismo trazo que el botón «Modo oscuro» */
:root{--icono-buscar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='8.6' cy='8.6' r='5.6'/%3E%3Cpath d='M12.8 12.8l4.4 4.4'/%3E%3C/svg%3E");
  --icono-borrar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M5 5l10 10M15 5L5 15'/%3E%3C/svg%3E");}

/* Campos */
.campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:4px 18px;}
.field{margin-bottom:14px;min-width:0;}
.field label{display:block;font-size:13.5px;font-weight:600;color:var(--tinta-2);margin-bottom:5px;}
.field input,.field select{width:100%;min-width:0;background:var(--papel-2);border:1px solid var(--linea);border-radius:8px;padding:10px 12px;color:var(--tinta);font-family:var(--f-cifra);font-size:14px;outline:none;transition:border-color .15s,box-shadow .15s;}
.field select{font-family:var(--f-texto);cursor:pointer;}
.field input::placeholder{color:var(--tinta-3);}
.field input:focus,.field select:focus{border-color:var(--verde);box-shadow:0 0 0 3px color-mix(in srgb,var(--verde) 20%,transparent);}
.field input[aria-invalid="true"]{border-color:var(--rojo);}
.entrada{display:flex;gap:8px;}
.btn-signo{flex-shrink:0;width:44px;background:var(--hoja);border:1px solid var(--linea);border-radius:8px;color:var(--tinta);font-family:var(--f-cifra);font-size:18px;cursor:pointer;transition:background-color .2s,border-color .2s,transform .15s;}
.ayuda{font-size:12px;color:var(--tinta-3);margin:4px 0 0;}
.pista{font-size:13px;color:var(--tinta-2);background:var(--papel);border:1px solid var(--linea);border-radius:8px;padding:10px 12px;margin:4px 0 14px;}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--tinta);color:var(--sobre-tinta);border:1px solid var(--tinta);border-radius:9px;font-family:var(--f-texto);font-weight:650;font-size:15px;padding:13px 24px;cursor:pointer;text-decoration:none;transition:transform .15s ease,box-shadow .2s ease,background-color .2s ease,color .2s ease;}
.btn-sec{background:var(--papel-2);color:var(--tinta);border-color:var(--linea);}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin:8px 0 0;}
:focus-visible{outline:2.5px solid var(--verde);outline-offset:3px;}
.enlace:focus-visible,.pie-web a:focus-visible{border-radius:4px;}

/* Resultado */
.resultado:empty{display:none;}
.resultado{margin-top:18px;padding-top:18px;border-top:1px solid var(--linea);}
.resultado p{margin:0 0 6px;}
.res-valor{font-family:var(--f-cifra);font-variant-numeric:tabular-nums;font-weight:600;font-size:30px;line-height:1.2;letter-spacing:-.03em;color:var(--tinta);}
.res-nd{font-family:var(--f-titulo);font-weight:700;font-size:22px;letter-spacing:-.015em;color:var(--tinta-3);}
.res-cuenta{font-family:var(--f-cifra);font-size:13px;color:var(--tinta);overflow-wrap:anywhere;}
.res-formula{font-size:13px;color:var(--tinta-2);}
.res-nota{font-size:13.5px;color:var(--tinta);}
.res-falta{font-size:14px;color:var(--tinta-2);}
.res-aviso{font-size:14px;color:var(--rojo);font-weight:600;}

/* Cómo se calculan */
.notas{margin:12px 0 4px;padding-left:20px;font-size:14px;color:var(--tinta-2);}
.notas li{margin-bottom:8px;}
.notas b{color:var(--tinta);}
.formula-pilar{font-family:var(--f-titulo);font-weight:700;font-size:19px;letter-spacing:-.01em;margin:28px 0 0;padding-top:20px;border-top:2px solid var(--linea);}
.formula-item{border-bottom:1px solid var(--linea);padding:18px 0;}
.formula-item:last-child{border-bottom:none;}
.formula-item h4{font-size:16px;font-weight:650;margin:0 0 6px;color:var(--tinta);}
.formula-item p{font-size:14px;color:var(--tinta-2);margin:0 0 8px;}
.formula-item .para{color:var(--tinta);}
.formula-code{font-family:var(--f-cifra);font-size:13px;background:var(--papel-2);border:1px solid var(--linea);border-radius:6px;padding:8px 12px;margin:0 0 8px;color:var(--tinta);max-width:100%;overflow-wrap:anywhere;}
.formula-item .ejemplo{color:var(--tinta);}
.formula-item .ejemplo .cuenta{font-family:var(--f-cifra);font-size:13px;overflow-wrap:anywhere;}
.enlace{background:none;border:none;padding:0;color:var(--tinta);font-family:var(--f-texto);font-size:14px;font-weight:600;text-decoration:underline;text-decoration-color:var(--verde);text-decoration-thickness:1.5px;text-underline-offset:3px;cursor:pointer;transition:color .2s;}
.aviso-legal{color:var(--tinta-2);font-size:12.5px;margin-top:28px;}
.formula-acciones{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:baseline;}
a.enlace{display:inline-block;}

/* Solo en la calculadora pública (site/kpis/index.html): el enlace a la página de la guía de cada indicador y el aviso sin JavaScript */
.enlace-guia{color:var(--tinta);font-weight:600;white-space:nowrap;text-decoration:underline;text-decoration-color:var(--verde);text-decoration-thickness:1.5px;text-underline-offset:3px;transition:color .2s;}
.enlace-guia:focus-visible{border-radius:4px;}
.sin-js{font-size:14.5px;color:var(--tinta-2);}
.sin-js ul{columns:2;column-gap:40px;padding-left:20px;margin:8px 0 0;}
.sin-js li{margin-bottom:6px;}
.sin-js a{color:var(--tinta);}
@media (max-width:720px){ .sin-js ul{columns:1;} }

/* Dentro de Mi caja: sin cabecera ni pie (los pone Mi caja) y con el fondo de la página que la contiene */
.embebida .cabecera-publica{display:none!important;}
.pie-web{border-top:1px solid var(--linea);margin-top:40px;padding:20px 0 8px;font-size:13.5px;color:var(--tinta-2);display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between}
.pie-web nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.pie-web a{color:var(--tinta-2);text-decoration-color:var(--verde);text-decoration-thickness:1.5px;text-underline-offset:3px;transition:color .2s}
.embebida body{background:transparent;}
/* 6 px de margen para que el anillo del foco no se corte en el borde del marco (app.html lo compensa con -6 px) */
.embebida .wrap{padding:6px 6px 10px;max-width:none;}

/* Estados de todo lo que se pulsa, en el lenguaje de la portada (css/portada.css y css/constante.css).
   Al pasar el ratón: solo con ratón (en el móvil se quedaría pegado). Al pulsar: se hunde un poco. Con el teclado: el
   anillo --verde de :focus-visible; los campos, su borde y su halo --verde. Desactivado: mientras prepara el Excel. */
.btn,.tab-btn,.kpi-toggle,.btn-signo{-webkit-tap-highlight-color:transparent;}
@media (hover:hover){
  .btn:hover:not(:disabled){box-shadow:0 8px 22px -10px var(--tinta);transform:translateY(-1px);}
  .btn-sec:hover:not(:disabled){background:var(--hoja);border-color:var(--tinta-3);box-shadow:none;}   /* en oscuro --hoja y --papel-2 casi no se distinguen: el borde también cambia */
  .tab-btn:hover{color:var(--tinta);}
  .tab-btn:not([aria-selected="true"]):hover{border-bottom-color:var(--tinta-3);}
  .kpi-toggle:hover{background:var(--papel);}
  .kpi-toggle:hover .flecha{color:var(--verde);}
  .kpi-toggle[aria-expanded="false"]:hover .flecha{transform:translateX(3px);}
  .buscador input::-webkit-search-cancel-button:hover{background:var(--tinta);}
  .btn-signo:hover{background:var(--papel-2);border-color:var(--verde);}
  .enlace:hover,.enlace-guia:hover,.pie-web a:hover{color:var(--verde);}
}
.btn:active:not(:disabled){transform:translateY(0) scale(.98);}
.tab-btn:active,.btn-signo:active{transform:scale(.96);}
.kpi-toggle:active{transform:scale(.995);}
.btn:disabled{background:transparent;color:var(--tinta-3);border-color:var(--linea);cursor:progress;}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;}
  .btn,.tab-btn,.btn-signo,.kpi-toggle{transform:none!important;}
}
@media (max-width:620px){ .wrap{padding:0 18px 60px;} }   /* como Mi caja en el móvil */
@media (max-width:720px){
  .field input,.field select,.buscador input{font-size:16px;}   /* evita que el iPhone amplíe la pantalla al tocar un campo */
  .buscador{width:100%;}
  .kpi-cols{grid-template-columns:minmax(0,1fr);}   /* una columna: la segunda sigue a la primera */
  .kpi-col + .kpi-col{border-top:0;}
}
@media (max-width:520px){
  .card{padding:20px 16px;}
  .kpi-toggle{width:calc(100% + 16px);margin:0 -8px;padding:13px 8px;}
  /* Las dos pestañas, una al lado de la otra; el texto pasa a dos líneas si no cabe */
  .tablist{display:grid;grid-template-columns:1fr 1fr;width:100%;column-gap:12px;}
  .tablist .tab-btn{text-align:center;padding:10px 4px;}
  .btn-row .btn{flex:1 1 auto;}
}