/* =========================================================
   FM – Acciones (Añadir/Eliminar + Visitado) estilo MAQUETA
   Basado en .actions-col .frm-input.checkbox de fm-mapbox.css
   ========================================================= */

.fm-obra-actions{
  display:flex;
  flex-direction:column;
  row-gap:16px;
  margin-bottom: 30px;
}

/* Botón “label” (píldola) */
.fm-obra-action{
  appearance:none;
  border:none;
  cursor:pointer;

  /* Igual que: background rgba(0,74,118,0.1) + radius 50px */
  background: rgba(0, 74, 118, 0.10);
  border-radius: 50px;

  /* Igual que label: padding 10px 20px 10px 48px; height 50px */
  padding: 10px 20px 10px 48px;
  min-height: 50px;

  /* Tipografía igual */
  font-family: 'Syne-Medium';
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.5px;

  /* Color base */
  color: #004A76;

  display:inline-flex;
  align-items:center;

  /* Para que el “circulito” se posicione como en label::before/after */
  position:relative;

  /* Que el texto no se vaya a mayúsculas (en las capturas no siempre lo está) */
  text-transform:none;

  max-width:70%;
  text-align:left;
}

.fm-obra-action:focus {
    outline: none;
}

/* Hover sutil */
.fm-obra-action:hover{
  background: rgba(0, 74, 118, 0.14);
}

/* Icono círculo vacío (equivalente a label::after) */
.fm-obra-action__icon{
  position:absolute;
  left:20px;
  top:13px;

  width:20px;
  height:20px;
  border-radius:50px;

  /* label::after { border: 2px solid #004A76; } */
  border:2px solid #004A76;
  background:none;
  box-sizing:border-box;
}

/* Punto verde cuando está activo (equivalente a label::before en checked) */
.fm-obra-action.is-active .fm-obra-action__icon{
  /* input:checked + label::before { background: #0EFFAB; } */
  background:#0EFFAB;
}

/* Estado activo: fondo azul oscuro + texto blanco (equivale a input:checked + label) */
.fm-obra-action.is-active{
  background:#004A76;
  color:#ffffff;
}

/* Mantener borde del círculo en azul (como en el CSS original) */
.fm-obra-action.is-active .fm-obra-action__icon{
  border-color:#004A76;
}

/* Ajustes responsive como en tu CSS */
@media screen and (max-width: 1023px){
  .fm-obra-action{
    font-size:16px;
    letter-spacing:-0.17px;
  }
}

@media screen and (max-width: 479px){
  .fm-obra-action{
    padding: 10px 20px 10px 44px;
  }
  .fm-obra-action__icon{
    left:14px;
  }
}