/* Componente único de tooltips AP.
   Este archivo se carga después de los estilos locales de cada vista. */
:root{
  --ap-tooltip-bg:#111;
  --ap-tooltip-border:var(--ap-gold);
  --ap-tooltip-title:var(--ap-gold);
  --ap-tooltip-text:#c7c7c7;
  --ap-tooltip-radius:10px;
  --ap-tooltip-gap:10px;
  --ap-tooltip-desktop-width:360px;
  --ap-tooltip-desktop-edge-gap:12px;
}

[role="tooltip"]{
  padding:14px!important;
  border:1px solid var(--ap-tooltip-border)!important;
  border-radius:var(--ap-tooltip-radius)!important;
  background:var(--ap-tooltip-bg)!important;
  color:var(--ap-tooltip-text)!important;
  box-sizing:border-box!important;
  box-shadow:0 14px 32px rgba(17,17,17,.3)!important;
}
/* Estándar tipográfico global para tooltips AP. */
[role="tooltip"]{
  font-family:Arial,sans-serif!important;
  font-size:14px!important;
  font-weight:400!important;
  line-height:1.5!important;
}
[role="tooltip"]>strong{
  display:block!important;
  margin:0 38px 8px 0!important;
  padding-right:0!important;
  color:var(--ap-gold)!important;
  font-family:Arial,sans-serif!important;
  font-size:14px!important;
  font-weight:800!important;
  line-height:1.25!important;
  letter-spacing:.15px!important;
  text-transform:uppercase!important;
}
[role="tooltip"]>p,
[role="tooltip"]>.ap-popup-close~span{
  color:#c7c7c7!important;
  font-family:Arial,sans-serif!important;
  font-size:14px!important;
  font-weight:400!important;
  line-height:1.5!important;
}
[role="tooltip"]>p{margin-top:0!important}
[role="tooltip"]>small{
  display:block!important;
  margin-top:9px!important;
  color:#aaa!important;
  font:400 14px/1.4 Arial,sans-serif!important;
}

.ap-help-indicator{
  width:24px;
  height:24px;
  min-width:24px;
  margin:-7px -5px -7px 5px;
  padding:0;
  border:0;
  border-radius:50%;
  display:inline-grid;
  place-items:center;
  flex:0 0 24px;
  vertical-align:middle;
  background:transparent;
  color:var(--ap-gold,var(--ap-gold));
  font-size:var(--ap-field-label-size,15px);
  line-height:0;
  cursor:help;
}
.ap-help-host{
  align-items:center!important;
  justify-content:flex-start!important;
  gap:0!important;
  cursor:default!important;
}
strong.ap-help-host{
  display:inline-flex!important;
  width:fit-content!important;
  max-width:100%!important;
  justify-self:start!important;
}
label.ap-help-host{
  display:inline-flex!important;
}
.ap-help-host>.ap-help-copy{
  display:inline-block;
  flex:0 1 auto;
  min-width:0;
  max-width:100%;
}
.ap-help-host>.ap-help-indicator{
  align-self:center;
  margin-left:5px;
  margin-right:-5px;
}
.ap-help-host>svg{
  margin-right:var(--ap-help-leading-gap,0px);
}
.results-dashboard .result-name.ap-help-host>.ap-help-copy,
.results-dashboard .metric-item .ap-help-host>.ap-help-copy{
  flex:0 1 auto;
}
/* Perimetros is the universal text-to-help spacing baseline. The original gap
   of each host is retained only between its leading pictogram and its copy. */

.ap-help-indicator:focus-visible,
.ap-help-indicator[aria-expanded="true"]{
  background:transparent;
  outline:0;
}@media(hover:hover) and (pointer:fine){.ap-help-indicator:hover{
  background:transparent;
  outline:0;
}}
.ap-help-indicator svg{
  width:17px;
  height:17px;
  display:block;
  place-self:center;
  margin:0;
  overflow:visible;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:none;
}
.ap-help-indicator .ap-help-dot{fill:currentColor;stroke:none}
.ap-help-indicator .ap-help-active-ring{
  opacity:0;
  stroke-width:1.2;
}

.ap-help-indicator:focus-visible .ap-help-active-ring,
.ap-help-indicator[aria-expanded="true"] .ap-help-active-ring{
  opacity:1;
}@media(hover:hover) and (pointer:fine){.ap-help-indicator:hover .ap-help-active-ring{
  opacity:1;
}}

.ap-help-indicator:focus-visible svg,
.ap-help-indicator[aria-expanded="true"] svg{
  filter:drop-shadow(0 0 3px var(--ap-color-accent-border));
}@media(hover:hover) and (pointer:fine){.ap-help-indicator:hover svg{
  filter:drop-shadow(0 0 3px var(--ap-color-accent-border));
}}

.has-help[data-help]:after{display:none!important}
[role="tooltip"]:not(.ap-popup-open){
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
[role="tooltip"].ap-popup-open{
  display:block!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
.ap-mobile-help-popup{
  position:absolute;
  z-index:200;
  top:calc(100% + 8px);
  left:0;
  width:min(360px,calc(100vw - 48px));
  padding:14px;
  border:1px solid var(--ap-gold);
  border-radius:10px;
  background:#111;
  color:var(--ap-tooltip-text,#c7c7c7)!important;
  box-sizing:border-box;
  box-shadow:0 14px 32px rgba(17,17,17,.3);
  font:400 14px/1.5 Arial,sans-serif;
  white-space:pre-line;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.ap-help-template-tooltip p{margin:0 0 11px!important}.ap-help-template-tooltip p:last-child{margin-bottom:0!important}.ap-help-template-tooltip b{font-weight:800!important}
.experience-tooltip{width:min(520px,calc(100vw - 48px))!important}.experience-tooltip b{color:var(--ap-tooltip-title,var(--ap-gold))!important}
.rhythm-tooltip b{color:var(--ap-tooltip-title,var(--ap-gold))!important}
.exercise-level-tooltip{width:min(330px,calc(100vw - 48px))!important;white-space:normal!important}
.ap-help-level-table{
  width:100%;
  margin:0;
  border-collapse:collapse;
  color:var(--ap-tooltip-text,#c7c7c7);
  font:400 14px/1.35 Arial,sans-serif;
}
.ap-help-level-table :is(th,td){padding:7px 8px;border-bottom:1px solid var(--ap-color-accent-soft-strong);vertical-align:middle}
.ap-help-level-table th{width:28px;color:var(--ap-tooltip-title,var(--ap-gold));font-weight:800;text-align:center}
.ap-help-level-table td{text-align:left}
.ap-help-level-table tr:last-child :is(th,td){border-bottom:0}
.phase-goal-tooltip{
  width:min(560px,calc(100vw - 48px))!important;
  white-space:normal!important;
}
.phase-goal-tooltip__variant[hidden]{display:none!important}
.phase-goal-tooltip__table{
  width:100%;
  margin:0;
  border-collapse:collapse;
  table-layout:fixed;
  color:var(--ap-tooltip-text,#c7c7c7);
  font:400 14px/1.35 Arial,sans-serif;
}
.phase-goal-tooltip__table th,
.phase-goal-tooltip__table td{
  padding:7px 6px;
  border-bottom:1px solid var(--ap-color-accent-soft-strong);
  text-align:center;
  vertical-align:middle;
  overflow-wrap:anywhere;
}
.phase-goal-tooltip__table th:first-child,
.phase-goal-tooltip__table td:first-child{
  width:30%;
  text-align:left;
}
.phase-goal-tooltip__table th{
  color:var(--ap-tooltip-title,var(--ap-gold));
  font-weight:800;
}
.phase-goal-tooltip__table tbody tr:last-child td{border-bottom:0}
.phase-goal-tooltip__note{
  margin:10px 0 0!important;
  color:var(--ap-tooltip-text,#c7c7c7)!important;
  font:400 14px/1.45 Arial,sans-serif!important;
}
.phase-goal-tooltip__note b{
  color:var(--ap-tooltip-title,var(--ap-gold))!important;
  font-weight:800!important;
}

[role="tooltip"]>.ap-popup-close+strong,
[role="tooltip"]>.ap-popup-close+span,
[role="tooltip"]>.ap-popup-close+p{
  display:block;
  padding-right:38px;
  box-sizing:border-box;
}

.ap-popup-field-title{
  display:block;
  margin:0 38px 8px 0;
  color:var(--ap-gold);
  font-size:14px;
  font-weight:700;
  line-height:1.25;
}

.ap-popup-close{
  position:absolute;
  z-index:5;
  top:7px;
  right:7px;
  width:32px;
  height:32px;
  padding:0;
  border:1px solid color-mix(in srgb,var(--ap-gold) 72%,#fff);
  border-radius:50%;
  display:grid!important;
  place-items:center!important;
  align-items:center!important;
  justify-items:center!important;
  appearance:none!important;
  -webkit-appearance:none!important;
  background:var(--ap-gold);
  color:#111!important;
  font:0/0 Arial,sans-serif;
  line-height:0!important;
  box-sizing:border-box!important;
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 28%,transparent),0 2px 8px color-mix(in srgb,var(--ap-gold) 24%,transparent);
  cursor:pointer;
  transition:filter .16s ease,transform .16s ease,box-shadow .16s ease;
  -webkit-tap-highlight-color:transparent;
}
@media(hover:hover) and (pointer:fine){.ap-popup-close:hover{
  filter:brightness(1.08);
  transform:scale(1.04);
}}
.ap-popup-close:focus-visible{
  outline:2px solid var(--ap-tooltip-surface,#111);
  outline-offset:2px;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--ap-gold) 44%,transparent),inset 0 1px 0 color-mix(in srgb,#fff 28%,transparent);
}
.ap-popup-close:active{
  filter:brightness(.94);
  transform:scale(.96);
}
.ap-popup-close>.ap-popup-close-icon{
  position:absolute!important;
  top:50%!important;
  left:50%!important;
  display:block!important;
  width:15px!important;
  height:15px!important;
  margin:0!important;
  padding:0!important;
  overflow:visible;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:4!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  transform:translate(-50%,-50%)!important;
}

@media(min-width:761px){
  [role="tooltip"]{
    width:min(var(--ap-tooltip-desktop-width),calc(100vw - var(--ap-tooltip-desktop-edge-gap) - var(--ap-tooltip-desktop-edge-gap)))!important;
    max-width:calc(100vw - var(--ap-tooltip-desktop-edge-gap) - var(--ap-tooltip-desktop-edge-gap))!important;
    max-height:calc(100vh - var(--ap-tooltip-desktop-edge-gap) - var(--ap-tooltip-desktop-edge-gap))!important;
    box-sizing:border-box!important;
  }
  .ap-help-host>.ap-help-indicator{
    position:relative!important;
    z-index:6!important;
    width:24px!important;
    height:24px!important;
    min-width:24px!important;
    margin:0 0 0 6px!important;
    padding:0!important;
    display:inline-grid!important;
    flex:0 0 24px!important;
    place-items:center!important;
    visibility:visible!important;
    opacity:1!important;
    color:var(--ap-gold,var(--ap-gold))!important;
  }
  .ap-help-host>.ap-help-indicator svg{
    width:17px!important;
    height:17px!important;
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
  }
  [role="tooltip"]>.ap-popup-drag-handle{
    cursor:grab!important;
    user-select:none;
    touch-action:none;
  }
  [role="tooltip"].ap-popup-dragging>.ap-popup-drag-handle{cursor:grabbing!important}
  [role="tooltip"].ap-popup-dragged{z-index:4000!important}
}
@media(max-width:760px){
  .ap-help-host>.ap-help-indicator{
    position:relative!important;
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
    margin:0 0 0 5px!important;
    padding:0!important;
    flex:0 0 32px!important;
    box-sizing:border-box!important;
    appearance:none;
    -webkit-appearance:none;
    -webkit-tap-highlight-color:transparent;
  }

  .ap-help-host>.ap-help-indicator:focus,
  .ap-help-host>.ap-help-indicator:focus-visible,
  .ap-help-host>.ap-help-indicator:active,
  .ap-help-host>.ap-help-indicator[aria-expanded="true"]{
    outline:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }@media(hover:hover) and (pointer:fine){.ap-help-host>.ap-help-indicator:hover{
    outline:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }}
  [role="tooltip"]{pointer-events:auto!important}
  [role="tooltip"].ap-popup-open{
    position:fixed!important;
    z-index:3000!important;
    top:auto!important;
    right:16px!important;
    bottom:max(16px,env(safe-area-inset-bottom))!important;
    left:16px!important;
    width:auto!important;
    max-width:calc(100vw - 32px)!important;
    max-height:calc(100dvh - 24px)!important;
    overflow:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch;
    box-sizing:border-box!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    touch-action:auto!important;
    transform:none!important;
  }
  [role="tooltip"].ap-popup-dismissed{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }
  .phase-goal-tooltip__table th,
  .phase-goal-tooltip__table td{padding:7px 4px}
}
