/* Hera · capa estetica compartida (S30) */
.hx-foco{position:fixed;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(560px circle at var(--hx-mx,50%) var(--hx-my,18%),rgba(47,111,143,.07),transparent 65%)}
@keyframes hxSurge{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.hx-anima{animation:hxSurge .5s cubic-bezier(.2,.8,.2,1) both}
.panel,.panel-chart,.consultorio,.consulta-ia{border-radius:12px;transition:transform .25s ease,border-color .25s ease}
.panel:hover,.panel-chart:hover,.consultorio:hover,.consulta-ia:hover{border-color:rgba(47,111,143,.45)}
.kpi,.tarj,.mod{border-radius:10px;background:#ffffff;transition:transform .25s ease,border-color .25s ease}
.kpi:hover,.tarj:hover{transform:translateY(-3px);border-color:var(--oro,#2f6f8f)}
.mod.activo:hover{transform:translateY(-3px)}
.pill,.chip,.volver,.btn-lin{transition:all .2s ease}
.pill:hover,.chip:hover{transform:translateY(-1px)}
select,input,textarea{transition:border-color .25s ease,box-shadow .25s ease}
tbody tr{transition:background .2s ease}
@media (prefers-reduced-motion: reduce){
  .hx-anima{animation:none}
  .hx-foco{display:none}
  *{transition:none !important}
}

/* Marca de agua HELIOS (fija, centrada, muy tenue) */
body{
  background-image:url('fondo-helios.png');
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-position:center 42%;
  background-size:min(640px,70vw) auto;
}


/* ============================================================================
   UNIFICACIÓN DE BOTONES (formato píldora de estancias) + TÁCTIL  ·  (S31)
   Se carga tras el <style> inline de cada página: homogeneiza forma y tacto
   en todas sin tocar los HTML.
   ========================================================================== */

/* Sin zoom automático al enfocar en iPad y sin retardo/flash al tocar. */
select, input, textarea { font-size: 16px !important; }
button, a, select, input, textarea,
.pill, .chip, .tab, .hbtn, .volver, .btn-lin, .btn-oro, .btn-rojo, .generar, .mod {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(47,111,143,.15);
}

/* --- Botones de selección/filtro/navegación: PÍLDORA redondeada (estancias) --- */
.pill, .chip, .tab, .hbtn {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  display: inline-flex !important; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--linea); background: transparent; color: var(--texto-tenue);
  font-family: Arial, Helvetica, sans-serif; font-size: 14px !important; line-height: 1;
  padding: 10px 16px !important; min-height: 44px !important;
  border-radius: 999px !important;            /* extremos perfectamente redondeados */
  transition: all .2s ease;
}
.pill:hover, .chip:hover, .tab:hover, .hbtn:hover { border-color: var(--oro); color: var(--oro); }
.pill.on, .chip.on, .pill.activa, .tab.activa, .hbtn.activa {
  background: var(--oro-tenue); border-color: var(--oro); color: var(--oro-claro); font-weight: 600;
}
.pill.comp { border-style: dashed; }
.pill.comp.on { background: var(--oro); border-color: var(--oro); color: #fff; border-style: solid; }

/* --- Meses: CÍRCULOS perfectos --- */
.pill.mes {
  width: 44px !important; min-width: 44px !important; height: 44px !important;
  padding: 0 !important; border-radius: 50% !important; font-size: 13px !important; font-weight: 600;
}

/* --- Botones de acción: rectángulo redondeado, táctiles (conservan su color) --- */
.btn-oro, .btn-rojo, .generar {
  display: inline-flex !important; align-items: center; justify-content: center;
  min-height: 46px !important; padding: 0 22px !important; border-radius: 8px !important;
  font-size: 14px !important; cursor: pointer;
}
.btn-lin, .volver {
  display: inline-flex !important; align-items: center; justify-content: center;
  min-height: 44px !important; padding: 0 16px !important; border-radius: 8px !important;
  font-size: 12px !important; text-decoration: none;
}

/* --- Selects e inputs táctiles --- */
select, input:not([type=checkbox]):not([type=radio]):not([type=file]), textarea {
  min-height: 44px !important;
}
select { padding-right: 30px !important; }

/* En pantallas táctiles: sin salto de hover y sin foco que sigue al ratón. */
@media (hover: none) {
  .kpi:hover, .tarj:hover, .mod:hover, .mod.activo:hover, .panel:hover, .panel-chart:hover,
  .pill:hover, .chip:hover, .tab:hover, .hbtn:hover { transform: none; }
  .hx-foco { display: none; }
}

/* Tablas anchas con scroll por inercia; nada desborda en tablet. */
.rejilla { -webkit-overflow-scrolling: touch; }
table { max-width: 100%; }
.controles { row-gap: 12px; }


/* ============================================================================
   JUSTIFICADO DE BLOQUES DE TEXTO EN PROSA  ·  (S32)
   Se carga tras el <style> inline de cada página: justifica los párrafos
   largos sin tocar los HTML. No toca títulos, etiquetas, KPIs, tablas ni la
   respuesta del consultorio (pre-wrap). Guionado automático (lang="es").
   ========================================================================== */
.intro, .desc, .nota, .aviso-seguridad, .aviso-backup, .informe p, .confid p {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}


/* ============================================================================
   BOTÓN "EXPORTAR" DE GRÁFICAS  ·  (S33)  ·  lo pinta hera-export.js
   ========================================================================== */
.hera-exportar-pie { text-align: right; margin-top: 10px; }
.hera-exportar.btn-lin { min-height: 36px !important; padding: 0 14px !important;
  letter-spacing: .14em; text-transform: uppercase; }