/* ============================================================
   ANCE - PAGINAS INTERNAS - CSS DE VARIANTES  (v0.2)
   Inyector: ance-interna-variantes (CSS)
   Pareja:   ance-interna-variantes (JS)
   Condiciones: Tipo de contenido = Pagina interna ANCE
                + Tema = bootstrap_barrio
   Se carga junto con ance-interna (CSS comun v0.4.1 o mayor).
   Aqui va solo lo particular de cada variante. Cada una lleva
   una cabecera con este formato:
     VARIANTE #N: nombre | Paginas: ... | Requiere JS: si o no
   ------------------------------------------------------------
   REGISTRO DE VARIANTES (orden por numero)
     #1  Condiciones .............. Corrosion (nodo 61), Intemperismo (nodo 272) ... pendiente
     #3  Pruebas disponibles ...... EMC (nodo 97) ............. LISTA
     #4  Columnas desiguales ...... YA NO ES VARIANTE: lo resuelve el comun v0.4.3
     #11 Acordeon por tipo ........ Cascos y zapatos .......... pendiente
     #14 Franja de datos en rejilla Alimentos (nodo 89) ....... EN PRUEBA
     #16 Lista con iconos ......... Alimentos (nodo 89) ....... EN PRUEBA
     #22 Lista con boton de accion  Bolsa de trabajo .......... pendiente
     #23 Etiqueta de tipo en panel  Validacion GEI (nodo 74), Verificacion GEI (nodo 81)
     #24 Acreditaciones internac. . Antecedentes (nodo 78)
     #25 Documento legal (incisos)  ANCE la marca de certificacion (nodo 83)
     #26 Acordeon de normatividad . Aparatos electrodomesticos (nodo 212) ... EN PRUEBA
   Los numeros son identificadores fijos (se citan en los nodos): no se
   renumeran. Los huecos son numeros reservados o sin uso.
   ------------------------------------------------------------
   REGLAS DE ESCRITURA (Mod_Security de HostGator)
   - Solo ASCII: sin acentos, enes ni flechas, tampoco aqui.
   - Sin signos menor que ni mayor que (ni en comentarios).
   - Comillas rectas.
   ============================================================ */


/* ============================================================
   VARIANTE #1: CONDICIONES (un servicio con varios periodos)
   Paginas: Corrosion (nodo 61), Intemperismo (nodo 272)
   Requiere JS: si
   Uso: class="ance-svc ance-svc--condiciones". Un solo panel, ya
   visible y abierto en el HTML. Cada punto de la linea de tiempo
   muestra su ance-condiciones__texto (mismo orden, uno por punto).
   La etiqueta ance-condiciones__valor toma el texto de
   ance-svc__name. Sin autoplay ni barra de avance. El JS comun
   omite este contenedor.
   ============================================================ */
.ance-svc--condiciones .ance-svc__num{display:none;}
.ance-svc--condiciones .ance-svc__timeline::before{left:var(--ance-inset,5.5%);right:var(--ance-inset,5.5%);}
.ance-svc__badge{display:inline-block;background:#00049e;color:#fff;font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;margin-top:6px;letter-spacing:.5px;}
.ance-condiciones__texto{display:none;margin:6px 0 0;}
.ance-condiciones__texto.is-visible{display:block;animation:ance-svc-fadein .35s ease;}
@media (max-width:768px){
  .ance-svc--condiciones .ance-svc__dot{font-size:8px;padding:2px;}
  .ance-svc--condiciones .ance-svc__item.is-active .ance-svc__name{display:none;}
}
@media (prefers-reduced-motion: reduce){
  .ance-condiciones__texto.is-visible{animation:none;}
}

/* ============================================================
   VARIANTE #3: PRUEBAS DISPONIBLES (en lugar de normatividad)
   Paginas: EMC (nodo 97)
   Requiere JS: no
   Rejilla de 3 columnas. Cada celda lleva barra azul (nombre y
   conteo) y debajo la lista de pruebas con su norma. Se distingue
   a proposito de ance-normas. Los bordes no dependen de cuantas
   celdas haya (sirve para 4, 5 o 6 categorias).
   ============================================================ */
.ance-pruebas{display:grid;grid-template-columns:repeat(3,1fr);margin:20px 0 30px;border:0.5px solid #e0e0e0;border-radius:8px;overflow:hidden;text-align:left;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;}
.ance-pruebas__cat:nth-child(3n+2),.ance-pruebas__cat:nth-child(3n){border-left:0.5px solid #e0e0e0;}
.ance-pruebas__cat:nth-child(n+4){border-top:0.5px solid #e0e0e0;}
.ance-pruebas__cabecera{background:#00049e;padding:10px 14px;}
.ance-pruebas__nombre{font-size:11px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.5px;}
.ance-pruebas__conteo{font-size:10px;color:rgba(255,255,255,0.8);margin-top:2px;}
.ance-pruebas__cuerpo{padding:12px 14px;background:#fff;}
.ance-pruebas__prueba{padding:6px 0;border-bottom:0.5px solid #f0f0f0;}
.ance-pruebas__prueba:last-child{border-bottom:none;}
.ance-pruebas__prueba-nombre{font-size:12px;font-weight:600;color:#333;line-height:1.4;}
.ance-pruebas__prueba-norma{font-size:10px;color:#757575;margin-top:2px;line-height:1.3;}
@media (max-width:768px){
  .ance-pruebas{grid-template-columns:1fr;}
  .ance-pruebas__cat:nth-child(3n+2),.ance-pruebas__cat:nth-child(3n){border-left:none;}
  .ance-pruebas__cat:nth-child(n+2){border-top:0.5px solid #e0e0e0;}
}

/* ============================================================
   VARIANTE #14: FRANJA DE DATOS EN REJILLA (3 columnas, varias filas)
   Paginas: Alimentos (nodo 89 y demas servicios procesados)
   Requiere JS: no
   Uso: class="ance-svc__meta ance-svc__meta--rejilla".
   Con 3 campos o menos se ve como la franja normal; con 4 o 5
   pasa a dos filas. Los bordes no dependen de cuantos campos haya.
   ============================================================ */
.ance-svc__meta.ance-svc__meta--rejilla{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));}
.ance-svc__meta.ance-svc__meta--rejilla .ance-svc__meta-item{padding:10px 16px;border-right:1px solid #e8e8e8;}
.ance-svc__meta.ance-svc__meta--rejilla .ance-svc__meta-item:nth-child(3n+1){padding-left:0;}
.ance-svc__meta.ance-svc__meta--rejilla .ance-svc__meta-item:nth-child(3n){border-right:none;}
.ance-svc__meta.ance-svc__meta--rejilla .ance-svc__meta-item:last-child{border-right:none;}
.ance-svc__meta.ance-svc__meta--rejilla .ance-svc__meta-item:nth-child(n+4){border-top:1px solid #f0f0f0;}
@media (max-width:768px){
  .ance-svc__meta.ance-svc__meta--rejilla{grid-template-columns:1fr;gap:0;}
  .ance-svc__meta.ance-svc__meta--rejilla .ance-svc__meta-item{border-right:none;border-bottom:none;padding:10px 0;}
  .ance-svc__meta.ance-svc__meta--rejilla .ance-svc__meta-item:nth-child(n+2){border-top:1px solid #f0f0f0;}
}

/* ============================================================
   VARIANTE #16: LISTA CON ICONOS EN LUGAR DE NUMERO
   Paginas: Alimentos (nodo 89 y demas servicios procesados)
   Requiere JS: no (usa el JS comun de la lista)
   Uso: class="ance-lista ance-lista--iconos". En cada item, un div
   ance-lista__icono (38px) reemplaza a ance-lista__num. En el
   detalle, ance-lista__cabecera (icono grande, etiqueta y titulo)
   reemplaza al numero grande.
   ============================================================ */
.ance-lista--iconos .ance-lista__item{align-items:center;padding:14px 20px;}
.ance-lista__icono{flex:0 0 38px;width:38px;height:38px;border-radius:50%;background:#e8eaf9;color:#00049e;display:flex;align-items:center;justify-content:center;transition:background .2s ease,color .2s ease;}
.ance-lista__icono svg{width:20px;height:20px;}
.ance-lista__item.is-active .ance-lista__icono{background:#00049e;color:#fff;}
.ance-lista__cabecera{display:flex;align-items:center;gap:16px;}
.ance-lista__detalle-icono{flex:0 0 52px;width:52px;height:52px;border-radius:50%;background:#e8eaf9;color:#00049e;display:flex;align-items:center;justify-content:center;}
.ance-lista__detalle-icono svg{width:26px;height:26px;}
.ance-lista__cabecera .ance-lista__titulo{margin-bottom:0;}
.ance-lista__cabecera + .ance-lista__sub{margin-top:10px;}

/* ============================================================
   VARIANTE #23: ETIQUETA DE TIPO EN PANEL (Programa / Norma)
   Paginas: Validacion GEI (nodo 74)
   Requiere JS: no
   Pestana vertical pegada al borde derecho del panel de ance-svc.
   Texto fijo, sin enlace ni hover. Uso: el panel lleva las clases
   ance-svc__panel ance-svc__panel--etiqueta y, como primer elemento
   dentro del panel, un div con la clase ance-etiqueta-tipo y el texto.
   En escritorio sale por el margen de 40px de ance-svc; en movil pasa
   a pastilla horizontal arriba del panel.
   ============================================================ */
.ance-svc__panel.ance-svc__panel--etiqueta{position:relative;overflow:visible;}
.ance-etiqueta-tipo{position:absolute;top:28px;left:calc(100% + 1px);display:flex;align-items:center;justify-content:center;width:34px;min-height:100px;padding:12px 0;box-sizing:border-box;writing-mode:vertical-rl;background:#00049e;color:#fff;border-radius:0 10px 10px 0;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:11px;font-weight:800;letter-spacing:1.2px;line-height:1;text-transform:uppercase;white-space:nowrap;z-index:2;}
@media (max-width:768px){
  .ance-etiqueta-tipo{position:static;display:inline-flex;width:auto;min-height:0;writing-mode:horizontal-tb;margin:14px 0 0 20px;padding:6px 12px;border-radius:6px;font-size:10px;}
}

/* Extension de #23 para ance-lista (Verificacion GEI, nodo 81)
   Uso: class="ance-lista ance-lista--etiquetas". El div ance-etiqueta-tipo
   va como primer elemento dentro de cada ance-lista__panel. La etiqueta
   se ancla al marco, asi que sale por el borde derecho como las cedulas. */
.ance-lista--etiquetas .ance-lista__marco{position:relative;overflow:visible;}
@media (max-width:768px){
  .ance-lista--etiquetas .ance-etiqueta-tipo{margin:0 0 14px 0;}
}

/* ============================================================
   VARIANTE #24: ACREDITACIONES INTERNACIONALES (caja azul)
   Paginas: Antecedentes (nodo 78)
   ============================================================ */
.ance-inner-content .ance-acred-intl {
  background: #00049e;
  border-radius: 8px;
  padding: 2rem 2.5rem;
  margin: 2rem 0 3rem;
}
.ance-inner-content .ance-acred-intl h2 {
  color: #fff;
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.ance-inner-content .ance-acred-intl h2 span {
  color: #fff;
}
.ance-inner-content .ance-acred-intl ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.ance-inner-content .ance-acred-intl li {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  color: #fff;
}
.ance-inner-content .ance-acred-intl strong {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}
.ance-inner-content .ance-acred-intl li span {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}
@media (max-width: 768px) {
  .ance-inner-content .ance-acred-intl { padding: 1.5rem 1.75rem; }
}

/* ============================================================
   VARIANTE #25: DOCUMENTO LEGAL, INCISOS DE LETRA Y NUMERACION AZUL
   Requiere JS: no
   Uso: ol class ance-svc__list ance-svc__list--letras
        y strong con la numeracion (1.1, 2.1.1) dentro de ance-svc__texto
   Paginas: Nosotros - ANCE la marca de certificacion (nodo 83)
   ============================================================ */
.ance-lista ol.ance-svc__list--letras{list-style:none;padding:0;margin:8px 0 14px;counter-reset:ance-letra;}
.ance-lista ol.ance-svc__list--letras li{counter-increment:ance-letra;padding-left:28px;}
.ance-lista ol.ance-svc__list--letras li::before{content:counter(ance-letra,lower-alpha) ")";top:4px;width:auto;height:auto;border-radius:0;background:none;font-size:13px;font-weight:700;line-height:1.6;color:#00049e;}
.ance-lista__panel .ance-svc__texto strong{color:#00049e;}

/* ============================================================
   VARIANTE #26: ACORDEON DE NORMATIVIDAD
   Paginas: Aparatos electrodomesticos (nodo 212)
   Prefijo: ance-normas-acc
   Uso: lista larga de normas agrupadas por servicio (details/summary)
   Sin JS. Solo ASCII. Sin selectores hijo directo.
   ============================================================ */
.ance-normas-acc{max-width:900px;margin:0 auto 24px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;}
.ance-normas-acc__comunes{background:rgba(0,4,158,0.04);border-radius:6px;padding:14px 18px;margin:0 0 16px;}
.ance-normas-acc__item{border-top:1px solid #e0e0e0;}
.ance-normas-acc__item:last-of-type{border-bottom:1px solid #e0e0e0;}
.ance-normas-acc__item summary{list-style:none;cursor:pointer;display:flex;align-items:center;padding:16px 4px;font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;color:#222;transition:background .2s;}
.ance-normas-acc__item summary:hover{background:#f5f7ff;}
.ance-normas-acc__item summary::-webkit-details-marker{display:none;}
.ance-normas-acc__item summary::marker{content:"";}
.ance-normas-acc__item summary::after{content:"+";width:28px;height:28px;border-radius:50%;border:2px solid #00049e;display:flex;align-items:center;justify-content:center;color:#00049e;font-size:18px;font-weight:300;flex-shrink:0;transition:all .3s;}
.ance-normas-acc__item[open] summary::after{content:"-";background:#00049e;color:#fff;}
.ance-normas-acc__cnt{margin-left:auto;margin-right:14px;font-size:12px;font-weight:400;text-transform:none;letter-spacing:0;color:#888;}
.ance-normas-acc__fila{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:12px 18px;border-top:0.5px solid rgba(0,4,158,0.08);}
.ance-normas-acc__item .ance-normas-acc__fila:nth-child(even){background:rgba(0,4,158,0.04);}
.ance-normas-acc__comunes{display:flex;gap:32px;}
.ance-normas-acc__comunes .ance-normas-acc__fila{flex:1;flex-direction:column;justify-content:flex-start;gap:6px;background:transparent;padding:4px 0;border-top:0;}
.ance-normas-acc__txt{flex:1;}
.ance-normas-acc__producto{display:block;font-size:13px;font-weight:600;color:#333;line-height:1.5;}
.ance-normas-acc__titulo{display:block;font-size:12px;color:#666;line-height:1.5;margin-top:2px;}
.ance-normas-acc__codigo{font-size:13px;font-weight:700;color:#00049e;white-space:nowrap;}
@media(max-width:768px){
  .ance-normas-acc__comunes{flex-direction:column;gap:12px;}
  .ance-normas-acc__item summary{font-size:14px;padding:14px 2px;}
  .ance-normas-acc__fila{flex-direction:column;gap:4px;padding:12px 14px;}
  .ance-normas-acc__codigo{white-space:normal;}
}

/* Registro (agregar a la lista del encabezado):
     #27 Etiqueta de tipo con enlace .. Juguetes (nodos 197 y 217), Iluminacion (209), Luminarios (218)
*/

/* ============================================================
   VARIANTE #27: ETIQUETA DE TIPO CON ENLACE
   Paginas: Juguetes (nodo 197), Juguetes electricos (nodo 217),
            Iluminacion (nodo 209), Luminarios (nodo 218)
   Requiere JS: no
   Extension de #23. Igual que #23, pero la pestana es un enlace a la
   pagina relacionada. Uso: dentro del panel con las clases
   ance-svc__panel ance-svc__panel--etiqueta, primer elemento:
   a con clase ance-etiqueta-tipo y href a la pagina. El texto invita
   a ir (Ver juguetes electronicos). Solo en los paneles con referencia.
   ============================================================ */
a.ance-etiqueta-tipo,a.ance-etiqueta-tipo:visited{color:#fff;text-decoration:none;cursor:pointer;border:2px solid #00049e;transition:background .2s ease,color .2s ease;}
a.ance-etiqueta-tipo:hover,a.ance-etiqueta-tipo:focus{background:#fff;color:#00049e;border-color:#00049e;text-decoration:none;}
a.ance-etiqueta-tipo:focus-visible{outline:2px solid #00b0f0;outline-offset:2px;}