/* = AMR Finder (tabla + filtros) ======================================= */

:root {
  --amr-border: #008aab;
  --amr-muted: #6b7280;
  --amr-bg: #ffffff;
  --amr-bg-soft: #f9fafb;
  --amr-bg-dark:#008aab;
  --amr-link: #df2e1a;
}

.amr-finder {
  display: grid;
  gap: 12px;
}

/* ---- Búsqueda rápida -------------------------------------------------- */
.amr-finder input[type="search"]{
  width: 100%;
  padding: .6rem .8rem;
  border: 1px solid var(--amr-border);
  border-radius: .5rem;
  outline: none;
}
.amr-finder input[type="search"]:focus{
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
  border-color: #93c5fd;
}

/* ---- Bloque de filtros ------------------------------------------------ */
.amr-finder details summary{
  cursor: pointer;
  font-weight: 600;
  margin-bottom: .25rem;
}
.amr-filters{
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      background: #eee;
    padding: 10px;
	border-radius:15px
}
.amr-group{
  border: 1px solid var(--amr-border);
  border-radius: .5rem;
  padding: 10px;
  background: var(--amr-bg);
}
.amr-group legend{
  padding: 0 .25rem;
  font-weight: 600;
  color:#000
}
.amr-group label{
  display: block;
  margin: .25rem 0;
}
.amr-group input[type="checkbox"]{
  margin-right: .4rem;
}

/* ---- Tabla de resultados --------------------------------------------- */
#amr-results{
  width: 100%;
  border-collapse: collapse;
  background: var(--amr-bg);
}
#amr-results th, #amr-results td{
  padding: 10px;
  border-bottom: 1px solid var(--amr-border);
  vertical-align: top;
  text-align: left;
}
#amr-results thead th{
  font-weight: 700;
  background: var(--amr-bg-dark);
  color:#fff;
  border:solid 1px var(--amr-border)
}
#amr-results tbody tr:hover{
  background: #fafafa;
}
#amr-results a{
  color: var(--amr-link);
  text-decoration: none;
  font-weight:600;
}
#amr-results a:hover{
  text-decoration: underline;
}

/* Mensaje vacío */
#amr-empty{
  color: var(--amr-muted);
}

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 768px){
  .amr-filters{
    grid-template-columns: 1fr;
  }
  /* Scroll horizontal suave de la tabla si no cabe */
  #amr-results{
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  #amr-results th, #amr-results td{
    white-space: normal;
  }
}

/* Resalta la coincidencia seleccionada dentro de Suitability (usa <strong>) */
#amr-results td strong{
  font-weight: 700;
  color:#008aab
  
}

.amr-search-title{
	color:#008aab!important
	}


.amr-finder summary::marker{
	color:#df2e1a; 
	font-size:25px
	}
	
/* --- Ayudas por término (tooltip) ------------------------------------ */
.amr-group { position: relative; }
.amr-term { position: relative; display: flex; align-items: flex-start; gap: .4rem; margin: .25rem 0; }

.amr-help{
  display:inline-block;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1px solid var(--amr-border, #e5e7eb);
  background:#fff;
  font-weight:700; line-height:16px; text-align:center;
  cursor: help; padding:0; margin-left:.15rem;
  margin-top:5px;
  color:var(--amr-border)
}

.amr-help-pop{
  position:absolute; z-index: 40;
  left: auto; top: 35px;
  min-width:250px;
  max-width: 360px;
  background:var(--amr-border); color:#fff;
  padding:.55rem .65rem; border-radius:.5rem;
  font-size:.9rem; line-height:1.35;
  box-shadow:0 6px 20px rgba(0,0,0,.18);
  display:none;
}
/* .amr-help-pop::after{ */
  /* content:""; position:absolute; left:-12px; top:8px; */
  /* border-width:6px; border-style:solid; */
  /* border-color:transparent var(--amr-border) transparent transparent; */
/* } */

  .amr-help-pop::after{
    content:""; position:absolute; left:auto; right:auto; top:-12px;
	border-width:6px; border-style:solid;
    border-color:transparent transparent var(--amr-border) transparent;
  }
/* Mostrar en hover/focus (desktop) */
.amr-help:hover + .amr-help-pop,
.amr-help:focus + .amr-help-pop { display:block; }

/* Mostrar cuando JS agrega la clase (mobile) */
.amr-help-pop.amr-show { display:block; }

/* Responsive: si no hay espacio a la derecha, despliega abajo */
@media (max-width: 640px){
  .amr-help-pop{
    left: auto; right: 0; top: 26px;
  }
  .amr-help-pop::after{
    left:auto; right:10px; top:-12px;
    border-color:transparent transparent var(--amr-border) transparent;
  }
}